/* ==========================================================================
   Reforged Compounds — components.css
   Patterns Blocksy and Elementor have no equivalent for.

   Rules for this file:
   - Every colour is a var(). No hex literals, ever.
   - Every component is prefixed .rfg- so nothing collides with theme or
     plugin classes.
   - Nothing here fires until the matching markup exists in a template.
     Adding a class does not change the live site.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Research Use Only bar
   Compliance surface. Must be legible, must not be dismissible, must not be
   styled as a promotion. Sits directly under the header on every page.
   -------------------------------------------------------------------------- */

.rfg-ruo-bar {
  background-color: var(--brand-surface-deep);
  color: var(--brand-text-inverse);
  font-family: var(--brand-font-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  line-height: 1.45;
}

.rfg-ruo-bar strong {
  color: var(--brand-accent);   /* legal on this surface — 6.55:1 */
}


/* --------------------------------------------------------------------------
   COA badge
   Data-driven, not typed into the product title. Renders from the ACF field.
   Two states so an absent COA is visibly absent rather than silently missing.
   -------------------------------------------------------------------------- */

.rfg-coa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--brand-font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--rfg-field-radius);
  border: var(--rfg-border-width) solid transparent;
}

.rfg-coa-badge--available {
  color: var(--brand-primary);
  background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.rfg-coa-badge--pending {
  color: var(--brand-text-muted);
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
}

.rfg-dark .rfg-coa-badge--available {
  color: var(--brand-accent);
  background-color: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-accent) 38%, transparent);
}


/* --------------------------------------------------------------------------
   Product meta row — SKU / lot / purity
   Replaces "(COA Attached)" in the product name with structured fields.
   -------------------------------------------------------------------------- */

.rfg-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--brand-font-body);
  font-size: 13px;
  color: var(--brand-text-muted);
  margin: 8px 0 0;
}

.rfg-product-meta dt {
  display: inline;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}

.rfg-product-meta dd {
  display: inline;
  margin: 0 0 0 4px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-text);
}

.rfg-dark .rfg-product-meta dd { color: var(--brand-text-inverse); }


/* --------------------------------------------------------------------------
   COA lot search
   The differentiator. Currently Reforged has COAs as PDF attachments with no
   discovery path at all. Markup lands with the COA system phase.
   -------------------------------------------------------------------------- */

.rfg-coa-search {
  display: flex;
  gap: 8px;
  max-width: 520px;
}

.rfg-coa-search input[type="search"],
.rfg-coa-search input[type="text"] {
  flex: 1 1 auto;
  height: var(--rfg-input-height);
  padding: 0 14px;
  font-family: var(--brand-font-body);
  font-size: var(--rfg-body-size);
  color: var(--brand-text);
  background-color: var(--brand-bg);
  border: var(--rfg-border-width) solid var(--brand-border);
  border-radius: var(--rfg-field-radius);
}

.rfg-coa-search input:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}

.rfg-dark .rfg-coa-search input:focus-visible {
  outline-color: var(--brand-accent);
}


/* --------------------------------------------------------------------------
   Trust strip
   Replaces the emoji row (🧪 🚚 📄 🇺🇸) on the current homepage. Emoji render
   differently on every platform and read as consumer, not laboratory.
   Icons are inline SVG in the template, sized and coloured from here.
   -------------------------------------------------------------------------- */

.rfg-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  padding: 18px 20px;
  background-color: var(--brand-surface);
  border-block: var(--rfg-border-width) solid var(--brand-border);
}

.rfg-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-accent);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
}

.rfg-trust-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-accent-current);
}

.rfg-dark .rfg-trust-strip {
  background-color: var(--brand-surface-deep);
  border-block-color: rgb(255 255 255 / 0.12);
}

.rfg-dark .rfg-trust-item { color: var(--brand-text-inverse); }


/* --------------------------------------------------------------------------
   Focus visibility
   Blocksy's default focus ring is low contrast on the navy chrome. This is an
   accessibility floor, not a style preference — do not remove it.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.rfg-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--brand-accent);
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BLOCKSY GAP FIXES - added 2026-08-17
   Two places where Blocksy does not consume the variable bridge.css sets,
   so the value has to be applied to the element instead. Both verified
   against the rendered cascade, not assumed.
   ========================================================================== */

/* Blocksy applies font-family: var(--theme-font-family) to
   `body, h1, h2, h3, h4, h5, h6, label, ...` in a single rule and never reads
   --theme-heading-font-family. Without this, headings inherit the body face
   and the display/heading slot distinction collapses. */
:root:root h1,
:root:root h2,
:root:root h3,
:root:root h4,
:root:root h5,
:root:root h6 {
	font-family: var(--brand-font-heading);
}

/* Blocksy sizes every field from var(--has-height, var(--theme-form-field-height, 40px)).
   Overriding the shared token would drag inputs off their 40px spec, so the
   textarea override is scoped to the element via Blocksy's own --has-height hook. */
:root:root textarea {
	--has-height: var(--rfg-textarea-height);
}

/* ==========================================================================
   ID-based dark hooks (added 2026-08-17)
   Elementor strips custom CSS classes (_css_classes) from data written via the
   REST API but honors CSS IDs (_element_id). So dark-chrome containers built
   through the API carry an id of the form rfg-dark-* and are styled here from
   the same tokens the .rfg-dark class uses. Colors stay entirely in tokens.
   ========================================================================== */
[id^="rfg-dark"]{ background: var(--brand-surface-alt); color: var(--brand-text-inverse); }
[id^="rfg-dark"] :is(h1,h2,h3,h4,h5,h6),
[id^="rfg-dark"] .elementor-heading-title{ color: var(--brand-text-inverse); }
[id^="rfg-dark"] .elementor-widget-text-editor,
[id^="rfg-dark"] .elementor-widget-text-editor p,
[id^="rfg-dark"] p, [id^="rfg-dark"] li{ color: var(--brand-text-inverse); }
[id^="rfg-dark"] .rfg-eyebrow,
[id^="rfg-dark"] .elementor-widget-heading.rfg-eyebrow .elementor-heading-title{ color: var(--brand-accent); }
/* primary CTA on navy = orange fill, navy label (AA 6.55:1); never white on orange */
[id^="rfg-dark"] .elementor-button, [id^="rfg-dark"] .rfg-cta .elementor-button{
  background: var(--brand-accent); color: var(--brand-surface-alt);
  border-radius: var(--rfg-field-radius); font-weight:600; min-height:var(--rfg-btn-min-height);
}
[id^="rfg-dark"] .elementor-button:hover{ background:var(--brand-primary-hover); }
[id^="rfg-dark"] .rfg-ghost .elementor-button{
  background:transparent; color:var(--brand-text-inverse);
  border:1px solid rgba(255,255,255,.4);
}

/* rfg dark nav + ruo bar (added 2026-08-17) */
[id^="rfg-dark"] .elementor-nav-menu a,
[id^="rfg-dark"] .elementor-item{ color: var(--brand-text-inverse); font-weight:500; }
[id^="rfg-dark"] .elementor-nav-menu a:hover,
[id^="rfg-dark"] .elementor-item:hover{ color: var(--brand-accent); }
[id^="rfg-dark"] a{ color: var(--brand-text-inverse); }
[id^="rfg-dark"] a:hover{ color: var(--brand-accent); }
#rfg-ruo{ background: var(--brand-surface); border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
#rfg-ruo p{ color: var(--brand-text-muted); font-size:13px; margin:0; text-align:center; }
#rfg-coa-card{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:26px; }

/* ==========================================================================
   rfg product cards + woo storefront (added 2026-08-17) — token-based
   ========================================================================== */
ul.products li.product{ background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:var(--rfg-field-radius); padding:14px 14px 18px; transition:box-shadow .15s ease, transform .15s ease; display:flex; flex-direction:column; }
ul.products li.product:hover{ box-shadow:0 10px 28px rgba(10,23,51,.10); transform:translateY(-2px); }
ul.products li.product img{ border-radius:var(--rfg-field-radius); background:var(--brand-surface); margin-bottom:12px; }
ul.products li.product .woocommerce-loop-product__title{ font-family:var(--brand-font-heading); color:var(--brand-heading); font-size:18px; font-weight:700; line-height:1.3; padding:0 0 4px; }
ul.products li.product .price{ color:var(--brand-accent-ink); font-family:var(--brand-font-body); font-weight:600; font-size:16px; }
ul.products li.product .price del{ color:var(--brand-text-muted); font-weight:400; }
ul.products li.product .woocommerce-loop-product__category, ul.products li.product .posted_in{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text-muted); }
ul.products li.product .button, ul.products li.product .add_to_cart_button{ margin-top:auto; background:var(--brand-primary); color:var(--brand-text-inverse); border-radius:var(--rfg-field-radius); font-weight:600; width:100%; text-align:center; border:none; }
ul.products li.product .button:hover, ul.products li.product .add_to_cart_button:hover{ background:var(--brand-primary-hover); color:var(--brand-text-inverse); }
ul.products li.product .out-of-stock, ul.products li.product .stock.out-of-stock{ color:var(--brand-error); font-size:12px; font-weight:600; }
.woocommerce-result-count{ color:var(--brand-text-muted); font-size:13px; }
.woocommerce-ordering select{ border:1px solid var(--brand-border); border-radius:var(--rfg-field-radius); height:var(--rfg-btn-min-height); color:var(--brand-text); }
.woocommerce nav.woocommerce-pagination a, .woocommerce nav.woocommerce-pagination span{ border-radius:var(--rfg-field-radius); border:1px solid var(--brand-border); color:var(--brand-primary); }
.woocommerce nav.woocommerce-pagination span.current{ background:var(--brand-primary); color:var(--brand-text-inverse); border-color:var(--brand-primary); }

