/* NUTRITION RAGE — 02 BASE — Reset, document, typography scale, links, focus, wrap, utilities. */

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend{margin:0;padding:0}
ul[class],ol[class]{list-style:none}
fieldset{border:0}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}

body{
  font-family:var(--nr-sans);
  background:var(--nr-ink);
  color:var(--nr-paper);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}

/* Scroll lock while a drawer or the mobile menu is open. */
body.nr-locked{overflow:hidden}

img,svg,video,canvas,picture,iframe{display:block;max-width:100%}
img,video{height:auto}
/* Only where the SVG has not already said what it wants.
   A CSS declaration beats a presentation attribute, so a bare `svg{fill}`
   overrode every `fill="none"` in the icon sprite — and the whole set is
   drawn as strokes. The cart, the search glass, the pin, the clock: all of
   them were rendering as solid blobs with their outlines flooded, on every
   page. :not([fill]) leaves an icon's own declaration alone and still gives
   inline decorative artwork a colour to inherit. */
svg:not([fill]){fill:currentColor}

input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}

table{border-collapse:collapse;width:100%}

/* ---------- type scale ---------- */
h1,h2,h3,h4,h5,h6{font-weight:760;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,62px);line-height:.96;letter-spacing:-.045em;font-weight:800}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:-.032em}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.028em}
h4{font-size:17px;font-weight:760;letter-spacing:-.025em}
h5{font-size:14px;font-weight:750;letter-spacing:-.02em}
h6{font-size:13px;font-weight:700;letter-spacing:-.015em}

p{text-wrap:pretty}
/* Prose paragraphs breathe. FORM ROWS DO NOT.
   WooCommerce renders every checkout and account field as a <p class="form-row">,
   so this rule was giving every field after the first a 1em top margin —
   inside a two-column grid that put "Last name" 15px lower than "First name",
   "Province" lower than "City", and so on down the form. It looked like a
   broken grid; it was a typography rule reaching somewhere it was never meant
   to go. */
p+p:not(.form-row){margin-top:1em}

small{font-size:.82em}
b,strong{font-weight:700}
s,del{color:var(--nr-mute-2)}
em{font-style:italic}
code,kbd,pre,samp{font-family:var(--nr-mono);font-size:.92em}

hr{border:0;border-top:1px solid var(--nr-line);margin:28px 0}

blockquote{
  border-left:2px solid var(--nr-rage);
  padding:2px 0 2px 16px;
  color:rgba(244,246,243,.74);
}

/* ---------- links ---------- */
a{color:inherit;text-decoration:none;transition:color var(--nr-fast) var(--nr-ease)}
a:hover{color:var(--nr-rage-hi)}

.nr-entry a:not([class]){
  color:var(--nr-rage-hi);
  text-decoration:underline;
  text-decoration-color:rgba(140,255,62,.4);
  text-underline-offset:3px;
}
.nr-entry a:not([class]):hover{text-decoration-color:var(--nr-rage-hi)}

/* ---------- focus ---------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--nr-rage-hi);
  outline-offset:2px;
  border-radius:3px;
}
.nr-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--nr-rage);color:var(--nr-on-rage);
  padding:12px 20px;border-radius:0 0 var(--nr-r-sm) 0;
  font-size:13px;font-weight:700;
}
.nr-skip:focus{left:0;color:var(--nr-on-rage)}

/* ---------- selection + scrollbar ---------- */
::selection{background:var(--nr-rage);color:var(--nr-on-rage)}
::-moz-selection{background:var(--nr-rage);color:var(--nr-on-rage)}

*{scrollbar-width:thin;scrollbar-color:rgba(140,255,62,.36) transparent}

/* The `hidden` attribute must actually hide.
 *
 * The browser's own [hidden]{display:none} is a USER-AGENT rule, and any
 * author rule beats it — so `.nr-btn{display:inline-flex}` quietly overrode
 * `hidden` and the stack builder's Back button showed on step one, before
 * there was anything to go back to. Every element the theme hides with the
 * attribute rather than a class depends on this line. */
[hidden]{display:none !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--nr-ink-2)}
::-webkit-scrollbar-thumb{
  background:rgba(140,255,62,.30);
  border-radius:20px;
  border:2px solid var(--nr-ink-2);
}
::-webkit-scrollbar-thumb:hover{background:rgba(140,255,62,.5)}

