@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,ital,wght@6..72,0,300;6..72,0,500;6..72,1,300&family=Manrope:wght@400;500;700&display=swap');

:root{
  --g1:#FFFFFF; --g2:#EAF4EC; --g3:#F7F1E4; --g4:#E7F0F6;
  --panel:rgba(255,255,255,.72); --edge:rgba(24,50,36,.09);
  --ink:#12211A; --mid:#4C5C53; --soft:#7E8D84; --em:#12735A; --gold:#B48A2E;
  --d:'Newsreader',Georgia,serif; --b:'Manrope',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--g1:#0A100D;--g2:#101C16;--g3:#171410;--g4:#0D161C;
        --panel:rgba(22,32,26,.66);--edge:rgba(180,220,196,.12);
        --ink:#E8F0EA;--mid:#A4B3AA;--soft:#7C8B82;--em:#4FC79B;--gold:#D8B361}
}
:root[data-theme="dark"]{--g1:#0A100D;--g2:#101C16;--g3:#171410;--g4:#0D161C;
  --panel:rgba(22,32,26,.66);--edge:rgba(180,220,196,.12);
  --ink:#E8F0EA;--mid:#A4B3AA;--soft:#7C8B82;--em:#4FC79B;--gold:#D8B361}
:root[data-theme="light"]{--g1:#FFFFFF;--g2:#EAF4EC;--g3:#F7F1E4;--g4:#E7F0F6;
  --panel:rgba(255,255,255,.72);--edge:rgba(24,50,36,.09);
  --ink:#12211A;--mid:#4C5C53;--soft:#7E8D84;--em:#12735A;--gold:#B48A2E}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{color:var(--ink);font-family:var(--b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--g2), transparent 62%),
    radial-gradient(900px 620px at 92% 4%, var(--g3), transparent 60%),
    radial-gradient(1000px 800px at 60% 100%, var(--g4), transparent 62%),
    var(--g1);
  background-attachment:fixed}
a{color:inherit;text-decoration:none}
.w{max-width:1160px;margin:0 auto;padding:0 30px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--em);font-weight:700}

nav.bar{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px) saturate(1.2);
  background:var(--panel);border-bottom:1px solid var(--edge)}
.brow{display:flex;align-items:center;gap:28px;padding:17px 0}
.lg{font-family:var(--d);font-size:27px;font-weight:500;letter-spacing:-.02em}
.lg i{font-style:italic;color:var(--em)}
.brow .ln{display:flex;gap:24px;margin-left:auto;font-size:14.5px}
.ln a{color:var(--mid)} .ln a:hover,.ln a.on{color:var(--em)}

.head{padding:86px 0 56px;text-align:center}
.head h1{font-family:var(--d);font-size:clamp(46px,7.2vw,96px);font-weight:300;
  line-height:.98;letter-spacing:-.035em;max-width:21ch;margin:16px auto 0;text-wrap:balance}
.head h1 i{font-style:italic;color:var(--em)}
.head p{max-width:52ch;margin:20px auto 0;color:var(--mid);font-size:17.5px}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;
  max-width:820px;margin:38px auto 0}
.door{background:var(--panel);border:1px solid var(--edge);border-radius:20px;padding:22px;
  backdrop-filter:blur(14px);text-align:left;transition:transform .2s,box-shadow .2s}
.door:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(18,115,90,.12)}
.door b{font-family:var(--d);font-size:22px;font-weight:500;display:block;letter-spacing:-.02em}
.door span{font-size:13.5px;color:var(--mid);display:block;margin-top:5px}

.sec{padding:56px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px}
.sh h2{font-family:var(--d);font-size:clamp(28px,3.4vw,42px);font-weight:300;
  letter-spacing:-.03em;line-height:1.05}
.sh h2 i{font-style:italic;color:var(--em)}
.sh a{font-size:13.5px;color:var(--em);font-weight:500}

.glass{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gc{background:var(--panel);border:1px solid var(--edge);border-radius:20px;overflow:hidden;
  backdrop-filter:blur(14px);transition:transform .2s,box-shadow .2s}
.gc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(18,115,90,.14)}
.gc .im{aspect-ratio:1/1;background:center/cover no-repeat;margin:10px;border-radius:14px;
  background-color:var(--g2)}
