/**
 * Phase 1 of the mobile app-feel upgrade: slims the desktop-derived top
 * chrome (free-delivery banner + full nav header) down to a single
 * contextual bar on phone widths, since the bottom tab bar in header.php
 * (.mob-bottom-nav) already covers Home/Stores/Shop/Cart/Account.
 *
 * Purely additive — loaded after v3-complete.css / global-wide.css so it
 * wins the cascade at the same breakpoint (768px) those files already use,
 * without editing their fragile, duplicated .site-header rules directly.
 * Desktop (>768px) is completely untouched.
 */
@media (max-width: 768px) {
  /* Banner becomes a dismissible strip instead of permanently fixed space —
     dismiss state persists via localStorage (see header.php inline script). */
  .free-delivery-banner {
    position: relative !important;
    height: auto !important;
    padding: 7px 34px 7px 12px !important;
    font-size: .78rem !important;
    justify-content: flex-start !important;
    text-align: left;
  }

  /* Header collapses to logo + cart + account only — the rest duplicates
     the bottom tab bar (Stores, Shop+, Cart, Account/Login) or is secondary
     (For Business, WhatsApp, Mission) and doesn't need permanent top-bar space. */
  .site-header {
    position: static !important;
    top: auto !important;
    height: 52px !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.06) !important;
    /* global-wide.css's backdrop-filter (meant for the desktop sticky/blur-
       behind header) is pointless once the header is static — nothing
       scrolls under it to blur. Worse: backdrop-filter creates a new
       containing block for any position:fixed descendant, which trapped
       the language dropdown inside this header's 52px box instead of
       letting it escape to the viewport like position:fixed is supposed
       to. Removing it fixes both. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }
  .site-header .main-nav { height: 52px !important; padding: 0 14px !important; }
  .site-header .hamburger,
  .site-header .nav-links { display: none !important; }
  .site-header #header-cart-btn,
  .site-header .user-menu-container:not(.business-menu-container) { display: none !important; }
  .site-header .logo img { height: 28px !important; }
  .site-header .logo span { font-size: 1.05rem !important; }

  /* Body no longer reserves space for a fixed banner+header stack —
     .mob-bottom-nav's own .body-mob-pad rule still reserves bottom space. */
  body { padding-top: 0 !important; }

  /* Language dropdown — .site-header/.main-nav are defined 3 different,
     conflicting ways across v3-complete.css/global-wide.css/this file
     (position fixed/sticky/static, z-index 500-1000 depending on width),
     so a dropdown positioned absolute relative to the header can end up
     clipped inside that stacking context instead of floating over the
     page. Escaping to position:fixed with a very high z-index sidesteps
     all of that — it always renders on top, anchored to the viewport
     instead of the fragile header hierarchy. Shown as a centered sheet
     (not a tiny anchored dropdown) since it's easier to tap through 16
     languages that way on a phone.  */
  .bn-lang-selector.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 999998;
  }
  .bn-lang-drop {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 48px);
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 999999 !important;
  }
}