/*
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.9.3
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
   ----------------------------------------------------------------------------
   Only reset and tokens are layered. Base, layout and component rules are
   deliberately UNLAYERED.

   An unlayered rule beats every rule inside any @layer, whatever the
   specificity. WordPress emits its theme.json global styles unlayered — most
   importantly:

       a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--accent-deep) }

   With components inside @layer, that one rule beat `.button { color:#fff }`
   and the primary CTA rendered teal text on a teal background: invisible.
   Every other link on the site was forced to the same colour.

   So component rules sit unlayered and win on ordinary specificity
   (`.button` = 0,1,0 beats `a:where(…)` = 0,0,1), and the WooCommerce
   overrides at the foot of this file do the same against WooCommerce's own
   unlayered CSS. Do not wrap them back up in a layer.
   ========================================================================== */
@layer reset, tokens;

/*
 * 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:  #b4cbc4;  /* 9.62:1 on --ink. Was #7fd6cb — flagged
                                 by impeccable as cyan-neon-on-dark, a generated-UI
                                 tell. Desaturated to pale sage, same legibility. */
    --accent-wash:  #e9f5f2;

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

    /* Type */
    --font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", 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
   ========================================================================== */
/* ---- (was @layer base; unlayered so it beats theme.json global styles) ---- */
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 {
  /* 1.1 was too tight once a headline wrapped: at 62px over three lines the
     descenders ran close to the next line's ascenders, which impeccable
     [tight-leading] flags. */
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
/* 20ch rather than 17ch so the headline sets in two lines instead of three. */
h1 { font-size: var(--t-5); max-width: 20ch; }
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
   ========================================================================== */
/* ---- (was @layer layout; unlayered so it beats theme.json global styles) ---- */
.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: 1px 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
   ========================================================================== */
/* ---- (was @layer components; unlayered so it beats theme.json global styles) ---- */
/* --- Header ------------------------------------------------------------ */
.site-header {
    background: var(--surface);
  border-block-end: 1px solid var(--line);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}

.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(--ink-soft); font-size: 0.75rem; 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.75rem/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 {
  display: none;
}
.site-nav .is-current > a { color: var(--accent-deep); font-weight: 700; }

.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.78rem/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.75rem; padding-inline: 0.35rem;
}
.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.8125rem/1.45 var(--font-mono); letter-spacing: 0.02em;
  padding-block: 0.6rem; text-align: center;
}
.research-bar__inner {
  display: flex; justify-content: center; align-items: baseline;
  flex-wrap: wrap; gap: 0.25rem var(--s-4);
}
.research-bar strong { color: #fff; font-weight: 600; }
.research-bar__contact { color: #fff; }
.research-bar__contact a {
  color: var(--accent-soft); font-weight: 700; text-underline-offset: 0.2em;
}
.research-bar__contact a:hover { color: #fff; }

/* --- 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.75rem/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.75rem/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.75rem/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.75rem/1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  display: block; margin-block-end: 0.7rem;
}

/* --- Product grid ------------------------------------------------------- */
/* Media queries, not container queries.
   This was written as `@container` with `container-type: inline-size` on
   .product-grid itself — which never matched, because an element cannot query
   its own container; @container resolves against the nearest *ancestor*
   container. The result was three 113px tiles on a 375px phone. A wrapper
   element would make container queries work, but the grid is always full width
   inside .site-shell, so the viewport is the honest thing to measure. */
.product-grid {
  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;
}
@media (max-width: 62rem) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 21rem) { .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.
   Square, because the product shots are square. A 4:3 panel cropped the top
   and bottom off every vial here while the shop archive showed them whole —
   the same product looked like two different photographs. */
.product-tile__media {
  aspect-ratio: 1 / 1;
  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.75rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.product-tile__title { font-size: var(--t-2); line-height: 1.35; 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.75rem/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.75rem/1.4 var(--font-mono);
  color: var(--muted); letter-spacing: 0.04em; margin-block-start: 0.35rem;
}
.brand__logo { display: block; inline-size: 190px; block-size: auto; }
.product-tile__basket { position: relative; z-index: 2; margin-block-start: var(--s-3); }
.product-tile__basket .button { inline-size: 100%; text-align: center; }

/* --- 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.75rem/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.75rem/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--preorder { color: var(--warn); }
.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.75rem/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.75rem/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: 1px 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__detail { align-self: end; min-width: 0; }
.delivery-band__options { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid #4b6a68; }
.delivery-band__options li {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid #4b6a68;
}
.delivery-band__options span { color: #b7ccc9; min-width: 0; }
.delivery-band__options strong { display: block; color: #fff; }
.delivery-band__price { color: #fff; font: 700 var(--t-1)/1 var(--font-mono); white-space: nowrap; }
.delivery-band__terms { color: #b7ccc9; margin-block: var(--s-3) var(--s-2); font-size: 0.9rem; } /* 9.0:1 on --ink */
.delivery-band a { color: var(--accent-soft); }
.delivery-band a:hover { color: #fff; }

@media (max-width: 54rem) {
  .delivery-band__detail { margin-block-start: var(--s-4); }
}

/* --- Notices ------------------------------------------------------------ */
.notice {
  border: 1px solid var(--line-strong); border-inline-start: 1px 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 { max-width: 76ch; }
.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.75rem/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.75rem/1.3 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; margin-block-end: var(--s-2) !important;
}
.footer-label--spaced { margin-block-start: var(--s-4) !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-socials { display: flex; flex-wrap: wrap; gap: 0.4rem var(--s-3); }
.footer-socials a { color: var(--muted); font-size: 0.92rem; text-underline-offset: 0.2em; }
.footer-socials a:hover { color: var(--accent-deep); }
.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);
}
/* impeccable [line-length]: these ran ~174 chars across the full 1200px
   shell. Legal smallprint still has to be readable. */
.footer-legal p { max-width: 74ch; }

/* --- 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
   ========================================================================== */
/* ---- (was @layer components; unlayered so it beats theme.json global styles) ---- */
@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); }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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; }
}

