.card__swatches{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1rem;position:relative;z-index:2}.card__swatch{--swatch-input--size: 1.8rem;display:block;border-radius:50%;outline:.1rem solid transparent;outline-offset:.2rem;transition:outline-color var(--duration-short) ease,transform var(--duration-short) ease}.card__swatch--square{--swatch-input--border-radius: .2rem;border-radius:.2rem}.card__swatch .swatch{border-color:rgba(var(--color-foreground),.35);box-shadow:inset 0 0 .2rem rgba(var(--color-foreground),.1)}.card__swatch:hover,.card__swatch:focus-visible{outline-color:rgb(var(--color-foreground));transform:scale(1.1)}.card__swatch:focus-visible{outline-width:.2rem}.card__swatch[data-unavailable] .swatch{opacity:.4}.card__swatch .swatch--unconfigured{border-style:dashed;border-color:rgba(var(--color-foreground),.5)}.card__swatch-more{font-size:1.2rem;line-height:1;color:rgba(var(--color-foreground),.7)}.card__color-preview{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;pointer-events:none;z-index:1;transition:opacity var(--duration-default) ease}.card__color-preview.is-active{opacity:1}@media screen and (min-width:990px){.card__color-preview{transition:opacity var(--duration-default) ease,transform var(--duration-long) ease}.card-wrapper:hover .card__color-preview.is-active{transform:scale(1.03)}}@media(prefers-reduced-motion:reduce){.card__swatch,.card__color-preview{transition:none}.card__swatch:hover,.card__swatch:focus-visible{transform:none}.card-wrapper:hover .card__color-preview.is-active{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/component-card-swatches.css.map */