/* =============================================================================
 * PYXAX design pass v2 — 2026-09-28
 *
 * Loaded ONLY when pyxax_design_v2() is true (hidden switch; see functions.php).
 * Every rule is scoped to body.pyx-dv2 so the file is inert anywhere else.
 *
 *   #3  DM Mono is for DATA only — lot / batch, purity, SKU, dates, CAS,
 *       formula, MW. Everything else (nav, buttons, labels, titles, notes,
 *       badges) uses the sans.
 *   #4  Cyan on exactly two things: the main action button and "verified"
 *       status. Everything else that was cyan goes white/grey. Borders on
 *       boxes-inside-boxes are removed — one level of depth.
 *   #5  Proof-led hero (markup in template-parts/hero-vials.php).
 *
 * MECHANISM — flip the defaults, then allow-list.
 *   The theme expresses mono as var(--font-mono) and accent as var(--cyan)
 *   in ~900 places. Redefining those two tokens on body turns the whole site
 *   to sans + white at once; the allow-lists below turn DATA back to mono and
 *   ACTION / VERIFIED back to cyan. Hard-coded cyan literals (rgba(0,212,255,…))
 *   don't follow the token and are overridden per component in section 5.
 * ========================================================================== */


/* 1. TOKENS ---------------------------------------------------------------- */
body.pyx-dv2 {
  --pyx-accent: #00D4FF;                       /* the real cyan — action + verified */
  --pyx-accent-dim: rgba(0, 212, 255, 0.12);
  --font-data: 'DM Mono', ui-monospace, monospace;

  --font-mono: var(--font-body);               /* UI text: sans */
  --cyan: #F0F4F8;                             /* former accent uses: white */
  --cyan-dim: rgba(240, 244, 248, 0.05);
  --cyan-mid: rgba(240, 244, 248, 0.2);
  --border: rgba(240, 244, 248, 0.09);
  --border-dim: rgba(240, 244, 248, 0.06);
}

/* Brand marks and product art keep their own colour — they're imagery, not UI. */
body.pyx-dv2 .nav-logo,
body.pyx-dv2 .footer-logo,
body.pyx-dv2 .pyx-hero2-art,
body.pyx-dv2 .product-vial,
body.pyx-dv2 .pyxax-single-media {
  --cyan: #00D4FF;
  --cyan-dim: rgba(0, 212, 255, 0.12);
  --cyan-mid: rgba(0, 212, 255, 0.35);
}


/* 2. DATA → MONO (allow-list) ---------------------------------------------- */
body.pyx-dv2 .mono,
body.pyx-dv2 .pyx-data,
body.pyx-dv2 .pyx-coa-v,
body.pyx-dv2 .coa-cell--batch,
body.pyx-dv2 .coa-cell--purity,
body.pyx-dv2 .coa-cell--date,
body.pyx-dv2 .pyxax-specs .spec-value,
body.pyx-dv2 .sku,
body.pyx-dv2 .product_meta .sku {
  font-family: var(--font-data);
  letter-spacing: 0;
  text-transform: none;
}

/* UI text that used to be mono loses the typewriter tracking with it. Small
   labels stay uppercase (they're labels), but with sans-appropriate spacing. */
body.pyx-dv2 .section-label,
body.pyx-dv2 .pyx-review-eyebrow,
body.pyx-dv2 .pyx-region-label,
body.pyx-dv2 .pyx-strength-label,
body.pyx-dv2 .pyx-qty-tiles-label,
body.pyx-dv2 .pyx-card-data-label,
body.pyx-dv2 .pyx-card-meta {
  letter-spacing: 0.08em;
  color: rgba(240, 244, 248, 0.6);
}
body.pyx-dv2 .nav-links a,
body.pyx-dv2 .nav-links > li > a {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 14px;
}


/* 3. CYAN → ACTION + VERIFIED (allow-list) --------------------------------- */
/* Main action buttons. !important is deliberate and confined to this list:
   these buttons are styled by Woo, the theme and three refinement files at
   different specificities, and the action colour must win on every one. */
body.pyx-dv2 .btn-primary,
body.pyx-dv2 .single_add_to_cart_button,
body.pyx-dv2 .pyx-sticky-buy-btn,
body.pyx-dv2 .pyx-vn-add,
body.pyx-dv2 .checkout-button,
body.pyx-dv2 .wc-proceed-to-checkout .button,
body.pyx-dv2 #place_order,
body.pyx-dv2 .pyx-drawer-actions .btn-primary {
  background: var(--pyx-accent) !important;
  border-color: var(--pyx-accent) !important;
  color: #080A0C !important;
}

