@import '_mixins';
@import '_variables';

.hero-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 785px;
	background-image: url('/upload/filemanager/images/persiane-in-alluminio/baner-new.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	#scontainer-54 {
		h1 {
			position: relative;
			color: $cTxtWhite;
			font-size: 65px;
			letter-spacing: 1px;
			font-weight: 600;
			font-family: $font-1;
			text-align: center;
			line-height: 1;
			margin-bottom: 20px;
			padding-bottom: 20px;

			strong {
				font-size: 90px;
				font-weight: 800;

				@include respond-below(sm) {
					font-size: 50px;
				}
			}

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				height: 2px;
				width: 267px;
				background: #fff;
			}

			@include respond-below(sm) {
				font-size: 35px;
			}
		}
		p {
			color: $cTxtWhite;
			font-size: 20px;
			letter-spacing: 1px;
			font-weight: 400;
			font-family: $font-1;
			text-align: center;

			&:not(:last-child) {
				margin-bottom: 0;
			}

			@include respond-below(sm) {
				font-size: 16px;
			}
		}
	}
}

// ~~~~~~~~
.nav_tabs_title {
	color: #000;
	font-family: $font-5;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 50px;
	margin-top: 85px;
}
#nav_tabs {
	margin: 0 0 100px 0;
	padding: 0;
	list-style: none;

	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 70px;

	@include respond-below(sm) {
		column-gap: 30px;
	}

	li {
		border: 1px solid #000;
		transition: all 0.3s ease;

		width: 100%;
		max-width: 300px;

		@include respond-below(sm) {
			max-width: 180px;
		}

		&.active {
			background: #000;
			a {
				color: $cTxtWhite;
			}
		}

		a {
			display: block;
			color: $cTxtBlack;
			font-size: 32px;
			letter-spacing: 1px;
			line-height: 1.4;
			font-weight: 700;
			font-family: $font-5;
			text-align: center;
			text-transform: uppercase;
			padding: 30px 10px;

			u {
				display: block;
				text-decoration: none;
			}

			@include respond-below(sm) {
				font-size: 18px;
				line-height: 1.3;
				padding: 10px 5px;
			}
		}
	}
}

#product-preview-box {
	margin-bottom: 120px;

	@include respond-below(sm) {
		margin-bottom: 70px;
	}

	.product-preview {
		&:not(.active) {
			display: none;
		}

		.row {
			@include respond-below(md) {
				flex-direction: column-reverse;
				row-gap: 50px;
			}
		}

		.product_info_text {
			@include respond-above(md) {
				border-right: 2px solid #000;
			}

			.manufacturer-box {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
			}
			h2 {
				color: $cTxtBlack;
				font-size: 32px;
				font-weight: 700;
				font-family: $font-5;
				text-transform: uppercase;
				margin-bottom: 30px;
			}

			ol {
				counter-reset: custom-counter;
				list-style: none;

				li {
					counter-increment: custom-counter;
					position: relative;
					padding-left: 20px;

					&:not(:last-child) {
						margin-bottom: 20px;
					}

					&::before {
						content: counter(custom-counter);

						position: absolute;
						left: 0;
						top: -2px;
						transform: translateX(-100%);

						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 32px;
						height: 32px;
						border-radius: 100%;
						background: #f4f4f4;

						color: $cTxtBlack;
						font-family: $font-6;
						font-size: 18px;
						font-weight: 700;
						line-height: 1;
					}
				}
			}
		}

		.illustration_product_slider {
			.swiper-wrapper {
				.swiper-slide {
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						max-height: 500px;
						width: fit-content !important;
					}
				}
			}

			.swiper-navigation {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: center;
				gap: 300px;

				@include respond-below(sm) {
					gap: 200px;
				}

				.swiper-button-disabled {
					opacity: 0.6;
				}

				.swiper-slide-next {
					position: relative;
					cursor: pointer;
					transition: opacity 250ms ease-in;

					img {
						width: 50px;
						height: 50px;
					}
				}

				.swiper-slide-prev {
					position: relative;
					cursor: pointer;
					transition: opacity 250ms ease-in;

					img {
						width: 50px;
						height: 50px;
					}
				}

				.swiper-pagination {
					top: auto;
					bottom: 23px;
					max-width: 250px;
					left: 50%;
					transform: translateX(-50%);
					background: #d9d9d9;

					&-progressbar-fill {
						background: #000000;
					}

					@include respond-below(sm) {
						max-width: 100px;
					}
				}
			}
		}
	}
}

