/*
Theme Name:   Ironcrest Child
Theme URI:    https://ironcrestpeptides.com
Description:  Child theme of GeneratePress for Ironcrest Peptides. Research-use-only
              peptide catalogue. Stage one: token layer and base only — no component
              CSS, no page templates.
Author:       Ironcrest Peptides
Author URI:   https://ironcrestpeptides.com
Template:     generatepress
Version:      1.0.0
Text Domain:  ironcrest-child
*/

/* ============================================================================
   TOKENS — brand/spec/ironcrest-design-tokens.md v1.2
   Single source of truth. Every value below is copied from the spec.
   No raw hex may appear anywhere else in this stylesheet or in any component
   CSS added later. If a value here disagrees with the spec, the spec wins.
   ============================================================================ */
:root{

  /* ── 1. Neutral ramp (cool-biased) ───────────────────────────────────────
     The five structural tokens are never set as text. Do not pass/fail them.
     Text ratios (bg / surface / raised):
       --ic-text-muted  6.25 / 5.88 / 5.44
       --ic-text       11.09 / 10.43 / 9.65
       --ic-text-high  16.89 / 15.88 / 14.69                                */
  --ic-bg:#0B0D10;
  --ic-surface:#12151A;
  --ic-surface-raised:#191D23;
  --ic-border:#252A31;
  --ic-border-strong:#39404A;
  --ic-text-muted:#8A939E;
  --ic-text:#BFC4CB;
  --ic-text-high:#EDEFF2;

  /* ── Product surface (exception: pure black, image containers only) ────── */
  --ic-surface-product:#000000;

  /* ── Accents ────────────────────────────────────────────────────────────
     Copper 31.07°, verdigris 169.23° — 138.16° apart.
     Qualification ceiling: these ratios are verified through
     --ic-surface-raised and no further.
       --ic-copper           6.48 / 6.09 / 5.63
       --ic-copper-bright    8.46 / 7.96 / 7.35
       --ic-copper-dim       3.50 / 3.30 / 3.04   never text
       --ic-verdigris        4.87 / 4.58 / 4.24   borders and fills only
       --ic-verdigris-bright 6.69 / 6.29 / 5.82   all verdigris text        */
  --ic-copper:#C08A50;
  --ic-copper-bright:#D9A05C;
  --ic-copper-dim:#886038;
  --ic-verdigris:#3E8C7E;
  --ic-verdigris-bright:#4FA695;

  /* ── Semantic (system states only — never brand colors) ─────────────────
       --ic-success 5.66 / 5.32 / 4.92   badges only, no small text
       --ic-warning 7.57 / 7.12 / 6.59   no copper in the same sightline
       --ic-error   6.18 / 5.81 / 5.37   border/icon/bar, not message text  */
  --ic-success:#4E9A5F;
  --ic-warning:#C99A3E;
  --ic-error:#DE7168;

  /* ── Metallic gradients (decorative only — never behind text) ─────────── */
  --ic-steel-gradient:linear-gradient(145deg,#8A8581 0%,#C0BBB7 35%,#6E6A66 60%,#ADA8A2 100%);
  --ic-copper-gradient:linear-gradient(145deg,#785030 0%,#C08A50 40%,#886038 70%,#B08858 100%);

  /* ── 2. Typography ──────────────────────────────────────────────────────
     All three faces are self-hosted in assets/fonts/. No CDN request.       */
  --ic-font-display:'Saira Condensed','Arial Narrow',Helvetica,sans-serif;
  --ic-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ic-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Scale (1.25 major third). Body text never below 14px;
     16px base on mobile prevents iOS input zoom.                            */
  --ic-text-xs:0.75rem;
  --ic-text-sm:0.875rem;
  --ic-text-base:1rem;
  --ic-text-lg:1.25rem;
  --ic-text-xl:1.563rem;
  --ic-text-2xl:1.953rem;
  --ic-text-3xl:2.441rem;
  --ic-text-4xl:3.052rem;

  /* Paired line height + weight for each step of the scale. */
  --ic-lh-xs:1.5;    --ic-wt-xs:400;
  --ic-lh-sm:1.5;    --ic-wt-sm:400;
  --ic-lh-base:1.6;  --ic-wt-base:400;
  --ic-lh-lg:1.5;    --ic-wt-lg:500;
  --ic-lh-xl:1.3;    --ic-wt-xl:600;
  --ic-lh-2xl:1.2;   --ic-wt-2xl:600;
  --ic-lh-3xl:1.15;  --ic-wt-3xl:700;
  --ic-lh-4xl:1.1;   --ic-wt-4xl:700;

  /* Letter spacing. --ic-tracking-wider carries "RESEARCH USE ONLY". */
  --ic-tracking-tight:-0.02em;
  --ic-tracking-normal:0;
  --ic-tracking-wide:0.08em;
  --ic-tracking-wider:0.15em;

  /* ── 3. Spacing (4px base) ──────────────────────────────────────────────
     Section rhythm: --ic-space-16 mobile, --ic-space-24 desktop.            */
  --ic-space-1:4px;
  --ic-space-2:8px;
  --ic-space-3:12px;
  --ic-space-4:16px;
  --ic-space-6:24px;
  --ic-space-8:32px;
  --ic-space-12:48px;
  --ic-space-16:64px;
  --ic-space-24:96px;

  /* ── 4. Radius, borders, elevation ──────────────────────────────────────
     Keep radii tight — the identity is machined.
     Prefer lightness stepping (surface → surface-raised + 1px border) over
     drop shadow on a dark base.                                             */
  --ic-radius-sm:2px;
  --ic-radius:4px;
  --ic-radius-lg:8px;
  --ic-radius-full:9999px;
  --ic-border-width:1px;
  --ic-shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --ic-shadow:0 4px 12px rgba(0,0,0,0.5);
  --ic-shadow-lg:0 12px 32px rgba(0,0,0,0.6);
}

/* ============================================================================
   SELF-HOSTED FONTS — assets/fonts/
   Spec §2: no external font request on page load, no Google Fonts CDN link.

   Saira Condensed ships as four static instances (400/500/600/700).
   Inter and JetBrains Mono ship from Google as VARIABLE fonts — one file each
   covers every weight the spec asks for, declared here as a weight range.
   Subset: latin (U+0000–00FF and related punctuation).
   ============================================================================ */

/* Saira Condensed — display: H1–H3, product names, nav */
@font-face{
  font-family:'Saira Condensed';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/saira-condensed-400.woff2') format('woff2');
}
@font-face{
  font-family:'Saira Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/saira-condensed-500.woff2') format('woff2');
}
@font-face{
  font-family:'Saira Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/saira-condensed-600.woff2') format('woff2');
}
@font-face{
  font-family:'Saira Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/saira-condensed-700.woff2') format('woff2');
}

/* Inter — body, UI, forms. Variable file, wght axis 100–900. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/inter-variable.woff2') format('woff2');
}

/* JetBrains Mono — lot numbers, SKUs, purity, dates.
   Variable file, wght axis 400–800. */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

/* ============================================================================
   BASE LAYER
   Reset, page canvas, type defaults, links, focus. Nothing else.
   Component CSS belongs in stage two, not here.
   ============================================================================ */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  background-color:var(--ic-bg);
  color:var(--ic-text);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-base);
  line-height:var(--ic-lh-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ic-font-display);
  color:var(--ic-text-high);
}

a{
  color:var(--ic-copper);
}

a:hover,
a:focus{
  color:var(--ic-copper-bright);
}

/* Spec §5: 2px --ic-copper-bright outline at 2px offset, on every interactive
   element. Never removed. Carried over from the DHL build; do not lose it. */
:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

/* ============================================================================
   COMPONENT LAYER — stage two
   ----------------------------------------------------------------------------
   Class names come from reference-dhl/dhl-child/ (style.css and
   woocommerce/content-product.php). They are NOT invented here: stage three
   ports that markup verbatim, so any renamed selector would silently stop
   matching. Where no old-theme equivalent exists, the class is ic- prefixed.

   Derived from exports/token-proof.html, where these components were built and
   verified at 375px and 414px against real contrast measurements.

   Tokens only. No raw hex below this line.
   ============================================================================ */


/* ============================================================================
   1. LAYOUT PRIMITIVES
   ============================================================================ */

.container{
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--ic-space-6);
}
.container-sm{
  max-width:780px;
  margin:0 auto;
  padding:0 var(--ic-space-6);
}

/* Section rhythm: --ic-space-16 mobile, --ic-space-24 desktop (spec §3). */
.section{ padding:var(--ic-space-16) 0; }
.section-sm{ padding:var(--ic-space-12) 0; }

@media (min-width:901px){
  .section{ padding:var(--ic-space-24) 0; }
  .section-sm{ padding:var(--ic-space-16) 0; }
}

/* Old theme used three tinted section variants against a light page. On a dark
   base the page IS the dark tone, so these become surface steps instead. */
.section-dark{ background:var(--ic-bg); }
.section-off{ background:var(--ic-surface); }
.section-gray{ background:var(--ic-surface); }

.section-label{
  display:inline-block;
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wider);
  text-transform:uppercase;
  color:var(--ic-text-muted);
  margin-bottom:var(--ic-space-3);
}
.section-title{ margin-bottom:var(--ic-space-4); }
.section-title + p{
  color:var(--ic-text-muted);
  max-width:66ch;
}
.section-header-center{ text-align:center; }
.section-header-center .section-title + p{ margin-left:auto; margin-right:auto; }

.grid-2,
.grid-3{
  display:grid;
  gap:var(--ic-space-6);
  align-items:start;
}
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:900px){
  .grid-2,
  .grid-3{ grid-template-columns:1fr; }
}


/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */

