/* Design options still open for review. Switched by URL params: ?header=2|3 &hf=2|3 */
@font-face { font-family: "Outfit"; src: url("/fonts/outfit.woff2?v=3") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Display"; src: url("/fonts/funnel-display.woff2?v=3") format("woff2"); font-weight: 300 800; font-display: swap; }

/* ---------- Heading fonts ---------- */
html[data-hf="2"] { --f-head: "Outfit", "Avenir Next", system-ui, sans-serif; }
html[data-hf="2"] .hero-title { font-weight: 600; letter-spacing: -.04em; }
html[data-hf="2"] .h2 { font-weight: 600; letter-spacing: -.03em; }
html[data-hf="3"] { --f-head: "Funnel Display", "Avenir Next", system-ui, sans-serif; }
html[data-hf="3"] .hero-title { font-weight: 600; letter-spacing: -.035em; }
html[data-hf="3"] .h2 { font-weight: 560; letter-spacing: -.025em; }

/* ---------- Desktop header options ---------- */
@media (min-width: 1181px) {
  /* 2: boutique stacked: original stacked logo centred, nav on its own row */
  html[data-header="2"] .head-inner { height: auto; grid-template-rows: 96px 54px; max-width: none; }
  html[data-header="2"] .head-inner > .brand { grid-column: 2; grid-row: 1; flex-direction: column; gap: 10px; justify-self: center; }
  html[data-header="2"] .brand-mark { width: 32px; height: 45px; }
  html[data-header="2"] .brand-word { width: 172px; height: 12px; }
  html[data-header="2"] .main-nav { grid-column: 1 / -1; grid-row: 2; height: 54px; justify-self: center; }
  html[data-header="2"] .nav-list { gap: 44px; }
  html[data-header="2"] .nav-link { font-family: var(--f-body); font-size: 13.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
  html[data-header="2"] .nav-link::after { bottom: 12px; }
  html[data-header="2"] .head-tools { grid-row: 1; }
  html[data-header="2"] .site-head { margin-bottom: -150px; }
  html[data-header="2"] .site-head:not(.is-solid) .head-inner::before { color: rgba(247, 247, 242, .85); }
  html[data-header="2"] .head-inner::before { content: "Preston, Melbourne"; grid-column: 1; grid-row: 1; justify-self: start; font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  /* 3: floating foliage-green pill */
  html[data-header="3"] .site-head, html[data-header="3"] .site-head.is-solid { background: transparent; padding: 14px var(--gut) 0; margin-bottom: -82px; }
  html[data-header="3"] .head-inner { background: var(--leaf); border-radius: 999px; height: 68px; max-width: 1400px; padding: 0 12px 0 26px; box-shadow: 0 18px 40px -22px rgba(18, 30, 24, .55); }
  html[data-header="3"] .main-nav { height: 68px; }
  html[data-header="3"] .brand-word { fill: var(--paper); }
  html[data-header="3"] .brand-mark { fill: var(--gold-soft); }
  html[data-header="3"] .nav-link { color: rgba(247, 247, 242, .9); }
  html[data-header="3"] .nav-list > li:hover .nav-link { color: var(--gold-soft); }
  html[data-header="3"] .nav-link::after { bottom: 18px; background: var(--gold-soft); }
  html[data-header="3"] .tool { color: var(--paper); }
  html[data-header="3"] .tool:hover { background: var(--paper); color: var(--ink); }
  html[data-header="3"] .site-head .nav-link, html[data-header="3"] .site-head .tool { color: rgba(247, 247, 242, .92); }
  html[data-header="3"] .site-head .brand-word { fill: var(--paper); }
  html[data-header="3"] .site-head .tool--cart { background: var(--gold); color: var(--ink); width: auto; padding: 0 16px 0 12px; gap: 6px; display: inline-flex; align-items: center; }
  html[data-header="3"] .tool--cart .cart-count { position: static; display: inline-block; background: var(--ink); color: var(--paper); }
  html[data-header="3"] .tool--cart .cart-count[data-zero] { display: inline-block; }
  html[data-header="3"] .mega { left: var(--gut); right: var(--gut); top: calc(100% + 10px); border-radius: 26px; }
  html[data-header="3"] .nav-list > li { position: static; }
  html[data-header="3"] .nav-list > li > .nav-link { height: 68px; }
  html[data-header="3"] .nav-list > li:hover::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
}

@media (min-width: 1181px) {
  html[data-header="2"] .hero-frame::after { background: linear-gradient(180deg, rgba(18, 30, 24, .7) 0%, rgba(18, 30, 24, 0) 30%), linear-gradient(90deg, rgba(18, 30, 24, .8) 0%, rgba(18, 30, 24, .5) 38%, rgba(18, 30, 24, 0) 62%), linear-gradient(0deg, rgba(18, 30, 24, .55) 0%, rgba(18, 30, 24, 0) 45%); }
}