/* rfg home sections (added 2026-08-17) */
#rfg-surface-split{ background:var(--brand-surface); border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
#rfg-vp{ background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:var(--rfg-field-radius); padding:22px; }
#rfg-vp:before{ content:""; display:block; width:32px; height:3px; background:var(--brand-accent-ink); border-radius:2px; margin-bottom:14px; }
#rfg-dark-cta .elementor-button, #rfg-dark-news .elementor-button{ background:var(--brand-accent); color:var(--brand-surface-alt); }
#rfg-dark-cta{ text-align:center; }
.elementor-accordion .elementor-tab-title{ font-family:var(--brand-font-heading); color:var(--brand-heading); border-bottom:1px solid var(--brand-border); }
.elementor-accordion .elementor-tab-title.elementor-active{ color:var(--brand-primary); }
.elementor-accordion .elementor-tab-content{ color:var(--brand-text-muted); }

/* coa-card self-contrast (added 2026-08-17) — navy panel used on light bands too */
#rfg-coa-card{ background:var(--brand-surface-deep); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:26px; }
#rfg-coa-card, #rfg-coa-card :is(h1,h2,h3,h4,h5,h6), #rfg-coa-card .elementor-heading-title, #rfg-coa-card p{ color:var(--brand-text-inverse); }
#rfg-coa-card p{ color:var(--brand-text); }
#rfg-coa-card .elementor-button{ background:var(--brand-accent); color:var(--brand-surface-alt); border:none; border-radius:var(--rfg-field-radius); font-weight:600; }
#rfg-coa-card .elementor-button:hover{ background:var(--brand-primary-hover); }

/* ==========================================================================
   DARK THEME (Triton-parity) — added 2026-08-17. Full dark body, navy/orange,
   Forge Orange accents + glow on the dark shell. Supersedes the white catalog body.
   ========================================================================== */
:root:root{ --theme-palette-color-7: var(--brand-surface-alt); --theme-palette-color-8: var(--brand-surface-deep); }
body{ background-color: var(--brand-surface-alt); }
body, .entry-content, .ct-container, p, li, td, th, dd, dt{ color:var(--brand-text); }
h1,h2,h3,h4,h5,h6, .elementor-heading-title{ color: var(--brand-text-inverse); }
main a:not(.button):not(.elementor-button):not(.wp-element-button):not(.wc-block-components-button):not(.rfg-btn):not(.added_to_cart){ color: var(--brand-accent); }
/* catalog + content sit on navy now; light bands become deep-navy */
#rfg-surface-split{ background: var(--brand-surface-deep); border-color: rgba(255,255,255,.08); }
#rfg-surface-split p, #rfg-surface-split li{ color:var(--brand-text); }
/* product cards: dark, light photo area, glowing accent on hover */
ul.products li.product{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); }
ul.products li.product:hover{ box-shadow:0 10px 34px rgba(0,0,0,.55); border-color: var(--brand-accent); transform:translateY(-3px); }
ul.products li.product img{ background:var(--brand-media-plate); }
ul.products li.product .woocommerce-loop-product__title{ color: var(--brand-text-inverse); }
ul.products li.product .price{ color: var(--brand-accent); }
/* value-prop cards dark + glow bar */
#rfg-vp{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); }
#rfg-vp p{ color:var(--brand-text); }
/* glowing buttons: orange fill (brand), orange glow */
.elementor-button, ul.products .button, .single_add_to_cart_button, .wc-block-components-button{ box-shadow:0 0 20px rgba(244,124,32,.40); transition:box-shadow .15s ease, transform .15s ease; }
.elementor-button:hover, ul.products .button:hover, .single_add_to_cart_button:hover{ box-shadow:0 0 28px rgba(244,124,32,.65); transform:translateY(-1px); }
ul.products li.product .button, ul.products li.product .add_to_cart_button{ background: var(--brand-accent); color: var(--brand-surface-alt); }
/* forms readable on dark */
input, select, textarea{ background: var(--brand-surface-alt); color: var(--brand-text); border-color: rgba(255,255,255,.15); }
.woocommerce-result-count, .woocommerce-ordering select{ color:var(--brand-text); }
/* accordion on dark */
.elementor-accordion .elementor-tab-title{ color: var(--brand-text-inverse); border-bottom-color: rgba(255,255,255,.12); }
.elementor-accordion .elementor-tab-content{ color:var(--brand-text); }
/* marquee ticker */
.rfg-marquee{ background: var(--brand-surface-deep); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; white-space:nowrap; }
.rfg-marquee__track{ display:inline-block; padding:12px 0; animation:rfgmarq 30s linear infinite; }
.rfg-marquee__track span{ color:var(--brand-text); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 40px; }
.rfg-marquee__track span b{ color: var(--brand-accent); font-weight:600; }
@keyframes rfgmarq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* glowing trust cards */
.rfg-tcard{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:26px 22px; box-shadow:0 0 0 1px rgba(27,123,232,.0); }
.rfg-tcard:after{ content:""; display:block; height:2px; margin-top:18px; background:linear-gradient(90deg, transparent, var(--brand-accent), transparent); box-shadow:0 0 12px var(--brand-accent); }

/* consistent CTA buttons (added 2026-08-17) */
.elementor-button{ background: var(--brand-accent); color: var(--brand-surface-alt); font-weight:600; border-radius:var(--rfg-field-radius); }
.elementor-button:hover{ background:var(--brand-primary-hover); color:var(--brand-surface-alt); }
/* full-bleed premium video hero (added 2026-08-17) */
#rfg-hero-video{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
#rfg-hero-video .elementor-background-video-container{ z-index:0; }
#rfg-hero-video .elementor-background-video-container video{ object-fit:cover; width:100%; height:100%; }
#rfg-hero-video:before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,12,28,.90) 0%, rgba(6,12,28,.72) 42%, rgba(6,12,28,.35) 70%, rgba(6,12,28,.20) 100%); }
#rfg-hero-video > .e-con{ position:relative; z-index:2; width:100%; }
#rfg-hero-video h6{ letter-spacing:.22em; color:var(--brand-accent); }
#rfg-hero-video h1{ font-size:54px; line-height:1.06; letter-spacing:-.5px; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.4); }
#rfg-hero-video p{ font-size:18px; color:var(--brand-text); max-width:44ch; text-shadow:0 1px 12px rgba(0,0,0,.5); }
@media(max-width:768px){ #rfg-hero-video h1{ font-size:34px; } #rfg-hero-video{ min-height:72vh; } }

/* rfg hero final align (centered column, left text) + section heads centered */
#rfg-hero-video{ align-items:center !important; justify-content:center !important; }
#rfg-hero-video:before{ background:linear-gradient(180deg, rgba(6,12,28,.62) 0%, rgba(6,12,28,.42) 45%, rgba(6,12,28,.70) 100%) !important; }
#rfg-hero-inner{ width:100%; max-width:1040px; text-align:left; align-items:flex-start !important; position:relative; z-index:2; }
#rfg-hero-inner h1{ max-width:18ch; margin:0; }
#rfg-hero-inner p{ margin:0; max-width:50ch; }
#rfg-sec-head{ text-align:center; align-items:center; margin-left:auto; margin-right:auto; }
#rfg-sec-head p{ max-width:60ch; margin-left:auto; margin-right:auto; }

/* dark archive title band (added 2026-08-17) */
.hero-section{ background: transparent !important; }
.archive .entry-header, .woocommerce-products-header{ padding-top:44px; padding-bottom:6px; }
.page-title, .woocommerce-products-header__title{ color: var(--brand-text-inverse) !important; }
.woocommerce-result-count{ color:var(--brand-text-muted) !important; }

/* dark WooCommerce UI (notices + form inputs, cart/checkout) added 2026-08-17 */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner{
  background: var(--brand-surface-deep) !important; color: var(--brand-text) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-top: 3px solid var(--brand-accent) !important; box-shadow:none !important; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button){ color: var(--brand-accent) !important; }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select,
.woocommerce .quantity input.qty, input.input-text, .woocommerce form .form-row input.input-text, .select2-selection{
  background: var(--brand-surface-deep) !important; color: var(--brand-text) !important;
  border: 1px solid rgba(255,255,255,.18) !important; }
.woocommerce input.input-text::placeholder, .woocommerce textarea::placeholder{ color:var(--brand-text-muted) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--brand-text) !important; }

/* hide redundant Blocksy page-title hero on coa library page-title (added 2026-08-18) */
.page-id-19 .hero-section, .page-id-19 .entry-header{ display:none !important; }

/* center product images fully (added 2026-08-18) */
ul.products li.product img.wp-post-image, .ct-media-container img.wp-post-image, .woocommerce-product-gallery__image img{ object-fit:cover !important; object-position:center center !important; }

/* product image frame ratio to match renders 4:5 (added 2026-08-18) */
ul.products li.product .ct-media-container{ aspect-ratio:4/5 !important; background:var(--brand-media-plate) !important; }

/* rfg kill image bottom strip (added 2026-08-18) */
ul.products li.product .ct-media-container{ background:transparent !important; }
ul.products li.product .ct-media-container img, ul.products li.product .ct-media-container img.wp-post-image{ width:100% !important; height:100% !important; margin:0 !important; object-fit:cover !important; display:block !important; }

/* ============================================================
   RFG corrections layer, consolidated 2026-09-10
   Replaces eight appended patch blocks that were fighting each
   other. Everything below is one coherent pass. Delete from this
   banner to the end of file to revert.
   ============================================================ */

/* --- 1. Contrast -------------------------------------------
   components.css pointed headings and page titles at
   --brand-text-inverse, which is the ink for LIGHT surfaces.
   On the dark shell that renders near-black on near-black. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.page-title,
.woocommerce-products-header__title,
.product_title,
.rfg-coa-card__body h3 { color: var(--brand-heading); }

.page-title, .woocommerce-products-header__title { color: var(--brand-heading) !important; }
.home .page-title, .home .entry-header { display: none; }

.rfg-coa-card__body h3 span,
.rfg-coa-card__lot,
.rfg-coa-card__lab { color: var(--brand-text); }

/* .rfg-btn label lost to main a:not(.button):not(.elementor-button):not(.wp-element-button):not(.wc-block-components-button):not(.rfg-btn):not(.added_to_cart),
   painting Forge Orange text on a Forge Orange fill. */
