/*
Theme Name: PrimeLine Peptides — Light (Wolmart Child)
Theme URI: https://primelinepeptides.com
Description: PrimeLine Peptides light child. Merit-light Wolmart remainder, recolored to Prime Line tokens. Not a third theme.
Author: Client Site Factory
Template: wolmart
Version: 2.1.26
*/

/* ============================================================
   NEW BLACK TYPEFACE — self-hosted (assets/fonts/newblack/)
   Austin 2026-08-21: New Black replaces Sora + DM Sans on the WP remainder.
   ============================================================ */
@font-face { font-family: 'New Black'; font-weight: 200; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-UltraLight.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-UltraLight.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-Light.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-Light.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-Regular.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-Regular.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-Medium.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-Medium.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-SemiBold.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-SemiBold.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-Bold.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-Bold.woff') format('woff'); }
@font-face { font-family: 'New Black'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('assets/fonts/newblack/NewBlackTypeface-ExtraBold.woff2') format('woff2'), url('assets/fonts/newblack/NewBlackTypeface-ExtraBold.woff') format('woff'); }


/* ============================================================
   PRIMELINE PEPTIDES BRAND TOKENS
   ============================================================ */
:root,
html {
  --ml-field:        #F6FAFB;  /* page background            */
  --ml-field-warm:   #F6FAFB;  /* alternating band           */
  --ml-field-cool:   #EAF3F5;  /* hero gradients, pills      */
  --ml-chrome-bar:   #17243A;  /* compliance top bar         */
  --ml-chrome-foot:  #17243A;  /* footer chrome              */
  --ml-ink:          #17243A;  /* primary text               */
  --ml-ink-2:        #506070;  /* secondary text             */
  --ml-ink-muted:    #94A3B8;  /* metadata                   */
  --ml-ink-light:    #E8EEF4;  /* text on dark               */
  --ml-navy:         #22364B;  /* prices, dark accents       */
  --ml-navy-link:    #17243A;  /* nav hover                  */
  --ml-cyan:         #08A7B5;  /* primary action + accents   */
  --ml-cyan-hover:   #087F8F;
  --ml-line:         #D9E6EA;  /* borders on light           */
  --ml-studio:       #a3b8cb;  /* product photo studio bg    */

  /* Prism Affiliate (csf-affiliate) font seam — New Black, matching the remainder */

  /* Map onto the parent theme's variable system */
  --wolmart-site-bg-color:       var(--ml-field);
  --wolmart-content-bg-color:    var(--ml-field);
  --wolmart-primary-color:       var(--ml-cyan);
  --wolmart-primary-color-hover: var(--ml-cyan-hover);
  --wolmart-dark-color:          var(--ml-ink);
  --wolmart-light-color:         var(--ml-ink-2);
  --wolmart-body-color:          var(--ml-ink-2);
  --wolmart-title-color:         var(--ml-ink);
  --wolmart-border-color:        var(--ml-line);
}

/* Prism Affiliate (csf-affiliate 1.1.x) prints its typography tokens INLINE on
   <section class="csf-aff" style="--csf-aff-display:…">, so a :root token can't
   reach it. An !important author declaration outranks a non-important inline
   style, and the plugin's own CSS reads these vars — no selector overrides. */
section.csf-aff,
.csf-aff {
  --csf-aff-display: 'New Black', 'Sora', sans-serif !important;
  --csf-aff-sans:    'New Black', 'DM Sans', sans-serif !important;
}

/* ============================================================
   LIGHT SURFACE — base
   ============================================================ */
body,
.page-wrapper,
#main,
.main-content,
.site-content {
  background-color: var(--ml-field);
  color: var(--ml-ink-2);
  font-family: 'New Black', 'DM Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ml-ink);
  font-family: 'New Black', 'Sora', sans-serif;
}
a { color: var(--ml-ink-2); }
a:hover { color: var(--ml-cyan); }

/* ============================================================
   COMPLIANCE TOP BAR (rendered by header.php override)
   ============================================================ */
.ml-compliance-bar { background: var(--ml-chrome-bar); text-align: center; padding: 8px 20px; }
.ml-compliance-bar p { font-size: 10px; letter-spacing: .05em; color: var(--ml-ink-muted); margin: 0; }
@media (min-width: 768px) { .ml-compliance-bar p { font-size: 11px; } }

/* ============================================================
   HEADER — exact match to the locked React homepage
   (markup lives in header.php; ml-* namespace on purpose)
   ============================================================ */
.ml-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(195, 212, 226, 0.3);
}
/* Wolmart clones #header into a second sticky bar. Ours is already sticky.
   A clone is why clicks felt like they always returned to the same header. */
