/* NUTRITION RAGE — 06 PAGES — home, goals, brands, ingredients, stores, tools, learn.
   Shared looks are grouped once, the same discipline as 05. */

/* ---- shared ---- */
/* section hero, used by the home page and every taxonomy landing page */
.nr-hero{position:relative;overflow:hidden;padding-block:clamp(38px,6vw,64px);border-bottom:1px solid var(--nr-line)}
.nr-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 78% 0%,rgba(255,255,255,.06),transparent 62%)}
.nr-hero__inner,.nr-hero>.nr-wrap{position:relative}
.nr-hero__title{font-size:clamp(32px,6vw,58px);letter-spacing:-.045em;line-height:1;margin-bottom:14px}
.nr-hero__sub{font-size:clamp(15px,2vw,18px);color:rgba(244,246,243,.78);max-width:52ch;line-height:1.5}
.nr-hero__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.nr-hero__layer,.nr-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.nr-hero__layer{background:var(--nr-ink-2);opacity:.6}

/* raised row / card surfaces */
.nr-locrow,.nr-storecard,.nr-art,.nr-tool{background:var(--nr-ink-3);border:1px solid var(--nr-line);border-radius:11px}
/* tinted call-out bars */
.nr-stackbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--nr-line-2);background:var(--nr-ink-4);border-radius:12px;padding:16px;margin-top:16px}
.nr-stackbar__title{font-size:14px;font-weight:740;margin-bottom:3px}
.nr-stackbar__text{font-size:12px;color:var(--nr-mute)}
.nr-stackbar>:last-child{margin-left:auto}
.nr-stackbar__save{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}

/* ---------------------------------------------------------------------------
   The stack banner.

   Three real product shots with a plus between them, the claim panel on the
   right. The claim panel is the only place green is used as a block here: it
   marks the one active thing on the banner, which is the saving. Everything
   else stays graphite so it keeps meaning something.

   The whole right-hand panel is absent from the DOM when there is no saving
   and no count to print, so the grid collapses to two columns rather than
   holding a gap for a claim that was never made.
--------------------------------------------------------------------------- */
.nr-stackban{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:28px;
  border:1px solid var(--nr-line-2);border-radius:16px;padding:34px clamp(20px,3vw,40px);overflow:hidden;
  background:radial-gradient(120% 140% at 34% 50%,rgba(var(--nr-rage-rgb),.15),transparent 62%),var(--nr-ink-4)}
