/* ============================================================
   NUTRITION RAGE — 09 SYSTEM
   THE PERFORMANCE SYSTEM applied to the real site.

   Files 02–08 were written against the old visual language.
   Rather than rewrite seven stylesheets in place — which would
   have meant touching every rule the test suite guards — this
   layer loads last and restyles the REAL theme classes into the
   new system: the branch strip, header, navigation, mega menu,
   search, mobile tab bar, drawers, product cards, controls,
   forms, cart, checkout, store cards and footer.

   Nothing here changes markup, behaviour or a single template.
   Every selector below already exists in the theme.
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL RESET INTO THE NEW LANGUAGE
   ------------------------------------------------------------ */
body{background:var(--nr-ink);color:var(--nr-paper);font-size:var(--nr-t-body);line-height:var(--nr-lh-body)}

h1,h2,h3,.nr-page__title,.nr-sechead__title{
  font-family:var(--nr-display);font-weight:800;
  letter-spacing:var(--nr-track-tight);line-height:var(--nr-lh-tight);
  text-transform:uppercase;
}
.nr-page__title{font-size:var(--nr-t-hero);letter-spacing:var(--nr-track-hero);line-height:var(--nr-lh-hero)}
.nr-sechead__title{font-size:var(--nr-t-xxl)}
.nr-sechead__sub,.nr-page__sub{font-size:var(--nr-t-md);color:var(--nr-mute)}

/* Technical microcopy voice, everywhere it already exists. */
.nr-eyebrow,.nr-breadcrumbs,.nr-help,.nr-sechead__sub{
  font-family:var(--nr-mono);letter-spacing:var(--nr-track-tech);text-transform:uppercase;
}
.nr-breadcrumbs{font-size:var(--nr-t-micro);color:var(--nr-mute-2)}
.nr-help{font-size:var(--nr-t-micro);letter-spacing:.1em;text-transform:none}

/* ------------------------------------------------------------
   2. CONTROLS — precision equipment, not SaaS buttons
   ------------------------------------------------------------ */
.nr-btn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--nr-r-sm);
  font-family:var(--nr-mono);font-size:var(--nr-t-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  min-height:44px;
  transition:border-color var(--nr-fast) var(--nr-ease),color var(--nr-fast) var(--nr-ease),
             background var(--nr-fast) var(--nr-ease),transform var(--nr-instant) var(--nr-ease-snap);
}
.nr-btn:active{transform:translateY(1px) scale(.995)}
.nr-btn:focus-visible{outline:2px solid var(--nr-rage);outline-offset:2px}
/* energy travelling across the control */
.nr-btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-100%);transition:transform var(--nr-slow) var(--nr-ease-mech);
}
.nr-btn--ghost::after{background:var(--nr-charge)}
.nr-btn:hover::after{transform:translateX(100%)}
.nr-btn--sm{min-height:36px;font-size:var(--nr-t-micro)}
.nr-chip{border-radius:var(--nr-r-pill);font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.12em;text-transform:uppercase;min-height:36px}

/* Forms read as instrument inputs. */
.nr-input,.nr-select,input[type="text"],input[type="email"],input[type="tel"],
input[type="search"],input[type="number"],input[type="password"],textarea,select{
  background:var(--nr-ink);border:1px solid var(--nr-line-2);border-radius:var(--nr-r-sm);
  color:var(--nr-paper);min-height:48px;padding:0 var(--nr-s4);
  font-family:var(--nr-sans);font-size:var(--nr-t-md);
  transition:border-color var(--nr-fast) var(--nr-ease),box-shadow var(--nr-fast) var(--nr-ease);
}
textarea{padding:var(--nr-s3) var(--nr-s4);min-height:120px;line-height:1.55}
.nr-input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--nr-rage);box-shadow:0 0 0 3px var(--nr-rage-dim);
}
.nr-label{font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:var(--nr-track-tech);
  text-transform:uppercase;color:var(--nr-mute-2)}

/* ------------------------------------------------------------
   3. BRANCH STRIP + HEADER
   ------------------------------------------------------------ */
.nr-storebar{
  background:var(--nr-ink-5);border-bottom:1px solid var(--nr-line);
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2);
}
.nr-storebar__name{color:var(--nr-paper);font-weight:700}
.nr-storebar__change{color:var(--nr-rage)}
.nr-storebar__change:hover{color:var(--nr-rage-hi)}

.nr-header{
  background:color-mix(in srgb,var(--nr-ink-2) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--nr-line);
}
.nr-nav__list > li > a,.nr-nav__list > li > button{
  position:relative;
  font-family:var(--nr-mono);font-size:var(--nr-t-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--nr-mute);
  min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--nr-fast) var(--nr-ease);
}
.nr-nav__list > li > a::after,.nr-nav__list > li > button::after{
  content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:var(--nr-rage);
  transform:scaleX(0);transform-origin:left;transition:transform var(--nr-med) var(--nr-ease-mech);
}
.nr-nav__list > li:hover > a,.nr-nav__list > li:hover > button,
.nr-nav__list > li > [aria-expanded="true"]{color:var(--nr-paper)}
.nr-nav__list > li:hover > a::after,.nr-nav__list > li:hover > button::after,
.nr-nav__list > li > [aria-expanded="true"]::after{transform:scaleX(1)}

.nr-actions__btn{border-radius:var(--nr-r-sm);min-width:44px;min-height:44px;
  transition:color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease)}
.nr-actions__btn:hover{background:var(--nr-ink-4);color:var(--nr-paper)}
.nr-actions__count{background:var(--nr-rage);color:var(--nr-on-rage);
  font-family:var(--nr-mono);font-weight:800;border-radius:var(--nr-r-pill)}

/* ------------------------------------------------------------
   4. MEGA MENU — oversized, numbered, editorial
   ------------------------------------------------------------ */
.nr-mega-root{background:var(--nr-ink-2);border-bottom:1px solid var(--nr-line-2);
  box-shadow:var(--nr-lift-3)}
.nr-mega__heading{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:var(--nr-track-tech);
  text-transform:uppercase;color:var(--nr-mute-2);font-weight:600;
}
.nr-mega__sublist > li > a{
  display:flex;align-items:center;gap:var(--nr-s3);
  padding:var(--nr-s3) 0;border-bottom:1px solid var(--nr-line);
  font-family:var(--nr-display);font-weight:730;font-size:var(--nr-t-lg);
  letter-spacing:var(--nr-track-tight);text-transform:uppercase;color:var(--nr-paper);
  transition:color var(--nr-fast) var(--nr-ease),padding-left var(--nr-med) var(--nr-ease-mech);
}
.nr-mega__sublist > li > a:hover{color:var(--nr-rage);padding-left:var(--nr-s3)}

/* ------------------------------------------------------------
   5. SEARCH
   ------------------------------------------------------------ */
.nr-searchbox{background:var(--nr-ink);border:1px solid var(--nr-line);border-radius:var(--nr-r-sm)}
.nr-searchbox:focus-within{border-color:var(--nr-rage);box-shadow:0 0 0 3px var(--nr-rage-dim)}
.nr-suggest{background:var(--nr-ink-2);border:1px solid var(--nr-line-2);
  border-radius:var(--nr-r);box-shadow:var(--nr-lift-3)}
.nr-suggest__group{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);color:var(--nr-mute-2)}
.nr-suggest__item{border-radius:var(--nr-r-sm);min-height:48px}
.nr-suggest__item:hover,.nr-suggest__item.is-active{background:var(--nr-ink-4);color:var(--nr-paper);box-shadow:inset 2px 0 0 var(--nr-rage)}
.nr-suggest__price{font-family:var(--nr-mono);font-weight:750}

/* ------------------------------------------------------------
   6. MOBILE TAB BAR + DRAWERS
   ------------------------------------------------------------ */
.nr-tabbar{
  background:color-mix(in srgb,var(--nr-ink-2) 94%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--nr-line);
}
.nr-tabbar__item{
  position:relative;min-height:58px;
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.12em;text-transform:uppercase;
  color:var(--nr-mute-2);transition:color var(--nr-fast) var(--nr-ease);
}
.nr-tabbar__item.is-active,.nr-tabbar__item[aria-current]{color:var(--nr-rage)}
.nr-tabbar__item.is-active::before,.nr-tabbar__item[aria-current]::before{
  content:"";position:absolute;top:0;left:26%;right:26%;height:2px;
  background:var(--nr-rage);border-radius:0 0 2px 2px;box-shadow:0 0 14px var(--nr-rage-ink);
}
.nr-tabbar__item:active{transform:scale(.94)}
/* The bull, painted as a mask so it inherits the tab's colour and lights up
   green with the rest of the item rather than needing a second file. */
