/* ============================================================
   NAV UNIFY — full structural match to the homepage nav
   Loaded on every page carrying <nav id="topnav">.
   Scoped `body #topnav` so it beats each page's inline
   <style id="sencha-nav-css"> (7 variants / 109 pages)
   without editing any of them.

   Homepage reference (index.html line 42):
     nav{position:fixed;z-index:300;display:grid;
         grid-template-columns:1fr auto 1fr;
         align-items:center;gap:clamp(10px,1.6vw,22px);
         padding:var(--pad);color:#fff}
   Key traits copied here:
     · NO background, NO blur, NO border  → fully transparent
     · links CENTERED in the middle grid column
     · no sub-labels under OBJECT / ARCHITECTURE
     · Archivo, 10–12px, .18em, uppercase
     · cart is plain text with an olive dot, not a boxed button
   Interior pages have light content under the bar, so we use the
   homepage's own `nav.dark` treatment (ink text, no shadows).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

/* ---------- BAR: transparent, 3-column grid ---------- */
body #topnav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(16px, 3vw, 44px);
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: #fff;
  font-family: "Archivo", -apple-system, sans-serif;
}



/* ---------- CONTRAST STATES (ported from the homepage) ----------
   default            = dark background behind the nav -> white + shadow
   #topnav.dark       = light background behind the nav -> ink, no shadow
   Toggled by /src/nav-contrast.js, which samples what is painted
   behind the bar rather than relying on page-specific selectors.  */
body #topnav .links > a,
body #topnav .ndrop > a,
body #topnav .navright,
body #topnav .lang a,
body #topnav .cart{ text-shadow: 0 1px 10px rgba(0,0,0,.45); }
body #topnav .logo img{ filter: drop-shadow(0 1px 10px rgba(0,0,0,.5)); }
body #topnav .burger span{ background: #fff; }

body #topnav.dark{ color: #14130e; }
body #topnav.dark .links > a,
body #topnav.dark .ndrop > a,
body #topnav.dark .lang a,
body #topnav.dark .cart{ color: #14130e; text-shadow: none; }
body #topnav.dark .logo img{ filter: none; }
body #topnav.dark .burger span{ background: #14130e; }
body #topnav.dark .cart::before{ background: #6d7042; }
body #topnav:not(.dark) .cart::before{ background: #9da177; }

/* the cart COUNT is its own span with a hard-coded colour on most pages —
   force it to follow the nav state or it goes invisible on dark heroes */
body #topnav .cart span,
body #topnav .cart .cart-count,
body #topnav .cart #cartCount{ color: currentColor !important; }

/* ---------- BRAND LOCK ---------- */
body #topnav .logo{ display: flex; align-items: center; gap: 11px; justify-self: start; }
body #topnav .logo img{
  width: clamp(26px, 3vw, 34px);
  height: auto;
  object-fit: contain;
  filter: none;
}
/* logo · hairline · ENWA — the homepage pairs the mark with the collection
   wordmark; product pages shipped the mark alone. Colour follows the nav
   contrast state so it reads white over dark heroes and ink on paper. */
/* the page's own `#topnav a{color:#1c1b12}` wins on the .logo anchor, so
   currentColor here resolves to ink even over a dark hero. Drive the lock
   from the nav's contrast state explicitly instead. */
body #topnav .logo{ color: #fff; }
body #topnav.dark .logo{ color: #14130e; }
body #topnav .logo .div{
  width: 1px;
  height: 19px;
  flex: none;
  background: currentColor;
  opacity: .34;
}
body #topnav .logo .col{
  font-family: "Archivo", -apple-system, sans-serif;
  color: currentColor !important;
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1;
  color: currentColor;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
body #topnav.dark .logo .col{ text-shadow: none; }
body #topnav.dark .logo .div{ opacity: .28; }

/* ---------- LINKS: centered middle column, no sub-labels ---------- */
body #topnav .links{
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  gap: clamp(18px, 2.4vw, 36px);
  font-family: "Archivo", -apple-system, sans-serif;
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body #topnav .links > a,
body #topnav .ndrop > a{
  color: currentColor;
  opacity: .82;
  transition: opacity .25s;
  /* homepage links have NO vertical padding and normal line-height;
     the PDP nav shipped 10px 0 + 1.8 line-height, making the bar 7px taller */
  padding: 0;
  line-height: normal;
}
/* the dropdown wrapper must not add height either */
body #topnav .ndrop{ line-height: normal; }
body #topnav .links > a:hover,
body #topnav .ndrop > a:hover{ opacity: 1; }

/* the homepage nav has no second line under OBJECT / ARCHITECTURE */
body #topnav .links .sub{ display: none !important; }

/* ---------- RIGHT CLUSTER ---------- */
body #topnav .navright{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  gap: clamp(14px, 1.8vw, 22px);
  font-family: "Archivo", -apple-system, sans-serif;
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body #topnav .lang{ display: flex; align-items: center; gap: 6px; }
body #topnav .lang a{ color: currentColor; opacity: .55; transition: opacity .25s; }
body #topnav .lang a.on{ opacity: 1; font-weight: 600; }
body #topnav .lang a:hover{ opacity: 1; }
body #topnav .lang i{ font-style: normal; opacity: .35; margin: 0 2px; }

/* cart: plain text + olive dot, matching the homepage */
body #topnav .cart{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: currentColor;
  opacity: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  transition: opacity .25s;
}
body #topnav .cart::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6d7042;
  flex: none;
}
body #topnav .cart:hover{ opacity: .7; }

/* ---------- DROPDOWN ---------- */
body #topnav .ndm{ font-family: "Archivo", -apple-system, sans-serif; border-radius: 0; }
body #topnav .ndm a{
  font-family: "Archivo", -apple-system, sans-serif;
  letter-spacing: .01em;
  text-transform: none;
}
body #topnav .ndl{
  font-family: "Archivo", -apple-system, sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
body #topnav .ndall{
  font-family: "Archivo", -apple-system, sans-serif !important;
  font-weight: 500 !important;
}

/* ---------- BURGER + DRAWER ---------- */
body #topnav .burger{ justify-self: end; }
body .mmenu{ background: #f7f4ec; border-left: 1px solid rgba(20,19,14,.12); }
body .mmenu a{
  font-family: "Archivo", -apple-system, sans-serif;
  font-weight: 400;
  color: #14130e;
  border-bottom: 1px solid rgba(20,19,14,.12);
}
body .mmenu a .ms{
  font-family: "Archivo", -apple-system, sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(20,19,14,.5);
}
body .mmenu .msub{ color: rgba(20,19,14,.78); }
body .mmenu .mfoot a{
  font-family: "Archivo", -apple-system, sans-serif;
  letter-spacing: .18em;
  color: rgba(20,19,14,.55);
}

/* ---------- MOBILE: homepage hides links + lang + cart, shows burger ---------- */
@media (max-width: 760px){
  body #topnav{
    grid-template-columns: 1fr auto;
    padding: 14px 18px;
  }
  body #topnav .logo{ gap: 9px; }
  body #topnav .logo .col{ font-size: 14px; }
  body #topnav .logo .div{ height: 16px; }
  body #topnav .links{ display: none !important; }
  body #topnav .navright .lang,
  body #topnav .navright .cart{ display: none !important; }
  body #topnav .burger{ display: flex !important; }
}