/* ==========================================================================
   08 — INTEGRATION
   Styles every class emitted by the PLUGIN's shortcodes and by templates
   whose names diverged from 05/06. Nothing here invents new design language:
   it maps plugin markup onto the component vocabulary already in 03/04.

   If a rule here duplicates one in 05/06, delete it there, not here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared primitives the plugin emits
   -------------------------------------------------------------------------- */
.nr-btn--primary{background:var(--nr-rage);color:var(--nr-on-rage);border-color:transparent}
/*
 * WooCommerce renders a few controls through its own hooks, so the theme
 * never gets to put a class on them — `.checkout-button` on the cart page is
 * the important one. Mapping them onto the committing style here is what
 * stops the cart's main action being a plain graphite control while the
 * mini-cart's is green.
 */
.woocommerce .checkout-button,
a.checkout-button,
.wc-proceed-to-checkout .button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 26px;min-height:50px;border-radius:var(--nr-r-sm);
  background:var(--nr-rage);color:var(--nr-on-rage);border:1px solid transparent;
  font-family:var(--nr-mono);font-size:var(--nr-t-xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
}
.woocommerce .checkout-button:hover,
a.checkout-button:hover,
.wc-proceed-to-checkout .button.alt:hover{
  background:var(--nr-rage-hi);color:var(--nr-on-rage);
  box-shadow:0 10px 30px rgba(140,255,62,.20);
}
.nr-btn--primary:hover{background:var(--nr-rage-hi)}

.nr-status,.nr-store-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;line-height:1.3}
.nr-status__dot{width:7px;height:7px;border-radius:50%;background:var(--nr-rage);flex:0 0 auto;box-shadow:0 0 0 3px rgba(140,255,62,.2)}
.nr-status--warn .nr-status__dot{background:var(--nr-warn);box-shadow:0 0 0 3px rgba(240,200,126,.18)}
.nr-status--bad .nr-status__dot{background:var(--nr-bad);box-shadow:0 0 0 3px rgba(240,155,132,.18)}
.nr-status__label{font-weight:600}
.nr-status--good .nr-status__label{color:var(--nr-rage-hi)}
.nr-status--warn .nr-status__label{color:var(--nr-warn)}
.nr-status--bad .nr-status__label{color:var(--nr-bad)}
.nr-store-status__name{font-weight:700;letter-spacing:-.02em}
.nr-store-status__week{margin-top:.75rem}

/* cost per serving — the differentiator, so it gets the brand colour */
.nr-cps__value{font-family:var(--nr-mono);font-size:.82rem;font-weight:700;color:var(--nr-rage-hi);letter-spacing:-.01em}
.nr-cps__days{font-family:var(--nr-mono);font-size:.72rem;color:var(--nr-mute-2);margin-left:.4rem}

/* delivery promise */
.nr-promise{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem}
.nr-promise__window{font-weight:650}
.nr-promise__window strong{color:var(--nr-paper)}
.nr-promise__overnight{color:var(--nr-mute);font-size:.8rem}
.nr-promise__countdown{font-family:var(--nr-mono);font-size:.78rem;color:var(--nr-warn)}

/* --------------------------------------------------------------------------
   2. Store surfaces  [nr_store_locator] [nr_store_strip] [nr_home_store_picker]
   -------------------------------------------------------------------------- */
.nr-store-locator__list,.nr-store-strip__list,.nr-home-picker__list{list-style:none;margin:0;padding:0}
.nr-store-locator__list{display:grid;gap:.75rem}

.nr-store-card__name{font-size:1rem;font-weight:730;letter-spacing:-.022em;margin:0 0 .3rem}
.nr-store-card__address{font-size:.82rem;color:var(--nr-mute);line-height:1.5;margin:0 0 .6rem}
.nr-store-card__status{margin-bottom:.6rem}
.nr-store-card__actions{display:flex;flex-wrap:wrap;gap:.5rem}

.nr-store-strip__list{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nr-store-strip__item{border:1px solid var(--nr-line);border-radius:var(--nr-r);padding:.9rem .85rem;background:var(--nr-ink-3)}
.nr-store-strip__name{display:block;font-weight:720;font-size:.9rem;letter-spacing:-.02em;margin-bottom:.3rem}
.nr-store-strip__status{font-size:.78rem}

.nr-home-picker{border:1px solid var(--nr-line);border-radius:var(--nr-r);padding:1rem;background:var(--nr-ink-2)}
.nr-home-picker__label{display:block;font-family:var(--nr-mono);font-size:var(--nr-fs-10_56);letter-spacing:.14em;text-transform:uppercase;color:var(--nr-mute-2);font-weight:700;margin-bottom:.6rem}
.nr-home-picker__list{display:grid;gap:.4rem}
/*
 * The chrome belongs on the BUTTON, not on the <li>: the plugin puts both the
 * class and `is-active` on `<button class="nr-home-picker__option">`, so
 * `.nr-home-picker__list li.is-active` could never match. The <li> is now just
 * a grid cell — see §15.
 */
.nr-home-picker__list li{display:block}
.nr-home-picker__name{font-weight:650;font-size:.86rem}
.nr-home-picker__status{margin-left:auto;font-size:.76rem}

.nr-store-contact{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.nr-store-section{margin-block:clamp(2rem,5vw,3.5rem)}
.nr-storepage{display:block}

/* hours tables — plugin and theme both emit one */
.nr-hours-table,.nr-hours,.nr-special-table{width:100%;border-collapse:collapse;font-size:.86rem}
.nr-hours-table th,.nr-hours-table td,.nr-hours td,.nr-hours th,.nr-special-table td,.nr-special-table th{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--nr-line)}
.nr-hours-table td:last-child,.nr-hours td:last-child{text-align:right;font-family:var(--nr-mono);font-size:.8rem;color:var(--nr-mute)}
.nr-hours-table tr.is-today,.nr-hours tr.is-today{background:var(--nr-ink-4);box-shadow:inset 2px 0 0 var(--nr-rage)}
.nr-hours-table tr.is-today td,.nr-hours tr.is-today td{color:var(--nr-paper);font-weight:650}
.nr-hours-table tr.is-closed td:last-child,.nr-hours tr.is-closed td:last-child{color:var(--nr-bad)}

/* --------------------------------------------------------------------------
   3. Cart drawer (plugin-rendered lines)
   -------------------------------------------------------------------------- */
.nr-cart-drawer__inner{display:flex;flex-direction:column;min-height:100%}
.nr-cart-drawer__list{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto}
.nr-cart-drawer__branch{margin:.9rem 1.1rem;border:1px solid var(--nr-line-2);background:var(--nr-ink-4);border-radius:var(--nr-r);padding:.8rem .85rem;font-size:.82rem}
.nr-cart-drawer__branch strong{display:block;color:var(--nr-rage-hi);font-weight:730;margin-bottom:.2rem}
.nr-cart-drawer__empty{padding:2.5rem 1.1rem;text-align:center;color:var(--nr-mute)}
.nr-cart-drawer__subtotal{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 1.1rem;border-top:1px solid var(--nr-line);font-size:1.05rem;font-weight:800;letter-spacing:-.03em}
.nr-cart-drawer__checkout{margin:0 1.1rem 1.1rem}

.nr-cart-line{display:flex;gap:.8rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--nr-line)}
.nr-cart-line__link{flex:1 1 auto;min-width:0;font-size:.82rem;font-weight:650;line-height:1.32;color:var(--nr-paper)}
.nr-cart-line__link:hover{color:var(--nr-rage-hi)}
.nr-cart-line__serving{display:block;font-family:var(--nr-mono);font-size:var(--nr-fs-10_88);color:var(--nr-rage-hi);font-weight:700;margin-top:.25rem}
.nr-cart-line__qty{font-family:var(--nr-mono);font-size:.7rem;color:var(--nr-mute-2);margin-top:.25rem;display:block}
.nr-cart-line__total{font-size:.92rem;font-weight:780;letter-spacing:-.02em;text-align:right;flex:0 0 auto}
.nr-cart-line__remove{background:none;border:0;color:var(--nr-mute-2);cursor:pointer;font-size:.9rem;line-height:1;padding:.2rem}
.nr-cart-line__remove:hover{color:var(--nr-bad)}

