/* NUTRITION RAGE — 05 WOO — product cards, loops, filters, PDP, cart, checkout, account.
   03-components.css already styles cards, pills, buttons, tables, forms and the
   placeholder frame; nothing here repeats them. Shared looks are declared once
   as selector groups, which is the only way this file stays inside budget. */

/* ---- shared looks ---- */
/* mono, tracked, uppercase micro-labels */
.nr-pc__brand,.nr-buybox__eyebrow,.nr-buybox__label,.nr-infocard__label,.nr-cmp tbody th{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);letter-spacing:.14em;text-transform:uppercase;
  color:var(--nr-mute-2);font-weight:700;margin-bottom:7px;
}
/* raised panel */
.nr-osum,.nr-infocard,.nr-ordrow,.nr-storepick__row,.nr-pricebox{
  border:1px solid var(--nr-line);border-radius:12px;background:var(--nr-ink-3);
}
/* green-tinted state */
.nr-ordrow--live,.nr-storepick__row.is-current,.nr-pay__row--pis,.nr-pay__explain,.nr-fulfil__opt.is-selected{
  background:var(--nr-ink-4);
}
/* amber state */
.nr-warnpanel,.nr-countdown{
  border:1px solid rgba(240,200,126,.26);background:rgba(240,200,126,.08);color:var(--nr-warn);
}
/* small image wells */
.nr-osum__thumb,.nr-gal__thumb,.nr-cmp__thumb{
  border:1px solid var(--nr-line);border-radius:8px;background:var(--nr-ink-3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;
}
/* height:auto on a square thumb leaves a portrait image floating in a band
   of empty box. Filling and containing keeps the tub centred and as large
   as the frame allows, whatever shape the photograph is. */
.nr-osum__thumb img,.nr-gal__thumb img,.nr-cmp__thumb img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}
.nr-osum__thumb svg,.nr-cmp__thumb svg{width:100%;height:auto;opacity:.5}
/* custom radios */
.nr-fulfil__radio,.nr-pay__radio{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;min-height:0;padding:0;flex-shrink:0;margin-top:2px;
  border:1.5px solid var(--nr-line-2);border-radius:50%;background:transparent;
}
.nr-fulfil__radio:checked,.nr-pay__radio:checked{
  border-color:var(--nr-rage);background:radial-gradient(circle,var(--nr-rage) 45%,transparent 48%);
}
/* button rows */
.nr-buybox__secondary,.nr-ordrow__actions,.nr-thanks__actions,.nr-cart__actions,.nr-cart__coupon{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}

/* ---- product card ---- */
.nr-pc{position:relative}
.nr-pc__media{display:flex;position:relative}
.nr-pc__brand{margin-bottom:5px}
.nr-pc__name{font-size:12.5px;font-weight:650;line-height:1.3;margin-bottom:8px;flex:1}
.nr-pc__name a{color:var(--nr-paper)}
.nr-pc__name a:hover{color:var(--nr-rage-hi)}
.nr-pc__price{display:flex;align-items:baseline;gap:7px;margin-bottom:5px;font-size:16px;font-weight:800;letter-spacing:-.03em}
.nr-pc__price del{font-size:11px;color:var(--nr-mute-2);font-weight:600}
.nr-pc__price ins,.nr-price ins{text-decoration:none}
.nr-pc__cps,.nr-cps{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-rage-hi);font-weight:700;margin-bottom:9px;display:block}
.nr-cps__servings{font-style:normal;color:var(--nr-mute-2);font-weight:600}
.nr-pc__stock,.nr-stock{display:flex;align-items:center;gap:6px;font-size:var(--nr-fs-10_5);color:var(--nr-mute);margin-bottom:9px}
.nr-stock--warn{color:var(--nr-warn)}
.nr-stock--bad{color:var(--nr-bad)}
.nr-pc__add{margin-top:auto}
.nr-tub{display:block}
.nr-thumb{width:100%;height:auto;display:block;border-radius:var(--nr-r-xs)}

