/* ============================================================
   NUTRITION RAGE — 10 DAYLIGHT

   The light environment. Loads LAST, after 09-system, and does
   two things only:

     1. Re-points the token block in 01-tokens.css to a crisp
        white ground with charcoal type. Because 01 is the only
        file that declares a raw colour, re-pointing the tokens
        re-skins every template without touching one of them.

     2. Re-declares the ORIGINAL dark token set, scoped to the
        chrome — header, mega menu, drawer, mobile tab bar and
        footer. Those stay dark on purpose: they frame the page
        and they are where the electric green still lives.

   A handful of rules below fix places where files 03–09 wrote a
   white-alpha value by hand instead of reading a token. Those
   are the only component-level rules here; everything else is
   the token swap.

   THE GREEN
   ---------
   #8CFF3E is built for near-black — on white it measures 1.4:1
   and disappears. Inside the light scope the accent becomes
   #3C8C1B (4.9:1 on white, and legible under white type when it
   is used as a fill). The doctrine does not change: green still
   only appears when something activates, is in stock, is open,
   or confirms. It appears less often here because white already
   does the separating that the green was doing in the dark.

   To go back to the dark build: remove 'nr-daylight' from
   nr_style_manifest() in inc/enqueue.php. Nothing else needs to
   be touched.

   @package nutrition-rage
   ============================================================ */

