/* ============================================================================
   THERMO FISHER SCIENTIFIC — per-shop brand layer  (hand-authored)

   Loaded IMMEDIATELY AFTER public/css/thermofishersci.css, which is REGENERATED
   by site-factory/generate-identity.js. Nothing shop-specific may live in that
   file (SCAFFOLD-RUNBOOK §9.3) — it belongs here.

   What this layer does, and why:
   The generated identity derives its whole neutral ramp from the brand hue, so
   a #E71316 shop comes out pink-on-pink. The real Thermo Fisher surface is the
   opposite: a cool, near-white corporate ground with TRUE neutrals, and red
   used sparingly as a signal — rules, fills, and the wordmark. So this layer
   re-neutralises the ramp, squares the geometry off, replaces the mono
   micro-labels with letterspaced Public Sans caps (mono reads "dev tool", the
   brand reads "instrument catalogue"), and gives the header/hero/sections a
   keyline-driven rhythm that no other shop in the fleet uses.

   Contrast note (§9.4): every neutral below is a true grey, so each one is
   MORE contrasty on the dark grounds (footer, trustpilot ribbon, sale bar,
   photo scrims) than the red-tinted token it replaces — the ramp is lifted, not
   lowered. Verified with contrast-audit.js on every page + the checkout modal.
   ========================================================================== */

:root {
    /* --- True-neutral ramp (replaces the hue-tinted one) ------------------- */
    --white: #ffffff;
    --paper: #ffffff;
    --porcelain: #ffffff;
    --gray-50: #f7f8f9;
    --gray-100: #eef0f2;
    --gray-200: #e1e4e8;
    --gray-300: #c7ccd2;
    --gray-400: #949ba3;
    --gray-500: #6b737c;
    --gray-600: #545b63;
    --gray-700: #3c4147;
    --gray-800: #24282c;
    --gray-900: #16181b;
    --ink: #16181b;

    --border-subtle: #e6e9ec;
    --border-default: #d5d9de;
    --hairline: 1px solid #e6e9ec;
    --surface-elevated: #ffffff;
    --surface-sunken: #f4f5f7;
    --grid-line: rgba(22, 24, 27, 0.045);

    /* Red stays the signal colour; only the tints are de-pinked. */
    --primary-50: #fdf2f2;
    --primary-100: #fadcdc;
    --accent-navy: #24282c;

    /* Neutral, un-tinted elevation — the red-tinted shadows read as a smudge
       on a white ground. */
    --shadow-sm: 0 1px 2px rgba(22, 24, 27, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 24, 27, 0.04), 0 6px 16px -8px rgba(22, 24, 27, 0.12);
    --shadow-lg: 0 2px 4px rgba(22, 24, 27, 0.05), 0 14px 30px -12px rgba(22, 24, 27, 0.16);
    --shadow-xl: 0 4px 10px rgba(22, 24, 27, 0.06), 0 26px 52px -18px rgba(22, 24, 27, 0.2);

    /* Brand-layer-only helpers */
    --tfs-rule: #e1e4e8;
    --tfs-red: #e71316;
    --tfs-red-deep: #b60f12;
    --tfs-label: 0.68rem;
}

/* === TYPE ================================================================
   Micro-labels move off JetBrains Mono onto letterspaced Public Sans caps.
   Mono is kept where it is genuinely data: cat numbers, prices, countdowns. */