h1,h2,h3,h4,h5,h6{
  font-family:var(--ic-font-display);
  color:var(--ic-text-high);
  text-transform:uppercase;
}
h1{ font-size:var(--ic-text-4xl); line-height:var(--ic-lh-4xl); font-weight:var(--ic-wt-4xl); letter-spacing:var(--ic-tracking-tight); }
h2{ font-size:var(--ic-text-3xl); line-height:var(--ic-lh-3xl); font-weight:var(--ic-wt-3xl); letter-spacing:var(--ic-tracking-tight); }
h3{ font-size:var(--ic-text-2xl); line-height:var(--ic-lh-2xl); font-weight:var(--ic-wt-2xl); letter-spacing:var(--ic-tracking-normal); }
h4{ font-size:var(--ic-text-xl);  line-height:var(--ic-lh-xl);  font-weight:var(--ic-wt-xl);  letter-spacing:var(--ic-tracking-normal); }
h5{ font-size:var(--ic-text-lg);  line-height:var(--ic-lh-lg);  font-weight:var(--ic-wt-lg);  letter-spacing:var(--ic-tracking-wide); }
h6{ font-size:var(--ic-text-base);line-height:var(--ic-lh-base);font-weight:600;              letter-spacing:var(--ic-tracking-wide); }

/* Hero H1 steps down on small screens so it stays two lines (spec §0). */
@media (max-width:900px){
  h1{ font-size:var(--ic-text-3xl); line-height:var(--ic-lh-3xl); }
  h2{ font-size:var(--ic-text-2xl); line-height:var(--ic-lh-2xl); }
}

p{ line-height:var(--ic-lh-base); }
p + p{ margin-top:var(--ic-space-4); }

.text-sm{ font-size:var(--ic-text-sm); line-height:var(--ic-lh-sm); }
.text-xs{ font-size:var(--ic-text-xs); line-height:var(--ic-lh-xs); }

/* ── Mono readouts — lot numbers, SKUs, purity, dates ──────────────────────
   Spec §2: within the mono block, ONLY purity carries verdigris. Every other
   readout stays neutral, or a price/quantity reads as a promotional claim. */
.ic-mono{
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
}
.ic-readout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:var(--ic-border-width);
  background:var(--ic-border);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  overflow:hidden;
}
.ic-readout-cell{
  background:var(--ic-surface);
  padding:var(--ic-space-4);
  display:flex;
  flex-direction:column;
  gap:var(--ic-space-2);
}
.ic-readout-k{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-muted);
}
.ic-readout-v{
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--ic-text-xl);
  font-weight:500;
  color:var(--ic-text-high);
}
/* The ONE mono value that carries verdigris: purity is the test result. */
.ic-readout-v--purity{ color:var(--ic-verdigris-bright); }

/* ── Carried utility classes ───────────────────────────────────────────────
   Colour-named for the old palette. Names kept because ported markup uses
   them (.text-gray ×26, .text-teal ×5). */
.text-gray{ color:var(--ic-text-muted); }
.text-teal{ color:var(--ic-verdigris-bright); }
.text-white{ color:var(--ic-text-high); }
.text-center{ text-align:center; }
.bold{ font-weight:600; }
.italic{ font-style:italic; }
.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-16{ gap:var(--ic-space-4); }
.gap-24{ gap:var(--ic-space-6); }
.mt-8{ margin-top:var(--ic-space-2); }   .mb-8{ margin-bottom:var(--ic-space-2); }
.mt-16{ margin-top:var(--ic-space-4); }  .mb-16{ margin-bottom:var(--ic-space-4); }
.mt-24{ margin-top:var(--ic-space-6); }  .mb-24{ margin-bottom:var(--ic-space-6); }
.mt-40{ margin-top:var(--ic-space-12); } .mb-40{ margin-bottom:var(--ic-space-12); }


/* ============================================================================
   3. BUTTONS
   ============================================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ic-space-2);
  padding:var(--ic-space-3) var(--ic-space-6);
  border:var(--ic-border-width) solid transparent;
  border-radius:var(--ic-radius);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear;
}
.btn-sm{
  padding:var(--ic-space-2) var(--ic-space-4);
  font-size:var(--ic-text-xs);
}

/* PRIMARY — copper fill, --ic-bg label (6.48:1). Spec §5. */
.btn-teal,
.btn-gold{
  background:var(--ic-copper);
  color:var(--ic-bg);
  border-color:var(--ic-copper);
}
.btn-teal:hover,
.btn-gold:hover,
.btn-teal:focus,
.btn-gold:focus{
  background:var(--ic-copper-bright);
  border-color:var(--ic-copper-bright);
  color:var(--ic-bg);
}

/* SECONDARY — transparent, --ic-border-strong, --ic-text label. Spec §5. */
.btn-outline,
.btn-outline-white{
  background:transparent;
  border-color:var(--ic-border-strong);
  color:var(--ic-text);
}
.btn-outline:hover,
.btn-outline-white:hover,
.btn-outline:focus,
.btn-outline-white:focus{
  border-color:var(--ic-copper);
  color:var(--ic-copper);
  background:transparent;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"]{
  opacity:.4;
  cursor:not-allowed;
}
.btn-teal:disabled:hover,
.btn-gold:disabled:hover{ background:var(--ic-copper); border-color:var(--ic-copper); }
.btn-outline:disabled:hover,
.btn-outline-white:disabled:hover{ border-color:var(--ic-border-strong); color:var(--ic-text); }

/* Focus: 2px --ic-copper-bright at 2px offset. Never removed (spec §5). */
.btn:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}


/* ============================================================================
   4. PRODUCT CARD
   Markup: reference-dhl/dhl-child/woocommerce/content-product.php
   ============================================================================ */

/* Grid — WooCommerce core floats its loop; this replaces that with grid so
   card heights equalise per row.

   FOUR columns desktop, TWO on mobile — never one. Matching the DHL build,
   which shipped 4-up and 2-up. The mobile case is the whole reason the
   pcn-size :empty rule and the body min-height exist: at 375px there are two
   cards side by side and their heights have to agree. */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"]{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ic-space-6);
  margin:0;
  padding:0;
  list-style:none;
  align-items:stretch;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products[class*="columns-"]::before,
.woocommerce ul.products[class*="columns-"]::after{ content:none; display:none; }
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product{
  width:100%;
  margin:0;
  padding:0;
  float:none;
  display:flex;
}
.woocommerce ul.products li.product::before{ content:none; }

@media (max-width:900px){
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--ic-space-4);
  }
}
@media (max-width:480px){
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"]{ gap:var(--ic-space-3); }
}

/* Card shell — the entire card is one anchor. */
.product-card{
  display:flex;
  flex-direction:column;
  width:100%;
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  transition:border-color .12s linear,background-color .12s linear;
}
.woocommerce ul.products li.product .product-card--shop{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.product-card:hover,
.product-card:focus-visible{
  border-color:var(--ic-border-strong);
  background:var(--ic-surface-raised);
}
.product-card:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

/* Image container — pure black. Product photography sits on #000 so it reads
   as framed rather than pasted (spec §1, product surface). */
.product-card-image-wrap{
  background:var(--ic-surface-product);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-2) var(--ic-space-3) var(--ic-space-3);
  flex-shrink:0;
  position:relative;
}
.product-card-image-link{ display:block; line-height:0; }
.product-card-image,
.product-card-image-wrap img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  max-height:200px;
  margin:0 auto;
  object-fit:contain;
}
.product-card-image-wrap .woocommerce-placeholder{
  min-height:160px;
  max-height:200px;
  object-fit:contain;
}
/* If the parent theme hides loop images, keep ours visible. */
.woocommerce ul.products li.product .product-card-image-wrap img{
  opacity:1;
  visibility:visible;
}

/* Card body. min-height plus the :empty size rule below is what holds card
   heights uniform on mobile — verified against variable name and description
   lengths in the proof page. */
.product-card-header,
.product-card-banner{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:var(--ic-space-2);
  min-height:11.5rem;
  padding:var(--ic-space-4);
  background:transparent;
}

.product-card-tag{
  display:inline-block;
  align-self:flex-start;
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-muted);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius-sm);
  padding:var(--ic-space-1) var(--ic-space-2);
}

/* pcn-compound / pcn-size two-line split. Preserved from the DHL build —
   it exists to keep card heights uniform on mobile (spec §5). */
.product-card-name{
  margin:0;
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  font-weight:var(--ic-wt-lg);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
  transition:color .12s linear;
}
.product-card-name .pcn-compound{ display:block; }
.product-card-name .pcn-size{
  display:block;
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-sm);
  font-weight:400;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:none;
  color:var(--ic-text-muted);
}
/* Reserves the size line's height when a product has no size, so a card with
   no size stays the same height as one that has it. Do not remove. */
.product-card-name .pcn-size:empty::before{ content:'\00a0'; }

.product-card:hover .pcn-compound{ color:var(--ic-copper-bright); }

/* Description. NOTE: -webkit-line-clamp cuts the last line at the character
   level, so it can break mid-word. Spec §5 requires word boundaries — that
   guarantee has to come from the template (wp_trim_words) or JS, neither of
   which is in scope for stage two. See the stage-two report. */
/* FIX (stage 3b): flex was `1 0 auto`. The grow factor made this box taller
   than the two lines -webkit-line-clamp is set to, and the clamp then renders
   as many lines as the taller box fits and cuts the last one through the
   middle of the glyphs. It also consumed all the free space in the header,
   which left `margin-top:auto` on .product-card-price inert — the footer was
   only landing at the bottom by accident, because every card in a row happened
   to grow by the same amount.

   The optional lot line broke that accident: a card without one grew its
   description by the lot line's height instead, so at 375px one card showed a
   clean two-line summary and the card beside it showed four lines with the
   fourth sliced. `0 0 auto` clamps at two lines as intended and hands the free
   space back to the price's auto margin, which is the documented footer
   alignment mechanism. */
.product-card-short{
  margin:0;
  flex:0 0 auto;
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-sm);
  color:var(--ic-text-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* !important REQUIRED: beats element-level inline style attributes pasted into
   the product editor (<span style="font-family:…">). Carried from the DHL
   build, where the same problem was already solved. */
.product-card-short,
.product-card-short *{
  font-family:var(--ic-font-body) !important;
}
.product-card .product-card-header p,
.product-card .product-card-header p *,
.product-card .product-card-body p,
.product-card .product-card-body p *{
  font-family:var(--ic-font-body) !important;
}

/* Footer alignment via margin-top:auto (spec §5). */
.product-card-price{
  margin-top:auto;
  padding-top:var(--ic-space-3);
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--ic-text-lg);
  font-weight:600;
  line-height:1.2;
  color:var(--ic-copper);
}
.product-card-price *,
.product-card-price .amount,
.product-card-price ins,
.product-card-price del{ color:inherit; }
.product-card-price del{ opacity:.55; text-decoration:line-through; }
.product-card-price ins{ text-decoration:none; }