main a.rfg-btn:not(.button):not(.elementor-button) { color: var(--brand-ink-on-accent); }
main a.rfg-btn--ghost:not(.button):not(.elementor-button) { color: var(--brand-accent); }

/* --- 2. COA library ---------------------------------------- */
/* the net badge is gone at source in functions.php, so the nth-child(2)
   suppression that used to live here is no longer needed. It was fragile:
   with a null purity the net badge would have become child 1 and reappeared. */
.page-id-17 .page-title { display: none; }
#rfg-coa-sortsel { height: auto; min-height: 44px; line-height: 1.2; }
.rfg-coa-sort { display: flex; align-items: center; gap: 10px; }

/* --- 3. Home page rail -------------------------------------
   WordPress core (.is-layout-constrained > *) capped every band
   at 1040px, and an id rule capped the hero again. Bands run
   full width, the copy sits on one 1120px rail set by padding. */
.entry-content.is-layout-constrained > .rfg-home-sec,
.entry-content.is-layout-constrained > #rfg-ruo { max-width: none; }

.rfg-home-sec, #rfg-ruo {
  max-width: none;
  width: auto;
  box-sizing: border-box;
  padding-block: 88px;
  padding-inline: max(24px, calc(50% - 560px));
}
.rfg-home-sec > *, #rfg-ruo > * { max-width: none; margin-inline: 0; }
.rfg-band { background: var(--brand-surface-deep); }

.rfg-eyebrow {
  color: var(--brand-accent);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 700;
  margin: 0;
}
.rfg-home-sec h2 { margin: 6px 0 14px; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; }
.rfg-hero-sub, .rfg-sec-sub { color: var(--brand-text); font-size: 1.0625rem; margin: 0; }
.rfg-hero-cta, .rfg-sec-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Hero: everything left on the rail. */
#rfg-hero-inner {
  padding-block: 132px;
  text-align: left;
  background: var(--brand-surface-deep);
}
#rfg-hero-inner h1 { max-width: 16ch; margin: 12px 0 18px; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08; }
#rfg-hero-inner p.rfg-hero-sub { max-width: 46ch; }
#rfg-hero-inner .rfg-hero-cta { justify-content: flex-start; }

/* Centred bands. */
#rfg-sec-head, #rfg-cta-band { text-align: center; }
#rfg-sec-head > *, #rfg-cta-band > * { margin-inline: auto; }
#rfg-sec-head .rfg-sec-sub, #rfg-cta-band p { max-width: 56ch; }
#rfg-sec-head .rfg-sec-cta, #rfg-cta-band .rfg-sec-cta { justify-content: center; }
#rfg-cta-band { padding-block: 96px; }

/* Left bands. */
#rfg-vp, #rfg-surface-split, #rfg-faq { text-align: left; }

.rfg-vp-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.rfg-vp-list li { position: relative; padding-left: 26px; color: var(--brand-text); }
.rfg-vp-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--brand-accent); }

.rfg-trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 32px; }
.rfg-home-sec .rfg-trust-item {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: var(--brand-surface); border: 1px solid var(--brand-border);
  border-radius: 10px; padding: 22px;
}
.rfg-home-sec .rfg-trust-item h3 { width: 100%; font-size: 1rem; margin: 0 0 8px; color: var(--brand-heading); }
.rfg-home-sec .rfg-trust-item p { margin: 0; color: var(--brand-text); font-size: .9375rem; }

.rfg-faq-list { margin-top: 28px; display: grid; gap: 10px; }
.rfg-faq-item { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 10px; padding: 16px 20px; }
.rfg-faq-item summary { cursor: pointer; font-weight: 600; color: var(--brand-heading); list-style: none; }
.rfg-faq-item summary::-webkit-details-marker { display: none; }
.rfg-faq-item summary::after { content: "+"; float: right; color: var(--brand-accent); font-weight: 700; }
.rfg-faq-item[open] summary::after { content: "\2212"; }
.rfg-faq-item p { margin: 12px 0 0; color: var(--brand-text); }

#rfg-ruo { padding-block: 32px; }
#rfg-ruo p { max-width: none; text-align: center; margin: 0; }

/* --- 4. id-specificity width release -----------------------
   RFG id-specificity width release.
   An earlier rule in this file sets #rfg-hero-inner{max-width:1040px}.
   An id beats the class rules above, which re-boxed the hero and forced
   the headline to break mid-word. Release the cap at id specificity. */
#rfg-hero-inner, #rfg-sec-head, #rfg-vp, #rfg-surface-split,
#rfg-cta-band, #rfg-faq, #rfg-ruo { max-width: none; width: auto; }
#rfg-hero-inner h1 { word-break: normal; overflow-wrap: normal; hyphens: none; }

/* --- 5. id-specificity padding release ---------------------
   Same cause as 4. Earlier id rules set their own padding
   (#rfg-vp{padding:22px}, #rfg-ruo{padding:28px 24px}), which beat
   the class rail and pushed those bands flush to the viewport edge.
   Restate the rail at id specificity. */
#rfg-hero-inner, #rfg-sec-head, #rfg-vp, #rfg-surface-split,
#rfg-cta-band, #rfg-faq {
  padding-block: 88px;
  padding-inline: max(24px, calc(50% - 560px));
}
#rfg-hero-inner { padding-block: 132px; }
#rfg-cta-band { padding-block: 96px; }
#rfg-ruo { padding-block: 32px; padding-inline: max(24px, calc(50% - 560px)); }

/* --- 6. PNW-matched typography and hero rail ---------------
   Measured off pnwpeptideslabs.com at a 1920 viewport, not invented.
   Hero container 1392 wide starting at x=257, text column 547.
   Body sections 1120 wide starting at x=393.
   H1 Montserrat 44/700/-0.5px. H2 35/700. Eyebrow 16/700/3.52px.
   Body copy Inter 18/27.9.
   The hero carried its own near-black fill, which read as a black box
   sitting on the page ground. PNW's hero is a photograph, so until an
   image exists the hero shares the page ground with no box edge. */
#rfg-hero-inner {
  background: transparent;
  padding-block: 132px;
  padding-inline: max(24px, calc(50% - 696px));
  min-height: 620px;
  justify-content: center;
}
#rfg-hero-inner h1 {
  font-family: var(--brand-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.5px;
  max-width: 547px;
  margin: 14px 0 18px;
}
#rfg-hero-inner p.rfg-hero-sub { max-width: 547px; font-size: 18px; line-height: 27.9px; }
#rfg-hero-inner .rfg-eyebrow { font-size: 16px; letter-spacing: 3.52px; }

.rfg-eyebrow {
  font-family: var(--brand-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3.52px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.rfg-home-sec h2 {
  font-family: var(--brand-font-heading);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  margin: 14px 0 16px;
}
.rfg-home-sec p, .rfg-hero-sub, .rfg-sec-sub { font-size: 18px; line-height: 27.9px; }

/* --- 7. RFG footer ----------------------------------------
   Three Blocksy footer widget areas carrying custom HTML columns,
   on the same rail as the body sections. */
.ct-footer { background: var(--brand-surface-deep); }
.ct-footer [data-row="middle"] > .ct-container,
.ct-footer [data-row="bottom"] > .ct-container {
  max-width: none;
  padding-inline: max(24px, calc(50% - 560px));
}
.ct-footer [data-row="middle"] { padding-block: 56px; }
.rfg-foot-col h3 {
  font-family: var(--brand-font-heading);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 14px;
}
.rfg-foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rfg-foot-col a { color: var(--brand-text); text-decoration: none; font-size: .9375rem; }
.rfg-foot-col a:hover { color: var(--brand-accent); }
.rfg-foot-mark {
  font-family: var(--brand-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--brand-heading);
  margin: 0 0 10px;
}
.rfg-foot-line { color: var(--brand-text-muted); font-size: .9375rem; margin: 0; max-width: 34ch; line-height: 1.6; }
.ct-footer [data-row="bottom"] { border-top: 1px solid var(--brand-border); }

/* --- 8. RFG legal pages ------------------------------------
   Readable measure and rhythm for the five policy documents. */
.rfg-legal { max-width: 74ch; margin-left: 0; margin-right: auto; }
.rfg-legal h2 {
  font-family: var(--brand-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-heading);
  margin: 36px 0 10px;
}
.rfg-legal h3 { font-size: 1rem; font-weight: 700; color: var(--brand-heading); margin: 22px 0 6px; }
.rfg-legal p, .rfg-legal li { color: var(--brand-text); font-size: 1rem; line-height: 1.7; }
.rfg-legal ul { padding-left: 20px; margin: 10px 0; display: grid; gap: 6px; }
.rfg-legal a { color: var(--brand-accent); }
.rfg-legal-date { color: var(--brand-text-muted); font-size: .875rem; margin-bottom: 26px; }
.rfg-legal-index { list-style: none; padding: 0; display: grid; gap: 14px; }
.rfg-legal-index li { padding-left: 18px; position: relative; }
.rfg-legal-index li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--brand-accent); }
.rfg-legal-index strong { display: block; }
/* ================= end RFG corrections layer ================= */

/* --- 9. Header lockup, 2026-09-10 --------------------------
   Blocksy renders the logo image AND the text site title together, so the
   header read "REFORGED COMPOUNDS" twice, once as artwork and once as type.

   The proper fix is the header builder's own has_site_title att, but that
   lives inside the header-placements structure and this install has never
   had it written, so Blocksy is running defaults. Hand-building that array
   to flip one flag risks the live header for a cosmetic gain.

   So the title is hidden here and kept in the accessibility tree, because
   the logo already carries alt="Reforged Compounds" and a visible duplicate
   adds nothing. KNOWN DEBT: the Customizer will still say the title shows.
   Whoever next opens Header > Logo should toggle it off and delete this. */
