/* sl-header.css — the site header (<header class="site">) for pages that carry its markup but
   do NOT load /framework/sl-redo.css. web-ops-head (Nikolai Volkov), row tq-1788203630040-cff1,
   2026-10-15.

   WHY: 12 live apex pages had the canonical header markup with no rules for it, or with the
   desktop rules only. At 390px the logo laid out at its intrinsic 500px, or the six-link nav /
   .nav-right ran to x=639-1013, and the page scrolled sideways (Hana's 5d30 walk; full-tree
   sweep 2026-10-15). The rules below are the header section of /framework/sl-redo.css (lines
   117-167 plus its MOBILE HEADER block), copied value for value so desktop renders as on every
   other page. Variables are scoped to header.site so the page's own palette is not touched.

   sl-redo.css's 1101-1500px "navfit" band is NOT copied: an unclosed comment above it swallows that
   @media block, so no sl-redo page renders it (measured 2026-10-15 at 1280: nav 15px, gap 26px).
   Phone rules live in sl-header-mobile.css; a page linking this file links that one too.
   KEEP IN STEP WITH sl-redo.css. A page that loads sl-redo.css must NOT also load this file. */
header.site{--cream:#F5F0EB;--plum:#5B2E5A;--midnight:#352040;--mauve:#C4A9B5;--line:#E6DBE2;
  --gold:#F2C53D;--font-ui:'Mazzard Soft M','Quicksand','Nunito',sans-serif;
  background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:2}
header.site .wrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:15px 24px;box-sizing:border-box}
header.site img.logo{height:40px;width:auto;max-width:100%;display:block}
header.site nav{display:flex;gap:26px;align-items:center;margin-left:10px}
header.site nav a{font-family:var(--font-ui);font-weight:600;font-size:15px;color:var(--plum);
  text-decoration:none;white-space:nowrap}
header.site nav a:hover{color:var(--midnight);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--mauve);text-decoration-thickness:2px}
header.site nav a .car{font-size:9px;opacity:.55;vertical-align:2px}
header.site .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
header.site .nav-search{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:999px;padding:2px 4px 2px 12px;background:#fff}
header.site .nav-search:focus-within{border-color:var(--gold)}
header.site .nav-search input{border:0;background:transparent;color:var(--midnight);font-family:var(--font-ui);font-weight:600;font-size:13px;line-height:1.2;width:150px;outline:0}
header.site .nav-search input::placeholder{color:var(--mauve)}
header.site .nav-search button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:var(--plum);color:#fff;cursor:pointer}
header.site .nav-search button:hover{background:var(--midnight)}
header.site .store-pill{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--midnight);
  font-family:var(--font-ui);font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 24px;border-radius:999px;text-decoration:none;border:2px solid #d9a91f;
  box-shadow:0 8px 22px rgba(242,197,61,.45);white-space:nowrap;transition:transform .15s ease,background-color .15s}
header.site .store-pill:hover{background:#ffd84d;transform:translateY(-1px)}
header.site .nav-util{display:inline-flex;align-items:center;gap:6px;color:var(--plum);text-decoration:none;
  font-family:var(--font-ui);font-weight:700;font-size:14px;white-space:nowrap}
header.site .nav-util:hover{color:var(--midnight)}
header.site .nav-util svg{display:block}
@media (min-width:1101px){header.site .wrap{flex-wrap:wrap}}