/* ==========================================================================
   Prime Peptides: mobile revamp (2026-09-27, owner-approved plan)

   One late sheet for the phone layer of the whole journey. Loaded last on
   every page (functions.php, priority 1000), so it wins without !important
   in most places. Desktop is untouched unless a rule says "shared".

   Principles (from the approved plan):
   - The product is the hero: photo, name, price and Add in screen one.
   - One navy action per screen; sticky bars only after the main action
     scrolls away.
   - Every tap target 44 px; no text under 12 px; prices 13 px or more.
   - Bottom sheets for cart and pickers; swipe rows for discovery.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Top bar: one line on phones (short copy lives in .pp-topbar__short)
   -------------------------------------------------------------------------- */
.pp-topbar__short { display: none; }
@media (max-width: 640px) {
  html body .pp-topbar { padding: 7px 12px; font: 500 12.5px/18px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-topbar .pp-topbar__long{ display: none; }
  .pp-topbar .pp-topbar__short{ display: inline; }
  html body .pp-topbar a { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   2. Cart drawer: styled in pp-cart-drawer.css (v5, 2026-10-07)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.ppcd-open { overflow: hidden; overscroll-behavior: none; }
}

/* --------------------------------------------------------------------------
   3. Checkout on phones
   Email and phone get their own rows (the phone number was cut off).
   Name and city/postcode stay in pairs: short values, fewer rows.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_email_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_phone_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_address_1_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_address_2_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_state_field{ grid-column: 1 / -1; }
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_first_name_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_last_name_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_city_field,
  body.pp-co4-page .pp-co4 .pp-co4-box > #billing_postcode_field{ grid-column: span 3; }
  html body.pp-co4-page .pp-co4 .pp-co4-box input.input-text,
  html body.pp-co4-page .pp-co4 .pp-co4-box select,
  html body.pp-co4-page .pp-co4 .pp-co4-box .select2-container .select2-selection--single { height: 52px !important; min-height: 52px !important; line-height: 52px !important; }
  body.pp-co4-page .pp-co4 .pp-co4-box .select2-selection__rendered{ line-height: 52px; }

  /* Radios and the confirm box: bigger marks, whole row is the target */
  html body.pp-co4-page .pp-co4 .pp-co-ship input[type="radio"]{ width: 22px; height: 22px; }
  html body.pp-co4-page .pp-co4 .pp-co-ship input[type="radio"]:checked { border-width: 7px; }
  body.pp-co4-page .pp-co4 .pp-co-ship{ min-height: 68px; }
  html body.pp-co4-page .pp-co4 #payment li.wc_payment_method > label { min-height: 60px; }
  body.pp-co4-page .pp-co4 .pp-confirm-row{ padding: 14px 16px; }
  body.pp-co4-page .pp-co4 .pp-confirm-label input{ width: 22px; height: 22px; flex: 0 0 22px; }
  body.pp-co4-page .pp-co4 .pp-confirm-text{ font-size: 13px; }
  body.pp-co4-page .pp-co4 #ship-to-different-address label,
  body.pp-co4-page .pp-co4 .pp-co-notes__toggle{ min-height: 44px; display: inline-flex; align-items: center; }
  body.pp-co4-page .pp-co4 .pp-privacy-note{ font-size: 12.5px; }
  html body.pp-co4-page .woocommerce .pp-co4 .place-order button#place_order { min-height: 56px; }
}
/* The top bar sits outside the page wrapper, so it stayed bright above the
   dimmed page while the cart was open. */
body.ppcd-open .pp-topbar { z-index: 0; }

/* --------------------------------------------------------------------------
   4. Product page on phones
   Screen one = photo, name, size, pack and the Add button. Pack cards
   become compact rows. Long reading goes into accordions (pp-mobile.js).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.pp-pdp #pp-buy{ padding-top: 12px; padding-bottom: 8px; }
  body.pp-pdp #pp-buy .container{ padding-left: 16px; padding-right: 16px; }
  body.pp-pdp .pdp-grid{ gap: 14px; }

  /* Photo (owner 2026-10-07, Virtus reference): one square photo, edge to
     edge, no painted extension around a small picture. The 5:6 studio shot
     is cropped from the top so the vial sits centred above the shelf. */
  html body.pp-pdp .pdp-stage { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 22px; overflow: hidden; background: #DCE8FA !important; }
  html body.pp-pdp .pdp-stage img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: 50% 62% !important; }

  /* Name and summary */
  html body.pp-pdp .pdp-title{ font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
  body.pp-pdp .pdp-short{ margin-top: 6px; font-size: 14.5px; line-height: 1.5; }
  html body.pp-pdp .pdp-short.is-clamped { -webkit-line-clamp: 2; line-clamp: 2; max-height: 44px; }
  body.pp-pdp .pdp-short-more{ min-height: 32px; font-size: 13.5px; }

  /* Size pills: label and pills on one tight block */
  /* The pills and pack rows label themselves; the two small headings go
     (the groups keep their aria-labels). */
  html body.pp-pdp .pv3-sizes-head,
  body.pp-pdp .pv3-bundle-head{ display: none; }
  body.pp-pdp .pdp-buy > div:first-child{ margin-bottom: 14px; }
  html body.pp-pdp .pv3-sizes-head .form-label,
  html body.pp-pdp .pv3-bundle-head .form-label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pp-navy) !important; }
  html body.pp-pdp .pv3-sizes { gap: 8px !important; max-width: none !important; margin-bottom: 10px !important; }
  html body.pp-pdp .pv3-size { min-height: 46px !important; height: 46px !important; font-size: 15px !important; }

  /* Pack rows */
  html body.pp-pdp .pack-v3 { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; margin-top: 0 !important; padding-top: 0 !important; }
  body.pp-pdp .pack-v3 label.opt{ margin: 0; }
  html body.pp-pdp .pack-v3 .opt-box {
    position: relative;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    height: auto !important;
    padding: 6px 14px 6px 10px !important;
    text-align: left !important;
    border-radius: 16px !important;
  }
  html body.pp-pdp .pack-v3 .v3-vials { display: flex !important; justify-content: center; align-items: flex-end; width: 44px; height: 44px; margin: 0 !important; }
  body.pp-pdp .pack-v3 .v3-vials img.v3-vial{ width: auto; height: 42px; margin: 0 -5px; }
  body.pp-pdp .pack-v3 .v3-vials--1 img.v3-vial{ height: 44px; margin: 0; }
  html body.pp-pdp .pack-v3 .v3-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "t save" "p save";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    width: 100%;
    text-align: left !important;
  }
  html body.pp-pdp .pack-v3 .v3-t { grid-area: t; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; }
  html body.pp-pdp .pack-v3 .v3-p { grid-area: p; margin: 0 !important; font-size: 13.5px !important; line-height: 1.3 !important; }
  body.pp-pdp .pack-v3 .v3-save{ grid-area: save; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
  html body.pp-pdp .pack-v3 .v3-pct { font-size: 13px !important; font-weight: 700 !important; }
  html body.pp-pdp .pack-v3 .v3-amt { font-size: 12.5px !important; }
  html body.pp-pdp .pack-v3 .v3-p + .v3-save:empty,
  html body.pp-pdp .pack-v3 .v3-pp + .v3-save:empty { display: none !important; }
  html body.pp-pdp .pack-v3 .v3-badge {
    position: absolute !important;
    top: -8px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Add button and COA link */
  html body.pp-pdp .single_variation_wrap { margin-top: 10px !important; padding-top: 0 !important; }
  html body.pp-pdp .single_variation_wrap .woocommerce-variation.single_variation { margin: 0 !important; padding: 0 !important; }
  html body.pp-pdp form.variations_form .woocommerce-variation-add-to-cart { gap: 8px !important; }
  body.pp-pdp form.variations_form .woocommerce-variation-add-to-cart button.single_add_to_cart_button{ min-height: 54px; font-size: 16px; }
  body.pp-pdp form.variations_form a.pv3-cert{ min-height: 44px; font-size: 14px; }

  /* Delivery card: tighter rows */
  html body.pp-pdp .pp-dcard{ margin-top: 14px; }
  html body.pp-pdp .pp-dcard__row { padding-top: 10px !important; padding-bottom: 10px !important; gap: 12px !important; }
  html body.pp-pdp .pp-dcard__row b { font-size: 14.5px !important; }
  body.pp-pdp .pp-dcard__row small{ font-size: 13px; }

  /* Sticky bar: same navy as the main button, only after it scrolls away */
  html body.pp-pdp .pp-stickybar__btn{ min-height: 50px; padding: 0 20px; background: var(--pp-navy); font-size: 15px; }
  html body.pp-pdp .pp-stickybar__btn:hover { background: var(--pp-navy-2); }
  body.pp-pdp .pp-stickybar__opt{ font-size: 12.5px; }

  /* Proof block: copy + lookup; the pending document card waits for data */
  html body.pp-pdp .p5-proof { padding-top: 36px !important; padding-bottom: 28px !important; }
  body.pp-pdp .p5-proof h2{ font-size: 26px; line-height: 1.15; }
  html body.pp-pdp .p5-proof-card:has(.is-pending) { display: none !important; }
  body.pp-pdp .p5-labs a{ min-height: 36px; }
  body.pp-pdp .p5-lookup-field button{ min-height: 44px; }

  /* Accordions for long reading (classes set by pp-mobile.js) */
  html body.pp-pdp .pp-macc { padding-top: 0 !important; padding-bottom: 0 !important; background: transparent !important; }
  body.pp-pdp .pp-macc > .container{ display: block; padding-top: 0; padding-bottom: 0; }
  html body.pp-pdp .pp-macc:not(.is-open) > .container > :not(.pp-macc__btn) { display: none !important; }
  html body.pp-pdp .pp-macc.is-open > .container { padding-bottom: 20px !important; }
  body.pp-pdp .pp-macc .pp-macc__dup,
  body.pp-pdp .pp-macc .p5-h2.pp-macc__dup,
  body.pp-pdp .pp-macc h2.pp-macc__dup{ display: none; }
  body.pp-pdp .pp-macc-first{ margin-top: 12px; }
  body.pp-pdp .pp-macc-first > .container{ border-top: 1px solid var(--pp-line); }
  body.pp-pdp .pp-macc > .container{ border-bottom: 1px solid var(--pp-line); }
}
.pp-macc__btn { display: none; }
@media (max-width: 640px) {
  body.pp-pdp .pp-macc__btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pp-navy);
    font: 600 17px/1.3 var(--sans);
    text-align: left;
    cursor: pointer;
  }
  body.pp-pdp .pp-macc__btn svg{ flex: 0 0 auto; width: 20px; height: 20px; color: var(--pp-muted); transition: transform .2s var(--pp-ease, ease); }
  html body.pp-pdp .pp-macc.is-open .pp-macc__btn svg { transform: rotate(180deg); }
}

