/* Fresh Label design layer — scoped under .fl. Loaded after styles.css.
   Old templates never receive these rules; new header/footer/front-page do. */

/* ============================================================
   NUTRIENTS CALCULATOR — "FRESH LABEL" REDESIGN
   Deep pine + fresh lime + sage paper. No pure white anywhere.
   Signature: FDA nutrition-facts-label design language
   (thick top rules, hairline dividers, bold data rows)
   ============================================================ */
.fl{
  --pine-950:#0A2318;
  --pine-900:#0E2E1F;
  --pine-800:#154029;
  --pine-700:#1C5236;
  --lime-400:#B7E34A;
  --lime-300:#CBEF6E;
  --lime-glow:rgba(183,227,74,.18);
  --sage-bg:#EDF2E4;      /* main light background — warm sage paper */
  --sage-deep:#E2EAD4;    /* alternating section tint */
  --card:#F7FAF0;         /* card surface */
  --ink:#12271B;
  --ink-soft:#3C5346;
  --ink-faint:#5F7568;
  --amber:#F0B23E;
  --rule:#12271B;
  --hairline:rgba(18,39,27,.14);
  --hairline-dark:rgba(247,250,240,.14);
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px -12px rgba(10,35,24,.22);
  --shadow-lg:0 24px 60px -20px rgba(10,35,24,.35);
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Instrument Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --max:1520px;
}
.fl *{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){
.fl *, .fl *::before, .fl *::after{animation:none!important;transition:none!important}
}
.fl{
  font-family:var(--font-body);
  background:var(--sage-bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.fl img{max-width:100%;display:block}
.fl a{color:inherit;text-decoration:none}
.fl button{font-family:inherit;cursor:pointer}
.fl .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Nutrition-label vernacular (signature system) ---------- */
.fl .nl-rule{border:none;border-top:7px solid var(--rule);margin:0}
.fl .nl-rule--thin{border-top-width:1px;border-top-color:var(--hairline)}
.fl .eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.fl .eyebrow::before{content:"";width:26px;height:5px;background:var(--lime-400)}
.fl .eyebrow--dark{color:rgba(247,250,240,.75)}
.fl h1, .fl h2, .fl h3, .fl h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em}
.fl .section-head{max-width:640px;margin-bottom:44px}
.fl .section-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;margin:.5em 0 .35em}
.fl .section-head p{color:var(--ink-soft);font-size:1.05rem}
.fl .accent{color:var(--pine-700);position:relative}
.fl .accent-lime{color:var(--lime-400)}
.fl .mark{background:linear-gradient(transparent 62%,var(--lime-400) 62%,var(--lime-400) 94%,transparent 94%)}
.fl section{padding:88px 0}
@media(max-width:760px){
.fl section{padding:60px 0}
}

/* ---------- Buttons ---------- */
.fl .btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:.95em 1.7em;border-radius:999px;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.fl .btn:focus-visible{outline:3px solid var(--lime-400);outline-offset:3px}
.fl .btn-lime{background:var(--lime-400);color:var(--pine-950)}
.fl .btn-lime:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(183,227,74,.55)}
.fl .btn-pine{background:var(--pine-900);color:var(--card)}
.fl .btn-pine:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.fl .btn-ghost{border-color:var(--hairline-dark);color:var(--card);background:transparent}
.fl .btn-ghost:hover{background:rgba(247,250,240,.08)}
.fl .btn-ghost-light{border-color:var(--ink);color:var(--ink);background:transparent}
.fl .btn-ghost-light:hover{background:rgba(18,39,27,.06)}
.fl .btn-sm{font-size:.85rem;padding:.65em 1.3em}

/* ---------- Affiliate ticker ---------- */
.fl .ticker{
  background:var(--pine-950);color:rgba(247,250,240,.85);
  font-family:var(--font-mono);font-size:.75rem;
  padding:9px 0;border-bottom:1px solid var(--hairline-dark);
}
.fl .ticker .wrap{display:flex;justify-content:center;gap:.6em;flex-wrap:wrap;align-items:center;text-align:center}
.fl .ticker .pill{background:var(--amber);color:var(--pine-950);font-weight:600;padding:.15em .8em;border-radius:999px;font-size:.68rem;letter-spacing:.06em}
.fl .ticker a{color:var(--lime-300);text-decoration:underline;text-underline-offset:3px}
.fl .ticker .aff{opacity:.55;font-size:.65rem}

/* ---------- Header ---------- */
.fl header.site{
  position:sticky;top:0;z-index:90;
  background:rgba(10,35,24,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-dark);
}
.fl header.site .wrap{display:flex;align-items:center;gap:32px;height:72px}
.fl .logo{display:flex;align-items:center;gap:10px;color:var(--card);font-family:var(--font-display)}
.fl .logo-mark{
  width:40px;height:40px;border-radius:12px;background:var(--lime-400);
  display:grid;place-items:center;color:var(--pine-950);
  font-weight:800;font-size:1.3rem;flex-shrink:0;
}
.fl .logo-text{line-height:1.05;font-weight:700}
.fl .logo-text small{display:block;font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lime-300)}
.fl nav.main{display:flex;gap:4px;margin-left:auto}
.fl nav.main a{
  color:rgba(247,250,240,.8);font-weight:500;font-size:.93rem;
  padding:.5em .85em;border-radius:999px;transition:background .15s,color .15s;
}
.fl nav.main a:hover{color:var(--card);background:rgba(247,250,240,.08)}
.fl nav.main a.active{color:var(--pine-950);background:var(--lime-400);font-weight:600}
.fl .header-cta{display:flex;align-items:center;gap:14px}
.fl .header-user{color:rgba(247,250,240,.8);font-size:.9rem;display:flex;align-items:center;gap:.4em}
.fl .menu-btn{display:none;background:none;border:none;color:var(--card);font-size:1.6rem}
@media(max-width:1020px){
.fl nav.main, .fl .header-user{display:none}
.fl .menu-btn{display:block;margin-left:auto}
}

/* ---------- Hero ---------- */
.fl .hero{
  background:
    radial-gradient(900px 480px at 82% -10%,rgba(183,227,74,.14),transparent 60%),
    radial-gradient(700px 500px at -10% 110%,rgba(28,82,54,.7),transparent 55%),
    var(--pine-950);
  color:var(--card);
  padding:84px 0 96px;position:relative;overflow:hidden;
}
.fl .hero::after{ /* faint leaf-vein texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,rgba(247,250,240,.9) 1px,transparent 0);
  background-size:26px 26px;
}
.fl .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;position:relative;z-index:1}
.fl .hero-badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime-300);border:1px solid rgba(183,227,74,.35);
  padding:.5em 1.1em;border-radius:999px;margin-bottom:26px;background:rgba(183,227,74,.07);
}
.fl .hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800;margin-bottom:22px}
.fl .hero h1 .flash{
  color:var(--lime-400);font-style:italic;position:relative;white-space:nowrap;
}
.fl .hero p.lede{font-size:1.15rem;color:rgba(247,250,240,.75);max-width:460px;margin-bottom:34px}
.fl .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.fl .hero-proof{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.78rem;color:rgba(247,250,240,.65)}
.fl .hero-proof span{display:inline-flex;align-items:center;gap:.5em}
.fl .hero-proof .tick{color:var(--lime-400);font-weight:600}

/* Nutrition-facts styled analyzer card */
.fl .facts-card{
  background:var(--card);color:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px 26px 22px;
  transform:rotate(.6deg);
}
.fl .facts-card .fc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.fl .facts-card h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.fl .facts-card .fc-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.fl .fc-rule{border:none;border-top:8px solid var(--ink);margin:10px 0}
.fl .fc-rule.mid{border-top-width:4px}
.fl .fc-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px solid var(--hairline);font-size:.95rem}
.fl .fc-row:last-of-type{border-bottom:none}
.fl .fc-row .k{font-weight:600;display:flex;align-items:center;gap:.6em}
.fl .fc-row .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.fl .fc-row .v{font-family:var(--font-mono);font-weight:600;font-size:.88rem}
.fl .fc-kcal{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 2px 4px}
.fl .fc-kcal .num{font-family:var(--font-display);font-size:3.1rem;font-weight:800;line-height:1}
.fl .fc-kcal .num small{font-size:1.05rem;font-weight:600;color:var(--ink-soft);margin-left:.2em}
.fl .fc-kcal .plus{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);text-align:right}
.fl .fc-scan{
  margin-top:16px;background:var(--pine-900);color:var(--card);border:none;width:100%;
  border-radius:12px;padding:1em;font-family:var(--font-display);font-weight:600;font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:.6em;
  transition:background .18s;
}
.fl .fc-scan:hover{background:var(--pine-700)}
.fl .fc-scan .pulse{width:9px;height:9px;border-radius:50%;background:var(--lime-400);animation:fl-pulse 1.6s infinite}
@keyframes fl-pulse{0%,100%{box-shadow:0 0 0 0 var(--lime-glow)}50%{box-shadow:0 0 0 8px transparent}}
.fl .fc-note{margin-top:10px;text-align:center;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint)}
.fl .fc-foods{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px}
.fl .fc-food{
  display:flex;align-items:center;gap:12px;background:var(--sage-deep);
  border-radius:12px;padding:9px 12px;
}
.fl .fc-food .emoji{font-size:1.35rem}
.fl .fc-food .name{font-weight:600;font-size:.92rem}
.fl .fc-food .cal{margin-left:auto;font-family:var(--font-mono);font-size:.78rem;background:var(--card);padding:.2em .7em;border-radius:999px;border:1px solid var(--hairline)}
.fl .fc-ai{
  position:absolute;top:-14px;right:22px;background:var(--lime-400);color:var(--pine-950);
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  padding:.45em 1em;border-radius:999px;text-transform:uppercase;
  box-shadow:0 6px 18px -6px rgba(183,227,74,.6);
}
.fl .hero-card-wrap{position:relative}
@media(max-width:960px){
.fl .hero .wrap{grid-template-columns:1fr;gap:48px}
.fl .facts-card{transform:none}
}

/* ---------- Trust strip ---------- */
.fl .trust-strip{background:var(--pine-900);border-top:1px solid var(--hairline-dark);padding:18px 0}
.fl .trust-strip .wrap{display:flex;justify-content:center;gap:12px 44px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.78rem;color:rgba(247,250,240,.7)}
.fl .trust-strip span{display:inline-flex;gap:.55em;align-items:center}
.fl .trust-strip .tick{color:var(--lime-400)}

