/* =====================================================================
   BodenWalker — mobile fixes (load LAST, after foldables.css)
   Each block below fixes something that was actually broken at 320–480px.
   ===================================================================== */

/* 1. Section padding was being wiped out: `.featured{padding:36px 0 10px}` and
      `.recommendations-section{...}` beat `.wrap`'s side padding, so the product
      grid, filter pills and "Recommended" row touched the screen edges. */
.featured.wrap,
.recommendations-section.wrap { padding-left: 20px; padding-right: 20px; }
@media (min-width: 900px) {
  .featured.wrap,
  .recommendations-section.wrap { padding-left: 36px; padding-right: 36px; }
}

/* Never let the page scroll sideways */
html, body { max-width: 100%; overflow-x: clip; }
img, video { max-width: 100%; }

/* 2. Header: "Sign In" wrapped to 2 lines and the cart button fell off the edge */
.user-btn-auth, .sort-btn { white-space: nowrap; }
.header-actions { flex-shrink: 0; }
.brand-link { min-width: 0; }

@media (max-width: 480px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .brand-link { font-size: 19px; gap: 8px; }
  .header-actions { gap: 6px; }
  /* icon-only account button (auth.js writes a plain <span>Sign In</span> when signed out,
     and .user-name-txt when signed in — hide both, keep the icon / avatar) */
  .user-btn-auth > span:not(.user-avatar-circle) { display: none; }
  .user-btn-auth { padding: 0; width: 40px; height: 40px; justify-content: center; }

  /* Search row: keep the Sort button on screen */
  .hero-top { padding-left: 16px; padding-right: 16px; }
  .search-row { gap: 8px; }
  .search-box { min-width: 0; padding: 12px 14px; gap: 8px; }
  .search-box input { min-width: 0; font-size: 16px; }   /* 16px stops iOS zoom-in */
  .sort-btn { padding: 0 14px; flex-shrink: 0; }

  /* Trust strip: three columns of long text were being crushed */
  .trust-strip { margin: 20px 16px 0; padding: 14px 10px; gap: 8px; }
  .trust-item { font-size: 11.5px; line-height: 1.3; }
  .trust-item svg { width: 22px; height: 22px; }
}

@media (max-width: 360px) {
  .brand-link { font-size: 17px; }
  .brand-logo-mark { width: 30px; height: 30px; font-size: 13px; }
  .sort-btn span { display: none; }
}

/* 3. Checkout / sign-in pop-ups: use the phone screen properly */
@media (max-width: 600px) {
  .modal-container { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box.wide {
    max-width: 100%;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }
  .modal-container.open .modal-box { transform: translateY(0); }
  .modal-head { padding: 16px; position: sticky; top: 0; background: var(--surface-card); z-index: 3; }
  .modal-body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }

  .checkout-grid { gap: 20px; }
  .form-row-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* one field per row */
  .form-input, select.form-input, textarea.form-input { font-size: 16px; min-height: 46px; }
  .form-label { flex-wrap: wrap; }
}

/* 4. Toasts: compact and out of the way of pop-ups */
@media (max-width: 600px) {
  .toast-container { top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; }
  .toast { min-width: 0; max-width: none; padding: 10px 14px; font-size: 13px; }
}

/* 5. Cart drawer: respect the iPhone home bar */
@media (max-width: 480px) {
  .cart-drawer { max-width: 100%; }
  .cart-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* 6. Comfortable tap targets */
@media (hover: none) and (pointer: coarse) {
  .icon-btn, .cart-close-btn, .modal-close-btn { min-width: 40px; min-height: 40px; }
  .pill, .cat-chip { min-height: 40px; }
}

/* 7. Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}