/* Header navigation — desktop mega menu and mobile drawer.
   Loaded after layout.css so it supersedes the old flat .site-nav rules. */

.site-header { position: sticky; top: 0; z-index: 60; }

.header-row {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ---------- primary nav ---------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--nav);
  background: none;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}
.nav-link:hover,
.nav-trigger:hover { color: var(--gold-lt); background: rgba(200, 148, 43, 0.07); }
.nav-trigger[aria-expanded="true"] { color: var(--gold-lt); background: rgba(200, 148, 43, 0.10); }

.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
  flex: none;
}
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---------- mega panel ---------- */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #140F0A;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 70;
}
.mega[data-open] { display: block; }

.mega-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 34px var(--pad) 38px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}
.mega-col { min-width: 0; }
.mega-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-list a {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--nav);
  text-decoration: none;
  transition: color .16s ease;
}
.mega-list a:hover { color: var(--gold-lt); }
.mega-list .sub {
  display: block;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 2px;
  line-height: 1.45;
}

/* feature tile inside a panel */
.mega-feature {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-feature .media { aspect-ratio: 16 / 10; overflow: hidden; }
.mega-feature .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-feature b { font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 600; }
.mega-feature span { font-size: 13px; color: var(--dim); line-height: 1.55; }
.mega-feature a { font-size: 13px; color: var(--gold-link); }

/* ---------- header actions ---------- */

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.linecard-btn {
  border: 1px solid var(--line-3);
  color: var(--nav);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease;
}
.linecard-btn:hover { border-color: var(--gold); color: var(--gold-lt); }

/* ---------- hamburger ---------- */

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex: none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle span { top: 50%; margin-top: -0.75px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after { top: 6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- mobile ---------- */

@media (max-width: 1080px) {
  /* backdrop-filter makes an element the containing block for fixed-position
     descendants, which would trap the drawer inside the header box. The bar is
     already 92% opaque, so dropping the blur here costs nothing. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-toggle { display: block; order: 3; }
  .header-row { gap: 12px; flex-wrap: nowrap; }
  .linecard-btn { display: none; }

  /* On desktop .site-nav carries margin-left:auto and pushes the actions to
     the right edge. On mobile the nav is fixed and leaves the flex flow, so
     nothing pushes — without this the header content bunches left and leaves
     a dead gap on the right. */
  .header-actions { margin-left: auto; }

  /* drawer header, so the panel carries its own close affordance rather than
     relying on the hamburger it covers */
  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 20px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .nav-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-3);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex: none;
  }
  .nav-close:hover { border-color: var(--gold); color: var(--gold-lt); }

  /* the whole nav becomes a drawer under the bar */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 88vw);
    margin: 0;
    background: #140F0A;
    border-left: 1px solid var(--line-2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 20px 0 40px;
    overflow-y: auto;
    /* The drawer never sits outside the viewport. A fixed element parked at
       translateX(100%) is not clipped by any ancestor overflow, so it makes
       the page scroll sideways. It fades in with a vertical nudge instead —
       a horizontal one would overflow by exactly its offset. */
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
    z-index: 95;
  }
  .site-nav[data-open] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s ease, opacity .2s ease, visibility 0s;
  }

  .nav-link,
  .nav-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 15px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav-trigger { color: var(--ink); }

  .mega {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: var(--bg-deep);
  }
  .mega[data-open] { display: block; }
  .mega-inner { grid-template-columns: 1fr; gap: 22px; padding: 20px 24px 26px; }
  .mega-feature { display: none; }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 4, 0.6);
    border: 0;
    /* .site-nav's z-index:95 only wins against siblings inside .site-header's
       own stacking context (z-index:60) — against a body-level element like
       this one, that context is capped at 60. Must stay under it or the
       scrim sits on top of the open drawer and swallows every tap. */
    z-index: 55;
    display: none;
  }
  .nav-scrim[data-open] { display: block; }

  /* mobile-only extras inside the drawer */
  .nav-drawer-foot { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 10px; }
  .nav-drawer-foot .linecard-btn { display: inline-flex; justify-content: center; }
}

@media (min-width: 1081px) {
  .nav-drawer-foot,
  .nav-drawer-head { display: none; }
  .nav-scrim { display: none !important; }
}

@media (max-width: 560px) {
  .header-row { padding: 8px 18px; gap: 10px; }
  .cart-btn { padding: 9px 13px; font-size: 12px; }
}

@media (max-width: 560px) {
  .announce {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    line-height: 1.5;
  }
}


/* ==========================================================================
   Two-mode navigation — retail shop vs wholesale
   ==========================================================================

   The business is a shop and an importer sharing one building, and the two
   audiences want completely different navigation. Rather than ship two
   headers, every page carries BOTH nav sets and CSS hides the inactive one,
   keyed off <body data-mode>.

   That is what keeps the header block byte-identical across every page, which
   is what makes tools/apply-partials.py a verifiable one-shot edit rather than
   twenty-one hand edits. Cost is about 4KB of hidden markup, well under 500
   bytes gzipped since it is near-duplicate text.

   display:none, not visibility or aria-hidden -- it removes the subtree from
   the accessibility tree, so a screen reader encounters exactly one nav. The
   hidden links are still crawled, which is wanted: it is internal linking, and
   both modes are reachable from the visible switch. */

body[data-mode="shop"]  .nav-set-trade,
body[data-mode="shop"]  .actions-trade,
body[data-mode="shop"]  .only-trade,
body[data-mode="trade"] .nav-set-shop,
body[data-mode="trade"] .actions-shop,
body[data-mode="trade"] .only-shop { display: none; }

.nav-set { display: contents; }

.mode-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 4px;
}

.mode-switch a {
  padding: 8px 17px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nav);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.mode-switch a:hover { color: var(--gold-lt); }

/* The active side is derived from data-mode rather than written into the
   markup, so the header block stays identical on every page. menu.js adds the
   matching aria-current, which CSS cannot express. */
body[data-mode="shop"]  .mode-switch [data-mode-shop],
body[data-mode="trade"] .mode-switch [data-mode-trade] {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 600;
}

/* The drawer copy is hidden on desktop; the bar copy is hidden on mobile. */
.nav-drawer-head .mode-switch { display: none; }

@media (max-width: 1080px) {
  /* .header-row is flex-wrap:nowrap here, and .mega is positioned against
     .site-header -- so the switch cannot take a second row without pushing
     every panel down. It moves into the drawer instead. */
  .header-row > .mode-switch { display: none; }

  .nav-drawer-head { flex-wrap: wrap; }
  .nav-drawer-head .mode-switch {
    display: flex;
    width: 100%;
    order: 3;
    margin: 14px 0 2px;
    /* Must stay static: a positioned child of the fixed drawer escapes it, and
       any translateX here reintroduces the horizontal-scroll bug that made the
       drawer animate on Y in the first place. */
    position: static;
  }
  .nav-drawer-head .mode-switch a { flex: 1; text-align: center; padding: 11px 8px; }
}