/* Verity — Clinical-Minimal + Data-Lab design refresh.
   Loaded AFTER style.css (dependency: verity-style). Tokens reuse theme.json presets
   so the palette stays single-sourced; --v-line, --v-mono and the component primitives
   are net-new. Component sections (hero, spec-table, bands) are appended by their tasks. */

:root{
  --v-ink:        var(--wp--preset--color--contrast,     #0E2A2A);
  --v-emerald:    var(--wp--preset--color--primary,      #0F6E56);
  --v-emerald-dk: var(--wp--preset--color--primary-dark, #0B5A46);
  --v-cream:      var(--wp--preset--color--base,         #FAF9F6);
  /* Ground / greige: the contract's frame-body base (--ground #ECE9E2) over which the
     cream (header/marquee) and white (verify/PDP) bands are layered. Not a theme.json
     preset — hardcoded to match the same greige the compliance chrome already documents. */
  --v-ground:     #ECE9E2;
  --v-surface:    var(--wp--preset--color--surface,      #FFFFFF);
  --v-subtle:     var(--wp--preset--color--subtle,       #F1EEE7);
  --v-body:       var(--wp--preset--color--body,         #2B3B38);
  --v-muted:      var(--wp--preset--color--muted,        #5C6B66);
  --v-line:       #E7E2D8;
  --v-mono:       ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --v-chip-bg:    #EEF6F2;
  --v-radius:     10px;
  --v-shadow-card: 0 14px 30px -14px rgba(14,42,42,.30);
}

/* ---- Root layout seam kill (Task 6.8) ----
   theme.json's root styles.spacing.blockGap (1.5rem) applies margin-block-start to
   every direct child of .wp-site-blocks in flow layout — including <main> after the
   header template part, and the (intentionally empty, see parts/footer.html) footer
   template part after <main>. Full-bleed sections (hero, comp-band) escape their own
   container width via transform, but the SITE-BLOCKS gap around them is untouched by
   that trick, so on every template it leaves a 24px body-bg strip: one between the
   header and whatever full-bleed section starts the page, one between the end of
   entry-content and the compliance chrome the mu-plugin renders via wp_footer into
   that empty <footer>. Zero both — the artifact shows these sections flush. */
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > footer.wp-block-template-part{
  margin-block-start: 0;
}

/* ---- Inter-section seam kill (Task 6, round 6) ----
   The same blockGap bug one level down: the full-bleed Home sections (marquee
   .vf-section, verify .vfy) are direct children of the is-layout-constrained
   .entry-content, so :root :where(.is-layout-constrained) > * puts a 1.5rem (24px)
   margin-block-start on each non-first child. The hero (.vhB-band) already zeros its
   own margin inline; the marquee and verify did not, leaving a 24px cream body-bg strip
   above each — the marquee sat 24px below the hero and the verify a further 24px below
   the marquee. The artifact renders these bands flush (hero→marquee→verify butt on their
   own internal padding). Selector 0,2,0 beats blockGap's 0,1,0 (:root + :where) with no
   !important, matching the seam-kill above. */
.entry-content > .vf-section,
.entry-content > .vfy{
  margin-block-start: 0;
}

/* ---- Data-mono treatment: the core Data-Lab signal ----
   Lab data (CAS, formula, MW, sequence, lot, purity, price-per-mg, COA hash, stats)
   renders in tabular monospace so the store reads like an analytical readout. */
.verity-mono,
.verity-data{
  font-family: var(--v-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---- Eyebrow / kicker (uppercase emerald label above headings) ---- */
.verity-eyebrow{
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-emerald);
  font-weight: 700;
  margin: 0; /* artifact .eyebrow{margin:0}; kills the default <p> 1em margin that pushed the About/verify eyebrow (and everything below it) down ~11.5px */
}

/* ---- Section rhythm helpers ---- */
.verity-line-top{ border-top: 1px solid var(--v-line); }
.verity-line-bottom{ border-bottom: 1px solid var(--v-line); }

/* ---- Button polish (align to the approved mockup: 6px radius, weighty label) ---- */
.wp-block-button__link.wp-element-button{
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .01em;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  border-width: 1px;
}

/* ---- Global focus ring (keyboard nav) ---- */
:focus-visible{
  outline: 2px solid var(--v-emerald);
  outline-offset: 2px;
}

/* ---- Trust/test badge pills (Purity / Endotoxin / Sterility, RUO tag) ---- */
.verity-badge{
  flex: 1;
  text-align: center;
  border: 1px solid #CFE0D8;
  color: var(--v-emerald);
  background: #fff;
  border-radius: 8px;
  padding: 10px 0;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--v-mono);
}

/* ---- Price-per-mg chip ---- */
.verity-permg{
  font-family: var(--v-mono);
  font-size: .78rem;
  color: var(--v-emerald);
  background: var(--v-chip-bg);
  border-radius: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ============ Data-Lab product page (Task 5 + Task 6.8 structural parity) ============
   Higher-specificity (.single-product …) so these win over the mu-plugin's inline base. */

/* Artifact `.pdp-page`: the PDP zone is white (surface), a deliberate step away from the
   cream header/hero, full-bleed with no side strips. */
.single-product main.wp-block-group{ background: var(--v-surface); }

/* Two-column PDP grid (artifact `.pdp-grid`). WooCommerce's default float layout
   (div.images float:left, .summary float:right, chips/desc float:left+clear:left) dragged
   the summary column's top down to the tallest preceding left float — a float's top may not
   rise above an earlier float's top — so the right column started ~450px below the vial.
   An explicit grid top-aligns both columns: left stack (vial → chips → about) in column 1,
   summary spanning column 2 from row 1, related products full-width below. */
.single-product div.product{
  display: grid;
  /* Artifact `.pdp`: media .9fr / info 1.1fr, 36px gap, 1060px max centered — the wider info
     column is what lets the buy row (qty + dose + Add to cart) sit on one line. */
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  /* Left column top-packed: vial (auto) → chips (auto) → about (auto), any surplus height
     from the taller spanning summary column collapses into a trailing flexible track so the
     chips/about stay tucked directly under the vial instead of spreading down the column. */
  grid-template-rows: auto auto auto 1fr;
  column-gap: 36px;
  max-width: 1060px;
  margin-inline: auto;
  align-items: start;
}
.single-product div.product > div.images{ grid-column: 1; grid-row: 1; }
.single-product div.product > div.images img{ max-width: 100%; height: auto; }
.single-product div.product > .verity-chips{ grid-column: 1; grid-row: 2; }
.single-product div.product > .verity-pdp-desc{ grid-column: 1; grid-row: 3; }
.single-product div.product > .summary{
  grid-column: 2;
  grid-row: 1 / span 4;
  /* Neutralize WooCommerce core's .summary{float:right;width:48%} — in the grid it must fill
     its own track (the 48% was what shrank the buy row to 270px and stacked qty/dose/button). */
  float: none !important;
  width: 100% !important; /* beats WooCommerce core .summary{width:48%} (equal specificity, later source order) */
  margin: 0;
}
.single-product div.product > div.images{ float: none !important; width: 100% !important; }
.single-product div.product > .related.products{ grid-column: 1 / -1; }

/* Artifact `.crumbs`: mono breadcrumb bar, current page bolded, no "Home" crumb. */
.verity-crumbs{
  display: block;
  padding: 14px 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--v-subtle);
  font-family: var(--v-mono);
  font-size: 11px;
  color: var(--v-muted);
}
.verity-crumbs a{ color: var(--v-muted); text-decoration: none; }
.verity-crumbs a:hover{ color: var(--v-emerald); }
.verity-crumbs b{ color: var(--v-ink); font-weight: 700; }

/* Frame the vial like a lab sample card: fixed-height cream panel, vial centered + contained.
   box-sizing defaults to content-box here (the theme has no global border-box reset like the
   artifact does), which was adding the 24px padding on top of min-height instead of inside it
   — panel rendered ~430px tall against a 380px min-height, diluting the vial-to-panel ratio
   the artifact shows. border-box + the artifact's own 360px/288px values fix both. */
.single-product div.product .woocommerce-product-gallery__image{
  position: relative;
  box-sizing: border-box;
  background: var(--v-cream);
  border: 1px solid var(--v-line);
  border-radius: 12px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.single-product div.product .woocommerce-product-gallery__image a{ display: inline-flex; }
/* Woo's JS-injected zoom/lightbox trigger isn't in the artifact frame at all, and its
   default top-right position collides with the purity corner tag added just below. */
.single-product .woocommerce-product-gallery__trigger{ display: none; }
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product div.images img{
  max-height: 288px;
  width: auto;
  margin: 0 auto;
  box-shadow: none;
}

/* Artifact `.pdp-tag.lot` / `.pdp-tag.hplc`: corner tags on the image frame, appended by the
   mu-plugin's small script (see verity-product-spec.php step 6) — gated by verity_product_has_coa(). */
.pdp-tag{
  position: absolute;
  top: 14px;
  font-family: var(--v-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
}
.pdp-tag.lot{ left: 14px; background: var(--v-ink); }
.pdp-tag.hplc{ right: 14px; background: var(--v-emerald); }

/* Artifact `.eyebrow` / `.pdp-sub`, right column */
.single-product .verity-pdp-eyebrow{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-emerald);
  margin: 0 0 .4rem;
}
.single-product .verity-pdp-sub{
  font-size: .9rem;
  color: var(--v-body);
  margin: 0 0 .5rem;
}

/* PDP product title (contract `.pdp-name`): fixed 34px Fraunces/600. The theme's global h1
   fluid preset (xx-large → clamp up to 3.75rem/60px) over-inflated the title on desktop to
   60px, which — paired with the previously-shrunken price — broke the intended headline/price
   hierarchy. Pinning 34px keeps the price (30px) a near-peer. Font family/weight already come
   from the theme's heading element style (Fraunces/600). */
.single-product .summary h1.product_title{
  font-size: 34px;
  line-height: 1.15;
  margin: .4rem 0 .3rem;
}

/* Artifact `.pdp-desc`, left column: "About this compound" prose under the vial + chips */
.single-product .verity-pdp-desc{
  margin: 26px 0 0;
  box-sizing: border-box;
}
.single-product .verity-pdp-desc h3{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: var(--v-ink);
  font-weight: 600;
  margin: 0 0 .6rem;
}
.single-product .verity-pdp-desc p{ font-size: .92rem; color: var(--v-body); line-height: 1.65; margin: 0 0 .8rem; }
.single-product .verity-pdp-desc p:last-child{ margin-bottom: 0; }

/* Price + inline per-mg chip: the chip now ships inside the same <p class="price"> the
   price_html filter appends it to (verity-product-spec.php step 2b), not a separate block. */
.single-product .summary .price{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.single-product .verity-permg{ display: inline-block; }

/* Price prominence (contract `.pdp-price .amt`): the selected-variation amount renders in
   Fraunces serif at 30px/600 — a large bold price number that anchors the info column, ~0.88x
   the 34px H1. WooCommerce's default `.price` otherwise left the amount at 17px body Inter/400,
   so the green $/mg pill visually outweighed the price. Targets the live-price span (and its
   inner Woo amount) that the woocommerce_get_price_html filter emits. */
.single-product .summary .price .verity-price-live,
.single-product .summary .price .verity-price-live .woocommerce-Price-amount{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--v-ink);
  line-height: 1.1;
}

/* Buy composite: reflow Woo's variations table + add-to-cart into one row (artifact
   `.pdp-buy`). Un-tableize each level to block/flex rather than display:contents — Chromium's
   handling of display:contents on <table>/<tr> is inconsistent and was collapsing the whole
   page's flow (Related products rendered up under the gallery); block+flex is the standard,
   well-supported way to reflow a table for a custom layout. No DOM changes: the table and
   .single_variation_wrap are already siblings inside the same <form class="cart">. */
.single-product form.cart.variations_form{
  display: flex;
  flex-wrap: nowrap; /* artifact `.pdp-buy`: qty + dose + Add to cart on ONE line */
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.single-product form.cart.variations_form table.variations{
  display: block;
  width: auto;
  margin: 0; /* Woo's default 17px margin-bottom pushed the dose dropdown ~20px above the qty/button centerline */
  flex: 1 1 0; /* basis 0 so the dose dropdown shares the row instead of wrapping to its own line */
  min-width: 0;
}
.single-product form.cart.variations_form table.variations tbody,
.single-product form.cart.variations_form table.variations tr{
  display: block;
}
.single-product form.cart.variations_form table.variations td.value{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0; /* theme/Woo td padding was inflating the table box above the select's own height */
}
.single-product form.cart.variations_form .single_variation_wrap{
  flex: 0 0 auto;
}
.single-product form.cart.variations_form .woocommerce-variation-add-to-cart{
  display: flex;
  align-items: center;
  gap: 10px;
}
.single-product form.cart.variations_form table.variations th.label{
  display: none; /* redundant next to a styled dropdown */
}
/* !important: WooCommerce's own variation-select JS toggles both of these via an inline
   style="display:..." once a variation is chosen (verity-default-variation.php pre-selects
   one), which otherwise always wins over an external stylesheet regardless of specificity. */
.single-product form.cart.variations_form .reset_variations,
.single-product form.cart.variations_form .woocommerce-variation{
  display: none !important; /* "Clear" link + Woo's own inline variation description/price panel duplicate the specbox+price above */
}
.single-product form.cart.variations_form select[name^="attribute_"]{
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9rem;
  padding: 11px 12px;
  border: 1px solid var(--v-line);
  border-radius: 8px;
  background: #fff;
  color: var(--v-ink);
}
.single-product form.cart.variations_form .quantity{
  display: flex;
  align-items: center;
  border: 1px solid var(--v-line);
  border-radius: 8px;
  font-size: 14px;
}
.single-product form.cart.variations_form .quantity input.qty{
  width: 3em;
  border: 0;
  text-align: center;
  color: var(--v-ink);
  -moz-appearance: textfield;
}
.single-product form.cart.variations_form .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart.variations_form .quantity input.qty::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.single-product form.cart.variations_form .verity-qty-btn{
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--v-muted);
  font-size: 16px;
  line-height: 1;
  padding: 10px 12px;
  cursor: pointer;
}
.single-product form.cart.variations_form .verity-qty-btn:hover{ color: var(--v-emerald); }
.single-product form.cart.variations_form .single_add_to_cart_button{ flex: 0 0 auto; }

/* Single RUO line beneath the buy composite (dedup handled in PHP: the left-column
   description strips its own trailing RUO sentence so this is the only one on the page). */
.single-product .verity-ruo-note{ font-size: 11px; color: var(--v-muted); margin: 12px 0 0; font-style: normal; }

/* Description/Additional-information tabs are unhooked entirely in PHP (step 3b) — the
   artifact carries the description once, in the left column. */

/* Specifications box */
.single-product .verity-specbox{
  border: 1px solid var(--v-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.1rem 0;
  box-shadow: 0 1px 3px rgba(14,42,42,.06);
}
.single-product .verity-specbox__head{
  background: var(--v-ink);
  padding: 12px 16px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  font-family: var(--v-mono);
}
.single-product .verity-spec{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: var(--v-mono);
  font-size: 12.5px;
}
.single-product .verity-spec th,
.single-product .verity-spec td{
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v-line);
  vertical-align: top;
}
.single-product .verity-spec tr:last-child th,
.single-product .verity-spec tr:last-child td{ border-bottom: 0; }
.single-product .verity-spec th{ width: 46%; font-weight: 500; color: var(--v-body); background: var(--v-subtle); border-right: 1px solid var(--v-line); white-space: nowrap; }
.single-product .verity-spec td{ color: var(--v-ink); font-weight: 500; background: var(--v-surface); word-break: break-word; }
.single-product .verity-spec tr.verity-spec-hi td{ color: var(--v-emerald); font-weight: 700; }

/* ---- Gated test chips (Purity / Endotoxin / Sterility), directly under the vial ---- */
.single-product .verity-chips{
  display: flex;
  gap: 12px;
  margin: 14px 0 0;
}
/* WooCommerce's own woocommerce-smallscreen.css drops div.images/div.summary to
   float:none;width:100% at this exact breakpoint — match it so the chips (and, Task 6.8,
   the "About this compound" description) stack under the vial instead of floating at 48%
   into the (now full-width, stacked-below) summary column. */
@media (max-width: 768px){
  /* Collapse the PDP grid to a single stacked column. The artifact mobile frame orders the
     "About this compound" block LAST — after the buy box + RUO line — so use a flex column
     with explicit order rather than raw DOM order (which places .verity-pdp-desc near the top,
     right after the chips). Order: vial → chips → summary(price/spec/buy/RUO) → about → related. */
  .single-product div.product{ display: flex; flex-direction: column; }
  .single-product div.product > div.images{ order: 1; }
  .single-product div.product > .verity-chips{ order: 2; }
  .single-product div.product > .summary{ order: 3; }
  .single-product div.product > .verity-pdp-desc{ order: 4; }
  .single-product div.product > .related.products{ order: 5; }
  .single-product div.product > div.images,
  .single-product div.product > .verity-chips,
  .single-product div.product > .verity-pdp-desc,
  .single-product div.product > .summary,
  .single-product div.product > .related.products{ width: 100% !important; }
  /* On phones the qty + dose + button don't fit one line; let the buy composite wrap so the
     dose dropdown gets its own full-width row instead of being crushed to ~10px. */
  .single-product form.cart.variations_form{ flex-wrap: wrap; }
  .single-product form.cart.variations_form table.variations{ flex: 1 1 100%; }
  .single-product form.cart.variations_form .single_variation_wrap{ flex: 1 1 100%; }
  .single-product form.cart.variations_form .single_add_to_cart_button{ width: 100%; }
}

/* ============ About page (Task 3) ============
   The auto post-title block (page.html) still renders "About" above post-content;
   suppress it in favor of the custom eyebrow+h1 hero so there's no duplicate H1. */
main.wp-block-group:has(.verity-about-hero) > .wp-block-post-title{ display: none; }

/* Two-tone canvas (parity round 4): the contract About frame layers a cream header band
   over a --ground #ECE9E2 base — the hero + body sections are transparent-over-ground, not
   cream. theme.json paints the whole <body> with base(cream #FAF9F6), which flattened the
   entire About canvas to cream and lost the layering. Restore the ground base on the About
   main so the hero/body read as greige while the header template part stays its explicit
   cream band and the compliance/footer chrome (wp_footer) keeps its own darker fills. */
main.wp-block-group:has(.verity-about-hero){ background: var(--v-ground); }

/* Flush hero start (parity round 5): the contract About frame drops the .about-hero directly
   under the header with only its own 64px padding-top — eyebrow ~64px below the header. The FSE
   page.html template otherwise bakes INLINE styles onto its wrappers — <main> padding-top:3rem
   (48px) and the post-content .entry-content margin-top:2rem (32px) — pushing all About content
   down ~80px and opening a bare-cream gap under the header. Inline styles only yield to
   !important; scope to this template via :has(.verity-about-hero) so no other page is touched. */
main.wp-block-group:has(.verity-about-hero){ padding-top: 0 !important; }
main.wp-block-group:has(.verity-about-hero) > .entry-content{ margin-top: 0 !important; }

/* Wider reading column than the theme's 720px default (matches the artifact's about
   measure). The child rule alone (below) isn't enough: WP's own layout-constrained
   CSS also caps .entry-content's OWN box at the theme's 720px contentSize
   (`.is-layout-constrained > :where(...){max-width:var(--content-size)}` applied to
   .entry-content as a child of <main>'s constrained layout) — a block child with
   width:auto just fills that 720px parent regardless of its own higher max-width.
   :has() widens the parent itself on this page only, so the true fix is two rules. */
.entry-content:has(> .verity-about-hero){ max-width: 820px; }
.entry-content > .verity-about-hero,
.entry-content > .verity-about-body{ max-width: 820px; margin: 0 auto; }

.verity-about-hero{ padding: 4rem 2.5rem 1.875rem; }
.verity-about-hero h1{
  font-family: 'Fraunces', Georgia, serif;
  /* Contract .about-hero h1 is a fixed 46px (desktop frame). Cap the clamp max at 46px so
     1440/2000 render exactly 46px; the responsive min (2.2rem) is retained for narrow widths
     since the contract defines no mobile About frame. */
  font-size: clamp(2.2rem, 4vw, 46px);
  line-height: 1.06;
  color: var(--v-ink);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: .875rem 0 0;
  max-width: 16ch;
  text-wrap: balance; /* artifact .about-hero h1: balanced wrap ("Independent proof" / "of what's in the vial.") */
}
.verity-about-lede{
  font-size: 1.05rem;
  color: var(--v-muted);
  margin: 1.25rem 0 0;
  max-width: 56ch;
  line-height: 1.65;
}

.verity-about-body{ padding: 1.25rem 2.5rem 4.375rem; }
.verity-ab-block,
.verity-ab-feature{ padding: 1.625rem 0; border-top: 1px solid var(--v-line); }
.verity-ab-block h2,
.verity-ab-feature h2{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  /* Contract vertical rhythm: body{line-height:1.5} with no h2 override, so each 24px section
     h2 gets a 36px line box. The theme's heading element style sets ~1.15, tightening the space
     around every section heading by ~8px — pin 1.5 to restore the artifact's rhythm. */
  line-height: 1.5;
  color: var(--v-ink);
  font-weight: 600;
  margin: 0 0 .7rem;
}
.verity-ab-block p{ color: var(--v-body); font-size: 1rem; line-height: 1.7; margin: 0; max-width: 64ch; }

/* Square-bullet feature list: the artifact renders these via an absolute-positioned
   ::before square, not ::marker (::marker can't reliably take width/height/background
   across browsers) — matching the artifact's actual CSS, not its shorthand description. */
.verity-feat{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.verity-feat li{ position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.65; color: var(--v-body); }
.verity-feat li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  background: var(--v-emerald);
  border-radius: 2px;
}
.verity-feat strong{ color: var(--v-ink); }

.verity-addr{
  margin-top: 1rem;
  background: var(--v-cream);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: .875rem 1rem;
  font-size: .86rem;
  color: var(--v-body);
  line-height: 1.6;
  display: inline-block;
}

/* ============ Cart — filled-cart skin (wave2 final polish) ============
   WooCommerce's classic [woocommerce_cart] table renders the coupon + Update-cart
   row as part of the same table (no extra wrapper markup), so the table itself is
   the card — matches the PDP spec-table's dark-header + line-token treatment. */
.woocommerce-cart-form table.shop_table{
  border: 1px solid var(--v-line);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce-cart-form table.shop_table thead th{
  background: var(--v-ink);
  color: #fff;
  font-family: var(--v-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
}
.woocommerce-cart-form table.shop_table thead th:first-child{ border-top-left-radius: 11px; }
.woocommerce-cart-form table.shop_table thead th:last-child{ border-top-right-radius: 11px; }
.woocommerce-cart-form table.shop_table td{
  border-top: 1px solid var(--v-line);
  color: var(--v-body);
}
.woocommerce-cart-form table.shop_table tbody tr:first-child td{ border-top: 0; }
.woocommerce-cart-form .product-name a{ color: var(--v-ink); font-weight: 600; }
/* Kill the WC responsive breakpoint's default zebra stripe — clean rows per spec. */
.woocommerce-cart-form table.shop_table_responsive tr:nth-child(2n) td{ background: none; }

/* Remove control: default WC red circle "×" -> brand line-icon. Data-URIs can't
   reference CSS custom properties, so the hex is hardcoded to match --v-emerald /
   --v-emerald-dk exactly; kills var(--wc-red) entirely (incl. its hover fill). */
.woocommerce-cart-form a.remove{
  font-size: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  color: transparent !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.woocommerce-cart-form a.remove:hover{
  background: var(--v-chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5A46' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}

/* "Update cart" — secondary/outline treatment (matches the "How we verify purity"
   ghost button, .vhB-btn--o in site/content/home.html). The default WP button-element
   fill made its native :disabled state (opacity dims the same solid green) read as
   barely different from enabled; an outline reads clearly enabled-vs-disabled. */
.woocommerce-cart-form button[name="update_cart"]{
  background: transparent;
  border: 1.5px solid var(--v-emerald);
  color: var(--v-emerald);
}
.woocommerce-cart-form button[name="update_cart"]:hover:not(:disabled){
  background: var(--v-chip-bg);
  color: var(--v-emerald);
}
.woocommerce-cart-form button[name="update_cart"]:disabled{
  opacity: .4;
  cursor: not-allowed;
}

/* Cart/checkout: WooCommerce core hides the header mini-cart block on these pages
   (renders it with inline style="visibility:hidden"), which drops the cart icon and leaves
   the account icon alone at the right — a cross-page header inconsistency. The 32x32 button
   already reserves its layout slot, so forcing it visible restores header parity with every
   other page with no layout shift. !important beats WC's non-important inline style. */
.woocommerce-cart .wp-block-woocommerce-mini-cart,
.woocommerce-checkout .wp-block-woocommerce-mini-cart{ visibility: visible !important; }

/* ---- Header: account icon (artifact items 1-2 — search + account + cart right cluster) ---- */
.verity-header-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v-ink);
}
.verity-header-icon:hover{ color: var(--v-emerald); }
.verity-header-icon svg{ width: 22px; height: 22px; }

/* ============ Mobile pass (Task 5, artifact item 6) ============
   Breakpoint: 640px — the one concrete number the artifact's own CSS uses for a
   mobile layout change (its footer-collapse rule). Core WP's nav block collapses
   to its hamburger at its own fixed 600px (wp-includes/blocks/navigation/style.css,
   untouched here) — 640 sits just above that, so between 640-600 the header already
   reads as reduced (no search/account, text nav still one row); below 600 the nav
   row is replaced by the hamburger too, for a clean, ungapped step-down. Tested the
   782px admin-bar breakpoint first: at both 782 and 640 the desktop header still
   renders intact (no wrap, no crowding), so 782 has nothing to do with when the
   header actually degrades — 640 does. */
@media (max-width: 640px){
  /* Item 1 (Task 4 ruling): closed mobile header = logo + cart + hamburger only.
     Search drops per the ruling; account (added after the ruling was written) isn't
     in its enumerated closed-state triad either — reachable via the footer's
     "My account" link, so nothing is stranded. */
  .verity-product-search,
  .verity-header-icon{ display: none; }

  /* Item 2: CTAs go full-width and stack. Selectors are two-deep (.vhB-band …) so this
     wins over the equal-specificity rules embedded in site/content/home.html's own <style>
     tag without needing !important — that block loads later in the document (body vs.
     this file's <head> <link>), so a bare .vhB-ctas{} here would lose the cascade tie. */
  .vhB-band .vhB-ctas{ flex-direction: column; }
  .vhB-band .vhB-btn{ width: 100%; text-align: center; box-sizing: border-box; }
  /* Artifact `.mhero`: single primary CTA + 30px headline on mobile. The secondary ghost
     "How we verify purity" button drops at phone widths (desktop hero keeps both); the hero
     title steps down from the desktop clamp floor (2.2rem/35.2px) to the artifact's 30px.
     Two-deep selectors (.vhB-band …) beat the equal-name inline rules in home.html's own
     <style> without !important. */
  .vhB-band .vhB-btn--o{ display: none; }
  .vhB-band .vhB-title{ font-size: 30px; }
  /* Parity round 3 (defect #1): the contract .mhero is text-only — eyebrow, title, lede,
     full-width CTA, ticks — then straight into the 2x2 stats grid. The desktop hero-art
     (vial image + Certificate-of-Analysis card) is dropped entirely on mobile; there is no
     framed vial panel in the mobile frame. Two-deep selector wins the cascade tie vs the
     later-loading .vhB-art{display:flex} in home.html's own <style>. */
  .vhB-band .vhB-art{ display: none; }

  /* Item 6: PDP buy row stacks, Add to cart goes full-width. */
  .single-product .woocommerce-variation-add-to-cart.variations_button{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .single-product .woocommerce-variation-add-to-cart.variations_button .quantity,
  .single-product .woocommerce-variation-add-to-cart.variations_button .quantity input{
    width: 100%;
    box-sizing: border-box;
  }
  .single-product .single_add_to_cart_button{ width: 100%; text-align: center; }
  .single-product div.product .woocommerce-product-gallery__image{ min-height: 260px; padding: 16px; }
  .single-product div.product .woocommerce-product-gallery__image img,
  .single-product div.product div.images img{ max-height: 220px; }

  /* Item 6: About — tighten the reading margins for a 390px screen; both pairs
     stay on the 4px scale (2.5rem/1.25rem/1.5rem = 40/20/24px, .5rem/1.25rem/3rem
     = 8/20/48px). */
  .verity-about-hero{ padding: 2.5rem 1.25rem 1.5rem; }
  .verity-about-body{ padding: .5rem 1.25rem 3rem; }
}

/* ============ Mobile nav overlay (Anatole, 2026-07-04) ============
   The block-nav responsive overlay shipped raw: white sheet, unstyled system-font links
   flush against the left edge, bare close X. Style it to the wave-2 system: cream ground,
   breathing room, brand type, comfortable touch targets. */
.wp-block-navigation__responsive-container.is-menu-open{
  background: var(--v-cream) !important; /* core sets background-color:inherit -> white */
  padding: 92px 28px 32px !important;    /* core's clamp() root padding wins otherwise */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding: 0;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container{
  gap: 4px;
  width: 100%;
  align-items: stretch; /* core centers items to content width; full-width rows for the dividers */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--v-line);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block;
  width: 100%;
  padding: 16px 2px;
  font-family: var(--wp--preset--font-family--heading, "Fraunces", serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--v-ink);
  text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{
  color: var(--v-emerald);
}
.wp-block-navigation__responsive-container-close{
  top: 22px !important;   /* Woo/WP inline-positions the close button; pin it into the header zone */
  right: 20px !important;
  color: var(--v-ink);
  padding: 10px;          /* 44px+ touch target around the X */
}
.wp-block-navigation__responsive-container-close svg{
  width: 26px;
  height: 26px;
}