/*
Theme Name: Blocksy Amino Dust Dark
Template: blocksy
Description: AMINO DUST child theme (Client Site Factory). Client-locked palette #0B0B0D / #131317 / #B9BDC6 / #F5F6F8, fill red #CC040B (the logo red, Gate 1) with white text, text red #FF2F3E. Saira headings + Inter body. Palette lives on the lines marked @brand:*; the two-red rule and the Blocksy palette bridge are hand-set below.
Version: 1.0.0
Text Domain: blocksy-amino-dust-dark
*/

/* Fleet provenance: cloned from the Spectrum HART-dark child, retinted for Amino Dust in D1 (2026-09-22). */

/* Client-locked typography: Saira (display: ital + wdth 100-125 + wght 400-800) + Inter (body, 300-700
   roman + italic). Gate 1 (2026-09-23) added Saira's width and italic axes for the display lines.
   URL verified 2026-09-23 with curl (Chrome UA): HTTP 200, 6 Saira @font-face blocks (3 upright + 3 real
   italic, each font-stretch 100% 125%, font-weight 400 800) + 14 Inter; both latin Saira woff2 files 200.
   Every axis list is a MATCHED range pair (0,…;1,…); a range mixed with a discrete tuple fails the whole
   request, which would silently drop BOTH families. @import must stay the first statement. */
@import url("./react-home/assets/fonts/fonts.css");

:root {
  /* @brand markers — one hex per marked line (brand/palette-report.json). Do NOT run
     scripts/apply-brand.sh on this theme: its theme.json slug_map corrupts theme.json (D1 verify miss #1). */
  --bpc-primary:           #CC040B; /* @brand:primary */
  --bpc-primary-hover:     #B4040A; /* @brand:primary-hover */
  --bpc-foreground:        #F5F6F8; /* @brand:foreground */
  --bpc-body:              #B9BDC6; /* @brand:body */
  --bpc-background:        #0B0B0D; /* @brand:background */
  --bpc-card:              #131317; /* @brand:card */
  --bpc-border:            #424250; /* @brand:border */
  --bpc-background-deeper: #050506; /* @brand:background-deeper */

  --bpc-font-sans: 'Inter', system-ui, sans-serif;
  --bpc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* no mono web font is loaded */
  --bpc-radius: 0.375rem;
}

/* ---- AMINO DUST brand layer (hand-set; beyond the 8-key contract) ----
   THE TWO-RED RULE. #CC040B is the FILL red, the logo's own red (Gate 1, 2026-09-23): white on it 5.85:1, on the #B4040A hover 7.09:1.
   #FF2F3E is the TEXT red (5.36:1 on bg, 5.05:1 on card, 5.56:1 on deeper). They never swap:
   #CC040B as small text is 3.36:1 (FAIL) and white on #FF2F3E is 3.67:1 (FAIL). */
:root {
  --bpc-on-primary: #FFFFFF;  /* text on any primary / primary-hover fill (5.85 / 7.09) */
  --bpc-accent:     #FF2F3E;  /* TEXT red only: links, eyebrows, prices, small labels. NEVER a fill under white text */
  --bpc-font-display: 'Saira', system-ui, sans-serif;
  /* Display-line voice (Gate 1, 2026-09-23): Saira wdth 112, italic, 700 for display lines only: the hero
     headline, page titles, section heads and stat numerals. Product titles and long headings stay upright
     at wdth 100 (the --bpc-title-* pair). G3 reuses these tokens (or the .ad-display class below). */
  --bpc-font-display-stretch: 112%;
  --bpc-display-style: italic;
  --bpc-display-weight: 700;
  --bpc-title-stretch: 100%;
  --bpc-title-style: normal;

  /* DESIGN.md "Beyond the contract" names */
  --ad-accent-link: #FF2F3E;  /* same value as --bpc-accent */
  --ad-silver:      #C8CCD4;  /* 12.21:1 on bg — secondary text, rules, the metallic edge of the logo */
  --ad-graphite:    #484848;  /* dividers + the disabled fill (Gate 1): body text on it 4.86:1. Never text itself (2.15:1 on bg) */
  --ad-success:     #3FB984;  /* 7.94:1 on bg */
  --ad-warning:     #E8A33D;  /* 9.12:1 on bg / 8.59:1 on card — also the error colour, so errors never read as brand red */

  /* CSS-only surface vocabulary. It replaces every deleted art/texture/video file: deep black
     grounds, restrained red glows and hairlines, silver and graphite rules. Worst-pixel contrast of
     --ad-plate was simulated on a 61x61 grid (linear fall-off, all layers composited):
     accent text >= 4.60:1, body >= 8.96:1, foreground >= 15.6:1. */
  --ad-control-edge: rgba(200, 204, 212, 0.5); /* control boundary: >= 3.62:1 on bg, card, deeper and plate */
  --ad-foil: linear-gradient(90deg, rgba(200, 204, 212, 0) 0%, rgba(200, 204, 212, 0.55) 16%, rgba(255, 47, 62, 0.9) 50%, rgba(200, 204, 212, 0.55) 84%, rgba(200, 204, 212, 0) 100%);
  --ad-foil-v: linear-gradient(180deg, rgba(255, 47, 62, 0.9), rgba(200, 204, 212, 0.55));
  --ad-brush: repeating-linear-gradient(115deg, rgba(200, 204, 212, 0.018) 0 1px, transparent 1px 4px);
  --ad-sheen: radial-gradient(120% 80% at 12% 0%, rgba(200, 204, 212, 0.035), transparent 58%);
  --ad-ember: radial-gradient(90% 70% at 100% 100%, rgba(204, 4, 11, 0.14), transparent 62%);
  --ad-lattice: radial-gradient(circle at 1px 1px, rgba(200, 204, 212, 0.06) 1px, transparent 1.6px) 0 0 / 22px 22px;
  --ad-plate-base: linear-gradient(170deg, var(--bpc-card) 0%, var(--bpc-background) 60%, var(--bpc-background-deeper) 100%);
  --ad-plate: var(--ad-sheen), var(--ad-ember), var(--ad-brush), var(--ad-plate-base);
}

/* Blocksy's dynamic typography CSS wins the cascade — font overrides need !important.
   Verify the computed fontFamily with Playwright; do not trust this file. */
body { font-family: var(--bpc-font-sans) !important; }
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.woocommerce-loop-product__title {
  font-family: var(--bpc-font-display) !important;
  letter-spacing: 0.02em;
}
.site-title { font-size: 26px; }
/* Display lines (Gate 1 item 4, 2026-09-23): Saira wdth 112, italic, 700. The logo's wide, oblique voice,
   kept to short display lines:
     - page titles in the title band (Shop, category archives, About, FAQ, Contact, the policies), never on a
       product page, where Blocksy's hero title would be the product name, and never on search results or a
       single post: Blocksy 2.1.57 (inc/components/hero/elements.php) prints "Search Results for <query>" and
       the post title there, both long headings, so they stay upright;
     - section heads: the section h2s of the About and Contact pages and the "Related products" band;
     - anything G3 marks .ad-display (the static hero headline, home section heads) and .ad-display--num
       (stat numerals, which also take tabular figures).
   NOT the FAQ body: copy/faq.md writes every question as `##`, so md2html.py makes them h2s, one per
   .hl-sect. They are long headings and stay upright; the FAQ keeps its display voice in its title band.
   A section head that runs long opts out with .ad-upright. Product titles and long headings (FAQ questions,
   policy sub-headings, h3 and below) stay upright at wdth 100: the guard after this rule. font-synthesis:
   none, so a missing italic face renders upright rather than as a faked oblique. !important for the same
   reason as the font-family rule above: Blocksy's dynamic typography prints heading weight and style.
   Put .ad-display on the headline or numeral element ITSELF, never on a section wrapper: font-style,
   font-stretch, font-weight and font-family all inherit. The reset after the guard catches a wrapper. */
.ad-display,
body:not(.single-product, .search, .single-post) .hero-section[data-type] .page-title:not(.ad-upright),
.hl-related__title:not(.ad-upright),
body.hl-p-about .entry-content h2:not(.ad-upright, .product_title, .woocommerce-loop-product__title, .hl-qv__title),
body.hl-p-contact .entry-content h2:not(.ad-upright, .product_title, .woocommerce-loop-product__title, .hl-qv__title) {
  font-family: var(--bpc-font-display) !important;
  font-stretch: var(--bpc-font-display-stretch) !important;
  font-style: var(--bpc-display-style) !important;
  font-weight: var(--bpc-display-weight) !important;
  font-synthesis: none;
}
.ad-display--num { font-variant-numeric: tabular-nums lining-nums; }
/* Upright guard: product titles never take the display slant. The section-h2 selectors above skip them
   (Woo loop and quick-view titles are h2s, so a product grid on About or Contact would otherwise match),
   and this guard covers inheritance inside an .ad-display section (font-style and font-stretch inherit).
   Search-results and single-post title-band titles are long headings: the display selector above skips
   them in its body:not() list, and the guard pins them upright even if .ad-display is added to one. The
   :not() exclusion is what decides: the display selector is (0,5,1) and !important, so a (0,3,1) guard
   entry alone would lose to it (rendered 2026-09-23). */
.product_title,
.woocommerce-loop-product__title,
.hl-qv__title,
.ad-upright,
body.search .hero-section .page-title,
body.single-post .hero-section .page-title {
  font-stretch: var(--bpc-title-stretch) !important;
  font-style: var(--bpc-title-style) !important;
}
/* Wrapper reset: if .ad-display lands on a section instead of its headline, running text, prices and
   controls inside it drop back to the upright Inter body voice. Not !important, so it only replaces what
   they would otherwise INHERIT. Any declared rule still wins: Blocksy's button typography keeps its own
   weight, and a nested .ad-display keeps the display voice. Blocksy declares button font-style as
   var(--theme-button-font-style) with no fallback, which this site leaves unset, so the property falls back
   to inherit and a button would pick up the italic: the variable is pinned upright here. The CTA list is
   Blocksy 2.1.57's button family (main.min.css), so an <a> ghost, block or "View cart" link is reset too,
   not only real <button>s and .button. */
.ad-display :where(p, li, dd, dt, small, label, blockquote, figcaption, .price, .amount,
  .button, .ct-button, .ct-button-ghost, .wp-element-button, .wp-block-button__link, .added_to_cart,
  [type="submit"], button, input, select, textarea) {
  --theme-button-font-style: var(--bpc-title-style);
  font-family: var(--bpc-font-sans);
  font-stretch: var(--bpc-title-stretch);
  font-style: var(--bpc-title-style);
  font-weight: 400;
}
/* Prices and strength labels sit in tabular figures (DESIGN.md, Type). */
.price, .amount, .hl-qv__price, .hl-sizeopt__mg, .csf-strength { font-variant-numeric: tabular-nums; }
/* woocommerce.min.css `.sale-price del { opacity: .7 }` over the text-red price rendered 3.07:1. The
   struck-through price takes the body gray: effective #85878F on bg = 5.5:1. The current price (ins)
   keeps the text red, 5.36:1. */
.price del, .sale-price del { color: var(--bpc-body) !important; }

/* AA law (two-red rule): every solid-red control takes WHITE text.
   #FFFFFF on #CC040B = 5.85:1 PASS; on the #B4040A hover = 7.09:1 PASS.
   Near-black on the red is 3.36:1 (2.77:1 on hover) and FAILS — never pin it here.
   The fill itself comes from Blocksy's --theme-button-background-* (bridged below).
   `button[type="submit"]`, not a bare `button`: main.min.css red-fills [type=submit], never a type-less or
   type="button" <button>, so a bare selector forced white text onto plugin buttons that keep their own
   light face (Complianz deny/preferences: #FFF on #EFEFEF = 1.15:1). Owned type="button" controls set
   their own colour and face. */