.product-card-body{ padding:var(--ic-space-4); }
.product-card-body p{
  font-size:var(--ic-text-sm);
  color:var(--ic-text-muted);
  margin-bottom:var(--ic-space-4);
}
@media (max-width:900px){
  .product-card-header,
  .product-card-banner{
    min-height:9.5rem;
    padding:var(--ic-space-3);
  }
  .product-card-image-wrap{ padding:var(--ic-space-1) var(--ic-space-2) var(--ic-space-2); }
  .product-card-name{ font-size:var(--ic-text-base); }
}

.product-card-footer{
  margin-top:auto;
  padding:var(--ic-space-3) var(--ic-space-4);
  border-top:var(--ic-border-width) solid var(--ic-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ic-space-3);
}


/* ============================================================================
   5. BADGES
   ============================================================================ */

/* RUO — --ic-text, not muted. Holds 9.65:1 even on a hovered card, clear of
   the 4.5:1 compliance floor (spec §6.1). Never hidden, never collapsed. */
.ruo-badge{
  display:inline-block;
  align-self:flex-start;
  margin-top:var(--ic-space-2);
  font-size:var(--ic-text-xs);
  line-height:1.4;
  letter-spacing:var(--ic-tracking-wider);
  text-transform:uppercase;
  color:var(--ic-text);
  background:transparent;
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-radius:var(--ic-radius-sm);
  padding:var(--ic-space-1) var(--ic-space-2);
  white-space:nowrap;
}

/* COMPLIANCE: on a 2-up mobile card the badge must WRAP, never clip. nowrap
   here would both floor the grid width and cut the text off — the RUO string
   has to remain fully visible at every width (spec §6.1). This block must stay
   AFTER .ruo-badge; source order is what makes it win. */
@media (max-width:900px){
  .ruo-badge{
    white-space:normal;
    letter-spacing:var(--ic-tracking-wide);
    align-self:stretch;
    text-align:center;
  }
}

/* Verification badge — verdigris territory, text in --ic-verdigris-bright. */
.research-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--ic-space-2);
  background:transparent;
  color:var(--ic-verdigris-bright);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  padding:var(--ic-space-1) var(--ic-space-3);
  border:var(--ic-border-width) solid var(--ic-verdigris);
  border-radius:var(--ic-radius-sm);
}
.research-badge svg{ flex:none; }

/* Stock status — --ic-text-high + icon + --ic-tracking-wide. NO COLOUR.
   --ic-warning sits 8.6° from copper and collided with the copper price
   beside it; the conflict is proximity, not location (spec §1, v1.2). */
.ic-stock-status{
  display:flex;
  align-items:center;
  gap:var(--ic-space-2);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
.ic-stock-status svg{ flex:none; }

/* Sale flash. May not use --ic-copper (would read as price) and may not use
   --ic-warning (proximity rule). Neutral high-contrast plate instead — it is
   distinguished by position and wording, not by colour. */
.woocommerce span.onsale{
  position:absolute;
  top:var(--ic-space-2);
  left:var(--ic-space-2);
  right:auto;
  z-index:3;
  margin:0;
  min-height:0;
  min-width:0;
  padding:var(--ic-space-1) var(--ic-space-2);
  background:var(--ic-text-high);
  color:var(--ic-bg);
  border-radius:var(--ic-radius-sm);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-xs);
  font-weight:600;
  line-height:1.4;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
}


/* ============================================================================
   6. FORMS
   The old theme had no form styling at all — every rule here is new.
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea{
  width:100%;
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-radius:var(--ic-radius);
  color:var(--ic-text);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-base);   /* 16px — prevents iOS input zoom (spec §2) */
  line-height:var(--ic-lh-base);
  padding:var(--ic-space-3);
}
textarea{ min-height:8rem; resize:vertical; }

input::placeholder,
textarea::placeholder{ color:var(--ic-text-muted); }

/* Focus: --ic-copper border, no glow (spec §5). The 2px ring layers on top. */
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--ic-copper);
  box-shadow:none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

input[type="checkbox"],
input[type="radio"]{
  width:auto;
  accent-color:var(--ic-copper);
  margin-right:var(--ic-space-2);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

.ic-field{
  display:flex;
  flex-direction:column;
  gap:var(--ic-space-2);
  margin-bottom:var(--ic-space-4);
}
.ic-field label{
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-muted);
  font-weight:500;
}
.ic-field-hint{
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
}

/* Error state. Message text is --ic-text; --ic-error carries the input border
   and the bar only. Never set an error message in --ic-error — compliance
   rule 5 forbids conveying state by colour alone (spec §5, §6.5). */
.ic-field.has-error input,
.ic-field.has-error select,
.ic-field.has-error textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:var(--ic-error);
}
.ic-field-msg{
  display:flex;
  align-items:flex-start;
  gap:var(--ic-space-2);
  font-size:var(--ic-text-sm);
  color:var(--ic-text);
}
.ic-field-msg::before{
  content:"";
  flex:none;
  width:3px;
  align-self:stretch;
  background:var(--ic-error);
  border-radius:var(--ic-radius-sm);
}
.ic-field-msg b{ color:var(--ic-text-high); font-weight:600; }


/* ============================================================================
   7. TRUST / COA ELEMENTS
   Verdigris territory. All text in --ic-verdigris-bright; plain
   --ic-verdigris is borders and fills only (spec §1, v1.1 split).
   ============================================================================ */

.trust-bar{
  background:var(--ic-surface);
  border-top:var(--ic-border-width) solid var(--ic-border);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-4) 0;
}
.trust-bar-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--ic-space-6);
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--ic-space-6);
}
.trust-item{
  display:flex;
  align-items:center;
  gap:var(--ic-space-2);
  color:var(--ic-text);
}
.trust-item span{
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
}
.trust-item .trust-icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--ic-radius-full);
  border:var(--ic-border-width) solid var(--ic-verdigris);
  color:var(--ic-verdigris-bright);
  font-size:var(--ic-text-xs);
  font-weight:600;
}

/* FIX (stage 3b) — mobile stagger.
   The rule above is display:flex + justify-content:center + flex-wrap. Once
   the four items stop fitting on one line, every wrapped line re-centres
   independently against a different item count, so no two rows share a left
   edge and the bar reads as staggered rather than as a list. It is worst at
   375px, where all four items wrap.

   Grid instead: fixed columns, left-aligned, even rhythm. Two columns down to
   601px, one below that. At 375px the longest label — "Third-Party COA
   Transparency" — fits on a single line in one column, so nothing wraps and
   the four check marks form a straight vertical edge.

   This must stay AFTER .trust-bar-inner; the display swap is what wins. */
@media (max-width:900px){
  .trust-bar-inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:start;
    align-items:start;
    gap:var(--ic-space-4);
    padding:0 var(--ic-space-4);
  }
  .trust-item{ align-items:flex-start; }
}
@media (max-width:600px){
  .trust-bar-inner{
    grid-template-columns:1fr;
    gap:var(--ic-space-3);
  }
  .trust-item{ align-items:center; }
}

/* Single product COA button — verification, not a primary action, so it is a
   verdigris outline rather than a second copper button on the page. */
.product-coa-block{ margin:var(--ic-space-4) 0 var(--ic-space-6); }
.product-coa-button{
  display:inline-flex;
  align-items:center;
  gap:var(--ic-space-2);
  padding:var(--ic-space-2) var(--ic-space-4);
  background:transparent;
  color:var(--ic-verdigris-bright);
  border:var(--ic-border-width) solid var(--ic-verdigris);
  border-radius:var(--ic-radius);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .12s linear,background-color .12s linear;
}
.product-coa-button:hover,
.product-coa-button:focus{
  border-color:var(--ic-verdigris-bright);
  background:var(--ic-surface-raised);
  color:var(--ic-verdigris-bright);
}
.product-coa-button:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}
.product-coa-disclosure{
  margin:var(--ic-space-2) 0 0;
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
}

.product-coa-link,
.coa-entry-source{
  display:inline-flex;
  align-items:center;
  gap:var(--ic-space-1);
  font-size:var(--ic-text-sm);
  font-weight:500;
  color:var(--ic-verdigris-bright);
  text-decoration:none;
  border-bottom:var(--ic-border-width) solid var(--ic-verdigris);
  padding-bottom:2px;
}
.product-coa-link:hover,
.coa-entry-source:hover{
  color:var(--ic-verdigris-bright);
  border-bottom-color:var(--ic-verdigris-bright);
}
.product-coa-link:focus-visible,
.coa-entry-source:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

.coa-card,
.coa-entry{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  padding:var(--ic-space-4);
}
.coa-list{ display:grid; gap:var(--ic-space-3); list-style:none; margin:0; padding:0; }
.coa-entry-name{
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-lg);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
.coa-entry-date{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  color:var(--ic-text-muted);
}
.coa-entry-button{
  display:inline-flex;
  align-items:center;
  gap:var(--ic-space-2);
  padding:var(--ic-space-2) var(--ic-space-4);
  background:transparent;
  color:var(--ic-verdigris-bright);
  border:var(--ic-border-width) solid var(--ic-verdigris);
  border-radius:var(--ic-radius);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  text-decoration:none;
}
.coa-entry-button:hover{ border-color:var(--ic-verdigris-bright); background:var(--ic-surface-raised); }
.coa-entry-button:focus-visible{ outline:2px solid var(--ic-copper-bright); outline-offset:2px; }
.coa-disclosure{
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
}
.coa-stat{
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--ic-text-high);
}