/* Verified status. */
body.pyx-dv2 .pyx-is-verified,
body.pyx-dv2 .pyx-decision-verification.is-available .pyx-decision-head strong,
body.pyx-dv2 .pyx-card-verification.is-available .pyx-card-verification-value,
body.pyx-dv2 .coa-row[data-proven="1"] .coa-cell--purity,
body.pyx-dv2 .pyx-coa-flag.is-available,
body.pyx-dv2 .pyx-hero-proof-status {
  color: var(--pyx-accent);
}


/* 4. LINKS — white with an underline, since they no longer carry colour ---- */
body.pyx-dv2 main a:not([class]),
body.pyx-dv2 .woocommerce a:not(.button):not([class*="btn"]):not(.pyx-vn-add) {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(240, 244, 248, 0.35);
  text-underline-offset: 3px;
}
body.pyx-dv2 main a:not([class]):hover,
body.pyx-dv2 .woocommerce a:not(.button):not([class*="btn"]):not(.pyx-vn-add):hover {
  text-decoration-color: var(--white);
}


/* 5. HARD-CODED CYAN LITERALS — per component ------------------------------ */
/* Tinted panels that used rgba(0,212,255,…) directly: neutral surface instead. */
body.pyx-dv2 .pyx-freeship,
body.pyx-dv2 .pyx-volume-nudge,
body.pyx-dv2 .pyx-bogo-promo,
body.pyx-dv2 .pyx-shop-promo,
body.pyx-dv2 .pyx-checkout-wall,
body.pyx-dv2 .pyx-drawer-suggest,
body.pyx-dv2 .pyx-recon-suggest,
body.pyx-dv2 .pyxax-ruo-cart-banner {
  background: rgba(240, 244, 248, 0.03);
  border-color: rgba(240, 244, 248, 0.08);
  box-shadow: none;
}


/* 6. BORDERS — one level of depth ------------------------------------------ */
/* Boxes that sit INSIDE another box lose their outline; spacing separates them. */
body.pyx-dv2 .pyx-purchase-block .pyx-decision-verification,
body.pyx-dv2 .pyx-qty-tile:not([aria-pressed="true"]),
body.pyx-dv2 .pyx-shop-proof li,
body.pyx-dv2 .pyx-drawer-suggest,
body.pyx-dv2 .pyx-volume-nudge,
body.pyx-dv2 .pyx-freeship,
body.pyx-dv2 .coa-trust-cell,
body.pyx-dv2 .pyx-evidence-card {
  border-color: transparent;
}
body.pyx-dv2 .pyx-purchase-block .pyx-decision-verification {
  background: rgba(240, 244, 248, 0.03);
}
body.pyx-dv2 .pyx-qty-tile { background: rgba(240, 244, 248, 0.03); }
body.pyx-dv2 .pyx-qty-tile[aria-pressed="true"] {
  border-color: var(--white);
  background: rgba(240, 244, 248, 0.07);
  box-shadow: inset 0 0 0 1px var(--white);
}
body.pyx-dv2 .pyx-qty-tile-flag,
body.pyx-dv2 .pyx-free-badge {
  background: rgba(240, 244, 248, 0.12);
  color: var(--white);
}
body.pyx-dv2 .pyx-qty-tile-note { color: rgba(240, 244, 248, 0.72); }
body.pyx-dv2 .pyx-vn-head span { color: rgba(240, 244, 248, 0.78); }
body.pyx-dv2 .pyx-vn-track span,
body.pyx-dv2 .pyx-freeship-fill { background: var(--white); }


/* 7. HERO PROOF CARD (item #5) --------------------------------------------- */
body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l2 { color: var(--white); }
body.pyx-dv2 .pyx-hero-proof {
  margin-top: 28px;
  max-width: 440px;
  padding: 18px 20px;
  border-left: 2px solid var(--pyx-accent);
  background: rgba(240, 244, 248, 0.035);
  border-radius: 0 var(--pyx-radius-card) var(--pyx-radius-card) 0;
}
body.pyx-dv2 .pyx-hero-proof-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.pyx-dv2 .pyx-hero-proof-kicker { color: rgba(240, 244, 248, 0.6); }
body.pyx-dv2 .pyx-hero-proof-name {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--white);
}
body.pyx-dv2 .pyx-hero-proof-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0 0 14px;
}
body.pyx-dv2 .pyx-hero-proof-rows dt {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.55);
}
body.pyx-dv2 .pyx-hero-proof-rows dd { margin: 0; font-size: 14px; color: var(--white); }
body.pyx-dv2 .pyx-hero-proof-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
body.pyx-dv2 .pyx-hero-proof-links a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(240, 244, 248, 0.35);
  text-underline-offset: 3px;
}
@media (max-width: 768px) {
  body.pyx-dv2 .pyx-hero-proof { width: 100%; max-width: none; box-sizing: border-box; padding: 16px; }
  body.pyx-dv2 .pyx-hero-proof-name { font-size: 18px; }
  body.pyx-dv2 .pyx-hero-proof-rows { grid-template-columns: 1fr; gap: 8px; }
  body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l1,
  body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l2 {
    font-size: clamp(21px, 6.5cqi, 26px);
    line-height: 1;
    overflow-wrap: normal;
  }
  body.pyx-dv2 .pyx-hero-proof-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}


