/* ============================================================
   Fleet site header — shared stylesheet
   ------------------------------------------------------------
   The header pattern built for weightlossdiets.co.za and passed by two
   independent adversarial lineages, generalised for reuse. Nothing here
   is site-specific: every colour is a custom property that a site overrides
   in its own theme-<site>.css, so brands as different as a deep-blue power
   reseller, a slate-blue analytical lab and an amber zinc manufacturer share
   one reviewed codebase.

   That claim is now true. It was NOT true in the first cut: the CTA's hover
   and the drawer CTA's hover were hard-coded weightlossdiets greens
   (#dcfce7, #14532d), so on the blue and amber sites the "Request a Quote"
   button turned GREEN under the cursor. Static screenshots never showed it,
   because a screenshot has no hover state. If you add a colour here, add a
   token — do not inline a literal.

   Behaviour that is load-bearing, not decoration:
     - a category is a REAL LINK plus a separate chevron <button>, so the
       hub page stays reachable by tap and the disclosure has its own
       accessible control;
     - `.open` is the SOLE owner of dropdown visibility (an earlier cut
       let :focus-within open it too, which made click-to-close and
       Escape both leave the panel visible while aria-expanded said
       false);
     - the drawer is a native <dialog> opened with showModal(), so the
       browser enforces modality and inertness for the whole lifetime;
     - `.site-drawer:not([open]) { display:none }` is an AUTHOR rule and
       must not be "cleaned up" as redundant: a browser old enough to
       lack showModal() may not know <dialog> at all, supplies no UA
       rule, and would leave the closed drawer off-canvas with its
       controls still keyboard-focusable.
   ============================================================ */

:root {
    --h-surface:        #ffffff;
    --h-surface-stuck:  rgba(255, 255, 255, 0.94);
    --h-ink:            #172033;
    --h-ink-muted:      #5b6472;
    --h-accent:         #4361ee;  /* site link colour, kept for continuity */
    --h-accent-ink:     #2f45c9;  /* 6.2:1 on white — safe for text */
    --h-accent-soft:    #eef2ff;
    --h-border:         #e2e8f0;
    --h-focus:          #2563eb;
    /* Fallbacks only. Every site MUST supply these in its theme file. They
       are deliberately a neutral slate rather than the green this pattern
       started life with: a site that forgets its theme should look unbranded,
       not confidently wrong in another brand's colour. */
    --h-commerce:       #334155;
    --h-commerce-soft:  #f1f5f9;
    --h-commerce-line:  #cbd5e1;
    /* CTA interaction states. These MUST be themed per site; the values here
       are neutral fallbacks, not a brand. */
    --h-commerce-hover: #e6ecf2;  /* CTA fill on hover/focus */
    --h-commerce-strong:#0f2436;  /* solid CTA fill on hover (drawer) */
    --h-on-commerce:    #ffffff;  /* text on a solid CTA */

    /* Neutrals. Named rather than inlined so a site with a dark or tinted
       chrome can retheme the header without editing shared rules. */
    --h-neutral-50:     #f8fafc;
    --h-neutral-100:    #f1f5f9;
    --h-neutral-150:    #eef2f6;
    --h-neutral-600:    #475569;
    --h-neutral-700:    #344054;
    --h-surface-solid:  #ffffff;

    --h-overlay:        rgba(15, 23, 42, 0.48);
    --h-height:         72px;
    --h-radius:         10px;
    --h-radius-lg:      12px;
}

html {
    scroll-padding-top: calc(var(--h-height) + 12px);
}

/* The expanded search panel makes the sticky header ~73px taller. */
html.search-open {
    scroll-padding-top: calc(var(--h-height) + 85px);
}

/* ---- Self-sufficiency -------------------------------------------------
   On weightlossdiets this stylesheet sat on top of a modern styles.css that
   already supplied `.container` (max-width, auto margins, side padding) and a
   sans-serif body font. The three sites reusing it supply neither: two are
   laid out with <table> and inherit Times New Roman.

   So the header states its own font and its own gutters, and does so SCOPED
   to itself. A bare `.container` rule here would silently restyle any
   same-named wrapper the host page already uses — exactly the kind of
   collateral change this work is supposed to avoid.

   EVERY component selector in this file is prefixed with `.site-header` or
   `.site-drawer` for the same reason. That was not true of the first cut,
   which carried bare `.dropdown`, `.nav-menu` and `.brand-name` rules while
   this very comment claimed otherwise. The prefixing was applied mechanically
   by scope_css.py — uniformly one class of extra specificity per rule, so the
   internal cascade is unchanged — and verified by capturing all six
   desktop/mobile renders before and after: byte-identical.

   font-family is set on .site-header rather than inherited so the header is
   visually identical across all four sites; everything below it keeps
   whatever the page already used. */
