/* ============================================================================
   ANAX MOBILE MENU · v7 · DISPLAY TOGGLE · ZERO TRANSFORM CONFLICTS
   Mobile-only ≤1100. Loaded LAST. Uses display:none/flex instead of transform.
   Burger button gold. Drawer panel slides via class show/hide — no transition.
   ============================================================================ */

@media (max-width: 1100px) {

  /* ====== Burger button — GOLDEN gradient ====== */
  html body header.topbar .burger,
  html body header.topbar #nav-burger {
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #F5DA9E 0%, #D5B16A 60%, #B39A7E 100%) !important;
    border: 1px solid rgba(127, 97, 75, 0.45) !important;
    border-radius: 12px !important;
    color: #2B1810 !important;
    cursor: pointer !important;
    transition: transform .15s ease !important;
    position: relative !important;
    z-index: 10000 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 16px rgba(127, 97, 75, 0.30),
                inset 0 1px 0 rgba(255,255,255,0.40) !important;
  }
  html body header.topbar .burger svg,
  html body header.topbar #nav-burger svg {
    width: 22px !important; height: 22px !important;
    display: block !important; color: #2B1810 !important;
  }
  html body header.topbar .burger:active,
  html body header.topbar #nav-burger:active { transform: scale(0.94) !important; }
  /* When drawer is OPEN — hide the burger entirely so only the drawer's close X
     is visible (no duplicate close-looking buttons at top-right). */
  html body header.topbar .burger[aria-expanded="true"],
  html body header.topbar #nav-burger[aria-expanded="true"],
  html body.menu-open header.topbar .burger,
  html body.menu-open header.topbar #nav-burger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ====== Drawer panel — HIDDEN by default (display:none) ====== */
  html body header.topbar ul#primary-nav.nav {
    display: none !important;
    list-style: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(380px, 88vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: -28px 0 60px rgba(0, 37, 49, 0.30) !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    -webkit-overflow-scrolling: touch !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    pointer-events: auto !important;
  }
  /* OPEN state — appears via display flex (no animation = no sub-pixel blur) */
  html body header.topbar ul#primary-nav.nav.open {
    display: flex !important;
  }

  /* ====== Topbar lifts ABOVE backdrop so its child drawer stays clickable ====== */
  html body.menu-open header.topbar {
    z-index: 9995 !important;
    isolation: isolate !important;
  }

  /* ====== Backdrop scrim — solid dim, NO blur (was blurring drawer too) ====== */
  html body.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 37, 49, 0.50) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 9990 !important;
    pointer-events: auto !important;
    animation: anax-mm-fade 0.28s ease forwards !important;
  }
  @keyframes anax-mm-fade { from { opacity: 0; } to { opacity: 1; } }
  html body.menu-open { overflow: hidden !important; }

  /* ====== Drawer HEAD — navy bar with white logo + close X (compact) ====== */
  html body header.topbar #primary-nav .mnav-head {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #002531 0%, #001824 100%) !important;
    border-bottom: 0 !important;
    z-index: 4 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 37, 49, 0.18) !important;
  }
  html body header.topbar #primary-nav .mnav-brand {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    filter: brightness(0) invert(1) !important;
  }
  html body header.topbar #primary-nav .mnav-brand img {
    height: 22px !important;
    width: auto !important;
    display: block !important;
    max-width: none !important;
  }
  html body header.topbar #primary-nav .mnav-close {
    width: 38px !important;
    height: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  html body header.topbar #primary-nav .mnav-close:active,
  html body header.topbar #primary-nav .mnav-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
  }
  html body header.topbar #primary-nav .mnav-close svg {
    width: 18px !important; height: 18px !important; color: #FFFFFF !important;
  }

  html body header.topbar ul#primary-nav.nav::-webkit-scrollbar { width: 0px; }

  /* ====== Nav items reset ====== */
  html body header.topbar #primary-nav > li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    position: static !important;
  }

  /* ====== Anchor + button rows ======
     Compact heights so all 10 nav items + gold row + drawer head + drawer foot
     fit a single viewport on phones from iPhone SE (568px) up — no scroll. */
  html body header.topbar #primary-nav > li > a,
  html body header.topbar #primary-nav > li > button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 11px 20px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #002531 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31, 95, 168, 0.08) !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-height: 44px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    transition: background .15s ease, color .15s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: relative !important;
  }
  html body header.topbar #primary-nav > li > a:active,
  html body header.topbar #primary-nav > li > button:active {
    background: rgba(31, 95, 168, 0.06) !important;
  }
  html body header.topbar #primary-nav > li.open > button[aria-haspopup] {
    background: rgba(31, 95, 168, 0.04) !important;
  }
  html body header.topbar #primary-nav > li[data-home="1"] > a {
    background: rgba(31, 95, 168, 0.06) !important;
    color: #1F5FA8 !important;
    border-bottom: 2px solid #1F5FA8 !important;
  }

  html body header.topbar #primary-nav > li > button[aria-haspopup] svg {
    width: 16px !important; height: 16px !important;
    color: #1F5FA8 !important;
    flex-shrink: 0 !important;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: rotate(0deg) !important;
  }
  html body header.topbar #primary-nav > li.open > button[aria-haspopup] svg { transform: rotate(180deg) !important; }
  html body header.topbar #primary-nav > li > button[aria-haspopup]::before,
  html body header.topbar #primary-nav > li > button[aria-haspopup]::after {
    content: none !important; display: none !important;
  }

  /* ====== 1KG Gold row ====== */
  html body header.topbar #primary-nav .nav-gold-li { margin: 0 !important; padding: 0 !important; }
  html body header.topbar #primary-nav .nav-gold-li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(180deg, #FFF8E8 0%, #FCEFCD 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(213, 177, 106, 0.30) !important;
    padding: 11px 20px !important;
    color: #5E3A1F !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    min-height: 44px !important;
  }
  html body header.topbar #primary-nav .nav-gold-li a svg {
    color: #B39A7E !important; flex-shrink: 0 !important;
    width: 16px !important; height: 16px !important;
  }
  html body header.topbar #primary-nav .nav-gold-li a span:not(.nav-gold-badge) { flex: 1 !important; }
  html body header.topbar #primary-nav .nav-gold-li a .nav-gold-badge {
    background: linear-gradient(135deg, #D5B16A, #B39A7E) !important;
    color: #2B1810 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    margin-left: auto !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(127, 97, 75, 0.20) !important;
  }

  /* ====== Mega submenu accordion ====== */
  html body header.topbar #primary-nav .mega {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(31,95,168,0.04) 0%, rgba(31,95,168,0.02) 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  html body header.topbar #primary-nav > li.open > .mega {
    display: block !important;
    padding: 6px 22px 14px !important;
  }
  html body header.topbar #primary-nav .mega-grid { display: block !important; gap: 0 !important; }
  html body header.topbar #primary-nav .mega-col { padding: 6px 0 !important; }
  html body header.topbar #primary-nav .mega-col h5 {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(0, 37, 49, 0.50) !important;
    margin: 6px 0 6px !important;
    font-weight: 800 !important;
  }
  html body header.topbar #primary-nav .mega-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
  html body header.topbar #primary-nav .mega-col li { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
  html body header.topbar #primary-nav .mega-col a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 4px !important;
    color: #1A3A47 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 0 !important;
  }
  html body header.topbar #primary-nav .mega-col a:active { background: rgba(31, 95, 168, 0.08) !important; }
  html body header.topbar #primary-nav .mega-col .icon {
    width: 32px !important; height: 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 5px rgba(0, 37, 49, 0.06) !important;
  }
  html body header.topbar #primary-nav .mega-col .icon svg { width: 16px !important; height: 16px !important; color: #1F5FA8 !important; }
  html body header.topbar #primary-nav .mega-col .meta { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; flex: 1 !important; }
  html body header.topbar #primary-nav .mega-col .meta .t { color: #002531 !important; font-weight: 700 !important; font-size: 14px !important; }
  html body header.topbar #primary-nav .mega-col .meta .d { color: #5A6B75 !important; font-size: 12px !important; font-weight: 400 !important; }

  /* ====== Drawer FOOT (compact — fits without scroll) ====== */
  html body header.topbar #primary-nav .mnav-foot {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    background: #FFFFFF !important;
    border-top: 1px solid rgba(31, 95, 168, 0.10) !important;
    box-shadow: 0 -8px 22px rgba(0, 37, 49, 0.06) !important;
    z-index: 4 !important;
    flex-shrink: 0 !important;
  }
  html body header.topbar #primary-nav .mnav-foot .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 11px !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    min-height: 0 !important;
  }
  html body header.topbar #primary-nav .mnav-foot .btn-primary {
    background: linear-gradient(180deg, #2974DD 0%, #1F5FA8 100%) !important;
    color: #FFFFFF !important;
    border-color: #1F5FA8 !important;
    box-shadow: 0 8px 18px rgba(31, 95, 168, 0.30) !important;
  }
  html body header.topbar #primary-nav .mnav-foot .btn-ghost {
    background: #FFFFFF !important;
    color: #002531 !important;
    border-color: rgba(31, 95, 168, 0.25) !important;
  }
  html body header.topbar #primary-nav .mnav-foot .btn:active { transform: scale(0.98) !important; }
  html body header.topbar #primary-nav .mnav-call {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px !important;
    color: #1F5FA8 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  html body header.topbar #primary-nav .mnav-call svg { width: 16px !important; height: 16px !important; }
  html body header.topbar #primary-nav .mnav-call b { font-weight: 800 !important; letter-spacing: 0.04em !important; color: #1F5FA8 !important; }
}

/* Desktop ≥1101 — burger hidden, restore inline nav (revert to original behavior) */
@media (min-width: 1101px) {
  html body header.topbar .burger,
  html body header.topbar #nav-burger { display: none !important; }
}