/* Stack the two-column blocks at the same point the nav collapses. Holding
   the hero as a grid down to 47rem left the H1 in a ~370px column on a 768px
   tablet, next to a 304px minimum panel. */
@media (max-width: 54rem) {
  .hero, .section-heading, .split-section, .delivery-band .site-shell { display: block; }
  .hero__panel { margin-block-start: var(--s-5); }
  .section-heading p { margin-block-start: var(--s-3); }
  .split-section__copy { padding-block-start: var(--s-4); }
  .delivery-band p { margin-block-start: var(--s-3); }
}

@media (max-width: 47rem) {
  .hero { padding-block: var(--s-5) var(--s-6); }
  .hero__panel { margin-block-start: var(--s-5); min-block-size: 0; }
  .section-heading p { margin-block-start: var(--s-3); }
  .section, .split-section { padding-block: var(--s-6); }
  .section-heading { margin-block-end: var(--s-4); }
  .split-section__copy { padding-block-start: var(--s-4); }
  .delivery-band .site-shell { padding-block: var(--s-6); }
  .delivery-band p { margin-block-start: var(--s-3); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip__item { border-inline-end: 0; border-block-end: 1px solid var(--line); padding: var(--s-3) var(--s-4); }
  .trust-strip__item:last-child { border-block-end: 0; }
  .trust-strip__icon { margin-block-end: 0.35rem; }
  h1 { max-width: 100%; }
  h2 { max-width: 100%; }

  /* CTAs go full width — two side-by-side buttons at 360px leaves neither
     comfortably tappable. */
  .hero__actions { gap: var(--s-3); }
  .hero__actions .button { inline-size: 100%; }

  /* The notice bar wraps to three lines on a phone; centring it there just
     makes the ragged edges more obvious. */
  .research-bar { text-align: start; font-size: 0.75rem; line-height: 1.45; padding-block: 0.55rem; }
  .research-bar__inner { display: grid; justify-content: stretch; gap: 0.2rem; }

  /* Media panel gets shorter so a tile is not a full screen per product.
     The WooCommerce grid columns are handled at the foot of this file — they
     have to come after the unlayered .woocommerce overrides to win. */
  .product-tile__media { aspect-ratio: 16 / 10; }

  /* Stacked label/value reads better than a squeezed two-column table. */
  .spec-table th, .spec-table td { display: block; inline-size: 100%; padding-inline: 0; }
  .spec-table th { border-block-end: 0; padding-block-end: 0.15rem; font-size: 0.8rem; }
  .spec-table td { padding-block-start: 0; }

  .doc-list a { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .faq summary { font-size: var(--t-0); padding-block: var(--s-3); }
  .entry { padding-block: var(--s-6); }
  .av-shop-toolbar { flex-direction: column; align-items: stretch; }
}

/* Very small phones */
@media (max-width: 26rem) {
  .site-header__inner { min-block-size: 3.75rem; }
  .brand { font-size: 1rem; }
  .brand__logo { inline-size: 150px; }
  .brand small { display: none; }
  .cart-link { padding: 0.6rem; }
  .product-tile__body { padding: var(--s-3); }
  .doc-status { font-size: 0.75rem; }
}




/* ---------------------------------------------------------------------------
   Measure
   impeccable [line-length]: prose running the full 1200px shell hit ~140
   characters per line. Anything that is a paragraph of running text gets a
   readable measure; tables, grids and tiles are exempt.
   ------------------------------------------------------------------------- */
.lead,
.page-description,
.woo-shell > p,
.woocommerce-product-details__short-description p,
.entry-body p,
.av-product-detail__desc p,
.term-description p,
.woocommerce-products-header p,
.woocommerce-archive-description p { max-width: 72ch; }

.lead, .page-description { color: var(--muted); font-size: var(--t-1); }


/* ---------------------------------------------------------------------------
   Group imagery
   Composite shots of several vials. Sized to the container rather than given a
   fixed height, so the very wide six-vial lineup does not get letterboxed.
   ------------------------------------------------------------------------- */
.av-group-img { inline-size: 100%; block-size: auto; display: block; }

.hero__panel-media {
  margin: 0 0 var(--s-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.av-category-banner {
  /* Width-capped rather than height-capped. The group shots are 2.7:1, so at
     full container width the banner ran 423px tall and pushed the product grid
     off the first screen. Cropping to a shorter box instead would clip the
     vial caps, so the image is simply shown smaller and centred. */
  max-inline-size: 820px;
  margin: 0 auto var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* In-content group shots dropped into a page via the editor. */
.entry .av-group-img,
.woo-shell .av-group-img { border-radius: var(--radius); }

@media (max-width: 47rem) {
  .av-category-banner { margin-block-end: var(--s-4); }
}

/* ---------------------------------------------------------------------------
   Closing CTA
   Content pages previously ended on their last paragraph with no next step.
   ------------------------------------------------------------------------- */
.av-cta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s-5);
  margin-block: var(--s-7) 0;
  box-shadow: var(--shadow-1);
}
.av-cta h2 { font-size: var(--t-2); margin-block: 0 var(--s-2); max-width: 28ch; }
.av-cta p { color: var(--muted); max-width: 62ch; }
.av-cta p:has(.button) { margin-block-start: var(--s-4); }
.av-cta .button { margin-block-end: 0; }
.av-cta p:last-child { margin-block-start: var(--s-3); }

@media (max-width: 47rem) {
  .av-cta { padding: var(--s-4); margin-block-start: var(--s-6); }
  .av-cta .button { inline-size: 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;
}

/* ---------------------------------------------------------------------------
   Shop archive tiles.
   Deliberately built to match .product-tile on the homepage: same square media
   panel, same border, same radius, same typography. Previously the archive
   used WooCommerce's stock float layout with unconstrained images, so the same
   six products looked like a different site.
   ------------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  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 a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  margin: 0 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-sunk);
  transition: transform 320ms var(--ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
  padding: 0 var(--s-4);
  margin: 0 0 0.35rem;
}
.woocommerce ul.products li.product .price {
  padding: 0 var(--s-4);
  margin: 0 0 var(--s-3);
  font-size: var(--t-1);
  display: block;
}
.woocommerce ul.products li.product .button {
  margin: auto var(--s-4) var(--s-4);
  align-self: stretch;
  justify-content: center;
}
.woocommerce ul.products li.product .av-loop-meta {
  padding: var(--s-3) var(--s-4) 0;
  color: var(--accent-deep);
  font: 700 0.75rem/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.woocommerce ul.products li.product .doc-status { margin: 0 var(--s-4) var(--s-3); }
.woocommerce ul.products li.product .onsale { display: none; }

/* Archive header + controls */
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 0.9rem; margin: 0; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  background: var(--surface);
}
.av-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding-block: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-5);
}
.av-shop-toolbar form { margin: 0; }

.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); }