.ct-button, button[type="submit"], .button, input[type="submit"], .wp-element-button,
.single_add_to_cart_button, .add_to_cart_button, .checkout-button {
  color: var(--bpc-on-primary) !important;
  font-family: var(--bpc-font-sans) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Age Gate 3.7.3 renders BOTH answers as <button type="submit"> (src/Resources/views/public/partials/
   form/sections/buttons.php), so the (0,1,1) `button[type="submit"]` above reaches NO too. The NO selectors are
   doubled-class to (0,2,0) and its hover to (0,3,0), so NO keeps the text red (contract ruling 8) and
   hover keeps foreground whatever the print order. The age-gate block below repeats these specificities. */
.age-gate__button--yes, .age-gate__submit--yes { color: var(--bpc-on-primary) !important; }
.age-gate__button.age-gate__button--no, .age-gate__submit.age-gate__submit--no { color: var(--bpc-accent) !important; }
.age-gate__button.age-gate__button--no:hover, .age-gate__submit.age-gate__submit--no:hover { color: var(--bpc-foreground) !important; }

/* Force the client palette onto Blocksy's surfaces (the factory !important pattern).
   Contract law: default running text = `body` token (#B9BDC6, 10.45:1 on bg / 9.85:1 on card);
   `foreground` (#F5F6F8, 18.19:1) is reserved for headings + high-emphasis text. */
body {
  background: var(--bpc-background) !important;
  color: var(--bpc-body) !important;
  font-family: var(--bpc-font-sans);
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .woocommerce-loop-product__title {
  color: var(--bpc-foreground); /* low-specificity guard: headings never inherit body gray */
}
a { color: var(--bpc-accent); }            /* text red: 5.36:1 on bg, 5.05:1 on card */
a:hover { color: var(--bpc-foreground); }  /* hover BRIGHTENS (18.19:1); the hover red darkens and fails as text (2.77:1) */

/* ============================================================================
   BLOCKSY PALETTE BRIDGE — verified against the Blocksy 2.1.57 parent source
   (downloads.wordpress.org/theme/blocksy.2.1.57.zip, grepped 2026-09-22; DOCS-FIRST LAW).
   Blocksy prints its palette and every derived --theme-* colour as an inline :root block
   (inc/dynamic-css.php -> style#ct-main-styles-inline-css). Only an !important custom property
   declared here wins that cascade regardless of load order. Without the bridge the site renders
   in Blocksy's default accent #2872FA.

   Blocksy reads palette colour 1 as BOTH a fill and a text colour, and a dark red cannot do both.
   So colour 1 is the FILL red, colour 2 the darker FILL hover, and every TEXT consumer of colours
   1 and 2 is re-pointed explicitly below. Source of each default is cited per line:
     all.php      = inc/dynamic-styles/global/all.php
     forms.php    = inc/dynamic-styles/global/forms.php
     woo.php      = inc/dynamic-styles/global/woocommerce/general.php
     main / woo / pagination / comments / flexy / back-to-top = static/bundle/<name>.min.css
   ========================================================================== */
:root {
  --theme-palette-color-1: var(--bpc-primary) !important;            /* FILL red — never #FF2F3E (white on it is 3.67:1) */
  --theme-palette-color-2: var(--bpc-primary-hover) !important;      /* darker FILL hover (white 7.09:1); never text */
  --theme-palette-color-3: var(--bpc-foreground) !important;         /* all.php fontColor default -> --theme-text-color */
  --theme-palette-color-4: var(--bpc-body) !important;               /* secondary / meta text — body gray */
  --theme-palette-color-5: var(--bpc-border) !important;             /* all.php border_color -> --theme-border-color (decorative edges) */
  --theme-palette-color-6: var(--bpc-card) !important;               /* raised surfaces (main: pre, code) */
  --theme-palette-color-7: var(--bpc-background-deeper) !important;  /* deep wells (footer, vignettes) */
  --theme-palette-color-8: var(--bpc-background) !important;         /* base background (woo: type-2 cards, .ct-acount-nav, search results) */

  /* TEXT-role consumers of colours 1/2 -> the text red, or foreground for hover */
  --theme-link-initial-color: var(--bpc-accent) !important;     /* all.php linkColor default = palette-1. main: a, nav .ct-menu-link, .site-title, mobile-menu toggle */
  --theme-link-hover-color: var(--bpc-foreground) !important;   /* all.php linkColor hover = palette-2. main: a:hover, menu hover; non-critical: mobile-menu dropdown-active.
                                                                   pagination.min.css ALSO reads it as a FILL (.page-numbers.current) — re-filled explicitly below */
  --theme-link-active-color: var(--bpc-accent) !important;      /* main: current-menu-* item and woo: active tab text; mobile-menu/dynamic-styles.php active = skip, so :root decides */
  --theme-icon-hover-color: var(--bpc-accent) !important;       /* main: [data-icons-type] + header icon hovers; back-to-top: falls back to palette-2 (2.77:1) */
  --theme-headings-color: var(--bpc-foreground) !important;     /* all.php headingColor default = palette-4; main: h1-h6 (same specificity as our h1-h6 rule) */

  /* FILL-role consumers of colours 1/2 -> the fill stays red, the text on it is white */
  --theme-button-background-initial-color: var(--bpc-primary) !important;     /* all.php buttonColor default = palette-1. main: .button, [type=submit], .wp-element-button; comments: reply links; woo: quantity steppers */
  --theme-button-background-hover-color: var(--bpc-primary-hover) !important; /* all.php buttonColor hover = palette-2 */
  --theme-button-text-initial-color: var(--bpc-on-primary) !important;        /* all.php buttonTextColor default #fff */
  --theme-button-text-hover-color: var(--bpc-on-primary) !important;
  /* Pill corners (Gate 1 item 7). main.min.css draws .button, .ct-button, .ct-button-ghost, .added_to_cart,
     [type=submit], .wp-element-button, .wp-block-button__link and .woocommerce button.button with
     border-radius: var(--theme-button-border-radius, 3px). all.php would print it on :root from the
     customizer's buttonRadius, but aminodustdev's dynamic CSS carries no :root value (computed empty in a
     2026-09-23 render), so every button fell back to 3px. This sits on :root, so any element-level value
     Blocksy prints still wins on that element: the search-form buttons (main.min.css, tied to the field
     radius), .ct-pagination (pagination.php; the pagination squares set their own 4px below anyway) and the
     header CTA (headerCtaRadius, when set). Not a DB write: the customizer's buttonRadius stays untouched. */
  --theme-button-border-radius: 999px !important;
  --theme-selection-background-color: var(--bpc-primary) !important;          /* all.php selectionColor hover = palette-1 */
  --theme-selection-text-color: var(--bpc-on-primary) !important;             /* all.php selectionColor default #fff */
  --theme-form-selection-field-active-color: var(--bpc-primary) !important;   /* forms.php radioCheckboxColor accent = palette-1; main draws the tick in #fff */
  --theme-form-select-background-active-color: var(--bpc-primary) !important; /* woo: select2 highlighted option (fallback palette-1) */
  --form-field-select-active-color: var(--bpc-on-primary) !important;         /* woo: select2 highlighted text (fallback #fff) */
  /* forms.php formSelect*Color = skip, so woo.min.css falls back to a LIGHT dropdown: span.select2-dropdown
     background #fff under --theme-text-color (near-white) = 1.08:1, and the open selection box
     (--has-classic-forms is --true = initial, so its own fallback wins) is #fff too. That is every classic
     checkout / cart / My Account Country and State field (selectWoo). Card ground, body-gray options. */
  --theme-form-select-background-initial-color: var(--bpc-card) !important;   /* woo: span.select2-dropdown + open selection box (fallback #fff) */
  --form-field-select-initial-color: var(--bpc-body) !important;              /* woo: select2 option text (fallback --theme-text-color); 9.85:1 on card */
  --badge-background-color: var(--bpc-primary) !important;                    /* woo.php saleBadgeColor = skip -> woo: .onsale fallback palette-1 */
  --badge-text-color: var(--bpc-on-primary) !important;                       /* .out-of-stock-badge keeps its own local #24292E / #fff */
  --theme-cart-badge-background: var(--bpc-primary) !important;               /* woo: [class*=ct-dynamic-count] fallback palette-1 */
  --theme-cart-badge-text: var(--bpc-on-primary) !important;
  --account-nav-background-active-color: var(--bpc-primary) !important;       /* woo.php account_nav = skip -> woo: My Account active/hover item */
  --account-nav-text-active-color: var(--bpc-on-primary) !important;          /* its fallback text is palette-8 = near-black on red, 3.36:1 FAIL */

  /* Typography. inc/dynamic-styles/global/typography.php prints rootTypography ('System Default') as
     :root --theme-font-family: var(--theme-font-stack-default) (inc/css/typography.php L32), and main.min.css
     applies var(--theme-font-family) DIRECTLY to label, .ct-label, .entry-meta, .ct-breadcrumbs, blockquotes,
     .menu .ct-menu-link, .mobile-menu a, the .price chain, .onsale and .woocommerce-result-count, so forcing
     body alone left them in the -apple-system stack (incl. the PEPT-24 .csf-atc-consent label). Headings and
     loop titles stay Saira through the !important heading rule; pre/code keep their own monospace. */
  --theme-font-family: var(--bpc-font-sans) !important;

  /* Focus + control boundaries */
  --theme-form-field-border-focus-color: var(--bpc-foreground) !important;       /* forms.php formBorderColor focus = palette-1; main: input:focus outline + border */
  --theme-form-field-border-initial-color: var(--ad-control-edge) !important;    /* forms.php default = --theme-border-color #424250 = 1.99:1 on bg, under the 3:1 bar */
  --theme-form-selection-field-initial-color: var(--ad-control-edge) !important; /* checkbox/radio edge — includes the PEPT-24 checkout attestation box */

  /* Light-scheme component defaults that invert on a dark palette (static fallbacks, all skip in PHP) */
  --lightbox-button-background-color: var(--bpc-card);        /* woo: fallback #fff under a --theme-text-color (palette-3, near-white) icon = invisible */
  --lightbox-button-icon-color: var(--bpc-foreground);        /* 17.14:1 on card */
  --lightbox-button-hover-background-color: var(--bpc-primary);
  --lightbox-button-icon-hover-color: var(--bpc-on-primary);
  --flexy-nav-background-color: var(--bpc-card);              /* flexy: gallery arrows, same #fff fallback */
  --flexy-nav-arrow-color: var(--bpc-foreground);
  --flexy-nav-background-hover-color: var(--bpc-primary);
  --flexy-nav-arrow-hover-color: var(--bpc-on-primary);
  --top-button-background-color: var(--bpc-card);             /* back-to-top: fallback palette-3 (near-white) under a #fff icon = invisible */
  --top-button-background-hover-color: var(--bpc-primary);    /* all.php keeps the icon #fff on both states: 18.6:1 on card, 5.85:1 on red */
  --quantity-arrows-initial-color: var(--bpc-on-primary);     /* woo: steppers sit on the button fill */
  --quantity-arrows-hover-color: var(--bpc-on-primary);
}
/* typography.php gives pullquotes their own Georgia family; pull them into the display face. */
.wp-block-pullquote { --theme-font-family: var(--bpc-font-display) !important; }
/* single-product-layers.php payment-method icons ([data-color="custom"]) default to #4B4F58 = 2.4:1 on bg,
   under the 3:1 non-text bar. Body gray: 10.45:1. */
.entry-summary .ct-payment-methods[data-color="custom"] { --theme-icon-color: var(--bpc-body) !important; }

/* Fill consumers whose TEXT Blocksy does not route through a variable we can bridge. */
/* pagination.min.css fills .page-numbers.current with --theme-link-hover-color (now foreground) and
   main.min.css fills .page-links/.woocommerce-pagination .current with palette-1 — pin red + white. */
.page-links .current,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers li > .page-numbers.current,
.ct-pagination .page-numbers.current,
[data-pagination] .page-numbers.current {
  background: var(--bpc-primary) !important;
  border-color: var(--bpc-primary) !important;
  color: var(--bpc-on-primary) !important; /* 5.85:1 */
}
/* woo.php store notice: palette-1 fill (.demo_store --background-color) with #fff text. Links inside
   inherit --theme-link-initial-color (the text red) = 1.6:1 on the red fill — keep them white. */
.woocommerce-store-notice, .demo_store {
  --theme-text-color: var(--bpc-on-primary) !important;
  --theme-link-initial-color: var(--bpc-on-primary) !important;
  --theme-link-hover-color: var(--bpc-on-primary) !important;
  background-color: var(--bpc-primary) !important;
  color: var(--bpc-on-primary) !important;
}
.woocommerce-store-notice a, .demo_store a { color: var(--bpc-on-primary) !important; text-decoration: underline; }
/* woo.php notices ship hard-coded LIGHT-scheme defaults that no palette slot reaches:
   info / thank-you  --background-color #F0F1F3 and a self-referencing --theme-text-color (invalid, so the
                     text inherits body gray) = 1.67:1; success #F0F1F3 under near-white text = 1.05:1;
   error             rgba(218,0,28,.7) with a #b92c3e button: a brand-adjacent red for errors.
   woocommerce.min.css also re-points --theme-link-initial-color to the notice text on every notice, so links
   are set here too. These fire on add-to-cart, the empty cart, the checkout coupon/login prompts and the
   thank-you page. Dark card; errors take the warning amber, never a red (theme.json "destructive"). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-thankyou-order-received,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
  --background-color: var(--bpc-card) !important;
  --theme-text-color: var(--bpc-body) !important;              /* 9.85:1 on card */
  --theme-link-initial-color: var(--bpc-accent) !important;    /* 5.05:1 on card */
  --theme-link-hover-color: var(--bpc-foreground) !important;  /* 17.14:1 */
  border: 1px solid var(--bpc-border) !important;              /* beats woocommerce.min.css block-banner border:none */
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  --background-color: var(--bpc-card) !important;
  --theme-text-color: var(--bpc-foreground) !important;        /* 17.14:1 on card */
  --theme-link-initial-color: var(--ad-warning) !important;    /* 8.59:1 on card */
  --theme-link-hover-color: var(--bpc-foreground) !important;
  /* An action inside an error ("View cart") is still a brand button: primary fill, white text 5.85 / 7.09. */
  --theme-button-background-initial-color: var(--bpc-primary) !important;
  --theme-button-background-hover-color: var(--bpc-primary-hover) !important;
  --theme-button-text-initial-color: var(--bpc-on-primary) !important;
  --theme-button-text-hover-color: var(--bpc-on-primary) !important;
  border: 1px solid var(--ad-warning) !important;
}
/* Error links pinned outright: the variable route above relies on main.min.css `a` printing after this
   file; if the order ever flips, the plain `a` rule near the top would turn them back to the text red. */
.woocommerce-error a:not(.button),
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content a:not(.wc-forward) { color: var(--ad-warning); }
.woocommerce-error a:not(.button):hover,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content a:not(.wc-forward):hover { color: var(--bpc-foreground); }
/* State marks: the classic notices' woo-font glyph and the block banners' icon disc. */
.woocommerce-message::before,
.woocommerce-thankyou-order-received::before { color: var(--ad-success); }  /* 7.5:1 on card */
.woocommerce-error::before { color: var(--ad-warning); }                     /* 8.59:1 on card */
.wc-block-components-notice-banner.is-info > svg { background-color: var(--bpc-border) !important; fill: var(--bpc-foreground) !important; }
.wc-block-components-notice-banner.is-success > svg { background-color: var(--ad-success) !important; fill: var(--bpc-background-deeper) !important; }
.wc-block-components-notice-banner.is-error > svg { background-color: var(--ad-warning) !important; fill: var(--bpc-background-deeper) !important; }
/* main.min.css ghost / outline buttons set their TEXT to --theme-button-background-initial-color
   (the fill red as text = 3.36:1). Text goes to the text red; the hover fills and turns white. */
.ct-button-ghost,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  color: var(--bpc-accent) !important;               /* 5.36:1 */
  border-color: var(--bpc-primary) !important;
  background-color: transparent !important;
}
.ct-button-ghost:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  color: var(--bpc-on-primary) !important;           /* 7.09:1 on the hover fill */
  border-color: var(--bpc-primary-hover) !important;
  background-color: var(--bpc-primary-hover) !important;
}
/* woo.min.css type-2 product tabs paint the active tab with palette-1 and colour its text with
   --theme-link-active-color (the text red) — 1.6:1. The tabs are retired below; guard anyway. */
