/* ============================================================================
   QYAOBIO IDENTITY  —  qyaobiopeptides.com
   "Clean room" : white + pale-cyan, airy, scientific.

   Loaded LAST in views/partials/header.ejs, so this file OWNS the visual
   identity. It re-themes every page (home, products, product, cart/checkout,
   pay, pricelist, reviews, wholesale, about, contact, reports) by overriding
   the base design tokens from global.css, then reskins the shared components,
   then repaints the hexes the page stylesheets hard-coded.

   Brand (from the real qyaobio.com + the logo artwork):
     double-helix emblem, CYAN + VIOLET strands, dark-indigo nodes, navy wordmark.
     Signature moves — pale-cyan tinted section bands; WHITE rounded cards
     floating on soft shadows; TEAL pill buttons; heavy navy display headings;
     a cyan -> violet gradient hairline that echoes the helix; lots of air.

   Colour roles (keep these straight — the palette only works if they are):
     TEAL   = action.     buttons, links, active states, focus.
     VIOLET = value.      savings / discount / "new" badges, helix gradients.
     NAVY   = structure.  headings, footer, dark surfaces, prices.
     GREEN  = success.    in-stock, verified, delivered. Nothing else.

   CONTRAST NOTE (measured, not guessed)
     The brand teal #2CB1BC is beautiful and completely unusable for text:
     white-on-#2CB1BC is 2.59:1 and #2CB1BC-on-white is 2.41:1 — both fail AA
     badly, and the page stylesheets do `background: var(--primary); color:#fff`
     in ~20 places. So --primary stays the brand teal for DECORATION (borders,
     icon chips, rules, gradients, fills with no small text on them), and text /
     filled-CTA duty is carried by two deeper teals that are on-brand and legal:
        --primary-dark   #0E7C85   4.95:1 on white AND white-on-it 4.95:1
        --primary-darker #0B6F77   5.91:1 on white, 5.49:1 on the pale-cyan tint
     Never put #2CB1BC text on #E0FCFF (2.41:1). Use --primary-darker there.
   ============================================================================ */

:root {
    /* --- Brand primitives (the facts) ----------------------------------- */
    --teal: #2CB1BC;
    --cyan: #01D2D9;          /* logo strand — bright accent, gradients */
    --violet: #AD6DF7;        /* logo strand — SECONDARY accent, sparing */
    --violet-ink: #6D34C2;    /* AA-safe violet for text/badges (7.2:1 on white) */
    --violet-tint: #F4ECFE;
    --indigo: #2945A8;        /* helix nodes */
    --navy: #0F2A43;          /* headings, dark surfaces, footer */
    --navy-2: #133453;
    --slate: #587089;         /* body text (5.13:1 on white) */
    --slate-light: #829AB1;   /* decorative / dividers only — 2.9:1, never body */
    --tint: #E0FCFF;          /* pale-cyan band — the signature surface */

    /* The helix: a cyan -> violet hairline. Used as ::before rules, underlines,
       card top-edges. This one gradient is the whole identity in a single line. */
    --helix: linear-gradient(90deg, var(--cyan) 0%, #6FA8F0 50%, var(--violet) 100%);
    --helix-soft: linear-gradient(90deg, rgba(1,210,217,0.85), rgba(173,109,247,0.85));

    /* --- Primary ramp (fleet token names — consumed everywhere) ---------- */
    --primary: #2CB1BC;         /* brand teal — decoration, borders, icon chips */
    --primary-dark: #0E7C85;    /* AA-safe: filled CTAs + teal text            */
    --primary-darker: #0B6F77;  /* deepest: pressed states, teal text on tint  */
    --primary-light: #4FCBD5;
    --primary-lighter: #9FE6EB;
    --primary-50: #E0FCFF;      /* THE TINT — chips, row hovers, active nav    */
    --primary-100: #C3F2F6;
    /* pricelist.css reads these two and global.css never defined them, so its
       `var(--primary-700, #0f5238)` fallback was leaking WWB green. Define them. */
    --primary-600: #0E7C85;     /* was #13919B (3.79:1, off-palette) — now AA */
    --primary-700: #0B6F77;

    /* --- Semantic ------------------------------------------------------- */
    --secondary-green: #10794F;
    --success-green: #10794F;   /* in-stock / verified / delivered ONLY */
    --warning-yellow: #A76B08;
    --error-red: #C0392B;
    --accent-navy: #0F2A43;     /* legacy name — pages use it as heading ink */

    /* erp.css introduced --amber for "data highlights". QYAO has no amber;
       map it to the deep teal so any stray consumer stays in-palette. */
    --amber: #0B6F77;
    --amber-dim: #0E7C85;       /* was #13919B (3.79:1, off-palette) — now AA */

    /* --- Neutral ramp: cool, navy-tinted, LIGHT -------------------------- */
    --white: #FFFFFF;
    --paper: #F5F7FA;           /* page background */
    --porcelain: #FFFFFF;       /* card surface — cards are white and float */
    --gray-50: #F5F7FA;
    --gray-100: #EAEFF4;
    --gray-200: #D9E2EC;
    --gray-300: #BCCCDC;
    --gray-400: #62798F;        /* "muted" but still AA: 4.51:1 on white */
    --gray-500: #587089;        /* slate — body copy, 5.13:1 */
    --gray-600: #40566E;        /* 7.57:1 */
    --gray-700: #2C4257;
    --gray-800: #1B3550;
    --gray-900: #0F2A43;        /* navy */
    --ink: #0F2A43;

    /* --- Borders / surfaces --------------------------------------------- */
    --border-subtle: rgba(15, 42, 67, 0.08);
    --border-default: rgba(15, 42, 67, 0.14);
    --hairline: 1px solid rgba(15, 42, 67, 0.09);
    --surface-elevated: #FFFFFF;
    --surface-sunken: #E0FCFF;  /* .section-alt inherits this => tinted bands */
    --grid-line: rgba(44, 177, 188, 0.06);

    /* --- Type: grotesk pack (already linked in header.ejs) ---------------
       The real site has no monospace anywhere — it is all bold grotesk. So mono
       is reserved for genuinely tabular data (catalogue numbers, wallet
       addresses, order IDs); labels/eyebrows use Inter with tracking instead. */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', 'Noto Sans SC', sans-serif;
    --font-mono: 'Space Mono', 'SF Mono', Consolas, monospace;

    /* --- Radius: soft and rounded. Buttons are PILLS. -------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* --- Shadows: soft, cool, diffuse. Cards float; they never sit. ------ */
    --shadow-sm: 0 1px 2px rgba(15, 42, 67, 0.05);
    --shadow-md: 0 2px 6px rgba(15, 42, 67, 0.05), 0 10px 24px -12px rgba(15, 42, 67, 0.14);
    --shadow-lg: 0 4px 12px rgba(15, 42, 67, 0.06), 0 20px 40px -16px rgba(15, 42, 67, 0.18);
    --shadow-xl: 0 8px 20px rgba(15, 42, 67, 0.07), 0 34px 64px -22px rgba(15, 42, 67, 0.22);
    --shadow-jade: 0 8px 22px -8px rgba(44, 177, 188, 0.45);   /* teal glow */
    --shadow-violet: 0 8px 22px -8px rgba(173, 109, 247, 0.40);
}

/* === BASE ================================================================ */
html { background: var(--paper); }
body {
    font-family: var(--font-family);
    background: var(--paper);
    color: var(--gray-500);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.section-heading, .section-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
h1 { letter-spacing: -0.025em; }
p { color: var(--gray-500); }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--primary-darker); }
strong, b { color: var(--gray-700); font-weight: 600; }
::selection { background: var(--primary-100); color: var(--navy); }
:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 4px; }
hr { border: none; border-top: var(--hairline); }

.cn-accent { font-family: 'Noto Sans SC', var(--font-display); }
/* The template's red Chinese seal chip is WWB's, not ours. Retint to the
   indigo of the helix nodes so the QYB / 强 lockup stays on-brand. */
.cn-seal {
    border-color: var(--indigo);
    color: var(--indigo);
    background: rgba(41, 69, 168, 0.05);
    border-radius: 6px;
    transform: rotate(-2deg);
}
.cn-divider { background: var(--helix); opacity: 0.5; }
.mono { font-family: var(--font-mono); }

/* ============================================================================
   SIGNATURE PRIMITIVES  —  the .qy-* component vocabulary
   These are NEW classes for the rewritten homepage (Agent A2) and the
   header/footer partials (Agent A3). They are additive: nothing in the existing
   markup depends on them, and nothing here renames an existing hook.
   ========================================================================== */

/* --- .qy-helix-rule : the cyan->violet hairline that echoes the logo ------ */
.qy-helix-rule {
    display: block;
    height: 3px;
    width: 64px;
    border: 0;
    border-radius: 2px;
    background: var(--helix);
}
.qy-helix-rule.full { width: 100%; height: 2px; opacity: 0.7; }
.qy-helix-rule.center { margin-left: auto; margin-right: auto; }

/* --- .qy-eyebrow : small tracked label above a heading -------------------- */
.qy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-darker);
    margin-bottom: 14px;
}
.qy-eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--helix);
    flex-shrink: 0;
}
.qy-eyebrow.on-dark { color: var(--primary-light); }
.qy-eyebrow.plain::before { display: none; }

/* --- .qy-band : a full-bleed section band -------------------------------- */
.qy-band { padding: 84px 0; background: var(--white); }
.qy-band-tint {                       /* pale-cyan — the signature band */
    background: linear-gradient(180deg, #F0FDFF 0%, var(--tint) 55%, #EAFBFD 100%);
}
.qy-band-paper { background: var(--paper); }
.qy-band-navy {                       /* deep band: navy with a helix top-edge */
    position: relative;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color: var(--gray-300);
}
.qy-band-navy::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: var(--helix);
}
.qy-band-navy h2, .qy-band-navy h3, .qy-band-navy h4 { color: #fff; }
.qy-band-navy p { color: var(--gray-300); }

.qy-section-head { max-width: 640px; margin: 0 0 44px; }
.qy-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.qy-section-head h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 12px;
}
.qy-section-head p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--gray-500);
}

