/* FF New Design - hardening to beat Divi/WooCommerce global CSS on controlled pages.
   Scoped to .ffnew so it only affects our templates. */

/* page background: Divi forces body{background:#fff} - restore the brand oat (BG ONLY, never force text color) */
html, body.ffnew{ background:#F3ECE1 !important; }
body.ffnew #et-boc, body.ffnew #page-container, body.ffnew #main-content{ background:transparent !important; }

/* fonts: Divi keeps swapping our body/headings back to its stack - lock them */
body.ffnew,
.ffnew p, .ffnew span, .ffnew a, .ffnew li, .ffnew button, .ffnew input,
.ffnew select, .ffnew textarea, .ffnew label, .ffnew dd, .ffnew dt, .ffnew figcaption{
  font-family:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.ffnew h1, .ffnew h2, .ffnew h3, .ffnew h4, .ffnew .brand,
.ffnew .btn, .ffnew .price, .ffnew .tnum, .ffnew .stat .n, .ffnew figure p,
/* headings wrap their text in spans (hero .w, etc.) - keep those in Bricolage, not the Nunito span rule */
.ffnew h1 span, .ffnew h2 span, .ffnew h3 span, .ffnew h4 span,
.ffnew .brand span, .ffnew .stat .n span, .ffnew .price span{
  font-family:'Bricolage Grotesque','Nunito Sans',sans-serif !important;
}
/* guarantee the hero renders at the heavy weight */
.ffnew #hero h1, .ffnew #hero h1 .w, .ffnew .hero h1, .ffnew .hero h1 .w{ font-weight:800 !important; }

/* logo: Divi forces img{height:auto!important} which blows the brand mark up */
.ffnew .brand-logo{height:26px !important; width:auto !important; max-width:none !important}
@media(max-width:780px){ .ffnew .brand-logo{height:22px !important} }
.ffnew .foot-logo{height:30px !important; width:auto !important; max-width:none !important}

/* reveals must NEVER hide content - the fade kept leaving headings faded/invisible */
.ffnew .reveal{ opacity:1 !important; transform:none !important; }
/* dark "Our Promise" story section: keep its heading light on the fig background */
.ffnew #story h1, .ffnew #story h2{ color:var(--oat) !important; }

/* hero headline: guarantee the words are visible even if the intro animation is interrupted */
.ffnew #hero h1 .w,
.ffnew .hero.anim #hero h1 .w,
.ffnew .hero h1 .w{ opacity:1 !important; transform:none !important; }

/* CARD IMAGE FIT: Divi forces img{width:100%} which blows the vials past the card.
   Restore the mock's centered, contained sizing so every product fits uniformly. */
/* WHOLE VIAL, ALWAYS: render the product as a background-image (background-size:contain can't clip
   and Divi's img{} rules can't touch it). The <img> is hidden but kept for alt/SEO. */
.ffnew .pcard .ph{
  position:relative !important; height:300px !important; overflow:hidden !important;
  background-color:transparent !important; background-repeat:no-repeat !important;
  background-position:center center !important; background-size:contain !important;
  background-origin:content-box !important; background-clip:content-box !important;
  display:block !important; padding:20px 16px !important; box-sizing:border-box !important;
}
.ffnew .pcard .ph img,
.ffnew .pcard .ph img.bottle{ display:none !important; }
@media(max-width:560px){ .ffnew .pcard .ph{ height:240px !important; } }
.ffnew .pdp-media{ position:relative !important; }
/* WHOLE VIAL on the PDP: background-image contain (Divi's img{} can't clip a background) */
.ffnew .pdp-photo{ position:absolute !important; inset:0 !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:contain !important; background-origin:content-box !important; background-clip:content-box !important; padding:9% !important; box-sizing:border-box !important; z-index:1 !important; }
.ffnew .pdp-media img.pdp-img{ display:none !important; }
.ffnew .pdp-media .badge, .ffnew .pdp-media .pdp-badge, .ffnew .pdp-media .pdp-chip{ z-index:2 !important; }
/* products without a real image: hide the ugly white WooCommerce placeholder box (show clean oat) */
.ffnew .pcard .ph img.woocommerce-placeholder,
.ffnew .pcard .ph img[src*="woocommerce-placeholder"],
.ffnew .pcard .ph img[src*="placeholder"]{ display:none !important; }

/* the "+" add-to-cart button on cards should ALWAYS show, not only on hover */
.ffnew .pcard .add{ opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; }

/* PDP quantity stepper: clean pill, kill the ugly bordered number input */
.ffnew .pdp-buy .qtybox, .ffnew #pdpQty{
  background:var(--oat-100) !important; border:1px solid var(--line-strong) !important;
  border-radius:var(--r-pill) !important; padding:4px 6px !important; display:inline-flex; align-items:center; gap:4px;
}
.ffnew #pdpQty input, .ffnew #pdpQtyN{
  border:none !important; background:transparent !important; box-shadow:none !important;
  width:34px !important; min-height:0 !important; padding:0 !important; text-align:center;
  font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800 !important; font-size:1rem !important;
  -moz-appearance:textfield;
}
.ffnew #pdpQty input::-webkit-outer-spin-button, .ffnew #pdpQty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ffnew #pdpQty button{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:50% !important;
  width:32px; height:32px; font-size:18px; line-height:1; color:var(--ink); cursor:pointer; font-weight:700;
}
.ffnew #pdpQty button:hover{ border-color:var(--coral); color:var(--coral-700); }

