:root{--variant-primary:var(--button-main,#3b82f6);--variant-bg:#fff;--variant-text:#1f2937;--variant-border:#e5e7eb;--variant-chip-size:40px;--variant-chip-radius:6px;--variant-chip-gap:12px;--variant-selected-glow:0 2px 6px rgba(0,0,0,.15);--variant-transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.variant-container{display:flex;flex-direction:column;gap:10px;margin-bottom:0}.variant-field-label{font-size:.875rem;font-weight:600;color:var(--variant-text);margin-bottom:4px}.variant-field-label span{font-weight:400;opacity:.8}.variant-values-list{display:flex;flex-wrap:wrap;gap:var(--variant-chip-gap)}.variant-chip{position:relative;min-width:var(--variant-chip-size);height:var(--variant-chip-size);padding:8px 12px;display:flex;align-items:center;justify-content:center;border-radius:var(--variant-chip-radius);border:1px solid var(--variant-border);background:var(--variant-bg);cursor:pointer;transition:var(--variant-transition);font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}.variant-chip:hover:not(.variant-disabled){transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,.1);border-color:var(--variant-primary)}.variant-chip.type-color{width:var(--variant-chip-size);padding:0;border-radius:50%}.variant-chip.type-image{width:var(--variant-chip-size);padding:0;background-size:cover;background-position:50%}.variant-chip.type-text{width:auto;min-width:50px}.variant-chip.selected{border-color:var(--variant-primary);border-width:2px;box-shadow:var(--variant-selected-glow);background-color:rgba(var(--button-main-rgb,59,130,246),.04);z-index:2}.variant-chip.selected.type-color,.variant-chip.selected.type-image{transform:scale(1.1);padding:4px;background-clip:content-box!important;border-width:2px!important}.variant-chip.type-color{font-size:10px;line-height:normal;text-align:center;word-break:break-word;padding:4px;flex-direction:column}.variant-label-text{max-width:100%;padding:0 4px;display:block;overflow:hidden;text-overflow:ellipsis;font-size:10px;z-index:1}.variant-chip.sold-out:after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:#ef4444;opacity:.6;pointer-events:none;transform:translateY(-50%) rotate(-45deg)}.variant-chip.sold-out:before{display:none!important}.variant-chip.sold-out{opacity:.5;border-style:dashed;filter:grayscale(.8)}.variant-chip.incompatible{opacity:.4;filter:grayscale(.9);cursor:pointer;border-style:dotted}.variant-dropdown{width:100%!important;min-width:200px!important;max-width:320px!important;background:#fff!important;border-radius:8px!important;transition:var(--variant-transition)}.variant-dropdown fieldset{border-color:var(--variant-border)!important;border-width:1px!important}.variant-dropdown.Mui-focused fieldset,.variant-dropdown:hover fieldset{border-color:var(--variant-primary)!important}.variant-dropdown.Mui-focused fieldset{border-width:2px!important}.variant-dropdown-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}.variant-dropdown-image,.variant-dropdown-swatch{flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.05)}.variant-dropdown-image{width:20px;height:20px;border-radius:4px;background-size:cover;background-position:50%;border:1px solid rgba(0,0,0,.1);background-color:#f3f4f6}.variant-dropdown-option-wrapper{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.variant-dropdown-label{flex-grow:1;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--variant-text)}.variant-dropdown-placeholder{font-size:.875rem;opacity:.6;color:var(--variant-text)}.variant-selected-value-container{display:flex;align-items:center;width:100%;padding-right:8px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.variant-chip{animation:fadeInScale .2s ease-out}