.gc .tx{padding:4px 18px 20px}
.gc h3{font-family:var(--d);font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.gc em{font-style:italic;font-size:12px;color:var(--soft);display:block;margin:2px 0 7px}
.gc p{font-size:13px;color:var(--mid);line-height:1.5}

.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mc{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:19px 20px;
  backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:baseline}
.mc:hover{border-color:var(--em)}
.mc b{font-family:var(--d);font-size:20px;font-weight:500}
.mc i{font-style:normal;font-size:12.5px;color:var(--em);font-weight:700}

.pills{display:flex;flex-wrap:wrap;gap:9px}
.pl{background:var(--panel);border:1px solid var(--edge);border-radius:100px;padding:10px 19px;
  font-size:14px;backdrop-filter:blur(10px);color:var(--mid)}
.pl:hover{border-color:var(--em);color:var(--em)}

/* remedy */
.rh{padding:34px 0 46px}
.cr{font-size:13.5px;color:var(--soft);margin-bottom:22px}
.cr a:hover{color:var(--em)}
.rgrid{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:start}
.rgrid h1{font-family:var(--d);font-size:clamp(44px,6.2vw,82px);font-weight:300;
  line-height:.95;letter-spacing:-.04em}
.rgrid .bn{font-family:var(--d);font-style:italic;font-size:22px;color:var(--em);margin-top:8px}
.rgrid .pic{border-radius:24px;overflow:hidden;background:var(--panel);
  border:1px solid var(--edge);padding:11px;backdrop-filter:blur(14px)}
.rgrid .pic img{width:100%;display:block;border-radius:16px}
.tagl{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.tagl span{background:var(--panel);border:1px solid var(--edge);border-radius:100px;
  padding:6px 14px;font-size:12.5px;color:var(--em);font-weight:500}

.pane{background:var(--panel);border:1px solid var(--edge);border-radius:22px;padding:28px;
  backdrop-filter:blur(16px);margin-bottom:16px}
.pane h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--em);
  font-weight:700;margin-bottom:15px}
.pane p{font-size:16.5px;line-height:1.75;color:var(--ink)}
.pane ul{list-style:none;display:grid;gap:10px}
.pane li{padding-left:22px;position:relative;font-size:15.5px}
.pane li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--em)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pane.alert{background:rgba(255,246,235,.8);border-color:rgba(180,120,40,.22)}
:root[data-theme="dark"] .pane.alert{background:rgba(40,28,16,.6)}
.pane.alert h4{color:var(--gold)}

