/* ─────────────────────────────────────────────────────────────────────────────
   Homepage previews — shared layer.
   Loaded ONLY on preview requests (?home_design=…), after the theme's own CSS.
   Everything below is scoped to .hv (the preview wrapper) except the two html-level
   scroll offsets, which exist only on preview pages.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── tokens for modules that are not part of the reference stylesheets (V1/V3 additions).
      Values mirror the reference palette so new and ported pieces read as one design. */
.hv {
  --hv-fg: #1C033D; --hv-muted: #5E5180; --hv-dim: #6F6590; --hv-bg: #FCFAFE; --hv-card: #FFFFFF; --hv-panel: #F4F0FA;
  --hv-line: rgba(28, 3, 61, .10); --hv-line2: rgba(28, 3, 61, .18);
  --hv-orange: #FF911B; --hv-pink: #F82D74; --hv-purple: #A24AFF; --hv-mint: #147A37; --hv-mint-bg: #EAF6EE;
  --hv-fd: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --hv-fb: "Inter", "Helvetica Neue", Arial, sans-serif;
  --hv-fm: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hv-ease: cubic-bezier(.22, 1, .36, 1);
  --hv-nav: 72px;                      /* height of the site header (header.php: 72px, 60px on phones) */
  display: block;
  position: relative;
  font-family: var(--hv-fb);
  color: var(--hv-fg);
}
@media (max-width: 480px) { .hv { --hv-nav: 60px; } }

/* drawing libraries (flags, logos, products, icons) hosted outside the two trees so they stay renderable at every width */
.hv-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── the two reference designs. The desktop design runs from 881px; the dedicated mobile design below that. */
.hv-d { --nav-h: 72px; display: block; position: relative; clip-path: inset(0); }
.hv-m { --bar: 72px; display: none; position: relative; clip-path: inset(0); }
@media (max-width: 880px) { .hv-d { display: none; } .hv-m { display: block; } }
@media (max-width: 480px) { .hv-m { --bar: 60px; } }

/* anchors land below the fixed site header (preview pages only) */
html { scroll-padding-top: 80px; }
@media (max-width: 480px) { html { scroll-padding-top: 68px; } }

/* ── neutralizers: site classes that share a name with a reference class.
      :where() keeps specificity at (0,1,0): they beat the site rule (same specificity, later in the cascade)
      but never beat the scoped reference rules, which are always (0,2,0) or higher. */
:where(.hv-d, .hv-m) .step { padding: 0; text-align: inherit; position: static; z-index: auto; gap: normal; align-items: normal; }
:where(.hv-m) .card { transition: none; }
:where(.hv-m) .card:hover { transform: none; }
:where(.hv-d) .btn { gap: 0; }
:where(.hv-d, .hv-m) .btn-primary:hover { background-color: var(--fg); color: #fff; }