/* ---- archive ---- */
.nr-woo{padding-block:clamp(20px,4vw,40px)}
.nr-shop__main,.nr-pdp__buy,.nr-pdp__media,.nr-checkout__main,.nr-cartpage__lines{min-width:0}
.nr-filters__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.nr-filters__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:730}
.nr-filters__clear{margin-left:auto;font-size:11px;color:var(--nr-mute-2)}
.nr-filters.is-busy{opacity:.55;pointer-events:none}
.nr-filter{border-bottom:1px solid var(--nr-line);padding:13px 0}
.nr-filter:last-child{border-bottom:0}
.nr-filter__title{font-size:12px;font-weight:730;margin-bottom:8px}
.nr-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.nr-toolbar__count{font-size:12.5px;color:var(--nr-mute)}
.nr-toolbar__sort{margin-left:auto;display:flex;align-items:center;gap:7px;border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);padding:2px 10px;color:var(--nr-mute)}
.nr-toolbar__sort select,.nr-select{border:0;background:transparent;padding:6px 22px 6px 0;min-height:34px;font-size:11.5px;color:var(--nr-paper);width:auto;background-position:right 2px center}

/* ---- PDP ---- */
.nr-pdp{padding-block:8px clamp(24px,4vw,44px)}
.nr-pdp__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,34px);align-items:start}
.nr-pdp__title{font-size:clamp(21px,3vw,28px);font-weight:780;letter-spacing:-.035em;line-height:1.12;margin-bottom:9px}
/* The PDP stage is the single largest product moment on the site. It had
   26px of padding and a 62%-wide image inside it, so the tub occupied a
   little over a third of the area a customer is looking straight at. */
.nr-gal__stage{aspect-ratio:1/1;border:1px solid var(--nr-line);border-radius:var(--nr-r);padding:0;position:relative;overflow:hidden}
.nr-gal__img{width:100%;height:100%;object-fit:contain;object-position:center;padding:5%;display:block}
.nr-gal__stage>svg{width:44%;height:auto;opacity:.5}
.nr-gal__stage.is-spinning{cursor:ew-resize}
.nr-gal__spin{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);background:rgba(7,18,11,.82);border:1px solid var(--nr-line-2);border-radius:20px;padding:6px 11px;color:var(--nr-paper);min-height:32px}
.nr-gal__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:9px}
.nr-gal__thumb{aspect-ratio:1/1}
.nr-gal__thumb.is-active{border-color:var(--nr-rage)}
.nr-gal__thumb--video{flex-direction:column;gap:3px;font-family:var(--nr-mono);font-size:var(--nr-fs-8_5);color:var(--nr-rage-hi);font-weight:700}
.nr-buybox__rating{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:12px;color:var(--nr-mute)}
.nr-buybox__secondary{margin:10px 0 6px}
.nr-buybox__secondary>*{flex:1;justify-content:center;min-width:118px}
.nr-pricebox{padding:15px;margin-bottom:14px}
.nr-pricebox__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nr-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:30px;font-weight:820;letter-spacing:-.04em}
.nr-price del{color:var(--nr-mute-2);font-size:14px;font-weight:600}
.nr-price__save{background:rgba(240,155,132,.16);color:var(--nr-bad);font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:800;padding:3px 7px;border-radius:4px;text-transform:uppercase}
.nr-pricebox__cps{font-family:var(--nr-mono);font-size:12.5px;color:var(--nr-rage-hi);font-weight:750}

/* how to take it — dose, directly under the price
   Instruction, not signal, so it is graphite and paper. The green here is
   one 2px rule at the leading edge; the accent marks that this is live
   product data and stops there. */
.nr-dose{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--nr-line);border-left:2px solid var(--nr-rage);
  border-radius:10px;background:var(--nr-ink-3);
  padding:11px 13px;margin-bottom:14px;
}
.nr-dose__icon{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--nr-mute);margin-top:1px;
}
.nr-dose__icon svg{width:15px;height:15px;display:block}
.nr-dose__body{min-width:0}
.nr-dose__label{
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nr-mute-2);
  margin:0 0 3px;
}
.nr-dose__text{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--nr-paper);
  /* Owner-typed text. It wraps, it keeps its line breaks, and it never
     stretches the buy box grid — see minmax(0,1fr) on .nr-buybox. */
  white-space:pre-line;overflow-wrap:anywhere;
}