body#page-22 {
	.footer_top_box {
		display: none;
	}
}

#product-colors-box {
	.product-colors {
		display: none;

		&.active {
			display: block;
		}
		.row {
			&-1 {
				margin-bottom: 25px;

				> div {
					display: flex;
					flex-direction: row;
					align-items: baseline;
					column-gap: 10px;
				}

				h3 {
					color: $cTxtBlack;
					font-size: 24px;
					font-weight: 700;
					font-family: $font-5;
					margin: 0;
				}
				p {
					color: $cTxtBlack;
					font-size: 12px;
					font-weight: 300;
					font-family: $font-5;
					text-transform: uppercase;
					margin: 0;
				}
			}
			&-2 {
				ul {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					column-gap: 35px;
					row-gap: 15px;
					padding: 0;
					margin: 0;
					list-style: none;

					li {
						img {
							width: 100%;
							max-width: 98px;
						}
						p {
							color: $cTxtBlack;
							font-size: 12px;
							font-weight: 700;
							font-family: $font-5;
							margin: 0;
						}
					}
				}
			}
		}
	}
}

#product-drafts-box {
	margin-top: 230px;

	@include respond-below(sm) {
		margin-top: 150px;
	}

	.product-drafts {
		display: none;

		&.active {
			display: block;
		}

		&[model='model-mb-sunshades'] {
			.row {
				&-2 {
					row-gap: 100px;
				}
			}
		}

		.row {
			&-1 {
				margin-bottom: 200px;
				@include respond-below(sm) {
					margin-bottom: 100px;
				}
			}
			&-2 {
				margin-bottom: 200px;
				row-gap: 150px;

				@include respond-below(sm) {
					margin-bottom: 100px;
					row-gap: 70px;
				}
			}
			&-3 {
				margin-bottom: 200px;
				margin-top: 150px;

				@include respond-below(sm) {
					margin-bottom: 100px;
					margin-top: 70px;
				}

				@include respond-above(md) {
					> div {
						&:not(:last-child) {
							border-right: 1px solid #d9d9d9;
						}
					}
				}

				.img-box {
					padding: 0 30px;
				}
			}
			&-4 {
				margin-bottom: 150px;
				margin-top: 150px;
				@include respond-below(sm) {
					margin-bottom: 100px;
					margin-top: 100px;
				}
			}

			> div {
				&:not(.col-12) {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		h3 {
			color: $cTxtBlack;
			font-size: 24px;
			font-weight: 700;
			font-family: $font-5;
			text-transform: uppercase;
			margin: 0 0 50px 0;
		}

		p {
			color: $cTxtBlack;
			font-size: 18px;
			font-weight: 700;
			font-family: $font-6;
			text-transform: uppercase;
			margin: 0;
			text-align: center;
		}

		img {
			width: 100%;
			max-width: fit-content;
		}

		.img-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 50px;
		}
	}
}

#product-banners-box {
	.product-banner {
		display: none;

		&.active {
			display: block;
		}

		img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			max-width: fit-content;
		}

		.row {
			> div {
				padding: 0;
			}
		}
	}
}

html {
	.fancybox__container {
		.fancybox__viewport {
			.fancybox__content {
				img {
					transform: scale(3);
				}
			}
		}
	}
}