/* ============================================================================
   GENSCRIPT PEPTIDES IDENTITY — generated by site-factory/generate-identity.js
   pack: humanist · surface: light · primary: #00468C
   Loaded LAST: this file owns the visual identity. It re-themes every page by
   overriding the base design tokens from global.css, then restyles the shared
   shop components (header/nav, buttons, flash, trending cards, FAQ, modals,
   mobile menu, footer) and patches per-page hard-coded hexes.
   Regenerate with: node site-factory/generate-identity.js <config.json>
   ============================================================================ */

:root {
    /* --- Primary ramp --- */
    --primary: #00468c;
    --primary-dark: #003263;
    --primary-darker: #001d3a;
    --primary-light: #0065c9;
    --primary-lighter: #4193e4;
    --primary-50: #f0f5f9;
    --primary-100: #dee8f2;

    /* --- Semantic --- */
    --secondary-green: #3f7d54;
    --success-green: #3f7d54;
    --warning-yellow: #b07d12;
    --error-red: #b3382c;
    --accent-navy: #111f2c; /* legacy name — dark chip / heading ink */

    /* --- Accent (erp.css naming: data highlights, sparingly) --- */
    --amber: #0d8b3f;
    --amber-dim: #074e24;

    /* --- Neutral ramp (hue-tinted from the primary) --- */
    --white: #fbfcfe;
    --paper: #edf2f7;
    --porcelain: #f8fafc;
    --gray-50: #eef2f7;
    --gray-100: #e0e8f0;
    --gray-200: #cdd9e5;
    --gray-300: #a9bdd1;
    --gray-400: #6c8cac;
    --gray-500: #48637f;
    --gray-600: #354a5f;
    --gray-700: #273645;
    --gray-800: #1a242e;
    --gray-900: #121a21;
    --ink: #121a21;

    /* --- Borders / surfaces --- */
    --border-subtle: rgba(18, 26, 33, 0.09);
    --border-default: rgba(18, 26, 33, 0.16);
    --hairline: 1px solid rgba(18, 26, 33, 0.12);
    --surface-elevated: #f8fafc;
    --surface-sunken: #e3ebf2;
    --grid-line: rgba(0, 29, 58, 0.045);

    /* --- Type: humanist pack --- */
    --font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', 'Songti SC', Georgia, serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    /* --- Radius character: humanist --- */
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* --- Shadows (primary-tinted ink shadows) --- */
    --shadow-sm: 0 1px 2px rgba(0, 29, 58, 0.06);
    --shadow-md: 0 1px 2px rgba(0, 29, 58, 0.05), 0 6px 16px -8px rgba(0, 29, 58, 0.14);
    --shadow-lg: 0 2px 4px rgba(0, 29, 58, 0.05), 0 14px 30px -12px rgba(0, 29, 58, 0.2);
    --shadow-xl: 0 4px 10px rgba(0, 29, 58, 0.06), 0 26px 52px -18px rgba(0, 29, 58, 0.26);
    --shadow-jade: 0 8px 20px -8px rgba(0, 70, 140, 0.36);
}

/* === BASE ================================================================ */
html { background: var(--paper); }
body {
    font-family: var(--font-family);
    background: var(--paper);
    color: var(--gray-700);
}
h1, h2, h3, h4, .section-heading, .section-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
a { color: var(--primary); }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cn-accent { font-family: 'Noto Serif SC', var(--font-display); }