.ct-header [data-id="logo"] .site-title-container {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ct-header [data-id="logo"] .site-logo-container { display: inline-flex; align-items: center; }

/* Header lockup sits a step larger than Blocksy's 50px default. The theme reads
   this variable itself, so its shrink-on-scroll behaviour still applies. */
.ct-header [data-id~="logo"] .site-logo-container { --logo-max-height: 60px; }

/* --- 10. Footer lockup and sign out, 2026-09-10 -------------- */

/* The footer carries the mark instead of the brand name set in type. */
img.rfg-foot-mark {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 0 14px;
}

/* Sign out is appended to the header menu for signed-in members only.
   See rfg_nav_sign_out() in functions.php. */
.ct-header .rfg-signout > .ct-menu-link { color: var(--brand-text-muted); }
.ct-header .rfg-signout > .ct-menu-link:hover { color: var(--brand-accent); }

/* --- 11. Home page background, 2026-09-11 ------------------- */

/* Trial. The forge plate sits behind the whole home page with a scrim over it
   so body copy keeps its contrast. Delete this block to go back to flat. */
body.home {
  background-color: #0F1113;
  background-image: url("/wp-content/uploads/2026/09/reforged-hero-forge.webp?v=4");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* --- 12. Home page background video, 2026-09-11 ------------- */

/* Sits over the still plate and fades in once it actually plays, so a failed
   load or a blocked autoplay leaves the still in place rather than a black box. */
.rfg-bg-video {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.rfg-bg-video.is-on { opacity: 1; }

/* --- 13. Floating vials above the anvil, 2026-09-11 --------- */

.rfg-vial-base,
.rfg-vial {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.rfg-vial-base { background-image: url("/wp-content/uploads/2026/09/reforged-vial-base.webp"); }

.rfg-vial { will-change: transform; animation: rfg-vial-float 5.4s ease-in-out infinite; }

.rfg-vial-a { background-image: url("/wp-content/uploads/2026/09/reforged-vial-a.webp"); animation-delay: 0s; }
.rfg-vial-b { background-image: url("/wp-content/uploads/2026/09/reforged-vial-b.webp"); animation-delay: 1.8s; }
.rfg-vial-c { background-image: url("/wp-content/uploads/2026/09/reforged-vial-c.webp"); animation-delay: 3.6s; }

@keyframes rfg-vial-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.42vw); }
}

@media (prefers-reduced-motion: reduce) {
  .rfg-vial { animation: none; }
}

/* 14. Hero heading, ember sweep
   The heading reads white. A warm band travels across the glyphs on a loop,
   clipped to the text so nothing bleeds into the layout. Two bands sit in the
   gradient so one is almost always on screen. Where background-clip: text is
   unsupported the heading stays flat white, and the sweep stops entirely for
   anyone who has asked for reduced motion. */

#rfg-hero-inner h1 { color: #fff; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #rfg-hero-inner h1 {
    background-image: linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 12%,
      #ffe6c4 18%,
      #ffab4d 23%,
      #ff6a13 26%,
      #ffc478 31%,
      #ffffff 39%,
      #ffffff 59%,
      #ffe0b0 65%,
      #ff8a2b 69%,
      #ffd9a0 74%,
      #ffffff 82%,
      #ffffff 100%
    );
    background-size: 320% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 14px rgba(255, 110, 30, 0.20));
    animation: rfg-ember-sweep 9s linear infinite;
  }
}

@keyframes rfg-ember-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #rfg-hero-inner h1 {
    animation: none;
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
  }
}

/* 17. Home bands below the hero, opaque
   The forge plate, the video and the three vial layers are position: fixed, so
   they sit behind the whole document rather than behind the hero alone. Any band
   below the hero that is not opaque lets them through. That is what produced the
   strips of forge image between dark blocks: two bands carried the page colour,
   two were transparent, and a 24px margin sat between every pair.

   Fix is uniform opacity from the hero down, gaps closed, and the wrapper bottom
   padding removed so nothing shows between the last band and the footer. Written
   at id specificity because components.css styles these sections by id. */

body.home .rfg-home-sec { margin-bottom: 0; }

body.home #rfg-sec-head,
body.home #rfg-vp,
body.home #rfg-surface-split,
body.home #rfg-faq { background-color: var(--brand-bg); }

body.home .ct-container-full { padding-bottom: 0; }

/* 18. Hero type spacing
   The heading ran at 1.14 leading, which put the descenders of line one into the
   caps of line two, and the sub-paragraph had no gap at all before the buttons. */

#rfg-hero-inner h1 {
  line-height: 1.22;
  margin-top: 20px;
  margin-bottom: 24px;
}

#rfg-hero-inner .rfg-hero-sub { margin-bottom: 24px; }

/* 19. Footer legal bar
   The research use statement moved out of the home page body and into the footer
   so it carries on every page rather than one. The address line renders only when
   WooCommerce actually holds a store address, so the footer never shows a blank. */

.rfg-foot-legal {
  max-width: 980px;
  margin: 0 auto 14px;
}

.rfg-foot-ruo {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brand-text-muted);
}

.rfg-foot-addr {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--brand-text-muted);
}

.rfg-foot-copy { text-align: center; }

/* 20. Contact form
   Built on the brand tokens rather than fresh hex, so a palette change carries.
   The honeypot is pushed off canvas rather than display:none, because some bots
   skip hidden inputs and the field has to look fillable to them. */

.rfg-form-wrap { max-width: 620px; margin: 28px 0 0; }

.rfg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rfg-field { margin: 0 0 16px; }

.rfg-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}

.rfg-opt { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .75; }

.rfg-field input[type="text"],
.rfg-field input[type="email"],
.rfg-field select,
.rfg-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--brand-surface);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-family: var(--brand-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.rfg-field textarea { min-height: 150px; resize: vertical; }

.rfg-field input:focus,
.rfg-field select:focus,
.rfg-field textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 0, .2);
}

.rfg-form-send {
  padding: 13px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-accent);
  color: var(--brand-ink-on-accent);
  font-family: var(--brand-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.rfg-form-send:hover { background: var(--brand-primary-hover); }

.rfg-form-fine {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--brand-text-muted);
}

.rfg-form-note {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
}

.rfg-form-ok {
  background: rgba(63, 191, 127, .12);
  border: 1px solid rgba(63, 191, 127, .45);
  color: var(--brand-success);
}

.rfg-form-bad {
  background: rgba(255, 107, 97, .12);
  border: 1px solid rgba(255, 107, 97, .45);
  color: var(--brand-error);
}

/* Blocksy pins form controls to a fixed 40px height, which is shorter than the
   padding plus line box here, so the select clipped its own text. Height is
   released and driven by min-height instead. The theme also strips the native
   select arrow with appearance: none without drawing one, so the chevron is
   painted back in as a background image. */

.rfg-field input[type="text"],
.rfg-field input[type="email"],
.rfg-field select,
.rfg-field textarea {
  height: auto;
  min-height: 48px;
}

.rfg-field textarea { min-height: 160px; }

.rfg-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239AA3AE' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
}


/* --- 14. Premium primary nav, 2026-09-11 -------------------- */

/* The nav was Inter 12/700 uppercase with no tracking, which reads blocky.
   Moved onto the heading face with open tracking and a hairline accent rule
   that draws in on hover and stays under the current item. Sign out keeps its
   muted treatment, so it is excluded from both the colour and the rule. */

#header-menu-1 > ul.menu > li > a.ct-menu-link {
  position: relative;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  padding-inline: 16px;
  transition: color .18s ease;
}
#header-menu-1 > ul.menu > li:not(.rfg-signout) > a.ct-menu-link {
  color: var(--brand-text);
}
#header-menu-1 > ul.menu > li:not(.rfg-signout) > a.ct-menu-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -7px;
  height: 1px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
#header-menu-1 > ul.menu > li:not(.rfg-signout) > a.ct-menu-link:hover {
  color: var(--brand-heading);
}
#header-menu-1 > ul.menu > li:not(.rfg-signout) > a.ct-menu-link:hover::after,
#header-menu-1 > ul.menu > li.current-menu-item:not(.rfg-signout) > a.ct-menu-link::after,
#header-menu-1 > ul.menu > li.current_page_parent:not(.rfg-signout) > a.ct-menu-link::after {
  transform: scaleX(1);
}
#header-menu-1 > ul.menu > li.current-menu-item:not(.rfg-signout) > a.ct-menu-link {
  color: var(--brand-accent);
}

@media (prefers-reduced-motion: reduce) {
  #header-menu-1 > ul.menu > li > a.ct-menu-link,
  #header-menu-1 > ul.menu > li:not(.rfg-signout) > a.ct-menu-link::after {
    transition: none;
  }
}


/* --- 15. Mobile hero: portrait video, vials and centred header, 2026-09-11 ---

   The desktop plate, clip and vial layers are all 16:9 and the vials are painted
   into the frame where the anvil sits. On a phone the viewport is taller than it
   is wide, so cover crops the sides and the anvil walks out from under the vials.

   Fix is a matched portrait set. The portrait clip is 720x1280 and the portrait
   vial layers are 1080x1920, both 9:16, and every layer uses the same cover plus
   centre-top geometry as the video. Same aspect plus same fit means the vials
   track the anvil at any phone size rather than drifting.

   Motion is unchanged: same keyframes, same 5.4s duration, same 0 / 1.8 / 3.6s
   stagger. Only the artwork swaps. */

.rfg-bg-video--m { display: none; }

@media (max-width: 899.98px) {

  .rfg-bg-video:not(.rfg-bg-video--m) { display: none; }
  .rfg-bg-video--m { display: block; }

  body.home {
    background-image: url("/wp-content/uploads/2026/09/reforged-hero-forge-mobile.webp");
  }

  .rfg-vial-base { background-image: url("/wp-content/uploads/2026/09/reforged-vial-m-base.webp"); }
  .rfg-vial-a { background-image: url("/wp-content/uploads/2026/09/reforged-vial-m-a.webp"); }
  .rfg-vial-b { background-image: url("/wp-content/uploads/2026/09/reforged-vial-m-b.webp"); }
  .rfg-vial-c { background-image: url("/wp-content/uploads/2026/09/reforged-vial-m-c.webp"); }
}

