.card-swatches{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;justify-content:center;position:relative;z-index:2}.card-swatch{border-radius:50%;border:1px solid rgba(var(--color-foreground),.25);background-size:cover;background-position:center;background-repeat:no-repeat;padding:0;cursor:pointer}.card-swatches--small .card-swatch{width:1.2rem;height:1.2rem}.card-swatches--medium .card-swatch{width:1.6rem;height:1.6rem}.card-swatches--large .card-swatch{width:2rem;height:2rem}.card-swatch:focus{outline:2px solid rgba(var(--color-foreground),.6);outline-offset:1px}.card-swatch:hover{transform:scale(1.06)}.card-swatch{position:relative}.card-swatch:after{content:attr(data-label);position:absolute;left:50%;bottom:100%;transform:translate(-50%);margin-bottom:.6rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));border:1px solid rgba(var(--color-foreground),.15);border-radius:.6rem;padding:.2rem .6rem;font-size:1.2rem;line-height:1.2;white-space:nowrap;box-shadow:0 2px 6px rgba(var(--color-shadow),.15);opacity:0;pointer-events:none;transition:opacity var(--duration-short) ease;z-index:3}.card-swatch:hover:after{opacity:1}.card-swatches:not(:hover) .card-swatch:focus:after{opacity:1}.card-swatches:hover .card-swatch:focus:after{opacity:0}.card-wrapper.swatch-preview-active .media.media--hover-effect>img:first-child:not(:only-child){opacity:1}.card-wrapper.swatch-preview-active .media.media--hover-effect>img+img{opacity:0;transform:none}.card-swatch--active{outline:2px solid rgba(var(--color-foreground),.7);outline-offset:1px}
/*# sourceMappingURL=/cdn/shop/t/7/assets/card-swatches.css.map */