@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
@import 'variables';
@import '_mixins';

.page-content {
	overflow: hidden;
}

.box-03 {
	#product-popup-box {
		.row {
			.box-data {
				ul {
					li {
						@include respond-above(lg) {
							&:nth-child(1) {
								left: 310px;
								top: -60px;

								&::before {
									bottom: 0;
								}
								&::after {
									display: none;
								}

								p {
									max-width: 600px;

									text-align: left;
									margin-left: 0;
									padding-left: 25px;
									padding-top: 0;
									padding-bottom: 45px;

									&::after {
										height: calc(100% - 18px);
										top: 0;
										left: 9px;
									}
								}
							}

							&:nth-child(2) {
								left: 250px;
								top: 20px;

								right: 250px;
								p {
									max-width: 290px;
								}
							}
							&:nth-child(3) {
								left: 380px;
								top: 150px;

								right: 260px;
								p {
									max-width: 290px;
								}
							}
							&:nth-child(4) {
								left: 265px;
								top: 270px;
								right: 50px;
								p {
									max-width: 390px;
								}
							}
							&:nth-child(5) {
								left: 190px;
								top: 370px;
								right: 180px;
								p {
									max-width: 330px;
								}
							}
							&:nth-child(6) {
								left: 225px;
								top: 460px;
								right: 50px;
								p {
									max-width: 450px;
								}
							}
							&:nth-child(7) {
								left: 370px;
								top: 545px;

								right: 130px;
								p {
									max-width: 240px;
								}
							}

							&:nth-child(8) {
								left: 270px;
								top: 630px;

								&::after {
									display: none;
								}

								p {
									max-width: 220px;

									margin-left: 0;
									padding-top: 50px;
									padding-left: 25px;
									text-align: left;

									&::after {
										left: 9px;
										top: 18px;
										height: calc(100% - 18px);
									}
								}
							}
						}

						@include respond-below(lg) {
							&:nth-child(1) {
								&::before {
									content: '1';
									left: 380px;
									top: 10px;
								}
							}
							&:nth-child(2) {
								&::before {
									content: '2';
									left: 270px;
									top: 40px;
								}
							}
							&:nth-child(3) {
								&::before {
									content: '3';
									left: 385px;
									top: 160px;
								}
							}
							&:nth-child(4) {
								&::before {
									content: '4';
									left: 270px;
									top: 240px;
								}
							}
							&:nth-child(5) {
								&::before {
									content: '5';
									left: 210px;
									top: 320px;
								}
							}
							&:nth-child(6) {
								&::before {
									content: '6';
									left: 250px;
									top: 420px;
								}
							}
							&:nth-child(7) {
								&::before {
									content: '7';
									left: 380px;
									top: 545px;
								}
							}
							&:nth-child(8) {
								&::before {
									content: '8';
									left: 320px;
									top: 630px;
								}
							}
						}

						@include respond-below(xs) {
							&:nth-child(1) {
								&::before {
									left: 250px;
									top: 15px;
								}
							}
							&:nth-child(2) {
								&::before {
									left: 175px;
									top: 40px;
								}
							}
							&:nth-child(3) {
								&::before {
									left: 275px;
									top: 115px;
								}
							}
							&:nth-child(4) {
								&::before {
									left: 200px;
									top: 170px;
								}
							}
							&:nth-child(5) {
								&::before {
									left: 130px;
									top: 240px;
								}
							}
							&:nth-child(6) {
								&::before {
									left: 175px;
									top: 320px;
								}
							}
							&:nth-child(7) {
								&::before {
									left: 260px;
									top: 400px;
								}
							}
							&:nth-child(8) {
								&::before {
									left: 150px;
									top: 460px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-05 {
	#product-colors {
		.color-tiles-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 60px;
			row-gap: 70px;

			@include respond-below(sm) {
				grid-template-columns: 1fr;
			}
		}

		.color-tiles-title {
			padding-left: 60px;
			&::before {
				width: 40px;
			}
		}
		.color-tiles-data {
			display: flex;
			flex-direction: column;
			row-gap: 17px;
			overflow: hidden;

			li {
				img {
					width: 100%;
					max-width: 126px;
				}
			}
		}
	}
}

.box-08 {
	&#our-catalog {
		.scontainer-content {
			& > .row {
				&:nth-child(1) {
					.col-12 {
						&::before {
							content: '';
							position: absolute;
							inset: 0 15px;
							background-color: $cBlack;
						}

						img {
							position: relative;
						}
					}
				}
				&:nth-child(2) {
					a {
						font-size: 17px;
						letter-spacing: 0.05em;
						line-height: 20px;
					}

					span.line {
						&::before {
							content: '';
							position: absolute;
							left: 15px;
							right: 15px;
							height: 9px;
						}

						&:nth-child(1) {
							&::before {
								bottom: 45px;
								background: rgba(231, 220, 208, 0.8);
							}
						}
						&:nth-child(2) {
							&::before {
								bottom: 25px;
								background: #d8d8d8;
							}
						}
						&:nth-child(3) {
							&::before {
								bottom: 5px;
								background: #6c6d70;
							}
						}
					}
				}
			}
		}
	}
}