/* ============================================================================
   ERP IDENTITY v2 — "night blueprint"
   Shanghai ERP Biotechnology Co., Ltd.
   Loaded AFTER every base stylesheet: this file owns the visual identity.
   The only dark storefront in the fleet: blue-black ink surfaces, action blue,
   instrument amber for data, Chakra Petch display, molecular line-art.
   The neutral ramp is INVERTED here — light-surface vars map to dark panels and
   text grays map to light — so every var()-driven page goes dark coherently.
   ============================================================================ */

:root {
    /* Action blue ramp */
    --primary: #4f7dff;
    --primary-dark: #3b63d9;
    --primary-darker: #2b49a8;
    --primary-light: #7d9fff;
    --primary-lighter: #b3c6ff;
    --primary-50: #141f3a;
    --primary-100: #1a2a4d;
    --secondary-green: #35b57f;
    --success-green: #35b57f;
    --warning-yellow: #f0b429;
    --error-red: #e5533f;
    --accent-navy: #f4f7fb;

    /* Instrument amber — data, prices, the schedule. Sparingly. */
    --amber: #f0b429;
    --amber-dim: #b7871e;

    /* INVERTED neutrals: "white" is now a dark panel, "gray-900" is near-white */
    --white: #111a29;
    --paper: #0b0f17;
    --porcelain: #0e1520;
    --gray-50: #0e1520;
    --gray-100: #16202f;
    --gray-200: #22304a;
    --gray-300: #31425f;
    --gray-400: #8291a9;   /* lifted from #5b6b85: was only 3.5:1 on the dark footer */
    --gray-500: #8b99b0;
    --gray-600: #a5b2c6;
    --gray-700: #c2cddd;
    --gray-800: #e2e8f1;
    --gray-900: #f4f7fb;
    --ink: #f4f7fb;

    --border-subtle: rgba(139, 153, 176, 0.14);
    --border-default: rgba(139, 153, 176, 0.24);
    --hairline: 1px solid rgba(139, 153, 176, 0.18);
    --surface-elevated: #14203450;
    --surface-sunken: #080c12;
    --grid-line: rgba(79, 125, 255, 0.055);

    /* Type: Chakra Petch display / IBM Plex Sans text / IBM Plex Mono data */
    --font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Chakra Petch', 'IBM Plex Sans', 'Noto Sans SC', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Dark-surface shadows: glow-edges instead of drop shadows */
    --shadow-sm: 0 0 0 1px rgba(139, 153, 176, 0.1);
    --shadow-md: 0 0 0 1px rgba(139, 153, 176, 0.12), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 0 0 1px rgba(139, 153, 176, 0.14), 0 16px 40px -16px rgba(0, 0, 0, 0.9);
    --shadow-xl: 0 0 0 1px rgba(79, 125, 255, 0.2), 0 24px 60px -20px rgba(0, 0, 0, 0.95);
    --shadow-jade: 0 0 24px -6px rgba(79, 125, 255, 0.55);
}

/* === BASE ================================================================ */
html { background: var(--paper); }
body {
    font-family: var(--font-family);
    background: var(--paper);
    color: var(--gray-700);
}
h1, h2, h3, h4, .section-heading {
    font-family: var(--font-display);
    letter-spacing: 0.005em;
    color: var(--ink);
}
a { color: var(--primary-light); }
::selection { background: var(--primary-darker); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
img { filter: none; }

.cn-accent { font-family: 'Noto Sans SC', var(--font-family); }
/* Kill the template's seal chip everywhere — not part of this identity */
.cn-seal { display: none !important; }

/* === TOPLINE (flash banner) ============================================== */
.site-flash {
    background: var(--surface-sunken);
    color: var(--amber);
    border-bottom: 1px solid rgba(240, 180, 41, 0.25);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 12px;
    text-align: center;
}
.site-flash strong { font-weight: 600; color: var(--amber); }

/* === HEADER — floating console bar ====================================== */
.header {
    background: rgba(11, 15, 23, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
    position: sticky;
    top: 0;
}
.header .logo-img { display: none; }               /* wordmark-only lockup */
.header .logo-text {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
}
.header .logo-text small {
    color: var(--gray-400);
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0.08em;
    font-size: 0.55rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-links { list-style: none; gap: 4px; }
.nav-links li { list-style: none; }
.nav-link {
    font-family: var(--font-family);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--gray-500);
    border-radius: var(--radius-md);
    padding: 7px 11px;
    border-bottom: none;
    white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--gray-100); }
.nav-link.active { color: var(--ink); background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-darker); }
.nav-link-secondary { color: var(--amber-dim); }
.nav-link-secondary:hover { color: var(--amber); }

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