.sticky-header:not(.ml-header),
.sticky-content.fix-top:not(.ml-header),
.sticky-wrapper > .ml-header + .ml-header,
#header:not(.ml-header) {
  display: none !important;
}
.ml-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 216px;
  position: relative;
}
.ml-nav-left, .ml-nav-right { display: flex; align-items: center; gap: 36px; }
.ml-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ml-ink-2);
  transition: color .2s;
}
.ml-nav-link:hover { color: var(--ml-navy-link); }
.ml-nav-link.active { color: var(--ml-cyan); }
.ml-nav-link img { width: 40px; height: 40px; object-fit: contain; }
.ml-header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 216px;
  max-width: 480px;
}
.ml-header-logo img {
  display: block;
  height: 200px !important;
  width: auto !important;
  max-height: 200px !important;
  max-width: 480px !important;
  object-fit: contain;
}
.ml-mobile-nav { display: none; align-items: center; gap: 20px; margin-left: auto; }
.ml-mobile-nav a { opacity: .8; transition: opacity .2s; }
.ml-mobile-nav a:hover { opacity: 1; }
.ml-mobile-nav img { width: 36px; height: 36px; }
@media (max-width: 767px) {
  .ml-header-inner { height: 112px; }
  .ml-header-logo { height: 112px; max-width: 220px; }
  .ml-header-logo img {
    height: 96px !important;
    max-height: 96px !important;
    max-width: 220px !important;
  }
  .ml-nav-left, .ml-nav-right { display: none; }
  .ml-mobile-nav { display: flex; }
}
body.ml-has-vhero .plp-shop-header,
body.ml-has-vhero .page-header.plp-shop-header {
  display: none !important;
}

/* ============================================================
   TITLE BAR → the supplied page-header treatment
   ============================================================ */
.title-bar,
.page-title-bar {
  background: linear-gradient(to bottom, var(--ml-field-cool), #ffffff);
  padding: 48px 20px 64px;
  text-align: center;
  border: 0;
}
.title-bar .page-title,
.page-title-bar .page-title,
.title-bar h1 {
  font-family: 'New Black', 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--ml-ink);
}
.title-bar .breadcrumb,
.breadcrumb {
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ml-ink-2);
}
.breadcrumb a { color: var(--ml-ink-2); }
@media (min-width: 768px) {
  .title-bar, .page-title-bar { padding: 64px 20px 80px; }
  .title-bar .page-title, .title-bar h1 { font-size: 40px; }
}

/* ============================================================
   WOO SHOP GRID → supplied product-card design
   ============================================================ */
.shop-content,
.products.grid-type,
ul.products { background: transparent; }

.product-wrap .product,
.products .product,
.product.product-classic {
  background: #fff;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.product-wrap .product:hover,
.products .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
}
.product .product-media,
.product figure {
  background: var(--ml-studio);
  border-radius: 0;
}
.product .product-media img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.product:hover .product-media img { transform: scale(1.03); }

.product-name a,
.product-title a,
.woocommerce-loop-product__title {
  font-family: 'New Black', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ml-ink);
}
.product-name a:hover { color: var(--ml-cyan); }
.product-cat, .product-cat a {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ml-ink-muted);
}
.product-price, .price, .price ins, ins .amount, .woocommerce-Price-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--ml-navy);
}
del .amount, .product-price del { color: var(--ml-ink-muted); opacity: .65; }

