/* ====================================================================== sf-final-mobile.css — THE MOBILE LANE, core-chain-labs final pass. WHY !important IS ALL OVER THIS FILE, and why that is not laziness. Lane sheets are linked in FILENAME order (final/lib.mjs linkCss), so this sheet — 02 — loses an equal-specificity fight to 03-legal, 05-admin, 06-wiring, 07-security and 08-imagery, every one of which loads after it. Nothing here is a preference; every declaration is a measured floor (44px touch target, 16px input, no decorative pixel under type) that must survive a later lane that has no idea it exists. Rules that are only ever set once, in one place, are left plain. EVERY NUMBER IN THIS FILE WAS MEASURED with puppeteer at 360x740, 375x812, 390x844, 414x896 and 768x1024 against the built site. The before/after figures are in the lane's report; the ones that explain a decision are quoted in the comment beside it. THE BREAKPOINTS: <= 860px the phone-and-small-tablet contract: touch targets, type floors, the hero vial layer. 860 is the width sf-refresh.css already uses for the hero's mobile switch, so both sheets change composition at the same pixel. <= 620px PHONES ONLY: the tightened hero stack. A 768 tablet has room to spare and must not be shrunk to pay for a phone's problem. ====================================================================== */ /* ══════════════════════════════════════════════════════════════════════ 1. THE HERO VIALS ON A PHONE — GONE, OWNER 2026-08-23. "remove the peptides at bottom of screen on hero." The plates are off the hero at every width now (final/12-hero.mjs ships the CC:HERO_PLATES region empty), so this section's guards — the absolute layer, the img reset, and the prefers-contrast / forced-colors / print arms — matched nothing and came out with them. The phone-placement history they were written against is in git at 2026-08-20; section 1c below is kept because its floors were measured against a hero that no longer has plates OR a shelf, and they still hold with more room than when they were taken. ══════════════════════════════════════════════════════════════════════ */ /* 1c. THE TIGHTENED PHONE HERO. Written to buy the (now deleted) shelf its height; kept because every floor in it was measured and still holds — the hero ends inside the first screen at all four phone widths with room to spare now that the shelf is gone. MEASURED at 375x812 before this block: title 176.9 (4 lines) + cta 116.5 + sub 177 (6 lines) + badge 40.1 + stats 67.3 + four margins totalling 109.7 = 687.5px of copy inside a 758px hero. There was no room for a 94px shelf, so it comes out of leading and padding, never out of a word: no copy is cut, no font drops below the 16px phone floor (the subline stays at 1rem), and the headline stays the largest thing on the screen. */ @media (max-width: 620px) { body .sf-hero { padding-block: clamp(0.75rem, 2.2vh, 1.4rem) !important; } body .sf-hero .sf-hero-title { /* was clamp(2.5rem, 6.4vw, 5.25rem) -> 42.5px/4 lines at 375. This is the 2.5rem FLOOR doing the damage: 6.4vw is only 24px at that width, so every phone from 320 to 620 got the same 40px headline. */ font-size: calc(clamp(2rem, 8.6vw, 2.6rem) * var(--sf-display-scale, 1)) !important; line-height: 1.08 !important; } body .sf-hero .sf-hero-cta { margin-top: clamp(0.95rem, 2.4vh, 1.5rem) !important; } body .sf-hero .sf-hero-sub { margin-top: clamp(0.85rem, 2vh, 1.3rem) !important; font-size: 1rem !important; /* 16px — the phone floor, not below it */ line-height: 1.56 !important; /* was 1.7 */ } body .sf-hero .cc-usa-badge { margin-top: 0.9rem !important; } body .sf-hero .sf-trust-row, body .sf-hero .sf-hero-stats { margin-top: 0.9rem !important; } } /* 1d. THE SHORT PHONE. Height, not width, is what decides whether the hero lands above the fold, and the two do not track: a 360x740 Android has 54px less room than a 375x812 iPhone on a NARROWER column, which is the one combination where §1c was not enough — MEASURED 713.8px of hero against 686px of room, 27.8px over, with the vials' feet 11px under the fold. Everything here is the same set of dials turned one notch further. */ @media (max-width: 620px) and (max-height: 780px) { body .sf-hero { padding-block: 0.6rem !important; } body .sf-hero .sf-hero-sub { line-height: 1.5 !important; } body .sf-hero .cc-usa-badge, body .sf-hero .sf-trust-row, body .sf-hero .sf-hero-stats { margin-top: 0.7rem !important; } } /* ══════════════════════════════════════════════════════════════════════ 2. TOUCH TARGETS — the 44x44 floor, and 8px between neighbours. Every size below replaces a MEASURED one that was under it. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { /* -- the bar. 34x34 burger, 38x38 cart/account, 6.8px between them. */ #site-nav #snav-mob-left-btn { width: 44px !important; height: 44px !important; margin-left: -10px; /* keep the optical left edge where it was */ } #site-nav .snav-icon-btn { width: 44px !important; height: 44px !important; } #site-nav .snav-right { gap: 0.6rem !important; } /* 6.4px -> 9.6px */ #site-nav .snav-logo { min-height: 44px; } /* -- the drawer. 100vh is the wrong unit on a phone: with the URL bar showing it is TALLER than the visible viewport, which pushes the drawer's own footer buttons off the bottom of the screen. */ #snav-mobile-menu { height: 100dvh !important; } .snav-mob-close { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center !important; } .snav-mobile-link { min-height: 48px !important; } .snav-mob-btn { min-height: 44px !important; } .snav-mob-logo { min-height: 44px; } /* -- the footer. Nine stacked links at 25.7px tall with a 23px gap between them: the tap target grows INTO the gap it already had, so the footer's overall height barely moves. */ body .sf-ftr-stack { gap: 0.62rem !important; } /* 9.9px between 44px rows */ body .sf-ftr-link, body .sf-ftr-ct-strong, body .sf-ftr-cta, body .sf-ftr-notice-link { min-height: 44px !important; display: inline-flex !important; align-items: center; } body .sf-ftr-bottom-links { gap: 0.62rem 1.5rem !important; } /* -- the standing "→" links that are not buttons and were never sized as targets: 22.8px (View all), 24.1px (the research-notice pair), 24.6px (the two research-intro links), 21.3px (the PDP breadcrumb). */ .strip-all, .ri-link, .ri-notice-links a, .faq-contact, .legal-back, .gate-switch a, .pg-btn, .btn.btn-glass, .sf-breadcrumb a, nav[aria-label="Breadcrumb"] a { min-height: 44px !important; display: inline-flex !important; align-items: center; } .ri-notice-links { display: flex; flex-direction: column; gap: 8px; } /* -- legal pages. `Back to Home` measured 23.4px tall. */ .legal-back { min-height: 44px !important; align-items: center; } /* The on-this-page list: 19 links at 25.7px with a 5.9px gap on terms.html. Two columns is the fix that helps twice — it clears the 44px floor AND makes the list SHORTER than it was (10 rows of 52px = 520px, against 19 rows of 31.3px = 595px), so the legal text starts higher up the page. */ .legal-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 12px !important; } .legal-toc-list a { min-height: 44px !important; display: flex !important; align-items: center; padding: 2px 0 !important; } /* -- product page. Quantity stepper was 38x38; the volume cards sat 6px apart. The tab row is a segmented control and is deliberately left butted (both halves clear 44px, which is the case WCAG 2.5.8 exempts). */ #qty-minus, #qty-plus, .qty-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; } .vol-tiers { gap: 8px !important; } .tab-btn { min-height: 44px !important; } /* -- products grid. 2-up tiles: a 10px "Add to cart" in a 38px pill. MEASURED at 375: tile 165px wide, action row 145px of usable width, so 44 (cart) + 6 (gap) leaves 95px and the label needs ~80px at 12px. */ #product-grid .tile-btn { font-size: 12px !important; min-height: 44px !important; } #product-grid .tile-btn-atc { flex: 0 0 44px !important; width: 44px !important; } #product-grid .tile-btn-atc svg { width: 20px !important; height: 20px !important; } #product-grid .sf-card-title { font-size: 13.5px !important; } /* -- account, order-success, COA library, gate */ #acct-sidebar .sidebar-link, button.sidebar-link { min-height: 44px !important; } .copy-btn { min-height: 44px !important; } .coa-clear { min-height: 44px !important; } .gate-back-mobile { min-height: 44px !important; display: inline-flex !important; align-items: center; } #toolbar button { min-height: 44px !important; } /* -- checkout. The Apply pair measured 43.4px; the radios 16x16 and the gate's compliance boxes 17x17. A native box is the target here — the label wraps it, but a thumb aims at the box. */ #co-cols button, #coupon-input, #affiliate-code-input { min-height: 44px !important; } input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; } label.compliance-check, label[id^="ship-"] { min-height: 44px !important; } } /* ══════════════════════════════════════════════════════════════════════ 3. INPUTS — 16px or iOS zooms the page on focus, plus the keyboard hints. The attribute half of this (type / inputmode / autocomplete) is done in the markup by 02-mobile.mjs; only the size half can be done in CSS. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em) !important; } /* the three that measured under it: 15px catalogue search, 13.6px coupon and affiliate boxes, 14px drawer search */ #product-search, #coupon-input, #affiliate-code-input, #snav-mob-q { font-size: 16px !important; } } /* ══════════════════════════════════════════════════════════════════════ 4. READABLE TYPE ON A PHONE. THE POLICY, and it is deliberately not "everything to 16px": prose and instructions read at >= 15px, labels / list items / table cells / control text at >= 14px, and a micro-label or badge never goes below 13px. Each selector below replaces a measured size, quoted in the comment. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { /* -- footer, every page: 12.2 / 12.9 / 14 */ body .sf-ftr-ct-note { font-size: 0.845rem !important; } /* 12.2 -> 13.5 */ body .sf-ftr-warn { font-size: 0.845rem !important; } /* 12.9 -> 13.5 */ body .sf-ftr-ruo { font-size: 0.905rem !important; } /* 14.0 -> 14.5 */ /* -- order-success: the manual-payment instructions are the most consequential copy on the site and they were the smallest, at 11.1px. */ body #payment-card p, body .fade-up-2 p, body .next-step p, body #next-subtitle, body #manual-payment-note, body #manual-payment-deadline { font-size: 15px !important; line-height: 1.55 !important; } body #status-eyebrow { font-size: 13px !important; } /* 11.1 */ body .success-right span, body #payment-card span { font-size: 13.5px !important; } /* -- form labels: 11.6 (gate) / 12.2 (checkout) / 12.8 (track) / 13.3 */ body .field-label, body .sf-label, body #lookup-section label, body #forgot-form label, body #reset-form label, body #login-form label, body .gate-field label { font-size: 14.5px !important; } /* -- standards */ .pg-pill { font-size: 14px !important; } /* 13.3 */ .pg-btn { font-size: 15px !important; } /* 13.6 */ .pg-chip-k { font-size: 12.5px !important; } /* 10.9 */ .pg-chip-v { font-size: 14px !important; } /* 13.6 */ /* -- coa library */ .coa-pending-badge { font-size: 13px !important; } /* 11.2 */ .coa-clear { font-size: 15px !important; } /* 13.6 */ /* -- contact */ .form-ruo { font-size: 14px !important; } /* 12.2 */ /* -- product detail */ .stock-note { font-size: 14px !important; } /* 12.8 */ #product-badges { font-size: 14px !important; } /* 13.6 */ .sf-spec-table td, .sf-spec-table th { font-size: 14px !important; } /* 13.6 */ #vol-pricing > div > span { font-size: 13px !important; } /* 11.1 */ .vol-card-label { font-size: 12.5px !important; } /* 10.9 */ .research-warn p { font-size: 14.5px !important; } /* 13.3 */ /* -- home */ .cc-usa-badge span { font-size: 14px !important; } /* 13.3 */ .ri-notice-head span { font-size: 13px !important; } /* 11.6 */ .ri-notice-links a { font-size: 14px !important; } /* 12.9 */ .hero-tile-name { font-size: 14px !important; } /* 13.6 */ /* -- gate / register surface */ .gate-mobile-header p { font-size: 14.5px !important; } /* 13.3 */ .gate-back-mobile { font-size: 14px !important; } /* 12.2 */ .gate-promo-badge { font-size: 13px !important; } /* 12.2 */ .compliance-check-text { font-size: 14.5px !important; } /* 13.4 */ .gate-switch { font-size: 14px !important; } /* 12.9 */ /* -- checkout */ #ship-standard div, #ship-express div { font-size: 14px !important; } /* 12.8 */ #co-summary .co-fine, #co-summary small { font-size: 13px !important; } } /* ══════════════════════════════════════════════════════════════════════ 5. WIDE BLOCKS SCROLL INSIDE THEMSELVES. Nothing measured wider than the viewport today (document.scrollWidth is exactly the viewport on all 24 pages at all five widths), but the order and spec tables are the surfaces that WILL push the page the moment a longer SKU name or a second carrier lands in them, and a table that grows must take its scrollbar with it rather than the document. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .sf-spec-table, .invoice-table, .orders-table, #orders-list table, .letter table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sf-spec-table > tbody, .invoice-table > tbody { display: table; width: 100%; } .sf-spec-table > thead, .invoice-table > thead { display: table; width: 100%; } pre, code { overflow-x: auto; max-width: 100%; } /* a long unbroken order number or email must wrap, not widen the page */ .sf-ftr-ct-strong, .order-number, #toolbar-order { overflow-wrap: anywhere; } } /* ══════════════════════════════════════════════════════════════════════ 6. IMAGES — no layout shift, no 1200px asset in a 130px slot. The srcset/sizes/width/height half is markup and lives in 02-mobile.mjs; this is the CSS half: the intrinsic ratio the attributes now declare must not be allowed to change the box the design already sized. ══════════════════════════════════════════════════════════════════════ */ /* The logo now carries width/height attributes, which give it an intrinsic ratio the browser can reserve space from. Height is set by the chrome and must keep winning; width stays auto so the ratio drives it. Deliberately NOT touching object-fit anywhere: .hero-tile-img img is `cover` and .sf-card-media img is `var(--sf-thumb-fit, contain)` by design, and an attribute-driven ratio changes neither. */ #site-nav .snav-logo img, .snav-mob-logo img { width: auto; }