/* vo-dd dropdown (Verified On) — dark panel */
.vo-dd-menu { background: var(--white) !important; border-color: var(--border-default) !important; box-shadow: var(--shadow-lg) !important; }
.vo-dd-menu a { color: var(--gray-600) !important; }
.vo-dd-menu a:hover { background: var(--gray-100) !important; color: var(--ink) !important; }
.vo-dd-menu i { color: var(--primary) !important; }

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

/* === NIGHT-PRINT HERO ==================================================== */
.np-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 78% 8%, rgba(79, 125, 255, 0.13), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        var(--paper);
    background-size: auto, 34px 34px, 34px 34px, auto;
    border-bottom: var(--hairline);
    padding: 76px 0 0;
}
.np-molecule {
    position: absolute;
    top: 30px;
    right: -60px;
    width: 560px;
    max-width: 55vw;
    opacity: 0.5;
    pointer-events: none;
}
.np-kicker {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
    margin-bottom: 26px;
}
.np-kicker span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.np-kicker .tick { color: var(--amber); }
.np-hero h1 {
    position: relative;
    font-size: clamp(2.3rem, 5.4vw, 4rem);
    font-weight: 700;
    line-height: 1.06;
    max-width: 21ch;
    margin-bottom: 22px;
}
.np-hero h1 .lit { color: var(--primary-light); }
.np-hero-sub {
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--gray-500);
    max-width: 56ch;
    margin-bottom: 30px;
}
.np-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 58px; }
.np-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--primary); color: #fff;
    font-family: var(--font-family); font-size: 0.92rem; font-weight: 600;
    padding: 14px 26px; border-radius: var(--radius-md);
    text-decoration: none; border: none;
    box-shadow: var(--shadow-jade);
    transition: background var(--transition-fast);
}
.np-btn:hover { background: var(--primary-dark); }
.np-btn-line {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; color: var(--gray-600);
    font-family: var(--font-family); font-size: 0.92rem; font-weight: 500;
    padding: 14px 26px; border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.np-btn-line:hover { border-color: var(--gray-400); color: var(--ink); }
.np-link { font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary-light); text-decoration: none; }
.np-link:hover { color: var(--amber); }

/* Instrument readout strip — the hero's data footer */
.np-readout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: var(--hairline);
    background: rgba(14, 21, 32, 0.7);
    backdrop-filter: blur(6px);
}
.np-readout > * {
    padding: 18px 22px;
    border-right: var(--hairline);
    text-decoration: none;
}
.np-readout > *:last-child { border-right: none; }
.np-readout .ro-val {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--amber);
    margin-bottom: 3px;
}
.np-readout .ro-key {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
}
a.np-readout-cell:hover .ro-val { color: var(--primary-light); }

/* === VOLUME SCHEDULE BAND ================================================ */
.np-sched {
    background: linear-gradient(180deg, #10121c, #0c0e16);
    border-bottom: 1px solid rgba(240, 180, 41, 0.18);
    padding: 26px 0;
}
.np-sched-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 36px; }
.np-sched-title { flex-shrink: 0; }
.np-sched-title .t1 {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.np-sched-title .t2 {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-top: 2px;
}
.np-sched-title .t2 #promoTimerCard { color: var(--gray-700); }
.np-sched-tiers { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.np-tier {
    border: 1px solid rgba(240, 180, 41, 0.28);
    border-radius: var(--radius-md);
    padding: 9px 16px;
    background: rgba(240, 180, 41, 0.06);
}
.np-tier .deal-tier-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.np-tier .deal-tier-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--amber);
}
.np-sched .np-link { flex-shrink: 0; }

/* === SECTIONS ============================================================ */
.erp-section { padding: 72px 0; border-bottom: var(--hairline); }
.erp-section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 34px; flex-wrap: wrap; }
.erp-section-head .idx {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
    color: var(--primary-light); letter-spacing: 0.12em;
}
.erp-section-head h2 { font-size: 1.7rem; font-weight: 700; }
.erp-section-head .sub { font-size: 0.9rem; color: var(--gray-400); }