/* size selector — every size carries its own per-serving cost */
.nr-sizes{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.nr-size{border:1px solid var(--nr-line);border-radius:9px;padding:8px 12px;text-align:center;min-width:82px;min-height:44px;background:transparent;color:var(--nr-paper);transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease)}
.nr-size.is-active{border-color:var(--nr-rage);background:var(--nr-ink-4)}
.nr-size.is-out{opacity:.45}
.nr-size b{display:block;font-size:12.5px;font-weight:730}
.nr-size__cps{font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);color:var(--nr-mute-2);display:block;margin-top:2px}
.nr-size.is-active .nr-size__cps{color:var(--nr-rage-hi)}
.nr-size__flag{display:block;font-size:var(--nr-fs-9_0);color:var(--nr-rage-hi);font-style:normal;margin-top:2px}

/* fulfilment block */
.nr-fulfil{border:1px solid rgba(140,255,62,.32);border-radius:12px;overflow:hidden;margin:0 0 14px;padding:0}
.nr-fulfil__opt{padding:13px 15px;display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--nr-line);cursor:pointer}
.nr-fulfil__opt:last-child{border-bottom:0}
.nr-fulfil__body{flex:1;min-width:0}
.nr-fulfil__name{display:block;font-size:13px;font-weight:720;margin-bottom:3px}
.nr-fulfil__line{font-size:11.5px;color:var(--nr-mute);display:block;line-height:1.45}
.nr-fulfil__line.is-ok{color:var(--nr-rage-hi);font-weight:600}
.nr-fulfil__line.is-bad{color:var(--nr-bad)}
.nr-fulfil__line strong{color:var(--nr-paper)}
.nr-fulfil__price{font-family:var(--nr-mono);font-size:12px;font-weight:700;flex-shrink:0}
.nr-cutoff{margin-bottom:14px}

/* quantity and add to cart */
.nr-atc,.nr-atc__row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.nr-atc__attributes{flex:1 0 100%}
/* Hidden only once pdp.js has wired the size buttons to these selects — the
   class is added by script, never by the template. The selects stay in the
   DOM and stay the form's real value; they are just not asked for twice.
   Kept reachable to a screen reader for the same reason. */
.nr-atc__attributes.is-nr-superseded{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.nr-atc__btn{flex:1;justify-content:center;min-width:180px;gap:10px}
.nr-atc__price{font-family:var(--nr-mono);font-weight:800}
.nr-qty{display:inline-flex;align-items:center;border:1px solid var(--nr-line-2);border-radius:9px;overflow:hidden;flex-shrink:0}
.nr-qty__btn{width:40px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--nr-mute)}
.nr-qty__input{width:48px;min-height:48px;text-align:center;border:0;background:transparent;font-weight:700;font-size:13px;padding:0;-moz-appearance:textfield}
.nr-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* accordion */
.nr-acc{border-top:1px solid var(--nr-line);margin-top:16px}
.nr-acc__item{border-bottom:1px solid var(--nr-line)}
.nr-acc__head{padding:13px 0;font-size:12.5px;font-weight:650;display:flex;align-items:center;cursor:pointer;list-style:none;min-height:46px}
.nr-acc__head::-webkit-details-marker{display:none}
.nr-acc__head::after{content:"+";margin-left:auto;color:var(--nr-mute-2);font-size:15px}
.nr-acc__item[open] .nr-acc__head::after{content:"−"}
.nr-acc__body{padding:0 0 16px;font-size:13px;color:rgba(244,246,243,.78);line-height:1.6}

/* compare table */
.nr-cmp thead th{text-align:left;vertical-align:bottom;font-size:12px;font-weight:680;line-height:1.3}
.nr-cmp__thumb{aspect-ratio:1.4/1;margin-bottom:8px}
.nr-cmp__drop{display:block;margin-top:6px;color:var(--nr-mute-2)}
.nr-cmp tbody th{width:150px;text-align:left;margin:0}

