/* ════════════════════════════════════════════════
   STAR BEV · SHARED MOBILE FIXES
   Linked last in <head> on every customer page so it can override the
   page's inline styles. Phone layout only, except the delivery rule.
   ════════════════════════════════════════════════ */

/* Local delivery is switched off at checkout (DELIVERY_ENABLED = false in
   star-bev-checkout.html). Hide the per-product delivery buttons until it
   is turned back on; delete this rule when it is. */
.action[data-mode="delivery"] { display: none !important; }

@media (max-width: 640px) {
  /* ---- Tap targets: 44px minimum (Apple HIG) ---- */
  .nav-cats a,
  .nav-cart,
  .nav-cart-btn,
  [data-customer-link] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  [data-customer-link] { min-width: 44px; }
  .nav-cats a { font-size: 0.7rem; }

  .footer-strip a,
  .footer-legal a,
  .bc-thinfoot__mark,
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="maps.google"] {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Home nav switched to desktop padding (56px) once scrolled, so the logo
     and buttons jumped inward on phones. */
  nav.scrolled { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---- Inputs: 16px stops iOS zooming the page on focus ---- */
  input, select, textarea { font-size: 16px !important; }

  /* ---- Home: the three hero stats ran off the right edge ---- */
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hero-stat { padding: 18px 10px !important; min-width: 0; }

  /* ---- Back links and footer links ---- */
  .nav-back { min-height: 44px; display: inline-flex; align-items: center; }
  footer a, .sf-links a, .sf-admin-link, .legal-links a, .card .foot a {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* ---- Product cards (cooler, vapes, merch) ----
     A card was 600-830px tall: one product per screen. Put the product
     graphic beside the details and drop the extras, so 2-3 fit per screen. */
  .grid { padding: 16px !important; gap: 12px !important; }
  .grid .card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
  }
  .grid .card-stitch, .grid .card .num, .grid .spec-src, .grid .stock-src { display: none; }
  .grid .badge-row {
    position: absolute; top: 8px; right: 8px;
    padding: 0; min-height: 0; z-index: 2;
  }
  .grid .can-area { height: auto; padding: 16px 0 16px 12px; align-items: flex-start; justify-content: flex-start; }
  .grid .can { width: 72px; height: 144px; }
  .grid .can-area > :not(.can) { zoom: 0.68; }  /* vape / merch tag / tee mockup */
  .grid .product-info { padding: 14px 14px 14px 12px; }
  .grid .product-name { font-size: 1.4rem; margin: 0 0 4px; padding-right: 64px; }
  .grid .specs { margin-bottom: 10px; }
  .grid .description { display: none; }
  .grid .price-row { margin-bottom: 10px; padding-top: 10px; }
  .grid .price { font-size: 1.7rem; }
  .grid .actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .grid .action { min-height: 44px; padding: 10px; justify-content: center; text-align: center; }
  .grid .action .meta, .grid .action .arrow { display: none; }

  /* ---- Readable minimums for the letter-spaced micro labels ---- */
  .stat-lbl, .sf-label, .cd-eyebrow, .stock-now, .q-num,
  .shop-meta .lbl, .brewery, .stock, .price .pack, .spec-lbl {
    font-size: 0.72rem !important;
  }
}

/* Signed-out account link on phones: customer.js hides the "Sign In" text
   below 600px, so show a person icon instead of an empty box. */
.cust-icon { width: 18px; height: 18px; display: none; }
@media (max-width: 600px) {
  .cust-icon { display: block; }
}