/* === VERIFICATION TILES ================================================== */
.np-verify { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.np-verify-tile {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px 24px 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.np-verify-tile::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent 70%);
    opacity: 0; transition: opacity var(--transition-fast);
}
.np-verify-tile:hover { border-color: var(--primary-darker); box-shadow: var(--shadow-xl); }
.np-verify-tile:hover::before { opacity: 1; }
.np-verify-idx {
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.14em; color: var(--gray-400);
    display: block; margin-bottom: 12px;
}
.np-verify-tile h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 8px; }
.np-verify-tile p { font-size: 0.86rem; line-height: 1.6; color: var(--gray-500); margin-bottom: 14px; }
.np-verify-link {
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light);
}
.np-verify-tile:hover .np-verify-link { color: var(--amber); }

/* === PROCESS TIMELINE ==================================================== */
.np-seq { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.np-seq::before {
    content: '';
    position: absolute; top: 14px; left: 14px; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, var(--primary-darker), var(--border-default));
}
.np-seq-step { position: relative; padding-top: 40px; }
.np-seq-step::before {
    content: '';
    position: absolute; top: 8px; left: 8px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--primary);
}
.np-seq-num {
    position: absolute; top: 4px; left: 32px;
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.12em; color: var(--gray-400);
}
.np-seq-step h4 { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.np-seq-step p { font-size: 0.82rem; color: var(--gray-500); line-height: 1.55; }

/* === REVIEWS BAND ======================================================== */
.reviews-line {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px 26px;
    text-decoration: none; color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reviews-line:hover { border-color: var(--primary-darker); box-shadow: var(--shadow-xl); }
.reviews-line .score { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; color: var(--amber); }
.reviews-line .stars { color: var(--amber); font-size: 0.85rem; letter-spacing: 3px; }
.reviews-line .count { font-size: 0.88rem; color: var(--gray-500); }
.reviews-line .go { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light); }

/* === PAYMENT INDEX ======================================================= */
.pay-index { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-index .pay-badge {
    background: var(--gray-100); border: 1px solid var(--border-subtle);
    box-shadow: none; border-radius: 100px;
    font-family: var(--font-family); font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0; text-transform: none; color: var(--gray-600);
    padding: 7px 15px;
    display: inline-flex; align-items: center; gap: 8px;
}
.pay-index .pay-badge i { color: var(--gray-500) !important; }
.pay-crypto-tag {
    background: var(--amber); color: #241a02; font-size: 0.62rem; font-weight: 700;
    padding: 2px 7px; border-radius: 100px; letter-spacing: 0.04em;
}

/* === FACILITY ============================================================ */
.lab-video-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    overflow: hidden;
    background: var(--white);
}
.lab-video-card img { opacity: 0.88; }
.lab-video-label {
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(8, 12, 18, 0.82); color: var(--gray-700);
}

/* === TRENDING CARDS ====================================================== */
.trending-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.trending-card:hover { border-color: var(--primary-darker); box-shadow: var(--shadow-xl); transform: translateY(-2px); }
.trending-card-image { background: #fff; border-radius: var(--radius-md); }
.trending-category {
    font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--primary-50); color: var(--primary-light);
    border: none; border-radius: 3px;
}
.trending-badge { border-radius: 3px; font-family: var(--font-mono); }
.trending-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.trending-spec { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-400); }
.trending-price-value { font-family: var(--font-mono); font-weight: 700; color: var(--amber); }
.trending-bulk { font-family: var(--font-mono); color: var(--gray-500); }
.trending-cta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light); }

/* === FAQ — two-column grid =============================================== */
.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-lg);
    background: var(--white);
    box-shadow: none;
    margin-bottom: 0;
}
.faq-item.open { border-color: var(--primary-darker); background: var(--white); }
.faq-question {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--gray-800);
    background: transparent;
}
.faq-question i { color: var(--primary-light); font-size: 0.7em; }
.faq-answer p { font-size: 0.87rem; line-height: 1.65; color: var(--gray-500); }
.faq-answer a { color: var(--primary-light) !important; }