/* Category tiles: light cards, image + label */
.product-category {
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 20px;
  overflow: hidden;
}
.product-category figure { background: var(--ml-field-cool); }
.product-category .category-name, .product-category h3 { color: var(--ml-ink); }

/* ============================================================
   BUTTONS — cyan primary from the supplied templates
   ============================================================ */
.btn-primary,
.button,
.button.alt,
button[type="submit"],
input[type="submit"],
.single_add_to_cart_button,
.checkout-button,
.woocommerce-button {
  background-color: var(--ml-cyan);
  border-color: var(--ml-cyan);
  color: #fff;
  font-family: 'New Black', 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 8px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.btn-primary:hover,
.button:hover,
.button.alt:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--ml-cyan-hover);
  border-color: var(--ml-cyan-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 180, 228, .25);
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.product-single .product-title { font-family: 'New Black', 'Sora', sans-serif; color: var(--ml-ink); }
.product-single .woocommerce-product-gallery,
.product-single .product-gallery { background: var(--ml-studio); border-radius: 16px; overflow: hidden; }
.product-single .price { font-size: 22px; color: var(--ml-navy); }
.single-product div.product .woocommerce-tabs ul.tabs li a { color: var(--ml-ink-2); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ml-cyan); }

/* Supplied product.html has no reviews, stars, or share row — hide Woo's */
.single-product .woocommerce-product-rating,
.single-product .product-single > .ratings-container,
.single-product .star-rating,
.single-product .social-icons,
.single-product .product-share,
.single-product .social-links,
.single-product .woocommerce-tabs #tab-title-reviews,
.single-product .woocommerce-tabs .reviews_tab,
.single-product .btn-compare,
body.single-product .product-single .product-links-wrapper > a.compare.btn-product-icon { display: none !important; }

/* "size" attribute select — 'Choose an option' stays default */
table.variations select,
.variations select {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-family: 'New Black', 'DM Sans', sans-serif;
}

/* Quantity control */
.quantity .qty {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-weight: 600;
}

/* ============================================================
   FORMS (cart / checkout / account) — light surfaces
   PLC rule: style only; never rename, hide, wrap, or duplicate
   checkout controls.
   ============================================================ */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="password"], input[type="number"],
select, textarea {
  background-color: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-family: 'New Black', 'DM Sans', sans-serif;
}
::placeholder { color: var(--ml-ink-muted); opacity: .9; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 12px;
}
.woocommerce-MyAccount-navigation ul li a { color: var(--ml-ink-2); }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--ml-cyan); }

hr, .divider { border-color: var(--ml-line); }
.widget-title { color: var(--ml-ink); border-color: var(--ml-line); }

/* ============================================================
   FOOTER — exact match to the locked React homepage
   (markup lives in footer.php; ml-* namespace)
   ============================================================ */