/* ---------- Product cards (bestsellers / trusted row) ---------- */
.fl .bestsellers{background:var(--sage-bg)}
.fl .section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.fl .section-top .section-head{margin-bottom:0}
.fl .viewall{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--pine-700);border-bottom:2px solid var(--lime-400);padding-bottom:2px;white-space:nowrap}
.fl .prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){
.fl .prod-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.fl .prod-grid{grid-template-columns:repeat(2,1fr)}
}
.fl .prod-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.fl .prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fl .prod-img{aspect-ratio:1/1;display:grid;place-items:center;font-size:3rem;position:relative}
.fl .prod-badge{
  position:absolute;top:10px;left:10px;font-family:var(--font-mono);
  font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pine-950);color:var(--lime-300);padding:.4em .8em;border-radius:999px;
}
.fl .prod-badge.amber{background:var(--amber);color:var(--pine-950)}
.fl .prod-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:5px solid var(--ink)}
.fl .prod-body h4{font-size:.92rem;font-weight:700;line-height:1.3}
.fl .prod-stars{font-size:.72rem;color:var(--amber);letter-spacing:.05em}
.fl .prod-stars small{color:var(--ink-faint);font-family:var(--font-mono)}
.fl .prod-price{font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin-top:auto}
.fl .prod-price s{font-size:.8rem;color:var(--ink-faint);font-weight:500;margin-right:.4em}
.fl .prod-cta{
  margin-top:8px;background:var(--pine-900);color:var(--card);text-align:center;
  border-radius:10px;padding:.6em;font-weight:600;font-size:.82rem;transition:background .15s;
}
.fl .prod-cta:hover{background:var(--pine-700)}
.fl .aff-note{
  margin-top:22px;display:flex;justify-content:center;gap:10px 30px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);
}

/* ---------- How it works ---------- */
.fl .how{background:var(--sage-deep)}
.fl .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.fl .step{padding:38px 32px;position:relative;border-top:7px solid var(--ink)}
.fl .step+.step{border-left:1px solid var(--hairline)}
.fl .step .num{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--pine-700);
  letter-spacing:.14em;display:block;margin-bottom:18px;
}
.fl .step .ico{
  width:54px;height:54px;border-radius:14px;background:var(--lime-glow);
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px;
}
.fl .step h3{font-size:1.25rem;font-weight:700;margin-bottom:10px}
.fl .step p{color:var(--ink-soft);font-size:.95rem}
@media(max-width:860px){
.fl .steps{grid-template-columns:1fr}
.fl .step+.step{border-left:none;border-top:1px solid var(--hairline)}
.fl .step{border-top-width:0}
.fl .step:first-child{border-top:7px solid var(--ink)}
}

/* ---------- Feature panel (dark) ---------- */
.fl .features{background:var(--sage-deep);padding-top:0}
.fl .feature-panel{
  background:
    radial-gradient(700px 400px at 100% 0%,rgba(183,227,74,.1),transparent 55%),
    var(--pine-950);
  color:var(--card);border-radius:28px;padding:64px 56px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  box-shadow:var(--shadow-lg);
}
.fl .feature-panel h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;margin:.5em 0 .8em}
.fl .feature-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:34px}
.fl .feature-list li{
  display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--hairline-dark);
  align-items:flex-start;
}
.fl .feature-list li:first-child{border-top:5px solid var(--lime-400)}
.fl .feature-list .fico{
  width:34px;height:34px;border-radius:10px;background:rgba(183,227,74,.14);
  display:grid;place-items:center;font-size:1rem;flex-shrink:0;color:var(--lime-300);
}
.fl .feature-list b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem}
.fl .feature-list span{color:rgba(247,250,240,.62);font-size:.88rem}
/* breakdown card inside panel */
.fl .break-card{
  background:var(--card);color:var(--ink);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-lg);transform:rotate(-.6deg);
}
.fl .break-tabs{display:flex;gap:6px;margin-bottom:16px}
.fl .break-tabs button{
  border:1px solid var(--hairline);background:transparent;border-radius:999px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;padding:.45em 1.1em;color:var(--ink-soft);
}
.fl .break-tabs button.on{background:var(--pine-900);color:var(--card);border-color:var(--pine-900)}
.fl .break-card h4{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.fl .donut-row{display:flex;align-items:center;gap:22px;padding:14px 0}
.fl .donut{position:relative;width:118px;height:118px;flex-shrink:0}
.fl .donut svg{transform:rotate(-90deg)}
.fl .donut .center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.fl .donut .center b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;display:block;line-height:1}
.fl .donut .center small{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-faint);letter-spacing:.1em}
.fl .macro-legend{flex:1;display:flex;flex-direction:column}
.fl .macro-legend .fc-row{padding:7px 0}
.fl .top-sources h5{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:12px;margin-bottom:2px;
}
@media(max-width:960px){
.fl .feature-panel{grid-template-columns:1fr;padding:44px 28px}
.fl .break-card{transform:none}
}

/* ---------- Unlock banner ---------- */
.fl .unlock{padding:0;background:var(--sage-bg)}
.fl .unlock-inner{
  border:2px solid var(--ink);border-radius:20px;background:var(--lime-400);
  padding:26px 34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  box-shadow:6px 6px 0 var(--ink);
}
.fl .unlock-inner .big{font-size:1.8rem}
.fl .unlock-inner h3{font-size:1.2rem;font-weight:700}
.fl .unlock-inner p{font-size:.92rem;color:var(--pine-900)}
.fl .unlock-inner .btn{margin-left:auto}
@media(max-width:720px){
.fl .unlock-inner .btn{margin-left:0}
}

/* ---------- Goals grid ---------- */
.fl .goals{background:var(--sage-bg)}
.fl .goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){
.fl .goal-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.fl .goal-grid{grid-template-columns:1fr}
}
.fl .goal-card{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:28px 26px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;
}
.fl .goal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--ink)}
.fl .goal-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fl .goal-card:hover::before{background:var(--lime-400)}
.fl .goal-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;margin-bottom:16px}
.fl .goal-card h3{font-size:1.12rem;font-weight:700;margin-bottom:8px}
.fl .goal-card p{color:var(--ink-soft);font-size:.92rem}

/* ---------- Blog / explore ---------- */
.fl .explore{background:var(--sage-deep)}
.fl .tab-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.fl .tab-row button{
  border:1px solid var(--hairline);background:var(--card);border-radius:999px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:600;padding:.55em 1.3em;
  color:var(--ink-soft);transition:all .15s;
}
.fl .tab-row button.on, .fl .tab-row button:hover{background:var(--pine-900);color:var(--card);border-color:var(--pine-900)}
.fl .blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){
.fl .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.fl .blog-grid{grid-template-columns:1fr}
}
.fl .blog-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline);display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.fl .blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fl .blog-img{aspect-ratio:16/11;display:grid;place-items:center;font-size:3rem}
.fl .blog-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:5px solid var(--ink)}
.fl .blog-cat{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pine-700)}
.fl .blog-body h3{font-size:1.02rem;font-weight:700;line-height:1.35}
.fl .blog-meta{margin-top:auto;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint)}

/* ---------- Trusted row ---------- */
.fl .trusted{background:var(--sage-bg)}
.fl .trusted-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.fl .trusted-head .eyebrow{font-size:.78rem}
.fl .sponsored-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--hairline);padding:.4em 1em;border-radius:999px}
.fl .trusted-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){
.fl .trusted-grid{grid-template-columns:1fr}
}
.fl .trusted-card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--hairline);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.fl .trusted-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fl .trusted-img{aspect-ratio:16/10;display:grid;place-items:center;font-size:3.4rem}
.fl .trusted-body{padding:18px;border-top:5px solid var(--ink)}
.fl .trusted-body h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.fl .trusted-body .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.fl .trusted-body .price{font-family:var(--font-display);font-weight:800;font-size:1.2rem}

/* ---------- Top picks band ---------- */
.fl .picks{padding:0 0 88px;background:var(--sage-bg)}
.fl .picks-inner{
  background:var(--pine-950);color:var(--card);border-radius:24px;
  padding:48px 52px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.fl .picks-inner::after{
  content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(183,227,74,.22),transparent 65%);
}
.fl .picks-copy{flex:1;min-width:280px}
.fl .picks-copy h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;margin:.4em 0 .5em}
.fl .picks-copy p{color:rgba(247,250,240,.7);margin-bottom:26px;max-width:440px}
.fl .picks-thumbs{display:flex;gap:12px;position:relative;z-index:1}
.fl .picks-thumbs .thumb{
  width:88px;height:88px;border-radius:16px;display:grid;place-items:center;
  font-size:2rem;background:rgba(247,250,240,.1);border:1px solid var(--hairline-dark);
}

/* ---------- Utility trio: recent / calc / didyouknow ---------- */
.fl .trio{background:var(--sage-deep)}
.fl .trio-grid{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:18px;align-items:stretch}
@media(max-width:1000px){
.fl .trio-grid{grid-template-columns:1fr}
}
.fl .trio-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.fl .trio-card>h3{font-size:1.1rem;font-weight:700;padding-bottom:12px;border-bottom:6px solid var(--ink);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.fl .trio-card>h3 .mono{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-faint);font-weight:500;letter-spacing:.1em}
.fl .recent-item{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--hairline);align-items:center}
.fl .recent-item:last-of-type{border-bottom:none}
.fl .recent-thumb{width:52px;height:52px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;font-size:1.4rem}
.fl .recent-item h4{font-size:.86rem;font-weight:600;line-height:1.35}
.fl .recent-item small{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-faint)}
.fl .trio-link{margin-top:auto;padding-top:14px;font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:var(--pine-700)}
.fl .qc-search{
  display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);
  border-radius:12px;padding:.75em 1em;background:var(--sage-deep);margin-bottom:12px;
  color:var(--ink-faint);font-size:.9rem;
}
.fl .qc-item{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px solid var(--hairline);font-size:.92rem}
.fl .qc-item .k{display:flex;gap:.6em;align-items:center;font-weight:600}
.fl .qc-item .v{font-family:var(--font-mono);font-size:.78rem;background:var(--sage-deep);padding:.25em .8em;border-radius:999px}
.fl .qc-btn{margin-top:16px;width:100%;justify-content:center}
.fl .dyk{background:var(--pine-900)!important;color:var(--card);border:none!important;position:relative;overflow:hidden}
.fl .dyk::after{content:"🥑";position:absolute;bottom:-18px;right:-14px;font-size:5.5rem;opacity:.14;transform:rotate(-12deg)}
.fl .dyk>h3{border-bottom-color:var(--lime-400)}
.fl .dyk p{color:rgba(247,250,240,.78);font-size:.95rem;position:relative;z-index:1}
.fl .dyk .stat{font-family:var(--font-display);font-size:2.6rem;font-weight:800;color:var(--lime-400);line-height:1;margin:10px 0 4px}

