/*
Theme Name: Aminovera Research
Theme URI: https://aminovera.com
Description: Fast, accessible WooCommerce theme for a research-use-only peptide catalogue. Self-hosted fonts, scoped commerce assets, no page builder.
Version: 2.2.0
Author: Aminovera Research
Text Domain: aminovera-research
Domain Path: /languages
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, accessibility-ready, block-patterns, custom-logo, custom-menu, translation-ready
*/

/* ============================================================================
   CASCADE LAYERS
   ----------------------------------------------------------------------------
   Order below = ascending priority. Anything NOT in a layer beats everything
   that is — which is exactly what we want for the WooCommerce overrides at the
   bottom of this file, because WooCommerce ships unlayered CSS with high
   specificity. Layering our own base and components keeps them easy to
   override from a child theme without specificity wars.
   ========================================================================== */
@layer reset, tokens, base, layout, components;

/*
 * Cross-document view transitions.
 *
 * Declared at the top level on purpose: @view-transition is only honoured
 * there, not inside @layer or inside a conditional group rule such as @media.
 * Pairs with the Speculation Rules prerendering in inc/performance.php — the
 * next page is already warm, so the transition has something to cross-fade to.
 * Ignored where unsupported; the prefers-reduced-motion block in @layer reset
 * zeroes the animation for anyone who has asked for less movement.
 */
@view-transition { navigation: auto; }

/* ============================================================================
   TOKENS
   ----------------------------------------------------------------------------
   Every text/background pair below is verified at >= 4.5:1 (WCAG 2.2 AA).
   --accent (#178b83) measures 4.15:1 on white and MUST NOT carry text.
   Use --accent-deep for anything with a glyph in it.
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    /* Ink + surface */
    --ink:          #12212a;
    --ink-soft:     #24363f;
    --muted:        #55636a;  /* 5.87:1 on --paper */
    --line:         #dde5e3;  /* decorative rules and dividers */
    --line-strong:  #b9c7c5;  /* decorative emphasis — NOT for control borders */
    /* Borders that define an interactive control must meet WCAG 2.2 SC 1.4.11
       Non-text Contrast at 3:1. --line-strong measures 1.74:1 on white and
       fails; --line-ui measures 3.80:1 on white, 3.56:1 on --paper. */
    --line-ui:      #778684;
    --paper:        #f6f8f6;
    --surface:      #ffffff;
    --surface-sunk: #eef3f1;

    /* Brand */
    --accent:       #178b83;  /* graphics only */
    --accent-deep:  #0d6d66;  /* 6.18:1 on white */
    --accent-dark:  #0a5450;
    --accent-soft:  #7fd6cb;  /* 9.7:1 on --ink */
    --accent-wash:  #e9f5f2;

    /* Status */
    --warn:         #8a5300;
    --warn-wash:    #fdf5e6;
    --warn-line:    #e8d3a4;
    --stock-in:     #0d6d66;
    --stock-out:    #8a3324;

    /* Type */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

    /* Fluid type scale — one ratio, no arbitrary sizes.
       Minimums are set at 360px viewport, maximums at 1200px. */
    --t-0:  clamp(0.94rem, 0.91rem + 0.14vw, 1.03rem);
    --t-1:  clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
    --t-2:  clamp(1.30rem, 1.18rem + 0.55vw, 1.66rem);
    --t-3:  clamp(1.56rem, 1.34rem + 1.00vw, 2.22rem);
    --t-4:  clamp(1.88rem, 1.50rem + 1.70vw, 2.96rem);
    --t-5:  clamp(2.25rem, 1.62rem + 2.80vw, 3.95rem);

    /* Spacing — same ratio, so vertical rhythm lines up with type */
    --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;    --s-4: 1.5rem;
    --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;    --s-8: 5.5rem;
    --s-9: 7rem;

    /* Layout */
    --max:    75rem;   /* 1200px */
    --measure: 68ch;
    --gutter: clamp(1rem, 0.6rem + 1.8vw, 1.75rem);

    /* Shape + depth. Restrained: this is a technical brand, not a consumer app. */
    --radius:    6px;
    --radius-sm: 4px;
    --shadow-1: 0 1px 2px rgb(18 33 42 / .04), 0 2px 6px rgb(18 33 42 / .04);
    --shadow-2: 0 2px 4px rgb(18 33 42 / .05), 0 10px 24px rgb(18 33 42 / .07);

    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur: 180ms;
  }
}