.site-header,
.site-drawer {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
    font-size: 16px;
    text-align: left;
}

.site-header .header-inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    width: 100%;
    /* Wider than a typical 1200px text measure: the header carries brand +
       six categories + a CTA, and at 1200px the nav ran 19px over its box at
       every desktop width — a knife-edge fit any future label change breaks. */
    max-width: 1320px;
}

/* Two of these sites lay pages out with tables, whose cells set their own
   font and alignment. Nothing inside the header should inherit that. */
.site-header *,
.site-drawer * {
    box-sizing: border-box;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--h-surface);
    border-bottom: 1px solid var(--h-border);
}

/* Elevation appears only once the page has actually scrolled, driven by an
   IntersectionObserver on a 1px sentinel. The header height never animates. */
.site-header.is-stuck {
    background: var(--h-surface-stuck);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .site-header.is-stuck {
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        backdrop-filter: blur(12px) saturate(1.4);
    }
}

.site-header .header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--h-height);
}

/* The skip link lives in the fleet accessibility layer (site-a11y.css /
   site-a11y.js), not here. That layer resolves its own target at runtime and
   declines to render when a page has none; this header emitting a second
   `.skip-link` would have been a duplicate AND — since #main-content exists
   on none of these pages — a dead one. Its `display:inline-block !important`
   rule was also the single most collision-prone selector in this file. */

.site-header .visually-hidden, .site-drawer .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Brand ------------------------------------------------------------ */
.site-header .header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.site-header .header-logo:hover,
.site-header .header-logo:focus {
    text-decoration: none;
}

/* v2 used a 200x87 photo collage forced into a 56px box. object-fit
   letterboxed it to roughly 56x25 of actual image, which is noise rather
   than a mark. This is a flat SVG that reads at 16px. */
.site-header .brand-mark {
    display: block;
    width: 32px;
    height: 32px;
    color: var(--h-accent);
    flex-shrink: 0;
}

.site-header .brand-mark svg {
    display: block;
}

.site-header .brand-name {
    /* Inherits the system stack set on .site-header. v3 named Poppins, which
       was webfont-loaded on weightlossdiets and is not available here — an
       unresolved first choice would just fall through anyway. */
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--h-ink);
    white-space: nowrap;
}

.site-header .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* A one-line descriptor of what the business actually does. All three
   rebuilt sites had this only inside a banner IMAGE, so it was invisible to
   search engines, to screen readers and to anyone with images off.

   Hidden VISUALLY below 560px rather than removed: at that width the row is
   brand + CTA + hamburger, and a second line of text pushes the CTA off.

   It stays in the accessibility tree deliberately. An earlier version used
   display:none and justified it by saying the same words appear in the <h1> —
   which is false on nanozinc, a site with no <h1> anywhere. Removing it there
   would have deleted the only machine-readable statement of what the business
   does. The same reasoning covers a sighted user at 400% zoom. */
