.card-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.8rem 0 .4rem;padding:0;position:relative;z-index:2}.card-swatch__button{--card-swatch-size: 2.4rem;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:none;cursor:pointer;border-radius:50%;outline:none;transition:transform .15s ease,box-shadow .15s ease}.card-swatch__button .swatch{--swatch--size: var(--card-swatch-size);--swatch--border-radius: 50%;border:.15rem solid rgba(var(--color-foreground),.12);transition:border-color .15s ease}.card-swatch__button:hover .swatch{border-color:rgba(var(--color-foreground),.4)}.card-swatch__button:hover{transform:scale(1.1)}.card-swatch__button--active .swatch{border-color:rgb(var(--color-background));box-shadow:0 0 0 .15rem #3d5847}.card-swatch__button--active:hover{transform:none}.card-swatch__button:focus-visible .swatch{border-color:rgba(var(--color-foreground),.5);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .5rem rgba(var(--color-foreground),.2)}.card-swatch__button--unavailable .swatch{opacity:.4;position:relative;overflow:hidden}.card-swatch__button--unavailable .swatch:after{content:"";position:absolute;bottom:-.05rem;left:0;width:calc(var(--card-swatch-size) * 1.414);height:.1rem;background-color:rgb(var(--color-foreground));transform:rotate(-45deg);transform-origin:left}.card-swatch__overflow{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .4rem;font-size:1.1rem;font-weight:600;color:rgba(var(--color-foreground),.6);text-decoration:none;border-radius:1.2rem;background:rgba(var(--color-foreground),.06);transition:background .15s ease,color .15s ease;line-height:1}.card-swatch__overflow:hover{background:rgba(var(--color-foreground),.12);color:rgb(var(--color-foreground))}@media screen and (max-width:749px){.card-swatch__button{--card-swatch-size: 2rem}.card-swatches{gap:.4rem;margin:.6rem 0 .2rem}.card-swatch__overflow{min-width:2rem;height:2rem;font-size:1rem}}
/*# sourceMappingURL=/cdn/shop/t/38/assets/component-card-swatches.css.map */