.card-variants{display:flex;flex-direction:column;gap:1rem}.card-variants__group{display:flex;flex-direction:column;gap:.8rem;position:relative}.card-variants__group--hidden-for-popup{display:none!important}.card-variants__swatches{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;padding:2px}.card-variant-swatch{display:flex;align-items:center;justify-content:center;height:4rem;min-width:4rem;padding:.6rem 1rem;border:none;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;border-radius:.4rem;background:rgb(var(--color-background-secondary));outline:none}.card-variant-swatch:focus{outline:none}.card-variant-swatch--selected{outline-offset:1px;outline:1px solid rgb(var(--color-foreground))}@media(any-hover:hover)and (any-pointer:fine){.card-variant-swatch:hover{outline-offset:1px;outline:1px solid rgb(var(--color-foreground))}}.card-variant-swatch:disabled{opacity:.5;cursor:not-allowed}.card-variant-swatch--disabled{opacity:.6;position:relative;cursor:pointer}.card-variant-swatch--disabled:after{content:"";position:absolute;top:50%;left:50%;width:120%;height:1px;background:rgb(var(--color-foreground));transform:translate(-50%,-50%) rotate(-45deg);opacity:.3}.card-variant-swatch--disabled:hover{outline:.1rem solid rgba(var(--color-foreground),.3)}.card-variant-swatch--swatch.card-variant-swatch--disabled .card-swatch{opacity:.6;filter:grayscale(30%)}.card-variant-swatch__text{color:rgb(var(--color-foreground));text-align:center;line-height:1;font-size:min(var(--font-body--size),1.6rem);font-family:var(--font-secondary--family)}.card-variant-swatch{--swatch-size: 4.4rem;min-height:var(--swatch-size);padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-variant-swatch.card-variant-swatch--swatch{width:var(--swatch-size)}.card-variant-swatch:not(.card-variant-swatch--swatch){padding:.6rem 1.2rem}.card-swatch{display:block;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background:var(--swatch--background);background-position:var(--swatch-focal-point, center);background-size:cover;background-origin:border-box;flex-shrink:0;transition:all .2s ease}.card-swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5);background:rgb(var(--color-background-secondary))}.card-swatch--square{border-radius:4px;height:24px}@media(any-hover:hover)and (any-pointer:fine){.card-variant-swatch--color:hover .card-swatch{transform:scale(1.1)}.card-variant-swatch:hover .card-swatch--square{transform:scale(1.05)}}.card-variant-swatch--size{height:4rem;min-width:4rem;padding:.6rem 1rem}.card-variant-swatch--material,.card-variant-swatch--style,.card-variant-swatch--type{min-width:32px;height:28px;border-radius:4px;border:1px solid rgba(var(--color-foreground),.2);background:rgb(var(--color-background))}.card-variant-swatch--material .card-variant-swatch__text,.card-variant-swatch--style .card-variant-swatch__text,.card-variant-swatch--type .card-variant-swatch__text{font-size:.75rem;font-weight:500;padding:0 .5rem}@media(any-hover:hover)and (any-pointer:fine){.card-variant-swatch--material:hover,.card-variant-swatch--style:hover,.card-variant-swatch--type:hover{border-color:rgba(var(--color-foreground),.5);background:rgb(var(--color-background-secondary))}}.card-variant-swatch--material.card-variant-swatch--selected,.card-variant-swatch--style.card-variant-swatch--selected,.card-variant-swatch--type.card-variant-swatch--selected{border-color:rgb(var(--color-accent));background:rgba(var(--color-accent),.1);color:rgb(var(--color-accent))}.card-variant-swatch:focus-visible{outline:none;box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px rgb(var(--color-foreground))}@media screen and (max-width:749px){.card-variants{gap:.8rem;margin-top:1rem;margin-bottom:1rem}.card-variants__swatches{gap:.6rem}.card-variant-swatch{min-height:3.6rem;height:3.6rem}.card-variant-swatch.card-variant-swatch--swatch{width:4rem;height:4rem}.card-variant-swatch--size{min-width:3.6rem;height:3.6rem;padding:.5rem .8rem}.card-variant-swatch__text{font-size:1.4rem}}@media screen and (min-width:750px)and (max-width:989px){.card-variants{gap:.9rem}.card-variants__swatches{gap:.7rem}}@media screen and (min-width:990px){.card-variant-swatch{transition:all .2s ease}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/card-variants.css.map */