/* ============================================================================
   mobile-polish.css  —  Mobile UX refinements (loaded LAST, overrides only)
   ----------------------------------------------------------------------------
   Conservative, reversible polish layer. Touches nothing on desktop; only
   refines tap-target sizes, prevents iOS zoom-on-focus, and lifts the very
   smallest label type into a readable range on phones. Delete this file (and
   its <link> in partials/header.php) to fully revert.
   ============================================================================ */

/* ── 1. Prevent iOS Safari zoom-on-focus ───────────────────────────────────
   Any form field under 16px makes iOS auto-zoom when tapped, then leaves the
   page awkwardly scrolled. Floor all text inputs at 16px on phones. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── 2. Larger tap targets for product-card quick actions ───────────────────
   On phones these icon buttons shrink to 30–32px to fit the 2-up grid, which
   is below a comfortable thumb target. Lift to 36px — still fits two buttons
   plus gap inside the smallest card overlay. */
@media (max-width: 640px) {
  .hp-prod-wish,
  .hp-prod-add,
  .hp-shop-card-wish,
  .hp-edit-card-wish,
  .pp-card-wish {
    width: 36px !important;
    height: 36px !important;
  }
  .pp-card-add,
  .pp-card-qty {
    height: 36px !important;
  }
}

/* ── 3. Lift the smallest label type into a readable range ──────────────────
   The hero stat labels render at ~6.7px on phones — readable only just. Nudge
   them up without disturbing the three-column inline layout. */
@media (max-width: 767px) {
  #overlay-1 .hero-stat-lbl,
  .hero-stat-lbl {
    font-size: .5rem !important;     /* ~8px */
    line-height: 1.3 !important;
  }
}
@media (max-width: 480px) {
  .hero-stat-lbl {
    font-size: .5rem !important;
  }
}