/* === TOPLINE (flash banner) ============================================== */
.site-flash {
    background: var(--ink);
    color: var(--primary-lighter);
    border-bottom: 2px solid var(--primary);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: center;
}
.site-flash strong { font-weight: 700; color: #fff; }

/* === HEADER / NAV ======================================================== */
.header {
    background: rgba(237, 242, 247, 0.92);
    backdrop-filter: blur(11px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
}
.header .logo-text, .logo-text {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.header .logo-text small, .logo-text small {
    color: var(--gray-500);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nav-link {
    font-family: var(--font-family);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    color: var(--gray-600);
    border-radius: var(--radius-sm);
    border-bottom: none;
    padding: 7px 11px;
    white-space: nowrap;
}
.nav-link:hover { color: var(--primary-darker); background: var(--primary-50); }
.nav-link.active {
    color: var(--primary-darker);
    background: var(--primary-50);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.nav-link-secondary { color: var(--primary); }
.nav-link-secondary:hover { color: var(--primary-darker); }

.header .warehouse-btn, .warehouse-btn {
    background: var(--white);
    border: 1px solid var(--border-default);
    color: var(--gray-700);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    border-radius: var(--radius-sm);
}
.header .warehouse-btn:hover, .warehouse-btn:hover { border-color: var(--primary); color: var(--primary-darker); }
.header .cart-btn, .cart-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: var(--shadow-jade);
}
.header .cart-btn:hover, .cart-btn:hover { background: var(--primary-dark); transform: none; }
.cart-count { background: var(--ink); color: #fff; font-family: var(--font-mono); font-weight: 700; }
.hamburger-line { background: var(--ink); }

/* Verified-On dropdown — panel on the identity surface */
.vo-dd-menu { background: var(--porcelain) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--radius-md) !important; }
.vo-dd-menu a { color: var(--gray-700) !important; }
.vo-dd-menu a:hover { background: var(--primary-50) !important; color: var(--primary-darker) !important; }
.vo-dd-menu i { color: var(--primary) !important; }

/* === BUTTONS ============================================================= */
.btn, .checkout-btn {
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    border-radius: var(--radius-sm);
}
.btn-primary, .checkout-btn {
    background: var(--primary);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-jade);
}
.btn-primary:hover, .checkout-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-secondary {
    background: var(--white);
    border: 1px solid var(--border-default);
    color: var(--gray-700);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary-darker); background: var(--white); }

/* === TRENDING CARDS (#trendingGrid children — style only) ================ */
.trending-card {
    background: var(--porcelain);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.trending-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.trending-card-image { background: #fff; border-radius: var(--radius-sm); }
.trending-category {
    font-family: var(--font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: var(--primary-50);
    color: var(--primary-darker);
    border: none;
    border-radius: var(--radius-sm);
}
.trending-badge { border-radius: var(--radius-sm); font-family: var(--font-mono); letter-spacing: 0.04em; }
.trending-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.trending-spec { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-400); }
.trending-price-value { font-family: var(--font-mono); font-weight: 700; color: var(--primary-darker); }
.trending-bulk { font-family: var(--font-mono); color: var(--gray-500); }
.trending-cta { font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary); }

/* === FAQ — two-column grid (classes consumed by JS: style only) ========== */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; border-top: none; }
.faq-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--porcelain);
    box-shadow: none;
    margin-bottom: 0;
}
.faq-item.open { border-color: var(--primary); }
.faq-question {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--ink);
    background: transparent;
}
.faq-question i { color: var(--primary); font-size: 0.7em; }
.faq-answer p { font-size: 0.87rem; line-height: 1.62; color: var(--gray-600); }
.faq-answer a, .faq-answer a[style] { color: var(--primary) !important; }

/* === MODALS / TOAST / INPUTS (#cartModal, #checkoutModal — style only) === */
.modal { background: rgba(18, 26, 33, 0.55); }
.modal-content {
    background: var(--porcelain);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    border-top: 3px solid var(--primary);
    box-shadow: var(--shadow-xl);
    color: var(--gray-700);
}
.modal-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.modal-close { color: var(--gray-500); }
.notification-toast {
    background: var(--porcelain);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--primary);
    box-shadow: var(--shadow-xl);
    color: var(--gray-700);
}
.step-number { font-family: var(--font-mono); border-radius: var(--radius-sm); }
input, textarea, select {
    background: var(--white);
    color: var(--gray-800);
    border-color: var(--gray-300);
    border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

/* === MOBILE MENU / BOTTOM NAV (#mobileMenu — style only) ================= */
.mobile-menu { background: var(--porcelain); color: var(--gray-700); }
.mobile-menu-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--gray-500); }
.mobile-nav-link { color: var(--gray-700); border-radius: var(--radius-sm); }
.mobile-nav-link.active { background: var(--primary-50); color: var(--primary-darker); }
.mobile-nav-link i { color: var(--primary); }
.mobile-menu-footer a { color: var(--gray-600); }
.mobile-bottom-nav { background: rgba(237, 242, 247, 0.97) !important; border-top: 1px solid var(--border-default) !important; backdrop-filter: blur(10px); }
.bottom-nav-item { color: var(--gray-500); font-family: var(--font-mono); font-size: 0.6rem; }
.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item.active i { color: var(--primary); }
.bottom-nav-badge { background: var(--primary); color: #fff; font-family: var(--font-mono); }

/* === FOOTER ============================================================== */
.footer {
    background: var(--ink);
    color: var(--gray-300);
    border-top: 3px solid var(--primary);
}
.footer-logo { font-family: var(--font-display); font-weight: 800; color: #fff; }
.footer-logo small { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-400);
    border-bottom: none;
}
.footer-col a, .footer-col p { color: var(--gray-300); }
.footer-col a:hover { color: var(--primary-light); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom p { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--gray-400); }
.footer-social a { color: var(--gray-300); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); }
.footer-social a:hover { color: var(--primary-light); border-color: var(--primary); }