/* ---------- More ways ---------- */
.fl .ways{background:var(--sage-bg)}
.fl .ways-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){
.fl .ways-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.fl .ways-grid{grid-template-columns:1fr}
}
.fl .way-card{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:26px 22px;transition:transform .2s,box-shadow .2s;
}
.fl .way-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fl .way-card .wico{width:48px;height:48px;border-radius:13px;background:var(--lime-glow);display:grid;place-items:center;font-size:1.35rem;margin-bottom:14px}
.fl .way-card h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.fl .way-card p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- Newsletter ---------- */
.fl .newsletter{background:var(--sage-deep);padding:64px 0}
.fl .news-inner{
  background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:38px 42px;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;border-top:8px solid var(--ink);
}
.fl .news-copy{flex:1;min-width:260px}
.fl .news-copy h3{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.fl .news-copy p{color:var(--ink-soft);font-size:.95rem}
.fl .news-form{display:flex;gap:10px;flex-wrap:wrap}
.fl .news-form input{
  font-family:var(--font-body);font-size:.95rem;padding:.9em 1.3em;border-radius:999px;
  border:1px solid var(--hairline);background:var(--sage-bg);min-width:240px;color:var(--ink);
}
.fl .news-form input:focus{outline:3px solid var(--lime-400);outline-offset:2px;border-color:transparent}

/* ---------- FAQ + database ---------- */
.fl .faq{background:var(--sage-bg)}
.fl .faq-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
@media(max-width:920px){
.fl .faq-grid{grid-template-columns:1fr}
}
.fl .faq-tabs{display:flex;gap:6px;margin:18px 0 22px;flex-wrap:wrap}
.fl .faq-tabs button{
  border:none;background:transparent;font-family:var(--font-mono);font-size:.74rem;font-weight:600;
  padding:.5em 1.1em;border-radius:999px;color:var(--ink-soft);border:1px solid transparent;
}
.fl .faq-tabs button.on{background:var(--pine-900);color:var(--card)}
.fl details.faq-item{display:block;border-bottom:1px solid var(--hairline)}
.fl details.faq-item:first-of-type{border-top:6px solid var(--ink)}
.fl details.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:18px 4px;font-family:var(--font-display);font-weight:600;font-size:1.02rem;
}
.fl details.faq-item summary::-webkit-details-marker{display:none}
.fl details.faq-item summary .chev{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--hairline);
  display:grid;place-items:center;font-size:.85rem;transition:transform .2s;flex-shrink:0;color:var(--pine-700);
}
.fl details.faq-item[open] summary .chev{transform:rotate(45deg);background:var(--lime-400);color:var(--pine-950);border-color:var(--lime-400)}
.fl details.faq-item .faq-body{padding:6px 4px 20px;color:var(--ink-soft);font-size:.95rem;max-width:56ch;line-height:1.7}
.fl .db-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;border-top:8px solid var(--ink)}
.fl .db-card h3{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.fl .db-card>p{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
.fl .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fl .chip{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;padding:.5em 1.1em;
  border-radius:999px;background:var(--sage-deep);border:1px solid var(--hairline);color:var(--ink-soft);
  transition:all .15s;
}
.fl .chip:hover{background:var(--pine-900);color:var(--card)}
.fl .chip-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:18px;display:block}

/* ---------- Final CTA ---------- */
.fl .final{
  background:
    radial-gradient(800px 420px at 15% 120%,rgba(183,227,74,.14),transparent 60%),
    var(--pine-950);
  color:var(--card);
}
.fl .final-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:880px){
.fl .final-inner{grid-template-columns:1fr}
}
.fl .final h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin:.4em 0 .6em}
.fl .final .checks{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;font-size:.95rem;color:rgba(247,250,240,.75)}
.fl .final .checks span{display:flex;gap:.7em;align-items:center}
.fl .final .checks .tick{color:var(--lime-400);font-weight:700}
.fl .final-form{background:rgba(247,250,240,.06);border:1px solid var(--hairline-dark);border-radius:20px;padding:30px}
.fl .final-form p{font-family:var(--font-mono);font-size:.74rem;color:rgba(247,250,240,.6);margin-top:14px;text-align:center}
.fl .final-form .news-form input{background:rgba(247,250,240,.1);border-color:var(--hairline-dark);color:var(--card);flex:1}
.fl .final-form .news-form input::placeholder{color:rgba(247,250,240,.5)}
.fl .final-form .news-form{flex-wrap:nowrap}
@media(max-width:520px){
.fl .final-form .news-form{flex-wrap:wrap}
}

/* ---------- Footer ---------- */
.fl footer.site{background:var(--pine-950);color:rgba(247,250,240,.72);padding:70px 0 34px;border-top:1px solid var(--hairline-dark)}
.fl .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px}
@media(max-width:960px){
.fl .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
.fl .foot-grid{grid-template-columns:1fr}
}
.fl .foot-grid h5{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime-300);margin-bottom:16px;
  padding-bottom:8px;border-bottom:1px solid var(--hairline-dark);
}
.fl .foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fl .foot-grid a{font-size:.9rem;transition:color .15s}
.fl .foot-grid a:hover{color:var(--lime-300)}
.fl .foot-brand p{font-size:.9rem;max-width:250px;margin:14px 0 20px}
.fl .socials{display:flex;gap:10px}
.fl .socials a{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--hairline-dark);
  display:grid;place-items:center;font-size:.85rem;transition:all .15s;
}
.fl .socials a:hover{background:var(--lime-400);color:var(--pine-950);border-color:var(--lime-400)}
.fl .foot-bottom{
  border-top:1px solid var(--hairline-dark);padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.7rem;color:rgba(247,250,240,.5);
}
.fl .foot-bottom .heart{color:var(--lime-400)}

/* ---------- Scroll reveal ---------- */
.fl .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.fl .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.fl .reveal{opacity:1;transform:none}
}

/* ============================================================
   HYBRID VARIANT — dark brand top & bookends, light ad-safe
   middle. Picks band uses the lime sticker style. Includes
   dashed AdSense slot placeholders sized for responsive units.
   ============================================================ */
/* Centered section titles span full width, one line on desktop */
.fl .section-head h2{text-wrap:balance}

/* Lime sticker style for the Amazon picks band (keeps mid-page light) */
.fl .picks-inner{
  background:var(--lime-400);color:var(--ink);
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
}
.fl .picks-inner::after{background:radial-gradient(circle,rgba(247,250,240,.55),transparent 65%)}
.fl .picks-inner .eyebrow--dark{color:var(--pine-900)}
.fl .picks-copy p{color:var(--pine-900)}
.fl .picks-inner .btn-lime{background:var(--pine-950);color:var(--card)}
.fl .picks-thumbs .thumb{background:rgba(10,35,24,.08);border-color:rgba(10,35,24,.2)}

/* AdSense slot placeholders — swap the inner div for your ad unit code.
   Light card surface on sage bg = clear ad/content separation. */
.fl .ad-section{padding:0;background:var(--sage-bg)}
.fl .ad-section.on-deep{background:var(--sage-deep)}
.fl .ad-slot{
  background:var(--card);border:1px dashed rgba(18,39,27,.28);border-radius:14px;
  min-height:110px;display:grid;place-items:center;position:relative;
  margin:44px auto;max-width:970px;
}
.fl .ad-slot::before{
  content:"Advertisement";position:absolute;top:8px;left:14px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.fl .ad-slot .ad-hint{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint)}
@media(max-width:760px){
.fl .ad-slot{min-height:250px;margin:32px auto}
} /* mobile rectangle */

/* ============================================================
   HYBRID v2 — light header & ticker + real brand logo (SVG)
   ============================================================ */
.fl .ticker{background:var(--sage-deep);color:var(--ink-soft);border-bottom:1px solid var(--hairline)}
.fl .ticker a{color:var(--pine-700)}
.fl .ticker .aff{opacity:.7}
.fl header.site{background:rgba(252,253,250,.94);border-bottom:1px solid var(--hairline)}
.fl nav.main a{color:var(--ink-soft)}
.fl nav.main a:hover{color:var(--ink);background:rgba(18,39,27,.06)}
.fl nav.main a.active{color:var(--pine-950);background:var(--lime-400)}
.fl .header-user{color:var(--ink-soft)}
.fl .menu-btn{color:var(--ink)}

