.variant-selector{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1rem}.variant-selector--hidden{display:none!important}.variant-selector__group{display:block}.variant-selector__group--hidden{display:none!important}.variant-selector__header{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.variant-selector__label{color:#4b5563;font-size:.875rem;font-weight:500;line-height:1.25rem}html.dark .variant-selector__label{color:#9ca3af}.variant-selector__value{color:#4b5563;font-size:.875rem;font-weight:600;line-height:1.25rem}html.dark .variant-selector__value{color:#f9fafb}.variant-selector__grid{display:flex;flex-wrap:wrap;gap:.5rem}.variant-selector__option{border:2px solid #e5e7eb;cursor:pointer;flex-shrink:0;position:relative;transition:all .1s ease}html.dark .variant-selector__option{border-color:#374151}.variant-selector__option--color{border-radius:9999px;height:2.5rem;width:2.5rem}.variant-selector__option--color:hover:not(:disabled):not(.variant-selector__option--disabled){border-color:#9ca3af;transform:scale(1.1)}.variant-selector__option--size{align-items:center;background-color:#fff;border-radius:.5rem;color:#1f2937;display:flex;font-size:.875rem;font-weight:500;height:2.5rem;justify-content:center;min-width:3rem;padding:.5rem .75rem}html.dark .variant-selector__option--size{background-color:#1f2937;color:#e5e7eb}.variant-selector__option--size:hover:not(:disabled):not(.variant-selector__option--disabled){background-color:#f9fafb;border-color:#9ca3af}html.dark .variant-selector__option--size:hover:not(:disabled):not(.variant-selector__option--disabled){background-color:#374151;border-color:#6b7280}.variant-selector__option--active{border-color:#17699b;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #17699b}html.dark .variant-selector__option--active{border-color:#5ca3ce;box-shadow:0 0 0 1.5px #111827,0 0 0 2.5px #5ca3ce}.variant-selector__option--size.variant-selector__option--active{background-color:rgba(92,163,206,.1);box-shadow:0 0 0 1px #17699b;color:#17699b}html.dark .variant-selector__option--size.variant-selector__option--active{background-color:rgba(92,163,206,.2);box-shadow:0 0 0 1px #5ca3ce;color:#5ca3ce}.variant-selector__option--disabled,.variant-selector__option:disabled{cursor:not-allowed!important;opacity:.3}.variant-selector__option--color[data-is-light=true]{border-color:#d1d5db}.variant-selector__option--color[data-is-light=true].variant-selector__option--active{border-color:#17699b}.variant-selector__option:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #5ca3ce;outline:none}.variant-selector__stock-indicator{display:block}.variant-selector__stock-indicator--hidden{display:none!important}.variant-selector__stock-content{align-items:center;display:flex;gap:.5rem}.variant-selector__stock-text{font-size:.875rem;line-height:1.25rem}.variant-selector__stock-text--available{color:#1d8a3a}.variant-selector__stock-text--low{color:#f57c00}.variant-selector__stock-text--unavailable{color:#dc3545}.variant-selector__tooltip{background-color:#e5e7eb;border-radius:6px;bottom:100%;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);color:#4b5563;font-size:13px;left:50%;line-height:1.2;margin-bottom:8px;opacity:0;padding:6px 12px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s,visibility .2s;visibility:hidden;white-space:nowrap;z-index:100}html.dark .variant-selector__tooltip{background-color:#374151;color:#f9fafb}.group:hover .variant-selector__tooltip{opacity:1;visibility:visible}.variant-selector__tooltip:after{border:5px solid transparent;border-top-color:#e5e7eb;content:"";left:50%;margin-left:-5px;position:absolute;top:100%}html.dark .variant-selector__tooltip:after{border-color:#374151 transparent transparent}.group.cursor-not-allowed{cursor:not-allowed!important}@media (max-width:640px){.variant-selector__option--color{height:2.25rem;width:2.25rem}.variant-selector__option--size{font-size:.8125rem;height:2.25rem;min-width:2.5rem;padding:.375rem .5rem}}@keyframes pulse-selection{0%{box-shadow:0 0 0 0 rgba(92,163,206,.4)}70%{box-shadow:0 0 0 6px rgba(92,163,206,0)}to{box-shadow:0 0 0 0 rgba(92,163,206,0)}}.variant-selector__option--active{animation:pulse-selection .3s ease-out}