/* --------------------------------------------------------------------------
   4. Checkout fulfilment (plugin-rendered)
   -------------------------------------------------------------------------- */
.nr-checkout-fulfilment{border:1px solid rgba(140,255,62,.3);border-radius:var(--nr-r);overflow:hidden;margin-bottom:1.1rem}
.nr-checkout-fulfilment__choice{display:grid}
.nr-checkout-fulfilment__option{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border-bottom:1px solid var(--nr-line);cursor:pointer}
.nr-checkout-fulfilment__option:last-child{border-bottom:0}
.nr-checkout-fulfilment__option.is-selected{background:var(--nr-ink-4);box-shadow:inset 2px 0 0 var(--nr-rage)}
.nr-checkout-fulfilment__store{padding:.9rem 1rem;border-top:1px solid var(--nr-line);background:var(--nr-ink-2)}
.nr-checkout-fulfilment__promise{padding:.75rem 1rem;font-size:.82rem;color:var(--nr-mute);margin:0}

/* The three things this block was missing, all of them the same mistake:
   the plugin emits its own markup and the theme had only styled the wrapper,
   so everything INSIDE it fell back to the browser and to global rules meant
   for page headings.

   1. The <h3>. With no rule of its own it inherited the display heading —
      uppercase, ~30px — and "HOW WOULD YOU LIKE TO GET IT?" ran straight out
      of the box on a phone. It is a field label, so it is sized like one. */
.nr-checkout-fulfilment > h3{
  margin:0;padding:.85rem 1rem .1rem;
  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);line-height:1.3;
}

/* 2. The radios. Native OS radios are blue on every platform, which is the
      one colour this site does not use. Styled here rather than globally so
      nothing else on the site changes. */
.nr-checkout-fulfilment__option input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;
  border:1.5px solid var(--nr-line-2);border-radius:50%;
  background:var(--nr-ink);cursor:pointer;
  transition:border-color var(--nr-fast) var(--nr-ease),box-shadow var(--nr-fast) var(--nr-ease);
}
.nr-checkout-fulfilment__option input[type="radio"]:checked{
  border-color:var(--nr-rage);
  box-shadow:inset 0 0 0 4px var(--nr-rage);
}
.nr-checkout-fulfilment__option input[type="radio"]:focus-visible{
  outline:2px solid var(--nr-rage);outline-offset:2px;
}
.nr-checkout-fulfilment__option > span{font-size:13.5px;font-weight:650;line-height:1.35;min-width:0}

/* The three choices, each with the fact that decides it: a real ready time, a
   real delivery window, a real count of branches that have everything. A
   choice with no consequence printed next to it is a choice made blind. */
.nr-checkout-fulfilment__body{display:grid;gap:3px;min-width:0}
.nr-checkout-fulfilment__name{font-size:14px;font-weight:700;line-height:1.3}
.nr-checkout-fulfilment__meta{
  font-family:var(--nr-mono);font-size:var(--nr-fs-10_5);
  letter-spacing:.06em;color:var(--nr-rage-hi);
}
.nr-checkout-fulfilment__option.is-selected .nr-checkout-fulfilment__meta{color:var(--nr-rage)}
.nr-checkout-fulfilment__option:hover{background:var(--nr-ink-3)}

/* ---- WHAT COLLECTION COSTS ----
   The product page prints "Free" against the collect option
   (template-parts/product/fulfilment.php prints .nr-fulfil__price). The
   checkout step is rendered by nutrition-rage-core and prints no price at
   all, so the same customer who was told collection is free on the product
   page reaches checkout and is shown a choice between an option with no
   price and one that costs money. Free is the strongest argument collection
   has, and it was going unsaid at the exact moment the choice is made.

   Attached by CSS rather than JavaScript on purpose: this whole block sits
   inside .update_totals_on_change, so WooCommerce tears it out and rebuilds
   it over AJAX every time the customer changes anything. An injected node
   would vanish on the first refresh; a stylesheet rule cannot.

   Collection is R0 at any order value, so the word is safe to hard-code.
   Delivery deliberately gets nothing here — its price is conditional (free
   over R1 000, otherwise R150 or R250) and is printed properly by the
   shipping methods in the "How fast?" list below.

   :has() is unsupported in a handful of old browsers; there the label
   simply does not appear, which is exactly today's behaviour. */
.nr-checkout-fulfilment__option:has(input[value="collect"])::after{
  content:"Free";
  margin-left:auto;
  align-self:center;
  flex-shrink:0;
  font-family:var(--nr-mono);
  font-size:12px;
  font-weight:700;
  color:var(--nr-rage);
}

/* 3. The branch <select>. It was picking up the toolbar's sort-dropdown rule
      — border:0, transparent, auto width — which on a full-width form row
      drew a bare label floating in the middle of a sentence. A checkout
      control is a control: it looks like the inputs above and below it. */
/*
 * THE BRANCH SELECT IS HIDDEN, NOT REMOVED.
 *
 * The plugin renders a <select> here so it works on any theme. THIS theme
 * gives branch choice a whole step of its own — step 2, with each branch's
 * address and its live open-until time — so showing both put the same question
 * on the page twice, one line apart.
 *
 * It stays in the DOM because it is the field that actually posts
 * `nr_store_id`; the picker in step 2 writes to it. Hidden with clip rather
 * than display:none so it remains a real form control that a screen reader can
 * still reach and the browser will still submit.
 */
.nr-checkout .nr-checkout-fulfilment__store{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  margin:-1px;padding:0;border:0;
}