/* === MODALS / TOAST ====================================================== */
.modal { background: rgba(4, 6, 10, 0.78); }
.modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xl);
    color: var(--gray-700);
}
.modal-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.modal-close { color: var(--gray-500); }
.notification-toast {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--primary);
    box-shadow: var(--shadow-xl);
    color: var(--gray-700);
}
.step-number { font-family: var(--font-mono); border-radius: 3px; }
input, textarea, select {
    background: var(--gray-50);
    color: var(--gray-800);
    border-color: var(--gray-200);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

/* === MOBILE MENU / BOTTOM NAV ============================================ */
.mobile-menu { background: var(--porcelain); color: var(--gray-700); }
.mobile-menu-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--gray-400); }
.mobile-nav-link { color: var(--gray-600); border-radius: var(--radius-md); }
.mobile-nav-link.active { background: var(--primary-50); color: var(--primary-lighter); }
.mobile-menu-footer a { color: var(--gray-500); }
.mobile-bottom-nav { background: rgba(11, 15, 23, 0.96) !important; border-top: 1px solid var(--border-subtle) !important; backdrop-filter: blur(10px); }
.bottom-nav-item { color: var(--gray-400); font-family: var(--font-mono); font-size: 0.6rem; }
.bottom-nav-item.active { color: var(--primary-light); }
.bottom-nav-badge { background: var(--amber); color: #241a02; font-family: var(--font-mono); }

/* === FOOTER — terminal plate ============================================= */
.footer {
    background: var(--surface-sunken);
    color: var(--gray-500);
    border-top: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}
.footer-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(79, 125, 255, 0.22);
    user-select: none;
    pointer-events: none;
    position: absolute;
    bottom: -18px;
    right: 8px;
}
.footer-logo { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.footer-logo small { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.footer-logo-img { display: none; }
.footer-col h4 {
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-400);
    border-bottom: none;
}
.footer-col a { color: var(--gray-500); }
.footer-col a:hover { color: var(--primary-light); }
.footer-col p { color: var(--gray-500); }
.footer-bottom { border-top: var(--hairline); position: relative; z-index: 1; }
.footer-bottom p { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--gray-400); }
.footer-social a { color: var(--gray-500); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.footer-social a:hover { color: var(--primary-light); border-color: var(--primary-darker); }

/* === PAGE-CSS DARK PATCHES ==============================================
   Per-page stylesheets are token-driven, but a few hardcoded light surfaces
   need explicit dark overrides so no page shows a white flash. */
.section-alt { background: var(--porcelain); }
.products-hero, .page-hero { background: var(--porcelain); }
.trustpilot-banner { background: var(--porcelain); }
.tp-b-star { filter: none; }

/* === SKIP LINK =========================================================== */
.skip-link:focus { background: var(--amber); color: #241a02; font-family: var(--font-mono); }

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

/* === RESPONSIVE ========================================================== */
@media (max-width: 960px) {
    .np-molecule { display: none; }
    .np-readout { grid-template-columns: repeat(2, 1fr); }
    .np-readout > * { border-bottom: var(--hairline); }
    .np-seq { grid-template-columns: 1fr 1fr; }
    .np-seq::before { display: none; }
    .faq-list { grid-template-columns: 1fr; }
    .np-verify { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .site-flash { font-size: 0.56rem; letter-spacing: 0.08em; }
    .np-hero { padding-top: 44px; }
    .np-hero-cta { margin-bottom: 38px; }
    .np-readout { grid-template-columns: 1fr 1fr; }
    .np-readout > * { padding: 13px 16px; }
    .np-readout .ro-val { font-size: 1.05rem; }
    .np-seq { grid-template-columns: 1fr; }
    .np-sched-inner { flex-direction: column; align-items: flex-start; }
    .erp-section { padding: 48px 0; }
    .footer-wordmark { display: none; }
}

/* ============================================================================
   LIGHT-SURFACE TEXT CONTRAST  (added 2026-07-13)

   ERP is the only dark shop: erp.css INVERTS the neutral ramp, so --ink is now
   near-WHITE (#f4f7fb) instead of near-black. Every rule in the page stylesheets
   that pairs a HARDCODED LIGHT background (#fff, #eff6ff, #edece5, …) with
   `color: var(--ink)` / `var(--gray-600)` therefore renders white-or-grey text on
   a white pill — invisible. (Reported live: the "Weight Loss & GLP-1" subcategory
   tag on /product/RT30P measured 1.01:1 contrast; the crypto address + confirm
   note in CHECKOUT were grey-on-light.)

   RULE: a light background always gets near-BLACK text — never grey, never white.
   Audit with the contrast scanner; every selector below was flagged at <4.5:1.
   ========================================================================== */
:root {
    --ink-on-light: #0b0f17;   /* near-black — text ON a light surface */
    --muted-on-light: #3d4757; /* only for genuinely secondary text on light */
}

/* product page — category / subcategory tags (the reported bug) */
.pd-tag-subcategory { color: var(--ink-on-light); }
.pd-tag-subcategory:hover {
    background-color: #dbeafe;         /* was var(--ink) => near-white on white */
    color: var(--ink-on-light);
    border-color: #93b4fd;
}
.pd-tag-category { color: var(--ink-on-light); }

/* checkout / cart — crypto address + confirmation note were grey on light */
.crypto-address { color: var(--ink-on-light); }
.confirm-note   { color: var(--ink-on-light); }
.remove-item-btn:hover { color: #a52714; }   /* keep it red, but readable */

/* NOTE: .site-flash is NOT in this list on purpose — erp.css already re-themes it
   to a DARK surface (--surface-sunken) with amber text, so it reads fine. The raw
   scan flags global.css's original light-bg rule, which never survives the cascade.
   Forcing dark text there would break it. */

/* misc light-surface chips/buttons flagged by the scan */
.tp-banner-btn      { color: var(--ink-on-light); }
.ws-progress-circle { color: var(--ink-on-light); }
.bcc-tier-std       { color: #6b4a0d; }
.footer-social a    { color: var(--muted-on-light); }
.about-team-btn-wa, .contact-team-btn-wa { color: #14603c; }
.about-team-btn-tg, .contact-team-btn-tg { color: #005b8c; }

/* ============================================================================
   LIGHT-SURFACE SCOPES — re-invert the ramp INSIDE light panels (2026-07-13, v2)

   Why v1 wasn't enough: the first pass only fixed rules that declared a background
   AND a color together. But most breakage comes from a light background declared in
   ONE rule and the text color inherited from ANOTHER (or from the browser default —
   an <input> with no background is WHITE). Example that shipped: cart.css
   `.form-group input:focus { background:#fff }` + erp.css `input { color: var(--gray-800) }`
   = near-white text on a white field, i.e. you could not read what you typed into
   CHECKOUT. A live getComputedStyle audit found 50 such elements.

   Fix: inside every light surface, redefine the neutral ramp back to its LIGHT-THEME
   (dark-text) values. Descendants using var(--ink)/var(--gray-*) then resolve to dark
   text automatically — no need to enumerate every child class.
   RULE: light background => near-BLACK text. Never grey, never white.
   ========================================================================== */
/* ONLY genuinely LIGHT panels may appear here. Scoping a DARK container by mistake
   flips its text to dark-on-dark — `.checkout-step` (the whole dark step pane, not
   the little white step chip) was briefly in this list and made "Order Review",
   "Full Name" and the shipping options unreadable. Verify each selector's computed
   background is actually light before adding it. */
.pd-breadcrumb, .pd-details-card, .pd-product-image, .pd-qty-control,
.promo-code-section, .spend-notification, .confirm-note, .crypto-address,
.pd-cat-badge, .vl-badge,
.sa-panel, .sa-body, .sa-chips, .sa-disc, .sa-foot,
.pd-tag-category, .pd-tag-subcategory,
/* LIGHT GRADIENT panels — a plain backgroundColor scan cannot see these (they paint
   via background-image), which is exactly how "Subtotal:", the step bar and the
   similar-product names stayed invisible after the first two passes: */
.checkout-steps, .payment-guide, .order-total,
.pd-pricing-card, .pd-price-item, .pd-similar-card {
    --ink: #171c18;
    --gray-900: #171c18;
    --gray-800: #232a2f;
    --gray-700: #2f3742;
    --gray-600: #3d4757;
    --gray-500: #4d5766;
    --gray-400: #5b6675;   /* labels/placeholders on light: dark enough to read */
    --gray-300: #94a3b8;
    --gray-200: #cbd5e1;
    --gray-100: #e2e8f0;
    --gray-50:  #f1f5f9;
    --white: #ffffff;
    --paper: #ffffff;
    --porcelain: #f7f6f1;
    color: var(--ink-on-light);
}

/* Form fields: cart.css turns the background WHITE on hover/focus, so the text must
   be dark in those states or you cannot read your own typing in checkout. */
.form-group input, .form-group textarea, .form-group select,
.promo-code-row input {
    color: var(--gray-800);                    /* dark-surface default (erp.css ramp) */
}
.form-group input:hover, .form-group textarea:hover, .form-group select:hover,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    background: #ffffff;
    color: var(--ink-on-light);                /* white field => near-black text */
    -webkit-text-fill-color: var(--ink-on-light);
}
.form-group input:hover::placeholder, .form-group input:focus::placeholder,
.form-group textarea:hover::placeholder, .form-group textarea:focus::placeholder {
    color: #5b6675;
}
/* autofill: Chrome forces its own light background — keep the text dark there too */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink-on-light);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}
.pd-qty-input, input.pd-qty-input {
    color: var(--ink-on-light);
    -webkit-text-fill-color: var(--ink-on-light);
}
.checkout-item:hover { color: var(--ink-on-light); }

/* --- WWB palette leftovers: DARK text sitting on ERP's DARK panels -----------
   The identity pass replaced some hardcoded WWB hexes with tokens but missed these
   (teal #0d5c63, navy #1e40af/#2b49a8, forest #0d4f38, greys #525c55/#5b6b85).
   On a light theme they read fine; on ERP's dark panels they are near-invisible
   (1.8–3.5:1). Lift them onto the ERP ramp. Counterpart of the light-surface block
   above: DARK background => LIGHT text. (checkout.js's inline copies of the same
   hexes were recolored at source — CSS cannot override an inline style.) */
/* Genuinely on DARK panels => lift onto the light end of the ramp. */
.checkout-item-price,
.shipping-price-standard, .shipping-price-express,
.payment-info-title, .payment-info-summary {
    color: var(--primary-light);
}
.pd-qty-label, .mobile-menu-title { color: var(--gray-500); }

/* On LIGHT panels => keep the colour DARK. These read as "accent colours" so it is
   tempting to lift them like the ones above — but .pd-price-text/.pd-view-link live
   on the WHITE similar-product card and .pd-price-amount on the WHITE pricing card,
   so lifting them (an earlier pass made the price amber) destroyed them. */
.pd-price-text { color: #0b5a61; }
.pd-view-link, .pd-price-amount { color: #23408f; }
.checkout-steps .step-number, .checkout-steps .step-text { color: #3d4757; }
.payment-guide-header span, .payment-guide-header strong { color: #1a3a96; }
.order-total .discount-amount, .order-total .discount-row span { color: #14603c; }
.pd-badge-new { color: #23408f; }

/* Two gradients ramp from a dark stop to a LIGHT stop, so their light text falls off
   the readable end. Keep them dark for their whole width instead. */
.pd-header { background: linear-gradient(135deg, #0e1520 0%, #16233d 100%); }
.change-warehouse-btn { background: linear-gradient(135deg, #16233d 0%, #0e1520 100%); }

/* --- and the mirror image: light-card text that stayed light ----------------
   .pd-detail-label + .pd-breadcrumb-link ARE on light surfaces (details card /
   breadcrumb bar) => dark text. .pd-specification and .pd-similar-spec sit on the
   DARK hero + dark product cards, so they need LIGHT text — darkening them (a first
   pass did) made them invisible. Same class name, opposite surface: always confirm
   the computed background before picking a direction. */
.pd-detail-label,
.pd-breadcrumb-link {
    color: #3d4757;
}
.pd-specification, .pd-similar-spec { color: var(--gray-500); }

/* remaining WWB darks that live in the page CSS (not inline) */
.payment-guide-header span { color: var(--primary-light); }
.pd-bulk-price, .pd-success { color: var(--secondary-green); }
.pd-badge-best-value, .pd-mini-badge-best { color: #0b0f17; }   /* on a light badge */
.policy-guarantee h4 { color: var(--secondary-green); }

/* --- white-on-blue CTAs: #4f7dff is only 3.68:1 against white ---------------
   Fine for large bold text, but "Cart", "Apply" and the step number are small.
   Use the darker blue for filled buttons: white then clears AA (~5:1). */
.btn-primary, .checkout-btn, .header .cart-btn,
.promo-code-row button, .step.active .step-number {
    background: var(--primary-dark);
}
.btn-primary:hover, .checkout-btn:hover, .header .cart-btn:hover {
    background: var(--primary-darker);
}
.shipping-price-standard, .shipping-price-express { color: var(--primary-light) !important; }

/* final sweep — light-panel labels/values that carry their own hardcoded colour */
.pd-price-label { color: #3d4757; }
.order-total .total-row span, .order-total .total-amount,
.order-total .order-total-value { color: #14603c; }
.payment-guide-header span span,
.payment-guide-header small,
.payment-guide .payment-guide-sub { color: #3d4757; }