/* ── Every customer page on a phone — 2026-10-23 ──────────────────────
 *
 * Operator: "fucking test all the shit you haven't tested on mobile" —
 * 83% of customers are on a phone. The buying path had phone tests; the
 * pages a customer reaches from a link or the footer did not: FAQ,
 * shipping, contact, about, legal, Lab Results, the two pass origins.
 * Measured at 360 and 390 by test/system/every_customer_page_on_a_phone_test.rb,
 * which holds every page to: no word under 12px, no field under 16px,
 * no control under 44×44 that is not a link inside a sentence.
 *
 * Loaded LAST by the bacwater, glam, peprally and ruo_pass layouts, so
 * a rule here wins a tie. Phone-only: desktop is untouched. Every rule
 * names a block root or a body brand class, anchors carry `a.`, and no
 * colour is set here — each control keeps the ink its own sheet chose.
 */

@media (max-width: 767.98px) {
  /* ── Site chrome every brand page carries ──────────────────────── */

  /* The compliance footer's links: 19–27px rows were a row of words a
     thumb hits two at a time. */
  body .brand-footer .brand-footer__nav a,
  body .brand-footer .brand-footer__contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* The theme footer on BacWater and Glam: columns of 20px links. */
  body #velaFooter .velaFooterList a,
  body #velaFooter .velaFooterLogo a,
  body #velaFooter a.brand-footer-mailto {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* The account icon in the header: 32px on BacWater, 40px on PepRally. */
  body .velaHeaderRight a.brand-account-link,
  body.peprally ap-headerstore a.brand-account-link {
    min-width: 44px;
    min-height: 44px;
  }

  /* The announcement strips: 10–11px. At 12px Glam's strip would wrap
     to three lines, so its middle clause steps aside on a phone. */
  body.glam #velaTopbar .glam-topbar__coa { display: none; }
  body.glam #velaTopbar { line-height: 1.35; }

  /* The welcome bar's × is a 44px target now (it was 36): the copy keeps
     clear of it. Glam and BacWater's slim-bar rules reserved 40px. */
  body.glam #sr-welcome-banner,
  body.glam #sr-campaign-banner,
  body.bacwater #sr-welcome-banner,
  body.bacwater #sr-campaign-banner {
    padding-right: 48px !important;
  }
  body.bacwater #velaTopbar .bacwater-topbar__ruo,
  body.glam .velaTopbarLeft > div,
  body.peprally .peprally-announcementbar .pr-ann__ship,
  body.peprally .peprally-announcementbar .pr-ann__ruo,
  body.peprally .sr-rally-banner .sr-rally-banner__eyebrow {
    font-size: 12px;
  }

  /* PepRally: the quick row (40px), the footer wordmark (34px) and the
     footer email (17px). */
  body.peprally .pr-quick a.pr-quick__link,
  body.peprally .pr-quick a.pr-quick__link:hover {
    min-height: 44px;
  }
  body.peprally footer.peprally-brand-footer a.peprally-wordmark,
  body.peprally footer.peprally-brand-footer .peprally-footer-mailto a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── FAQ: each question is a 27px <summary> ─────────────────────── */
  body.peprally .peprally-faq__item summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Each category heading sat flush on the last question above it, so
     "PRODUCTS" read as the end of the previous answer. */
  body.peprally .peprally-faq .peprally-faq__category:not(:first-child) {
    margin-top: 40px;
  }

  /* ── Glam contact: four addresses as 23px lines ─────────────────── */
  body.glam .pageContact .velaContactBoxText a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── Lab Results indexes ─────────────────────────────────────────── */
  body.glam .glam-coas__card-meta dt,
  body.bacwater .bacwater-coas__stat-label {
    font-size: 12px;
  }
  body.glam a.glam-coas__card-cta,
  body.peprally a.peprally-coas__card-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── The pass origins (rallypass.bio, ruopass.com) ──────────────── */
  .ruo-auth a.ruo-auth__mark-link,
  .ruo-pass-origin a.rp-site__more,
  .rp-site a.rp-site__nav-mark,
  .rp-site a.rp-site__nav-link,
  .rp-site a.rp-site__jump-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ruo-auth .ruo-auth__aside a.ruo-auth__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
  /* The reveal sits inside the password field; centred on it, it can
     be the full 44px without leaving the box. */
  .ruo-auth .ruo-auth__pw .ruo-auth__reveal {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    min-height: 44px;
    min-width: 44px;
  }
  .ruo-auth .ruo-auth__pw .ruo-auth__input { min-height: 52px; }
  .rp-site .rp-site__eyebrow { font-size: 12px; }
}