.nr-checkout-fulfilment__store{display:grid;gap:.5rem}
.nr-checkout-fulfilment__store .nr-select,
.nr-checkout-fulfilment__store select{
  width:100%;min-height:46px;
  padding:10px 34px 10px 12px;
  border:1px solid var(--nr-line-2);border-radius:10px;
  background-color:var(--nr-ink);background-position:right 12px center;
  font-size:14px;color:var(--nr-paper);
}
.nr-checkout-fulfilment__store .description{
  margin:0;font-size:12px;line-height:1.55;color:var(--nr-mute);
}

.nr-order-fulfilment{margin:1.1rem 0}
.nr-order-fulfilment__list{display:grid;gap:.4rem;margin:0;padding:0}
.nr-order-fulfilment__label{font-family:var(--nr-mono);font-size:var(--nr-fs-10_56);letter-spacing:.14em;text-transform:uppercase;color:var(--nr-mute-2);font-weight:700}
.nr-order-fulfilment__value{font-size:.9rem;font-weight:650;margin:0 0 .5rem}

/* --------------------------------------------------------------------------
   5. Wishlist / compare (plugin-rendered)
   -------------------------------------------------------------------------- */
.nr-wishlist__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.nr-wishlist__item{display:flex;gap:.85rem;align-items:center;border:1px solid var(--nr-line);border-radius:var(--nr-r);padding:.8rem;background:var(--nr-ink-3)}
.nr-wishlist__image{flex:0 0 56px;width:56px;height:56px;border:1px solid var(--nr-line);border-radius:var(--nr-r-xs);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--nr-ink)}
.nr-wishlist__image img,.nr-wishlist__image svg{max-width:100%;height:auto}
.nr-wishlist__link{flex:1 1 auto;min-width:0;font-size:.88rem;font-weight:650;line-height:1.32}
.nr-wishlist__price{font-weight:780;letter-spacing:-.02em}
.nr-wishlist__serving{display:block;font-family:var(--nr-mono);font-size:var(--nr-fs-10_88);color:var(--nr-rage-hi);font-weight:700}
.nr-wishlist__stock{display:block;font-size:.72rem;color:var(--nr-mute);margin-top:.2rem}
.nr-wishlist__remove{background:none;border:0;color:var(--nr-mute-2);cursor:pointer;padding:.25rem}
.nr-wishlist__remove:hover{color:var(--nr-bad)}
.nr-wishlist__branch{border:1px solid var(--nr-line-2);background:var(--nr-ink-4);border-radius:var(--nr-r);padding:1rem;margin-bottom:1.1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

.nr-compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nr-compare__table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
.nr-compare__table th,.nr-compare__table td{padding:.7rem .75rem;border-bottom:1px solid var(--nr-line);text-align:left;vertical-align:top}
.nr-compare__table thead th{position:sticky;top:0;background:var(--nr-ink-3);z-index:1;vertical-align:bottom}
.nr-compare__table th:first-child,.nr-compare__table td:first-child{font-family:var(--nr-mono);font-size:var(--nr-fs-10_56);letter-spacing:.12em;text-transform:uppercase;color:var(--nr-mute-2);font-weight:700;width:150px}
.nr-compare__image{width:100%;aspect-ratio:1.4/1;border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);background:var(--nr-ink);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;overflow:hidden}
.nr-compare__product{font-size:.82rem;font-weight:680;line-height:1.3;display:block}
.nr-compare__best{color:var(--nr-rage-hi);font-weight:800}
.nr-compare__remove{background:none;border:0;color:var(--nr-mute-2);cursor:pointer;font-size:.85rem;padding:.2rem}
.nr-compare__remove:hover{color:var(--nr-bad)}

/* --------------------------------------------------------------------------
   6. AI surfaces — advisor + stack builder
   -------------------------------------------------------------------------- */
.nr-advisor{border:1px solid var(--nr-line);border-radius:var(--nr-r);background:var(--nr-ink-2);overflow:hidden}
.nr-advisor__log{display:flex;flex-direction:column;gap:.75rem;padding:1.1rem;min-height:240px;max-height:60vh;overflow-y:auto}
.nr-advisor__form{display:flex;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid var(--nr-line);background:var(--nr-ink-3)}
.nr-advisor__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nr-advisor__input{flex:1 1 auto;min-width:0}
.nr-advisor__submit{flex:0 0 auto}
.nr-advisor__note{padding:.7rem 1.1rem;font-size:.74rem;color:var(--nr-mute-2);line-height:1.5;border-top:1px solid var(--nr-line)}

.nr-stack{display:grid;gap:1.1rem}
.nr-stack__form{display:grid;gap:1.1rem}
.nr-stack__field{display:grid;gap:.5rem}
.nr-stack__options{display:flex;flex-wrap:wrap;gap:.5rem}
.nr-stack__option{border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);padding:.55rem .9rem;font-size:.84rem;font-weight:650;cursor:pointer;transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease)}
.nr-stack__option:hover,.nr-stack__option.is-active{border-color:var(--nr-rage);background:var(--nr-ink-4);color:var(--nr-paper)}
.nr-stack__submit{justify-self:start}
.nr-stack__result{border:1px solid var(--nr-line-2);background:var(--nr-ink-4);border-radius:var(--nr-r);padding:1.1rem}

.nr-tool--advisor,.nr-tool--stack,.nr-tool--compare,.nr-tool--wishlist{margin-block:clamp(1.5rem,4vw,2.5rem)}

/* --------------------------------------------------------------------------
   7. Theme templates whose names diverged from 05/06
   -------------------------------------------------------------------------- */
/*
 * Plain block wrappers. These exist only so the class is not "unstyled"; div is
 * block by default, so the rule is a no-op.
 *
 * Two names were removed from this list because the rule was NOT a no-op:
 *   .nr-shop  — sits on the .nr-split grid container; display:block collapsed
 *               the archive to one column and put the filters above the grid.
 *   .nr-gloss — sits on a <table>; display:block breaks table layout.
 * Do not add a class here without checking what element it lands on.
 */
.nr-cartpage,.nr-checkout,.nr-storepage,.nr-learn,.nr-dash,.nr-orders,.nr-vieworder,.nr-reservations{display:block}
.nr-shophead{margin-bottom:1.4rem}
.nr-hero--term{padding-block:clamp(2.4rem,6vw,4rem)}
.nr-pgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}
.nr-gal{display:grid;gap:.6rem}
/*
 * minmax(0,1fr), not 1fr. A grid track defaults to a minimum of `auto`,
 * which is the min-content width of the widest thing inside it — and the
 * nutrition label's table is 340px wide by design. On a 390px phone that
 * pushed the whole buy column to 509px and gave the product page a
 * horizontal scrollbar: the title, price and Add to cart all ran off the
 * right edge. Capping the track at zero lets the label's own
 * overflow-x:auto do the scrolling, which is what it was always for.
 */
