/**
 * Mobile refinements — touch target size and minimum legible text.
 *
 * Measured at 375px on a real page, not assumed: 23 interactive elements were
 * under the 44x44 CSS-pixel minimum (WCAG 2.5.5, and Apple's and Google's own
 * touch guidance), and several text runs sat at 10–11px.
 *
 * Scoped to `pointer: coarse` and small viewports so the desktop layout, which
 * is fine with a mouse, is untouched. Where a control's visual size is part of
 * the design, the hit area is grown with padding or a ::after overlay instead of
 * by scaling the element — the button still looks the same, it is just reachable
 * with a thumb.
 *
 * Deliberately NOT a blanket `a, button { min-height: 44px }`. That distorts
 * inline links inside paragraphs and blows the header apart; every selector here
 * corresponds to an element actually measured as too small.
 */

@media (pointer: coarse), (max-width: 768px) {

  /* ── header controls ──────────────────────────────────────────────────
     Search input/button and the cart and account links were 24–38px tall. */
  .ss-input,
  .ss-btn,
  .hr .bp,
  .hr .cbt,
  .hr a,
  .mb {
    min-height: 44px;
  }

  .ss-btn,
  .hr .cbt,
  .mb {
    min-width: 44px;
  }

  .ss-btn,
  .hr .cbt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hr .bp,
  .hr a {
    display: inline-flex;
    align-items: center;
  }

  /* The wordmark is a link; give it a thumb-sized row without resizing type. */
  .hi .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── quantity stepper ────────────────────────────────────────────────
     52x21 is far too small for the control that sets what a customer buys. */
  .qs {
    align-items: stretch;
  }

  .qs button,
  .qs input,
  .qs #qi,
  #qi {
    min-height: 44px;
    min-width: 44px;
    font-size: 16px;   /* iOS zooms the page on focus below 16px */
  }

  /* ── links in dense lists ────────────────────────────────────────────
     Footer columns and breadcrumbs were 17–25px tall. Padding grows the hit
     area; the visual rhythm is preserved by pulling the same amount back in
     margin, so the list does not suddenly space out. */
  .fcol a,
  .bc a {
    display: inline-block;
    padding-block: 14px;
    margin-block: -10px;
  }

  /* The collapsed search field is 24px wide until focused, which is a hard
     target to hit with a thumb. Widen the resting state; it still expands. */
  .ss-input {
    min-width: 44px;
  }

  /* ── product cards and content links ─────────────────────────────────
     Card titles, the "select" affordance and in-card links measured 20–39px
     on the homepage and shop grid — the primary route into a product. */
  .pif > a.pcard-title,
  .pif > a.bsel,
  .fc > a,
  .pcard a,
  .rc a {
    display: block;
    min-height: 44px;
    padding-block: 12px;
    margin-block: -8px;
  }

  .pif > a.bsel,
  .fc > a {
    display: flex;
    align-items: center;
  }

  /* ── call-to-action links that render as buttons ─────────────────── */
  .coa-cta a,
  a.pending,
  .bac,
  .bpo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── minimum legible text ────────────────────────────────────────────
     10–11px is below what most people can read comfortably on a phone.
     Scoped to real copy; SVG text (the vial labels) is artwork and excluded. */
  /* !important is deliberate here and nowhere else in this file.
     These sizes are set by higher-specificity page rules (`.rc .inf .cat` at
     0,3,0 beats a bare `.cat`), and the per-page CSS is inlined into 34 and 59
     separate documents — there is no single place to lower that specificity.
     A minimum legible size is a floor, not a preference, so it wins. */
  .cat,
  .pct,
  .coa-lot,
  .elg-tag,
  .elg-foot,
  .elg-foot a,
  .fd p,
  .fd p strong,
  small,
  .fine,
  .note {
    font-size: max(12px, 1em) !important;
  }

  /* ── form fields ─────────────────────────────────────────────────────
     Any input under 16px makes iOS Safari zoom the viewport on focus, which
     reads as the page "jumping" when you tap a field. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: max(16px, 1em);
    min-height: 44px;
  }

  /* Checkboxes and radios are square controls; the rule above would stretch
     them. Give them a comfortable box instead. */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 22px;
    min-width: 22px;
  }
}