/* nav.css — Wholesale-B2B minimalist nav + mega-menus + mobile drawer
 *
 * Design tenets:
 *   - Text-only. No emoji glyphs anywhere in the header.
 *   - Typography carries the brand. Cormorant Garamond (display) + Inter (UI).
 *   - Subtle, coordinated motion. Underline grows from left, mega panel slides
 *     down, columns stagger in. No decorative motion for its own sake.
 *   - Color used sparingly. Brass is an accent, never a fill for chrome.
 */

/* ── Site header ─────────────────────────────────── */
.site-header {
  position: fixed;
  top: var(--bar-h, 0px);
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}
/* backdrop-filter lives on a child layer so .site-header doesn't become
   a containing block for fixed/absolute descendants (which would shift
   the mega-menu panel down by ~38px). */
.site-header-bg {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(29, 29, 31, 0.08);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  z-index: -1;
  pointer-events: none;
}

/* ── Body offset ────────────────────────────────── */
/* Both .b2b-bar and .site-header are position:fixed — the document flow
   starts at the top of the viewport, but visually the bar + nav occupy
   (bar-h + 67px). Add a body padding-top so main content is not hidden. */
body { padding-top: calc(var(--bar-h, 0px) + 72px); }

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ── Logo (typographic, no symbol) ───────────────── */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 180ms ease;
}
.logo:hover { opacity: 0.78; }

.logo-mark {
  font-family: var(--font-d, 'Cormorant Garamond, Georgia, serif');
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--ink, #1d1d1f);
  line-height: 1;
}
.logo-rule {
  width: 1px;
  height: 18px;
  background: var(--ink, #1d1d1f);
  opacity: 0.18;
  align-self: center;
  display: inline-block;
}
.logo-tag {
  font-family: var(--font-ui, 'Inter, system-ui, sans-serif');
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E6E73);
  line-height: 1;
}

/* ── Primary nav ──────────────────────────────────── */
.primary-nav { flex: 1; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  justify-content: center;
}

/* Each top-level item — refined, generous hit area, animated underline */
.nav-list > li {
  position: relative;
}
.nav-list > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font: 500 14px/1 var(--font-ui, 'Inter, system-ui, sans-serif');
  color: var(--ink, #1d1d1f);
  text-decoration: none;
  border-radius: 0;
  transition: color 180ms ease;
  letter-spacing: 0.005em;
}

/* Animated underline that grows from left on hover/active */
.nav-list > li > a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1.5px;
  background: var(--brass, #b07d2a);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
  color: var(--brass, #b07d2a);
}
.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after,
.nav-list > li > a.nav-active::after {
  transform: scaleX(1);
}
.nav-list > li > a.nav-active { color: var(--brass, #b07d2a); }

/* Chevron drawn with a CSS pseudo (no Font Awesome emoji-feel) */
.nav-chev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 0.55;
  margin-left: 2px;
}
.nav-has-mega:hover .nav-chev,
.nav-has-mega:focus-within .nav-chev { transform: translateY(1px) rotate(-135deg); opacity: 0.9; }

/* ── Mega-menu ────────────────────────────────────── */
/* position:fixed, anchored to the viewport via the bar-h CSS variable.
   The backdrop-filter on the header lives on .site-header-bg (not on
   .site-header) so the fixed positioning resolves correctly. */
.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--bar-h, 0px) + 72px);
  background: var(--white, #fff);
  box-shadow: 0 30px 48px -28px rgba(20, 16, 8, 0.18);
  padding: 40px 28px 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 240ms;
  z-index: 49;
  pointer-events: none;
}
/* Hover bridge: a transparent strip that extends the mega-menu's hover
   area up into the trigger, so the cursor doesn't fall off when moving
   from the trigger into the panel. */
.mega-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
}

.nav-has-mega:hover .mega-menu,
.nav-has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner grid: column section on the left + feature card on the right */
.mega-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.mega-col h4 {
  font: 500 11px/1 var(--font-ui, 'Inter, sans-serif');
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3, #6E6E73);
  margin: 0 0 18px;
  padding-bottom: 10px;
  position: relative;
}
.mega-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 1px;
  background: var(--brass, #b07d2a);
}