.ml-footer { background: var(--ml-chrome-foot); color: var(--ml-ink-light); }
.ml-footer-main { max-width: 1152px; margin: 0 auto; padding: 56px 20px 40px; }
.ml-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .ml-footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; } }
.ml-footer-brand .plp-footer-logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 0 16px;
  filter: none;
}
.ml-footer-brand p { font-size: 14px; line-height: 1.7; opacity: .6; margin-bottom: 20px; color: inherit; }
.ml-footer-socials { display: flex; gap: 12px; }
.ml-footer-social {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; color: var(--ml-ink-light);
}
.ml-footer-social:hover { background: rgba(0, 180, 228, .3); color: var(--ml-ink-light); }
.ml-footer-social svg { width: 14px; height: 14px; fill: currentColor; }
.ml-footer-social svg[fill="none"] { fill: none; } /* stroke-drawn icons (Instagram) must not get filled */
.ml-footer-col-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px; color: var(--ml-ink-light);
}
.ml-footer-col-header img { width: 16px; height: 16px; opacity: .7; }
.ml-footer-links { list-style: none; margin: 0; padding: 0; }
.ml-footer-links li { margin-bottom: 10px; }
.ml-footer-links a { font-size: 14px; opacity: .6; transition: all .2s; color: var(--ml-ink-light); }
.ml-footer-links a:hover { opacity: 1; color: var(--ml-cyan); }
.ml-footer-note { font-size: 14px; opacity: .6; }
.ml-footer-legal { border-top: 1px solid rgba(255, 255, 255, .08); padding: 24px 20px; }
.ml-footer-legal p { max-width: 896px; margin: 0 auto; font-size: 11px; line-height: 1.7; opacity: .4; text-align: center; color: inherit; }
.ml-footer-copyright { border-top: 1px solid rgba(255, 255, 255, .05); padding: 16px 20px; text-align: center; }
.ml-footer-copyright p { font-size: 11px; opacity: .35; margin: 0; color: inherit; }

/* ============================================================
   SHOP — match the supplied shop.html exactly
   ============================================================ */
/* Banned overlays (standing rule: nothing stamped on product photos)
   + fake-credibility noise (empty star rows) */
.product-label, .product-labels,
.products .woocommerce-product-rating,
.product-details .woocommerce-product-rating,
.products .star-rating,
.products .woocommerce-review-link { display: none !important; }

/* Supplied layout is full-width, no sidebar */
.woocommerce-shop .sidebar,
.post-type-archive-product .sidebar,
.tax-product_cat .sidebar,
.woocommerce-shop .shop-sidebar,
.post-type-archive-product .shop-sidebar,
.woocommerce-shop .left-sidebar,
.post-type-archive-product .sidebar-fixed { display: none !important; }
.woocommerce-shop .main-content,
.post-type-archive-product .main-content,
.tax-product_cat .main-content {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Toolbar: keep sorting (supplied has it), drop count/view toggles + sidebar toggle */
.toolbox .toolbox-item.toolbox-show,
.toolbox .toolbox-item.toolbox-layout,
.toolbox .left-sidebar-toggle,
.toolbox .toolbox-item.select-menu-count,
.toolbox .toolbox-item.toolbox-grid,
.toolbox .toolbox-right { display: none !important; }
.toolbox { border-bottom: 1px solid var(--ml-line); }

/* ============================================================
   GROUND CONTROL FRONTEND TOUCHPOINTS — style only, mount
   divs provided by page content. GC code itself is LOCKED.
   ============================================================ */
#gc-affiliate-form, #gc-affiliate-portal, #gc-coa-library, #gc-email-capture {
  min-height: 40px;
}

/* ============================================================
   VIDEO HERO — About + Affiliates
   Same composition as the locked React homepage hero: full-bleed
   autoplay video, dark scrim, flared white arch cut from the bottom.
   ============================================================ */
.ml-vhero {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0A1420;
  isolation: isolate;
}
.ml-vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim: the source footage is bright, and white word art needs a floor
   under it. Graded from the top so the arch stays clean at the bottom. */
.ml-vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,20,32,.62) 0%, rgba(10,20,32,.42) 45%, rgba(10,20,32,.30) 100%);
}
.ml-vhero__inner {
  position: relative;
  z-index: 2;
  padding: 72px 20px 108px;
  max-width: 900px;
  margin: 0 auto;
}
/* The word art. One word, wide tracking, optical-size display weight. */
.ml-vhero__word {
  font-family: 'New Black', 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.02;
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 40px rgba(10, 20, 32, .55);
}
.ml-vhero__line {
  font-family: 'New Black', 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .92);
  margin: 14px auto 0;
  max-width: 44ch;               /* New Black is wide; keep the line on one row at 1440 */
  text-shadow: 0 1px 18px rgba(10, 20, 32, .6);
}
.ml-vhero__arch {
  position: absolute;
  bottom: -1px;              /* kill the hairline seam on fractional DPR */
  left: 0;
  width: 100%;
  height: 120px;
  display: block;
  z-index: 3;
  pointer-events: none;
}
/* ---- Hero with lifted stat cards (Affiliates) ---------------------------
   One composition instead of two stacked blocks: compact word art, then the
   15% / 10% / Monthly glass cards floating on the footage, arch below. The
   navy .ml-statband plate is gone from this page (video-hero.php lifts the
   cards out of the content). */