/* Mobile header, logo left
   The centred treatment built earlier is removed rather than overridden, so the
   header falls back to Blocksy's own layout with the lockup on the left and the
   menu trigger on the right. Reverted 2026-09-12 at Brandon's request. */


/* 24. Mobile hero, text above the composition
   Measured in a 386x840 frame against the live page, not guessed.

   The layers are position: fixed inset: 0, so they always fill the viewport and
   the anvil lands around 62 percent down regardless of background-position. The
   Shrinking the layer box was tried and reverted. A 9:16 composition squeezed
   into a short wide box crops to a sliver: at 390x239 the anvil lost its top and
   the vials left the frame entirely. The layers stay full viewport.

   What is left is the text. Top anchored, centred, and cut down from 414px tall
   to 324px, which lifts it off the anvil. It still crosses the vials, and no CSS
   fixes that: cover on a 9:16 image in a taller viewport scales by height, so the
   whole frame shows and background-position does nothing on the vertical axis.
   Clearing the vials needs a portrait plate with the composition lower in frame. All five share the same box and the same cover geometry,
   so the vials stay seated on the anvil exactly as before.

   The text block measured 414px starting at 238px, ending at 78 percent of the
   screen, straight through the vials. Container top padding, the sub size and a
   wrapping button row were the three costs. All three are cut here. */

@media (max-width: 899.98px) {

  body.home .ct-container-full { padding-top: 0; }

  /* Push the whole composition down instead of resizing it.
     Earlier I said CSS could not move it. That was wrong: I only tried
     background-position, which does nothing here because cover scales by height
     in a viewport taller than 9:16, and shrinking the box, which cropped the
     anvil to a sliver. Offsetting the fixed box itself keeps the layer full
     height and full width, so the composition renders exactly as before, just
     lower. All five layers take the same offset so the vials stay seated.
     The float animation is untouched because it animates transform, not top. */

  /* The poster plate on body.home is background-attachment: fixed with cover, so
     it behaves like the layers but is not shifted with them, which left a band of
     unshifted artwork above the offset composition. On mobile the body goes flat
     and the still rides on the video element instead, inside the same box. */

  body.home {
    background-image: none;
    background-color: var(--brand-surface-deep);
  }

  .rfg-bg-video--m,
  .rfg-vial-base,
  .rfg-vial {
    top: 26%;
    bottom: auto;
    height: 100svh;
  }

  #rfg-hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100svh;
    padding-top: 10px;
    padding-bottom: 0;
    text-align: center;
  }

  #rfg-hero-inner .rfg-eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: .16em;
    text-align: center !important;
    align-self: stretch;
    width: 100%;
  }

  #rfg-hero-inner h1 {
    margin: 10px 0;
    font-size: 31px;
    line-height: 1.15;
  }

  #rfg-hero-inner .rfg-hero-sub {
    max-width: 34ch !important;
    margin: 0 auto 16px;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  #rfg-hero-inner .rfg-hero-cta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  #rfg-hero-inner .rfg-hero-cta a {
    padding: 11px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* 21. Form field legibility
   Four rules in this file set form text to --brand-text-inverse, which is
   #15171A, against field backgrounds of #0F1113 and #15171A. Near black on
   near black. Two of them carried !important, so nothing downstream corrected
   it. One was commented "forms readable on dark" and did the opposite. Those
   four are now swapped to --brand-text at source rather than overridden here.

   What is left below is the part those rules never covered: the caret, the
   placeholder and the autofill repaint. Chrome paints its own background and
   text colour over an autofilled field, which is the only reason the login
   fields looked readable on desktop while every field was invisible on a
   phone. -webkit-text-fill-color is set alongside color because the !important
   colour rules above would otherwise win on iOS Safari. */

input, select, textarea {
  caret-color: var(--brand-text);
  -webkit-text-fill-color: var(--brand-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--brand-text-muted);
  -webkit-text-fill-color: var(--brand-text-muted);
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--brand-text);
  -webkit-box-shadow: 0 0 0 1000px var(--brand-surface) inset;
  box-shadow: 0 0 0 1000px var(--brand-surface) inset;
  caret-color: var(--brand-text);
  transition: background-color 9999s ease-in-out 0s;
}

/* 22. Password reveal
   WooCommerce ships this control and its own script already flips the field
   between password and text, adding .display-password to the button.

   First attempt lost the cascade. WooCommerce core styles the button at 14 by
   14 with top: 13px from its own stylesheet, which loads after this file and
   outweighs a bare button.show-password-input selector. My icon applied at a
   20px background-size inside a 14px box, so it rendered as a cropped smudge
   too small to tap on a phone. Measured, not guessed: computed width came back
   14px and top came back 13px while background-image was mine.

   Geometry is therefore forced. !important is warranted here because the rule
   being beaten lives in a third-party stylesheet that cannot be edited. The
   target is 36px so it clears the minimum tap size on mobile. */

.password-input { position: relative; display: block; }

.woocommerce .password-input input.input-text,
.woocommerce-page .password-input input.input-text,
.password-input input[type="password"],
.password-input input[type="text"] { padding-right: 54px !important; }

.woocommerce .password-input button.show-password-input,
.woocommerce-page .password-input button.show-password-input,
.password-input button.show-password-input {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23C9CFD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") !important;
  opacity: .85;
  cursor: pointer;
  z-index: 3;
}

.woocommerce .password-input button.show-password-input:hover,
.password-input button.show-password-input:hover,
.password-input button.show-password-input:focus-visible { opacity: 1; }

.woocommerce .password-input button.show-password-input.display-password,
.woocommerce-page .password-input button.show-password-input.display-password,
.password-input button.show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23FF5A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E") !important;
  opacity: 1;
}

/* 23. Leave Site, spacing
   The link is printed straight after the submit button inside the same form-row
   with no whitespace between them, so on a phone it read as part of the button.
   The row becomes a flex line with a real gap. margin-left is the fallback for
   anything without :has(), and it is zeroed inside the flex case so the gap is
   not applied twice. */

.rfg-leave-site {
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  font-size: 14px;
  color: var(--brand-text-muted);
  text-underline-offset: 3px;
}

.rfg-leave-site:hover,
.rfg-leave-site:focus-visible { color: var(--brand-text); }

.woocommerce-form-register .form-row:has(> .rfg-leave-site),
form.register .form-row:has(> .rfg-leave-site) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.woocommerce-form-register .form-row:has(> .rfg-leave-site) .rfg-leave-site,
form.register .form-row:has(> .rfg-leave-site) .rfg-leave-site { margin-left: 0; }


/* --- 21. Button ink, WooCommerce blocks, 2026-09-12 ---------

   Root cause, verified from the live cascade. The plain-link rule
   main a:not(.button):not(.elementor-button) painted every anchor Forge Orange.
   The WooCommerce Blocks cart and checkout buttons carry .wp-element-button and
   .wc-block-components-button but NOT .button, so they fell through the
   exclusion and rendered Forge Orange text on a Forge Orange fill. Proceed to
   Checkout read as a blank orange bar.

   Fixed at the source by widening that exclusion rather than patching each new
   button class as it appears. The positive rules below then guarantee the ink,
   so a future theme or plugin update cannot quietly take it away again. */

main a.wp-element-button,
main a.wc-block-components-button,
main button.wc-block-components-button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

/* The apply-coupon control sits on the same orange fill and inherited a
   70 percent white, which is under 3:1 on that background. */
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

/* Catalog card button. The label vanished mid-request because WooCommerce adds
   .loading and the theme animates opacity on the text. Hold the ink and keep
   the label legible through the ajax round trip. */
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}
ul.products li.product a.add_to_cart_button.loading {
  opacity: 1;
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}


/* --- 22. Insiders capture, footer and checkout, 2026-09-12 ---

   Sits above the research use statement in the footer, so it reads as part of
   the brand block rather than as an afterthought below the legal small print.
   Built on the tokens, so a palette change carries. */

.rfg-insiders {
  max-width: 560px;
  margin: 0 auto 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--brand-border, #33373D);
  text-align: center;
}

.rfg-insiders__eyebrow {
  margin: 0 0 8px;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.rfg-insiders__lede {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--brand-text-muted);
}

.rfg-insiders__form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.rfg-insiders__input {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 340px;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--brand-text);
  background: var(--brand-surface, #15171A);
  border: 1px solid var(--brand-border, #33373D);
  border-radius: 2px;
}

.rfg-insiders__input::placeholder { color: var(--brand-text-muted); opacity: 1; }

.rfg-insiders__input:focus {
  outline: none;
  border-color: var(--brand-accent);
}

.rfg-insiders__btn {
  height: 44px;
  padding: 0 26px;
  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: 2px;
  cursor: pointer;
}

/* Hover handled by the shared button system in section 24. A filter here
   would blank the sweep, see the note at the end of this file. */

.rfg-insiders__note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--brand-accent);
}

.rfg-insiders__note--bad { color: var(--brand-text); }

/* The checkbox Woo renders for the checkout opt-in carries no brand styling of
   its own. Keep the label readable against the dark checkout panel. */
.wc-block-checkout__order .wc-block-components-checkbox__label,
.wc-block-components-checkbox__label { color: var(--brand-text); }

@media (max-width: 560px) {
  .rfg-insiders__form { flex-direction: column; align-items: stretch; }
  .rfg-insiders__input { max-width: none; }
}

/* Blocksy sets its own input height, which left the field 4px short of the
   button. Matched at higher specificity so the pair sits on one line. */
.rfg-insiders .rfg-insiders__input {
  height: 44px;
  line-height: 42px;
  box-sizing: border-box;
}


/* --- 23. Cart and checkout surfaces, 2026-09-12 -------------

   Every WooCommerce Blocks container shipped transparent, so the whole cart and
   checkout sat as grey-on-grey against the #2A2D31 page: fields with no fill,
   only a 1px #33373D rule to separate them, and the coupon control reading as
   body text rather than something you can open.

   Fix is a near-black card behind each step and each summary panel, then a
   surface fill on every control so a field looks like a field. Panels use the
   deep surface, controls use the mid surface, so the two never collapse into
   one another. */

