/* PDP FAQ comparison - NOW (live site) vs NEW (proposed), row by row.
   Used by cro-hub.html (#pdpfaq tab) and pdp-faq-stability.html.
   Live styling (current column) read off balancecoffee.co.uk/products/stability-blend, 25 Sep 2026. */
@font-face{font-family:AreaNormal;src:url("advertorial-fonts/AreaNormal-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:AreaNormal;src:url("advertorial-fonts/AreaNormal-Extrabold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:Canela;src:url("advertorial-fonts/Canela-Regular-Web.woff2") format("woff2");font-weight:400;font-display:swap}

.pdpx{--fern:#40685D;--fern-brand:#516E5A;--mist:#D1E0D7;--q:#292929;--faq:#F5F5F5;--now:#8A6A6A;--stage:520px}
.pdpx.is-mob{--stage:390px}
.pdpx *{box-sizing:border-box}

/* toolbar */
.pdpx-tools{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin:0 0 16px;font:600 13px/1.4 -apple-system,system-ui,sans-serif;color:#555}
.pdpx-tools .grp{display:inline-flex;gap:6px;align-items:center}
.pdpx-tools button{font:inherit;padding:5px 14px;border-radius:14px;border:1px solid #516E5A;background:#fff;color:#516E5A;cursor:pointer}
.pdpx-tools button[aria-pressed="true"]{background:#516E5A;color:#fff}

/* grid: two equal columns, one row per compared element */
.pdpx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.pdpx-band{position:sticky;top:0;z-index:2;padding:12px 16px;border-radius:10px 10px 0 0;color:#fff;font:700 14px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.pdpx-band.now{background:var(--now)}
.pdpx-band.new{background:var(--fern-brand)}
.pdpx-cell{background:#fff;padding:20px 16px 24px;border-left:4px solid var(--now);border-right:1px solid #D6DBD7}
.pdpx-cell.new{border-left-color:var(--fern-brand)}
.pdpx-cell.last{border-bottom:1px solid #D6DBD7;border-radius:0 0 10px 10px}
.pdpx-label{font:700 11px/1.3 -apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#777;margin:0 0 12px;padding-top:4px}
.pdpx-row-top{border-top:1px dashed #C9CFCB}
.pdpx-stage{width:100%;max-width:var(--stage);margin:0 auto;font:400 16px/1.73 AreaNormal,-apple-system,system-ui,sans-serif;color:#131313;-webkit-font-smoothing:antialiased}
.pdpx-stage a{color:inherit}
@media (max-width:899px){
  .pdpx-grid{grid-template-columns:1fr}
  .pdpx-band{position:static;border-radius:10px 10px 0 0;margin-top:16px}
  .pdpx-cell.now-last{border-bottom:1px solid #D6DBD7;border-radius:0 0 10px 10px}
  /* stacked: drop the two top bands, each cell carries its own band so NOW/NEW stays clear */
  .pdpx-band{display:none}
  .pdpx-cell{border-radius:10px;border:1px solid #D6DBD7;margin-top:14px;padding-top:0;overflow:hidden}
  .pdpx-cell::before{display:block;margin:0 -16px 14px;padding:8px 16px;color:#fff;font:700 12px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center}
  .pdpx-cell.now::before{content:"Now";background:var(--now)}
  .pdpx-cell.new::before{content:"New";background:var(--fern-brand)}
  .pdpx-row-top{border-top:1px solid #D6DBD7}
}
.nw-row span,.nw-atc .l1{white-space:nowrap}

/* ---------- NOW: live buy box ---------- */
.lv-atc{display:block;width:100%;height:60px;border:0;border-radius:100px;padding:16px 20px;background:var(--fern);color:#F5F5F5;font:600 18px/30px AreaNormal,sans-serif;letter-spacing:1px;text-transform:uppercase;box-shadow:0 4px 4px rgba(0,0,0,.25);text-align:center}
.lv-atc span{font-size:20px}
.lv-trust{display:flex;flex-direction:column;gap:8px;padding:10px 0;margin-top:6px}
.lv-trust div{display:flex;align-items:center;gap:10px}
.lv-trust img{width:25px;height:25px;flex-shrink:0}
.lv-trust p{margin:0;font-size:15px;line-height:1.4;color:#000}
.is-mob .lv-atc{height:58px;padding:14px 16px;font-size:18px}
.is-mob .lv-atc span{font-size:18px}
.is-mob .lv-trust img{width:22px;height:22px}
.is-mob .lv-trust p{font-size:13px}

/* live FAQ: grey filled, plus/minus */
.lv-faq{display:grid;gap:16px}
.lv-item{background:var(--faq);border-radius:10px;padding:14px}
.lv-q{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font:600 15px/18px AreaNormal,sans-serif;color:var(--q)}
.is-mob .lv-q{font-size:14px}
.lv-plus{position:relative;width:12px;height:12px;flex-shrink:0}
.lv-plus::before,.lv-plus::after{content:"";position:absolute;background:var(--q);transition:transform .4s ease-in-out,opacity .4s ease-in-out}
.lv-plus::before{left:0;top:5px;width:12px;height:2px}
.lv-plus::after{left:5px;top:0;width:2px;height:12px}
[aria-expanded="true"] .lv-plus::after{transform:rotate(90deg);opacity:0}
.lv-a{padding:13px 0 0;font-size:14px;line-height:21px;color:#000}
.lv-a p{margin:0 0 14px;padding-top:7px}
.lv-a p:first-child{padding-top:0}
.lv-a p:last-child{margin-bottom:0}
.lv-a a{text-decoration:underline}
.lv-a[hidden],.nw-a[hidden]{display:none}

/* ---------- NEW: Spacegoods-pattern buy box in BC colours ---------- */
.nw-ship{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;font-size:16px;line-height:1.3;color:#131313;text-align:center}
.nw-dot{position:relative;width:12px;height:12px;border-radius:50%;background:var(--fern);flex-shrink:0;box-shadow:0 0 0 6px rgba(64,104,93,.14)}
.nw-ship strong{color:var(--fern);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.nw-atc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:72px;border:0;border-radius:100px;padding:12px 20px;background:var(--fern);color:#F5F5F5;box-shadow:0 4px 4px rgba(0,0,0,.25);text-align:center}
.nw-atc .l1{font:600 18px/26px AreaNormal,sans-serif;letter-spacing:1px;text-transform:uppercase}
.nw-atc .l1 s{opacity:.7;font-weight:400;margin-left:6px}
.nw-atc .l2{display:inline-flex;align-items:center;gap:6px;font:600 13px/18px AreaNormal,sans-serif;letter-spacing:.4px;opacity:.95}
.nw-atc .l2 svg{width:15px;height:15px;flex-shrink:0}
.nw-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 12px;font-size:15px;line-height:1.3;color:#333;text-align:center}
.nw-row .sep{width:1px;height:16px;background:#bbb;flex-shrink:0}
.nw-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.nw-pay svg{width:38px;height:24px;display:block}
.is-mob .nw-ship{font-size:14px}
.is-mob .nw-atc .l1{font-size:17px}
.is-mob .nw-atc .l2{font-size:12px}
.is-mob .nw-row{font-size:13px;gap:10px}

/* NEW FAQ: outline cards, small round icon at the left of the heading */
.nw-faq{display:grid;gap:12px}
.nw-item{border:1.5px solid var(--mist);border-radius:16px;padding:16px 18px;background:#fff}
.nw-q{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;cursor:pointer;font:600 17px/1.3 AreaNormal,sans-serif;color:#161F28}
.nw-q:focus-visible,.lv-q:focus-visible{outline:2px solid var(--fern);outline-offset:4px;border-radius:4px}
.nw-ic{width:32px;height:32px;border-radius:50%;background:var(--fern);display:grid;place-items:center;flex-shrink:0}
.nw-ic svg{width:17px;height:17px}
.nw-q .t{flex:1}
.nw-chev{width:14px;height:14px;flex-shrink:0;transition:transform .3s ease}
[aria-expanded="true"] .nw-chev{transform:rotate(180deg)}
.nw-a{padding:12px 0 2px 46px;font-size:15px;line-height:1.55;color:#222}
.nw-a p{margin:0 0 12px}
.nw-a p:last-child{margin-bottom:0}
.nw-a a{color:var(--fern);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.is-mob .nw-q{font-size:15px;gap:12px}
.is-mob .nw-ic{width:28px;height:28px}
.is-mob .nw-ic svg{width:15px;height:15px}
.is-mob .nw-a{padding-left:0;font-size:14px}

/* narrow screens: placed last so it wins over the base component rules */
@media (max-width:899px){
  .pdpx-cell{padding-left:12px;padding-right:12px}
  .pdpx-cell::before{margin:0 -12px 14px}
  .nw-row{font-size:13.5px;gap:8px}
  .nw-atc{padding:12px 14px}
  .nw-atc .l1{font-size:16px;letter-spacing:.6px}
}

/* like-for-like columns: buy box then FAQs, as the customer sees them */
.pdpx-faqs{margin-top:28px}
/* button hierarchy (James 25 Sep): action line clearly dominant, guarantee line quieter */
.nw-atc{min-height:88px;padding:16px 24px;gap:8px}
.nw-atc .l1{font:700 20px/26px AreaNormal,sans-serif;letter-spacing:.5px;text-transform:none}
.nw-atc .l1 s{opacity:.6;font-weight:400;font-size:17px;margin-left:8px}
.nw-atc .l2{font:400 13px/18px AreaNormal,sans-serif;letter-spacing:.2px;opacity:.82}
.is-mob .nw-atc{min-height:80px;padding:14px 20px}
.is-mob .nw-atc .l1{font-size:18px}
.is-mob .nw-atc .l2{font-size:12px}

/* review card (Spacegoods pattern, BC colours) */
.nw-rev{margin-top:22px;background:#EEF3F0;border-radius:18px;padding:20px 20px 18px;text-align:left}
.nw-rev p{margin:0}
.nw-rev-top{display:flex;align-items:center;gap:8px;font-size:18px}
.nw-stars{display:inline-flex;gap:3px}.nw-stars svg{width:18px;height:18px;fill:var(--fern)}
.nw-rev-n{font-size:13px;color:#555}
.nw-rev-q{margin-top:12px!important;font-size:17px;line-height:1.5;color:#131313}
.nw-rev-by{display:flex;align-items:center;gap:10px;margin-top:14px!important;font-size:15px;color:#444}
.nw-av{width:40px;height:40px;border-radius:50%;background:var(--fern);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.is-mob .nw-rev-q{font-size:15px}

/* James 25 Sep: keep brand uppercase on the button; guarantee line a touch brighter */
.nw-atc .l1{text-transform:uppercase;letter-spacing:1px}
.nw-atc .l2{opacity:.92}
.nw-stars svg{width:17px;height:17px;fill:#40685d}

/* ---------- NEW: lab results strip + modal ----------
   Copied verbatim from offer-clean-coffee-bundle.html (LP1: .lab-strip, LAB MODAL, .report-card, .stat-num/.stat-lbl).
   Every selector scoped under .bclab so nothing leaks into or out of the comparison page. Fern set to #40685D. */
.bclab{--forest-fern:#40685D;--obsidian:#161F28;--white:#FFFFFF;--arctic-white:#EDF0ED;--body-text:#282828;--grey:#555555;--border:#DCDCDC;--success:#2E9E7B;--radius:6px;--deep-juniper:#22372B;
  font-family:AreaNormal,Arial,sans-serif;font-size:15px;line-height:1.65;color:var(--body-text);-webkit-font-smoothing:antialiased;text-align:left}
.bclab *,.bclab *::before,.bclab *::after{box-sizing:border-box;margin:0;padding:0}
.bclab h3,.bclab h4{font-weight:600;line-height:1.25;color:var(--obsidian)}
.bclab h3{font-family:Canela,Georgia,serif;font-weight:400;letter-spacing:0;font-size:clamp(1.05rem,2vw,1.25rem)}
.bclab-strip-wrap{margin-top:16px}
.bclab .lab-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:10px;margin-top:12px;padding:12px 16px;background:rgba(81,110,90,.08);border-radius:10px;cursor:pointer}
.bclab-strip-wrap .lab-strip{margin-top:0}
.bclab .lab-strip:focus-visible{outline:2px solid var(--forest-fern);outline-offset:3px}
.bclab .lab-strip-icon{display:flex;align-self:start;padding-top:2px}
.bclab .lab-strip-title{font-size:12px;font-weight:600;color:var(--obsidian);margin:0}
.bclab .lab-strip-sub{font-size:11px;color:var(--grey);margin:0}
.bclab .lab-strip-btn{font-size:11px;font-weight:600;color:var(--forest-fern);background:var(--white);padding:4px 12px;border-radius:6px;border:1px solid var(--forest-fern);white-space:nowrap}
@media(max-width:520px){.bclab .lab-strip{grid-template-columns:auto 1fr}.bclab .lab-strip-btn{grid-column:2;justify-self:start}}
/* Mobile 390 preview toggle: same wrap the real 390px viewport gets from the 520px breakpoint */
.is-mob .bclab .lab-strip{grid-template-columns:auto 1fr}
.is-mob .bclab .lab-strip-btn{grid-column:2;justify-self:start}

.bclab .lab-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center}
.bclab .lab-modal-overlay.open{display:flex}
.bclab .lab-modal{background:var(--white);border-radius:16px;max-width:720px;width:92%;max-height:85vh;overflow-y:auto;padding:32px;position:relative}
.bclab .lab-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:var(--arctic-white);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--grey);font-family:inherit;line-height:1}
.bclab .lab-modal h3{margin-bottom:16px}
.bclab .lab-modal-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(46,158,123,.08);color:var(--success);font-size:11px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:20px}
.bclab .lab-modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.bclab .lab-modal-stat{background:var(--arctic-white);border-radius:var(--radius);padding:16px;text-align:center}
.bclab .stat-num{font-size:24px;font-weight:700;color:var(--forest-fern);display:block}
.bclab .stat-lbl{font-size:12px;color:var(--grey);margin-top:2px}
.bclab .lab-modal-stat .stat-num{font-size:20px}
.bclab .report-card{display:block;max-width:300px;margin:0 auto 16px;text-decoration:none;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.08);transition:box-shadow .2s,transform .2s}
.bclab .report-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.14);transform:translateY(-2px)}
.bclab .report-card img{width:100%;display:block;border-radius:6px;border:1px solid var(--arctic-white)}
.bclab .report-cta{display:block;margin-top:12px;font-size:13px;font-weight:600;color:var(--forest-fern);text-align:center}
@media(max-width:768px){
  .bclab .lab-modal-stats{grid-template-columns:1fr}
  .bclab .lab-modal{width:100%;height:100%;max-height:100vh;border-radius:0;padding:20px 16px}
  .bclab .lab-modal-close{top:8px;right:8px;width:40px;height:40px;font-size:22px}
}
/* buy-box "Lab results published" opens the same modal; text unchanged */
.nw-lablink{color:inherit!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- NEW: size + purchase-type picker (James 25 Sep) ----------
   Mirrors the live PDP "Select Quantity" block-swatch tiles and "Select Purchase Type" radio cards, in BC colours. */
.nw-pick{margin:0 0 18px;text-align:left}
.nw-pick-h{margin:0 0 10px;font:600 15px/1.3 AreaNormal,sans-serif;color:#000}
.nw-sizes+.nw-pick-h{margin-top:18px}
.nw-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nw-size{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:96px;padding:12px 6px 10px;border:1px solid var(--fern);border-radius:10px;background:#fff;color:#131313;cursor:pointer;font-family:AreaNormal,sans-serif;text-align:center}
.nw-size[aria-checked="true"]{border-width:2px;padding:11px 5px 9px;background:#EEF3F0}
.nw-size[aria-checked="true"]::before{content:"";position:absolute;top:6px;left:6px;width:16px;height:16px;border-radius:50%;background:var(--fern) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center/100% no-repeat}
.nw-size .w{font-size:18px;line-height:1.25;font-weight:600}
.nw-size .c{font-size:14px;line-height:1.4;font-weight:400;color:#333}
.nw-size .pc{margin-top:2px;font-size:12px;line-height:1.3;font-weight:700;color:#131313}
.nw-size[aria-checked="true"] .pc{color:var(--fern-brand);font-style:italic}
.nw-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:4px;background:#B3121B;color:#fff;font-size:11px;line-height:1.4;font-weight:600;white-space:nowrap}
.nw-plans{display:grid;gap:10px}
.nw-plan{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:1px solid var(--fern);border-radius:10px;background:#fff;color:#131313;cursor:pointer;font:600 16px/1.3 AreaNormal,sans-serif;text-align:left}
.nw-plan[aria-checked="true"]{border-width:2px;padding:12px 15px;background:#EEF3F0}
.nw-plan .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid #888;flex-shrink:0;background:#fff}
.nw-plan[aria-checked="true"] .rd{border-color:var(--fern);box-shadow:inset 0 0 0 3px #fff;background:var(--fern)}
.nw-plan .pl{flex:1}
.nw-plan .pp{font-weight:600}
.nw-size:focus-visible,.nw-plan:focus-visible{outline:2px solid var(--fern);outline-offset:3px}
.is-mob .nw-sizes{gap:8px}
.is-mob .nw-size{min-height:88px}
.is-mob .nw-size .w{font-size:16px}
.is-mob .nw-size .c{font-size:13px}
.is-mob .nw-plan{font-size:15px;padding:12px 14px}
.is-mob .nw-plan[aria-checked="true"]{padding:11px 13px}
@media (max-width:899px){.nw-sizes{gap:8px}}

/* button line 1: price + struck same-size one-off price (sub only) */
.nw-atc .l1{max-width:100%}
.nw-atc .l1a{white-space:nowrap}
.nw-atc .l1 .was{display:inline-block;margin-left:8px}
.nw-atc .l1 .was s{margin-left:0}
/* narrow screens: the later 20px/24px button rules beat the earlier narrow block, so a real 390px viewport overflowed;
   match the Mobile 390 preview (18px) and give the text more room */
@media (max-width:899px){
  .nw-atc{padding:16px 14px}
  .nw-atc .l1{font-size:18px;letter-spacing:.6px}
  .nw-atc .l1 s{font-size:15px}
}

/* James 25 Sep: "Lab results published" reads like its row neighbour (no underline, still opens the modal) */
.nw-row .nw-lablink{text-decoration:none;cursor:pointer}
/* James 25 Sep: lab strip becomes an outline card matching the FAQ cards (.nw-item), so only the review card is tinted */
.bclab-strip-wrap .lab-strip{background:#fff;border:1.5px solid #D1E0D7;border-radius:16px}
/* selected tick sits below the "Best Value" badge line so they never touch on narrow tiles */
.nw-size[aria-checked="true"]::before{top:12px;left:7px}

/* James 25 Sep: lab strip scaled to match FAQ cards */
.bclab .lab-strip{background:#fff;border:1.5px solid var(--mist,#D1E0D7);border-radius:16px;padding:16px 18px;column-gap:14px;margin-top:16px}
.bclab .lab-strip-icon{width:32px;height:32px;border-radius:50%;background:#40685D;display:grid;place-items:center;padding:0;align-self:center}
.bclab .lab-strip-icon svg{width:17px;height:17px}.bclab .lab-strip-icon svg *{stroke:#fff}
.bclab .lab-strip-title{font-size:17px;line-height:1.3}
.bclab .lab-strip-sub{font-size:14px;margin-top:2px}
.bclab .lab-strip-btn{font-size:14px;padding:8px 14px;border-radius:100px;border-width:1.5px}
.is-mob .bclab .lab-strip-title{font-size:16px}

/* ===== James 25 Sep v3: numbered steps, grind select, subscribe-first card, spacing pass =====
   Live reference (balancecoffee.co.uk/products/stability-blend): step number = filled circle, white 600 numeral;
   grind select 52px, 1px Forest Fern border, 10px radius, 16px text; Skio card accent #D60F11, saving pill #D98278. */
.nw-pick{margin:0;--obs:#161F28;--acc:#D60F11;--pill:#D98278}
.nw-step{display:flex;align-items:center;gap:10px;margin:24px 0 12px;font:600 16px/1.3 AreaNormal,sans-serif;color:#000}
.nw-pick>.nw-step:first-child{margin-top:0}
.nw-num{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--obs);color:#fff;font:700 13px/1 AreaNormal,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px #EDF0ED}
.nw-howto{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:0;border:0;background:none;color:var(--obs);font:400 14px/1.3 AreaNormal,sans-serif;cursor:pointer}
.nw-howto svg{width:20px;height:20px;flex-shrink:0}
.nw-howto i{text-decoration:underline;text-decoration-color:rgba(22,31,40,.3);text-underline-offset:3px}
/* Best Value badge, larger */
.nw-badge{top:-12px;padding:4px 12px;font-size:13.5px;line-height:1.3;border-radius:5px}
.nw-size[aria-checked="true"]::before{top:13px}
/* purchase type */
.nw-plans{gap:12px}
.nw-subcard{position:relative;border:1px solid var(--fern);border-radius:12px;background:#fff;overflow:hidden;cursor:pointer;text-align:left;color:#131313}
.nw-subcard[aria-checked="true"]{border-width:2px;background:#EEF3F0}
.nw-subcard:focus-visible{outline:2px solid var(--fern);outline-offset:3px}
.nw-sc-body{display:flex;justify-content:space-between;gap:12px;padding:16px 16px 14px}
.nw-subcard[aria-checked="true"] .nw-sc-body{padding:15px 15px 14px}
.nw-sc-l{min-width:0}
.nw-sc-t{display:flex;align-items:center;gap:12px;margin:0;font:600 17px/1.3 AreaNormal,sans-serif;white-space:nowrap}
.nw-sc-ben{list-style:none;margin:12px 0 0;padding:0 0 0 28px;display:grid;gap:8px}
.nw-sc-ben li{display:flex;align-items:center;gap:8px;font:400 14.5px/1.3 AreaNormal,sans-serif;color:#222}
.nw-sc-ben svg{width:14px;height:14px;flex-shrink:0}
.nw-sc-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.nw-sc-p{margin:0;font:400 14px/1.3 AreaNormal,sans-serif;color:#131313;white-space:nowrap}
.nw-sc-p .acc{color:var(--acc);font-weight:700;font-size:17px}
.nw-sc-p s{margin-left:4px;color:#8A8A8A}
.nw-pill{display:inline-block;padding:3px 9px;border-radius:5px;background:rgba(64,104,93,.12);color:#40685D;font:600 13.5px/1.3 AreaNormal,sans-serif;white-space:nowrap}
.nw-sc-gifts{display:block;padding:10px 12px;background:#C9DACD;color:#131313;text-align:center;font:400 14.5px/1.3 AreaNormal,sans-serif;text-decoration:underline;text-underline-offset:3px}
.nw-subcard .rd,.nw-plan .rd{width:18px;height:18px;border-radius:50%;border:1.5px solid #888;flex-shrink:0;background:#fff}
.nw-subcard[aria-checked="true"] .rd,.nw-plan[aria-checked="true"] .rd{border-color:var(--fern);box-shadow:inset 0 0 0 3.5px #fff;background:var(--fern)}
.nw-plan{padding:15px 16px;font-size:16px}
.nw-plan[aria-checked="true"]{padding:14px 15px}
.nw-plan .pl{flex:1}
.nw-plan .nw-pill{margin-right:4px}
/* spacing pass: 24px between groups, 12px within. Type, weight and colour back to the pre-spacing-pass look (James 25 Sep);
   the date is the darkest thing on its line */
.nw-ship{margin:28px 0 14px;font-size:16px;font-weight:400;color:#131313;gap:8px}
.nw-ship strong{font-weight:600;color:#131313;text-decoration:underline;text-underline-offset:3px}
.nw-dot{width:8px;height:8px;box-shadow:0 0 0 4px rgba(64,104,93,.14)}
.nw-row{margin:22px 0 0;font-size:15px;font-weight:400;color:#333;gap:14px}
.nw-row .sep{height:14px;background:#D5D5D5}
.nw-pay{margin-top:20px;gap:8px;opacity:1}
.nw-pay svg{width:38px;height:24px}
.nw-rev{margin-top:32px}
.nw-rev-who{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.nw-rev-prod{font-size:13px;color:#8A8A8A}
.is-mob .nw-ship{font-size:14px}
.is-mob .nw-row{font-size:13px;gap:10px}
/* narrow (Mobile 390 preview and real phones): the price block moves under the title so the title never meets the price */
.is-mob .nw-sc-body{display:grid;gap:0;grid-template-columns:minmax(0,1fr);padding:14px 14px 12px}
.is-mob .nw-subcard[aria-checked="true"] .nw-sc-body{padding:13px 13px 12px}
.is-mob .nw-sc-l{display:contents}
.is-mob .nw-sc-t{order:1;font-size:16px}
.is-mob .nw-sc-r{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 10px;margin-top:8px;padding-left:30px;text-align:left}
.is-mob .nw-sc-ben{order:3;margin-top:12px;padding-left:30px;gap:7px}
.is-mob .nw-sc-ben li{font-size:14px}
.is-mob .nw-sc-p .acc{font-size:16px}
.is-mob .nw-sc-p{font-size:13.5px}
.is-mob .nw-badge{font-size:12px;padding:4px 10px}
@media (max-width:899px){
  .nw-sc-body{display:grid;gap:0;grid-template-columns:minmax(0,1fr);padding:14px 14px 12px}
  .nw-subcard[aria-checked="true"] .nw-sc-body{padding:13px 13px 12px}
  .nw-sc-l{display:contents}
  .nw-sc-t{order:1;font-size:16px}
  .nw-sc-r{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 10px;margin-top:8px;padding-left:30px;text-align:left}
  .nw-sc-ben{order:3;margin-top:12px;padding-left:30px;gap:7px}
  .nw-sc-ben li{font-size:14px}
  .nw-sc-p .acc{font-size:16px}
  .nw-sc-p{font-size:13.5px}
  .nw-badge{font-size:12px;padding:4px 10px}
  .nw-row{font-size:13.5px;gap:10px}
}
/* grind help modal: replica of the live "How to Choose the Right Grind Size" pop-up (balancecoffee.co.uk, 25 Sep 2026) */
.nw-gm{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);align-items:center;justify-content:center;padding:16px;font-family:AreaNormal,sans-serif}
.nw-gm.open{display:flex}
.nw-gm-box{position:relative;background:#fff;border-radius:10px;padding:20px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.18)}
.nw-gm-x{position:absolute;top:22px;right:20px;background:none;border:0;padding:4px;cursor:pointer;line-height:0}
.nw-gm-t{margin:0 0 15px;padding-right:28px;font:400 25px/1 Canela,serif;letter-spacing:.01em;color:#161F28}
.nw-gm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nw-gm-card{border-radius:10px;overflow:hidden;background:#EDF0ED}
.nw-gm-h{background:#536F5B;color:#fff;text-align:center;font:700 13px/16px AreaNormal,sans-serif;letter-spacing:.01em;text-transform:uppercase;padding:10px 8px}
.nw-gm-body{padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.nw-gm-img{width:90px;height:90px;border-radius:50%;object-fit:cover;margin-bottom:15px;flex-shrink:0}
.nw-gm-c{display:flex;flex-direction:column;align-items:center}
.nw-gm-d{font-size:12px;color:#161F28;line-height:16px;letter-spacing:.01em;margin:0 0 10px}
.nw-gm-card ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.nw-gm-card li{display:flex;align-items:center;gap:5px;font-size:12px;color:#161F28;line-height:16px;white-space:nowrap}
.nw-gm-card li svg{flex-shrink:0}
@media (max-width:640px){
  .nw-gm-box{padding:20px;border-radius:10px;max-width:375px}
  .nw-gm-t{font-size:20px;margin-bottom:15px;max-width:204px}
  .nw-gm-grid{grid-template-columns:1fr;gap:10px}
  .nw-gm-body{flex-direction:row;text-align:left;align-items:center;gap:15px;padding:15px}
  .nw-gm-img{width:70px;height:70px;margin-bottom:0}
  .nw-gm-c{align-items:flex-start;flex:1}
  .nw-gm-card ul{justify-content:flex-start}
  .nw-gm-card li svg{width:10.61px;height:10.61px}
}

/* grind select: replica of the live combo-box (button 52px, 1px Fern border; chosen = 2px black border + tick;
   desktop = list under the button; phone = bottom sheet with "Select Grind Type" header, dividers and a check on the chosen row) */
.nw-gsel{position:relative}
.nw-gbtn{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 18px 0 30px;border:1px solid var(--fern);border-radius:10px;background:#fff;color:#131313;font:400 14px/1 AreaNormal,sans-serif;cursor:pointer;text-align:left}
.nw-gbtn.is-set{border:2px solid #000;padding:0 17px 0 14px}
.nw-gbtn:focus-visible{outline:2px solid var(--fern);outline-offset:3px}
.nw-gtick{width:20px;height:20px;flex-shrink:0}
.nw-gval{flex:1;padding-top:2px}
.nw-gbtn .nw-chev{width:12px;height:12px;transition:transform .2s ease}
.nw-gbtn[aria-expanded="true"] .nw-chev{transform:rotate(180deg)}
.nw-gbox{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:20}
.nw-gbox[hidden]{display:none}
.nw-gov,.nw-ghdr{display:none}
.nw-gsheet{background:#fff;border:1px solid #131313;border-radius:0 0 6px 6px;padding:8px 0}
.nw-gbtn[aria-expanded="true"]{border-radius:10px 10px 0 0}
.nw-gopt{display:flex;align-items:center;gap:15px;width:100%;padding:8px 18px;border:0;background:none;color:#131313;font:400 14px/1.3 AreaNormal,sans-serif;text-align:left;cursor:pointer}
.nw-gopt:hover,.nw-gopt:focus-visible{background:#EDF0ED;outline:none}
.nw-gic{width:30px;height:30px;flex-shrink:0}
.nw-gic img{width:30px;height:30px;display:block}
.nw-gtx{display:flex;flex-direction:column;gap:1px;min-width:0}
.nw-gv{font-size:14px;line-height:24px}
.nw-ghint{display:none;font-size:13.5px;line-height:1.3;color:#6B6B6B}
.g-hint .nw-ghint{display:block}
.nw-gck{display:none;width:14px;height:14px;flex-shrink:0;color:#131313}
/* phone: bottom sheet, as live below 741px */
@media (max-width:740px){
  .nw-gbox{position:fixed;inset:0;z-index:10000;top:0}
  .nw-gov{display:block;position:absolute;inset:0;background:rgba(0,0,0,.3)}
  .nw-gsheet{position:absolute;left:0;right:0;bottom:0;max-height:75vh;overflow-y:auto;border:0;border-radius:12px 12px 0 0;padding:0 0 16px}
  .nw-ghdr{display:flex;align-items:center;justify-content:center;position:relative;min-height:64px;border-bottom:1px solid #DCDCDC}
  .nw-gtitle{margin:0;font:400 18px/22px Canela,serif;color:#131313}
  .nw-gx{position:absolute;right:24px;top:50%;transform:translateY(-50%);border:0;background:none;padding:4px;line-height:0;color:#131313;cursor:pointer}
  .nw-gbtn[aria-expanded="true"]{border-radius:10px}
  .nw-glist{padding:0 24px}
  .nw-gopt{padding:18px 0;gap:22px;font-size:16px;border-bottom:1px solid #DCDCDC}
  .nw-gopt:last-child{border-bottom:0}
  .nw-gopt:hover,.nw-gopt:focus-visible{background:none}
  .nw-gopt:focus-visible .nw-gv{text-decoration:underline;text-underline-offset:3px}
  .nw-gic,.nw-gic img{width:30px;height:30px}
  .nw-gic{display:grid;place-items:center;width:30px;height:30px}
  .nw-gv{font-size:16px}
  .nw-gopt[aria-selected="true"] .nw-gck{display:block}
}

/* item 12: lab strip = solid Fern banner, so it stands apart from the tinted review card and the white FAQ cards */
.bclab-strip-wrap .lab-strip,.bclab .lab-strip{background:#40685D;border:0;border-radius:16px}
.bclab .lab-strip-icon{background:none;width:auto;height:auto;border-radius:0}
.bclab .lab-strip-icon svg{width:24px;height:24px}
.bclab .lab-strip-icon svg *{stroke:#fff}
.bclab .lab-strip-title{color:#fff;font-size:17px;font-weight:600}
.bclab .lab-strip-sub{color:rgba(255,255,255,.8);font-size:14px}
.bclab .lab-strip-btn{background:#fff;color:#40685D;border:0}
.bclab .lab-strip:focus-visible{outline:2px solid #131313}
.bclab-strip-wrap{margin-bottom:24px}

/* item 14: guarantee under the button (tools-bar toggle) */
.nw-atc.is-under{min-height:64px;padding-top:12px;padding-bottom:12px}
.nw-gu{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font:400 14px/1.3 AreaNormal,sans-serif;color:#333;text-align:center}
.nw-gu svg{width:15px;height:15px;flex-shrink:0}
.is-mob .nw-atc.is-under{min-height:64px}

/* item 4: Best Value badge ~25% smaller (overrides the earlier badge rules) */
.nw-badge{padding:3px 9px;font-size:11px;top:-10px}
.is-mob .nw-badge{padding:3px 9px;font-size:11px}
@media (max-width:899px){.nw-badge{padding:3px 9px;font-size:11px}}

/* FAQ 2 origin card (James 25 Sep): farm info as flags + share bar instead of a text list */
.nw-or{margin:4px 0 14px;padding:14px;border-radius:12px;background:#EEF3F0}
.nw-or p{margin:0}
.nw-or-h{font:600 13px/1.3 AreaNormal,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#40685D}
.nw-or-bar{display:flex;gap:3px;height:22px;margin:10px 0 6px;border-radius:6px;overflow:hidden}
.nw-or-bar span{display:grid;place-items:center;font:600 11.5px/1 AreaNormal,sans-serif;color:#fff}
.nw-or .s0{background:#40685D}.nw-or .s1{background:#7C9A88}.nw-or .s2{background:#22372B}
.nw-or-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0 0;margin-top:12px;border-top:1px solid #D1E0D7}
.nw-or-bar+.nw-or-row{border-top:0;margin-top:4px}
.nw-or-flag{flex-shrink:0;width:32px;height:23px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);margin-top:1px}
.nw-or-flag svg{display:block;width:100%;height:100%}
.nw-or-body{min-width:0;flex:1}
.nw-or-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:15px;line-height:1.3;color:#131313}
.nw-or-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.nw-or-r{color:#555;font-size:14px}
.nw-or-farm{margin-top:3px!important;font-size:14px;line-height:1.35;color:#222}
.nw-or-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px!important}
.nw-or-meta span{padding:2px 9px;border-radius:100px;background:#fff;font-size:13.5px;line-height:1.5;color:#333}
.is-mob .nw-or{padding:12px}

/* James 25 Sep: size tiles read cramped, then too big; original height, even 5px rhythm between weight, cups and per-cup (less than live, but equal) */
.nw-size{gap:5px;min-height:96px;padding-top:12px;padding-bottom:10px}
.nw-size[aria-checked="true"]{padding-top:11px;padding-bottom:9px}
.nw-size .w,.nw-size .c,.nw-size .pc{line-height:1.2;margin:0}
.is-mob .nw-size{min-height:88px;gap:4px}
.nw-or-r{flex-basis:100%;padding-left:0}
.nw-or-farm{padding-left:0}
.nw-or-meta{padding-left:0}

/* James 25 Sep: chosen grind shows its own dropdown icon (not a generic tick) and uses the same Fern selected state
   as the size tiles and purchase cards; list border Fern too, so nothing in the picker is black */
.nw-gbtn.is-set{border:2px solid var(--fern);background:#EEF3F0;padding:0 17px 0 12px;gap:12px}
.nw-gsel-ic,.nw-gsel-ic img{width:28px;height:28px}
.nw-gsheet{border-color:var(--fern)}
.nw-gck{color:var(--fern)}
/* James 25 Sep: tinted pill vanished on the tinted selected card; solid Fern, white text (6.4:1 contrast) */
.nw-pill{background:#40685D;color:#fff}
/* James 25 Sep: nothing near the button may share its Fern. Save pill = Mist with Deep Juniper text (9:1);
   lab banner = brand Obsidian, still solid so it stands apart from the tinted review and white FAQs */
.nw-pill{background:#C9DACD;color:#22372B}
.bclab-strip-wrap .lab-strip,.bclab .lab-strip{background:#161F28}
.bclab .lab-strip-btn{color:#161F28}
/* James 25 Sep: one even 24px gap between payment icons, review, lab banner and FAQs */
.nw-rev{margin-top:24px}
.bclab-strip-wrap,.bclab-strip-wrap .lab-strip{margin-top:24px}
.bclab-strip-wrap .lab-strip{margin-top:0}
.nw-faq.pdpx-faqs{margin-top:24px}
/* James 25 Sep: the chosen tile's per-cup price must get stronger, not weaker. Unselected = 600 #444;
   selected = 700, near-black, a touch larger, upright (no italic, no faded green) */
.nw-size .pc{font-weight:600;color:#444;font-style:normal}
.nw-size[aria-checked="true"] .pc{font-weight:700;color:#131313;font-style:normal;font-size:13px}

/* James 25 Sep: value must be obvious. Sub price near-black and bold (red was hard to read); the struck same-size
   one-time price lives on the button only; 500g/1kg tiles state their saving vs 250g bags */
.nw-sc-p .acc{color:#131313;font-weight:700;font-size:18px}
.nw-atc .l1 s{opacity:.75}
.nw-size{min-height:0}
.nw-size .vs{margin-top:2px;padding:2px 8px;border-radius:5px;background:#C9DACD;color:#22372B;font-size:11.5px;line-height:1.3;font-weight:600;white-space:nowrap}
.is-mob .nw-size .vs{font-size:11px;padding:2px 6px}
.nw-size{justify-content:flex-start}
/* James 25 Sep: tiles back to three lines; the one-time volume saving sits on the one-time row with its baseline stated */
.nw-plan .pl{display:flex;flex-direction:column;gap:2px}
.nw-vs{font:600 13px/1.3 AreaNormal,sans-serif;color:#40685D}
/* Brand guidelines (bc-brand-guidelines-reference.md): "Do not use dark grey or black backgrounds", "Do not create new
   colours outside this palette". Lab banner = Desert Sage #AFCCB8 (secondary palette) with Deep Juniper #22372B text:
   stands apart from the pale review tint and the white FAQs, and is not the button's Fern. Pills = Morning Mist. */
.bclab-strip-wrap .lab-strip,.bclab .lab-strip{background:#AFCCB8}
.bclab .lab-strip-title{color:#22372B}
.bclab .lab-strip-sub{color:#22372B;opacity:.8}
.bclab .lab-strip-icon svg *{stroke:#22372B}
.bclab .lab-strip-btn{background:#fff;color:#22372B}
.nw-pill{background:#D1E0D7;color:#22372B}
/* James 25 Sep: step circles Forest Fern #516E5A (brand primary) instead of black */
.nw-num{background:#516E5A;box-shadow:0 0 0 3px #EDF0ED}
/* James 25 Sep: tiles too tight after the label came off; a little more height, content centred */
.nw-size{min-height:104px;padding-top:16px;padding-bottom:14px;justify-content:center;gap:6px}
.nw-size[aria-checked="true"]{padding-top:15px;padding-bottom:13px}
.is-mob .nw-size{min-height:96px;gap:5px}
/* James 25 Sep: the chosen-grind icon's pale disc vanished on the pale selected fill; white disc + Mist ring */
.nw-gsel-ic{display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #D1E0D7;width:30px;height:30px}
.nw-gsel-ic img{width:30px;height:30px;border-radius:50%}
.nw-gbtn:focus:not(:focus-visible){outline:none}
/* chosen grind: white fill (as live) so the icon's pale disc stays visible; Fern 2px border kept */
.nw-gbtn.is-set{background:#fff}
.nw-gsel-ic{background:none;box-shadow:none}
/* step circles: wayfinding, not a call to action. Morning Mist disc, Deep Juniper numeral (10:1 contrast),
   so they stop competing with the selected tiles and the button. Numeral nudged down 1px: measured 0.7px high. */
.nw-num{background:#D1E0D7;color:#22372B;box-shadow:none;line-height:1;padding-top:1px}
/* dynamic savings strip (James 25 Sep) */
.nw-ss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:12px;padding:11px 14px;border-radius:10px;background:#D1E0D7;color:#22372B;font:400 14px/1.35 AreaNormal,sans-serif}
.nw-ss strong{font-weight:700}
.nw-ss-go{border:0;background:none;padding:0;color:#22372B;font:700 14px/1.35 AreaNormal,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.nw-ss-go:focus-visible{outline:2px solid #22372B;outline-offset:2px;border-radius:3px}
/* James 25 Sep: lab banner = white with a 2px Desert Sage #AFCCB8 outline; button filled Morning Mist #D1E0D7
   (the nav-bar green family), Deep Juniper text */
.bclab-strip-wrap .lab-strip,.bclab .lab-strip{background:#fff;border:2px solid #AFCCB8}
.bclab .lab-strip-btn{background:#D1E0D7;color:#22372B;border:0}
/* James 25 Sep: step circles back to dark green (Forest Fern #516E5A) with white numerals; centring nudge kept */
.nw-num{background:#516E5A;color:#fff}
/* James 25 Sep: FAQ fill trial (tools-bar toggle). Arctic White #EDF0ED fill, no outline; open card turns white
   so the answer reads on white. Review stays tinted, lab banner stays white with Sage outline. */
.faq-fill .nw-item{background:#EDF0ED;border-color:#EDF0ED}
.faq-fill .nw-item:has(.nw-q[aria-expanded="true"]){background:#fff;border-color:#EDF0ED;overflow:hidden}
/* James 25 Sep: open FAQ keeps the fill on the question row only */
.faq-fill .nw-item .nw-q[aria-expanded="true"]{margin:-16px -18px 0;padding:16px 18px;width:calc(100% + 36px);background:#EDF0ED}
/* James 25 Sep: keep the tinted selected fill; make the icon's disc visible with a Desert Sage ring */
.nw-gbtn.is-set{background:#EEF3F0}
.nw-gsel-ic{border-radius:50%;box-shadow:0 0 0 1.5px #AFCCB8;background:#fff}

/* James 25 Sep: type scale pass - FAQ questions (17px) read easily, the buy box was 12-14px in places.
   Scale: headings 17, primary content 16-17, secondary 15, micro 13.5 minimum. */
.nw-step{font-size:17px}
.nw-gbtn,.nw-gval,.nw-gv{font-size:16px}
.nw-ghint{font-size:13.5px}
.nw-howto{font-size:15px}
.nw-size .w{font-size:19px}
.nw-size .c{font-size:15px}
.nw-size .pc,.nw-size[aria-checked="true"] .pc{font-size:14px}
.nw-sc-t{font-size:17.5px}
.nw-sc-ben li{font-size:15.5px}
.nw-sc-p{font-size:15px}.nw-sc-p .acc{font-size:19px}
.nw-pill{font-size:13.5px}
.nw-sc-gifts{font-size:15.5px}
.nw-plan{font-size:17px}
.nw-ss,.nw-ss-go{font-size:15px}
.nw-atc .l2{font-size:14px}
.nw-row{font-size:15px}
.nw-rev-n{font-size:14px}.nw-rev-prod{font-size:14px}
.bclab .lab-strip-sub{font-size:15px}
.bclab .lab-strip-btn{font-size:15px}
.is-mob .nw-size .w{font-size:17px}.is-mob .nw-size .c{font-size:14px}.is-mob .nw-size .pc,.is-mob .nw-size[aria-checked="true"] .pc{font-size:13.5px}
.is-mob .nw-sc-ben li{font-size:15px}.is-mob .nw-sc-t{font-size:16.5px}.is-mob .nw-sc-p .acc{font-size:18px}
.is-mob .nw-plan{font-size:16px}.is-mob .nw-row{font-size:13.5px}
@media (max-width:899px){
  .nw-size .w{font-size:17px}.nw-size .c{font-size:14px}.nw-size .pc,.nw-size[aria-checked="true"] .pc{font-size:13.5px}
  .nw-sc-ben li{font-size:15px}.nw-sc-t{font-size:16.5px}.nw-sc-p .acc{font-size:18px}
  .nw-plan{font-size:16px}.nw-row{font-size:13.5px}
}
/* James 25 Sep: gift icon on the gifts link */
.nw-sc-gifts{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.nw-sc-gifts span{text-decoration:underline;text-underline-offset:3px}
.nw-gift{width:18px;height:18px;flex-shrink:0;color:#22372B}
/* James 25 Sep: strip was noisy and its fill clashed with the cards; now one quiet line, no fill */
.nw-ss{justify-content:center;flex-wrap:nowrap;gap:7px;margin-top:12px;padding:2px 0;background:none;border-radius:0;color:#22372B;font-size:15px}
.nw-ss-ic{width:16px;height:16px;flex-shrink:0;color:#516E5A}
.nw-ss-go{font-weight:600;font-size:15px;white-space:normal;text-align:left}
/* James 25 Sep: shield measured 1.9px below the cap-height centre of "60-day"; lift it. ATC text +1pt. */
.nw-atc .l2 svg,.nw-gu svg{transform:translateY(-2px)}
.nw-atc .l1{font-size:21px}
.is-mob .nw-atc .l1{font-size:19px}
@media (max-width:899px){.nw-atc .l1{font-size:19px}}
/* arrives line under the button; savings line owns the gap between plans and button */
.nw-ss{margin:14px 0 22px}
.nw-ship.nw-ship-below{margin:16px 0 0}
.nw-ship-below+.nw-row{margin-top:14px}
/* James 25 Sep: step circles back to Obsidian Night #161F28 (brand primary) - breaks up the all-green scheme */
.nw-num{background:#161F28;color:#fff}
/* James 25 Sep: review card in brand Morning Mist, for reference (tools-bar toggle) */
.rev-mint .nw-rev{background:#D1E0D7}
.rev-mint .nw-rev-prod{color:#4A5A50}
.nw-ss-go{font-weight:500}.nw-ss-go strong{font-weight:700}
/* James 25 Sep: guarantee line 3% duller; button a fraction taller */
.nw-atc .l2{opacity:.89}
.nw-atc{min-height:94px}
.is-mob .nw-atc{min-height:86px}
.nw-atc.is-under{min-height:68px}
/* review carousel: scroll-snap track, one review per slide, dots under */
.nw-rev{padding:20px 0 14px}
.nw-rev-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nw-rev-track::-webkit-scrollbar{display:none}
.nw-rev-s{flex:0 0 100%;scroll-snap-align:start;padding:0 20px;display:flex;flex-direction:column}
.nw-rev-s .nw-rev-by{margin-top:auto!important;padding-top:14px}
.nw-rev-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.nw-rev-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#B9C9BF;cursor:pointer}
.nw-rev-dot[aria-current="true"]{background:#40685D;width:20px;border-radius:4px}
.nw-rev-dot:focus-visible{outline:2px solid #40685D;outline-offset:2px}
/* James 25 Sep: selected tick equally inset from top and left */
.nw-size[aria-checked="true"]::before{top:10px;left:10px}
/* James 25 Sep: faint hairlines between arrives line, trust row and payment icons */
.nw-ship-below+.nw-row{margin-top:14px;padding-top:14px;border-top:1px solid #E4E9E5}
.nw-pay{margin-top:14px;padding-top:14px;border-top:1px solid #E4E9E5}
/* tick: equal 12px inset, clears the Best Value badge (badge bottom sits ~10px into the tile) */
.nw-size[aria-checked="true"]::before{top:12px;left:12px}
/* James 25 Sep: separators too faint; Morning Mist hairline, and the trust-row divider to match */
.nw-ship-below+.nw-row,.nw-pay{border-top-color:#C9D6CD}
.nw-row .sep{background:#C9D6CD}
/* James 25 Sep: tighter rhythm under the button */
.nw-ship.nw-ship-below{margin-top:14px}
.nw-ship-below+.nw-row{margin-top:10px;padding-top:10px}
.nw-pay{margin-top:10px;padding-top:12px}
/* James 25 Sep: review lines 2+ align under the first letter; the opening quote hangs in the indent */
.nw-rev-q{padding-left:var(--qw,.4em);text-indent:calc(-1 * var(--qw,.4em))}
/* "Verified buyer" measured ~1.5px high against the star row's centre */
.nw-rev-n{position:relative;top:1.5px}
/* Variant C: cups-a-day helper under the size tiles */
.nw-cc{margin-top:14px;padding:12px 14px;border:1px solid #D1E0D7;border-radius:10px;background:#fff}
.nw-cc-q{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 15px/1.3 AreaNormal,sans-serif;color:#161F28}
.nw-cc-ic{width:18px;height:18px;color:#516E5A;flex-shrink:0}
.nw-cc-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nw-cc-o{padding:9px 4px;border:1px solid #AFCCB8;border-radius:100px;background:#fff;color:#22372B;font:500 14.5px/1.2 AreaNormal,sans-serif;cursor:pointer}
.nw-cc-o[aria-checked="true"]{background:#D1E0D7;border-color:#516E5A;font-weight:700}
.nw-cc-o:focus-visible{outline:2px solid #516E5A;outline-offset:2px}
.nw-cc-r{margin:10px 0 0;font:400 15px/1.35 AreaNormal,sans-serif;color:#22372B}
/* James 25 Sep: delivery days bold, no underline (it links nowhere) */
.nw-ship strong{text-decoration:none}
/* guarantee in the trust row */
.nw-row-g{display:inline-flex;align-items:center;gap:6px}
.nw-row-g svg{width:15px;height:15px;flex-shrink:0;transform:translateY(-1px)}
@media (max-width:899px){.pdpx-cell.new::before{content:"New - B"}.var-c .pdpx-cell.new::before{content:"New - C"}.var-d .pdpx-cell.new::before{content:"New - D"}}
/* 390: trust row with the guarantee is too wide for one line - stack the two items, drop the divider;
   arrives line one size down so it holds one line */
@media (max-width:899px){
  .nw-row{flex-direction:column;gap:6px}
  .nw-row .sep{display:none}
  .nw-ship{font-size:14.5px}
}
.is-mob .nw-row{flex-direction:column;gap:6px}.is-mob .nw-row .sep{display:none}.is-mob .nw-ship{font-size:14.5px}
.nw-cc-o{white-space:nowrap}
/* James 25 Sep layout: savings under the tiles, arrives line above the button, no divider between button and trust row */
.nw-ss{margin:14px 0 0}
.nw-ship{margin:24px 0 12px}
.nw-atc+.nw-row,.nw-gu+.nw-row{margin-top:16px;padding-top:0;border-top:0}
.nw-pay{margin-top:14px;padding-top:14px;border-top:1px solid #C9D6CD}
/* compact lab report card + zoom */
.bclab .report-row{display:flex;align-items:center;gap:16px;margin:0 0 16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.bclab .report-thumb{position:relative;flex-shrink:0;width:96px;height:120px;padding:0;border:1px solid var(--arctic-white);border-radius:6px;overflow:hidden;background:#fff;cursor:zoom-in}
.bclab .report-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.bclab .report-plus{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:#161F28;color:#fff;display:grid;place-items:center;font:600 18px/1 AreaNormal,sans-serif}
.bclab .report-t{font-size:15px;font-weight:600;color:var(--obsidian)}
.bclab .report-d{font-size:13px;color:var(--grey);margin-top:2px}
.bclab .report-meta .report-cta{display:inline-block;margin-top:8px;text-align:left;font-size:14px}
.bclab .report-zoom{display:none;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.8);align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.bclab .report-zoom.open{display:flex}
.bclab .report-zoom img{max-width:min(900px,100%);max-height:100%;border-radius:6px;background:#fff}
.bclab .report-zoom-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;font-size:22px;cursor:pointer}
/* narrow tiles: tick 8px inset and 14px, content pushed a touch lower so the tick never meets the weight */
@media (max-width:899px){
  .nw-size{padding-top:20px;padding-bottom:10px}
  .nw-size[aria-checked="true"]{padding-top:19px;padding-bottom:9px}
  .nw-size[aria-checked="true"]::before{top:8px;left:8px;width:14px;height:14px}
}
.is-mob .nw-size{padding-top:20px;padding-bottom:10px}
.is-mob .nw-size[aria-checked="true"]::before{top:8px;left:8px;width:14px;height:14px}
@media (max-width:899px){.nw-size:has(.nw-badge)[aria-checked="true"]::before{top:13px}}
.is-mob .nw-size:has(.nw-badge)[aria-checked="true"]::before{top:13px}
.nw-ss{flex-wrap:wrap;row-gap:2px}
.nw-ss-saved{font-weight:700;color:#40685D}
.nw-ss-dot{color:#8FA597}
/* narrow: "Saved £X" on line 1, the upgrade push on line 2, no dangling dot */
@media (max-width:899px){.nw-ss{flex-direction:column;gap:3px}.nw-ss-dot,.nw-ss .nw-ss-ic{display:none}}
.is-mob .nw-ss{flex-direction:column;gap:3px}.is-mob .nw-ss-dot,.is-mob .nw-ss .nw-ss-ic{display:none}
/* James 25 Sep: desktop hover on the add-to-cart - Deep Juniper #22372B fill, slight lift */
/* James 29 Sep: hover changes colour only - no lift, no shadow change */
.nw-atc{cursor:pointer;transition:background-color .2s ease}
@media (hover:hover){.nw-atc:hover{background:#22372B}}
.nw-atc:focus-visible{outline:2px solid #22372B;outline-offset:3px}
/* James 25 Sep: desktop sub-card pill spans the price line, from the £ to the end of "/mo" */
@media (min-width:900px){
  .pdpx:not(.is-mob) .nw-sc-r{align-items:stretch}
  .pdpx:not(.is-mob) .nw-sc-r .nw-pill{display:block;text-align:center}
}

/* Variant D: free-gift thumbnails inside the Subscribe & Save card (James 25 Sep) */
.nw-sc-gw{margin:0 16px;padding:12px 0 14px;border-top:1px solid #D1E0D7}
.nw-sc-gh{margin:0 0 10px;font:600 14px/1.3 AreaNormal,sans-serif;color:#161F28;text-align:center}
.nw-sc-gl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,96px));justify-content:center;gap:12px}
.nw-sc-gl li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.nw-sc-gl img{width:60px;height:60px;border-radius:10px;object-fit:cover;display:block;margin-bottom:6px;box-shadow:0 0 0 1px #D1E0D7}
.nw-sc-gl .gn{font:600 13.5px/1.25 AreaNormal,sans-serif;color:#161F28}
.nw-sc-gl .gt{font:400 13.5px/1.25 AreaNormal,sans-serif;color:#555}
.nw-subcard[aria-checked="true"] .nw-sc-gw{margin:0 15px}
.is-mob .nw-sc-gw{margin:0 14px}
.is-mob .nw-sc-gl{gap:8px}
.is-mob .nw-sc-gl{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}@media (max-width:420px){.nw-sc-gl{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px}}

/* caffeine widget (James 25 Sep) */
.nw-caf{display:flex;align-items:center;gap:12px;margin:4px 0 6px;padding:12px 14px;border-radius:12px;background:#EEF3F0}
.nw-caf-ic{width:36px;height:36px;border-radius:50%;background:#40685D;display:grid;place-items:center;flex-shrink:0}
.nw-caf-ic svg{width:20px;height:20px}
.nw-caf-h{margin:0!important;font:600 13px/1.3 AreaNormal,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#40685D}
.nw-caf-v{margin:2px 0 0!important;font:400 15px/1.3 AreaNormal,sans-serif;color:#131313}
.nw-caf-v strong{font-size:20px;font-weight:700;margin-right:2px}
.nw-caf-note{font-size:13.5px;line-height:1.45;color:#555}

/* cost FAQ made visual (James 25 Sep): farm-to-cup steps with icons, pull quote, 57p stat */
.nw-a .nw-steps{list-style:none;margin:4px 0 14px;padding:4px 14px;border-radius:12px;background:#EEF3F0}
.nw-a .nw-steps li{position:relative;padding:12px 0 12px 46px;margin:0;border-top:1px solid #D1E0D7}
.nw-a .nw-steps li:first-child{border-top:0}
.nw-a .nw-steps li::before{content:"";position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:50%;background:#40685D center/18px no-repeat}
.nw-a .nw-steps strong{display:block;font-size:15px;color:#161F28}
.nw-a .nw-steps li.st-farm::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322372B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20l5-9 3 5 2-3 4 7'/%3E%3Ccircle cx='17' cy='6' r='2'/%3E%3C/svg%3E")}
.nw-a .nw-steps li.st-store::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322372B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V4a2 2 0 0 0-4 0v10.8a4 4 0 1 0 4 0z'/%3E%3C/svg%3E")}
.nw-a .nw-steps li.st-roast::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322372B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-3 2-4 2-6 1 1 2 2 2 3 1-2 1-4 1-7z'/%3E%3C/svg%3E")}
.nw-a .nw-steps li.st-lab::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322372B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2h12.4a1.5 1.5 0 0 0 1.3-2L14 9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E")}
.nw-a .nw-pq{margin:0 0 14px;padding:4px 0 4px 16px;border-left:3px solid #AFCCB8}
.nw-a .nw-pq p{margin:0 0 4px;font-size:16px;font-style:italic;color:#161F28}
.nw-a .nw-pq cite{font-style:normal;font-size:13.5px;color:#555}
.nw-a .nw-57{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid #D1E0D7;border-radius:12px}
.nw-a .nw-57 .big{flex-shrink:0;font-size:28px;font-weight:700;line-height:1;color:#40685D}

/* step icons: Desert Sage fill + Deep Juniper glyph, not the Fern used by the FAQ header icon (James 25 Sep) */
.nw-a .nw-steps li::before{background-color:#AFCCB8}

/* price anchor: 57p vs coffee shop (James 25 Sep; figure: finder.com/uk average price of a coffee, 6 Aug 2026) */
.nw-a .nw-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px;border:1.5px solid #D1E0D7;border-radius:12px;text-align:center}
.nw-a .nw-vs>div{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.3;color:#555}
.nw-a .nw-vs .big{font-size:28px;font-weight:700;line-height:1}
.nw-a .nw-vs .us .big{color:#40685D}
.nw-a .nw-vs .them .big{color:#8A8A8A}
.nw-a .nw-vs .vs{font-size:13px;font-weight:600;color:#8A8A8A}
.nw-a .nw-vs-note{margin-top:8px;font-size:13.5px;color:#777}

/* Taste / Where it's grown / Caffeine as three matching sections (James 25 Sep) */
.nw-a .nw-sec-h{margin:0 0 6px!important;font:600 13px/1.3 AreaNormal,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#40685D}

/* Developer notes (James 25 Sep) */
.pdpx-dev{margin:20px 0 0;border:1.5px solid #D1E0D7;border-radius:12px;background:#fff;font:400 14px/1.5 AreaNormal,sans-serif;color:#222}
.pdpx-dev summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;color:#161F28;background:#EEF3F0;border-radius:12px}
.pdpx-dev[open] summary{border-radius:12px 12px 0 0}
.pdpx-dev table{width:100%;border-collapse:collapse}
.pdpx-dev th,.pdpx-dev td{padding:10px 18px;border-top:1px solid #E4ECE7;text-align:left;vertical-align:top}
.pdpx-dev th{width:160px;font-weight:600;color:#40685D;white-space:nowrap}
@media (max-width:640px){.pdpx-dev th,.pdpx-dev td{display:block;width:auto;padding:8px 14px}.pdpx-dev td{border-top:0;padding-top:0}}

/* James 25 Sep: with brew hints on, the option name is heavier and darker so the grey hint below stays readable */
.g-hint .nw-gv{font-weight:600;color:#161F28}
.g-hint .nw-ghint{color:#555}

/* Variant D v2: names only, one line each */
.nw-sc-gl .gn{white-space:nowrap}
.nw-sc-gl img{margin-bottom:8px}

/* ---- mobile pass (James 25 Sep) ---- */
/* Best Value badge: centred without a transform, so it renders crisp (translateX(-50%) lands on half pixels) */
.nw-badge{left:0;right:0;margin:0 auto;width:max-content;transform:none}
/* tiles: three lines optically centred - equal top/bottom padding, tick taken out of the flow */
.nw-size{padding:12px 6px}
.nw-size[aria-checked="true"]{padding:11px 5px}
/* savings line: always one line */
.nw-ss{flex-wrap:nowrap;justify-content:center;gap:0 8px;white-space:nowrap}
@media (max-width:480px){.nw-ss,.nw-ss-go{font-size:13px}.nw-ss{padding:10px 8px;gap:0 5px}.nw-ss-ic{display:none}}
.is-mob .nw-ss,.is-mob .nw-ss-go{font-size:13px}.is-mob .nw-ss{padding:10px 8px;gap:0 5px}.is-mob .nw-ss-ic{display:none}
/* hover effects only where a mouse exists */
@media (hover:none){.nw-atc:hover{background:var(--fern);transform:none;box-shadow:0 4px 4px rgba(0,0,0,.25)}}
/* reviews: slide height follows the text, no dead space under short quotes */
.nw-rev-track{align-items:flex-start}
/* lab strip: one compact row, button on the right at every width */
.bclab-strip-wrap .lab-strip,.bclab .lab-strip{padding:10px 14px;column-gap:12px;grid-template-columns:auto 1fr auto!important}
.bclab .lab-strip-btn{grid-column:auto!important;justify-self:end!important;padding:6px 12px;font-size:13.5px}
.bclab .lab-strip-title{font-size:15px}.bclab .lab-strip-sub{font-size:13px}
/* savings line one line on phones too (James 25 Sep, replaces the two-line stack) */
@media (max-width:899px){.nw-ss{flex-direction:row;gap:0 5px}.nw-ss-dot{display:inline}}
.is-mob .nw-ss{flex-direction:row}.is-mob .nw-ss-dot{display:inline}
/* phones: savings line on one line (James 25 Sep) - no wrapping inside the nudge, tighter type, short best-price wording */
.nw-ss-go,.nw-ss-best{white-space:nowrap!important}
.nw-ss-best .sm{display:none}
@media (max-width:480px){.nw-ss-go .lg{display:none}.nw-ss,.nw-ss-go{font-size:13.5px}.nw-ss{padding:10px 6px;gap:0 4px}.nw-ss-best .lg{display:none}.nw-ss-best .sm{display:inline}}
.is-mob .nw-ss-go .lg{display:none}.is-mob .nw-ss,.is-mob .nw-ss-go{font-size:13.5px}.is-mob .nw-ss{padding:10px 6px;gap:0 4px}.is-mob .nw-ss-best .lg{display:none}.is-mob .nw-ss-best .sm{display:inline}
/* phones: review quote size matches the Mobile 390 preview so quotes stay within three lines */
@media (max-width:520px){.nw-rev-q{font-size:15px}}
/* phones: lab strip stays one compact row (James 25 Sep) */
@media (max-width:480px){.bclab .lab-strip-title{font-size:14.5px;white-space:nowrap}.bclab .lab-strip-sub{font-size:13px;white-space:nowrap}.bclab .lab-strip-btn .lg{display:none}.bclab .lab-strip-btn{padding:6px 10px}.bclab-strip-wrap .lab-strip,.bclab .lab-strip{padding:10px 12px;column-gap:10px}}
.is-mob .bclab .lab-strip-title{white-space:nowrap}.is-mob .bclab .lab-strip-sub{white-space:nowrap}
.bclab .lab-strip-btn .sm{display:none}
@media (max-width:480px){.bclab .lab-strip-btn .sm{display:inline}}
.is-mob .bclab .lab-strip-btn .lg{display:none}.is-mob .bclab .lab-strip-btn .sm{display:inline}
.is-mob .bclab .lab-strip-title{font-size:14.5px}.is-mob .bclab .lab-strip-sub{font-size:13px}
/* tiles: three lines centred in the Mobile 390 preview too (James 25 Sep) */
.pdpx .nw-size{justify-content:center!important;padding-top:12px!important;padding-bottom:12px!important}
.pdpx .nw-size[aria-checked="true"]{padding-top:11px!important;padding-bottom:11px!important}
/* spacing system (James 25 Sep): 24px between groups, 12px inside a group. The savings line has no background,
   so it carries no vertical padding - otherwise its invisible box adds dead space above step 3 */
.pdpx .nw-ss{margin-top:12px!important;padding-top:0!important;padding-bottom:0!important}
.pdpx .nw-step{margin-top:24px!important;margin-bottom:12px!important}
.pdpx .nw-pick>.nw-step:first-child{margin-top:0!important}
.pdpx .nw-sizes,.pdpx .nw-plans,.pdpx .nw-gsel{margin-top:0!important}
.pdpx .nw-howto{margin-top:10px!important}
.pdpx .nw-howto{display:flex;width:max-content;margin-bottom:0!important}

/* phones (James 25 Sep): calmer sub card - price back on the right like the one-time row, smaller benefit lines,
   gifts sit in two white cards instead of floating */
@media (max-width:899px){
.pdpx .nw-sc-body{display:flex!important;justify-content:space-between;gap:10px;padding:14px 14px 12px}
.pdpx .nw-sc-l{display:block!important;min-width:0}
.pdpx .nw-sc-r{flex-direction:column!important;align-items:flex-end!important;gap:6px!important;margin-top:0!important;padding-left:0!important;text-align:right!important}
.pdpx .nw-sc-t{font-size:16px!important}
.pdpx .nw-sc-p .acc{font-size:16px!important}.pdpx .nw-sc-p{font-size:13px!important}
.pdpx .nw-sc-ben{margin-top:10px!important;padding-left:30px!important;gap:6px!important}
.pdpx .nw-sc-ben li{font-size:13.5px!important;color:#333}
.pdpx .nw-pill{font-size:12px;padding:3px 8px}
}

/* phones (James 25 Sep): calmer sub card - price back on the right like the one-time row, smaller benefit lines,
   gifts sit in two white cards instead of floating */

.pdpx.is-mob .nw-sc-body{display:flex!important;justify-content:space-between;gap:10px;padding:14px 14px 12px}
.pdpx.is-mob .nw-sc-l{display:block!important;min-width:0}
.pdpx.is-mob .nw-sc-r{flex-direction:column!important;align-items:flex-end!important;gap:6px!important;margin-top:0!important;padding-left:0!important;text-align:right!important}
.pdpx.is-mob .nw-sc-t{font-size:16px!important}
.pdpx.is-mob .nw-sc-p .acc{font-size:16px!important}.pdpx.is-mob .nw-sc-p{font-size:13px!important}
.pdpx.is-mob .nw-sc-ben{margin-top:10px!important;padding-left:30px!important;gap:6px!important}
.pdpx.is-mob .nw-sc-ben li{font-size:13.5px!important;color:#333}
.pdpx.is-mob .nw-pill{font-size:12px;padding:3px 8px}

/* gifts: two cards filling the width (all widths) */
.nw-sc-gl{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))!important;gap:10px!important;justify-content:stretch}
.nw-sc-gl li{flex-direction:row!important;align-items:center;gap:10px!important;padding:8px;border-radius:10px;background:#fff;border:1px solid #D1E0D7;text-align:left!important}
.nw-sc-gl img{width:52px!important;height:52px!important;margin:0!important;border-radius:8px;box-shadow:none!important;flex-shrink:0}
.nw-sc-gl .gn{white-space:normal!important;font-size:14px;line-height:1.25}
.nw-sc-gh{text-align:left!important;font-size:14px}

/* phones v2: row 1 = title + price (price on the right like One-time), row 2 = save pill under the title, row 3 = benefits full width */
@media (max-width:899px){
.pdpx .nw-sc-body{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:0}
.pdpx .nw-sc-l,.pdpx .nw-sc-r{display:contents!important}
.pdpx .nw-sc-t{grid-column:1;grid-row:1;align-self:center}
.pdpx .nw-sc-p{grid-column:2;grid-row:1;align-self:center;text-align:right}
.pdpx .nw-pill{grid-column:1;grid-row:2;justify-self:start;margin:6px 0 0 30px}
.pdpx .nw-sc-ben{grid-column:1/3;grid-row:3}
}

/* phones v2: row 1 = title + price (price on the right like One-time), row 2 = save pill under the title, row 3 = benefits full width */

.pdpx.is-mob .nw-sc-body{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:0}
.pdpx.is-mob .nw-sc-l,.pdpx.is-mob .nw-sc-r{display:contents!important}
.pdpx.is-mob .nw-sc-t{grid-column:1;grid-row:1;align-self:center}
.pdpx.is-mob .nw-sc-p{grid-column:2;grid-row:1;align-self:center;text-align:right}
.pdpx.is-mob .nw-pill{grid-column:1;grid-row:2;justify-self:start;margin:6px 0 0 30px}
.pdpx.is-mob .nw-sc-ben{grid-column:1/3;grid-row:3}

/* James 26 Sep: 13.5px is the page minimum - every former 12.5px rule raised */
.pdpx .nw-badge,.pdpx.is-mob .nw-badge{font-size:13.5px!important}
.pdpx .nw-pill,.pdpx.is-mob .nw-pill{font-size:13.5px!important}
.pdpx .nw-sc-p,.pdpx.is-mob .nw-sc-p{font-size:13.5px!important}
.bclab .lab-strip-sub,.is-mob .bclab .lab-strip-sub{font-size:13.5px!important}
/* phones: 13.5px sub line made the lab strip 8px too wide - tighten gaps so the Results button sits inside the border */
@media (max-width:480px){.bclab-strip-wrap .lab-strip,.bclab .lab-strip{padding:10px 10px!important;column-gap:8px!important}.bclab .lab-strip-btn{padding:6px 9px!important}}
.is-mob .bclab-strip-wrap .lab-strip,.is-mob .bclab .lab-strip{padding:10px 10px!important;column-gap:8px!important}.is-mob .bclab .lab-strip-btn{padding:6px 9px!important}
/* James 26 Sep: phones need more breathing room between the size tiles and the savings line - too many numbers stacked together */
@media (max-width:899px){.pdpx .nw-ss{margin-top:20px!important}}
.pdpx.is-mob .nw-ss{margin-top:20px!important}
/* James 26 Sep: price per kg (UK unit pricing) - quiet grey under each selling price */
.pdpx .nw-kg{display:block;margin-top:2px;font:400 13.5px/1.2 AreaNormal,sans-serif;color:#6B6B6B;text-align:right;letter-spacing:0}
.pdpx .nw-plan .pp{display:flex;flex-direction:column;align-items:flex-end}
/* Simplified numbers: the savings nudge keeps "Upgrade to" on phones - it is the only item on the line */
.pdpx .nw-ss-go.is-simple .lg{display:inline!important}
/* Simplified numbers: two-line tiles, centred, no dead space where the cup count was */
.pdpx.nums-simple .nw-size{min-height:0!important;height:auto!important;justify-content:center!important;padding-top:16px!important;padding-bottom:16px!important}
.pdpx.nums-simple .nw-size[aria-checked="true"]{padding-top:15px!important;padding-bottom:15px!important}
.pdpx .nw-sc-p .nw-kg{font-size:13.5px!important}
/* James 26 Sep (variant D): gift block lines up with the "Subscribe & Save" title text; bigger thumbnails; FREE + struck value */
.pdpx .nw-sc-gw{padding-left:30px!important}
@media (max-width:899px){.pdpx .nw-sc-gw{padding-left:28px!important}}
.pdpx.is-mob .nw-sc-gw{padding-left:28px!important}
.pdpx .nw-sc-gl img{width:60px!important;height:60px!important}
.pdpx .nw-sc-gl .gtx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pdpx .nw-sc-gl .gv{display:flex;align-items:center;gap:6px;font:400 13.5px/1.2 AreaNormal,sans-serif}
.pdpx .nw-sc-gl .gv s{color:#6B6B6B}
.pdpx .nw-sc-gl .gv b{padding:2px 7px;border-radius:5px;background:#40685D;color:#fff;font:600 13.5px/1.2 AreaNormal,sans-serif;letter-spacing:.3px}
/* James 26 Sep: size tiles a fraction taller so the 1kg tile is not squashed under the Best Value badge */
.pdpx .nw-size{padding-top:17px!important;padding-bottom:15px!important}
.pdpx .nw-size[aria-checked="true"]{padding-top:16px!important;padding-bottom:14px!important}
/* phones: gift cards stack image over text so "£99 FREE" fits the half-width card */
@media (max-width:480px){.pdpx .nw-sc-gl li{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}}
.pdpx.is-mob .nw-sc-gl li{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
.pdpx .nw-fp{display:block;margin-top:2px;font:400 13.5px/1.2 AreaNormal,sans-serif;color:#6B6B6B;text-align:right}
.pdpx .nw-caf{align-items:flex-start}
.pdpx .nw-caf-ic{margin-top:2px}
.pdpx .nw-caf-h{font-size:13.5px}
.pdpx .nw-a .nw-caf .nw-caf-note{margin:6px 0 0!important;font-size:13.5px;line-height:1.4;color:#555}
.pdpx .nw-a .nw-caf{display:flex!important;width:100%;box-sizing:border-box}
/* James 26 Sep: FAQ paragraphs max 3 lines on phones - answers use the full card width there, steps keep a slimmer icon column */
@media (max-width:480px){.pdpx .nw-a{padding-left:0!important}.pdpx .nw-a .nw-steps li{padding-left:40px!important}}
.pdpx.is-mob .nw-a{padding-left:0!important}.pdpx.is-mob .nw-a .nw-steps li{padding-left:40px!important}
/* James 26 Sep: "Full price" sits on the same line, left of the price, so the one-time row keeps one height across sizes */
.pdpx .nw-plan .pp{flex-direction:row!important;align-items:baseline!important;gap:8px}
.pdpx .nw-plan .nw-fp{display:inline;margin:0}

/* brain-mb15 26 Sep: one-time row stacks price line over the per-kg line; delivery line kept to one line on phones */
.pdpx .nw-plan .pp{flex-direction:column!important;align-items:flex-end!important;gap:0}
.pdpx .nw-plan .pp-m{display:flex;align-items:baseline;gap:8px}
@media (max-width:480px){.pdpx .nw-ship{font-size:14px;text-wrap:balance}.pdpx .nw-ship .nw-dot{display:none}}

/* James 29 Sep: delivery frequency selector inside the subscribe card */
.nw-freq{display:flex;align-items:center;gap:10px;margin:0 16px 14px 44px;font:400 14.5px/1.3 AreaNormal,sans-serif;color:#222;cursor:default}
.nw-freq-s{position:relative;flex:1;max-width:260px}
.nw-freq-s::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.6px solid #131313;border-bottom:1.6px solid #131313;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.nw-freq select{appearance:none;-webkit-appearance:none;width:100%;height:40px;padding:0 34px 0 12px;border:1px solid #9FB5A6;border-radius:8px;background:#fff;font:500 14.5px AreaNormal,sans-serif;color:#131313;cursor:pointer}
.nw-freq select:focus-visible{outline:2px solid #516E5A;outline-offset:2px}
.is-mob .nw-freq{margin:0 14px 12px 44px;font-size:14px}
@media (max-width:899px){.nw-freq{margin:0 14px 12px 44px;font-size:14px}}

/* James 29 Sep: two sections, not three - frequency in the green band, gifts link inline */
.nw-sc-band{display:flex;justify-content:center;padding:10px 12px;background:#C9DACD}
.nw-sc-band .nw-freq,.is-mob .nw-sc-band .nw-freq{margin:0;justify-content:center;width:100%;max-width:420px}
.nw-sc-band .nw-freq-s{max-width:200px}
.nw-sc-band .nw-freq select{height:38px;border-color:#8FA898}
.nw-gl{margin-left:4px;color:#22372B;font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:899px){.nw-sc-band .nw-freq{margin:0}}

/* James 29 Sep (2): thinner, softer band; View link in Fern with the gift icon */
.nw-sc-band{padding:5px 12px;background:#E4EDE6}
.nw-sc-band .nw-freq select{height:32px;font-size:14px;border-color:#B5C7BA}
.pdpx-stage .nw-gl,.nw-gl{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--fern,#3F6B5A);font-weight:600;text-decoration:none;vertical-align:middle}
.nw-gl span{text-decoration:underline;text-underline-offset:3px}
.nw-gl .nw-gift{width:15px;height:15px;color:inherit}

/* James 29 Sep (3): a little more green above and below the dropdown */
.nw-sc-band{padding:9px 12px}

/* James 29 Sep (4): Morning Mist band - the pale tint blended with the selected-state fill */
.nw-sc-band{background:#D1E0D7}
.nw-sc-band .nw-freq select{border-color:#A9C1B1}

/* James 29 Sep (5): field sized to its content, not a long white bar */
.nw-sc-band .nw-freq{width:auto}
.nw-sc-band .nw-freq-s{flex:none;width:118px}

/* James 29 Sep (6): one white field holds the whole line */
.nw-sc-band .nw-freq1,.is-mob .nw-sc-band .nw-freq1{position:relative;display:inline-flex;align-items:center;gap:10px;width:auto;max-width:none;margin:0;height:34px;padding:0 14px;background:#fff;border:1px solid #A9C1B1;border-radius:8px;color:#222;font:400 14.5px/1 AreaNormal,sans-serif;cursor:pointer}
.nw-freq1 b{font-weight:600;color:#131313}
.nw-freq1 .nw-freq-c{color:#131313;flex:none}
.nw-sc-band .nw-freq1 select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
.nw-freq1:focus-within{outline:2px solid #516E5A;outline-offset:2px}

/* James 29 Sep (7): gift icon + View sit on the same centre line as the benefit text */
.nw-sc-ben li>span{display:inline-flex;align-items:center;flex-wrap:wrap}
.pdpx-stage .nw-gl,.nw-gl{line-height:inherit;font-size:inherit;vertical-align:baseline}
.nw-gl .nw-gift{width:14px;height:14px;margin-top:-1px}

/* James 29 Sep (8): field left-aligned with the benefit ticks, not centred */
.nw-sc-band{justify-content:flex-start;padding-left:43px}

/* review product toggle wraps onto its own line */
.pdpx-tools .grp-rev{flex-wrap:wrap;flex-basis:100%}

/* review product toggle wraps onto its own line */
.pdpx-tools .grp-rev{flex-wrap:wrap;flex-basis:100%}

/* James 29 Sep: "/delivery" at non-30-day frequencies is too wide beside the title on phones - suffix sits under the price */
@media (max-width:899px){.pdpx .nw-sc-p .nw-sfx{display:block;margin-top:1px;line-height:1.2}}
.pdpx.is-mob .nw-sc-p .nw-sfx{display:block;margin-top:1px;line-height:1.2}
/* James 29 Sep: "1kg" sat 4-6px under the Best Value badge - more top room on every tile so the text lines stay level across the row */
.pdpx .nw-size,.pdpx.nums-simple .nw-size{padding-top:24px!important;padding-bottom:16px!important}
.pdpx .nw-size[aria-checked="true"],.pdpx.nums-simple .nw-size[aria-checked="true"]{padding-top:23px!important;padding-bottom:15px!important}
/* James 29 Sep: the badge crowds the narrow 1kg tile, so the selected tick moves down level with the weight on every tile */
.pdpx .nw-size[aria-checked="true"]::before,.pdpx .nw-size:has(.nw-badge)[aria-checked="true"]::before{top:27px}
.pdpx.is-mob .nw-size[aria-checked="true"]::before,.pdpx.is-mob .nw-size:has(.nw-badge)[aria-checked="true"]::before{top:27px}
/* Lab strip, phones: Results pill sat tight to the right edge (James 1 Oct). More right padding pulls it in. */
@media (max-width:480px){.bclab-strip-wrap .lab-strip,.bclab .lab-strip{padding-right:18px!important}}
.is-mob .bclab-strip-wrap .lab-strip,.is-mob .bclab .lab-strip{padding-right:18px!important}