/* ---- cart ---- */
.nr-citems{list-style:none;margin:0;padding:0}
.nr-citem__step{width:22px;height:22px;border-radius:5px;border:1px solid var(--nr-line);color:var(--nr-mute);font-size:13px;line-height:1}
.nr-citem__qty{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.nr-progress{padding:14px 18px;border-bottom:1px solid var(--nr-line)}
.nr-totals__cartlink{display:flex;justify-content:center;margin-top:10px}
.nr-cart__product{display:flex;gap:12px}
.nr-cart__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.nr-cart__total{font-weight:750;text-align:right}
.nr-cart__coupon{max-width:340px}

/* --------------------------------------------------------------------------
   THE CART PAGE, ON A DESKTOP

   Reported as "this layout looks weird", and it did. Three things were wrong
   and they compounded:

     - the totals panel and Proceed to checkout were pushed below a full-height
       cross-sell advert (moved out of the sidebar in inc/woo.php);
     - the three columns were sized by content, so a long product name wrapped
       to three lines while the Quantity column sat half empty;
     - Remove sat under the stepper, so every row was two lines tall for no
       reason.

   The proportions are stated here rather than left to the browser: the
   product cell gets the room because the product name is the longest thing in
   the row, and quantity and total get exactly what they need.
   -------------------------------------------------------------------------- */
@media (min-width:681px){
  .nr-cart{table-layout:fixed;width:100%}
  .nr-cart th:nth-child(1),.nr-cart td:nth-child(1){width:auto}
  .nr-cart th:nth-child(2),.nr-cart td:nth-child(2){width:190px}
  .nr-cart th:nth-child(3),.nr-cart td:nth-child(3){width:120px}

  .nr-cart td{vertical-align:top;padding-block:16px}

  /* Quantity and Remove on one line: the stepper, then the link.

     NOT display:flex on the <td>. A table cell given display:flex stops being
     a table cell — the browser takes it out of the column layout and drops it
     onto its own line, which put Quantity underneath the product instead of
     beside it. The cell stays a cell; its CONTENTS line up. */
  .nr-cart td.nr-cart__qty{display:table-cell}
  .nr-cart__qty .quantity,
  .nr-cart__qty .nr-citem__qty{display:inline-flex}
  /* Under the stepper, not beside it. Beside it, the pair was wider than the
     column and Remove spilled into the Total column, so it read as an action
     on the price. */
  .nr-cart__qty .nr-citem__remove{display:block;margin:9px 0 0}

  /* Coupon and Update cart on one line.

     `.nr-cart__actions` is a <td colspan="3">, and the same rule applies as
     above: a cell given display:flex stops being a cell. The cell stays a
     cell and its children are laid out inline instead — which is why the
     coupon box, Apply and Update cart were stacking three deep down the left
     of an otherwise empty row. */
  .nr-cart td.nr-cart__actions{display:table-cell;padding-top:18px}
  .nr-cart__actions>*{display:inline-flex;vertical-align:middle;margin-right:10px}
  .nr-cart__coupon{max-width:none;gap:8px;align-items:center}
  .nr-cart__coupon .nr-input{width:280px;min-width:0}
  .nr-cart__qty .nr-citem__remove{
    color:var(--nr-mute);text-decoration:underline;text-underline-offset:3px;
  }
  .nr-cart__qty .nr-citem__remove:hover{color:var(--nr-bad)}

  .nr-cart__total{font-size:15px;font-weight:800;padding-top:20px}
  .nr-cart__meta .nr-citem__name{font-size:14px;line-height:1.35;font-weight:730}
  .nr-cart__product .nr-citem__thumb{flex:0 0 62px;width:62px}
}

/* The suggestions, now underneath the cart where they have room to be a rail
   rather than a billboard. */
.nr-cartpage + .cross-sells,
.cross-sells{margin-top:var(--nr-s7)}
.cross-sells > h2{
  font-family:var(--nr-display);font-size:clamp(18px,2.2vw,24px);
  font-weight:780;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:var(--nr-s4);
}
.cross-sells ul.products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  list-style:none;margin:0;padding:0;
}
@media (max-width:1000px){.cross-sells ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cross-sells ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- order summary ---- */
.nr-osum{padding:16px}
.nr-osum--sticky{position:sticky;top:120px}
.nr-osum__title{font-size:14px;font-weight:750;margin-bottom:13px}
.nr-osum__line{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--nr-line);align-items:center}
.nr-osum__thumb{width:38px;height:38px;flex-shrink:0}
.nr-osum__name{flex:1;font-size:11px;line-height:1.35;font-weight:600}
.nr-osum__name em{font-style:normal;color:var(--nr-mute-2)}
.nr-osum__price{font-family:var(--nr-mono);font-size:11.5px;font-weight:750}
.nr-osum__totals{padding-top:12px}
.nr-osum .nr-collect{margin-top:14px;border-top:1px solid var(--nr-line);padding-top:13px}

