/* Precision Labs — small-screen accessibility corrections.
   Loaded last, so it wins without any !important.

   Why this file exists: the handoff was drawn at 1280px only and specifies
   11px uppercase for the promo bar, header labels and legal lines. At desktop
   reading distance that is fine. On a phone it is below the 12px floor, and
   several controls fall under the 44px hit target the same handoff asks for in
   its responsive section — the design contradicts itself once it leaves 1280px.
   Everything here resolves that contradiction in favour of the smaller screen;
   nothing here changes the design at or above 768px. */

@media (max-width: 767px) {

  /* ── legibility floor ─────────────────────────────── */

  .pl-promo,
  .pl-promo__item {
    font-size: 12px;
    letter-spacing: .1em;
  }
  /* Tighter spacing so more of a message is on screen at once at 375px; the
     marquee handles the rest. Nothing here needs to force a single line — the
     track is `width: max-content` and its items are `white-space: nowrap`. */
  .pl-promo__item { padding: 0 20px; }

  /* The overlay goes edge to edge on a phone: a 760px card with gutters would
     be a card with no gutters, drawn as if it had them. */
  .pl-search { padding: 0; }
  .pl-search__panel {
    max-width: none;
    height: 100%;
    border: 0;
  }
  .pl-search__input { font-size: 16px; }   /* iOS zoom floor */

  .pl-cartbtn__label,
  .pl-cartbtn__total,
  .pl-label,
  .pl-eyebrow,
  .pl-foot__note,
  .pl-foot__legal,
  .pl-news__claims,
  .pl-news__claims li {
    font-size: 12px;
  }

  .pl-small,
  .pl-foot__links a,
  .pl-foot__pos {
    font-size: 13px;
  }

  /* Every declaration in the theme that sits below the 12px floor, raised to
     it. Enumerated rather than blanket-set so each stays independently
     adjustable, and so a new sub-12px rule shows up in the audit instead of
     being silently swallowed by a catch-all. */
  .pl-btn--sm,
  .pl-badge,
  .pl-chip,
  .pl-field > label,
  .pl-sum__table small,
  .pl-hero__claimlist,
  .pl-how__label,
  .pl-testing__claims,
  .pl-cat__n,
  .pl-bundles__all,
  .pl-cat__meta,
  .pl-cats__all,
  .pl-gate__card > .pl-eyebrow,
  .pl-gate__claims,
  .pl-eyebrow--onnavy,
  .pl-foot__legal,
  .pl-label--ondark,
  .pl-pdp__eyebrow,
  .pl-pdp__studied-label,
  .pl-pdp__size-out,
  .pl-pdp__sizes-label,
  .pl-pdp__guest,
  .pl-pdp__stockline,
  .pl-pcard__chips .pl-chip,
  .pl-finder .pl-btn,
  .pl-lab__meta,
  .pl-lab__spec {
    font-size: 12px;
  }
  /* Tracking that tight is unreadable once the size drops. */
  .pl-badge,
  .pl-chip,
  .pl-pcard__chips .pl-chip { letter-spacing: .08em; }

  /* ── hit targets ──────────────────────────────────── */

  /* The handoff's own responsive section asks for >=44px below 768px. */
  .pl-menubtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .pl-menubtn__bars {
    display: block;
    width: 20px;
  }
  .pl-menubtn__bars i {
    display: block;
    height: 2px;
    background: currentColor;
    margin: 4px 0;
  }

  .pl-btn,
  .pl-btn--sm {
    min-height: 44px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .pl-searchbtn,
  .pl-head__quiet,
  .pl-cartbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Inline text links need the target without becoming buttons, so the padding
     goes vertical only and the line stays where the design put it. */
  .pl-link,
  .pl-foot__links a,
  .pl-foot__legallinks a,
  .pl-foot__contact a,
  .pl-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A long email address must not force the page wider than the screen. */
  .pl-foot__contact a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ── layout ───────────────────────────────────────── */

  .pl-news__inner,
  .pl-foot__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-news__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* The step indicator must never push the reduced header wider than the
     viewport — a checkout that scrolls sideways reads as broken. */
  .pl-head--checkout .pl-head__inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .pl-steps {
    font-size: 12px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .pl-steps__rule { flex: 0 1 18px; }

  /* Wide content scrolls inside its own box rather than widening the page. */
  .pl-table-scroll,
  .pl-lab__results,
  .woocommerce-cart-form table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Touch, not width, is what makes a 40px target too small — so the floor runs
   the whole way up to the desktop breakpoint, not only below 768px. Tablets
   are touch devices with room for the full nav. */
@media (max-width: 1199px) {
  .pl-nav__list a,
  .pl-searchbtn,
  .pl-head__quiet,
  .pl-cartbtn,
  .pl-btn,
  .pl-btn--sm,
  .pl-chip--nav,
  .pl-link,
  .pl-foot__contact a,
  .pl-pcard__cta,
  .pl-sort__field select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Category filter chips are drawn at 9/14 padding, which lands at 40px. */
  .pl-chip--nav {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  /* An add-on button sized to its short label falls under the floor on both
     axes; the design already gives it a full-width row to sit in. */
  .pl-addon .pl-btn,
  .pl-pdp__addon .pl-btn {
    min-width: 88px;
    justify-content: center;
  }

  /* A product card's title is its primary link — on a phone it is the target
     most people actually aim for, and it was landing at 26px. */
  .pl-pcard__title a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* The lab-report chip is the design's main trust affordance; it must be as
     tappable as the buy button next to it.
     Matched at two classes deliberately: shop.css sets
     `.pl-pcard__chips .pl-chip--lab { min-height: 32px }`, and a single-class
     selector here loses to it on specificity no matter which file loads last. */
  .pl-pcard__chips .pl-chip--lab,
  .pl-pcard__chips .pl-pcard__lab,
  .pl-chip--lab,
  .pl-pcard__lab {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* The size cards carry per-unit maths and a best-value flag at 10–11px.
     That is exactly the comparison a buyer is squinting at to choose. */
  .pl-pdp__size-best,
  .pl-pdp__size-price,
  .pl-pdp__size-out,
  .pl-pdp__size-unit,
  .pl-pdp__size small {
    font-size: 12px;
  }

  /* Volume tiers: hold the legibility floor. The sub-row and the badge are the
     smallest type in the buy box, and the per-vial maths is exactly what a
     buyer compares tiers on, so neither may drop below 12px here. */
  .pl-tier__row--sub,
  .pl-tier__badge {
    font-size: 12px;
  }

  /* Pagination numbers render 26px wide by default. The selector matches
     WooCommerce's own element chain because its
     `.woocommerce nav.woocommerce-pagination ul li a` (0,2,4) sets
     `min-width:1em; display:block` and outranks anything shorter. */
  .pl-pagination nav.woocommerce-pagination ul.page-numbers li .page-numbers,
  nav.woocommerce-pagination ul.page-numbers li .page-numbers {
    min-width: 44px;
    min-height: 44px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── final touch-target sweep ──────────────────────
   Added after measuring the live theme with the plugin stylesheets gone: 27
   plugins were incidentally padding some of these, so they only fell under the
   floor once the site was actually clean. Selectors are container-qualified to
   outrank the component rules that set the smaller size. */
@media (max-width: 767px) {
  .pl-bundles .pl-bundle__name a,
  .pl-bundle__name a,
  .pl-pcard__title a,
  .pl-cats .pl-cats__all,
  .pl-bundles .pl-bundles__all,
  .pl-cats__all,
  .pl-bundles__all,
  .pl-foot .pl-foot__legallinks a,
  .pl-foot .pl-foot__links a,
  .pl-foot .pl-foot__contact a,
  .pl-foot__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer legal links sit on one line; let them wrap rather than force the
     row wider than the screen once each is 44px tall. */
  .pl-foot__legallinks {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
  }
}
/* The age gate's legal links are the last sub-44px targets on the site. They
   sit inline inside a sentence, so they get vertical padding rather than being
   turned into blocks — the sentence has to keep reading as a sentence. */
@media (max-width: 767px) {
  .pl-gate__legal { line-height: 2.4; }
  .pl-gate__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }
}