.nr-stackban__title{font-family:var(--nr-display);font-size:clamp(28px,3.4vw,46px);line-height:.96;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.nr-stackban__title em{font-style:normal}
.nr-stackban__text{font-size:13px;color:var(--nr-mute);margin:14px 0 20px;max-width:34ch}
.nr-stackban__shots{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.nr-stackban__shot{display:block;flex:0 1 auto;min-width:0}
.nr-stackban__shot img{display:block;width:100%;height:auto;max-height:180px;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.nr-stackban__plus{flex:0 0 auto;display:grid;place-items:center;opacity:.9}
.nr-stackban__claim{flex:0 0 auto;border:1px solid var(--nr-line-2);border-radius:12px;padding:18px 22px;background:rgba(0,0,0,.34);text-align:left;min-width:170px}
.nr-stackban__claimlead{font-size:var(--nr-fs-10_0);letter-spacing:.16em;text-transform:uppercase;color:var(--nr-mute)}
.nr-stackban__pct{font-size:clamp(30px,3vw,42px);font-weight:800;line-height:1.04;margin:2px 0 4px}
.nr-stackban__claimfoot{font-size:11px;color:var(--nr-mute);max-width:20ch}
.nr-stackban__count{font-size:var(--nr-fs-10_0);letter-spacing:.08em;text-transform:uppercase;color:var(--nr-mute);margin-top:14px;padding-top:12px;border-top:1px solid var(--nr-line-2)}

@media (max-width:1080px){
  .nr-stackban{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .nr-stackban__claim{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;min-width:0}
  .nr-stackban__count{margin:0 0 0 auto;padding:0;border:0}
  .nr-stackban__claimfoot{max-width:none}
}

@media (max-width:720px){
  .nr-stackban{grid-template-columns:minmax(0,1fr);text-align:left;padding:26px 20px}
  .nr-stackban__shots{order:-1;gap:6px}
  .nr-stackban__shot img{max-height:118px}
  .nr-stackban__text{max-width:none}
  .nr-stackban__claim{flex-wrap:wrap}
  .nr-stackban__count{margin-left:0;width:100%}
}
/* mono micro-labels */
.nr-art__kicker,.nr-strip__title{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.14em;text-transform:uppercase;color:var(--nr-rage-hi);font-weight:700;margin-bottom:6px}

/* ---- trust / stat strip ---- */
.nr-strip{border-block:1px solid var(--nr-line)}
.nr-strip__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.nr-strip__item{padding:16px 20px;border-right:1px solid var(--nr-line)}
.nr-strip__item:last-child{border-right:0}
.nr-strip__title{font-family:var(--nr-sans);font-size:13px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--nr-paper);margin-bottom:2px}
.nr-strip__text{font-size:11.5px;color:var(--nr-mute)}

/* ---- home tools promo ---- */
.nr-tool{padding:16px;display:block}
.nr-tool__icon{width:34px;height:34px;border-radius:var(--nr-r-sm);background:var(--nr-ink-4);box-shadow:inset 0 0 0 1px var(--nr-line-2);color:var(--nr-rage);display:flex;align-items:center;justify-content:center;margin-bottom:12px}

/* ---- articles ---- */
.nr-art{overflow:hidden;display:flex;flex-direction:column}
.nr-art__media{display:block;aspect-ratio:16/9;background:radial-gradient(70% 70% at 40% 30%,rgba(255,255,255,.06),transparent 70%),var(--nr-ink-3)}
.nr-art__media img,.nr-art__media svg{width:100%;height:100%;object-fit:cover;display:block}
.nr-art__excerpt{font-size:11.5px;color:var(--nr-mute);line-height:1.45;display:block;margin-top:6px}

/* ---- store locator ---- */
.nr-locator{padding-bottom:0}
.nr-loc{display:grid;grid-template-columns:352px minmax(0,1fr);min-height:460px;border-top:1px solid var(--nr-line)}
.nr-loc__list{border-right:1px solid var(--nr-line);padding:16px var(--nr-gut);max-height:70vh;overflow-y:auto}
.nr-locrow{padding:13px;margin-bottom:10px}
/* Selected reads as an edge marker, not a wash. A green tint across the
   whole panel plus a green border made the chosen branch the brightest
   object on the page — louder than the branch you are about to click. */
.nr-locrow.is-current{border-color:var(--nr-line-2);background:var(--nr-ink-4);position:relative}
.nr-locrow.is-current::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nr-rage)}
.nr-locrow.is-hidden{display:none}
.nr-locrow__head{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:13.5px;font-weight:740;letter-spacing:-.02em}
.nr-locrow__head a{color:var(--nr-paper)}
.nr-locrow__km{margin-left:auto;font-family:var(--nr-mono);font-size:var(--nr-fs-10_5);color:var(--nr-mute-2)}
/* Drive time sits beside the distance, never instead of it: one is measured,
   the other is routed, and a customer deserves both facts. */
.nr-locrow__sep{font-family:var(--nr-mono);font-size:var(--nr-fs-10_5);color:var(--nr-line-2)}
.nr-locrow__drive{font-family:var(--nr-mono);font-size:var(--nr-fs-10_5);color:var(--nr-rage);letter-spacing:.02em}
.nr-locrow__address{font-size:11px;color:var(--nr-mute);line-height:1.45;margin-bottom:8px}
.nr-locrow__actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}