.woocommerce-tabs[data-type*="type-2"] .tabs li.active a { color: var(--bpc-on-primary) !important; }
/* panel-builder/header/search: the modal submit icon defaults to rgba(255,255,255,.7) on the red
   (3.32:1). panel-builder/header/cart: the drawer close icon defaults to rgba(0,0,0,.5) on a
   palette-8 panel — invisible on this black. Both panels default to slate rgba(18,21,25,.98). */
#search-modal .ct-search-form {
  --theme-button-text-initial-color: var(--bpc-on-primary) !important;
  --theme-button-text-hover-color: var(--bpc-on-primary) !important;
  /* search/dynamic-styles.php prints rgba(255,255,255,.2) here on the form itself (1.71:1 on the modal
     once focus leaves the field), which the :root control-edge bridge cannot reach. Control edge: 3.68:1. */
  --theme-form-field-border-initial-color: var(--ad-control-edge) !important;
}
#search-modal,
#offcanvas .ct-panel-inner { background-color: rgba(5, 5, 6, 0.97) !important; } /* text red on it 5.55:1 */
#woo-cart-panel .ct-toggle-close { --theme-icon-color: var(--bpc-body) !important; }             /* 10.45:1 */
#woo-cart-panel .ct-toggle-close:hover { --theme-icon-color: var(--bpc-foreground) !important; }
/* Dark discs need an edge to read as controls (the icon itself carries the 3:1 bar). */
.woocommerce-product-gallery__trigger,
[class*="flexy-arrow"],
.ct-back-to-top { border: 1px solid rgba(200, 204, 212, 0.18); }

/* ---- Woo form furniture that ships light-scheme literals (woocommerce.min.css / comments.min.css) ---- */
/* select2: the current choice is tinted rgba(0,0,0,.03) (invisible on this black) and the drop shadow is
   5% black. Silver tint instead: body gray on it 8.45:1 (rendered). The `body` prefix outranks Blocksy's (0,3,1)
   selected rule and stays under its (0,4,1) highlighted rule, so the red hover row still wins. */
body span.select2-dropdown .select2-results__option[aria-selected="true"],
body span.select2-dropdown .select2-results__option[data-selected="true"] { background-color: rgba(200, 204, 212, 0.08); }
body span.select2-dropdown.select2-dropdown--below,
body span.select2-dropdown.select2-dropdown--above { box-shadow: 0 18px 36px -8px rgba(0, 0, 0, 0.6); }
/* Password meter (registration, reset, account details, checkout account creation): Blocksy fills it with
   pastel #f1adad / #fbc5a9 / #ffe399 / #c1e1b9 and sets no text colour, so the inherited body gray read
   1.01-1.50:1. Dark card, body text 9.85:1; the level is carried by the label text AND a 3px edge:
   Very weak / Weak = warning amber (8.59:1 on card), Medium = silver, Strong = success green (7.5:1). */
.woocommerce-password-strength {
  background-color: var(--bpc-card) !important;
  color: var(--bpc-body) !important;
  border: 1px solid var(--bpc-border);
  border-left: 3px solid var(--ad-warning);
  border-radius: 4px;
}
.woocommerce-password-strength.good { border-left-color: var(--ad-silver); }
.woocommerce-password-strength.strong { border-left-color: var(--ad-success); }
/* Required-field asterisks: woo `.form-row .required` is pure #FF0000 (a third red) and comments /
   review-form `.required` is #c00 = 3.34:1 on bg (FAIL). One text red: 5.36:1 on bg, 5.05:1 on card.
   !important beats the (1,2,0) `#review_form .comment-form .required`. */
.form-row .required,
.comment-form .required,
#review_form .comment-form .required { color: var(--bpc-accent) !important; }
/* Native <select> furniture (shop sort, variation selects, any core or plugin select).
   Popup text: main.min.css `select option{color:initial}` computes to black, and Chromium's popup
   (internal_popup_menu.cc: SerializeBaseStyle paints the select's own background, AddElementStyle adds each
   option's colour when it differs) then lists black on the #131317 sort select = 1.13:1 on Windows, Linux
   and ChromeOS. Card ground + body gray on every option: 9.85:1. `body` + :not([multiple]) = (0,1,3) beats
   Blocksy's (0,0,2), which prints after this file. Listboxes (select[multiple]) render inline on the page
   ground, so only their unchecked rows are recoloured (black on bg was 1.06:1; body gray 10.45:1); the
   :checked row keeps the UA highlight (#000 on #CECECE, SelectedItem when focused).
   Chevron: main.min.css `select{background-image:…fill='%234F5D6D'…}` is slate: 2.92:1 on bg and 2.75:1 on
   card, under the 3:1 non-text bar. Same glyph, position and size, body gray: 10.45:1 on bg, 9.85:1 on card.
   (0,0,2) beats Blocksy's (0,0,1) and stays under the (0,2,1) mobile icon-only sort select, which keeps
   background-image: none and its currentColor .ct-sort-icon. */
body select:not([multiple]) option,
body select:not([multiple]) optgroup {
  color: var(--bpc-body);
  background-color: var(--bpc-card);
}
body select[multiple] option:not(:checked),
body select[multiple] optgroup { color: var(--bpc-body); }
body select {
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%23B9BDC6' fill-rule='nonzero'/%3E%3C/svg%3E");
}

/* ---- Age gate: premium brand skin (one-click 21+ confirm) ----
   Dormant: it only renders if phase E runs with --with-age-gate-plugin (held by default; canon: no
   third-party age gate). The owned gate is the PRISM Research Access Gate plugin (1.4.2, installed
   in E8 per state.json flags.research_gate). It is branded through its own prg_* options
   (_build/research-gate/amino-configure.php), not here. YES = red fill + white text; NO = text red.
   Age Gate 3.7.3 dist/main.css: `.age-gate__wrapper` is the position:fixed full-viewport overlay and
   `.age-gate` is the form panel, painted `background-color: var(--ag-form-background, #fff)` under
   `color: var(--ag-text-color, #333)`. Skinning the wrapper left every text pair on the plugin's white panel
   (#F5F6F8 on #FFF = 1.08:1) and pinned a 420px column to the left edge. So the skin drives the plugin's own
   variables instead. src/Presentation/Form.php prints the admin appearance settings (factory seed:
   background #22364B, panel #ffffff, text #000000) as a plain `:root{--ag-…}` inline block, so these
   !important custom properties win whatever the print order. Panel = card: heading and subheadline
   foreground 17.14:1, running text body 9.85:1, YES 5.85:1 (7.09:1 hover), NO 5.05:1 (9.13:1 hover),
   error amber 8.59:1; backdrop = the deeper well. */
:root {
  --ag-background-color: var(--bpc-background-deeper) !important;
  --ag-form-background: var(--bpc-card) !important;
  --ag-text-color: var(--bpc-body) !important;
  --ag-text-error-color: var(--ad-warning) !important; /* the plugin's `.age-gate__error{color:var(--ag-text-error-color,#c00)}` sits on the message itself */
  --ag-form-max-width: 420px !important;
  --ag-form-radius: 16px !important;
  --ag-form-padding: 44px 40px !important;
  --ag-form-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}
@media (max-width: 479px) {
  :root { --ag-form-padding: 32px 22px !important; } /* 390 viewport: a 350px panel keeps a 306px measure, not 270px */
}
.age-gate__remember-field { accent-color: var(--bpc-primary); } /* UA tick on the red fill, not the UA blue */
.age-gate__heading-title {
  font-family: var(--bpc-font-display) !important;
  color: var(--bpc-foreground); /* 17.14:1 on card */
  font-size: 30px;
  font-weight: 700; /* real imported weight — Saira is loaded 400-800, nothing is synthesized */
  letter-spacing: 0.02em;
}
.age-gate__subheadline {
  font-family: var(--bpc-font-sans) !important;
  color: var(--bpc-foreground);
  font-size: 15px;
  line-height: 1.55;
  max-width: 32ch;
  margin: 10px auto 22px;
  text-wrap: balance;
}
.age-gate__button, .age-gate__submit {
  font-family: var(--bpc-font-sans) !important; /* buttons = Inter; Saira is display-only */
  border-radius: 999px !important;
  padding: 13px 30px !important;
  /* !important: the plugin's own `button.age-gate__submit--yes/--no` (0,1,1: 1rem, 600) and the global
     `button[type="submit"]` (0,1,1: 600) both outrank this (0,1,0) block. */
  font-weight: 700 !important;
  font-size: 15px !important;
  border: 2px solid var(--bpc-primary) !important; /* edge 3.17:1 on card (3.36 on bg, 3.48 on deeper): clears the 3:1 UI bar, and it is the NO answer's only boundary */
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.age-gate__button--yes, .age-gate__submit--yes {
  background: var(--bpc-primary) !important;
  /* AA law: white on red. #FFFFFF on #CC040B = 5.85:1; on the #B4040A hover = 7.09:1.
     NEVER near-black here — it is 3.36:1 (2.77:1 on hover) and fails WCAG AA. */
  color: var(--bpc-on-primary) !important;
}
.age-gate__button--yes:hover, .age-gate__submit--yes:hover { background: var(--bpc-primary-hover) !important; border-color: var(--bpc-primary-hover) !important; }
/* (0,2,0): must outrank the global `button[type="submit"]` (0,1,1) white, which NO also matches. */
.age-gate__button.age-gate__button--no, .age-gate__submit.age-gate__submit--no {
  background: transparent !important;
  color: var(--bpc-accent) !important; /* 5.05:1 on card */
}
/* Hover lifts to foreground: the text red on #424250 would be 2.69:1; foreground is 9.13:1.
   (0,3,0) so it outranks the (0,2,0) rule just above instead of losing to it on source order. */
.age-gate__button.age-gate__button--no:hover, .age-gate__submit.age-gate__submit--no:hover {
  background: var(--bpc-border) !important;
  color: var(--bpc-foreground) !important;
}
.age-gate__remember-wrapper, .age-gate__remember {
  font-family: var(--bpc-font-sans) !important;
  color: var(--bpc-foreground);
  font-size: 13px;
}
/* Errors use the warning amber, never a red: #E8A33D = 8.59:1 on card, 9.12:1 on bg.
   Same value as theme.json "destructive". */
.age-gate__errors { color: var(--ad-warning); font-size: 14px; }

/* ---- Control-state governance ---- */
/* Focus: one ring everywhere — 2px solid foreground, 2px offset. Never the fill red or the hover red
   (the hover red is 1.21:1 against a red button). #F5F6F8 = 18.19:1 on bg, 17.14:1 on card, 5.41:1
   against the red fill. Replaces main.min.css `a:focus-visible, button:focus-visible` and the
   checkbox rings, which Blocksy draws in palette-1. */
.ct-button:focus-visible, button:focus-visible, .button:focus-visible,
input[type="submit"]:focus-visible, .wp-element-button:focus-visible,
.single_add_to_cart_button:focus-visible, .add_to_cart_button:focus-visible,
.checkout-button:focus-visible, .age-gate__button:focus-visible, .age-gate__submit:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--bpc-foreground) !important;
  /* !important: main.min.css `input:is([type=text],[type=email],[type=number],…)` sets
     outline-offset: calc(border-width * -1). It ties input:focus-visible on specificity (0,1,1) and prints
     after this file (WP queues the child before ct-main-styles), so it pulled the ring 1px INSIDE fields. */
  outline-offset: 2px !important;
}
/* Skip link (D3 L3-04). Blocksy prints a.skip-link.screen-reader-text at wp_body_open 50 (parent
   inc/components/skip-to-content-link.php); focused, main.min.css `.screen-reader-text:focus` shows it
   as WordPress blue #21759B on a #F1F1F1 plate (4.55:1). On brand: foreground on the card ground,
   17.14:1, with the site's ring. (0,3,0) outranks main.min.css (0,2,0), which prints after this file.
   Blocksy keeps the position, size and z-index. */
.skip-link.screen-reader-text:focus {
  background-color: var(--bpc-card);
  color: var(--bpc-foreground);
  font-family: var(--bpc-font-sans);
  border-radius: var(--bpc-radius);
  box-shadow: 0 0 0 1px var(--bpc-border), 0 10px 30px rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--bpc-foreground);
  outline-offset: 2px;
}
/* Reduced motion (D3 L3-03). main.min.css sets html{scroll-behavior:smooth} with no media condition, so
   the skip link, in-page anchors and focus jumps animated even under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}
/* woo.min.css rings the checkout payment radio in --theme-form-selection-field-active-color (red). */
#payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:first-child:focus-visible + label::before {
  outline: 2px solid var(--bpc-foreground) !important;
  outline-offset: 2px !important;
}
/* Disabled: never a red field. Graphite fill + body gray (Gate 1 item 8, 2026-09-23): #B9BDC6 on #484848 =
   4.86:1. main.min.css halves every disabled button with opacity: .5, so opacity is pinned to make the 4.86:1
   real: a disabled add-to-cart must still say what it is. Covers the :disabled/[disabled] states and the
   .disabled class Blocksy and WooCommerce use (variation-selection-needed add-to-cart), plus the core
   families in Blocksy 2.1.57's own disabled list (main.min.css `.button:disabled, … .ct-button-ghost:disabled,
   … [type=submit].disabled, .wp-block-button__link…, .added_to_cart…, button[class*=ajax]…`): ghost, block
   and AJAX buttons go graphite too. (0,2,0), so it outranks the (0,1,0) .ct-button-ghost face above.
   Not covered: that list's plugin entries (button.regform-button, .woocommerce-message .showlogin /
   .restore-item, Forminator, Fluent Forms .ff-btn), and the (0,3,0) catalog/related card ghost and
   outline block-button faces, which outrank this block. */
