.shop-by-color{margin-bottom:120px;overflow:hidden}.shop-by-color__header{margin-bottom:20px}.shop-by-color__title{font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;letter-spacing:0;text-transform:uppercase;margin:0 0 15px;line-height:100%}.shop-by-color__current-color{font-size:15px;line-height:100%;letter-spacing:0px;color:#00000080;margin:0 0 15px}.shop-by-color__current-color span{color:#000c}.shop-by-color__swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}.shop-by-color__swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:none;transition:all .2s ease;position:relative;background-size:cover;background-position:center}.shop-by-color__swatch.active{transform:scale(1.1)}.shop-by-color__swatch.active:after{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:1px solid #222;border-radius:50%}.shop-by-color__main-layout{display:flex;gap:12px;align-items:flex-start;width:100%;max-width:100%;overflow:hidden}.shop-by-color__featured-wrapper{flex:0 0 40%;min-width:280px}.shop-by-color__featured-card{display:block;overflow:hidden;text-decoration:none;color:inherit}.shop-by-color__featured-card .shop-by-color__card-image{width:100%;height:100%;aspect-ratio:2 / 1.64;overflow:hidden}.shop-by-color__featured-card .shop-by-color__card-image .shop-by-color__card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.shop-by-color__featured-card .shop-by-color__card-details{display:none}.shop-by-color__carousel-wrapper{position:relative;flex:1 1 auto;min-width:0;max-width:calc(60% - 12px);overflow:hidden}.shop-by-color__carousel{display:flex;gap:15px;overflow-x:auto;align-items:baseline;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:10px 0;height:100%}.shop-by-color__carousel::-webkit-scrollbar{display:none}.shop-by-color__card{flex:0 0 calc(33.333% - 10px);min-width:180px;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit}.shop-by-color__card .shop-by-color__card-image{width:100%;height:350px;overflow:hidden}.shop-by-color__card .shop-by-color__card-image .shop-by-color__card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.shop-by-color__card-details{padding:15px;background:#fff}.shop-by-color__card-title{font-size:14px;font-weight:500;margin:0 0 5px;color:#333}.shop-by-color__card-price{font-size:14px;color:#666}.shop-by-color__card-price .compare-price{text-decoration:line-through;color:#999;margin-right:8px}.shop-by-color__card-price .sale-price{color:#333;font-weight:600}.shop-by-color__nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.shop-by-color__nav-btn:hover{background:#333;border-color:#333}.shop-by-color__nav-btn:hover svg{stroke:#fff}.shop-by-color__nav-btn svg{width:20px;height:20px;stroke:#333;stroke-width:2;fill:none}.shop-by-color__nav-btn.prev{left:0}.shop-by-color__nav-btn.next{right:0}.shop-by-color__nav-btn.hidden{opacity:0;pointer-events:none}.shop-by-color__loading{display:none;text-align:center;padding:40px;color:#666;width:100%}.shop-by-color__loading.active{display:flex;align-items:center;justify-content:center}.shop-by-color__no-products{display:none;text-align:center;padding:40px;color:#666;width:100%}.shop-by-color__no-products.active{display:flex;align-items:center;justify-content:center}@media (max-width: 992px){.shop-by-color__featured-wrapper{flex:0 0 35%;min-width:220px}.shop-by-color__carousel-wrapper{flex:0 0 calc(65% - 20px)}.shop-by-color__card{flex:0 0 calc(50% - 8px);min-width:150px}}@media (max-width: 768px){.shop-by-color__main-layout{flex-direction:column}.shop-by-color__featured-wrapper{flex:none;width:100%;max-width:none;min-width:auto}.shop-by-color__carousel-wrapper{width:100%}.shop-by-color__card{flex:0 0 calc(50% - 8px);min-width:140px}.shop-by-color__card .shop-by-color__card-image{height:250px}.shop-by-color__nav-btn{display:none}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/section-shop-by-color.css.map */