.shop-by-color__heading{margin:0 0 2.8rem;text-align:center}.shop-by-color__placeholder{text-align:center;color:rgba(var(--color-foreground),.6)}.shop-by-color__carousel{display:flex;flex-direction:column}.shop-by-color__row{display:flex;align-items:center;gap:1.2rem}.shop-by-color__list{--shop-by-color-visible: 3.2;--shop-by-color-gap: 1rem;display:flex;flex:1 1 auto;gap:var(--shop-by-color-gap);margin:0;padding:.5rem;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.shop-by-color__list::-webkit-scrollbar{display:none}.shop-by-color__item{flex:0 0 calc((100% - ((var(--shop-by-color-visible) - 1) * var(--shop-by-color-gap))) / var(--shop-by-color-visible));min-width:0;max-width:12rem;scroll-snap-align:start}.shop-by-color__link{display:flex;flex-direction:column;align-items:center;gap:1rem;color:rgb(var(--color-foreground));text-decoration:none}.shop-by-color__swatch{display:block;width:100%;aspect-ratio:1 / 1;border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.08);box-shadow:0 .1rem .4rem #00000014;transition:transform .2s ease,box-shadow .2s ease}.shop-by-color__link:hover .shop-by-color__swatch,.shop-by-color__link:focus-visible .shop-by-color__swatch{transform:translateY(-.3rem);box-shadow:0 .4rem .8rem #00000026}.shop-by-color__label{font-size:1.3rem;font-weight:500;text-align:center;line-height:1.3;word-break:break-word}@media screen and (min-width:990px){.shop-by-color__list{--shop-by-color-visible: 10}}@media screen and (min-width:750px)and (max-width:989px){.shop-by-color__list{--shop-by-color-visible: 7}}@media screen and (min-width:480px)and (max-width:749px){.shop-by-color__list{--shop-by-color-visible: 4.2;--shop-by-color-gap: 1.2rem}}.shop-by-color__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;padding:0;border:.1rem solid rgba(var(--color-foreground),.15);border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.shop-by-color__arrow:hover{background:rgba(var(--color-foreground),.06)}.shop-by-color__arrow:disabled{opacity:0;pointer-events:none}.shop-by-color__arrow-icon{display:flex;width:1.6rem;height:1.6rem}.shop-by-color__arrow-icon svg{width:100%;height:100%}.shop-by-color__arrow--prev .shop-by-color__arrow-icon{transform:scaleX(-1)}.shop-by-color__dots{display:flex;justify-content:center;gap:.8rem;width:100%;margin-top:1rem}.shop-by-color__dot{width:.8rem;height:.8rem;padding:0;border:none;border-radius:50%;background:rgba(var(--color-foreground),.2);cursor:pointer;transition:background-color .15s ease,transform .15s ease}.shop-by-color__dot.is-active{background:rgb(var(--color-foreground));transform:scale(1.2)}.shop-by-color--no-overflow .shop-by-color__arrow,.shop-by-color--no-overflow .shop-by-color__dots{display:none}@media screen and (max-width:749px){.shop-by-color__list{gap:1.6rem}.shop-by-color__arrow{width:3.4rem;height:3.4rem}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/component-shop-by-color.css.map */