.nr-buybox{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;align-content:start}
.nr-buybox>*{min-width:0}
.nr-buybox__reviews{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--nr-mute)}
.nr-comparestrip{margin-top:clamp(1.6rem,4vw,2.4rem)}
.nr-related{margin-top:clamp(2rem,5vw,3rem)}
.nr-checkout__aside{align-self:start}
@media(min-width:1000px){.nr-checkout__aside{position:sticky;top:calc(var(--nr-header-h,72px) + 1rem)}}
.nr-payment{display:grid}
.nr-totals{display:grid;gap:.35rem}
.nr-totals__row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--nr-mute)}
.nr-totals__row--big{font-size:1.05rem;font-weight:800;color:var(--nr-paper);letter-spacing:-.03em;border-top:1px solid var(--nr-line);margin-top:.4rem;padding-top:.6rem}
.nr-cart__qty{width:70px}
.nr-filters__form{display:grid;gap:1rem}
.nr-thanks__hero{padding-block:clamp(2.4rem,6vw,4rem)}
.nr-acc--tabs{margin-top:1.4rem}
.nr-login{max-width:420px;margin-inline:auto}
.nr-login__row{display:grid;gap:.4rem;margin-bottom:.85rem}
.nr-review{border-bottom:1px solid var(--nr-line);padding:1rem 0}
.nr-meta{display:flex;gap:.7rem;flex-wrap:wrap;font-size:.78rem;color:var(--nr-mute-2)}
.nr-meta__author,.nr-meta__date{display:inline-flex;align-items:center;gap:.3rem}
.nr-page__media{margin-bottom:1.4rem;border-radius:var(--nr-r);overflow:hidden}
/* An explicit minmax(0,1fr) column. A grid with no stated columns gets one
   implicit `auto` track, and an auto track sizes to its content — so the
   400px logo made a 400px track inside a 329px cell, every percentage below
   it resolved against 400, and the artwork ran across the Shop column. */
.nr-footer__brand{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
.nr-footer__widget{font-size:.82rem;color:var(--nr-mute)}
.nr-brandmark__wrap{display:inline-flex;align-items:center;gap:.55rem}
/* The wrapper does not size the logo — the <img> does, in 09-system.css. A
   max-height here only clipped the box the image overflowed anyway. */
.nr-brandmark__logo{display:block;max-width:100%}
.nr-nav__item{position:relative}
.nr-mega__sublist{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.nr-actions__btn--cart,.nr-actions__btn--account{position:relative}
.nr-pc__body{display:flex;flex-direction:column;flex:1 1 auto}
.nr-ingredient-table{width:100%;border-collapse:collapse;font-size:.86rem}
.nr-ingredient-table th,.nr-ingredient-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--nr-line)}

/* --------------------------------------------------------------------------
   8. Quick view
   -------------------------------------------------------------------------- */
/* The containing block for the badge, the heart and the quick-view button.
 * These are absolutely positioned; before this wrapper existed they resolved
 * against .nr-pc (the whole card), so bottom:12px put "Quick view" on top of
 * the Add to cart button instead of over the image. */
.nr-pc__top{position:relative}
.nr-pc__quick{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);opacity:0;pointer-events:none;white-space:nowrap;background:rgba(6,14,9,.86);border-color:rgba(140,255,62,.45);color:var(--nr-paper);transition:opacity var(--nr-fast) var(--nr-ease),transform var(--nr-fast) var(--nr-ease);z-index:3}
.nr-pc__quick:hover,.nr-pc__quick:focus-visible{background:rgba(6,14,9,.96);border-color:var(--nr-rage);color:var(--nr-rage-hi)}
.nr-pc:hover .nr-pc__quick,.nr-pc:focus-within .nr-pc__quick{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media(hover:none){.nr-pc__quick{display:none}}

/* --------------------------------------------------------------------------
   9. Reduced motion — anything introduced above
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .nr-pc__quick,.nr-home-picker__list li,.nr-stack__option{transition-duration:.01ms !important}
  .nr-pc__quick{transform:translate(-50%,0)}
}

/* --------------------------------------------------------------------------
   10. Block-level wrappers the plugin emits (kept last so they can be
       overridden by anything above without a specificity fight)
   -------------------------------------------------------------------------- */
.nr-cart,.nr-wishlist,.nr-store-locator,.nr-store-strip{display:block}
.nr-compare__row th{white-space:nowrap}
.nr-compare__row--cps td{font-family:var(--nr-mono);font-size:.8rem}
.nr-compare__row--cps .nr-compare__best{font-size:.84rem}

/* --------------------------------------------------------------------------
   11. Shop layout — filters on the right
   The archive uses .nr-split--right, so the grid is content-then-rail. Source
   order keeps the filters first in the markup (good for keyboard users and for
   the collapsed mobile panel); `order` flips them visually on wide screens.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .nr-shop{grid-template-columns:minmax(0,1fr) 260px}
  .nr-shop > .nr-filters{order:2}
  .nr-shop > .nr-shop__main{order:1}
}

/* The Filter heading becomes a real button on narrow screens. */
.nr-filters__toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:-.02em;
}
.nr-filters__chev{display:none;transition:transform var(--nr-fast) var(--nr-ease)}
.nr-filters.is-open .nr-filters__chev{transform:rotate(180deg)}

@media (max-width:900px){
  /* Collapsed by default so the grid starts near the top of the page. */
  .nr-filters{
    border:1px solid var(--nr-line);
    border-radius:var(--nr-r);
    background:var(--nr-ink-2);
    padding:.85rem 1rem;
    margin-bottom:1.1rem;
  }
  .nr-filters__chev{display:inline-flex}
  .nr-filters__toggle{width:100%;justify-content:flex-start}
  .nr-filters__chev{margin-left:auto}
  .nr-filters__form{display:none}
  .nr-filters.is-open .nr-filters__form{display:block;margin-top:.9rem}
  /* Clear only makes sense once the panel is open. */
  .nr-filters__clear{display:none}
  .nr-filters.is-open .nr-filters__clear{display:inline-block}
}

/* No JavaScript: never leave the filters unreachable. */
.nr-no-js .nr-filters__form{display:block}
.nr-no-js .nr-filters__chev{display:none}

/* --------------------------------------------------------------------------
   12. Mega menu — anchor to the header, not to the menu item
   .nr-mega was absolutely positioned against its own <li> and centred with
   left:50% + translateX(-50%). For a menu item near the left edge ("Goals")
   that pushed a 1040px panel off the left of the viewport. Making the header
   row the containing block centres the panel on the page instead.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .nr-header__inner{position:relative}
  .nr-nav__list > li{position:static}
  .nr-mega{
    /* Centre on the header row, and never exceed the viewport. */
    left:50%;
    right:auto;
    max-width:calc(100vw - 2 * var(--nr-gut));
  }
}

/* --------------------------------------------------------------------------
   13. Footer widget area
   register_sidebar()'s before_title/after_title only apply to CLASSIC widgets.
   Block widgets (WordPress 5.8+) emit their own <h2 class="wp-block-heading">,
   so the theme's small mono heading never applied and titles rendered at full
   h2 size. Style the block output directly.
   -------------------------------------------------------------------------- */