/* ============================================================================
   8. COMPLIANCE BLOCKS — styling only, no copy
   ----------------------------------------------------------------------------
   Minimum 4.5:1 measured against the actual painted background. Body text is
   --ic-text on --ic-surface (10.43:1) or --ic-surface-raised (9.65:1).

   All four share one accent: a --ic-copper-dim rule. That token is documented
   as "borders, rules — never text", so this is its sanctioned use, and it is
   never set as text here. It gives compliance blocks a consistent, set-apart
   identity without spending a copper element or invoking --ic-warning, which
   v1.2 forbids anywhere copper appears in the same component or adjacent row.

   NEVER apply display:none, visibility:hidden, or accordion collapse to any
   selector in this section (spec §6.4).
   ============================================================================ */

.disclaimer-block{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-top:3px solid var(--ic-copper-dim);
  border-radius:var(--ic-radius);
  padding:var(--ic-space-6);
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
}
.disclaimer-block h3,
.disclaimer-block h4{
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  font-weight:var(--ic-wt-lg);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
  margin:0 0 var(--ic-space-3);
}
.disclaimer-block p,
.disclaimer-block li{
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
}
.disclaimer-block p + p{ margin-top:var(--ic-space-3); }
.disclaimer-block ul{ padding-left:var(--ic-space-6); margin:var(--ic-space-3) 0 0; }
.disclaimer-block li{ margin-bottom:var(--ic-space-2); }

.compliance-banner{
  background:var(--ic-surface-raised);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-left:3px solid var(--ic-copper-dim);
  border-radius:var(--ic-radius);
  padding:var(--ic-space-4) var(--ic-space-6);
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
}
.compliance-banner strong{
  color:var(--ic-text-high);
  font-weight:600;
}

/* Output by dhl_render_single_product_ruo_notice(), priority 4 on
   woocommerce_single_product_summary — ahead of the product title. */
.product-ruo-banner{
  margin:0 0 var(--ic-space-4);
  font-size:var(--ic-text-sm);
}

.alert{
  padding:var(--ic-space-4) var(--ic-space-6);
  border-radius:var(--ic-radius);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
  margin-bottom:var(--ic-space-6);
}
/* Named for the old gold palette. Name kept — ported markup uses it. */
.alert-gold{
  background:var(--ic-surface-raised);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-left:3px solid var(--ic-copper-dim);
  color:var(--ic-text);
}
.alert-gold strong{ color:var(--ic-text-high); font-weight:600; }

/* Order-received email-delivery notice — batch 9, 2026-07-30.
   .alert alone is not enough: the base supplies padding, radius, type and
   colour but NO background and NO border, so an unmodified .alert renders as
   indented text with no container. This modifier supplies the box.

   DELIBERATELY NOT .alert-gold. That class is on CLAUDE.md's protected list;
   a mail-delivery notice must not wear a class reserved for compliance copy,
   or a future sweep has to treat its text as untouchable. Kept adjacent so the
   .alert family stays together.

   DELIBERATELY WITHOUT the --ic-copper-dim left rule. That rule is the shared
   visual signature of the four compliance blocks and .alert-gold (section 8).
   This is operational information, not compliance text, and should not borrow
   their signature. Plain cool-neutral border instead — structure is
   cool-neutral. Tokens only. */
.alert-delivery{
  background:var(--ic-surface-raised);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  color:var(--ic-text);
}
.alert-delivery strong{ color:var(--ic-text-high); font-weight:600; }
.alert-delivery p{ margin:0; }
.alert-delivery p + p{ margin-top:var(--ic-space-3); }

.hero-disclaimer{
  margin-top:var(--ic-space-8);
  padding:var(--ic-space-3) var(--ic-space-4);
  background:var(--ic-surface);
  border-left:3px solid var(--ic-copper-dim);
  border-radius:0 var(--ic-radius) var(--ic-radius) 0;
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  max-width:66ch;
}


/* ============================================================================
   9. WOOCOMMERCE OVERRIDES — minimum viable
   Enough that cart, checkout and single product do not look broken.
   Full treatment is stage three.
   ============================================================================ */

/* Add to cart. !important REQUIRED: overrides GeneratePress theme.json
   --wp--preset button colours (the source of the default purple) and
   WooCommerce core button styles. Both set these at a specificity and
   cascade position this cannot otherwise beat. Same pattern as the DHL
   build; only the token values changed. */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button.wp-element-button,
.wp-element-button,
button.wp-element-button{
  background:var(--ic-copper) !important;
  background-color:var(--ic-copper) !important;
  color:var(--ic-bg) !important;
  border:var(--ic-border-width) solid var(--ic-copper) !important;
  border-radius:var(--ic-radius);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  padding:var(--ic-space-3) var(--ic-space-6);
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.wp-element-button:hover,
button.wp-element-button:hover{
  background:var(--ic-copper-bright) !important;
  background-color:var(--ic-copper-bright) !important;
  color:var(--ic-bg) !important;
  border-color:var(--ic-copper-bright) !important;
}
.woocommerce .single_add_to_cart_button:focus-visible,
.woocommerce button.button.alt:focus-visible,
.wp-element-button:focus-visible,
button.wp-element-button:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

/* Secondary WooCommerce buttons — update cart, apply coupon, continue
   shopping. Kept off copper so the page has one primary action. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:transparent;
  color:var(--ic-text);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-radius:var(--ic-radius);
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  padding:var(--ic-space-3) var(--ic-space-4);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  border-color:var(--ic-copper);
  color:var(--ic-copper);
  background:transparent;
}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

/* Notices. WooCommerce ships light-background notices that are unreadable on
   a dark base. Info and message are neutral; error carries --ic-error on the
   rule only, never on the message text (compliance rule 5). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.cart-empty{
  background:var(--ic-surface-raised);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-top:3px solid var(--ic-border-strong);
  border-radius:var(--ic-radius);
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  padding:var(--ic-space-4) var(--ic-space-6);
  margin:0 0 var(--ic-space-6);
  list-style:none;
}
.woocommerce-message{ border-top-color:var(--ic-verdigris); }
.woocommerce-error{ border-top-color:var(--ic-error); }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{ display:none; }
.woocommerce-error li{ color:var(--ic-text); }

/* Single product summary. */
.woocommerce div.product .product_title{
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-3xl);
  line-height:var(--ic-lh-3xl);
  font-weight:var(--ic-wt-3xl);
  letter-spacing:var(--ic-tracking-tight);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--ic-text-2xl);
  font-weight:600;
  color:var(--ic-copper);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{ opacity:.55; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{ text-decoration:none; color:var(--ic-copper); }
.woocommerce div.product .woocommerce-product-gallery{ background:var(--ic-surface-product); border-radius:var(--ic-radius); }
.woocommerce div.product div.images img{ background:var(--ic-surface-product); }
.woocommerce div.product form.cart div.quantity input.qty{
  width:5rem;
  text-align:center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  padding:0;
  margin:0 0 var(--ic-space-6);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;
  border:0;
  border-radius:0;
  margin:0 var(--ic-space-4) 0 0;
  padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  padding:var(--ic-space-3) 0;
  display:inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ic-text-high);
  box-shadow:inset 0 -2px 0 0 var(--ic-copper);
}

/* Cart and checkout tables. */
.woocommerce table.shop_table{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  border-collapse:separate;
  border-spacing:0;
  color:var(--ic-text);
}
.woocommerce table.shop_table th{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-3) var(--ic-space-4);
}
.woocommerce table.shop_table td{
  border-top:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-3) var(--ic-space-4);
  color:var(--ic-text);
}
.woocommerce table.shop_table .amount{
  font-family:var(--ic-font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--ic-text-high);
}
.woocommerce table.shop_table tfoot .order-total .amount{ color:var(--ic-copper); }
.woocommerce table.shop_table a.remove{
  color:var(--ic-text-muted);
  font-weight:600;
}
.woocommerce table.shop_table a.remove:hover{
  color:var(--ic-error);
  background:transparent;
}
.woocommerce table.shop_table a.remove:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{
  font-size:var(--ic-text-xl);
  line-height:var(--ic-lh-xl);
  font-weight:var(--ic-wt-xl);
}
.woocommerce-checkout #payment{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--ic-surface-raised);
  color:var(--ic-text);
  border-radius:var(--ic-radius);
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.woocommerce form .form-row label{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
}
.woocommerce form .form-row .required{ color:var(--ic-text); text-decoration:none; }

/* Checkout research-use acknowledgment (sweep F-16, 2026-07-30).
   ADDED DELIBERATELY, and this is the only new rule the F-16 build needed.
   The .form-row label rule directly above is built for short field labels
   ("EMAIL ADDRESS") — uppercase, --ic-text-xs, wide tracking, --ic-text-muted.
   Applied to a 130-character consent sentence it renders as unreadable all-caps
   micro-text, on the one line a purchaser is legally agreeing to.
   This returns that ONE field to body copy. No layout properties: the checkbox
   sits inline on the first line by default, and §6 already gives it its
   accent-colour and focus ring. Colour is --ic-text, not --ic-text-muted —
   10.43:1 on --ic-surface — because this is compliance text and must read at
   least as clearly as body copy (spec §6.1). */
.woocommerce form .form-row.ic-research-ack label{
  text-transform:none;
  letter-spacing:var(--ic-tracking-normal);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}
.woocommerce .woocommerce-breadcrumb{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
}
.woocommerce .woocommerce-breadcrumb a{ color:var(--ic-text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--ic-copper); }

/* Cart count badge in the header.
   NEUTRAL, not copper. A cart count is a notification, not a primary action —
   spec §7 reserves copper for primary actions, and two copper elements sitting
   side by side in the nav (badge + SHOP button) makes the badge read as one.
   Same reasoning as the stock-status line: state carried by position and
   wording, not colour. Copper in the nav belongs to the SHOP button alone. */
.nav-cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.25rem;
  height:1.25rem;
  padding:0 var(--ic-space-1);
  border-radius:var(--ic-radius-full);
  background:var(--ic-text-high);
  color:var(--ic-bg);
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  font-weight:600;
  line-height:1;
}


/* ============================================================================
   10. SITE CHROME — header, nav, footer, skip link
   Stage 3a. Class names from reference-dhl/dhl-child/header.php + footer.php.
   ============================================================================ */

/* Layout constant, not a design token. The fixed nav's height has to be
   readable by <main> so content clears it — see the note on .site-main. */
