.card-variant-selector{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(var(--color-foreground),.08)}.card-variant-selector__option{margin-bottom:.75rem}.card-variant-selector__option:last-child{margin-bottom:0}.card-variant-selector__label{display:block;margin-bottom:.5rem;font-weight:500;color:rgba(var(--color-foreground),.85);font-size:.875rem}.card-variant-selector__selected{font-weight:600;color:rgb(var(--color-foreground))}.card-variant-selector__swatches{display:flex;flex-wrap:wrap;gap:.5rem}.card-variant-selector__swatch{width:32px;height:32px;border-radius:50%;border:2px solid rgba(var(--color-foreground),.15);cursor:pointer;transition:all .2s;position:relative;display:block}.card-variant-selector__swatch:hover{transform:scale(1.1);border-color:rgba(var(--color-foreground),.4)}.card-variant-selector__radio:checked+.card-variant-selector__swatch{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px rgb(var(--color-foreground))}.card-variant-selector__radio:checked+.card-variant-selector__swatch:after{content:"\2713";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.75rem;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.5)}.card-variant-selector__buttons{display:flex;flex-wrap:wrap;gap:.375rem}.card-variant-selector__button{padding:.375rem .75rem;border:1px solid rgba(var(--color-foreground),.2);border-radius:4px;font-size:.8125rem;cursor:pointer;transition:all .2s;background:rgb(var(--color-background));color:rgba(var(--color-foreground),.85);font-weight:500}.card-variant-selector__button:hover{border-color:rgba(var(--color-foreground),.4);background:rgba(var(--color-foreground),.05)}.card-variant-selector__radio:checked+.card-variant-selector__button{border-color:rgb(var(--color-button));background:rgb(var(--color-button));color:rgb(var(--color-button-text))}.card-variant-selector__select{width:100%;padding:.5rem;border:1px solid rgba(var(--color-foreground),.2);border-radius:4px;font-size:.875rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer}.card-variant-selector__select:focus{outline:2px solid rgb(var(--color-button));outline-offset:2px}@media screen and (max-width:749px){.card-variant-selector{margin-top:.75rem;padding-top:.5rem}.card-variant-selector__swatch{width:28px;height:28px}.card-variant-selector__button{padding:.3125rem .625rem;font-size:.75rem}}
/*# sourceMappingURL=/cdn/shop/t/81/assets/card-variant-selector.css.map */