.nr-tabbar__mark{
  width:22px;height:22px;display:block;
  background:currentColor;
  -webkit-mask:var(--nr-mark) center/contain no-repeat;
  mask:var(--nr-mark) center/contain no-repeat;
}

/* ---- the Stores tab breathes with the branch ----
   Green open, amber closing soon, red closed. The pulse is a ring behind the
   icon rather than a change of the icon's own colour, so the tab still reads
   as navigation first and status second — and so the active-tab green does
   not have to fight a red "closed" for the same pixels. */
.nr-tabbar__glyph{position:relative;display:grid;place-items:center;width:24px;height:24px}
.nr-tabbar__glyph svg{position:relative;z-index:1}
.nr-tabbar__mark{position:relative;z-index:1}

.nr-tabbar__item--live{--nr-tab-tone:var(--nr-mute-2)}
.nr-tabbar__item--live[data-nr-tab-status="good"]{--nr-tab-tone:var(--nr-rage)}
.nr-tabbar__item--live[data-nr-tab-status="warn"]{--nr-tab-tone:var(--nr-warn)}
.nr-tabbar__item--live[data-nr-tab-status="bad"] {--nr-tab-tone:var(--nr-bad)}

.nr-tabbar__item--live .nr-tabbar__glyph svg,
.nr-tabbar__item--live .nr-tabbar__mark{color:var(--nr-tab-tone)}
.nr-tabbar__item--live .nr-tabbar__mark{background:var(--nr-tab-tone)}

.nr-tabbar__pulse{
  position:absolute;inset:50% auto auto 50%;
  width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;
  background:var(--nr-tab-tone);
  opacity:.28;
  animation:nr-tab-pulse 2.4s var(--nr-ease-out) infinite;
  pointer-events:none;
}
/* Closed is a resting state, not an alarm: it glows, it does not throb. */
.nr-tabbar__item--live[data-nr-tab-status="bad"] .nr-tabbar__pulse{
  animation-duration:4.2s;opacity:.2;
}
.nr-tabbar__item--live[data-nr-tab-status="warn"] .nr-tabbar__pulse{
  animation-duration:1.5s;
}
@keyframes nr-tab-pulse{
  0%  {transform:scale(.55);opacity:.34}
  70% {transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  /* Still a status, just a steady one. */
  .nr-tabbar__pulse{animation:none;opacity:.22;transform:scale(1.15)}
}

.nr-drawer{background:var(--nr-ink);border-left:1px solid var(--nr-line-2)}
.nr-drawer__head{border-bottom:1px solid var(--nr-line)}
.nr-drawer__title{font-family:var(--nr-display);font-weight:800;
  letter-spacing:var(--nr-track-tight);text-transform:uppercase}
.nr-scrim{background:rgba(3,4,6,.66);backdrop-filter:blur(2px)}

/* ------------------------------------------------------------
   7. CARDS AND THE PRODUCT MODULE
   ------------------------------------------------------------ */
.nr-card{background:var(--nr-ink-2);border:1px solid var(--nr-line);border-radius:var(--nr-r)}
.nr-pc{
  position:relative;overflow:hidden;
  transition:border-color var(--nr-med) var(--nr-ease),transform var(--nr-med) var(--nr-ease-out),
             box-shadow var(--nr-med) var(--nr-ease-out);
}
/* the activated green line */
.nr-pc::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--nr-rage);z-index:3;
  transition:width var(--nr-slow) var(--nr-ease-mech);
}
.nr-card--link:hover,.nr-pc:hover,.nr-pc:focus-within{
  transform:translateY(-3px);border-color:var(--nr-line-2);box-shadow:var(--nr-lift-3);
}
.nr-pc:hover::before,.nr-pc:focus-within::before{width:100%}
.nr-pc__media,.nr-ph{
  /* Product wells are lit like a studio, not like a nightclub. A green
     radial behind every image tinted the largest surfaces on the shop and
     product pages — the tokens went to neutral graphite for exactly this
     reason, and then this one gradient put the green cast back. The light
     is now white, low and off-centre, which is what actually reads as
     dramatic product lighting. */
  background:radial-gradient(72% 62% at 50% 26%,rgba(255,255,255,.055),transparent 72%),var(--nr-ink-3);
  border-radius:var(--nr-r-sm);
}
.nr-pc__brand{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2)}
.nr-pc__name{font-family:var(--nr-display);font-weight:750;font-size:var(--nr-t-lg);
  letter-spacing:var(--nr-track-tight);line-height:1.15}
.nr-pc__price{font-family:var(--nr-display);font-weight:800;font-size:var(--nr-t-xl);
  letter-spacing:-.03em}
.nr-pc__cps,.nr-cps{font-family:var(--nr-mono);font-size:var(--nr-t-xs);font-weight:700;color:var(--nr-rage)}
.nr-pc__stock,.nr-stock{font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:.1em}
.nr-ph__badge{background:var(--nr-rage);color:var(--nr-on-rage);border-radius:var(--nr-r-xs);
  font-family:var(--nr-mono);font-weight:800;letter-spacing:.12em}
.nr-ph__fav{border-radius:var(--nr-r-pill);background:rgba(5,6,9,.6)}
.nr-ph__fav.is-active{color:var(--nr-rage);background:var(--nr-ink-4);box-shadow:inset 0 0 0 1px var(--nr-rage)}

/* Brand + goal tiles read as system modules. */
.nr-tile,.nr-brand{background:var(--nr-ink-3);border:1px solid var(--nr-line);border-radius:var(--nr-r);
  transition:border-color var(--nr-med) var(--nr-ease),transform var(--nr-med) var(--nr-ease-out)}
.nr-tile:hover,.nr-brand:hover{border-color:var(--nr-rage-ink);transform:translateY(-2px)}
.nr-tile__name{font-family:var(--nr-display);font-weight:750;letter-spacing:var(--nr-track-tight)}
.nr-tile__count,.nr-brand small{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.1em;color:var(--nr-mute-2)}

/* ------------------------------------------------------------
   8. COMMERCE SURFACES — cart, checkout, tables
   Checkout is the one place the system goes quiet: same
   language, less movement, larger fields. Never trade
   conversion for spectacle.
   ------------------------------------------------------------ */
.nr-table{font-size:var(--nr-t-sm)}
.nr-table thead th{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2)}
.nr-table td,.nr-table th{border-bottom:1px solid var(--nr-line)}

.nr-cartpage,.nr-checkout{--nr-sec:clamp(2.5rem,5vw,4rem)}
.nr-checkout .nr-btn::after{display:none}          /* stillness where money changes hands */
/* A 52px minimum is right for a field you type into and wrong for a radio or
   a checkbox: an 18px-wide control forced to 52px tall draws as an oval. The
   fulfilment radios on checkout were exactly that, on every device. */
.nr-checkout input:not([type="radio"]):not([type="checkbox"]),
.nr-checkout select,
.nr-checkout textarea{min-height:52px;font-size:var(--nr-t-md)}
.nr-checkout .nr-label{font-size:var(--nr-t-xs);letter-spacing:.08em}
.nr-fsum,.nr-ful__opt{background:var(--nr-ink-3);border:1px solid var(--nr-line);border-radius:var(--nr-r)}
.nr-ful__opt.is-selected,.nr-ful__opt:has(:checked){
  border-color:var(--nr-rage);background:var(--nr-ink-4);
}
.nr-progress,.nr-freebar{background:var(--nr-ink-4);border-radius:var(--nr-r-pill);overflow:hidden}
.nr-progress__fill,.nr-freebar__fill{background:var(--nr-rage);
  box-shadow:0 0 16px var(--nr-rage-ink);transition:width var(--nr-slow) var(--nr-ease-mech)}

/* ------------------------------------------------------------
   9. STORE NETWORK
   ------------------------------------------------------------ */
.nr-store-card,.nr-locrow{background:var(--nr-ink-2);border:1px solid var(--nr-line);
  border-radius:var(--nr-r);transition:border-color var(--nr-med) var(--nr-ease)}
.nr-store-card.is-home,.nr-locrow.is-current{border-color:var(--nr-line-2);background:var(--nr-ink-4);position:relative}
.nr-store-card.is-home::before,.nr-locrow.is-current::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nr-rage);z-index:1;
}
.nr-store-card__name,.nr-locrow__head{font-family:var(--nr-display);font-weight:750;
  letter-spacing:var(--nr-track-tight)}
.nr-store-card__address,.nr-locrow__address{font-size:var(--nr-t-sm);color:var(--nr-mute)}
.nr-status,.nr-store-card__status{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase}
.nr-map{background:var(--nr-ink-3);border:1px solid var(--nr-line);border-radius:var(--nr-r);
  background-image:var(--nr-grid);background-size:var(--nr-grid-size)}

