.shop-by-colors{padding-top:var(--sbc-padding-top, 0);padding-bottom:var(--sbc-padding-bottom, 0);padding-left:var(--sbc-padding-left, 0);padding-right:var(--sbc-padding-right, 0);--sbc-dot: var(--sbc-swatch-size-mobile, 60px)}@media(min-width:750px){.shop-by-colors{--sbc-dot: var(--sbc-swatch-size, 88px)}}.shop-by-colors[hidden]{display:none}.sbc-container{margin-left:auto;margin-right:auto}.sbc-container--full{max-width:none}.sbc-container--wide{max-width:1400px}.sbc-container--medium{max-width:1200px}.sbc-container--narrow{max-width:1000px}.sbc-header{margin-bottom:16px}.sbc-subheading{margin:6px 0 0;max-width:62ch;color:var(--color-text-secondary, #4e5969);font-size:.95rem;line-height:1.5}.sbc-row-wrap{position:relative}.sbc-row-wrap:after{display:none;content:"";position:absolute;top:0;right:0;bottom:0;width:48px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),var(--sbc-fade-color, #ffffff));opacity:1;transition:opacity .2s ease}.sbc-row-wrap[data-at-end]:after{opacity:0}.sbc-row{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:4px;padding-bottom:4px;margin-top:24px}.sbc-row::-webkit-scrollbar{display:none}.sbc-swatch{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--sbc-dot);text-decoration:none;color:inherit}.sbc-swatch__dot{display:block;box-sizing:border-box;width:var(--sbc-dot);height:var(--sbc-dot);border-radius:var(--radius-lg, 8px);object-fit:cover;box-shadow:inset 0 0 0 1px #17171a1a}.sbc-swatch:focus-visible{outline:none}.sbc-swatch:focus-visible .sbc-swatch__dot{outline:2px solid var(--color-text-primary, #1d2129);outline-offset:2px}.sbc-swatch__name{display:block;max-width:100%;text-align:center;font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--color-heading, var(--color-text-primary, #1d2129));word-break:break-word}.sbc-swatch--skeleton{pointer-events:none}.sbc-swatch--skeleton .sbc-swatch__dot{background:var(--color-neutral-3, #eceef1);box-shadow:none}.sbc-swatch--skeleton .sbc-swatch__name{width:70%;height:.8125rem;border-radius:4px;background:var(--color-neutral-3, #eceef1)}.sbc-swatch--skeleton .sbc-swatch__dot,.sbc-swatch--skeleton .sbc-swatch__name{animation:sbc-shimmer 1.4s ease-in-out infinite}@keyframes sbc-shimmer{0%,to{opacity:1}50%{opacity:.55}}.sbc-scrub{padding:12px 0 4px;cursor:pointer;touch-action:none}.sbc-scrub[hidden]{display:none}.sbc-scrub__track{position:relative;width:100%;height:3px;border-radius:999px;background:var(--color-neutral-3, #eceef1)}.sbc-scrub__handle{position:absolute;top:-3px;left:0;width:56px;height:9px;border-radius:999px;background:var(--color-border-heavy, #c9cdd4);cursor:grab;transition:background .15s ease}.sbc-scrub:hover .sbc-scrub__handle,.sbc-scrub.is-dragging .sbc-scrub__handle{background:var(--color-text-secondary, #4e5969)}.sbc-scrub.is-dragging .sbc-scrub__handle{cursor:grabbing}.sbc-scrub__handle:focus-visible{outline:2px solid var(--color-text-primary, #1d2129);outline-offset:2px}@media(max-width:749px){.sbc-swatch__name{font-size:15px}.sbc-scrub{padding:16px 0 8px}.sbc-scrub__handle{width:44px}}@media(prefers-reduced-motion:reduce){.sbc-swatch__dot,.sbc-scrub__handle{transition:none}.sbc-swatch--skeleton .sbc-swatch__dot,.sbc-swatch--skeleton .sbc-swatch__name{animation:none}}.sbc-slider-arrow{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--color-text-primary, #1d2129);background:var(--color-background, #fff);border:1px solid var(--color-border, #d8dbe0);border-radius:50%;box-shadow:0 3px 10px #1d212924;cursor:pointer;transform:translateY(-50%);transition:background-color .15s ease,box-shadow .15s ease}.sbc-slider-arrow[hidden]{display:none}.sbc-slider-arrow--prev{left:8px}.sbc-slider-arrow--next{right:8px}.sbc-slider-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sbc-slider-arrow:hover{background:var(--color-neutral-2, #f7f8fa);box-shadow:0 4px 12px #1d21292e}.sbc-slider-arrow:focus-visible{outline:2px solid var(--color-text-primary, #1d2129);outline-offset:2px}@media screen and (max-width:749px){.sbc-slider-arrow{width:36px;height:36px}.sbc-slider-arrow--prev{left:4px}.sbc-slider-arrow--next{right:4px}}
/*# sourceMappingURL=/cdn/shop/t/39/assets/shop-by-colors.css.map */