/* ---- checkout ---- */
.nr-checkout__grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(20px,3vw,30px);align-items:start}
.nr-step{margin-bottom:24px}
.nr-step__head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.nr-step__n{width:23px;height:23px;border-radius:50%;flex-shrink:0;background:var(--nr-ink-4);border:1px solid var(--nr-line-2);color:var(--nr-mute);display:inline-flex;align-items:center;justify-content:center;font-family:var(--nr-mono);font-size:11px;font-weight:800}
.nr-step__title{font-size:15px;font-weight:740;letter-spacing:-.025em}
/* The summary beside a finished step: what you chose, then what it costs you.
   The branch name is plain white because it is the answer; the ready time is
   green because it is the consequence. Run together they read as one word —
   "WITBANKREADY IN 2 HOURS" — which is what the separator is for. */
.nr-step__done{margin-left:auto;font-size:11px;font-weight:650;text-align:right;min-width:0}
.nr-step__donename{color:var(--nr-paper)}
.nr-step__donemeta{color:var(--nr-rage-hi)}
.nr-step__donemeta::before{content:" · ";color:var(--nr-mute-2)}
@media (max-width:600px){
  .nr-step__done{display:block;width:100%;margin:6px 0 0;text-align:left}
  .nr-step__donemeta{display:block}
  .nr-step__donemeta::before{content:none}
}
.nr-step__body>h3{font-size:13px;font-weight:730;margin-bottom:10px}
/* The bullets. `list-style:none` on the <ul> was there and was not enough:
   WooCommerce's own stylesheet re-asserts a marker on list items inside its
   containers, so a disc sat outside every branch card. Killed on the item and
   on its ::marker, which is the only thing that stops it in every browser. */
.nr-storepick{list-style:none;margin:0;padding:0}
.nr-storepick>li{list-style:none;margin:0;padding:0}
.nr-storepick>li::marker{content:none}
.nr-storepick>li::before{content:none}
.nr-storepick li+li{margin-top:8px}
.nr-storepick__row{width:100%;text-align:left;padding:12px 13px;transition:border-color var(--nr-fast) var(--nr-ease)}
.nr-storepick__row.is-current{border-color:var(--nr-rage)}
.nr-storepick__row .nr-pill{margin-top:7px}
.nr-fields__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.nr-fields__grid .form-row-wide{grid-column:1 / -1}
.nr-fields__title{font-size:13px;font-weight:730;margin-bottom:10px}
/* Belt and braces: a form row never inherits paragraph spacing, whichever
   element WooCommerce or a payment plugin happens to render it as. */
.nr-fields .form-row{margin-bottom:14px;margin-top:0}
.nr-fields__grid>*{align-self:start}
.nr-fields label{display:block;font-size:12px;font-weight:650;color:var(--nr-mute);margin-bottom:6px}