/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */
.nr-footer{background:var(--nr-ink-5);border-top:1px solid var(--nr-line)}
.nr-footer__heading{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2)}
.nr-footer a{color:var(--nr-mute);transition:color var(--nr-fast) var(--nr-ease)}
.nr-footer a:hover{color:var(--nr-rage)}
.nr-footer__copy{font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:.1em;color:var(--nr-mute-2)}

/* ------------------------------------------------------------
   11. MICROINTERACTIONS
   ------------------------------------------------------------ */
.nr-chip:active,.nr-actions__btn:active,.nr-tabbar__item:active{transform:scale(.96)}
.nr-dot{box-shadow:0 0 0 3px var(--nr-rage-dim)}
::selection{background:var(--nr-rage);color:var(--nr-on-rage)}
:focus-visible{outline:2px solid var(--nr-rage);outline-offset:2px}

/* Reduced motion is already handled by the token layer collapsing
   every duration; nothing here needs a second switch. */

/* ------------------------------------------------------------
   12. THE LABEL IS NOT DECORATION
   The technical-microcopy voice must stop at the manufacturer's
   label. A nutrition panel is a regulated document and the whole
   NR_Label engine exists to print it exactly as stated — so
   nothing here is allowed to change its case or its figures.
   ------------------------------------------------------------ */
.nr-label__table th,
.nr-label__table td,
.nr-label__title,
.nr-label__prose,
.nr-label__notes{text-transform:none}
.nr-label__table th[scope="row"]{
  font-family:var(--nr-sans);font-weight:600;letter-spacing:0;
  color:rgba(247,248,247,.9);
}
.nr-label__sub th[scope="row"]{font-weight:500;color:var(--nr-mute)}
.nr-label__notes,.nr-label__prose{font-family:var(--nr-sans);letter-spacing:0}

/* ============================================================
   PHASE 3 — THE PERFORMANCE SYSTEM HOMEPAGE
   ============================================================ */

/* ---- the hero ---- */
.nr-sys-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94vh,900px);display:flex;align-items:center;
  padding-block:clamp(5rem,14vw,9rem) clamp(4rem,10vw,7rem);
  background:var(--nr-ink);
}
.nr-sys-hero__field{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.55}
.nr-sys-hero__grid{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--nr-grid);background-size:var(--nr-grid-size);
  mask-image:radial-gradient(72% 60% at 40% 30%,#000,transparent)}
.nr-sys-hero__glow{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--nr-glow)}
/*
 * NOT a ch value. `ch` resolves against THIS element's font-size (15px), so
 * min(64ch,74%) capped the column at ~480px while its own headline was set at
 * 100px — and the reveal mask silently clipped "ENGINEER" in half. Display
 * columns get absolute widths.
 */
/*
 * The column cap belongs on the copy, NOT on the wrap.
 *
 * .nr-wrap is 1440px and centred by auto margins. Overriding its max-width to
 * 1100px re-centred the whole block, so the hero copy started ~130px to the
 * right of the logo, the nav and every other section on the page — invisible
 * at 1440px, obvious on a wide monitor. The wrap now keeps the site's own
 * gutters and only the copy inside it is constrained, so the hero starts on
 * the same vertical line as everything else at any width.
 */
.nr-sys-hero__in{position:relative;z-index:1}
.nr-sys-hero__in > *{max-width:min(1100px,100%)}
.nr-sys-hero__id{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2);
  margin-bottom:var(--nr-s5)}
/* Sized against the COLUMN it sits in, not the viewport. The global mega
   scale assumes full width; here it has 74% of it, and "PERFORMANCE." was
   overflowing and being clipped by the reveal mask. */
.nr-sys-hero__title{
  font-family:var(--nr-display);font-size:clamp(2.3rem,7vw,6.5rem);font-weight:800;
  letter-spacing:var(--nr-track-mega);line-height:var(--nr-lh-mega);
  text-transform:uppercase;margin:0;
}
/* masked reveal — typography arriving from behind a hard edge */
.nr-reveal-line{display:block;overflow:hidden}
.nr-reveal-line > span{display:block;transform:translateY(105%);
  animation:nrLineUp var(--nr-cine) var(--nr-ease-out) forwards}
.nr-reveal-line:nth-child(2) > span{animation-delay:.09s}
.nr-reveal-line:nth-child(3) > span{animation-delay:.18s}
@keyframes nrLineUp{to{transform:translateY(0)}}
.nr-sys-hero__lede{margin-top:var(--nr-s6);font-size:var(--nr-t-lg);color:var(--nr-mute);max-width:44ch}
.nr-sys-hero__cta{display:flex;flex-wrap:wrap;gap:var(--nr-s3);margin-top:var(--nr-s7)}
.nr-btn__arw{display:inline-block;transition:transform var(--nr-med) var(--nr-ease-mech)}
.nr-btn:hover .nr-btn__arw{transform:translateX(4px)}
.nr-sys-hero__status{display:flex;flex-wrap:wrap;gap:var(--nr-s7);margin:var(--nr-s8) 0 0}
.nr-sys-hero__status dt{font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2);margin-bottom:var(--nr-s2)}
.nr-sys-hero__status dd{margin:0;font-family:var(--nr-mono);font-size:var(--nr-t-sm);font-weight:700;
  display:flex;align-items:center;gap:var(--nr-s2)}

/* the hero product, rising out of the dark */
.nr-sys-hero__product{
  position:absolute;right:calc(var(--nr-gut) * .5);bottom:0;z-index:0;
  width:min(38vw,520px);text-decoration:none;color:inherit;
  animation:nrRise 1.4s var(--nr-ease-out) both .2s;
}
@keyframes nrRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.nr-sys-hero__tub{display:block;position:relative;filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.nr-sys-hero__tub img{width:100%;height:auto;display:block}
.nr-sys-hero__tub::after{content:"";position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  width:70%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,255,62,.18),transparent)}
.nr-sys-hero__spec{display:block;margin-top:var(--nr-s4);padding-left:var(--nr-s4);
  border-left:1px solid var(--nr-rage-ink)}
.nr-sys-hero__specid{display:block;font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);color:var(--nr-mute-2)}
.nr-sys-hero__specname{display:block;font-family:var(--nr-display);font-weight:750;
  font-size:var(--nr-t-md);letter-spacing:var(--nr-track-tight);margin-top:2px}
.nr-sys-hero__speccps{display:block;font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  color:var(--nr-rage);margin-top:2px}
.nr-sys-hero__scroll{position:absolute;left:var(--nr-gut);bottom:var(--nr-s5);
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);letter-spacing:var(--nr-track-tech);
  text-transform:uppercase;color:var(--nr-mute-2)}

/* ---- the Performance Matrix ---- */
.nr-matrix-sec{border-top:1px solid var(--nr-line)}
.nr-matrix__title{font-family:var(--nr-display);font-size:var(--nr-t-hero);font-weight:800;
  letter-spacing:var(--nr-track-hero);line-height:var(--nr-lh-hero);text-transform:uppercase;
  margin:var(--nr-s4) 0 var(--nr-s8)}
.nr-matrix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--nr-s8);align-items:center}
.nr-matrix__stage{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin-inline:auto}
.nr-matrix__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nr-matrix__wire{stroke:var(--nr-line-2);stroke-width:1;
  stroke-dasharray:4 6;transition:stroke var(--nr-med) var(--nr-ease)}
.nr-matrix__wire.is-live{stroke:var(--nr-rage);stroke-dasharray:none;
  filter:drop-shadow(0 0 6px var(--nr-rage-ink));animation:nrCharge .5s var(--nr-ease-mech)}
@keyframes nrCharge{from{stroke-dashoffset:220;stroke-dasharray:220}to{stroke-dashoffset:0}}
.nr-matrix__ring{fill:none;stroke:var(--nr-line);stroke-width:1}
.nr-matrix__ring--in{stroke-dasharray:2 8}
.nr-matrix__core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22%;aspect-ratio:1;border-radius:var(--nr-r);
  background:var(--nr-machined);display:grid;place-items:center;
  box-shadow:var(--nr-lift-3);transition:box-shadow var(--nr-med) var(--nr-ease);
}
.nr-matrix.is-live .nr-matrix__core{box-shadow:var(--nr-lift-green),var(--nr-lift-3)}
.nr-matrix__coremark{font-family:var(--nr-display);font-weight:800;font-size:var(--nr-t-lg);
  letter-spacing:-.04em;color:var(--nr-paper)}