/* Brand logo — inline SVG recreation; swap for the PNG/SVG asset in production */
.fl .logo-n{width:46px;height:46px;flex-shrink:0}
.fl .logo-n .ink{fill:#14432C}
.fl .logo-n .leaf{stroke:#3BB54A;fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.fl header.site .logo-text{color:#14432C;font-weight:700;font-size:1.05rem}
.fl header.site .logo-text small{color:#1C5236;letter-spacing:.3em}
/* Footer version: cream N so it reads on dark pine */
.fl footer.site .logo-n .ink{fill:var(--card)}
.fl footer.site .logo-n .leaf{stroke:var(--lime-400)}
.fl footer.site .logo-text{color:var(--card)}


/* ============================================================
   INTEGRATION LAYER — Fresh Label inside NutrientsCalculator V2
   Everything scoped under .fl so old templates are untouched.
   ============================================================ */
/* Sticky moved to wrapper so old `header{position:sticky}` rule
   can't fight the new header. */
.fl-sticky{position:sticky;top:0;z-index:90}
.fl header.site{position:static;top:auto;z-index:auto}

/* wp_nav_menu outputs <ul><li> — flatten so links style like the preview */
.fl nav.main ul,.fl nav.main li{display:contents;list-style:none;margin:0;padding:0}
.fl nav.main .current-menu-item > a,
.fl nav.main .current_page_item > a{color:var(--pine-950);background:var(--lime-400);font-weight:600;opacity:1}
.fl nav.main a{opacity:1}

/* Uploaded custom logo sizing (header + drawer-safe) */
.fl .custom-logo-link{display:flex;align-items:center}
.fl .custom-logo{height:46px;width:auto;max-width:230px;object-fit:contain;display:block}

/* Logged-in user chip restyled to match the preview header */
.fl .user-chip{
  display:inline-flex;align-items:center;gap:.45em;
  border:1px solid var(--hairline);border-radius:999px;background:var(--card);
  color:var(--ink-soft);font-size:.9rem;padding:.45em 1em;text-decoration:none;
}
.fl .user-chip:hover{border-color:var(--ink-soft)}

/* Old .hamburger-btn keeps its own CSS + breakpoint (<=1024px) — just
   make sure the bars read on the light header (they already do). */
.fl .hamburger-btn span{background:var(--ink)}

/* Real Amazon product photos inside the label-style cards */
.fl .prod-img.has-img,.fl .trusted-img.has-img{background:#fff}
.fl .prod-img img,.fl .trusted-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.fl .picks-thumbs .thumb.has-img{background:#fff;overflow:hidden;border-color:rgba(10,35,24,.2)}
.fl .picks-thumbs .thumb.has-img img{width:100%;height:100%;object-fit:contain;padding:8px}

/* Blog cards fed by real posts */
.fl .blog-card>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.fl .blog-img.has-img{background-size:cover;background-position:center}

/* Category pill row (real categories) */
.fl .tab-row a{text-decoration:none}

/* fc-scan is a <button> that opens the analyzer popup */
.fl button.fc-scan{cursor:pointer}

/* ============================================================
   MOBILE HEADER FIXES
   - Drawer/overlay must stack above the new sticky header wrapper
     (.fl-sticky is z-index:90; old overlay was 90 / drawer 100).
   - The collapsed round user-chip looked broken next to the new
     header — on mobile the drawer already offers Profile/Log Out,
     so hide the chip entirely and tidy spacing.
   ============================================================ */
#ncv2-nav-overlay{z-index:120}
#ncv2-nav-drawer{z-index:130}

@media (max-width:1024px){
  /* match the old hamburger breakpoint exactly (it shows ≤1024px) */
  .fl nav.main{display:none}
  .fl header.site .wrap{gap:12px;height:64px}
  .fl .user-chip{display:none}
  .fl .header-cta{gap:10px;margin-left:auto}
  .fl .header-cta .btn{font-size:.85rem;padding:.6em 1.15em}
  .fl .custom-logo{height:36px;max-width:170px}
  .fl .logo-n{width:36px;height:36px}
  .fl .logo-text{font-size:.95rem}
}

@media (max-width:600px){
  /* logged-out: keep one primary button; Log In lives in the drawer */
  .fl .ncv2-login-btn{display:none}
  .fl .header-cta .btn{font-size:.8rem;padding:.55em 1em}
  /* compress the ticker to two tidy lines */
  .fl .ticker{font-size:.66rem;padding:7px 0}
  .fl .ticker .wrap{gap:.3em .5em}
  .fl .ticker .aff{display:none}
}

/* ============================================================
   WIDE CONTAINER (1520px) ADJUSTMENTS
   Container now matches the old theme's 1520px .wrap. At that
   width, side padding steps up to the old 48px on desktop, and
   a few grids gain columns so cards don't stretch too wide.
   ============================================================ */
@media (min-width:1100px){
  .fl .wrap{padding:0 48px}
}
@media (min-width:1360px){
  .fl .blog-grid{grid-template-columns:repeat(4,1fr)}
  .fl .prod-grid{grid-template-columns:repeat(6,1fr)}
  .fl .hero .wrap{gap:80px}
  .fl .facts-card{max-width:560px;margin-left:auto}
  .fl .feature-panel{padding:72px 72px}
  .fl .final-inner{gap:72px}
}

/* ============================================================
   ARTICLE PAGE (single.php) — Fresh Label restyle
   Markup unchanged; these rules re-skin the existing classes
   inside the .fl-article scope. Old layout grid is kept
   (1fr / 320px sidebar, sticky) — only the visual voice changes.
   ============================================================ */
.fl-article .page-shell{background:var(--sage-bg)}

/* Breadcrumb */
.fl-article .breadcrumb,
.fl-article .breadcrumbs{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);letter-spacing:.04em}
.fl-article .breadcrumb a,
.fl-article .breadcrumbs a{color:var(--pine-700)}

/* Article head */
.fl-article .article-tag{
  display:inline-flex;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pine-950);
  background:var(--lime-400);padding:.45em 1.1em;border-radius:999px;margin-bottom:16px;
}
.fl-article .article-head h1{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px;
}
.fl-article .article-head .blog-meta{
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);
  padding-bottom:18px;border-bottom:6px solid var(--ink);
}

/* Hero image */
.fl-article .article-hero-img{
  border-radius:var(--radius);border:1px solid var(--hairline);
  box-shadow:var(--shadow);margin:26px 0 6px;
}

/* Body typography */
.fl-article .article-body{font-size:1.04rem;line-height:1.78;color:var(--ink)}
.fl-article .article-body p{margin:0 0 1.15em}
.fl-article .article-body a{color:var(--pine-700);text-decoration:underline;text-underline-offset:3px}
.fl-article .article-body h2{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.01em;
  margin:1.8em 0 .7em;padding-bottom:.35em;border-bottom:4px solid var(--ink);color:var(--ink);
}
.fl-article .article-body h3{
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin:1.5em 0 .55em;color:var(--ink);
}
.fl-article .article-body ul,
.fl-article .article-body ol{margin:0 0 1.15em;padding-left:1.4em}
.fl-article .article-body li{margin-bottom:.45em}
.fl-article .article-body li::marker{color:var(--pine-700);font-weight:700}
.fl-article .article-body blockquote{
  border-left:6px solid var(--lime-400);background:var(--card);
  border-radius:0 12px 12px 0;padding:.9em 1.2em;margin:1.4em 0;
  color:var(--ink-soft);font-style:italic;
}
.fl-article .article-body img{border-radius:14px;border:1px solid var(--hairline)}
.fl-article .article-body strong{color:var(--ink)}
.fl-article .article-body code{
  font-family:var(--font-mono);font-size:.86em;background:var(--sage-deep);
  padding:.15em .45em;border-radius:6px;
}

/* Tables — nutrition-facts-label treatment (comparison + nutrition tables).
   !important is used deliberately here: the legacy stylesheet has a
   `.article-body table` rule built ONLY for single-column Nutrient/Amount
   tables (480px max-width, giant 22px first row for "Calories"). That
   legacy rule was bleeding into every other table — including normal
   multi-column comparison tables — causing the squeezed, wrapped,
   force-right-aligned look. These overrides neutralize that legacy
   behavior everywhere inside .fl-article, then apply one consistent,
   readable label style to ALL article tables. */
.fl-article .article-body table,
.fl-article .gear-table{
  width:100% !important;
  max-width:none !important;
  table-layout:auto;
  border-collapse:collapse;
  margin:1.6em 0;
  background:var(--card);
  border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;
  border-radius:14px;
  overflow:hidden;
  font-family:var(--font-body) !important;
  font-size:.95rem !important;
}
.fl-article .article-body table th,
.fl-article .gear-table th{
  font-family:var(--font-mono) !important;
  font-size:.68rem !important;
  font-weight:600 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft) !important;
  text-align:left !important;
  padding:14px 16px !important;
  border-bottom:2px solid var(--ink) !important;
  border-top:none !important;
  background:var(--card) !important;
  vertical-align:middle;
  white-space:nowrap;
}
.fl-article .article-body table td,
.fl-article .gear-table td{
  padding:13px 16px !important;
  border-bottom:1px solid var(--hairline) !important;
  border-top:none !important;
  vertical-align:middle !important;
  text-align:left !important;
  font-size:.95rem !important;
  font-weight:400 !important;
  line-height:1.5;
  color:var(--ink);
}
/* Reset the legacy "giant first row" and "right-align last column" rules */
.fl-article .article-body table thead tr,
.fl-article .article-body table tbody tr:first-child{border-top:none !important}
.fl-article .article-body table tbody tr:first-child td{
  font-size:.95rem !important;
  font-weight:400 !important;
  padding-top:13px !important;
  padding-bottom:13px !important;
}
.fl-article .article-body table th:last-child,
.fl-article .article-body table td:last-child{text-align:left !important}
.fl-article .article-body table tr:last-child td,
.fl-article .gear-table tr:last-child td{border-bottom:none !important}
.fl-article .article-body table tr:nth-child(even) td{background:var(--sage-deep)}
.fl-article .article-body table td:first-child,
.fl-article .article-body table tbody tr:not(:first-child) td:last-child{
  font-weight:600 !important;
  color:var(--ink);
}
/* Optional highlighted "winner" row — add class="is-winner" to a <tr>
   in the block editor's HTML view for a subtle lime-tinted row, without
   the old giant-font treatment breaking layout. */
.fl-article .article-body table tr.is-winner td{
  background:var(--lime-glow) !important;
  font-weight:700 !important;
}
/* Footnote line right after a table, de-emphasized like fine print */
.fl-article .article-body table + p em,
.fl-article .article-body table + p{
  display:block;font-size:.78rem;color:var(--ink-faint);
  margin-top:8px;margin-bottom:1.6em;font-style:italic;
}
@media (max-width:640px){
  .fl-article .article-body table{font-size:.85rem !important;display:block;overflow-x:auto;white-space:nowrap}
  .fl-article .article-body table th,
  .fl-article .article-body table td{padding:10px 12px !important}
}

/* Inline affiliate block */
.fl-article .inline-affiliate-block{
  background:var(--card);border:1px solid var(--hairline);border-top:8px solid var(--ink);
  border-radius:var(--radius);padding:20px 22px;margin:1.8em 0;box-shadow:var(--shadow);
}
.fl-article .inline-affiliate-block h5,
.fl-article .inline-affiliate-block h4{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.fl-article .badge-best{
  display:inline-flex;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:var(--pine-950);
  padding:.4em .9em;border-radius:999px;
}

/* Gear block */
.fl-article .gear-block-head{
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--ink);
}
.fl-article .gear-block-sub{color:var(--ink-soft)}
.fl-article .gear-pick-tag{
  background:var(--lime-400);color:var(--pine-950);font-family:var(--font-mono);
  font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.35em .9em;border-radius:999px;
}
.fl-article .aff-stars,.fl-article .stars-sm{color:var(--amber)}
.fl-article .price{font-family:var(--font-display);font-weight:800;color:var(--ink)}
.fl-article .price-old{color:var(--ink-faint)}

/* Buttons emitted by old render functions, re-skinned inside articles */
.fl-article a.btn-green,
.fl-article .btn-green{
  background:var(--pine-900) !important;
  color:var(--card) !important;
  border-radius:999px !important;
  text-decoration:none !important;
}
.fl-article a.btn-green:hover,
.fl-article .btn-green:hover{background:var(--pine-700) !important; color:var(--card) !important}
.fl-article a.btn-outline,
.fl-article .btn-outline{
  border:2px solid var(--ink) !important;
  color:var(--ink) !important;
  background:transparent !important;
  border-radius:999px !important;
  text-decoration:none !important;
}
.fl-article a.btn-outline:hover,
.fl-article .btn-outline:hover{background:rgba(18,39,27,.06) !important}

/* AdSense slots inside the article body */
.fl-article .ad-slot-inner,
.fl-article .article-ad-slot{
  background:var(--card);border:1px dashed rgba(18,39,27,.28);border-radius:14px;
}

/* Share buttons */
.fl-article .article-share{display:flex;gap:10px;margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--hairline)}
.fl-article .share-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--hairline);
  background:var(--card);display:grid;place-items:center;cursor:pointer;
  transition:all .15s;color:var(--ink-soft);
}
.fl-article .share-btn:hover{background:var(--lime-400);color:var(--pine-950);border-color:var(--lime-400);transform:translateY(-2px)}