:root{
  --ic-nav-h:72px;
}
@media (max-width:900px){
  :root{ --ic-nav-h:60px; }
}

/* Suppress GeneratePress's own header and footer — this theme replaces both. */
.site-header{ display:none; }
.site-footer{ display:none; }
#page{ padding-top:0; }
.entry-content{ max-width:100%; padding:0; }

/* ── Skip link ─────────────────────────────────────────────────────────────
   The old theme had none. Visible on focus, never permanently hidden. */
.skip-link{
  position:absolute;
  left:var(--ic-space-4);
  top:calc(var(--ic-space-2) * -8);
  z-index:1100;
  padding:var(--ic-space-3) var(--ic-space-4);
  background:var(--ic-surface-raised);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-radius:var(--ic-radius);
  color:var(--ic-text-high);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  text-decoration:none;
  transition:top .12s linear;
}
.skip-link:focus,
.skip-link:focus-visible{
  top:var(--ic-space-2);
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
  color:var(--ic-text-high);
}

/* ── Navigation ───────────────────────────────────────────────────────────
   Old theme used a 2px verdigris-equivalent rule here. Structure is
   cool-neutral (spec §7), and a full-width accent rule is not verification,
   so this is --ic-border. */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:var(--ic-bg);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ic-space-4);
  height:var(--ic-nav-h);
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--ic-space-6);
}

/* The logo is an inline SVG with fill:currentColor, so this token is what
   paints it. Changing this one line recolours the whole mark. */
.nav-logo{
  display:flex;
  align-items:center;
  flex:none;
  color:var(--ic-text-high);
  text-decoration:none;
  border-radius:var(--ic-radius-sm);
}
.nav-logo svg{
  display:block;
  height:40px;
  width:auto;
}
.nav-logo:hover{ color:var(--ic-text-high); }
.nav-logo:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--ic-space-8);
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-sm);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  text-decoration:none;
  transition:color .12s linear;
}
.nav-links a:hover,
.nav-links li.current-menu-item > a,
.nav-links a.active{ color:var(--ic-copper); }
.nav-links a:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
  border-radius:var(--ic-radius-sm);
}

.nav-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  color:var(--ic-text);
  text-decoration:none;
  border-radius:var(--ic-radius-sm);
  transition:color .12s linear;
}
.nav-cart:hover{ color:var(--ic-copper); }
.nav-cart:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}
.nav-cart-icon{ display:block; }
/* .nav-cart-count is styled in section 9 (WooCommerce). Position it here. */
.nav-cart .nav-cart-count{
  position:absolute;
  top:calc(var(--ic-space-2) * -1);
  right:calc(var(--ic-space-3) * -1);
}
.nav-cta{ flex:none; }

/* ── Mobile menu ───────────────────────────────────────────────────────── */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  cursor:pointer;
  padding:var(--ic-space-1);
  border-radius:var(--ic-radius-sm);
}
.mobile-menu-btn span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ic-text-high);
  transition:transform .12s linear,opacity .12s linear;
}
.mobile-menu-btn:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .mobile-menu-btn{ display:flex; }
  .nav-logo svg{ height:32px; }
  .nav-inner{ padding:0 var(--ic-space-4); gap:var(--ic-space-3); }

  /* Open state. The padding here is the old theme's fix: without the bottom
     padding the last link sits flush against the panel edge and is hard to
     hit. Carried over. */
  .nav-links.nav-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:var(--ic-nav-h);
    left:0;
    right:0;
    background:var(--ic-surface);
    border-bottom:var(--ic-border-width) solid var(--ic-border);
    box-shadow:var(--ic-shadow);
    padding:var(--ic-space-4) var(--ic-space-4) var(--ic-space-6);
    gap:var(--ic-space-4);
    z-index:999;
  }
  .mobile-menu-btn.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-btn.is-active span:nth-child(2){ opacity:0; }
  .mobile-menu-btn.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ── Main landmark ────────────────────────────────────────────────────────
   The nav is fixed, so content has to clear it. The old theme did this with
   the first section's own top padding (.hero 140px, .page-header 180px),
   which meant any page without one of those — the shop archive, cart and
   checkout — rendered its first content underneath the nav. Putting the
   offset on <main> covers every page including WooCommerce's. */
.site-main{
  padding-top:var(--ic-nav-h);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{
  background:var(--ic-surface);
  border-top:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-16) 0 var(--ic-space-8);
  color:var(--ic-text-muted);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--ic-space-12);
  margin-bottom:var(--ic-space-12);
}
.footer-brand .logo-main{
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-xl);
  line-height:var(--ic-lh-xl);
  font-weight:var(--ic-wt-xl);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
  margin-bottom:var(--ic-space-3);
}
.footer-brand p{
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text-muted);
  max-width:44ch;
}
.footer-col h5{
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wider);
  text-transform:uppercase;
  color:var(--ic-text-high);
  margin:0 0 var(--ic-space-4);
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col ul li{ margin-bottom:var(--ic-space-2); }
.footer-col ul li a{
  color:var(--ic-text-muted);
  font-size:var(--ic-text-sm);
  text-decoration:none;
}
.footer-col ul li a:hover{ color:var(--ic-copper); }
.footer-col ul li a:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
  border-radius:var(--ic-radius-sm);
}

.footer-widgets{
  margin-bottom:var(--ic-space-8);
  padding-top:var(--ic-space-8);
  border-top:var(--ic-border-width) solid var(--ic-border);
}
.footer-widgets .widget-title{
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wider);
  text-transform:uppercase;
  color:var(--ic-text-high);
  margin:0 0 var(--ic-space-3);
}

.footer-bottom{
  border-top:var(--ic-border-width) solid var(--ic-border);
  padding-top:var(--ic-space-6);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--ic-space-4);
}
/* COMPLIANCE: RUO text. --ic-text on --ic-surface measures 10.43:1, clear of
   the 4.5:1 floor. Never reduce this to --ic-text-muted. */
.footer-legal{
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
  max-width:78ch;
  margin:0;
}
.footer-legal strong{ color:var(--ic-text-high); font-weight:600; }
.footer-copy{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
}

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--ic-space-8); }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--ic-space-6); }
  .footer-bottom{ flex-direction:column; }
  .footer-copy{ white-space:normal; }
}


/* ============================================================================
   11. FRONT PAGE — specimen record, claim strip, lot ledger, article cards
   ----------------------------------------------------------------------------
   Stage 3b. Moved here out of the <style> block in exports/home-c.html
   (direction C) and exports/home-a.html section 2 (the ledger). No <style>
   block remains in front-page.php.

   Two kinds of rule live here:
   1. Class names that exist in the DHL markup but the component layer had not
      styled yet — .article-card and friends.
   2. ic- prefixed classes new to direction C / direction A.

   The preview also carried .hero*, .card*, .card-icon, .coa-stat, .stat-num
   and .stat-label. front-page.php uses none of them — direction C replaced the
   hero with the specimen record and has no icon-card grid or stat block — so
   they are NOT ported here. They belong to whichever later template needs them.

   Tokens only. No raw hex.
   ============================================================================ */

/* ── Section head with a trailing action ────────────────────────────────────
   Replaces the inline style="flex-wrap:wrap;gap:…" the preview used on
   .flex-between. Baseline-aligns the heading block against the button. */
.ic-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--ic-space-4);
}
.ic-section-head .section-title{ margin-bottom:0; }

/* .grid-3 is align-items:start, which collapses the height:100% that article
   cards need for their margin-top:auto footers. Opt-in stretch, so nothing
   else using .grid-3 changes. */
.ic-grid-stretch{ align-items:stretch; }

/* Replaces the preview's inline style="max-width:none" on .hero-disclaimer.
   The specimen sits full-container width, so the disclaimer under it does too.
   COMPLIANCE: width only. Colour, contrast and visibility are untouched. */
.hero-disclaimer.ic-disclaimer-wide{ max-width:none; }

/* The claim strip follows immediately, so the specimen section carries less
   bottom padding than the standard rhythm. */
.ic-section-specimen{ padding-bottom:var(--ic-space-12); }

/* Trust bar check glyph — the ported markup uses a bare &#10003;, which needs
   a step up from --ic-text-xs to read as a mark rather than a speck. */
.trust-item .trust-icon{ font-size:var(--ic-text-sm); }


/* ── The specimen record ───────────────────────────────────────────────────
   Direction C. One real product and its evidence presented as a single
   object: image on pure black, identity and record beside it. */
.ic-specimen{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:0;
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  overflow:hidden;
}
.ic-specimen-media{
  background:var(--ic-surface-product);
  display:grid;
  place-items:center;
  padding:var(--ic-space-6);
  border-right:var(--ic-border-width) solid var(--ic-border);
}
.ic-specimen-media img{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
}
.ic-specimen-body{
  display:flex;
  flex-direction:column;
  padding:var(--ic-space-8);
}
.ic-specimen-eyebrow{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wider);
  text-transform:uppercase;
  color:var(--ic-text-muted);
  margin-bottom:var(--ic-space-3);
}
.ic-specimen-body h1{
  font-size:var(--ic-text-3xl);
  line-height:var(--ic-lh-3xl);
  margin:0;
}
/* Spacing runs on margin-TOP throughout this block, never margin-bottom. Any
   of these elements can be absent — no size in the product name, no short
   description, no lot data — and the block must close up cleanly rather than
   leave the gap belonging to a row that never rendered. */
.ic-specimen-size{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-lg);
  color:var(--ic-text-muted);
  margin:var(--ic-space-2) 0 0;
}
.ic-specimen-desc{
  color:var(--ic-text-muted);
  margin:var(--ic-space-6) 0 0;
  max-width:60ch;
}
.ic-specimen-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ic-space-3);
  margin-top:auto;
  padding-top:var(--ic-space-8);
}

/* NO RECORD ON FILE. The product photograph is portrait and sets the height of
   the whole object, so with the record table absent margin-top:auto drops the
   buttons to the bottom and leaves ~190px of hole above them at 1280px — which
   reads as a component that failed to load rather than one with nothing to
   report. Centring the shorter content against the photograph instead makes
   the empty state look deliberate, which is the requirement.

   front-page.php sets this class from the same test that decides whether the
   record renders, so the two can never disagree. */