/* --------------------------------------------------------------------------
   5. Shop on phones: readable trust strip, 48 px search and stack button,
   44 px chips when they show.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Three equal columns; labels wrap instead of running off the edge */
  html body.shop-page .pp-shop-trust,
  html body.shop-page .pp-shop-trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; }
  html body.shop-page .pp-shop-trust li { gap: 8px !important; padding-left: 0 !important; border-left: 0 !important; min-width: 0; align-items: flex-start !important; }
  .shop-page .pp-shop-trust svg{ width: 30px; height: 30px; padding: 7px; }
  .shop-page .pp-shop-trust span{ min-width: 0; }
  html body.shop-page .pp-shop-trust strong { font-size: 14px !important; line-height: 1.2 !important; }
  html body.shop-page .pp-shop-trust small { margin-top: 2px !important; font-size: 12px !important; line-height: 1.25 !important; white-space: normal !important; }
  .pp-shop-search input[type="search"]{ min-height: 48px; font-size: 16px; }
  html body .pp-shop-stackbtn { min-height: 48px !important; display: inline-flex !important; align-items: center; }
  html body .shop-filters .chip { min-height: 40px !important; display: inline-flex !important; align-items: center; padding-left: 16px !important; padding-right: 16px !important; font-size: 14px !important; }
  html body .pp-shop-group h2 { font-size: 18px !important; }
}

/* --------------------------------------------------------------------------
   6. Build a Stack on phones: products first
   Short hero, the three tiers as one compact row, then the picker. The slot
   grid goes (each row already shows its own count); the dock stays.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-stk .pp-stk-hero{ padding-top: 20px; padding-bottom: 8px; }
  .pp-stk .pp-stk-title{ font-size: 30px; line-height: 1.1; }
  .pp-stk .pp-stk-sub{ margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .pp-stk .pp-stk-boxes{ margin-top: 16px; display: block; }
  .pp-stk .pp-stk-tiers{ gap: 8px; }
  html body .pp-stk .pp-stk-tier-box { min-height: 0 !important; height: auto !important; padding: 10px 10px 11px !important; border-radius: 16px !important; }
  html body .pp-stk .pp-stk-tier-pick { display: none !important; }
  html body .pp-stk .pp-stk-tier-t { font-size: 12.5px !important; line-height: 1.25 !important; }
  html body .pp-stk .pp-stk-tier-n { display: none !important; }
  .pp-stk .pp-stk-box--blue,
  .pp-stk .pp-stk-strips{ display: none; }

  .pp-stk .pp-stk-layout{ padding-top: 8px; }
  .pp-stk .pp-stk-panel{ padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; min-height: 0; }
  .pp-stk .pp-stk-panel-hd,
  .pp-stk .pp-stk-slots,
  .pp-stk .pp-stk-progress,
  .pp-stk .pp-stk-panel-fine{ display: none; }

  .pp-stk .pp-stk-h2{ font-size: 22px; }
  .pp-stk .pp-stk-search input{ min-height: 48px; font-size: 16px; }
  .pp-stk .pp-stk-chip{ min-height: 40px; font-size: 14px; }
  html body .pp-stk .pp-stk-now { font-size: 15px !important; }
  .pp-stk .pp-stk-base{ font-size: 13px; }
  .pp-stk .pp-stk-size{ font-size: 14px; }
  .pp-stk .pp-stk-addbtn{ min-height: 40px; min-width: 64px; font-size: 14px; }
  .pp-stk .pp-stk-qbtn{ width: 40px; min-width: 40px; height: 40px; }
  .pp-stk .pp-stk-dock-count{ font-size: 14px; }
  html body .pp-stk .pp-stk-dock-cta { min-height: 48px !important; font-size: 14.5px !important; }
}
@media (max-width: 640px) {
  /* Tiers: number on top, range under it, all in flow */
  html body.pp-stack-page .pp-stk-tier-box { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 2px; min-height: 0 !important; }
  html body.pp-stack-page .pp-stk-tier-box strong { position: static !important; font-size: 26px !important; line-height: 1 !important; }
  body.pp-stack-page .pp-stk-tier-box strong small{ font-size: 15px; }

  /* Dock: one edge-to-edge bar, not a card inside a card */
  html body.pp-stack-page .pp-stk-dock{
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--canvas);
    box-shadow: 0 -10px 30px rgba(6, 20, 38, .12);
  }
  html body.pp-stack-page .pp-stk-dock-in {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2px 12px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.pp-stack-page .pp-stk-dock-count{ font-size: 14px; line-height: 1.3; }
  html body.pp-stack-page .pp-stk-dock-cta { padding: 0 18px !important; min-height: 48px !important; font-size: 14px !important; white-space: nowrap; }
  body.pp-stack-page .pp-stk-dock-save{ justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; }
  body.pp-stack-page{ padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   7. Homepage on phones: about six screens instead of nine and a half
   Same sections, less height: compact standard rows, a smaller card
   carousel, the four tests as a 2 x 2 grid, the stack demo without the
   receipt, and the "why" cards as one swipe row.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-home .h4-sec{ padding-top: 48px; padding-bottom: 48px; }

  /* The Prime standard */
  html body .pp-home .h4-hero__standard-inner{ padding-top: 32px; padding-bottom: 32px; }
  .pp-home .h4-hero__standard-title{ font-size: 26px; }
  .pp-home .h4-hero__standard-lead{ margin: 8px 0 18px; font-size: 15px; }
  .pp-home .h4-std{ gap: 8px; }
  .pp-home .h4-std__row{ gap: 14px; padding: 12px 14px 12px 26px; }
  .pp-home .h4-std__row::before{ width: 10px; }
  .pp-home .h4-std .h4-ico{ width: 42px; height: 42px; flex: 0 0 42px; }
  .pp-home .h4-std .h4-ico svg{ width: 20px; height: 20px; }
  .pp-home .h4-std__row b{ font-size: 15.5px; }
  .pp-home .h4-std__row small{ margin-top: 2px; font-size: 13.5px; }

  /* Line-up: smaller cards, more of the next one peeking in */
  html body .pp-home .h4-row.products{ grid-auto-columns: 64vw; gap: 12px; }
  .pp-home .h4-link{ min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pp-line); font-size: 14.5px; }

  /* Four tests: 2 x 2 tiles, no floating vial */
  html body .pp-home .h4-proof__vial { display: none !important; }
  .pp-home .h4-proof__head{ margin-bottom: 0; }
  .pp-home .h4-proof__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .pp-home .h4-proof__c{ padding: 16px 14px; border-radius: 16px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--pp-line); }
  .pp-home .h4-proof__c h3{ margin-top: 6px; font-size: 17px; line-height: 1.2; }
  .pp-home .h4-proof__c b{ margin-top: 4px; font-size: 13.5px; line-height: 1.35; }
  .pp-home .h4-proof__c p{ display: none; }

  /* Stack: keep the vial fan, drop the receipt */
  html body .pp-home .h4-receipt{ display: none; }
  .pp-home .h4-stack__demo{ margin-top: 8px; }

  /* Why Prime: one swipe row */
  html body .pp-home .h4-why__grid{
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    gap: 12px;
    margin: 24px -16px 0;
    padding: 0 16px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pp-home .h4-why__grid::-webkit-scrollbar{ display: none; }
  .pp-home .h4-reason{ scroll-snap-align: start; padding: 20px; }
  .pp-home .h4-reason h3{ margin-top: 14px; font-size: 17px; }
}

/* --------------------------------------------------------------------------
   8. Payment page on phones: what to do first
   The transfer steps come before the order summary; copy buttons are
   44 px; a saved QR can be opened from the banking app.
   -------------------------------------------------------------------------- */
/* Items, totals and address fold into "Order details" (pp-mobile.js), so
   the transfer steps sit right under the amount. */