/* Author box */
.fl-article .author-box{
  background:var(--card);border:1px solid var(--hairline);border-top:8px solid var(--ink);
  border-radius:var(--radius);padding:22px;display:flex;gap:18px;align-items:center;margin-top:26px;
}
.fl-article .author-box h5{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin:0 0 4px;color:var(--ink)}
.fl-article .author-box p{color:var(--ink-soft);font-size:.92rem;margin:0}
.fl-article .author-avatar{width:64px;height:64px;border-radius:50%;flex-shrink:0;border:3px solid var(--lime-400)}

/* ---------- Sidebar ---------- */
.fl-article .blog-sidebar > div,
.fl-article .sidebar-ad-card{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:22px;
}
.fl-article .blog-sidebar h5{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;
  padding-bottom:10px;border-bottom:4px solid var(--ink);
}
/* TOC */
.fl-article .sidebar-toc-card{border-top:8px solid var(--ink)}
.fl-article .sidebar-toc-card ol{font-family:var(--font-body);font-size:.88rem;padding-left:20px;margin:0}
.fl-article .sidebar-toc-card li{padding:6px 0;border-bottom:1px solid var(--hairline)}
.fl-article .sidebar-toc-card li:last-child{border-bottom:none}
.fl-article .sidebar-toc-card li::marker{font-family:var(--font-mono);font-size:.72rem;color:var(--pine-700);font-weight:600}
.fl-article .sidebar-toc-card a{color:var(--ink-soft);text-decoration:none}
.fl-article .sidebar-toc-card a:hover{color:var(--pine-700)}
/* Sidebar product card */
.fl-article .sidebar-ad-card h5{border-bottom:none;padding-bottom:0;font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
.fl-article .sidebar-ad-card p{color:var(--ink-soft);font-size:.88rem}
/* Related articles */
.fl-article .sidebar-related-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline);align-items:center}
.fl-article .sidebar-related-item:last-child{border-bottom:none}
.fl-article .sidebar-related-item .thumb{width:56px;height:56px;border-radius:12px;flex-shrink:0}
.fl-article .sidebar-related-item h6{font-family:var(--font-body);font-size:.86rem;font-weight:600;line-height:1.35;margin:0;color:var(--ink)}
.fl-article .sidebar-related-item .meta{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-faint);margin-top:3px}
.fl-article .sidebar-related-item:hover h6{color:var(--pine-700)}
/* Sidebar newsletter — dark accent card like homepage "Did You Know".
   Hardened with !important: this competes with the generic
   ".blog-sidebar > div" light-card rule at equal specificity, and
   LiteSpeed's CSS optimizer doesn't reliably preserve source order,
   so the light/dark outcome was flipping unpredictably between pages. */
.fl-article .sidebar-newsletter-card{
  background:var(--pine-900) !important;
  border:none !important;
  color:var(--card) !important;
}
.fl-article .sidebar-newsletter-card h5{
  color:var(--lime-300) !important;
  border-bottom-color:var(--lime-400) !important;
}
.fl-article .sidebar-newsletter-card p{color:rgba(247,250,240,.78) !important;font-size:.9rem !important}
.fl-article .sidebar-newsletter-card input{
  width:100% !important;font-family:var(--font-body) !important;font-size:.9rem !important;
  padding:.8em 1.1em !important;border-radius:999px !important;
  border:1px solid var(--hairline-dark) !important;background:rgba(247,250,240,.1) !important;
  color:var(--card) !important;margin-bottom:10px !important;box-sizing:border-box;
}
.fl-article .sidebar-newsletter-card input::placeholder{color:rgba(247,250,240,.5) !important}
.fl-article .sidebar-newsletter-card .btn-green{
  background:var(--lime-400) !important;color:var(--pine-950) !important;
  width:100% !important;justify-content:center !important;display:inline-flex !important;
}
.fl-article .sidebar-newsletter-card .btn-green:hover{background:var(--lime-300) !important}

@media (max-width:900px){
  .fl-article .article-head h1{font-size:1.7rem}
  .fl-article .article-share{flex-wrap:wrap}
}

/* ============================================================
   SIDEBAR WIDGETS FIX
   register_sidebar() wraps every widget in <section class="widget
   {classes} sidebar-toc-card">, not <div> — so the card background/
   border/padding rule (which only matched ".blog-sidebar > div")
   never reached real widgets. That's why widgets rendered as a bare
   floating top-rule with unstyled default WP markup underneath.
   ============================================================ */
.fl-article .blog-sidebar > section.widget{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:22px;border-top:8px solid var(--ink);
}
.fl-article .blog-sidebar > section.widget + section.widget{margin-top:0} /* gap already handled by parent flex `gap` */

/* Default WP search widget */
.fl-article .widget_search .search-form{display:flex;gap:8px;align-items:stretch}
.fl-article .widget_search input[type="search"]{
  flex:1;min-width:0;font-family:var(--font-body);font-size:.9rem;color:var(--ink);
  background:var(--sage-deep);border:1px solid var(--hairline);border-radius:10px;padding:.75em 1em;
}
.fl-article .widget_search input[type="search"]:focus{outline:3px solid var(--lime-400);outline-offset:1px;border-color:transparent}
.fl-article .widget_search input[type="submit"]{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--card);
  background:var(--pine-900);border:none;border-radius:10px;padding:0 1.3em;cursor:pointer;transition:background .15s;
}
.fl-article .widget_search input[type="submit"]:hover{background:var(--pine-700)}

/* Default WP list-style widgets: Recent Posts, Recent Comments, Archives, Categories */
.fl-article .blog-sidebar ul{list-style:none;margin:0;padding:0}
.fl-article .blog-sidebar ul li{
  padding:10px 0;border-bottom:1px solid var(--hairline);font-size:.88rem;line-height:1.4;
}
.fl-article .blog-sidebar ul li:last-child{border-bottom:none}
.fl-article .blog-sidebar ul li a{color:var(--ink);text-decoration:none;font-weight:600}
.fl-article .blog-sidebar ul li a:hover{color:var(--pine-700)}
.fl-article .blog-sidebar .post-date,
.fl-article .blog-sidebar ul li small{
  display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin-top:2px;font-weight:400;
}

/* Widget titles: registered as <h5>, matches other sidebar card headings */
.fl-article .widget h5{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;
  padding-bottom:10px;border-bottom:4px solid var(--ink);
}

/* ============================================================
   AI WRITER PLUGIN CARDS (.aaw-*)
   Traced from live page source: these classes come from an inline
   <style id="wp-block-library-inline-css-extra"> block registered
   by the AI Writer plugin — NOT the theme — hence the mismatched
   amber/orange look. Reskinned here to the Fresh Label voice.
   Loads after the plugin's inline block, and ".fl-article .aaw-*"
   out-specifies the plugin's bare ".aaw-*" selectors either way.
   ============================================================ */

/* In-content "Recommended Product" card */
.fl-article .aaw-aff{
  background:var(--card) !important;
  border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;
  border-radius:var(--radius) !important;
  padding:24px 22px 18px !important;
  margin:1.8em 0 !important;
  box-shadow:var(--shadow);
  font-family:var(--font-body) !important;
}
.fl-article .aaw-aff__label{
  /* Fully self-contained — doesn't rely on inheriting sizing from the
     plugin's own rule, since LiteSpeed's CSS combine/minify can reorder
     or drop parts of that inline block unpredictably. */
  display:inline-block !important;
  position:absolute !important;
  top:-13px !important;
  left:18px !important;
  z-index:2 !important;
  background:var(--lime-400) !important;
  color:var(--pine-950) !important;
  font-family:var(--font-mono) !important;
  font-size:.62rem !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  padding:.35em 1em !important;
  border-radius:999px !important;
  box-shadow:0 2px 6px rgba(18,39,27,.18);
}
.fl-article .aaw-aff{overflow:visible !important; position:relative !important}
.fl-article .aaw-aff__icon{
  background:var(--sage-deep) !important;
  border:1px solid var(--hairline) !important;
  border-radius:12px !important;
}
.fl-article .aaw-aff__cat{
  font-family:var(--font-mono) !important;
  color:var(--pine-700) !important;
  letter-spacing:.1em;
}
.fl-article .aaw-aff__name{
  font-family:var(--font-display) !important;
  color:var(--ink) !important;
  font-size:1.02rem !important;
}
.fl-article .aaw-aff__stars{color:var(--amber) !important}
.fl-article .aaw-aff__rating{color:var(--ink-faint) !important}
.fl-article .aaw-aff__price{
  background:var(--pine-900) !important;
  border-radius:999px !important;
  font-family:var(--font-mono) !important;
  padding:.3em 1em !important;
  margin-left:.3em;
  display:inline-block !important;
}
.fl-article .aaw-aff__desc{color:var(--ink-soft) !important}
.fl-article .aaw-aff__btn{
  background:var(--pine-900) !important;
  border-radius:999px !important;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  padding:.75em 1.5em !important;
  margin-top:.4em !important;
  display:inline-flex !important;
  transition:all .15s;
}
.fl-article .aaw-aff__btn:hover{
  background:var(--pine-700) !important;
  transform:translateY(-1px);
}
.fl-article .aaw-aff__disc{color:var(--ink-faint) !important}

/* Mini inline CTA variant */
.fl-article .aaw-mini-cta__btn{
  background:var(--pine-900) !important;
  border-radius:999px !important;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
}
.fl-article .aaw-mini-cta__btn:hover{background:var(--pine-700) !important}
.fl-article .aaw-mini-cta__disc{color:var(--ink-faint) !important}

/* In-content Table of Contents box (before the first H2) */
.fl-article .aaw-toc{
  background:var(--card) !important;
  border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;
  border-radius:var(--radius) !important;
  padding:20px 24px !important;
  margin:1.8em 0 !important;
  max-width:560px;
}
.fl-article .aaw-toc__title{
  font-family:var(--font-mono) !important;
  font-size:.68rem !important;
  font-weight:600 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft) !important;
  padding-bottom:10px;
  border-bottom:4px solid var(--ink);
  margin-bottom:12px !important;
}
.fl-article .aaw-toc__list{font-family:var(--font-body) !important; font-size:.9rem !important}
.fl-article .aaw-toc__list li{padding:4px 0}
.fl-article .aaw-toc__list a{color:var(--pine-700) !important; text-decoration:none !important}
.fl-article .aaw-toc__list a:hover{text-decoration:underline !important}