:root{
  /* ---- SURFACES ---- */
  --nr-ink:      #FFFFFF;   /* page */
  --nr-ink-2:    #FAFAF9;   /* panels, tinted sections */
  --nr-ink-3:    #FFFFFF;   /* cards */
  --nr-ink-4:    #F2F3F0;   /* raised, hover, active rows */
  --nr-ink-5:    #0E1114;   /* footer — stays dark */

  /* The laboratory ramp is now the page, so the light sections
     step slightly grey to keep the alternating rhythm visible. */
  --nr-lab:      #F6F7F4;
  --nr-lab-2:    #EFF0EC;
  --nr-lab-3:    #E4E5E0;
  --nr-lab-ink:  #0A0B0E;
  --nr-lab-mute: #5E645F;

  /* The product well. Packaging is cut out on white, so a pure-white
     well makes the tub float with no surface under it. This is the
     palest green-grey the ramp allows — enough to read as a surface,
     not enough to read as a colour. */
  --nr-well:     #EEF1EA;

  /* Long-form prose. Softer than --nr-paper so a wall of body text is
     not the same weight as a heading, and darker than --nr-mute so it
     is still comfortable at 16px over many lines. */
  --nr-prose:    #24282A;
  --nr-prose-2:  #3A403B;

  --nr-glow:     radial-gradient(60% 50% at 50% 0%,rgba(60,140,27,.06),transparent 72%);
  --nr-vignette: radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(10,11,14,.05) 100%);

  /* ---- METAL — machined light, not a grey slab ---- */
  --nr-metal:    #E7E9E4;
  --nr-metal-hi: #F5F6F3;
  --nr-metal-lo: #DADCD6;
  --nr-carbon:   linear-gradient(135deg,#F8F9F6 0%,#F1F2EF 42%,#F8F9F6 43%,#EEEFEB 100%);
  --nr-machined: linear-gradient(180deg,rgba(10,11,14,.028),rgba(10,11,14,0) 38%),
                 linear-gradient(160deg,var(--nr-metal-hi),var(--nr-metal-lo));
  --nr-brushed:  repeating-linear-gradient(92deg,rgba(10,11,14,.022) 0 1px,transparent 1px 3px);

  --nr-grid:     linear-gradient(rgba(10,11,14,.045) 1px,transparent 1px),
                 linear-gradient(90deg,rgba(10,11,14,.045) 1px,transparent 1px);

  /* ---- GREEN — activation only, legible on white ---- */
  --nr-rage:     #3C8C1B;
  --nr-rage-lo:  #2E6E14;
  --nr-rage-hi:  #2E6E14;   /* hover goes DARKER on a light ground */
  --nr-rage-dim: rgba(60,140,27,.12);
  --nr-rage-ink: rgba(60,140,27,.34);
  --nr-rage-rgb: 60,140,27;
  --nr-on-rage:  #FFFFFF;   /* white on this green is 4.9:1 */
  --nr-grad:     linear-gradient(140deg,#4FA81C,#2E6E14);
  --nr-charge:   linear-gradient(90deg,transparent,rgba(60,140,27,.20),transparent);

  /* ---- CONTROLS — the default button is a light machined part ---- */
  --nr-control:    linear-gradient(180deg,#FFFFFF,#F1F2EF);
  --nr-control-hi: linear-gradient(180deg,#FFFFFF,#E9EBE6);
  --nr-control-lo: linear-gradient(180deg,#F1F2EF,#E4E6E1);

  /* ---- TYPE ---- */
  --nr-paper:    #0A0B0E;
  --nr-mute:     #5E645F;
  --nr-mute-2:   #868C87;

  /* ---- STATE — held down so green stays the only vivid colour ---- */
  --nr-warn:     #A9701A;
  --nr-bad:      #B3402D;
  --nr-wa:       #1B9E4B;

  /* ---- SECTION RHYTHM ----
     The dark build breathes at 4–9rem a section, and on black that reads as
     drama: the empty space is a dark surface, so it still has presence. On
     white the same measurement reads as an unfinished page — there is
     nothing in it to look at. The rhythm comes in by about a third, and the
     "loose" sections lose the most, because they were the ones carrying
     almost nothing to begin with. */
  --nr-sec:       clamp(3rem, 5.5vw, 6rem);
  --nr-sec-loose: clamp(4rem, 8vw, 9rem);
  --nr-sec-tight: clamp(2rem, 3.5vw, 3rem);

  /* ---- LINES ---- */
  --nr-line:     rgba(10,11,14,.10);
  --nr-line-2:   rgba(10,11,14,.16);
  --nr-line-3:   rgba(10,11,14,.30);

  /* ---- ELEVATION — on white, depth is a soft shadow, not a black one ---- */
  --nr-lift-1:   0 1px 2px rgba(10,11,14,.06);
  --nr-lift-2:   0 10px 26px -14px rgba(10,11,14,.30);
  --nr-lift-3:   0 26px 60px -26px rgba(10,11,14,.38);
  --nr-lift-green: 0 0 0 1px var(--nr-rage-ink), 0 10px 30px -12px rgba(60,140,27,.28);
}

/* ============================================================
   THE CHROME STAYS DARK
   Header, mega menu, drawer, mobile tab bar, announcement bar
   and footer keep the original environment. Redeclaring the
   tokens on the element is enough — every child reads the same
   variable names, so no component needs a dark variant.
   ============================================================ */
.nr-top,
.nr-header,
.nr-storebar,
.nr-mega-root,
.nr-drawer,
.nr-tabbar,
.nr-announce,
.nr-footer{
  --nr-ink:      #08090C;
  --nr-ink-2:    #0D0F14;
  --nr-ink-3:    #12151B;
  --nr-ink-4:    #1A1E26;
  --nr-ink-5:    #050609;

  --nr-paper:    #F7F8F7;
  --nr-mute:     #9198A0;
  --nr-mute-2:   #5F666E;

  --nr-rage:     #8CFF3E;
  --nr-rage-lo:  #4FA81C;
  --nr-rage-hi:  #B6FF7E;
  --nr-rage-dim: rgba(140,255,62,.14);
  --nr-rage-ink: rgba(140,255,62,.42);
  --nr-rage-rgb: 140,255,62;
  --nr-on-rage:  #07090A;
  --nr-grad:     linear-gradient(140deg,#B6FF7E,#4FA81C);

  --nr-control:    linear-gradient(180deg,#1B2029,#12161D);
  --nr-control-hi: linear-gradient(180deg,#232935,#171C24);
  --nr-control-lo: linear-gradient(180deg,#12161D,#0D1014);

  --nr-metal:    #2A2F38;
  --nr-metal-hi: #4A515D;
  --nr-metal-lo: #171A21;

  --nr-line:     rgba(255,255,255,.07);
  --nr-line-2:   rgba(255,255,255,.14);
  --nr-line-3:   rgba(255,255,255,.24);

  --nr-lift-1: 0 1px 2px rgba(0,0,0,.4);
  --nr-lift-2: 0 8px 24px -8px rgba(0,0,0,.7);
  --nr-lift-3: 0 24px 64px -16px rgba(0,0,0,.85);

  color: var(--nr-paper);
}

/* The header's own fill reads --nr-ink-2, which is dark again inside
   the scope above; this line only removes the border seam between the
   dark chrome and the white page. */
.nr-header{border-bottom-color:rgba(255,255,255,.10)}
.nr-footer{border-top:0}

/* ============================================================
   WHERE THE GREEN GOES

   Headings stay black. Green type at heading size turned the
   wayfinding into the loudest thing on the page, which is the
   opposite of what the accent is for.

   Instead it goes into the furniture around the headings — the
   keyline above every section head, the count beside it, the
   rule between sections, and a breath of it in the tinted
   sections. Small marks, but there is one in every band of the
   page, so the green is felt continuously rather than shouted
   once.

   The eyebrows and the "see everything" links were already green
   in the original build and stay that way.
   ============================================================ */
.nr-sechead__title{color:var(--nr-paper)}

/* A short green keyline above every section head. Absolute, so it
   cannot become a flex item in the baseline row and shove the
   heading sideways. */
.nr-sechead{position:relative;padding-top:16px}
.nr-sechead::before{
  content:"";position:absolute;top:0;left:0;
  width:38px;height:3px;
  background:var(--nr-rage);
  border-radius:1px;
}

/* The count that sits beside a heading — "14 brands", "Twelve
   collections" — is a live number, so it reads as green. */
.nr-sechead__sub{color:var(--nr-rage-hi);font-weight:600}

/* The hairline between stacked sections picks up the faintest
   green rather than being neutral grey. */
.nr-sec+.nr-sec{border-top-color:rgba(60,140,27,.20)}

/* The tinted sections carry a breath of green instead of a flat
   grey. At this saturation it is not read as a colour — it is read
   as the page being warmer where the system is talking about
   itself. */
.nr-sec--tint,
.nr-lab-scope{--nr-ink:#F5F8F2;--nr-ink-2:#EEF2EA}

/* ============================================================
   HAND-WRITTEN WHITE-ALPHA VALUES
   These were correct against near-black and vanish on white.
   Each one is restated against the light ground.
   ============================================================ */

/* The committing action. Charcoal, not green: on a white page the
   green is carrying stock and open/closed status, and a page full of
   green fills would take that meaning away from it. */
.nr-btn--commit,
.nr-btn--primary{
  background:linear-gradient(180deg,#171C22,#0E1216);
  color:#F7F8F7;border-color:transparent;
}
.nr-btn--commit:hover,
.nr-btn--primary:hover{
  background:linear-gradient(180deg,#242B33,#151A1F);
  color:#FFFFFF;border-color:transparent;
  box-shadow:0 12px 30px -14px rgba(10,11,14,.55);
}
.nr-btn--commit:active,
.nr-btn--primary:active{background:linear-gradient(180deg,#0E1216,#080B0E)}

.nr-btn:hover{box-shadow:0 0 0 1px var(--nr-rage-dim),0 10px 26px -14px rgba(10,11,14,.35)}
.nr-btn--ghost:hover{background:var(--nr-ink-4)}
.nr-btn--ghost.is-busy::after{border-color:rgba(10,11,14,.20);border-top-color:var(--nr-paper)}
.nr-btn--wa:hover{box-shadow:0 0 0 1px rgba(27,158,75,.20),0 10px 26px -14px rgba(10,11,14,.35)}

/* The brand plate hard-codes near-white type (rgba(244,246,243,.72)),
   which is invisible on a white plate. */
.nr-brand{color:#2A2F2B}
.nr-brand:hover{border-color:var(--nr-rage);color:var(--nr-paper);background:var(--nr-ink-4)}
.nr-brand small{color:var(--nr-mute)}

/* Wishlist and compare sit on the product image in a dark puck. On white
   packaging that reads as two grey blobs, so it becomes a light chip with
   a real border. */
.nr-ph__fav{
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px var(--nr-line-2);
  color:var(--nr-mute);
}
.nr-ph__fav:hover{color:var(--nr-rage);box-shadow:inset 0 0 0 1px var(--nr-rage)}
.nr-ph__fav.is-active{color:var(--nr-rage);background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--nr-rage)}

.nr-pill{background:rgba(10,11,14,.055)}
.nr-pill--info{background:rgba(10,11,14,.055)}
.nr-badge--off{background:rgba(10,11,14,.07)}
.nr-progress__track{background:rgba(10,11,14,.08)}

/* Skeleton shimmer — dark sweep on a light card, not a light one. */
.nr-skel,
.is-skeleton{
  background:linear-gradient(90deg,
    rgba(10,11,14,.04) 0%,
    rgba(10,11,14,.09) 50%,
    rgba(10,11,14,.04) 100%);
}

/* Product media. The packaging is cut out on white, so the dramatic
   top-light that made tubs pop against black now only greys the shot.
   A soft off-white well instead of pure white: the tub reads as an
   object sitting on a surface rather than as a sticker on the page,
   and the card edge stays readable against the page. */
.nr-ph,
.nr-pc__media,
.nr-gal__frame,
.nr-quickview__media,
.nr-osum__thumb{background:var(--nr-well)}

/* Form fields. The element selectors have to be restated, not just
   .nr-input — input[type="text"] outranks a bare class. */
.nr-input,
input[type="text"],input[type="email"],input[type="url"],input[type="password"],
input[type="search"],input[type="number"],input[type="tel"],input[type="date"],
select,textarea{background:rgba(10,11,14,.035)}

/* The header search sits inside the dark chrome, so it keeps its
   white-alpha fill. */
.nr-header .nr-hsearch input{background:rgba(255,255,255,.06)}

.nr-actions__btn:hover{background:rgba(10,11,14,.05)}
.nr-mega__list a:hover{background:rgba(255,255,255,.05)}
.nr-drawer__close:hover{background:rgba(255,255,255,.06)}

/* The technical field behind a goal card. */
.nr-goalcard::before{
  background:
    radial-gradient(38% 34% at 92% 96%,rgba(60,140,27,.07),transparent 72%),
    repeating-linear-gradient(90deg,rgba(10,11,14,.035) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(10,11,14,.035) 0 1px,transparent 1px 34px);
}

/* Page hero + article + map washes. */
.nr-hero::before{background:radial-gradient(70% 90% at 78% 0%,rgba(60,140,27,.05),transparent 62%)}
.nr-art__media{background:radial-gradient(70% 70% at 40% 30%,rgba(10,11,14,.04),transparent 70%),var(--nr-ink-4)}
.nr-map{background:radial-gradient(60% 60% at 60% 40%,rgba(10,11,14,.04),transparent 70%),var(--nr-ink-4)}
.nr-map__road{background:rgba(10,11,14,.12)}

/* ============================================================
   THE HERO IN DAYLIGHT
   ============================================================ */

/* The particle field is drawn in JS in white and lime — both
   invisible on white. Hidden here rather than half-seen; the grid,
   the glow and the bull already carry the atmosphere. */
.nr-sys-hero__field{display:none}

/* The bull footage was shot dark. Multiplied onto white it reads as
   a graphite watermark instead of a black rectangle. */
.nr-sys-hero__beast{opacity:1}
.nr-sys-hero__beastmedia{
  filter:grayscale(1) contrast(1.05) brightness(1.06);
  mix-blend-mode:multiply;
  opacity:.16;
}
.nr-sys-hero__beast::after{opacity:0}

/* The product no longer rises out of the dark, so the shadow under it
   softens and the pool of light beneath goes green-tinted grey. */
.nr-sys-hero__tub{filter:drop-shadow(0 26px 40px rgba(10,11,14,.22))}
.nr-sys-hero__tub::after{background:radial-gradient(closest-side,rgba(60,140,27,.14),transparent)}

/* The diagnostic scan, restated in the light green. */
.nr-sys-hero::after{background:linear-gradient(180deg,transparent,rgba(60,140,27,.05) 45%,transparent)}

/* The energy sweep across a hovered control. */
.nr-btn::after{background:linear-gradient(90deg,transparent,rgba(10,11,14,.09),transparent)}
.nr-header .nr-btn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent)}
.nr-btn--commit::after,
.nr-btn--primary::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)}

/* ============================================================
   THE HARD-CODED ELECTRIC LIME — the second family

   Around fifty rules paint borders, glows, halos and washes with
   rgba(140,255,62,<alpha>) written out by hand. Unlike the near-white
   type these are not invisible on white — they are worse than that in
   one way and better in another: they still show, as a pale mint that
   belongs to no palette on the page. #8CFF3E at .34 over white is
   roughly #D6FFC2.

   Only the ones on light surfaces are restated here. The store bar,
   the mega menu, the drawer and the footer keep theirs — they are
   still lime on near-black inside the chrome scope, which is where
   that colour was designed to live.
   ============================================================ */

/* Hover borders and lifts. The black 45% drop shadow that went with
   them was built to separate a dark card from a darker page; on white
   it reads as smudge. */
.nr-card--link:hover,
.nr-art:hover,
.nr-locrow:hover,
.nr-tile:hover,
.nr-brand:hover,
.nr-storelist button:hover{
  border-color:var(--nr-rage);
  box-shadow:0 12px 30px -16px rgba(10,11,14,.32),0 0 0 1px var(--nr-rage-ink);
}

/* Selected / current states that used the lime as an edge. */
.nr-storecard.is-home,
.nr-ordrow--live,
.nr-fulfil,
.nr-checkout-fulfilment,
.nr-store-card.is-home [data-nr-set-home]{border-color:var(--nr-rage-ink)}
.nr-store-card.is-home [data-nr-set-home]{color:var(--nr-rage-hi)}

/* The status dot's halo, everywhere it is drawn by hand. */
.nr-dot,
.nr-status__dot{box-shadow:0 0 0 3px var(--nr-rage-dim)}

/* Panels and tiles that carried a lime wash behind an icon. */
.nr-panel--green{border-color:var(--nr-rage-ink)}
.nr-tile::after{background:radial-gradient(circle,rgba(60,140,27,.14),transparent 70%)}
.nr-goalcard__icon{background:rgba(60,140,27,.10);box-shadow:inset 0 0 0 1px rgba(60,140,27,.24)}
.nr-goalcard:hover .nr-goalcard__icon{background:rgba(60,140,27,.16)}
.nr-goalcard__go{box-shadow:inset 0 0 0 1px rgba(60,140,27,.30)}
.nr-goalcard:hover .nr-goalcard__go{background:rgba(60,140,27,.14)}
.nr-goalcard::after,
.nr-goalcard--shot::after{background:linear-gradient(115deg,transparent 42%,rgba(60,140,27,.12) 50%,transparent 58%)}

/* Chips and small outlined controls. */
.nr-chip,
.nr-tag--green{border-color:var(--nr-rage-ink);color:var(--nr-rage-hi)}

/* The committing button's green glow, and the green lift token. */
.nr-btn--commit:hover,
.nr-btn--primary:hover{box-shadow:0 12px 30px -14px rgba(10,11,14,.55)}

/* Prose links underline in the accent. */
.nr-entry a{text-decoration-color:var(--nr-rage-ink)}

/* The scrollbar. A lime thumb on a white page is the loudest object
   on the screen and it is not even content. */
*{scrollbar-color:rgba(10,11,14,.28) transparent}
::-webkit-scrollbar-thumb{background:rgba(10,11,14,.24)}
::-webkit-scrollbar-thumb:hover{background:rgba(10,11,14,.38)}

/* The CSS map's active pin. */
.nr-map__pin.is-active .nr-map__drop{
  box-shadow:0 0 0 4px rgba(60,140,27,.22),0 5px 16px rgba(10,11,14,.28);
}

/* ============================================================
   THE HARD-CODED NEAR-WHITE TYPE — the whole family

   Nineteen rules across six stylesheets set type to
   rgba(244,246,243,<alpha>) by hand instead of reading a token. On
   black that was the house body colour at 70–88% strength. On white
   it is invisible, and it is the single cause of every ghosted
   element reported so far: the brand plates, the checkout steps, the
   order-received page.

   The one that matters most is .nr-entry. It wraps the prose body of
   every page INCLUDING the WooCommerce shortcode output, so a single
   near-white declaration on it ghosted the whole checkout and the
   whole order-received page in one go — everything except the
   elements that happened to state a colour of their own.

   The rules that live inside the dark chrome — the nav, the mega
   menu, the drawer, the store bar — are deliberately NOT here. They
   are still near-white type on a near-black surface, which is
   correct, and the scope above keeps them that way.
   ============================================================ */
.nr-entry{color:var(--nr-prose)}
.nr-entry b,
.nr-entry strong{color:var(--nr-paper)}

.nr-lede{color:var(--nr-prose-2)}
.nr-note{color:var(--nr-mute)}
.nr-note b{color:var(--nr-paper)}
.nr-panel__text{color:var(--nr-mute)}
blockquote{color:var(--nr-prose-2)}
.nr-hero__sub{color:var(--nr-mute)}
.nr-acc__body{color:var(--nr-prose)}
.nr-pay__explain{color:var(--nr-mute)}
.nr-warnpanel__text{color:var(--nr-prose-2)}
.nr-fsum__text{color:var(--nr-mute)}
.nr-label__table th[scope="row"]{color:var(--nr-prose)}
.nr-label__block--allergen .nr-label__prose{color:var(--nr-prose)}

/* ============================================================
   QUICK VIEW — the last dark-glass control

   The pill that appears over a product image was dark glass with
   electric-green type. On white the glass stayed dark and the green
   came down to #3C8C1B, which is 3.3:1 against it — a dark-on-dark
   button sitting on a white page. It becomes white glass with
   charcoal type, matching the wishlist and compare chips it shares
   the image with.
   ============================================================ */
.nr-pc__quick{
  background:rgba(255,255,255,.92);
  border-color:var(--nr-line-2);
  color:var(--nr-paper);
  backdrop-filter:blur(6px);
}
.nr-pc__quick:hover,
.nr-pc__quick:focus-visible{
  background:#FFFFFF;
  border-color:var(--nr-rage);
  color:var(--nr-rage-hi);
}

/* ============================================================
   CHECKOUT AND CART — EXPLICIT TYPE COLOUR

   Most of the checkout takes no colour of its own: the step titles,
   the fulfilment option names, the order-summary heading, the line
   names and the line prices all inherit. On the dark build that was
   fine. On white they came out as near-invisible ghosts while their
   siblings — the ones that DO declare a colour, like the green ready
   time and the muted meta — stayed perfectly readable.

   Something above them is setting a light colour that this skin does
   not control. Rather than keep hunting it, every text element on the
   two pages where money changes hands now states its own colour.
   Inheritance is a luxury a checkout cannot afford.
   ============================================================ */
.nr-checkout,
.nr-cartpage,
.nr-osum{color:var(--nr-paper)}

.nr-checkout h2,
.nr-checkout h3,
.nr-cartpage h2,
.nr-cartpage h3,
.nr-checkout .nr-step__head,
.nr-checkout .nr-step__title,
.nr-checkout .nr-step__donename,
.nr-osum .nr-osum__title,
.nr-osum .nr-osum__name,
.nr-osum .nr-osum__price,
.nr-checkout .nr-checkout-fulfilment__name,
.nr-checkout .nr-checkout-fulfilment__option > span,
.nr-checkout .nr-speed__name,
.nr-checkout .nr-speed__cost,
.nr-checkout .nr-store-pick__name,
.nr-checkout label,
.nr-checkout .nr-select,
.nr-cartpage .nr-osum__name,
.nr-cartpage .nr-osum__price{color:var(--nr-paper)}

/* The two that are meant to be quieter keep their own voice. */
.nr-checkout .nr-checkout-fulfilment > h3,
.nr-osum .nr-osum__name em{color:var(--nr-mute-2)}
.nr-checkout .nr-checkout-fulfilment__meta{color:var(--nr-rage-hi)}
.nr-checkout .nr-checkout-fulfilment__option.is-selected .nr-checkout-fulfilment__meta{color:var(--nr-rage)}

/* The radio dot was a dark disc on a dark page. On white it needs a
   white well, or a checked radio reads as a hole. */
.nr-checkout-fulfilment__option input[type="radio"],
.nr-speed__option input[type="radio"]{background:#FFFFFF}

/* WooCommerce's own notices ship a tan-on-cream palette that belongs to
   no part of this brand. */
.woocommerce-info,
.woocommerce-message{
  background:var(--nr-ink-2);
  border:1px solid var(--nr-line);
  border-left:3px solid var(--nr-rage);
  color:var(--nr-paper);
}
.woocommerce-info a,
.woocommerce-message a{color:var(--nr-rage-hi);font-weight:600}

/* Rage mode is an experience switch, not a second brand. On the light
   page it pushes the same hue harder, the way it does in the dark. */
[data-nr-rage="on"]{
  --nr-rage:     #2F7A08;
  --nr-rage-dim: rgba(47,122,8,.18);
  --nr-rage-ink: rgba(47,122,8,.45);
  --nr-rage-rgb: 47,122,8;
  --nr-line:     rgba(47,122,8,.14);
  --nr-line-2:   rgba(47,122,8,.24);
  --nr-ink:      #FFFFFF;
  --nr-ink-2:    #F7F9F5;
  --nr-ink-3:    #FFFFFF;
}