/* === PAGE-CSS PATCHES ====================================================
   Per-page stylesheets hardcode a few of the template's jade-green (and
   light-surface) hexes. Repaint them from the identity tokens so no page
   leaks the template palette. */
.section-alt { background: var(--surface-sunken); }
.products-hero, .page-hero { background: var(--surface-sunken); }
.page-hero::before { background-image: none; }
.trustpilot-banner { background: var(--ink); }
.trustpilot-banner:hover { background: #0d1217; }

/* products page header — retint title + glow */
.products-page-header {
    background:
        radial-gradient(ellipse 60% 130% at 85% -20%, rgba(0, 70, 140, 0.07), transparent 60%),
        linear-gradient(180deg, var(--porcelain) 0%, var(--paper) 100%) !important;
}
.products-page-title { color: var(--ink) !important; font-weight: 700; }

/* product / products / pay page hard-coded buttons and chips */
.view-product-btn { background: var(--primary) !important; color: #fff !important; }
.view-product-btn:hover { background: var(--primary-dark) !important; box-shadow: var(--shadow-jade) !important; }
.janoshik-link, .cat-coa-btn {
    background: var(--primary-50) !important;
    color: var(--primary-darker) !important;
    border-color: var(--primary-100) !important;
}
.janoshik-link:hover, .cat-coa-btn:hover {
    background: var(--primary-100) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-darker) !important;
}
.badge-popular { background: var(--primary-50); color: var(--primary-darker); }
.badge-tested { background: var(--primary-50); color: var(--primary-darker); }
.view-test-report-btn { background: var(--primary-50); color: var(--primary-darker); }
.view-test-report-btn:hover { background: var(--primary-100); }

/* ---- contrast floor (WCAG AA for body text) --------------------------------
   contrast-audit.js reports the same ~14 unreadable elements on EVERY shop,
   because the causes are template-wide rather than per-shop:
     * the per-page stylesheets hardcode #98a09a (8 uses) and #9ca3af as LABEL
       colours — 2.3:1 to 2.7:1 on the light panels they sit on;
     * --gray-400 is light by design (it is also a border/icon colour) but a
       number of template rules use it for TEXT, landing around 3.1:1.
   Both are under the 4.5:1 AA floor. The tokens are left alone so borders and
   icons keep their intended lightness; only the TEXT roles are lifted to
   --gray-600. Repainting the hardcoded hexes here rather than in the cloned CSS
   keeps the per-page files byte-identical to the template for propagation.
   NOT in this list, though they use the same hexes: .about-trust-label and
   .about-mfg-video-label. Both sit on DARK grounds (the trust-bar gradient
   and a photo scrim), where the light hex is already correct -- lifting them
   to --gray-600 produces 1.48:1 dark-on-dark. Check the GROUND, not the hex.
   NOTE the #98a09a background use (one rule) is deliberately NOT touched — a
   blanket hex swap would darken a panel, not a label. */
.pd-detail-label, .pd-section-subtitle, .pd-price-label, .pd-specification,
.pd-breadcrumb-link, .pd-shipping-note, .pd-delivery-note,
.products-page-subtitle,
.pl-mobile-card-spec, .company-cat-tag, .pl-wh-chip,
.trust-stat-label, .deal-tier-label {
    color: var(--gray-600);
}

/* Step badges: the NUMBER sits inside a filled circle when active, so it needs
   white there; the LABEL beneath it always sits on the page ground and must
   stay dark. An ancestor-match rule on .step-text was tried and turned the
   label white-on-white (1.04:1) because the match was far too broad. */
.step-number, .step-text { color: var(--gray-600); }
.step-number[class*="active"], .step-number[class*="done"] { color: #fff; }

/* The footer's independent-listings heading ran at opacity .65 over the ink
   ground — legible but marginal against the rows beneath it. */
.vfd-verified h4 { opacity: .85; }

/* ---- more contrast floor: --gray-400 used as TEXT --------------------------
   The ramp's gray-400 is intentionally light (it is also a border and icon
   colour) but a number of template rules use it for copy, landing at 2.9-3.5:1.
   Listing the text roles explicitly rather than darkening the token keeps
   borders and icons at their intended weight. */
.trending-spec, .timer-sep, .vl-prefix, .cn-accent,
.pd-shipping-row div, .pd-shipping-note {
    color: var(--gray-600);
}

/* The FOOTER is always the ink ground, whatever the page surface is, so its
   copy must go LIGHTER not darker. Grouping it with the light-background labels
   above set it to --gray-600 and produced 1.92:1 dark-on-dark. */
.footer-col p, .footer-bottom p, .footer-copyright, .footer p {
    color: var(--gray-300);
}

/* White-on-brand chips: the stock greens/blues are too light behind white text
   (WhatsApp 1.98:1, Telegram 3.89:1, the Trustpilot CTA 2.63:1 on white). Deepen
   the ground rather than greying the text, so the brand colour survives. */
.tp-banner-btn { color: #00694a; }
/* Two traps here, both learned the hard way:
   1. a bare [style*="#0088cc"] also matches border-color: #0088cc, which is how
      the contact cards are outlined -- it repainted the whole white card dark
      blue and took four readable elements down with it. Anchor every match to
      the BACKGROUND declaration;
   2. attribute substring matching is case-SENSITIVE, and the templates write
      #25D366 in caps. Without the i flag the rule silently never fires. */
[style*="background:#25D366" i],
[style*="background: #25D366" i],
[style*="(135deg,#25D366" i],
[style*="(135deg, #25D366" i],
.wa-chip, .msgr-fab-wa,
.about-team-btn-wa:hover, .contact-team-btn-wa:hover {
    background: #0f7a37 !important;
}
[style*="background:#0088cc" i],
[style*="background: #0088cc" i],
[style*="(135deg,#0088cc" i],
[style*="(135deg, #0088cc" i],
.tg-chip {
    background: #0069a3 !important;
}

/* Review avatars: the palette is a fixed set of 21 Material 300-500 swatches
   written inline in reviews.ejs, and white initials ran 1.9:1 to 2.7:1 on them.
   Flipping the ink to black was tried and fails the other way -- three of the
   swatches are mid-luminance, where NEITHER black nor white reaches 4.5:1. The
   palette itself was deepened in the template instead (each colour scaled
   toward black until white clears 4.75:1, which keeps the hue and the variety);
   this rule only pins the ink so a stale inline colour cannot undo it. */
.review-avatar, .rv-avatar, .review-author-avatar { color: #fff !important; }

/* --gray-500 used as TEXT in the review chrome: 3.1:1 to 3.4:1. Same treatment
   as the --gray-400 list above -- lift the text roles, leave the token alone. */
.review-author-meta, .review-posted-date, .company-response-date,
.review-action-btn, .review-location, .review-count {
    color: var(--gray-600);
}

/* Trustpilot's own green is a 2.57:1 label on white. Deepen it for the text
   role only -- the star glyphs keep the brand colour. */
.trust-score-label, .tp-score-label { color: #007a52 !important; }

/* .sale-bar is a DARK red ribbon. The contrast floor above lifts .cn-accent,
   .timer-sep and .timer-unit to --gray-600 because on every other page they sit
   on a light ground -- inside the ribbon that same lift reads 1.02:1. Restate
   them light here. Third time this trap has fired: the floor is keyed on the
   HEX a rule uses, but readability is keyed on the GROUND it lands on. */
.sale-bar .cn-accent, .sale-bar .timer-sep, .sale-bar .timer-unit,
.sale-bar .sale-bar-text, .sale-bar small {
    color: rgba(255, 255, 255, .88) !important;
}
.sale-bar .timer-num { color: #fff !important; }

/* The savings figure shipped at 4.37:1 -- close enough to look deliberate and
   still under the floor. Deepen the green rather than neutralising it. */
.price-save { color: #2e6b45; }

/* A middot between raw-material specs, and the per-vendor report counts: both
   decorative-looking but both real text. */
.pl-raw-sep { color: var(--gray-600); }
.rpc-vcount { color: var(--gray-600) !important; }

/* .rpc-vname paints itself in the vendor's own brand colour, several of which
   (PeptideMeter orange at 3.63:1) are too light for 11.8px text on white. The
   .rpc-vdot beside it already carries the colour, so the NAME can go to ink
   without the row losing its vendor cue. Set from a view-level style block, so
   this needs the weight. */
.rpc-vname { color: var(--gray-900) !important; }

/* About page contact rows. The .about-team-contact CLASS paints a light card
   and its strong/span inherit dark ink -- but about.ejs overrides the ground
   inline with a dark brand colour on the Telegram and Email rows and never
   restates the text colour, leaving 1.28:1 and 2.53:1 on every shop in the
   fleet. Any inline background on that row is one of the dark variants (the
   light one comes from the class), so keying off the attribute is safe. */
.about-team-contact[style*="background:"] strong,
.about-team-contact[style*="background:"] span,
.about-team-contact[style*="background:"] > i {
    color: #fff;
}

/* The gold "Fastest" badge shipped at 3.24:1. The gold is the brand signal, so
   deepen the ink on it rather than repainting the pill. */
.about-team-badge-fastest, .contact-team-badge-fastest { color: #3a2600; }

/* A caption sitting on a photograph cannot rely on the photo being dark. Give
   the label its own scrim — measured 1.83:1 white-on-grey without one. */
.lab-video-label, .about-mfg-video-label {
    /* A gradient scrim leaves the caption's contrast hostage to whatever the
       photograph does underneath it -- measured 4.35:1 on one still and 2.35:1
       on another. A solid band is the only version that holds for every image. */
    background: rgba(6, 10, 14, .9);
    backdrop-filter: blur(2px);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ---- mobile: legible type + 44px touch targets ----------------------------
   Audited on a real 390x844 device profile. The shared chrome ran as small as
   9.3px (the trust bar) and several controls were under 30px tall, which is
   below every platform's minimum touch target. */
@media (max-width: 767px) {
    .trust-bar, .trust-bar-inner, .trust-bar-item,
    .site-flash, .site-flash strong, .company-cat-tag, .pl-wh-chip,
    .bottom-nav-item, .footer-copyright, .footer-bottom p, small,
    .lab-video-label, .about-mfg-video-label, .reports-video-label,
    .contact-video-label, .trust-stat-label, .about-trust-label,
    .pl-mobile-card-spec, .pen-upgrade-price, .contact-card-badge {
        font-size: .72rem !important;   /* 11.5px at a 16px root */
        line-height: 1.5;
    }

    /* the trust bar becomes one scrollable line instead of wrapping to three */
    .trust-bar-inner {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        gap: calc(var(--u, 4px) * 4); scrollbar-width: none;
    }
    .trust-bar-inner::-webkit-scrollbar { display: none; }
    .trust-bar-item { flex: none; white-space: nowrap; padding-block: 12px; min-height: 44px; }

    .warehouse-btn, .mobile-menu-close, .tp-banner-btn, .tp-filter-btn,
    .pl-filter-btn, .pl-cart-bar-btn, .review-action-btn, .janoshik-link,
    .filter-btn, .category-btn, .bottom-nav-item,
    .about-team-btn, .contact-team-btn, .reports-tab, .rpc-toggle,
    .rpc-chip, .rpc-viewall, .pen-learn-more, .mobile-menu-footer a {
        /* several of these are styled from a page-level style block, which sits
           after this sheet and wins the cascade at equal specificity -- hence
           the important on the one property that has to hold. */
        min-height: 44px !important;
        display: inline-flex; align-items: center; justify-content: center;
    }

    .warehouse-btn { min-width: 56px; }
    .mobile-menu-close, .pl-filter-btn { min-width: 44px; }

    /* iOS zooms the whole page for any input under 16px */
    .search-input, input[type="text"], input[type="email"], input[type="search"] {
        min-height: 46px; font-size: 16px;
    }

    /* wide content scrolls inside its own box, never the page */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* === SKIP LINK =========================================================== */
.skip-link { background: var(--primary-darker); }
.skip-link:focus { background: var(--primary); color: #fff; }

/* === MOTION DISCIPLINE =================================================== */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* === RESPONSIVE ========================================================== */
@media (max-width: 960px) {
    .faq-list { grid-template-columns: 1fr; }
}