/* End-of-article internal link callout */
.fl-article .aaw-conclusion-link-wrap{
  background:var(--sage-deep) !important;
  border-left:none !important;
  border-radius:0 12px 12px 0 !important;
  box-shadow:inset 6px 0 0 var(--lime-400);
  color:var(--ink-soft) !important;
}
.fl-article .aaw-conclusion-link{color:var(--pine-700) !important}
.fl-article .aaw-conclusion-link:hover{color:var(--pine-900) !important}

@media(max-width:480px){
  .fl-article .aaw-aff__inner{flex-direction:column;align-items:center;text-align:center}
}

/* ============================================================
   GUTENBERG CORE BUTTONS (wp-block-button__link)
   Author uses the native WP Buttons block for in-article Amazon
   CTAs ("Check latest price on Amazon", "View today's discount").
   Same bug as .btn-green: the generic article-link color rule
   was overriding this <a>'s text to dark pine-green against WP
   core's near-black default background — nearly unreadable.
   Reskinned to the brand pill instead of WP's default charcoal.
   ============================================================ */
.fl-article .wp-block-buttons{margin:1.6em 0}
.fl-article a.wp-block-button__link,
.fl-article .wp-block-button__link{
  background-color:var(--pine-900) !important;
  color:var(--card) !important;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-size:1rem !important;
  border-radius:999px !important;
  padding:.85em 1.7em !important;
  text-decoration:none !important;
  box-shadow:var(--shadow);
  transition:all .15s ease;
}
.fl-article a.wp-block-button__link:hover,
.fl-article .wp-block-button__link:hover{
  background-color:var(--pine-700) !important;
  color:var(--card) !important;
  transform:translateY(-1px);
}
.fl-article a.wp-block-button__link strong,
.fl-article .wp-block-button__link strong{color:inherit !important; font-weight:600 !important}

/* ============================================================
   TOOL PAGES (Progress Photos, Meal Planner, Water Tracker, etc.)
   Content was previously outside the .fl scope entirely — this
   brings the page-head hero, tool card shell, sidebar, and the
   shared How-To/FAQ block into the Fresh Label system.
   ============================================================ */

/* Page hero — sage paper with the same eyebrow/h1/p pattern as
   the homepage sections, plus a bottom rule to separate from content. */
.fl .page-head{
  background:var(--sage-bg);
  padding:56px 0 40px;
  border-bottom:1px solid var(--hairline);
}
.fl .page-head .eyebrow{margin-bottom:14px}
.fl .page-head h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--ink);margin-bottom:12px;line-height:1.12;
}
.fl .page-head p{color:var(--ink-soft);font-size:1.02rem;max-width:640px}

.fl .page-shell{background:var(--sage-bg);padding:40px 0 80px}

/* Two-column tool layout: main card + sidebar (mirrors .blog-with-sidebar) */
.fl .tool-with-sidebar{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.fl .tool-main{min-width:0}
@media(max-width:900px){.fl .tool-with-sidebar{grid-template-columns:1fr}}

/* Give the tool plugin's own shortcode markup a consistent card frame
   without touching its internals — most plugin content renders its
   own inner boxes, so this just establishes rhythm around it. */
.fl .tool-main > *:not(.callout-box){margin-bottom:22px}

/* Missing-plugin notice */
.fl .callout-box{
  background:var(--card);border:1px solid var(--hairline);border-top:8px solid var(--ink);
  border-radius:var(--radius);padding:20px 24px;color:var(--ink-soft);
}
.fl .callout-box strong{color:var(--ink);display:block;margin-bottom:4px;font-family:var(--font-display)}

/* Sidebar: reuse blog-sidebar card styling + a small tool-nav list */
.fl .tool-sidebar{position:sticky;top:90px}
.fl .tool-nav-list{list-style:none;margin:0;padding:0;font-size:.9rem}
.fl .tool-nav-list li{border-bottom:1px solid var(--hairline)}
.fl .tool-nav-list li:last-child{border-bottom:none}
.fl .tool-nav-list a{
  display:flex;align-items:center;gap:10px;padding:10px 2px;color:var(--ink-soft);
  text-decoration:none;font-weight:600;
}
.fl .tool-nav-list a:hover{color:var(--pine-700)}
.fl .tool-nav-list .tool-nav-ico{width:26px;text-align:center;flex-shrink:0}
.fl .tool-nav-list li.is-active a{color:var(--pine-950);background:var(--lime-glow);border-radius:8px;padding-left:8px;margin:0 -8px}

/* ---------- Shared How-To / FAQ block (ncv2_render_tool_howto_faq) ---------- */
.fl .faq-db-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.fl .faq-db-grid{grid-template-columns:1fr}}
.fl .faq-db-grid h2{
  font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--ink);
  margin-bottom:.5em;padding-bottom:.35em;border-bottom:4px solid var(--ink);
}
.fl .faq-db-grid > div > p{color:var(--ink-soft);margin-bottom:1.2em}

/* Numbered steps list — label-rule card per step */
.fl .steps-list{list-style:none;counter-reset:ncfl-step;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fl .steps-list li{
  counter-increment:ncfl-step;position:relative;
  background:var(--card);border:1px solid var(--hairline);border-radius:12px;
  padding:14px 18px 14px 52px;font-size:.92rem;color:var(--ink);
}
.fl .steps-list li::before{
  content:counter(ncfl-step);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;background:var(--pine-900);color:var(--card);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
}

/* FAQ accordion — matches the blog article FAQ styling */
.fl .ncv2-faq-toggle{
  border-bottom:1px solid var(--hairline);padding:14px 4px;cursor:pointer;
  display:flex;align-items:flex-start;
}
.fl .ncv2-faq-toggle:first-child{border-top:6px solid var(--ink)}
.fl .ncv2-faq-q{
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.fl .ncv2-faq-q .plus{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hairline);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
  color:var(--pine-700);flex-shrink:0;transition:transform .15s;
}
.fl .ncv2-faq-toggle.is-open .ncv2-faq-q .plus,
.fl .ncv2-faq-toggle[aria-expanded="true"] .ncv2-faq-q .plus{
  transform:rotate(45deg);background:var(--lime-400);color:var(--pine-950);border-color:var(--lime-400);
}

/* "Explore more free tools" callout — lime sticker, matches homepage banners */
.fl .callout-box[style*="margin-top:40px"]{
  background:var(--lime-400) !important;border:2px solid var(--ink) !important;
  border-top:2px solid var(--ink) !important;box-shadow:6px 6px 0 var(--ink);
  color:var(--pine-950) !important;padding:20px 26px !important;
}
.fl .callout-box[style*="margin-top:40px"] strong{color:var(--pine-950) !important}
.fl .callout-box[style*="margin-top:40px"] a{color:var(--pine-950) !important;text-decoration:underline}

/* ============================================================
   NC MEAL PLANNER PLUGIN (.ncmp-*)
   Traced from live page source — nc-meal-planner/assets/css/
   planner.css, a separate plugin stylesheet. Reskinned to the
   Fresh Label label-card language, including the add-item modal.
   ============================================================ */

.fl .ncmp-shell{display:flex;flex-direction:column;gap:22px}

/* Week navigator */
.fl .ncmp-week-nav{
  display:flex;align-items:center;gap:12px;
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:16px 20px !important;
}
.fl .ncmp-nav-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline) !important;
  background:var(--card) !important;color:var(--ink) !important;font-size:1.1rem;
  display:grid;place-items:center;cursor:pointer;transition:all .15s;
}
.fl .ncmp-nav-btn:hover{background:var(--sage-deep) !important;border-color:var(--pine-700) !important}
.fl .ncmp-week-label{
  font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.05rem !important;
  color:var(--ink) !important;
}
.fl .ncmp-today-btn{
  margin-left:auto;font-family:var(--font-mono) !important;font-size:.72rem !important;font-weight:600 !important;
  letter-spacing:.06em;text-transform:uppercase;color:var(--pine-700) !important;
  background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:999px !important;padding:.5em 1.1em !important;cursor:pointer;
}
.fl .ncmp-today-btn:hover{background:var(--lime-glow) !important}

/* Daily targets bar */
.fl .ncmp-targets-bar{
  background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:12px !important;padding:12px 18px !important;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--font-mono) !important;font-size:.78rem !important;color:var(--ink-soft) !important;
}
.fl .ncmp-targets-bar strong{color:var(--ink) !important;font-family:var(--font-body) !important}
.fl .ncmp-link{color:var(--pine-700) !important;font-weight:600 !important;text-decoration:none !important}
.fl .ncmp-link:hover{text-decoration:underline !important}

/* 7-day grid — wraps into 2 rows (4 + 3) instead of scrolling
   horizontally, since the sidebar narrows the main column below a
   comfortable single-row width for 7 cards. */
.fl .ncmp-days-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.fl .ncmp-day-card{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:6px solid var(--ink) !important;border-radius:14px !important;
  padding:14px !important;min-width:0;
}
@media(max-width:1240px){
  .fl .ncmp-days-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .fl .ncmp-days-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .fl .ncmp-days-row{grid-template-columns:1fr}
}
.fl .ncmp-day-card--today{border-top-color:var(--lime-400) !important;box-shadow:0 0 0 2px var(--lime-glow)}
.fl .ncmp-day-head{
  display:flex;align-items:baseline;gap:8px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--hairline);
}
.fl .ncmp-day-name{
  font-family:var(--font-mono) !important;font-size:.68rem !important;font-weight:600 !important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint) !important;
}
.fl .ncmp-day-num{font-family:var(--font-display) !important;font-weight:800 !important;font-size:1.15rem !important;color:var(--ink) !important}
.fl .ncmp-day-cal{
  margin-left:auto !important;font-family:var(--font-mono) !important;font-size:.72rem !important;
  font-weight:600 !important;color:var(--pine-700) !important;background:var(--sage-deep);
  padding:.2em .6em;border-radius:999px;
}

