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

:root {
    /* --- Primary ramp --- */
    --primary: #4c9130;
    --primary-dark: #3c7226;
    --primary-darker: #2c541c;
    --primary-light: #64bf3f;
    --primary-lighter: #a0cc8e;
    --primary-50: #f4f7f2;
    --primary-100: #e6ede3;

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

    /* --- Accent (erp.css naming: data highlights, sparingly) --- */
    --amber: #41c873;
    --amber-dim: #2d9a55;

    /* --- Neutral ramp (hue-tinted from the primary) --- */
    --white: #fcfdfb;
    --paper: #f1f6ef;
    --porcelain: #f9fcf8;
    --gray-50: #f1f6ef;
    --gray-100: #e6ede3;
    --gray-200: #d5e1d0;
    --gray-300: #b7cab0;
    --gray-400: #84a078;
    --gray-500: #5c7552;
    --gray-600: #44573d;
    --gray-700: #323f2c;
    --gray-800: #212a1d;
    --gray-900: #181e15;
    --ink: #181e15;

    /* --- Borders / surfaces --- */
    --border-subtle: rgba(24, 30, 21, 0.09);
    --border-default: rgba(24, 30, 21, 0.16);
    --hairline: 1px solid rgba(24, 30, 21, 0.12);
    --surface-elevated: #f9fcf8;
    --surface-sunken: #e8f0e5;
    --grid-line: rgba(44, 84, 28, 0.045);

    /* --- Type: register pack --- */
    --font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Archivo', 'Public Sans', 'Songti SC', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* --- Radius character: register --- */
    --radius-sm: 0;
    --radius-md: 2px;
    --radius-lg: 3px;
    --radius-xl: 4px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================================
   KERUI LIGHT REFINEMENT — hand-authored, loads LAST (overrides the generated
   base above). Brief: "white mainly with a hint of green, currently too green
   and contrasty." So: neutralise the green-tinted neutral ramp to near-white,
   soften shadows/borders, lighten the dark flash/footer blocks, keep green only
   as an ACCENT (buttons, links, icons, kickers), and re-author the homepage
   kp-* layer for a light surface. Contrast-audited to exit 0.
   ============================================================================ */

:root {
    /* Neutral ramp — WHITE-dominant, only a whisper of green (was green-tinted) */
    --white: #ffffff;
    --paper: #ffffff;
    --porcelain: #f7f9f6;
    --gray-50:  #f7f9f6;
    --gray-100: #eef1ed;
    --gray-200: #e3e7e2;
    --gray-300: #cdd4cc;
    --gray-400: #6f776d;   /* muted TEXT — kept dark enough to pass AA on white */
    --gray-500: #596157;
    --gray-600: #464d45;
    --gray-700: #343a33;
    --gray-800: #232723;
    --gray-900: #191d18;
    --ink:      #1a1f19;

    /* the "hint of green" — chips/badges only */
    --primary-50:  #f2f7f0;
    --primary-100: #e6efe2;

    /* soft, neutral shadows (less "contrasty") */
    --border-subtle: rgba(20, 28, 18, 0.07);
    --border-default: rgba(20, 28, 18, 0.13);
    --hairline: 1px solid rgba(20, 28, 18, 0.10);
    --surface-elevated: #ffffff;
    --surface-sunken: #f3f6f1;   /* alt-section wash — the visible hint of green */
    --grid-line: rgba(76, 145, 48, 0.05);
    --shadow-sm: 0 1px 2px rgba(20, 28, 18, 0.05);
    --shadow-md: 0 1px 2px rgba(20, 28, 18, 0.04), 0 6px 16px -10px rgba(20, 28, 18, 0.12);
    --shadow-lg: 0 2px 6px rgba(20, 28, 18, 0.05), 0 16px 34px -16px rgba(20, 28, 18, 0.16);
    --shadow-xl: 0 4px 12px rgba(20, 28, 18, 0.06), 0 28px 56px -22px rgba(20, 28, 18, 0.18);
    --shadow-jade: 0 6px 16px -9px rgba(76, 145, 48, 0.28);
}

/* --- base --- */
html, body { background: var(--paper); }
body { color: var(--gray-700); }
a { color: var(--primary-dark); }                 /* AA on white (raw --primary is 3.9:1) */
a:hover { color: var(--primary-darker); }
::selection { background: var(--primary-50); color: var(--primary-darker); }

/* --- GREEN BUTTONS: white label needs a darker green for AA (raw --primary=3.9:1) --- */
.btn-primary, .checkout-btn, .cart-btn, .header .cart-btn,
.view-product-btn, .pd-add-to-cart, .add-to-cart-btn,
.kp-btn-solid, .kp-deal-cta, .filter-btn.active, .category-btn.active,
.pl-cart-bar-checkout, .pl-download-btn, .pl-cat-header, .pl-cat-header td {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .checkout-btn:hover, .cart-btn:hover, .header .cart-btn:hover,
.view-product-btn:hover, .pd-add-to-cart:hover, .add-to-cart-btn:hover,
.kp-btn-solid:hover, .kp-deal-cta:hover {
    background: var(--primary-darker) !important;
    border-color: var(--primary-darker) !important;
    color: #ffffff !important;
}
.pl-download-btn { display: none !important; }   /* WWB PDFs never cloned */

/* --- lighten the dark blocks: keep the shop "mainly white" --- */
.site-flash {
    background: var(--primary-50);
    color: var(--primary-darker);
    border-bottom: 1px solid var(--border-default);
}
.site-flash strong { color: var(--primary-darker); }

.trustpilot-banner { background: var(--surface-sunken); }
.trustpilot-banner:hover { background: var(--gray-100); }
.tp-banner-score, .tp-banner-count, .tp-b-star { color: var(--gray-700); }

.footer {
    background: var(--porcelain);
    color: var(--gray-600);
    border-top: 2px solid var(--primary);
}
.footer-logo { color: var(--ink); }
.footer-logo small { color: var(--gray-500); }
.footer-col h4 { color: var(--gray-500); }
.footer-col a, .footer-col p { color: var(--gray-600); }
.footer-col a:hover { color: var(--primary-dark); }
.footer-bottom { border-top: 1px solid var(--border-default); }
.footer-bottom p { color: var(--gray-500); }
.footer-social a { color: var(--gray-600); border: 1px solid var(--border-default); }
.footer-social a:hover { color: var(--primary-dark); border-color: var(--primary); }

/* cart badge on the (now light) header */
.cart-count, .bottom-nav-badge { background: var(--primary-dark); color: #fff; }

/* green text-on-white elsewhere: use the dark green so it passes AA */
.trending-cta, .nav-link-secondary, .faq-answer a, .faq-answer a[style],
.pd-view-link, .pd-price-text, .cert-link, .kp-verify-link, .kp-section-link {
    color: var(--primary-dark) !important;
}

/* ============================================================================
   HOMEPAGE SIGNATURE LAYER — light surface (kp-* markup from views/index.ejs)
   ============================================================================ */
.kp-section { padding: 4.25rem 0; position: relative; }
.kp-section-sunken {
    background: var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.kp-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; margin-bottom: 2.25rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.kp-kicker {
    display: block; font-family: var(--font-mono); font-size: 0.66rem;
    font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--primary-dark); margin-bottom: 0.5rem;
}
.kp-section-head .section-heading { font-size: 1.75rem; margin: 0; line-height: 1.2; color: var(--ink); }
.kp-section-link {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gray-600); text-decoration: none;
    white-space: nowrap; border-bottom: 1px solid var(--border-default); padding-bottom: 3px;
}
.kp-section-link:hover { color: var(--primary-dark); border-color: var(--primary); }
.kp-section-foot { margin-top: 2rem; text-align: center; }

/* HERO — white, a whisper of green glow (on ::after so the audit reads the real bg) */
.kp-hero {
    position: relative; padding: 4rem 0 3.75rem;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}
.kp-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 115% at 90% -15%, rgba(76, 145, 48, 0.08), transparent 60%),
        linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 46px 46px;
}
.kp-hero > .container { position: relative; z-index: 1; }
.kp-hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,0.85fr); gap: 3rem; align-items: start; }
.kp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gray-600); border: 1px solid var(--border-default);
    border-radius: 100px; padding: 6px 13px; margin-bottom: 1.5rem; background: var(--white);
}
.kp-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px rgba(76,145,48,0.5); }
.kp-hero-title {
    font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1.25rem;
}
.kp-hero-title span { color: var(--primary-dark); }
.kp-hero-title .cn-seal {
    display: inline-block; margin-left: 10px; font-size: 0.5em; font-weight: 400;
    color: var(--primary-dark); border: 1px solid var(--primary-100); background: var(--primary-50);
    border-radius: 3px; padding: 2px 8px; vertical-align: middle;
}
.kp-hero-sub { font-size: 1.02rem; line-height: 1.7; color: var(--gray-600); max-width: 46rem; margin: 0 0 1.75rem; }
.kp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.kp-btn-solid, .kp-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-family);
    font-size: 0.88rem; font-weight: 700; padding: 12px 20px; border-radius: var(--radius-sm);
    text-decoration: none; transition: all 0.18s ease;
}
.kp-btn-ghost { background: var(--white); color: var(--gray-700); border: 1px solid var(--border-default); }
.kp-btn-ghost:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-50); }