.nr-footer__promo h2,
.nr-footer__promo h3,
.nr-footer__promo .wp-block-heading,
.nr-footer__promo .widget-title{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--nr-rage-hi);
  margin:0 0 .6rem;font-weight:700;
}
.nr-footer__promo h2:not(:first-child),
.nr-footer__promo h3:not(:first-child),
.nr-footer__promo .wp-block-heading:not(:first-child){margin-top:.9rem}
.nr-footer__promo ul,
.nr-footer__promo ol{list-style:none;margin:0;padding:0;font-size:12px;color:var(--nr-mute)}
.nr-footer__promo li+li{margin-top:.4rem}
.nr-footer__promo a{color:var(--nr-mute)}
.nr-footer__promo a:hover{color:var(--nr-rage-hi)}
.nr-footer__promo select,.nr-footer__promo input{max-width:100%}

/* --------------------------------------------------------------------------
   14. Plugin shortcodes inside page content
   Shortcodes render inside .nr-entry, whose editor styles are more specific
   than the component rules above:
       .nr-entry ul { list-style: disc }      (0,1,1)
       .nr-store-locator__list { list-style:none }  (0,1,0)
   So every shortcode list grew bullets and inherited editor spacing. These
   rules re-assert the component styling at matching specificity.
   -------------------------------------------------------------------------- */
.nr-entry .nr-store-locator__list,
.nr-entry .nr-store-strip__list,
.nr-entry .nr-home-picker__list,
.nr-entry .nr-wishlist__list,
.nr-entry .nr-order-fulfilment__list,
.nr-entry .nr-cart-drawer__list{
  list-style:none;padding-left:0;margin:0;
}
.nr-entry .nr-store-locator__list li+li,
.nr-entry .nr-store-strip__list li+li,
.nr-entry .nr-wishlist__list li+li{margin-top:.75rem}

/* The store card is an <li> and needs the card treatment. */
.nr-store-card{
  border:1px solid var(--nr-line);
  border-radius:var(--nr-r);
  background:var(--nr-ink-3);
  padding:1.05rem 1.1rem;
}
.nr-store-card.is-home{border-color:var(--nr-line-2);background:var(--nr-ink-4)}

/* Name: a normal card title, not a large content heading. */
.nr-entry .nr-store-card__name,
.nr-store-card__name{
  font-size:1.02rem;font-weight:740;letter-spacing:-.024em;
  margin:0 0 .35rem;line-height:1.25;
}
.nr-store-card__name a{color:var(--nr-paper);text-decoration:none;border:0}
.nr-store-card__name a:hover{color:var(--nr-rage-hi)}

/* Status line takes its colour from the tone the engine reports. */
.nr-store-card__status{font-size:.84rem;font-weight:640;margin:0 0 .45rem}
.nr-store-card__status[data-nr-tone="good"]{color:var(--nr-rage-hi)}
.nr-store-card__status[data-nr-tone="warn"]{color:var(--nr-warn)}
.nr-store-card__status[data-nr-tone="bad"]{color:var(--nr-bad)}

.nr-store-card__address{
  font-style:normal;font-size:.82rem;color:var(--nr-mute);
  line-height:1.5;margin:0 0 .8rem;display:block;
}

/* Action row: small, evenly sized buttons rather than full-height blocks. */
.nr-store-card__actions{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:0;align-items:stretch;
}
.nr-store-card__actions > *{
  font-size:.78rem;padding:.5rem .85rem;line-height:1.2;
  border-radius:var(--nr-r-sm);white-space:nowrap;
}
.nr-store-card__actions .nr-btn--wa{background:var(--nr-control);color:var(--nr-paper);border-color:var(--nr-line-2)}
.nr-store-card__actions [data-nr-set-home]{cursor:pointer}
.nr-store-card.is-home [data-nr-set-home]{
  border-color:rgba(140,255,62,.4);color:var(--nr-rage-hi);cursor:default;
}

/* --------------------------------------------------------------------------
   15. Shortcode ↔ editor cascade — found by tests/test-shortcode-styles.php

   Everything below closes a gap the audit proved, not one anybody guessed at.
   Two failure modes, both mechanical:

     UNSTYLED    the plugin emits an nr-* class no rule ever paints, or paints
                 through a selector whose SHAPE never matches (the theme's
                 stack-builder wraps a <fieldset> in .nr-stack__step; the
                 shortcode puts the class ON the fieldset — same name, two
                 different elements).

     OVERRIDDEN  shortcodes render inside .nr-entry, whose editor rules are
                 keyed on the ELEMENT and therefore out-specify a class:
                     .nr-entry a:not([class])  (0,2,1)
                     .nr-entry ul              (0,1,1)
                     .nr-entry li+li           (0,1,2)
                     .nr-entry img             (0,1,1)
                     .nr-entry h3              (0,1,1)
                 Re-scoping the component rule with .nr-entry restores the
                 component vocabulary at a specificity that wins.

   Run the audit before touching this section; it names the exact competing
   selectors and their specificity.
   -------------------------------------------------------------------------- */

/* ---- 15.1 Links. `.nr-entry a:not([class])` (0,2,1) underlines and re-colours
        every unclassed <a> a shortcode emits — card titles, brand tiles, the
        compare header. Matching (0,2,1) from the last-loaded file wins. ---- */
.nr-entry .nr-store-card__name a,
.nr-entry .nr-store-strip__item a,
.nr-entry .nr-goal-grid__item a,
.nr-entry .nr-brand-wall__item a,
.nr-entry .nr-compare__product a{
  color:var(--nr-paper);
  text-decoration:none;
  text-underline-offset:auto;
}
.nr-entry .nr-store-card__name a:hover,
.nr-entry .nr-store-strip__item a:hover,
.nr-entry .nr-goal-grid__item a:hover,
.nr-entry .nr-brand-wall__item a:hover,
.nr-entry .nr-compare__product a:hover{
  color:var(--nr-rage-hi);
  text-decoration:none;
}

/* ---- 15.2 Lists the editor would bullet and indent. Same shape as §14. ---- */
.nr-entry .nr-goal-grid,
.nr-entry .nr-brand-wall{list-style:none;padding-left:0;margin:0}
.nr-entry .nr-store-status__week{list-style:none;padding-left:0;margin:.75rem 0 0}

/* `.nr-entry li+li{margin-top:.4em}` (0,1,2) stacks flow spacing on top of the
   grid `gap` these lists already use. */
.nr-entry .nr-goal-grid li+li,
.nr-entry .nr-brand-wall li+li,
.nr-entry .nr-home-picker__list li+li,
.nr-entry .nr-store-status__week li+li{margin-top:0}

/* ---- 15.3 Images. `.nr-entry img{border-radius:var(--nr-r)}` (0,1,1) beat the
        smaller radii these thumbnails are sized for. ---- */
.nr-entry .nr-compare__image{border-radius:var(--nr-r-sm)}
.nr-entry .nr-wishlist__image{border-radius:var(--nr-r-xs)}