.pp-or4-more > summary { display: none; }
@media (max-width: 999px) {
  body.pp-or4-page .pp-or4-more{ margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
  body.pp-or4-page .pp-or4-more > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    list-style: none;
    font: 600 15px/1 var(--sans);
    color: var(--canvas);
    cursor: pointer;
  }
  body.pp-or4-page .pp-or4-more > summary::-webkit-details-marker{ display: none; }
  body.pp-or4-page .pp-or4-more > summary svg{ width: 18px; height: 18px; transition: transform .2s var(--pp-ease, ease); }
  html body.pp-or4-page .pp-or4-more[open] > summary svg { transform: rotate(180deg); }
}
@media (max-width: 640px) {
  .pp-pay-panel button.pp-copy{ min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .pp-pay-panel button.pp-copy::after{ content: ""; position: absolute; inset: -4px; }
  .pp-pay-panel button.pp-copy{ position: relative; }
  .pp-pay-panel .pp-pay-row{ min-height: 60px; }
  .pp-pay-panel .pp-pay-row__text{ font-size: 16px; }
  .pp-pay-panel .pp-pay-fact__amount,
  .pp-pay-panel .pp-pay-fact__ref{ font-size: 24px; }
  .pp-proof button.pp-drop{ min-height: 148px; }
  .pp-proof button[type="submit"]{ min-height: 56px; }
}
.pp-pay-qr__phone { display: none; }
@media (max-width: 999px) {
  .pp-pay-qr__phone{ display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
  .pp-pay-qr__save{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--pp-navy);
    color: var(--canvas);
    font: 600 14px/1 var(--sans);
    text-decoration: none;
  }
  .pp-pay-qr__phone span{ max-width: 32ch; font: 400 13px/1.45 var(--sans); color: var(--pp-muted); text-align: center; }
}

/* --------------------------------------------------------------------------
   9. Phone menu: category tiles and batch lookup
   -------------------------------------------------------------------------- */
.pp-drawer-tiles,
.pp-drawer-batch { display: none; }
@media (max-width: 1080px) {
  .pp-mobile-nav ul.pp-drawer-tiles{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 18px 4px;
    padding: 0;
    border: 0;
    list-style: none;
  }
  html body .pp-mobile-nav a.pp-drawer-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--pp-sky);
    color: var(--pp-navy);
    font: 600 15px/1.2 var(--sans);
  }
  .pp-mobile-nav a.pp-drawer-tile::after{ display: none; }
  .pp-mobile-nav a.pp-drawer-tile svg{ width: 16px; height: 16px; flex: none; opacity: .6; }
  html body .pp-mobile-nav a.pp-drawer-tile--lilac { background: var(--pp-lilac); }
  html body .pp-mobile-nav a.pp-drawer-tile--mint { background: var(--pp-mint); }
  html body .pp-mobile-nav a.pp-drawer-tile--sand { background: var(--pp-amber); }
  html body .pp-mobile-nav a.pp-drawer-tile:active { transform: scale(.98); }

  .pp-mobile-nav .pp-drawer-batch{ display: block; margin: 14px 18px 4px; padding: 14px; border-radius: 16px; background: var(--pp-paper); }
  .pp-mobile-nav .pp-drawer-batch label{ display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
  .pp-mobile-nav .pp-drawer-batch label b{ font: 600 15px/1.3 var(--sans); color: var(--pp-navy); }
  .pp-mobile-nav .pp-drawer-batch label span{ font: 400 13px/1.4 var(--sans); color: var(--pp-muted); }
  .pp-mobile-nav .pp-drawer-batch__field{ display: flex; gap: 8px; }
  .pp-mobile-nav .pp-drawer-batch input{
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    background: var(--canvas);
    font: 400 16px/1 var(--sans);
    color: var(--pp-navy);
    text-transform: uppercase;
  }
  html body .pp-mobile-nav .pp-drawer-batch input::placeholder { text-transform: none; color: var(--pp-muted); }
  .pp-mobile-nav .pp-drawer-batch button{
    flex: none;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-navy);
    color: var(--canvas);
    font: 600 14px/1 var(--sans);
    cursor: pointer;
  }
}

/* --------------------------------------------------------------------------
   10. Footer, FAQ and Contact on phones: 40 px link rows and chips
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sp2-chip{ min-height: 40px; padding-left: 16px; padding-right: 16px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   11. Batch page with no published record (shared)
   -------------------------------------------------------------------------- */
.pp-br-wait { padding: clamp(32px, 8vw, 96px) 16px; background: linear-gradient(180deg, var(--pp-sky) 0%, var(--canvas) 70%); }
.pp-br-wait__card { max-width: 520px; margin: 0 auto; padding: 28px 24px; border-radius: 22px; background: var(--canvas); box-shadow: 0 0 0 1px var(--pp-line), 0 24px 60px -40px rgba(6, 20, 38, .35); text-align: center; }
.pp-br-wait__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pp-sky); color: var(--pp-blue-deep); }
.pp-br-wait__ico svg { width: 26px; height: 26px; }
.pp-br-wait .pp-br-wait__title { margin: 16px 0 0; font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; color: var(--pp-navy); }
.pp-br-wait__copy { margin: 10px auto 0; max-width: 40ch; font: 400 15px/1.6 var(--sans); color: var(--pp-slate); }
.pp-br-wait__form { display: flex; gap: 8px; margin-top: 22px; }
.pp-br-wait__form input { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--pp-line); border-radius: 999px; font: 400 16px/1 var(--sans); color: var(--pp-navy); text-transform: uppercase; }
.pp-br-wait__form input::placeholder { text-transform: none; color: var(--pp-muted); }
.pp-br-wait__form button { flex: none; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--pp-navy); color: var(--canvas); font: 600 15px/1 var(--sans); cursor: pointer; }
.pp-br-wait__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--pp-blue-deep); font: 500 14.5px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   12. Cart page and drawer small print on phones
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.pp-cart-page .woocommerce .pp-cart-panel .pp-cart-line a.remove,
  body.pp-cart-page .woocommerce .pp-cart-panel .pp-cart-line a.pp-cart-line__remove{ width: 44px; height: 44px; display: inline-grid; place-items: center; }
  .pp-cart-line [class*="__more"]{ min-height: 32px; font-size: 13px; }
}
@media (max-width: 640px) {
  /* Supplies product layout: related cards and pack card text floors */
  html body.pp-pdp .related.products small,
  html body.pp-pdp .related.products .pcard-from,
  html body.pp-pdp .related.products .pcard-from * { font-size: 12.5px !important; }
  body.pp-pdp .pack-v2 small,
  body.pp-pdp .pack-v2 .opt-per{ font-size: 12.5px; }
  body.pp-pdp .about-compound.pp-macc,
  body.pp-pdp .pp-section-stone.pp-macc{ background: transparent; }
}
@media (max-width: 640px) {
  html body .pp-foot a em { font-size: 12px !important; }
}
@media (max-width: 640px) {
  /* Size rows: size | price or status | action, the middle column flexes */
  html body.pp-stack-page .pp-stk-card{ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  body.pp-stack-page .pp-stk-card .pp-stk-priceline{ min-width: 0; white-space: nowrap; }
  /* Sold-out rows: the notify control already says it; the muted label
     had no room and ran into the size. */
  html body.pp-stack-page .pp-stk-card.is-sold-out .pp-stk-priceline.is-muted { display: none; }
  html body.pp-stack-page .pp-stk-card.is-sold-out .pp-stk-size { color: var(--pp-muted); text-decoration: line-through; }
  html body.pp-stack-page .pp-stk-card.is-sold-out .pp-stk-act { grid-column: 3; }
}

/* ==========================================================================
   Second mobile pass (2026-09-27, owner review with Virtus / Amino / Peptime)
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. Hero as one rounded card (desktop and phone)
   -------------------------------------------------------------------------- */
html.pp-scroll-lock,
html.pp-scroll-lock body{ overscroll-behavior: none; }

@media (min-width: 900px) {
  .pp-home .h4-hero{
    position: relative;
    margin: 12px clamp(12px, 1.25vw, 20px) 0;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
  }
  .pp-home .h4-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--pp-line);
    pointer-events: none;
  }
  .pp-home .h4-hero__copy{ background: linear-gradient(160deg, var(--pp-paper) 0%, var(--pp-mist) 100%); }
  .pp-home .h4-hero__standard{ background: var(--pp-paper); }
}

@media (max-width: 899px) {
  /* The photo and the headline share one pastel card with four round
     corners; the Prime standard sits below it on white. */
  html body .pp-home .h4-hero__group {
    margin: 10px 12px 0;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, var(--pp-lilac) 0%, var(--pp-sky) 100%);
  }
  .pp-home .h4-hero__copy{
    margin: 0 12px;
    padding: 4px 22px 32px;
    border-radius: 0 0 24px 24px;
    background: var(--pp-sky);
    text-align: center;
  }
  .pp-home .h4-hero__copy-inner{ margin: 0 auto; }
  .pp-home .h4-hero .h4-hero__title{ font-size: 34px; line-height: 1.08; letter-spacing: -.03em; }
  .pp-home .h4-hero__title span{ white-space: normal; }
  .pp-home .h4-hero__lead{ margin: 14px auto 0; max-width: 30ch; font-size: 16px; line-height: 1.55; }
  .pp-home .h4-hero__ctas{ flex-direction: row; justify-content: center; margin-top: 24px; }
  .pp-home .h4-hero__ctas .h4-btn{ width: auto; min-width: 220px; min-height: 52px; padding: 0 30px; }
  .pp-home .h4-hero__ctas .h4-btn--ghost{ display: none; }
}