.ic-specimen--norecord .ic-specimen-body{ justify-content:center; }
.ic-specimen--norecord .ic-specimen-actions{ margin-top:0; }

/* The record itself: label / value pairs, mono, ruled — instrument output,
   not marketing copy. Rendered only when there is something to put in it. */
.ic-record{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0;
  border-top:var(--ic-border-width) solid var(--ic-border);
  margin:var(--ic-space-6) 0 0;
}
.ic-record dt,
.ic-record dd{
  margin:0;
  padding:var(--ic-space-3) 0;
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-sm);
  font-variant-numeric:tabular-nums;
}
.ic-record dt{
  color:var(--ic-text-muted);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  padding-right:var(--ic-space-8);
  white-space:nowrap;
}
.ic-record dd{
  color:var(--ic-text-high);
  text-align:right;
}
/* Spec §2: within the mono block, ONLY purity carries verdigris. Purity IS the
   test result; a lot number in an accent colour reads as a promotional claim. */
.ic-record dd.is-purity{ color:var(--ic-verdigris-bright); }


/* ── Lot line inside a catalogue card ──────────────────────────────────────
   Proof on every item, not just the hero. Emitted by
   woocommerce/content-product.php ONLY when a value exists. */
.ic-card-lot{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--ic-space-2);
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  font-variant-numeric:tabular-nums;
}
.ic-card-lot-k{
  color:var(--ic-text-muted);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
}
.ic-card-lot-v{ color:var(--ic-text); }
.ic-card-lot-p{ color:var(--ic-verdigris-bright); }
/* Purity is pushed to the far edge only when a lot value precedes it. With
   purity alone the sibling selector does not match, so it sits beside its own
   key instead of floating away from it. No PHP class juggling. */
.ic-card-lot-v + .ic-card-lot-p{ margin-left:auto; }


/* ── The argument strip ────────────────────────────────────────────────────
   Direction C. front-page.php gates this on the underlying data actually
   supporting the sentence — see the comment on the section in that template. */
.ic-claim{
  padding:var(--ic-space-12) 0;
  background:var(--ic-surface);
  border-top:var(--ic-border-width) solid var(--ic-border);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.ic-claim p{
  margin:0;
  max-width:26ch;
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-2xl);
  line-height:var(--ic-lh-2xl);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
.ic-claim span{ color:var(--ic-verdigris-bright); }


/* ── The lot ledger ────────────────────────────────────────────────────────
   Direction A section 2, grafted in after the catalogue.

   FOUR columns, not five. Direction A had a "Report date" column; WooCommerce
   products carry no report-date field and inventing one from post_modified
   would put a WordPress edit timestamp on screen labelled as a laboratory
   date. The column is dropped until a real field exists.

   Every cell is explicitly placed. A row whose purity is empty renders no
   purity cell at all, and explicit placement means the certificate link stays
   in its own column instead of sliding left into the hole. */
.ic-ledger{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  overflow:hidden;
}
.ic-ledger-head,
.ic-ledger-row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr auto;
  gap:var(--ic-space-4);
  padding:var(--ic-space-3) var(--ic-space-4);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.ic-ledger-head{
  background:var(--ic-surface-raised);
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-muted);
}
.ic-ledger-row{
  align-items:center;
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-sm);
  font-variant-numeric:tabular-nums;
  color:var(--ic-text);
}
.ic-ledger-row:last-child{ border-bottom:0; }

.ic-ledger-head > *:nth-child(1),
.ic-ledger-compound{ grid-column:1; }
.ic-ledger-head > *:nth-child(2),
.ic-ledger-lot{ grid-column:2; }
.ic-ledger-head > *:nth-child(3),
.ic-ledger-purity{ grid-column:3; }
.ic-ledger-head > *:nth-child(4),
.ic-ledger-link{ grid-column:4; }

.ic-ledger-compound{
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-lg);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
/* Purity again the only verdigris value in the mono block. */
.ic-ledger-purity{ color:var(--ic-verdigris-bright); }
.ic-ledger-link{
  font-family:var(--ic-font-body);
  font-size:var(--ic-text-xs);
  font-weight:600;
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-verdigris-bright);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:var(--ic-border-width) solid var(--ic-verdigris);
  padding-bottom:1px;
}
.ic-ledger-link:hover{ color:var(--ic-verdigris-bright); border-bottom-color:var(--ic-verdigris-bright); }
.ic-ledger-link:focus-visible{ outline:2px solid var(--ic-copper-bright); outline-offset:2px; }


/* ── Article cards — Research Library preview ──────────────────────────────
   Class names from the DHL markup. Styled by the component layer for the
   first time here. */
.article-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  overflow:hidden;
}
.article-card-header{ padding:var(--ic-space-4) var(--ic-space-4) 0; }
.article-card-header h3{
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  margin:var(--ic-space-2) 0 0;
}
.article-tag{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-muted);
}
.article-card-body{ padding:var(--ic-space-3) var(--ic-space-4); flex:1; }
.article-card-body p{
  margin:0;
  font-size:var(--ic-text-sm);
  color:var(--ic-text-muted);
}
.article-card-footer{
  margin-top:auto;
  padding:var(--ic-space-3) var(--ic-space-4);
  border-top:var(--ic-border-width) solid var(--ic-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ic-space-3);
}
.article-meta{
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
}

/* Italic tail line of the ported legal notice. Replaces the source's inline
   style="color:var(--gray); font-style:italic". COMPLIANCE: --ic-text-muted on
   --ic-surface is 5.88:1, clear of the 4.5:1 floor. */
.ic-legal-tail{
  font-size:var(--ic-text-xs);
  color:var(--ic-text-muted);
  font-style:italic;
}


/* ── Front page, mobile ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .ic-specimen{ grid-template-columns:1fr; }
  .ic-specimen-media{
    border-right:0;
    border-bottom:var(--ic-border-width) solid var(--ic-border);
    padding:var(--ic-space-4);
  }
  .ic-specimen-media img{ max-width:220px; }
  .ic-specimen-body{ padding:var(--ic-space-6) var(--ic-space-4); }
  .ic-specimen-body h1{ font-size:var(--ic-text-2xl); line-height:var(--ic-lh-2xl); }
  .ic-specimen-actions{ padding-top:var(--ic-space-6); }
  .ic-specimen-actions .btn{ flex:1 1 auto; }

  .ic-claim p{ font-size:var(--ic-text-xl); line-height:var(--ic-lh-xl); }

  /* Ledger stacks. The head row goes, so each value carries its own key as
     generated content — which costs nothing when the cell itself was never
     rendered, unlike a real label element that would have to be suppressed. */
  .ic-ledger-head{ display:none; }
  .ic-ledger-row{
    grid-template-columns:1fr auto;
    gap:var(--ic-space-2) var(--ic-space-4);
    padding:var(--ic-space-4);
  }
  .ic-ledger-compound{ grid-column:1 / -1; }
  .ic-ledger-lot{ grid-column:1; }
  .ic-ledger-purity{ grid-column:2; justify-self:end; }
  .ic-ledger-link{ grid-column:1 / -1; justify-self:start; }
  .ic-ledger-lot::before,
  .ic-ledger-purity::before{
    color:var(--ic-text-muted);
    letter-spacing:var(--ic-tracking-wide);
    text-transform:uppercase;
  }
  .ic-ledger-lot::before{ content:"Lot "; }
  .ic-ledger-purity::before{ content:"Purity "; }
}


/* ============================================================================
   12. LEGAL PAGE — page-legal.php
   ----------------------------------------------------------------------------
   Stage four. Moved here out of the <style> block in
   reference-dhl/dhl-child/page-legal.php:11-30. No <style> block remains in
   the template.

   The source stylesheet was written for the old LIGHT theme and sets
   .legal-section p / li to #1A2535 — near-black body text. On the Ironcrest
   dark base that is invisible. Every colour below is the token equivalent of
   the old-palette value it replaces; this is permitted change 3, and it is the
   ONLY kind of change made to this page.

   COMPLIANCE: .disclaimer-block and .alert-gold appear on this page and are
   styled in section 8. Nothing here reduces their contrast, and no rule in
   this section may ever apply display:none, visibility:hidden or an accordion
   collapse to them (spec §6.4).

   Tokens only. No raw hex.
   ============================================================================ */

/* ── Page header band ──────────────────────────────────────────────────────
   Source was `.page-header { padding: 180px 0 48px }`. The 180px existed ONLY
   to clear the old theme's fixed nav — .site-main carries that offset now, so
   porting the value verbatim would double the gap. Standard section rhythm
   instead. See known-issues 14. */