/* 8. STRAGGLERS found by the rendered-page audit (hard-coded cyan) ---------- */
body.pyx-dv2 .pyx-freeship-fill { box-shadow: none; }
body.pyx-dv2 .pyx-pill.active,
body.pyx-dv2 .pyx-pill[aria-pressed="true"] {
  box-shadow: none;
  border-color: var(--white);
  color: var(--white);
  background: rgba(240, 244, 248, 0.07);
}
body.pyx-dv2 .learn-flag-col.good { border-color: rgba(240, 244, 248, 0.18); }
body.pyx-dv2 .pyx-shop-proof li { background: transparent; padding-left: 0; padding-right: 10px; }
body.pyx-dv2 .pyx-shop-proof li::before { background: rgba(240, 244, 248, 0.5); box-shadow: none; }

/* Found once the audit also read pseudo-elements and gradients. */
body.pyx-dv2 .pyxax-single-badge,
body.pyx-dv2 #pyx-badge {                      /* UI badge, not imagery */
  color: var(--white);
  background: rgba(8, 10, 12, 0.72);
  border-color: rgba(240, 244, 248, 0.2);
}
body.pyx-dv2 .pyxax-single-media::before { background: radial-gradient(closest-side, rgba(240, 244, 248, 0.06), transparent); }
body.pyx-dv2 .pyx-hero2-grid-bg {
  background-image:
    linear-gradient(rgba(240, 244, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 244, 248, 0.035) 1px, transparent 1px);
}
body.pyx-dv2 .pyx-hero2-ambient { background: radial-gradient(60% 50% at 70% 45%, rgba(240, 244, 248, 0.04), transparent 70%); }
body.pyx-dv2 .pyx-hero-proof { border-left-color: rgba(240, 244, 248, 0.35); }
/* Breadcrumbs read as navigation without an underline. */
body.pyx-dv2 .pyxax-breadcrumb a,
body.pyx-dv2 .breadcrumb a,
body.pyx-dv2 nav[aria-label*="readcrumb"] a { text-decoration: none; color: rgba(240, 244, 248, 0.7); }
/* Hero: the proof headline is longer than the old one — scale it so the proof
   card reaches the first screen on a 900px-tall desktop. */
body.pyx-dv2 .pyx-hero2-title--proof { font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; }
/* Off-brand cyan variants (e.g. rgb(0,199,233)) hard-coded outside the token. */
body.pyx-dv2 .pyx-purchase-block { border-top-color: rgba(240, 244, 248, 0.14); }


/* 9. BORDER PASS — measured, not guessed ----------------------------------- */
/* Census before this section: 180 bordered boxes across the six pages, 61 of
   them inside another bordered box. Kept on purpose: form fields, the quantity
   stepper (people must see where to type), secondary/ghost buttons and the
   header CTA (affordance). Everything below becomes a surface or plain text. */

/* Cards become surfaces: one level of depth, no outline. */
body.pyx-dv2 .product-card,
body.pyx-dv2 .pyxax-loop-card,
body.pyx-dv2 .pyxax-linkcard,
body.pyx-dv2 .pyx-product-research-card,
body.pyx-dv2 .pyx-relation-grid > article,
body.pyx-dv2 .pyx-home-proof-entry,
body.pyx-dv2 .coa-partner-card,
body.pyx-dv2 .coa-trustbar,
body.pyx-dv2 .pyx-cart-item,
body.pyx-dv2 .pyx-cart-coupon-panel,
body.pyx-dv2 .woocommerce-form-login,
body.pyx-dv2 .woocommerce-form-register,
body.pyx-dv2 .pyx-checkout-wall,
body.pyx-dv2 .pyx-bogo-promo,
body.pyx-dv2 .footer-disclaimer,
body.pyx-dv2 .pyxax-single-media,
body.pyx-dv2 .pyx-purchase-block {
  border-color: transparent !important;
  background-color: rgba(240, 244, 248, 0.025);
}
body.pyx-dv2 .pyx-purchase-block { border-top-color: transparent !important; }
body.pyx-dv2 .pyx-checkout-wall { border-left: 2px solid rgba(240, 244, 248, 0.3) !important; }

