/* ═══ ZALXNDRA · mobile + tablet header and menu (≤860px) ══════════════════════════════
   Laid out on the Tiffany & Co. mobile pattern, kept to our own mark and type:

     [menu][search]        ZALXNDRA        [advisor][bag]

   - two icons each side, the mark truly centred between equal tracks
   - the menu opens full-screen: large serif collections with chevrons, a rule,
     then client services with line icons; the bar turns light and the menu
     icon becomes a close
   - search opens its own full-screen panel (search.js)
   The logo is NOT enlarged - it stays at the size it already had on phones.

   Applies at 860px and below - the width at which the light pages already
   collapse their nav into a menu button - so phones AND tablet portrait get
   this bar, on both templates, from one breakpoint. Between 760 and 860px the
   old layout kept the wide boxed advisor and Bag buttons beside a hamburger,
   and they could not fit around a centred logo (23px off at 760). Desktop
   (861px and up) keeps its full header; everything that changes layout sits
   inside the max-width:860px query. The two menu links added for phones
   (Order Tracking, Contact) are hidden above it, and Home is hidden below it.

   Hooks: <header data-hdr="light"> (EZY LVR, The House, home - the grid is
   header > div) or data-hdr="dark" (The Order, its product and policy pages,
   the journal - the header is itself the grid). The search button is the
   header's last child and is absolutely placed, so it never becomes a grid
   item on either template. Menu links are styled by data-mnav-i, never by
   href: Netlify's Pretty URLs rewrites hrefs on publish ('enquire.html' ->
   '/enquire'), so href selectors pass locally and silently fail live.

   Loaded in <head>, not injected, so it is right on first paint. The right
   cell always reserves both icon slots, so nothing moves when bag.js mounts
   the bag button after load. !important overrides the pages' own rules
   (several inline); bag selectors outrank bag.js's later-loading sheet by
   specificity instead. */

header [data-mnav-x], header .zx-search-btn { display: none; }

/* ── the Bag button, styled before first paint ────────────────────────────
   The button is now in each page's markup (with a two-line inline script that
   writes the count from localStorage during parsing), instead of being created
   by bag.js after load. Its base look therefore has to live here, in <head>,
   not in bag.js's injected sheet - otherwise it would paint unstyled first.
   Mirrors bag.js's rules exactly; bag.js keeps its copy for the 404 page. */
.zx-bagbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.zx-bagbtn svg { width: 15px; height: 15px; flex: none; }
.zx-bagbtn .zx-n { font-variant-numeric: tabular-nums; }
.zx-bagbtn .zx-n::before { content: "("; }
.zx-bagbtn .zx-n::after { content: ")"; }
@media (max-width: 600px) { .zx-bagbtn { padding: 9px 12px; gap: 6px; } .zx-bagbtn .zx-lbl { display: none; } }
/* Desktop: one fixed width for the Bag box, so the count arriving can never move
   anything beside it. The inline count script usually writes "(2)" before first
   paint, but a browser may paint between the button and that script; measured,
   4 of 40 loads showed "Speak to an advisor" jump 32px when it did. Widths at
   11px Plex Mono: "Bag" 83px, "Bag (1-9)" 116px, "Bag (10-99)" 124px - so 124px
   holds any count up to 99 without a pixel of movement. */
@media (min-width: 861px) { .zx-bagbtn { min-width: 124px; justify-content: center; } }

/* ── all widths: the logo on the true centre ──────────────────────────────
   Light: pin each child of the grid to its column. Auto-placement let a hidden
   child shift the rest - on enquire and thank-you the menu button is display:none
   on desktop and there is no nav, so the logo fell into the first column and sat
   ~395px left of centre. Pinned, a hidden item can't move anything. */
header[data-hdr="light"] > div > details,
header[data-hdr="light"] > div > nav { grid-column: 1; grid-row: 1; }
header[data-hdr="light"] > div > a   { grid-column: 2; grid-row: 1; }
header[data-hdr="light"] > div > div { grid-column: 3; grid-row: 1; }

/* Dark, 760px and up: equal side tracks. The pages' own 44px|1fr|auto grid
   centred the logo in whatever space the hamburger and the wider advisor+bag
   group left over. The Order pages carry an inline fix for this; the journal
   pages wrote their header rule differently and never received it (logo
   ~118px left of centre) - here it applies to every dark page from one place. */
@media (min-width: 760px) {
  header[data-hdr="dark"] { grid-template-columns: 1fr auto 1fr !important; }
  header[data-hdr="dark"] > .call,
  header[data-hdr="dark"] > div { justify-self: end; }
}