.ct-button:disabled, button[type="submit"]:disabled, .button:disabled, input[type="submit"]:disabled,
.wp-element-button:disabled, .single_add_to_cart_button:disabled, .add_to_cart_button:disabled,
.ct-button[disabled], .button[disabled], .wp-element-button[aria-disabled="true"],
.ct-button.disabled, .button.disabled, .wp-element-button.disabled, input[type="submit"].disabled,
.single_add_to_cart_button.disabled, .add_to_cart_button.disabled,
[type="submit"].disabled, .ct-button-ghost:disabled, .ct-button-ghost.disabled,
.wp-block-button__link:disabled, .wp-block-button__link.disabled, .wp-block-button__link[aria-disabled="true"],
.added_to_cart.disabled, button[class*="ajax"]:disabled, button[class*="ajax"].disabled {
  background: var(--ad-graphite) !important;
  border-color: var(--ad-graphite) !important;
  color: var(--bpc-body) !important; /* 4.86:1 on graphite */
  opacity: 1 !important;
  cursor: not-allowed;
}


/* ---- React home (G3) — scoped to body.hl-react-home ------------------------
   inc/hl-react-home.php adds body.hl-react-home ONLY when hl_react_home_active() is true
   (react-home/mount/home-fragment.html exists). Until G3 ships that bundle the front page is an
   ordinary page, so its H1, title band and measured column render normally. */
body.hl-react-home .entry-header { display: none; } /* the fragment carries its own H1 */
/* Kill the page chrome so the React hero is the full viewport under the overlay header
   (Playwright 2026-08-13 on the source build: a 60px .ct-container-full pad plus a 33px leftover
   .hero-section left black gutters and a dead band under the header). */
body.hl-react-home .ct-container-full { padding: 0 !important; }
body.hl-react-home .hero-section { display: none !important; }
body.hl-react-home .entry-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.hl-react-home .entry-content > #hl-home-root {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}

/* Zoom-safe full-bleed. 100vw includes the scrollbar, so calc(50% - 50vw)
   walks left on Cmd+/- zoom and never tracks the layout. Clip the axis and
   size these bands to the formatted parent — they morph with the build. */
html { overflow-x: clip; }

/* G2d assemble: style the owned csf-topstrip (was unstyled inline spans running together).
   Claim-free operational copy; brand tokens; stacks on small screens. Body on deeper = 10.82:1. */
.csf-topstrip {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 6px 24px; font-size: 12px; letter-spacing: .02em;
  background: var(--bpc-background-deeper, #050506); color: var(--bpc-body, #B9BDC6);
  border-bottom: 1px solid var(--bpc-border, #424250);
}
.csf-topstrip .csf-topstrip__right { opacity: .8; } /* effective body at .8 on deeper = 7.07:1 */
@media (max-width: 689px) { .csf-topstrip { flex-direction: column; gap: 2px; text-align: center; } }
/* ---- G3 polish (designer, csf-design) ----
   PDP "Size" sibling-switcher spacing (csf-storefront-tweaks 4a renders
   .csf-strengths pills with no styling — they ran together). */

/* PDP strength/size switcher — spaced pill row under the price */
.csf-strengths {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}
.csf-strengths__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bpc-body);
  margin-right: 4px;
}
.csf-strength {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--bpc-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bpc-foreground);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.csf-strength:hover {
  border-color: var(--bpc-primary);
  color: var(--bpc-accent); /* 5.36:1 */
}
/* Active pill: solid red takes WHITE text (AA law — 5.85:1; 7.09:1 on hover) */
.csf-strength.is-active {
  background: var(--bpc-primary);
  border-color: var(--bpc-primary);
  color: var(--bpc-on-primary) !important;
}
.csf-strength.is-active:hover {
  background: var(--bpc-primary-hover);
  border-color: var(--bpc-primary-hover);
}

/* ============================================================================
   R1 FIX PASS (designer, codex-review R1 — 2026-08-12)
   #2  (codex 10) .csf-bigfoot footer CSS — the mu-plugin csf-storefront-tweaks
       renders the full premium footer markup and promises "Styled by the child
       theme's .csf-bigfoot rules"; those rules never existed, so the footer
       shipped as run-on text site-wide. This block IS those rules.
   #5b (codex 9)  interior pages read template-grade vs the home — hero band
       system for every interior title, dark-luxury shop archive, measured
       entry-content rhythm + styled steps, PDP framing. CSS-only; no template
       rewrites. Fluid/no-boxes law applies to interiors.
   AA notes inline. Fill red = #CC040B = rgb(204,4,11); text red = #FF2F3E = rgb(255,47,62).
   ========================================================================== */

/* ---- R1-2 · .csf-bigfoot — the premium-dark footer --------------------- */
/* Renders inside .ct-footer [data-row=bottom] .ct-container > .ct-footer-copyright (the storefront
   mu-plugin returns it through blocksy:footer:copyright:value). Flatten Blocksy's padded frame so the
   footer ground is page chrome — same inset-stamp / gray-gutter bug as the top title band. The bigfoot
   carries its own column and padding; a plain copyright line gets its container back below. */
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row=bottom] .ct-container,
.ct-footer [data-row=bottom] .ct-container-fluid,
.ct-footer .ct-footer-copyright {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bpc-background-deeper) !important;
}
.ct-footer .ct-footer-copyright { padding: 0; }
/* Plain copyright line (contract Amendment A item 5, live finding L1). With no storefront mu-plugin the
   bottom row holds Blocksy's own copyright element (inc/panel-builder/footer/copyright/view.php; the Amino
   line comes from the child's blocksy:footer:copyright:default-value filter). The flatten above left that
   line flush at x=0 and on the last pixel row. So ONLY when the row holds no .csf-bigfoot: Blocksy's own
   container comes back (90vw, 1290px cap, centred, so the line sits on the content edge), with real
   vertical rhythm and the house red hairline on the row. main.min.css paints `.ct-footer-copyright` in
   --theme-text-color (palette-3, foreground); the line takes the running-text token instead:
   #B9BDC6 on #050506 = 10.82:1. Links (none in today's line) take the text red, 5.56:1 on deeper, plus an
   underline: red against body gray is only 1.95:1, so colour alone cannot mark a link. The (0,4,0)
   !important container and line selectors outrank the (0,3,0)/(0,2,0) !important flatten. With a
   .csf-bigfoot present none of this matches (rendered pixel-identical to the pre-change file). */
.ct-footer [data-row="bottom"]:not(:has(.csf-bigfoot))::before { /* the house divider, as .csf-bigfoot::before; a pseudo block, because the flattened container paints over any row background */
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 4, 11, 0.5), transparent);
}
.ct-footer [data-row="bottom"] .ct-container:not(:has(.csf-bigfoot)),
.ct-footer [data-row="bottom"] .ct-container-fluid:not(:has(.csf-bigfoot)) {
  margin-inline: auto !important;
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}
.ct-footer [data-row="bottom"] .ct-container:not(:has(.csf-bigfoot)) {
  width: var(--theme-container-width) !important;
  max-width: var(--theme-normal-container-max-width, 1290px) !important;
}
/* A full-width row setting: Blocksy's own fluid width (main.min.css .ct-container-fluid) */
.ct-footer [data-row="bottom"] .ct-container-fluid:not(:has(.csf-bigfoot)) {
  width: calc(var(--theme-container-edge-spacing, 90vw) - var(--theme-frame-size, 0px) * 2) !important;
}
.ct-footer [data-row="bottom"] .ct-footer-copyright:not(:has(.csf-bigfoot)) {
  --theme-text-color: var(--bpc-body);
  --theme-link-initial-color: var(--bpc-accent);
  --theme-link-hover-color: var(--bpc-foreground);
  color: var(--bpc-body) !important;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
  text-wrap: balance; /* 360: two even lines, not a one-word orphan */
}
.ct-footer [data-row="bottom"] .ct-footer-copyright:not(:has(.csf-bigfoot)) a {
  color: var(--bpc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-footer [data-row="bottom"] .ct-footer-copyright:not(:has(.csf-bigfoot)) a:hover { color: var(--bpc-foreground); } /* 18.84:1 */
/* This child has no Author header, so Blocksy's stock "{theme_author}" prints an empty <a href=""></a>
   (no accessible name). Backstop only: the PHP default-value filter removes the token itself. */
.ct-footer-copyright a[href=""]:empty { display: none; }
@media (max-width: 689px) {
  .ct-footer [data-row="bottom"] .ct-footer-copyright:not(:has(.csf-bigfoot)) { text-align: center; }
}
.csf-bigfoot {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: var(--bpc-background-deeper);
  font-family: var(--bpc-font-sans);
  text-align: left;
}
.csf-bigfoot::before { /* top hairline — red gradient, the house divider */
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 4, 11, 0.5), transparent);
}
.csf-bigfoot__wrap {
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 40px) clamp(30px, 4vw, 44px);
}
.csf-footer-logo {
  display: block;
  max-height: 46px;
  width: auto;
  margin: 0 0 14px;
}
.csf-bigfoot__name {
  display: block;
  font-family: var(--bpc-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bpc-foreground); /* #F5F6F8 on the textured deeper well (#0D0D0E worst) = 17.98:1 */
}
.csf-bigfoot__brand p {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bpc-body); /* #B9BDC6 on #0D0D0E = 10.33:1 */
}
/* Column heads: Inter eyebrows, never Saira (display is for titles).
   Non-heading element (.csf-bigfoot__hdg div) — footer column titles are
   navigation labels, not document-outline headings (axe heading-order). */
.csf-bigfoot__col .csf-bigfoot__hdg {
  font-family: var(--bpc-font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bpc-accent); /* text red on #0D0D0E = 5.30:1 */
  margin: 0 0 14px;
}
/* Hairline dividers between columns (desktop) */
.csf-bigfoot__col {
  border-left: 1px solid rgba(204, 4, 11, 0.14);
  padding-left: clamp(20px, 2.5vw, 32px);
}
/* Legible link stack — the run-on fix: block links, breathing room, red hover */
.csf-bigfoot__col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bpc-body);
  text-decoration: none;
  transition: color 0.15s ease;
}
.csf-bigfoot__col a:hover { color: var(--bpc-accent); } /* 5.30:1 */
.csf-bigfoot__bar {
  border-top: 1px solid rgba(204, 4, 11, 0.16);
  padding: 18px clamp(20px, 4vw, 40px);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(185, 189, 198, 0.78); /* effective #91959C on deeper = 6.75:1 */
}
/* Mobile stack: brand full-width, columns 2-up then 1-up, dividers rotate to top */
@media (max-width: 899px) {
  .csf-bigfoot__wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .csf-bigfoot__brand { grid-column: 1 / -1; }
  .csf-bigfoot__col {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(204, 4, 11, 0.12);
    padding-top: 20px;
  }
}
@media (max-width: 559px) {
  .csf-bigfoot__wrap { grid-template-columns: 1fr; }
}

/* ---- R1-5b · interior hero band (every page title = a real hero) -------- */
/* Blocksy renders every interior title as .hero-section (shop = type-2 band,
   pages = type-1 constrained). One dark-luxury band system for both: deeper
   well, restrained red uplight, hairline base, centered Saira. "A bare title strip
   is not a hero — bands need depth" (banned-move #5). Worst glow pixel #240608
   (rendered, Gate-1 fill red): foreground 17.58:1, text-red breadcrumb links 5.19:1. */
.hero-section[data-type] {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-height: clamp(72px, 8vw, 110px) !important;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(204, 4, 11, 0.16), transparent 62%),
    radial-gradient(56% 130% at 50% 100%, rgba(204, 4, 11, 0.10), rgba(204, 4, 11, 0.03) 52%, transparent 78%),
    var(--bpc-background-deeper) !important;
  /* top padding = breathing room under the in-flow header bar (the Amendment A lockup sits
     inside the bar and no longer overhangs this plate; trimming it is a Gate 2 visual call) */
  padding: clamp(40px, 5.2vw, 58px) clamp(16px, 4vw, 40px) clamp(14px, 2vw, 20px);
  margin-top: 0;
  margin-bottom: clamp(12px, 2vw, 20px);
  border-bottom: 1px solid rgba(204, 4, 11, 0.14);
  box-sizing: border-box;
}
.hero-section[data-type],
.hero-section {
  min-height: 0 !important;
  height: auto !important;
}
/* If Blocksy nests the title band in a padded frame, flatten it so the
   band is page chrome — same width as the header, not a drifting stamp. */
