/* page_product-detail.less */

@import "main.less";

.page_product-detail-fabric {

	.content_wrapper {
		.product_zoom:hover {
			cursor: -webkit-zoom-in;
			cursor: zoom-in;
		}

		.left_section {
			top: 95px;

			@media print {
				position: relative;
				top     : 0;
			}
		}

		.icon_info {
			width: 28px;
		}

		.info_tag {
			background-color: @color_info_tage;
			color           : #fff;
			font-family     : @fonts_barlow;
			font-weight     : 500;
			font-size       : 15px;
			padding         : 5px 15px;
			display         : inline-block;
			margin-bottom   : 15px;
		}

		.sub_text {
			font-family: @fonts_barlow_semi_condensed;
			font-weight: 700;
			font-size  : 20px;
			line-height: normal;
			color      : @color_green;
			margin     : 0 0 5px 0;
		}

		h1 {
			position   : relative;
			font-family: @fonts_barlow;
			font-weight: 700;
			font-size  : 38px;
			color      : @color_green;

			@media print {
				font-size: 28px;
			}
		}

		h2 {
			position   : relative;
			font-family: @fonts_barlow;
			font-weight: 700;
			font-size  : 38px;
			color      : @color_green;

			@media @small {
				font-size  : 28px;
				line-height: 38px;
			}
		}

		h3 {
			position   : relative;
			font-family: @fonts_barlow_condensed;
			font-weight: 500;
			font-size  : 28px;
			color      : @color_green;

			@media print {
				font-size: 20px;
			}
		}

		td {
			@media print {
				font-size: 12px;
			}
		}

		.container_product_wrap {

			.text {
				h3 {
					position   : relative;
					font-family: @fonts_barlow;
					font-weight: 700;
					font-size  : 20px;
					color      : @color_green;
				}
			}

			.text.white {
				h3 {
					position   : relative;
					font-family: @fonts_barlow;
					font-weight: 700;
					font-size  : 32px;
					color      : #fff;
				}
			}
		}

	}

	.others_color {
		color: #23272A;

		img {
			height: 60px;
		}

		.others_color_container {
			display: flex;

			.color_item {
				border-width : 1px;
				border-style : solid;
				border-radius: 5px;
				margin-bottom: 5px;
				border-color : #bdbfc0;
				margin-right : 15px;
				width        : 160px;

				@media @small {
					width: 140px;
				}

				div {
					width        : 100%;
					height       : 70px;
					border-radius: 5px;
					border       : 2px solid #fff;
				}
			}

			.color_name {
				width        : 160px;
				min-width    : fit-content;
				margin-bottom: 15px;

				@media @small {
					width: 100%;
				}
			}
		}
	}

	.btn_save {
		a {
			text-decoration: none;
		}
	}

	.text_medium {
		font-family: @fonts_barlow;
		font-weight: 500;

		@media print {
			font-size: 12px;
		}
	}

	.table-striped>tbody>tr:nth-child(2n+1)>td,
	.table-striped>tbody>tr:nth-child(2n+1)>th {
		background-color: rgba(234, 240, 244, 0.5);
	}

	.slider_wrap {

		.slick-slide {

			.front_product {

				a {
					display        : inline-block;
					background     : #fff;
					padding        : 10px 20px;
					font-family    : @fonts_barlow;
					font-weight    : 400;
					font-size      : 18px;
					color          : @color_green;
					text-decoration: none;
				}
			}

			.img_big_product {
				width: 100%;
			}
		}

	}

	.container_product_wrap {

		.position-relative {
			margin: 0 2px;
		}

	}

	.recently_viewed {
		.container_product_wrap {

			.d-grid {
				grid-template: repeat(1, 1fr) / repeat(3, 1fr);
				gap          : 15px;
			}

			h2 {
				color: #fff;
			}
		}
	}

	.slider_visited_wrap {

		.slick-next:before,
		.slick-prev:before {
			color: @color_green;
		}

		.slick-slide>div {
			margin: 0 5px;
		}

		a {
			/*background: linear-gradient(180deg, #fff 50%, #EAF0F4 50%);*/
			padding   : 30px 30px 120px 30px;
			display   : inline-block;
			position  : relative;
			transition: 0.3s;

			&:hover {
				/*background: linear-gradient(180deg, #fff 50%, #D6E0E8 50%);*/

				.img_product {
					top: -30px;
				}

				&:before {
					background: #D6E0E8;
					height    : 70%;
				}

			}

			&:before {
				content   : '';
				position  : absolute;
				bottom    : 0;
				left      : 0;
				background: #EAF0F4;
				width     : 100%;
				height    : 50%;
				transition: 0.3s;
			}

		}

		.text {
			left : 30px;
			right: 30px;

			h4 {
				font-family   : @fonts_barlow;
				font-size     : 16px;
				font-weight   : 700;
				text-transform: uppercase;
				margin        : 0 0 10px 0;
				color         : @color_green;
			}
		}
	}
}

