/* ─── Empty state ─────────────────────────────────────────────────────
   Zero-state for no search results, an empty cart, or no posts/orders.
   Centered icon + headline (markup uses .hzo-visual-h3) + one-line
   explanation + a primary action (and optional secondary links). Composes
   .hzo-btn for the action; no new tokens. */
.hzo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    max-width: 480px;
    margin-inline: auto;
    padding: var(--space-2xl) 0;
}
.hzo-empty__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: var(--brand-pale);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
}
.hzo-empty__icon svg { width: 32px; height: 32px; }
.hzo-empty__text { color: var(--text-muted); line-height: var(--lh-normal); margin: 0; max-width: 40ch; }
.hzo-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); }

/* ── Widget modifiers (opt-in via [hzo_empty_state]; Phase-2 wave 6) ──
   ADDITIVE ONLY. The base .hzo-empty rules above are a shared class contract —
   mini-cart chrome (.hzo-empty.hzo-minicart__empty) and wc-ajax's no-results
   injection reuse them — so they never change; variants are new classes. */
.hzo-empty--left {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
}
.hzo-empty--left .hzo-empty__actions { justify-content: flex-start; }
.hzo-empty--compact { padding: var(--space-lg) 0; }
.hzo-empty--compact .hzo-empty__icon { width: 48px; height: 48px; }
.hzo-empty--compact .hzo-empty__icon svg { width: 24px; height: 24px; }

/* ═══════════════════════════════════════════════════════════════════════
   STATIC BLOCK PRIMITIVES (component library Wave D) — CSS-only, no JS,
   no new tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Error variant (audit G48) — a FAILED load, visually distinct from an
   empty result. The 'alert' glyph carries the --error tone; the retry button
   reuses .hzo-btn styling. ─────────────────────────────────────────────── */
.hzo-empty--error .hzo-empty__icon { color: var(--error); }