/* Meal slots within a day */
.fl .ncmp-slot{padding:8px 0;border-bottom:1px solid var(--hairline)}
.fl .ncmp-slot:last-child{border-bottom:none}
.fl .ncmp-slot-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;font-weight:600;color:var(--ink) !important;
}
.fl .ncmp-add-btn{
  width:22px;height:22px;border-radius:50%;border:none !important;
  background:var(--pine-900) !important;color:var(--card) !important;
  font-size:.9rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:all .15s;
}
.fl .ncmp-add-btn:hover{background:var(--lime-400) !important;color:var(--pine-950) !important;transform:scale(1.1)}
.fl .ncmp-slot-items{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.fl .ncmp-slot-items:empty{display:none}

/* Shopping list section */
.fl .ncmp-shopping-section{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:22px !important;
}
.fl .ncmp-shopping-list{margin-top:16px;font-size:.9rem;color:var(--ink)}

/* ---------- Add-item modal ---------- */
.fl .ncmp-modal-box{
  background:var(--card) !important;border-radius:var(--radius) !important;
  border-top:8px solid var(--ink) !important;padding:26px !important;
}
.fl .ncmp-modal-title{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.2rem !important;color:var(--ink) !important}
.fl .ncmp-modal-close{
  background:var(--sage-deep) !important;border:none !important;border-radius:50% !important;
  width:32px;height:32px;color:var(--ink-soft) !important;
}
.fl .ncmp-modal-tabs{display:flex;gap:6px;border-bottom:2px solid var(--hairline);margin:16px 0}
.fl .ncmp-modal-tab{
  font-family:var(--font-mono) !important;font-size:.74rem !important;font-weight:600 !important;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint) !important;
  padding:.6em 1em;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;
}
.fl .ncmp-modal-tab.active{
  color:var(--card) !important;
  background:var(--pine-900) !important;
  border-radius:8px 8px 0 0;
  border-bottom-color:var(--pine-900) !important;
}
.fl .ncmp-search-input,
.fl .ncmp-text-input{
  width:100% !important;font-family:var(--font-body) !important;font-size:.92rem !important;
  color:var(--ink) !important;background:var(--sage-deep) !important;
  border:1px solid var(--hairline) !important;border-radius:10px !important;
  padding:.75em 1em !important;box-sizing:border-box;
}
.fl .ncmp-search-input:focus,
.fl .ncmp-text-input:focus{outline:3px solid var(--lime-400) !important;outline-offset:1px;border-color:transparent !important}
.fl .ncmp-field-label{
  display:block;font-family:var(--font-mono) !important;font-size:.66rem !important;font-weight:600 !important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft) !important;margin:12px 0 6px;
}
.fl .ncmp-custom-macro-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.fl .ncmp-custom-macro-grid label{
  display:block;font-family:var(--font-mono) !important;font-size:.64rem !important;font-weight:600 !important;
  color:var(--ink-faint) !important;margin-bottom:4px;text-transform:uppercase;
}
.fl .ncmp-custom-macro-grid input{
  width:100% !important;background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:8px !important;padding:.5em .7em !important;font-family:var(--font-body) !important;
  color:var(--ink) !important;box-sizing:border-box;
}
.fl .ncmp-search-results{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
/* "Add" buttons in the search results list — plugin-rendered, exact
   class not confirmed from static source, so targeted broadly by
   position (any button inside the results list). */
.fl .ncmp-search-results button{
  background:var(--pine-900) !important;
  color:var(--card) !important;
  border:none !important;
  border-radius:999px !important;
  padding:.5em 1.1em !important;
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-size:.82rem !important;
  min-width:56px;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s;
}
.fl .ncmp-search-results button:hover{background:var(--pine-700) !important}
/* quantity input next to each result */
.fl .ncmp-search-results input[type="number"]{
  width:52px !important;text-align:center;
  background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:8px !important;padding:.4em !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;
}

@media(max-width:640px){
  .fl .ncmp-week-nav{flex-wrap:wrap}
}

/* ============================================================
   NC WATER TRACKER PLUGIN (.ncwt-*)
   Traced from live page source — nc-water-tracker/assets/css/
   water.css, a separate plugin stylesheet. Its own layout caps
   the main card at ~420px (built for a no-sidebar page), leaving
   a large dead gap next to it once the tool sidebar exists — so
   this reflows into a two-column layout that fills the width,
   plus real color on the progress ring, chart, and quick-add row.
   ============================================================ */

.fl .ncwt-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:820px){
  .fl .ncwt-shell{grid-template-columns:1fr}
}

/* Unit toggle — was floating unstyled text above the card; now a
   proper segmented pill, positioned inside the today-card header. */
.fl .ncwt-unit-toggle{
  grid-column:1 / -1;
  display:inline-flex;gap:2px;background:var(--sage-deep) !important;
  border:1px solid var(--hairline) !important;border-radius:999px !important;
  padding:3px !important;width:fit-content;
}
.fl .ncwt-unit-btn{
  border:none !important;background:transparent !important;
  font-family:var(--font-mono) !important;font-size:.72rem !important;font-weight:600 !important;
  color:var(--ink-faint) !important;padding:.4em 1em !important;border-radius:999px !important;cursor:pointer;
}
.fl .ncwt-unit-btn.active{background:var(--pine-900) !important;color:var(--card) !important}

/* Today card — ring + quick add */
.fl .ncwt-today-card{
  grid-column:1;
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:26px !important;max-width:none !important;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.fl .ncwt-ring-wrap{position:relative;width:180px;height:180px;margin:10px auto 18px}
.fl .ncwt-ring{width:100%;height:100%;transform:rotate(-90deg)}
.fl .ncwt-ring-track{fill:none !important;stroke:var(--sage-deep) !important;stroke-width:10 !important}
.fl .ncwt-ring-progress{
  fill:none !important;stroke:var(--pine-700) !important;stroke-width:10 !important;
  stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset .3s ease;
}
.fl .ncwt-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fl .ncwt-ring-amount{font-family:var(--font-display) !important;font-weight:800 !important;font-size:2.2rem !important;color:var(--ink) !important;line-height:1}
.fl .ncwt-ring-unit{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--ink-faint) !important;letter-spacing:.06em;text-transform:uppercase}

.fl .ncwt-goal-row{
  display:flex;align-items:center;gap:10px;
  background:var(--sage-deep) !important;border-radius:999px !important;
  padding:.5em 1.1em !important;font-family:var(--font-mono) !important;font-size:.8rem !important;
  color:var(--ink-soft) !important;margin-bottom:18px;
}
.fl .ncwt-goal-row strong{color:var(--ink) !important;font-family:var(--font-body) !important}
.fl .ncwt-edit-goal-btn{
  background:none !important;border:none !important;color:var(--pine-700) !important;
  font-weight:600 !important;font-size:.78rem !important;cursor:pointer;text-decoration:underline !important;
}
.fl .ncwt-goal-edit{display:flex;gap:8px;margin-bottom:18px;width:100%}
.fl .ncwt-goal-edit input{
  flex:1;background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:8px !important;padding:.5em .8em !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;box-sizing:border-box;
}

/* Quick-add row */
.fl .ncwt-quickadd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.fl .ncwt-quickadd-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:14px !important;padding:14px 8px !important;cursor:pointer;transition:all .15s;
}
.fl .ncwt-quickadd-btn:hover{background:var(--lime-glow) !important;border-color:var(--pine-700) !important;transform:translateY(-2px)}
.fl .ncwt-qa-icon{font-size:1.5rem}
.fl .ncwt-qa-label{font-family:var(--font-display) !important;font-weight:600 !important;font-size:.85rem !important;color:var(--ink) !important}
.fl .ncwt-qa-amount{font-family:var(--font-mono) !important;font-size:.68rem !important;color:var(--ink-faint) !important}

.fl .ncwt-manual-row{display:flex;gap:8px;width:100%;margin-top:12px}
.fl .ncwt-manual-row input{
  flex:1;background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:8px !important;padding:.6em .8em !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;box-sizing:border-box;
}
.fl .ncwt-manual-unit{font-family:var(--font-mono) !important;font-size:.78rem !important;color:var(--ink-faint) !important;align-self:center}
.fl .ncwt-status{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--pine-700) !important;margin-top:10px;min-height:1em}

/* Right column: today's log + 7-day history stacked */
.fl .ncwt-log-card,
.fl .ncwt-history-card{
  grid-column:2;
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:22px !important;
}
.fl .ncwt-history-card{margin-top:20px}
@media(max-width:820px){
  .fl .ncwt-log-card,.fl .ncwt-history-card{grid-column:1}
}
.fl .ncwt-log-card h3,
.fl .ncwt-history-card h3{
  font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.05rem !important;
  color:var(--ink) !important;margin:0 0 14px !important;
}
.fl .ncwt-log-list{display:flex;flex-direction:column;gap:6px}
.fl .ncwt-log-empty{
  font-family:var(--font-mono) !important;font-size:.8rem !important;color:var(--ink-faint) !important;
  text-align:center;padding:20px 0;
}
.fl .ncwt-history-chart{min-height:160px;display:flex;align-items:flex-end;gap:8px}
.fl .ncwt-history-chart > *{background:var(--pine-700) !important;border-radius:6px 6px 0 0 !important}

/* ============================================================
   BARCODE SCANNER TEMPLATE (theme-owned: assets/css/
   barcode-scanner.css). Reskins the two-card layout to match
   the Fresh Label label-card language used everywhere else,
   plus adds the tool sidebar that this page was missing.
   ============================================================ */

.fl .analyzer-shell{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
}
@media(max-width:820px){.fl .analyzer-shell{grid-template-columns:1fr}}

.fl .analyzer-input-card,
.fl .result-card{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:0 !important;overflow:hidden;
}

/* Mode tabs sit inside the card's own top rule, so give them the rule
   themselves and drop the card's own top padding to compensate */
.fl .mode-tabs{display:flex}
.fl .mode-tab{
  flex:1;text-align:center;padding:14px 10px !important;cursor:pointer;
  font-family:var(--font-display) !important;font-weight:600 !important;font-size:.88rem !important;
  color:var(--ink-soft) !important;background:var(--sage-deep) !important;
  border-bottom:1px solid var(--hairline) !important;
}
.fl .mode-tab.active{background:var(--pine-900) !important;color:var(--card) !important;border-bottom-color:var(--pine-900) !important}

.fl [data-bcs-panel]{padding:22px !important}
.fl .camera-zone{
  background:#0a1f16 !important;border-radius:14px !important;overflow:hidden;
  min-height:260px;display:flex;align-items:center;justify-content:center;
}
.fl .camera-placeholder{color:rgba(247,250,240,.85) !important;text-align:center;padding:20px}
.fl .camera-placeholder .ic{font-size:2rem;margin-bottom:8px}
.fl .camera-placeholder h5{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.05rem !important;color:var(--card) !important;margin-bottom:6px}
.fl .camera-placeholder p{font-size:.85rem !important;color:rgba(247,250,240,.65) !important}

.fl .bcs-field-label{
  display:block;font-family:var(--font-mono) !important;font-size:.66rem !important;font-weight:600 !important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft) !important;margin-bottom:8px;
}
.fl .bcs-manual-input{
  width:100% !important;background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:10px !important;padding:.75em 1em !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;box-sizing:border-box;
}
.fl .bcs-manual-input:focus{outline:3px solid var(--lime-400) !important;outline-offset:1px;border-color:transparent !important}
.fl .bcs-status{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--pine-700) !important;margin-top:10px;min-height:1em}
.fl .analyzer-disclaimer{
  font-family:var(--font-mono) !important;font-size:.68rem !important;color:var(--ink-faint) !important;
  text-align:center;padding:14px 22px 20px !important;border-top:1px solid var(--hairline);margin-top:6px;
}