.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--brand-surface-deep);
  border: 1px solid var(--brand-border);
  border-radius: 3px;
  padding: 24px;
  margin-bottom: 16px;
}

.wc-block-cart-items,
.wp-block-woocommerce-cart-line-items-block {
  background: var(--brand-surface-deep);
  border: 1px solid var(--brand-border);
  border-radius: 3px;
  padding: 8px 20px;
}

/* Controls. A field has to read as a field before anyone will type in it. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-select select,
.wc-block-components-combobox-control input,
.wc-block-components-totals-coupon__input input {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  border-radius: 2px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-totals-coupon__input input:focus {
  border-color: var(--brand-accent);
  outline: none;
}

/* Shipping rate and payment options read as pickable cards rather than as bare
   radio rows on the same ground as everything else. */
.wc-block-components-radio-control__option {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 2px;
  margin-bottom: 8px;
  padding: 12px 14px 12px 40px;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--brand-accent);
}

/* Coupons. The entry already exists on both cart and checkout as a collapsed
   panel. It was invisible because it carried no affordance at all, so it is
   given the same surface and a clear accent label. */
.wc-block-components-totals-coupon {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 2px;
  padding: 4px 16px;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--brand-accent);
  -webkit-text-fill-color: var(--brand-accent);
  font-weight: 700;
  letter-spacing: .04em;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button svg {
  fill: var(--brand-accent);
}

.wc-block-components-totals-coupon__button {
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

/* Order summary rows and the cart line items sit on the deep panel, so the
   hairlines need lifting off it to stay visible. */
.wc-block-components-totals-item,
.wc-block-cart-items__row {
  border-color: var(--brand-border);
}

@media (max-width: 768px) {
  .wc-block-components-checkout-step,
  .wp-block-woocommerce-checkout-order-summary-block,
  .wp-block-woocommerce-cart-order-summary-block,
  .wc-block-cart-items,
  .wp-block-woocommerce-cart-line-items-block {
    padding: 18px 14px;
  }
}


/* --- 24. Premium button and pill system, 2026-09-12 (rev 2) ---

   Rev 1 was too timid. A 6 percent white wash over flat orange is not glass, it
   is a slightly lighter orange, and at card size it read as a plain rectangle.
   This rev commits: a real light source, a real bevel, a warm pool of light
   under the object and a specular dome on top.

   Anatomy, top to bottom:
     1. base fill: three stop gradient, #FF7A2E into #FF5A00 into #D64300, so the
        object has a lit top and a shadowed base rather than one flat colour
     2. specular dome: a radial highlight pinned to the upper left, which is what
        makes a surface read as curved glass rather than as paint
     3. bevel: 1px white top edge at 0.45 and 1px black bottom edge at 0.35
     4. ground: a tight dark shadow for contact plus a wide warm pool at 0.28
     5. sweep: a bright band on ::after that crosses on hover

   Type is the same language as the nav from section 14: Montserrat, uppercase,
   700, tracked. That is what ties a button to the bar above it.

   Ink is set explicitly on every rule. The blank-button bug of this morning came
   from inheriting colour, so nothing here leaves colour to inheritance. */

.rfg-btn,
.rfg-insiders__btn,
main a.wp-element-button,
main a.wc-block-components-button,
main button.wc-block-components-button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.added_to_cart,
.woocommerce a.added_to_cart,
.woocommerce a.button,
.woocommerce button.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 46px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;

  font-family: var(--brand-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);

  background-color: #FF5A00;
  background-image:
    radial-gradient(120% 160% at 18% -30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.10) 38%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #FF7A2E 0%, #FF5A00 52%, #D64300 100%);

  border: 1px solid #FF8038;
  border-bottom-color: #B83A00;
  border-radius: 3px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 10px 28px -8px rgba(255, 90, 0, 0.55);

  transition:
    transform .16s cubic-bezier(.4, 0, .2, 1),
    box-shadow .16s cubic-bezier(.4, 0, .2, 1),
    background-color .16s ease;
}

.rfg-btn::after,
.rfg-insiders__btn::after,
main a.wp-element-button::after,
.wc-block-components-button::after,
.wc-block-cart__submit-button::after,
.wc-block-components-checkout-place-order-button::after,
ul.products li.product a.button::after,
ul.products li.product a.add_to_cart_button::after,
ul.products li.product a.added_to_cart::after,
.woocommerce a.button::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -70%;
  width: 40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left .6s cubic-bezier(.25, .6, .3, 1);
}

.rfg-btn:hover::after,
.rfg-insiders__btn:hover::after,
main a.wp-element-button:hover::after,
.wc-block-components-button:hover::after,
.wc-block-cart__submit-button:hover::after,
.wc-block-components-checkout-place-order-button:hover::after,
ul.products li.product a.button:hover::after,
ul.products li.product a.add_to_cart_button:hover::after,
ul.products li.product a.added_to_cart:hover::after,
.woocommerce a.button:hover::after {
  left: 130%;
}

.rfg-btn:hover,
.rfg-insiders__btn:hover,
main a.wp-element-button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-1px);
  background-color: #FF6614;
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 16px 40px -10px rgba(255, 90, 0, 0.70);
}

.rfg-btn:active,
.rfg-insiders__btn:active,
main a.wp-element-button:active,
.wc-block-components-button:active,
ul.products li.product a.add_to_cart_button:active,
.woocommerce a.button:active {
  transform: translateY(1px);
  background-color: #E84E00;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.40),
    0 1px 1px rgba(0, 0, 0, 0.50);
}

.rfg-btn:focus-visible,
.rfg-insiders__btn:focus-visible,
main a.wp-element-button:focus-visible,
.wc-block-components-button:focus-visible,
ul.products li.product a.add_to_cart_button:focus-visible {
  outline: 2px solid #FFC08A;
  outline-offset: 2px;
}

/* Secondary. The hero runs two calls to action and they must not compete, so the
   quieter one is smoked glass over the dark ground instead of over accent. Same
   bevel logic, same type, different key. */
.rfg-btn--ghost,
.rfg-btn.rfg-btn--secondary {
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
  background-color: rgba(255, 255, 255, 0.04);
  background-image:
    radial-gradient(120% 160% at 18% -30%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.50);
}

.rfg-btn--ghost:hover,
.rfg-btn.rfg-btn--secondary:hover {
  border-color: rgba(255, 128, 56, 0.70);
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 5px rgba(0, 0, 0, 0.50),
    0 12px 30px -12px rgba(255, 90, 0, 0.40);
}

/* Pills. Anodised dark metal so a chip reads as related to a button without
   competing with one. Written at element specificity because the COA component
   prints its own inline style block after this stylesheet. */
button.rfg-chip,
.rfg-pill,
span.rfg-coa-badge2,
span.rfg-coa-badge {
  padding: 7px 16px;
  font-family: var(--brand-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
  background-color: rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.45);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button.rfg-chip:hover,
.rfg-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 128, 56, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.50);
}

/* The selected chip takes the button fill, so state is unmistakable and the two
   components share one language. */
button.rfg-chip.is-active {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
  background-color: #FF5A00;
  background-image:
    radial-gradient(120% 160% at 18% -30%, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(180deg, #FF7A2E 0%, #FF5A00 52%, #D64300 100%);
  border: 1px solid #FF8038;
  border-bottom-color: #B83A00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.50),
    0 8px 22px -8px rgba(255, 90, 0, 0.55);
}

/* Purity badge keeps the accent ink it had, on the metal body above. */
span.rfg-coa-badge2 {
  color: var(--brand-accent);
  -webkit-text-fill-color: var(--brand-accent);
}

/* Primary nav. The hairline accent rule from section 14 stays as the state
   marker. This adds a glass pill underneath so the item has a body when hovered,
   without turning the bar into a row of boxes at rest. */
#header-menu-1 > ul.menu > li > a.ct-menu-link {
  border-radius: 3px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* The pill is painted by ::before rather than on the anchor itself, for two
   reasons. The anchor is full header height, so a background on it ran floor to
   ceiling instead of reading as a pill. And background-image on the anchor is
   needed by the ember sweep below, which clips a gradient to the glyphs. */
#header-menu-1 > ul.menu > li > a.ct-menu-link::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  z-index: -1;
  opacity: 0;
  border-radius: 3px;
  /* Blocksy paints its own accent colour on this pseudo for the active item, so
     the colour has to be cleared or the pill renders as a solid orange slab
     with orange text on it. Verified 12 Sep. */
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.40);
  transition: opacity .18s ease;
  pointer-events: none;
}

#header-menu-1 > ul.menu > li > a.ct-menu-link:hover::before,
#header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link::before {
  opacity: 1;
}

/* Ember sweep on the selected tab. Same warm band as the hero heading in
   section 14, reusing its keyframes, clipped to the glyphs so nothing bleeds
   into the bar. Where background-clip: text is unsupported the item stays solid
   Forge Orange, which is the state it had before. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
    background-image: linear-gradient(
      100deg,
      #FF5A00 0%,
      #FF5A00 14%,
      #FFC07A 21%,
      #FFF1DE 26%,
      #FFAB4D 31%,
      #FF5A00 42%,
      #FF5A00 100%
    );
    background-size: 320% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rfg-ember-sweep 6s linear infinite;
  }
}

.ct-header [data-id="cart"] > a {
  border-radius: 3px;
  padding: 6px 10px;
  transition: background-image .18s ease, box-shadow .18s ease;
}

.ct-header [data-id="cart"] > a:hover {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .rfg-btn,
  .rfg-insiders__btn,
  main a.wp-element-button,
  .wc-block-components-button,
  ul.products li.product a.add_to_cart_button,
  .woocommerce a.button,
  button.rfg-chip,
  #header-menu-1 > ul.menu > li > a.ct-menu-link {
    transition: none;
  }

  .rfg-btn::after,
  .rfg-insiders__btn::after,
  main a.wp-element-button::after,
  .wc-block-components-button::after,
  ul.products li.product a.add_to_cart_button::after,
  .woocommerce a.button::after {
    display: none;
  }

  .rfg-btn:hover,
  .rfg-insiders__btn:hover,
  main a.wp-element-button:hover,
  .wc-block-components-button:hover,
  ul.products li.product a.add_to_cart_button:hover,
  button.rfg-chip:hover {
    transform: none;
  }
}

/* --- 25. Insiders band and COA chips, 2026-09-12 ------------

   The capture block moved from the copyright filter to blocksy:footer:before,
   which puts it above the quick links row rather than below it. That hook fires
   outside .ct-footer, so the band paints the footer ground itself, otherwise it
   would sit on the page colour and read as a stray strip. */