.page_product-detail-product {

    .cta_motorized_rails_container {
        position: relative;
        padding: 100px 0;

        @media @small_medium {
            padding: 0;
        }
        .cta_motorized_rails {
            position: relative;
            background-color: white;
            .cta_wrapper {
                display: flex;
                align-items: center;
                padding: 100px 60px;

                @media @small_medium  {
                    padding: 40px 24px;
                    flex-direction: column;
                }
    
                &_left {
                    padding-right: 64px;
                    width: 50%;
                    @media @small_medium {
                        width: 100%;
                        padding-right: 0;
                        padding-bottom: 30px;
                    }
                    img {
                        max-width: 100%;
                    }
                }
                &_right {
                    padding-left: 64px;
                    width: 50%;
                    @media @small_medium {
                        width: 100%;
                        padding-left: 0;
                    }
                    h2 {
                        font-size: 42px;
                        line-height: 1.2;
                        @media @small {
                            font-size: 25px;
                        }
                    }
                    h3 {
                        font-size: 34px;
                        color: #445B6D;
                        font-family: @fonts_barlow_condensed;
                        font-weight: 600;
                        @media @small_medium {
                            font-size: 19px;
                        }
                    }
                    p {
                        font-family: "Roboto";
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 1.2;
                        margin: 0;
                        max-width: 75%;
                        @media @small_medium {
                            font-size: 17px;
                            max-width: 100%;
                        }
                        + p {
                            margin-top: 20px;
                        }
                    }
                    a.btn {
                        @media @small_medium {
                            max-width: 75%;
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
    }

	.section_twocol {
		padding: 60px 0;

		.two_col_container {
			@media @small {
				margin-bottom: 30px;
			}
		}
	}

	.section_advantage {
		margin: 0;
	}

	.section_toile {

		.section_toile_text {
			background : #fff;
			padding    : 60px;
			margin-top : -220px;
			position   : relative;
			z-index    : 1;
			margin-left: -15px;

			@media @small {
				margin : 0;
				padding: 0;
			}
		}

		.top_title {
			position      : relative;
			font-family   : @fonts_barlow;
			font-size     : 22px;
			text-transform: uppercase;
			color         : @color_green;

			@media @small {
				font-size: 18px;
			}

			&:before {
				content     : '';
				border-top  : 1px solid @color_green;
				width       : 120px;
				margin-right: 40px;
			}
		}

		h3 {
			font-family   : @fonts_barlow;
			font-size     : 28px;
			font-weight   : 700;
			text-transform: uppercase;
			color         : @color_green;

			@media @small {
				font-size: 25px;
			}
		}

		.icon_pieces {

			justify-content: center;

			@media @small {
				justify-content: flex-start;
			}

			a {
				display        : inline-block;
				font-family    : @fonts_barlow;
				font-size      : 16px;
				text-transform : uppercase;
				text-decoration: none;
				color          : @color_green;

				span {
					display       : block;
					font-family   : @fonts_barlow;
					font-size     : 16px;
					text-transform: uppercase;
					color         : @color_green;
				}
			}
		}

	}

	.container_product_wrap {
		.d-flex {

			@media @small {
				padding: 0 5px;
			}
		}

		.text.white {
			.product_wrap_title {
				position     : relative;
				font-family  : @fonts_barlow;
				font-weight  : 700;
				font-size    : 20px;
				color        : #fff;
				margin-bottom: 5px;

				@media @small_medium {
					font-size     : 14px;
					font-weight   : bold;
					letter-spacing: 1.27px;
					line-height   : 17px;
				}
			}

			.product_wrap_subtitle {
				font-size    : 1rem;
				margin-bottom: 0;

				@media @small_medium {
					font-size     : 12px;
					font-weight   : bold;
					letter-spacing: 1.27px;
					line-height   : 17px;
					margin-bottom : 0;
				}

			}
		}

		.product_arrow {
			width : 56px;
			height: 56px;

			@media @small {
				width : 26px;
				height: 26px;
			}
		}
	}

}

.header_hero {
	.header_hero_img {
		@media @small_medium {
			min-height: 30vh;
		}

		img {
			object-fit: cover;
		}
	}

	h1 {
		font-size: 100px;

		@media @small_medium {
			display: none;
		}
	}
}


.page_product-detail-room {

	.section_toile {

		.section_toile_title {
			text-transform: uppercase;
			font-family   : 'Barlow Semi Condensed', sans-serif;
			font-weight   : 700;
			font-size     : 42px;
			color         : #445B6D;

			@media @small {
				font-size  : 28px;
				line-height: 38px;
			}
		}

		.section_toile_text {
			background : #fff;
			padding    : 60px;
			margin-top : -220px;
			position   : relative;
			z-index    : 1;
			margin-left: -15px;
		}

		.top_title {
			position      : relative;
			font-family   : @fonts_barlow;
			font-size     : 22px;
			text-transform: uppercase;
			color         : @color_green;

			@media @small {
				font-size: 18px;
			}

			&:before {
				content     : '';
				border-top  : 1px solid @color_green;
				width       : 120px;
				margin-right: 40px;
			}
		}

		h3 {
			font-family   : @fonts_barlow;
			font-size     : 28px;
			font-weight   : 700;
			text-transform: uppercase;
			color         : @color_green;
		}

		.icon_pieces {

			justify-content: center;

			@media @small {
				justify-content: flex-start;
			}

			a {
				display        : inline-block;
				font-family    : @fonts_barlow;
				font-size      : 16px;
				text-transform : uppercase;
				text-decoration: none;
				color          : @color_green;

				span {
					display       : block;
					font-family   : @fonts_barlow;
					font-size     : 16px;
					text-transform: uppercase;
					color         : @color_green;
				}
			}
		}
	}

	.bg_black_2col {
		background: #fff;
		color     : #000;

		p {
			color: #000;
		}

		h2 {
			font-size: 42px;
			color    : @color_green;
		}

		.top_title {

			&:before {

				border-top: 1px solid #000;

			}
		}

	}

}


.header_hero_banner {
	background-size    : cover;
	background-position: center;
	min-height         : 40vh;
	margin             : 0;

	.header_hero_text {
		padding: 40px 0;

		.header_hero_title {
			color         : #fff;
			font-size     : 50px;
			font-weight   : bold;
			letter-spacing: 2.8px;
			line-height   : 55px;
			text-align    : center;
			text-transform: uppercase;

			@media @medium {
				font-size     : 50px;
				line-height   : 52px;
				letter-spacing: 1px;
			}

			@media @small {
				font-size     : 23px;
				letter-spacing: 0.44px;
				line-height   : 28px;
			}
		}

		.header_hero_subtitle {
			font-size     : 24px;
			letter-spacing: 0;
			line-height   : 28px;
			text-align    : center;
			color         : #fff;

			@media @small {
				font-size     : 15px;
				letter-spacing: 0;
				line-height   : 21px;
			}
		}
	}
}

.top_slider_container {
	margin: 150px 0;

	@media @medium {
		margin: 80px 0;
	}

	@media @small {
		margin: 40px 0;
	}

	.slider_wrap .slick-dots li button {
		display: none;
	}

	.service_name {
		color         : #445B6D;
		font-family   : "Barlow Semi Condensed";
		font-size     : 42px;
		font-weight   : bold;
		letter-spacing: 0;
		line-height   : 50px;
		text-transform: uppercase;

		@media @small {
			font-size     : 24px;
			letter-spacing: 0.75px;
			line-height   : 31px;
			padding-top: 20px;
		}
	}

	.service_description {
		color         : #000000;
		font-size     : 20px;
		letter-spacing: 0;
		line-height   : 26px;

		@media @small {
			font-size     : 17px;
			letter-spacing: 0;
			line-height   : 24px;
		}
	}

	.img_big_product {
		width     : 100%;
		object-fit: cover;
	}
}

.slider_container {
	width         : 100%;
	padding       : 4px;
	overflow      : auto;
	white-space   : nowrap;
	padding-bottom: 50px;

	&::-webkit-scrollbar {
		height       : 6px;
		width        : thin;
		border-radius: 5px;
		margin       : 0 100px;
	}

	/* Track */
	&::-webkit-scrollbar-track {
		background   : #D6E0E8;
		width        : 84px !important;
		border-radius: 5px;
	}

	/* Handle */
	&::-webkit-scrollbar-thumb {
		background   : #A8B5C0;
		width        : 84px !important;
		border-radius: 5px;
	}

	/* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	.compatible_slide {
		width       : 445px;
		display     : inline-block;
		margin-right: 50px;

		.compatible_product_name {
			font-size     : 22px;
			font-weight   : bold;
			letter-spacing: 2px;
			line-height   : 26px;
			margin        : 0;
		}

		a {
			text-decoration: none;
		}
	}
}

.popover {
	min-width       : 450px;
	padding         : 10px 0;
	border-radius   : 0;
	background-color: #EAF0F4;

	@media @small {
		min-width: 100%;
	}

	.popover-arrow {
		&:before {
			border-color       : 1px solid rgba(0, 0, 0, .2);
			border-top-color   : transparent !important;
			border-bottom-color: transparent !important;
		}

		&:after {
			border-color       : #EAF0F4;
			border-top-color   : transparent !important;
			border-bottom-color: transparent !important;
		}
	}

	.popover-header {
		background: transparent;
		border    : none;

		.tip_header {
			font-size     : 30px;
			font-weight   : bold;
			letter-spacing: 0.47px;
			line-height   : 36px;
			margin        : 0;

			.tip_title {
				vertical-align: middle;
				text-transform: uppercase;
			}
		}

		.tip_close_icon_container {
			text-align: right;

			.tip_close_icon {
				text-align: right;
			}
		}
	}

	.tip_content {
		color         : #000000;
		font-family   : 'Roboto';
		font-size     : 16px;
		letter-spacing: 0;
		line-height   : 20px;
		vertical-align: middle;

		a {
			color         : #445B6D;
			font-size     : 16px;
			letter-spacing: 0;
			line-height   : 21px;
		}
	}

	.tip_icon {
		img {
			width: 22px;
		}
	}

	.tip_close_icon {
		display: block;
		cursor : pointer;

		img {
			width: 34px;
		}
	}
}

.other_services_section {
	margin: 120px 0;

	.other_service_container {
		margin: 50px 0;

		.service_txt {
			cursor: pointer;

			.service_txt_title {
				font-size     : 42px;
				font-weight   : bold;
				letter-spacing: 0;
				line-height   : 50px;
				text-transform: uppercase;

				@media @small {}
			}
		}
	}
}

.top_footer_link {
	margin-top: 50px;
}

.page_product-detail-inspirations {

	.inspiration_slider {
		img {
			width          : 100%;
			object-fit     : cover;
			object-position: center;
			max-height     : 90vh;
		}
	}

	.slick-arrow {
		/*display: none !important;*/
        @media @small {
            width: 25px;
        }
        img {
            max-width: 100%;
        }
	}

	.slick-dots {
		text-align: center;
		right     : 0;

        @media @small {
            bottom: 15px;
            border-radius: 10px;
        }

        li {
            &.slick-active {
                button {
                    @media @small {
                        width: 40px;
                    }
                    &:before {
                        @media @small {
                            width: 20px;
                        }
                    }
                }
            }
            button {
                @media @small {
                    width: 40px;
                }
                &:before {
                    @media @small {
                        width: 20px;
                    }
                }
            }
            &:first-child {
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }
            &:last-child {
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }
        }
	}

	.inspiration_text {
		margin: 120px 0;

		@media @small {
			margin: 60px 0;
		}

		.inspiration_post_date {
			color         : #BCBFC2;
			font-size     : 24px;
			letter-spacing: 0;
			line-height   : 27px;
			text-transform: uppercase;

			@media @small_medium {
				font-size     : 16px;
				letter-spacing: 0;
				line-height   : 16.2px;
			}

			hr {
				height        : 1px;
				display       : inline-block;
				width         : 182px;
				vertical-align: middle;
				margin-left   : 50px;

				@media @small {
					width: 110px;
				}
			}
		}

		.inspiration_title {
			color         : #2C3944;
			font-family   : "Barlow Semi Condensed";
			font-size     : 42px;
			font-weight   : bold;
			letter-spacing: 0;
			line-height   : 50px;
			margin-top    : 20px;

			@media @small_medium {
				font-size     : 25px;
				letter-spacing: 0;
				line-height   : 28px;
			}
		}

		.inspiration_desc {
			color         : #000000;
			font-family   : 'Roboto';
			font-size     : 22px;
			letter-spacing: 0;
			line-height   : 28px;

			@media @small {
				font-size     : 17px;
				letter-spacing: 0;
				line-height   : 24px;
			}
		}
	}

	.featured_product {
		margin        : 50px 0;
		color         : #445B6D;
		font-family   : "Barlow Semi Condensed";
		font-size     : 42px;
		font-weight   : bold;
		letter-spacing: 0;
		line-height   : 50px;

		@media @small_medium {
			font-size     : 23px;
			letter-spacing: 0;
			line-height   : 31px;
		}
	}

	.container_product_wrap {
		.product_slider {

			@media @small_medium {
				display              : grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				grid-auto-flow       : column;
				grid-auto-columns    : minmax(250px, 1fr);
				overflow-x           : auto;
				padding-bottom       : 10px;


				&::-webkit-scrollbar {
					height       : 6px;
					width        : thin;
					border-radius: 5px;
					margin       : 0 100px;
				}

				/* Track */
				&::-webkit-scrollbar-track {
					background   : #D6E0E8;
					width        : 84px !important;
					border-radius: 5px;
				}

				/* Handle */
				&::-webkit-scrollbar-thumb {
					background   : #A8B5C0;
					width        : 84px !important;
					border-radius: 5px;
				}

				/* Handle on hover */
				&::-webkit-scrollbar-thumb:hover {
					background: #555;
				}
			}
		}
	}
}

.me-2 {
	width: 100%;
}

.bookmark_container {

	@media @small_medium {
		margin-bottom: 20px;
	}

	#save_bookmarked_label {
		display  : block;
		width    : 100%;
		min-width: 100px;
	}

	.bookmark_svg_container {
		fill: none;
	}

	.bookmark_svg_icon {
		stroke: #23272A;
	}

	[data-product-status="bookmarked"] {

		.bookmark_button {
			background-color: #445B6D;

			svg {

				.bookmark_svg_container {
					fill: none;
				}

				.bookmark_svg_icon {
					stroke: #fff;
				}
			}
		}
	}
}



.page_product-detail-systems {}

/* responsive media queries */

@media (max-width: 1399.98px) {}

@media (max-width: 1199.98px) {
	.page_toile {
		.recently_viewed {
			.container_product_wrap {

				.d-grid {
					grid-template: auto / repeat(2, 1fr);
					gap          : 15px;
				}

			}
		}
	}
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {

	.page_product-detail-fabric {
		.recently_viewed {
			.container_product_wrap {

				.d-grid {
					grid-template: repeat(1, 1fr) / repeat(1, 1fr);
					gap          : 0px;
					column-gap   : 0;
					row-gap      : 15px;
				}

			}
		}

		.detaillant_wrap {
			padding: 0 0px 60px 0px;
		}
	}

	.page_toile {
		.recently_viewed {
			.container_product_wrap {

				.d-grid {
					grid-template: auto / repeat(1, 1fr);
					gap          : 0px;
					column-gap   : 0;
					row-gap      : 15px;
				}

			}
		}
	}

}

@media (max-width: 575.98px) {}