/* ============================================================
   mobile-nav-lock.css — Mobile header + drawer, hardened
   ------------------------------------------------------------
   Loaded LAST from includes/header.php. Every rule is scoped to
   @media (max-width: 860px) and uses id-level specificity plus
   !important so page CSS (kf-menu.css / lm-menu.css / styles.css)
   cannot win, no matter the load order.

   Desktop (>=861px) is deliberately untouched.
   ============================================================ */

@media (max-width: 860px) {

  /* ── Shared height token ───────────────────────────────────
     Page CSS uses --navbar-h for hero padding + sticky filter
     bars. Force both tokens to the same value so nothing
     overlaps or leaves a gap under the bar. */
  :root {
    --sb-nav-h: 64px !important;
    --navbar-h: 64px !important;
    /* Row height is centered via align-content, so no manual offset. */
    --sb-nav-y-nudge: 0px;
  }

  body { padding-bottom: 0 !important; }

  /* ── Kill page-wide horizontal overflow ────────────────────
     kf-menu.css / lm-menu.css set `.filter-bar__inner` to
     flex-wrap: nowrap + overflow: visible, and `.filter-pill`
     to flex-shrink: 0. On a phone the pill row is wider than
     the screen, so it stretched the document and everything
     looked shifted / cut off. Let the pill row scroll inside
     the bar instead. Two-class selectors beat the page rules
     regardless of stylesheet order. */
  .filter-bar .filter-bar__inner,
  .sub-filter-bar .sub-filter-bar__inner {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* `.filter-pill` has scroll-snap-align: start. Now that this
       element actually scrolls, snapping would pull the first pill
       flush against the edge and swallow the left padding, so snap
       is disabled here and kept only on the inner pill wrapper. */
    scroll-snap-type: none !important;
    scroll-padding-inline: var(--px, 16px) !important;
  }
  .filter-bar .filter-bar__inner::-webkit-scrollbar,
  .sub-filter-bar .sub-filter-bar__inner::-webkit-scrollbar {
    display: none !important;
  }

  .filter-bar,
  .sub-filter-bar {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Safety net for any other stray wide element. `clip` (not
     `hidden`) so it never creates a scroll container and the
     sticky filter bar keeps working. */
  html {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Legacy mobile chrome from older builds */
  .mobile-bottom-nav,
  .mobile-nav-popup,
  .mobile-nav-popup-overlay {
    display: none !important;
  }

  /* ── Bar ───────────────────────────────────────────────────
     backdrop-filter creates a containing block, which used to
     collapse fixed children to zero height. Keep it off. */
  header.navbar#navbar,
  header.navbar#navbar.scrolled {
    position: fixed !important;
    inset: 0 0 auto !important;
    height: var(--sb-nav-h) !important;
    min-height: var(--sb-nav-h) !important;
    max-height: var(--sb-nav-h) !important;
    overflow: visible !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    z-index: 1000 !important;
  }

  header.navbar#navbar.nav-open {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 10001 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  }

  header.navbar#navbar .navbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--sb-nav-h) !important;
    min-height: var(--sb-nav-h) !important;
    max-height: var(--sb-nav-h) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  header.navbar#navbar.nav-open .navbar__inner {
    height: auto !important;
    max-height: none !important;
    min-height: var(--sb-nav-h) !important;
  }

  /* ── Hamburger (left) ──────────────────────────────────── */
  header.navbar#navbar .navbar__hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 5px !important;
    order: -1 !important;
    align-self: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    margin: var(--sb-nav-y-nudge) 0 0 0 !important;
    padding: 8px !important;
    background: none !important;
    border: none !important;
    position: relative !important;
    z-index: 3 !important;
  }

  header.navbar#navbar .navbar__hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--sb-accent, #c9924a) !important;
    border-radius: 1px !important;
  }

  /* ── Logo (centered) ───────────────────────────────────────
     Centered with flexbox, not absolute positioning: the
     hamburger and the auth slot are both locked to 44px and the
     bar padding is symmetric, so the logo lands on the exact
     center no matter how wide the page is. */
  header.navbar#navbar .navbar__logo {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    order: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 0 !important;
    margin: var(--sb-nav-y-nudge) 0 0 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  header.navbar#navbar .navbar__logo-img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
  }

  /* Logo wordmark would break centering on narrow screens */
  header.navbar#navbar .navbar__logo-text { display: none !important; }

  /* ── Auth slot / notification bell (right) ─────────────────
     #authSlot carries class .navbar__search, which kf-menu.css
     and lm-menu.css style as a cream search pill (and even
     display:none it). Reset it to a bare flex box. */
  header.navbar#navbar #authSlot,
  header.navbar#navbar #authSlot.navbar__search,
  header.navbar#navbar .navbar__inner > #authSlot {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-height: 0 !important;
    margin: var(--sb-nav-y-nudge) 0 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
  }

  header.navbar#navbar #authSlot:focus-within {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Desktop-only auth links live in the drawer on mobile */
  header.navbar#navbar #signInLink,
  header.navbar#navbar #cartLink,
  header.navbar#navbar #accountItem {
    display: none !important;
  }

  header.navbar#navbar #authSlot #desktopNotifBell {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #374151 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transform: none !important;
    overflow: visible !important;
  }

  header.navbar#navbar #authSlot #desktopNotifBell:hover {
    background: #e9ecef !important;
    transform: none !important;
  }

  header.navbar#navbar #desktopNotifBadge {
    top: -2px !important;
    right: -2px !important;
  }

  /* ── Drawer — Seattle style, drops below the bar ──────────
     position:static (not fixed) so it flows as the third flex
     row of .navbar__inner and can never be trapped at 0px. */
  header.navbar#navbar .navbar__nav,
  header.navbar#navbar #navMenu {
    display: flex !important;
    order: 10 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
    animation: none !important;
    transition:
      max-height 0.62s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.52s ease,
      transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.35s ease,
      visibility 0s linear 0.62s !important;
  }

  header.navbar#navbar.nav-open .navbar__nav,
  header.navbar#navbar.nav-open #navMenu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    max-height: min(75dvh, 580px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-top-color: #ececec !important;
    transition:
      max-height 0.62s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.52s ease 0.06s,
      transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.35s ease 0.1s,
      visibility 0s linear 0s !important;
  }

  /* Staggered item reveal */
  header.navbar#navbar.nav-open #navMenu > .navbar__item,
  header.navbar#navbar.nav-open #navMenu > a.navbar__link,
  header.navbar#navbar.nav-open #navMenu > .sb-mobile-auth {
    animation: sbNavItemIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(1) { animation-delay: 0.10s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(2) { animation-delay: 0.16s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(3) { animation-delay: 0.22s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(4) { animation-delay: 0.28s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(5) { animation-delay: 0.34s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(6) { animation-delay: 0.40s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(7) { animation-delay: 0.46s; }
  header.navbar#navbar.nav-open #navMenu > *:nth-child(8) { animation-delay: 0.52s; }

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

  /* ── Drawer rows — compact ─────────────────────────────── */
  header.navbar#navbar #navMenu .navbar__item,
  header.navbar#navbar #navMenu #menuDropdownItem,
  header.navbar#navbar #navMenu #brandsDropdownItem {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
  header.navbar#navbar #navMenu .navbar__item::after { display: none !important; }

  /* Row styling only — `display` is deliberately NOT set here.
     The auth script toggles #signInLinkMobile / #cartLinkMobile /
     #accountLinkMobile / #logoutBtnMobile with inline styles, and
     an !important display would override them, which made SIGN IN
     show even while signed in. */
  header.navbar#navbar #navMenu .navbar__link,
  header.navbar#navbar #navMenu .navbar__item > .navbar__link {
    box-sizing: border-box !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ececec !important;
    font-family: var(--sb-heading, 'Oswald', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    color: #6b6b6b !important;
    background: transparent !important;
  }
  /* Permanent rows: top-level links and dropdown triggers. */
  header.navbar#navbar #navMenu > .navbar__link,
  header.navbar#navbar #navMenu > .navbar__item > .navbar__link {
    display: flex !important;
  }

  /* Auth rows default to visible, but WITHOUT !important so the
     inline display:none set by the auth script always wins. */
  header.navbar#navbar .sb-mobile-auth > .navbar__link {
    display: flex;
  }

  header.navbar#navbar #navMenu .navbar__link::after { display: none !important; }
  header.navbar#navbar #navMenu .navbar__link:hover,
  header.navbar#navbar #navMenu .navbar__link.active {
    color: var(--sb-ink, #2c1e1a) !important;
  }

  header.navbar#navbar #navMenu .nav-chevron {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
  }

  header.navbar#navbar #navMenu .navbar__dropdown-item {
    padding: 12px 20px 12px 34px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 13px !important;
    color: #888 !important;
  }

  /* Accordion open/close */
  header.navbar#navbar #navMenu .navbar__dropdown { display: none !important; }

  header.navbar#navbar #menuDropdownItem.mobile-open > #menuMobilePanel,
  header.navbar#navbar #menuDropdownItem.mobile-open > .sb-accordion-panel {
    display: block !important;
    visibility: visible !important;
    animation: sbAccordIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  header.navbar#navbar #brandsDropdownItem.mobile-open > .navbar__dropdown {
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    animation: sbAccordIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes sbAccordIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  header.navbar#navbar .navbar__item.mobile-open > .navbar__link .nav-chevron {
    transform: rotate(180deg) !important;
  }

  /* ── KohRush panel — the koh-fee + the leh-muhn only ───── */
  header.navbar#navbar #menuMobilePanel {
    display: none !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header.navbar#navbar #menuMobilePanel #bevAccordion,
  header.navbar#navbar #menuMobilePanel #foodAccordion,
  header.navbar#navbar #menuMobilePanel .sb-accordion-item,
  header.navbar#navbar #menuMobilePanel .sb-accordion-trigger,
  header.navbar#navbar #mobileNavBevLinks,
  header.navbar#navbar #mobileNavFoodLinks {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  header.navbar#navbar #menuMobilePanel .sb-kohrush-brand-link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 20px 12px 34px !important;
    border-bottom: 1px solid #ececec !important;
    font-family: var(--sb-heading, 'Oswald', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    color: #6b6b6b !important;
    text-decoration: none !important;
    background: #ffffff !important;
  }
  header.navbar#navbar #menuMobilePanel .sb-kohrush-brand-link:hover,
  header.navbar#navbar #menuMobilePanel .sb-kohrush-brand-link:focus {
    color: var(--sb-ink, #2c1e1a) !important;
    background: #fafafa !important;
  }

  /* ── Auth block inside the drawer ─────────────────────── */
  header.navbar#navbar .sb-mobile-auth {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  header.navbar#navbar .sb-mobile-auth .navbar__link {
    color: #6b6b6b !important;
  }

  @media (prefers-reduced-motion: reduce) {
    header.navbar#navbar .navbar__nav,
    header.navbar#navbar #navMenu,
    header.navbar#navbar.nav-open .navbar__nav,
    header.navbar#navbar.nav-open #navMenu,
    header.navbar#navbar.nav-open #navMenu > * {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
  }
}

@media (min-width: 861px) {
  .sb-mobile-auth { display: none !important; }
  .navbar__hamburger { display: none !important; }

  /* Circular bell on desktop too — seattle-chrome.css squares it off */
  #desktopNotifBell {
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
  }
  #desktopNotifBell:hover { background: #e9ecef !important; }
}