/* ---------- layout wrap ---------- */
.nr-wrap{
  width:100%;
  max-width:var(--nr-wrap);
  margin-inline:auto;
  padding-inline:var(--nr-gut);
}
.nr-wrap--narrow{max-width:820px}
.nr-wrap--flush{padding-inline:0}

.nr-sec{padding-block:clamp(38px,6vw,72px)}
.nr-sec--tint{background:var(--nr-ink-2)}
.nr-sec--tight{padding-block:clamp(26px,4vw,44px)}
.nr-sec+.nr-sec{border-top:1px solid var(--nr-line)}

.nr-sechead{
  display:flex;align-items:baseline;gap:12px;
  margin-bottom:22px;flex-wrap:wrap;
}
.nr-sechead__title{font-size:clamp(19px,2.4vw,26px);font-weight:760;letter-spacing:-.028em}
.nr-sechead__sub{font-size:13px;color:var(--nr-mute)}
.nr-sechead__more{
  margin-left:auto;font-size:13px;color:var(--nr-rage-hi);font-weight:600;
}
.nr-sechead__more:hover{color:var(--nr-rage)}



.nr-eyebrow{
  /* Was a hard 10px, below the readable floor on a phone. The token scales
     with the viewport; a hard value cannot. */
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--nr-rage-hi);font-weight:700;
  display:flex;align-items:center;gap:9px;margin-bottom:16px;
}
.nr-eyebrow::before{content:"";width:22px;height:1px;background:var(--nr-rage);flex-shrink:0}

.nr-kicker{
  font-family:var(--nr-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nr-rage-hi);font-weight:700;
}

.nr-lede{
  font-size:clamp(15px,1.6vw,18px);
  color:rgba(244,246,243,.7);
  max-width:62ch;
}

/* ---------- grids ---------- */
.nr-grid{display:grid;gap:14px}
.nr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nr-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nr-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){
  .nr-grid--4,.nr-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .nr-grid--3,.nr-grid--4,.nr-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* horizontal rail */
.nr-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;
}
.nr-rail>*{scroll-snap-align:start}
@media(min-width:1001px){
  .nr-rail{grid-auto-columns:minmax(0,1fr);overflow:visible}
}

/* ---------- utilities ---------- */
.nr-mono{font-family:var(--nr-mono)}
.nr-green{color:var(--nr-rage-hi)}
.nr-mute{color:var(--nr-mute)}
.nr-mute-2{color:var(--nr-mute-2)}
.nr-warn{color:var(--nr-warn)}
.nr-bad{color:var(--nr-bad)}
.nr-center{text-align:center}
.nr-right{text-align:right}
.nr-flex{display:flex}
.nr-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nr-gap{gap:10px}
.nr-push{margin-left:auto}
.nr-nowrap{white-space:nowrap}
.nr-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nr-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nr-mt{margin-top:16px}
.nr-mt-lg{margin-top:32px}
.nr-mb{margin-bottom:16px}
.nr-hidden{display:none !important}

.nr-sr,.screen-reader-text{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.nr-sr:focus,.screen-reader-text:focus{
  position:static !important;width:auto;height:auto;
  clip:auto;clip-path:none;margin:0;
}

.nr-gradtext{
  background:linear-gradient(96deg,var(--nr-rage-hi) 6%,var(--nr-rage) 50%,var(--nr-rage-lo) 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.nr-divider{height:1px;background:var(--nr-line);border:0}

/* alignwide / alignfull for the block editor */
.alignwide{max-width:min(1080px,100%);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.aligncenter{margin-inline:auto;text-align:center}
.alignleft{float:left;margin:0 20px 14px 0}
.alignright{float:right;margin:0 0 14px 20px}

/* ---------- REVEAL FAILSAFE ---------- — Belt and braces. If IntersectionObserver never fires — JS blocked, a script — error, an old browser — this keyframe reveals the element at 2 s anyway. — Content must NEVER be permanently invisible. 07-motion.css refines the — in-view behaviour; this guarantees the floor. */
@keyframes nr-reveal-failsafe{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
[data-nr-reveal]{
  opacity:0;
  transform:translateY(18px);
  animation:nr-reveal-failsafe .6s var(--nr-ease-out) 2s forwards;
}
[data-nr-reveal].is-revealed,
.nr-no-js [data-nr-reveal]{
  opacity:1;
  transform:none;
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-nr-reveal]{opacity:1;transform:none;animation:none}
}