/* payment — pay in store is the highlighted row */
.nr-pay{list-style:none;margin:0;padding:0;border:1px solid var(--nr-line);border-radius:11px;overflow:hidden}
.nr-pay__row{padding:12px 14px;display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid var(--nr-line);flex-wrap:wrap}
.nr-pay__row:last-child{border-bottom:0}
.nr-pay__row--pis{box-shadow:inset 2px 0 0 var(--nr-rage)}
.nr-pay__label{flex:1;min-width:0;margin:0;cursor:pointer}
.nr-pay__name{font-size:12.5px;font-weight:700;display:block;margin-bottom:2px}
.nr-pay__blurb,.nr-pay__fields{font-size:11px;color:var(--nr-mute);display:block;line-height:1.45}
.nr-pay__fields{flex:1 0 100%;padding-top:8px}
.nr-pay__explain{padding:12px 14px;border-top:1px solid var(--nr-line);font-size:11.5px;color:rgba(244,246,243,.78);line-height:1.55}
.nr-payment__submit{margin-top:14px}
.nr-cofulfil{margin-bottom:12px}

/* ---- thank you ---- */
.nr-thanks{padding-block:clamp(20px,4vw,36px);max-width:940px}
.nr-thanks__tick{width:52px;height:52px;border-radius:50%;background:var(--nr-rage);color:var(--nr-on-rage);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.nr-thanks__title{font-size:clamp(26px,4vw,38px);letter-spacing:-.04em;line-height:1.05;margin-bottom:12px}
.nr-thanks__lede{font-size:15px;color:var(--nr-mute);max-width:48ch;line-height:1.6}
.nr-thanks__lede b{color:var(--nr-paper)}
.nr-thanks__cards,.nr-thanks__actions{margin-top:18px}
.nr-thanks__details{margin-top:26px}
.nr-warnpanel{border-radius:11px;padding:15px;margin-top:18px;color:inherit}
.nr-warnpanel__title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:740;color:var(--nr-warn);margin-bottom:5px}
.nr-warnpanel__text{font-size:12px;color:rgba(244,246,243,.72);line-height:1.55}
.nr-infocard{padding:14px}
.nr-infocard__value{font-size:13px;font-weight:730;margin-bottom:3px}
.nr-infocard__value--big{font-size:19px;font-weight:820;letter-spacing:-.03em}
.nr-infocard__text{font-size:11px;color:var(--nr-mute);line-height:1.5}
.nr-infocard .nr-pill,.nr-countdown{margin-top:9px}
.nr-countdown{font-family:var(--nr-mono);font-size:11px;border-radius:7px;padding:7px 11px;display:inline-block}

/* ---- account ---- */
.nr-account{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start}
.nr-account__nav{border-right:1px solid var(--nr-line);padding:18px 0}
.nr-account__nav ul{list-style:none;margin:0;padding:0}
.nr-account__nav a{display:flex;align-items:center;gap:9px;padding:10px 18px;font-size:12.5px;color:var(--nr-mute);font-weight:600;min-height:44px;text-decoration:none}
/* Belt and braces against the prose link style, whether or not the anchor
   carries its class. */
.nr-entry .nr-account__nav a{text-decoration:none;color:var(--nr-mute)}
.nr-entry .nr-account__nav .is-active a{color:var(--nr-paper)}
.nr-account__nav .is-active a{color:var(--nr-paper);box-shadow:inset 2px 0 0 var(--nr-rage);background:var(--nr-ink-4)}
.nr-account__body{padding:20px 0 20px 22px;min-width:0}
.nr-dash__hello{font-size:21px;font-weight:780;letter-spacing:-.03em;margin-bottom:4px}
.nr-dash__sub{font-size:12.5px;color:var(--nr-mute);margin-bottom:20px}
.nr-ordrow{padding:14px;margin-bottom:11px;border-radius:11px}
.nr-ordrow--live{border-color:rgba(140,255,62,.32)}
.nr-ordrow__top{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap;font-size:11.5px}
.nr-ordrow__top b{font-family:var(--nr-mono);font-weight:750}
.nr-ordrow__date{font-size:11px;color:var(--nr-mute-2)}
.nr-ordrow__line{font-size:11.5px;color:var(--nr-mute);margin-bottom:9px}
.nr-ordrow__line b,.nr-thanks__lede b{color:var(--nr-paper)}
.nr-ordrow__actions{margin-top:11px}
.nr-replen__name{font-family:var(--nr-sans);font-size:13px;font-weight:700}
.nr-replen .nr-progress__track{margin-bottom:11px}
.nr-progress__fill--warn{background:linear-gradient(90deg,var(--nr-rage-lo),var(--nr-warn))}

