/* ============================================================================
   Kwiki storefront — mobile fixes
   ----------------------------------------------------------------------------
   Audit: KWIKI-WEB-MOBILE-AUDIT.md
   Additive. Reverts by deleting the one <link> tag that loads this file.
   Loaded LAST so it wins on specificity ties without needing !important
   everywhere; !important is used only where the losing rule is inline.

   BREAKPOINT SCALE — the site already uses 480 / 768 / 900. This file uses
   those same three numbers and introduces none of its own.

   WHAT THIS FIXES (homepage only — the only page measured so far):

   MOB-W1  The document is 650px wide on a 390px screen. `.hero` is a grid and
           the ≤768 rule correctly sets `grid-template-columns:1fr`. But `1fr`
           means `minmax(auto, 1fr)`, and that `auto` floor forbids the track
           from shrinking below its content's min-content width. Three children
           blow it open: video.hero-mobile-video (min-content 1280px — a video's
           intrinsic size is its media dimensions, and width:100% does not lower
           the min-content contribution), canvas#hero-particles (780px, from the
           width attribute) and div#hero-address-bar (532px). The track is forced
           to 520px and the document to 650px, which is why the nav, the headline,
           the category tabs and the ZIP gate all run off the right edge.
           Fix: minmax(0,1fr) removes the automatic minimum. min-width:0 on the
           grid items and max-width:100% on the replaced elements are the
           belt-and-braces that stop the same thing recurring one level down.

   MOB-W2  .trust-badges is a 4-column grid that stays 4-across on a phone. The
           stylesheet does have correct ≤768 / ≤480 rules for it — they never win,
           because the element carries an INLINE
             style="grid-template-columns: repeat(4, 1fr); …"
           and an inline declaration beats any stylesheet rule that is not
           !important. Four 74px tracks cannot hold badge text whose min-content
           is 121–134px, so it spills to x=414 and sets the document width.
           This is the one place !important is load-bearing rather than lazy.

   MOB-W3  Ten text-entry controls are under 16px (#hero-addr 15.2, #lm-search
           15, #lm-sort 14, #order-calc 13.12). Below 16px mobile Safari zooms in
           on focus and never zooms back out. Scoped to text-entry controls only,
           and excluded inside tables, so nothing else reflows.

   MOB-W4  Touch targets under 44px, including footer links at 12px tall and
           .cat-tab category tabs at 40px. Padding rather than height, so nothing
           is stretched into a different shape.

   NOT IN HERE, deliberately: the six bottom-anchored widgets, the menu page's
   sticky-bar collision, and anything on /account, /track or a PDP. Those pages
   have not been measured yet, and the widget test could not be run honestly
   while the 650px overflow pushed the fixed layers outside the visual viewport.
   ============================================================================ */

/* ---------------------------------------------------------------- MOB-W1 */
@media (max-width: 900px) {
  .hero,
  #hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero > *,
  #hero > * {
    min-width: 0;
  }

  .hero-mobile-video,
  #hero-particles,
  #hero-address-bar {
    max-width: 100%;
    min-width: 0;
  }

  .hero-mobile-video,
  #hero-particles {
    width: 100%;
    height: auto;
  }
}

/* ---------------------------------------------------------------- MOB-W2 */
@media (max-width: 768px) {
  /* !important is required here: the element has an inline grid-template-columns */
  .trust-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-badges > * {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .trust-badges {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* A general guard: no grid on a phone may be held open by its content. */
@media (max-width: 768px) {
  .cat-tabs,
  .lm-grid,
  .menu-grid,
  .review-grid,
  .footer-grid {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------- MOB-W3 */
/* 16px is the exact threshold below which iOS zooms on focus. */
@media (max-width: 900px) {
  /* !important: several of these are set by id selectors (#lm-search, #lm-sort)
     or inline, and 16px is a hard iOS threshold — losing the cascade here means
     the keyboard zooms and never zooms back. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  table input,
  table select,
  table textarea {
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------------- MOB-W4 */
@media (max-width: 900px) {
  a.cat-tab,
  .cat-tab,
  .nav-links a,
  .footer-links a,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The rest of the measured-small targets get PADDING, not a display change.
     Switching these to inline-flex was tried first and made the homepage
     651px wide — an inline-flex box is sized shrink-to-fit from max-content,
     so long labels like "📞 OC: (888) 652-4443" stopped wrapping and forced the
     document open again. Padding grows the border box (which is what the finger
     actually hits) without touching the formatting context. */
  .step-cta,
  .kiki-banner-cta,
  .lm-fbtn,
  .lm-fulllink,
  .share-btn,
  .contact-phone,
  a[href^="tel:"] {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  button,
  .btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  /* things that are deliberately small and must stay that way */
  table button,
  table a,
  .lm-tier,
  .mc-price,
  sup,
  sub {
    min-height: 0;
    display: revert;
  }
}