body:not(.hl-react-home) #main > .hero-section,
body:not(.hl-react-home) .ct-container-full:has(> .hero-section),
body:not(.hl-react-home) .ct-container:has(> .hero-section) {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
/* type-1 pages (PDP, About, etc.) wrap the band in .ct-container-full with
   60px pad-top — that's the black void under the header. Kill it. */
body:not(.hl-react-home) .ct-container-full { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Blocksy type-2 defaults --min-height: 250px + 50px container pad — that's
   the black stadium under the header. Collapse it. */
.hero-section[data-type="type-2"] > [class*="ct-container"] {
  min-height: 0 !important;
  padding: clamp(36px, 4vw, 48px) 0 10px !important;
  justify-content: flex-start !important;
}
body.hl-shop .hero-section[data-type] .page-title {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: 0.14em;
  margin-top: 8px;
}
.hero-section[data-type] .entry-header {
  max-width: 1160px;
  margin-inline: auto;
  text-align: center;
}
.hero-section[data-type] .page-title {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 44px);
  letter-spacing: 0.06em;
  color: var(--bpc-foreground);
}
/* No rule under the title: the 72x1 red dash was a csf-visual banned tell (D3 MF-5 / L4-04). The band's
   depth and the display face carry the title. */

/* ---- R1-5b · shop archive — dark-luxury the grid ------------------------ */
/* Fluid/no-boxes: the square product renders carry their own baked black bg —
   feather-mask them into the field (home Featured-card treatment) instead of
   letting hard tile edges read as boxes. */
[data-products] .product {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center;
  align-items: center;
}
[data-products] .product .ct-media-container {
  background: transparent !important;
  aspect-ratio: 4 / 5;
}
[data-products] .product .ct-media-container img {
  object-fit: contain;
  object-position: center bottom;
  background: transparent !important;
  -webkit-mask-image: radial-gradient(78% 78% at 50% 48%, #000 48%, transparent 78%);
  mask-image: radial-gradient(78% 78% at 50% 48%, #000 48%, transparent 78%);
  transition: transform 0.5s ease;
}
[data-products] .product:hover .ct-media-container img { transform: scale(1.045); }
[data-products] .product .woocommerce-loop-product__title {
  font-size: 17px;
  letter-spacing: 0.04em;
}
[data-products] .product .price {
  color: var(--bpc-accent); /* text red on #0B0B0D = 5.36:1 */
  font-weight: 600;
}
/* Archive CTA: ghost -> red fill on hover. The ghost keeps the grid quiet; its label is the
   text red (5.36:1) and the hover fill takes white (5.85:1). The border is decorative — the
   label identifies the control. */
[data-products] .product .button {
  background: transparent !important;
  border: 1px solid rgba(204, 4, 11, 0.45) !important;
  color: var(--bpc-accent) !important;
}
[data-products] .product .button:hover {
  background: var(--bpc-primary) !important;
  border-color: var(--bpc-primary) !important;
  color: var(--bpc-on-primary) !important;
}
/* Toolbar: eyebrow the count, dark-skin the ordering control */
.woocommerce-result-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(185, 189, 198, 0.66); /* effective #7E8087 on bg = 5.01:1 */
}
.woocommerce-ordering select,
select.orderby {
  background-color: var(--bpc-card);
  border: 1px solid var(--ad-control-edge); /* 3.72:1 on card */
  border-radius: 4px;
  color: var(--bpc-body);
  padding: 8px 12px;
}
/* No black stadium between the last row and the footer */
body.hl-shop .site-main,
body.hl-pdp .site-main,
body.hl-shop .woocommerce,
body.hl-pdp .woocommerce,
.woocommerce-pagination {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.woocommerce-pagination { margin-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(20px, 3vw, 32px) !important; }
/* Pagination: quiet squares; the current page is the red fill with a white numeral (pinned in the
   palette bridge above, because Blocksy fills it from two different variables). */
.woocommerce-pagination .page-numbers li > .page-numbers,
.ct-pagination .page-numbers {
  border: 1px solid var(--bpc-border);
  border-radius: 4px;
  color: var(--bpc-body);
  background: transparent;
}

/* ---- R1-5b · interior content rhythm (the text-wall fix) ---------------- */
/* ONE measured column: WP's .is-layout-constrained auto-centers any child
   with a max-width, so every element carries the SAME cap or headings sit on
   a different axis. Fixed px, never ch — ch scales with each element's font,
   so "70ch" on an h2 is a different (much wider) column than on a p. */
.page:not(.hl-react-home) .entry-content > p,
.page:not(.hl-react-home) .entry-content > ul,
.page:not(.hl-react-home) .entry-content > ol,
.page:not(.hl-react-home) .entry-content > h2,
.page:not(.hl-react-home) .entry-content > h3,
.page:not(.hl-react-home) .entry-content > h4 { max-width: 720px; /* ≈70ch at body 16px */ }
.page:not(.hl-react-home) .entry-content > p { line-height: 1.75; }
.page:not(.hl-react-home) .entry-content > h2 {
  margin: 2.1em 0 0.7em;
  letter-spacing: 0.05em;
}
.page:not(.hl-react-home) .entry-content > h2:first-child { margin-top: 0.2em; }
/* Content h2s carry no dash (the 56x1 red dash was a banned tell, D3 MF-5 / L4-04): size, weight and the
   2.1em lead space separate them. */
.page:not(.hl-react-home) .entry-content > h3 {
  margin: 1.9em 0 0.55em;
  font-size: 21px;
  letter-spacing: 0.05em;
}
.page:not(.hl-react-home) .entry-content > hr {
  border: 0;
  height: 1px;
  margin: 2.6em 0;
  background: linear-gradient(90deg, transparent, rgba(204, 4, 11, 0.4), transparent);
}
.page:not(.hl-react-home) .entry-content strong { color: var(--bpc-foreground); }
.page:not(.hl-react-home) .entry-content ul li { margin-block: 6px; }
.page:not(.hl-react-home) .entry-content ul li::marker { color: var(--bpc-accent); } /* 5.36:1 */
/* Ordered lists (true sequences in page copy) keep the list's own numerals, set as type: the display
   face, tabular, in the text red. The 30px ringed circles drawn around each numeral were a banned tell
   (D3 MF-5 / L4-04); a marker is typography, not a drawn mark. */
.page:not(.hl-react-home) .entry-content ol {
  list-style: decimal;
  margin: 1.4em 0;
  padding-left: 1.6em;
}
.page:not(.hl-react-home) .entry-content ol > li {
  padding-left: 0.35em;
  margin-block: 12px;
}
.page:not(.hl-react-home) .entry-content ol > li::marker {
  color: var(--bpc-accent); /* 5.36:1 */
  font-family: var(--bpc-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- R1-5b · PDP framing (fluid product plane, measured summary) -------- */
/* The gallery render carries its own baked black bg — feather it into the
   field and stand it on a soft red pool; no box, no border. */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 88%;
  height: 34%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 78%, rgba(204, 4, 11, 0.12), rgba(204, 4, 11, 0.04) 55%, transparent 78%);
  pointer-events: none;
}
.single-product .woocommerce-product-gallery img {
  -webkit-mask-image: radial-gradient(82% 82% at 50% 48%, #000 50%, transparent 80%);
  mask-image: radial-gradient(82% 82% at 50% 48%, #000 50%, transparent 80%);
}
.single-product .entry-summary .price {
  color: var(--bpc-accent); /* 5.11:1 on the buy-box pool's lightest point (#121214) */
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
}
/* RUO line: quiet eyebrow under the price */
.single-product .entry-summary .csf-ruo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(185, 189, 198, 0.72); /* effective #888B92 on bg = 5.78:1 */
}
.single-product .entry-summary .ct-product-divider {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(204, 4, 11, 0.35), transparent);
  margin: 18px 0;
}
.single-product .entry-summary .stock { font-size: 13px; color: rgba(185, 189, 198, 0.72); } /* 5.78:1 */
.single-product .entry-summary .csf-atc-consent { font-size: 14px; line-height: 1.55; }
/* COA row: hairline-framed line, red state chip — no box */
.single-product .csf-coa-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  border-top: 1px solid rgba(204, 4, 11, 0.18);
  padding-top: 16px;
  margin-top: 18px;
}
.single-product .csf-coa-block .csf-coa-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bpc-accent);
}
.single-product .csf-coa-block .csf-coa-label {
  font-size: 13.5px;
  color: rgba(185, 189, 198, 0.8); /* effective #9699A1 on bg = 6.93:1 */
}
/* Meta: small-caps whisper under a hairline */
.single-product .entry-summary .product_meta {
  border-top: 1px solid var(--bpc-border);
  padding-top: 14px;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bpc-body); /* kept in sync with the G4-3 rule below, which overrides it */
}
.single-product .entry-summary .product_meta a { color: var(--bpc-body); }
/* Hover renders at full strength: woocommerce.min.css dims `.product_meta>span>*` to opacity .7 at (0,3,1),
   but its own `…product_meta>span>a:hover{opacity:1}` at (0,4,2) lifts it back (rendered: opacity 1,
   #FF2F3E, 5.36:1 on bg). */
.single-product .entry-summary .product_meta a:hover { color: var(--bpc-accent); } /* 5.36:1 */


/* ============================================================================
   K3 INTERIOR RICHNESS PASS (file-only lane, 2026-08-13; Amino retint D1)
   Surfaces: shop archive · PDP · /faq/ + /about/ + /contact/ · the .csf-bigfoot footer.
   Method: token-locked CSS + the licensed line icons in assets/icons/ (licence register:
   clients/amino-dust/envato-assets/LICENSES.md). Every texture, art plate and video poster of
   the source build is gone; the surfaces are CSS-only from the Amino tokens (--ad-plate,
   --ad-foil, --ad-lattice, --ad-brush). Zero customer-facing sentences — presentation only.
   House laws applied: red stays an accent (never a text field); every solid red control keeps
   white text; motifs are contained (one per plate); plates stay dark enough to preserve the
   documented AA pairs. New pairs documented inline.
   Icon cache-bust: bump the ?v= token on EVERY assets/icons/ background URL in this file
   (14 refs, this block and G4) whenever the icon SVGs are recoloured, e.g. the Gate-1 text-red
   ruling (L1-10). This file's own ?ver does not re-key the URLs inside it; the header <img>
   icons re-key themselves (inc/hl-header.php, ?ver = file mtime).
   ========================================================================== */

/* ---- K3-0 · per-surface hero plates (extend the R1 hero band) ------------
   The R1 band gains a CSS-only motif per route. Page titles (foreground) stay >= 15:1 and
   text-red breadcrumb links >= 4.62:1 on every plate, lattice dot included. */
.hero-section[data-type] { position: relative; }
/* Catalog surfaces (shop + PDP): lab lattice under a vignette, red uplight from below. */
body.hl-shop .hero-section[data-type],
body.hl-pdp .hero-section[data-type] {
  background:
    radial-gradient(56% 130% at 50% 100%, rgba(204, 4, 11, 0.10), rgba(204, 4, 11, 0.03) 52%, transparent 78%),
    radial-gradient(90% 120% at 50% 50%, transparent 35%, var(--bpc-background-deeper) 88%),
    var(--ad-lattice),
    var(--bpc-background-deeper) !important;
}
/* About: brushed-metal plate, silver sheen top-left, ember bottom-right. */
body.hl-p-about .hero-section[data-type] {
  background:
    radial-gradient(56% 130% at 50% 100%, rgba(204, 4, 11, 0.10), rgba(204, 4, 11, 0.03) 52%, transparent 78%),
    radial-gradient(70% 120% at 10% 0%, rgba(200, 204, 212, 0.05), transparent 60%),
    var(--ad-brush),
    var(--bpc-background-deeper) !important;
}
/* FAQ: faint orbit rings rising from below centre. */
body.hl-p-faq .hero-section[data-type] {
  background:
    radial-gradient(56% 130% at 50% 100%, rgba(204, 4, 11, 0.10), rgba(204, 4, 11, 0.03) 52%, transparent 78%),
    repeating-radial-gradient(circle at 50% 135%, rgba(200, 204, 212, 0.035) 0 1px, transparent 1px 26px),
    var(--bpc-background-deeper) !important;
}
/* Contact: brushed plate, ember on the right. */
body.hl-p-contact .hero-section[data-type] {
  background:
    radial-gradient(56% 130% at 50% 100%, rgba(204, 4, 11, 0.10), rgba(204, 4, 11, 0.03) 52%, transparent 78%),
    radial-gradient(60% 120% at 100% 30%, rgba(204, 4, 11, 0.08), transparent 62%),
    var(--ad-brush),
    var(--bpc-background-deeper) !important;
}

/* ---- K3-3 · shop archive — category tile row (markup from inc/hl-interior-richness.php) -
   Four-tile map: Peptides / Blends / Compounds / Supplies. Names = the catalog's own taxonomy
   labels (no new sentences). Tile art is CSS-only from the tokens until F2 supplies art. */