.page-header{
  padding:var(--ic-space-12) 0;
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.page-header h1{
  margin:0 0 var(--ic-space-4);
}
.page-header p{
  margin:0;
  max-width:70ch;
  color:var(--ic-text-muted);
}
@media (min-width:901px){
  .page-header{ padding:var(--ic-space-16) 0; }
}

/* ── Two-column shell ──────────────────────────────────────────────────────
   Source collapsed at 768px; this uses the theme's 900px breakpoint so the
   layout changes at the same width as everything else in the build. */
.legal-wrap{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:var(--ic-space-12);
  align-items:start;
}

.legal-sidebar{
  position:sticky;
  /* Source hardcoded `top: 88px` against a 68px nav. Derived from the token
     so it stays correct when --ic-nav-h steps down at mobile. */
  top:calc(var(--ic-nav-h) + var(--ic-space-4));
}
.legal-sidebar nav a{
  display:block;
  padding:var(--ic-space-2) var(--ic-space-3);
  margin-bottom:var(--ic-space-1);
  font-size:var(--ic-text-sm);
  color:var(--ic-text-muted);
  text-decoration:none;
  /* was var(--gray-md) */
  border-left:2px solid var(--ic-border-strong);
  transition:color .12s linear,border-color .12s linear;
}
/* Source hovered to var(--teal). A jump link is an INTERACTIVE element, not a
   verification one, so it takes copper — spec §7. Verdigris here would say
   "this has been tested" about a table of contents. */
.legal-sidebar nav a:hover{
  color:var(--ic-copper);
  border-left-color:var(--ic-copper);
}
.legal-sidebar nav a:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.legal-section{
  padding:var(--ic-space-12) 0;
  /* was var(--gray-md) */
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.legal-section:first-child{ padding-top:0; }
.legal-section:last-child{ border-bottom:none; }
.legal-section h2{ margin-bottom:var(--ic-space-6); }

/* Source set h3 to var(--teal) at 1.05rem. Verdigris is reserved for
   verification (spec §7) and a numbered subsection heading is structure, so
   this is cool-neutral. The hierarchy step from h2 is carried by size and
   tracking rather than by colour. */
.legal-section h3{
  margin:var(--ic-space-8) 0 var(--ic-space-3);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  font-weight:var(--ic-wt-lg);
  letter-spacing:var(--ic-tracking-wide);
  color:var(--ic-text-high);
}

/* was #1A2535 — near-black body text from the light theme.
   --ic-text on --ic-bg measures 11.09:1, far clear of the 4.5:1 floor. */
.legal-section p,
.legal-section li{
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}
.legal-section ul,
.legal-section ol{
  padding-left:var(--ic-space-6);
  margin-bottom:var(--ic-space-4);
}
.legal-section li{ margin-bottom:var(--ic-space-2); }

/* COMPLIANCE GUARD. The source carried
     .legal-section .disclaimer-block p { color:#E8EDF2 !important }
   because the light-theme .legal-section rule above would otherwise repaint
   the disclaimer block's text to near-black against its dark panel. The same
   collision exists here by structure, so the guard is kept — but it needs no
   !important, because this rule sits after section 8 in source order and both
   land on the same token. Do not delete it: removing it makes the disclaimer
   block depend on the accident of two unrelated rules agreeing. */
.legal-section .disclaimer-block p,
.legal-section .disclaimer-block li{
  color:var(--ic-text);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
}
.legal-section .disclaimer-block h3{
  margin:0 0 var(--ic-space-3);
  font-size:var(--ic-text-lg);
  color:var(--ic-text-high);
}
/* Replaces the source's inline style="margin-bottom:28px" on the block.
   28px is not a spacing token; --ic-space-8 (32px) is the nearest. */
.legal-section .disclaimer-block{ margin-bottom:var(--ic-space-8); }

/* .alert-gold carries its own colours from section 8. This only stops the
   .legal-section p rule from resizing text inside it. */
.legal-section .alert p{ margin:0; }

/* was var(--gray) + italic.
   SCOPED DELIBERATELY, and this is a behaviour change from the source. In the
   DHL stylesheet `.effective-date` (0,1,0) lost to `.legal-section p` (0,1,1)
   on both colour and size, so the class only ever delivered its italic — the
   date line rendered at full body weight and colour, which is not what a class
   named "effective-date" with a grey and a smaller size was written to do. The
   same collision exists here by structure. Scoping it to
   `.legal-section .effective-date` makes the class do what it says.
   Presentation only; no legal text is affected. */
.legal-section .effective-date,
.effective-date{
  font-size:var(--ic-text-xs);
  line-height:var(--ic-lh-xs);
  color:var(--ic-text-muted);
  font-style:italic;
  margin-bottom:var(--ic-space-6);
}

@media (max-width:900px){
  .legal-wrap{ grid-template-columns:1fr; gap:var(--ic-space-8); }
  .legal-sidebar{ position:static; }
  .legal-sidebar nav{
    display:flex;
    flex-wrap:wrap;
    gap:var(--ic-space-2);
  }
  .legal-sidebar nav a{ margin-bottom:0; }
  .legal-section{ padding:var(--ic-space-8) 0; }
}


/* ============================================================================
   13. FAQ PAGE — page-faq.php
   ----------------------------------------------------------------------------
   Stage five. Moved here out of the <style> block in
   reference-dhl/dhl-child/page-faq.php:84-120. No <style> block remains in
   the template.

   Class names are the DHL ones — .faq-wrap, .faq-item, .faq-answer all exist
   in the ported markup, so they are NOT ic- prefixed. Same convention as
   sections 11 and 12: ic- is for classes with no old-theme equivalent, and
   this section introduces none.

   The source stylesheet targeted the old LIGHT theme: var(--white) panels,
   var(--dark) body text, var(--teal) accents. Every colour below is the token
   equivalent of the value it replaces.

   COMPLIANCE — READ BEFORE CHANGING THE SUMMARY RULES. Four FAQ answers carry
   research-use statements (human-use guidance, jurisdiction restrictions,
   "not for human use", and the "not personal-use instructions" storage
   framing). page-faq.php therefore renders EVERY <details> with the `open`
   attribute, so nothing compliance-bearing is collapsed on initial render
   (spec §6.4). Nothing in this section may reintroduce a closed initial state
   — no `.faq-item:not([open])` height clamp, no max-height transition that
   starts at zero.

   Tokens only. No raw hex.
   ============================================================================ */

.faq-wrap{
  max-width:820px;
  margin:0 auto;
}

/* was background var(--white), border var(--gray-md), border-left 4px var(--teal).
   The left edge is --ic-border-strong, NOT --ic-copper-dim: that 3px copper-dim
   rule is the shared identity of .compliance-banner / .alert-gold /
   .hero-disclaimer (section 8), and spending it on ten FAQ panels would stop it
   reading as "this block is compliance text". Structure is cool-neutral. */
.faq-item{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-left:4px solid var(--ic-border-strong);
  border-radius:var(--ic-radius);
  margin-bottom:var(--ic-space-3);
  overflow:hidden;
}

.faq-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ic-space-4);
  padding:var(--ic-space-4) var(--ic-space-6);
  font-family:var(--ic-font-display);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  font-weight:var(--ic-wt-lg);
  letter-spacing:var(--ic-tracking-wide);
  text-transform:uppercase;
  color:var(--ic-text-high);
}
.faq-item > summary::-webkit-details-marker{ display:none; }

/* Disclosure marker. Source painted this var(--teal); here it is neutral —
   ten copper markers on one screen would break "copper is scarce" (spec §7),
   and verdigris would claim these panels are verification surfaces. */
.faq-item > summary::after{
  content:'+';
  flex-shrink:0;
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xl);
  font-weight:500;
  line-height:1;
  color:var(--ic-text-muted);
  transition:color .12s linear;
}
.faq-item[open] > summary::after{ content:'\2212'; }
.faq-item > summary:hover::after{ color:var(--ic-text-high); }

/* Rule between question and answer only while open — structural separation,
   which is what the source got from recolouring the open summary. */
.faq-item[open] > summary{
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}

.faq-item > summary:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:-2px;
}

.faq-answer{ padding:var(--ic-space-4) var(--ic-space-6) var(--ic-space-6); }
/* was var(--dark) — near-black body text from the light theme.
   --ic-text on --ic-surface measures 10.43:1. */
.faq-answer p{
  margin:0;
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}
/* was var(--teal). A mailto link is interactive, not verification. */
.faq-answer a{
  color:var(--ic-copper);
  text-decoration:underline;
}
.faq-answer a:hover{ color:var(--ic-copper-bright); }
.faq-answer a:focus-visible{
  outline:2px solid var(--ic-copper-bright);
  outline-offset:2px;
}

@media (max-width:900px){
  .faq-item > summary{
    padding:var(--ic-space-3) var(--ic-space-4);
    font-size:var(--ic-text-base);
    line-height:var(--ic-lh-lg);
  }
  .faq-answer{ padding:var(--ic-space-3) var(--ic-space-4) var(--ic-space-4); }
}


/* ============================================================================
   14. COA VAULT — page-coa-vault.php
   ----------------------------------------------------------------------------
   Stage six. The source template carried NO <style> block; every class it uses
   was already declared in section 7 (trust / COA elements). This section only
   refines those for the vault's own layout — it introduces no new class names.

   REPOINT, NOT REDESIGN. This is the existing DHL vault restyled so the COA
   Vault promised by FAQ Q2 actually exists (known-issues 27). The vault
   redesign is a separate post-launch project: no filtering, no search, no
   history, no archive concepts belong in here.

   Tokens only. No raw hex.
   ============================================================================ */

/* Section 7 declares .coa-list as a single-column grid. At 1140px that gives
   25 very wide cards holding four short lines each. Columns are presentation,
   not a browsing-pattern change — same list, same order, same entries. */
.coa-list{
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:var(--ic-space-4);
}

/* Flex column so the button lands on the same baseline across a row whatever
   the compound name and lab string do above it. */
.coa-entry{
  display:flex;
  flex-direction:column;
  gap:var(--ic-space-2);
  height:100%;
  padding:var(--ic-space-4) var(--ic-space-6);
}
.coa-entry-name{
  display:block;
  margin:0;
  line-height:var(--ic-lh-lg);
}
.coa-entry-date{ margin:0; }

/* FIX. Section 7 styles .coa-entry-source alongside .product-coa-link —
   inline-flex, verdigris-bright, 1px verdigris underline — because on a
   product card that selector IS a link. On this page it is a <p> holding a
   laboratory name, so it rendered as an underlined pseudo-link that does
   nothing when clicked. Scoped here rather than changed in section 7, which
   would break the product-card link it is genuinely shared with.

   The colour stays verdigris-bright: a lab attribution is verification, which
   is exactly what that token is for. 6.29:1 on --ic-surface. */
.coa-entry .coa-entry-source{
  display:block;
  margin:0;
  border-bottom:0;
  padding-bottom:0;
  font-size:var(--ic-text-xs);
  line-height:var(--ic-lh-xs);
}

.coa-entry .coa-entry-button{
  margin-top:auto;
  align-self:flex-start;
}

/* Provenance disclosure — "reports … published here unedited".
   Section 7 had this at --ic-text-xs / --ic-text-muted, which is a caption
   treatment for what is actually the page's provenance statement. Promoted to
   a panel at --ic-text-sm / --ic-text (10.43:1 on --ic-surface).

   The left rule is --ic-verdigris, NOT the --ic-copper-dim used by
   .disclaimer-block / .compliance-banner / .alert-gold / .hero-disclaimer.
   Those four share one identity and this is not one of them: this is the
   verification page making a verification statement, which is the one place
   verdigris belongs. Sanctioned use — plain --ic-verdigris is borders and
   fills only, never text (spec §1). */