/* ---------------------------------------------------------------------------
   Single product
   The stock float layout is replaced with grid so the gallery, summary and the
   full-width detail block below can share one container.
   ------------------------------------------------------------------------- */
.woo-shell { padding-block-end: var(--s-7); }

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
  align-items: start;
  margin-block-start: var(--s-5);
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}
.woocommerce div.product .summary,
.woocommerce div.product div.summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.woocommerce div.product .product_title {
  font-size: var(--t-4);
  margin-block: 0.15em 0.3em;
  max-width: none;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--t-3);
  margin-block: 0 var(--s-2);
  display: block;
}
.av-keyline { color: var(--muted); margin-block: 0 0.2rem; font-size: 0.95rem; }
.av-keyline--mono { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.woocommerce div.product .summary .doc-status { margin-block: var(--s-3) var(--s-4); }

.woocommerce div.product form.cart { margin-block: var(--s-4); }
.woocommerce div.product form.cart .quantity input {
  border: 1px solid var(--line-ui);
  border-radius: var(--radius);
  padding: 0.7rem 0.5rem;
  min-block-size: 46px;
}
.woocommerce div.product .product_meta {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-3);
  margin-block-start: var(--s-4);
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* Full-width detail block below the two columns. */
.av-product-detail {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-6);
  margin-block-start: var(--s-4);
}
.av-product-detail h2 { font-size: var(--t-2); margin-block-end: var(--s-3); max-width: none; }
.av-product-detail__desc { max-width: var(--measure); margin-block-end: var(--s-7); }
.av-product-detail__desc .entry-body p { color: var(--ink-soft); margin-block-end: var(--s-3); }
.av-product-detail__desc .entry-body h3 {
  font-size: var(--t-1); margin-block: var(--s-4) var(--s-2);
}
.av-product-detail__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-6);
  align-items: start;
}
.av-product-detail__cols .spec-table { margin-block-start: 0; }
.av-product-detail__cols .batch-callout { margin-block-start: 0; }