.hl-catrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 0 clamp(26px, 3.5vw, 40px);
}
.hl-catrow__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  border: 1px solid rgba(204, 4, 11, 0.14);
  background-color: var(--bpc-background-deeper);
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.hl-catrow__tile::after { /* legibility veil for the label */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.10) 30%, rgba(5, 5, 6, 0.78) 96%);
}
.hl-catrow__tile:hover {
  transform: translateY(-3px);
  border-color: rgba(204, 4, 11, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* Peptides: red core with a silver halo on a lab lattice. */
.hl-catrow__tile--peptides {
  background-image:
    radial-gradient(60% 45% at 50% 34%, rgba(204, 4, 11, 0.30), transparent 72%),
    radial-gradient(40% 30% at 50% 34%, rgba(200, 204, 212, 0.10), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(200, 204, 212, 0.10) 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 18px 18px;
  background-repeat: no-repeat, no-repeat, repeat;
}
/* Blends: two overlapping glows, red and silver. */
.hl-catrow__tile--blends {
  background-image:
    radial-gradient(46% 36% at 38% 32%, rgba(204, 4, 11, 0.30), transparent 72%),
    radial-gradient(46% 36% at 62% 44%, rgba(200, 204, 212, 0.14), transparent 72%),
    var(--ad-brush);
  background-size: 100% 100%;
}
/* Compounds: a fine crossed lattice (60° / -60°) under a red glow. */
.hl-catrow__tile--compounds {
  background-image:
    radial-gradient(55% 45% at 50% 36%, rgba(204, 4, 11, 0.24), transparent 72%),
    repeating-linear-gradient(60deg, rgba(200, 204, 212, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-60deg, rgba(200, 204, 212, 0.07) 0 1px, transparent 1px 22px);
  background-size: 100% 100%;
}
/* Supplies: graphite rules, a silver sheen and a low red base glow. */
.hl-catrow__tile--supplies {
  background-image:
    radial-gradient(60% 40% at 50% 100%, rgba(204, 4, 11, 0.22), transparent 72%),
    linear-gradient(120deg, rgba(200, 204, 212, 0.10), transparent 45%),
    repeating-linear-gradient(90deg, rgba(72, 72, 72, 0.35) 0 1px, transparent 1px 14px);
  background-size: 100% 100%;
}
.hl-catrow__name {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  font-family: var(--bpc-font-display);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--bpc-foreground); /* >= 13.89:1 over the veil even at the brightest glow */
}
/* The name stands alone: the 34x2 red tick under it was a banned tell (D3 MF-5 / L4-04). */

/* Shop utility row — microscope icon anchors the result-count eyebrow */
body.hl-shop .woocommerce-result-count { display: flex; align-items: center; gap: 9px; }
body.hl-shop .woocommerce-result-count::before {
  content: '';
  width: 17px;
  height: 17px;
  background: url('assets/icons/lab-microscope.svg?v=ad2') center / contain no-repeat;
  opacity: 0.9;
}

/* ---- K3-4 · PDP — fluid buy-box pool + icon-carried meta rows ------------- */
.single-product .entry-summary { position: relative; z-index: 0; }
.single-product .entry-summary::before { /* CSS light pool behind the buy area — feathered, no box */
  content: '';
  position: absolute;
  z-index: -1;
  inset: -38px -46px -30px;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(200, 204, 212, 0.07), transparent 72%),
    radial-gradient(55% 45% at 50% 92%, rgba(204, 4, 11, 0.12), transparent 70%);
  opacity: 0.5; /* lightest point #121214: text red 5.11:1, body 9.96:1 */
  -webkit-mask-image: radial-gradient(74% 84% at 50% 42%, #000 40%, transparent 74%);
  mask-image: radial-gradient(74% 84% at 50% 42%, #000 40%, transparent 74%);
  pointer-events: none;
}
@media (max-width: 899px) {
  .single-product .entry-summary::before { inset: -28px -14px -20px; } /* bleed stays inside the gutter */
}
/* Icon rows — the licensed lab set carries research-use / documentation /
   shipping affordances. Icons are decorative marks on existing rows (no new
   wording, no claims iconography). */
.single-product .entry-summary .csf-ruo::before,
.single-product .csf-coa-block::before,
.single-product .entry-summary .stock::before,
.single-product .entry-summary .product_meta::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.single-product .entry-summary .csf-ruo::before { background-image: url('assets/icons/lab-flask.svg?v=ad2'); }
.single-product .csf-coa-block::before { background-image: url('assets/icons/lab-clipboard.svg?v=ad2'); }
.single-product .entry-summary .stock::before { background-image: url('assets/icons/shop-09.svg?v=ad2'); }
.single-product .entry-summary .product_meta::before { background-image: url('assets/icons/shop-12.svg?v=ad2'); }

/* ---- K3-5 · FAQ — icon-anchored sections + alternating plates ----- */
/* Sections are wrapped by the K3 partial (hr-split, copy untouched). Even
   sections get a CSS plate — alternating rhythm, never bare walls. */
.hl-sect > p,
.hl-sect > ul,
.hl-sect > ol,
.hl-sect > h2,
.hl-sect > h3,
.hl-sect > h4 { max-width: 720px; margin-inline: auto; } /* R1 rhythm, ported inside the wrappers */
.hl-sect > p { line-height: 1.75; }
.hl-sect > h2 { margin: 2.1em 0 0.7em; letter-spacing: 0.05em; }
.hl-sect > h2:first-child { margin-top: 0.2em; } /* no dash under the h2 (D3 MF-5 / L4-04) */
.hl-sect > h3 { margin: 1.9em 0 0.55em; font-size: 21px; letter-spacing: 0.05em; }
.hl-sect > ul li::marker { color: var(--bpc-accent); }
.hl-sect > strong, .hl-sect strong { color: var(--bpc-foreground); }
.hl-sect--tex {
  /* Contained plate on the column axis — NOT a 100vw breakout: WP's
     .is-layout-constrained pins direct children with !important auto margins,
     so a breakout here would lose. Plate edges sit exactly on the 720 column.
     Worst plate pixel #1C1D21: text red 4.60:1, body 8.96:1, foreground 15.6:1. */
  border-radius: 12px;
  margin-block: clamp(30px, 4vw, 48px);
  padding: clamp(26px, 3.5vw, 40px) clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(204, 4, 11, 0.14);
  border-bottom: 1px solid rgba(204, 4, 11, 0.14);
  background: var(--ad-plate), var(--bpc-background-deeper);
}
.hl-sect--tex > :first-child { margin-top: 0.2em; }
.hl-sect--tex > :last-child { margin-bottom: 0.4em; }
/* FAQ group icon: ONE licensed mark on every group heading. Deliberately not an ordinal
   map — Amino's FAQ copy is not written yet, and an nth-of-type icon map decorates the
   wrong heading the moment the copy order differs. Headings keep foreground. */
body.hl-p-faq .hl-sect h3 { display: flex; align-items: center; gap: 13px; }
body.hl-p-faq .hl-sect h3::before {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url('assets/icons/lab-atom.svg?v=ad2') center / contain no-repeat;
}

/* ---- K3-5 · About — "What we supply" category cards ------------------- */
body.hl-p-about .hl-sect h2 + ul {
  max-width: 940px !important;
  list-style: none;
  padding: 0;
  margin: 1.8em auto 2em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.hl-p-about .hl-sect h2 + ul > li {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-block: 0;
  padding: 24px 20px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bpc-body); /* 8.96:1 on the plate's worst pixel */
  border: 1px solid rgba(204, 4, 11, 0.16);
  background: var(--ad-plate), var(--bpc-background-deeper);
}
body.hl-p-about .hl-sect h2 + ul > li::before { /* foil top edge — silver into red, CSS-only */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ad-foil);
}
/* The ember moves per card for rhythm; it only ever sits on the bottom edge, where the
   plate is darkest, so the worst pixel (the top sheen) is unchanged: text red 4.60:1. */
body.hl-p-about .hl-sect h2 + ul > li:nth-child(3n+2) {
  background:
    var(--ad-sheen),
    radial-gradient(90% 70% at 0% 100%, rgba(204, 4, 11, 0.14), transparent 62%),
    var(--ad-brush), var(--ad-plate-base), var(--bpc-background-deeper);
}
body.hl-p-about .hl-sect h2 + ul > li:nth-child(3n+3) {
  background:
    var(--ad-sheen),
    radial-gradient(90% 70% at 50% 100%, rgba(204, 4, 11, 0.14), transparent 62%),
    var(--ad-brush), var(--ad-plate-base), var(--bpc-background-deeper);
}
body.hl-p-about .hl-sect h2 + ul > li > strong {
  display: block;
  font-family: var(--bpc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bpc-accent); /* text red on the plate's worst pixel = 4.60:1 */
  margin-bottom: 8px;
}

/* ---- K3-5 · Contact — the "what we can help with" wall --------------- */
/* Still bound to copy order (the list after the third h2): re-check against Amino's
   contact copy at G2. Items carry no mark: the glowing CSS node dot each one had was a
   banned tell (D3 MF-5 / L4-04), and per-item icons would show a wrong meaning the
   moment the list is reordered. The framed plate and the text carry each item. */
body.hl-p-contact .entry-content > h2:nth-of-type(3) + ul {
  max-width: 880px !important;
  list-style: none;
  padding: 0;
  margin: 1.6em auto 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
}
body.hl-p-contact .entry-content > h2:nth-of-type(3) + ul > li {
  margin-block: 0;
  padding: 13px 16px;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid rgba(204, 4, 11, 0.14);
  border-radius: 10px;
  background: var(--ad-plate), var(--bpc-card); /* body 8.96:1 at the worst pixel */
}

/* ---- K3-6 · footer — CSS texture for .csf-bigfoot -------------------------
   The R1 pairs are preserved: the brushed texture sits at 0.5 opacity over the deeper well
   (worst surface #0D0D0E; links #B9BDC6 10.33:1, red heads 5.30:1). No mark in the brand
   column: the hand-drawn CSS ring that sat there read as a seal, a banned tell
   (D3 MF-5 / L4-04). If the column ever needs a mark, it is the client logo from assets/brand/. */
.csf-bigfoot { position: relative; overflow: hidden; }
.csf-bigfoot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(200, 204, 212, 0.06), transparent 60%),
    var(--ad-brush);
  opacity: 0.5;
  pointer-events: none;
}
.csf-bigfoot__wrap { position: relative; z-index: 1; }
/* FDA strip is a raw wp_footer dump — inherit the footer black, no gray plate */
.csf-disclaimer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px clamp(16px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--bpc-background-deeper) !important;
  color: rgba(185, 189, 198, 0.72) !important; /* effective #878990 on deeper = 5.85:1 */
  opacity: 1 !important;
  box-sizing: border-box;
  border-top: 1px solid rgba(204, 4, 11, 0.10);
}

/* ---- K3-7 · mobile rhythm (390) ------------------------------------------- */
@media (max-width: 899px) {
  .hl-catrow { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.hl-p-about .hl-sect h2 + ul { grid-template-columns: 1fr; max-width: 560px !important; }
  body.hl-p-contact .entry-content > h2:nth-of-type(3) + ul { grid-template-columns: 1fr; max-width: 560px !important; }
}
@media (max-width: 559px) {
  .hl-catrow__name { left: 14px; bottom: 12px; }
}


/* ============================================================================
   G4 PDP FULL PASS (gate2-changes round, designer files-only — 2026-08-13; Amino retint D1)
   The Merit Labs PDP standard translated into the Amino Dust brand. Markup from
   inc/hl-pdp-full.php + the existing csf mu-plugins; the writer's copy is untouched.
   House laws: no-blocky (fluid, layered, symmetric; feathered pools +
   hairlines, plates only as document surfaces), red = accent never a text field,
   every solid red control takes white text, contained motifs.
   New AA pairs documented inline.

   GROUND CONTROL READINESS (PUBLIC-SYSTEM-CONTRACT §1): decorative accents in
   this block flow through --hl-acc, which follows GC's --csf-seasonal-accent
   whenever GC declares an active visual state on <body>. TEXT never renders
   in the seasonal accent and solid red CONTROLS stay brand-locked (the AA
   pairs are client law; GC owns contrast for its own emitted layers). GC's
   wp_head/wp_body_open/wp_footer output is never selected against, hidden,
   or repositioned by this block.
   ========================================================================== */

/* ---- G4-0 · the accent chain (brand-locked default, GC-responsive) ------- */
body.single-product {
  --hl-acc: var(--bpc-primary);
  --hl-acc-40: rgba(204, 4, 11, 0.40);
  --hl-acc-18: rgba(204, 4, 11, 0.18);
}
body.single-product.csf-holiday-visual-active,
body.single-product.csf-theme-custom-accent,
body.single-product[class*="csf-holiday-mode-"] {
  --hl-acc: var(--csf-seasonal-accent, var(--bpc-primary));
}
/* Alpha derivatives of the live accent where supported (the static red fallback
   above keeps older engines correct). */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  body.single-product {
    --hl-acc-40: color-mix(in srgb, var(--hl-acc) 40%, transparent);
    --hl-acc-18: color-mix(in srgb, var(--hl-acc) 18%, transparent);
  }
}

/* Belt-and-braces: the storefront-tweaks text pills are unhooked in PHP; if a
   stale mu-plugin copy ever re-renders them, they never show twice. */
.single-product .csf-strengths { display: none !important; }

/* ---- G4-1 · PDP hero band joins the catalog plate family (K3-0 above) ----- */
body.hl-pdp .hero-section[data-type] {
  margin-bottom: 0; /* the adjnav row closes the gap */
}

/* ---- G4-2 · prev/next product row (Merit catalog continuity) ------------- */
/* Rendered by blocksy:hero:after (fallback: above the product columns) —
   a slim full-bleed utility strip attached to the breadcrumb band. */
.hl-pdp-adjnav {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: var(--bpc-background-deeper);
  border-bottom: 1px solid rgba(204, 4, 11, 0.14);
  border-bottom-color: var(--hl-acc-18);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.hl-pdp-adjnav__wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding: 9px clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.hl-pdp-adjnav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 34ch;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(185, 189, 198, 0.78); /* effective #91959C on deeper = 6.75:1 */
  transition: color 0.15s ease;
}
.hl-pdp-adjnav__link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hover TEXT goes to the brand text red (5.56:1 on deeper); only the arrow linework
   follows the GC accent (non-text, the >= 3:1 bar is the accent-owner's floor). */
.hl-pdp-adjnav__link:hover { color: var(--bpc-accent); }
.hl-pdp-adjnav__link svg { flex: 0 0 auto; color: var(--hl-acc); }
.hl-pdp-adjnav__sep {
  width: 1px;
  height: 16px;
  background: rgba(204, 4, 11, 0.30);
  background-color: var(--hl-acc-40);
}

/* ---- G4-3 · summary hierarchy (Merit order, codex #11 closed) ------------ */
/* Meta now sits UNDER THE TITLE (re-hooked 40 -> 6): quiet identity line, no
   hairline above (that treatment belonged to its old bottom slot). */
.single-product .entry-summary .product_meta {
  border-top: 0;
  padding-top: 0;
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Full body token, not a dimmed alpha: Blocksy 2.1.57 woocommerce.min.css already dims every value/link
     child (`.product_meta>span>*{opacity:.7}`), and stacked on a 0.66 alpha that put the SKU value at
     3.00:1. Rendered: labels 10.45:1 (9.94 on the buy-box pool); SKU value + category link (x0.7)
     5.51:1 on bg, 5.39:1 on the pool. */
  color: var(--bpc-body);
}
.single-product .entry-summary .product_meta > span { margin-right: 16px; }
/* The chemical lede — above the fold, measured, the writer's own sentence. */
.single-product .entry-summary .hl-pdp-lede p,
.single-product .entry-summary .woocommerce-product-details__short-description p {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bpc-body); /* 10.45:1 */
}
.single-product .entry-summary .hl-pdp-lede,
.single-product .entry-summary .woocommerce-product-details__short-description {
  margin: 14px 0 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(204, 4, 11, 0.45);
  border-left-color: var(--hl-acc-40);
}