.site-header .brand-tagline {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--h-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Very small phones. At 320px the row is brand (225px, nowrap, flex-shrink:0)
   + gap + hamburger (44px), which needs 289px inside a 280px content box —
   it overflowed by 5px, and that was MY header doing it, on ten pages. Rather
   than truncate the brand, reclaim the space from the gutter and the gap; the
   brand stays whole and the hamburger keeps its 44px target. */
@media (max-width: 380px) {
    .site-header .header-inner {
        padding-left: 10px;
        padding-right: 10px;
        gap: 10px;
    }
    .site-header .header-logo { gap: 8px; }
    .site-header .brand-name { font-size: 1.05rem; }

    /* And let the brand give way if there is still not enough room. The logo
       is flex-shrink:0 with a nowrap brand name, so when the header sits in a
       narrow container it pushed the hamburger clean off the edge instead of
       yielding. That happens on the newer article pages, which set
       body{max-width:920px; padding:20px} — the header inherits that inset and
       has only ~230px to work with at 320px wide.

       A truncated brand is a far better failure than a page that scrolls
       sideways and a menu button you cannot reach. */
    .site-header .header-logo { flex-shrink: 1; min-width: 0; }
    .site-header .brand-text { min-width: 0; }
    .site-header .brand-name { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
    .site-header .brand-tagline {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* ---- Desktop navigation ----------------------------------------------- */
.site-header .site-nav {
    flex: 1;
    min-width: 0;
}

.site-header .nav-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header .nav-menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

.site-header .nav-menu > li > a {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 6px 0 10px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-ink);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.site-header .nav-menu > li:not(.has-dropdown) > a {
    padding-right: 10px;
}

/* A 2px underline instead of a background fill, and no padding animation —
   v2 slid links 0.3rem right on hover, which moves the hit area while the
   pointer is travelling towards it. */
.site-header .nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 6px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
}

.site-header .nav-menu > li > a:hover,
.site-header .nav-menu > li > a:focus-visible {
    color: var(--h-accent-ink);
    text-decoration: none;
}

.site-header .nav-menu > li > a:hover::after,
.site-header .nav-menu > li.open > a::after {
    background: var(--h-accent);
}

.site-header .nav-menu > li.is-current > a {
    color: var(--h-accent-ink);
    font-weight: 600;
}

.site-header .nav-menu > li.is-current > a::after {
    background: var(--h-accent);
}

/* The disclosure is its own button so the category text stays a real link.
   Hit area is 28x44 (26x44 in the mid-desktop band below), NOT 44x44 as an
   earlier comment claimed. That clears WCAG 2.2 AA's 24x24 minimum with
   margin; 44x44 is the AAA figure and is not met here, because six category
   labels plus a CTA do not fit a 1320px row at that width. */
.site-header .nav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 target-size minimum is 24x24 and this control abuts the
       label, so the spacing exception does not apply. Never go below 26px. */
    width: 28px;
    height: 44px;
    padding: 0;
    margin-right: 2px;
    border: 0;
    background: none;
    color: var(--h-ink-muted);
    cursor: pointer;
    border-radius: 8px;
}

.site-header .nav-caret svg {
    transition: transform 0.14s ease-out;
}

.site-header .nav-caret:hover {
    color: var(--h-accent-ink);
}

.site-header .has-dropdown.open > .nav-caret svg {
    transform: rotate(180deg);
}

/* ---- Dropdown ---------------------------------------------------------
   v2 opened these on :hover only, and the JS toggle was gated to <=900px,
   so between 901px and desktop-with-touch nothing opened at all.

   Visibility is driven SOLELY by `.open`, which the caret button owns. An
   earlier cut also had `:focus-within` open the panel; because the caret
   keeps focus after a click, that made "click to close" and Escape both
   leave the panel visible while aria-expanded said false. One state, one
   owner. The caret is a real <button>, so Enter/Space already serve
   keyboard users. */
.site-header .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 272px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    z-index: 1001;

    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0.14s;
}

.site-header .has-dropdown.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-header .dropdown li {
    margin: 0;
}

.site-header .dropdown li a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-neutral-700);
    text-decoration: none;
}

.site-header .dropdown li a:hover,
.site-header .dropdown li a:focus-visible {
    background: var(--h-accent-soft);
    color: var(--h-accent-ink);
    text-decoration: none;
}

.site-header .dropdown li a[aria-current]:not([aria-current="false"]) {
    background: var(--h-accent-soft);
    color: var(--h-accent-ink);
    font-weight: 600;
}

/* ---- Header actions --------------------------------------------------- */
.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.site-header .header-search-toggle,
.site-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--h-radius);
    background: none;
    color: var(--h-ink);
    cursor: pointer;
}

.site-header .header-search-toggle:hover,
.site-header .nav-toggle:hover {
    background: var(--h-neutral-100);
}

.site-header .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.site-header .nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--h-ink);
}

/* v2: white on #28a745 measures 3.1:1 — below the 4.5:1 AA floor for
   normal text (the original #28a745 was 3.1:1). It also stops the CTA being
   the loudest element on a health-information page. */