/* ---- 15.4 Home branch picker. The class and `is-active` sit on the BUTTON. ---- */
.nr-home-picker__option{
  display:flex;align-items:center;gap:.6rem;
  width:100%;padding:.5rem .6rem;
  border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease);
}
.nr-home-picker__option:hover{border-color:var(--nr-line-2);background:var(--nr-ink-3)}
.nr-home-picker__option.is-active,
.nr-home-picker__option[aria-pressed="true"]{
  border-color:var(--nr-rage);background:var(--nr-ink-4);
}
.nr-home-picker__option.is-active .nr-home-picker__name{color:var(--nr-rage-hi)}

/* ---- 15.5 Branch strip: the whole tile is the link. ---- */
.nr-store-strip__item > a{display:block;height:100%}

/* ---- 15.6 One branch, full week. `.nr-store-status__day` had no rule at all,
        and `.nr-entry h3` was sizing the branch name as a content heading. ---- */
.nr-entry .nr-store-status__name,
.nr-store-status__name{font-size:1.02rem;line-height:1.25;margin:0 0 .35rem}

.nr-store-status__week{display:grid;gap:.3rem}
.nr-store-status__day{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.8rem;color:var(--nr-mute);
}
.nr-store-status__day span:last-child{font-family:var(--nr-mono);font-size:.76rem}
.nr-store-status__day.is-today{color:var(--nr-paper);font-weight:650}
.nr-store-status__day.is-today span:last-child{color:var(--nr-rage-hi)}

/* ---- 15.7 Stack builder. The theme template wraps a <fieldset> in
        `.nr-stack__step`; the shortcode puts the class ON the fieldset, so
        `.nr-stack__step fieldset` (06-pages.css) never matched it. Qualifying
        by element styles the shortcode's shape without touching the theme's. ---- */
fieldset.nr-stack__step{border:0;margin:0;padding:0;min-width:0}
fieldset.nr-stack__step > legend{
  padding:0;margin-bottom:.55rem;
  font-family:var(--nr-mono);font-size:var(--nr-fs-10_56);letter-spacing:.14em;
  text-transform:uppercase;color:var(--nr-mute-2);font-weight:700;
}

/* ---- 15.8 Shop by goal / brand wall. Both grids were entirely unstyled: the
        plugin emitted them, nothing in the theme had ever painted them. ---- */
.nr-goal-grid,
.nr-brand-wall{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem;
}
.nr-goal-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr))}
.nr-brand-wall{grid-template-columns:repeat(auto-fill,minmax(min(100%,164px),1fr))}

.nr-goal-grid__item,
.nr-brand-wall__item{
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  background:var(--nr-ink-3);overflow:hidden;
  transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease);
}
.nr-goal-grid__item:hover,
.nr-brand-wall__item:hover{border-color:var(--nr-line-2);background:var(--nr-ink-4)}

.nr-goal-grid__item > a,
.nr-brand-wall__item > a{
  display:flex;flex-direction:column;gap:.28rem;
  padding:.95rem 1rem;height:100%;
}

.nr-goal-grid__name,
.nr-brand-wall__name{
  font-size:.92rem;font-weight:720;letter-spacing:-.022em;
  line-height:1.25;color:var(--nr-paper);
}
.nr-goal-grid__tagline,
.nr-brand-wall__tagline{font-size:.78rem;color:var(--nr-mute);line-height:1.45}
.nr-goal-grid__count,
.nr-brand-wall__count{
  margin-top:auto;padding-top:.5rem;
  font-family:var(--nr-mono);font-size:var(--nr-fs-10_24);letter-spacing:.13em;
  text-transform:uppercase;color:var(--nr-mute-2);font-weight:700;
}

/* ---- 15.9 Comparison rows. NR_Compare emits one modifier per row key —
        price, size, servings, per_serving, days_supply, availability, brand,
        goals, ingredients — and not one of them had a rule. (The existing
        `.nr-compare__row--cps` in §10 matches no key the engine produces.) ---- */
.nr-compare__row--price td,
.nr-compare__row--size td,
.nr-compare__row--servings td,
.nr-compare__row--per_serving td,
.nr-compare__row--days_supply td{
  font-family:var(--nr-mono);font-size:.8rem;font-variant-numeric:tabular-nums;
}
.nr-compare__row--price td{
  font-size:.92rem;font-weight:780;letter-spacing:-.02em;color:var(--nr-paper);
}
.nr-compare__row--per_serving td{color:var(--nr-rage-hi);font-weight:700}
.nr-compare__row--per_serving .nr-compare__best{font-size:.84rem}
.nr-compare__row--availability td{font-weight:650}
.nr-compare__row--brand td,
.nr-compare__row--goals td{color:var(--nr-mute)}
.nr-compare__row--ingredients td{color:var(--nr-mute);font-size:.78rem;line-height:1.45}
/* How to take it. Prose, not a figure, and there is no winner — two scoops a
   day is not better or worse than one, it is just how the product works — so
   it gets no highlight and no tabular numerals. */
.nr-compare__row--dose td{color:var(--nr-paper);font-size:.8rem;line-height:1.45}

/* --------------------------------------------------------------------------
   16. The manufacturer's label — NR_Label + template-parts/product/label.php
   
       Printed verbatim from the tub. Numbers are tabular so the columns line
       up down the page, and an unstated cell renders as an em dash rather
       than as whitespace, so "the label does not say" reads differently from
       "the column slipped".
   -------------------------------------------------------------------------- */
.nr-label{display:flex;flex-direction:column;gap:1.1rem}

/* certification marks */
.nr-label__marks{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.nr-label__mark{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_92);letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;
  padding:.3rem .55rem;border-radius:4px;
  border:1px solid rgba(140,255,62,.32);
  background:transparent;color:var(--nr-rage);
}
.nr-label__mark--halal,
.nr-label__mark--kosher,
.nr-label__mark--banned-substance,
.nr-label__mark--informed-sport{
  border-color:var(--nr-line-2);background:var(--nr-ink-3);color:var(--nr-mute);
}

/* serving strip */
.nr-label__serving{
  display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;margin:0;
  padding:.7rem .85rem;border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);
  background:var(--nr-ink-3);font-size:.82rem;
}
.nr-label__servingpart{display:flex;align-items:baseline;gap:.45rem}
.nr-label__servinglabel{color:var(--nr-mute-2);font-size:.74rem}
.nr-label__serving strong{
  font-family:var(--nr-mono);font-weight:750;color:var(--nr-paper);
  font-variant-numeric:tabular-nums;
}

