.card-swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;margin-bottom:.5rem;position:relative;z-index:5}.card-swatch{--card-swatch-size: 2.4rem;position:relative;display:block;width:var(--card-swatch-size);height:var(--card-swatch-size);border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.15);cursor:pointer;transition:all var(--duration-short) ease;background-size:cover;background-position:center;background-origin:border-box;z-index:10;pointer-events:auto}.card-swatch:hover{transform:scale(1.1);border-color:rgba(var(--color-foreground),.4);box-shadow:0 0 0 .2rem rgba(var(--color-foreground),.1)}.card-swatch.selected{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 0 .3rem rgba(var(--color-foreground),.3)}.card-swatch--square{border-radius:.2rem}.card-swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.3);opacity:.6;cursor:not-allowed;position:relative;overflow:hidden;background-color:red!important;background-image:none!important}.card-swatch--unavailable:hover{transform:none;border-color:rgba(var(--color-foreground),.3);box-shadow:none}.card-swatch--unavailable:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 40%,rgba(var(--color-foreground),.8) 48%,rgba(var(--color-foreground),.8) 52%,transparent 60%);pointer-events:none;display:none}.card-wrapper:has(.card-swatches) .quick-add{display:none}.card__information:has(.card-swatches){padding-bottom:.5rem}.card__media--loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(var(--color-background),.8);display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeIn .2s ease-in-out .1s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media screen and (max-width: 749px){.card-swatch{--card-swatch-size: 2rem}.card-swatches{gap:.4rem;margin-top:.8rem}}.card-swatch:focus{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.2rem}.card-swatch:focus:not(:focus-visible){outline:none}
/*# sourceMappingURL=/cdn/shop/t/7/assets/component-card-swatches.css.map */