.nr-matrix.is-live .nr-matrix__coremark{color:var(--nr-rage)}
.nr-matrix__node{
  position:absolute;transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:2px;text-decoration:none;
  padding:var(--nr-s3);min-width:88px;min-height:44px;border-radius:var(--nr-r);
  background:var(--nr-ink-3);border:1px solid var(--nr-line);color:var(--nr-paper);
  transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease),
             transform var(--nr-med) var(--nr-ease-out);
}
.nr-matrix__node:hover,.nr-matrix__node:focus-visible,.nr-matrix__node.is-live{
  border-color:var(--nr-rage);background:var(--nr-ink-4);
  transform:translate(-50%,-50%) scale(1.05);
}
.nr-matrix__n{font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.14em;color:var(--nr-mute-2)}
.nr-matrix__name{font-family:var(--nr-display);font-weight:750;font-size:var(--nr-t-sm);
  letter-spacing:var(--nr-track-tight);text-transform:uppercase;text-align:center;line-height:1.1}
.nr-matrix__lead{font-size:var(--nr-t-md);color:var(--nr-mute);margin-top:var(--nr-s3);max-width:44ch}
.nr-matrix__out{margin-top:var(--nr-s6);display:grid;gap:var(--nr-s3)}
.nr-matrix__row{display:flex;align-items:center;gap:var(--nr-s4);padding:var(--nr-s3) 0;
  border-bottom:1px solid var(--nr-line);text-decoration:none;color:var(--nr-paper);
  transition:padding-left var(--nr-med) var(--nr-ease-mech),color var(--nr-fast) var(--nr-ease)}
.nr-matrix__row:hover{padding-left:var(--nr-s3);color:var(--nr-rage)}
.nr-matrix__rowname{font-weight:650;font-size:var(--nr-t-sm)}
.nr-matrix__rowcps{margin-left:auto;font-family:var(--nr-mono);font-size:var(--nr-t-micro);color:var(--nr-rage)}

/* ---- laboratory white ---- */
.nr-labsec__title{font-family:var(--nr-display);font-size:var(--nr-t-mega);font-weight:800;
  letter-spacing:var(--nr-track-mega);line-height:var(--nr-lh-mega);text-transform:uppercase;
  margin:var(--nr-s4) 0 var(--nr-s8)}
.nr-labsec__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--nr-s7)}
.nr-labsec__body{font-size:var(--nr-t-md);line-height:1.6;margin-top:var(--nr-s3)}

/* ---- mobile: designed, not folded ---- */
@media (max-width:900px){
  /*
   * The hero is a flex row on desktop so the product can sit beside the
   * headline. On a phone it must stack — as a flex ITEM the product ignored
   * its width, shrank to its text and ran off the right edge. Blocking the
   * container is the fix; width and auto margins then behave.
   */
  .nr-sys-hero{display:block;min-height:auto;padding-block:clamp(3rem,10vw,5rem) 0}
  .nr-sys-hero__in,.nr-sys-hero__in > *{max-width:none}
  .nr-sys-hero__product{position:relative;right:auto;bottom:auto;width:min(76vw,360px);
    margin:var(--nr-s7) auto 0;display:block}
  .nr-sys-hero__status{gap:var(--nr-s5);margin-top:var(--nr-s6)}
  .nr-sys-hero__cta{flex-direction:column;align-items:stretch}
  .nr-sys-hero__cta .nr-btn{width:100%}
  .nr-sys-hero__scroll{display:none}
  .nr-matrix{grid-template-columns:1fr;gap:var(--nr-s6)}
  .nr-matrix__stage{max-width:min(92vw,440px)}
  .nr-matrix__node{min-width:74px;padding:var(--nr-s2)}
  .nr-matrix__name{font-size:var(--nr-t-micro)}
}

/* ---- RAGE MODE control ---- */
.nr-ragebtn{
  display:inline-flex;align-items:center;gap:var(--nr-s2);
  min-height:36px;padding:0 var(--nr-s4);cursor:pointer;
  background:transparent;border:1px solid var(--nr-line);border-radius:var(--nr-r-pill);
  color:var(--nr-mute);font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:color var(--nr-fast) var(--nr-ease),border-color var(--nr-fast) var(--nr-ease),
             background var(--nr-fast) var(--nr-ease);
}
.nr-ragebtn:hover{color:var(--nr-paper);border-color:var(--nr-line-2)}
.nr-ragebtn[aria-pressed="true"]{color:var(--nr-rage);border-color:var(--nr-rage-ink);
  background:var(--nr-ink-4)}
.nr-ragebtn__dot{font-size:11px;line-height:1}

/* ---- the bull, used once and at scale ----
   Embossed into the dark behind the headline: present, not decorative, and
   never repeated. It carries no meaning, so it is aria-hidden and it drops
   out entirely on small screens where the type needs the room. */
.nr-sys-hero__bull{
  position:absolute;right:0;top:50%;transform:translateY(-52%);
  width:min(30vw,420px);height:auto;z-index:-1;max-width:100%;
  opacity:.06;filter:blur(.2px);pointer-events:none;user-select:none;
}
[data-nr-rage="on"] .nr-sys-hero__bull{opacity:.13}
@media (max-width:900px){.nr-sys-hero__bull{display:none}}

/* The real wordmark, knocked out for the dark environment. */
/* ---- the logo ----
   Sized by WIDTH, with height:auto. See --nr-logo-w in 01-tokens.css for why:
   a max-width cap under a fixed height letterboxes the artwork instead of
   shrinking the box, which is how a 56px token came to draw a 45px logo.

   `height:auto` also means the aspect ratio can never be forced, so a
   replacement file with different proportions gets drawn correctly rather
   than squashed. The intrinsic width/height on the <img> still stop the
   header reflowing as the file lands. */
.nr-brandmark--img{gap:0}
/* min-width:0 because .nr-brandmark is a flex row, and a flex item will not
   shrink below its content unless told to. Without it the logo kept its full
   width and drew across the footer's Shop column. */
.nr-brandmark__logo{display:block;line-height:0;max-width:100%;min-width:0}
.nr-brandmark__logo picture{display:block}
/* The width is capped TWICE: by the room in the row, and by the width that
   this particular logo's shape would need to reach the height ceiling.
   Whichever is smaller wins, and because only the width is ever set the
   browser derives the height itself — so the artwork is never squashed and
   never letterboxed, at any aspect ratio.

   --nr-logo-ratio is written onto the <img> by nr_brand_logo(): the shipped
   wordmark is 9.33, an uploaded logo carries its own. The fallback here is
   the wordmark's, for the case where the markup came from somewhere else. */
.nr-brandmark__logo img,.nr-brandmark img{
  width:min(
    var(--nr-logo-w),
    calc(var(--nr-logo-h-max) * var(--nr-logo-ratio, 9.33))
  );
  height:auto;max-width:100%;
  display:block;
}
.nr-brandmark--footer .nr-brandmark__logo img{
  width:min(
    var(--nr-logo-w-footer),
    calc(var(--nr-logo-h-footer) * var(--nr-logo-ratio, 6.67))
  );
}
/* 1081–1400: the search field has left the row for a toggle by here, but the
   five-item menu has not, so the logo takes the narrower of the two widths. */
@media (max-width:1400px){
  .nr-brandmark__logo img{width:min(var(--nr-logo-w-md),calc(var(--nr-logo-h-max-md) * var(--nr-logo-ratio,9.33)))}
}
@media (max-width:1080px){
  /* The menu has moved into the drawer, so the logo has the row largely to
     itself and goes back up. */
  .nr-brandmark__logo img{width:min(var(--nr-logo-w-tab),calc(var(--nr-logo-h-max-tab) * var(--nr-logo-ratio,9.33)))}
}
@media (max-width:640px){
  .nr-brandmark__logo img{width:min(var(--nr-logo-w-sm),calc(var(--nr-logo-h-max-sm) * var(--nr-logo-ratio,9.33)))}
  .nr-brandmark--footer .nr-brandmark__logo img{
    width:min(var(--nr-logo-w-footer),calc(var(--nr-logo-h-footer) * .8 * var(--nr-logo-ratio,6.67)));
  }
}

/* ============================================================
   MAKING IT ALIVE
   Ambient motion, all of it transform/opacity so it runs on the
   compositor. Every piece stops when its section leaves the
   viewport, when the tab hides, or under reduced motion.
   ============================================================ */

/* ---- the diagnostic scan across the hero ---- */
.nr-sys-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:36vh;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(140,255,62,.055) 45%,transparent);
  opacity:0;
}
.nr-sys-hero.is-live::after{animation:nrScan 7.5s var(--nr-ease-mech) infinite}
@keyframes nrScan{
  0%{transform:translateY(-40%);opacity:0}
  12%{opacity:1}
  60%{opacity:1}
  100%{transform:translateY(240%);opacity:0}
}

/* the parallax layers need a compositor promise, not a repaint */
.nr-sys-hero__bull,.nr-sys-hero__grid,.nr-sys-hero__product,.nr-sys-hero__in{will-change:transform}

