/* ============================================================================
   POLYPEPTIDE GROUP — brand layer
   ----------------------------------------------------------------------------
   Loaded AFTER /css/polypeptide.css (which generate-identity.js regenerates and
   would overwrite). Everything hand-authored for this shop lives HERE.
   See site-factory/SCAFFOLD-RUNBOOK.md 9.3.

   Source of truth: brand-references/polypeptidegroup/colour-theme.md
     #96C100  signature lime   - the mark, rules, chips, fills   (NEVER body text)
     #709206  lime, deepened   - hover/active fills, bottom borders
     #5C7A05  --primary        - solid buttons; white text clears AA at 5.0:1
     #0095EB  secondary blue   - icon boxes only
     #161922  near-black       - dark sections, footer, top strips
     #3C3C3C  wordmark grey    - headings + nav ink
     #EBEBEB / #F7F7F7 / #F2F2F2 - light section grounds
   The generated ramp is hue-tinted olive; PolyPeptide's is a TRUE neutral grey,
   so the ramp is re-declared here rather than left tinted.
   ============================================================================ */

:root {
    /* --- Brand ------------------------------------------------------------ */
    --brand-lime: #96C100;
    --brand-lime-dark: #709206;
    --brand-blue: #0095EB;
    --brand-ink: #161922;
    --brand-wordmark: #3C3C3C;

    /* Accent tokens the generated sheet exposes (data highlights) */
    --amber: #96C100;
    --amber-dim: #709206;

    /* --- True-neutral ramp (replaces the olive-tinted one) ---------------- */
    --white: #FFFFFF;
    --paper: #F7F7F7;
    --porcelain: #FFFFFF;
    --gray-50:  #FAFAFA;
    --gray-100: #F2F2F2;
    --gray-200: #EBEBEB;
    --gray-300: #D3D3D3;
    --gray-400: #A8A8A8;
    --gray-500: #5F5F5F;   /* #747474 is the brand's own secondary grey but lands
                              at 4.0-4.4:1 as TEXT on the light grounds; deepened
                              so every role that uses it clears AA */
    --gray-600: #626262;
    --gray-700: #545454;
    --gray-800: #3C3C3C;
    --gray-900: #22252C;
    --ink: #161922;

    /* The generated brand tints are dark enough that --primary as a LINK on them
       lands at 4.33-4.47:1 (the /reports vendor links, the /wholesale email
       link). Lightened until #5C7A05 clears 4.5:1 with headroom. */
    --primary-50: #FAFCF5;
    --primary-100: #F6F9EF;

    --accent-navy: #161922;

    --border-subtle: #EBEBEB;
    --border-default: #D3D3D3;
    --hairline: 1px solid #EBEBEB;
    --surface-elevated: #FFFFFF;
    --surface-sunken: #F2F2F2;
    --grid-line: rgba(22, 25, 34, 0.045);

    /* --- Squarer geometry: the brand's cards and buttons are near-rectangular */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;

    /* --- Flatter, neutral shadows ---------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(22, 25, 34, 0.06);
    --shadow-md: 0 1px 2px rgba(22, 25, 34, 0.05), 0 6px 14px -10px rgba(22, 25, 34, 0.18);
    --shadow-lg: 0 2px 4px rgba(22, 25, 34, 0.05), 0 14px 28px -16px rgba(22, 25, 34, 0.22);
    --shadow-xl: 0 4px 10px rgba(22, 25, 34, 0.06), 0 26px 48px -22px rgba(22, 25, 34, 0.26);
    --shadow-jade: 0 6px 16px -10px rgba(92, 122, 5, 0.45);

    /* --- Type: humanist sans, closest available match to the wordmark ----- */
    --font-display: 'Source Sans 3', 'Inter', 'Noto Sans SC', sans-serif;
    --font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

body { background: #FFFFFF; color: var(--gray-800); }
h1, h2, h3, h4, .section-heading, .section-header h2 {
    font-family: var(--font-display);
    color: var(--brand-ink);
    letter-spacing: -0.005em;
}

/* --- Header: white, hairline, real lockup -------------------------------- */
.header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: none;
}
.logo { gap: 14px; }
.logo-mark {
    width: 196px;
    height: auto;
    max-height: 38px;
    display: block;
    border-radius: 0;
    box-shadow: none;
    flex: 0 0 auto;
}
/* The lockup already carries the wordmark, so the header does not repeat the
   legal name (it overlapped the nav at 1440px and is in the footer already).
   The seal sits beside the mark as the fleet's shared identity cue. */
.logo-seal {
    font-size: 0.9rem;
    line-height: 1;
    padding: 3px 5px;
    flex: 0 0 auto;
}
/* The seal sits on white AND on the hero's tinted ground; #709206 clears neither
   at 4.5:1, so it uses the deepest brand green. */
/* .hero-title span (0,1,1) outranks a bare .cn-seal, so the hero's seal kept
   --primary and sat at 4.35:1 on the hero wash. Restate it at that specificity. */
.hero-title span.cn-seal { color: #4A6304; }
.cn-seal {
    color: #4A6304;
    border: 1px solid var(--brand-lime);
    background: transparent;
    border-radius: 2px;
}

/* products.css re-declares .nav-links/.nav-link with its own padding and font
   size, so the SAME header wrapped to two rows on /products (92px tall) and one
   everywhere else. Pin the sizing here, above every page sheet, so the header is
   identical on all pages at every desktop width. */
/* The engine swaps to the hamburger at 767px, which the template's three-letter
   wordmark could just about carry. A real 196px lockup plus eight nav items plus
   the warehouse chip and cart cannot fit a 768-1199px viewport on one row, so
   the swap happens at 1200px here and the tablet range gets the mobile menu the
   phone range already uses. Nothing is lost: .mobile-menu carries every link. */
@media (max-width: 1199px) {
    .nav-desktop { display: none; }
    .hamburger-btn { display: flex; }
}
@media (min-width: 1200px) {
    .nav-desktop .nav-links { flex-wrap: nowrap; gap: 2px; }
    .nav-desktop .nav-link {
        padding: 8px 9px;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* Nav: wordmark grey, lime underline on hover/active (the brand's own cue) */
.nav-link { color: var(--gray-800); font-weight: 500; border-radius: 0; }
.nav-link:hover { color: var(--brand-ink); background: transparent; box-shadow: inset 0 -3px 0 var(--brand-lime); }
.nav-link.active { color: var(--brand-ink); background: transparent; box-shadow: inset 0 -3px 0 var(--brand-lime); }
.nav-link-secondary { color: var(--primary); font-weight: 600; }
.nav-link-secondary:hover { color: var(--primary-dark); }

.header .warehouse-btn, .warehouse-btn { border-color: var(--gray-300); color: var(--gray-700); border-radius: 2px; }
.header .warehouse-btn:hover, .warehouse-btn:hover { border-color: var(--brand-lime); color: var(--brand-ink); }
.header .cart-btn, .cart-btn { border-radius: 2px; box-shadow: none; }
.header .cart-btn:hover, .cart-btn:hover { background: var(--brand-lime-dark); }

/* --- Dark strips: near-black, not olive-black ---------------------------- */
.site-flash, .sale-bar, .trust-bar, .footer, .footer-bottom {
    background-color: var(--brand-ink) !important;
    background-image: none !important;
}
.site-flash strong, .sale-bar .timer-num { color: var(--brand-lime); }
.trust-bar, .trust-bar-item { color: #FFFFFF; }
/* The stat row appears on BOTH grounds. Lime reads 8.4:1 on the ink ribbon and
   2.0:1 on the light one, so it is scoped to the dark ground only and the light
   one uses --primary (SCAFFOLD-RUNBOOK 9.4). */
.trust-stat-value { color: var(--primary); }
.trust-bar .trust-stat-value, .footer .trust-stat-value { color: var(--brand-lime); }
/* Footer copy inherits --gray-500/-600 roles that are tuned for light grounds.
   Several of those roles are written INLINE (style="color: var(--gray-500)"),
   which no class rule can outrank — so the tokens themselves are re-pointed
   for the footer's dark ground instead. --gray-800 is left alone: the mobile
   contact popup inside the footer is a LIGHT card and reads it. */
.footer, .footer-bottom {
    --gray-400: #A8ADB5;
    --gray-500: #C9CCD1;
    --gray-600: #C9CCD1;
}
.footer p, .footer-col p, .footer-bottom p, .footer-copyright { color: #C9CCD1; }

/* --- Buttons ------------------------------------------------------------- */
.btn { border-radius: 2px; letter-spacing: 0.01em; }
.btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--brand-lime-dark); border-color: var(--brand-lime-dark); box-shadow: none; transform: none; }
.btn-secondary { background: #FFFFFF; color: var(--gray-800); border: 1px solid var(--gray-300); box-shadow: none; }
.btn-secondary:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: #FFFFFF; }
.checkout-btn { border-radius: 2px; }
.checkout-btn:hover { background: var(--brand-lime-dark); }

/* --- Signature: the chromatogram-peak rule ------------------------------- */
/* The mark is a peak trace; every section heading gets a short lime rule that
   echoes it. Kept as a border rather than an image so it costs nothing. */
.section-heading, .section-header h2 { position: relative; padding-bottom: 14px; }
.section-heading::after, .section-header h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 4px;
    background: var(--brand-lime);
}

/* --- Cards: flat, hairline, lime on hover -------------------------------- */
.trending-card {
    background: #FFFFFF;
    border: 1px solid var(--gray-200);
    border-radius: 3px;
    box-shadow: none;
}
.trending-card:hover {
    border-color: var(--brand-lime);
    box-shadow: 0 10px 24px -18px rgba(22, 25, 34, 0.4);
    transform: none;
}
.trending-name { font-family: var(--font-display); color: var(--brand-ink); }
.trending-category { color: var(--gray-600); }
.trending-badge, .badge-tested, .badge-popular { border-radius: 2px; }

/* Alternating sections use the brand's own light grounds */
.section-alt { background: #F7F7F7; }
/* ...but the Trustpilot banner is a DARK ribbon carrying white text. It also
   carries .section-alt, so the rule above stranded its copy at ~1.1:1 until
   this higher-specificity restatement (SCAFFOLD-RUNBOOK 9.4: the floor is keyed
   on the hex, readability on the GROUND). */
.trustpilot-banner.section-alt { background: var(--brand-ink); }
.trustpilot-banner.section-alt:hover { background: #22252C; }
.trustpilot-banner .tp-banner-count { color: rgba(255, 255, 255, 0.88); }
.tp-banner-btn { border-radius: 2px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-item { border: 1px solid var(--gray-200); border-radius: 3px; background: #FFFFFF; }
.faq-item.open { border-color: var(--brand-lime); }
.faq-question { font-family: var(--font-display); color: var(--brand-ink); }
.faq-question i { color: var(--brand-lime-dark); }
.faq-answer p { color: var(--gray-700); }

/* --- Modals -------------------------------------------------------------- */
.modal-content { border-radius: 4px; border: 1px solid var(--gray-200); }
.modal-title { font-family: var(--font-display); color: var(--brand-ink); }

/* --- Footer -------------------------------------------------------------- */
.footer-col h4 { color: #FFFFFF; font-family: var(--font-display); }
.footer-col h4::after { background: var(--brand-lime); }
.footer-col a:hover { color: var(--brand-lime); }
.footer-social a:hover { background: var(--brand-lime-dark); border-color: var(--brand-lime-dark); }
.footer-logo { font-family: var(--font-display); }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 900px) {
    .logo-mark { width: 154px; max-height: 30px; }
    .header .logo-text small, .logo-text small { display: none; }
}
/* At 390px the row (lockup + seal + warehouse chip + cart + hamburger) ran 6px
   past the viewport and clipped the hamburger. The seal is decorative, so it is
   the first thing to go; the lockup then fits with room to spare. */
@media (max-width: 560px) {
    .logo { gap: 8px; }
    .logo-mark { width: 118px; max-height: 23px; }
    .logo-seal { display: none; }
}
/* 320px (iPhone SE 1st gen / Galaxy Fold cover) is the narrowest real viewport
   and the cart + warehouse chip alone nearly fill it. */
@media (max-width: 359px) {
    .logo { gap: 6px; }
    .logo-mark { width: 96px; max-height: 19px; }
    .header .cart-btn, .cart-btn { padding-left: 8px; padding-right: 8px; }
    .header .warehouse-btn, .warehouse-btn { padding-left: 6px; padding-right: 6px; }
}
.mobile-nav-link.active { box-shadow: inset 3px 0 0 var(--brand-lime); }
.bottom-nav-item.active, .bottom-nav-item.active i { color: var(--primary); }

/* --- Per-page contrast floor --------------------------------------------- */
/* product.css writes this spec line in the template's mid grey (re-hued to
   #73766c), which lands at 4.47:1 on the near-white similar-products card. */
.pd-similar-spec { color: var(--gray-600); }

/* --- Mobile tap targets --------------------------------------------------- */
/* The hero's PeptideMeter link is a bare <a> inside .hero-trust-item and came
   out 151x21 at 390px — under the 44px minimum. Give it its own padded hit box
   without changing how the row reads. */
@media (max-width: 900px) {
    .hero-trust-item a, .hero-trust-row a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 2px 0;
    }
}