.card__color-variants{margin-top:1rem;padding-top:.5rem;position:relative;z-index:1}.color-variants__swatches{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;position:relative;z-index:1}.color-variant__swatch{--swatch-size: 2rem;display:block;width:var(--swatch-size);height:var(--swatch-size);border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.2);background:var(--swatch--background);background-size:cover;background-position:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;text-decoration:none;z-index:2}.color-variant__swatch:hover{transform:scale(1.1);box-shadow:0 0 0 .2rem rgba(var(--color-foreground),.1);border-color:rgba(var(--color-foreground),.5)}.color-variant__swatch:active{transform:scale(.95)}.color-variant__swatch.is-active{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .2rem rgba(var(--color-foreground),.2)}.color-variant__swatch[title]{position:relative}.color-variant__swatch[title]:hover:after{content:attr(title);position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);padding:.4rem .8rem;background:rgba(var(--color-foreground),.9);color:rgb(var(--color-background));font-size:1.2rem;white-space:nowrap;border-radius:.3rem;pointer-events:none;z-index:3;opacity:0;animation:tooltip-fade-in .2s ease forwards}@keyframes tooltip-fade-in{to{opacity:1}}@media screen and (max-width: 749px){.color-variant__swatch{--swatch-size: 1.6rem}.color-variants__swatches{gap:.4rem}}.card--standard .card__color-variants{padding:0 1.3rem}.card--card .card__color-variants{padding:0}.color-variants__swatches:has(>:nth-child(6)){max-width:100%}.color-variants__swatches>:nth-child(n+6){--swatch-size: 1.8rem}.color-variant__swatch.is-loading{pointer-events:none;opacity:.5}.color-variant__swatch.is-loading:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.2rem;height:1.2rem;border:.2rem solid transparent;border-top-color:rgb(var(--color-foreground));border-radius:50%;animation:swatch-spin .6s linear infinite}@keyframes swatch-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.color-variant__swatch.is-soldout{position:relative;opacity:.5}.color-variant__swatch.is-soldout:after{content:"";position:absolute;top:50%;left:0;right:0;height:.1rem;background:rgba(var(--color-foreground),.5);transform:rotate(-45deg)}
/*# sourceMappingURL=/cdn/shop/t/9/assets/card-color-variants.css.map */