/* the bull breathes */
.nr-sys-hero.is-live .nr-sys-hero__bull{animation:nrBreathe 9s ease-in-out infinite}
@keyframes nrBreathe{0%,100%{opacity:.055}50%{opacity:.10}}
[data-nr-rage="on"] .nr-sys-hero.is-live .nr-sys-hero__bull{animation-duration:5s}

/* the status dot is a heartbeat, not a blink */
.nr-sys-hero__status .nr-dot{animation:nrBeat 2.4s var(--nr-ease) infinite}
@keyframes nrBeat{
  0%,100%{transform:scale(1);box-shadow:0 0 0 3px var(--nr-rage-dim)}
  14%{transform:scale(1.5);box-shadow:0 0 0 6px rgba(140,255,62,.05)}
  28%{transform:scale(1)}
}

/* ---- the live ticker ---- */
.nr-ticker{
  position:relative;overflow:hidden;
  border-block:1px solid var(--nr-line);background:var(--nr-ink-5);
  padding-block:var(--nr-s3);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.nr-ticker__track{
  display:flex;align-items:center;gap:var(--nr-s7);width:max-content;
  animation:nrTick 46s linear infinite;
}
.nr-ticker:hover .nr-ticker__track{animation-play-state:paused}
@keyframes nrTick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.nr-ticker__item{
  display:inline-flex;align-items:center;gap:var(--nr-s2);white-space:nowrap;
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2);
}
.nr-ticker__dot{width:5px;height:5px;border-radius:50%;background:var(--nr-mute-2);flex:none}
.nr-ticker__item--good{color:var(--nr-mute)}
.nr-ticker__item--good .nr-ticker__dot{background:var(--nr-rage);box-shadow:0 0 8px var(--nr-rage-ink)}
.nr-ticker__item--warn .nr-ticker__dot{background:var(--nr-warn)}
.nr-ticker__item--bad .nr-ticker__dot{background:var(--nr-bad)}
[data-nr-rage="on"] .nr-ticker__track{animation-duration:26s}

/* ---- the matrix, idling ---- */
.nr-matrix__core::after{
  content:"";position:absolute;inset:-14%;border-radius:inherit;
  border:1px solid var(--nr-rage-ink);opacity:0;
}
.nr-matrix.is-live .nr-matrix__core::after{animation:nrPing 2.6s var(--nr-ease-out) infinite}
@keyframes nrPing{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.nr-matrix__core{position:absolute}
.nr-matrix__node{transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease),
  transform var(--nr-med) var(--nr-ease-out),box-shadow var(--nr-med) var(--nr-ease)}
.nr-matrix__node.is-live{box-shadow:var(--nr-lift-green)}

/* ---- sections arrive rather than appear ---- */
@media (prefers-reduced-motion: no-preference){
  .nr-matrix-sec .nr-matrix__title,
  .nr-labsec__title{
    animation:nrTitleIn var(--nr-cine) var(--nr-ease-out) both;
    animation-timeline:view();
    animation-range:entry 0% entry 60%;
  }
  @keyframes nrTitleIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion: reduce){
  .nr-ticker__track{animation:none}
  .nr-sys-hero.is-live::after{animation:none}
  .nr-sys-hero.is-live .nr-sys-hero__bull{animation:none}
  .nr-sys-hero__status .nr-dot{animation:none}
  .nr-matrix.is-live .nr-matrix__core::after{animation:none}
}

/* ---- the real branch map ---- */
.nr-map{
  position:relative;overflow:hidden;
  background:var(--nr-ink-3);border:1px solid var(--nr-line);border-radius:var(--nr-r);
  min-height:clamp(320px,52vh,620px);background-image:none;
}
.nr-map__frame{
  display:block;width:100%;height:100%;min-height:clamp(320px,52vh,620px);
  border:0;
  /* Tone the daylight tiles into the environment without making the
     street names unreadable. */
  filter:grayscale(.55) contrast(1.06) brightness(.72) saturate(.85);
  transition:opacity var(--nr-med) var(--nr-ease);
}
.nr-map.is-moving .nr-map__frame{opacity:.45}
.nr-map__bar{
  position:absolute;left:var(--nr-s4);bottom:var(--nr-s4);right:var(--nr-s4);
  display:flex;align-items:center;gap:var(--nr-s3);flex-wrap:wrap;
  padding:var(--nr-s3) var(--nr-s4);
  background:color-mix(in srgb,var(--nr-ink-2) 92%,transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--nr-line-2);border-radius:var(--nr-r);
}
.nr-map__branch{margin:0;font-family:var(--nr-display);font-weight:750;
  font-size:var(--nr-t-md);letter-spacing:var(--nr-track-tight)}
.nr-map__note{margin:0;font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.1em;color:var(--nr-mute-2)}
.nr-map__out{margin-left:auto}
@media (max-width:600px){
  .nr-map__bar{left:var(--nr-s3);right:var(--nr-s3);bottom:var(--nr-s3)}
  .nr-map__out{margin-left:0;width:100%}
}

/* ---- the live map: every branch, and the visitor ----
   The tiles are the only daylight surface on the site, so they are toned
   into the environment rather than left bright white. The filter sits on
   the tile pane alone — pins, popups and the zoom control stay full
   contrast, because a dimmed control reads as a disabled one. */
.nr-map__canvas{
  position:absolute;inset:0;
  min-height:clamp(320px,52vh,620px);
  /* Transparent until the library is actually running. With JavaScript off
     this div still renders, and an opaque one would paint over the
     <noscript> iframe underneath it — hiding the very fallback that exists
     to keep a map on screen. */
  background:transparent;
  z-index:1;
}
.nr-map--live.is-live .nr-map__canvas{background:var(--nr-ink-3)}
.nr-map--live .nr-map__frame{position:relative;z-index:2}
.nr-map--live{padding:0}
.nr-map--live .nr-map__bar{z-index:1000}
.nr-map--live .nr-map__note{
  position:absolute;left:var(--nr-s4);top:var(--nr-s4);z-index:1000;
  margin:0;padding:var(--nr-s2) var(--nr-s3);
  background:color-mix(in srgb,var(--nr-ink) 90%,transparent);
  border:1px solid var(--nr-line-2);border-radius:var(--nr-r-sm);
  max-width:min(340px,70%);
}
.nr-map--live .nr-map__note:empty{display:none}

.nr-map .leaflet-tile-pane{filter:grayscale(.6) contrast(1.05) brightness(.72) saturate(.8)}
.nr-map .leaflet-container{background:var(--nr-ink-3);font-family:var(--nr-mono)}
.nr-map .leaflet-control-attribution{
  background:color-mix(in srgb,var(--nr-ink) 82%,transparent);
  color:var(--nr-mute-2);font-size:var(--nr-fs-9_0);
}
.nr-map .leaflet-control-attribution a{color:var(--nr-mute)}
.nr-map .leaflet-bar a{
  background:var(--nr-ink-2);color:var(--nr-paper);
  border-bottom-color:var(--nr-line-2);
}
.nr-map .leaflet-bar a:hover{background:var(--nr-ink-3);color:var(--nr-rage)}

/* A branch pin: a dot, and its name so the map is readable at a glance
   without clicking five times. */
.nr-pin{display:flex;align-items:center;gap:6px;white-space:nowrap}
/* display:block is not decoration. The dot is a <span>, so it is inline by
   default; width and height simply do not apply to an inline box. Inside the
   branch pin it survives that because flex blockifies its children — but the
   "you are here" pin is a block, and there the same span collapsed to a 4px
   sliver of nothing. A dot must carry its own size regardless of parent. */
.nr-pin__dot{
  display:block;position:relative;z-index:2;
  width:12px;height:12px;flex:0 0 12px;border-radius:50%;
  background:var(--nr-metal-hi);
  border:2px solid var(--nr-ink);
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.nr-pin--open .nr-pin__dot{background:var(--nr-rage);box-shadow:0 0 0 4px color-mix(in srgb,var(--nr-rage) 22%,transparent),0 2px 8px rgba(0,0,0,.6)}
.nr-pin--active .nr-pin__dot{transform:scale(1.25)}
.nr-pin__label{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nr-paper);
  background:color-mix(in srgb,var(--nr-ink) 88%,transparent);
  border:1px solid var(--nr-line-2);border-radius:20px;
  padding:2px 7px;
  transform:translateX(2px);
}
.nr-pin--active .nr-pin__label{border-color:var(--nr-rage);color:var(--nr-rage)}

/* The visitor. Deliberately not green: green is the brand and every branch
   wears it, so "me" needs its own colour or the map reads as six shops. */
/* Sized to the dot exactly, because the pulse is anchored to this box.
   Anchoring it to a flexible container would centre the ring on the
   container's midpoint — which, on a pin that also carried a name label,
   is somewhere out in the text. This pin has no label, so a fixed box is
   both simpler and correct. */