/* clean marker for trust lists (replaces emojis) */
.ffnew .pdp-trust li{ list-style:none; }
.ffnew .pdp-trust li .tk{ display:inline-flex; width:22px; height:22px; border-radius:6px; background:var(--mint-200); color:var(--mint-600); align-items:center; justify-content:center; font-weight:800; margin-right:10px; flex:0 0 auto; }

/* kill Divi's inherited link/box styling that can bleed into our nav + buttons */
.ffnew a{ box-shadow:none !important; }
.ffnew .btn{ text-decoration:none !important; }

/* contact form status message */
.ffnew .ffnd-form-msg{ margin:0 0 14px; padding:12px 14px; border-radius:12px; font-weight:700; font-size:.92rem; }
.ffnew .ffnd-form-msg.ok{ background:var(--mint-200,#dff3e6); color:var(--mint-600,#1c7a45); }
.ffnew .ffnd-form-msg.err{ background:#fbe4e4; color:#a11; }

/* mobile padding: .catalog-hero's shorthand padding zeroed its horizontal padding, so the
   hero eyebrow/headline/subhead ran to the screen edge. Restore the wrap gutter. */
.ffnew .catalog-hero{ padding-left:var(--pad) !important; padding-right:var(--pad) !important; }
@media(max-width:600px){
  .ffnew .catalog-hero{ padding-left:18px !important; padding-right:18px !important; }
  .ffnew .wrap{ padding-left:max(18px,var(--pad)) !important; padding-right:max(18px,var(--pad)) !important; }
}

/* hero bottle: Divi's img{width:100%!important} blows it up and .hero{overflow:hidden} clips it.
   Force the whole vial to fit (contain), auto height, capped size. */
.ffnew img.bottle.hero-bottle{
  width:auto !important; height:auto !important;
  max-width:min(58%,300px) !important; max-height:clamp(300px,60vh,470px) !important;
  object-fit:contain !important;
}
@media(max-width:860px){
  .ffnew .hero-stage{ aspect-ratio:auto !important; min-height:clamp(300px,58vw,420px) !important; }
  .ffnew img.bottle.hero-bottle{ max-width:min(64%,260px) !important; max-height:52vh !important; }
}
/* mobile: trim the oversized stacked section padding that leaves big empty bands */
@media(max-width:600px){
  .ffnew .section{ padding-top:clamp(34px,8vw,56px) !important; padding-bottom:clamp(34px,8vw,56px) !important; }
}

/* ===== pretty dropdowns (custom select replacing native gray <select>) ===== */
.ffnew .ffsel{ position:relative; display:inline-block; min-width:210px; vertical-align:middle; }
.ffnew select.ffsel-native{ position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; pointer-events:none !important; margin:0 !important; padding:0 !important; }
.ffnew .ffsel-btn{ display:inline-flex !important; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:50px; padding:12px 18px; background:#fff !important; border:1.5px solid var(--line) !important; border-radius:var(--r-pill) !important; color:var(--ink) !important; font-family:'Nunito Sans',sans-serif !important; font-weight:800 !important; font-size:15px !important; cursor:pointer; text-align:left; box-shadow:none !important; transition:border-color .16s, box-shadow .16s; }
.ffnew .ffsel-btn:hover{ border-color:var(--coral) !important; }
.ffnew .ffsel.is-open .ffsel-btn{ border-color:var(--coral) !important; box-shadow:0 0 0 3px rgba(255,107,74,.15) !important; }
.ffnew .ffsel-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ffnew .ffsel-chev{ flex:0 0 auto; width:9px; height:9px; border-right:2.4px solid var(--ink-soft); border-bottom:2.4px solid var(--ink-soft); transform:translateY(-2px) rotate(45deg); transition:transform .22s; }
.ffnew .ffsel.is-open .ffsel-chev{ transform:translateY(1px) rotate(-135deg); border-color:var(--coral-700); }
.ffnew .ffsel-panel{ position:absolute; top:calc(100% + 8px); left:0; right:0; min-width:100%; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(46,31,46,.18); padding:6px; z-index:1200; display:none; max-height:320px; overflow:auto; }
.ffnew .ffsel.is-open .ffsel-panel{ display:block; animation:ffselIn .16s ease; }
@keyframes ffselIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.ffnew .ffsel-opt{ padding:11px 15px; border-radius:11px; cursor:pointer; color:var(--ink); font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:15px; line-height:1.3; }
.ffnew .ffsel-opt:hover{ background:var(--oat-100); }
.ffnew .ffsel-opt.is-sel{ background:var(--coral-50,#FFF1EC); color:var(--coral-700) !important; font-weight:800; }

/* ===== catalog login-gate (guests) ===== */
.ffnew .ffgate-bar{ background:var(--fig); color:var(--oat); }
.ffnew .ffgate-bar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--pad); flex-wrap:wrap; }
.ffnew .ffgate-bar-msg{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--oat) !important; }
.ffnew .ffgate-bar-cta{ flex:0 0 auto; background:var(--coral); color:#fff !important; font-weight:800; font-size:13px; padding:8px 18px; border-radius:999px; text-decoration:none; }
.ffnew .ffgate-bar-cta:hover{ background:var(--coral-700); }
/* locked product card */
.ffnew .pcard--locked .ffgate-ph{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ffnew .pcard--locked .ffgate-blurimg{ position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; background-origin:content-box; padding:20px 16px; filter:blur(9px); opacity:.45; transform:scale(1.05); }
.ffnew .pcard--locked .ffgate-lock{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; background:var(--fig); color:#fff; font-weight:800; font-size:13px; letter-spacing:.01em; padding:9px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(46,31,46,.25); }
.ffnew .pcard--locked .info{ cursor:pointer; }
.ffnew .pcard--locked .nm{ color:var(--ink) !important; }
.ffnew .pcard--locked .ffgate-pricelock{ color:var(--coral-700) !important; font-weight:800; }

/* subtle "Powered by Growth House Digital" footer credit (white GHD wordmark on the fig footer) */
.ffnew .foot-ghd{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; opacity:.5; text-decoration:none !important; transition:opacity .18s; }
.ffnew .foot-ghd:hover{ opacity:.9; }
.ffnew .foot-ghd span{ color:var(--oat) !important; font-size:12px; font-weight:700; letter-spacing:.04em; }
.ffnew .foot-ghd-logo{ height:20px !important; width:auto !important; max-width:none !important; display:block; }

/* static (policy) pages: content is injected client-side via REST; reserve space + fade in so
   there's no blank "lazy load" jump. */
.ffnew #ffnd-static-mount{ min-height:60vh; opacity:0; transition:opacity .28s ease; }
.ffnew #ffnd-static-mount.is-loaded{ min-height:0; opacity:1; }

/* out-of-stock products: lightly faded, no add button (still clickable to view the page) */
.ffnew .pcard--oos{ opacity:.5; }
.ffnew .pcard--oos:hover{ opacity:.68; }
.ffnew .pcard--oos .add{ display:none !important; }
.ffnew .badge.badge-oos{ background:var(--fig) !important; color:#fff !important; }

/* product page: out-of-stock state */
.ffnew .pdp-oos{ background:var(--oat-200) !important; color:var(--ink-soft) !important; cursor:not-allowed !important; width:100% !important; }
.ffnew .pdp-oos-note{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; }

/* ===== affiliate registration / recruitment page ===== */
.ffnew .ffaff-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:clamp(24px,4vw,48px); align-items:start; }
.ffnew .ffaff-side{ display:flex; flex-direction:column; gap:16px; }
.ffnew .ffaff-benefit{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.ffnew .ffaff-ic{ flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:var(--coral-50,#FFF1EC); color:var(--coral-700); display:grid; place-items:center; }
.ffnew .ffaff-benefit h3{ margin:0 0 4px; color:var(--fig); font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:800; }
.ffnew .ffaff-benefit p{ margin:0; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.ffnew .ffaff-terms{ color:var(--ink-soft); font-size:13px; }
.ffnew .ffaff-terms a, .ffnew .ffaff-sub a{ color:var(--coral-700); font-weight:700; }
.ffnew .ffaff-card{ padding:clamp(24px,3vw,36px); border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,#fff,var(--oat-50)); box-shadow:0 18px 44px rgba(46,31,46,.08); }
.ffnew .ffaff-card h2{ margin:0 0 6px; color:var(--fig); font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; }
.ffnew .ffaff-sub{ margin:0 0 20px; color:var(--ink-soft); font-size:15px; }
.ffnew .ffaff-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 30px; border-radius:999px; background:var(--coral); color:#fff !important; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-decoration:none; }
.ffnew .ffaff-btn:hover{ background:var(--coral-700); }
.ffnew .affwp-form label{ display:block; margin:14px 0 6px; color:var(--fig); font-weight:700; font-size:14px; }
.ffnew .affwp-form input[type=text], .ffnew .affwp-form input[type=email], .ffnew .affwp-form input[type=password], .ffnew .affwp-form input[type=url], .ffnew .affwp-form textarea, .ffnew .affwp-form select{ width:100%; min-height:50px; padding:12px 16px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--fig); font-size:15px; box-shadow:none; }
.ffnew .affwp-form input:focus, .ffnew .affwp-form textarea:focus, .ffnew .affwp-form select:focus{ border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,107,74,.14); outline:none; }
.ffnew .affwp-form input[type=submit], .ffnew .affwp-form button[type=submit]{ margin-top:20px; width:100%; min-height:54px; border:0; border-radius:999px; background:var(--coral) !important; color:#fff !important; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:16px; cursor:pointer; box-shadow:0 14px 30px rgba(255,107,74,.3); }
.ffnew .affwp-form input[type=submit]:hover{ background:var(--coral-700) !important; }
.ffnew .affwp-form input[type=checkbox]{ width:auto; min-height:0; margin-right:8px; }
.ffnew .affwp-honeypot-field{ display:none !important; }
@media(max-width:820px){ .ffnew .ffaff-grid{ grid-template-columns:1fr; } }

/* footer: stack the GHD credit under the "Third-party tested" line, right-aligned */
.ffnew .foot-bar-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
.ffnew .foot-bar-right .foot-ghd{ margin-top:0 !important; }
@media(max-width:600px){ .ffnew .foot-bar-right{ align-items:flex-start; text-align:left; } }

/* mobile: kill horizontal overflow (tour section / marquee / floating chips were pushing past the viewport) */
@media(max-width:820px){
  /* NOTE: never put overflow-x:hidden/clip on html/body or .tour/.tour-stage/section here -
     it breaks the tour's position:sticky pin. Clip the overflowing children instead. */
  html, body.ffnew{ max-width:100% !important; }
  .ffnew .marquee, .ffnew .hero, .ffnew .hero-stage{ max-width:100vw !important; overflow-x:clip; }
  .ffnew .tour-word{ max-width:92vw !important; }
  .ffnew .tour-vials{ overflow:hidden !important; }
}

/* mobile: keep the "tour" scroll effect working (don't leave a big empty gap). Restore the sticky
   pin + scroll height that the base stylesheet was disabling on small screens. */
@media(max-width:860px){
  .ffnew .tour{ height:300vh !important; display:block !important; }
  .ffnew .tour-stage{ position:sticky !important; top:0 !important; height:100vh !important; overflow:hidden !important; }
  /* Our-promise band: stack the copy + review cards so the testimonials aren't cut off */
  .ffnew .ff-story-grid{ grid-template-columns:1fr !important; }
}

/* footer mobile: stack the bottom bar so "Powered by Growth House" aligns cleanly (left) */
@media(max-width:600px){
  .ffnew .foot-bar{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
  .ffnew .foot-bar-right{ align-items:flex-start !important; text-align:left !important; }
}

/* checkout: rebrand transition note */
.ffco .ffco-note{ max-width:560px; margin:0 auto 22px; padding:14px 18px; border-radius:14px; background:var(--coral-50,#FFF1EC); border:1px solid var(--coral-100,#FFD9CE); color:var(--fig,#2E1F2E); font-size:14px; line-height:1.55; }
.ffco .ffco-note strong{ font-weight:800; }