/* ---- G4-4 · the SIZE multiple-choice — icon-carried option tiles --------- */
/* Vial glyphs are inline SVG stroked in currentColor: rest = body gray
   (10.45:1), hover = text red (5.36:1), ACTIVE = white on the solid red fill
   (5.85:1 — the AA law; never near-black on red). Fill level states relative
   pack size within the family — a true visual fact. */
.hl-sizechoice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 4px;
}
.hl-sizechoice__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bpc-body);
  margin-right: 4px;
}
.hl-sizechoice__opts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hl-sizeopt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--bpc-border);
  border-radius: 999px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bpc-foreground); /* label #F5F6F8 on bg = 18.19:1 — AAA */
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.hl-sizeopt .hl-sizeopt__vial { color: var(--bpc-body); transition: color 0.2s ease; }
a.hl-sizeopt:hover {
  border-color: var(--hl-acc);         /* linework may follow the GC accent */
  color: var(--bpc-accent);            /* hover TEXT stays the brand text red — 5.36:1 */
  transform: translateY(-1px);
}
a.hl-sizeopt:hover .hl-sizeopt__vial { color: var(--hl-acc); } /* icon = non-text, 3.36:1 */
/* Active tile: SOLID BRAND RED stays brand-locked (AA pair 5.85:1) —
   deliberately NOT the seasonal accent: GC accents are decorative here. */
.hl-sizeopt.is-active {
  background: var(--bpc-primary);
  border-color: var(--bpc-primary);
  color: var(--bpc-on-primary);
}
.hl-sizeopt.is-active .hl-sizeopt__vial { color: var(--bpc-on-primary); }
@media (prefers-reduced-motion: reduce) {
  .hl-sizeopt, a.hl-sizeopt:hover { transform: none; transition: none; }
}

/* ---- G4-5 · COA — the document panel (framed) ------ */
/* Dormant capability: inc/hl-pdp-tabs.php renders the COA panel ONLY when csf-coa is active
   and csf_coa_get_history() returns a current record for the product. Amino has none today,
   so nothing here renders until documents exist. Same markup as csf-coa.php; the K3 inline
   row grows into the Merit document-surface weight: CSS plate (the house document-plate
   exception to no-boxes), foil top edge, clipboard mark in a ring. Worst plate pixel
   #1C1D21: text-red CTA 4.60:1, body 8.96:1. */
.single-product .csf-coa-block {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
  border: 1px solid rgba(204, 4, 11, 0.16);
  border-top: 0;
  border-radius: 12px;
  padding: 22px 20px 18px;
  margin-top: 22px;
  background: var(--ad-plate), var(--bpc-background-deeper);
}
.single-product .csf-coa-block::after { /* foil top edge — silver into red, CSS-only */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ad-foil);
}
/* The K3 15px inline clipboard grows into the panel mark. */
.single-product .csf-coa-block::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  grid-row: 1 / span 2;
  border: 1px solid rgba(204, 4, 11, 0.45);
  border-radius: 50%;
  background: url('assets/icons/lab-clipboard.svg?v=ad2') center / 22px no-repeat;
  vertical-align: initial;
}
.single-product .csf-coa-block .csf-coa-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bpc-accent); /* 4.60:1 on the plate's worst pixel */
  align-self: center;
}
.single-product .csf-coa-block .csf-coa-label {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bpc-body); /* 8.96:1 */
}
.single-product .csf-coa-block a.csf-coa-cta:hover { color: var(--bpc-foreground); } /* 15.6:1 */

/* ---- G4-6 · trust row — icon-carried operational labels ------------------ */
/* One default label rendered by inc/hl-pdp-full.php (Research Use Only, non-removable); --ship /
   --track are opt-in via the hl_pdp_trust_items filter once shipping facts are confirmed.
   Licensed chemistry/commerce line icons. Labels effective #93969D on bg = 6.63:1. */
.single-product .entry-summary .hl-pdp-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(204, 4, 11, 0.18);
  border-top-color: var(--hl-acc-18);
}
.single-product .hl-pdp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(185, 189, 198, 0.78);
}
.single-product .hl-pdp-trust__item::before {
  content: '';
  width: 17px;
  height: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.95;
}
/* atom mark here — the flask already carries the RUO line above (one icon, one job) */
.single-product .hl-pdp-trust__item--ruo::before   { background-image: url('assets/icons/lab-atom.svg?v=ad2'); }
.single-product .hl-pdp-trust__item--ship::before  { background-image: url('assets/icons/shop-09.svg?v=ad2'); }
.single-product .hl-pdp-trust__item--track::before { background-image: url('assets/icons/shop-14.svg?v=ad2'); }

/* ---- G4-7 · buried Woo tabs retired — Merit sub-tabs live under the photo */
.single-product .woocommerce-tabs {
  display: none !important;
}

/* Fleet KEEP: Description / RUO (+ COA only when a document is on file) under the product photo.
   flex: 1 1 0 splits the strip evenly for 2 or 3 tabs. The tabs are type="button", so the global
   submit-button rule above does not reach them; the state colours keep !important as a guard against
   plugin button rules. */
.woocommerce-product-gallery .hl-pdp-subtabs {
  width: 100%;
  margin-top: 16px;
}
.hl-pdp-subtabs__nav {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.hl-pdp-subtabs__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--bpc-border);
  border-radius: 10px;
  background: var(--bpc-card);
  color: var(--bpc-body) !important; /* 9.85:1 on card */
  font-family: var(--bpc-font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.hl-pdp-subtabs__btn::before {
  content: '';
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.hl-pdp-subtabs__btn--desc::before { background-image: url('assets/icons/lab-research.svg?v=ad2'); }
.hl-pdp-subtabs__btn--coa::before { background-image: url('assets/icons/lab-test-tube.svg?v=ad2'); }
.hl-pdp-subtabs__btn--ruo::before { background-image: url('assets/icons/lab-flask.svg?v=ad2'); }
.hl-pdp-subtabs__btn:hover {
  border-color: rgba(204, 4, 11, 0.45);
  color: var(--bpc-accent) !important; /* 5.05:1 on card */
}
.hl-pdp-subtabs__btn[aria-selected="true"] {
  background: var(--bpc-primary);
  border-color: var(--bpc-primary);
  color: var(--bpc-on-primary) !important; /* 5.85:1 */
}
/* The red line icon goes white with the label on the red fill. */
.hl-pdp-subtabs__btn[aria-selected="true"]::before { filter: brightness(0) invert(1); }
.hl-pdp-subtabs__panel {
  background: var(--bpc-card);
  border: 1px solid var(--bpc-border);
  border-radius: 12px;
  padding: 18px 16px;
  color: var(--bpc-body); /* 9.85:1; policy links in the RUO panel are the text red, 5.05:1 */
  font-size: 14px;
  line-height: 1.75;
}
.hl-pdp-subtabs__panel[hidden] { display: none; }
.hl-pdp-subtabs__panel .csf-coa-block { margin-top: 0; }
@media (max-width: 720px) {
  .woocommerce-product-gallery .hl-pdp-subtabs {
    margin-bottom: 96px;
  }
  .hl-pdp-subtabs__btn { font-size: 10px; padding: 10px 4px; letter-spacing: 0.08em; }
  .hl-pdp-subtabs__btn::before { width: 15px; height: 15px; }
}

/* Catalog quick view */
ul.products .ct-media-container,
ul.products figure,
li.product .ct-media-container {
  position: relative;
}
/* The pill sits over the product render, so its veil is computed against a WHITE image pixel:
   rgba(11,11,13,.94) over #FFF = #1A1A1C, text red 4.76:1 (the source build's .88 gave 4.00:1). */
.hl-qv-btn {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px 8px 34px;
  border: 1px solid rgba(204, 4, 11, 0.45);
  border-radius: 999px;
  background: rgba(11, 11, 13, 0.94);
  color: var(--bpc-accent) !important;
  font-family: var(--bpc-font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.hl-qv-btn::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  background: url('assets/icons/lab-monitor.svg?v=ad2') center / contain no-repeat;
}
.hl-qv-btn:hover {
  background: var(--bpc-primary);
  border-color: var(--bpc-primary);
  color: var(--bpc-on-primary) !important; /* 5.85:1 */
}
.hl-qv-btn:hover::before { filter: brightness(0) invert(1); }
/* The global ring (2px foreground, 2px offset) lands on the product photo around the pill and vanishes
   over light pixels. A 5px deep-black halo sits under it, so the ring always reads 18.8:1. */
.hl-qv-btn:focus-visible { box-shadow: 0 0 0 5px var(--bpc-background-deeper); }
/* color: the UA sheet gives <dialog> `color: CanvasText` (black: this theme sets no color-scheme), so
   any text without its own rule, such as Woo's "In stock" line, rendered black on the plate. */
.hl-qv {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bpc-body);
  max-width: min(920px, 94vw);
  width: 94vw;
  max-height: 90vh;
}
.hl-qv::backdrop { background: rgba(5, 5, 6, 0.82); }
.hl-qv__panel {
  position: relative;
  max-height: 90vh;
  overflow: auto;
  background: var(--ad-plate), var(--bpc-card); /* worst pixel #1C1D21 */
  border: 1px solid rgba(204, 4, 11, 0.22);
  border-radius: 16px;
  padding: 12px 22px 22px; /* top 12px: the Close row below supplies the rest of the head room */
}
.hl-qv__media img {
  display: block;
  width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
/* Close gets its own row at the top right of the panel, in normal flow, so it never covers content.
   As an absolute, transparent pill inside 28px of top padding it landed on the product photo at
   <= 430px and on the title wider (D1 round-6 contrast lens). The -10px right margin keeps its edge
   12px inside the panel, as before; 12px panel padding above + 44px + 8px below = a 64px head row.
   It stays the dialog's first child, so the script still focuses it on open, and Escape and the
   backdrop click are untouched. The ground is opaque card, so the label reads the same on any pixel:
   body #B9BDC6 on #131317 = 9.85:1 (hover foreground 17.14:1). The control-edge ring is the boundary:
   >= 3.29:1 against the plate, measured on rendered pixels at 320-1440px. The focus ring is the
   global one (2px foreground, 2px offset). */
.hl-qv__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 44px;
  min-height: 44px; /* 44x44 target */
  margin: 0 -10px 8px auto;
  padding: 0 16px;
  border: 1px solid var(--ad-control-edge);
  border-radius: 999px;
  background: var(--bpc-card);
  color: var(--bpc-body) !important;
  font-family: var(--bpc-font-sans); /* its own face: the global submit-button rule no longer reaches type="button" */
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.hl-qv__close:hover {
  border-color: var(--bpc-foreground);
  color: var(--bpc-foreground) !important;
}
.hl-qv__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: start;
}
.hl-qv__title {
  margin: 0 0 8px;
  font-family: var(--bpc-font-display);
  color: var(--bpc-foreground);
  font-size: 22px;
}
.hl-qv__price { color: var(--bpc-accent); font-weight: 600; margin-bottom: 12px; } /* 4.60:1 */
.hl-qv__excerpt { color: var(--bpc-body); font-size: 14px; line-height: 1.7; }
.hl-qv .csf-atc-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  color: var(--bpc-body);
  font-size: 13px;
  line-height: 1.45;
}
.hl-qv form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hl-qv .csf-atc-consent { flex: 1 0 100%; }
.hl-qv form.cart .quantity,
.hl-qv form.cart .single_add_to_cart_button { flex: 0 0 auto; }
.hl-qv__full {
  display: inline-block;
  margin-top: 14px;
  color: var(--bpc-accent); /* 4.60:1 */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hl-qv__status { color: var(--bpc-body); }
@media (max-width: 720px) {
  .hl-qv__layout { grid-template-columns: 1fr; }
}

/* ---- G4-8 · related products — the shop-grid band ------------------------ */
/* Full-bleed deeper well on the CSS plate; cards reuse the archive dark-luxury
   grammar (feathered renders, text-red price, ghost CTA). No category word on any
   card (layer disabled globally — PEPT-20 grammar). */
.hl-related {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 40px) clamp(30px, 4vw, 52px);
  background: var(--ad-plate), var(--bpc-background-deeper);
}
.hl-related::before { /* foil edge into the band — silver into red, CSS-only */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ad-foil);
}
.hl-related__head {
  max-width: 1160px;
  margin: 0 auto clamp(20px, 3vw, 30px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.hl-related__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.05em;
  color: var(--bpc-foreground); /* 15.6:1 on the band — AAA */
}
/* No dash under the title (D3 MF-5 / L4-04). */
.hl-related__more {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bpc-accent); /* 4.60:1 on the band */
  white-space: nowrap;
}
.hl-related__more:hover { color: var(--bpc-foreground); } /* 15.6:1 */
.hl-related ul.products,
.hl-related [data-products] {
  max-width: 1160px;
  margin-inline: auto;
}
/* Card grammar (mirrors the archive rules — the shortcode wrapper may not
   carry [data-products], so the essentials are restated scoped). */
.hl-related ul.products li.product,
.hl-related [data-products] .product {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center;
  align-items: center;
}
.hl-related ul.products li.product .ct-media-container img,
.hl-related ul.products li.product img {
  -webkit-mask-image: radial-gradient(78% 78% at 50% 48%, #000 48%, transparent 78%);
  mask-image: radial-gradient(78% 78% at 50% 48%, #000 48%, transparent 78%);
  transition: transform 0.5s ease;
}
.hl-related ul.products li.product:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .hl-related ul.products li.product:hover img { transform: none; }
}
.hl-related ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--bpc-foreground);
}
.hl-related ul.products li.product .price {
  color: var(--bpc-accent); /* 4.60:1 on the band */
  font-weight: 600;
}
.hl-related ul.products li.product .button {
  background: transparent !important;
  border: 1px solid rgba(204, 4, 11, 0.45) !important;
  color: var(--bpc-accent) !important;
}
.hl-related ul.products li.product .button:hover {
  background: var(--bpc-primary) !important;
  border-color: var(--bpc-primary) !important;
  color: var(--bpc-on-primary) !important; /* AA law — always white on red (5.85:1) */
}