.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Each mega link: text-only with a chevron that fades in on hover */
.mega-col a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  margin: 0 -14px;
  font: 500 14px/1.35 var(--font-ui, 'Inter, sans-serif');
  color: var(--ink, #1d1d1f);
  text-decoration: none;
  border-radius: 6px;
  transition: background 160ms ease, color 160ms ease, padding-left 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mega-col a:hover {
  background: rgba(176, 125, 42, 0.06);
  color: var(--brass, #b07d2a);
  padding-left: 18px;
}

.mega-link-text { display: inline-block; }
.mega-link-text strong { display: block; font-weight: 500; line-height: 1.35; }
.mega-link-text em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--ink-3, #6E6E73);
  display: block;
  line-height: 1.35;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.mega-link-arrow {
  font-size: 1.4rem;
  color: var(--brass, #b07d2a);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  flex-shrink: 0;
  font-weight: 300;
  line-height: 1;
}
.mega-col a:hover .mega-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered entrance for mega columns + items when the menu opens.
   Activated by adding .mega-open class from JS (and CSS-driven on hover
   for users with JS disabled via :hover). */
.nav-has-mega:hover .mega-col,
.nav-has-mega:focus-within .mega-col,
.nav-has-mega.mega-open .mega-col {
  animation: megaColIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.nav-has-mega:hover .mega-feature,
.nav-has-mega:focus-within .mega-feature,
.nav-has-mega.mega-open .mega-feature {
  animation: megaColIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}

.nav-has-mega .mega-col:nth-child(1) { animation-delay: 40ms !important; }
.nav-has-mega .mega-col:nth-child(2) { animation-delay: 90ms !important; }
.nav-has-mega .mega-col:nth-child(3) { animation-delay: 140ms !important; }
.nav-has-mega .mega-col:nth-child(4) { animation-delay: 190ms !important; }

@keyframes megaColIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mega feature card (right side) ──────────────── */
.mega-feature {
  background: linear-gradient(180deg, #faf6ee 0%, #f5efe2 100%);
  border: 1px solid rgba(176, 125, 42, 0.18);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.mega-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at top right, rgba(176, 125, 42, 0.10), transparent 60%);
  pointer-events: none;
}

.mega-feature-eyebrow {
  margin: 0;
  font: 500 11px/1 var(--font-ui, 'Inter, sans-serif');
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brass, #b07d2a);
  position: relative;
}
.mega-feature-title {
  font: 500 18px/1.35 var(--font-d, 'Cormorant Garamond, serif');
  color: var(--ink, #1d1d1f);
  position: relative;
  display: block;
}
.mega-feature-body {
  margin: 0;
  font: 400 13px/1.55 var(--font-ui, 'Inter, sans-serif');
  color: var(--ink-2, #3D3D43);
  position: relative;
}

.mega-feature-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  position: relative;
}
.mega-feature-stat { display: flex; flex-direction: column; gap: 2px; }
.mega-feature-stat-num {
  font-family: var(--font-d, 'Cormorant Garamond, serif');
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ink, #1d1d1f);
  line-height: 1;
  letter-spacing: -0.005em;
}
.mega-feature-stat-label {
  font: 500 11px/1.2 var(--font-ui, 'Inter, sans-serif');
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3, #6E6E73);
  margin-top: 4px;
}

/* ── Header actions (right cluster) ───────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink, #1d1d1f);
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: 999px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.header-icon:hover,
.header-icon:focus-visible {
  background: var(--ink, #1d1d1f);
  color: #fff;
  border-color: var(--ink, #1d1d1f);
  transform: translateY(-1px);
}

.btn-cta {
  position: relative;
  padding: 11px 22px;
  background: var(--ink, #1d1d1f);
  color: #fff;
  border: 1px solid var(--ink, #1d1d1f);
  border-radius: 999px;
  font: 500 13px/1 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-cta::after {
  content: '\2192'; /* a typographic arrow, not emoji */
  font-weight: 300;
  font-size: 14px;
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--brass, #b07d2a);
  border-color: var(--brass, #b07d2a);
  color: #fff;
  transform: translateY(-1px);
}
.btn-cta:hover::after { transform: translateX(3px); }

/* ── Hamburger ────────────────────────────────────── */
.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(29, 29, 31, 0.12);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: background 180ms ease;
}
.hamburger:hover { background: rgba(29, 29, 31, 0.04); }
.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink, #1d1d1f);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 180ms ease;
  transform-origin: center;
  /* Explicit default-state transforms. Without these, if `aria-expanded`
     ever stays stuck at "true" (e.g. a JS error between open and close,
     or a rapid double-tap race), the spans freeze at rotate(45deg)
     and the user sees a stuck X. With explicit "closed" values here,
     even a missed aria-attribute update snaps back on the next paint. */
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile drawer ───────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.4);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 380px;
  background: var(--white, #fff);
  z-index: 61;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -32px 0 64px -16px rgba(0, 0, 0, 0.12);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  padding: 22px 22px;
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  background: var(--white, #fff);
}
.drawer-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.drawer-logo-mark {
  font-family: var(--font-d, 'Cormorant Garamond, serif');
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ink, #1d1d1f);
  letter-spacing: 0.02em;
  line-height: 1;
}
.drawer-logo-rule {
  width: 1px;
  height: 18px;
  background: var(--ink, #1d1d1f);
  opacity: 0.2;
  align-self: center;
  display: inline-block;
}
.drawer-logo-tag {
  font: 500 10px/1 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E6E73);
}
.drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(29, 29, 31, 0.12);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, #1d1d1f);
  transition: background 180ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.drawer-close:hover { background: rgba(29, 29, 31, 0.05); transform: rotate(90deg); }

.drawer-body {
  position: absolute;
  top: 76px;
  bottom: 96px;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 12px 0 20px;
  -webkit-overflow-scrolling: touch;
}

/* Section label for drawer body */
.drawer-section-label {
  display: block;
  padding: 12px 24px 6px;
  font: 500 10px/1 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3, #6E6E73);
}

/* Top-level links inside drawer (Home, Contact) */
.drawer-top-link {
  position: relative;
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
}
.drawer-top-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font: 500 16px/1.2 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: -0.005em;
  color: var(--ink, #1d1d1f);
  text-decoration: none;
  transition: color 180ms ease, padding-left 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.drawer-top-link a:hover,
.drawer-top-link a:focus-visible {
  color: var(--brass, #b07d2a);
  padding-left: 30px;
}
.drawer-top-link a[aria-current="page"] {
  color: var(--brass, #b07d2a);
  font-weight: 600;
}
.drawer-top-link a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--brass, #b07d2a);
}

.accordion-item {
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: transparent;
  border: 0;
  font: 500 16px/1.2 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: -0.005em;
  color: var(--ink, #1d1d1f);
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, padding-left 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.accordion-trigger:hover,
.accordion-trigger:focus-visible {
  color: var(--brass, #b07d2a);
  padding-left: 30px;
}
.accordion-item.open .accordion-trigger {
  color: var(--brass, #b07d2a);
}

/* CSS-drawn chevron for accordion (consistent with desktop) */
.accordion-chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 0.5;
}
.accordion-item.open .accordion-chev { transform: translateY(2px) rotate(-135deg); opacity: 1; }

.accordion-panel {
  display: none;
  padding: 6px 24px 16px;
  background: linear-gradient(180deg, rgba(250, 246, 238, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}
.accordion-item.open .accordion-panel { display: block; }

.accordion-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 14px;
  border-left: 2px solid rgba(176, 125, 42, 0.18);
  margin-left: 4px;
  font: 400 14px/1.4 var(--font-ui, 'Inter, sans-serif');
  color: var(--ink-2, #3D3D43);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, padding-left 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.accordion-panel a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  transform: scale(0.5);
  flex-shrink: 0;
}
.accordion-panel a:hover,
.accordion-panel a:focus-visible {
  color: var(--brass, #b07d2a);
  border-left-color: var(--brass, #b07d2a);
  padding-left: 20px;
}
.accordion-panel a:hover::before,
.accordion-panel a:focus-visible::before {
  opacity: 0.6;
  transform: scale(1);
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 20px 20px;
  background: var(--white, #fff);
  border-top: 1px solid rgba(29, 29, 31, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer-footer a {
  padding: 14px 12px;
  border-radius: 10px;
  font: 500 13px/1 var(--font-ui, 'Inter, sans-serif');
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.drawer-footer a:active { transform: translateY(1px); }

.drawer-footer a.primary {
  background: var(--ink, #1d1d1f);
  color: #fff;
  border: 1px solid var(--ink, #1d1d1f);
}
.drawer-footer a.primary:hover,
.drawer-footer a.primary:focus-visible {
  background: var(--brass, #b07d2a);
  border-color: var(--brass, #b07d2a);
}
.drawer-footer a.secondary {
  background: transparent;
  color: var(--ink, #1d1d1f);
  border: 1px solid rgba(29, 29, 31, 0.16);
}
.drawer-footer a.secondary:hover,
.drawer-footer a.secondary:focus-visible {
  background: rgba(29, 29, 31, 0.04);
  border-color: var(--ink, #1d1d1f);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1080px) {
  .logo-tag { display: none; }
  .logo-rule { display: none; }
}

@media (max-width: 980px) {
  .primary-nav, .header-actions { display: none; }
  .hamburger { display: inline-flex; }
  /* Single fixed-height mobile header — applies to ALL widths ≤980px so the
     viewport never crosses an in-between reflow boundary around 620–640px.
     min-height (not height) gives the layout slack if a future logo change
     pushes content taller than the icon, without snapping. */
  .header-inner {
    min-height: 56px;
    padding: 8px 16px;
    gap: 12px;
    align-items: center;
  }
  /* Body offset uses a fixed 56px (matches the header min-height) so the
     white gap stays gone at every mobile breakpoint. */
  body { padding-top: calc(var(--bar-h, 0px) + 56px); }

  /* Hamburger: 40×40 fixed box, perfectly centred inside the header via
     align-self + flex, with its 3 spans centred by align-items:center /
     justify-content:center on the button. margin-left:auto pins it to the
     right edge next to the logo.

     CRITICAL: also override position:top/right from the legacy style.css
     768px rule (`position:fixed; top:13px; right:var(--sp-4)`), which
     would yank the icon out of the flex container and offset it by 13px
     above the header centre. We must reset those so the icon sits in the
     flex flow and is vertically centred with the logo. z-index must still
     beat the drawer (z-index 61 inside .drawer). */
  .hamburger {
    position: relative;
    top: auto;
    right: auto;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    gap: 4px;
    align-self: center;
    margin-left: auto;
    flex: 0 0 auto;
    z-index: 62;     /* above the drawer (61) so it stays clickable when open */
    background: transparent;
  }
  .hamburger span { width: 18px; height: 1.5px; }

  /* Trim the logo so it sits on the same vertical axis as the 40px
     hamburger inside the 56px header (logo font-size ≈ 1.25rem ≈ 20px,
     so optical centering holds). */
  .logo-mark { font-size: 1.25rem; line-height: 1; }

  .mega-cols { grid-template-columns: repeat(2, 1fr); }
  .mega-inner { grid-template-columns: 1fr; }
  .drawer { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Single-column mega menu on phones — no header reflow here, only the
     mega-menu inner column count changes, which avoids any 620px jump. */
  .mega-cols { grid-template-columns: 1fr; }
}

/* body lock when drawer open */
body.drawer-open { overflow: hidden; }
body.drawer-open .whatsapp-float,
body.drawer-open .wa-sticky-bar { display: none; }

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-list > li > a::after,
  .nav-chev,
  .mega-link-arrow,
  .accordion-chev,
  .header-icon,
  .btn-cta,
  .drawer,
  .drawer-backdrop,
  .drawer-top-link a,
  .accordion-trigger,
  .accordion-panel a,
  .hamburger span,
  .logo,
  .drawer-footer a {
    transition: none !important;
    animation: none !important;
  }
  .nav-has-mega .mega-col,
  .nav-has-mega .mega-feature {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}