/* ═══════════════════════════════════════════════════════════════
   FMST · TOUCH LAYER · brand + category pages
   The phone experience, tuned separately from the desktop one.
   Loaded by every brand page; every rule is gated on a coarse
   pointer or a phone-width viewport, so desktop is never touched.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Thumb-sized targets ─────────────────────────────────────
   A finger pad is ~9mm; the platform floor is 44px. The catalogue
   shipped 34px tabs, 38px product buttons and 17px datasheet links —
   all of them things a buyer taps while deciding what to ask about. */
@media (max-width:820px), (pointer:coarse){
  .cat-tab,
  .btn-specs, .btn-pwa, .btn-wa, .btn-call,
  .nav-wa, .rb-pill{
    min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* the datasheet link is a bare 17px line of text — give it a real body
     without moving it visually */
  .ds-link{
    min-height:44px; display:inline-flex; align-items:center; gap:6px;
  }
  /* related-brand cards are the cross-navigation between departments */
  .rb{ min-height:44px; }

  /* a phone number is a tap-to-call button wearing text; 20px is a mis-tap */
  a[href^="tel:"], a[href^="mailto:"], a[href^="https://wa.me"], .fcontact a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  /* stacked footer lists: 20px rows sit closer together than a fingertip is wide */
  .f-col li a, .fcol li a, .breadcrumb a{
    min-height:40px; display:inline-flex; align-items:center;
  }
  /* the By Family / By Application switch decides what the whole catalogue shows */
  .view-toggle > *{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* compare tray sits over the page, so its two controls need real bodies */
  .cmp-view, .cmp-clear{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

  /* iOS zooms the page when a control's text is under 16px */
  input, select, textarea{ font-size:16px; }
}

/* Typography lives in identity.css — it is not viewport-specific and both
   experiences share it. This file stays purely about the hand. */

/* ── 2 · Rows that must become columns ───────────────────────────
   Several sections put a label beside a list of chips. On a wide screen that
   reads well; at 483px the label eats 183px of a 363px row and leaves the list
   ~150px — just under two chips — so every chip drops onto its own line and the
   section renders as a tall right-aligned column. Stack them instead. */
@media (max-width:820px){
  .certs-inner{ flex-direction:column !important; align-items:flex-start !important; gap:12px; }
  .certs-list{ width:100%; }
  /* a 320px square around a 247x111 logo is mostly empty space on a phone */
  .hero-logo-box{ height:190px !important; }
}

/* ── 3 · Reading comfort ─────────────────────────────────────────
   Long specification copy at 13px on a phone is where buyers give up. */
@media (max-width:640px){
  .m-sec p, .tile p, .rb-meta{ line-height:1.6; }
  .cat-tab{ font-size:13px; }
}