/* the map is CSS and positioned pins — no API call, no key, no third party */
.nr-map{position:relative;overflow:hidden;background:radial-gradient(60% 60% at 60% 40%,rgba(255,255,255,.06),transparent 70%),var(--nr-ink-3);min-height:340px}
.nr-map::before{content:"";position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px)}
.nr-map__road{position:absolute;background:rgba(255,255,255,.09)}
.nr-map__pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2}
.nr-map__drop{width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--nr-grad);box-shadow:0 5px 16px rgba(0,0,0,.5)}
.nr-map__pin--warn .nr-map__drop{background:linear-gradient(140deg,var(--nr-warn),#C99A3E)}
.nr-map__pin--bad .nr-map__drop,.nr-map__pin--info .nr-map__drop{background:linear-gradient(140deg,#8A9A8E,#5A6A5E)}
.nr-map__pin.is-active .nr-map__drop{box-shadow:0 0 0 4px rgba(140,255,62,.25),0 5px 16px rgba(0,0,0,.5)}
.nr-map__label{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);font-weight:700;background:rgba(7,18,11,.9);border:1px solid var(--nr-line);border-radius:20px;padding:3px 9px;white-space:nowrap;color:var(--nr-paper)}
.nr-map__note{position:absolute;left:16px;bottom:16px;max-width:250px;background:rgba(7,18,11,.9);border:1px solid var(--nr-line);border-radius:10px;padding:12px 14px;z-index:3}
.nr-map__note-title{font-size:12px;font-weight:730;margin-bottom:4px}
.nr-map__note-text{font-size:11px;color:var(--nr-mute);line-height:1.5}

/* ---- store page ---- */
.nr-storepage__pill{margin:14px 0}
.nr-storepage__split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--nr-line)}
.nr-storepage__col{padding:22px var(--nr-gut)}
.nr-storepage__col+.nr-storepage__col{border-left:1px solid var(--nr-line)}
.nr-hours__table th{font-weight:650;font-size:12.5px}
.nr-hours__table td{font-size:12.5px;color:var(--nr-mute);text-align:right}
.nr-hours__today{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.12em;text-transform:uppercase;color:var(--nr-rage-hi);margin-left:7px}
.nr-hours__note{display:block;font-size:var(--nr-fs-10_0);color:var(--nr-warn)}
.nr-holiday{margin-top:14px;border:1px solid rgba(240,200,126,.24);background:rgba(240,200,126,.08);border-radius:9px;padding:10px 12px;font-size:11.5px;color:var(--nr-warn)}
.nr-collect{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.9;color:var(--nr-mute)}
.nr-collect b{color:var(--nr-paper);font-weight:680}

/* ---- store card ---- */
.nr-storecard__head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:730;letter-spacing:-.02em;margin-bottom:6px}
.nr-storecard__head a{color:var(--nr-paper)}
.nr-storecard__status{font-size:11px;font-weight:650;margin-bottom:3px}
.nr-storecard__address{font-size:11px;color:var(--nr-mute);line-height:1.45;margin-bottom:5px}
.nr-storecard__km{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-mute-2)}
.nr-storecard__sep{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-line-2)}
.nr-storecard__drive{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-rage)}
.nr-storepage__travel{margin:8px 0 0;font-family:var(--nr-mono);font-size:11px;color:var(--nr-mute-2);letter-spacing:.03em}
.nr-storepage__travel [data-nr-store-drive]{color:var(--nr-rage)}
.nr-storecard__actions{margin-top:11px}
.nr-storecard.is-home{border-color:rgba(140,255,62,.34)}

/* ---- advisor chat ---- */
.nr-chat{border:1px solid var(--nr-line);border-radius:var(--nr-r);background:var(--nr-ink-2);overflow:hidden}
.nr-chat__log{display:flex;flex-direction:column;gap:12px;padding:18px;min-height:280px;max-height:62vh;overflow-y:auto}
.nr-bub{max-width:78%;padding:11px 14px;border-radius:14px;font-size:12.5px;line-height:1.5}
.nr-bub--me{margin-left:auto;background:var(--nr-ink-4);border:1px solid var(--nr-rage);color:var(--nr-paper);border-bottom-right-radius:4px;font-weight:600}
.nr-bub--ai,.nr-bub--warn{background:var(--nr-ink-4);border:1px solid var(--nr-line);border-bottom-left-radius:4px}
.nr-bub--warn{border-color:rgba(240,200,126,.34);background:rgba(240,200,126,.07)}
.nr-bub__who{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.14em;text-transform:uppercase;color:var(--nr-rage-hi);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.nr-bub__who::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nr-bub--warn .nr-bub__who{color:var(--nr-warn)}
.nr-chat__handoff{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.nr-chat__prompts{padding:0 18px 12px}
.nr-chat__form{display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--nr-line);background:var(--nr-ink-2)}
.nr-chat__form .nr-input{flex:1}
.nr-chat__note{padding:0 18px 16px;font-size:var(--nr-fs-10_5);color:var(--nr-mute-2);line-height:1.5}

/* the stack card the advisor and the builder both return */
.nr-stackcard{border:1px solid var(--nr-line);border-radius:10px;overflow:hidden;margin-top:10px}
.nr-stackcard__row{display:flex;gap:10px;padding:9px 11px;border-bottom:1px solid var(--nr-line);align-items:center}
.nr-stackcard__name{flex:1;font-size:11px;font-weight:620;line-height:1.3}
.nr-stackcard__cps{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);color:var(--nr-rage-hi);font-weight:700}
.nr-stackcard__price{font-family:var(--nr-mono);font-size:11px;font-weight:750}
.nr-stackcard__total{background:var(--nr-ink-4);padding:10px 11px;display:flex;font-size:12px;font-weight:750;gap:10px}
.nr-stackcard__total b{margin-left:auto;font-family:var(--nr-mono)}

/* advisor recommendations — the products it actually picked
   A recommendation you cannot buy is a conversation, not a shop. Each of
   these is a real product: picture, why it was chosen, price, cost per
   serving, branch stock, and a button that puts it in the cart. */
