.rang-wrapper { position: relative; }
.rang-panel[hidden] { display: none !important; }
.rang-panel { margin: 20px 0 24px; max-width: 100%; text-align: start; }
.rang-heading { margin-bottom: 18px; color: #777; font-size: 15px; line-height: 1.8; }
.rang-current { color: #181818; unicode-bidi: plaintext; }
.rang-swatches { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--rang-gap,14px); padding: 3px; }
.rang-panel .rang-swatches .rang-swatch { appearance: none; box-sizing: border-box; display: inline-flex; flex: 0 0 auto; position: relative; align-items: center; justify-content: center; width: var(--rang-size,46px); height: var(--rang-size,46px); min-width: 0; min-height: 0; max-width: 100%; margin: 0; padding: 2px; border: 1px solid #d1d1d1; border-radius: 6px; background: #fff; color: #202124; box-shadow: none; cursor: pointer; line-height: 1.5; font: inherit; text-transform: none; transition: border-color .12s; }
.rang-panel .rang-swatch-color, .rang-panel .rang-swatch-image { display: block; width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: cover; border: 0; border-radius: 3px; box-sizing: border-box; margin: 0; padding: 0; }
.rang-panel .rang-swatch-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.rang-panel .rang-swatches .rang-swatch[aria-pressed="true"] { outline: 2px solid #202124; outline-offset: 1px; border-color: #fff; }
.rang-panel .rang-swatches .rang-swatch:focus-visible { outline: 3px solid #2456d6; outline-offset: 3px; }
.rang-panel .rang-swatches .rang-swatch:hover:not(:disabled) { border-color: #555; }
.rang-panel .rang-swatches .rang-swatch:disabled { opacity: .65; cursor: not-allowed; }
.rang-panel .rang-swatches .rang-swatch[data-unavailable="true"]::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, transparent calc(50% - .6px), #333 calc(50% - .6px), #333 calc(50% + .6px), transparent calc(50% + .6px)); }
.rang-panel.rang-style-circle .rang-swatch, .rang-panel.rang-style-circle .rang-swatch-color, .rang-panel.rang-style-circle .rang-swatch-image { border-radius: 50%; }
.rang-panel .rang-swatches .rang-text-only, .rang-panel.rang-style-labelled .rang-swatches .rang-swatch { width: auto; height: auto; min-width: var(--rang-size,46px); min-height: var(--rang-size,46px); max-width: 150px; padding: 7px; border-radius: 6px; flex-direction: column; gap: 6px; }
.rang-panel .rang-text-only .rang-swatch-label, .rang-panel.rang-style-labelled .rang-swatch-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.rang-panel.rang-style-labelled .rang-swatch-color, .rang-panel.rang-style-labelled .rang-swatch-image { width: var(--rang-size,46px); height: var(--rang-size,46px); }
.woocommerce .variations_form .variations .rang-row > .label, .variations .rang-row > .label { display: none !important; }
.variations .rang-row, .variations .rang-row > .value { display: block; width: 100%; }
.rang-wrapper select.rang-native { display: none !important; }
@media (max-width: 480px) { .rang-panel { margin: 16px 0 20px; } .rang-swatches { gap: min(var(--rang-gap,14px),12px); } }
@media (prefers-reduced-motion: reduce) { .rang-panel .rang-swatch { transition: none; } }
@media (forced-colors: active) { .rang-swatch-color { forced-color-adjust: none; } }


.rang-wrapper, .rang-panel, .rang-mount, .rang-swatches { box-sizing: border-box; min-width: 0; max-width: 100%; }
.rang-heading { white-space: normal; overflow-wrap: anywhere; }