/* Result card */
.fl .empty-result{padding:60px 30px !important;text-align:center}
.fl .empty-result .ic{font-size:2.4rem;opacity:.5;margin-bottom:12px}
.fl .empty-result h4{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.05rem !important;color:var(--ink) !important;margin-bottom:8px}
.fl .empty-result p{color:var(--ink-faint) !important;font-size:.88rem !important;max-width:32ch;margin:0 auto}

.fl #bcs-result-body{padding:22px !important}
.fl .result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:4px solid var(--ink)}
.fl .result-head h3{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.1rem !important;color:var(--ink) !important}
.fl .result-head .meta{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--ink-faint) !important;margin-top:4px}
.fl .confidence-badge{
  background:var(--amber) !important;color:var(--pine-950) !important;font-family:var(--font-mono) !important;
  font-size:.7rem !important;font-weight:600 !important;padding:.35em .8em !important;border-radius:999px !important;white-space:nowrap;
}
.fl .result-summary-row{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.fl .result-cal{font-family:var(--font-display) !important;font-weight:800 !important;font-size:2rem !important;color:var(--ink) !important;line-height:1}
.fl .result-cal-lbl{font-family:var(--font-mono) !important;font-size:.66rem !important;color:var(--ink-faint) !important;text-transform:uppercase;letter-spacing:.06em}

.fl .nutrient-table{width:100% !important;border-collapse:collapse;margin:14px 0}
.fl .nutrient-table th{
  font-family:var(--font-mono) !important;font-size:.64rem !important;font-weight:600 !important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint) !important;
  text-align:left !important;padding:8px 4px !important;border-bottom:2px solid var(--ink) !important;
}
.fl .nutrient-table td{padding:8px 4px !important;border-bottom:1px solid var(--hairline) !important;font-size:.88rem !important;color:var(--ink) !important}

.fl .result-actions-extended{display:flex;gap:10px;margin-top:16px}
.fl .result-actions-extended .btn{flex:1;justify-content:center;display:inline-flex}
.fl .bcs-save-note{font-family:var(--font-mono) !important;font-size:.68rem !important;color:var(--ink-faint) !important;text-align:center;margin-top:10px}

/* Login gate (guests) */
.fl .bcs-login-gate{
  grid-column:1/-1;text-align:center;padding:50px 30px !important;
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
}
.fl .bcs-login-gate-icon{font-size:2.4rem;margin-bottom:14px}
.fl .bcs-login-gate h3{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.3rem !important;color:var(--ink) !important;margin-bottom:8px}
.fl .bcs-login-gate p{color:var(--ink-soft) !important;max-width:44ch;margin:0 auto 22px}
.fl .bcs-login-gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   GOALS PAGE — form cards, ring summary, gear card.
   Already had decent brand colors from the base theme; this
   brings it fully into the label-card language used elsewhere.
   ============================================================ */
.fl .goal-setup-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
@media(max-width:900px){.fl .goal-setup-grid{grid-template-columns:1fr}}

.fl .form-card{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;
  padding:24px !important;
}
.fl .form-card h3{font-family:var(--font-display) !important;font-weight:700 !important;font-size:1.15rem !important;color:var(--ink) !important;margin-bottom:4px}
.fl .form-card .hint{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--ink-faint) !important;margin-bottom:18px}
.fl .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl .form-row{margin-bottom:16px}
.fl .form-row label{
  display:block;font-family:var(--font-mono) !important;font-size:.66rem !important;font-weight:600 !important;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft) !important;margin-bottom:6px;
}
.fl .form-row input,
.fl .form-row select{
  width:100% !important;background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  border-radius:10px !important;padding:.7em .9em !important;color:var(--ink) !important;
  font-family:var(--font-body) !important;box-sizing:border-box;
}
.fl .form-row input:focus,
.fl .form-row select:focus{outline:3px solid var(--lime-400) !important;outline-offset:1px;border-color:transparent !important}

.fl .toggle-row{display:flex;gap:8px}
.fl .toggle-opt{
  flex:1;text-align:center;padding:.75em .6em !important;border-radius:10px !important;
  background:var(--sage-deep) !important;border:1px solid var(--hairline) !important;
  color:var(--ink-soft) !important;font-family:var(--font-display) !important;font-weight:600 !important;
  font-size:.88rem !important;cursor:pointer;transition:all .15s;
}
.fl .toggle-opt.active{background:var(--pine-900) !important;color:var(--card) !important;border-color:var(--pine-900) !important}
.fl .toggle-opt:not(.active):hover{border-color:var(--pine-700) !important}

.fl .summary-ring-card{
  background:var(--pine-900) !important;color:var(--card) !important;border-radius:var(--radius) !important;
  padding:28px !important;text-align:center;border-top:8px solid var(--lime-400) !important;
}
.fl .summary-ring-card h5{font-family:var(--font-mono) !important;font-size:.68rem !important;font-weight:600 !important;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-300) !important;margin-bottom:14px}
.fl .ring-big{position:relative;width:150px;height:150px;margin:0 auto 14px}
.fl .ring-big-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fl .ring-big-center .num{font-family:var(--font-display) !important;font-weight:800 !important;font-size:1.9rem !important;color:var(--card) !important;line-height:1}
.fl .ring-big-center .lbl{font-family:var(--font-mono) !important;font-size:.66rem !important;color:rgba(247,250,240,.6) !important;text-transform:uppercase;letter-spacing:.06em}

.fl .goal-pref-card{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;padding:20px !important;
}
.fl .goal-pref-card h5{
  font-family:var(--font-mono) !important;font-size:.68rem !important;font-weight:600 !important;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft) !important;
  padding-bottom:10px;margin-bottom:10px;border-bottom:4px solid var(--ink) !important;
}
.fl .target-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--hairline)}
.fl .target-row:last-child{border-bottom:none}
.fl .target-row .name{display:flex;align-items:center;gap:8px;font-size:.88rem !important;color:var(--ink) !important;font-weight:600 !important}
.fl .target-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fl .target-row .val{font-family:var(--font-mono) !important;font-size:.85rem !important;font-weight:600 !important;color:var(--ink) !important}

.fl .goal-gear-card{
  background:var(--card) !important;border:1px solid var(--hairline) !important;
  border-top:8px solid var(--ink) !important;border-radius:var(--radius) !important;padding:20px !important;
  margin-top:18px;
}
.fl .goal-gear-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.fl .goal-gear-row:last-child{border-bottom:none}
.fl .goal-gear-row .gear-thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--sage-deep)}
.fl .goal-gear-row .info{flex:1;min-width:0}
.fl .goal-gear-row .info h4{font-family:var(--font-display) !important;font-weight:600 !important;font-size:.86rem !important;color:var(--ink) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl .goal-gear-row .info .price{font-family:var(--font-mono) !important;font-size:.72rem !important;color:var(--ink-faint) !important}
.fl .goal-gear-row a{font-family:var(--font-mono) !important;font-size:.76rem !important;font-weight:600 !important;color:var(--pine-700) !important;white-space:nowrap;text-decoration:none !important}
.fl .goal-gear-row a:hover{text-decoration:underline !important}

/* ============================================================
   NEW COMPONENTS — additive only. Nothing above this point was
   modified. Reuses existing tokens (--sage-bg, --sage-deep, --card,
   --ink, --hairline, --radius, --shadow) so these sections match
   the Fresh Label system exactly.
   ============================================================ */

/* Section background alternation, continuing the existing rhythm */
.fl .why-choose{background:var(--sage-bg)}
.fl .about-nc{background:var(--sage-deep)}
.fl .quality-standards{background:var(--sage-bg)}
.fl .learning-center{background:var(--sage-deep)}
.fl .popular-resources{background:var(--sage-bg)}
.fl .nc-faq-extended{background:var(--sage-deep)}
.fl .trust-transparency{background:var(--sage-bg)}

/* Why Choose — 4-col grid (8 cards), reuses .goal-card styling exactly */
.fl .wc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.fl .wc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fl .wc-grid{grid-template-columns:1fr}}

/* About section prose */
.fl .about-nc-body{max-width:100%}
.fl .about-nc-body h3{font-size:1.25rem;font-weight:700;margin:1.4em 0 .5em}
.fl .about-nc-body p{color:var(--ink-soft);margin-bottom:1em;line-height:1.75}

/* Disclaimer + editorial policy callout boxes */
.fl .disclaimer-box,.fl .editorial-policy-box{
  background:var(--card);border:1px solid var(--hairline);border-left:4px solid var(--amber);
  border-radius:var(--radius-sm);padding:22px 26px;margin-top:28px;
}
.fl .editorial-policy-box{border-left-color:var(--pine-700);margin-top:40px;margin-bottom:28px;max-width:100%}
.fl .disclaimer-box strong{display:block;font-size:1rem;margin-bottom:8px;color:var(--ink)}
.fl .disclaimer-box p,.fl .editorial-policy-box p{color:var(--ink-soft);font-size:.92rem;line-height:1.7;margin:0}
.fl .editorial-policy-box h3{font-size:1.1rem;font-weight:700;margin-bottom:10px}

/* Popular Resources — link cards */
.fl .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.fl .resource-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fl .resource-grid{grid-template-columns:1fr}}
.fl .resource-card{
  display:block;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:24px 22px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.fl .resource-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--lime-400)}
.fl .resource-card h3{font-size:1.02rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.fl .resource-card p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* Extended FAQ — 2-column layout for 18 questions */
.fl .nc-faq-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media(max-width:820px){.fl .nc-faq-2col{grid-template-columns:1fr}}

/* Trust links row */
.fl .trust-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:8px;padding-top:20px;border-top:1px solid var(--hairline)}
.fl .trust-links a{font-size:.9rem;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.fl .trust-links a:hover{color:var(--pine-700);border-color:var(--pine-700)}

/* Nutrition Learning Center — two-column layout with right-side image */
.fl .learning-center-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.fl .learning-center-grid{grid-template-columns:1fr}}
.fl .learning-center-img{
  border-radius:var(--radius);min-height:340px;background-size:cover;background-position:center;
  background-color:var(--sage-deep);border:1px solid var(--hairline);box-shadow:var(--shadow);
  display:grid;place-items:center;
}
.fl .learning-center-img-fallback{font-size:4rem;opacity:.35}
@media(max-width:900px){.fl .learning-center-img{min-height:240px}}