/* --- .qy-card : white, rounded, floating --------------------------------- */
.qy-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.qy-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(44, 177, 188, 0.35);
}
/* .qy-card.helix — the top edge lights up with the helix gradient on hover */
.qy-card.helix::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--helix);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.qy-card.helix:hover::before { transform: scaleX(1); }
.qy-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.qy-card p { font-size: 0.92rem; line-height: 1.65; color: var(--gray-500); }
.qy-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

/* --- .qy-icon : the teal rounded-square icon chip (straight off their site) */
.qy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(140deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 16px;
    box-shadow: var(--shadow-jade);
    flex-shrink: 0;
}
.qy-icon.violet {
    background: linear-gradient(140deg, var(--violet) 0%, var(--violet-ink) 100%);
    box-shadow: var(--shadow-violet);
}
.qy-icon.ghost {
    background: var(--tint);
    color: var(--primary-darker);
    box-shadow: none;
}

/* --- .qy-pill : THE teal pill button ------------------------------------- */
.qy-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-family);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--primary-dark);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-jade);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qy-pill:hover {
    background: var(--primary-darker);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(44, 177, 188, 0.55);
}
.qy-pill:active { transform: translateY(0); }
/* outline variant — for the secondary action next to the teal pill */
.qy-pill-ghost {
    background: transparent;
    color: var(--primary-darker);
    border-color: rgba(44, 177, 188, 0.45);
    box-shadow: none;
}
.qy-pill-ghost:hover {
    background: var(--tint);
    color: var(--primary-darker);
    border-color: var(--primary);
    box-shadow: none;
}
/* on a navy/photo surface */
.qy-pill-light {
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow-lg);
}
.qy-pill-light:hover { background: var(--tint); color: var(--navy); }
.qy-pill-sm { padding: 11px 22px; font-size: 0.85rem; }
.qy-pill-lg { padding: 17px 38px; font-size: 1rem; }

/* --- .qy-stat : a number + label ----------------------------------------- */
.qy-stat { text-align: center; }
.qy-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 8px;
}
.qy-stat-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.qy-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 28px;
}
.qy-band-navy .qy-stat-value { color: #fff; }
.qy-band-navy .qy-stat-label { color: var(--primary-light); }
/* separator between stats — a vertical helix tick */
.qy-stat + .qy-stat { position: relative; }
.qy-stat + .qy-stat::before {
    content: '';
    position: absolute; left: -14px; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 38px;
    background: linear-gradient(180deg, transparent, var(--border-default), transparent);
}

/* --- .qy-tag : small tinted chip ----------------------------------------- */
.qy-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--tint);
    color: var(--primary-darker);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.qy-tag.violet { background: var(--violet-tint); color: var(--violet-ink); }
.qy-tag.navy { background: rgba(15, 42, 67, 0.06); color: var(--navy); }

/* ============================================================================
   .qy-hero  —  white/pale-cyan hero, navy display heading, floating white cards
   Mirrors qyaobio.com: an optional photo behind a cyan wash, big bold heading,
   and a row of white cards that overlap the bottom edge of the image.
   Markup A2 can rely on:
     .qy-hero > .qy-hero-media(optional img) + .container > .qy-hero-inner
       .qy-eyebrow / h1.qy-hero-title / p.qy-hero-sub / .qy-hero-cta / .qy-hero-trust
     .qy-hero-cards > .qy-hero-card ( .qy-icon + h3 + p )
   ========================================================================== */
.qy-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 82% 0%, rgba(1, 210, 217, 0.16), transparent 62%),
        radial-gradient(ellipse 55% 50% at 8% 12%, rgba(173, 109, 247, 0.10), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F2FCFD 60%, var(--tint) 100%);
    padding: 78px 0 0;
}
/* faint helix "strand" arcs drawn in CSS — no image needed */
.qy-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background:
        conic-gradient(from 210deg, rgba(1,210,217,0.14), rgba(173,109,247,0.12), transparent 62%);
    filter: blur(28px);
    pointer-events: none;
}
.qy-hero > * { position: relative; z-index: 1; }
.qy-hero-media {
    position: absolute; inset: 0;
    z-index: 0;
}
.qy-hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
/* when a photo is present, wash it so the navy heading still reads */
.qy-hero-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255,255,255,0.95) 0%, rgba(240,253,255,0.86) 42%, rgba(1,210,217,0.18) 100%);
}
.qy-hero-inner { max-width: 760px; padding-bottom: 96px; }
.qy-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.6vw, 4.1rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--navy);
    margin-bottom: 20px;
}
.qy-hero-title .lit {
    background: linear-gradient(100deg, var(--primary-dark), var(--indigo) 55%, var(--violet-ink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.qy-hero-sub {
    font-size: 1.1rem;
    line-height: 1.72;
    color: var(--gray-500);
    max-width: 56ch;
    margin-bottom: 30px;
}
.qy-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.qy-hero-trust {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-top: 30px;
}
.qy-hero-trust span {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 500;
    color: var(--gray-600);
}
.qy-hero-trust i { color: var(--primary-dark); }

/* the floating white card row (their signature) */
.qy-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-bottom: 64px;
}
.qy-hero-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px 24px 22px;
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qy-hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.qy-hero-card .qy-icon { margin-bottom: 0; width: 46px; height: 46px; font-size: 1.1rem; }
.qy-hero-card h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 6px;
}
.qy-hero-card p { font-size: 0.88rem; line-height: 1.6; color: var(--gray-500); margin: 0; }

/* Pillar cards — the markup ships .qy-pillars/.qy-pillar (same floating-card
   row as .qy-hero-cards above, with the teal icon tile from the reference site). */
.qy-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-bottom: 64px;
}
.qy-pillar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px 24px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qy-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.qy-pillar-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: 1.1rem;
}
.qy-pillar-body { min-width: 0; }
.qy-pillar-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 6px;
}
.qy-pillar p { font-size: 0.88rem; line-height: 1.6; color: var(--gray-500); margin: 0; }

/* ============================================================================
   TOPLINE — flash banner + trust bar
   ========================================================================== */