.ml-vhero--cards .ml-vhero__word {
  font-size: clamp(38px, 5.4vw, 62px);
  letter-spacing: .03em;
}
.ml-vhero--cards .ml-vhero__line { margin-top: 10px; }
.ml-vhero--cards .ml-vhero__cards {   /* beats .ml-statband__inner's margin:0 */
  margin: 40px auto 0;
  max-width: 1060px;
  text-align: center;
}
.ml-vhero__cards .ml-statcard {
  padding: 32px 24px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 24px 48px rgba(4,10,20,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
.ml-vhero__cards .ml-statcard__n { font-size: clamp(38px, 4.6vw, 54px); }
.ml-vhero__cards .ml-statcard__r { margin: 14px auto 12px; }
.ml-vhero__cards .ml-statcard__l { font-size: 12px; letter-spacing: .06em; }

@media (max-width: 767px) {
  .ml-vhero { min-height: 380px; }
  .ml-vhero__inner { padding: 56px 20px 88px; }
  .ml-vhero__arch { height: 64px; }
  .ml-vhero--cards .ml-vhero__cards { margin-top: 26px; gap: 12px; }
  .ml-vhero__cards .ml-statcard { padding: 20px 16px 18px; }
  .ml-vhero__cards .ml-statcard__n { font-size: 34px; }
  .ml-vhero__cards .ml-statcard__r { margin: 10px auto 8px; }
  .ml-vhero__cards .ml-statcard__l { font-size: 11px; }
}
/* The video is decorative — a reader who asked for less motion gets the poster. */
@media (prefers-reduced-motion: reduce) {
  .ml-vhero__video { display: none; }
  .ml-vhero {
    background-image: var(--ml-vhero-poster);
    background-size: cover;
    background-position: center;
  }
}

/* ============================================================
   PAGE BLOCKS — the visual language that replaces walls of text
   ============================================================ */
.ml-has-vhero .page-content > .container,
.ml-has-vhero .entry-content { max-width: 100%; padding: 0; }

.ml-band { padding: 72px 20px; }
.ml-band--warm { background: var(--ml-field-warm); }
.ml-band--cool { background: var(--ml-field-cool); }
.ml-band__inner { max-width: 1100px; margin: 0 auto; }
.ml-band__inner--narrow { max-width: 760px; }

.ml-lead {
  font-family: 'New Black', 'Sora', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ml-ink);
  text-align: center;
  margin: 0 auto;
  max-width: 22ch;
}
.ml-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ml-ink-2);
  text-align: center;
  margin: 18px auto 0;
  max-width: 60ch;
}