/* Controls INSIDE a card lose their box and read as text actions. */
body.pyx-dv2 .pyx-card-save,
body.pyx-dv2 .pyx-card-action,
body.pyx-dv2 .pyxax-single-badge,
body.pyx-dv2 .pyxax-cart-thumb {
  border-color: transparent !important;
}
body.pyx-dv2 .pyx-card-save,
body.pyx-dv2 .pyx-card-action {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  color: rgba(240, 244, 248, 0.85);
}
body.pyx-dv2 .pyx-card-action:hover,
body.pyx-dv2 .pyx-card-save:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
body.pyx-dv2 .pyx-card-action.ajax_add_to_cart,
body.pyx-dv2 .pyx-card-action.add_to_cart_button {   /* Quick Add is an action: keep it a button */
  background: rgba(240, 244, 248, 0.08);
  padding-left: 13px;
  padding-right: 13px;
}

/* Filter chips, relation filters, pagination, header icon buttons: fill, no outline. */
body.pyx-dv2 .filter-btn,
body.pyx-dv2 .pyx-relation-filters button,
body.pyx-dv2 .pyx-page-btn,
body.pyx-dv2 .nav-search-btn,
body.pyx-dv2 .cart-nav-btn {
  border-color: transparent !important;
  background: rgba(240, 244, 248, 0.05);
}
body.pyx-dv2 .filter-btn.active,
body.pyx-dv2 .pyx-relation-filters button[aria-pressed="true"],
body.pyx-dv2 .pyx-relation-filters button.is-active {
  background: var(--white);
  color: #080A0C;
}

/* Desaturated cyan tints + dark teals (caught by the hue-based audit). */
body.pyx-dv2 button[name="apply_coupon"],
body.pyx-dv2 .pyx-cart-coupon-panel .button {
  background: transparent !important;
  border-color: rgba(240, 244, 248, 0.4) !important;
  color: var(--white) !important;
}
body.pyx-dv2 #coupon_code { border-color: rgba(240, 244, 248, 0.2); background: rgba(8, 10, 12, 0.6); }
/* Hero: two lines, sized from the COPY COLUMN's width (container query), not
   the viewport's — a viewport-sized nowrap headline measured 53-108px into the
   video frame at every desktop width. 1/14.5 of the column fits "PROOF
   BELONGS" in Syne; below ~30px it may wrap rather than shrink further. */
body.pyx-dv2 .pyx-hero2-copy { container-type: inline-size; }
body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l1,
body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l2 {
  display: block;
  font-size: clamp(30px, calc(100cqi / 14.5), 60px);
}
/* Data never breaks mid-code: lot numbers and purity stay on one line. */
body.pyx-dv2 .pyx-hero-proof-rows dd.pyx-data { white-space: nowrap; }
@media (max-width: 480px) {
  body.pyx-dv2 .pyx-hero-proof-rows dd.pyx-data { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
  body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l1,
  body.pyx-dv2 .pyx-hero2-title--proof .pyx-hero2-l2 {
    font-size: clamp(20px, 5.8cqi, 24px);
  }
}
body.pyx-dv2 .pyx-availability { border-color: rgba(240, 244, 248, 0.2); color: var(--white); background: transparent; }

/* Action buttons: restore the TOKEN on the element itself, so any rule that
   paints it with var(--cyan) — at whatever specificity, !important included —
   resolves to the real cyan. The cart's "Proceed to checkout" lost to such a
   rule even with the !important above; the sign-in wall's Log in / Register
   (the page's main actions) weren't on the list. Caught on the public
   contact sheet: the colour audit flags STRAY cyan, not MISSING cyan. */
body.pyx-dv2 .btn-primary,
body.pyx-dv2 .single_add_to_cart_button,
body.pyx-dv2 .pyx-sticky-buy-btn,
body.pyx-dv2 .pyx-vn-add,
body.pyx-dv2 .checkout-button,
body.pyx-dv2 .wc-proceed-to-checkout .button,
body.pyx-dv2 #place_order,
body.pyx-dv2 .woocommerce-form-login__submit,
body.pyx-dv2 .woocommerce-form-register__submit {
  --cyan: #00D4FF;
  --cyan-mid: rgba(0, 212, 255, 0.35);
  --cyan-dim: rgba(0, 212, 255, 0.12);
}
body.pyx-dv2 .woocommerce-form-login__submit,
body.pyx-dv2 .woocommerce-form-register__submit {
  background: var(--pyx-accent) !important;
  border-color: var(--pyx-accent) !important;
  color: #080A0C !important;
}