.site-flash {
    background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 60%, var(--indigo) 100%);
    color: #EAF6FF;
    border-bottom: none;
    position: relative;
    font-family: var(--font-family);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    padding: 9px 12px;
    text-align: center;
}
.site-flash::after {                 /* helix hairline under the flash */
    content: '';
    position: absolute; inset: auto 0 0 0;
    height: 2px;
    background: var(--helix);
}
.site-flash strong { font-weight: 700; color: #fff; }
.site-flash a { color: var(--primary-light); }

.trust-bar {
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
    color: #DCFAFD;
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-bar-item i { color: var(--cyan); }

/* ============================================================================
   HEADER / NAV
   ========================================================================== */
.header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 rgba(15, 42, 67, 0.02);
}
.header .logo-img, .logo-img {
    border-radius: 8px;
    background: #fff;
}
.header .logo-text, .logo-text {
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.header .logo-text small, .logo-text small {
    color: var(--gray-400);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-link {
    font-family: var(--font-family);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gray-600);
    border-radius: var(--radius-pill);
    border-bottom: none;
    padding: 8px 14px;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}
.nav-link:hover { color: var(--primary-darker); background: var(--tint); }
.nav-link.active {
    color: var(--primary-darker);
    background: var(--tint);
    box-shadow: none;
}
.nav-link-secondary { color: var(--primary-dark); }
.nav-link-secondary:hover, .nav-link-secondary.active { color: var(--primary-darker); background: var(--tint); }

.header .warehouse-btn, .warehouse-btn {
    background: var(--white);
    border: 1px solid var(--border-default);
    color: var(--gray-700);
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
}
.header .warehouse-btn:hover, .warehouse-btn:hover {
    border-color: var(--primary);
    color: var(--primary-darker);
    background: var(--tint);
}
.header .cart-btn, .cart-btn {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--shadow-jade);
}
.header .cart-btn:hover, .cart-btn:hover {
    background: var(--primary-darker);
    transform: translateY(-1px);
}
.cart-count {
    background: var(--violet-ink);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
}
.hamburger-line { background: var(--navy); }

/* search */
.search-input {
    border-radius: var(--radius-pill);
    border-color: var(--border-default);
    background: var(--white);
    color: var(--gray-800);
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(44, 177, 188, 0.14); }
.search-icon { color: var(--gray-400); }
.search-dropdown {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.search-result-item:hover { background: var(--tint); }
.search-result-name { color: var(--navy); }
.search-result-price { color: var(--primary-darker); font-weight: 700; }

/* Verified-On dropdown */
.vo-dd-menu, .nav-dropdown .dropdown-menu {
    background: var(--white) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
}
.vo-dd-menu a { color: var(--gray-600) !important; }
.vo-dd-menu a:hover { background: var(--tint) !important; color: var(--primary-darker) !important; }
.vo-dd-menu i { color: var(--primary-dark) !important; }

/* ============================================================================
   BUTTONS
   Every filled teal button gets --primary-dark (4.95:1 with white), never the
   brand teal (2.59:1). Buttons are PILLS — that is the brand's loudest tell.
   ========================================================================== */
.btn, .checkout-btn {
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-pill);
}
.btn-primary,
.checkout-btn,
.add-to-cart-btn,
.view-product-btn,
.pd-add-to-cart,
.pd-test-report-btn,
.pl-add-btn,
.pl-mobile-add-btn,
.pl-download-btn,
.pl-cart-bar-checkout,
.hero-cta-primary,
.deal-shop-now,
.ws-login-submit,
.ws-otp-submit,
.review-modal-submit,
.pay-btn,
.pay-contact-btn,
.promo-code-row button,
.report-lightbox-verify {
    background: var(--primary-dark) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-jade);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.checkout-btn:hover,
.add-to-cart-btn:hover,
.view-product-btn:hover,
.pd-add-to-cart:hover,
.pd-test-report-btn:hover,
.pl-add-btn:hover,
.pl-mobile-add-btn:hover,
.pl-download-btn:hover,
.pl-cart-bar-checkout:hover,
.hero-cta-primary:hover,
.deal-shop-now:hover,
.ws-login-submit:hover,
.ws-otp-submit:hover,
.review-modal-submit:hover,
.pay-btn:hover,
.pay-contact-btn:hover,
.promo-code-row button:hover,
.report-lightbox-verify:hover {
    background: var(--primary-darker) !important;
    background-image: none !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(44, 177, 188, 0.55);
}

.btn-secondary, .hero-cta-secondary, .deal-contact-secondary {
    background: transparent;
    border: 1px solid rgba(44, 177, 188, 0.45);
    color: var(--primary-darker);
    border-radius: var(--radius-pill);
    box-shadow: none;
}
.btn-secondary:hover, .hero-cta-secondary:hover, .deal-contact-secondary:hover {
    background: var(--tint);
    border-color: var(--primary);
    color: var(--primary-darker);
}
.btn-success { background: var(--success-green); border-radius: var(--radius-pill); color: #fff; }
.btn-success:hover { background: #0C6541; }

/* segmented / filter buttons — active state is the deep teal, not brand teal */
.category-btn, .filter-btn, .catalog-tab, .pl-filter-btn,
.tp-filter-btn, .filter-star-btn, .year-filter-btn, .page-btn {
    border-radius: var(--radius-pill);
    border-color: var(--border-default);
    color: var(--gray-600);
    font-weight: 500;
}
.category-btn:hover, .filter-btn:hover, .catalog-tab:hover, .pl-filter-btn:hover,
.tp-filter-btn:hover, .year-filter-btn:hover, .page-btn:hover {
    border-color: var(--primary);
    color: var(--primary-darker);
    background: var(--tint);
}
.category-btn.active, .filter-btn.active, .catalog-tab.active, .pl-filter-btn.active,
.tp-filter-btn.active, .year-filter-btn.active, .page-btn.active {
    background: var(--primary-dark) !important;
    color: #fff !important;
    border-color: var(--primary-dark) !important;
}

/* ============================================================================
   HOME — hero, sale bar, deals + promo timer, trending, trust, process, labs
   (These are the template's existing classes. A2 may keep or replace them; both
    paths land on the identity.)
   ========================================================================== */
.hero-section {
    background:
        radial-gradient(ellipse 70% 60% at 82% 0%, rgba(1, 210, 217, 0.15), transparent 62%),
        radial-gradient(ellipse 55% 50% at 6% 10%, rgba(173, 109, 247, 0.09), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F2FCFD 60%, var(--tint) 100%);
}
.hero-eyebrow {
    color: var(--primary-darker);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.hero-title { font-family: var(--font-display); color: var(--navy); letter-spacing: -0.03em; }
.hero-subtitle { color: var(--gray-500); }
.hero-trust-item { color: var(--gray-600); }
.hero-trust-item i { color: var(--primary-dark); }

/* section headers: give every one the helix underline */
.section-header { text-align: center; }
.section-header h2 { color: var(--navy); }
.section-header h2::after,
.trending-header h2::after,
.trust-header h2::after {
    content: '';
    display: block;
    width: 56px; height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--helix);
}
.section-heading { color: var(--navy); }
.section-alt { background: var(--surface-sunken); }   /* => pale-cyan band */

/* sale bar */
.sale-bar {
    background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 55%, var(--indigo) 100%);
    color: #EAF6FF;
    border-bottom: 2px solid transparent;
    border-image: var(--helix) 1;
}
.sale-bar-text strong { color: #fff; }
.sale-bar-link { color: var(--cyan); font-weight: 600; }
.sale-bar-timer { font-family: var(--font-mono); color: var(--cyan); font-weight: 700; }

/* deal card + promo timer */
.deal-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
}
.deal-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--helix);
}
.deal-card-badge {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-ink) 100%);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-violet);
}
.deal-tier {
    background: var(--tint);
    border: 1px solid rgba(44, 177, 188, 0.22);
    border-radius: var(--radius-md);
}
.deal-tier-label { color: var(--gray-500); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.deal-tier-value { color: var(--primary-darker); font-weight: 700; }
.deal-timer-label { color: var(--gray-400); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.deal-timer, #promoTimer, #promoTimerCard {
    font-family: var(--font-mono);
    color: var(--navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.timer-num {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.timer-unit { color: var(--gray-400); letter-spacing: 0.1em; text-transform: uppercase; }
.timer-sep { color: var(--primary-dark); }   /* teal as TEXT must be the AA-safe tone */
.deal-contact { color: var(--gray-500); }

/* trending product cards */
.trending-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.trending-card:hover {
    border-color: rgba(44, 177, 188, 0.4);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.trending-card-image { background: var(--paper); border-radius: var(--radius-md); }
.trending-category {
    font-family: var(--font-family);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--tint);
    color: var(--primary-darker);
    border: none;
    border-radius: var(--radius-pill);
}
.trending-badge {
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--violet-tint);
    color: var(--violet-ink);
}
.trending-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.trending-spec { font-family: var(--font-family); font-size: 0.76rem; color: var(--gray-400); }
.trending-price-value { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.trending-bulk { color: var(--gray-500); }
.trending-cta {
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    border-radius: var(--radius-pill);
}
.trending-cta:hover { background: var(--primary-dark); color: #fff; }

/* trust / process / cert / lab */
.trust-card, .cert-card, .process-step, .order-step, .why-choose-item {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.trust-card:hover, .cert-card:hover, .process-step:hover, .why-choose-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(44, 177, 188, 0.32);
}
.trust-card-icon, .cert-icon, .process-step-icon, .order-step-icon, .section-icon {
    color: var(--primary-dark);
}
.trust-card-text, .process-step-desc { color: var(--gray-500); }
.process-step-title, .cert-card h3 { color: var(--navy); font-family: var(--font-display); }
.trust-stat-value { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.trust-stat-label { color: var(--gray-400); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.order-step-arrow { color: var(--primary-light); }
.cert-link { color: var(--primary-dark); font-weight: 600; }

.lab-video-card, .about-mfg-video-card, .contact-video-card, .products-video-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background: var(--white);
}
.lab-video-label, .about-mfg-video-label, .contact-video-label {
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(15, 42, 67, 0.82);
    backdrop-filter: blur(4px);
    color: #fff;
    border-radius: var(--radius-pill);
}

/* payment methods strip */
.payment-methods-section {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--tint) 100%) !important;
}
.payment-methods-title { color: var(--navy) !important; }
.pay-badge {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gray-600);
}
.pay-badge i { color: var(--gray-500) !important; }
.pay-crypto-tag {
    background: linear-gradient(135deg, var(--violet), var(--violet-ink)) !important;
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

/* trustpilot banner */
.trustpilot-banner {
    background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%);
    border-radius: var(--radius-lg);
}
.trustpilot-banner:hover { background: linear-gradient(100deg, #0C2338 0%, var(--navy-2) 100%); }
.tp-banner-score { color: #fff; font-family: var(--font-display); }
.tp-banner-count { color: var(--gray-300); }
.tp-banner-btn {
    background: #fff;
    color: var(--navy);
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.tp-banner-btn:hover { background: var(--tint) !important; color: var(--navy); }

/* FAQ — two-column, white cards */
.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(--white);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
    overflow: hidden;
}
.faq-item.open { border-color: rgba(44, 177, 188, 0.45); box-shadow: var(--shadow-md); }
.faq-question {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    background: transparent;
}
.faq-question i { color: var(--primary-dark); font-size: 0.7em; }
.faq-answer p { font-size: 0.9rem; line-height: 1.7; color: var(--gray-500); }
.faq-answer a, .faq-answer a[style] { color: var(--primary-dark) !important; font-weight: 500; }

/* ============================================================================
   PRODUCTS PAGE
   ========================================================================== */
.products-page-header, .products-hero, .page-hero, .pl-hero, .reviews-header,
.about-page > .page-hero, .contact-page > .page-hero {
    background:
        radial-gradient(ellipse 60% 130% at 88% -20%, rgba(1, 210, 217, 0.13), transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, var(--tint) 100%) !important;
    border-bottom: 1px solid var(--border-subtle);
}
.page-hero::before { background-image: none; }
.products-page-title, .pl-hero h1, .pl-hero-title {
    color: var(--navy) !important;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
}
.products-page-subtitle { color: var(--gray-500); }

.product-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(44, 177, 188, 0.4);
}
.product-image { background: var(--paper); }
.product-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.product-code, .product-spec { color: var(--gray-400); }
.product-code { font-family: var(--font-mono); font-size: 0.72rem; }
.price-value { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.price-label { color: var(--gray-400); }
.price-save { color: var(--violet-ink); font-weight: 700; }
.spec-highlight { color: var(--primary-darker); }

/* badges — teal = state, violet = value, green = stock */
.product-badge, .badge-popular, .badge-tested, .view-test-report-btn {
    background: var(--tint) !important;
    color: var(--primary-darker) !important;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.view-test-report-btn:hover { background: var(--primary-100) !important; color: var(--primary-darker) !important; }
.badge-new, .badge-best-value {
    background: var(--violet-tint) !important;
    color: var(--violet-ink) !important;
    border-radius: var(--radius-pill);
    font-weight: 700;
}
.janoshik-link, .cat-coa-btn {
    background: var(--tint) !important;
    background-image: none !important;
    color: var(--primary-darker) !important;
    border: 1px solid rgba(44, 177, 188, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
}
.janoshik-link:hover, .cat-coa-btn:hover {
    background: var(--primary-100) !important;
    background-image: none !important;
    border-color: var(--primary) !important;
    color: var(--primary-darker) !important;
}
.bulk-tier { color: var(--gray-500); }
.bulk-tier::before { background: var(--primary); }
.bulk-pricing { border-color: var(--border-subtle); }

/* bundles / bulk-cost cards / bundle overlay — SAVINGS are violet */
.bundle-card, .bcc-body, .bo-card, .catalog-modal, .pen-info-popup {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.bundle-name, .bcc-name, .bo-item-name, .bo-header-title { color: var(--navy); font-family: var(--font-display); }
.bundle-desc, .bcc-desc, .bo-desc, .bo-note { color: var(--gray-500); }
.bundle-savings-badge, .bcc-save, .bo-recommend, .bo-save-pill, .discount-badge, .bo-tier-badge, .bundle-tier-badge {
    background: linear-gradient(135deg, #7E45D6, var(--violet-ink)) !important;
    color: #fff !important;
    border-radius: var(--radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bundle-you-save, .bo-savings, .bcc-price-range { color: var(--violet-ink) !important; font-weight: 700; }
.bundle-retail, .bundle-retail-price, .bo-retail, .bcc-from { color: var(--gray-400); }
.bundle-final, .bo-price, .bcc-tier { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.bcc-tier-std, .bo-tier-std { color: var(--gray-600); }
.bcc-tier-pro, .bo-tier-pro { color: var(--primary-darker); }
.bundle-overlay, .bo-content, .pen-info-overlay { background: rgba(15, 42, 67, 0.55); backdrop-filter: blur(3px); }
.bcc-icon, .bo-header-icon { color: var(--primary-dark); }
.bundle-add-btn, .bo-add-btn {
    background: var(--primary-dark) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
}
.bundle-add-btn:hover, .bo-add-btn:hover { background: var(--primary-darker) !important; }

/* pen upgrade / spray toggles */
.pen-toggle-track.on, .spray-track.on { background: var(--primary-dark); }
.pen-upgrade-price, .spray-price { color: var(--violet-ink); font-weight: 700; }
.pen-learn-more, .spray-learn-more { color: var(--primary-dark); }
.pen-upgrade-title, .spray-title { color: var(--navy); }

/* catalog modal + table */
.catalog-header { border-bottom: 1px solid var(--border-subtle); }
.catalog-cat-header { background: var(--tint); border-radius: var(--radius-sm); }
.catalog-cat-name { color: var(--navy); font-family: var(--font-display); }
.catalog-cat-icon, .category-icon { color: var(--primary-dark); }
.catalog-cat-count, .catalog-count, .product-count { color: var(--gray-400); }
.catalog-table th { background: var(--paper); color: var(--gray-600); border-bottom: 1px solid var(--border-default); }
.catalog-table tr:hover { background: var(--tint); }
.catalog-search { border-radius: var(--radius-pill); }
.sort-select, .reviews-sort {
    border-radius: var(--radius-pill);
    border-color: var(--border-default);
    color: var(--gray-700);
    background: var(--white);
}

/* quantity steppers */
.qty-btn, .pd-qty-btn {
    background: var(--paper);
    border-color: var(--border-default);
    color: var(--gray-700);
    border-radius: var(--radius-sm);
}
.qty-btn:hover, .pd-qty-btn:hover { background: var(--tint); color: var(--primary-darker); border-color: var(--primary); }
.qty-input, .pd-qty-input { color: var(--navy); font-family: var(--font-display); font-weight: 700; }

/* ============================================================================
   PRODUCT DETAIL PAGE  (repaints every hard-coded jade hex in product.css)
   ========================================================================== */
.pd-header {
    background:
        radial-gradient(ellipse 60% 120% at 88% -10%, rgba(1, 210, 217, 0.14), transparent 62%),
        linear-gradient(160deg, #FFFFFF 0%, var(--tint) 100%) !important;
    border-bottom: 1px solid var(--border-subtle);
}
.pd-breadcrumb { background: transparent; }
.pd-breadcrumb-link { color: var(--gray-500); }
.pd-breadcrumb-link:hover { color: var(--primary-darker); }
.pd-breadcrumb-current { color: var(--navy) !important; }
.pd-breadcrumb-sep { color: var(--gray-300); }
.pd-product-name, .pd-header-title, .pd-section-title, .pd-related-name, .pd-similar-name {
    color: var(--navy) !important;
    font-family: var(--font-display);
    font-weight: 700;
}
.pd-section-title i {
    background: linear-gradient(140deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #fff;
    border-radius: var(--radius-sm);
}
.pd-section-subtitle, .pd-description, .pd-spec-text, .pd-specification, .pd-similar-spec { color: var(--gray-500) !important; }
.pd-product-image, .pd-details-card, .pd-pricing-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.pd-detail-item:hover { background: var(--tint) !important; background-image: none !important; }
.pd-detail-label { color: var(--gray-500); font-weight: 600; }
.pd-detail-value { color: var(--gray-800); }

/* prices: navy is the number, violet is the saving, teal is the link */
.pd-price-item { background: var(--paper) !important; background-image: none !important; border-radius: var(--radius-md); }
.pd-price-item:has(.pd-bulk-price) { background: var(--tint) !important; background-image: none !important; }
.pd-price-label { color: var(--gray-500) !important; }
.pd-price-amount { color: var(--navy) !important; font-family: var(--font-display); font-weight: 700; }
.pd-price-text { color: var(--primary-darker) !important; }
.pd-bulk-price { color: var(--primary-darker) !important; font-weight: 700; }
.pd-savings {
    background: linear-gradient(135deg, #7E45D6, var(--violet-ink)) !important;
    background-color: var(--violet-ink) !important;
    color: #fff !important;
    border-radius: var(--radius-pill);
}
.pd-success { color: var(--success-green) !important; }
.pd-error { color: var(--error-red); }
.pd-contact-pricing .pd-price-label { color: var(--navy) !important; }
.pd-contact-note, .pd-contact-label { color: var(--gray-500); }
.pd-crypto-note {
    background: var(--tint) !important;
    background-image: none !important;
    border: 1px solid rgba(44, 177, 188, 0.22);
    border-radius: var(--radius-md);
    color: var(--gray-700);
}

/* pd badges */
.pd-badge, .pd-badge-popular, .pd-mini-badge, .pd-mini-badge-popular, .pd-cat-badge, .pd-tag-category {
    background: var(--tint) !important;
    background-image: none !important;
    color: var(--primary-darker) !important;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.pd-badge-new, .pd-badge-best-value, .pd-mini-badge-new, .pd-mini-badge-best {
    background: var(--violet-tint) !important;
    background-image: none !important;
    color: var(--violet-ink) !important;
    border-radius: var(--radius-pill);
    font-weight: 700;
}
.pd-tag-subcategory {
    background: var(--paper);
    color: var(--navy) !important;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
}
.pd-tag-subcategory:hover {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
}

/* pd CTAs (the gradient ones) — flattened to the AA-safe teal pill above.
   The gradient variant is kept for the big add-to-cart only, deep enough for
   white text at both stops. */
.pd-add-to-cart, .pd-test-report-btn {
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-darker) 100%) !important;
    background-image: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-darker) 100%) !important;
}
.pd-add-to-cart:hover, .pd-test-report-btn:hover {
    background-image: linear-gradient(120deg, var(--primary-darker) 0%, #095E65 100%) !important;
}
.pd-test-report-link { color: var(--primary-dark); }

/* related / similar cards — top edge = the helix */
.pd-related-card, .pd-similar-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pd-related-card:hover, .pd-similar-card:hover {
    border-color: rgba(44, 177, 188, 0.45) !important;
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.pd-similar-card::before { background: var(--helix) !important; }
.pd-related-cta, .pd-similar-cta, .pd-view-link { color: var(--primary-dark) !important; font-weight: 600; }
.pd-related-card:hover .pd-view-link,
.pd-similar-card:hover .pd-view-link { color: var(--primary-darker) !important; }
.pd-related-price, .pd-similar-price { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.pd-related-cat, .pd-similar-cat { color: var(--gray-400); }

/* pd trust band — navy, with the helix on its top edge */
.pd-trust-section {
    position: relative;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%) !important;
    border-radius: var(--radius-lg);
}
.pd-trust-section::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--helix);
}
.pd-trust-header i { color: var(--cyan) !important; }
.pd-trust-header, .pd-trust-content, .pd-trust-item { color: var(--gray-300); }
.pd-trust-item strong, .pd-trust-primary-item strong { color: #fff; }
.pd-trust-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    color: var(--cyan);
    border-radius: var(--radius-sm);
}
.pd-qty-label { color: var(--gray-500); }

/* ============================================================================
   PRICE LIST — the data table. Mono is allowed here (it is genuinely tabular).
   ========================================================================== */
.pl-page { background: var(--paper); }
.pl-hero { border-bottom-color: var(--border-subtle) !important; }
.pl-hero-flag { border-radius: var(--radius-sm); }
.pl-table-wrapper {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.pl-table thead th {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.pl-cat-header, .pl-mobile-cat-header {
    background: var(--tint);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
}
.pl-row { border-bottom: 1px solid var(--border-subtle); }
.pl-row:hover { background: var(--tint) !important; }
.pl-row-popular { background: rgba(224, 252, 255, 0.5); }
.pl-catno { font-family: var(--font-mono); color: var(--primary-darker) !important; }
.pl-name-link { color: var(--navy); font-weight: 600; }
.pl-name-link:hover { color: var(--primary-darker); }
.pl-spec { color: var(--gray-400); }
.pl-price { color: var(--navy) !important; font-family: var(--font-display); font-weight: 700; }
.pl-price-bulk, .pl-mobile-card-bulk { color: var(--primary-darker) !important; }
.pl-price-contact { color: var(--gray-500); }
.pl-stock-badge, .pl-stock-inline {
    background: rgba(16, 121, 79, 0.1) !important;
    color: var(--success-green) !important;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.pl-badge, .pl-badge-popular, .pl-popular-badge {
    background: var(--tint);
    color: var(--primary-darker);
    border-radius: var(--radius-pill);
}
.pl-badge-new, .pl-badge-value {
    background: var(--violet-tint);
    color: var(--violet-ink);
    border-radius: var(--radius-pill);
}
.pl-search-input { border-radius: var(--radius-pill); border-color: var(--border-default); }
.pl-search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 177, 188, 0.16) !important;
}
.pl-wh-strip { background: var(--tint) !important; border-radius: var(--radius-md); }
.pl-wh-chip { background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--gray-700); }
.pl-wh-chip.active { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
.pl-wh-label { color: var(--gray-600); font-weight: 600; }
.pl-sale-strip {
    background: linear-gradient(100deg, var(--navy), var(--navy-2));
    color: #fff;
    border-radius: var(--radius-md);
}
.pl-sale-label { color: var(--cyan); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pl-sale-tier { color: #fff; }
.pl-raw-tier-label { color: var(--gray-400); }
.pl-raw-tier { color: var(--gray-600); }
.pl-raw-sep { color: var(--gray-300); }
.pl-trust-item { color: var(--gray-500); }
.pl-trust-item i { color: var(--primary-dark); }
.pl-result-count { color: var(--gray-400); }
.pl-cart-bar {
    background: var(--white);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -8px 30px -12px rgba(15, 42, 67, 0.2);
}
.pl-cart-bar-info { color: var(--navy); font-weight: 600; }
.pl-cart-bar-view { color: var(--primary-dark); border-radius: var(--radius-pill); }
.pl-mobile-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.pl-mobile-card:active { background: var(--tint) !important; }
.pl-mobile-card-name { color: var(--navy); font-weight: 700; }
.pl-mobile-card-price { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.pl-mobile-card-spec { color: var(--gray-400); }
.pl-no-results { color: var(--gray-400); }

/* ============================================================================
   CART / CHECKOUT  (modals — style only; every JS hook kept)
   ========================================================================== */
.modal { background: rgba(15, 42, 67, 0.5); backdrop-filter: blur(3px); }
.modal-content, .checkout-modal-content, .review-modal, .catalog-modal, .pen-info-popup {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
    color: var(--gray-600);
    /* NEVER `overflow: hidden` here — global.css gives modals `max-height:90vh;
       overflow-y:auto`, and the shorthand would kill it, trapping the cart's
       contents with no way to scroll to the checkout button. */
    overflow-y: auto;
    overflow-x: hidden;
}
/* Helix hairline across the top of every modal. Painted as a background rather
   than an absolutely-positioned ::before so it stays pinned to the modal frame
   while the contents scroll under it (and is still clipped by the radius). */
.modal-content, .checkout-modal-content {
    position: relative;
    background-image: var(--helix);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top left;
}
.modal-header { border-bottom: 1px solid var(--border-subtle); }
.modal-title { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.modal-close, .review-modal-close, .bo-close, .pen-info-close {
    color: var(--gray-400);
    border-radius: var(--radius-pill);
}
.modal-close:hover { color: var(--navy); background: var(--gray-100); }

.cart-item, .checkout-item {
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
}
.cart-item-name, .checkout-item-name { color: var(--navy); font-weight: 600; }
.cart-item-spec, .checkout-item-spec { color: var(--gray-400); }
.cart-item-price, .checkout-item-price { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.cart-total, .order-total {
    background: var(--tint) !important;
    background-image: none !important;
    border-radius: var(--radius-md);
    border-top: 1px solid rgba(44, 177, 188, 0.2);
}
.total-row span, .total-amount, .order-total-value { color: var(--navy); font-weight: 700; }
.discount-row span, .discount-amount { color: var(--violet-ink) !important; font-weight: 700; }
.empty-cart { color: var(--gray-400); }
.remove-item-btn { color: var(--gray-400); }
.remove-item-btn:hover { color: var(--error-red); }

/* checkout step bar */
.checkout-steps {
    background: var(--paper) !important;
    background-image: none !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.step-number {
    font-family: var(--font-family);
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--gray-200);
    color: var(--gray-600);
}
.step.active .step-number { background: var(--primary-dark); color: #fff; }
.step-text { color: var(--gray-500); }
.step.active .step-text { color: var(--navy); font-weight: 600; }

/* forms */
input, textarea, select {
    font-family: var(--font-family);
    background: var(--white);
    color: var(--gray-800);
    border-color: var(--border-default);
    border-radius: var(--radius-sm);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 177, 188, 0.14);
    outline: none;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
.form-group label { color: var(--gray-600); font-weight: 600; }
.shipping-option, .payment-option, .payment-method {
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.shipping-option:hover, .payment-option:hover, .payment-method:hover {
    border-color: var(--primary);
    background: var(--tint);
}
.shipping-option.selected, .payment-option.selected, .payment-method.selected {
    border-color: var(--primary-dark);
    background: var(--tint);
    box-shadow: 0 0 0 1px var(--primary-dark) inset;
}
.shipping-price-standard, .shipping-price-express { color: var(--primary-darker); font-weight: 700; }
.payment-icon { color: var(--primary-dark); }

/* promo code */
.promo-code-section { background: var(--paper); border-radius: var(--radius-md); }
.promo-code-row input { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.promo-code-row button { border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important; }
.promo-code-message { color: var(--success-green); font-weight: 600; }

/* crypto */
.crypto-wallet-card, .crypto-wallet-item, .pay-crypto-wallet {
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.crypto-address, .pay-crypto-addr {
    font-family: var(--font-mono);
    color: var(--navy);
    background: var(--paper);
    border-radius: var(--radius-sm);
    word-break: break-all;
}
.pay-crypto-addr:hover { background: var(--tint) !important; }
.crypto-label, .pay-crypto-label { color: var(--gray-500); font-weight: 600; }
.crypto-copy-btn { color: var(--primary-dark); border-radius: var(--radius-pill); }
.crypto-note-small, .confirm-note { color: var(--gray-500); }
.payment-guide, .payment-intro, .payment-tips, .spend-notification {
    background: var(--tint) !important;
    background-image: none !important;
    border: 1px solid rgba(44, 177, 188, 0.2);
    border-radius: var(--radius-md);
    color: var(--gray-700);
}
.payment-guide-header span, .payment-guide-header strong { color: var(--navy); }
.payment-tips li i { color: var(--primary-dark) !important; }
.payment-step { color: var(--gray-600); }
.change-warehouse-btn {
    background: var(--navy) !important;
    background-image: linear-gradient(120deg, var(--navy), var(--navy-2)) !important;
    color: #fff !important;
    border-radius: var(--radius-md);
    border: none;
}
.change-warehouse-btn small, .change-warehouse-btn .wh-name, .change-warehouse-btn .wh-flag { color: var(--gray-300); }
.order-warehouse, .order-confirmation-summary { color: var(--gray-600); }

/* toast */
.notification-toast {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-xl);
    color: var(--gray-700);
}
.toast-icon { color: var(--primary-dark); }
.toast-message { color: var(--navy); font-weight: 600; }
.toast-subtitle { color: var(--gray-500); }
.toast-close { color: var(--gray-400); }
.toast-content.error { border-left-color: var(--error-red); }
.toast-content.error .toast-icon { color: var(--error-red); }
.toast-content.warning { border-left-color: var(--warning-yellow); }
.toast-content.warning .toast-icon { color: var(--warning-yellow); }
.toast-content.info { border-left-color: var(--indigo); }
.toast-content.info .toast-icon { color: var(--indigo); }

/* ============================================================================
   PAY PAGE
   ========================================================================== */
.pay-order-card, .pay-trouble-section, .pay-lookup-form {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.pay-crypto-section {
    background: var(--tint) !important;
    border-radius: var(--radius-md);
    border: 1px solid rgba(44, 177, 188, 0.2);
}
.pay-status-badge { border-radius: var(--radius-pill); font-weight: 700; }
.pay-status-paid {
    background: rgba(16, 121, 79, 0.12) !important;
    color: var(--success-green) !important;
    border-color: var(--success-green) !important;
}
.pay-status-pending {
    background: rgba(167, 107, 8, 0.12);
    color: var(--warning-yellow);
}
.pay-btn-card, .pay-btn-revolut, .pay-btn-google, .pay-btn-apple {
    border-radius: var(--radius-pill) !important;
}
.pay-btn-note { color: var(--gray-400); }
.pay-trouble-item { color: var(--gray-500); }
.pay-trouble-item i { color: var(--primary-dark); }

/* ============================================================================
   REVIEWS
   ========================================================================== */
/* NB: .tp-star-box is NOT in this list. It is a filled green star TILE, not a
   card surface — repainting it white hides the white star glyph inside it. */
.review-card, .sidebar-card, .filter-panel, .trust-score-section {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* --- Star tiles: GREEN tile + WHITE glyph -------------------------------
   Every star on this page is a filled tile with a glyph inside, so the tile
   owns the green and the glyph owns the white. Pinned here because this sheet
   loads last: a card-surface sweep (white background) or a star-colour sweep
   (green text) would otherwise render them green-on-green / white-on-white. */
.tp-star-box, .tp-star-sm, .review-stars .star-box {
    background: #00B67A;
    border: none;
    box-shadow: none;
}
.tp-star-box, .tp-star-box i,
.tp-star-sm, .tp-star-sm i,
.review-stars .star-box, .review-stars .star-box i { color: #fff; }
.tp-star-box { border-radius: 4px; }
.tp-star-sm { border-radius: 2px; }
.review-stars .star-box { border-radius: 3px; }
.tp-star-sm.half { background: linear-gradient(90deg, #00B67A 50%, var(--gray-200) 50%); }
.tp-star-sm.empty, .review-stars .star-box.empty { background: var(--gray-200); }
.review-card:hover { box-shadow: var(--shadow-md); }
.review-title, .review-author-name, .sidebar-card-title, .company-name { color: var(--navy); font-weight: 700; }
.review-text, .review-body { color: var(--gray-500); }
.review-date, .review-posted-date, .review-author-reviews { color: var(--gray-400); }
/* Outline/glyph-only stars stay green. NOT .tp-star-sm — that one is a filled
   green tile whose glyph must stay white (see the star-tile block above). */
.tp-b-star, .reviews-line .stars { color: #00B67A; }  /* Trustpilot green — brand-neutral, keep */
.review-verified { color: var(--success-green); font-weight: 600; }
.review-avatar { background: var(--tint); color: var(--primary-darker); font-family: var(--font-display); font-weight: 700; }
.review-tag, .tp-mention-tag, .company-cat-tag {
    background: var(--tint);
    color: var(--primary-darker);
    border-radius: var(--radius-pill);
    border: none;
}
.review-action-btn { color: var(--gray-500); border-radius: var(--radius-pill); border-color: var(--border-default); }
.review-action-btn:hover { color: var(--primary-darker); border-color: var(--primary); background: var(--tint); }
.trust-score-number { font-family: var(--font-display); color: var(--navy); font-weight: 700; }
.trust-score-label, .trust-score-out-of, .trust-score-based { color: var(--gray-400); }
.rating-bar-track { background: var(--gray-100); border-radius: var(--radius-pill); }
.rating-bar-fill { background: var(--helix); border-radius: var(--radius-pill); }
.rating-bar-label, .rating-bar-pct { color: var(--gray-500); }
.company-reply, .company-response {
    background: var(--tint);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}
.company-reply-text, .company-response-header { color: var(--gray-700); }
.sidebar-link { color: var(--primary-dark); }
.tp-toast { background: var(--navy); color: #fff; border-radius: var(--radius-md); }
.tp-disclaimer { color: var(--gray-400); }
.sort-dropdown, .sort-option { background: var(--white); border-radius: var(--radius-md); }
.sort-option:hover { background: var(--tint); }

/* ============================================================================
   WHOLESALE (the private chat)
   ========================================================================== */
.ws-login-page, .ws-otp-page {
    background:
        radial-gradient(ellipse 60% 50% at 80% 0%, rgba(1, 210, 217, 0.14), transparent 60%),
        linear-gradient(180deg, var(--white) 0%, var(--tint) 100%);
}
.ws-login-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.ws-login-icon { color: var(--primary-dark); }
.ws-login-title { color: var(--navy); font-family: var(--font-display); }
.ws-login-subtitle, .ws-no-invite-info { color: var(--gray-500); }
.ws-login-badge, .ws-encryption-badge {
    background: var(--tint);
    color: var(--primary-darker);
    border-radius: var(--radius-pill);
}
.ws-login-error { color: var(--error-red); }
.ws-otp-inputs input {
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
}
.ws-header { background: linear-gradient(100deg, var(--navy), var(--navy-2)); color: #fff; }
.ws-header-name { color: #fff; font-family: var(--font-display); }
.ws-header-members, .ws-header-logout { color: var(--gray-300); }
.ws-header-avatar { background: var(--primary-dark); color: #fff; }
.ws-tier-badge, .ws-header-tier { border-radius: var(--radius-pill); font-weight: 700; }
.ws-header-tier-standard { background: rgba(255,255,255,0.14); color: #fff; }
.ws-header-tier-premium, .ws-tier-badge-premium { background: var(--primary-dark); color: #fff; }
.ws-header-tier-platinum, .ws-tier-badge-platinum { background: var(--indigo); color: #fff; }
.ws-header-tier-elite, .ws-tier-badge-elite { background: linear-gradient(135deg, #7E45D6, var(--violet-ink)); color: #fff; }
.ws-chat { background: var(--paper); }
.ws-bubble { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.ws-sender { color: var(--primary-darker); font-weight: 700; }
.ws-text { color: var(--gray-700); }
.ws-time { color: var(--gray-400); }
.ws-date-divider { color: var(--gray-400); }
.ws-pinned { background: var(--tint); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); }
.ws-pinned-header { color: var(--primary-darker); font-weight: 700; }
.ws-locked-overlay { background: rgba(15, 42, 67, 0.6); backdrop-filter: blur(3px); border-radius: var(--radius-md); }
.ws-locked-icon, .ws-locked-label { color: #fff; }
.ws-locked-upgrade { background: var(--primary-dark); color: #fff; border-radius: var(--radius-pill); }
.ws-reaction { background: var(--gray-100); border-radius: var(--radius-pill); }
.ws-reaction.active { background: var(--tint); border-color: var(--primary); }
.ws-progress-circle { background: var(--tint); color: var(--navy); }
.ws-progress-circle.done { background: var(--primary-dark); color: #fff; }
.ws-progress-line { background: var(--gray-200); }
.ws-security-num { color: var(--primary-dark); font-family: var(--font-mono); }

/* ============================================================================
   ABOUT / CONTACT
   ========================================================================== */
.about-section, .contact-content, .about-content { color: var(--gray-500); }
.about-cat-card, .about-team-card, .contact-team-card, .contact-card,
.about-guarantee-card, .shipping-info-card, .service-item, .tg-rep-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-cat-card:hover, .about-team-card:hover, .contact-team-card:hover,
.contact-card:hover, .tg-rep-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(44, 177, 188, 0.32);
}
.about-cat-icon, .about-guarantee-icon, .contact-card-icon, .contact-trust-item > i, .section-icon {
    color: var(--primary-dark) !important;
}
.about-cat-count, .contact-card-email, .contact-handle, .tg-rep-handle { color: var(--gray-500); }
.about-team-name-row, .contact-team-name-row, .tg-rep-name { color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.about-team-role, .contact-team-role, .contact-team-desc { color: var(--gray-400); }
.about-trust-banner {
    background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.about-trust-banner::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: var(--helix);
}
.about-trust-number { color: var(--cyan) !important; font-family: var(--font-display); font-weight: 700; }
.about-trust-label { color: var(--gray-300); letter-spacing: 0.1em; text-transform: uppercase; }
.about-trust-divider { background: rgba(255, 255, 255, 0.14); }
.about-team-contact, .contact-response-banner {
    background: var(--tint) !important;
    background-image: none !important;
    border: 1px solid rgba(44, 177, 188, 0.22) !important;
    border-radius: var(--radius-md);
    color: var(--gray-700);
}
.about-team-contact:hover { border-color: var(--primary) !important; }
.about-team-contact > i, .contact-response-banner > i { color: var(--primary-dark) !important; }
.about-team-badge-fastest, .contact-team-badge-fastest, .contact-card-badge {
    background: var(--violet-tint);
    color: var(--violet-ink);
    border-radius: var(--radius-pill);
    font-weight: 700;
}
/* keep the WhatsApp / Telegram brand colours legible on their tinted chips */
.about-team-btn, .contact-team-btn, .tg-rep-btn { border-radius: var(--radius-pill); font-weight: 600; }
.about-team-btn-wa, .contact-team-btn-wa { background: #E3F6EC !important; color: #0E6B45 !important; }
.about-team-btn-tg, .contact-team-btn-tg { background: #E4F1FB !important; color: #10557F !important; }
.community-link, .online-link { color: var(--primary-dark); }
.contact-note, .shipping-detail, .contact-info-section p { color: var(--gray-500); }
.policy-highlight {
    background: var(--tint) !important;
    background-image: none !important;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}
.policy-guarantee {
    background: rgba(16, 121, 79, 0.07) !important;
    border: 1px solid rgba(16, 121, 79, 0.28) !important;
    border-radius: var(--radius-lg);
}
.policy-guarantee i { color: var(--success-green) !important; }
.policy-guarantee h4 { color: var(--success-green) !important; }
.shipping-info, .contact-item { color: var(--gray-500); }
.seal-badge { background: var(--tint); color: var(--primary-darker); border-radius: var(--radius-pill); }

/* report lightbox */
.report-lightbox { background: rgba(15, 42, 67, 0.85); }
.report-lightbox-img { border-radius: var(--radius-md); background: #fff; }
.report-lightbox-info { color: var(--gray-300); }
.report-lightbox-name { color: #fff; font-family: var(--font-display); }
.report-lightbox-close { color: #fff; }

/* email capture */
.email-capture-code-card {
    background: var(--tint);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-md);
}
.email-capture-copy-btn { background: var(--primary-dark); color: #fff; border-radius: var(--radius-pill); }

/* loading spinner */
.loading-spinner { border-color: var(--gray-200); border-top-color: var(--primary); }

/* ============================================================================
   MOBILE MENU / BOTTOM NAV
   ========================================================================== */
.mobile-menu { background: var(--white); color: var(--gray-600); }
.mobile-menu-header { border-bottom: 1px solid var(--border-subtle); }
.mobile-menu-overlay { background: rgba(15, 42, 67, 0.5); }
.mobile-menu-title {
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-400);
}
.mobile-nav-link { color: var(--gray-700); border-radius: var(--radius-md); font-weight: 500; }
.mobile-nav-link:hover { background: var(--gray-50); }
.mobile-nav-link.active { background: var(--tint); color: var(--primary-darker); font-weight: 600; }
.mobile-nav-link i { color: var(--primary-dark); }
.mobile-menu-close { color: var(--gray-500); }
.mobile-menu-footer a { color: var(--gray-500); }
.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(12px);
}
.bottom-nav-item { color: var(--gray-400); font-family: var(--font-family); font-size: 0.62rem; font-weight: 600; }
.bottom-nav-item.active, .bottom-nav-item.active i { color: var(--primary-dark); }
.bottom-nav-badge { background: var(--violet-ink); color: #fff; font-weight: 700; }

/* ============================================================================
   FOOTER — navy plate, helix top-edge, ghost wordmark
   ========================================================================== */
.footer {
    position: relative;
    background: linear-gradient(170deg, var(--navy) 0%, #0B2136 100%);
    color: var(--gray-300);
    border-top: none;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: var(--helix);
}
/* faint helix bloom in the corner — the emblem, dissolved */
.footer::after {
    content: '';
    position: absolute;
    bottom: -140px; right: -100px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, rgba(1,210,217,0.16), rgba(173,109,247,0.14), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }
.footer-logo { font-family: var(--font-display); font-weight: 700; color: #fff; }
.footer-logo small {
    font-family: var(--font-family);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate-light);
}
.footer-logo-img { border-radius: 8px; background: #fff; }
.footer-col h4 {
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary-light);
    border-bottom: none;
}
.footer-col a, .footer-col p { color: var(--gray-300); }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-bottom p, .footer-copyright {
    font-family: var(--font-family);
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    color: var(--slate-light);
}
.footer-social a {
    color: var(--gray-300);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
}
.footer-social a:hover {
    color: #fff;
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-jade);
}

/* skip link */
.skip-link { background: var(--navy); color: #fff; border-radius: var(--radius-pill); }
.skip-link:focus { background: var(--primary-dark); color: #fff; }

/* ============================================================================
   SUPPORT CHAT  (public/js/support-agent.js injects .sa-* and reads --primary
   at runtime for its accent). --primary is the bright brand teal, which is
   correct for its launcher bubble and header fill, but the panel's own text
   must stay dark. Nudge the surfaces onto the identity; leave the hooks alone.
   ========================================================================== */
.sa-panel {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    font-family: var(--font-family) !important;
}
.sa-launch { box-shadow: var(--shadow-jade) !important; }
.sa-chips .sa-chip, .sa-chip {
    border-radius: var(--radius-pill) !important;
    background: var(--tint) !important;
    color: var(--primary-darker) !important;
    border-color: rgba(44, 177, 188, 0.28) !important;
}
.sa-foot, .sa-disc { color: var(--gray-400) !important; }

/* ============================================================================
   HOMEPAGE SECTIONS  —  the .qy-* vocabulary index.ejs actually ships
   These sections were authored in the view against classes that had no rule.
   Everything below is additive and follows the house rules:
     teal = action  |  violet = value/savings  |  navy = structure
     never #2CB1BC as a text colour (2.59:1) — use --primary-dark / --primary-darker
   ========================================================================== */

/* --- HERO extras: photo backplate, scrim, copy column -------------------- */
/* The view sets position/inset/background inline; these rules own the stacking
   and make sure the plate never eats a click. */
.qy-hero-bg,
.qy-hero-scrim {
    z-index: 0;
    pointer-events: none;
}
.qy-hero-copy {
    max-width: 760px;
    padding-bottom: 52px;
}
/* the gradient-lit words in the h1 — same treatment as .qy-hero-title .lit */
.qy-hero-title-accent {
    background: linear-gradient(100deg, var(--primary-dark), var(--indigo) 55%, var(--violet-ink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* the quiet third action next to the two buttons */
.qy-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-darker);
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.qy-hero-link:hover {
    color: var(--navy);
    border-bottom-color: var(--primary);
}
/* the trust line ships as a <ul><li> — kill the bullets, lay it out inline */
.qy-hero-trust {
    list-style: none;
    padding: 0;
}
.qy-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-600);
}
.qy-hero-trust li i { color: var(--primary-dark); }

/* --- TRUST STAT ROW ------------------------------------------------------ */
/* A single pale-cyan plate carrying five stats in one row, hairline-divided. */
.qy-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: linear-gradient(180deg, #F4FEFF 0%, var(--tint) 100%);
    border: 1px solid rgba(44, 177, 188, 0.20);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
}
.qy-stats::before {                       /* helix hairline along the top edge */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--helix);
}
.qy-stats .qy-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 30px 18px 26px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}
.qy-stats .qy-stat + .qy-stat { border-left: 1px solid rgba(15, 42, 67, 0.09); }
.qy-stats .qy-stat + .qy-stat::before { display: none; }   /* kill the floating tick */
.qy-stats .qy-stat:hover { background: rgba(255, 255, 255, 0.65); }
.qy-stats .qy-stat:hover .qy-stat-value { color: var(--primary-darker); }
.qy-stats .qy-stat-value {
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    margin-bottom: 0;
    transition: color 0.2s ease;
}
.qy-stats .qy-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    line-height: 1.4;
    color: var(--gray-400);
}

/* --- VOLUME PRICING SCHEDULE -------------------------------------------- */
.qy-sched-section {
    padding: 84px 0;
    background: linear-gradient(180deg, #F0FDFF 0%, var(--tint) 55%, #EAFBFD 100%);
}
.qy-sched { padding: 32px 34px 30px; }
.qy-sched .qy-helix-rule { width: 100%; height: 2px; opacity: 0.55; margin: 22px 0; }
.qy-sched-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.qy-sched-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0;
}
.qy-sched-timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.qy-sched-timer-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.qy-sched-timer-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
/* the countdown digits: proper plates, not cramped blobs */
.timer-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 7px 8px;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.timer-unit {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 4px 0 3px;
}
.timer-sep { color: var(--primary-dark); font-weight: 700; }

.qy-sched-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.qy-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--tint) 100%);
    border: 1px solid rgba(44, 177, 188, 0.22);
    border-radius: var(--radius-md);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.qy-tier:hover {
    transform: translateY(-2px);
    border-color: rgba(173, 109, 247, 0.45);
    box-shadow: var(--shadow-md);
}
.qy-tier .deal-tier-label {
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}
/* violet = the saving. This is the one number the customer is here for. */
.qy-tier .deal-tier-value {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--violet-ink);
}
.qy-sched-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.92rem;
    color: var(--gray-500);
}
.qy-sched-foot strong { color: var(--violet-ink); font-weight: 700; }

/* --- STOREFRONT vs CORPORATE (the two-doors block) ----------------------- */
.qy-routes-section {
    background: linear-gradient(180deg, #F0FDFF 0%, var(--tint) 55%, #EAFBFD 100%);
}
.qy-routes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}
.qy-route {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 30px 30px 28px;
    height: 100%;
}
.qy-route::before {                        /* top edge: helix on the storefront */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--border-default);
}
.qy-route-here {
    border-color: rgba(44, 177, 188, 0.42);
    box-shadow: 0 4px 12px rgba(15, 42, 67, 0.06), 0 22px 44px -18px rgba(44, 177, 188, 0.40);
}
.qy-route-here::before { background: var(--helix); }
.qy-route-corp { background: var(--gray-50); }
.qy-route-corp::before { background: rgba(15, 42, 67, 0.18); }

.qy-route-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(15, 42, 67, 0.06);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.qy-route-tag-here {
    background: var(--primary-dark);       /* AA-safe teal fill, white text */
    color: #fff;
    box-shadow: var(--shadow-jade);
}
.qy-route-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 0;
}
.qy-route-lede {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-500);
    margin: 0;
}
.qy-route-lede strong { color: var(--navy); font-weight: 700; }
.qy-route-list {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
}
.qy-route-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.91rem;
    line-height: 1.6;
    color: var(--gray-600);
}
.qy-route-list li i {
    flex-shrink: 0;
    margin-top: 3px;
    width: 15px;
    text-align: center;
    font-size: 0.8rem;
}
.qy-route-here .qy-route-list li i { color: var(--success-green); }   /* green = yes, you get this */
.qy-route-corp .qy-route-list li i { color: var(--primary-dark); }
/* --- Contact page: the two-doors small print, last thing on the page ------ */
.contact-doors-note {
    margin-top: 8px;
    padding: 18px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.contact-doors-note h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.contact-doors-note h4 i { color: var(--gray-400); font-size: 0.85em; }
.contact-doors-note p {
    margin: 0 0 7px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--gray-400);
}
.contact-doors-note p:last-child { margin-bottom: 0; }
.contact-doors-note strong { color: var(--gray-600); font-weight: 700; }

/* ============================================================================
   CORPORATE-SITE GATE  —  the red interstitial on every qyaobio.com link
   The only red surface on this site: leaving the shop for a China-domestic,
   licence-gated registration site is the one moment that warrants alarm.
   ========================================================================== */
.corp-gate-modal .modal-content {
    border-top: 4px solid var(--error-red);
    overflow: hidden;
}
.corp-gate-header {
    background: linear-gradient(180deg, #FEF3F2 0%, #FCE7E5 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(192, 57, 43, 0.18) !important;
}
.corp-gate-header .modal-title {
    color: #96271B;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.corp-gate-header .modal-title i { color: var(--error-red); font-size: 0.95em; }

.corp-gate-lede {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--navy) !important;
    margin-bottom: 14px;
}
.corp-gate-rule {
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: #FEF3F2;
    border: 1px solid rgba(192, 57, 43, 0.28);
    border-left: 3px solid var(--error-red);
    font-size: 0.92rem;
    line-height: 1.65;
    color: #7A1F16 !important;
}
.corp-gate-rule strong { color: #96271B; font-weight: 700; }
.corp-gate-note {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--gray-500) !important;
    margin-bottom: 20px;
}
.corp-gate-note strong { color: var(--navy); font-weight: 700; }

.corp-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* The safe path is the loud one. */
.corp-gate-stay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-dark);
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-jade);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.corp-gate-stay:hover {
    background: var(--primary-darker);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(44, 177, 188, 0.55);
}
/* Leaving is possible, but it must look like a deliberate act. */
.corp-gate-proceed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid rgba(192, 57, 43, 0.45);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #96271B;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.corp-gate-proceed:hover {
    background: var(--error-red);
    border-color: var(--error-red);
    color: #fff;
}
.corp-gate-proceed i { font-size: 0.78em; }

@media (max-width: 479px) {
    .corp-gate-lede { font-size: 0.94rem; }
    .corp-gate-rule, .corp-gate-note { font-size: 0.85rem; }
    /* the shared mobile rule makes every .btn full-width; these already are */
}

/* "You're in the wrong door" callout — sends international buyers back here */
.qy-route-redirect {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 13px 15px;
    border-radius: var(--radius-md);
    background: var(--tint);
    border: 1px solid rgba(44, 177, 188, 0.32);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--gray-600);
}
.qy-route-redirect > i {
    flex-shrink: 0;
    margin-top: 3px;
    width: 15px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--primary-dark);
}
.qy-route-redirect strong { color: var(--navy); font-weight: 700; }
.qy-route-redirect a {
    color: var(--primary-darker);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.qy-route-redirect a:hover { color: var(--navy); }

.qy-route .qy-pill, .qy-route .btn-secondary { margin-top: auto; align-self: flex-start; }
.qy-routes-note {
    margin: 26px auto 0;
    max-width: 620px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--gray-500);
}
.qy-routes-note a { color: var(--primary-darker); font-weight: 600; }

/* --- CAPABILITIES -------------------------------------------------------- */
.qy-caps-section { padding: 84px 0; background: var(--paper); }
.qy-caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.qy-cap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 26px 24px;
}
.qy-cap-value {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.05rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.qy-cap h4 {
    font-family: var(--font-family);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0;
}
.qy-cap p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--gray-500);
    margin: 0;
}
.qy-caps-note {
    margin: 28px auto 0;
    max-width: 700px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--gray-500);
}
.qy-caps-note a { color: var(--primary-darker); font-weight: 600; }

/* --- TESTING / COA + the reviews strip ----------------------------------- */
.qy-testing-section {
    padding: 84px 0;
    background: linear-gradient(180deg, #F0FDFF 0%, var(--tint) 55%, #EAFBFD 100%);
}
.qy-reviews-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 32px;
    padding: 22px 28px;
    text-decoration: none;
    color: inherit;
}
.qy-reviews-score {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--navy);
}
.qy-reviews-stars {
    color: var(--primary-dark);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    line-height: 1;
}
.qy-reviews-count {
    font-size: 0.92rem;
    color: var(--gray-500);
}
.qy-reviews-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary-darker);
    white-space: nowrap;
}
.qy-reviews-line:hover .qy-reviews-go { color: var(--navy); }
.qy-reviews-line:hover .qy-reviews-go i { transform: translateX(3px); }
.qy-reviews-go i { transition: transform 0.2s ease; }

/* --- RESEARCH-USE-ONLY notice -------------------------------------------- */
.qy-ruo {
    margin: 40px auto 0;
    max-width: 780px;
    padding: 16px 22px;
    background: var(--gray-50);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--gray-500);
}
.qy-ruo strong { color: var(--gray-700); font-weight: 700; }

/* ============================================================================
   CONTRAST REPAIRS  (qyao.css loads last — these override the engine sheets
   without editing them). Raw #2CB1BC is 2.59:1 on white: never a text colour.
   ========================================================================== */
.section-icon { color: var(--primary-dark); }              /* was #2CB1BC — global.css:209 */

/* The engine makes .section-header h2 inline-block (for its centred underline),
   so an inline-flex .qy-eyebrow flows onto the SAME line as the heading. Force
   the eyebrow onto its own centred line — that's what it was drawn for. */
.section-header .qy-eyebrow {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* ============================================================================
   ===== MOBILE =====
   Every site in this fleet carries an audited mobile block. Keep the marker.
   ========================================================================== */
@media (max-width: 960px) {
    .faq-list { grid-template-columns: 1fr; }
    .qy-hero-cards { grid-template-columns: 1fr; }
    .qy-card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

    /* homepage sections: 5 stats -> 3+2, caps 3 -> 2, routes stay side-by-side */
    .qy-pillars { grid-template-columns: 1fr; }
    .qy-stats { grid-template-columns: repeat(3, 1fr); }
    .qy-stats .qy-stat:nth-child(3n + 1) { border-left: 0; }
    .qy-stats .qy-stat:nth-child(n + 4) { border-top: 1px solid rgba(15, 42, 67, 0.09); }
    .qy-sched-tiers { grid-template-columns: repeat(2, 1fr); }
    .qy-caps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* --- hero: tighter, no floating-card overlap, no blur bloom --------- */
    .qy-hero, .hero-section { padding-top: 44px; }
    .qy-hero::after { display: none; }
    .qy-hero-inner { padding-bottom: 40px; max-width: 100%; }
    .qy-hero-title { font-size: clamp(1.95rem, 8.4vw, 2.6rem); line-height: 1.08; }
    .qy-hero-sub { font-size: 0.98rem; line-height: 1.65; margin-bottom: 24px; }
    .qy-hero-cta { gap: 10px; }
    .qy-hero-cta .qy-pill, .qy-hero-cta .qy-pill-ghost { flex: 1 1 100%; }
    .qy-hero-trust { gap: 8px 18px; margin-top: 22px; }
    .qy-hero-trust span { font-size: 0.8rem; }
    .qy-hero-cards { grid-template-columns: 1fr; gap: 12px; padding-bottom: 36px; }
    .qy-hero-card { padding: 18px; gap: 14px; }
    .qy-hero-card .qy-icon { width: 40px; height: 40px; font-size: 1rem; }
    .qy-hero-card h3 { font-size: 0.92rem; }
    .qy-hero-card p { font-size: 0.84rem; }
    /* photo hero on a phone: wash it harder or the navy heading drowns */
    .qy-hero-media::after {
        background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(240,253,255,0.9) 55%, rgba(1,210,217,0.2) 100%);
    }

    /* --- bands / sections ---------------------------------------------- */
    .qy-band { padding: 52px 0; }
    .qy-section-head { margin-bottom: 28px; }
    .qy-section-head h2 { font-size: clamp(1.5rem, 6.2vw, 1.95rem); }
    .qy-section-head p { font-size: 0.94rem; }
    .qy-card { padding: 20px; border-radius: var(--radius-md); }
    .qy-card-grid { grid-template-columns: 1fr; gap: 14px; }
    .qy-icon { width: 44px; height: 44px; font-size: 1.05rem; margin-bottom: 12px; }

    /* --- stats: 2-up, drop the vertical tick ---------------------------- */
    .qy-stat-row { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .qy-stat + .qy-stat::before { display: none; }
    .qy-stat-value { font-size: 1.7rem; }
    .qy-stat-label { font-size: 0.66rem; letter-spacing: 0.1em; }

    /* --- buttons: full-width pills, thumb-sized -------------------------- */
    .qy-pill, .qy-pill-ghost, .qy-pill-light { width: 100%; padding: 15px 24px; font-size: 0.92rem; }
    .qy-pill-sm { width: auto; }
    .btn-primary, .checkout-btn, .add-to-cart-btn, .pd-add-to-cart { min-height: 46px; }

    /* --- header / topline ----------------------------------------------- */
    .site-flash { font-size: 0.66rem; letter-spacing: 0.03em; padding: 8px 10px; }
    .trust-bar { font-size: 0.6rem; letter-spacing: 0.04em; }
    .header .logo-text, .logo-text { font-size: 1.12rem; }
    .header .logo-text small, .logo-text small { display: none; }
    .header .cart-btn, .cart-btn { padding: 9px 14px; }

    /* --- home components ------------------------------------------------ */
    .section-header h2::after, .trending-header h2::after, .trust-header h2::after {
        width: 44px; margin-top: 10px;
    }
    .deal-card { border-radius: var(--radius-md); }
    .trending-card, .product-card, .pd-related-card, .pd-similar-card { border-radius: var(--radius-md); }
    .qy-eyebrow { font-size: 0.66rem; letter-spacing: 0.13em; }

    /* --- product page ---------------------------------------------------- */
    .pd-trust-section { border-radius: var(--radius-md); }
    .pd-product-image, .pd-details-card, .pd-pricing-card { border-radius: var(--radius-md); }

    /* --- price list: the table becomes cards (pl-mobile-cards) ----------- */
    .pl-table-wrapper { border-radius: var(--radius-md); }
    .pl-cart-bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

    /* --- modals: sheet from the bottom ----------------------------------- */
    .modal-content, .checkout-modal-content {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    /* --- footer ---------------------------------------------------------- */
    .footer::after { display: none; }
    .footer-col h4 { font-size: 0.66rem; }

    /* the bottom nav sits over the page; keep the chat launcher clear of it */
    .sa-launch { bottom: 78px !important; }

    /* --- homepage sections at phone width -------------------------------- */
    .qy-hero-copy { padding-bottom: 34px; max-width: 100%; }
    .qy-hero-trust { gap: 8px 18px; margin-top: 22px; }
    .qy-hero-trust li { font-size: 0.8rem; }
    .qy-hero-cta .qy-hero-link { flex: 1 1 100%; justify-content: center; }
    .qy-pillars { grid-template-columns: 1fr; gap: 12px; padding-bottom: 36px; }
    .qy-pillar { padding: 18px; gap: 14px; }
    .qy-pillar-icon { width: 40px; height: 40px; font-size: 1rem; }

    /* stats: 2-up grid, hairline grid instead of a single row of ticks */
    .qy-stats { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-md); }
    .qy-stats .qy-stat { padding: 20px 12px 18px; }
    .qy-stats .qy-stat + .qy-stat { border-left: 1px solid rgba(15, 42, 67, 0.09); }
    .qy-stats .qy-stat:nth-child(2n + 1) { border-left: 0; }
    .qy-stats .qy-stat:nth-child(n + 3) { border-top: 1px solid rgba(15, 42, 67, 0.09); }
    .qy-stats .qy-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* orphan spans full width */
    .qy-stats .qy-stat-value { font-size: 1.55rem; }
    .qy-stats .qy-stat-label { font-size: 0.62rem; letter-spacing: 0.09em; }

    /* volume schedule: stack head, stack tiers */
    .qy-sched-section, .qy-caps-section, .qy-testing-section { padding: 52px 0; }
    .qy-sched { padding: 22px 20px 20px; border-radius: var(--radius-md); }
    .qy-sched-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .qy-sched-timer { align-items: flex-start; width: 100%; }
    .qy-sched-title { font-size: 1.32rem; }
    .qy-sched-tiers { grid-template-columns: 1fr; gap: 10px; }
    .qy-tier { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
    .qy-tier .deal-tier-value { font-size: 0.95rem; text-align: right; }
    .qy-sched-foot { flex-direction: column; align-items: stretch; gap: 14px; font-size: 0.88rem; }
    .qy-sched-foot .qy-pill-sm { width: 100%; }

    /* two doors: stack, storefront first (it already is in source order) */
    .qy-routes { grid-template-columns: 1fr; gap: 14px; }
    .qy-route { padding: 22px 20px 20px; }
    .qy-route-title { font-size: 1.08rem; }
    .qy-route-lede, .qy-route-list li { font-size: 0.88rem; }
    .qy-route .qy-pill, .qy-route .btn-secondary { width: 100%; align-self: stretch; text-align: center; justify-content: center; }
    .qy-routes-note, .qy-caps-note { font-size: 0.86rem; margin-top: 20px; }

    /* capabilities: stack */
    .qy-caps { grid-template-columns: 1fr; gap: 12px; }
    .qy-cap { padding: 20px; }
    .qy-cap-value { font-size: 1.55rem; }

    /* reviews strip: stack, CTA drops below */
    .qy-reviews-line { padding: 18px 20px; gap: 8px 14px; }
    .qy-reviews-go { margin-left: 0; width: 100%; }
    .qy-reviews-score { font-size: 1.35rem; }

    .qy-ruo { font-size: 0.78rem; padding: 14px 16px; margin-top: 28px; }
}

@media (max-width: 480px) {
    .qy-hero-title { font-size: 1.85rem; }
    .qy-stat-row { grid-template-columns: repeat(2, 1fr); }
    .qy-band { padding: 42px 0; }
    .qy-sched-timer-value { font-size: 0.9rem; }
    .timer-num { min-width: 30px; padding: 6px 6px; font-size: 0.85rem; }
    .qy-tier { flex-direction: column; align-items: flex-start; gap: 6px; }
    .qy-tier .deal-tier-value { text-align: left; }
}

/* ============================================================================
   CONTRAST REPAIRS (mobile) — the bottom nav's active state was raw #2CB1BC
   (2.59:1 on white). Override rather than edit the shared engine sheet.
   ========================================================================== */
@media (max-width: 767px) {
    .bottom-nav-item.active { color: var(--primary-dark); }   /* global.css:1043 */
    .bottom-nav-item:active { color: var(--primary-darker); } /* global.css:1048 */
}

/* === MOTION DISCIPLINE =================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .qy-card:hover, .qy-pill:hover, .trending-card:hover, .product-card:hover { transform: none; }
}

/* === PRINT (datasheets / invoices get printed) =========================== */
@media print {
    .header, .footer, .mobile-bottom-nav, .site-flash, .trust-bar, .sa-launch, .sa-panel { display: none !important; }
    body { background: #fff; color: #000; }
}