.coa-disclosure{
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-left:3px solid var(--ic-verdigris);
  border-radius:var(--ic-radius);
  padding:var(--ic-space-6);
  margin-bottom:var(--ic-space-12);
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}
.coa-disclosure h2{
  margin:0 0 var(--ic-space-3);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  font-weight:var(--ic-wt-lg);
  letter-spacing:var(--ic-tracking-wide);
  color:var(--ic-text-high);
}
.coa-disclosure p{
  margin:0;
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}
.coa-disclosure p + p{ margin-top:var(--ic-space-3); }

@media (max-width:900px){
  .coa-list{ grid-template-columns:1fr; gap:var(--ic-space-3); }
  .coa-entry{ padding:var(--ic-space-4); }
  .coa-disclosure{ padding:var(--ic-space-4); margin-bottom:var(--ic-space-8); }
}


/* ============================================================================
   15. ABOUT PAGE — page-about.php
   ----------------------------------------------------------------------------
   Stage seven. The source carried no <style> block; everything was inline
   style attributes written against the old light palette (var(--white),
   var(--teal), var(--gray-md), rgba(255,255,255,0.08)). All of it is tokenised
   here — permitted change 3, and the only kind of change made to that file
   besides the item-35 lot-claim correction.

   .card / .card-dark / .card-icon keep their DHL names: they exist in the
   ported markup. They were listed as known gaps in section 11 and deliberately
   not styled then, because front-page.php does not use them — About is the
   first template that does.

   NEW ic- classes introduced here (no old-theme equivalent): .ic-grid-feature,
   .ic-stance-item.

   Tokens only. No raw hex.
   ============================================================================ */

/* Source: style="gap:64px; align-items:center" on .grid-2. 64px is
   --ic-space-16 exactly. */
.ic-grid-feature{
  gap:var(--ic-space-16);
  align-items:center;
}

/* ── Cards ────────────────────────────────────────────────────────────────
   Closes the section-11 gap. Matches the shape the direction previews used. */
.card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--ic-surface);
  border:var(--ic-border-width) solid var(--ic-border);
  border-radius:var(--ic-radius);
  padding:var(--ic-space-6);
}
.card h3{
  margin:0 0 var(--ic-space-3);
  font-size:var(--ic-text-xl);
  line-height:var(--ic-lh-xl);
}
.card p{ margin:0; }
.card .btn{ margin-top:auto; align-self:flex-start; }

/* On a dark base every card is already dark, so .card-dark cannot mean what it
   meant in the old theme. It becomes the raised step instead — elevation by
   lightness rather than shadow, per spec §4. */
.card-dark{
  background:var(--ic-surface-raised);
  padding:var(--ic-space-8);
}

/* Source used emoji glyphs inside a tinted circle. The tint was
   rgba(0,180,216,0.12) — the old teal. A bordered neutral square instead:
   structure is cool-neutral, and a coloured plate behind six icons would
   spend an accent on decoration. */
.card-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  margin-bottom:var(--ic-space-4);
  border:var(--ic-border-width) solid var(--ic-border-strong);
  border-radius:var(--ic-radius-sm);
  color:var(--ic-text-muted);
  font-size:var(--ic-text-base);
  line-height:1;
}
.card-icon svg{ display:block; }

/* ── "What We Stand For" stack ────────────────────────────────────────────
   Source: four bare <div style="border-bottom:1px solid rgba(255,255,255,0.08);
   padding-bottom:16px; margin-bottom:16px"> with the last one unstyled. */
.ic-stance-item{
  padding-bottom:var(--ic-space-4);
  margin-bottom:var(--ic-space-4);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
}
.ic-stance-item:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}
/* was style="color:var(--white); margin-bottom:6px" */
.ic-stance-item h4{
  margin:0 0 var(--ic-space-2);
  font-size:var(--ic-text-lg);
  line-height:var(--ic-lh-lg);
  letter-spacing:var(--ic-tracking-wide);
  color:var(--ic-text-high);
}
/* was style="color:var(--gray-md); font-size:0.88rem; margin:0".
   --ic-text on --ic-surface-raised measures 9.65:1. */
.ic-stance-item p{
  margin:0;
  font-size:var(--ic-text-sm);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}

/* was style="color:var(--teal); margin-bottom:24px" on the panel heading.
   Neutral: a section heading is structure, not verification (spec §7). */
.card-dark > h3{
  margin:0 0 var(--ic-space-6);
  font-size:var(--ic-text-xl);
  line-height:var(--ic-lh-xl);
  color:var(--ic-text-high);
}

@media (max-width:900px){
  .ic-grid-feature{ gap:var(--ic-space-8); }
  .card{ padding:var(--ic-space-4); }
  .card-dark{ padding:var(--ic-space-6); }
}


/* ============================================================================
   16. DECORATIVE PHOTO FIGURE — page-about.php
   ----------------------------------------------------------------------------
   Stage seven, follow-up. One new ic- class; no old-theme equivalent exists.

   Full-bleed pure-black band with the photograph shown WHOLE inside it, at its
   natural 4:5 portrait aspect. Sits OUTSIDE .container as a direct sibling of
   the sections, the same way .trust-bar does, so the black spans the viewport
   while the image stays contained and centred.

   REPLACED the earlier cropped .ic-photo-band. That version fitted the portrait
   source into a wide strip with object-fit:cover, which showed roughly 18% of
   the image and relied on the crop to keep the baked wordmark out of frame.
   The owner chose the whole photograph instead, so the crop — and the fragile
   height/object-position pairing that kept it honest — is gone.

   WHAT THAT CHANGES, AND IT IS NOT NOTHING: the vial label is now fully
   visible, so "IRONCREST PEPTIDES" and "RESEARCH USE ONLY" render as baked
   pixels. That is an accepted trade, not an oversight. It stays safe because:

     - alt="" keeps the image out of the accessibility tree entirely, so no
       screen reader announces baked pixels as though they were page content
     - no live text is ever placed over it, so the baked wordmark never
       competes with real type for the same space
     - it is the brand's own product photography, not third-party imagery

   Do not put copy on top of this. The moment text sits over the image, the
   baked wordmark becomes a second uncontrolled wordmark on the page and the
   alt="" stops describing what the component is actually doing.

   Tokens only. No raw hex.
   ============================================================================ */

.ic-photo-figure{
  /* Pure black — the same surface product photography sits on everywhere else
     in the theme, so the image's near-black edges meet the frame without a
     seam (spec §1, product surface). */
  background:var(--ic-surface-product);
  border-top:var(--ic-border-width) solid var(--ic-border);
  border-bottom:var(--ic-border-width) solid var(--ic-border);
  padding:var(--ic-space-12) var(--ic-space-6);
}
.ic-photo-figure img{
  display:block;
  width:100%;
  /* Whole image, natural aspect — no cropping. The source is 1122x1402, so at
     400px it still has ~2.8x of pixel headroom and stays crisp on retina. */
  max-width:400px;
  height:auto;
  margin:0 auto;
  border-radius:var(--ic-radius);
}

@media (max-width:900px){
  .ic-photo-figure{ padding:var(--ic-space-8) var(--ic-space-4); }
  /* Capped below the available width on purpose. A portrait image at full
     mobile width would run ~430px tall and swallow the screen between two
     text sections; this keeps it a divider rather than an interruption. */
  .ic-photo-figure img{ max-width:300px; }
}


/* ============================================================================
   17. RESEARCH LIBRARY — page-research-library.php
   ----------------------------------------------------------------------------
   One uniform card per compound: product thumbnail, heading, RUO badge,
   verbatim quote, citation line. No old-theme equivalent exists — the DHL
   research page was prose, not cards.

   The card itself is the existing .card component; everything here only sizes
   the media slot and types the quote and citation. Nothing below touches a
   compliance element: the RUO badge is the shared .ruo-badge component and the
   RUO banner is the shared .compliance-banner, both used as-is.

   Two-up rather than three-up on purpose. These cards carry a full sentence of
   quoted abstract plus a citation line; at three-up the measure drops to
   roughly 30 characters and the quote becomes a column of fragments.

   Tokens only. No raw hex.
   ============================================================================ */

/* Fixed-height media slot on the product surface, so cards stay uniform no
   matter how the source image is cropped. The catalogue renders are all
   600x800 portrait; contain (not cover) keeps the whole vial visible, including
   the baked RESEARCH USE ONLY line on the label. */
.ic-research-media{
  background:var(--ic-surface-product);
  border-radius:var(--ic-radius-sm);
  margin-bottom:var(--ic-space-4);
  padding:var(--ic-space-3);
  text-align:center;
}
.ic-research-media img{
  display:block;
  width:auto;
  height:160px;
  max-width:100%;
  margin:0 auto;
  object-fit:contain;
}

/* Quote sits between the badge and the citation with its own indent rule, so a
   reader can see where the journal's words start and stop. The copper rule is
   the interactive/accent colour rather than verdigris: this is not a
   verification claim (spec §1 — structure cool-neutral, interactive copper,
   verification verdigris). */
.ic-research-quote{
  margin:var(--ic-space-4) 0 0;
  padding-left:var(--ic-space-4);
  border-left:2px solid var(--ic-copper-dim);
}
.ic-research-quote p{
  margin:0;
  font-size:var(--ic-text-base);
  line-height:var(--ic-lh-base);
  color:var(--ic-text);
}

/* Citation pinned to the card foot so the rule reads consistently across a row
   of unequal quote lengths. Mono, because it is a reference string rather than
   prose. */
.ic-research-cite{
  margin:var(--ic-space-4) 0 0;
  padding-top:var(--ic-space-3);
  border-top:var(--ic-border-width) solid var(--ic-border);
  font-family:var(--ic-font-mono);
  font-size:var(--ic-text-xs);
  line-height:var(--ic-lh-xs);
  color:var(--ic-text-muted);
}

@media (max-width:900px){
  /* Single column below the grid breakpoint — a two-up quote card at ~44%
     viewport width is unreadable. */
  .ic-research-grid{ grid-template-columns:1fr; }
  .ic-research-media img{ height:140px; }
}