.nr-pin--me{position:relative;width:14px;height:14px;display:block}
.nr-pin--me .nr-pin__dot{
  background:var(--nr-paper);border-color:var(--nr-ink);
  width:14px;height:14px;flex-basis:14px;
}
.nr-pin--me .nr-pin__pulse{
  position:absolute;inset:0;z-index:1;border-radius:50%;
  background:color-mix(in srgb,var(--nr-paper) 45%,transparent);
  animation:nr-me-pulse 2.4s var(--nr-ease-out) infinite;
}
@keyframes nr-me-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}

.nr-map .leaflet-popup-content-wrapper,
.nr-map .leaflet-popup-tip{
  background:var(--nr-ink-2);color:var(--nr-paper);
  border:1px solid var(--nr-line-2);border-radius:var(--nr-r);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.nr-map .leaflet-popup-content{margin:var(--nr-s3);min-width:190px}
.nr-map .leaflet-popup-close-button{color:var(--nr-mute)}
.nr-mappop__name{margin:0 0 4px;font-family:var(--nr-display);font-weight:750;font-size:var(--nr-t-sm)}
.nr-mappop__name a{color:var(--nr-paper);text-decoration:none}
.nr-mappop__name a:hover{color:var(--nr-rage)}
.nr-mappop__status{margin:0 0 6px;font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.1em;text-transform:uppercase}
.nr-mappop__status--good{color:var(--nr-rage)}
.nr-mappop__status--warn{color:var(--nr-warn,#E3B341)}
.nr-mappop__status--bad,.nr-mappop__status--info{color:var(--nr-mute-2)}
.nr-mappop__addr,.nr-mappop__tel{margin:0 0 4px;font-size:11px;line-height:1.5;color:var(--nr-mute)}
.nr-mappop__warn{margin:0 0 6px;font-size:var(--nr-fs-10_0);line-height:1.45;color:var(--nr-warn,#E3B341)}
.nr-mappop__go{margin-top:6px;width:100%;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .nr-pin--me .nr-pin__pulse{animation:none;opacity:.4;transform:scale(2)}
}

/* =====================================================================
   PRODUCT IMAGE ZOOM

   The stage magnifies under a fine pointer, and opens full screen on
   click, tap or Enter. Everything here is compositor-only — transform and
   opacity — so magnifying a 2000px photograph does not drop frames.
   ================================================================== */

.nr-gal__stage[data-nr-zoomable]{cursor:zoom-in}
.nr-gal__stage.is-spinning{cursor:ew-resize}
.nr-gal__stage .nr-gal__img{
  transition:transform var(--nr-med) var(--nr-ease-out);
  will-change:transform;
}
/* Padding is dropped while magnified, so the enlarged image uses the whole
   stage instead of magnifying the inset as well. */
.nr-gal__stage.is-magnified .nr-gal__img{padding:0;transition:transform var(--nr-fast) linear}

.nr-gal__zoom{
  position:absolute;right:var(--nr-s3);bottom:var(--nr-s3);z-index:3;
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 11px;
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--nr-paper);
  background:color-mix(in srgb,var(--nr-ink) 82%,transparent);
  border:1px solid var(--nr-line-2);border-radius:var(--nr-r-sm);
  backdrop-filter:blur(6px);cursor:zoom-in;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--nr-fast) var(--nr-ease),transform var(--nr-fast) var(--nr-ease),border-color var(--nr-fast) var(--nr-ease);
}
.nr-gal:hover .nr-gal__zoom,
.nr-gal__stage:focus-visible .nr-gal__zoom,
.nr-gal__zoom:focus-visible{opacity:1;transform:none}
.nr-gal__zoom:hover{border-color:var(--nr-rage);color:var(--nr-rage)}
/* Touch has no hover, so the affordance has to be permanently visible or it
   does not exist. */
@media (hover:none){
  /* Always visible, and sized for a thumb rather than a cursor — 32px high
     is a comfortable target for a mouse and a miss for a finger. */
  .nr-gal__zoom{opacity:1;transform:none;min-height:40px;padding:10px 14px}
}

/* ---- the full-screen viewer ---- */
html.nr-zoom-open{overflow:hidden}

.nr-zoom{
  position:fixed;inset:0;z-index:var(--nr-z-modal,900);
  display:none;grid-template-rows:auto 1fr auto;
  background:color-mix(in srgb,var(--nr-ink) 96%,transparent);
  backdrop-filter:blur(8px);
}
.nr-zoom.is-open{display:grid}

.nr-zoom__bar{
  grid-row:1;grid-column:1/-1;
  display:flex;align-items:center;gap:var(--nr-s3);
  padding:var(--nr-s4) var(--nr-s5);
  border-bottom:1px solid var(--nr-line);
}
.nr-zoom__count,.nr-zoom__scale{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--nr-mute-2);
}
.nr-zoom__scale{margin-right:auto}
.nr-zoom__close{margin-left:var(--nr-s2)}

.nr-zoom__pane{
  grid-row:2;grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:var(--nr-s4);
  cursor:zoom-in;
}
.nr-zoom.is-zoomed .nr-zoom__pane{cursor:grab}
.nr-zoom.is-zoomed .nr-zoom__img{cursor:grab}
.nr-zoom.is-zoomed .nr-zoom__img:active{cursor:grabbing}

.nr-zoom__img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  transform-origin:center;
  transition:transform var(--nr-med) var(--nr-ease-out);
  user-select:none;-webkit-user-drag:none;
  touch-action:none;
}

.nr-zoom__nav{
  grid-row:2;align-self:center;z-index:2;
  width:44px;height:64px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
  color:var(--nr-paper);
  background:color-mix(in srgb,var(--nr-ink-2) 80%,transparent);
  border:1px solid var(--nr-line-2);border-radius:var(--nr-r-sm);
  cursor:pointer;
}
.nr-zoom__nav:hover{border-color:var(--nr-rage);color:var(--nr-rage)}
.nr-zoom__nav--prev{grid-column:1;justify-self:start;margin-left:var(--nr-s3)}
.nr-zoom__nav--next{grid-column:1;justify-self:end;margin-right:var(--nr-s3)}

.nr-zoom__hint{
  grid-row:3;grid-column:1/-1;margin:0;
  padding:var(--nr-s3) var(--nr-s5) var(--nr-s5);
  text-align:center;
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--nr-mute-2);
}

@media (max-width:640px){
  .nr-zoom__bar{padding:var(--nr-s3)}
  .nr-zoom__nav{width:40px;height:56px}
  .nr-zoom__hint{font-size:var(--nr-fs-8_5);padding:var(--nr-s2) var(--nr-s3) var(--nr-s4)}
}

@media (prefers-reduced-motion: reduce){
  .nr-gal__stage .nr-gal__img,.nr-zoom__img,.nr-gal__zoom{transition:none}
}

/* ============================================================
   GOAL CARDS
   The biggest decision on the home page, drawn like one.

   Twelve flat boxes with a name and "0 products" in them was a
   list of taxonomy terms, not a way to choose what to buy. The
   card has the anatomy the decision deserves: a photograph if
   there is one, an icon that says what the goal is, the name at
   size, a line of copy, and an arrow that says this goes
   somewhere.

   There is no stock photography here. Where a goal has no image
   of its own the card draws a graphite field with a slow green
   sweep and the bull behind it — which is honest, and which
   fills in the day a real photograph is added to the term.
   ============================================================ */
.nr-goalcard{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  min-height:clamp(190px,20vw,260px);
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  background:linear-gradient(180deg,var(--nr-ink-3),var(--nr-ink));
  color:var(--nr-paper);text-decoration:none;
  transition:border-color var(--nr-med) var(--nr-ease),
             transform var(--nr-med) var(--nr-ease-out),
             box-shadow var(--nr-med) var(--nr-ease);
}
/* A technical field behind the type: fine rules and one soft green bloom
   in the corner the icon sits in. Drawn in CSS, so it costs no request and
   cannot half-load. The supplied bull artwork is deliberately NOT used here
   — it is a crop with part of the R and the G still attached, and at this
   size those read as stray letters rather than as a mark. */