.site-header .header-shop-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--h-commerce-line);
    border-radius: var(--h-radius);
    background: var(--h-commerce-soft);
    color: var(--h-commerce);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.site-header .header-shop-btn:hover,
.site-header .header-shop-btn:focus-visible {
    background: var(--h-commerce-hover);
    color: var(--h-commerce);
    text-decoration: none;
}

/* ---- Search panel ------------------------------------------------------ */
.site-header .header-search {
    border-top: 1px solid var(--h-border);
    background: var(--h-surface);
}

.site-header .header-search-form {
    max-width: 1320px;
    display: flex;
    gap: 10px;
    padding: 14px 20px;
}

.site-header .header-search-form input[type="search"],
.site-drawer .drawer-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    background: var(--h-neutral-50);
    /* 16px MINIMUM or iOS Safari zooms the page on focus — and it must be an
       absolute length: styles.css sets html{font-size:14px} below 480px, so
       `1rem` here computed to 14px and silently reintroduced the zoom. */
    font-size: 16px;
    font-family: inherit;
    color: var(--h-ink);
}

.site-header .header-search-form input:focus,
.site-drawer .drawer-search input:focus {
    outline: 3px solid var(--h-focus);
    outline-offset: 1px;
    background: var(--h-surface-solid);
}

.site-header .header-search-form button,
.site-drawer .drawer-search button {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--h-radius);
    background: var(--h-accent);
    color: var(--h-on-commerce);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.site-header .header-search-form button:hover,
.site-drawer .drawer-search button:hover {
    background: var(--h-accent-ink);
}

/* ---- Focus ------------------------------------------------------------
   v2 had no :focus-visible anywhere, and the global a:focus merely changed
   link colour — dark blue on a blue slab. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-drawer a:focus-visible,
.site-drawer button:focus-visible {
    outline: 3px solid var(--h-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Mobile drawer ----------------------------------------------------- */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--h-overlay);
}

/* A <dialog>: closed means display:none and out of the tab order for free.
   Defaults have to be undone — a dialog is centred with auto margins and
   capped at calc(100% - 6px - 2em). */
.site-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    width: min(88vw, 360px);
    height: 100%;
    background: var(--h-surface);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--h-ink);
}

/* An author-controlled closed state. Do NOT rely on the UA rule
   `dialog:not([open]) { display: none }`: a browser old enough to lack
   showModal() may not know <dialog> at all, gets no UA rule, and would leave
   the closed drawer rendered off-canvas via translateX(100%) with its close
   button, search field and footer links still keyboard-focusable — which is
   precisely the invisible-tab-stop defect v2 had and v3 exists to remove. */
.site-drawer:not([open]) {
    display: none;
}

.site-drawer[open] {
    display: flex;
    flex-direction: column;
    /* Redundant in the top layer, ESSENTIAL in the showModal-less fallback:
       without it the overlay (1050) paints ABOVE the drawer, so every click
       over the visible menu lands on the overlay and closes it. */
    z-index: 1060;
}

.site-drawer.open {
    transform: translateX(0);
}

/* ::backdrop does not inherit from :root in every engine, so the overlay
   colour is written literally here. */
.site-drawer::backdrop {
    background: rgba(15, 23, 42, 0.48);
}

.nav-overlay[hidden] {
    display: none;
}

/* The scroll lock is applied in JS, not here: `html:has(body.drawer-open)`
   would be ignored by exactly the browsers that need the fallback, since
   anything old enough to lack <dialog> also lacks :has(). */
body.drawer-open {
    overflow: hidden;
}

.site-drawer .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 8px 0 20px;
    border-bottom: 1px solid var(--h-border);
    flex-shrink: 0;
}

.site-drawer .drawer-title {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-ink-muted);
}

.site-drawer .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--h-radius);
    background: none;
    color: var(--h-ink);
    cursor: pointer;
}

.site-drawer .drawer-search {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--h-border);
    flex-shrink: 0;
}

.site-drawer .drawer-nav {
    flex: 1;
    padding: 8px 0;
}

.site-drawer .drawer-list,
.site-drawer .drawer-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-drawer .drawer-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--h-neutral-100);
}

/* The row splits: the label navigates, the chevron expands. Both are 44px+
   so neither is a mis-tap risk. */
