/*
Theme Name: ProLive (Kadence Child)
Theme URI: https://prolive.kinsta.cloud
Description: Child theme of Kadence for the ProLive brand site. Carries the ported ProLive design system - tokens, components and the Kadence compatibility layer. Built by Evolut from the approved design set ProLive-design-v2_1 (29 Aug 2026).
Author: Evolut
Author URI: https://evolut.com.au
Template: kadence
Version: 1.5.2
Text Domain: prolive-kadence
*/

/* ==========================================================================
   ProLive — Global stylesheet
   Ported from the approved design set (ProLive-design-v2_1, 29 Aug 2026)
   Target: WordPress + Kadence theme + Kadence Blocks
   Load via: Kadence > Customizer > Additional CSS, or the child theme.
   --------------------------------------------------------------------------
   HOW THIS WORKS
   Kadence Blocks handle layout, spacing and responsiveness. This file supplies
   the brand's component look. Attach the class names below to a block via
   Block > Advanced > Additional CSS Class(es).
   Do not hand-edit colours here - change them in the :root token block only.
   ========================================================================== */

/* ============================================================
   ProLive design tokens — colours sampled from the approved
   Blueberry key visual (88.png, supplied 6 Jul 2026)
   ============================================================ */
:root{
  --pro-green:#1DA527;         /* primary brand field + logo */
  --pro-green-deep:#14761C;    /* text on light, hover states */
  --pro-green-ink:#0C3E11;     /* deep green for body copy */
  --blueberry:#9C1D98;         /* Blueberry flavour code */
  --blueberry-deep:#711070;
  --blueberry-milk:#E9CEE8;    /* milk-splash tint */
  --paper:#FFFFFF;
  --paper-warm:#FBF8FA;
  --ink:#14210F;
  --ink-60:#5A6456;
  --rule:#E3E7E1;

  /* Flavour codes — Blueberry confirmed from KV.
     Original + Peach are PROVISIONAL pending Manassen KV approval. */
  --flavour-original:#1DA527;
  --flavour-blueberry:#9C1D98;
  --flavour-peach:#E8743B;
  --flavour-prepro:#D9BE73;

  /* PRE+PRO launch field.
     CORRECTED 9 Sep 2026 against the approved PRE-PRO KEY VISUAL_FINAL.
     We had a provisional DARK gold (#9C6B06) on the assumption that white
     text would sit on it. The approved KV is the opposite: a LIGHT metallic
     gold running roughly #C19F5B (deepest) to #EFE2A6 (lightest). Measured
     against that field, white text lands between 1.30:1 and 2.59:1 and fails
     AA everywhere, at every size. Dark ink passes comfortably — 6.68:1 at the
     deepest point of the field, 12.84:1 at the lightest.
     The artwork agrees: it sets green and dark type on the gold throughout.
     (The single white word on the KV, "NEW", sits at 2.59:1 and would fail
     here too, so we do not reproduce it.)
     So text on the gold field is --prepro-gold-ink, never white. This is the
     exact scenario the accessibility note in the build spec warned about, and
     it is why that note said "if a lighter gold is required, text on it must
     go dark, not white".
     Values sampled from a compressed raster — reconcile against the .ai file
     before the brand team signs off. */
  --prepro-gold:#D9BE73;       /* field: dark ink passes at 9.22:1 */
  --prepro-gold-ink:#14210F;   /* the ONLY text colour for the gold field */
  --prepro-gold-deep:#7A5A12;  /* gold text on white: 6.37:1 */

  --shell:1240px;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;

  /* Type. Amertha (script) WAS supplied in the client Drive, 9 Sep 2026 —
     still to be self-hosted and swapped in for Dancing Script.
     IvyEpic (display) cannot be supplied as a file at all: the key visual's
     package report lists it under "Protected Fonts that were not packaged
     (Adobe Fonts)". It needs an Adobe Fonts web project on a Creative Cloud
     licence, or a web-licensed substitute. Poppins stands in until then.
     The approved artwork also uses Quanta Grotesk Pro Bold and Helvetica
     Neue Medium — neither is currently in this scale. */
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Dancing Script',cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blueberry);outline-offset:3px;border-radius:4px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}

/* ---------- the signature device: pro + script suffix ---------- */
.lockup{font-weight:800;letter-spacing:-.02em}
.lockup i{font-family:var(--script);font-weight:700;font-style:normal;
  letter-spacing:0;padding-left:.02em}

/* ---------- eyebrow ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pro-green-deep);margin:0 0 14px}
.eyebrow.on-dark{color:rgba(255,255,255,.82)}

/* ---------- headings ---------- */
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.04;font-weight:800}
h1{font-size:clamp(2.9rem,6.2vw,5rem)}
h2{font-size:clamp(2rem,3.9vw,3.2rem);line-height:1.08}
h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-60);max-width:52ch;margin:20px 0 0}
.on-dark .lede,.lede.on-dark{color:rgba(255,255,255,.9)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-weight:700;font-size:1rem;padding:17px 32px;border-radius:var(--r-pill);
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--pro-green);color:#fff}
.btn--primary:hover{background:var(--pro-green-deep)}
.btn--onGreen{background:#fff;color:var(--pro-green-deep)}
.btn--ghost{border-color:currentColor;color:var(--pro-green-deep)}
.btn--ghost:hover{background:var(--pro-green);border-color:var(--pro-green);color:#fff}
.btn__arrow{font-size:1.1em;line-height:1}

/* ---------- placeholder convention ---------- */
.ph{position:relative;background:var(--blueberry-milk);border-radius:var(--r-md);
  display:grid;place-items:center;text-align:center;padding:24px;
  color:var(--blueberry-deep);overflow:hidden}
.ph span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  opacity:.75;max-width:24ch;line-height:1.5}
.ph--green{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.ph--pending{background:#F3F0F1;border:2px dashed var(--blueberry);color:var(--blueberry-deep)}

/* ============================ HEADER ============================ */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:74px}
.brand{font-size:1.6rem;color:var(--pro-green);text-decoration:none}
.nav{display:flex;gap:30px;list-style:none;margin:0;padding:0;
  font-size:.95rem;font-weight:600}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--pro-green)}