.nr-goalcard::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 92% 96%,rgba(140,255,62,.055),transparent 72%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 34px);
  opacity:.9;
  transition:opacity var(--nr-slow) var(--nr-ease),transform var(--nr-slow) var(--nr-ease-out);
}
/* A single diagonal of light that crosses on hover. */
.nr-goalcard::after{
  content:"";position:absolute;inset:-40% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(140,255,62,.16) 50%,transparent 58%);
  transform:translateX(-60%);opacity:0;
  transition:transform var(--nr-slow) var(--nr-ease-mech),opacity var(--nr-med) var(--nr-ease);
}
.nr-goalcard:hover,.nr-goalcard:focus-visible{
  border-color:var(--nr-rage-ink);transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.nr-goalcard:hover::before{opacity:1;transform:scale(1.04)}
.nr-goalcard:hover::after{transform:translateX(60%);opacity:1}
.nr-goalcard:focus-visible{outline:2px solid var(--nr-rage);outline-offset:3px}

/* the photograph, when the goal has one */
.nr-goalcard__shot{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.nr-goalcard__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Desaturated and dimmed so type stays readable over any photo the
     owner uploads — including a bright one. */
  filter:grayscale(1) contrast(1.12) brightness(.42);
  transform:scale(1.04);
  transition:transform 1.2s var(--nr-ease-out),filter var(--nr-slow) var(--nr-ease);
}
.nr-goalcard--shot::after{background:linear-gradient(115deg,transparent 42%,rgba(140,255,62,.12) 50%,transparent 58%)}
.nr-goalcard--shot .nr-goalcard__body{
  background:linear-gradient(0deg,rgba(6,8,11,.92) 12%,rgba(6,8,11,.35) 62%,transparent);
}
.nr-goalcard:hover .nr-goalcard__shot img{transform:scale(1.1);filter:grayscale(.82) contrast(1.15) brightness(.5)}

.nr-goalcard__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  height:100%;min-height:inherit;padding:var(--nr-s5);
}
.nr-goalcard__icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:auto;
  color:var(--nr-rage);
  background:rgba(140,255,62,.08);
  box-shadow:inset 0 0 0 1px rgba(140,255,62,.22);
  transition:background var(--nr-med) var(--nr-ease),transform var(--nr-med) var(--nr-ease-snap);
}
.nr-goalcard__icon svg{width:22px;height:22px;display:block}
.nr-goalcard:hover .nr-goalcard__icon{background:rgba(140,255,62,.14);transform:translateY(-2px)}
.nr-goalcard__name{
  display:block;margin-top:var(--nr-s5);
  font-family:var(--nr-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,1.7vw,26px);letter-spacing:var(--nr-track-tight);line-height:1.02;
}
.nr-goalcard__blurb{
  display:block;margin-top:6px;max-width:24ch;
  font-size:12.5px;line-height:1.5;color:var(--nr-mute);
}
.nr-goalcard__go{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-top:var(--nr-s4);border-radius:50%;
  color:var(--nr-rage);box-shadow:inset 0 0 0 1px rgba(140,255,62,.34);
  transition:background var(--nr-med) var(--nr-ease),transform var(--nr-med) var(--nr-ease-snap);
}
.nr-goalcard__go svg{width:15px;height:15px;display:block}
.nr-goalcard:hover .nr-goalcard__go{background:rgba(140,255,62,.14);transform:translateX(3px)}

/* ---- the scroll ----
   A rail on wide screens: the cards run off the right-hand edge, which
   says "there are more" far better than a fourth row does, and each one
   rises as it arrives. The rail scrolls with the finger on a phone and
   snaps, so it is a real control and not a decoration. */
.nr-goalrail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(230px,1fr);
  gap:var(--nr-s4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--nr-gut);
  padding-bottom:var(--nr-s4);
  /* The rail bleeds to both edges so the last card is visibly cut. */
  margin-inline:calc(var(--nr-gut) * -1);
  padding-inline:var(--nr-gut);
  scrollbar-width:thin;scrollbar-color:var(--nr-line-2) transparent;
}
.nr-goalrail>*{scroll-snap-align:start}
.nr-goalrail::-webkit-scrollbar{height:6px}
.nr-goalrail::-webkit-scrollbar-thumb{background:var(--nr-line-2);border-radius:99px}
.nr-goalrail::-webkit-scrollbar-track{background:transparent}

/* Each card arrives from below, staggered by its position in the rail.
   nr_reveal() already writes the delay, so this is only the distance. */
.nr-goalrail [data-nr-reveal]{transform:translateY(26px) scale(.985)}
.nr-goalrail [data-nr-reveal].is-revealed{transform:none}

@media (max-width:900px){
  .nr-goalrail{grid-auto-columns:minmax(200px,74vw)}
  .nr-goalcard{min-height:170px}
  .nr-goalcard__body{padding:var(--nr-s4)}
}
@media (prefers-reduced-motion: reduce){
  .nr-goalcard,.nr-goalcard__shot img,.nr-goalcard::before,.nr-goalcard::after{
    transition:none !important;transform:none !important;
  }
  .nr-goalcard:hover{transform:none}
}

/* ============================================================
   THE BULL, ALIVE
   The hero artwork — a video where one has been uploaded,
   its still otherwise — advancing as the page scrolls.

   Everything that moves here is transform and opacity, driven
   by one custom property the script writes once per frame. No
   layout is read during the scroll, so it cannot cause jank,
   and with JavaScript off the composition still sits correctly
   at its resting position.
   ============================================================ */