.site-drawer .drawer-row > a {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--h-ink);
    text-decoration: none;
}

/* Matches "page" AND "true". An exact URL match sets "page"; a
   keyword-derived section sets "true", which is the honest value but
   was invisible here, so the drawer silently dropped the wayfinding
   the desktop nav was showing. */
.site-drawer .drawer-row > a[aria-current]:not([aria-current="false"]) {
    color: var(--h-accent-ink);
    font-weight: 600;
}

/* ...and the same for a current link INSIDE an expanded group. Exact URL
   matching lands on the nested link, so on a child page — which is most pages
   on these sites — this is the only rule that can show the reader where they
   are once the drawer is open. It was missing, and the group was collapsed on
   top of it, so mobile wayfinding was invisible in both places at once. */
.site-drawer .drawer-sub a[aria-current]:not([aria-current="false"]) {
    color: var(--h-accent-ink);
    font-weight: 600;
    background: var(--h-accent-soft);
}

.site-drawer .drawer-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-left: 1px solid var(--h-neutral-100);
    background: none;
    color: var(--h-ink-muted);
    cursor: pointer;
}

.site-drawer .drawer-caret svg {
    transition: transform 0.16s ease-out;
}

.site-drawer .drawer-list li.open > .drawer-row .drawer-caret svg {
    transform: rotate(180deg);
}

.site-drawer .drawer-sub {
    background: var(--h-neutral-50);
}

.site-drawer .drawer-sub[hidden] {
    display: none;
}

.site-drawer .drawer-sub li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px 0 36px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: var(--h-neutral-600);
    text-decoration: none;
    border-bottom: 1px solid var(--h-neutral-150);
}

.site-drawer .drawer-foot {
    padding: 16px 20px 24px;
    border-top: 1px solid var(--h-border);
    flex-shrink: 0;
}

/* v2 set the shop button to display:none below 900px — the only revenue
   action in the header simply vanished on the majority of traffic. */
.site-drawer .drawer-shop {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--h-radius);
    background: var(--h-commerce);
    color: var(--h-on-commerce);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.site-drawer .drawer-shop:hover {
    background: var(--h-commerce-strong);
    color: var(--h-on-commerce);
    text-decoration: none;
}

.site-drawer .drawer-contact {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--h-ink-muted);
    text-decoration: none;
}

/* ---- Mid desktop (1181-1340px) ----------------------------------------
   The full six-category row needs ~852px and only gets ~760px once the
   container stops growing. Rather than drop 1280px laptops to a hamburger,
   tighten the nav scale in this band. Hit targets stay 44px tall. */
@media (min-width: 1181px) and (max-width: 1340px) {
    .site-header .nav-menu > li > a {
        font-size: 0.8125rem;
        padding: 0 1px 0 4px;
    }

    .site-header .nav-menu > li:not(.has-dropdown) > a {
        padding-right: 4px;
    }

    .site-header .nav-menu > li > a::after {
        left: 4px;
        right: 1px;
    }

    .site-header .nav-caret {
        width: 26px;
        margin-right: 0;
    }

    .site-header .header-inner {
        gap: 12px;
    }

    .site-header .header-actions {
        gap: 6px;
    }

    .site-header .header-shop-btn {
        padding: 0 12px;
    }
}

/* ---- Compact / mobile -------------------------------------------------
   One row, always. The breakpoint is 1180px here and in ONE place in the JS
   — the resize handler that closes the drawer when the layout goes back to
   desktop (site-header.js, `window.innerWidth > 1180`). An earlier comment
   said "the two JS checks"; there is only one, and looking for a second
   wastes the next reader's time. Keep the two numbers in step. */
@media (max-width: 1180px) {
    :root {
        --h-height: 60px;
    }

    .site-header .site-nav {
        display: none;
    }

    .site-header .nav-toggle {
        display: inline-flex;
    }

    .site-header .brand-name {
        font-size: 1.125rem;
    }

    .site-header .header-shop-btn {
        display: none;  /* lives in the drawer footer, full width */
    }

    .site-header .header-actions {
        gap: 4px;
    }
}

@media (max-width: 380px) {
    .site-header .brand-name {
        font-size: 1rem;
    }
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .site-header *,
    .site-drawer,
    .site-drawer * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}