/* --------------------------------------------------------------------------
   14. Four tests on phones: the vial in the middle, two tests each side
   (after the Virtus "More than a purity test" card). Keeps the picture,
   at a size that fits one screen.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-home .h4-proof__stage{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 22px;
    height: auto;
    margin: 24px 0 0;
    padding: 26px 12px;
    border-radius: 24px;
    background: radial-gradient(120% 80% at 50% 50%, var(--canvas) 0%, var(--pp-mist) 55%, var(--pp-sky) 100%);
    box-shadow: inset 0 0 0 1px var(--pp-line);
  }
  .pp-home .h4-proof__ring,
  .pp-home .h4-proof__lines{ display: none; }
  html body .pp-home .h4-proof__vial {
    display: block !important;
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static !important;
    width: 108px !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 14px 18px rgba(20, 40, 80, .18));
  }
  .pp-home .h4-proof__list{ display: contents; }
  .pp-home .h4-proof__c{
    position: relative;
    inset: auto;
    width: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .pp-home .h4-proof__c--1{ grid-column: 1; grid-row: 1; text-align: right; }
  .pp-home .h4-proof__c--2{ grid-column: 1; grid-row: 2; text-align: right; }
  .pp-home .h4-proof__c--3{ grid-column: 3; grid-row: 1; text-align: left; }
  .pp-home .h4-proof__c--4{ grid-column: 3; grid-row: 2; text-align: left; }
  .pp-home .h4-proof__n{ font-size: 12px; }
  .pp-home .h4-proof__c h3{ margin: 4px 0 0; font-size: 16px; line-height: 1.2; }
  .pp-home .h4-proof__c b{ margin-top: 3px; font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--pp-slate); }
  .pp-home .h4-proof__c p{ display: none; }
  /* Small dot on the side that faces the vial */
  html body .pp-home .h4-proof__c::after{
    content: "";
    position: absolute;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-blue);
    box-shadow: 0 0 0 3px rgba(65, 143, 222, .18);
  }
  .pp-home .h4-proof__c--1::after,
  .pp-home .h4-proof__c--2::after{ right: -9px; }
  .pp-home .h4-proof__c--3::after,
  .pp-home .h4-proof__c--4::after{ left: -9px; }
  .pp-home .h4-proof__c--1,
  .pp-home .h4-proof__c--2{ padding-right: 8px; }
  .pp-home .h4-proof__c--3,
  .pp-home .h4-proof__c--4{ padding-left: 8px; }
}

/* --------------------------------------------------------------------------
   15. Homepage "Common questions": one clean card list (shared)
   Replaces the stacked bordered cards whose chevron sat on the edge.
   -------------------------------------------------------------------------- */
html body .pp-home .faq-el .elementor-accordion{
  display: block;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--pp-line), 0 18px 40px -34px rgba(11, 26, 43, .35);
}
.pp-home .faq-el .elementor-accordion .elementor-accordion-item{
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pp-home .faq-el .elementor-accordion .elementor-accordion-item + .elementor-accordion-item{ border-top: 1px solid var(--pp-line); }
.pp-home .faq-el .elementor-accordion .elementor-tab-title{
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 64px 16px 22px;
  background: transparent;
  font: 600 16px/1.35 var(--sans);
  letter-spacing: -.01em;
  color: var(--pp-navy);
}
.pp-home .faq-el .elementor-tab-title::after{ right: 18px; width: 32px; height: 32px; background: var(--pp-mist); }
.pp-home .faq-el .elementor-tab-title::before{ right: 27px; }
html body .pp-home .faq-el .elementor-tab-title.elementor-active { background: var(--pp-paper) !important; }
.pp-home .faq-el .elementor-accordion .elementor-tab-content{
  padding: 0 64px 20px 22px;
  background: var(--pp-paper);
  font: 400 15px/1.65 var(--sans);
  color: var(--pp-slate);
}
@media (max-width: 640px) {
  html body .pp-home .faq-left { text-align: center; margin-bottom: 20px !important; }
  html body .pp-home .faq-left h2 { font-size: 28px !important; line-height: 1.12 !important; }
  .pp-home .faq-el .elementor-accordion .elementor-tab-title{ min-height: 60px; padding: 14px 56px 14px 18px; font-size: 15.5px; }
  .pp-home .faq-el .elementor-tab-title::after{ right: 14px; }
  .pp-home .faq-el .elementor-tab-title::before{ right: 23px; }
  .pp-home .faq-el .elementor-accordion .elementor-tab-content{ padding: 0 18px 18px; font-size: 14.5px; }
  .pp-home .pp-faq-cta{ min-height: 52px; max-width: none; width: auto; padding: 0 30px; font-size: 15px; font-weight: 600; }
}

/* --------------------------------------------------------------------------
   16. Footer on phones: brand, newsletter, four folded link groups,
   then payments and the small print. (Replaces the long open grid.)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-foot{ padding-top: 40px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pp-foot .wrap{ width: calc(100% - 40px); }
  .pp-foot .pp-f5__top{ display: block; }
  .pp-foot .pp-foot__logo{ width: 112px; height: auto; }
  .pp-foot .pp-f5__about{ margin-top: 12px; font-size: 14px; line-height: 1.55; }
  .pp-foot .pp-f5__social{ margin-top: 16px; }
  .pp-foot .pp-f5__lead{ margin-top: 24px; font-size: 15px; }
  .pp-foot .pp-foot__form{ max-width: none; width: 100%; }
  .pp-foot .pp-foot__form input[type="email"]{ height: 40px; min-height: 40px; font-size: 16px; }
  .pp-foot .pp-foot__form button{ width: 40px; height: 40px; }

  .pp-foot .pp-f5__cols{ display: block; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .pp-foot .pp-f5__col{ margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .pp-foot .pp-f5__col > h3{ margin: 0; }
  .pp-foot .pp-f5__col li{ margin: 0; }
  .pp-foot .pp-f5__col a{ display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }

  .pp-foot .pp-f5__pay{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px; padding-top: 0; border: 0; }
  .pp-foot .pp-f5__pay > span{ flex-basis: 100%; margin-bottom: 4px; font-size: 13px; }
  .pp-foot .pp-f5__pay{ gap: 5px; }
  html body .pp-foot .pp-f5__pay b { min-height: 30px !important; padding: 0 8px !important; font-size: 12px !important; border-radius: 8px !important; }
  .pp-foot .pp-f5__base{ margin-top: 20px; padding-top: 16px; text-align: left; }
  .pp-foot .pp-f5__base p{ font-size: 12.5px; line-height: 1.55; }
}

/* --------------------------------------------------------------------------
   17. One phone type and button scale (shared by every page)
   Page titles 32 · section titles 28 · card titles 17 · body 15.5 ·
   small 13 · buttons 52 tall, 16 px text. Buttons in a section stay one
   size; the main action is navy, the second is an outline.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Page titles */
  html body .trx-hero__title,
  html body .sp2-title,
  html body.woocommerce-shop .woocommerce-products-header__title,
  html body.tax-product_cat .woocommerce-products-header__title,
  html body .shop-page h1,
  html body .pp-stk .pp-stk-title { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -.025em !important; }

  /* Section titles */
  html body .pp-home .h4-h2,
  html body .pp-home .h4-hero__standard-title,
  html body .pp-tr-main .trx-h2,
  html body.pp-pdp .p5-proof h2,
  html body.pp-pdp .p4-faq h2,
  html body .pp-stk .pp-stk-h2 { font-size: 28px !important; line-height: 1.12 !important; letter-spacing: -.02em !important; }

  /* Leads */
  html body .pp-home .h4-proof__lead,
  html body .pp-home .h4-stack__lead,
  html body .pp-tr-main .trx-lead,
  html body .sp2-lead { font-size: 15.5px !important; line-height: 1.55 !important; }

  /* Buttons: 52 px only for the commit actions (add to cart, checkout,
     place order); every other button is 46 px, 15 px/600. */
  html body .pp-stk-dock-cta,
  html body.pp-pdp form.variations_form .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
  html body.pp-co4-page .woocommerce .pp-co4 .place-order button#place_order { min-height: 52px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
  html body .pp-home .h4-btn,
  html body .pp-tr-main .trx-btn,
  html body .pp-home .pp-faq-cta { min-height: 46px !important; padding: 0 22px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.005em !important; }
  html body .pp-home .h4-proof__more .h4-btn,
  html body .pp-home .h4-stack__cta .h4-btn { width: auto; }

  /* Line-up carousel: square photos, calmer card text */
  html body .pp-home .h4-row.products{ grid-auto-columns: 58vw; }
  .pp-home .h4-row.products .ppc .ppc__media{ aspect-ratio: 1 / 1; }
  .pp-home .h4-lineup .h4-wrap{ align-items: center; }
  html body .ppc.ppc .ppc__body .ppc__name { font-size: 16px !important; line-height: 1.3 !important; }
  html body .ppc.ppc .ppc__price { font-size: 15.5px !important; }
  html body .ppc.ppc .ppc__stock { font-size: 12px !important; height: 24px !important; }
}

/* --------------------------------------------------------------------------
   18. Phone menu: "Most researched" swipe row
   -------------------------------------------------------------------------- */
.pp-drawer-pop { display: none; }
@media (max-width: 1080px) {
  .pp-mobile-nav .pp-drawer-pop { display: block; } /* styled with the menu v4 in pp-polish.css */
}

/* --------------------------------------------------------------------------
   19. Header + hero frame (after Virtus): the white header is a panel with
   rounded top corners that sits into the top bar colour; the hero card
   hangs right under it with the same 8 px side gaps. Home page only for
   the hero; the header frame applies site-wide while at the top of the
   page and flattens once the page scrolls.
   -------------------------------------------------------------------------- */
html body .pp-topbar{ border-bottom: 0; }
html body .pp-header,
html body.pp-el-page .pp-header {
  background: linear-gradient(var(--pp-sky) 0, var(--pp-sky) 20px, var(--canvas) 20px) !important;
  border-bottom: 0 !important;
  isolation: isolate;
}
.pp-header::before{
  content: "";
  position: absolute;
  inset: 0 8px;
  z-index: -1;
  border-radius: 20px 20px 0 0;
  background: var(--canvas);
  transition: border-radius .2s ease, inset .2s ease;
}
html body.pp-scrolled .pp-header,
html body.pp-scrolled.pp-el-page .pp-header { background: var(--canvas) !important; box-shadow: 0 1px 0 var(--pp-line); }
html body.pp-scrolled .pp-header::before { inset: 0; border-radius: 0; }