/* spec strip — the signature element */
.kp-spec-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin: 0; border-top: 1px solid var(--border-default); }
.kp-spec { padding: 1.1rem 1.25rem 1.1rem 0; border-right: 1px solid var(--border-subtle); }
.kp-spec:last-child { border-right: none; }
.kp-spec dt { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 0.4rem; }
.kp-spec dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.kp-spec dd span { display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.06em; color: var(--gray-500); margin-top: 2px; }

/* deal card */
.kp-deal { background: var(--white); border: 1px solid var(--border-default); border-top: 3px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.kp-deal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border-subtle); background: var(--gray-50); }
.kp-deal-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 0.98rem; }
.kp-deal-title .cn-accent { color: var(--primary-dark); margin-right: 4px; }
.kp-deal-flag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-dark); border: 1px solid var(--primary-100); background: var(--primary-50); border-radius: 100px; padding: 3px 8px; }
.kp-deal-body { padding: 0.4rem 1.1rem; }
.kp-tier { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0.72rem 0; border-bottom: 1px dashed var(--border-subtle); }
.kp-tier:last-child { border-bottom: none; }
.kp-tier-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-600); }
.kp-tier-value { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; color: var(--ink); text-align: right; }
.kp-tier-value em { display: block; font-style: normal; font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; color: var(--primary-dark); }
.kp-deal-timer { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: var(--gray-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.kp-deal-timer-label { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.kp-deal-timer-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--primary-dark); letter-spacing: 0.04em; }
.kp-deal-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.95rem 1rem; color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.kp-deal-foot { padding: 0.8rem 1.1rem; font-size: 0.74rem; color: var(--gray-600); text-align: center; background: var(--white); }
.kp-deal-foot a { color: var(--primary-dark); text-decoration: none; font-weight: 600; }
.kp-deal-foot a:hover { text-decoration: underline; }

/* trust bar */
.kp-trustbar { background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); padding: 0.9rem 0; cursor: pointer; }
.kp-trustbar:hover { background: var(--gray-100); }
.kp-trustbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.kp-trustbar-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp-stars { display: inline-flex; gap: 2px; }
.kp-trustbar-num { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.kp-trustbar-sep { color: var(--gray-400); }
.kp-trustbar-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-600); }
.kp-trustbar-pays { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kp-pay { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-600); white-space: nowrap; }
.kp-pay i { color: var(--gray-400); }
.kp-pay-crypto i { color: var(--warning-yellow); }
.kp-pay-crypto em { font-style: normal; font-weight: 700; color: var(--primary-dark); }
.kp-trustbar-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-dark); text-decoration: none; white-space: nowrap; }
.kp-trustbar-link:hover { text-decoration: underline; }