.nr-picks{
  margin-top:11px;border:1px solid var(--nr-line);border-radius:12px;
  overflow:hidden;background:var(--nr-ink-2);
}
.nr-pick{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;
  padding:12px;border-bottom:1px solid var(--nr-line);align-items:start;
}
.nr-pick:last-child{border-bottom:0}
.nr-pick__media{
  display:block;width:64px;height:64px;border-radius:9px;overflow:hidden;
  background:var(--nr-ink-4);box-shadow:inset 0 0 0 1px var(--nr-line);
}
.nr-pick__media img{width:100%;height:100%;object-fit:contain;padding:5%;display:block}
.nr-pick__body{min-width:0}
.nr-pick__brand{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nr-mute-2);margin:0 0 2px;
}
.nr-pick__name{
  display:block;font-size:13px;font-weight:730;line-height:1.3;
  color:var(--nr-paper);text-decoration:none;
}
.nr-pick__name:hover{color:var(--nr-rage-hi)}
.nr-pick__why{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:var(--nr-mute)}
.nr-pick__meta{margin:7px 0 0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.nr-pick__price{font-family:var(--nr-mono);font-size:13px;font-weight:800}
.nr-pick__cps{font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:700;color:var(--nr-rage-hi)}
.nr-pick__stock{
  margin:5px 0 0;display:flex;align-items:center;gap:6px;
  font-size:var(--nr-fs-10_5);color:var(--nr-mute-2);
}
/* Compact, because there are two of these per recommendation and up to six
   recommendations per answer. At full button size the accent stops being the
   3% it is supposed to be and becomes the bubble. */
.nr-pick__actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.nr-pick__actions .nr-btn{min-height:34px;padding:0 12px;font-size:var(--nr-fs-10_5);letter-spacing:.08em}
.nr-picks__total{
  background:var(--nr-ink-4);padding:11px 12px;
  display:flex;align-items:baseline;gap:10px;font-size:12px;font-weight:750;
}
.nr-picks__total b{margin-left:auto;font-family:var(--nr-mono)}
.nr-picks__permonth{
  flex-basis:100%;font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:700;
  color:var(--nr-mute-2);
}
/* the assistant's own follow-up questions
   A chip is nowrap by design — it is normally two or three words. These are
   whole questions the assistant wrote, so inside a chat bubble they wrap and
   left-align instead of running off a phone. */
.nr-bub__next{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.nr-bub__next .nr-chip{
  white-space:normal;text-align:left;max-width:100%;
  line-height:1.35;padding-block:7px;
}

@media (max-width:520px){
  .nr-pick{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .nr-pick__media{width:52px;height:52px}
}

/* ---- stack builder ---- */
.nr-stack__step fieldset{border:0;margin:0;padding:0}
.nr-stack__steps{list-style:none;margin:0;padding:0}
.nr-stack__legend{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:750;letter-spacing:-.025em;margin-bottom:16px}
.nr-stack__choice{cursor:pointer;text-align:left}
.nr-stack__choice:has(:checked){border-color:var(--nr-rage);background:var(--nr-ink-4)}
.nr-stack__choice:focus-within{outline:2px solid var(--nr-rage-hi);outline-offset:2px}
.nr-stack__nav{display:flex;gap:9px;margin-top:20px}
.nr-stack__nav>:last-child{margin-left:auto}
.nr-stackresult{margin-top:24px}

/* ---- quick view ---- */
.nr-quickview{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;padding:var(--nr-gut);background:rgba(3,8,5,.72)}
.nr-quickview.is-open{display:flex}
.nr-quickview__panel{position:relative;width:min(880px,100%);max-height:86vh;overflow-y:auto;background:var(--nr-ink-2);border:1px solid var(--nr-line-2);border-radius:var(--nr-r);padding:24px}
.nr-quickview__close{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:var(--nr-r-xs);color:var(--nr-mute);font-size:20px;line-height:1}
.nr-quickview__body{display:grid;grid-template-columns:.85fr 1fr;gap:22px;align-items:start}

/* ---- footer extras the home page uses ---- */
.nr-footer__col{min-width:0}
.nr-footer__promo{border:1px solid var(--nr-line-2);background:var(--nr-ink-4);border-radius:11px;padding:14px;margin-top:14px}

@media(max-width:1000px){
  .nr-loc{grid-template-columns:minmax(0,1fr)}
  .nr-loc__list{border-right:0;border-bottom:1px solid var(--nr-line);max-height:none}
  .nr-map{min-height:300px}
}
@media(max-width:900px){
  .nr-storepage__split,.nr-quickview__body{grid-template-columns:minmax(0,1fr)}
  .nr-storepage__col+.nr-storepage__col{border-left:0;border-top:1px solid var(--nr-line)}
  .nr-strip__inner{grid-template-columns:minmax(0,1fr)}
  .nr-strip__item{border-right:0;border-bottom:1px solid var(--nr-line)}
  .nr-bub{max-width:92%}
}