/* Pages without the hero card keep a hairline under the header */
html body:not(.home) .pp-header{ box-shadow: 0 1px 0 var(--pp-line); }

@media (min-width: 900px) {
  .pp-home .h4-hero{
    margin: 0 8px;
    border-radius: 20px;
  }
}
@media (max-width: 899px) {
  .pp-header::before{ inset: 0 6px; border-radius: 16px 16px 0 0; }
  html body .pp-header,
  html body.pp-el-page .pp-header { background: linear-gradient(var(--pp-sky) 0, var(--pp-sky) 16px, var(--canvas) 16px) !important; }
  html body .pp-home .h4-hero__group { margin: 0 8px !important; border-radius: 20px 20px 0 0 !important; }
  .pp-home .h4-hero__copy{ margin: 0 8px; border-radius: 0 0 20px 20px; }
}

/* --------------------------------------------------------------------------
   20. Audit fixes (2026-09-27 impeccable audit)
   -------------------------------------------------------------------------- */
/* Account welcome band: white text needs the darker blue behind it (AA) */

/* Buy-box savings: darker teal so small green text passes AA */
html body.pp-pdp .pack-v3 .v3-badge-best{ background: var(--pp-teal-ink); }
html body.pp-pdp .pack-v3 .v3-pct { color: var(--pp-teal-ink) !important; }
html body.pp-pdp .pack-v3 .v3-amt { color: var(--pp-slate) !important; }
html body .pv3-notify-done { color: var(--pp-teal-ink) !important; }

/* Required marks use the error red token, not pure red */
html body .woocommerce form .required,
html body .woocommerce-checkout .required { color: var(--error-red) !important; }

/* 12 px text floor on phones */
@media (max-width: 640px) {
  html body .shop-page small,
  html body .pp-shop-trust small,
  html body.pp-pdp .pack-v3 .v3-pct,
  html body.pp-pdp .pack-v3 .v3-badge,
  html body .ppc.ppc .ppc__stock,
  html body .ppc.ppc .ppc__coa { font-size: 12px !important; }
}