/* ---- notices ---- */
.nr-notice{border:1px solid var(--nr-line-2);border-radius:var(--nr-r-sm);padding:12px 14px;margin-bottom:16px;background:var(--nr-ink-3)}
.nr-notice__text{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5}
.nr-notice__text svg{flex-shrink:0;margin-top:2px}
.nr-notice--ok{border-color:var(--nr-rage);background:var(--nr-ink-4);color:var(--nr-paper)}
.nr-notice--info{border-color:rgba(240,200,126,.28);background:rgba(240,200,126,.08);color:var(--nr-warn)}
.nr-notice--error{border-color:rgba(240,155,132,.34);background:rgba(240,155,132,.09);color:var(--nr-bad)}
.nr-notice a{color:inherit;text-decoration:underline}

@media(max-width:900px){.nr-pdp__grid,.nr-checkout__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .nr-account{grid-template-columns:minmax(0,1fr)}
  .nr-account__nav{border-right:0;border-bottom:1px solid var(--nr-line)}
  /* TILES, NOT TABS.
     Seven items will not sit in one row on a phone. Scrolled, "Reservations"
     was cut off mid-word with nothing to say the row moved. Wrapped, they made
     three ragged rows of underlined green links with one boxed item among them
     — every item a different width, nothing lining up, and only the current
     one looking like a control at all.
     Two even columns instead: same width, same height, every one obviously a
     thing you press. The order is WooCommerce's, so a new endpoint drops into
     the grid without a layout decision. */
  .nr-account__nav{border-bottom:0;padding:0 0 var(--nr-s4)}
  .nr-account__nav ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  /* `.nr-account__nav ul a`, not `.nr-account__nav a`: the touch block at the
     end of 09-system.css sets min-height:44px on the latter, and 09 loads
     after 05, so an equal-specificity rule here loses and every tile came out
     content-height instead. */
  .nr-account__nav ul li{display:flex;margin:0}
  .nr-account__nav ul a{
    width:100%;min-height:54px;padding:12px 14px;gap:10px;
    border:1px solid var(--nr-line);border-radius:12px;
    background:var(--nr-ink-3);color:var(--nr-paper);
    font-size:13px;font-weight:680;text-decoration:none;
  }
  .nr-account__nav a:hover{border-color:var(--nr-line-2)}
  .nr-account__nav svg{flex:none;color:var(--nr-mute)}
  /* The current tile is filled, not underlined. On a grid of seven, a 2px
     underline is not enough to find at a glance. */
  .nr-account__nav .is-active a{
    background:var(--nr-ink-5);border-color:var(--nr-rage-ink);
    box-shadow:inset 2px 0 0 var(--nr-rage);color:var(--nr-paper);
  }
  .nr-account__nav .is-active svg{color:var(--nr-rage)}
  /* Log out is the one destructive item; it sits apart across the full width
     rather than being mistaken for another section. */
  .nr-account__nav li:last-child{grid-column:1 / -1}
  .nr-account__nav li:last-child a{justify-content:center;background:transparent;color:var(--nr-mute)}
  /* The sidebar's own padding made sense beside a column and is dead space
     under a grid of tiles. */
  .nr-account__body{padding:0}
  .nr-account{gap:var(--nr-s5)}
}
@media(max-width:560px){.nr-fields__grid{grid-template-columns:minmax(0,1fr)}.nr-atc__btn{min-width:0}}

/* --------------------------------------------------------------------------
   THE CART, ON A PHONE

   A cart is a table, and it should stay one: the markup is a real <table>
   with a real <form> around it, WooCommerce posts cart[key][qty] from it, and
   screen readers read it as rows and columns. None of that changes here.

   What changes is how it DRAWS below 680px. Three columns in 390px gave the
   product cell about 90px, so "Rage Creatine Monohydrate" wrapped one word
   per line, the stock line broke mid-phrase, and the Total column pushed past
   the right edge of the screen. Measured: the table, its head, every row and
   the totals panel all overflowed the viewport.

   So each ROW becomes a card. The header row is hidden — a card does not need
   column headings, it needs its own labels, and the cells already carry them.
   -------------------------------------------------------------------------- */