/* production line */
.kp-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
.kp-line-step { position: relative; padding: 1.6rem 1.25rem 1.6rem 0; border-top: 2px solid var(--primary-100); margin-right: 1.25rem; }
.kp-line-step::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 3px var(--paper); }
.kp-section-sunken .kp-line-step::before { box-shadow: 0 0 0 3px var(--surface-sunken); }
.kp-line-no { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--primary-dark); margin-bottom: 0.6rem; }
.kp-line-step h4 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; color: var(--ink); margin: 0 0 0.4rem; }
.kp-line-step p { margin: 0; font-size: 0.83rem; line-height: 1.6; color: var(--gray-600); }

/* plant mosaic */
.kp-plant { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.kp-plant figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--gray-100); box-shadow: var(--shadow-sm); }
.kp-plant-hero { grid-column: span 3; }
.kp-plant img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; transition: transform 0.5s ease; }
.kp-plant-hero img { aspect-ratio: 21/9; }
.kp-plant figure:hover img { transform: scale(1.03); }
.kp-plant figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: #f2f7ef; background: linear-gradient(180deg, rgba(15,22,10,0) 0%, rgba(15,22,10,0.82) 70%); }
.kp-plant figcaption i { color: #bfe6ab; }

/* verification */
.kp-verify-labs { margin-bottom: 2rem; }
.kp-verify-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 14px; margin-bottom: 1.5rem; }
.kp-verify-card { display: block; padding: 1.5rem 1.4rem; background: var(--white); border: 1px solid var(--border-subtle); border-left: 2px solid var(--primary-100); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.kp-verify-card:hover { border-left-color: var(--primary); border-color: var(--border-default); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kp-verify-icon { font-size: 1.1rem; color: var(--primary-dark); margin-bottom: 0.9rem; }
.kp-verify-card h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0 0 0.55rem; line-height: 1.3; }
.kp-verify-card p { margin: 0 0 0.9rem; font-size: 0.84rem; line-height: 1.62; color: var(--gray-600); }
.kp-verify-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary-dark); }
.kp-community { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 14px; }
.kp-community-card { display: flex; align-items: center; gap: 12px; padding: 1rem 1.2rem; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; color: var(--gray-600); font-size: 0.85rem; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, color 0.2s ease; }
.kp-community-card:hover { border-color: var(--primary); color: var(--ink); }
.kp-community-card i { color: var(--primary-dark); font-size: 1.05rem; }
.kp-community-card strong { color: var(--ink); font-weight: 700; }