.shopg{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.sg{border:1px dashed var(--edge);border-radius:14px;padding:17px;text-align:center}
.sg b{display:block;font-family:var(--d);font-size:17px;font-weight:500}
.sg span{font-size:11.5px;color:var(--soft)}

footer{border-top:1px solid var(--edge);margin-top:56px;padding:34px 0 66px}
footer p{font-size:13px;color:var(--soft);max-width:76ch}

@media(max-width:900px){
  .w{padding:0 20px} .rgrid,.pair{grid-template-columns:1fr;gap:24px}
  .brow{flex-wrap:wrap;gap:14px} .ln{margin:0!important}
}

/* Tokens the browse/card components need that the Atrium palette doesn't define.
   Without these, `border:1px solid var(--edge2)` is an invalid declaration and the
   border silently disappears — which is exactly what happened to the Learn more button. */
:root{--edge2:rgba(24,50,36,.20); --wash:#EAF4EC}
@media (prefers-color-scheme:dark){
  :root{--edge2:rgba(180,220,196,.26); --wash:#12201A}
}
:root[data-theme="dark"]{--edge2:rgba(180,220,196,.26);--wash:#12201A}
:root[data-theme="light"]{--edge2:rgba(24,50,36,.20);--wash:#EAF4EC}

/* "What it does" as a scannable table. Jason: people like tables and icons so they
   don't have to read through too much information — and not in grey. So each row
   carries a coloured icon and a label saying how good the evidence is. */
.bwrap2{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* The panel title has to outrank the group label inside it. It was 11px against the
   12px "WELL STUDIED" heading, so the sub-heading read as the more important one. */

/* citations — the reason we can publish a flagged remedy honestly */
.pane.srcs ul{margin:0;padding-left:0;list-style:none}
.pane.srcs li{padding:7px 0;font-size:14px;line-height:1.5;border-top:1px solid var(--edge)}
.pane.srcs li:first-child{border-top:0}
.pane.srcs a{color:var(--em);text-decoration:none;border-bottom:1px solid transparent}
.pane.srcs a:hover{border-bottom-color:var(--em)}
.pane.srcs .srcnote{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--edge);
  font-size:12.5px;line-height:1.6;color:var(--soft)}

/* Benefits grouped by how good the evidence is: one heading, then its list.
   The label used to repeat on every row, and the two kinds were interleaved —
   Jason: "one says well studied and then you put the list, the other traditional
   and then the list", and don't explain it unless somebody clicks the i. */
.evgrp + .evgrp{margin-top:18px;padding-top:16px;border-top:1px solid var(--edge)}
.evhead{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.evhead svg{width:17px;height:17px;flex:none}
.evgrp.strong .evhead{color:#0E6B52}
.evgrp.trad   .evhead{color:#8A6113}
.evgrp ul{margin:0;padding-left:0;list-style:none}
.evgrp li{position:relative;padding:5px 0 5px 17px;line-height:1.55}
.evgrp li::before{content:"";position:absolute;left:2px;top:13px;
  width:5px;height:5px;border-radius:50%}
.evgrp.strong li::before{background:#0E6B52}
.evgrp.trad   li::before{background:#C9A227}

/* the little circled "i" — explanation only if you ask for it */
details.infodot{display:inline}
details.infodot summary{list-style:none;cursor:pointer;display:inline-grid;
  place-items:center;width:16px;height:16px;border-radius:50%;
  border:1.4px solid currentColor;font-size:10px;font-weight:700;
  font-style:italic;line-height:1;opacity:.75}
details.infodot summary::-webkit-details-marker{display:none}
details.infodot summary:hover{opacity:1}
details.infodot p{margin:9px 0 2px;padding:10px 12px;border-radius:10px;
  background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.30);
  font-size:12.5px;line-height:1.6;color:#7A5610;text-transform:none;
  letter-spacing:0;font-weight:400}
@media (prefers-color-scheme:dark){
  .evgrp.strong .evhead{color:#7FD8BC} .evgrp.trad .evhead{color:#E3C36A}
  details.infodot p{color:#E3C36A}
}
:root[data-theme="dark"] .evgrp.strong .evhead{color:#7FD8BC}
:root[data-theme="dark"] .evgrp.trad .evhead{color:#E3C36A}
:root[data-theme="dark"] details.infodot p{color:#E3C36A}

/* clickable ingredients — tap vitamin C and see every food that gives you it */
.clist a.clink{color:var(--ink);text-decoration:none;
  border-bottom:1px dashed var(--edge2);transition:color .15s,border-color .15s}
.clist a.clink:hover{color:var(--em);border-bottom-color:var(--em)}
.clist a.clink::after{content:"ƒA";margin-left:5px;color:var(--em);
  font-weight:700;opacity:.55}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}

/* "Read more" — the page shows the first paragraph, the rest folds away.
   Jason: "reduce this information by 70%". The depth stays, it just isn't shouted. */
.pane details.more{margin-top:6px}
.pane details.more summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--em);padding:5px 0}
.pane details.more summary::-webkit-details-marker{display:none}
.pane details.more summary::after{content:"BE";font-size:11px;transition:transform .18s}
.pane details.more[open] summary::after{transform:rotate(180deg)}
.pane details.more summary:hover{text-decoration:underline}
.pane details.more p{margin-top:8px}

/* "How to use it" and "The forms" as a table: situation on the left, what to do on
   the right, so it can be skimmed rather than read. */
table.steptab{width:100%;border-collapse:collapse;font-size:14.5px}
table.steptab td{padding:11px 8px;vertical-align:top;border-top:1px solid var(--edge)}
table.steptab tr:first-child td{border-top:0}
table.steptab td.ic{width:24px;padding-right:0;color:var(--em)}
table.steptab td.ic svg{width:17px;height:17px;display:block;margin-top:2px}
table.steptab td.wh{width:1%;white-space:nowrap;font-weight:700;padding-right:16px;color:var(--ink)}
table.steptab td.dw{line-height:1.55}
@media (max-width:620px){
  table.steptab td.wh{white-space:normal;width:auto;display:block;padding-bottom:2px}
  table.steptab td.dw{display:block;padding-top:0}
  table.steptab td.ic{display:none}
}
table.bentab{width:100%;border-collapse:collapse;font-size:14.5px}
table.bentab td{padding:11px 8px;vertical-align:top;border-top:1px solid var(--edge)}
table.bentab tr:first-child td{border-top:0}
table.bentab td.ic{width:26px;padding-right:0}
table.bentab td.ic svg{width:19px;height:19px;display:block;margin-top:1px}
table.bentab td.bx{line-height:1.5;color:var(--ink)}
table.bentab td.lv{width:1%;white-space:nowrap;text-align:right}

.lvl{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid}
/* proven — the brand green, so strength reads as the default state */
tr.ev-strong td.ic svg{color:var(--em)}
.lvl.ok{color:#0E6B52;background:rgba(18,115,90,.10);border-color:rgba(18,115,90,.30)}
/* traditional — warm amber, NOT grey. Different, not lesser. */
tr.ev-trad td.ic svg{color:#B07D1A}
.lvl.tr{color:#8A6113;background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.42)}

.pane .tradnote{margin:12px 0 0;padding:10px 12px;border-radius:10px;
  background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.30);
  font-size:12.5px;line-height:1.6;color:#7A5610}
@media (prefers-color-scheme:dark){
  .lvl.ok{color:#7FD8BC}
  .lvl.tr{color:#E3C36A}
  .pane .tradnote{color:#E3C36A}
}
:root[data-theme="dark"] .lvl.ok{color:#7FD8BC}
:root[data-theme="dark"] .lvl.tr{color:#E3C36A}
:root[data-theme="dark"] .pane .tradnote{color:#E3C36A}

/* parked for a second look — visible, watermarked, not clickable */
.gc.review{position:relative;cursor:default;opacity:.55;filter:saturate(.35)}
.gc.review:hover{transform:none;box-shadow:none}
.gc.review .more{opacity:.4}
.gc.review .stamp{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-11deg);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8A6A22;background:rgba(255,251,240,.92);border:1.5px solid #C9A227;
  border-radius:7px;padding:7px 14px;white-space:nowrap;pointer-events:none;
  box-shadow:0 3px 12px rgba(0,0,0,.10)}

/* hero search with typeahead */
.hsearch{position:relative;max-width:620px;margin:30px auto 4px}
.hsearch form{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--edge2);border-radius:999px;padding:5px 6px 5px 20px;
  backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(18,60,42,.09);
  transition:border-color .16s,box-shadow .16s}
.hsearch form:focus-within{border-color:var(--em);
  box-shadow:0 14px 40px rgba(18,115,90,.16)}
.hsearch .mag{width:19px;height:19px;flex:none;color:var(--soft)}
.hsearch input{flex:1;border:0;background:none;outline:none;font:inherit;
  font-size:16.5px;color:var(--ink);padding:13px 0;min-width:0}
.hsearch input::placeholder{color:var(--soft)}
.hsearch button{flex:none;border:0;cursor:pointer;font:inherit;font-weight:600;
  font-size:14.5px;color:#fff;background:var(--em);border-radius:999px;
  padding:11px 20px;transition:filter .16s}
.hsearch button:hover{filter:brightness(1.08)}

.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  background:var(--panel2,#fff);border:1px solid var(--edge2);border-radius:16px;
  box-shadow:0 18px 46px rgba(18,60,42,.16);overflow:hidden;display:none;
  max-height:min(62vh,430px);overflow-y:auto}
.sug.open{display:block}
.sug .grp{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);padding:12px 18px 5px;font-weight:600}
.sug a{display:flex;align-items:center;gap:12px;padding:9px 18px;text-decoration:none;
  color:var(--ink)}
.sug a:hover,.sug a.sel{background:var(--wash)}
.sug .th{width:36px;height:36px;flex:none;border-radius:9px;background:#fff center/cover;
  border:1px solid var(--edge)}
.sug .tx{min-width:0}
.sug .tx b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.sug .tx span{display:block;font-size:12px;color:var(--soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sug mark{background:none;color:var(--em);font-weight:700}
.sug .none{padding:18px;color:var(--soft);font-size:14px}

/* "Search by category" — the row at the top of the home page.
   Leafly's shop-by-category shape: a pale green rounded tile, a line icon, and the
   label inside at the bottom. Scrolls sideways on a phone rather than wrapping. */
/* Its own section, left-aligned like every other section on the page — the same
   place any site would put it. It sat inside the centred hero before, which is why
   it looked wrong however it was aligned. */
.catsec{padding:26px 0 6px}
/* The ROW is centred on the page — equal margin left and right — and the heading sits
   directly above the first icon rather than being centred itself. Achieved by shrinking
   a wrapper to the width of the tiles and centring that; everything inside it is then
   left-aligned to the first tile. */
.catwrap{width:-moz-fit-content;width:fit-content;max-width:100%;margin:0 auto;
  text-align:left}
.catlabel{font-size:19px;font-weight:800;letter-spacing:-.01em;color:#101A14;
  margin:0 0 14px;text-align:left}
.cats{display:flex;gap:14px;padding-bottom:8px;justify-content:flex-start;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
/* One pale green tile holds the icon AND the label, as in the reference. Light
   background with a dark icon — a solid green block was too heavy for this page. */
.cattile{flex:0 0 auto;width:106px;text-decoration:none;
  background:#E7F1EA;border-radius:14px;padding:16px 8px 12px;text-align:center;
  transition:background .16s,transform .16s,box-shadow .16s}
.cattile:hover{background:#DBEAE0;transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(18,115,90,.13)}
.cattile .sq{display:block;color:#123A2B}
.cattile .sq svg{width:38px;height:38px;margin:0 auto 10px;display:block}
.cattile b{display:block;font-size:12.5px;font-weight:600;color:#123A2B;line-height:1.25}
.cattile .n{display:block;font-size:11px;color:#5D7A6C;margin-top:2px}
@media (max-width:700px){
  .catrow{margin-top:20px}
  .catlabel{font-size:17px}
  .cattile{width:94px;padding:14px 6px 10px}
  .cattile .sq svg{width:34px;height:34px}
}

/* browse by form — icon tiles on the home page */
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.formtile{background:var(--panel);border:1px solid var(--edge);border-radius:18px;
  padding:20px 12px 16px;text-align:center;backdrop-filter:blur(12px);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.formtile:hover{transform:translateY(-3px);border-color:var(--em);
  box-shadow:0 14px 32px rgba(18,115,90,.12)}
.formtile .ic{width:54px;height:54px;margin:0 auto 12px;border-radius:15px;
  background:var(--wash);display:grid;place-items:center;color:var(--em)}
.formtile .ic svg{width:27px;height:27px;display:block}
.formtile b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.formtile span{display:block;font-size:12px;color:var(--soft);margin-top:3px}

/* filter sidebar — the Leafly-style browse layout */
.bwrap{display:grid;grid-template-columns:256px 1fr;gap:36px;align-items:start;
  padding:8px 0 40px}
.side{position:sticky;top:78px}
.side .stitle{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.side .stitle b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.side .stitle button{background:none;border:0;color:var(--em);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;font-family:var(--b)}
.fgroup{border-bottom:1px solid var(--edge)}
.fhead{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;
  padding:15px 2px;cursor:pointer;font-family:var(--d);font-size:18px;font-weight:500;
  color:var(--ink);text-align:left}
.fhead .cnt{margin-left:auto;display:none;min-width:20px;height:20px;padding:0 6px;
  border-radius:100px;background:var(--em);color:#fff;font-family:var(--b);font-size:11px;
  font-weight:700;display:none;place-items:center}
.fhead.active .cnt{display:grid}
.fhead .car{margin-left:auto;transition:transform .2s;color:var(--soft);font-size:13px}
.fhead.active .car{margin-left:8px}
.fhead .car.rot{transform:rotate(180deg)}
.fhint{font-size:12px;color:var(--soft);margin:-6px 0 8px;line-height:1.4}
.fopts{display:none;padding:2px 0 16px;max-height:280px;overflow-y:auto}
.fopts.open{display:block}
.fopts label{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:14px;
  color:var(--ink);cursor:pointer;border-radius:8px}
.fopts label:hover{color:var(--em)}
.fopts input{accent-color:var(--em);width:16px;height:16px;cursor:pointer;flex:none}
.fopts label .n{margin-left:auto;font-size:12px;color:var(--soft);
  font-variant-numeric:tabular-nums}

.rbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rbar .count{font-family:var(--d);font-size:22px;font-weight:500}
.rbar .count b{color:var(--em)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .c{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--edge2);border-radius:100px;padding:5px 8px 5px 13px;font-size:12.5px}
.chips .c b{color:var(--em);font-weight:600}
.chips .c button{background:none;border:0;cursor:pointer;color:var(--soft);font-size:15px;
  line-height:1;padding:0 2px}
.chips .c.excl b{color:var(--gold)}
.empty{padding:60px 0;text-align:center;color:var(--soft);display:none}
.empty.show{display:block}
.gc.hide{display:none}

/* Learn more button pinned to the bottom of every card */
.gc{display:flex;flex-direction:column;position:relative}
.gc .tx{display:flex;flex-direction:column;flex:1}
.gc .tx p{flex:1}
.gc .more{display:block;text-align:center;margin-top:16px;padding:13px 16px;
  border:1px solid var(--edge2);border-radius:100px;color:var(--ink);font-weight:600;
  font-size:14px;text-transform:lowercase;background:transparent;
  transition:background .18s,border-color .18s}
.gc:hover .more{background:var(--panel);border-color:var(--soft)}

/* save (heart) + share, top-right of the photo */
.cardactions{position:absolute;top:19px;right:19px;display:flex;gap:8px;z-index:3}
.act{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;
  cursor:pointer;color:#33433a;box-shadow:0 2px 9px rgba(16,26,20,.2);
  transition:transform .15s,background .15s,color .15s}
.act:hover{transform:scale(1.09);color:var(--em)}
.act:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.act svg{display:block;pointer-events:none}
.act.heart.saved{color:var(--em)}
.act.heart.saved svg{fill:var(--em)}
.act.share{width:auto;border-radius:100px;padding:0 14px;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.act.share .lbl{line-height:1}
.act.share:hover{color:var(--em)}

/* ── safety panels ────────────────────────────────────────────────────────
   Emphasis is calibrated to real risk. "Who it's for" is a positive, green
   panel so safety information isn't only ever a warning. Amber is reserved
   for genuinely serious cautions; routine notes render as plain panels. */
.pane.who{background:rgba(233,247,238,.86);border-color:rgba(18,115,90,.22)}
:root[data-theme="dark"] .pane.who{background:rgba(16,38,28,.7);border-color:rgba(79,199,155,.22)}
.pane.who h4{color:#0E7A54}
:root[data-theme="dark"] .pane.who h4{color:#4FC79B}
.pane.who h4::before{content:"✓";margin-right:8px;font-size:13px}

.pane.alert h4::before{content:"!";display:inline-grid;place-items:center;width:16px;
  height:16px;border-radius:50%;background:var(--gold);color:#fff;font-size:11px;
  margin-right:8px;vertical-align:-2px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:var(--g1);padding:10px 20px;border-radius:100px;font-size:13.5px;
  font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── remedy detail page (Leafly-style hero + tiles) ───────────────────────── */
.dhero{display:grid;grid-template-columns:440px 1fr;gap:48px;align-items:start;
  padding:6px 0 46px}
.dphoto .pic{border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--edge);padding:16px;box-shadow:0 8px 30px rgba(16,26,20,.06)}
.dphoto .pic img{width:100%;display:block;border-radius:12px;max-height:470px;object-fit:contain;
  background:#fff}
.dphoto .noimg{aspect-ratio:1/1;border-radius:16px;background:var(--g2);display:grid;
  place-items:center;color:var(--soft);font-family:var(--d);font-size:20px}
.dphoto .pcap{font-size:12px;color:var(--soft);text-align:center;margin-top:11px}
.dinfo .eyebrow{margin-bottom:8px}
.dinfo h1{font-family:var(--d);font-size:clamp(42px,5.6vw,74px);font-weight:300;
  line-height:.96;letter-spacing:-.04em}
.dinfo .bn{font-family:var(--d);font-style:italic;font-size:22px;color:var(--em);margin-top:8px}
.dinfo .lead{font-size:19px;color:var(--mid);margin-top:18px;max-width:42ch;line-height:1.6}
.dinfo .tagl{margin-top:22px}

.dsec{margin-bottom:30px}
.dsec>h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--em);
  font-weight:700;margin-bottom:14px}
.tiles2{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.t2{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--edge);
  border-radius:14px;padding:15px 16px;backdrop-filter:blur(12px);font-weight:500;
  color:var(--ink);text-transform:capitalize;font-size:15px}
.t2:hover{border-color:var(--em);color:var(--em)}
.t2 svg{color:var(--em);flex:none}

@media(max-width:860px){.dhero{grid-template-columns:1fr;gap:26px}}

.filtoggle{display:none}
@media(max-width:860px){
  .bwrap{grid-template-columns:1fr;gap:0}
  .side{position:static;display:none;margin-bottom:24px}
  .side.open{display:block}
  .filtoggle{display:inline-flex;align-items:center;gap:8px;background:var(--em);color:#fff;
    border:0;border-radius:100px;padding:10px 20px;font:inherit;font-weight:600;font-size:14px;
    cursor:pointer;margin-bottom:18px;font-family:var(--b)}
}

/* ── reading order fixes, last so they win ─────────────────────────────────────
   The panel title must outrank the group label inside it, and the evidence label
   must be quieter than the benefit it describes. Before this, "BENEFITS" was 11px
   while "WELL STUDIED" was a bold coloured 12px heading — so the tag shouted over
   the thing the reader actually came to read. */
.pane h4{font-size:15.5px;letter-spacing:.01em;text-transform:none;font-weight:700;
  color:var(--ink);margin-bottom:13px}
/* the evidence tag is the quietest thing in the panel — grey, tiny, no colour */
.evgrp.strong .evhead,.evgrp.trad .evhead{color:var(--soft) !important}
.evgrp.strong .evhead svg{color:var(--soft) !important}
.evhead{font-size:9.5px;letter-spacing:.08em;font-weight:600;opacity:.55;
  margin-bottom:6px}
.evhead svg{width:11px;height:11px}
/* the benefit is what the reader came for, so it carries the weight */
.evgrp li{font-size:15.5px;line-height:1.55;color:var(--ink);padding:8px 0 8px 18px}
.evgrp li::before{top:17px}
.evgrp li b{font-weight:700;color:var(--ink)}

/* where to get it */
.shop-note{color:var(--mid);font-size:15px;margin:0 0 14px}
.shop-lead{color:var(--ink);font-size:16px;font-weight:600;margin:0 0 14px;line-height:1.5}
.shop-crit{margin:0 0 22px 0;padding-left:18px;color:var(--mid);font-size:15px;line-height:1.6}
.shop-crit li{margin-bottom:10px}
.shop-picks{font-weight:600;color:var(--ink);margin:0 0 12px;font-size:15px}
.shop-pledge{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 20px;
  padding:12px 14px;border-left:3px solid var(--em);background:var(--wash,#f6f8f7)}
.shopg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.shopg .sg{background:#fff;border:1px solid var(--edge);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.shopg .sg b{font-weight:600}
.shopg .sg span{color:var(--em);font-size:14px;font-weight:600;letter-spacing:.02em}

/* ── remedy page ───────────────────────────────────────────────────────────── */
.remedy{padding:26px 0 70px}
.rwrap{max-width:1160px}

/* hero — same proportions as the browse pages: 440px photograph, everything beside it */
.remedy .cr{font-size:13px;color:var(--soft);margin:0 0 18px}
.remedy .cr a{color:var(--soft)}
.remedy .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--em);font-weight:700;margin:0 0 8px}
.remedy .pcap{font-size:12px;color:var(--soft);text-align:center;margin-top:11px}
.remedy-hero{display:grid;grid-template-columns:440px 1fr;gap:48px;align-items:start;
  padding:6px 0 46px;margin:0}
.remedy-head{padding-top:0}
.remedy-head .remedy-name{margin-top:0}

.remedy-photo{width:100%;margin:0;background:#fff;
  border:1px solid var(--edge);border-radius:24px;padding:16px;
  box-shadow:0 8px 30px rgba(16,26,20,.06)}
.remedy-photo img{width:100%;height:auto;display:block;border-radius:12px;
  max-height:470px;object-fit:contain;background:#fff}

.remedy-name{font-family:var(--d);font-weight:300;letter-spacing:-.03em;
  font-size:clamp(38px,7vw,60px);line-height:1.04;margin:0 0 6px;color:var(--ink)}
.remedy-scientific{font-family:var(--d);font-style:italic;font-size:17px;
  color:var(--em);margin:0 0 18px;line-height:1.45}
.remedy-scientific i{font-style:italic;color:var(--soft)}
.rsub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--em);
  font-weight:700;margin:26px 0 12px}
/* the plant part is not a Latin name — upright and lighter so the eye separates them */
.remedy-scientific .part{font-style:normal;color:var(--soft);font-size:.86em;
  letter-spacing:.01em}
.remedy-scientific .part::before{content:"  b7  ";color:var(--soft)}

.pcredit{font-size:11.5px;color:var(--soft);margin:-18px 0 22px;line-height:1.5}
.pcredit a{color:inherit;text-decoration:underline}
.remedy-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.rtag{display:inline-block;font-size:13px;line-height:1;padding:9px 13px;
  border-radius:8px;background:var(--wash);color:#123A2B;text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.rtag:hover{background:#DBEAE0;border-color:var(--em)}

.remedy-intro{font-size:18.5px;line-height:1.62;color:var(--ink);margin:0 0 8px;
  padding-bottom:26px;border-bottom:1px solid var(--edge)}

h2.rsec{font-family:var(--d);font-weight:400;font-size:26px;letter-spacing:-.02em;
  color:var(--ink);margin:34px 0 16px}

/* numbered benefits */
ol.remedy-benefits{list-style:none;margin:0;padding:0;counter-reset:b}
ol.remedy-benefits li{counter-increment:b;position:relative;padding:0 0 18px 44px;
  margin-bottom:18px;border-bottom:1px solid var(--edge)}
ol.remedy-benefits li:last-child{border-bottom:0;margin-bottom:0}
ol.remedy-benefits li::before{content:counter(b);position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:50%;background:var(--wash);color:var(--em);
  font-size:13px;font-weight:700;display:grid;place-items:center}
ol.remedy-benefits b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);
  margin-bottom:5px}
ol.remedy-benefits p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mid)}

/* term-and-description blocks */
.remedy-properties,.remedy-traditional,.remedy-why,.remedy-howused,
.remedy-knownfor{margin:0}
.rp{padding:11px 0;border-top:1px solid var(--edge);font-size:15.5px;line-height:1.6}
.rp:first-child{border-top:0}
.rp b{color:var(--ink);font-weight:700}
.rp span{color:var(--mid)}

/* two columns on desktop, one on phone */
.tc{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px}

/* bordered card, label left and explanation right, hairline between rows */
.rowcard{background:#fff;border:1px solid var(--edge);border-radius:16px;
  padding:4px 22px;box-shadow:0 6px 20px rgba(16,26,20,.04)}
.rowitem{display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start;
  padding:16px 0;border-top:1px solid var(--edge)}
.rowitem:first-child{border-top:0}
.rowitem b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.45}
.rowitem p{margin:0;font-size:15px;line-height:1.6;color:var(--mid)}
.plaincard{padding:20px 22px}
.plaincard .remedy-origin{margin:0}
.remedy-benefits.rowcard .rowitem b{color:var(--em)}
.tc-item{padding:13px 0;border-top:1px solid var(--edge)}
.tc-item b{display:block;font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:3px}
.tc-item p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mid)}

/* The "!" badge on the Cautions heading. Same treatment as `.pane.alert h4::before`
   in build_sana.py — gold disc, white "!", 8px gap — so a caution reads as a caution
   and not as the amber "traditional" evidence marker used elsewhere. No new colour:
   amber is already the correct one for cautions. Sized to the 26px serif heading
   rather than the 11px panel label, which is the only difference. */
h2.rsec-alert::before{content:"!";display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;
  font-family:var(--b);font-size:14px;font-weight:700;margin-right:10px;
  vertical-align:3px}

/* cautions: same rhythm, its own colour so the page bottom still reads as one block */
.remedy-cautions.rowcard{background:rgba(201,162,39,.07);
  border:1px solid rgba(201,162,39,.28);box-shadow:none}
.remedy-cautions .rowitem{border-top-color:rgba(201,162,39,.28)}
.remedy-cautions .rowitem b{color:#7A5610}

.remedy-origin{font-size:15.5px;line-height:1.65;color:var(--mid);margin:0}

/* sources: one line until opened */
.remedy-sources{margin:32px 0 0;border-top:1px solid var(--edge);padding-top:14px}
.remedy-sources summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;font-size:14px;font-weight:600;color:var(--em);padding:4px 0}
.remedy-sources summary::-webkit-details-marker{display:none}
.remedy-sources .plus{position:relative;width:16px;height:16px;flex:none}
.remedy-sources .plus::before,.remedy-sources .plus::after{content:"";position:absolute;
  background:var(--em);border-radius:1px}
.remedy-sources .plus::before{left:0;top:7px;width:16px;height:2px}
.remedy-sources .plus::after{left:7px;top:0;width:2px;height:16px;
  transition:transform .18s}
.remedy-sources[open] .plus::after{transform:rotate(90deg)}
.remedy-sources .count{font-weight:400;color:var(--soft)}
.remedy-sources ol{margin:14px 0 0;padding-left:20px}
.remedy-sources li{font-size:13.5px;line-height:1.6;color:var(--mid);margin-bottom:9px}
.remedy-sources a{color:var(--em)}

@media (max-width:700px){
  .tc{grid-template-columns:1fr;gap:0}
  .rowcard{padding:2px 16px;border-radius:14px}
  .rowitem{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .remedy-hero{grid-template-columns:1fr;gap:26px;padding-bottom:26px}
  .remedy-photo{width:min(340px,80vw);margin:0 auto}
  h2.rsec{font-size:23px;margin:28px 0 13px}
  .remedy-intro{font-size:17px}
  .remedy-cautions{padding:4px 14px 12px}
}