.woocommerce .related.products {
  grid-column: 1 / -1;
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-6);
  margin-block-start: var(--s-7);
}
.woocommerce .related.products > h2 { font-size: var(--t-2); margin-block-end: var(--s-4); }

.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; }

/* ============================================================================
   WOOCOMMERCE RESPONSIVE — MUST STAY LAST
   ----------------------------------------------------------------------------
   These carry the same specificity as the .woocommerce rules above, so they
   only win by being later in the file. Putting them up with the other media
   queries left the shop archive at three columns on a 375px phone — 109px
   tiles. Do not move this block.
   ========================================================================== */
@media (max-width: 62rem) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 54rem) {
  /* Gallery above summary. */
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-block-start: var(--s-4);
  }
  .av-product-detail__cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .av-product-detail { padding-block-start: var(--s-5); }
  .av-product-detail__desc { margin-block-end: var(--s-6); }
}

@media (max-width: 47rem) {
  .woocommerce div.product .product_title { font-size: var(--t-3); }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: var(--t-2); }
  /* Full-width add-to-cart; a 59px button next to a quantity box is not a
     tap target. */
  .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .woocommerce div.product form.cart .quantity { flex: 0 0 5.5rem; }
  .woocommerce div.product form.cart button.button { flex: 1 1 auto; justify-content: center; }

  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; margin-block-end: var(--s-2); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--t-1); padding-inline: var(--s-3);
  }
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .av-loop-meta { padding-inline: var(--s-3); }
  /* In a ~170px tile the lot note has nowhere to go, so the badge drops to
     the status alone. The full string is still on the product page. */
  .woocommerce ul.products li.product .doc-status {
    margin-inline: var(--s-3);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    gap: 0.3rem;
  }
  .woocommerce ul.products li.product .doc-status__note { display: none; }

  .woocommerce ul.products li.product .button {
    margin: auto var(--s-3) var(--s-3);
    padding: 0.7rem 0.6rem;
    font-size: 0.82rem;
  }
}

