/*
 * One authoritative mobile header/menu layer.
 *
 * Page partials intentionally preserve their original prototype CSS, which
 * used a mix of 1020px and 1023px breakpoints. These higher-specificity rules
 * remove that gap and keep both header variants predictable on real devices.
 */

@media (max-width:1023px) {
  html { overflow-x:clip; }
  html body { overflow-x:hidden; }
  body.mobile-nav-open { overflow:hidden!important; overscroll-behavior:none; touch-action:none; }

  body #hd .hd-wrap,
  body .site-header .hd-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    justify-content:normal;
    gap:6px;
    width:100%;
    min-width:0;
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
  }

  body #hd nav.main,
  body .site-header .main-nav,
  body #hd .hd-cta,
  body .site-header .hd-cta { display:none!important; }

  body #hd .logo,
  body .site-header .logo {
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body #hd .cart-flag,
  body .site-header .cart-flag {
    width:42px;
    height:42px;
    margin:0;
  }

  body #hd .burger,
  body .site-header .burger {
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    flex:0 0 44px;
    width:44px;
    height:44px;
    margin:0;
    padding:10px;
    border:0;
  }

  /* Inner-page full-screen drawer. */
  body #mmenu.m-menu {
    box-sizing:border-box;
    display:flex!important;
    flex-direction:column;
    position:fixed;
    inset:0;
    z-index:10000;
    width:100%;
    max-width:100vw;
    height:100vh;
    height:100dvh;
    padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(160deg,var(--ink-deep,#14213A),var(--ink,#1C2B4A));
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,-100%,0);
    transition:transform 400ms var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity 220ms ease,visibility 0s linear 400ms;
  }

  body #mmenu.m-menu.open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,0,0);
    transition-delay:0s;
  }

  body #mmenu .m-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    min-height:44px;
  }

  body #mmenu .m-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:-8px -8px 0 0;
    padding:0;
    font-size:32px;
  }

  body #mmenu .m-links {
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    margin-top:clamp(18px,5vh,40px);
  }

  body #mmenu .m-links a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:clamp(7px,1.5vh,11px) 0;
    font-size:clamp(22px,6.8vw,29px);
    line-height:1.2;
  }

  body #mmenu .m-links a.active { color:var(--gold-light,#D8BE7F); }
  body #mmenu .m-links .soon { flex:0 0 auto; }
  body #mmenu .m-cta { flex:0 0 auto; margin-top:clamp(20px,4vh,34px); }
  body #mmenu .m-note { flex:0 0 auto; padding-bottom:env(safe-area-inset-bottom); line-height:1.6; }

  /* Home drawer: keep the transforming burger above the overlay so the menu
     can always be closed, then hide the logo/cart while it is open. */
  body #mobileMenu.mobile-menu {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:fixed;
    inset:0;
    z-index:10000;
    width:100%;
    max-width:100vw;
    height:100vh;
    height:100dvh;
    padding:max(88px,calc(env(safe-area-inset-top) + 72px)) max(22px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
    gap:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(160deg,var(--ink-deep,#14213A),var(--ink,#1C2B4A));
    transition:opacity 260ms ease,visibility 0s linear 260ms;
  }

  body.menu-open #mobileMenu.mobile-menu {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition-delay:0s;
  }

  body.menu-open .site-header { z-index:10001; background:transparent; box-shadow:none; backdrop-filter:none; }
  body.menu-open .site-header .logo,
  body.menu-open .site-header .cart-flag { visibility:hidden; pointer-events:none; }

  body #mobileMenu.mobile-menu > a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex:0 0 auto;
    width:100%;
    padding:clamp(7px,1.5vh,10px) 0;
    font-size:clamp(22px,7vw,32px);
    line-height:1.2;
  }

  body #mobileMenu.mobile-menu > a.active { color:var(--gold-light,#D8BE7F); }
  body #mobileMenu.mobile-menu > .mm-cta {
    display:block;
    width:100%;
    margin-top:clamp(18px,4vh,28px);
    padding:15px;
    font-size:12px;
    line-height:1.35;
  }
}

@media (max-width:480px) {
  body .announce {
    padding:7px 12px;
    font-size:9.5px;
    line-height:1.5;
    letter-spacing:.09em;
  }

  body #hd .logo,
  body .site-header .logo { font-size:18px; }
  body .site-header .logo { letter-spacing:.1em; }
  body #hd .cart-flag,
  body .site-header .cart-flag { width:40px; height:40px; }
  body #hd .burger,
  body .site-header .burger { flex-basis:40px; width:40px; height:40px; padding:8px; }
}

@media (prefers-reduced-motion:reduce) {
  body #mmenu.m-menu,
  body #mobileMenu.mobile-menu { transition:none!important; }
}