/* ==========================================================================
   Pro Peptide — Cross-cutting mobile fixes
   Single home for site-wide mobile corrections found in the mobile audit.
   Loaded site-wide, late, so it wins the cascade. Keep rules surgical and
   commented with the audit reason. Child-theme only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   iOS Safari zoom-on-focus.
   When a focused form control's computed font-size is < 16px, iOS Safari
   auto-zooms the page (and does not zoom back out). This is most damaging in
   the checkout flow (pp-checkout.css sets the billing fields, coupon input,
   and cart qty to 14px). A 16px floor on text-entry controls at phone widths
   removes the zoom with a visually negligible 2px change. font-size only is
   forced — nothing else about the fields is touched. Checkboxes, radios,
   range, file and color inputs are intentionally excluded (font-size is
   irrelevant to them and they should not be widened).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   Tap-target floors (WCAG 2.5.5).
   Three interactive controls in the buy flow render below 44px on mobile:
     - PDP sticky buy-bar button .......... 42px tall  (pp-pdp-phase1.css:110)
     - Shop pagination links .............. 36x36       (pp-shop.css:782)
     - Cart qty stepper +/- and field ..... 36x36       (pp-checkout.css:249-275)
   min-height/min-width raise the floor to 44px without overriding the source
   `height`/`width` declarations (min-* wins when larger), so this is
   cascade-order-independent and visually minimal. Phone widths only.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pp-sticky-buybar-btn {
        min-height: 44px;
    }
    .pp-shop__pagination .page-numbers {
        min-width: 44px;
        min-height: 44px;
    }
    .pp-cart-item-qty input[type="number"],
    .pp-cart-item-qty .minus,
    .pp-cart-item-qty .plus {
        min-width: 44px;
        min-height: 44px;
    }
}

/* PP audit 2026-05-27 — Phase 3: PDP responsive cleanup.
 *   (a) WooCommerce hover-zoom mirror (img.zoomImg) is a 1024px-wide
 *       absolutely positioned overlay injected by wc-single-product.js. On
 *       touch viewports it never animates in, but it sits in the layout and
 *       extends document.scrollWidth to 1093px. Constrain to 100% width and
 *       hide outright at <=1024 (hover-zoom is meaningless on touch). */
.zoomImg {
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
}
@media (max-width: 1024px) {
    .zoomImg {
        display: none !important;
    }
}

/*   (b) Add-to-Cart button regression — pp-pdp-finish.css:1092 sets
 *       min-width: 200px on the ATC for wider desktop pill. At 360 the WC
 *       variation form's content area is ~342px wide; with 28px padding and
 *       a min-width of 200, the button + qty stepper push past the column.
 *       Drop the floor at <768. */