/* Single column only on genuinely tiny screens. At 375px a two-up grid gives
   ~170px tiles, which is the mobile commerce norm and keeps the archive to a
   third of the scroll depth a one-column layout produced. */
@media (max-width: 21rem) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ============================================================================
   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: ""; }
}

/* ---------------------------------------------------------------------------
 * Basket drawer
 *
 * Ships empty and hidden; hydrated by assets/cart-drawer.js when opened, so
 * no basket state is ever written into cached HTML.
 * ------------------------------------------------------------------------- */

.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(15, 23, 32, 0.45);
	opacity: 0;
	transition: opacity 180ms ease;
}

.cart-drawer.is-open { opacity: 1; }

body.has-cart-drawer-open { overflow: hidden; }

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100%);
	height: 100%;
	padding: 1.25rem;
	overflow-y: auto;
	background: #fff;
	box-shadow: -8px 0 32px rgba(15, 23, 32, 0.18);
	transform: translateX(100%);
	transition: transform 200ms ease;
}

.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e6e9ec;
}

.cart-drawer__title { margin: 0; font-size: 1.125rem; }

.cart-drawer__close {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.cart-drawer__empty { margin: 1.5rem 0; color: #5a6672; }

.cart-drawer__items {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-drawer__item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid #f0f2f4;
}

.cart-drawer__thumb {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	object-fit: cover;
	border-radius: 4px;
	background: #f4f6f7;
}

.cart-drawer__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cart-drawer__name { font-weight: 600; line-height: 1.3; }
.cart-drawer__meta { font-size: 0.875rem; color: #5a6672; }

.cart-drawer__summary {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #e6e9ec;
}

.cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.85rem;
	font-size: 1rem;
}

.cart-drawer__button {
	display: block;
	min-height: 44px;
	margin-bottom: 0.5rem;
	padding: 0.7rem 1rem;
	border-radius: 4px;
	background: #12303f;
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.cart-drawer__button--ghost {
	background: transparent;
	border: 1px solid #12303f;
	color: #12303f;
}

/* Full-width sheet on small screens. */
@media (max-width: 480px) {
	.cart-drawer__panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cart-drawer,
	.cart-drawer__panel { transition: none; }
}


/* Basket badge confirmation pulse, and a 44px tap target on the link. */
.cart-link { min-height: 44px; }

@keyframes cart-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

.cart-link__count.is-bumped {
	animation: cart-bump 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cart-link__count.is-bumped { animation: none; }
}