.nr-sys-hero__beast{
  position:absolute;z-index:-2;pointer-events:none;user-select:none;
  right:min(-6vw,-40px);top:50%;
  width:min(64vw,900px);aspect-ratio:16/9;
  /* --nr-adv runs 0 → 1 as the hero leaves the screen. */
  --nr-adv:0;
  transform:
    translateY(-50%)
    translateX(calc(var(--nr-adv) * -4vw))
    scale(calc(1 + var(--nr-adv) * .22));
  opacity:calc(.5 + var(--nr-adv) * .5);
  transition:opacity var(--nr-slow) var(--nr-ease);
  /* Feathered into the page on every edge so it reads as emerging from the
     dark rather than as a rectangle pasted onto it. */
  -webkit-mask-image:
    radial-gradient(72% 68% at 52% 50%,#000 42%,transparent 78%),
    linear-gradient(90deg,transparent,#000 18%,#000 88%,transparent);
  mask-image:
    radial-gradient(72% 68% at 52% 50%,#000 42%,transparent 78%),
    linear-gradient(90deg,transparent,#000 18%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.nr-sys-hero__beastmedia{
  width:100%;height:100%;object-fit:cover;display:block;
  /* The artwork's own green is pushed as the visitor scrolls: the animal
     is not just moving, it is charging up. */
  filter:contrast(calc(1 + var(--nr-adv) * .18)) saturate(calc(1 + var(--nr-adv) * .5)) brightness(calc(.92 + var(--nr-adv) * .18));
}
/* One green wash over it that lifts with the same value, so the hero and the
   accent move together instead of the video looking pasted on. */
.nr-sys-hero__beast::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(52% 52% at 54% 48%,rgba(140,255,62,.16),transparent 70%);
  opacity:calc(var(--nr-adv) * .9);
  mix-blend-mode:screen;pointer-events:none;
}
[data-nr-rage="on"] .nr-sys-hero__beast::after{opacity:calc(.25 + var(--nr-adv) * .75)}

@media (max-width:1024px){
  .nr-sys-hero__beast{
    width:min(120vw,760px);right:-22vw;top:38%;opacity:calc(.32 + var(--nr-adv) * .38);
  }
}
@media (max-width:700px){
  /* On a phone the type owns the screen. The animal sits behind it, quieter,
     and still moves — but it never competes with the headline. */
  .nr-sys-hero__beast{width:150vw;right:-38vw;top:34%}
  .nr-sys-hero__beastmedia{filter:none}
}
@media (prefers-reduced-motion: reduce){
  .nr-sys-hero__beast{
    --nr-adv:.35 !important;
    transform:translateY(-50%) !important;
  }
}

/* ============================================================
   MY ACCOUNT — PROGRESS
   The customer's own record, and when their tubs run out.
   No verdicts, no target lines, no shaded "healthy" bands:
   the page shows what they entered and what the shop knows,
   and the reading of it is theirs.
   ============================================================ */
/*
 * The block is `nr-record`, NOT `nr-progress`.
 *
 * `.nr-progress` was already taken — it is the free-shipping / replenishment
 * BAR in the mini cart and the account dashboard, styled as a pill:
 * `background:var(--nr-ink-4); border-radius:var(--nr-r-pill); overflow:hidden`.
 * Reusing the name on this panel handed a 500px-tall block a pill radius, and
 * the account page rendered the customer's log inside an enormous dark
 * lozenge with the text disappearing under its curve. Nothing was wrong with
 * the panel; it had inherited the shape of a progress bar.
 */
.nr-record{display:block}
.nr-record__head{margin-bottom:var(--nr-s6)}
.nr-record__title{
  font-family:var(--nr-display);font-weight:800;text-transform:uppercase;
  font-size:var(--nr-t-xxl);letter-spacing:var(--nr-track-tight);line-height:1.04;
}
.nr-record__sub{margin-top:6px;color:var(--nr-mute);font-size:13.5px;max-width:56ch}
.nr-record__sec{margin-bottom:var(--nr-s7)}
.nr-record__h3{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);font-weight:800;
  letter-spacing:var(--nr-track-tech);text-transform:uppercase;color:var(--nr-mute-2);
  margin:0 0 var(--nr-s4);
}
.nr-record__due{
  margin:0 0 var(--nr-s4);font-size:12.5px;font-weight:700;color:var(--nr-warn);
}
.nr-record__empty{color:var(--nr-mute);font-size:13.5px;line-height:1.6;max-width:60ch}

/* what they are on */
.nr-supplies{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nr-supply{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px;border:1px solid var(--nr-line);border-radius:12px;background:var(--nr-ink-3);
}
/* The leading edge carries the status, so the row reads at a glance without
   colouring the whole card. */
.nr-supply--warn{border-left:2px solid var(--nr-warn)}
.nr-supply--bad{border-left:2px solid var(--nr-bad)}
.nr-supply--ok{border-left:2px solid var(--nr-line-2)}
.nr-supply__shot{
  width:52px;height:52px;border-radius:9px;overflow:hidden;display:block;
  background:var(--nr-ink-4);box-shadow:inset 0 0 0 1px var(--nr-line);
}
.nr-supply__shot img{width:100%;height:100%;object-fit:contain;padding:5%;display:block}
.nr-supply__body{min-width:0}
.nr-supply__name{display:block;font-size:13.5px;font-weight:730;color:var(--nr-paper);text-decoration:none}
.nr-supply__name:hover{color:var(--nr-rage-hi)}
.nr-supply__dose{
  display:block;margin-top:2px;font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);
  letter-spacing:.08em;text-transform:uppercase;color:var(--nr-mute-2);
}
.nr-supply__when{display:block;margin-top:4px;font-size:12px;color:var(--nr-mute)}
.nr-supply--warn .nr-supply__when{color:var(--nr-warn)}
.nr-supply--bad .nr-supply__when{color:var(--nr-bad)}
.nr-supply__when--unknown{font-style:normal;color:var(--nr-mute-2)}

/* the line */
.nr-chart{
  margin:0 0 var(--nr-s5);padding:var(--nr-s4);
  border:1px solid var(--nr-line);border-radius:12px;background:var(--nr-ink-3);
}
.nr-chart__svg{width:100%;height:140px;display:block;overflow:visible}
.nr-chart__line{stroke:var(--nr-rage);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.nr-chart__cap{
  display:flex;justify-content:space-between;gap:10px;margin-top:10px;
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);letter-spacing:.1em;
  text-transform:uppercase;color:var(--nr-mute-2);
}
.nr-record__table td,.nr-record__table th{font-size:12.5px}

/* the form */
.nr-record__form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  padding:var(--nr-s4);border:1px solid var(--nr-line);border-radius:12px;background:var(--nr-ink-3);
}
.nr-record__form .nr-field--wide{grid-column:1 / -1}
.nr-record__legal{
  margin-top:var(--nr-s4);font-size:11.5px;line-height:1.6;color:var(--nr-mute-2);max-width:66ch;
}

@media (max-width:600px){
  .nr-supply{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .nr-supply .nr-btn{grid-column:1 / -1;justify-self:start}
}

/* ============================================================
   THE ACCOUNT BLOCK IN THE MENU DRAWER
   Where Account, Wishlist and Compare go when the header drops
   them below 640px. See drawer-account.php for why this exists.
   ============================================================ */
.nr-draccount__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nr-draccount__list a{
  display:flex;align-items:center;gap:11px;
  min-height:46px;padding:10px 12px;margin-inline:-12px;
  border-radius:10px;
  font-size:13.5px;font-weight:650;color:var(--nr-paper);text-decoration:none;
}
.nr-draccount__list a:hover,.nr-draccount__list a:focus-visible{background:var(--nr-ink-4)}
.nr-draccount__list svg{flex:none;color:var(--nr-mute)}
.nr-draccount__list a:hover svg{color:var(--nr-rage)}
.nr-draccount__label{min-width:0;flex:1 1 auto}
/* The count is a fact, not a badge: it earns green only when it is not zero,
   and it is simply absent at zero rather than drawn as a grey nothing. */
.nr-draccount__count{
  flex:none;font-size:var(--nr-fs-10_5);letter-spacing:.06em;color:var(--nr-rage);
  padding:2px 7px;border:1px solid var(--nr-line-2);border-radius:999px;
}

/* ===========================================================================
   TOUCH

   Roughly seven in ten of this shop's customers are on a phone. That is not a
   breakpoint, it is the primary case, so the sizes below are not a courtesy
   pass — they are the sizes the site is actually used at.

   Every value here came from measuring the rendered theme at 320px and 390px,
   not from a guess. These were the controls under 40px:

     .nr-btn--sm     36px   — and most buttons on the site carry it
     .nr-ragebtn     36px
     .nr-select      34px
     .nr-mobilenav__toggle 34px
     .nr-ph__fav     30px
     radios          15px

   The rules live at the END of the last-loaded stylesheet on purpose. An
   earlier attempt put them in 02-base.css, where `.nr-btn--sm{min-height:36px}`
   in THIS file overrode them at equal specificity — the rule was correct and
   simply never applied. Cascade order is not a detail when two files describe
   the same control.

   Height comes from padding wherever possible, so the type stays where the
   design put it and only the touchable area grows.
   =========================================================================== */
@media (max-width:900px){

  /* The site's small button. Used on cards, in the cart, in the drawer, on
     the account screens — the single highest-traffic control there is. */
  .nr-btn--sm{min-height:44px;padding:10px 16px}

  .nr-ragebtn{min-height:44px}
  .nr-mobilenav__toggle{min-width:44px;min-height:44px}
  .nr-ph__fav{width:40px;height:40px;top:6px;right:6px}

  /* A select is a control you tap, not a label you read. */
  .nr-select,select{min-height:44px}
  .nr-toolbar__sort select,.nr-toolbar__sort .nr-select{min-height:44px;padding-block:0}

  /* Radios were 15px. The label is the real target, so it takes the whole row
     and the control itself grows to something a thumb can find. */
  .nr-fulfil__radio,.nr-pay__radio,input[type="radio"],input[type="checkbox"]{
    width:20px;height:20px;flex:0 0 20px;
  }
  .nr-fulfil__opt,.nr-pay__row,.nr-check{min-height:48px}

  /* Bare links standing alone as actions — "Change store", "All orders",
     "View", "Remove". In flowing prose a link is fine at text height; on its
     own it is a button that forgot to say so. */
  .nr-storebar__change,
  .nr-sechead__more,
  .nr-link{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* The border was the element's own; at 44px tall it would float well below
     the words. Underline the text instead. */
  .nr-storebar__change{border-bottom:0;text-decoration:underline;text-underline-offset:3px}

  /* Lists of links: footer columns, the store picker, mega panels. */
  .nr-footer__col a,
  .nr-storelist button,
  .nr-mega__list a,
  .nr-account__nav a{min-height:44px;display:flex;align-items:center}

  /* Footer social icons measured 36x36. */
  .nr-footer__social a{min-width:44px;min-height:44px}

  /* The logo. The artwork is wide and short, so the anchor was 16px tall at
     320px — a correct-looking logo with almost nothing to press. The box
     grows; the image does not move. */
  .nr-brandmark{min-height:44px;align-items:center}

  /* The last of the measured controls: gallery spin, filter chips, the
     filters toggle, and the cart line's own remove and +/- steppers. All of
     these are things a customer presses while holding the phone one-handed. */
  .nr-gal__spin,
  .nr-filters__toggle,
  .nr-citem__remove{min-height:44px}
  /* A chip is a phrase, not a word: "BUILDING MUSCLE ON A BUDGET" is 280px of
     text, and at 320px inside an indented chat bubble it ran off the screen.
     It wraps rather than being clipped or shrunk. */
  .nr-chip,.nr-chip--quiet{
    min-height:44px;display:inline-flex;align-items:center;
    max-width:100%;white-space:normal;text-align:left;line-height:1.3;
  }
  .nr-citem__step{width:40px;height:40px;min-height:40px}

  /* A product name in a cart or supply row is the way back to the product.
     It stays text — turning it into a 44px block would break the row — but it
     gets enough padding to be a target rather than a hairline. */
  .nr-citem__name,.nr-supply__name{display:inline-block;padding-block:6px}
}

/* At the very bottom of the range the tab bar's five items stop fitting.
   Measured at 320px: five items at ~66px plus the count bubble ran 16px past
   the edge. The labels shrink before the targets do — a smaller word is still
   readable, a smaller target is not still tappable. */
@media (max-width:360px){
  .nr-tabbar__item{padding-inline:2px;gap:2px;font-size:var(--nr-fs-9)}
  .nr-tabbar__item .nr-actions__count{right:2px}
}