.variant-options{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}.variant-option-label{font-size:12px;color:rgb(var(--color-foreground));opacity:.8;margin-bottom:4px;width:100%;display:block}.color-swatches{display:flex;flex-wrap:wrap;gap:4px}.color-swatch{width:20px!important;height:20px!important;border-radius:3px!important;border:1px solid rgba(var(--color-foreground),.2);cursor:pointer;position:relative;transition:transform .2s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border:2px solid rgb(var(--color-button));box-shadow:0 0 0 1px rgb(var(--color-background))}.color-swatch.unavailable{opacity:.4;cursor:not-allowed;position:relative}.color-swatch.unavailable:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 45%,rgba(var(--color-foreground),.4) 45%,rgba(var(--color-foreground),.4) 55%,transparent 55%)}.color-swatch-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:rgb(var(--color-background));color:rgb(var(--color-foreground));padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease;border:1px solid rgba(var(--color-foreground),.1);z-index:10;margin-bottom:5px}.color-swatch:hover .color-swatch-tooltip{opacity:1;visibility:visible}.size-options{display:flex;flex-wrap:wrap;gap:4px}.size-option{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--color-foreground),.2);border-radius:4px;font-size:12px;cursor:pointer;padding:0 6px;transition:all .2s ease}.size-option:hover{background-color:rgba(var(--color-button),.1);border-color:rgb(var(--color-button))}.size-option.active{background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));border-color:rgb(var(--color-button))}.size-option.unavailable{opacity:.4;cursor:not-allowed;text-decoration:line-through}.simple-variants{font-size:12px;color:rgba(var(--color-foreground),.7);margin-top:4px;line-height:1.4}.simple-variants span{display:inline-block;margin-right:8px}.simple-variants .separator{margin:0 4px;opacity:.5}@media screen and (max-width:749px){.color-swatch{width:20px;height:20px}.size-option{min-width:24px;height:24px;font-size:11px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-variant-options.css.map */