@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 {
			&:first-child {
				&::before {
					max-width: 600px;
					left: 60%;
				}
			}
			.box-data {
				ul {
					li {
						@include respond-above(lg) {
							&:nth-child(1) {
								left: 280px;
								top: -82px;

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

								p {
									max-width: 720px;

									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: 15px;
								top: 50px;
								right: 60px;

								p {
									max-width: 500px;
								}
							}

							&:nth-child(3) {
								left: 25px;
								top: 110px;
								right: 280px;

								p {
									max-width: 450px;
								}
							}

							&:nth-child(4) {
								left: 230px;
								top: 180px;
								right: 100px;

								p {
									max-width: 480px;
								}
							}

							&:nth-child(5) {
								left: 240px;
								top: 310px;
								right: 170px;
								p {
									max-width: 670px;
								}
							}

							&:nth-child(6) {
								left: 110px;
								top: 400px;
								right: 130px;
								p {
									max-width: 340px;
								}
							}

							&:nth-child(7) {
								left: 450px;
								top: 490px;

								right: 170px;
								p {
									max-width: 280px;
								}
							}

							&:nth-child(8) {
								left: 280px;
								top: 550px;
								right: 470px;

								&::after {
									display: none;
								}

								p {
									max-width: 240px;

									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: 340px;
									top: 20px;
								}
							}
							&:nth-child(2) {
								&::before {
									content: '2';
									left: 15px;
									top: 70px;
								}
							}
							&:nth-child(3) {
								&::before {
									content: '3';
									left: 30px;
									top: 150px;
								}
							}
							&:nth-child(4) {
								&::before {
									content: '4';
									left: 230px;
									top: 220px;
								}
							}
							&:nth-child(5) {
								&::before {
									content: '5';
									left: 250px;
									top: 330px;
								}
							}
							&:nth-child(6) {
								&::before {
									content: '6';
									left: 125px;
									top: 410px;
								}
							}
							&:nth-child(7) {
								&::before {
									content: '7';
									left: 436px;
									top: 485px;
								}
							}
							&:nth-child(8) {
								&::before {
									content: '8';
									left: 310px;
									top: 555px;
								}
							}
						}

						@include respond-below(xs) {
							&:nth-child(1) {
								&::before {
									left: 210px;
									top: 15px;
								}
							}
							&:nth-child(2) {
								&::before {
									left: 5px;
									top: 55px;
								}
							}
							&:nth-child(3) {
								&::before {
									left: 25px;
									top: 115px;
								}
							}
							&:nth-child(4) {
								&::before {
									left: 150px;
									top: 150px;
								}
							}
							&:nth-child(5) {
								&::before {
									left: 130px;
									top: 210px;
								}
							}
							&:nth-child(6) {
								&::before {
									left: 70px;
									top: 280px;
								}
							}
							&:nth-child(7) {
								&::before {
									left: 270px;
									top: 300px;
								}
							}
							&:nth-child(7) {
								&::before {
									left: 190px;
									top: 345px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.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;
				}
			}
		}

		.color-tiles-rows {
			display: flex;
			flex-direction: column;
			column-gap: 60px;
			row-gap: 70px;
		}

		.vp-80 {
			.color-tile-content {
				display: flex;
				flex-direction: row;
				column-gap: 80px;
				row-gap: 40px;
				align-items: center;

				@include respond-below(sm) {
					flex-direction: column-reverse;
				}
			}

			.color-tiles-data {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				column-gap: 15px;
				row-gap: 17px;
				align-items: flex-start;
				overflow: hidden;

				li {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					row-gap: 7px;
					img {
						width: 100%;
						max-width: 126px;
					}

					p {
						font-weight: 300;
						font-size: 13px;
						line-height: 15px;
						letter-spacing: 0.05em;
						text-transform: initial;
						margin-bottom: 0;
					}
				}
			}

			.tile-emblem {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 256px;
				min-width: 256px;
				height: 256px;
				border-radius: 100%;
				text-align: center;

				&-black {
					color: $cTxtWhite;
					background-color: $cBlack;
					p {
						&::before {
							background-color: $cWhite;
						}
					}
				}
				&-gray {
					color: $cTxtBlack;
					background-color: #ece9e2;
					p {
						&::before {
							background-color: $cBlack;
						}
					}
				}
				&-brown {
					color: $cTxtWhite;
					background-color: #69503b;
					p {
						&::before {
							background-color: $cWhite;
						}
					}
				}

				h2 {
					font-weight: 700;
					font-size: 25px;
					line-height: 1.2;
					letter-spacing: 0.15em;
					text-transform: uppercase;
				}
				p {
					position: relative;
					font-weight: 300;
					font-size: 15px;
					line-height: 35px;
					letter-spacing: 0.15em;
					padding-bottom: 35px;

					&::before {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						height: 1px;
						width: 70px;
					}
				}
			}

			.color-tiles {
				&:nth-child(2n + 1) {
					&:not(:first-child) {
						&::before {
							left: auto;
							right: 0;
						}

						.color-tiles-title {
							text-align: right;
							padding-left: 0;
							padding-right: 60px;

							&::before {
								left: auto;
								right: 0;
							}
						}
					}
					.color-tile-content {
						flex-direction: row-reverse;

						.color-tiles-data {
							justify-content: flex-end;
							padding-left: 0;
							padding-right: 60px;
						}

						@include respond-below(sm) {
							flex-direction: column-reverse;
						}
					}
				}
			}
		}
	}
}