/* ============================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: 6rem; /* clears the sticky header on anchor jumps */
  }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

  img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  /* Scoped to :focus-within rather than set globally — a global smooth scroll
     fights with browser find-in-page and with focus management. */
  @media (prefers-reduced-motion: no-preference) {
    html:focus-within { scroll-behavior: smooth; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    /* The universal selector does not reach view-transition pseudo-elements,
       so the page cross-fade would still animate without this. */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
  }
}

/* ============================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--t-0);
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--accent-deep);
  }

  h1, h2, h3, h4 {
    line-height: 1.1;
    letter-spacing: -0.028em;
    font-weight: 700;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-5); max-width: 17ch; }
  h2 { font-size: var(--t-4); max-width: 22ch; }
  h3 { font-size: var(--t-2); }
  h4 { font-size: var(--t-1); }

  p { text-wrap: pretty; }

  a { color: var(--accent-deep); text-underline-offset: 0.18em; }
  a:hover { color: var(--accent-dark); }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

  :where(a, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-deep);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--accent-soft); color: var(--ink); }

  .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }

  .skip-link {
    position: absolute; inset-inline-start: -9999px; inset-block-start: 0;
    z-index: 999; background: var(--ink); color: #fff;
    padding: var(--s-2) var(--s-4); text-decoration: none; font-weight: 700;
  }
  .skip-link:focus { inset-inline-start: 0; color: #fff; }
}

/* ============================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .site-shell {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Full-bleed bands: the element spans the viewport, its .site-shell child
     keeps the content aligned to the grid. */
  .bleed { inline-size: 100%; }

  .site-main { padding-block-end: var(--s-8); }

  .section { padding-block: var(--s-8); }
  .section--tight { padding-block: var(--s-6); }
  .section--lined { border-block-start: 1px solid var(--line); }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: var(--s-6);
    align-items: end;
    margin-block-end: var(--s-5);
  }
  .section-heading p { color: var(--muted); max-width: 52ch; }

  .split-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8);
    padding-block: var(--s-8);
    border-block-start: 1px solid var(--line);
  }
  .split-section__copy { padding-block-start: var(--s-2); }
  .split-section__copy p { font-size: var(--t-1); line-height: 1.5; margin-block-end: var(--s-4); color: var(--muted); }

  .entry { max-width: var(--measure); padding-block: var(--s-7); }
  .entry > * + * { margin-block-start: var(--s-4); }
  .entry p, .entry li { color: var(--ink-soft); font-size: var(--t-1); line-height: 1.65; }
  .entry h2 { margin-block-start: 1.4em; }
  .entry h3 { margin-block-start: 1.2em; }
  .aminovera-page-image { margin: 0 0 var(--s-5); border: 1px solid var(--line); background: var(--paper); box-shadow: 0 16px 40px rgba(13, 34, 53, .08); }
  .aminovera-page-image img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
  .aminovera-page-image figcaption { padding: .8rem 1rem; color: var(--muted); font-size: .82rem; }
  .entry blockquote {
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: var(--s-4);
    color: var(--muted); font-style: italic;
  }
  .entry ul, .entry ol { padding-inline-start: var(--s-4); }
  .entry li + li { margin-block-start: var(--s-1); }
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Header ------------------------------------------------------------ */
  .site-header {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--line);
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
  }
  /* No backdrop-filter support: fall back to opaque, never translucent. */
  @supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--surface); }
  }

  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); min-block-size: 4.5rem;
  }

  .brand {
    display: flex; align-items: center; gap: var(--s-1);
    color: var(--ink); font-weight: 700; letter-spacing: -0.03em;
    text-decoration: none; font-size: var(--t-1); flex-shrink: 0;
  }
  .brand small {
    color: var(--muted); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-inline-start: 4px;
  }
  .brand__mark {
    display: grid; place-items: center;
    inline-size: 2.15rem; block-size: 2.15rem;
    border: 1px solid var(--accent-deep); border-radius: var(--radius-sm);
    color: var(--accent-deep); font: 700 0.72rem/1 var(--font-mono);
    letter-spacing: -0.06em;
  }

  .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
  .site-nav a {
    color: var(--ink); text-decoration: none; font-size: var(--t-0);
    padding-block: 0.4rem; display: inline-block; position: relative;
  }
  /* Underline grows from the centre — cheap, and it animates transform only. */
  .site-nav a::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    block-size: 2px; background: var(--accent);
    transform: scaleX(0); transition: transform var(--dur) var(--ease);
  }
  .site-nav a:hover::after,
  .site-nav .is-current > a::after { transform: scaleX(1); }
  .site-nav .is-current > a { font-weight: 600; }

  .header-utils { display: flex; align-items: center; gap: var(--s-2); }

  .cart-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: 700 0.76rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-deep); text-decoration: none;
    border: 1px solid var(--line-ui); border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .cart-link:hover { border-color: var(--accent-deep); background: var(--accent-wash); }
  .cart-link__count {
    background: var(--accent-deep); color: #fff; border-radius: 999px;
    min-inline-size: 1.15rem; block-size: 1.15rem;
    display: grid; place-items: center; font-size: 0.66rem; padding-inline: 0.3rem;
  }
  .cart-link__count[hidden] { display: none; }

  .nav-toggle {
    display: none; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid var(--line-ui); border-radius: var(--radius);
    color: var(--ink); font-weight: 600; font-size: 0.85rem;
    padding: 0.65rem 0.85rem; cursor: pointer;
  }
  .nav-toggle__bars { display: grid; gap: 3px; }
  .nav-toggle__bars span {
    display: block; inline-size: 1rem; block-size: 2px; background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* --- Research-use bar --------------------------------------------------- */
  .research-bar {
    background: var(--ink); color: var(--accent-soft);
    font: 500 0.74rem/1.4 var(--font-mono); letter-spacing: 0.02em;
    padding-block: 0.6rem; text-align: center;
  }
  .research-bar strong { color: #fff; font-weight: 600; }

  /* --- Type utilities ----------------------------------------------------- */
  .eyebrow {
    color: var(--accent-deep); font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    display: flex; align-items: center; gap: 0.6rem;
  }
  /* Rule that fills the space after the label. */
  .eyebrow::after {
    content: ""; flex: 1; block-size: 1px;
    background: linear-gradient(to right, var(--line-strong), transparent);
    max-inline-size: 4rem;
  }
  .lede { color: var(--muted); font-size: var(--t-1); max-width: 58ch; margin-block-start: var(--s-3); }
  .mono-label { font: 700 0.72rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

  /* --- Buttons ------------------------------------------------------------ */
  .button {
    background: var(--accent-deep); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.4rem; text-decoration: none;
    border: 1px solid var(--accent-deep); border-radius: var(--radius);
    font-weight: 700; font-size: var(--t-0); cursor: pointer;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .button:hover {
    background: var(--accent-dark); border-color: var(--accent-dark);
    color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2);
  }
  .button:active { transform: translateY(0); }
  .button--ghost { background: transparent; color: var(--accent-deep); border-color: var(--line-ui); }
  .button--ghost:hover { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-deep); box-shadow: none; }
  .button[disabled], .button[aria-disabled="true"] {
    background: var(--line); border-color: var(--line); color: var(--muted);
    cursor: not-allowed; transform: none; box-shadow: none;
  }

  .text-link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
  .text-link::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
  .text-link:hover { text-decoration: underline; }
  .text-link:hover::after { transform: translateX(3px); }

  /* --- Hero --------------------------------------------------------------- */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
    gap: var(--s-8); align-items: end;
    padding-block: var(--s-8) var(--s-9);
  }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-5); }

  .hero__panel {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-sunk);
    min-block-size: 19rem; padding: var(--s-4);
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--s-2);
  }
  .panel-kicker { color: var(--accent-deep); font: 700 0.7rem/1.3 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
  .panel-title { font-size: var(--t-3); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; }

  .signal-line { display: flex; align-items: end; gap: 0.5rem; block-size: 5.3rem; margin-block: var(--s-4); }
  .signal-line span { display: block; inline-size: 18%; background: var(--accent); opacity: 0.82; border-radius: 2px 2px 0 0; }
  .signal-line span:nth-child(1) { block-size: 32%; }
  .signal-line span:nth-child(2) { block-size: 58%; }
  .signal-line span:nth-child(3) { block-size: 92%; }
  .signal-line span:nth-child(4) { block-size: 65%; }
  .signal-line span:nth-child(5) { block-size: 44%; }

  .panel-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: var(--s-2); list-style: none; padding: 0; }
  .panel-meta span, .panel-meta li {
    padding: 0.35rem 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted);
    font: 700 0.66rem/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  }

  /* --- Trust strip -------------------------------------------------------- */
  .trust-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
  }
  .trust-strip__item { padding: var(--s-4); border-inline-end: 1px solid var(--line); }
  .trust-strip__item:last-child { border-inline-end: 0; }
  .trust-strip__item strong, .trust-strip__item p:nth-of-type(2) { display: block; font-size: var(--t-0); font-weight: 700; margin-block-end: 0.2rem; }
  .trust-strip__item span, .trust-strip__item p:last-child { color: var(--muted); font-size: 0.85rem; line-height: 1.45; display: block; }
  .trust-strip__icon {
    color: var(--accent-deep); font: 700 0.68rem/1 var(--font-mono);
    letter-spacing: 0.09em; text-transform: uppercase;
    display: block; margin-block-end: 0.7rem;
  }

  /* --- Product grid ------------------------------------------------------- */
  /* Container query, not a media query: the grid reflows correctly whether it
     sits full width, in a two-column layout, or inside a sidebar. */
  .product-grid {
    container-type: inline-size;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  }
  @container (max-width: 60rem) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (max-width: 34rem) { .product-grid { grid-template-columns: 1fr; } }

  .product-tile {
    min-block-size: 14.5rem; padding: 0;
    display: flex; flex-direction: column;
    background: var(--surface); position: relative; isolation: isolate;
    transition: background var(--dur) var(--ease);
  }
  .product-tile__body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }

  /* Media panel. Fixed aspect so six differently-cropped source images still
     produce a level grid — the vials do not jump between tiles. */
  .product-tile__media {
    aspect-ratio: 4 / 3;
    background: var(--surface-sunk);
    border-block-end: 1px solid var(--line);
    overflow: hidden;
    display: grid; place-items: center;
  }
  .product-tile__img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover; object-position: center;
    transition: transform 320ms var(--ease);
  }
  .product-tile:hover .product-tile__img { transform: scale(1.03); }
  .product-tile__media--empty span {
    font: 700 0.8rem/1 var(--font-mono); color: var(--muted);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .product-tile:hover, .product-tile:focus-within { background: var(--accent-wash); }
  /* Whole tile is the link target. */
  .product-tile__link { text-decoration: none; color: inherit; }
  .product-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .product-tile:focus-within { outline: 3px solid var(--accent-deep); outline-offset: -3px; }
  .product-tile__link:focus-visible { outline: none; }

  .product-tile__meta { color: var(--accent-deep); font: 700 0.68rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .product-tile__title { font-size: var(--t-2); margin-block: 0.4em 0.1em; }
  .product-tile__pack { color: var(--muted); font-size: 0.9rem; }

  .product-tile__specs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: var(--s-2); list-style: none; padding: 0; }
  .product-tile__specs li {
    font: 600 0.66rem/1.2 var(--font-mono); letter-spacing: 0.04em;
    color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0.28rem 0.42rem; background: var(--paper);
  }

  .product-tile__footer {
    display: flex; justify-content: space-between; gap: var(--s-2);
    align-items: end; margin-block-start: auto; padding-block-start: var(--s-4);
  }
  .product-tile__price { font: 700 var(--t-1)/1 var(--font-mono); }
  .product-tile__price small {
    display: block; font: 500 0.65rem/1.4 var(--font-mono);
    color: var(--muted); letter-spacing: 0.04em; margin-block-start: 0.35rem;
  }

  /* --- Documentation status ---------------------------------------------
     One badge with an explicit state, rather than "Documentation pending"
     occupying the purity slot on every tile and reading as six missing
     fields. */
  .doc-status {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-block-start: var(--s-3);
    font: 600 0.7rem/1.2 var(--font-mono);
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.35rem 0.65rem; background: var(--paper);
    align-self: flex-start;
  }
  .doc-status__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; flex-shrink: 0; }
  .doc-status__note {
    color: var(--muted); font-weight: 500; letter-spacing: 0.02em;
    text-transform: none; padding-inline-start: 0.4rem;
    border-inline-start: 1px solid var(--line-strong); margin-inline-start: 0.15rem;
  }
  .doc-status--ok { color: var(--stock-in); border-color: #9fd0c9; background: var(--accent-wash); }
  .doc-status--ok .doc-status__dot { background: var(--stock-in); }
  .doc-status--pending { color: var(--warn); border-color: var(--warn-line); background: var(--warn-wash); }
  .doc-status--pending .doc-status__dot { background: var(--warn); }

  .stock { font: 700 0.66rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; text-align: end; color: var(--muted); }
  .stock--in { color: var(--stock-in); }
  .stock--out { color: var(--stock-out); }

  /* --- Spec table --------------------------------------------------------- */
  .spec-table { inline-size: 100%; border-collapse: collapse; margin-block: var(--s-4); font-size: var(--t-0); }
  .spec-table caption {
    text-align: start; font: 700 0.72rem/1.3 var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-deep); padding-block-end: var(--s-2);
  }
  .spec-table th, .spec-table td { text-align: start; padding: 0.7rem 0.9rem; border-block-end: 1px solid var(--line); vertical-align: top; }
  .spec-table tr:last-child th, .spec-table tr:last-child td { border-block-end: 0; }
  .spec-table th { inline-size: 38%; font-weight: 600; color: var(--muted); }
  .spec-table td { font-family: var(--font-mono); font-size: 0.88rem; overflow-wrap: anywhere; }

  /* --- Documents + batch -------------------------------------------------- */
  .doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .doc-list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    border: 1px solid var(--line-ui); border-radius: var(--radius);
    padding: 0.85rem var(--s-3); text-decoration: none; background: var(--surface);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .doc-list a:hover { border-color: var(--accent-deep); background: var(--accent-wash); }
  .doc-type { font: 700 0.66rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .doc-missing { color: var(--warn); background: var(--warn-wash) !important; border-color: var(--warn-line) !important; }

  .batch-callout {
    border: 1px solid var(--line-strong); border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius); background: var(--surface);
    padding: var(--s-4); margin-block: var(--s-4);
  }
  .batch-callout__title { font-size: var(--t-1); margin-block-end: var(--s-2); }
  .batch-callout p { margin-block: 0.3em; }
  .batch-callout code { background: var(--paper); padding: 0.15em 0.4em; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .batch-callout__hint { display: block; color: var(--muted); font-size: 0.82rem; margin-block-start: 0.2rem; }

  /* --- Dark band ---------------------------------------------------------- */
  .delivery-band { background: var(--ink); color: #eef8f4; }
  .delivery-band .site-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--s-6); padding-block: var(--s-7);
  }
  .delivery-band .eyebrow { color: var(--accent-soft); }
  .delivery-band .eyebrow::after { background: linear-gradient(to right, #4b6a68, transparent); }
  .delivery-band h2 { max-width: 15ch; color: #fff; }
  .delivery-band p { color: #b7ccc9; align-self: end; }  /* 9.0:1 on --ink */

  /* --- Notices ------------------------------------------------------------ */
  .notice {
    border: 1px solid var(--line-strong); border-inline-start: 3px solid var(--accent-deep);
    border-radius: var(--radius); background: var(--surface);
    padding: var(--s-3) var(--s-4); margin-block: var(--s-4); font-size: 0.94rem;
  }
  .notice--warn { border-inline-start-color: var(--warn); background: var(--warn-wash); border-color: var(--warn-line); }
  .notice > p:first-child { margin-block-start: 0; }
  .notice > p:last-child { margin-block-end: 0; }

  /* --- FAQ ---------------------------------------------------------------- */
  .faq { border-block-start: 1px solid var(--line); }
  .faq details { border-block-end: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; padding-block: var(--s-4); font-weight: 600; font-size: var(--t-1);
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; color: var(--accent-deep);
    font: 400 1.5rem/1 var(--font-mono); flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq summary:hover { color: var(--accent-dark); }
  .faq details > *:not(summary) { padding-block-end: var(--s-4); color: var(--muted); max-width: var(--measure); }

  /* --- Cards + pagination ------------------------------------------------- */
  .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-4); padding-block: var(--s-6); }
  .card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: var(--s-4);
    display: flex; flex-direction: column; gap: 0.4rem;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .card h2 { font-size: var(--t-2); max-width: none; }
  .card a { text-decoration: none; }
  .card p { color: var(--muted); font-size: 0.93rem; }

  .entry-meta { color: var(--muted); font: 600 0.74rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

  .pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-block: var(--s-5); }
  .pagination .page-numbers, .pagination a {
    display: grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem;
    padding-inline: 0.75rem; border: 1px solid var(--line-ui);
    text-decoration: none; border-radius: var(--radius);
  }
  .pagination .page-numbers.current { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
  .pagination a:hover { border-color: var(--accent-deep); background: var(--accent-wash); }

  /* --- Search ------------------------------------------------------------- */
  .search-form { display: flex; gap: 0.5rem; max-inline-size: 34rem; }
  .search-form input[type="search"] {
    flex: 1; padding: 0.8rem var(--s-3);
    border: 1px solid var(--line-ui); border-radius: var(--radius);
    font-size: 1rem; background: var(--surface); color: var(--ink);
    transition: border-color var(--dur) var(--ease);
  }
  .search-form input[type="search"]:focus { border-color: var(--accent-deep); }

  /* --- 404 ---------------------------------------------------------------- */
  .error-404 { padding-block: var(--s-8); max-inline-size: 58ch; }
  .error-404 .code { font: 700 clamp(4rem, 14vw, 9rem)/1 var(--font-mono); color: var(--accent); letter-spacing: -0.05em; }
  .error-404 ul { padding-inline-start: var(--s-4); }
  .error-404 li { margin-block-start: 0.4rem; }

  /* --- Widgets ------------------------------------------------------------ */
  .widget { margin-block-end: var(--s-5); }
  .widget-title { font-size: var(--t-1); margin-block-end: var(--s-2); }
  .widget ul { list-style: none; margin: 0; padding: 0; }
  .widget li { border-block-end: 1px solid var(--line); }
  .widget li a { display: block; padding-block: 0.55rem; text-decoration: none; color: var(--ink); }
  .widget li a:hover { color: var(--accent-deep); }

  /* --- Footer ------------------------------------------------------------- */
  .site-footer { border-block-start: 1px solid var(--line); background: var(--surface); padding-block: var(--s-7) var(--s-5); color: var(--muted); }
  .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-5); }
  .footer-grid p { margin-block: 0.25em; font-size: 0.92rem; }
  .footer-brand { color: var(--ink); font-weight: 700; font-size: var(--t-1); }
  .footer-label {
    color: var(--accent-deep); font: 700 0.7rem/1.3 var(--font-mono);
    letter-spacing: 0.09em; text-transform: uppercase; margin-block-end: var(--s-2) !important;
  }
  .footer-grid ul { list-style: none; margin: 0; padding: 0; }
  .footer-grid li { margin-block-end: 0.45rem; }
  .footer-grid li a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
  .footer-grid li a:hover { color: var(--accent-deep); text-decoration: underline; }
  .footer-legal { border-block-start: 1px solid var(--line); margin-block-start: var(--s-5); padding-block-start: var(--s-4); font-size: 0.82rem; display: grid; gap: var(--s-2); }

  /* --- Research-use checkout confirmation --------------------------------- */
  .ruo-confirm {
    border: 1px solid var(--warn-line); border-radius: var(--radius);
    background: var(--warn-wash); padding: var(--s-3) var(--s-4); margin-block: var(--s-4);
  }
  .ruo-confirm label { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
  .ruo-confirm input[type="checkbox"] { margin-block-start: 0.25rem; inline-size: 1.15rem; block-size: 1.15rem; flex-shrink: 0; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@layer components {
  @media (max-width: 62rem) {
    .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-strip__item:nth-child(2n) { border-inline-end: 0; }
    .trust-strip__item:nth-child(-n+2) { border-block-end: 1px solid var(--line); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero { gap: var(--s-6); }
  }

  @media (max-width: 54rem) {
    .nav-toggle { display: inline-flex; }
    .site-nav {
      display: none; position: absolute; inset-block-start: 100%; inset-inline: 0;
      background: var(--surface); border-block-end: 1px solid var(--line);
      box-shadow: var(--shadow-2);
    }
    .site-nav.is-open { display: block; }
    .site-nav ul { display: block; padding: 0.5rem var(--gutter) var(--s-4); }
    .site-nav li { border-block-end: 1px solid var(--line); }
    .site-nav li:last-child { border-block-end: 0; }
    .site-nav a { display: block; padding-block: 0.9rem; font-size: var(--t-1); }
    .site-nav a::after { display: none; }
  }

  @media (max-width: 47rem) {
    .hero, .section-heading, .split-section, .delivery-band .site-shell { display: block; }
    .hero { padding-block: var(--s-6) var(--s-7); }
    .hero__panel { margin-block-start: var(--s-5); min-block-size: 16rem; }
    .section-heading p { margin-block-start: var(--s-3); }
    .section, .split-section { padding-block: var(--s-6); }
    .split-section__copy { padding-block-start: var(--s-4); }
    .delivery-band p { margin-block-start: var(--s-3); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .trust-strip { grid-template-columns: 1fr; }
    .trust-strip__item { border-inline-end: 0; border-block-end: 1px solid var(--line); }
    .trust-strip__item:last-child { border-block-end: 0; }
    .spec-table th { inline-size: 45%; }
    .research-bar { text-align: start; font-size: 0.7rem; }
    h1 { max-width: 100%; }
  }
}

/* ============================================================================
   WOOCOMMERCE OVERRIDES — DELIBERATELY UNLAYERED
   ----------------------------------------------------------------------------
   WooCommerce ships unlayered CSS with high specificity. Unlayered rules beat
   every layer above, so these must stay outside @layer to win without
   !important. Do not move them into a layer.
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent-deep);
  color: #fff;
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  font-weight: 700;
  padding: 0.85rem 1.4rem;
  line-height: 1.2;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
}

.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
}

.woocommerce ul.products li.product {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-top-color: var(--accent-deep);
  border-radius: var(--radius);
  background: var(--surface);
}
.woocommerce .woocommerce-error { border-top-color: var(--stock-out); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--accent-deep); }

.woocommerce div.product .stock { font-family: var(--font-mono); font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: var(--stock-in); }
.woocommerce div.product .stock.out-of-stock { color: var(--stock-out); }

.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  padding-block: var(--s-4) 0;
}
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb .sep { margin-inline: 0.4rem; color: var(--line-strong); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  padding: 0.75rem var(--s-3);
  background: var(--surface);
  color: var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--accent-deep);
  outline: 3px solid var(--accent-deep);
  outline-offset: 1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--surface); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 600; }

/* ============================================================================
   PRINT
   ----------------------------------------------------------------------------
   Laboratory buyers print product records for purchase-order files.
   ========================================================================== */
@media print {
  .site-header, .site-footer, .research-bar, .nav-toggle,
  .hero__panel, .cart-link, .pagination, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .site-shell { max-width: none; padding: 0; }
  .spec-table { page-break-inside: avoid; }
  .batch-callout, .notice { border: 1px solid #999; page-break-inside: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}