.hdr .btn{padding:12px 22px;font-size:.92rem}
.hdr__toggle{display:none;background:none;border:0;font-size:1.5rem;padding:8px;
  color:var(--ink);cursor:pointer}
@media (max-width:940px){
  .nav,.hdr .btn{display:none}
  .hdr__toggle{display:block}
}

/* ============================ HERO ============================ */
/* Mirrors the KV's two-panel construction: brand field + product field */
.hero{background:var(--pro-green);color:#fff;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding:88px 28px 96px;max-width:var(--shell);margin:0 auto}
.hero h1{color:#fff}
.hero h1 i{font-family:var(--script);font-style:normal;font-weight:700;
  letter-spacing:0}
.hero__actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__note{font-size:.85rem;color:rgba(255,255,255,.72);margin-top:18px}
.hero__stage{position:relative;aspect-ratio:1/1.02;border-radius:var(--r-lg);
  background:radial-gradient(120% 100% at 30% 20%,#fff 0%,var(--blueberry-milk) 62%,#DDB9DC 100%);
  display:grid;place-items:center}
.hero__stage .ph{background:transparent;color:var(--blueberry-deep)}
/* milk-splash motif, drawn not imaged */
.hero__stage::before{content:"";position:absolute;inset:auto -12% -14% -12%;height:52%;
  background:#fff;border-radius:50% 50% 44% 56%/60% 56% 44% 40%;opacity:.55}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:36px;padding:60px 24px 68px}
  .hero__stage{aspect-ratio:4/3}
}

/* ============ ABOVE-THE-FOLD ROTATOR (brand + PRE+PRO) ============
   PRE+PRO now rotates in the hero instead of sitting in its own band
   below it. This actions the brand team's 18 Aug ask for a rotating
   PRE+PRO banner above the fold, and at the same time removes the
   standalone section they said was "taking a lot of real estate".
   Each slide carries exactly ONE primary CTA, so the 28 July
   "single primary CTA above the fold" rule still holds. */
.rotator{position:relative}
.slide{animation:fadeSlide .55s ease both}
@keyframes fadeSlide{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slide{animation:none}}

/* PRE+PRO variant of the hero */
.hero--prepro{background:var(--prepro-gold)}
.hero--prepro .hero__stage{background:#FBF7EE;border:2px dashed rgba(20,33,15,.28)}
/* Once a stage holds real artwork it is no longer a placeholder, so the dashed
   border and holding fill come off. Added as an explicit modifier class rather
   than :has() — see the rotator note above for why state selectors are not
   trustworthy in this component. */
.hero__stage--filled{background:transparent;border:0;overflow:hidden}
.hero__stage--filled img{border-radius:var(--r-lg)}
.hero--prepro .hero__stage--filled{background:transparent;border:0}
.hero--prepro .hero__stage .ph{color:var(--prepro-gold-deep)}
/* the milk-splash motif belongs to the brand slide only — on the PRE+PRO
   slide it read as a stray white ellipse behind the placeholder */
.hero--prepro .hero__stage::before{display:none}
/* CORRECTED 9 Sep 2026. This slide used to run SOLID WHITE text, which was
   right for the provisional dark gold and is wrong for the approved light
   one — white now sits at 1.8:1 and is close to unreadable. Everything on
   the gold field is dark ink instead: 9.22:1 on the flat token, and still
   6.68:1 against the deepest point of the real metallic gradient.
   The heading is included deliberately — .hero h1 sets white further up. */
.hero--prepro h1,
.hero--prepro .lede,
.hero--prepro .lede.on-dark,
.hero--prepro .eyebrow,
.hero--prepro .eyebrow.on-dark,
.hero--prepro .hero__note{color:var(--prepro-gold-ink)}
.badge{display:inline-block;background:var(--prepro-gold-ink);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 15px;border-radius:var(--r-pill);margin-bottom:18px}
/* The "white pill on a brand field" button is a brand-green device. On gold,
   white-on-white has no edge, so this slide gets the solid ink pill. */
.hero--prepro .btn--onGreen{background:var(--prepro-gold-ink);color:#fff}
.hero--prepro .btn--onGreen:hover{background:#000}

/* rotator controls */
.rotator__ui{position:absolute;left:0;right:0;bottom:26px;display:flex;
  justify-content:center;align-items:center;gap:10px;z-index:6}
.dot{width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.9);background:transparent}
.dot[aria-selected="true"]{background:#fff}
.rotator__pause{margin-left:10px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.65);color:#fff;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 15px;cursor:pointer}
.rotator__pause:hover{background:rgba(255,255,255,.28)}

/* Rotator furniture: legible on ANY slide colour, by design.

   The obvious approach is to invert the dots and pause control on the gold
   slide with a state selector. Two versions of that were built and both
   failed live, for the same underlying reason: the rotator switches slides by
   toggling the `hidden` PROPERTY, and Chrome does not re-run selector matching
   for the following siblings when it changes. The rule matches when queried
   with element.matches(), is present in the stylesheet, has winning
   specificity, and still never repaints — it only applies if the node is
   removed and re-inserted. It fails with !important too, and it fails the same
   way whether the state is read via the relational pseudo-class on the parent
   or via a sibling combinator. So it is not a specificity or cascade problem
   and must not be "fixed" by adding !important or reordering.

   The fix is to stop depending on slide state at all: the controls sit on
   their own dark chip, so white furniture reads on the green field and the
   gold one alike. Measured on the chip: white reaches 7.40:1 over the brand
   green and 5.04:1 over the PRE+PRO gold, both comfortably past the 3:1 that
   non-text UI needs.

   If the rotator is ever changed to toggle a CLASS on .rotator instead of the
   hidden property, per-slide theming becomes viable again and this chip can go. */
.rotator__ui{background:rgba(20,33,15,.5);border-radius:var(--r-pill);
  padding:8px 14px;width:max-content;left:50%;right:auto;
  transform:translateX(-50%)}
.launch__spec{font-size:.78rem;color:var(--ink-60);line-height:1.7;
  padding:18px 28px 0;max-width:var(--shell);margin:0 auto}
@media (max-width:900px){.rotator__ui{bottom:14px}}

/* ============================ RANGE ============================ */
.range{padding:104px 0 112px}
.range__head{text-align:center;max-width:620px;margin:0 auto 56px}
.range__head .lede{margin-left:auto;margin-right:auto}
.range__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,33,15,.09)}
.card__media{aspect-ratio:1/1;position:relative}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__flavour{font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase}
.card p{margin:0;font-size:.94rem;color:var(--ink-60);flex:1}
.card__link{font-weight:700;font-size:.92rem;text-decoration:none;
  color:var(--pro-green-deep);display:inline-flex;gap:8px;align-items:center}
.card__link:hover{gap:12px}
/* featured PRE+PRO card spans the row above the four SKUs */
.card--feature{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr;
  border:2px solid var(--flavour-prepro)}
.card--feature .card__media{aspect-ratio:auto;min-height:300px}
.card--feature .card__body{padding:44px 44px 44px 40px;justify-content:center;gap:14px}
.card--feature h3{font-size:clamp(1.5rem,2.5vw,2.1rem)}
/* CORRECTED 9 Sep 2026 alongside the gold token: white on the light gold is
   1.8:1. Dark ink on it is 9.22:1. */
.pill{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--flavour-prepro);color:var(--prepro-gold-ink);
  align-self:flex-start}
@media (max-width:1040px){.range__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .card--feature{grid-template-columns:1fr}
  .card--feature .card__body{padding:28px 24px 32px}
  .range{padding:72px 0 76px}
}
@media (max-width:560px){.range__grid{grid-template-columns:1fr}}

/* ============================ RTB STRIP ============================ */
.rtb{background:var(--paper-warm);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:72px 0}
.rtb__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.rtb__item{text-align:center}
.rtb__icon{width:56px;height:56px;margin:0 auto 18px;border-radius:var(--r-pill);
  background:var(--pro-green);display:grid;place-items:center}
.rtb__icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rtb h3{margin-bottom:8px}
.rtb p{margin:0;font-size:.92rem;color:var(--ink-60)}
@media (max-width:860px){.rtb__grid{grid-template-columns:repeat(2,1fr);gap:32px}}

/* ============================ SHOT-SIZED WINS ============================ */
.wins{background:var(--pro-green);color:#fff;padding:100px 0 108px;overflow:hidden}
.wins__head{max-width:640px;margin-bottom:48px}
.wins h2{color:#fff}
.wins h2 i{font-family:var(--script);font-style:normal;font-weight:700}
.wins__row{display:flex;flex-wrap:wrap;gap:14px}
.win{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill);padding:15px 26px;font-weight:600;font-size:1rem;
  display:flex;align-items:center;gap:12px}
.win__tick{width:22px;height:22px;border-radius:50%;background:#fff;flex:0 0 auto;
  display:grid;place-items:center;color:var(--pro-green);font-size:13px;font-weight:800}

/* ============================ WHY PROLIVE ============================ */
.why{background:var(--blueberry-milk);padding:104px 0}
.why__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.why__media{aspect-ratio:4/3.4;border-radius:var(--r-lg);background:#fff}
.why p{color:#3D2A3C}
.why h2 i{font-family:var(--script);font-style:normal;font-weight:700;
  color:var(--blueberry-deep)}
.why__kicker{margin-top:26px;font-weight:700;color:var(--blueberry-deep);
  font-size:1.05rem}
@media (max-width:900px){
  .why{padding:72px 0}
  .why__in{grid-template-columns:1fr;gap:36px}
}

/* ============================ HUB ============================ */
.hub{padding:104px 0}
.hub__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;margin-bottom:48px;flex-wrap:wrap}
.hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{display:flex;flex-direction:column;gap:16px;text-decoration:none}
.post__media{aspect-ratio:16/10;border-radius:var(--r-md)}
.post__cat{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pro-green-deep)}
.post__cat i{font-family:var(--script);font-style:normal;letter-spacing:0;
  font-size:1.35em;text-transform:none}
.post h3{font-size:1.15rem}
.post:hover h3{color:var(--pro-green-deep)}
@media (max-width:900px){.hub{padding:72px 0}.hub__grid{grid-template-columns:1fr}}

/* ============================ SUPPORT ============================ */
.support{background:var(--paper-warm);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:96px 0;text-align:center}
.support__head{max-width:640px;margin:0 auto}
.support__head .lede{margin-left:auto;margin-right:auto}
.support__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  margin-top:44px;max-width:620px;margin-left:auto;margin-right:auto;text-align:left}
.support__card{display:block;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:28px 26px;background:var(--paper);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease}
.support__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,33,15,.09)}
.support__card h3{margin-bottom:8px}
.support__card p{margin:0;font-size:.92rem;color:var(--ink-60)}
@media (max-width:640px){.support__grid{grid-template-columns:1fr}}

/* ============================ SOCIAL ============================ */
.social{padding:0 0 104px;text-align:center}
.social__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.social__grid .ph{aspect-ratio:1/1;border-radius:var(--r-sm)}
@media (max-width:860px){.social__grid{grid-template-columns:repeat(3,1fr)}
  .social__grid .ph:nth-child(n+4){display:none}}

/* ============================ RETAIL CTA ============================ */
.retail{background:var(--ink);color:#fff;padding:96px 0;text-align:center}
.retail h2{color:#fff;max-width:20ch;margin:0 auto}
.retail h2 i{font-family:var(--script);font-style:normal;font-weight:700}
.retail .lede{margin:20px auto 34px;color:rgba(255,255,255,.78)}
.retail__logos{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-top:44px}
.retail__logo{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);padding:20px 30px;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;color:rgba(255,255,255,.72);text-transform:uppercase}

/* ============================ FOOTER ============================ */
.ftr{background:var(--pro-green);color:#fff;padding:72px 0 34px}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.24)}
.ftr .brand{color:#fff;font-size:1.7rem}
.ftr h4{margin:0 0 16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:rgba(255,255,255,.7)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.95rem}
.ftr a{text-decoration:none;opacity:.92}
.ftr a:hover{opacity:1;text-decoration:underline}
.signup{display:flex;gap:10px;margin-top:18px;max-width:400px}
.signup input{flex:1;min-width:0;padding:15px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  color:#fff;font-family:var(--sans);font-size:.95rem}
.signup input::placeholder{color:rgba(255,255,255,.65)}
.ftr__legal{padding-top:26px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:16px;font-size:.82rem;color:rgba(255,255,255,.72)}
@media (max-width:860px){.ftr__top{grid-template-columns:1fr;gap:36px}}


/* ===================== MULTI-PAGE ADDITIONS ===================== */

/* Products hover dropdown — actions the 18 Aug request. Uses :focus-within
   as well as :hover so it is reachable by keyboard, not mouse only. */
.nav li{position:relative}
.nav__drop{position:absolute;top:100%;left:-14px;min-width:280px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r-md);padding:8px;
  box-shadow:0 20px 44px rgba(20,33,15,.14);display:none;z-index:60}
.nav li:hover .nav__drop,.nav li:focus-within .nav__drop{display:block}
.nav__drop a{display:block;padding:10px 14px;border-radius:var(--r-sm);border-bottom:0;
  font-weight:600;font-size:.92rem}
.nav__drop a:hover{background:var(--paper-warm);color:var(--pro-green-deep)}
.nav__drop .fl{display:block;font-size:.64rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:1px}

/* Page hero. Deliberately the DEEPER green: at #1DA527 solid white body copy
   only reaches 2.91:1 and fails AA. #14761C carries it at 5.77:1. */
.phero{background:var(--pro-green-deep);color:#fff;padding:56px 0 60px}
.phero h1{color:#fff;font-size:clamp(2.3rem,4.4vw,3.6rem)}
.phero h1 i{font-family:var(--script);font-style:normal;font-weight:700}
.phero .lede{color:#fff;margin-top:16px}
/* Breadcrumb defaults to dark — it appears on white product pages as well as
   inside the green hero. Scoping the white to .phero only; without this it is
   white-on-white on every PDP, which is invisible and 1:1 contrast. */
.crumb{font-size:.82rem;font-weight:600;color:var(--ink-60);margin:0 0 14px}
.crumb a{color:var(--pro-green-deep);text-decoration:none;
  border-bottom:1px solid currentColor}
.crumb span{opacity:.6;padding:0 6px}
.phero .crumb{color:#fff}
.phero .crumb a{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* Product detail */
.pdp{padding:72px 0 88px}
.pdp__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pdp__media{aspect-ratio:1/1;border-radius:var(--r-lg)}
.pdp__flav{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pdp h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:10px 0 0}
.pdp__size{color:var(--ink-60);font-weight:600;margin:10px 0 0}
.pdp__benefits{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.pdp__benefits li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.pdp__tick{width:22px;height:22px;border-radius:50%;background:var(--pro-green);
  color:#fff;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:800;
  margin-top:2px}
.buy{margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.buy h3{font-size:1rem;margin-bottom:14px}
.buy__row{display:flex;flex-wrap:wrap;gap:10px}
.buy__logo{border:1px solid var(--rule);border-radius:var(--r-sm);padding:13px 20px;
  font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-60);background:var(--paper-warm)}
.spec{margin-top:56px;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.spec h3{padding:18px 22px;background:var(--paper-warm);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin:0;
  border-bottom:1px solid var(--rule)}
.spec .body{padding:22px}
@media (max-width:900px){.pdp__in{grid-template-columns:1fr;gap:34px}.pdp{padding:48px 0 64px}}

/* Story blocks */
.story{padding:88px 0}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  margin-bottom:72px}
.story__row:last-child{margin-bottom:0}
.story__row:nth-child(even) .story__media{order:2}
.story__media{aspect-ratio:4/3.2;border-radius:var(--r-lg)}
@media (max-width:900px){.story__row{grid-template-columns:1fr;gap:30px;margin-bottom:48px}
  .story__row:nth-child(even) .story__media{order:0}.story{padding:56px 0}}

/* Hub categories */
.cats{padding:0 0 88px}
.cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{border:1px solid var(--rule);border-radius:var(--r-md);padding:24px 22px;
  text-decoration:none;display:block;background:var(--paper);transition:transform .2s ease}
.cat:hover{transform:translateY(-4px);border-color:var(--pro-green)}
.cat .lock{font-weight:800;font-size:1.15rem;color:var(--pro-green-deep)}
.cat .lock i{font-family:var(--script);font-style:normal;font-weight:700}
.cat p{margin:6px 0 0;font-size:.86rem;color:var(--ink-60)}
@media (max-width:900px){.cats__grid{grid-template-columns:repeat(2,1fr)}}

/* Article */
.article{padding:64px 0 88px;max-width:760px;margin:0 auto}
.article .meta{font-size:.84rem;color:var(--ink-60);margin:0 0 26px}
.article__media{aspect-ratio:16/9;border-radius:var(--r-md);margin:0 0 34px}
.article p{font-size:1.05rem;line-height:1.75}
.article h2{font-size:1.6rem;margin:38px 0 14px}
.expert{margin-top:44px;border-left:4px solid var(--pro-green);background:var(--paper-warm);
  padding:24px 26px;border-radius:0 var(--r-md) var(--r-md) 0}
.expert h3{font-size:1rem;margin-bottom:6px}
.expert p{margin:0;font-size:.92rem;color:var(--ink-60)}

/* FAQ accordion */
.faq{padding:64px 0 88px;max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--rule);border-radius:var(--r-md);margin-bottom:12px;
  background:var(--paper);overflow:hidden}
.faq summary{padding:20px 24px;font-weight:700;cursor:pointer;font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--pro-green-deep);
  flex:0 0 auto;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--rule)}
.faq .a{padding:20px 24px;color:var(--ink-60);font-size:.98rem}
.faq .a p{margin:0 0 12px}.faq .a p:last-child{margin:0}

/* Contact form */
.contact{padding:64px 0 88px}
.contact__in{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.field{display:block;margin-bottom:18px}
.field span{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;font-size:1rem;
  font-family:var(--sans);border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.side{background:var(--paper-warm);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:28px}
.side h3{font-size:1rem;margin-bottom:12px}
.side p{margin:0 0 18px;font-size:.94rem;color:var(--ink-60)}
@media (max-width:900px){.contact__in{grid-template-columns:1fr;gap:32px}}

/* Support signposts */
.signposts{padding:64px 0 88px}
.signposts__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  max-width:760px;margin:0 auto}
@media (max-width:640px){.signposts__grid{grid-template-columns:1fr}}

/* ==========================================================================
   KADENCE COMPATIBILITY LAYER
   Kadence ships its own container, button and heading styles. These rules
   stop them fighting the design. Keep this block LAST.
   ========================================================================== */

/* Kadence Row Layout inner container -> our .shell width */
.pl-shell > .kt-row-column-wrap,
.pl-shell .kb-theme-content-width{max-width:var(--shell);padding-left:28px;padding-right:28px}

/* Full-bleed brand fields: let the Row Layout go edge to edge and let our
   section class paint the background. */
.pl-band > .kt-row-column-wrap{max-width:none;padding-left:0;padding-right:0}

/* Kadence Advanced Button -> brand pill button */
.kb-button.btn--primary,.kb-button.btn--ghost,.kb-button.btn--onGreen{
  border-radius:var(--r-pill);font-weight:700;padding:17px 32px}

/* Kadence Advanced Heading inherits our type scale rather than the theme's */
.kb-advanced-heading-wrap h1,.kb-advanced-heading-wrap h2,
.kb-advanced-heading-wrap h3{letter-spacing:-.025em;font-weight:800}

/* The script suffix works inside Kadence headings too: wrap the suffix in
   <i> in the heading's rich text, e.g. Helping Aussies PRO through <i>life</i>. */
.kb-advanced-heading-wrap i,.entry-content i.pl-script{
  font-family:var(--script);font-style:normal;font-weight:700;letter-spacing:0}

/* Kadence sticky header uses its own wrapper; match the design's header. */
.site-header-row-container-inner{background:rgba(255,255,255,.94)}

/* ---------- Real logo, wired in 9 Sep 2026 ----------
   The design comp set the wordmark in type (`pro` + script `live`) because the
   real mark had not been supplied. It has now, so the header uses the actual
   logo image and the theme's text site-title is hidden — otherwise Kadence
   renders BOTH and the header reads "logo ProLive". */
.site-header .site-title{display:none}

/* The supplied logo is a single green wordmark on transparency. It reads on
   the white header, but on the brand-green footer field green-on-green is
   invisible. brightness(0) crushes it to black, invert(1) lifts it to pure
   white — a one-colour mark survives that intact.
   Replace this with a real white/reversed logo file as soon as Manassen
   supplies one; a filter is a stopgap, not a brand asset. */
.ftr__logo{display:inline-block;line-height:0}
.ftr__logo img{width:auto;height:44px;filter:brightness(0) invert(1)}

/* Gutenberg strips <details>; the FAQ page uses Kadence Accordion instead.
   These rules dress the Kadence Accordion to match the design's .faq block. */
.faq .kt-accordion-panel-inner{padding:20px 24px;color:var(--ink-60);font-size:.98rem}
.faq .kt-blocks-accordion-header{padding:20px 24px;font-weight:700;font-size:1.02rem}
.faq .kt-accordion-pane{border:1px solid var(--rule);border-radius:var(--r-md);
  margin-bottom:12px;background:var(--paper);overflow:hidden}

/* Print: drop the brand fields to ink on white so PDFs stay legible. */
@media print{
  .hero,.wins,.ftr,.retail,.phero{background:#fff!important;color:var(--ink)!important}
  .hero h1,.wins h2,.retail h2,.phero h1{color:var(--ink)!important}
  .hdr,.rotator__ui,.social{display:none!important}
}

/* ==========================================================================
   GRAVITY FORMS COMPATIBILITY LAYER
   The contact form (GF id 1) and the footer newsletter (GF id 2) ship with
   Gravity Forms' own theme. These rules dress them as the ProLive design's
   .field / .btn components so the forms match the rest of the site.
   Keep this block LAST.
   ========================================================================== */

/* Gravity Forms' Orbital theme applies an aggressive reset to every descendant,
   which wipes INHERITED custom properties inside the form. The design tokens
   therefore have to be re-declared on the wrapper and its descendants, or every
   var() below silently resolves to nothing. This is the load-bearing rule in
   this whole block - do not remove it. */
.gform_wrapper, .gform_wrapper *{
  --pro-green:#1DA527; --pro-green-deep:#14761C; --pro-green-ink:#0C3E11;
  --blueberry:#9C1D98; --blueberry-deep:#711070;
  --ink:#14210F; --ink-60:#5A6456; --rule:#E3E7E1;
  --paper:#FFFFFF; --paper-warm:#FBF8FA;
  --r-sm:10px; --r-md:18px; --r-pill:999px;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif}

/* --- Field labels: match the design's .field span --- */
.gform_wrapper .gfield_label{
  display:block;font-family:var(--sans);font-weight:700;font-size:.88rem;
  color:var(--ink);margin-bottom:7px}
.gform_wrapper .gfield_required{color:var(--blueberry);font-weight:700}

/* --- Inputs, textareas and selects: match .field input --- */
.gform_wrapper .gform_fields input[type=text],
.gform_wrapper .gform_fields input[type=email],
.gform_wrapper .gform_fields input[type=tel],
.gform_wrapper .gform_fields input[type=url],
.gform_wrapper .gform_fields textarea,
.gform_wrapper .gform_fields select{
  width:100%;padding:14px 16px;font-size:1rem;font-family:var(--sans);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);box-shadow:none}
.gform_wrapper .gform_fields textarea{min-height:150px;resize:vertical}
.gform_wrapper .gform_fields input:focus,
.gform_wrapper .gform_fields textarea:focus,
.gform_wrapper .gform_fields select:focus{
  outline:3px solid var(--blueberry);outline-offset:2px;border-color:var(--rule)}

/* Native select needs its own chevron once the GF theme is overridden. */
.gform_wrapper .gform_fields select{
  appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6456' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}

/* --- Submit button: the brand green pill --- */
/* !important is deliberate and load-bearing here. BOTH Gravity Forms' Orbital
   framework and Kadence's global button styles claim input[type=submit] with
   rules that out-rank a plain descendant selector, so the brand pill will not
   render without it. Scoped to the submit button only - nothing else in this
   stylesheet uses !important. */
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button[type=submit],
.gform_wrapper .gform-footer input[type=submit],
.gform_wrapper .gform-footer button[type=submit]{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--sans)!important;font-weight:700!important;font-size:1rem!important;
  padding-inline:32px!important;padding-block:17px!important;
  height:auto!important;line-height:1.2!important;
  border-radius:var(--r-pill)!important;border:2px solid transparent!important;
  background:var(--pro-green)!important;color:#fff!important;
  cursor:pointer;width:auto!important;
  transition:transform .18s ease,background .18s ease}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_footer button[type=submit]:hover,
.gform_wrapper .gform-footer input[type=submit]:hover,
.gform_wrapper .gform-footer button[type=submit]:hover{
  background:var(--pro-green-deep)!important;transform:translateY(-2px)}

/* --- Validation + confirmation --- */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  color:var(--blueberry-deep);font-size:.88rem;margin-top:6px;
  background:none;border:0;padding:0}
.gform_wrapper .gform_validation_errors{
  border:1px solid var(--blueberry);border-radius:var(--r-sm);
  background:#FBF3FB;box-shadow:none}
.gform_wrapper .gform_validation_errors h2{color:var(--blueberry-deep);font-size:1rem}
.gform_confirmation_message{
  font-size:1.05rem;color:var(--pro-green-deep);font-weight:600;
  padding:22px 24px;background:var(--paper-warm);
  border-left:4px solid var(--pro-green);border-radius:0 var(--r-md) var(--r-md) 0}

/* ==========================================================================
   FOOTER NEWSLETTER (GF id 2) — inline on the green field
   Kadence strips <input> from its footer HTML element, so the signup is a
   Gravity Form instead. It sits on the brand green, so it is inverted.
   ========================================================================== */
.ftr .gform_wrapper{margin-top:18px;max-width:400px}
.ftr .gform_wrapper form{display:flex;gap:10px;align-items:flex-start}
.ftr .gform_wrapper .gform_body{flex:1;min-width:0}
.ftr .gform_wrapper .gfield_label,
.ftr .gform_wrapper .gform_required_legend{display:none}
.ftr .gform_wrapper .gform_fields input[type=email]{
  padding:15px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  color:#fff;font-size:.95rem}
.ftr .gform_wrapper .gform_fields input[type=email]::placeholder{color:rgba(255,255,255,.65)}
.ftr .gform_wrapper .gform_footer{margin:0;padding:0}
.ftr .gform_wrapper .gform_footer input[type=submit],
.ftr .gform_wrapper .gform-footer input[type=submit]{
  background:#fff!important;color:var(--pro-green-deep)!important;
  padding-inline:26px!important;padding-block:15px!important;white-space:nowrap}
.ftr .gform_wrapper .gform_footer input[type=submit]:hover,
.ftr .gform_wrapper .gform-footer input[type=submit]:hover{
  background:#fff!important;opacity:.9}
.ftr .gform_confirmation_message{
  background:rgba(255,255,255,.14);color:#fff;border-left-color:#fff;
  padding:14px 18px;font-size:.95rem}
.ftr .gform_wrapper .gfield_validation_message,
.ftr .gform_wrapper .validation_message{color:#fff}
@media (max-width:520px){
  .ftr .gform_wrapper form{flex-direction:column}
  .ftr .gform_wrapper .gform_footer input[type=submit]{width:100%;justify-content:center}
}

/* Gravity Forms' framework sizes fields from its own --gf-local-* custom
   properties, fed through a :where() rule that pins line-height (and therefore
   height) on every input, select and textarea. Resetting those properties here
   lets the design's own padding set the field height again - without this the
   footer signup box collapses to 38px against a 53px button. No !important
   needed: :where() contributes no specificity. */
.gform_wrapper .gfield input:not([type=submit]),
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select{
  --gf-local-height:auto;
  --gf-local-line-height:1.45;
  height:auto;
  line-height:1.45}


/* v1.5.2 — wpautop wraps the shortcode's loose <span class="pill"> in a <p>,
   which breaks the card's flex column (the pill stretched full width instead of
   sitting flush left). display:contents removes the stray wrapper from layout
   without touching the markup the shortcode emits. */
.range__grid .card > p{display:contents}

/* ==========================================================================
   HUB v1.6.0 — the Gut Health Hub, driven by real Posts.
   Extends the design's .hub / .post / .cat / .article components with the
   filter tabs, load-more and card meta the dynamic version needs.
   ========================================================================== */

/* Filter tabs. The design showed these as a single row; they wrap on narrow
   screens rather than scrolling, so no content is reachable only by dragging. */
.hub__tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px}
.hub__tabs .tab{display:inline-block;padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-60);
  font-size:.86rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.hub__tabs .tab:hover{border-color:var(--pro-green);color:var(--pro-green-deep)}
.hub__tabs .tab.is-active{background:var(--pro-green);border-color:var(--pro-green);
  color:#fff}

/* Pillar intro, shown when the Hub is filtered to one category. */
.hub__intro{max-width:62ch;margin:0 0 44px}
.hub__intro h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.hub__intro h2 i{font-family:var(--script);font-style:normal;font-weight:700;letter-spacing:0}
.hub__intro .lede{margin-top:14px}

/* Card additions: excerpt and date/read-time line. .post is a flex column in
   the design, so the meta line is pushed to the bottom to keep card feet level
   whatever the headline length. */
.post__excerpt{margin:0;font-size:.92rem;color:var(--ink-60);line-height:1.6}
.post__meta{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink-60);opacity:.85;margin-top:auto;padding-top:4px}
.post{color:inherit}
.post h3,.post p{text-decoration:none}
.post__media{overflow:hidden}
.post__media img{transition:transform .35s ease}
.post:hover .post__media img{transform:scale(1.035)}

/* Kadence underlines links inside .entry-content. The whole card is a link, so
   without this every headline, excerpt and meta line renders underlined —
   the same fault that hit the product cards. */
.entry-content .post,.entry-content .post *,
.entry-content .cat,.entry-content .cat *,
.entry-content .hub__tabs .tab{text-decoration:none}

/* Load more */
.hub__more{display:flex;justify-content:center;margin-top:52px}

.hub__empty{text-align:center;color:var(--ink-60);padding:56px 0 8px;font-size:1.02rem}

/* Pillar tiles carry an article count now that the taxonomy is real. */
.cat__count{margin-top:12px;font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pro-green-deep);opacity:.8}
.cat .lock{display:block;font-weight:800;font-size:1.15rem;color:var(--pro-green-deep)}
.cat .lock i{font-family:var(--script);font-style:normal;font-weight:700;letter-spacing:0;
  font-size:1.3em}

/* Single article ---------------------------------------------------------- */

/* The article body is rendered by the child theme, which supplies its own
   .phero with the title and breadcrumb. Kadence's own entry header would
   repeat the title immediately above it, so it is suppressed on posts only. */
.single-post .entry-hero,
.single-post .entry-header,
.single-post .entry-taxonomies,
.single-post .entry-meta{display:none}
.single-post .entry-content{margin-top:0}

.article .meta a.lock{color:var(--pro-green-deep);font-weight:800;text-decoration:none;
  letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.article .meta a.lock i{font-family:var(--script);font-style:normal;letter-spacing:0;
  font-size:1.35em;text-transform:none}
.article__media img{display:block}
.article ul,.article ol{font-size:1.05rem;line-height:1.75;color:var(--ink);
  padding-left:1.3em;margin:0 0 20px}
.article li{margin-bottom:8px}
.article blockquote{margin:34px 0;padding:22px 26px;border-left:4px solid var(--pro-green);
  background:var(--paper-warm);border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:1.12rem;line-height:1.6;font-weight:600}
.article blockquote p:last-child{margin:0}
.article a{color:var(--pro-green-deep);text-decoration:underline;text-underline-offset:3px}

/* "More from the Hub" sits directly under the article body. */
.single-post .hub{padding-top:24px}
@media (max-width:900px){.hub__tabs{margin-bottom:32px}}

/* --------------------------------------------------------------------------
   Single article: let the child theme's own layout run the page.
   Kadence's single-post view is a narrow (842px) boxed container with its own
   featured-image block above the entry. The article body rendered by the child
   theme already supplies a full-bleed .phero, its own hero image and a .shell,
   so Kadence's furniture is stood down here rather than fought with margins.
   All of this is scoped to .single-post - archives and pages are untouched.
   -------------------------------------------------------------------------- */
.single-post .post-thumbnail.article-post-thumbnail{display:none}
.single-post .content-container.site-container{max-width:none;padding-left:0;padding-right:0}
.single-post .site-main,
.single-post .content-wrap,
.single-post .entry.content-bg,
.single-post .entry-content-wrap{max-width:none;padding:0;margin:0;
  background:none;box-shadow:none;border:0}
.single-post .entry-content.single-content{max-width:none}
/* Post-to-post navigation keeps the design's container. */
.single-post .navigation.post-navigation{max-width:var(--shell);margin:0 auto;
  padding:0 28px 72px}

/* Hub page rhythm: the pillar tiles and the article listing are two separate
   shortcode sections, so their stacked vertical padding doubled up. */
.cats{padding:76px 0 8px}
.cats ~ .hub{padding-top:52px}

/* ==========================================================================
   WHERE TO BUY - store locator
   Two-column on desktop: sticky map beside a scrolling result list. One column
   on mobile, map first, because "where is it" is the question being asked.
   ========================================================================== */
.locator{padding:76px 0 96px}

/* --- controls --- */
.locator__bar{margin-bottom:32px}
.locator__search{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.locator__search input[type=search]{flex:1;min-width:220px;max-width:420px;
  padding:15px 18px;font-size:1rem;font-family:var(--sans);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper)}
.locator__search input[type=search]:focus{outline:3px solid var(--blueberry);outline-offset:2px}
.locator__geo{background:none;border:0;padding:12px 4px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--pro-green-deep);
  text-decoration:underline;text-underline-offset:3px}
.locator__geo:hover{color:var(--ink)}

/* Retailer chips. --chip carries the retailer's brand colour, so the dot and the
   selected state are the retailer's own colour without a rule per retailer. */
.locator__chips{display:flex;flex-wrap:wrap;gap:10px}
.locator__chips .chip{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--rule);
  background:var(--paper);font-family:var(--sans);font-size:.88rem;font-weight:700;
  color:var(--ink-60);transition:border-color .18s ease,color .18s ease,background .18s ease}
.locator__chips .chip em{font-style:normal;font-weight:600;opacity:.7;font-size:.8rem}
.chip__dot{width:11px;height:11px;border-radius:50%;background:var(--chip,var(--pro-green));
  flex:0 0 auto}
.locator__chips .chip:hover{border-color:var(--chip,var(--pro-green));color:var(--ink)}
.locator__chips .chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.locator__chips .chip.is-active .chip__dot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}

/* --- map + list --- */
.locator__in{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.locator__map{height:620px;border-radius:var(--r-lg);overflow:hidden;
  position:sticky;top:96px;background:var(--paper-warm)}
.locator__map.ph{display:grid;place-items:center;padding:40px;text-align:center}
.locator__list{max-height:620px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.locator__count{margin:0 0 14px;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60)}
.locator__empty{color:var(--ink-60);padding:32px 0}

/* --- one store --- */
.store{border:1px solid var(--rule);border-radius:var(--r-md);padding:22px 24px;
  background:var(--paper);margin-bottom:12px;transition:border-color .2s ease,box-shadow .2s ease}
.store.is-active{border-color:var(--pro-green);box-shadow:0 14px 34px rgba(20,33,15,.10)}
.store__retailer{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60)}
.store h3{font-size:1.05rem;margin-bottom:6px}
.store__addr{margin:0;font-size:.92rem;color:var(--ink-60);line-height:1.55}
.store__dist{margin:8px 0 0;font-size:.85rem;font-weight:700;color:var(--pro-green-deep)}
.store__hours{margin:8px 0 0;font-size:.86rem;color:var(--ink-60);white-space:pre-line}
.store__note{margin:10px 0 0;font-size:.84rem;color:var(--blueberry-deep);font-weight:600}
.store__skus{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.store__skus span{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--paper-warm);
  border:1px solid var(--rule);color:var(--ink-60)}
.store__links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:16px 0 0}
.store__links .btn{padding:11px 20px;font-size:.86rem}
.store__dir{font-weight:700;font-size:.88rem;color:var(--pro-green-deep);
  text-decoration:underline;text-underline-offset:3px}

/* Google's InfoWindow reuses the .store card, so it needs its own trim. */
.gm-style .store{border:0;padding:4px 2px 2px;margin:0}
.gm-style .store__links .btn{padding:9px 16px}

/* Kadence underlines content links; the cards carry their own link treatment. */
.entry-content .store a,.entry-content .locator__chips .chip{text-decoration:none}
.entry-content .store__dir{text-decoration:underline}

@media (max-width:1040px){
  .locator__in{grid-template-columns:1fr}
  .locator__map{position:static;height:420px}
  .locator__list{max-height:none;overflow:visible;padding-right:0}
}
@media (max-width:560px){
  .locator{padding:56px 0 72px}
  .locator__search input[type=search]{max-width:none}
  .locator__search .btn{width:100%;justify-content:center}
}

/* --- "how to spot it" strip on the Where To Buy page --- */
.spot{background:var(--paper-warm);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:72px 0}
.spot__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.spot__item h3{margin-bottom:8px}
.spot__item p{margin:0;font-size:.94rem;color:var(--ink-60)}
.spot__num{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);
  background:var(--pro-green);color:#fff;font-weight:800;margin-bottom:16px}
@media (max-width:860px){.spot__grid{grid-template-columns:1fr;gap:26px}}

/* --------------------------------------------------------------------------
   Brand script font, wired in 10 September 2026.
   Amertha is now self-hosted through Kadence Custom Fonts (kt_font "Amertha",
   WOFF converted from the supplied Amertha.otf), so the script suffix in the
   PRO- lockups is the real brand face rather than the Dancing Script stand-in.
   Dancing Script stays in the stack purely as a fallback for the moment the
   custom font 404s; it comes out of the enqueue during the Kadence rebuild.

   STILL OUTSTANDING: IvyEpic, the display face, cannot be self-hosted at all —
   it is an Adobe Font and the key visual's package report lists it under
   "Protected Fonts that were not packaged". It needs an Adobe Fonts web
   project on a Creative Cloud licence (Kadence Custom Fonts has an "adobe"
   font type for exactly this), or a web-licensed substitute. Poppins stands in.
   -------------------------------------------------------------------------- */
:root{
  --script:'Amertha','Dancing Script',cursive;
}