/* ============================================================================
   MOBILE OPTIMISATION  (kerui — light theme)
   ============================================================================ */
@media (max-width: 1024px) {
    .kp-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .kp-line { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kp-plant { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kp-plant-hero { grid-column: span 2; }
}
@media (max-width: 760px) {
    .kp-hero { padding: 2.5rem 0 2.25rem; }
    .kp-section { padding: 2.75rem 0; }
    .kp-section-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .kp-section-head .section-heading { font-size: 1.4rem; }
    .kp-hero-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    .kp-hero-sub { font-size: 0.95rem; }
    .kp-spec-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kp-spec { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 0.9rem 0; }
    .kp-spec:nth-child(odd) { border-right: 1px solid var(--border-subtle); padding-right: 0.9rem; }
    .kp-line { grid-template-columns: 1fr; }
    .kp-line-step { margin-right: 0; padding: 1.25rem 0; }
    .kp-plant, .kp-plant-hero { grid-template-columns: 1fr; grid-column: span 1; }
    .kp-trustbar-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    /* full-width, comfortably tappable CTAs */
    .kp-hero-cta { width: 100%; }
    .kp-btn-solid, .kp-btn-ghost { flex: 1 1 auto; justify-content: center; min-height: 46px; }
    .kp-deal-cta { min-height: 48px; }
}
@media (max-width: 420px) {
    .kp-spec-strip { grid-template-columns: 1fr 1fr; }
    .kp-hero-cta { flex-direction: column; }
    .kp-btn-solid, .kp-btn-ghost { width: 100%; }
}

/* ============================================================================
   LIGHT CONTRAST FIXES — round 2 (from contrast-audit on the light theme)
   ============================================================================ */
/* green accents that fail on white → use the dark green (AA) */
.spec-highlight, .pl-price-contact, .company-url, .trust-score-label,
.mobile-nav-link.active, .mobile-nav-link.active i,
.cert-link, .cn-accent { color: var(--primary-dark) !important; }
.mobile-nav-link.active { background: var(--primary-50) !important; }

/* white-on-primary chips/buttons → darken the green so the white passes */
.pl-wh-chip.pl-wh-active, .pl-filter-btn.active, .pl-wh-active,
.badge-tested, .badge-popular { background: var(--primary-dark) !important; color: #fff !important; }

/* footer nav links were a hardcoded pale grey (#a5b1a9) on the now-light footer */
.footer-col ul li a { color: var(--gray-600) !important; }
.footer-col ul li a:hover { color: var(--primary-dark) !important; }

/* verified-labs badge strip (partial ships pale-grey fallbacks) */
.vl-badge .vl-prefix, .vl-badge .vl-sub { color: var(--gray-500) !important; }
.vl-badge .vl-name { color: var(--ink) !important; }

/* the sale-bar countdown sits on a RED bar → all timer text light */
.timer-num, .timer-unit, .timer-sep, .sale-bar-timer, .sale-bar-timer * { color: #fff !important; }

/* review avatars ship inline pastel backgrounds (white initials fail) → one on-brand chip */
.review-avatar { background: var(--primary-50) !important; color: var(--primary-dark) !important; font-weight: 800 !important; }

/* the #525c55 "contact your rep" bar keeps its dark surface → force its text light */
.about-team-contact, .about-team-contact *,
.contact-team-btn, .contact-team-btn * { color: #fff !important; }

/* products page header: solid light bg (the radial-gradient stop confused the audit
   into reading it as a dark/green panel) */
.products-page-header {
    background: var(--surface-sunken) !important;
    background-image: none !important;
}
.products-page-title { color: var(--ink) !important; }
.products-page-subtitle { color: var(--gray-600) !important; }

/* header seal glyph → brand green (global.css hardcodes a crimson #a83a2b) */
.cn-seal { color: var(--primary-dark) !important; border-color: var(--primary) !important; }

/* ============================================================================
   LIGHT CONTRAST FIXES — round 3
   ============================================================================ */
/* timer + cn-accent were forced white in round 2, but on the HOMEPAGE they sit
   on the light deal card, not the red sale-bar. Default dark; white only on .sale-bar. */
.timer-num, .timer-unit, .timer-sep { color: var(--primary-dark) !important; }
.cn-accent { color: var(--primary-dark) !important; }
.sale-bar .timer-num, .sale-bar .timer-unit, .sale-bar .timer-sep,
.sale-bar-timer, .sale-bar-timer *, .sale-bar .cn-accent, .sale-bar-text .cn-accent { color: #fff !important; }

/* checkout step rail (light panels) */
.step-text { color: var(--gray-600) !important; }
.step.active .step-text { color: var(--primary-dark) !important; }
.step-number { color: var(--gray-700) !important; }
.step.active .step-number, .checkout-steps .step.active .step-number,
.step.completed .step-number { background: var(--primary-dark) !important; color: #fff !important; }

/* product page: hardcoded pale-grey labels + green chips on light panels */
.pd-detail-label, .pd-price-label, .pd-section-subtitle { color: var(--gray-600) !important; }
.pd-specification, .pd-breadcrumb-link, .wh-shipping, .review-author-meta,
.company-response-date { color: var(--gray-600) !important; }
.pd-tag-category, .pd-cat-badge, .shipping-price-standard, .shipping-price-express,
.change-warehouse-btn, .change-warehouse-btn small, a.pd-tag,
.pd-test-report-link a, .pd-test-report-link span { color: var(--primary-dark) !important; }
.pd-tag-category, .pd-cat-badge { background: var(--primary-50) !important; }
.promo-code-section .btn, .promo-code-section .btn-secondary, #promoApplyBtn {
    background: var(--primary-dark) !important; color: #fff !important; border-color: var(--primary-dark) !important;
}

/* pricelist raw-material separators (were --gray-300, too pale) */
.pl-raw-sep { color: var(--gray-500) !important; }

/* "Fastest" pill on the amber chip */
.about-team-badge-fastest, .contact-team-badge-fastest { color: #241a04 !important; }

/* trust-bar separator + trending spec nudged just over 4.5 */
.kp-trustbar-sep, .trending-spec, .trending-bulk { color: var(--gray-600) !important; }
.contact-handle, a.contact-handle { color: var(--primary-dark) !important; }

/* trust strip: was a full-width dark-green gradient (read as "too green") →
   subtle white band with green icons, keeps ONE thin green hairline as an accent */
.trust-bar {
    background: var(--white) !important;
    color: var(--gray-700) !important;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: inset 0 2px 0 var(--primary);
}
.trust-bar-item { color: var(--gray-700) !important; }
a.trust-bar-item:hover { color: var(--primary-dark) !important; }
.trust-bar-item i { color: var(--primary-dark) !important; }