Editor + live preview

The authoring pattern behind the HQ catalog CMS: each editable block sits beside a live preview built from the current draft, so the editor works against exactly what the customer will see. In production the preview renders the real public component (MechanismSection, BenefitsSection, FaqPanel, the product card) — never a re-implementation — so it can never drift from the storefront.

Two utilities carry it (in dashboard.css): .hq-cms-split is a two-column grid that stacks under 1080px, and .hq-cms-preview is a labelled frame that tames a full-bleed section (compact padding, smaller heading, single-column card grid) so it reads as a preview card rather than a page band. Empty states show what the storefront falls back to, not a blank box.