@media (max-width: 767px) {
    body.single-product .pp-buybox--v7 button.single_add_to_cart_button {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 16px !important;
    }
    body.single-product .pp-buybox--v7 .single_variation_wrap .woocommerce-variation-add-to-cart {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/*   (c) Pack-tier card grid wraps at <=1024. pp-pack-tier-cards.css:16
 *       forces a 3-col grid with !important and only collapses at <=600px,
 *       which leaves the 600-1024 tablet/small-laptop range overflowing the
 *       PDP right column (50% of viewport in the table layout). Single column
 *       up through 1024; restore 3-col on >=1025. */
@media (max-width: 1024px) {
    .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-row {
        grid-template-columns: 1fr !important;
    }
}

/* PP audit 2026-05-27 — Phase 2: site-wide mobile header overflow fix.
 * Child theme's style.css:3659 already sets
 *   .naturally-main-header .header_bottom { flex-wrap: nowrap; gap: 24px; }
 * at (0,2,0) specificity. Our override has to MATCH or beat that to win, so
 * the selector is qualified with the same ancestor + an !important on
 * flex-wrap (belt-and-suspenders since style.css gets rewritten by a local
 * watcher per memory `project_style_css_watcher.md`). */
@media (max-width: 767px) {
    .naturally-main-header .header_bottom {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }
    .header_container,
    .naturally-main-header.header.default {
        overflow-x: clip;
    }
}

/* PP audit 2026-05-27 — Phase A: shop + category h-scroll at 1024.
 * .pp-shop__grid (pp-shop.css:198) is `display: flex` with a fixed 240px
 * sidebar + 28px gap + 80px horizontal padding. The .pp-shop__list flex item
 * defaults to `min-width: auto` (= its content's intrinsic min-content,
 * ~739px in the list view). Sum overflows viewport at 1024 by 11-63px
 * depending on page content. Classic flex-shrink fix: let the list shrink
 * below its intrinsic min, and let the row's middle grid column do the
 * same so its content respects the new ceiling instead of pushing the row
 * back open. */
@media (max-width: 1280px) {
    /* .pp-shop is a flex item of <body> (body has display:flex). Flex items
     * default to min-width:auto = their content's intrinsic min-content,
     * which lets .pp-shop stretch to ~1087 at 1024 viewport. Forcing it to
     * 0 + 100% max width caps it to the parent (viewport) and the rules
     * below let the inner flex/grid chain shrink to fit. */
    /* The selector must match pp-shop.css:880-883 specificity (0,2,1):
     * body.woocommerce-page .pp-shop / body.archive .pp-shop / body.search .pp-shop
     * — that block carries `max-width: 1280px !important` and would beat
     * a bare `.pp-shop` even with !important. */
    body.woocommerce-page .pp-shop,
    body.archive .pp-shop,
    body.search .pp-shop {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .pp-shop__list {
        min-width: 0;
    }
    /* !important to beat pp-shop-list.css:41 — same (0,1,0) specificity but
     * that file loads after pp-mobile-fixes.css in the cascade so its
     * `grid-template-columns: 280px 1fr 240px` wins source-order otherwise. */
    .pp-shop-list__row {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 240px) !important;
    }
}

/* PP audit 2026-05-28 — Phase D2 commit 1: text-color contrast (a11y)
 * Aggregate axe scan across /shop/, BPC-157 PDP, /the-drop/ flagged ~108
 * color-contrast violations clustered around:
 *   A. Light grays on white (#9ca3af, #94a3b8) — 3.0:1, fails WCAG AA 4.5:1
 *   B. White at low opacity on dark footer — rgba(250,250,250,0.3-0.5) — 1.9-3.5:1
 *   E. Brand blue #1f9edb as TEXT on white — 3.2:1 (kept as bg/border/icon)
 * Commit 1 is the override-only pass: variable redefinitions + footer
 * selectors. Hits ~80% of rendered violations immediately. Commit 2 (sed
 * pass across non-style.css files) follows separately for hover/focus
 * state consistency at the source.
 * Loads after style.css per <head> order → wins source-order at equal specificity.
 */

/* Cluster A — variable redefinitions
 * --pp-text-muted (style.css:20228) and --pl-text-tri (pp-planner.css:45)
 * cascade to every selector that uses var(--pp-text-muted) etc.
 * #6b7280 = Tailwind gray-500, 5.7:1 on white (was 3.0:1).               */
:root {
    --pp-text-muted: #6b7280;
    --pl-text-tri:   #6b7280;
}

/* Cluster B — footer text on dark #343434 surface
 * Source: style.css uses rgba(255,255,255,0.5) / rgba(250,250,250,0.3-0.5)
 * which computes to 1.9-3.5:1. Replace with solid #cbd5e1 (slate-300, ~7:1). */
.pp-footer-col ul li a,
.pp-footer-tagline,
.pp-footer-contact,
.pp-footer-payments__label,
.pp-footer-disclaimer,
.pp-footer-copyright,
.pp-footer-copyright span,
.site-footer .pp-footer-disclaimer,
footer .pp-footer-disclaimer {
    color: #cbd5e1;
}

/* PP audit 2026-05-28 — Phase C: tap target sweep (WCAG 2.5.5)
 * Diagnose grouped offenders into 3 strategies:
 *  (1) Clearly-interactive buttons + form inputs → explicit min-height 44px
 *      (visual size grows by a few px; rows accommodate)
 *  (2) Chip-like buttons in their own row → same min-height 44px
 *      (chip rows have room to grow)
 *  (3) Small design pills (category chips, 26-28px tall, multi-instance) →
 *      ::before pseudo extends invisible tap area to 44px without changing
 *      visual size. Use position:relative on the pill so the ::before
 *      positions correctly.
 * Inline body-text links (e.g., footer email, breadcrumb links) are
 * exempt per WCAG 2.5.5 Exception 2 (inline within a sentence) — left
 * unchanged. */

/* (1) Interactive controls — real height/width bump */
.pp-search-trigger.header--icon,
.pp-header-account.header--icon,
.pp-shop__filter-toggle,
.pp-shop__price-apply,
.pp-shop__clear,
.yith-quick-view-close,
.pp-qty__btn,
.pp-tier-hint,
.pp-sticky-atc-btn,
.pp-btn-pri,
.pp-btn-ghost,
.pp-btn-utility-dark,
.pp-home-email__input,
.pp-sticky-buybar-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* (2) Chip-like buttons in their own row */
.pp-search-popular-chip,
.pp-shop-list__planner,
.pp-product-card__planner-link,
.pp-product-card__planner-link--above,
.pp-product-card__title-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

/* (3) Small design pills — invisible tap-area extender via ::before.
 *      Keeps the visible pill at its designed 26-28px height while the
 *      hit area is 44×44 (extended by ~8-9px on each axis). */
.pp-shop-list__pill,
.pp-product-card__category-pill,
.pp-buybox__category-pill,
.pp-buybox__category-pill--straddle {
    position: relative;
}
.pp-shop-list__pill::before,
.pp-product-card__category-pill::before,
.pp-buybox__category-pill::before,
.pp-buybox__category-pill--straddle::before {
    content: '';
    position: absolute;
    inset: -10px -4px;  /* extend 10px vertical, 4px horizontal */
    pointer-events: auto;
    /* Important: this pseudo sits *behind* the pill text but in front of
     * its parent's background. z-index isn't needed because pointer-events
     * routes the click to the parent <a>, not the pseudo itself. */
}

/* Phase C-final: on touch-input devices only, also bump the pill's box
 * itself to 44px so axe / Lighthouse can detect a compliant target via
 * getBoundingClientRect (the ::before extender above is invisible to
 * those tools). Desktop (fine pointer) keeps the original 26-28px visual
 * — the ::before continues to handle desktop tap area. */
@media (pointer: coarse) {
    .pp-shop-list__pill,
    .pp-product-card__category-pill,
    .pp-buybox__category-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* =========================================================================
 * v6 COLOR SYSTEM — DESIGN.md v6 (2026-05-28)
 * All overrides land here (loads after style.css + pp-shop-list.css, so it
 * wins source-order; !important only where a same-specificity rule in those
 * files would otherwise tie). Spec: DESIGN.md "Color System block (v6)".
 * ========================================================================= */

/* --- #1 SUPPLIES category = wine/plum (#792359) ---
 * Listing badge (transparent per #3) + buybox tinted pill (#F7EAF1).
 * PDP body class .pp-page--cat-supplies now emitted via the cat_class_map
 * addition in woocommerce-single.php:35. */
.pp-shop-list__pill--supplies,
.pp-product-card--cat-supplies .pp-product-card__category-pill {
    border-color: #792359 !important;
    color: #792359 !important;
}
.pp-page--cat-supplies { --pp-cat-color: #792359; --pp-cat-text: #792359; }
.pp-page--cat-supplies .pp-buybox__category-pill {
    background: #F7EAF1;
    border-color: #792359;
    color: #792359;
}

/* --- #3 CATEGORY BADGES — bordered-on-white (listing/card only; buybox keeps tint) ---
 * pill (radius 9999, 1px, 6/16 pad, tinted fill) → badge (radius 6, 1.5px,
 * 8/14 pad, transparent). Per-category border/text colors are preserved;
 * only the tint fill is removed. */
.pp-shop-list__pill,
.pp-product-card__category-pill {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    background: #ffffff !important;   /* kill the tint fill (beats per-category bg) */
    box-shadow: none !important;
}

/* --- #4 BUTTONS — looser padding, 12px radius, 10px gap ---
 * Action red / primary blue / accent green / dark utility solid buttons.
 * Cart icon already injected left via ppAtcCartIconInit(). */
.single_add_to_cart_button,
.pp-btn-pri,
.pp-btn-ghost,
.pp-btn-utility-dark,
.pp-sticky-buybar-btn {
    padding: 14px 28px !important;
    border-radius: 12px !important;
    gap: 10px !important;
}

/* --- #5 SAVINGS PILL — solid green+white → pale bg + green text + tag icon ---
 * Beats pp-pdp-finish.css:217 (background/color !important) by matching the
 * .pp-buybox--v7 .pp-pack-pill__savings specificity + !important. */
/* body.single-product prefix → (0,4,1), beats pp-pdp-finish.css:217's
 * (0,4,0) !important which loads after this file in the cascade. */
body.single-product .pp-buybox--v7 .pp-pack-pill__savings,
body.single-product .pp-buybox--v7 .pp-selector-group[data-attribute="pa_pack-size"] .pp-pack-pill__savings {
    background: #F7FCF2 !important;
    color: #62a437 !important;
    gap: 5px !important;
    padding-left: 10px !important;
}
/* ti-tag (Lucide "tag") icon, left, 13px — data-URI SVG stroked #62a437.
 * %23 = '#' in the URL-encoded color. */
body.single-product .pp-buybox--v7 .pp-pack-pill__savings::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2362a437' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%2362a437'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

/* --- #6 HEALING (and any #4e9c2a) text on WHITE → #3d7d22 (5.9:1) ---
 * Scoped to the PDP green-text surfaces that sit on white (per-vial savings
 * line, tier hint pct, COA accents). Where green already sits on the #EAF7DF
 * tint (shop-list pill, order-received), it's untouched — those pass. */
.pp-buybox--v7 .pp-pack-pill__pct,
.pp-buybox--v7 .ppx-savings,
.pp-drop-card__trust {
    color: #3d7d22;
}

/* =========================================================================
 * 2026-06-09 MOBILE AUDIT (MOBILE_AUDIT_BRIEF.md) — site-wide batch.
 * 15-page 375px gate sweep; shared header/footer/body defects fixed here.
 * Page-specific defects fixed at source (pp-home.css timeline) or in the
 * dated sections that follow.
 * ========================================================================= */

/* --- Gate 10 P0 (every page): off-canvas nav drawer rendered the DESKTOP
 * horizontal menu. style.css:3687 (.header_nav > ul { display:flex;
 * flex-wrap:nowrap }) is unscoped and leaks into the parent theme's
 * off-canvas drawer (naturally/css/style.css@8117 fixes .header_nav
 * off-canvas at <=1199px expecting stacked 50px rows). Result: 584px-wide
 * single row inside the 300px panel — only 'Home' reachable. Restore the
 * parent's stacked layout across the parent's own off-canvas range. */
@media (max-width: 1199px) {
    .naturally-main-header .header_bottom .header_nav {
        display: block;
        line-height: inherit;
    }
    .naturally-main-header .header_bottom .header_nav > ul {
        display: block;
        width: 100%;
    }
    .naturally-main-header .header_bottom .header_nav > ul > li {
        display: block;
    }
    .naturally-main-header .header_bottom .header_nav > ul > li > a {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 50px 0 30px;
        font-size: 16px;
    }
}

/* --- Gate 10 companion: the hamburger toggle only renders at <=767px
 * (style.css:3798-3811) while the nav goes off-canvas at <=1199px — between
 * 768 and 1199 there was no menu access at all. Show the toggle across the
 * whole off-canvas range at the parent's 44px size (child forced 40x40,
 * 4px under the tap floor). */
@media (max-width: 1199px) {
    .naturally-main-header .header_bottom .header_nav_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 0 0 8px;
    }
}

/* --- Gate 2 P1 (every page): logo wordmark painted past its flex-shrunk
 * anchor (img height:70px/width:auto => 280px wide in a ~210px box), so the
 * hamburger pill sat on the trailing letters of 'PROpeptide'. Let the img
 * scale inside whatever width the anchor actually gets. */
@media (max-width: 1199px) {
    .naturally-main-header .header_bottom .header_logo,
    .naturally-main-header .header_bottom #nt-logo {
        min-width: 0;
    }
    .naturally-main-header .header_bottom .header_logo img,
    .naturally-main-header .header_bottom .pp-logo-img {
        max-width: 100%;
        height: auto;
        max-height: 70px;
    }
}

/* --- Gate 3 P1 (every page): footer column links (15px hit boxes), legal
 * strip links (26px), breadcrumb links (17px), 'See The Drop' footnote link
 * (16px). Two-part treatment per the 2026-05-28 precedent: invisible
 * ::before extender everywhere (no layout change), plus a real min-height
 * bump on coarse pointers so the rendered box itself measures >=44px on
 * phones. Legal-strip dividers are border-right on the anchors
 * (pp-footer-legal.php:97) — no pseudo collisions. */
.pp-footer-col a,
.pp-footer-contact a,
.pp-footer-legal a,
.pp-page-header__breadcrumb a,
.pp-shop__overstock-foot a {
    position: relative;
}
.pp-footer-col a::before,
.pp-footer-contact a::before,
.pp-footer-legal a::before,
.pp-page-header__breadcrumb a::before,
.pp-shop__overstock-foot a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
}
@media (pointer: coarse) {
    .pp-footer-col a,
    .pp-footer-contact a,
    .pp-footer-legal a,
    .pp-page-header__breadcrumb a,
    .pp-shop__overstock-foot a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --- Gate 5 P2 (most pages): stray 72px white strip under the dark footer.
 * The parent theme reserves body padding-bottom:72px at <=768
 * (naturally/css/update.css) for a fixed bottom bar this site doesn't
 * render. Zero it; re-reserve only when the PDP sticky buy bar is actually
 * in the DOM. */
@media (max-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }
    body:has(#pp-sticky-buybar) {
        padding-bottom: 72px !important;
    }
}

/* --- Gate 6 P2 (home): hero H1 never steps down — Customizer Additional CSS
 * ships 'html body .pp-home-hero__h1 { font-size:54px !important }' which
 * beats pp-home.css:296's intended 32px at <=768. The doubled class
 * out-specifies it (0,2,2 vs 0,1,2) without touching the Customizer entry;
 * desktop keeps 54px. (The same Customizer rule also forces
 * font-weight:800 — above the 600 weight cap — flagged, not changed.) */
@media (max-width: 768px) {
    html body .pp-home-hero__h1.pp-home-hero__h1 {
        font-size: 32px !important;
    }
}

/* --- Drawer polish: the parent theme paints a farm-illustration watermark
 * at the bottom of the off-canvas panel — NineTheme demo art, off-brand
 * here. It arrives as an element-level INLINE style from
 * naturally/inc/template-parts/header-parts.php:101, so !important is the
 * only CSS-side override. */
@media (max-width: 1199px) {
    .naturally-main-header .header_bottom .header_nav {
        background-image: none !important;
    }
}

/* --- Gate 3 P1 (shop): filter-panel category rows measured 293x30 — give
 * the whole label row a 44px hit box. */
@media (pointer: coarse) {
    .pp-shop__filter-panel label {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --- Gate 2/7 P0 (variable PDP): style.css:16312 forces the buybox
 * variation row into a 130px/1fr grid with !important at every width, so at
 * phone widths the ATC track shrinks to ~130-145px and the price digits +
 * cart icon paint outside the pill (pp-pdp-finish.css's intended <=480px
 * stack is dead inside a grid container). Stack the row: qty full-width on
 * top, Add to Cart full-width below. */
@media (max-width: 768px) {
    .variations_form.pp-buybox-form .single_variation_wrap .woocommerce-variation-add-to-cart,
    .pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .woocommerce-variation-add-to-cart {
        grid-template-columns: 1fr !important;
    }
    .variations_form.pp-buybox-form .single_variation_wrap .quantity,
    .pp-buybox .variations_form.pp-buybox-form .single_variation_wrap .quantity {
        width: 100% !important;
        flex: none !important;
    }
}

/* --- Gate 3/7 P1 (PDP body sections): the Order-it card CTA pair renders
 * 38-40px tall and content-width (ppx editorial buttons, style.css:13898).
 * Stack them full-width at >=44px on mobile per the card-button spec. The
 * .ppx-closer-actions wrapper is content-sized inside the single-column
 * closer grid, so it has to stretch too or 'full width' stops at ~191px. */
@media (max-width: 768px) {
    .ppx-tabs--v2 .ppx-btn {
        width: 100%;
        min-height: 44px;
    }
    .ppx-tabs--v2 .ppx-closer-actions {
        width: 100%;
        justify-self: stretch;
    }
}

/* --- Gate 1 P1 (PDP at 360): .ppx-card-grid--feature-4 keeps two columns
 * below 880 (style.css:13808) but its items' min-content forces the tracks
 * to ~301px inside a 224px container at 360 — 9px of real horizontal
 * scroll. One column on phones; cards can never out-grow their grid. */
@media (max-width: 480px) {
    .ppx-tabs--v2 .ppx-card-grid--feature-4 {
        grid-template-columns: 1fr;
    }
    .ppx-tabs--v2 .ppx-card {
        max-width: 100%;
        min-width: 0;
    }
}

/* --- Gate 3 P1 (PDP buybox): 'Use Peptide Planner' row link is a 21px-tall
 * text link on the size row. Real 44px box on touch devices. */
@media (pointer: coarse) {
    a.pp-planner-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --- MY ACCOUNT (gates 1/2/4/13 P0 root + gate 3): template-myaccount.php's
 * wrapper is a flex item of body{display:flex}; the tab strip's
 * min-width:max-content set the wrapper's automatic minimum size to ~1100px,
 * rendering a fixed desktop canvas at every phone width with everything
 * right of x=375 unreachable (body overflow-x:hidden eats the pan). The
 * wrapper now carries .pp-account-shell; min-width:0 releases the trap and
 * the existing tab-strip overflow-x:auto machinery starts working. */
.pp-account-shell {
    max-width: 1100px;
    width: 100%;
    min-width: 0;
    margin: 40px auto;
    padding: 0 40px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .pp-account-shell {
        padding: 0 16px;
        margin: 24px auto;
    }
    /* Gate 13d: right-edge fade so the strip reads as swipeable. */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
    }
    /* Gate 8: postal fields on edit-address follow the checkout's ~160px cap
     * (pp-checkout.css doesn't load here). */
    .woocommerce-account input#billing_postcode,
    .woocommerce-account input#shipping_postcode {
        max-width: 160px;
    }
}
/* --- PEPTIDE PLANNER (theme-side, build-agnostic .ppp__ overrides — the
 * plugin ships its own CSS separately and live runs an older build, so the
 * mobile corrections live here where they deploy with the theme and no-op
 * if a class is absent).
 * B1: a result row scrolled half out of the dropdown list reads as a
 *     'clipped vial at the card top' (owner screenshot) — snap rows to the
 *     scroll edge so a half-cut card can't rest there.
 * B2: the '+ Add' affordance is hover-revealed (opacity:0) and so never
 *     appears on touch — show it on every addable row on hover-less devices.
 * B3: the name row's pills (dose / category / matched-term) wrap raggedly —
 *     name takes its own line on phones, pills follow in a fixed order. */
.ppp__results-list {
    scroll-snap-type: y proximity;
    scroll-padding-top: 8px;
}
.ppp__results-list .ppp__result-row {
    scroll-snap-align: start;
}
@media (hover: none) {
    .ppp__result-row[data-pp-add] .ppp__result-affordance--hint {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 480px) {
    .ppp__result-name-row {
        gap: 6px;
    }
    .ppp__result-name { flex: 1 0 100%; }
    .ppp__result-dose-pill { order: 1; }
    .ppp__cat-pill { order: 2; }
    .ppp__match-pill { order: 3; }
}
/* Gate 3 P1 (planner controls measured 14-41px tall): touch floors. The
 * dose-card remove X stays 28px visually — extender only. */
@media (pointer: coarse) {
    .ppp__recalculate,
    [data-pp-clear-stack],
    .ppp__dose-save-btn {
        min-height: 44px;
    }
    .ppp__recalculate,
    [data-pp-clear-stack] {
        display: inline-flex;
        align-items: center;
    }
    .ppp__dose-remove {
        position: relative;
    }
    .ppp__dose-remove::after {
        content: '';
        position: absolute;
        inset: -8px;
    }
    .ppp input[data-pp-edit="startDate"],
    input[data-pp-edit="startDate"] {
        min-height: 32px;
    }
}
/* Gate 2 P2: the 2-col intake grid leaves ~166px per select at 375 and the
 * native select clips its value mid-word ('New to peptic'). One column on
 * phones gives the text room. !important because the plugin stylesheet
 * enqueues after this file and ties on specificity. */
@media (max-width: 480px) {
    .ppp__intake-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- BLOG/POST (gate 2 P1): single posts render the title twice — the
 * NineTheme blog-single H1 at the top AND the site-wide pp-page-header band
 * (TWO_TONE pattern). Keep the band (site pattern, centered, no orphan
 * wrap); retire the theme's duplicate. Template-level dedupe flagged for a
 * future pass — this is the layout-only fix. */
.single-post h1.blog-single_title {
    display: none;
}

/* --- BLOG (gate 6 P2): 'The Lab' H1 stays 40px at phone widths
 * (.pp-section-header h1 has no mobile step). One size down per the
 * type-scale; cards already clamp their own titles. */
@media (max-width: 768px) {
    body.page-template-template-blog .pp-section-header h1 {
        font-size: 28px;
    }
}

/* --- POST (gate 3 P1): slick carousel dots are 10x10. Invisible extender +
 * a touch more spacing between dots so the hit zones bias to their own dot. */
@media (pointer: coarse) {
    .slick-dots li {
        margin: 0 8px;
    }
    /* Extender lives on the button (the actual click target); slick draws
     * the dot glyph with button::before, so ::after is free. */
    .slick-dots li button {
        position: relative;
    }
    .slick-dots li button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 44px;
    }
}

/* Gate 3: account tab links measured 34px tall; login mode toggle 37px;
 * dashboard quick links 16-22px. Real 44px boxes on touch devices, invisible
 * extender on the small in-content links so layout doesn't move. */
@media (pointer: coarse) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        display: inline-flex !important;
        align-items: center;
        min-height: 44px;
    }
    .pp-login-auth__mode-btn {
        min-height: 44px;
    }
    .woocommerce-MyAccount-content a {
        position: relative;
    }
    .woocommerce-MyAccount-content a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        min-width: 44px;
        height: 44px;
    }
}