/* ═════════════════════════════════════════════════════════════════════════
   VARIATION SWATCHES (W-131) — styles, scoped to .hzo-swatches*

   Progressive enhancement over WooCommerce's variations_form. swatches.js adds
   `.hzo-swatches-active` to the form (hides the native <select>s, kept as the
   source of truth + no-JS fallback) and injects one `.hzo-swatches` radiogroup
   per attribute row.

   Tokens only — no bare hex / px where a token exists, no z-index above
   --z-toast, focus ring via `outline` (not a hand-rolled box-shadow width, per
   interaction-standards §9.2) so it also survives forced-colors (§12.2).
   ═════════════════════════════════════════════════════════════════════════ */

/* When JS is active, the swatches replace the raw dropdown. Without JS the class
   is never added, so the native <select> stays fully visible + operable (G26 /
   §12.3 no-JS recovery). */
.hzo-swatches-active .variations td.value select,
.hzo-swatches-active .variations select,
.hzo-swatches-active .variations td.value .select2-container,
.hzo-swatches-active .variations .select2-container {
    display: none;
}

.hzo-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

/* ── The swatch (44×44 minimum target, WCAG 2.5.8 §11.2) ─────────────────── */
.hzo-swatches__swatch {
    --hzo-swatch-size: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hzo-swatch-size);
    min-height: var(--hzo-swatch-size);
    margin: 0;
    padding: 0;
    border: var(--border-2) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-body);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--dur-2) var(--ease-standard),
        box-shadow var(--dur-2) var(--ease-standard),
        transform var(--dur-1) var(--ease-standard);
}

.hzo-swatches__swatch:hover {
    border-color: var(--text-muted);
}

/* One focus-ring recipe: outline (not a box-shadow width) — §9.2 + forced-colors. */
.hzo-swatches__swatch:focus-visible {
    outline: var(--border-2) solid var(--color-focus);
    outline-offset: var(--space-2xs);
}

/* Selected — branded border + inner ring (box-shadow here is state, not a focus
   ring). A forced-colors fallback below re-asserts it with an outline. */
.hzo-swatches__swatch.is-selected {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 var(--border-2) var(--brand);
    transform: translateY(-1px);
}

/* ── Color chip ──────────────────────────────────────────────────────────── */
.hzo-swatches__swatch--color {
    padding: 3px;
}
.hzo-swatches__chip {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 34px;
    min-height: 34px;
    border-radius: calc(var(--radius-control) - 2px);
    background-color: var(--hzo-swatch-color, var(--surface-2));
    background-size: cover;
    background-position: center;
    /* keep a hairline so white/very-light chips stay visible on white surface */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.hzo-swatches__chip--image {
    background-color: var(--surface-2);
}

/* ── Size / text pill ────────────────────────────────────────────────────── */
.hzo-swatches__swatch--pill {
    padding: 0 var(--space-md);
}
.hzo-swatches__text {
    display: inline-block;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Out-of-stock / incompatible — struck + dimmed, still focusable ───────── */
.hzo-swatches__swatch.is-unavailable {
    cursor: not-allowed;
    opacity: 0.5;
}
.hzo-swatches__swatch.is-unavailable::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    /* border-based diagonal (survives forced-colors better than a gradient) */
    border-top: var(--border-2) solid var(--text-muted);
    transform: rotate(-45deg);
    pointer-events: none;
}
.hzo-swatches__swatch--pill.is-unavailable .hzo-swatches__text {
    text-decoration: line-through;
}
.hzo-swatches__swatch--pill.is-unavailable::before {
    display: none;   /* the line-through already reads OOS for text pills */
}

/* ── Supplemental hover/focus tip (chip swatches only) ────────────────────── */
.hzo-swatches__tip {
    position: absolute;
    bottom: calc(100% + var(--space-2xs));
    left: 50%;
    z-index: var(--z-popover);   /* below --z-toast; never covers cart feedback */
    padding: 2px var(--space-sm);
    border-radius: var(--radius-control);
    background: var(--text-heading);
    color: var(--surface);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(2px);
    pointer-events: none;
    transition:
        opacity var(--dur-1) var(--ease-standard),
        transform var(--dur-1) var(--ease-standard);
}
.hzo-swatches__swatch:hover .hzo-swatches__tip,
.hzo-swatches__swatch:focus-visible .hzo-swatches__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Selected-term label beside the group ────────────────────────────────── */
.hzo-swatches__selected {
    margin-left: var(--space-sm);
    color: var(--text-heading);
    font-weight: 600;
}
.hzo-swatches__selected:empty {
    display: none;
}

/* ── Reduced motion (PRESERVE-5: ambient stops; no status motion here) ────── */
@media (prefers-reduced-motion: reduce) {
    .hzo-swatches__swatch,
    .hzo-swatches__tip {
        transition: none;
    }
    .hzo-swatches__swatch.is-selected {
        transform: none;
    }
}

/* ── Forced-colors / Windows High Contrast (§12.2) ───────────────────────── */
@media (forced-colors: active) {
    .hzo-swatches__swatch.is-selected {
        outline: var(--border-2) solid Highlight;
        outline-offset: var(--space-2xs);
    }
    .hzo-swatches__swatch.is-unavailable {
        opacity: 1;   /* opacity is unreliable in forced-colors — rely on the strike */
    }
    .hzo-swatches__swatch.is-unavailable::before {
        border-top-color: GrayText;
    }
    .hzo-swatches__chip {
        box-shadow: inset 0 0 0 1px CanvasText;
    }
}

/* ── Print (§12.1: keep swatches visible; drop chrome) ───────────────────── */
@media print {
    .hzo-swatches__tip {
        display: none;
    }
    .hzo-swatches__swatch {
        border-color: #000;
    }
}