.hero-eyebrow,
.trending-category, .trending-cta,
.footer-col h4, .footer-logo small,
.mobile-menu-title,
.site-flash,
.tfs-label {
    font-family: var(--font-family) !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.site-flash { font-size: 0.68rem; letter-spacing: 0.1em; }
h1, h2, h3, h4, .section-heading, .section-header h2 { letter-spacing: -0.02em; }

/* === HEADER ==============================================================
   Solid white, one hairline, no blur. The brand mark is the real lockup
   (public/logo.svg, traced from the supplied logo) rather than a square tile
   plus a text abbreviation. */
.header {
    background: #ffffff;
    backdrop-filter: none;
    border-bottom: 1px solid var(--tfs-rule);
    box-shadow: none;
}
.header .logo { gap: 0; }
.header .logo-lockup {
    display: block;
    width: 172px;
    max-width: 46vw;
    height: auto;
}
.header .logo-text small, .logo-text small {
    display: block;
    font-family: var(--font-family);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 3px;
    white-space: nowrap;
}
.nav-link.active, .nav-link:hover { background: transparent; }   /* no pink pill */
.nav-link.active { color: var(--tfs-red); }
.header .cart-btn, .cart-btn { border-radius: 0; font-weight: 700; letter-spacing: 0.04em; }
.header .warehouse-btn, .warehouse-btn { border-radius: 0; border-color: var(--border-default); }

/* === FLASH + TRUST BAR ===================================================
   The flash ribbon becomes solid brand red — it is the one full-bleed red
   band on the page, which is how the brand actually behaves. */
.site-flash {
    background: var(--tfs-red);
    color: #ffffff;
    border-bottom: none;
}
.site-flash strong { color: #ffffff; }
.trust-bar { background: var(--gray-900) !important; }
.trust-bar-item, .trust-bar-item i { color: #e8eaec !important; }
.trust-bar-item a { color: #e8eaec !important; }

/* === HERO ================================================================ */
.hero-section {
    background: #ffffff;
    border-bottom: 1px solid var(--tfs-rule);
}
.hero-section::before { opacity: 0.5; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--tfs-red);
    border-radius: 0;
    padding: 2px 0 2px 10px;
    color: var(--gray-700);
    font-size: var(--tfs-label);
}
.hero-title { line-height: 1.06; }
/* The generated theme sets the emphasis span in italic. The brand's wordmark
   is upright and tightly set; italic reads as a different company. */
.hero-title span { font-style: normal; color: var(--tfs-red); }
.hero-title .cn-seal {
    border-color: var(--tfs-red);
    color: var(--tfs-red);
}
.hero-subtitle { color: var(--gray-600); }
.hero-cta-primary, .hero-cta-secondary { border-radius: 0; font-weight: 700; }
.hero-cta-primary::after { display: none; }          /* no sheen sweep */
.hero-cta-primary:hover { transform: none; box-shadow: none; background: var(--tfs-red-deep); }
.hero-cta-secondary {
    border: 1px solid var(--gray-800);
    color: var(--gray-800);
    background: #ffffff;
}
.hero-cta-secondary:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--tfs-red);
    color: var(--tfs-red);
    background: #ffffff;
}
.hero-trust-row { gap: 1.5rem; }
.hero-trust-item, .hero-trust-item a { color: var(--gray-600); font-weight: 600; }
.hero-trust-item i { color: var(--tfs-red); }

/* Spec strip under the hero copy — the "at a glance" block a manufacturer
   catalogue leads with. */
.tfs-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 2rem;
    border-top: 1px solid var(--tfs-rule);
    border-left: 1px solid var(--tfs-rule);
}
.tfs-spec {
    padding: 0.85rem 0.9rem;
    border-right: 1px solid var(--tfs-rule);
    border-bottom: 1px solid var(--tfs-rule);
}
.tfs-spec-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}
.tfs-spec-label {
    display: block;
    margin-top: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* === DEAL CARD =========================================================== */
.deal-card {
    border-radius: 0;
    border: 1px solid var(--border-default);
    box-shadow: none;
}
.deal-card-badge { background: var(--tfs-red); border-radius: 0; }
.deal-card-badge span:first-child, .deal-card-badge span:last-child { color: #ffffff; }
.deal-tier-value { border-radius: 0; }
.deal-card-footer { background: var(--surface-sunken); }

/* === SECTIONS ============================================================
   Alternating white / cool grey, separated by hairlines rather than shadow;
   every heading carries a short red keyline. */
.section-alt { background: var(--surface-sunken); border-block: 1px solid var(--tfs-rule); }
.section-header h2::after,
.trust-header .section-heading::after {
    background: var(--tfs-red);
    height: 3px;
    border-radius: 0;
}
.order-step-icon, .cert-icon, .trust-card-icon {
    border-radius: 0;
    background: var(--primary-50);
    color: var(--tfs-red);
}
.cert-card, .trust-card, .lab-video-card, .trending-card, .pay-badge {
    border-radius: 0;
}
.cert-card, .trust-card {
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cert-card:hover, .trust-card:hover {
    border-color: var(--tfs-red);
    box-shadow: var(--shadow-md);
}
.trending-card { border: 1px solid var(--border-subtle); }
.trending-card:hover { transform: none; }
.trust-stat { border-radius: 0; }
.trust-stat-value { color: var(--tfs-red); }

/* === FAQ ================================================================= */
.faq-item { border-radius: 0; background: #ffffff; border: 1px solid var(--border-subtle); }
.faq-item.open { border-color: var(--tfs-red); }
.faq-question { font-weight: 700; color: var(--ink); }

/* === BUTTONS / MODALS ==================================================== */
.btn, .checkout-btn, .btn-primary, .btn-secondary { border-radius: 0; font-weight: 700; }
.btn-primary:hover, .checkout-btn:hover { transform: none; background: var(--tfs-red-deep); }
.modal-content { border-radius: 0; }
.modal { background: rgba(22, 24, 27, 0.55); }

/* === FOOTER ==============================================================
   Near-black with the brand's red top rule; neutral greys read cleaner and
   measure HIGHER contrast on this ground than the tinted ramp did. */
.footer { background: var(--gray-900); border-top: 3px solid var(--tfs-red); }
.footer-col a, .footer-col p { color: #ced3d8; }
.footer-col h4 { color: #9aa1a9; }
.footer-bottom p, .footer-logo small { color: #9aa1a9; }
.footer-social a { color: #ced3d8; border-radius: 0; }

/* === MOBILE ============================================================== */
@media (max-width: 900px) {
    .header .logo-lockup { width: 132px; }
    .header .logo-text small, .logo-text small { display: none; }
}
@media (max-width: 640px) {
    .tfs-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-trust-row { gap: 0.75rem 1rem; }
}

/* === LATE FIXES (order matters — these must beat the rules above) ========= */

/* The Trustpilot ribbon carries BOTH `trustpilot-banner` and `section-alt`.
   The `.section-alt` rule above would repaint that DARK ribbon with the light
   sunken surface and strand white text on near-white (§9.4, the exact
   dark-on-dark class of bug). Re-assert the dark ground after it. */
.trustpilot-banner, .trustpilot-banner.section-alt {
    background: var(--gray-900);
    border-block: none;
}
.trustpilot-banner:hover, .trustpilot-banner.section-alt:hover { background: #0d0f11; }
.tp-banner-btn { border-radius: 0; color: var(--tfs-red); }
.tp-banner-btn:hover { background: #f2f4f6; transform: none; color: var(--tfs-red-deep); }

/* home.css paints the payment strip in the TEMPLATE's mint-green gradient
   (#eef5f0 / #dcebe1) and the identity layer has no rule for it — a leftover
   of another brand's palette sitting mid-page. Neutralise it. */
.payment-methods-section {
    background: var(--surface-sunken);
    border-top: 1px solid var(--tfs-rule);
    border-bottom: 1px solid var(--tfs-rule);
}
.payment-methods-title i { color: var(--tfs-red); }
.pay-crypto-tag { border-radius: 0; }

/* --- Header fit ----------------------------------------------------------
   .header-content is flex-nowrap inside a 1200px-capped .container, so every
   pixel the brand block takes is a pixel the nav has to absorb by wrapping its
   labels onto a second line (the QST/erp header trap). Keep the lockup narrow
   and step it down before the nav has to wrap. */
.header .logo-lockup { width: 156px; }
@media (max-width: 1320px) {
    .header .logo-lockup { width: 138px; }
    .header .logo-text small, .logo-text small { font-size: 0.55rem; letter-spacing: 0.08em; }
}
.hero-title .cn-seal { font-size: 0.42em; vertical-align: 0.35em; }
.hero-trust-row { gap: 0.85rem 1.4rem; margin-top: 1.25rem; }
.tfs-spec-label { line-height: 1.35; }

/* ==========================================================================
   CONTRAST FLOOR  (SCAFFOLD-RUNBOOK §9.4 — the floor is keyed on the HEX,
   readability on the GROUND, so both directions are handled here.)

   Measured with site-factory/contrast-audit.js on /, /products, /pricelist,
   /reports/, /reviews, /about, /contact, /wholesale/login, /product/:catNo and
   the cart+checkout modal. Three root causes accounted for all 45 failures:

   1. The literal logo red #E71316 measures 4.66:1 on PURE WHITE — so as TEXT
      it fails AA on every tint the theme paints (chips, badges, price cells,
      the active mobile-nav item, warehouse rows). Fills are fine: white on
      #E71316 is 4.66:1 and passes. So the brand splits into two tokens —
      --primary is the accessible TEXT red, --tfs-red stays the true logo red
      and is re-asserted below on every surface that is a FILL. The two differ
      by ~7% luminance and read as the same red side by side.
   2. --gray-500 sat at 4.41:1 on the light grounds. Darkened.
   3. That same darkening drops it to 2.9:1 on the near-black footer, so the
      footer's text colour is now set explicitly instead of inheriting it.
   ========================================================================== */
:root {
    --primary: #d81114;        /* accessible TEXT red (fills use --tfs-red) */
    --primary-100: #fdeeee;    /* lightened so red text clears AA on it */
    --gray-500: #5a6169;
}

/* --- FILLS keep the exact logo red --------------------------------------- */
.btn-primary, .checkout-btn, .hero-cta-primary,
.header .cart-btn, .cart-btn,
.view-product-btn, .bottom-nav-badge, .skip-link:focus {
    background: var(--tfs-red);
}
.btn-primary:hover, .checkout-btn:hover, .hero-cta-primary:hover,
.header .cart-btn:hover, .cart-btn:hover, .view-product-btn:hover {
    background: var(--tfs-red-deep);
}

/* --- Dark grounds: set the text explicitly ------------------------------- */
.footer, .footer p, .footer li, .footer span, .footer small,
.footer-col p, .footer-bottom p, .footer-copyright {
    color: #ced3d8;
}
.footer a, .footer-col a, .footer-social a { color: #ced3d8; }
.footer a:hover, .footer-col a:hover, .footer-social a:hover { color: #ff8a8c; }
.footer-col h4, .footer-logo small { color: #a7aeb6; }

/* --- Retire the template's mint/cream tints ------------------------------
   product.css / wholesale.css / pricelist.css hardcode another brand's
   #eef5f0 / #dcebe1 / #fbf7ea chips. They are both an off-palette leak and
   the ground under four of the failures above. */
.pd-tag, .pd-tag-category, .pd-cat-badge,
.wh-option, .wh-option small,
.pl-raw-tier, .pl-raw-tier-label {
    background-color: var(--gray-50);
}
.pd-tag-category, .pd-cat-badge { background-color: var(--primary-50); color: var(--primary); }

/* --- Last two, both fixed at the ground rather than the text -------------- */
/* footer.ejs sets `color: var(--gray-500)` INLINE on the contact paragraph, so
   no stylesheet rule can reach it — an attribute selector anchored to the
   property is the only lever (§9.6/§9.7: matched case-insensitively and
   anchored to `color:`, so a `background: var(--gray-500)` is never caught).
   Scoped to .footer, which is the only dark ground this pattern lands on. */
.footer [style*="color: var(--gray-500)" i],
.footer [style*="color:var(--gray-500)" i] { color: #ced3d8 !important; }

/* wholesale.css paints the login card's contact strip in the template's mint
   #eef5f0. Neutralise the ground and use the accessible text red. */
.ws-contact-links { background: var(--gray-50); }
.ws-contact-links a, .ws-contact-links a i { color: var(--primary); }

/* --- Mobile audit fixes (site-factory/mobile-audit.js @390px) ------------- */
:root { --tfs-label: 0.7rem; }   /* 11.2px — the audit floor is 11px */
@media (max-width: 640px) {
    .tfs-spec-label { font-size: 0.7rem; letter-spacing: 0.08em; }
    .tfs-spec-value { font-size: 1.25rem; }
    /* the hero trust row's links were 21px tall — below the 44px tap floor */
    .hero-trust-item { display: inline-flex; align-items: center; min-height: 44px; }
    .hero-trust-item a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Footer brand block: the real lockup, reversed out for the dark ground - */
.footer-logo { display: block; }
.footer-logo-lockup { display: block; width: 180px; max-width: 60%; height: auto; margin-bottom: 8px; }
.footer-logo small { display: block; font-family: var(--font-family); letter-spacing: 0.09em; }

/* --- Real supplied artwork ------------------------------------------------
   public/logo.svg is the operator's own thermofisher-logo.png embedded verbatim
   (site-factory/brand-assets/thermofishersci/lockup.svg), so it is a RED BLOCK
   with the wordmark reversed out in white — not a transparent wordmark. Give it
   a little breathing room on the white header so the block reads as the logo
   rather than as a banner, and drop the strapline that used to sit under a
   transparent mark. */
.header .logo-lockup { width: 188px; }
@media (max-width: 1320px) { .header .logo-lockup { width: 156px; } }
.header .logo-text small, .logo-text small { display: none; }
.footer-logo-lockup { width: 196px; }