.style-swatch-strip{--swatch-gap:10px;display:flex;gap:var(--swatch-gap)}.style-swatch-strip.is-scroll{overflow-x:auto;overflow-y:hidden;padding:6px 2px 8px;width:fit-content;max-width:100%;margin-inline:auto;scroll-snap-type:x proximity;scroll-padding-inline:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;--fade-w:28px;--fade-l:0px;--fade-r:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%)}.style-swatch-strip.is-scroll.can-scroll-left{--fade-l:var(--fade-w)}.style-swatch-strip.is-scroll.can-scroll-right{--fade-r:var(--fade-w)}.style-swatch{flex:0 0 auto;width:84px;display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:0;margin:0;border:none;background:0 0;cursor:pointer;scroll-snap-align:start;-webkit-appearance:none}.style-swatch-thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--color-surface-subtle);border:2px solid var(--color-border-strong);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.style-swatch-thumb img{width:100%;height:100%;object-fit:cover;display:block}.style-swatch:hover .style-swatch-thumb{border-color:var(--color-primary-border)}.style-swatch:focus-visible{outline:0}.style-swatch:focus-visible .style-swatch-thumb{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle)}.style-swatch.is-active .style-swatch-thumb{border-color:var(--color-primary);box-shadow:0 2px 10px rgba(37,99,235,.22);transform:translateY(-2px)}.style-swatch-thumb .swatch-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:var(--color-primary-border)}.style-swatch-thumb .swatch-check{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;font-size:11px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.3)}.style-swatch.is-active .swatch-check{display:flex}.style-swatch-name{font-size:12px;font-weight:500;color:var(--color-text-muted);text-align:center;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}.style-swatch.is-active .style-swatch-name{color:var(--color-primary-hover);font-weight:600}.style-swatch-strip.is-rendering{pointer-events:none}.style-swatch-strip.is-rendering .style-swatch.is-active .style-swatch-thumb::after{content:'';position:absolute;inset:0;background:#fff;opacity:.4;animation:swatchPulse 1s ease-in-out infinite}@keyframes swatchPulse{0%,100%{opacity:.2}50%{opacity:.6}}@media (max-width:480px){.style-swatch-strip.is-scroll{width:100%}.style-swatch-strip.is-scroll .style-swatch{width:calc((100% - 3 * var(--swatch-gap))/ 3.5)}.style-swatch-strip.is-scroll .style-swatch-thumb{width:auto;height:auto;aspect-ratio:1/1}}