@media (max-width:680px){
  .nr-cart,
  .nr-cart tbody,
  .nr-cart tr,
  .nr-cart td{display:block;width:auto}

  /* Hidden from sight, kept for screen readers. */
  .nr-cart thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }

  .nr-cart tbody tr.cart_item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"product total" "qty qty";
    gap:12px 10px;align-items:start;
    padding:12px;margin-bottom:10px;
    border:1px solid var(--nr-line);border-radius:12px;background:var(--nr-ink-3);
  }

  .nr-cart tbody tr.cart_item > td{padding:0;border:0}

  /* td.nr-cart__product, not .nr-cart__product: the `.nr-cart td{display:block}`
     above is a more specific selector, so a plain class here loses to it and
     the thumbnail drops onto its own line above the name. */
  .nr-cart td.nr-cart__product{grid-area:product;display:flex;gap:11px;min-width:0}
  .nr-cart td.nr-cart__qty{grid-area:qty}
  .nr-cart td.nr-cart__total{grid-area:total}
  .nr-cart__meta{min-width:0}
  /* The product name is the longest string in the card and the one that was
     wrapping a word at a time. It gets the whole column. */
  .nr-cart__meta .nr-citem__name{font-size:13.5px;line-height:1.35}

  .nr-cart__total{
    text-align:right;white-space:nowrap;
    font-size:14px;font-weight:800;
  }

  /* Quantity and Remove sit on their own line under a rule, so the stepper
     gets a full-width touch target instead of being crushed into a column. */
  .nr-cart td.nr-cart__qty{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding-top:11px;border-top:1px solid var(--nr-line);
  }
  /* Remove was near-invisible grey against a dark card. It is a real action
     with a real consequence, so it reads like one. */
  .nr-cart__qty .nr-citem__remove{
    color:var(--nr-mute);font-size:12px;text-decoration:underline;
    text-underline-offset:3px;min-height:44px;padding-inline:4px;
  }
  .nr-cart__qty .nr-citem__remove:hover{color:var(--nr-bad)}
  .nr-cart__qty .nr-citem__qty{justify-content:flex-start}
  .nr-cart__qty .nr-citem__remove{margin:0}

  /* Coupon and Update stop being a table cell and become a stacked block. */
  .nr-cart tbody tr:not(.cart_item) > td.nr-cart__actions{
    display:grid;gap:10px;padding:0;border:0;
  }
  .nr-cart__coupon{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .nr-cart__actions .nr-btn{width:100%;justify-content:center}
  .nr-cart__coupon .nr-btn{width:auto}
}

/* --------------------------------------------------------------------------
   A cart line that is being re-totalled says so
   --------------------------------------------------------------------------

   The quantity now sends itself, and the round trip is short but not
   instant. Without this the number changes, the total does not, and for a
   beat the row reads exactly like the bug it replaced.
   -------------------------------------------------------------------------- */
.woocommerce-cart-form__cart-item.is-updating .nr-cart__total,
.nr-citem.is-updating .nr-citem__total{
  opacity:.45;
  transition:opacity .12s ease;
}
.woocommerce-cart-form__cart-item.is-updating .nr-qty,
.nr-citem.is-updating .nr-qty{
  border-color:var(--nr-rage);
}

/* A payment method that is withheld says why, rather than vanishing. */
.nr-pay__withheld{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin:.75rem 0 0;padding:.8rem .9rem;
  border:1px dashed var(--nr-line-2);border-radius:var(--nr-r);
  background:var(--nr-ink-4);
  font-size:var(--nr-t-sm);color:var(--nr-mute);
}
.nr-pay__withheld b{color:var(--nr-paper);font-weight:700}
.nr-pay__withheld span{flex:1 1 240px;min-width:0}