.popularshades-nilaya-variant{width:100%;padding:40px}
.popularshades-nilaya-variant .mobile-only{display:none}
@media(min-width:320px) and (max-width:991px){.popularshades-nilaya-variant .mobile-only{display:block;display:flex;justify-content:center}
}
.popularshades-nilaya-variant .desktop-only{display:inline-flex;margin-right:9px}
@media(min-width:320px) and (max-width:991px){.popularshades-nilaya-variant .desktop-only{display:none}
}
.popularshades-nilaya-variant .desktop-only .animated-arrow-button{font-size:16px;line-height:24px;height:44px;color:#232426}
.popularshades-nilaya-variant .popularshades-variant-title{font-size:40px;font-weight:800;line-height:42px;margin-bottom:0;color:#1d1d1f;letter-spacing:-1px}
.popularshades-nilaya-variant .popularshades-variant-tabs-section{display:flex;width:100%;padding:0;margin:15px;align-items:center;gap:0;margin:25px 0 40px;justify-content:space-between}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options-wrapper{overflow-x:auto;white-space:nowrap;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options{display:flex;gap:60px}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option{font-weight:400;cursor:pointer;position:relative;padding-bottom:6px;white-space:nowrap;line-height:33.6px;color:#232426;font-size:24px}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option.active{font-weight:800}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option.active:after{content:"";position:absolute;bottom:-4px;left:0;width:60%;height:3px;background-color:#fdbf45;border-radius:2px}
.popularshades-nilaya-variant .common-slides-layout{display:flex;height:640px;overflow:hidden;width:100%}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option{position:relative;width:100px;display:flex;flex-direction:column;align-items:flex-start;gap:43px}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .img-swatch{width:auto;height:auto;cursor:pointer;position:relative;transition:transform .2s ease}
@media(min-width:500px) and (max-width:991px){.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .img-swatch{width:auto !important}
}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .img-swatch img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .circle{position:absolute;width:26px !important;height:26px !important;border:1px solid #fff;border-radius:50%;background-color:transparent;transition:top .4s ease,left .4s ease;pointer-events:none;z-index:1;top:21.9938px;left:21.0312px}
@media(min-width:320px) and (max-width:991px){.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .circle{top:22px;left:21px}
}
.popularshades-nilaya-variant .common-slides-layout .selected-image{width:100%}
.popularshades-nilaya-variant .common-slides-layout .selected-image .main-image{width:100%;height:640px;object-fit:cover;border-radius:6px;opacity:1 !important;transition:opacity .3s ease}
@media(min-width:995px) and (max-width:1390px){.popularshades-nilaya-variant .common-slides-layout .selected-image .main-image{object-fit:fill}
}
.popularshades-nilaya-variant .common-slides-layout .swatch-carousel{margin-top:6px}
.popularshades-nilaya-variant .common-slides-layout .swatch-carousel .img-swatch{overflow:hidden;position:relative;cursor:pointer;width:auto;height:auto}
.popularshades-nilaya-variant .common-slides-layout .swatch-carousel .img-swatch img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
@media(min-width:320px) and (max-width:991px){.popularshades-nilaya-variant{width:100%;padding:0;padding-left:16px}
.popularshades-nilaya-variant .popularshades-variant-title{text-align:start;font-size:32px;line-height:41.6px;color:#2e2f32;letter-spacing:normal}
.popularshades-nilaya-variant .popularshades-variant-tabs-section{margin:20px 0}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options{width:350px;gap:20px;overflow-y:hidden;overflow-x:auto;scrollbar-width:none;display:flex;width:100%;padding-right:2px}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option{font-size:16px;line-height:24px;padding-bottom:3px}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option.active{font-weight:700}
.popularshades-nilaya-variant .popularshades-variant-tabs-section .options .option.active:after{bottom:0}
.popularshades-nilaya-variant .common-slides-layout{display:flex;flex-direction:column;width:100%;height:auto}
.popularshades-nilaya-variant .common-slides-layout .selected-image{height:420px;width:auto;margin-right:16px}
.popularshades-nilaya-variant .common-slides-layout .selected-image .main-image{object-fit:fill;border-radius:10px;width:100%;height:100%}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option{display:flex;flex-direction:row;order:2;overflow-x:auto;-ms-overflow-style:none;width:100%;margin:17px 0 25px}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option::-webkit-scrollbar{display:none}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .img-swatch{height:70px;margin-right:12px}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .img-swatch img{object-fit:fill}
.popularshades-nilaya-variant .common-slides-layout .colur-swatch-option .slick-track{display:flex}
.popularshades-nilaya-variant .mobile-only .animated-arrow-button{border:1px solid #232426;color:#232426;font-size:16px;line-height:21px;height:35px}
}
.popularshades .PopularShade-mainWraper{display:flex;align-items:center;padding:6% 4%;gap:6%}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper{flex-direction:column-reverse;position:relative;margin-bottom:34px;padding:6% 2.4%}
}
.popularshades .PopularShade-mainWraper .popular-shade-container{width:70%}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-container{width:100%;margin-bottom:50px}
}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-large-images .slides .slick-list .slick-track .slide-img picture img{display:block;width:100%;height:auto;object-fit:cover}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch{margin-right:10px;height:auto;width:96px !important;display:flex;flex-direction:column}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch .swatch-color{width:96px;height:100px;border-top-right-radius:16px;position:relative}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch.slick-current .right-icon{display:inline-block;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-animation:animation-opacity 1s ease-in-out;animation:animation-opacity 1s ease-in-out}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch.slick-current .right-icon:before{content:url(../../../clientlibs/clientlib-global/resources/images/circleWithCheckMark-small.svg);background-repeat:no-repeat;width:auto;height:auto;background-position-x:inherit;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation-name:animation-opacity;-webkit-animation-name:animation-opacity;animation-duration:1s;-webkit-animation-duration:1s;transition:opacity 1s ease-in-out}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch .shade_Code{font-size:10px;line-height:9px;margin-top:3px}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slides .swatch h4{font-size:11px;font-style:normal;font-weight:400;line-height:normal;color:#1d1d1f}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slick-slider{width:100%;max-width:none;margin-bottom:0;border-bottom:0;margin-top:15px}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slick-slider{margin-top:10px}
}
.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slick-slider .slick-list .slick-track{display:flex;text-align:center;margin-left:0}
@media(min-width:992px){.popularshades .PopularShade-mainWraper .popular-shade-container .popular-shade-swatches .slick-slider .slick-list .slick-track{transform:none !important}
}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop{flex-direction:column;align-items:flex-start}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2{margin-bottom:40px}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2{margin-bottom:12px}
}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2 .text-gradient-royale-3{display:block}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2 .text-gradient-royale-3{display:inline}
}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2 .desk-extra-bold-64{font-size:64px;font-weight:800;line-height:70.4px;letter-spacing:-4px}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte h2 .desk-extra-bold-64{line-height:35.2px;font-size:32px;letter-spacing:normal}
}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte p{line-height:22.72px}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte p{line-height:15.03px}
}
.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte p .d16px{line-height:22.72px;font-weight:400;font-size:16px}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .rte p .d16px{font-size:11px;line-height:15.03px}
}
@media(min-width:992px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .cta{margin-top:15px}
}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .cta{position:absolute;bottom:0;left:0;right:0}
}
.popularshades .PopularShade-mainWraper.fullwidth-varient{padding:6% 4% 5% 0}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper.fullwidth-varient{padding:5% 0}
}
.popularshades .PopularShade-mainWraper.fullwidth-varient .popular-shade-container .popular-shade-swatches{padding-left:4%}
@media(min-width:320px) and (max-width:991px){.popularshades .PopularShade-mainWraper.fullwidth-varient .popular-shade-content .shade-bg-wrap .plainColorCta-desktop .cta{display:flex;justify-content:flex-start;margin-left:2%}
}
@keyframes animation-opacity{0{opacity:0;transition:opacity 1s ease-in-out}
to{opacity:1;transition:opacity 1s ease-in-out}
}