/* the table */
.nr-label__title{
  font-size:.78rem;font-weight:730;letter-spacing:.01em;margin:0 0 .5rem;
  display:flex;align-items:center;gap:.4rem;color:var(--nr-paper);
}
.nr-label{min-width:0}
.nr-label__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 .2rem;min-width:0;max-width:100%}
.nr-label__table{min-width:min(100%,340px)}
.nr-label__table thead th{white-space:nowrap}
.nr-label__table th[scope="row"]{
  font-weight:600;color:rgba(244,246,243,.88);text-align:left;
  padding-right:.9rem;
}
.nr-label__num{
  text-align:right;white-space:nowrap;
  font-family:var(--nr-mono);font-variant-numeric:tabular-nums;
  font-size:.76rem;
}
.nr-label__table thead .nr-label__num{font-family:var(--nr-mono);font-size:var(--nr-fs-9_92)}
.nr-label__sub th[scope="row"]{
  padding-left:1.1rem;font-weight:500;color:var(--nr-mute);font-style:italic;
}
.nr-label__sub .nr-label__num{color:var(--nr-mute)}

/* footnotes */
.nr-label__notes{
  list-style:none;margin:.15rem 0 0;padding:0;
  font-size:.7rem;line-height:1.5;color:var(--nr-mute-2);
}
.nr-label__notes li{margin:0 0 .2rem}

/* prose blocks */
.nr-label__block{
  padding-top:.9rem;border-top:1px solid var(--nr-line);
}
.nr-label__prose{margin:0;font-size:.82rem;line-height:1.6;color:var(--nr-mute)}
.nr-label__block--allergen{
  border-top:0;padding:.85rem .9rem;border-radius:var(--nr-r-sm);
  border:1px solid rgba(240,180,60,.28);background:rgba(240,180,60,.07);
}
.nr-label__block--allergen .nr-label__title{color:var(--nr-warn)}
.nr-label__block--allergen .nr-label__prose{color:rgba(244,246,243,.82)}
.nr-label__block--warning{
  border-top:0;padding:.85rem .9rem;border-radius:var(--nr-r-sm);
  border:1px solid rgba(226,90,80,.3);background:rgba(226,90,80,.07);
}
.nr-label__block--warning .nr-label__title{color:var(--nr-bad)}

.nr-label__source{
  margin:0;padding-top:.75rem;border-top:1px solid var(--nr-line);
  font-size:var(--nr-fs-10_88);line-height:1.5;color:var(--nr-mute-2);
}

@media (max-width:600px){
  .nr-label__num{font-size:.72rem}
  .nr-label__table th[scope="row"]{font-size:.76rem}
}

/* --------------------------------------------------------------------------
   17. Action rows on store cards
   
       Every button in one of these rows sized itself to its own text, so a
       card read "WhatsApp | 066 305 8851 | Your branch" at three different
       widths, and on the locator the WhatsApp button dropped to its own line
       on its own. They now share the row equally and wrap in whole rows.
   -------------------------------------------------------------------------- */
.nr-store-card__actions,
.nr-storecard__actions,
.nr-locrow__actions{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;
}
/* The plugin wraps WhatsApp + phone in a span. display:contents lifts them
   into the flex row so all three buttons in the row size against each other
   instead of two of them sharing one slot. */
.nr-store-card__actions > .nr-store-contact{display:contents}

.nr-store-card__actions .nr-btn,
.nr-store-card__actions > .nr-btn,
.nr-storecard__actions > .nr-btn,
.nr-locrow__actions > .nr-btn{
  flex:1 1 0;
  min-width:7.5rem;
  white-space:nowrap;
  /* Equal height regardless of whether a label wraps to two lines. */
  min-height:2.5rem;
}

/* A phone number, wherever it appears — the store card, the full status panel,
   a branch page. Tabular figures so a column of numbers lines up. */
.nr-btn--tel{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* In an action row it is the widest label and the least useful thing to
   stretch, so let it size to its content and give the rest the slack. */
.nr-store-card__actions .nr-btn--tel,
.nr-store-card__actions > .nr-btn--tel,
.nr-storecard__actions > .nr-btn--tel,
.nr-locrow__actions > .nr-btn--tel{flex:0 1 auto}

@media (max-width:420px){
  .nr-store-card__actions .nr-btn,
  .nr-storecard__actions > .nr-btn,
  .nr-locrow__actions > .nr-btn{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   18. The store map
   
       Five labels drawn at once overlapped each other and the note box, which
       is what made the map unreadable. The pin is always visible; its label
       appears on hover, on keyboard focus, and for the branch you are already
       on. The note is smaller, out of the corner the pins use, and cannot
       swallow a click meant for a pin.
   -------------------------------------------------------------------------- */
.nr-map__label{
  opacity:0;transform:translateY(3px);pointer-events:none;
  transition:opacity var(--nr-fast) var(--nr-ease),transform var(--nr-fast) var(--nr-ease);
}
.nr-map__pin:hover .nr-map__label,
.nr-map__pin:focus-visible .nr-map__label,
.nr-map__pin.is-active .nr-map__label{opacity:1;transform:translateY(0)}

/* A hovered pin must draw above its neighbours, label and all. */
.nr-map__pin:hover,
.nr-map__pin:focus-visible{z-index:4}
.nr-map__pin.is-active{z-index:3}

/* An unverified pin should look like one. */
.nr-map__pin.is-approx .nr-map__drop{opacity:.72}

.nr-map__note{
  max-width:min(15rem,42%);
  padding:.55rem .7rem;
  pointer-events:none;
  background:rgba(7,18,11,.82);
  backdrop-filter:blur(4px);
}
.nr-map__note-title{font-size:.7rem}
.nr-map__note-text{font-size:var(--nr-fs-10_56);line-height:1.45}

@media (max-width:700px){
  .nr-map__note{display:none}
}

/* --------------------------------------------------------------------------
   WOOCOMMERCE CART & CHECKOUT BLOCKS

   WooCommerce now creates its Cart and Checkout pages with BLOCKS rather than
   the [woocommerce_cart] / [woocommerce_checkout] shortcodes. A block checkout
   renders none of this theme's templates, so a site whose pages were made that
   way gets stock WooCommerce styling — white panels on a black site, and
   placeholder text at the blocks' default grey, which on white is legible and
   on a dark page inside a white box is a light grey on white. Reported as
   "you can't read what to type", and correctly.

   READ THIS BEFORE RELYING ON WHAT FOLLOWS. The bigger problem with a block
   checkout is not colour: `woocommerce_checkout_before_customer_details` is a
   CLASSIC checkout hook, and the block checkout never fires it. That is the
   hook this shop's branch collection, delivery promise and store picker hang
   off — so on a block checkout the whole collect-from-a-branch flow is simply
   absent, not unstyled. The fix for that is to use the shortcode pages, and
   these rules exist only so a site that has not switched yet is readable
   rather than broken-looking.

   Scoped to the block classes, so nothing here can reach the theme's own
   checkout.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart{
  --wc-blocks-color-white:var(--nr-ink-2);
  color:var(--nr-paper);
}

.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-checkout__form,
.wc-block-cart__main,
.wc-block-cart__sidebar{background:transparent;color:var(--nr-paper)}

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__title{color:var(--nr-paper)}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content{color:var(--nr-mute)}

/* Fields. The whole complaint: a white box with grey-on-white placeholder
   text. Everything here is one dark surface with the site's own borders. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-select .wc-block-components-select__select{
  background:var(--nr-ink) !important;
  color:var(--nr-paper) !important;
  border:1px solid var(--nr-line-2) !important;
  border-radius:10px !important;
  min-height:52px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus{
  border-color:var(--nr-rage) !important;
  outline:none;
  box-shadow:0 0 0 3px var(--nr-rage-dim);
}

/* The label that floats inside the field. At the blocks' default it was the
   same weight as the value, so an empty field read as a filled one. */
.wc-block-components-text-input label,
.wc-block-components-select label{color:var(--nr-mute) !important}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label{color:var(--nr-rage-hi) !important}
.wc-block-components-text-input input::placeholder{color:var(--nr-mute-2);opacity:1}

.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input{accent-color:var(--nr-rage)}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-address-form label{color:var(--nr-paper)}

/* Panels: order summary, shipping options, coupon. */
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-components-shipping-rates-control,
.wc-block-components-radio-control-accordion-option{
  background:var(--nr-ink-3);
  border-color:var(--nr-line) !important;
  color:var(--nr-paper);
}

.wc-block-components-totals-item__label{color:var(--nr-mute)}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--nr-paper);font-weight:750}

.wc-block-components-product-name{color:var(--nr-paper) !important;text-decoration:none}
.wc-block-components-product-metadata{color:var(--nr-mute)}

/* The one place green belongs on this page: the button that completes the
   order. Everything else stays graphite. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:var(--nr-rage) !important;
  color:var(--nr-on-rage) !important;
  border:0 !important;
  border-radius:10px !important;
  font-weight:800;letter-spacing:.02em;min-height:52px;
}

.wc-block-components-button:not(.wc-block-components-checkout-place-order-button){
  color:var(--nr-paper);
}

.wc-block-components-notice-banner{
  background:var(--nr-ink-3);color:var(--nr-paper);border-color:var(--nr-line-2);
}

/* Anything the blocks draw as a hairline. */
.wc-block-components-checkout-step,
.wc-block-cart-items,
.wc-block-cart-item__wrap,
.wc-block-components-totals-wrapper{border-color:var(--nr-line) !important}

/* --------------------------------------------------------------------------
   9. Order details — WooCommerce's own markup on thank-you and view-order
   --------------------------------------------------------------------------

   `woocommerce_thankyou` and `woocommerce_view_order` print order-details.php
   from the plugin, and there is no theme override for it, so it arrived as a
   bare `shop_table`: white text, no borders, headings the same weight as the
   rows, and the address block running full-bleed under it. Overriding the
   template would mean owning WooCommerce's row markup forever. Styling the
   classes it already emits costs one block and stays true whatever version
   of WooCommerce is installed.
   -------------------------------------------------------------------------- */
.woocommerce-order-details,
.woocommerce-customer-details{margin:2rem 0 0}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--nr-mute-2);font-weight:700;
  margin:0 0 .7rem;
}