/* Three-up value grid: icon plate, short title, one line. No paragraphs. */
.ml-tri {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
@media (min-width: 768px) { .ml-tri { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ml-tri__card {
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 14px;
  padding: 30px 26px;
  text-align: center;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.ml-tri__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,28,58,.08); }
.ml-tri__icon { width: 40px; height: 40px; margin: 0 auto 16px; display: block; opacity: .9; }
.ml-tri__t {
  font-family: 'New Black', 'Sora', sans-serif;
  font-size: 17px; font-weight: 600; color: var(--ml-ink); margin: 0 0 8px;
}
.ml-tri__d { font-size: 14.5px; line-height: 1.65; color: var(--ml-ink-2); margin: 0; }

/* Numbered steps — used ONLY where a real sequence exists (how it works). */
.ml-steps { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; counter-reset: mlstep; }
@media (min-width: 768px) { .ml-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.ml-step { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--ml-line); border-radius: 14px; }
.ml-step::before {
  counter-increment: mlstep;
  content: counter(mlstep);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ml-cyan); color: #fff;
  font-family: 'New Black', 'Sora', sans-serif; font-size: 14px; font-weight: 700;
}
.ml-step__t { font-family: 'New Black', 'Sora', sans-serif; font-size: 16px; font-weight: 600; color: var(--ml-ink); margin: 0 0 6px; }
.ml-step__d { font-size: 14px; line-height: 1.6; color: var(--ml-ink-2); margin: 0; }

/* Big stat figures — carries the affiliate numbers without a paragraph. */


/* Closing CTA band */
.ml-cta { background: var(--ml-navy); color: #fff; padding: 68px 20px; text-align: center; }
.ml-cta h2 { font-family: 'New Black', 'Sora', sans-serif; font-size: clamp(24px, 3.4vw, 36px); color: #fff; margin: 0 0 14px; }
.ml-cta p { color: rgba(255,255,255,.82); font-size: 16px; margin: 0 auto 28px; max-width: 52ch; }
.ml-cta .ml-btn {
  display: inline-block; background: var(--ml-cyan); color: #fff;
  font-family: 'New Black', 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .03em;
  padding: 15px 34px; border-radius: 8px; transition: all .3s cubic-bezier(.4,0,.2,1);
}
.ml-cta .ml-btn:hover { background: var(--ml-cyan-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,180,228,.3); }

/* About page 1799 ends on the full-bleed CTA. Remove only the parent theme's
   generic main-bottom spacer so the footer meets that final band. */
body.page-id-1799.ml-has-vhero main#main.main { padding-bottom: 0; }

/* Per-page hero tuning — Affiliates (2026-08-21, Austin): ONE composition.
   The navy stat plate is gone; the 15% / 10% / Monthly cards are lifted out of
   the content by video-hero.php and float on the footage under a compact
   word. Height is content-driven (no tall floor), the flare is the page
   field again, and the scrim carries a little more floor at the bottom so
   the glass cards read on busy frames. */
.ml-vhero--affiliates { min-height: 0; }
.ml-vhero--affiliates .ml-vhero__inner { padding: 56px 20px 150px; max-width: 1120px; }
.ml-vhero--affiliates .ml-vhero__video { object-position: center 42%; }
.ml-vhero--affiliates .ml-vhero__scrim {
  background: linear-gradient(180deg, rgba(10,20,32,.60) 0%, rgba(10,20,32,.34) 45%, rgba(10,20,32,.46) 100%);
}
@media (max-width: 767px) {
  .ml-vhero--affiliates { min-height: 0; }
  .ml-vhero--affiliates .ml-vhero__inner { padding: 40px 16px 92px; }
}

/* Affiliates: the flare meets the page field (the next plate is the warm
   band, same color). The theme still pads main by 30px — keep it at zero so
   nothing but the curve sits between video and content. */
.ml-vhero--affiliates .ml-vhero__arch path {
  fill: var(--ml-field-warm);
}
body.page-id-1807.ml-has-vhero main#main.main,
body.page-affiliates.ml-has-vhero main#main.main {
  padding-top: 0;
}

/* ═══ AFFILIATE STAT BAND — premium plate, not bare numerals ════════════════
   Austin on the first version: "it looks fucking basic as hell". The fix is
   depth, not decoration: a real Envato texture plate (licensed to this site),
   the brand hex ghosted and CONTAINED per the motion law, glass cards, and
   numerals with an actual gradient. No stock icons — a beaker next to
   "15% commission" would be decoration for its own sake. */
.ml-statband {
  position: relative; overflow: hidden; overflow-x: clip; isolation: isolate;
  background: #101C3A; padding: 96px 20px;
}
.ml-statband__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/img/statband-bg.webp') center/cover no-repeat;
  opacity: .85;
}
.ml-statband__bg::after {          /* keep the type floor dark wherever the plate is bright */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,58,.55), rgba(16,28,58,.78));
}
.ml-statband__hex {
  /* kept fully INSIDE the box: a motif that pokes past the section adds
     document scroll width even behind overflow:hidden in some layouts */
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; z-index: 0; opacity: .06; pointer-events: none;
  background: url('assets/img/hex-mark.png') center/contain no-repeat;
  filter: brightness(0) invert(1);
}
.ml-statband__inner {
  position: relative; z-index: 1; max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px) { .ml-statband__inner { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.ml-statcard {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 40px 28px 34px; text-align: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px rgba(4,10,20,.38);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.ml-statcard:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(4,10,20,.46); }
.ml-statcard--lead { border-color: rgba(0,180,228,.5); box-shadow: 0 20px 50px rgba(0,180,228,.14); }
.ml-statcard__n {
  display: block; font-family: 'New Black', 'Sora', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(42px, 5.4vw, 62px); letter-spacing: -.01em;
  background: linear-gradient(180deg, #FFFFFF 34%, #6FD2EE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
.ml-statcard__r {                  /* the cyan rule that ties the card to the brand */
  display: block; width: 34px; height: 2px; margin: 18px auto 16px;
  background: linear-gradient(90deg, transparent, #00B4E4, transparent);
}
.ml-statcard__l {
  display: block; font-size: 13px; line-height: 1.6; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(232,238,244,.78);
}

/* Merit-proven rotating conic on the lead card (21st Magic MCP is
   not connected on this Grok seat — this is the documented fallback). */
@property --plp-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes plp-conic {
  to { --plp-angle: 360deg; }
}
.ml-statcard--lead {
  position: relative;
  isolation: isolate;
}
.ml-statcard--lead::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--plp-angle), transparent 55%, #08A7B5, #E8EEF4, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: plp-conic 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ml-statcard--lead::before { animation: none; }
}

/* ============================================================
   Kill WPFront leftover + force a real shop grid
   ============================================================ */
#wpfront-notification-bar,
#wpfront-notification-bar-spacer,
.wpfront-notification-bar {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 22px !important;
  width: 100% !important;
  float: none !important;
}
@media (max-width: 1100px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }
}
body.woocommerce ul.products li.product,
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.woocommerce ul.products .product-wrap,
body.woocommerce-shop ul.products .product-wrap {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
.products .product-details,
.products .product-name,
.products .product-title,
.products .woocommerce-loop-product__title,
.products h3,
.products .woocommerce-loop-product__title a,
.products .product-name a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-height: none !important;
  height: auto !important;
  width: auto !important;
}
.product .product-media,
.products .product figure {
  aspect-ratio: 1 / 1.12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ml-studio);
  overflow: hidden;
}
.product .product-media img,
.products .product figure img {
  max-height: 260px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Affiliates: statband is the first visual, not a Word-doc title bar */
body.page-affiliates .title-bar,
body.page-affiliates .page-title-bar,
body.page-id-44 .title-bar,
body.page-id-44 .page-title-bar {
  display: none !important;
}
body.page-affiliates main#main.main,
body.page-id-44 main#main.main { padding-top: 0; padding-bottom: 0; }
body.page-affiliates .breadcrumb,
body.page-affiliates .toolbox,
body.page-id-44 .breadcrumb,
body.page-id-44 .toolbox {
  display: none !important;
}

/* Double RUO strip leftover from the Blocksy-era mu-plugin */
.csf-topstrip { display: none !important; height: 0 !important; overflow: hidden !important; }

/* Apply form sits in a real card, not a Word-doc stack */
.ml-apply {
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 18px;
  padding: 32px 28px;
  margin-top: 28px;
  box-shadow: 0 18px 40px rgba(16,28,58,.08);
}

/* ═══ 2.1.25 — VISUAL PASS (2026-09-03) ═══════════════════════════════════════
   Client-directed: keep the hero curve but end the white band under it; centre
   the words beneath it; make every product vial the same size; the category
   words (Blends / Compounds / Peptides / Supplies) never appear. Plus the
   front-end audit items F9-F12, F19 (docs/AUDIT.md, docs/VISUAL-DIAGNOSIS.md). */

/* The curve is the page field, not white (the affiliates rule below keeps its
   own fill, same value). The path uses fill="currentColor". */
.ml-vhero__arch { color: var(--ml-field); }

/* About: the words under the curve, centred and measured. */
.ml-vhero--about + main .main-content { text-align: center; max-width: 78ch; margin-inline: auto; padding-inline: 24px; }

/* Product art normalisation. The cards/PDP/related boxes (merit-shop.css,
   merit-product.css) inset the uncropped 600x900 art in a square; these terms
   scale each vial to 0.92 of the image height and centre it. Measured from the
   solid-alpha bounding box of each 1024x1536 master (_build/audit-20260903). */
li.post-30 .product-card-img img, body.postid-30 .product-image img, .related-card[href*="/product/bac/"] .related-card-img img { transform: translateY(-0.1%) scale(0.978); }
li.post-32 .product-card-img img, body.postid-32 .product-image img, .related-card[href*="/product/bpc-10-mg/"] .related-card-img img { transform: translateY(0.9%) scale(1.051); }
li.post-34 .product-card-img img, body.postid-34 .product-image img, .related-card[href*="/product/cjc-1295-no-dac-ipamorelin-mix/"] .related-card-img img { transform: translateY(-2.9%) scale(1.192); }
li.post-29 .product-card-img img, body.postid-29 .product-image img, .related-card[href*="/product/ghk-cu-50-mg/"] .related-card-img img { transform: translateY(-1.2%) scale(1.072); }
li.post-33 .product-card-img img, body.postid-33 .product-image img, .related-card[href*="/product/mots-c-10-mg/"] .related-card-img img { transform: translateY(1.4%) scale(0.99); }
li.post-31 .product-card-img img, body.postid-31 .product-image img, .related-card[href*="/product/nad-plus-500-mg/"] .related-card-img img { transform: translateY(-1.2%) scale(1.107); }
li.post-27 .product-card-img img, body.postid-27 .product-image img, .related-card[href*="/product/ptp-rt-10-mg/"] .related-card-img img { transform: translateY(-0.7%) scale(0.935); }
li.post-26 .product-card-img img, body.postid-26 .product-image img, .related-card[href*="/product/ptp-rt-5-mg/"] .related-card-img img { transform: translateY(-0.7%) scale(0.935); }
li.post-28 .product-card-img img, body.postid-28 .product-image img, .related-card[href*="/product/ptp-tz-10-mg/"] .related-card-img img { transform: translateY(-0.6%) scale(1.083); }

/* F9 — the third face (Poppins) on the Wolmart breadcrumb / checkout steps / privacy link */
.woo-page-header .breadcrumb, .woo-page-header .breadcrumb li, .woo-page-header .breadcrumb a,
.checkout-steps, .checkout-steps a, .checkout-steps span,
.woocommerce-privacy-policy-link { font-family: 'New Black', sans-serif !important; }

/* F10 — Wolmart's own mobile icon bar (Home / Categories / Account / Cart / Search);
   the CSF bottom bar is the one bar. :has() keeps the sticky header's wrapper alone. */
.mobile-icon-bar, .sticky-content-wrapper:has(> .mobile-icon-bar) { display: none !important; }

/* F12 — the Ground Control mount point rendered as an empty card until it is filled */
.ml-apply:empty { display: none; }

/* F19 — inline code (the BAC term on /certifications/) in the site face */
.main-content code, .entry-content code { font-family: inherit; }

/* F11 — html gets the same horizontal-overflow guard the wrappers rely on */
html { overflow-x: clip; }