/* variation-swatch — @tokens: --variation-swatch-size, --variation-swatch-pad-y, --variation-swatch-pad-x

   The WooCommerce variation selector styled as swatch chips. WC ships only native
   <select> dropdowns for variable-product attributes; this is the styled radio-group
   control that replaces one such dropdown. One `.hzo-variation-swatch` = one
   attribute (Colour, Size…), rendered as N × (sr-only radio + label option). The JS
   that mirrors the checked radio back into WC's hidden variation <select> is deferred
   (Track 2 wiring), so this ships CSS-only — no `.js`.

   Sibling to rating-input: same radio-backed control pattern (sr-only radios, focus
   ring rides the label, checked/disabled via `:checked +` / `:disabled +`). Unlike
   rating-input there is NO row-reverse and NO cumulative `~` fill — each option is
   an independent chip, emitted in normal ascending order, and only the CHECKED one
   lights up (`:checked +`, the adjacent label only).

   Intended markup (coordinator writes the demo):

     <span class="hzo-variation-swatch">
       <input type="radio" id="c-red" name="attr_colour" value="red" class="hzo-variation-swatch__radio">
       <label for="c-red" class="hzo-variation-swatch__option hzo-variation-swatch__option--color"
              style="--swatch-color:#c0392b">Red</label>
       …  (ascending / normal order)
     </span>

   Two option flavours share every state rule: the default TEXT pill (Size, label
   values) and the `--color` circle (colour attributes; the demo sets --swatch-color
   inline per option). The swatch box has no semantic dimension token in the scale, so
   it's a component token with a literal fallback — the icon-button.css dial pattern
   (`var(--icon-button-size, 40px)`). Everything else reads a semantic/L1 token. */
.hzo-variation-swatch {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

/* Radio — visually hidden but still focusable & form-submittable (sr-only). Never
   display:none — that removes it from the tab order and the submitted form.
   (copied verbatim from rating-input__radio.) */
.hzo-variation-swatch__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
}

/* Option — the clickable <label>. Default = TEXT swatch (size/label pill). */
.hzo-variation-swatch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--variation-swatch-size, 32px);
    min-height: var(--variation-swatch-size, 32px);
    padding: var(--variation-swatch-pad-y, 6px) var(--variation-swatch-pad-x, 12px);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg-alt);
    color: var(--text-body);
    font-size: var(--fs-75);
    line-height: var(--lh-none);
    cursor: pointer;
    transition: border-color var(--transition-base) ease,
                box-shadow var(--transition-base) ease,
                color var(--transition-base) ease;
}

/* COLOUR swatch — a circle; the demo sets --swatch-color inline per option. Text is
   hidden (font-size 0) so the colour reads clean; all selected/hover/focus rules below
   apply unchanged. */
.hzo-variation-swatch__option--color {
    width: var(--variation-swatch-size, 32px);
    height: var(--variation-swatch-size, 32px);
    min-width: var(--variation-swatch-size, 32px);
    min-height: var(--variation-swatch-size, 32px);
    padding: 0;
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-full);
    background: var(--swatch-color, var(--bg-alt));
    overflow: hidden;
    font-size: 0;
}

/* Hover — brand border cue. */
.hzo-variation-swatch__option:hover {
    border-color: var(--brand);
}

/* Selected (checked) — a firm brand ring that reads even over a coloured swatch. The
   checked radio's own adjacent label is the only one lit (`+`, no cumulative `~`). */
.hzo-variation-swatch__radio:checked + .hzo-variation-swatch__option {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
}

/* A11y — required. The radio is hidden, so the focus ring rides its label option. */
.hzo-variation-swatch__radio:focus-visible + .hzo-variation-swatch__option {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-variation-swatch__radio:disabled + .hzo-variation-swatch__option,
.hzo-variation-swatch.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-variation-swatch__option { transition: none; }
}