/* ─── Filters / facets (UI surface) ───────────────────────────────────
   Accessible faceted-filter UI: fieldset/legend groups of checkboxes (multi)
   or radios (single), active-filter chips (reuse .hzo-tag--removable), a
   clear-all control, and an aria-live result-count region. Behaviour — chip↔box
   sync, clear-all, count announce, and the hzo:filterchange event — is wired by
   filters.js (Phase-2 widget) off the .hzo-filters / [data-hzo-filters] contract.
   UI surface only: it emits state, it does not query. Zero new tokens.
   Markup contract: component-patterns.md §47. */
.hzo-filters { display: flex; flex-direction: column; gap: var(--space-md); max-width: 320px; }
.hzo-filters__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-sm); flex-wrap: wrap;
}
.hzo-filters__count { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.hzo-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.hzo-filter-group > legend {
    padding: 0; margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-600);
    font-size: 0.9375rem; color: var(--text-heading);
}
.hzo-filter-group + .hzo-filter-group { border-top: var(--border-1) solid var(--border); padding-top: var(--space-md); }
.hzo-filter-group__options { display: flex; flex-direction: column; gap: var(--space-sm); }
.hzo-filter-option {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9375rem; color: var(--text-body); line-height: 1.3; cursor: pointer;
}
.hzo-filter-option > input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* G26 — no-JS "Apply filters" submit (rendered inside <noscript>, so present
   only when scripting is off). Spaced from the last fieldset. */
.hzo-filters__apply { margin-top: var(--space-md); align-self: flex-start; }