/* Global mobile responsiveness safety net.
   Layer 1: stop horizontal scroll / left-right jitter that exists when any
   element renders wider than the viewport on a phone.
   Layer 2: targeted fixes for known overflow culprits (top-bar nav-actions,
   product card grids) so content stays reachable, not just clipped. */

/* ---------- Layer 1: universal ---------- */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}
html {
  overscroll-behavior-x: none;
}
body {
  position: relative;
  /* iOS Safari respects touch-action even when overflow-x: hidden alone
     does not fully prevent the elastic horizontal-pan gesture. Locking
     to pan-y + pinch-zoom kills horizontal swipe site-wide while still
     allowing vertical scroll and pinch-zoom. Horizontal carousels (if
     any are added later) can override with touch-action: pan-x on the
     specific scroll container. */
  touch-action: pan-y pinch-zoom;
}

/* touch-action is NOT inherited, so position: fixed overlays (modal
   backdrops, off-canvas drawers, dropdowns) default to touch-action:
   auto and reintroduce horizontal-pan on iOS even when body locks it.
   Repeat the lock for every known floating layer. New overlays should
   either match one of these selectors or set touch-action explicitly. */
.bauth-modal,
.bauth-card,
.cart-drawer,
.ssc-drawer,
.ssa-menu,
.pdm-card,
.ss-search-pop,
[role="dialog"],
[aria-modal="true"] {
  touch-action: pan-y pinch-zoom;
}

/* ---------- Layer 2: targeted at <=480px (phones) ---------- */
@media (max-width: 480px) {
  /* Topbar: tighten so logo + search + actions fit a 375px viewport */
  nav {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
  .nav-inner {
    gap: 8px !important;
  }
  .nav-actions {
    gap: 2px !important;
  }
  .nav-actions .btn-signin,
  .nav-actions .btn-start {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .nav-btn {
    padding: 6px 8px !important;
  }
  /* Hide divider on phones to free a few pixels */
  .nav-divider {
    display: none !important;
  }
  /* Search button compact */
  .search-btn {
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  /* Product card grid: single column at phone widths so cards never overflow */
  .g5,
  .g6 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Wrap container: tighter horizontal padding */
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}