.rfg-insiders-band {
  background: var(--brand-surface-deep);
  border-top: 1px solid var(--brand-border);
  padding: 40px 24px 0;
}

.rfg-insiders-band .rfg-insiders {
  margin: 0 auto;
  padding-bottom: 36px;
  border-bottom: 0;
}

/* COA filter chips. The inactive chips were muted grey on a dark ground, which
   read as disabled rather than as available. Lifted to the heading white.

   The active chip keeps its dark ink on the accent fill. White on Forge Orange
   is about 2.9:1, which fails, so the two states are deliberately different
   rather than uniformly white. */

button.rfg-chip {
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
}

button.rfg-chip:hover {
  color: var(--brand-heading);
  -webkit-text-fill-color: var(--brand-heading);
  border-color: rgba(255, 122, 51, 0.55);
}

button.rfg-chip.is-active {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

#rfg-coa-count.rfg-coa-count {
  color: var(--brand-text);
}

/* Do not put filter: on the hover state of these buttons. A filter creates a
   new stacking context, which lifts the z-index -1 sweep above the label and
   blanks the fill. Verified 12 Sep. Use background-color and box-shadow for the
   hover lift instead. */

/* The ajax View cart link WooCommerce appends after an add carries
   .added_to_cart but not .button, so it fell through the plain-link exclusion
   exactly like the Blocks buttons did and rendered orange on orange. It is now
   excluded above and carries the shared button treatment. */
main a.added_to_cart,
ul.products li.product a.added_to_cart {
  color: var(--brand-ink-on-accent);
  -webkit-text-fill-color: var(--brand-ink-on-accent);
}

@media (prefers-reduced-motion: reduce) {
  #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
    animation: none;
    background-image: none;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
  #header-menu-1 > ul.menu > li > a.ct-menu-link::before { transition: none; }
}

/* Card actions. Add to cart and View COA share the row, so the certificate is
   one click from the catalog rather than one page deeper. */
.rfg-card-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.rfg-card-actions > a {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 14px;
  font-size: 11px;
  letter-spacing: 1.2px;
}


/* --- 26. Small button variant, 2026-09-12 -------------------

   The COA cards pair View COA with Verify at lab inside a 270px card. Section 24
   put 28px of padding, uppercase and 1.5px of tracking on every .rfg-btn, which
   pushed the pair past the card and clipped the second label.

   The --sm variant keeps the same glass and bevel and gives back the width:
   tighter padding, smaller type, less tracking, and flex 1 with min-width 0 so
   the two share the row evenly instead of overflowing it. */

.rfg-btn--sm {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.9px;
}

/* Same treatment for the catalog card pair, which sits in the same width. */
.rfg-card-actions > a,
.rfg-card-actions > .button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.9px;
}


/* --- 27. Catalog card action row, 2026-09-12 (rev 2) -------

   Rev 1 floated two sibling divs. That could never work: Blocksy's product card
   is a flex column, and floats are inert on a flex child. The View COA anchor is
   now appended to the add-to-cart markup itself, so both live inside Blocksy's
   own .ct-woo-card-actions and this just makes that container a row.

   Below 420px they stack, because two uppercase labels do not fit side by side
   on a phone. */

ul.products li.product .ct-woo-card-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  margin-top: 14px;
}

ul.products li.product .ct-woo-card-actions > a,
ul.products li.product .ct-woo-card-actions > .button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  min-height: 42px;
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.9px;
}

@media (max-width: 420px) {
  ul.products li.product .ct-woo-card-actions {
    flex-direction: column;
  }
}


/* --- 28. Ember roll, seamless, 2026-09-12 -------------------

   Why the old sweep stopped dead.

   rfg-ember-sweep animates background-position 100% to 0% and loops. For that
   to look continuous the visible window has to show the SAME pixels at both
   ends, otherwise the last frame and the first frame differ and the eye reads a
   snap. The old gradient was 320% wide, so the window is 31.25% of it. At
   position 100% the window sat on 68.75 to 100 percent, flat orange. At 0% it
   sat on 0 to 31.25 percent, which contained the highlight. Flat, then a jump
   with the highlight already mid-word.

   The fix is a periodic gradient. At 400% the window is exactly 25%, so the
   first 25% and the last 25% are held flat in the base colour and the highlight
   lives between 30 and 70 percent. Both endpoints now show identical flat
   colour, the loop closes on itself, and the band enters from one edge and
   leaves by the other with a quiet beat in between.

   Two variants, same motion: amber over white for headings, amber over Forge
   Orange for the selected nav item. */

@keyframes rfg-ember-roll {
  from { background-position: 100% 50%; }
  to   { background-position: 0% 50%; }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

  /* Amber over white. Page and archive headings. */
  .page-title,
  .woocommerce-products-header__title,
  #rfg-hero-inner h1 {
    background-image: linear-gradient(
      100deg,
      #FFFFFF 0%,
      #FFFFFF 34%,
      #FFE6C4 42%,
      #FFAB4D 47%,
      #FF6A13 50%,
      #FFAB4D 53%,
      #FFE6C4 58%,
      #FFFFFF 66%,
      #FFFFFF 100%
    );
    background-size: 400% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 14px rgba(255, 110, 30, 0.20));
    animation: rfg-ember-roll 7s linear infinite;
  }

  /* Amber over Forge Orange. The selected tab. */
  #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
    background-image: linear-gradient(
      100deg,
      #FF5A00 0%,
      #FF5A00 34%,
      #FFC07A 43%,
      #FFF1DE 50%,
      #FFC07A 57%,
      #FF5A00 66%,
      #FF5A00 100%
    );
    background-size: 400% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rfg-ember-roll 7s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-title,
  .woocommerce-products-header__title,
  #rfg-hero-inner h1 {
    animation: none;
    background-image: none;
    color: var(--brand-heading);
    -webkit-text-fill-color: var(--brand-heading);
    filter: none;
  }

  #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
    animation: none;
    background-image: none;
    color: var(--brand-accent);
    -webkit-text-fill-color: var(--brand-accent);
  }
}


/* --- 29. COA card button fit, 2026-09-12 -------------------

   Verify at lab was still clipping. Section 26 set the smaller type on
   .rfg-btn--sm, but the COA component prints its own inline style block after
   this stylesheet and holds those buttons at 13px, so the box was 114px while
   the label needed about 130px and overflow: hidden ate the end of it.

   Written as a.rfg-btn--sm, element plus class, which outranks the inline
   block's class-only rule. See trap 4 in the CSS traps doc. */

.rfg-coa-card a.rfg-btn--sm,
a.rfg-btn--sm {
  font-size: 10px;
  letter-spacing: 0.6px;
  padding: 0 10px;
  min-height: 40px;
  flex: 1 1 0;
  min-width: 0;
}


/* --- 30. COA card baseline, 2026-09-12 ---------------------

   The cards are all the same height, but the purity pill and the button row sat
   22px higher on any card whose lot line fitted on one line than on one where it
   wrapped to two. Across a four-up grid that reads as sloppy rather than as a
   set.

   The card and its body are already flex columns, so the fix is to let the body
   fill the card and push the badge row to the bottom with margin-top auto.
   Everything after it follows, so pills and buttons land on a common line on
   every card whatever the meta text does above them.

   Two-class selectors so they outrank the COA component's inline style block. */

.rfg-coa-grid .rfg-coa-card {
  height: 100%;
}

.rfg-coa-grid .rfg-coa-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.rfg-coa-grid .rfg-coa-card__badges {
  margin-top: auto;
}

.rfg-coa-grid .rfg-coa-card__cta {
  display: flex;
  gap: 8px;
  align-items: stretch;
}


/* --- 31. Card action row with three buttons, 2026-09-12 ----

   After an ajax add, WooCommerce injects a View cart link straight after the
   add-to-cart button. The row was sized for two, so a third child squeezed all
   three to about a third each and Add to cart clipped to "DD TO CAR".

   The row now wraps, and order puts View cart last on a full-width second line.
   Add to cart and View COA keep the top line at half each, which is the pair
   that matters before a click. */

ul.products li.product .ct-woo-card-actions {
  flex-wrap: wrap;
  row-gap: 8px;
}

ul.products li.product .ct-woo-card-actions > a,
ul.products li.product .ct-woo-card-actions > .button {
  flex: 1 1 calc(50% - 5px);
}

ul.products li.product .ct-woo-card-actions > a.add_to_cart_button,
ul.products li.product .ct-woo-card-actions > .button.add_to_cart_button {
  order: 1;
}

ul.products li.product .ct-woo-card-actions > a.rfg-card-coa {
  order: 2;
}

ul.products li.product .ct-woo-card-actions > a.added_to_cart {
  order: 3;
  flex: 1 1 100%;
}

@media (max-width: 420px) {
  ul.products li.product .ct-woo-card-actions > a,
  ul.products li.product .ct-woo-card-actions > .button {
    flex: 1 1 100%;
  }
}


/* --- 25. Research access gate, 2026-09-14 --------------------
   The gate is the site's front door now that Coming Soon is off.
   Stacked lockup above the forms, two columns on desktop, one on
   mobile. Blocksy's page-title hero is suppressed here because the
   lockup carries the brand.
   ------------------------------------------------------------ */

.page-id-24 .hero-section,
body:has(.rfg-gate) .hero-section {
  display: none;
}

.rfg-gate {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) 20px clamp(40px, 6vw, 72px);
  text-align: center;
}

.rfg-gate__lockup {
  margin: 0 auto clamp(24px, 4vw, 40px);
  line-height: 0;
}

