/**
 * 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: static !important;
    height: auto !important;
    padding: 7px 34px 7px 12px !important;
    font-size: .78rem !important;
    justify-content: flex-start !important;
    text-align: left;
  }
  .free-delivery-banner.fdb-dismissed { display: none !important; }
  .fdb-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.22);
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
  }

  /* 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;
  }
  .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; }
}