/* Touch targets: 44 px hit areas without changing the look */
@media (max-width: 899px) {
  .pp-header .pp-logo{ display: inline-flex; align-items: center; min-height: 44px; }
  body.pp-pdp .pdp-short-more,
  body.pp-pdp .p5-labs a,
  .pp-stk .pv3-notify-btn,
  .pp-stk .pp-stk-addbtn,
  .sp2-chip{ min-height: 44px; }
  .pp-tr-main .trx-labs a,
  .pp-tr-main a.trx-link,
  body.pp-pdp .p4-related-head a,
  .pp-home .h4-lineup a:not(.ppc__img):not(.ppc__btn):not(.ppc__coa){ position: relative; }
  .pp-tr-main .trx-labs a::after,
  .pp-tr-main a.trx-link::after,
  body.pp-pdp .p4-related-head a::after{ content: ""; position: absolute; inset: -14px -6px; }
  .pp-f5__social a,
  .pp-f5__social span{ min-width: 44px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   22. Design review fixes on phones (2026-09-27)
   One type scale, 16 px gutters, 56 px section rhythm, bigger hero
   product, navy stack block, chips on the shop.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Type: H1 34/700, H2 26/600, left-aligned section titles */
  html body .trx-hero__title,
  html body .sp2-title,
  html body .shop-page h1,
  html body .pp-stk .pp-stk-title { font-size: 34px !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: -.03em !important; }
  html body.pp-pdp .pdp-title { font-size: 28px !important; font-weight: 700 !important; }
  html body .pp-home .h4-h2,
  html body .pp-home .h4-hero__standard-title,
  html body .pp-home .faq-left h2,
  html body .pp-tr-main .trx-h2,
  html body.pp-pdp .p5-proof h2,
  html body.pp-pdp .p4-faq h2,
  html body .pp-stk .pp-stk-h2 { font-size: 26px !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; }
  html body .pp-home .h4-h2--center,
  html body .pp-home .faq-left { text-align: left !important; }

  /* Hero: more product, less headline */
  html body .pp-home .h4-hero__group { aspect-ratio: auto !important; height: 250px; }
  html body .pp-home .h4-hero__group-img { width: 112% !important; height: 112% !important; top: 54% !important; }
  html body .pp-home .h4-hero__ctas .h4-btn { min-height: 48px !important; }

  /* Rhythm: 16 px gutters, 56 px between sections */
  html body .pp-home .h4-wrap { width: calc(100% - 32px) !important; }
  html body .pp-home .h4-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  html body .pp-home .h4-hero__standard { padding: 36px 16px 28px !important; }
  html body .pp-home .h4-hero__standard-inner { padding: 0 !important; }
  html body .pp-home .h4-hero__standard-title,
  html body .pp-home .h4-hero__standard-lead { padding-left: 0 !important; }
  html body .pp-home .h4-std__row { padding-left: 26px !important; }
  html body .pp-home .h4-lineup { padding-top: 48px !important; }

  /* Shop: category chips as one swipe row (no sort control) */
  html body .shop-page .shop-filters {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    grid-column: 1 / -1;
    margin: 10px -16px 0;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body .shop-page .shop-filters::-webkit-scrollbar { display: none; }
  html body .shop-page .shop-filters .chip { flex: none; white-space: nowrap; }
  html body .shop-page .page-description,
  html body .shop-page .page-description p { font-size: 15px; color: var(--pp-slate); }

  /* PDP: Best value badge sits on the row's top edge, left of the savings */
  html body.pp-pdp .pack-v3 .v3-badge { right: auto !important; left: 66px !important; top: -9px !important; }
  html body.pp-pdp .p5-labs a { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 14px !important; line-height: 1 !important; }

  /* Account: no blank band above the tabs */
  html body.woocommerce-account .entry-content,
  html body.pp-account-page .entry-content { margin-top: 0 !important; }
  html body.woocommerce-account .site-content .woocommerce,
  html body.pp-account-page .woocommerce { padding-top: 12px !important; }
}
.pp-stk-base[hidden] { display: none !important; }
.ppc__per { font-size: .8em; font-weight: 500; color: var(--pp-muted); }

/* --------------------------------------------------------------------------
   23. 12 px text floor on every screen size (final QA, 2026-09-27)
   -------------------------------------------------------------------------- */
html body .pp-foot a em,
html body .ppc.ppc .ppc__stock,
html body .ppc.ppc .ppc__coa,
html body .doc-card .doc-updated,
html body.pp-pdp .opt-head .mono-label,
html body.pp-pdp .sec-eyebrow,
html body .product-price small { font-size: 12px !important; }
/* WooCommerce adds "(optional)" to the consent checkbox; it only squeezed
   into an 8 px column beside the box. */
html body.pp-co4-page .pp-co4 .pp-confirm-label .optional { display: none !important; }
/* PDP FAQ toggles: the chevron was lost under a later background rule,
   leaving empty circles (design review). */
html body .p4-faq-list summary span {
  background: var(--pp-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1A2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat !important;
  border: 0 !important;
}
html body .p4-faq-list details[open] summary span { background-color: var(--canvas) !important; transform: rotate(180deg); }
/* Homepage FAQ (owner review 2026-09-28): answers span the full card (an
   old 44em cap left a white block), no stray lines, and a quiet focus ring
   that only shows for keyboard use. */
html body .pp-home .faq-el .elementor-accordion .elementor-tab-content { max-width: none !important; width: auto; border: 0 !important; box-shadow: none !important; }
html body .pp-home .faq-el .elementor-accordion .elementor-accordion-item { border-bottom: 0 !important; }
html body .pp-home .faq-el .elementor-tab-title:focus,
html body .pp-home .faq-el .elementor-tab-title:focus-within,
html body .pp-home .faq-el .elementor-accordion-title:focus { outline: none !important; }
html body .pp-home .faq-el .elementor-tab-title:has(.elementor-accordion-title:focus-visible),
html body .pp-home .faq-el .elementor-tab-title:focus-visible { outline: 2px solid var(--pp-blue) !important; outline-offset: -3px !important; border-radius: 16px; }

.h4-mini { display: none; }

/* --------------------------------------------------------------------------
   24. Phone homepage pass (owner review 2026-09-29, Amino reference)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* No delivery strip on phones; the header is plain white at the top. */
  html body .pp-topbar { display: none !important; }
  html body .pp-header,
  html body.pp-el-page .pp-header { background: var(--canvas) !important; }
  html body .pp-header::before { inset: 0; border-radius: 0; }

  /* Hero: photo and copy on one continuous pastel card, slightly smaller type. */
  /* One background layer spans the photo and copy cells, so no seam can
     show between them; the two cells themselves are transparent. */
  html body .pp-home .h4-hero::before {
    content: "";
    grid-row: group-start / copy-end;
    grid-column: 1 / -1;
    margin: 0 8px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--pp-lilac) 0%, var(--pp-sky) 100%);
  }
  html body .pp-home .h4-hero__group,
  html body .pp-home .h4-hero__copy { position: relative; z-index: 1; background: none !important; box-shadow: none !important; }
  html body .pp-home .h4-hero__group-img { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 100% !important; max-width: none !important; margin: 0 auto !important; transform: none !important; }
  html body .pp-home .h4-hero__group { height: 270px !important; }
  html body .pp-home .h4-hero__copy { padding: 20px 20px 40px !important; }
  html body .pp-home .h4-hero .h4-hero__title { font-size: 31px !important; line-height: 1.12 !important; }
  html body .pp-home .h4-hero__lead { margin-top: 18px !important; max-width: none !important; font-size: 15px !important; line-height: 1.7 !important; }
  html body .pp-home .h4-hero__copy-inner { max-width: none !important; width: 100%; }
  html body .pp-home .h4-hero__ctas { margin-top: 30px !important; }

  /* The Prime standard: rows line up with the title, band flush left. */
  html body .pp-home .h4-std { margin: 0 !important; gap: 10px; }
  html body .pp-home .h4-std { grid-auto-rows: 1fr; }
  html body .pp-home .h4-std__row { margin: 0 !important; padding: 14px 14px 14px 26px !important; min-height: 88px; }
  html body .pp-home .h4-std__row::before { width: 12px; }
  html body .pp-home .h4-hero__standard-title { font-size: 24px !important; }
  html body .pp-home .h4-hero__standard-lead { font-size: 14.5px; }

  /* Four tests, desktop style adapted: the floating vial on a soft glow,
     then the four numbered test cards in two columns. */
  html body .pp-home .h4-proof__stage {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 10px;
    height: auto;
    margin: 28px 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  html body .pp-home .h4-proof__ring { display: none !important; }
  html body .pp-home .h4-proof__vial {
    display: block !important;
    position: relative !important;
    grid-column: 1 / -1;
    grid-row: auto;
    left: -12px;
    width: 230px !important;
    height: auto !important;
    margin: -36px auto -30px !important;
    transform: none !important;
    filter: drop-shadow(0 18px 22px rgba(20, 40, 80, .18));
    animation: h4-hero-bob 7s ease-in-out infinite !important;
  }
  html body .pp-home .h4-proof__list { display: contents; }
  html body .pp-home .h4-proof__c {
    position: relative;
    inset: auto !important;
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    padding: 16px 14px 16px !important;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1px var(--pp-line), 0 4px 24px rgba(6, 20, 38, .05);
    text-align: left !important;
  }
  html body .pp-home .h4-proof__c::after { display: none !important; }
  html body .pp-home .h4-proof__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pp-sky); font: 600 12px/1 var(--sans); color: var(--pp-blue-deep); }
  html body .pp-home .h4-proof__c--2 .h4-proof__n { background: #E9FCE6; color: #3F7F39; }
  html body .pp-home .h4-proof__c--3 .h4-proof__n { background: var(--pp-lilac); color: var(--pp-lilac-ink); }
  html body .pp-home .h4-proof__c--4 .h4-proof__n { background: #FEFECA; color: #7A5A1E; }
  html body .pp-home .h4-proof__c h3 { margin: 10px 0 0 !important; font-size: 17px !important; line-height: 1.2; }
  html body .pp-home .h4-proof__c b { display: block; margin-top: 4px; font-size: 12.5px !important; line-height: 1.35; font-weight: 600; color: var(--pp-navy); }
  html body .pp-home .h4-proof__c p { display: block !important; margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--pp-slate); }
  html body .pp-home .h4-proof__more { margin-top: 24px; }

  /* Shop search: the empty submit slot (34 px) clipped "Search products",
     and the 48 px input sat 5 px low in its 40 px pill. (shop-page is a
     class on the body itself.) */
  html body.shop-page .pp-shop-search { grid-template-columns: 34px minmax(0, 1fr) auto; height: 46px; }
  html body.shop-page .pp-shop-search input[type="search"] { height: 100%; min-height: 0; padding: 0 8px 0 6px; line-height: normal; }
  html body .pp-shop-stackbtn { min-height: 46px !important; height: 46px; padding: 0 14px !important; }

  /* Line-up head: "Shop all" centred on the title line, smaller pill
     (44 px tap area kept invisibly). */
  html body .pp-home .h4-lineup .h4-head { align-items: center !important; }
  html body .pp-home .h4-lineup .h4-link { position: relative; min-height: 34px !important; padding: 0 14px !important; font-size: 13.5px !important; }
  html body .pp-home .h4-lineup .h4-link::after { content: ""; position: absolute; inset: -5px -2px; }

  /* Line-up: wider cards. */
  html body .pp-home .h4-row.products { grid-auto-columns: 70vw; }

  /* Card buttons (Amino): "Details" outline and "+ Add" solid, side by
     side under the price, full card width. */
  html body .ppc.ppc .ppc__body { padding: 14px 14px 16px !important; }
  html body .ppc.ppc .ppc__desc { margin: 2px 0 0 !important; }
  html body .ppc.ppc .ppc__price { margin: 8px 0 0 !important; padding: 0 !important; }
  html body .ppc.ppc .ppc__btns {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  html body .ppc.ppc .ppc__btns:has(> :only-child) { grid-template-columns: 1fr; }
  html body .ppc.ppc .ppc__btn--ghost { display: inline-flex !important; }
  html body .ppc.ppc .ppc__btn {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font: 600 13.5px/1 var(--sans) !important;
    justify-content: center;
    white-space: nowrap;
    box-shadow: none;
    transition: transform .16s ease-out, background-color .16s ease;
  }
  html body .ppc.ppc .ppc__btn::before { display: none !important; }
  html body .ppc.ppc .ppc__btn--ghost { background: var(--canvas) !important; color: var(--pp-navy) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; }
  html body .ppc.ppc .ppc__btn--add { background: var(--pp-navy) !important; color: var(--canvas) !important; }
  html body .ppc.ppc .ppc__btn--notify { background: var(--pp-mist) !important; color: var(--pp-navy) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; }
  html body .ppc.ppc .ppc__btn--add .ppc__add-label { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; }
  html body .ppc.ppc .ppc__btn:active { transform: scale(.97); }
  html body .ppc.ppc .ppc__btn--add.is-added { background: var(--pass-green-bright) !important; color: var(--canvas) !important; }

  /* Latest lab reports: smaller cards so two show at once. */
  html body .pp-home .pp-ls__head { align-items: flex-start !important; padding: 0 16px !important; }
  html body .pp-home .pp-ls--carousel .pp-ls__row { padding-inline: 16px !important; scroll-padding-inline: 16px; }
  html body .pp-home .pp-ls:not(.pp-ls--pdp) .pp-ls__title { font-size: 26px; }
  html body .pp-home .pp-ls:not(.pp-ls--pdp) .pp-ls__sub { margin-top: 6px; font-size: 14px; }
  html body .pp-home .pp-ls--carousel .pp-ls__row { grid-auto-columns: 62%; gap: 10px; }
  html body .pp-home .pp-ls-card__pic { height: 112px; }
  html body .pp-home .pp-ls-card__body { gap: 8px; padding: 12px 14px 14px; }
  html body .pp-home .pp-ls-card__name { font-size: 15.5px; }
  html body .pp-home .pp-ls-card__name small { font-size: 12px; }
  html body .pp-home .pp-ls-card__nums { gap: 14px; }
  html body .pp-home .pp-ls-card__nums b { font-size: 20px; }
  html body .pp-home .pp-ls-card__chips i { padding: 4px 7px; font-size: 12px; }
  html body .pp-home .pp-ls-card__meta { font-size: 12px; }
  html body .pp-home .pp-ls-card__go { font-size: 13.5px; }

  /* Build a stack (Amino bulk block): vials fall behind the whole section
     and the copy sits on a frosted card on top. */
  html body .pp-home .h4-stack { padding: 72px 0 !important; }
  html body .pp-home .h4-stack__copy { text-align: center; }
  html body .pp-home .h4-stack__copy .h4-h2 { text-align: center !important; }
  html body .pp-home .h4-stack__lead { margin-inline: auto; }
  html body .pp-home .h4-stack__cta { flex-direction: column; justify-content: center; }
  html body .pp-home .h4-stack__cta .h4-btn { width: auto; min-width: 220px; }

  /* Example stack (Amino "bulk" line): stacked vials, the three names,
     the discount, and the real before/after price. */
  html body .pp-home .h4-mini {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    padding: 12px 14px 12px 12px;
    border-radius: 20px;
    background: var(--canvas);
    box-shadow: inset 0 0 0 1px var(--pp-line), 0 10px 30px -20px rgba(11, 26, 43, .3);
    text-align: left;
  }
  .pp-home .h4-mini__pics { position: relative; width: 76px; height: 84px; }
  .pp-home .h4-mini__pics img { position: absolute; top: 0; left: 0; width: 60px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--pp-sky); box-shadow: 0 0 0 2px var(--canvas); }
  .pp-home .h4-mini__pics img:nth-of-type(2) { left: 8px; top: 6px; }
  .pp-home .h4-mini__pics img:nth-of-type(3) { left: 16px; top: 12px; }
  .pp-home .h4-mini__pics i { position: absolute; right: -2px; bottom: -2px; padding: 4px 7px; border-radius: 999px; background: var(--pp-navy); font: 600 12px/1 var(--sans); font-style: normal; color: var(--canvas); }
  .pp-home .h4-mini__info b { display: block; font: 600 14px/1.3 var(--sans); color: var(--pp-navy); }
  .pp-home .h4-mini__info em { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 999px; background: var(--pass-wash); font: 600 12px/1 var(--sans); font-style: normal; color: var(--pass-green); }
  .pp-home .h4-mini__price { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
  .pp-home .h4-mini__price s { font: 400 12.5px/1.2 var(--sans); color: var(--pp-muted); }
  .pp-home .h4-mini__price b { font: 700 19px/1.1 var(--sans); letter-spacing: -.02em; color: var(--pp-navy); }
  .pp-home .h4-mini__price small { font: 600 12px/1.2 var(--sans); color: var(--pass-green); }
  html body .pp-home .h4-stack__demo { display: none !important; }
  html body .pp-home .h4-stack__tiles {
    display: block !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  html body .pp-home .h4-stack__copy {
    padding: 28px 20px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 20px 50px -30px rgba(11, 26, 43, .35);
  }
  .pp-home .h4-tile--1 { --x: 4%; --w: 76px; }
  .pp-home .h4-tile--2 { --x: 26%; --w: 64px; }
  .pp-home .h4-tile--3 { --x: 46%; --w: 48px; }
  .pp-home .h4-tile--4 { --x: 14%; --w: 44px; }
  .pp-home .h4-tile--5 { --x: 58%; --w: 68px; }
  .pp-home .h4-tile--6 { --x: 78%; --w: 76px; }
  .pp-home .h4-tile--7 { --x: 68%; --w: 46px; }
  .pp-home .h4-tile--8 { --x: 90%; --w: 40px; }
  .pp-home .h4-tile--9 { --x: 36%; --w: 46px; }
  .pp-home .h4-tile--10 { --x: 2%; --w: 54px; }
  .pp-home .h4-tile--11 { --x: 50%; --w: 56px; }
  .pp-home .h4-tile--12 { --x: 84%; --w: 44px; }

  /* Why buy from Prime: one column of compact cards (Amino), no swipe row. */
  html body .pp-home .h4-why__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; gap: 10px; margin: 24px 0 0 !important; padding: 0 !important; overflow: visible !important; }
  html body .pp-home .h4-reason { padding: 16px 18px !important; }
  html body .pp-home .h4-reason .h4-ico { width: 40px; height: 40px; border-radius: 12px; }
  html body .pp-home .h4-reason .h4-ico svg { width: 20px; height: 20px; }
  html body .pp-home .h4-reason h3 { margin-top: 10px !important; font-size: 16px !important; }
  html body .pp-home .h4-reason p { margin-top: 4px; font-size: 14px; line-height: 1.5; }

  /* Footer (Amino): link groups open in two columns, quiet small print. */
  html body .pp-foot .pp-f5__cols { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
  html body .pp-foot .pp-f5__col { border: 0 !important; }
  html body .pp-foot .pp-f5__col > h3 { margin: 0 0 10px !important; font: 600 12px/1 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--canvas); }
  html body .pp-foot .pp-f5__col > ul { display: block !important; margin: 0 !important; padding: 0 !important; }
  html body .pp-foot .wrap { padding-inline: 0 !important; }
  html body .pp-foot .pp-f5__top { padding-right: 0 !important; }
  html body .pp-foot .pp-f5__cols { gap: 32px 24px; }
  html body .pp-foot .pp-f5__col { min-width: 0; }
  html body .pp-foot .pp-f5__col li + li { margin-top: 2px; }
  html body .pp-foot .pp-f5__col a { display: block !important; min-height: 0; padding: 7px 0; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; color: rgba(238, 243, 249, .78); }
  html body .pp-foot .pp-f5__col a em { display: table; margin-top: 6px; }
  html body .pp-foot .pp-f5__ruo { margin-top: 28px; padding-block: 18px 0; font-size: 12px; line-height: 1.55; color: rgba(238, 243, 249, .5); }
  html body .pp-foot .pp-f5__base { margin-top: 10px; padding-top: 0; border: 0; }
  html body .pp-foot .pp-f5__base p { font-size: 12px; color: rgba(238, 243, 249, .5); }
  html body .pp-foot .pp-f5__base p + p { display: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  html body .pp-home .h4-stack__tiles { display: none !important; }
  html body .pp-home .h4-proof__vial { animation: none !important; }
}

/* Sticky header: Astra sets body { overflow-x: hidden }, which can make the
   body a scroll container on iOS Safari and stop position: sticky. clip
   blocks sideways scroll without creating a scroll container. The drawer
   and cart scroll locks (body.<class>) still win on specificity. */
html,
html body { overflow-x: clip; overflow-y: visible; }

/* Phones: per-mg sits on its own quiet line under the per-vial price, as on
   desktop. Riding on the per-vial line only fitted some rows at 360–390px,
   so rows came out uneven and the wrapped figure began with a stray "·".
   Stacked, every row is the same height at every width (about 8px taller
   than without per-mg). */
@media (max-width: 640px) {
  html body.pp-pdp .pack-v3 .v3-pp { grid-area: p; flex-direction: column; align-items: flex-start; gap: 0; }
  html body.pp-pdp .pack-v3 .v3-mg { font-size: 12.5px; line-height: 1.25; }
}

/* Header: flat white bar, no rounded "card" top (owner 2026-10-05).
   Keep at the end of this sheet so it wins over the framed-header rules. */
html body .pp-header,
html body.pp-el-page .pp-header { background: var(--canvas) !important; }
html body .pp-header::before { inset: 0 !important; border-radius: 0 !important; }
/* Nav links read stronger: medium weight, full navy. */
html body .pp-header .pp-nav a { font-weight: 500; color: var(--pp-navy); }

/* Product sticky bar on phones (owner 2026-10-07, Virtus reference): the
   product photo on the left, name and size, "Add 3 vials · ฿4,455". */
@media (max-width: 640px) {
  html body.pp-pdp .pp-stickybar__inner { display: flex; align-items: center; gap: 12px; }
  html body.pp-pdp .pp-stickybar__thumb { display: block; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 11px; background: var(--pp-sky, #EAF2FC); }
  html body.pp-pdp .pp-stickybar__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html body.pp-pdp .pp-stickybar__text { flex: 1 1 auto; min-width: 0; }
  html body.pp-pdp .pp-stickybar__name { font-size: 14.5px; }
  html body.pp-pdp .pp-stickybar__btn { flex: none; min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
}

/* ==========================================================================
   Phone type scale v2 (owner 2026-10-07, after the Virtus reference): page
   headings about 15% smaller, lead paragraphs 15px, and the delivery card
   under "Add to cart" at the cart's text sizes. Phones only; desktop keeps
   its scale. Overrides earlier !important rules, so it must stay last.
   ========================================================================== */
@media (max-width: 640px) {
  /* Page titles (H1) */
  /* Home hero title keeps its original size (owner 2026-10-07). */
  html body .woocommerce-products-header__title,
  html body .trx-hero__title,
  html body .sp2-title,
  html body .pp-stk-title { font-size: 29px !important; line-height: 1.12 !important; }
  html body.pp-pdp .pdp-title { font-size: 25px !important; line-height: 1.15 !important; }

  /* Section headings (H2 / large H3) */
  html body .pp-home .h4-h2,
  html body .pp-home .h7-title,
  html body .pp-ls__title,
  html body .pp-home .elementor-heading-title { font-size: 25px !important; line-height: 1.15 !important; }
  html body .trx-h2,
  html body .pp-stk-h2,
  html body .sp2-h2,
  html body.pp-pdp .pp-v6 ~ * h2,
  html body.pp-pdp main h2 { font-size: 23px !important; line-height: 1.2 !important; }
  html body .pp-home .h6-ready__title,
  html body .test-results h3,
  html body .trx-main h3 { font-size: 20px !important; line-height: 1.25 !important; }

  /* Lead paragraphs */
  html body .pp-home .h7-lead,
  html body .pp-home .h4-stack__lead,
  html body .trx-hero__lead,
  html body .trx-lead,
  html body .sp2-lead,
  html body.pp-pdp .p5-lead { font-size: 15px !important; line-height: 1.55 !important; }

  /* Product page delivery card (under "Add to cart") at the cart's sizes */
  html body.pp-pdp .pp-dcard .pp-sameday__text,
  html body.pp-pdp .pp-dcard strong,
  html body.pp-pdp .pp-dcard b { font-size: 14.5px !important; line-height: 1.35 !important; }
  html body.pp-pdp .pp-dcard__row { font-size: 13px !important; line-height: 1.45 !important; }
  html body.pp-pdp .pp-dcard__row * { line-height: 1.45; }
  html body.pp-pdp .pp-dcard__foot,
  html body.pp-pdp .pp-dcard__pay,
  html body.pp-pdp .pp-dcard__secure { font-size: 12.5px !important; }
}

/* Test results on phones (owner 2026-10-07): the hero's "Latest release"
   card and the "Tested by" logo strip are dropped; the report library below
   lists every batch with its lab. */
@media (max-width: 640px) {
  html body .trx-wrap.trx-strip,
  html body aside.trx-rel { display: none !important; }
}

/* Product page "Lab reports for this product" on phones: heading and link
   left-aligned in a column; a lone report card takes the full width. */
@media (max-width: 640px) {
  html body.pp-pdp .pp-ls--pdp .pp-ls__head { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 20px; }
  html body.pp-pdp .pp-ls--pdp .pp-ls__head > div,
  html body.pp-pdp .pp-ls--pdp .pp-ls__title,
  html body.pp-pdp .pp-ls--pdp .pp-ls__sub { width: auto; margin-left: 0; text-align: left; }
  html body.pp-pdp .pp-ls--pdp .pp-ls__row:has(> .pp-ls-card:only-child) { grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: auto !important; padding-inline: 20px; }
  html body.pp-pdp .pp-ls--pdp .pp-ls__row > .pp-ls-card:only-child { width: auto; }
}

/* ==========================================================================
   PHONE DESIGN SYSTEM v1 (owner 2026-10-07, after the Virtus reference and
   the v5 cart / v4 menu). One scale for every page on phones:
     Buttons   primary 46px · 15px/500 · pill   (cart "Secure checkout")
               secondary 42px · 14px/500 · pill
               chips / filters 36px · 13.5px/500
     Fields    46px · 16px text (16px keeps iOS from zooming)
     Type      H1 29px · H2 23px · H3 18px · lead 15px · body 15px ·
               meta 13px · eyebrow 11.5px (home hero title excepted)
   ":root:root:root:root" lifts these above the older page rules, many of
   which carry !important and long selectors. Keep this block last.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---------- Primary buttons ---------- */
  :root:root:root:root body .h6-btn--solid,
  :root:root:root:root body .h4-btn--dark,
  :root:root:root:root body .h6-rs__add,
  :root:root:root:root body .h6-team__btn,
  :root:root:root:root body.pp-pdp form.variations_form button.single_add_to_cart_button,
  :root:root:root:root body .btn-solid,
  :root:root:root:root body .p5-stack-btn,
  :root:root:root:root body .trx-btn--dark,
  :root:root:root:root body .wpforms-submit,
  :root:root:root:root body .pp-stk-dock-cta,
  :root:root:root:root body .pp-acc5-btn:not(.pp-acc5-btn--ghost),
  :root:root:root:root body .sp2-btn--dark,
  :root:root:root:root body .abx-btn--dark,
  :root:root:root:root body .abx-btn--light,
  :root:root:root:root body .brx-btn--dark,
  :root:root:root:root body .woocommerce-form-login__submit {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  /* ---------- Secondary buttons ---------- */
  :root:root:root:root body .h4-btn:not(.h4-btn--dark),
  :root:root:root:root body .h6-btn:not(.h6-btn--solid),
  :root:root:root:root body .trx-btn--ghost,
  :root:root:root:root body .trx-btn--light,
  :root:root:root:root body .trx-btn--line,
  :root:root:root:root body .sp2-btn:not(.sp2-btn--dark),
  :root:root:root:root body .abx-btn--ghost,
  :root:root:root:root body .abx-btn--line,
  :root:root:root:root body .brx-btn:not(.brx-btn--dark),
  :root:root:root:root body.pp-pdp .pv3-cert,
  :root:root:root:root body.pp-pdp .p5-more,
  :root:root:root:root body .pp-faq-cta,
  :root:root:root:root body .pp-shop-stackbtn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  /* ---------- Chips, filters and size pills ---------- */
  :root:root:root:root body .trx-chip,
  :root:root:root:root body .sp2-chip,
  :root:root:root:root body .pp-stk-chip {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }
  :root:root:root:root body.pp-pdp .pv3-size {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
  }

  /* ---------- Small in-card buttons (product cards, stack rows) ---------- */
  :root:root:root:root body .ppc.ppc .ppc__add,
  :root:root:root:root body .ppc.ppc .ppc__notify,
  :root:root:root:root body .pp-stk-addbtn,
  :root:root:root:root body .pp-stk-notifybtn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }
  :root:root:root:root body .ppc.ppc .ppc__total { font-size: 12px !important; }

  /* ---------- Form fields ---------- */
  :root:root:root:root body .wpforms-field input[type="text"],
  :root:root:root:root body .wpforms-field input[type="email"],
  :root:root:root:root body .wpforms-field input[type="tel"],
  :root:root:root:root body .wpforms-field select,
  :root:root:root:root body .woocommerce form .input-text:not(textarea):not(.qty),
  :root:root:root:root body .pp-co4 .input-text:not(textarea),
  :root:root:root:root body .woocommerce-form-login input.input-text {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  :root:root:root:root body .wpforms-field textarea { min-height: 120px !important; height: 120px !important; font-size: 16px !important; }

  /* ---------- Headings ---------- */
  :root:root:root:root body .woocommerce-products-header__title,
  :root:root:root:root body .trx-hero__title,
  :root:root:root:root body .sp2-title,
  :root:root:root:root body .pp-stk-title,
  :root:root:root:root body .abx-h1,
  :root:root:root:root body .brx-title { font-size: 29px !important; line-height: 1.12 !important; letter-spacing: -.02em !important; }
  :root:root:root:root body .pp-home .h4-h2,
  :root:root:root:root body .pp-home .h7-title,
  :root:root:root:root body .pp-home .elementor-heading-title,
  :root:root:root:root body .pp-ls__title,
  :root:root:root:root body .trx-h2,
  :root:root:root:root body .pp-stk-h2,
  :root:root:root:root body .sp2-h2,
  :root:root:root:root body .abx-h2,
  :root:root:root:root body .abx-main h2,
  :root:root:root:root body .brx-h2:not(.brx-h2--sm),
  :root:root:root:root body.pp-pdp main h2,
  :root:root:root:root body.pp-pdp .p5-h2 { font-size: 23px !important; line-height: 1.2 !important; letter-spacing: -.015em !important; }
  :root:root:root:root body .pp-home .h4-h2 span,
  :root:root:root:root body .pp-home .h7-title span,
  :root:root:root:root body .abx-h2 span,
  :root:root:root:root body .abx-h1 span,
  :root:root:root:root body .trx-hero__title span { font-size: inherit !important; }
  :root:root:root:root body .pp-home .h6-ready__title,
  :root:root:root:root body .pp-home .h6-team__title,
  :root:root:root:root body .pp-home .h6-rs__name,
  :root:root:root:root body .abx-main h3,
  :root:root:root:root body .trx-main h3,
  :root:root:root:root body .trx-card__name,
  :root:root:root:root body.pp-pdp .p5 h3 { font-size: 18px !important; line-height: 1.3 !important; }
  :root:root:root:root body .pp-acc5-top__hi { font-size: 24px !important; }
  :root:root:root:root body .abx .abx-cta h2,
  :root:root:root:root body .pp-home .faq-left h2 { font-size: 23px !important; line-height: 1.2 !important; }

  /* ---------- Body copy ---------- */
  :root:root:root:root body .abx-lead,
  :root:root:root:root body .abx-story__first,
  :root:root:root:root body .abx-main p { font-size: 15.5px !important; line-height: 1.6 !important; }
  :root:root:root:root body .brx-lot { font-size: 15px !important; }
  :root:root:root:root body .pp-ls-card__name { font-size: 16px !important; }
  :root:root:root:root body .pp-ls-card small { font-size: 12px !important; }
}

/* Phone design system v1: buttons whose older rules carry more specific
   selectors (doubled classes match their weight). */
@media (max-width: 640px) {
  :root:root:root:root body.pp-pdp #pp-buy form.variations_form .woocommerce-variation-add-to-cart button.single_add_to_cart_button.single_add_to_cart_button,
  :root:root:root:root body .trx-btn.trx-btn.trx-btn--dark,
  :root:root:root:root body .h4-btn.h4-btn.h4-btn--dark,
  :root:root:root:root body .pp-stk-dock-cta.pp-stk-dock-cta {
    height: 46px !important; min-height: 46px !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  }
  :root:root:root:root body .trx-btn.trx-btn.trx-btn--ghost,
  :root:root:root:root body .trx-btn.trx-btn.trx-btn--light,
  :root:root:root:root body .trx-btn.trx-btn.trx-btn--line,
  :root:root:root:root body .pp-faq-cta.pp-faq-cta,
  :root:root:root:root body .sp2-info__links a {
    height: 42px !important; min-height: 42px !important; padding: 0 18px !important; font-size: 14px !important; font-weight: 500 !important;
  }
  :root:root:root:root body.pp-pdp .p5-lookup-field button { height: 38px !important; min-height: 38px !important; font-size: 14px !important; font-weight: 500 !important; }
  :root:root:root:root body .pp-acc5-btn.pp-acc5-btn--ghost { height: 36px !important; min-height: 36px !important; font-size: 13px !important; font-weight: 500 !important; }
}

/* Product sticky bar v2 (owner 2026-10-07, Virtus reference): the button
   fills the space beside the product and ends with a cart icon. */
@media (max-width: 640px) {
  :root:root:root:root body.pp-pdp .pp-stickybar__inner { gap: 12px; }
  :root:root:root:root body.pp-pdp .pp-stickybar__thumb { width: 50px; height: 50px; border-radius: 12px; }
  :root:root:root:root body.pp-pdp .pp-stickybar__text { flex: 0 1 auto; min-width: 0; max-width: 34%; }
  :root:root:root:root body.pp-pdp .pp-stickybar__name { font-size: 14.5px; font-weight: 500; }
  :root:root:root:root body.pp-pdp .pp-stickybar__opt { font-size: 13px; }
  :root:root:root:root body.pp-pdp .pp-stickybar__btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px !important;
    min-height: 46px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    white-space: nowrap;
  }
  :root:root:root:root body.pp-pdp .pp-stickybar__btn:not(.is-secondary)::after {
    content: "";
    flex: none;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Folded sections and FAQ rows on phones (Virtus scale): 15.5px medium
   questions, tighter rows. */
@media (max-width: 640px) {
  :root:root:root:root body.pp-pdp .pp-macc__btn { min-height: 54px; font-size: 16px !important; font-weight: 500 !important; }
  :root:root:root:root body.pp-pdp .pp-macc__btn span { font-size: inherit !important; font-weight: inherit !important; }
  :root:root:root:root body .p4-faq-list details > summary,
  :root:root:root:root body .p5-faq details > summary { padding: 14px 16px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; }
  :root:root:root:root body .sp2-qa > summary { padding: 14px 16px !important; font-size: 15px !important; line-height: 1.4 !important; }
  :root:root:root:root body .p4-faq-list details,
  :root:root:root:root body .sp2-qa { border-radius: 16px !important; }
  :root:root:root:root body .p4-faq-list details p,
  :root:root:root:root body .sp2-qa p { font-size: 14.5px !important; line-height: 1.6 !important; }
}

/* Test results cards: one-line buttons. */
@media (max-width: 640px) {
  :root:root:root:root body .trx-card .trx-btn { white-space: nowrap !important; padding: 0 14px !important; font-size: 13.5px !important; }
}

/* Shop and related product cards on phones (Virtus reference): the tier bar
   and the "Add 2 more for 10% off" hint are dropped from every card; the
   product page and the cart explain the multi-vial discount once. */
@media (max-width: 640px) {
  :root:root:root:root body .ppc.ppc .ppc__ladder,
  :root:root:root:root body .ppc.ppc .ppc__hint,
  :root:root:root:root body .ppc.ppc .ppc__tlabels { display: none !important; }
}