.rfg-gate__lockup img {
  display: block;
  width: min(280px, 62vw);
  height: auto;
  margin: 0 auto;
}

.rfg-gate__form {
  text-align: left;
}

.rfg-gate__form .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.rfg-gate__form .u-columns.col2-set > .u-column1,
.rfg-gate__form .u-columns.col2-set > .u-column2 {
  width: auto;
  float: none;
  margin: 0;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 32px);
}

.rfg-gate__form h2 {
  margin-top: 0;
  font-family: var(--brand-font-heading);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--brand-heading);
}

.rfg-gate__ruo {
  margin: clamp(32px, 5vw, 48px) 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brand-text-muted);
}

@media (max-width: 860px) {
  .rfg-gate__form .u-columns.col2-set {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* Insiders capture sits in a flex row that flips to a column under
   600px. In column direction flex-basis maps to height, so the
   flex: 1 1 260px on the email field rendered it 260px tall on a
   phone. Neutralise the basis in the column state only. */

@media (max-width: 600px) {
  .rfg-insiders__form input[type="email"] {
    flex: 0 0 auto;
    height: 44px;
    width: 100%;
  }
}

/* --- 25. Mobile hardening pass, 2026-09-17 --------------------
   Everything in this block is scoped to phone widths. Nothing here changes
   desktop. Measured on the live pages at 320, 360, 390 and 430 before and
   after, in a real mobile render, not by eye.

   Five defects fixed, in order of how badly they hurt:

   1. The hero call to action ran off the right edge at every phone width.
      Section 24 set flex-wrap:nowrap on the row and white-space:nowrap on
      both anchors, with flex:0 1 auto and min-width:auto. That combination
      cannot shrink and cannot wrap, so the two buttons measured 465px inside
      342px of content width and the second label was clipped by the hero's
      own overflow:hidden. It never produced a page scrollbar, which is why
      it went unnoticed: the button was cut off, not pushed out.

      Fixed by stacking them. Full width, one label per line, 48px tall, at
      every width down to 320. Side by side was tried first at 12px type and
      it fits, but "Browse the catalog" then breaks to two lines while its
      neighbour stays on one, which reads as a squeeze on a brand selling on
      documentation quality. Stacked costs about 54px of hero height and the
      vials sit at roughly 78 percent of the viewport, so there is room.

      The row needs align-self:stretch and width:100% because an earlier rule
      sets #rfg-hero-inner{align-items:flex-start !important}, so children
      size to content and a plain width:100% on the buttons resolves against
      a 225px parent. Same trap the eyebrow hit on 12 Sep.

   2. The hamburger was an 18 by 18 pixel target. It is the only route to
      navigation on a phone. Now 44 by 44, which is the WCAG 2.5.5 floor,
      with the icon centred inside it rather than scaled up.

   3. The offcanvas panel sat at 351px of 390 with a 0.98 alpha ground, so a
      39px strip of the page showed beside it and the header logo was sliced
      by the panel edge. Now full width and fully opaque.

   4. The five registration attestation checkboxes were 13 to 16px. They are
      the gate on the entire catalog and they were the hardest thing on the
      site to tap. Now 22px with a 44px tap row.

   5. The footer research-use statement was 11px. It is compliance text on an
      underwriter-facing page. Now 12.5px with the same colour and leading.

   Not fixed, and deliberately left alone: the password reveal toggle measures
   36 by 36. Three selectors were tried and none moved it, and a rule walk over
   every loaded stylesheet found nothing matching it that sets a size, so the
   36px is coming from somewhere that is not a stylesheet rule. It is a
   secondary convenience control 8px under the target and it is not worth an
   !important in this file to win. Recorded rather than papered over. */

@media (max-width: 899.98px) {

  /* 25.1 Hero call to action */
  #rfg-hero-inner .rfg-hero-cta {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    gap: 10px;
  }

  #rfg-hero-inner .rfg-hero-cta a.rfg-btn {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    font-size: 13px;
    letter-spacing: 1.2px;
    white-space: nowrap;
  }

  /* 25.2 Header controls. The trigger box grows, the glyph does not. */
  .ct-header [data-id="menu-trigger"] .ct-header-trigger,
  button.ct-header-trigger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  button.ct-header-trigger .ct-icon,
  button.ct-header-trigger svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .ct-header .ct-cart-item > a,
  a.ct-cart-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 25.3 Offcanvas panel. Full bleed and opaque, so no strip of page shows
     beside it and the logo is not sliced by the panel edge. */
  #offcanvas.ct-panel .ct-panel-inner {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    background-color: var(--brand-surface-deep);
  }

  #offcanvas .menu-item > a,
  .ct-panel .menu-item > a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  #offcanvas .ct-toggle-close,
  .ct-panel .ct-toggle-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 25.4 Registration attestations and form controls.
     accent-color paints the checked state with Forge Orange without
     rebuilding the control, so the native tap behaviour is kept. */
  .woocommerce form .form-row input[type="checkbox"],
  .rfg-gate__form input[type="checkbox"],
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    accent-color: var(--brand-accent);
    flex: 0 0 auto;
  }

  .woocommerce form .form-row label.checkbox,
  .rfg-gate__form label.checkbox,
  label.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding-block: 4px;
    line-height: 1.45;
  }

  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .rfg-gate__form input.input-text,
  .rfg-gate__form select {
    min-height: 46px;
  }

  /* 25.5 Standalone text links that were 17 to 27px tall. Only the ones that
     sit on their own line are enlarged. Links inside running paragraphs are
     left alone, because padding on those overlaps the lines above and below. */
  .woocommerce-LostPassword a,
  a.rfg-leave-site,
  .rfg-foot-col li > a,
  .ct-footer .menu-item > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 25.6 Footer research-use statement. Compliance copy, so it reads. */
  .rfg-foot-ruo {
    font-size: 12.5px;
    line-height: 1.7;
  }

  /* 25.7 Long unbroken strings. Batch and lot codes, order numbers and email
     addresses are the only content here that can exceed a 320px line. Allow
     them to break rather than widen the page. */
  .rfg-foot-col a[href^="mailto:"],
  .rfg-coa-card,
  .woocommerce-order-overview,
  td.product-name {
    overflow-wrap: anywhere;
  }
}

/* --- 26. Mobile hero, header cart and card actions, 2026-09-17 ---
   Four defects, all measured on the live page at 390 before writing.

   1. The header cart overlapped the logo. The logo ends at x245 and the cart
      link starts at x210, so the "$65.00" label printed on top of the word
      COMPOUNDS. The cart glyph itself was 15px. On a 390 screen a 229px logo,
      a 44px trigger and a price label do not fit on one row, so the price
      label goes and the glyph grows.

   2. The hero secondary button was invisible. It computed to
      background-color:rgba(0,0,0,0) with Forge Orange text on a #33373D
      border, sitting over the forge photograph. Section 24's smoked-glass
      treatment was losing, and the plain-link rule was painting the label
      accent orange. Restated here at id specificity with the ink set
      explicitly, per trap 1 in the CSS traps note.

   3. View COA ran off the right edge of every product card. The Blocksy
      action row is a nowrap flex and both children carry flex:1 1 100%, so
      add-to-cart took 297px of a 327px card and View COA started at x346 and
      ended at x437, past the 390 viewport. Stacked, same as the hero pair.

   4. The forge composition sat behind the headline and the vials collided
      with the secondary button. The layers move from top:26% to top:36%,
      which is as far as they go before the anvil loses its base, and the hero
      block carries a scrim that is opaque behind the text and clear by the
      time it reaches the vials. */

@media (max-width: 899.98px) {

  /* 26.1 Header cart and logo */
  .ct-header .site-logo-container img,
  .ct-header [data-id="logo"] img {
    max-width: 190px;
    height: auto;
  }

  .ct-header .ct-cart-item .ct-cart-price,
  .ct-header .ct-cart-item .woocommerce-Price-amount,
  a.ct-cart-item .ct-cart-price,
  a.ct-cart-item .woocommerce-Price-amount {
    display: none;
  }

  a.ct-cart-item svg,
  .ct-header .ct-cart-item svg {
    width: 22px;
    height: 22px;
  }

  a.ct-cart-item {
    justify-content: flex-end;
    min-width: 44px;
  }

  /* 26.2 Hero secondary button. Smoked glass with a real fill so the label
     reads over the photograph, ink set explicitly so the plain-link rule
     cannot paint it accent on accent. No filter on hover, see trap 2. */
  #rfg-hero-inner .rfg-hero-cta a.rfg-btn--ghost {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background-color: rgba(12, 14, 16, 0.72);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(0, 0, 0, 0.25) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-bottom-color: rgba(0, 0, 0, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 10px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
  }

  #rfg-hero-inner .rfg-hero-cta a.rfg-btn--ghost:hover {
    background-color: rgba(20, 23, 26, 0.85);
    border-color: rgba(255, 128, 56, 0.75);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
  }

  /* 26.3 Product card action row. Stacked, so the second control cannot be
     pushed out of the card. */
  /* flex-wrap:wrap on a column container with a capped height pushes the
     overflowing child into a SECOND COLUMN, which is what put View COA at
     x344 outside a card ending at x351. nowrap plus height:auto is the fix. */
  ul.products li.product .ct-woo-card-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    height: auto;
    max-height: none;
    gap: 8px;
    width: 100%;
  }

  ul.products li.product .ct-woo-card-actions > a,
  ul.products li.product a.rfg-card-coa,
  ul.products li.product a.add_to_cart_button,
  ul.products li.product a.added_to_cart {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* 26.4 Composition offset and hero scrim */
  .rfg-bg-video--m,
  .rfg-vial-base,
  .rfg-vial {
    top: 36%;
  }

  #rfg-hero-inner {
    background-image: linear-gradient(
      180deg,
      rgba(15, 17, 19, 0.94) 0%,
      rgba(15, 17, 19, 0.90) 46%,
      rgba(15, 17, 19, 0.62) 66%,
      rgba(15, 17, 19, 0) 78%
    );
  }
}