@media (max-width: 860px) {

  /* ── bar ─────────────────────────────────────────────────────────── */
  header[data-hdr="light"] > div {
    height: 56px !important;
    padding: 0 2px !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 4px !important;
  }
  /* explicit ink: 46 light pages set #1A1A1A on this div; thank-you and enquire sit on a
     dark body and set nothing, so the line icons inherited near-white on the cream bar */
  header[data-hdr="light"] > div { color: #1A1A1A !important; }
  header[data-hdr="light"] > div > a { justify-self: center; }
  header[data-hdr="light"] > div > div {
    justify-self: end;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 88px;                                   /* advisor + reserved bag slot */
  }
  header[data-hdr="light"]:not([style*="position"]) { position: relative; }   /* thank-you */

  header[data-hdr="dark"] {
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 4px !important;
    height: 56px;
    padding: 0 2px !important;
  }
  header[data-hdr="dark"] > .call { justify-self: end; margin-right: 44px; }  /* bag not mounted yet */
  header[data-hdr="dark"] > div { justify-self: end; gap: 0 !important; }   /* bag.js's group, by structure */

  /* the mark: kept at its existing phone size, never enlarged */
  header[data-hdr="light"] > div > a img,
  header[data-hdr="dark"] .mark img { height: 17px !important; margin: 0 auto !important; }

  /* ── menu toggle: two lines, becomes a close ─────────────────────── */
  header[data-hdr] details > summary {
    width: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  header[data-hdr] details > summary > span {
    position: relative !important;
    width: 20px !important;
    height: 1.5px !important;
    background: transparent !important;
  }
  header[data-hdr] details > summary > span::before,
  header[data-hdr] details > summary > span::after {
    width: 20px !important;
    height: 1.5px !important;
    background: currentColor !important;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1) !important;
  }
  header[data-hdr] details > summary > span::before { top: -4px !important; transform: none !important; }
  header[data-hdr] details > summary > span::after  { top: 4px !important;  transform: none !important; }
  header[data-hdr] details[open] > summary > span::before { top: 0 !important; transform: rotate(45deg) !important; }
  header[data-hdr] details[open] > summary > span::after  { top: 0 !important; transform: rotate(-45deg) !important; }

  /* ── icon buttons: search (left), advisor + bag (right) ──────────── */
  header[data-hdr] .zx-search-btn {
    display: flex;
    position: absolute;
    left: 46px;                                        /* 2px inset + the 44px menu toggle */
    top: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
  }
  header[data-hdr="light"] .zx-search-btn { color: #1A1A1A; }
  header[data-hdr] [data-advisor],
  header[data-hdr="dark"] .call {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  header[data-hdr] [data-advisor] > span { display: none !important; }
  header[data-hdr] .zx-search-btn::before,
  header[data-hdr] [data-advisor]::before,
  header[data-hdr="dark"] .call::before {
    content: "";
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--zx-i) center / contain no-repeat;
            mask: var(--zx-i) center / contain no-repeat;
  }
  header[data-hdr] .zx-search-btn::before { --zx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 4.5a6 6 0 1 0 0 12a6 6 0 0 0 0-12z'/%3E%3Cpath d='M15 15l4.5 4.5'/%3E%3C/svg%3E"); }
  header[data-hdr] [data-advisor]::before,
  header[data-hdr="dark"] .call::before   { --zx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5V7'/%3E%3Cpath d='M10.5 5.5h3'/%3E%3Cpath d='M5 16a7 7 0 0 1 14 0'/%3E%3Cpath d='M3.5 16h17'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
  /* enquire is the advisor page, so its right-hand link is "Return" home: an arrow, not the bell */
  header[data-hdr] [data-advisor][data-hdr-icon="return"]::before { --zx-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 18l-6-6 6-6'/%3E%3C/svg%3E"); }

  header[data-hdr] .zx-bagbtn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    gap: 0;
    justify-content: center;
    color: inherit;
  }
  header[data-hdr] .zx-bagbtn svg { width: 22px; height: 22px; }
  header[data-hdr] .zx-bagbtn .zx-lbl { display: none; }
  header[data-hdr] .zx-bagbtn .zx-n {
    position: absolute;
    top: 7px;
    right: 5px;
    font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }
  header[data-hdr] .zx-bagbtn .zx-n::before,
  header[data-hdr] .zx-bagbtn .zx-n::after { content: none; }
  header[data-hdr="light"] .zx-bagbtn .zx-n { color: #B18A3E; }
  header[data-hdr="dark"]  .zx-bagbtn .zx-n { color: #C08E76; }

  header[data-hdr] summary:focus-visible,
  header[data-hdr] .zx-search-btn:focus-visible,
  header[data-hdr] [data-advisor]:focus-visible,
  header[data-hdr="dark"] .call:focus-visible,
  header[data-hdr] .zx-bagbtn:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }

  /* ── menu open: the bar turns light, the page beneath is locked ──── */
  html:has(header[data-hdr] details[open]) { overflow: hidden; }
  header[data-hdr]:has(details[open]) {
    background: #F4EEE4 !important;
    color: #141414 !important;
    border-bottom: 1px solid #E3DBCD !important;
    z-index: 2147481000 !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  header[data-hdr][style*="position:absolute"]:has(details[open]) { position: fixed !important; }  /* home */
  header[data-hdr="dark"]:has(details[open]) .mark img { filter: none !important; opacity: 1 !important; }
  header[data-hdr="dark"]:has(details[open]) .zx-bagbtn .zx-n { color: #B18A3E; }

  /* ── menu panel: full screen ─────────────────────────────────────── */
  header[data-hdr] details[data-mnav] > div,
  header[data-hdr] .site-menu-panel {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #F4EEE4 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 28px 0 calc(40px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1 !important;
  }

  /* collections: large serif, chevron */
  header[data-hdr] details[data-mnav] > div a,
  header[data-hdr] .site-menu-panel a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 58px !important;
    padding: 0 20px 0 22px !important;
    border: 0 !important;
    background: none !important;
    color: #141414 !important;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
  }
  header[data-hdr] details[data-mnav] > div a::after,
  header[data-hdr] .site-menu-panel a::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="home"],
  header[data-hdr] .site-menu-panel a[data-mnav-i="home"] { display: none !important; }

  /* client services: a rule, then small sans with line icons */
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="advisor"],
  header[data-hdr] details[data-mnav] > div a[data-mnav-x],
  header[data-hdr] .site-menu-panel a[data-mnav-i="advisor"],
  header[data-hdr] .site-menu-panel a[data-mnav-x] {
    justify-content: flex-start !important;
    gap: 14px !important;
    min-height: 52px !important;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #3B342D !important;
  }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="advisor"],
  header[data-hdr] .site-menu-panel a[data-mnav-i="advisor"] {
    margin-top: 30px !important;
    padding-top: 30px !important;
    border-top: 1px solid #E3DBCD !important;
    min-height: 82px !important;
  }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="advisor"]::after,
  header[data-hdr] details[data-mnav] > div a[data-mnav-x]::after,
  header[data-hdr] .site-menu-panel a[data-mnav-i="advisor"]::after,
  header[data-hdr] .site-menu-panel a[data-mnav-x]::after {
    order: -1;
    width: 22px;
    height: 22px;
  }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="advisor"]::after,
  header[data-hdr] .site-menu-panel a[data-mnav-i="advisor"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5V7'/%3E%3Cpath d='M10.5 5.5h3'/%3E%3Cpath d='M5 16a7 7 0 0 1 14 0'/%3E%3Cpath d='M3.5 16h17'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5V7'/%3E%3Cpath d='M10.5 5.5h3'/%3E%3Cpath d='M5 16a7 7 0 0 1 14 0'/%3E%3Cpath d='M3.5 16h17'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="track"]::after,
  header[data-hdr] .site-menu-panel a[data-mnav-i="track"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4z'/%3E%3Cpath d='M4 8l8 4 8-4'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4z'/%3E%3Cpath d='M4 8l8 4 8-4'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); }
  header[data-hdr] details[data-mnav] > div a[data-mnav-i="contact"]::after,
  header[data-hdr] .site-menu-panel a[data-mnav-i="contact"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='M4.5 7l7.5 6 7.5-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='M4.5 7l7.5 6 7.5-6'/%3E%3C/svg%3E"); }

  header[data-hdr] details[data-mnav] > div a:focus-visible,
  header[data-hdr] .site-menu-panel a:focus-visible { outline: 1px solid #141414; outline-offset: -4px; }
}

/* the narrowest phones: a touch smaller mark so both icon pairs still clear it */
@media (max-width: 340px) {
  header[data-hdr="light"] > div > a img,
  header[data-hdr="dark"] .mark img { height: 15px !important; }
}