.woocommerce-table--order-details{
  width:100%;border-collapse:collapse;
  font-size:var(--nr-t-sm);
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  overflow:hidden;
  background:var(--nr-ink-3);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td{
  padding:.72rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--nr-line);
  color:var(--nr-paper);
}

.woocommerce-table--order-details thead th{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--nr-mute-2);font-weight:700;
  background:var(--nr-ink-4);
}

.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-table--order-details tfoot td{text-align:right;white-space:nowrap}

.woocommerce-table--order-details tfoot th{
  font-weight:650;color:var(--nr-mute);
}

/* The last foot row is the order total — it earns the emphasis. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td{
  border-bottom:0;
  font-size:var(--nr-t-body);font-weight:800;
  color:var(--nr-paper);
}

.woocommerce-table--order-details tbody tr:last-child td{border-bottom-width:2px}

.woocommerce-table--order-details a{color:var(--nr-paper);text-decoration:none;font-weight:650}
.woocommerce-table--order-details a:hover{color:var(--nr-rage-hi)}

.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details dl.variation{
  margin:.35rem 0 0;padding:0;list-style:none;
  font-size:var(--nr-t-micro);color:var(--nr-mute);
}
.woocommerce-table--order-details .wc-item-meta li{margin:0}
.woocommerce-table--order-details .wc-item-meta p,
.woocommerce-table--order-details dl.variation dd{margin:0;display:inline}

.woocommerce-table--order-details .product-quantity{
  font-family:var(--nr-mono);color:var(--nr-mute-2);font-weight:700;
}

.woocommerce-customer-details address{
  font-style:normal;line-height:1.6;
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  padding:.9rem 1rem;background:var(--nr-ink-3);
  font-size:var(--nr-t-sm);color:var(--nr-paper);
}

.woocommerce-customer-details .woocommerce-columns{
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.woocommerce-customer-details .woocommerce-columns .woocommerce-column{min-width:0}

/* The summary the plugin prints sits inside the same rhythm. */
.nr-thanks__details .nr-order-fulfilment{margin-top:2rem}

/*
 * Phones read this table more than desktops do. Below 600px the two-column
 * product/total pair still fits, but the padding and the nowrap on the total
 * were fighting each other on a 360px screen.
 */
@media (max-width:600px){
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td{padding:.6rem .6rem}
  .woocommerce-table--order-details{font-size:var(--nr-t-xs)}
}

/* --------------------------------------------------------------------------
   10. Delivery speed — standard / overnight, asked at step one
   -------------------------------------------------------------------------- */
.nr-checkout-speed[hidden]{display:none}
.nr-speed{margin:1rem 0 0}
.nr-speed__head{
  font-family:var(--nr-mono);font-size:var(--nr-t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--nr-mute-2);font-weight:700;margin:0 0 .55rem;
}
.nr-speed__choice{display:grid;gap:.55rem}
.nr-speed__option{
  display:flex;align-items:center;gap:.75rem;
  padding:.8rem .9rem;min-height:52px;
  border:1px solid var(--nr-line);border-radius:var(--nr-r);
  background:var(--nr-ink-3);cursor:pointer;
}
.nr-speed__option:hover{border-color:var(--nr-line-2)}
.nr-speed__option.is-selected{
  border-color:var(--nr-rage);
  box-shadow:inset 0 0 0 1px var(--nr-rage);
}
.nr-speed__option input[type="radio"]{
  flex:0 0 auto;width:20px;height:20px;min-height:0;margin:0;accent-color:var(--nr-rage);
}
.nr-speed__body{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
}
.nr-speed__name{
  font-size:var(--nr-t-sm);font-weight:650;color:var(--nr-paper);
  min-width:0;
}
.nr-speed__cost{
  font-family:var(--nr-mono);font-size:var(--nr-t-sm);font-weight:800;
  color:var(--nr-paper);white-space:nowrap;
}

@media (max-width:480px){
  .nr-speed__body{flex-direction:column;align-items:flex-start;gap:.15rem}
}