/* ---- G4-9 · mobile rhythm (390) ------------------------------------------ */
@media (max-width: 899px) {
  .hl-pdp-adjnav__wrap { justify-content: space-between; }
  .hl-pdp-adjnav__link { max-width: 44vw; }
  .hl-related ul.products { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .hl-related ul.products li.product { width: 100% !important; margin: 0 !important; }
}
@media (max-width: 559px) {
  .hl-sizechoice { gap: 8px; }
  .hl-sizeopt { padding: 8px 13px 8px 10px; font-size: 13px; }
  .single-product .csf-coa-block { grid-template-columns: 38px 1fr; padding: 18px 16px 15px; }
  .single-product .csf-coa-block::before { width: 38px; height: 38px; background-size: 19px; }
  .single-product .entry-summary .hl-pdp-trust { gap: 8px 18px; }
}

/* ==================== G5 HEADER (K3 pass 2, 2026-08-13; Amino retint D1) ====================
   The stock Blocksy bar (styled text wordmark) is retired — hidden, NOT
   unhooked: the node stays in the DOM so Blocksy's own JS + panels
   (#offcanvas, #search-modal) keep working; inc/hl-header.php prints the
   owned bar at wp_body_open right after the csf-topstrip.
   Fluid / transparent / symmetric: no plate, no slab — a legibility gradient
   that fades to nothing, a red hairline, and the true-alpha HORIZONTAL Amino Dust lockup
   (assets/brand/amino-dust-lockup-horizontal-header.webp, 806x192, dark-ground only) dead-center
   inside the bar (contract Amendment A item 1; the AD mark alone at 720-1023px).
   Four tabs split 2 | lockup | 2, then search, cart, account.
   Only on the React home (body.hl-react-home) is the bar absolute over the hero; every other
   page, including today's front page, keeps it in flow. The lockup no longer overhangs the bar
   (Amendment A), so the interior margin-bottom below is plain spacing, not overhang room. */
#header.ct-header { display: none !important; } /* stock bar retired */

.hl-header {
  position: relative;
  z-index: 60;
  font-family: var(--bpc-font-sans);
}
body.hl-react-home .hl-header { position: absolute; left: 0; right: 0; } /* top:auto = directly under the topstrip, over the React hero */

.hl-header__bar {
  /* The lockup's rendered height, set per band (>= 1024 here; the 720-1023 mark band and < 720
     below). The bar is the lockup plus 6px above and below, so the lockup sits inside the bar and
     the red hairline never crosses the wordmark. */
  --hl-lockup-h: clamp(64px, 5.2vw, 76px);
  /* One rhythm for both tab navs and the right-hand group (.hl-header__end). 10px at 1024 (was 12.3),
     where the 269px-wide horizontal lockup and the WooCommerce right group (two tabs, divider, three
     actions: ~340px) meet; the same 15.4px as before at 1280. */
  --hl-tab-gap: clamp(10px, calc(2.1vw - 11.5px), 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left brand right";
  align-items: center;
  height: calc(var(--hl-lockup-h) + 12px);
  padding: 0 clamp(12px, 2vw, 32px);
  overflow: visible;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  border-bottom: 1px solid rgba(204, 4, 11, 0.22);
}
.hl-header { overflow: visible; }

/* nav tabs — licensed Envato line icons (assets/icons/, recoloured to the text red) + small-caps labels */
.hl-header__tabs {
  display: flex;
  align-items: center;
  gap: var(--hl-tab-gap);
  flex-wrap: nowrap;
  min-width: 0;
}
.hl-header__tabs--left { grid-area: left; justify-self: start; }
/* Right-hand group: the FAQ/Contact nav, the divider, then search, cart and account, on the same gap as
   the tabs, so the desktop row measures exactly as it did when the actions sat inside the nav. The
   actions live outside the nav because phones hide the navs but keep search and cart (MF-3). */
.hl-header__end {
  grid-area: right;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--hl-tab-gap);
  min-width: 0;
}
.hl-header__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  color: var(--bpc-body); /* >= 10.45:1 over the header gradient */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hl-header__tab:hover { color: var(--bpc-accent); } /* >= 5.36:1 */
/* Current page (D3 L3-09): inc/hl-header.php prints aria-current="page" on the tab for the page being
   viewed. The cue does not rely on colour: the label is underlined (text red, >= 5.36:1 against the
   header ground, above the 3:1 non-text bar) and brightens to foreground. It is text decoration on
   the label, not a drawn mark. The drawer carries the same cue further down. */
.hl-header__tab[aria-current="page"] { color: var(--bpc-foreground); }
.hl-header__tab[aria-current="page"] span {
  text-decoration: underline;
  text-decoration-color: var(--bpc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.hl-header__tab .hl-header__icon { opacity: 0.9; transition: opacity 0.2s ease; }
.hl-header__tab:hover .hl-header__icon { opacity: 1; }
.hl-header__icon { display: block; width: 20px; height: 20px; }

/* logo lives IN the grid (not position:absolute) so zoom cannot shove tabs through it.
   Sized by HEIGHT only (--hl-lockup-h); the width follows the file that the <picture> picked.
   Amendment A floors, measured rendered in Chromium from the file's own layout (alpha >= 128),
   not from CSS:
     >= 1024px  horizontal 806x192 at 64-76px tall (269-319px wide): mark (molecule + AD) 57-68px,
                the AD letters alone 48-57px, wordmark block (AMINO top to PEPTIDES base) 41-48px.
     720-1023px the AD mark alone (321x160) at 56-64px; the full lockup does not fit between the tabs.
     < 720px    horizontal at 44-48px tall: wordmark block 28-30px. */
.hl-header__brand {
  grid-area: brand;
  position: relative;
  z-index: 2;
  display: block;
  line-height: 0;
  justify-self: center;
}
.hl-header__brand picture { display: block; }
.hl-header__brand img {
  display: block;
  height: var(--hl-lockup-h);
  width: auto;
  max-width: none;
}
/* 720-1023px mark band. This query text must stay IDENTICAL to HL_HEADER_MARK_MEDIA in
   inc/hl-header.php (the <source> that swaps in the mark), so the file and its size can never
   disagree, even at a zoomed fractional width. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .hl-header__bar { --hl-lockup-h: clamp(56px, 6.25vw, 64px); }
}

/* buyer quick actions — red line icons; the cart count is a solid-red
   chip, so it takes white text (AA law: 5.85:1 at 10px bold) */
.hl-header__divider { width: 1px; height: 22px; margin-inline: 2px; background: rgba(204, 4, 11, 0.28); }
.hl-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hl-header__action:hover { background: rgba(204, 4, 11, 0.12); }
/* The search action and the mobile hamburger are Blocksy ct-toggles. main.min.css `[class*=ct-toggle]`
   (0,1,0, printed after this file) sizes them from --toggle-button-size (unset = auto: the search collapsed
   to its 20px glyph, the hamburger to a 20x16 tap target), pushes them with margin-inline: auto 0 (the
   hamburger drifted from the left edge to the lockup), and forces radius and background from
   --toggle-button-* with !important (the hover disc never painted). Drive that rule through its own
   variables so the owned sizes hold in either stylesheet order. */
.hl-header .ct-toggle {
  --toggle-button-size: 40px;
  --toggle-button-radius: 50%;
  --toggle-button-margin-start: 0;
  --toggle-button-margin-end: 0;
  --toggle-button-background: transparent;
}
.hl-header .ct-toggle:hover { --toggle-button-background: rgba(204, 4, 11, 0.12); }
.hl-header__count {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bpc-primary);
  color: var(--bpc-on-primary) !important; /* white on red — the AA law, 5.85:1 */
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* The hamburger is phone-only furniture. It is a ct-toggle that Blocksy binds to its own #offcanvas panel
   (the search action is bound to #search-modal and shows at every width). */
.hl-header__trigger { display: none !important; }

/* 720-899px: the right group (two tabs, divider, three 40px actions) is ~340px wide and overran its 1fr
   track at 720, touching the lockup. Tighten its rhythm rather than drop the labels: the <span> label is
   each tab's accessible name (the icon is alt=""), and an atom or flask alone does not say About or
   Contact. The decorative divider (aria-hidden) steps out; actions stay 34px, above the 24px
   target-size floor. Both tab groups and the right-hand group share --hl-tab-gap, so the bar stays
   symmetric. */
@media (min-width: 720px) and (max-width: 899px) {
  .hl-header__bar { --hl-tab-gap: 6px; }
  .hl-header__tab { gap: 5px; letter-spacing: 0.08em; }
  .hl-header__action { width: 34px; height: 34px; }
  .hl-header .hl-header__action.ct-toggle { --toggle-button-size: 34px; }
  .hl-header__divider { display: none; }
}

/* focus parity with the global ring: 2px foreground, 2px offset */
.hl-header a:focus-visible, .hl-header button:focus-visible {
  outline: 2px solid var(--bpc-foreground);
  outline-offset: 2px;
}

/* Drawer (Blocksy #offcanvas): the current page gets the header tabs' underline cue (L3-09). The
   drawer fallback prints aria-current="page", and so does WordPress core's nav walker on a real
   menu's current item (wp-includes/class-walker-nav-menu.php L265), so the cue holds once G2 assigns
   one. (1,3,0) outranks Blocksy's `.mobile-menu a` text-decoration variable. */
#offcanvas .mobile-menu .ct-menu-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--bpc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* interior: the header sits flush on the title band — no black void between */
body:not(.hl-react-home) .hl-header { margin-bottom: 0; }
body:not(.hl-react-home):not(:has(.hero-section[data-type])) .hl-header {
  margin-bottom: clamp(16px, 2vw, 28px);
}

/* 720px — not 999. Zoom-in on a 1440 desktop (150% = 960 CSS px) used to
   flip this to the hamburger layout and look like a glitch.
   719.98, not 719: browser zoom and OS scaling give fractional CSS widths (a 1079-device-px
   window at 150% = 719.33px). With 719 no band matched there, and the desktop defaults put the
   full horizontal lockup over the FAQ and Contact tabs. This edge must abut the min-width: 720px
   bands earlier in this block (the mark band and the 720-899 tightening), the same .98 convention
   as 1023.98. */
/* Phones (D3 MF-3): the tab navs, divider and account step out; the bar is hamburger | lockup | search
   (+ cart with WooCommerce). The drawer behind the hamburger lists the same four tabs, plus My account
   with WooCommerce, since the account action steps out here (inc/hl-header.php "Drawer menu", D3
   L3-01). Every phone control is a 44px target (D3 L4-06 floor). */
@media (max-width: 719.98px) {
  .hl-header__tabs, .hl-header__divider, .hl-header__acct { display: none !important; }
  .hl-header__bar {
    --hl-lockup-h: clamp(44px, 12.5vw, 48px); /* horizontal lockup; clears the 44px hamburger and search at 320 */
    /* Each side track floors at its own controls (max-content), so a control can move the lockup off
       centre but can never sit on it. With 1fr sides alone, a wider side overflowed onto the lockup. */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    height: 56px;
    padding: 0 14px;
    grid-template-areas: "left brand right";
  }
  /* WooCommerce adds the cart beside search, so the right side is 88px. The lockup height follows the
     width left between two 88px sides (192/806 = 0.2382 is the cut's aspect), which keeps it centred
     down to 360px. The 33px floor keeps the wordmark block >= 20px (Amendment A), so at 320px it sits
     about 11px left of centre instead of shrinking further. Rendered: 33px at 320, 37px at 360, 44px at
     390, 48px from 406 up; the wordmark block is ~0.64 of that (21 / 24 / 28 / 31px). Without
     WooCommerce the bar keeps 44-48px (the rule above). */
  .hl-header__bar:has(.hl-header__cart) { --hl-lockup-h: clamp(33px, calc((100vw - 204px) * 0.2382), 48px); }
  .hl-header__end { gap: 0; }
  .hl-header__end .hl-header__action { width: 44px; height: 44px; }
  .hl-header .ct-toggle { --toggle-button-size: 44px; } /* hamburger + search; see the ct-toggle note above */
  .hl-header__trigger {
    grid-area: left;
    justify-self: start;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bpc-accent) !important; /* hamburger glyph (currentColor) 5.36:1 */
    cursor: pointer;
  }
  .hl-header__trigger svg { fill: currentColor; }
  body:not(.hl-react-home) .hl-header { margin-bottom: 0; }
  body:not(.hl-react-home):not(:has(.hero-section[data-type])) .hl-header { margin-bottom: 12px; }
  /* keep the RUO strip one line so it doesn't shove the lockup down */
  .csf-topstrip {
    flex-direction: row;
    gap: 8px;
    padding: 5px 12px;
    font-size: 10px;
  }
  .csf-topstrip .csf-topstrip__right { display: none; }
}

/* September 29 file-only finish: interior wrapping and disabled Contact controls. */
.page:not(.hl-react-home) .entry-content > :is(p, ul, ol, h2, h3, h4),
.single-product .entry-summary .product_title,
.hl-qv__title { overflow-wrap: anywhere; }
.hl-sizeopt { min-height: 44px; }
body.hl-p-contact .fluentform :is(input, select, textarea) { font-size: 16px; }
body.hl-p-contact .fluentform :is(button, input[type="submit"]):disabled {
  background: var(--ad-graphite) !important;
  color: var(--bpc-body) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}
body.hl-p-contact .fluentform :is(input, select, textarea):disabled {
  color: var(--bpc-body) !important;
  -webkit-text-fill-color: var(--bpc-body);
  opacity: 1 !important;
}

/* Published policy navigation, above the unchanged research disclaimer. */
.amino-policy-footer { padding: 8px 20px 20px; background: #080808; }
.amino-policy-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; }
.amino-policy-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #e6e6e6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.amino-policy-footer a:hover { color: #ff4242; }
.amino-policy-footer a:focus-visible { outline: 2px solid #ff4242; outline-offset: 4px; }