/* ══════════════════════════════════════════════════════════════════════
   GENERATED — do not hand-edit. Extracted verbatim from the <style> block
   of products/*.html (identical on all 26) by _proto/redesign/buypages.py.
   The product pages still carry it inline; the 49 buy pages link this file
   so one browser cache entry covers all of them. Edit the product-page
   template, rebuild the product pages, then re-run buypages.py.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   VARIANT A — "DOSSIER"
   One bordered instrument panel holds the product shot, the whole buy
   column and the lot certificate. Everything inside the panel is a
   hairline-delimited FIELD (1px var(--line), radius 12, var(--surface)
   fill, never a shadow) — the panel is the only elevated surface on the
   page, so nothing ever reads as a card inside a card.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── page-local tokens ────────────────────────────────────────────────
   Every value here is an ALIAS onto a real theme token, never a fresh hex.
   The hex after each comma is only the fallback for the case where
   /pp-theme.css fails to load — it never renders in normal conditions.
   --acc  : the link/marker accent. var(--mint-deep) is cobalt #1D4ED8
            after /pp-theme.css, which only clears 4.5:1 on LIGHT. Dark has
            no token light enough, so it declares one lifted cobalt (8.8:1
            on --page, 7.7:1 on --surface) — the single justified literal.
   --sig  : the one signature surface — teal into cobalt. Primary CTA only.
            Identical to --pp-fade, so it points at it rather than restating it.
   --tealx: decorative marker teal. Never carries small text (3.3:1 on white). */
html[data-theme="light"]{
  --acc:var(--mint-deep,#1D4ED8);
  --acc-soft:color-mix(in srgb,var(--mint,#2F6BE0) 8%,transparent);
  --acc-line:color-mix(in srgb,var(--mint,#2F6BE0) 30%,transparent);
  --tealx:var(--pp-teal-deep,#0E9F8A);
}
html[data-theme="dark"] {
  --acc:#8FB8FF; /* no token is light enough for 4.5:1 body text on --page */
  --acc-soft:color-mix(in srgb,#508CFF 13%,transparent);
  --acc-line:color-mix(in srgb,#78AAFF 34%,transparent);
  --tealx:var(--pp-teal,#34E1C4);
}
/* ── no dotted zeros, anywhere ──────────────────────────────────────────
   The self-hosted JetBrains Mono is a subset whose ONLY zero glyph carries a
   dot; "zero" 0/1, cv06 and slashed-zero were all tested and all still render
   it. So digits are re-pointed at Barlow with a unicode-range that covers
   nothing else — every other character still comes from JetBrains Mono, and
   the whole page inherits the fix through --mono rather than rule by rule. */
@font-face{font-family:'PPDigits';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-regular.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-500.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-600.woff2) format('woff2');
  unicode-range:U+0030-0039}
@font-face{font-family:'PPDigits';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-v13-latin_latin-ext-700.woff2) format('woff2');
  unicode-range:U+0030-0039}

:root{ --sig:var(--pp-fade,linear-gradient(120deg,#0E9F8A,#2F6BE0)); --mono:"PPDigits","JetBrains Mono",ui-monospace,SFMono-Regular,monospace; }
/* digits sit slightly narrow against mono letterforms — tabular keeps columns true */
.mono,[class*="mono"],.dsr-ref,.dcat,.pcell .lab,.pcell .unit,.vt-q,.vt-d,.vt-u,.vt-nudge,.sz-p,.cdata .k,.cdata .v,.spectbl td{font-variant-numeric:tabular-nums}

/* ── the panel sits on a tinted ground ────────────────────────────────────
   It was a white panel on a white page, so only a hairline separated them and
   the whole thing read as one flat sheet. Tinting the page behind it makes the
   panel a distinct surface. Done with backgrounds, not clip-path or blur —
   the panel carries animated layers and the perf rule bans both there. */
main{background:var(--surface)}
.specsec,.rread,.faqsec,.relsec{background:var(--page)}

.mono{font-family:var(--mono);font-variant-ligatures:none}
main :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
main h1,main h2,main h3{text-wrap:balance}
main p,main li,main dd{text-wrap:pretty}

/* ── 1. breadcrumb ─────────────────────────────────────────────────── */
.dcrumb{font-size:12.5px;color:var(--muted);padding:20px 0 14px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.dcrumb a{border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.dcrumb a:hover{color:var(--acc);border-color:var(--acc)}
.dcrumb .sl{opacity:.45}
.dcrumb .cur{color:var(--ink);font-weight:600}

/* ── 2. THE DOSSIER PANEL ──────────────────────────────────────────────
   The panel, the breadcrumb, every section below and the footer all share
   ONE left edge — the shared .wrap gutter. No section invents its own. */
/* NOTE: no overflow:hidden here on purpose — it would turn the panel into the
   sticky scrollport and pin the left column 132px down forever. The one child
   that needs clipping (.cert) rounds its own bottom corners instead. */
.dsr{position:relative;margin:0 0 36px;border:1px solid var(--line-strong);border-radius:22px;background:var(--page);box-shadow:var(--sh-2)}

/* status bar */
.dsr-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;padding:13px 24px}
.dsr-bar .bar-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left center}
.dsr-ref{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dsr-ref .k{color:var(--ink);font-weight:500}
.dsr-ref .sep{opacity:.4}
.smp{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:5px;padding:1px 5px;vertical-align:1px;cursor:help}
/* the status bar's right side reuses the site-wide badge — cart.js paints
   `.top .instock` with the circled green tick, so this is the same mark and the
   same type treatment as "In stock" on the shop cards */
.dsr-bar .top{display:inline-flex;align-items:center;white-space:nowrap}

/* internal grid — the vertical hairline is a real element (.cell-rule) so it
   can be drawn in; no decorative rules, no coloured side-stripes */
/* three cells: the image gave up width to make room for the mixing-essentials
   rail; the buy column in the middle keeps its size */
.dsr-grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.08fr) 258px}
.dcell-a{padding:24px}
/* the shot + compliance block ride down with the taller buy column instead of
   leaving a dead half-panel — same behaviour as .gallery on the live product page */
.acol{position:static}
.dcell-b{position:relative;padding:26px 28px 30px}
.cell-rule{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);transform-origin:center top}

/* left cell — product stage */
.vstage{position:relative;height:clamp(340px,27vw,470px);display:flex;align-items:center;justify-content:center;width:100%;background:radial-gradient(70% 70% at 50% 44%,#16243a,#0a1322);border-radius:16px;overflow:hidden}
.pimg{height:84%;width:auto;object-fit:contain;filter:drop-shadow(0 30px 45px rgba(0,0,0,.5));-webkit-mask-image:radial-gradient(60% 58% at 50% 47%,#000 60%,transparent 100%);mask-image:radial-gradient(60% 58% at 50% 47%,#000 60%,transparent 100%)}
.vchip{position:absolute;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#dfeaf2;border:1px solid rgba(255,255,255,.20);background:rgba(8,18,28,.62);border-radius:8px;padding:6px 10px;line-height:1}
.vchip.l{left:14px;display:inline-flex;align-items:center;gap:7px}
.vchip.l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pp-teal,#34E1C4);flex:none}
.vchip.r{right:14px;font-weight:500;color:#fff}

/* left cell — calm research-use block (a tinted field, not a card) */
.ruse{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.ruse .rh{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ruse .rh svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ruse .rh b{font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--ink)}
.ruse p{margin:0;font-size:12.8px;line-height:1.62;color:var(--muted)}
.ruse p + p{margin-top:8px}
.ruse a{color:var(--acc);font-weight:600;border-bottom:1px solid transparent}
.ruse a:hover{border-color:var(--acc)}

/* right cell — identity */
.dcat{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--acc)}
.dsr h1{font-size:clamp(32px,3.5vw,46px);line-height:1.02;margin:11px 0 0}
.dsr h1 .aka{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-weight:400;color:var(--muted);margin-top:11px}
.badgerow{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
/* the same circled green tick cart.js paints on the stock badge, so the mark is
   identical to "Secure checkout" and "In stock". Wording stays brand blue. */
.gtick{width:17px;height:17px;flex:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%2710%27%20fill%3D%27%233EA744%27/%3E%3Cpath%20d%3D%27M5.5%2010.4l2.9%202.9%206-6.5%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/contain no-repeat}
/* variant 40 — subtle vertical gradient, ink text, hairline border */
.vbadge{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--page),var(--surface));border-radius:9px;font-size:12.8px;font-weight:600;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.vbadge svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vbadge .ar{font-family:"Sora";font-weight:700;transition:transform .2s var(--ease)}
.vbadge:hover{border-color:var(--line-strong);box-shadow:var(--sh-1)}
.vbadge .ic-c{color:var(--acc)}
.vbadge:hover .ar{transform:translateX(3px)}

/* right cell — price. JetBrains Mono 400 + tabular figures, in a labelled cell:
   the exact treatment on the reference page (verified off the live element, which
   is `po-font-mono … tabular-nums` at weight 400, not a display face). */
/* same recipe as the tier buttons: darker fill, defined contour, so the price
   reads as its own block rather than a tint on the panel */
/* no box behind the price — "from" sits above, the struck reference and the
   unit sit inline with the figure. Reference = launch x 1.35 rounded to €5,
   the same rule PPLaunchPrice applies to every card on the site. */
.pcell{margin-top:16px}
.pcell .pfx{display:block;font-size:13px;color:var(--muted);margin-bottom:1px}
.pcell .prow{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
.pcell .was{font-size:20px;color:var(--faint);text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums}
/* Barlow, not JetBrains Mono, for the figure only: the self-hosted mono is a
   subset build whose ONLY zero is the dotted one — "zero" 0/1, cv06 and
   slashed-zero all still render the dot (tested). Barlow gives a clean zero and
   keeps the wide, evenly-spaced rhythm the labelled cell is going for. The
   labels around it stay mono. */
.pcell .fig{font-family:"Barlow","Sora",sans-serif;font-weight:600;font-size:clamp(38px,4vw,50px);letter-spacing:-.005em;line-height:1.08;color:var(--ink);font-variant-numeric:tabular-nums}
.pcell .unit{font-size:13px;color:var(--muted)}

/* shipping, one line under the price — answered before the cart, not after */
.shipline{margin-top:10px;display:flex;align-items:center;gap:9px;font-size:13.2px;color:var(--muted)}
.shipline svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shipline b{font-family:var(--mono);font-weight:500;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── VOLUME TIERS ── three real rungs, each showing the resulting unit price.
   The nudge counts the exact units to the next tier and recomputes on every
   quantity change. */
.vtiers{margin-top:18px}
.vt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:9px}
.vt-head .t{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.vt-nudge{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tealx);border:1px solid color-mix(in srgb,var(--tealx) 42%,transparent);background:color-mix(in srgb,var(--tealx) 9%,transparent);border-radius:7px;padding:4px 9px;white-space:nowrap}
/* option 37 — progress rail with nodes. The rail is one pseudo-element on the
   list; each tier hangs a node off it. Insets stop at 1/6 so the line starts and
   ends under the first and last node rather than running off the ends. */
.vt-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative}
.vt-grid::before{content:"";position:absolute;left:16.66%;right:16.66%;top:10px;height:2px;background:var(--line-strong);border-radius:2px}
/* each tier is a real button: pressing it selects that quantity */
.vt-grid > li{display:flex}
.vt{position:relative;width:100%;text-align:center;font:inherit;color:inherit;cursor:pointer;border:0;border-radius:0;background:none;padding:26px 6px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color .2s}
.vt::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--page);border:2px solid var(--line-strong);transition:border-color .2s,background .2s,transform .2s var(--spring)}
.vt:hover::before{border-color:var(--acc)}
.vt:hover .vt-d{color:var(--acc)}
.vt:focus-visible{outline:none}
.vt:focus-visible::before{outline:2px solid var(--acc);outline-offset:3px}
.vt-q{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.vt-d{font-family:"Sora",sans-serif;font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.vt-d i{font-style:normal;font-size:.52em;color:var(--muted);margin-left:1px}
.vt-u{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.vt.on::before{border-color:var(--acc);background:var(--acc);transform:translateX(-50%) scale(1.12)}
.vt.on .vt-d,.vt.on .vt-q{color:var(--acc)}
/* the discount chip inside the CTA, shown only once a tier is actually active */
.dsr-cta .off{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;background:rgba(255,255,255,.22);border-radius:6px;padding:3px 7px;margin-left:2px}

/* right cell — format selector */
.fmt{margin-top:30px;border:0;padding:0;margin-inline:0}
.fmt .sizes{display:flex;flex-wrap:wrap;gap:9px}
.size{flex:1 1 210px}
.fmt legend{padding:0;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:9px}
/* option 9 (elevated, coloured lift) + option 13 (underline bar on select).
   Both selection states are box-shadows, so they combine in one declaration:
   the inset bar draws the underline, the outer glow does the lift. */
.size{display:flex;align-items:center;gap:12px;min-width:190px;cursor:pointer;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;background:var(--page);box-shadow:var(--sh-1);transition:border-color .18s,background .18s,box-shadow .24s var(--ease),transform .18s var(--ease)}
.size:hover{border-color:var(--acc)}
.size:has(input:checked){border-color:var(--acc);background:var(--acc-soft);
  box-shadow:inset 0 -3px 0 var(--acc), 0 6px 18px color-mix(in srgb,var(--acc) 22%,transparent)}
.size:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:3px}
.size input{position:absolute;opacity:0;pointer-events:none}
.size .tick{width:19px;height:19px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:.18s}
.size .tick::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .18s var(--spring)}
.size:has(input:checked) .tick{border-color:var(--acc)}
.size:has(input:checked) .tick::after{transform:scale(1)}
.size b{font-family:"Sora";font-weight:600;font-size:15px;display:block;line-height:1.2}
.sz-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;width:100%}
.sz-p{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* stock uses the site-wide badge — cart.js paints `.top .instock` */
.sz-stk{margin-left:auto;display:inline-flex;align-items:center}

/* ── product dossier: description + handling sequence + spec sidebar ────── */
.pdoss{background:var(--page);border-top:1px solid var(--line);padding:64px 0}
.pdoss-in{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
.pdoss h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.025em;margin:0 0 20px;color:var(--ink)}
.pd-lede{margin:0;font-size:15.4px;line-height:1.78;color:var(--muted);max-width:74ch}
.pd-src{margin:20px 0 0;padding:15px 18px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.6;color:var(--ink)}
.pd-src a{color:var(--acc);font-weight:600;border-bottom:1px solid transparent}
.pd-src a:hover{border-color:currentColor}

/* the numbered handling sequence */
.pd-acc{list-style:none;margin:26px 0 0;padding:0;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:var(--surface)}
.pd-acc > li + li{border-top:1px solid var(--line-strong)}
.pd-acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:15px 18px;transition:background .18s}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary:hover{background:var(--acc-soft)}
.pd-acc summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pd-acc .n{flex:none;width:29px;height:29px;border-radius:50%;background:var(--sig);color:var(--on-mint,#fff);display:grid;place-items:center;font-family:"Sora",sans-serif;font-weight:700;font-size:13px}
.pd-acc .s-t{flex:1;font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.pd-acc .chv{flex:none;width:11px;height:11px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease)}
.pd-acc details[open] .chv{transform:rotate(-135deg) translate(-3px,-3px)}
.pd-ans{padding:0 18px 18px 61px}
.pd-ans p{margin:0;font-size:14.4px;line-height:1.75;color:var(--muted);max-width:72ch}

/* the in-vitro restriction notice */
.pd-warn{margin-top:22px;border:1.5px solid #c0392b;border-radius:12px;padding:16px 18px;background:color-mix(in srgb,#c0392b 5%,var(--page))}
html[data-theme="dark"] .pd-warn{border-color:#ff8a80;background:color-mix(in srgb,#ff8a80 9%,var(--page))}
.pd-warn .w-h{margin:0 0 9px;font-family:"Sora",sans-serif;font-weight:700;font-size:14px;color:#c0392b}
html[data-theme="dark"] .pd-warn .w-h{color:#ff8a80}
.pd-warn ul{margin:0;padding-left:20px}
.pd-warn li{font-size:14px;line-height:1.65;color:var(--ink);margin:0 0 4px}

/* spec sidebar */
.pd-spec{border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);padding:8px 20px;position:sticky;top:132px}
.pd-spec dl{margin:0}
.pd-spec dl > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:13px 0;align-items:start}
.pd-spec dl > div + div{border-top:1px solid var(--line)}
.pd-spec dt{font-family:"Sora",sans-serif;font-weight:600;font-size:13.2px;color:var(--ink)}
.pd-spec dd{margin:0;font-size:13.2px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.pd-spec dd.seq{font-family:var(--mono);font-size:11.8px;line-height:1.7}
@media(max-width:1023px){
  .pdoss-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .pd-spec{position:static;order:-1}
}
@media(max-width:560px){
  .pdoss{padding:44px 0}
  .pd-spec dl > div{grid-template-columns:minmax(0,1fr);gap:3px}
  .pd-ans{padding-left:18px}
}

/* ── research + references ──────────────────────────────────────────────── */
.rsch{background:var(--page);border-top:1px solid var(--line);padding:60px 0 68px}
.rsch-in{max-width:1000px}
.rsch-nav{display:flex;flex-wrap:wrap;gap:8px 26px;padding-bottom:20px;margin-bottom:34px;border-bottom:1px solid var(--line-strong)}
.rsch-nav a{font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;color:var(--acc);border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:opacity .18s}
.rsch-nav a:hover{opacity:.7}
.rsch-h{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.025em;margin:0 0 18px;color:var(--ink);scroll-margin-top:150px}
.rsch-h + .rsch-b{margin-bottom:42px}
.rsch-b p{margin:0 0 16px;font-size:15.3px;line-height:1.8;color:var(--muted);max-width:78ch;text-align:justify;hyphens:auto}
.rsch-b p:last-child{margin-bottom:0}
/* the bracketed markers that close each passage */
.rcite{margin-top:4px!important}
.rcite a{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--acc);font-weight:500;padding:1px 2px;border-bottom:1px solid transparent}
.rcite a:hover{border-color:currentColor}
.rsch-refs{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.rsch-refs li{font-size:13.6px;line-height:1.66;color:var(--muted);padding-left:4px;scroll-margin-top:150px}
.rsch-refs li::marker{color:var(--acc);font-weight:600}
.rsch-refs li:target{background:var(--acc-soft);border-radius:6px;padding:6px 4px 6px 8px;margin-left:-8px}
.rsch-refs a{color:var(--acc);border-bottom:1px solid transparent;overflow-wrap:anywhere}
.rsch-refs a:hover{border-color:currentColor}
.rsch-refs i{color:var(--ink)}
@media(max-width:700px){
  .rsch{padding:44px 0 50px}
  .rsch-nav{gap:8px 18px;margin-bottom:26px}
  .rsch-b p{text-align:left;font-size:14.8px;line-height:1.72}
}

/* ── order-unlocks ladder ───────────────────────────────────────────────── */
.rl{margin-top:14px;border:1.5px solid var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,var(--surface));padding:13px 15px 6px}
.rl-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.rl-lab{font-size:12.5px;color:var(--muted)}
.rl-sub{font-size:12.5px;color:var(--muted)}
.rl-sub b{font-family:"Barlow","Sora",sans-serif;font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:4px}
/* the gauge. Squarer than a pill so the notch reads as a cut in the fill
   rather than a gap between two lozenges. The fill is scaleX on a full-width
   layer — transform only, never an animated width. */
.rl-fuel{position:relative;height:10px;margin:11px 0 0;border-radius:3px;background:var(--line-strong);overflow:hidden}
.rl-fuel i{display:block;height:100%;width:100%;background:var(--sig);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease);will-change:transform}
/* €150 is 60% of the €250 axis — the notch is drawn at the real ratio */
.rl-notch{position:absolute;top:0;bottom:0;left:60%;width:2px;background:var(--page);transition:background .3s,width .3s}
/* once the fill has swallowed it, the notch stops being a divider and becomes
   the mark that says this threshold is banked */
.rl-notch.on{width:3px;background:#3EA744}
.rl-gauge{position:relative}
/* one-shot celebration layer. Particles are built on the crossing, animated
   once through WAAPI and removed — never a standing tween, and transform +
   opacity only, so nothing here can touch layout. */
.rl-pop{position:absolute;inset:0;pointer-events:none}
.rl-pop i{position:absolute;top:50%;width:5px;height:8px;border-radius:1px}
.rl-key{position:relative;height:14px;margin-top:7px;font-size:10.8px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-key span{position:absolute;left:0;transition:color .3s}
.rl-key span.mid{left:60%;transform:translateX(-50%)}
.rl-key span:last-child{left:auto;right:0}
.rl-key span.on{color:#2f7d32;font-weight:600}
.rl-key span.on::before{content:"\2713\00a0"}
html[data-theme="dark"] .rl-key span.on{color:#54c95b}
.rl-nudge .won{color:#2f7d32;font-weight:600}
html[data-theme="dark"] .rl-nudge .won{color:#54c95b}
.rl-nudge{margin:10px 0 6px;font-size:13.4px;line-height:1.45;color:var(--ink)}
.rl-nudge b{color:var(--acc);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* out-of-stock variant: words only, no icon */
.sz-oos{margin-left:auto;font-size:12.5px;font-weight:600;color:#c0392b;white-space:nowrap}
html[data-theme="dark"] .sz-oos{color:#ff8a80}
.size:has(input:disabled){opacity:.72;cursor:not-allowed;box-shadow:none}
.size:has(input:disabled):hover{border-color:var(--line)}

/* ── mixing essentials rail ─────────────────────────────────────────────── */
.dcell-c{border-left:1px solid var(--line);padding:22px 20px}
.mx-sticky{position:sticky;top:103px}
.mx-h{margin:0 0 14px;font-family:"Sora",sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--acc);text-align:center;text-wrap:balance}
.mxcard{border:1.5px solid var(--line-strong);border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,var(--surface));padding:14px 14px 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mx-stage{width:100%;height:150px;border-radius:10px;background:radial-gradient(70% 70% at 50% 44%,#16243a,#0a1322);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mx-stage img{height:86%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.mxcard .top{margin-top:11px}
.mx-nm{margin:7px 0 0;font-family:"Sora",sans-serif;font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink)}
.mx-pr{margin:6px 0 0;font-family:"Barlow","Sora",sans-serif;font-weight:600;font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.mx-acts{display:flex;gap:7px;margin-top:12px;width:100%}
.mx-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:"Sora",sans-serif;font-weight:600;font-size:13px;border:none;border-radius:10px;background:var(--sig);color:var(--on-mint,#fff);padding:11px 12px;cursor:pointer;box-shadow:0 5px 14px rgba(47,107,224,.24);transition:filter .2s}
.mx-add:hover{filter:brightness(1.08)}
.mx-add svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.mx-like{flex:0 0 auto;width:41px;height:41px;border:1.5px solid var(--line-strong);background:var(--page);border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:color .18s,border-color .18s}
.mx-like svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.mx-like:hover,.mx-like.on{color:var(--like);border-color:var(--like)}
.mx-like.on svg{fill:var(--like)}

/* the like button lives on the buy row, right of Add to cart. cart.js wires any
   .heart automatically and persists it — the ancestor [data-name] gives the slug. */
.likebtn{flex:0 0 auto;width:54px;height:54px;border:1.5px solid var(--line-strong);background:var(--page);border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:color .18s,border-color .18s,transform .16s var(--ease)}
.likebtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.likebtn:hover{transform:scale(1.04)}
.likebtn:hover,.likebtn.on{color:var(--like);border-color:var(--like)}
.likebtn.on svg{fill:var(--like)}

/* packaging reassurance, set in the page's body face */
.packline{margin:12px 0 0;font-size:13.2px;line-height:1.5;color:var(--muted)}

/* express checkout — solid midnight, the darkest control on the page */
.buynow{width:100%;margin-top:12px;font-family:"Sora",sans-serif;font-weight:600;font-size:15.5px;border:1.5px solid var(--mid);border-radius:12px;background:var(--mid);color:#fff;padding:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 20px rgba(11,26,36,.30),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .2s var(--spring),box-shadow .2s,filter .2s}
.buynow svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.buynow:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(11,26,36,.38),inset 0 1px 0 rgba(255,255,255,.18)}
.buynow:active{transform:none}
/* on a dark panel the midnight fill would vanish — a light edge separates it */
html[data-theme="dark"] .buynow{background:#04101a;border-color:rgba(255,255,255,.34);box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}

/* right cell — trust, three plain lines instead of a four-cell grid of cards */
.qtrust{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.qtrust li{position:relative;padding-left:20px;font-size:13.2px;line-height:1.45;color:var(--muted)}
.qtrust li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--tealx)}
.qtrust li b{color:var(--ink);font-weight:600}

/* right cell — qty + the one gradient CTA (named .dsr-cta on purpose: cart.js
   forces every .addcart / .addbtn to solid #2F6BE0 with !important, and the
   signature surface has to survive on the primary action) */
.buyrow{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--page)}
.stepper button{width:48px;height:54px;border:none;background:var(--page);font-size:20px;line-height:1;cursor:pointer;color:var(--ink);transition:background .16s}
.stepper button:hover{background:var(--surface)}
.stepper button:active{background:var(--line)}
.stepper input{width:52px;height:54px;border:none;text-align:center;font-family:"Sora";font-weight:600;font-size:16px;background:var(--page);color:var(--ink);-moz-appearance:textfield}
.stepper input:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:0}
/* the primary action sits proud of the panel: a defined edge plus a coloured
   lift, so it reads as raised rather than painted on */
/* no outline — the lift alone carries the contrast */
.dsr-cta{flex:1;min-width:230px;padding:18px 24px;font-family:"Sora";font-weight:600;font-size:15.5px;border:none;border-radius:12px;background:var(--sig);color:var(--on-mint,#fff);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px rgba(47,107,224,.30),inset 0 1px 0 rgba(255,255,255,.22);transition:filter .2s,transform .16s var(--ease),box-shadow .2s}
.dsr-cta:hover{filter:brightness(1.08);box-shadow:0 12px 28px rgba(47,107,224,.40),inset 0 1px 0 rgba(255,255,255,.28)}
.dsr-cta:active{transform:scale(.985)}
.dsr-cta .tot{font-variant-numeric:tabular-nums}
.securenote{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;font-size:12.2px;color:var(--muted);text-align:center}
.securenote svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2}

/* right cell — trust cells (.tcard vocabulary, de-shadowed to stay a field) */
.tcard{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}
.tcard .cell{display:flex;align-items:flex-start;gap:11px}
.tcard .tic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--page);color:var(--acc);border:1px solid var(--line)}
.tcard .tic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tcard .txt b{font-family:"Sora";font-weight:600;font-size:13.5px;display:block;color:var(--ink);line-height:1.25}
.tcard .txt small{font-size:12.2px;color:var(--muted);line-height:1.45;display:block;margin-top:2px}

/* right cell — one paragraph on what it is, then out of the way */
.profile{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.profile p{margin:0;font-size:14.6px;line-height:1.68;color:var(--muted);max-width:66ch}
.profile p b{color:var(--ink);font-weight:600}
.pubmed{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:11px 16px;border:1.5px solid var(--line-strong);border-radius:11px;font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--ink);transition:border-color .2s,color .2s,background .2s}
.pubmed svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pubmed:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.pubmed .ex{font-family:var(--mono);font-size:12px}

/* ── the certificate panel: the honest answer to a fake "live" monitor ── */
.cert{position:relative;padding:26px 28px 28px;background:var(--surface);border-radius:0 0 21px 21px}
.cert .top-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left center}
.cert-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:6px}
.cert-head h2{font-size:19px}
.cert-head .lot{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.cert-note{margin:0 0 20px;font-size:13.2px;line-height:1.6;color:var(--muted);max-width:74ch}
.cert-note b{color:var(--ink);font-weight:600}
.cert-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start}
.cdata{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--page);overflow:hidden}
.cdata li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 15px}
.cdata li + li{border-top:1px solid var(--line)}
.cdata .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cdata .v{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.coalink{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--acc)}
.coalink .ar{transition:transform .2s var(--ease)}
.coalink:hover .ar{transform:translateX(3px)}
.chrom{margin:0;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--page);padding:14px 16px 12px}
.chrom .ch-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:6px}
.chrom .ch-t span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* the trace keeps a legible minimum width and scrolls inside its own box on
   phones rather than shrinking its axis labels into illegibility */
.chrom-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.chrom svg{display:block;width:100%;min-width:540px;height:auto}
.chrom .axis{stroke:var(--line-strong);stroke-width:1;fill:none}
.chrom .grid{stroke:var(--line);stroke-width:1}
.chrom .tick{font-family:var(--mono);font-size:9px;fill:var(--muted)}
.chrom .trace{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chrom .area{fill:var(--acc);opacity:.11;stroke:none}
.chrom .plabel{font-family:var(--mono);font-size:9.5px;fill:var(--ink);letter-spacing:.06em}
.chrom .pstem{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 3}

/* ── 3. full-bleed technical specification ─────────────────────────── */
.specsec{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;margin-top:8px}
.spec-in{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;align-items:start}
.spec-l{position:sticky;top:132px}
.spec-l h2{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.spec-l p{font-size:14.4px;line-height:1.7;color:var(--muted);margin:14px 0 0;max-width:40ch}
.spec-l .go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--acc)}
.spec-l .go .ar{transition:transform .2s var(--ease)}
.spec-l .go:hover .ar{transform:translateX(3px)}
.tblwrap{overflow-x:auto}
.spectbl{width:100%;max-width:1080px;min-width:520px;border-collapse:collapse;font-size:14px}
.spectbl caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:11px}
/* the label column and the prose values ride the inherited body face (Inter,
   set once in /proto-base.css) instead of restating the family here — one
   place owns the brand face, and this file names no font it doesn't own. */
.spectbl th{text-align:left;font-weight:500;font-size:13.4px;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:13px 16px;width:34%;vertical-align:top}
.spectbl td{font-family:var(--mono);font-size:13px;color:var(--ink);border:1px solid var(--line);padding:13px 16px;vertical-align:top;line-height:1.55}
.spectbl td.pl{font-family:inherit;font-size:13.6px;color:var(--muted)}

/* ── 4. related research reading ─────────────────────────────── */
.rread{padding:64px 0}
.rread h2{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.rread .rr-sub{font-size:15.4px;line-height:1.7;color:var(--muted);margin:14px 0 26px;max-width:62ch}
.rr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.rr-card{display:block;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px;color:inherit;transition:border-color .2s,transform .18s var(--ease),box-shadow .2s}
.rr-card:hover{border-color:var(--acc-line);transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,107,224,.12)}
.rr-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.rr-card h3{font-size:16.5px;line-height:1.25;margin:0 0 7px}
.rr-card p{font-size:13.6px;line-height:1.62;color:var(--muted);margin:0}

/* ── 5. FAQ ────────────────────────────────────────────────────────── */
.faqsec{border-top:1px solid var(--line);padding:64px 0}
.faq-in{max-width:1000px}
.faqsec h2{font-size:clamp(24px,2.4vw,30px);line-height:1.1;margin-bottom:8px}
.faqsec .fsub{font-size:14.4px;color:var(--muted);margin:0 0 26px;max-width:66ch}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:19px 4px;font-family:"Sora";font-weight:600;font-size:16px;line-height:1.4;color:var(--ink);transition:color .18s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acc)}
.qa summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.qa .pm{flex:none;width:26px;height:26px;margin-top:1px;border-radius:8px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--muted);transition:border-color .18s,color .18s}
.qa summary:hover .pm{border-color:var(--acc);color:var(--acc)}
.qa .pm::before{content:"";width:11px;height:1.5px;background:currentColor;position:absolute}
.qa .pm::after{content:"";width:1.5px;height:11px;background:currentColor;position:absolute;transition:transform .22s var(--ease)}
.qa[open] .pm::after{transform:scaleY(0)}
.qa .pm{position:relative}
.qa .ans{padding:0 4px 22px;max-width:76ch}
.qa .ans p{margin:0 0 11px;font-size:14.6px;line-height:1.72;color:var(--muted)}
.qa .ans p:last-child{margin-bottom:0}
.qa .ans a{color:var(--acc);font-weight:600;border-bottom:1px solid transparent}
.qa .ans a:hover{border-color:var(--acc)}

/* ── 6. related research standards ─────────────────────────────────── */
.relsec{border-top:1px solid var(--line);padding:60px 0 96px}
.rel-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:6px}
.relsec h2{font-size:clamp(22px,2.2vw,28px)}
.relsec .allp{font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--acc)}
.relsec .rsub{font-size:13.6px;color:var(--muted);margin:0 0 24px;max-width:70ch}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--page);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pc:hover{transform:translateY(-5px);box-shadow:var(--sh-1);border-color:var(--line-strong)}
.pc .pv{height:140px;background:radial-gradient(70% 80% at 50% 42%,#16243a,#0a1322);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc .pv img{height:118px;width:auto;object-fit:contain;-webkit-mask-image:radial-gradient(62% 60% at 50% 48%,#000 62%,transparent 100%);mask-image:radial-gradient(62% 60% at 50% 48%,#000 62%,transparent 100%)}
.pc-b{display:flex;flex-direction:column;flex:1;padding:0 16px 16px}
.pc .top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid var(--line)}
/* colour + the green ✓ glyph come from cart.js's central #pp-stockbadge block
   (the same one ~101 pages inherit) — never restated here. Without cart.js this
   falls back to --ink, which clears 4.5:1 in both themes. */
.pc .instock{font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.pc .cat{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.pc .nm{font-family:"Sora";font-weight:600;font-size:18px;margin:4px 0 0}
.pc .pr{font-family:"Sora";font-weight:600;font-size:16px;margin:6px 0 0;color:var(--ink)}
.pc .cmeta{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;align-items:flex-end}
.pc .formula{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pc .acts{display:flex;gap:7px;margin-top:10px}
.pc .addbtn{flex:1;font-family:"Sora";font-weight:600;font-size:12.5px;border:none;border-radius:9px;background:var(--mint,#2F6BE0);color:var(--on-mint,#fff);padding:10px 13px;cursor:pointer;transition:filter .2s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.pc .addbtn:hover{filter:brightness(1.08)}
.pc .addbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pc .heart{position:relative;border:1px solid var(--line-strong);background:var(--page);border-radius:9px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;transition:.18s}
.pc .heart svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.pc .heart:hover,.pc .heart.on{color:var(--like);border-color:var(--like)}
.pc .heart.on svg{fill:var(--like)}

/* ── 7. sticky compact buy bar ─────────────────────────────────────── */
.sbuy{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--page);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.10);transform:translateY(101%);transition:transform .28s var(--ease);will-change:transform}
.sbuy.on{transform:none}
.sb-in{max-width:1640px;margin:0 auto;padding:12px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sb-l{display:flex;align-items:center;gap:14px;min-width:0}
.sb-th{width:44px;height:44px;flex:none;border-radius:10px;background:radial-gradient(75% 75% at 50% 40%,#16243a,#0a1322);display:grid;place-items:center;overflow:hidden}
.sb-th img{height:40px;width:auto;object-fit:contain}
.sb-tx{min-width:0}
.sb-tx b{display:block;font-family:"Sora";font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-tx small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.sb-r{display:flex;align-items:center;gap:10px;flex:none}
.sb-r .stepper button{width:40px;height:44px;font-size:18px}
.sb-r .stepper input{width:44px;height:44px;font-size:15px}
.sb-r .dsr-cta{min-width:180px;padding:13px 20px;font-size:14.5px}

/* ── responsive ────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .cert-grid{grid-template-columns:minmax(0,1fr)}
  .spec-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .spec-l{position:static}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1180px){
  .dsr-grid{grid-template-columns:minmax(0,.6fr) minmax(0,1.08fr) 224px}
  .dcell-c{padding:18px 14px}
}
@media(max-width:1023px){
  .dsr-grid{grid-template-columns:minmax(0,1fr)}
  /* Stacked, the research-use block sat between the photo and the price and pushed
     the buy button under the fold. Flattening both wrappers with display:contents
     makes the photo, the buy column and the compliance block direct grid children,
     so the compliance block can move below the buy column with `order`. Source
     order is untouched, so screen-reader and no-CSS reading order still hold. */
  .dcell-a,.acol{display:contents}
  .vstage{order:1;margin:18px 18px 0}
  .dcell-b{order:2}
  .dcell-c{order:3;border-left:0;border-top:1px solid var(--line);padding:18px}
  /* the trust grid and Buy now live under the photo on desktop; stacked they must
     still fall AFTER the buy column, or they push Add to cart 300px under the fold */
  .tcard{order:4;margin:0 18px}
  .buynow{order:5;margin:14px 18px 4px;width:auto}
  .ruse{order:4;margin:0 18px 20px}
  .acol{position:static}
  .cell-rule{display:none}
  .dcell-b{padding:18px 22px 22px}
  /* 761–1023 was stacking the layout while keeping desktop sizing, which put the
     button 163px under the fold on a tablet. The stage carries most of that. */
  .vstage{height:170px}
  .pimg{height:80%}
  .dsr h1{font-size:31px}
  .dcrumb{padding:12px 0 9px}
  .dsr-bar{padding:10px 20px}
  .pcell{margin-top:11px;padding:9px 16px 11px}
  .pcell .fig{font-size:36px}
  .badgerow{margin-top:12px;gap:8px}
  .fmt{margin-top:14px}
  .buyrow{margin-top:14px}
}
@media(max-width:760px){
  .dcrumb{padding:16px 0 12px}
  .dsr{border-radius:18px}
  .dsr-bar{padding:12px 18px}
  /* ── phones: everything above Add to cart is on a budget ──────────────
     Header 197 + this stack has to land the button inside 812px. Each cut
     below is measured, not cosmetic. ── */
  .dcell-b{padding:14px 18px 18px}
  .vstage{height:208px;margin:12px 14px 0}
  .ruse{margin:0 14px 16px}
  .pimg{height:176px}
  .dcrumb{padding:11px 0 8px;font-size:12px}
  /* the status bar wrapped to three lines and cost 115px. CAS is the line that
     does identity work; LOT and REF repeat the spec table, and the dispatch
     origin repeats the trust list two blocks down. */
  /* the bar wrapped to three lines (81px). CAS is the identity line; the word
     DOSSIER and the SSL note are desktop chrome. */
  .dsr-bar{padding:8px 16px}
  .dsr-ref{flex-direction:row;align-items:center;gap:6px}
  .dsr-bar .top{display:none}
  /* price: label and unit ride the same line as the figure */
  .pcell{padding:10px 14px 12px;gap:2px 10px}
  .pcell .fig{font-size:31px}
  .pcell .lab{grid-column:1;font-size:9.5px}
  .pcell .unit{grid-row:1;grid-column:2;justify-self:end;font-size:9.5px}
  .shipline{margin-top:8px;font-size:12.4px;gap:7px}
  /* the two badges share one row on a phone rather than stacking */
  .badgerow{margin-top:10px;gap:6px;flex-wrap:nowrap}
  .vbadge{flex:1 1 0;min-width:0;padding:7px 9px;font-size:11.5px;gap:6px;justify-content:center}
  .vbadge .ar{display:none}
  .vbadge svg,.vbadge .gtick{width:15px;height:15px}
  .vt{padding:24px 3px 2px}
  .vt-d{font-size:19px}
  .vt-q,.vt-u{font-size:11.5px}
  .dsr h1{font-size:29px}
  .dsr h1 .aka{margin-top:6px;font-size:12px}
  .pcell{margin-top:12px}
  .pcell .fig{font-size:38px}
  /* one format = a radio group with nothing to choose. It stays in the DOM for
     multi-size products, but on a phone it collapses to a single compact line. */
  .fmt{margin-top:12px}
  .fmt legend{display:none}
  /* three stacked tiles cost 110px of fold on a phone. As a 3-up row they read
     the same and cost 60px: the radio dot and the per-tile stock badge go, the
     selected state is carried by the tile's own border and fill. */
  .fmt{margin-top:18px}
  .sizes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  /* the base rule's min-width:190px made three tiles 570px wide — hence min-width:0 */
  .size{flex:none;min-width:0;padding:9px 6px;gap:0;flex-direction:column;align-items:center;text-align:center}
  .size .sz-t{min-width:0}
  .size .tick,.size .sz-stk{display:none}
  .size .sz-t{flex-direction:column;align-items:center;gap:1px}
  .size b{font-size:13px}
  .size .sz-p{font-size:12px}
  .size b{font-size:14px}
  .size .sz-stk{display:none}
  .buyrow{margin-top:12px}
  .cert{padding:22px 18px 24px}
  .tcard{grid-template-columns:1fr}
  .rung{grid-template-columns:1fr auto;row-gap:2px}
  .rung .th{grid-column:1/-1}
  .specsec,.rread,.faqsec{padding:48px 0}
  .relsec{padding:48px 0 90px}
  .sb-tx small{display:none}
  /* the compact bar drops to the figure alone. The label is CLIPPED, not
     display:none — it has to stay in the button's accessible name, or the
     phone CTA announces itself as "€360.00" with no verb. The separator is
     decorative and aria-hidden, so it can leave outright.
     clip:rect() rather than clip-path — the no-clip-path perf rule. */
  .sb-r .dsr-cta{min-width:0;position:relative}
  .sb-r .dsr-cta .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sb-r .dsr-cta .sep{display:none}
}
/* the spec sheet stops being a scrolling table on phones and becomes stacked
   label/value blocks — no cut-off values, no sideways hunting */
@media(max-width:620px){
  .spectbl{min-width:0;max-width:none}
  .spectbl th,.spectbl td{display:block;width:auto;border:0}
  .spectbl tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
  .spectbl th{padding:11px 14px 7px}
  .spectbl td{padding:0 14px 12px;background:var(--page)}
}
@media(max-width:560px){
  .rgrid{grid-template-columns:1fr}
  .dsr h1{font-size:31px}
  .dsr-ref{flex-direction:column;align-items:flex-start;gap:5px}
  .dsr-ref .sep{display:none}
  .cdata li{flex-direction:column;align-items:flex-start;gap:3px}
  .cdata .v{text-align:left}
  /* one row again, not two. Stacking them cost 63px of fold. The stepper is
     pinned narrow and the CTA takes the rest with nowrap, so the label cannot
     break across lines the way it did when the button was flex-sized. */
  .buyrow{gap:8px;flex-wrap:nowrap}
  .stepper{flex:0 0 auto}
  .stepper button{width:36px;height:50px;font-size:18px}
  .stepper input{width:34px;height:50px;font-size:15px}
  .dsr-cta{flex:1 1 auto;min-width:0;padding:15px 10px;font-size:14.5px;gap:6px;white-space:nowrap}
  .dsr-cta .lbl{font-size:0}
  .dsr-cta .lbl::after{content:"Add";font-size:14.5px}
  .stepper button{width:32px}
  .stepper input{width:30px}
  .likebtn{width:44px;height:50px}
  .likebtn svg{width:19px;height:19px}
  .dsr-cta .off{font-size:10.5px;padding:2px 5px}
  .sb-l{gap:10px}
  .sb-th{display:none}
}
@media(max-width:400px){
  /* was 268px. The stage is the last big block between the fold and the buy
     button, and 180px still shows the vial clearly at this width. */
  .vstage{height:132px;margin-top:8px}
  .pimg{height:auto;width:min(146px,48vw);max-height:116px}
  .dcrumb{padding:7px 0 5px}
  .dsr h1{font-size:26px}
  .dcell-b{padding:12px 16px 16px}
}
@media(prefers-reduced-motion:reduce){
  .sbuy{transition:none}
  .ltrack i{transition:none}
}

/* ═══════════ P2 LEDGER ═══════════ */

.dcell-b{padding:30px 34px 34px}
.dsr h1{font-size:clamp(32px,3.4vw,42px)}
.badgerow{gap:0 24px;margin-top:12px}
.vbadge{padding:0;border:0;background:none;font-size:13px;color:var(--muted);font-weight:500}
.vbadge:hover{box-shadow:none;color:var(--acc)}
.vbadge .ar{display:none}

/* everything transactional sits inside ONE framed ledger */
.pcell{margin-top:24px;border:1.5px solid var(--line-strong);border-bottom:0;border-radius:14px 14px 0 0;background:var(--page);padding:18px 20px 16px}
.pcell .pfx{font-size:12px;color:var(--faint)}
.pcell .fig{font-size:clamp(36px,3.6vw,46px);font-weight:600}
.pcell .was{font-size:18px}

.fmt{margin:0;border-inline:1.5px solid var(--line-strong);border-top:1px solid var(--line);background:var(--page);padding:16px 20px}
.fmt legend{float:left;width:100%;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sizes{display:flex!important;gap:7px;clear:both}
.size{flex:1;min-width:0;border-radius:9px;padding:10px 8px;box-shadow:none;flex-direction:column;gap:1px;text-align:center;justify-content:center}
.size .tick{display:none}
.size .sz-t{flex-direction:column;align-items:center;gap:0}
.size b{font-size:13.4px}
.size .sz-p{font-size:12px}
.size .sz-stk,.size .sz-oos{display:none}
.size:has(input:checked){box-shadow:inset 0 -3px 0 var(--acc)}

/* tiers become one quiet ledger row, still clickable */
.vtiers{margin:0;border-inline:1.5px solid var(--line-strong);border-top:1px solid var(--line);background:var(--page);padding:14px 20px}
.vt-head{margin:0 0 8px}
.vt-head .t{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.vt-nudge{border:0;background:none;padding:0;font-size:12.5px;color:var(--acc)}
.vt-grid{display:flex!important;gap:7px;position:static}
.vt-grid::before{display:none}
.vt-grid > li{flex:1}
.vt{padding:8px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);align-items:center;gap:1px}
.vt::before{display:none}
.vt-q{font-size:11.5px}
.vt-d{font-size:16px}
.vt-u{font-size:11px}
.vt.on{border-color:var(--acc);background:var(--acc-soft)}

/* unlocks: one row, gauge + sentence */
.rl{margin:0;border:1.5px solid var(--line-strong);border-top:1px solid var(--line);border-bottom:0;border-radius:0;background:var(--page);padding:14px 20px 16px}
.rl-top{gap:4px 12px}
.rl-lab{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rl-gauge{margin-top:9px}
.rl-fuel{height:5px}
.rl-notch{display:none}.rl-pop{display:none}
.rl-key{margin-top:6px;font-size:11px}
.rl-nudge{margin-top:9px;font-size:13px}
.rl-rungs{display:none}

/* the action closes the ledger */
.buyrow{margin:0;border:1.5px solid var(--line-strong);border-top:1px solid var(--line);border-radius:0 0 14px 14px;background:color-mix(in srgb,var(--ink) 4%,var(--surface));padding:16px 20px;gap:10px}
.dsr-cta{box-shadow:none;border-radius:10px}
.stepper{border-radius:10px;background:var(--page)}
.likebtn{border-radius:10px;box-shadow:none;background:var(--page)}

.tcard{margin-top:20px;border:0;background:none;padding:0;gap:12px 22px}
.tcard .tic{width:28px;height:28px;border:0;background:none;color:var(--acc)}
.tcard .tic svg{width:16px;height:16px}
.buynow{margin-top:16px;box-shadow:none;border-radius:11px}
.dcell-c{padding:30px 22px}
.mxcard{border-width:1px}
@media(max-width:1023px){.dcell-b{padding:24px 22px 26px}}
@media(max-width:760px){.dcell-b{padding:16px 16px 20px}.pcell,.fmt,.vtiers,.rl,.buyrow{padding-inline:14px}}


/* ── P2 corrections ──────────────────────────────────────────────────────
   The ledger is compact already; only the phone needed room. */
@media(max-width:1023px){
  .dcell-b{padding:20px 20px 24px}
  .pcell{padding:14px 18px 13px}
  .pcell .fig{font-size:38px}
  .fmt{padding:13px 18px}
  .buyrow{padding:14px 18px}
}
@media(max-width:760px){
  .dcell-b{padding:14px 16px 18px}
  .dsr h1{font-size:27px}
  .badgerow{margin-top:9px;gap:6px 16px}
  .vbadge{font-size:12.2px}
  .pcell{margin-top:16px;padding:12px 14px 11px}
  .pcell .fig{font-size:34px}
  .fmt{padding:11px 14px}
  .fmt legend{margin-bottom:7px}
  .size{padding:9px 5px}
  .size b{font-size:12.6px}
  .buyrow{padding:12px 14px}
  .dsr-cta{padding:15px 12px;font-size:14.5px}
}


/* The ledger closes on the action: price → variant → quantity + total. Keeping
   the button there is what holds it above the fold. The two savings mechanics
   sit under the frame as a quieter footnote block, so they inform without
   competing with the thing you came to press. */
.buyrow{border-radius:0 0 14px 14px;border-bottom:1.5px solid var(--line-strong)}
.vtiers{margin-top:18px;border:0;border-radius:0;background:none;padding:0}
.vt-head{margin-bottom:9px}
.rl{margin-top:14px;border:0;border-radius:0;background:none;padding:0}
.rl-top{display:none}
.rl-gauge{margin:0}
.rl-fuel{height:3px}
.rl-key{margin-top:7px}
.rl-nudge{margin-top:9px}

/* ═══════════ L3 RECEIPT ═══════════ */

.dcell-b{padding:30px 34px 34px}
.pcell{padding:16px 20px 14px}
.pcell .fig{font-size:clamp(34px,3.4vw,42px)}
.fmt{padding:14px 20px}

/* the itemised block */
.rcpt{border-inline:1.5px solid var(--line-strong);border-top:1px solid var(--line);
      background:var(--page);padding:13px 20px 14px}
.rcpt dl{margin:0;display:flex;flex-direction:column;gap:6px}
/* the row is the grid, not the list — as a grid the <dl> made each row one
   cell and paired them two-across */
.rcpt .ln{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:baseline}
.rcpt dt{font-size:12.8px;color:var(--muted)}
.rcpt dt em{font-style:normal;color:var(--faint);font-size:11.5px;margin-left:5px}
.rcpt dd{margin:0;font-size:13px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rcpt .save dt,.rcpt .save dd{color:#2f7d32}
html[data-theme="dark"] .rcpt .save dt,html[data-theme="dark"] .rcpt .save dd{color:#54c95b}
.rcpt .free dd{color:#2f7d32;font-weight:600}
html[data-theme="dark"] .rcpt .free dd{color:#54c95b}
.rcpt .tot{border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.rcpt .tot dt{font-family:"Sora",sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.rcpt .tot dd{font-family:"Barlow","Sora",sans-serif;font-weight:600;font-size:20px;color:var(--ink)}
.rcpt .hide{display:none}

.buyrow{padding:15px 20px}
.dsr-cta .tot{display:none}
.dsr-cta .off{display:none}

.vtiers{margin-top:20px}
.rl{margin-top:15px}
.rl-key{display:none}
@media(max-width:760px){.dcell-b{padding:14px 16px 18px}.rcpt{padding:12px 14px}}


/* ── L3 fold corrections ────────────────────────────────────────────────
   The itemised block is the point of this version, but four rows above the
   button cost 90px. Desktop keeps the full itemisation on tighter rows;
   below 1024px it collapses to what a buyer actually needs before pressing —
   the saving and the total — since the line and shipping rows repeat figures
   already shown above and in the unlock line. */
.rcpt{padding:11px 20px 12px}
.rcpt dl{gap:5px 14px}
.rcpt dt,.rcpt dd{font-size:12.4px}
.rcpt .tot{padding-top:7px}
.rcpt .tot dd{font-size:19px}
.pcell{padding:14px 20px 12px}
.pcell .fig{font-size:clamp(32px,3.2vw,39px)}
.fmt{padding:12px 20px}
.buyrow{padding:13px 20px}
@media(max-width:1023px){
  .dcell-b{padding:20px 20px 24px}
  .rcpt{padding:10px 18px 11px}
  .rcpt .ln:not(.tot):not(.save){display:none}
  .pcell{margin-top:16px;padding:12px 18px 11px}
  .pcell .fig{font-size:34px}
  .fmt{padding:11px 18px}
  .buyrow{padding:12px 18px}
}
@media(max-width:760px){
  .dcell-b{padding:13px 15px 17px}
  .dsr h1{font-size:27px}
  .badgerow{margin-top:9px;gap:6px 16px}
  .vbadge{font-size:12.2px}
  .pcell{margin-top:13px;padding:11px 14px 10px}
  .pcell .fig{font-size:31px}
  .fmt{padding:10px 14px}
  .rcpt{padding:9px 14px 10px}
  .rcpt .tot dd{font-size:18px}
  .buyrow{padding:11px 14px}
  .dsr-cta{padding:15px 12px;font-size:14.5px}
}

/* Under 1024px the CTA already carries the total, so an itemised block ABOVE
   it repeats the figure and costs 45px of fold. It moves below the button
   there and keeps its full detail; desktop is unchanged. */
@media(max-width:1023px){
  .dcell-b{display:flex;flex-direction:column}
  .dcell-b > .cell-rule{order:0}
  .dcell-b > h1{order:1}
  .dcell-b > .badgerow{order:2}
  .dcell-b > .pcell{order:3}
  .dcell-b > .fmt{order:4}
  .dcell-b > .buyrow{order:5;border-radius:0 0 14px 14px;border-bottom:1.5px solid var(--line-strong)}
  .dcell-b > .rcpt{order:6;margin-top:16px;border:1.5px solid var(--line-strong);border-radius:12px}
  .dcell-b > .rcpt .ln{display:grid!important}
  .dcell-b > .vtiers{order:7}
  .dcell-b > .rl{order:8}
}

/* ═══════════ R2 VAULT ═══════════ */

.dcell-b{padding:30px 34px 34px}
.dsr h1{font-size:clamp(30px,3.2vw,40px)}

/* the ledger is one dark slab; internal divisions are light hairlines */
.pcell,.fmt,.rcpt,.buyrow{background:var(--mid)!important;border-color:rgba(255,255,255,.13)!important}
.pcell{border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:14px 14px 0 0;padding:20px 24px 18px}
.pcell .pfx{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#8da3ad}
.pcell .prow{margin-top:4px}
.pcell .fig{color:#fff;font-size:clamp(36px,3.7vw,46px);font-weight:600}
.pcell .was{color:#7d919c}
.pcell .unit{color:#8da3ad;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

.fmt{border-inline:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.10);padding:16px 24px}
.fmt legend{color:#8da3ad;font-size:10.5px;letter-spacing:.15em}
.size{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.14)!important;border-radius:9px}
.size b{color:#fff}
.size .sz-p{color:#9fb3bd}
.size:hover{border-color:rgba(255,255,255,.30)!important}
.size:has(input:checked){background:rgba(122,171,255,.16)!important;border-color:#7aabff!important;
                          box-shadow:inset 0 -3px 0 #7aabff}
.size:has(input:checked) b{color:#fff}
.size:has(input:disabled){background:rgba(255,255,255,.02)!important}
.size .sz-oos{color:#ff9a90}

.rcpt{border-inline:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.10);padding:15px 24px 16px}
.rcpt dt{color:#9fb3bd;font-size:12.6px}
.rcpt dt em{color:#7d919c}
.rcpt dd{color:#e8f1f5;font-size:12.8px}
.rcpt .save dt,.rcpt .save dd{color:#7fdc9a}
.rcpt .free dd{color:#7fdc9a}
.rcpt .tot{border-top:1px solid rgba(255,255,255,.16);padding-top:11px}
.rcpt .tot dt{color:#fff;font-size:13.5px}
.rcpt .tot dd{color:#fff;font-size:21px}

.buyrow{border:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.10);
        border-radius:0 0 14px 14px;padding:16px 20px;gap:10px}
.stepper{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.20)!important;border-radius:10px}
.stepper button{background:none;color:#fff}
.stepper button:hover{background:rgba(255,255,255,.10)}
.stepper input{background:none;color:#fff}
.dsr-cta{border-radius:10px;box-shadow:0 6px 20px rgba(47,107,224,.34)}
.likebtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20);color:#cfe0ea;border-radius:10px;box-shadow:none}
.likebtn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.32)}

.vtiers{margin-top:20px}
.vt-head .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.vt{border-radius:9px}
.rl{margin-top:15px}
.buynow{border-radius:11px;background:none;color:var(--ink);border:1.5px solid var(--line-strong);box-shadow:none}
.buynow:hover{background:var(--surface);transform:none;box-shadow:none}
html[data-theme="dark"] .buynow{background:none;border-color:var(--line-strong)}
@media(max-width:1023px){.dcell-b{padding:20px 20px 24px}.pcell,.fmt,.rcpt,.buyrow{padding-inline:18px}}
@media(max-width:760px){.dcell-b{padding:14px 15px 18px}.pcell,.fmt,.rcpt,.buyrow{padding-inline:14px}
  .pcell{padding-block:14px 12px}.pcell .fig{font-size:32px}.fmt{padding-block:11px}
  .rcpt{padding-block:12px 13px}.buyrow{padding-block:12px}}


/* fold trim */
.dcell-b{padding-top:24px}
.dsr h1{font-size:clamp(28px,3vw,36px)}
.pcell{margin-top:18px;padding:16px 24px 14px}
.pcell .fig{font-size:clamp(32px,3.3vw,40px)}
.fmt{padding:13px 24px}
.rcpt{padding:12px 24px 13px}
.rcpt dl{gap:6px}
.rcpt .tot{padding-top:9px}
.rcpt .tot dd{font-size:19px}
.buyrow{padding:14px 18px}

@media(max-width:760px){
  .dcell-b{padding:13px 15px 17px}
  .dsr h1{font-size:26px}
  .pcell{margin-top:12px;padding:12px 14px 10px}
  .pcell .fig{font-size:30px}
  .fmt{padding:10px 14px}
  .rcpt{padding:11px 14px 12px}
  .rcpt .tot dd{font-size:18px}
  .buyrow{padding:11px 12px}
  .dsr-cta{padding:14px 12px;font-size:14px}
}

/* ═══════════ V1 OBSIDIAN ═══════════ */

.pcell,.fmt,.rcpt,.buyrow{background:#050d15!important;border-color:rgba(255,255,255,.10)!important}
.fmt,.rcpt,.buyrow{border-top-color:rgba(255,255,255,.07)!important}
.size{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.11)!important}
.size:has(input:checked){background:rgba(122,171,255,.13)!important}
html[data-theme="dark"] .pcell,html[data-theme="dark"] .fmt,html[data-theme="dark"] .rcpt,
html[data-theme="dark"] .buyrow{background:#03080e!important}


/* ═══════════ POLISHED TIERS ═══════════ */

/* ── polished volume tiers ──────────────────────────────────────────────── */
.vtiers{margin-top:22px}
.vt-head{margin-bottom:2px;align-items:baseline}
.vt-head .t{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.vt-nudge{border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:var(--acc);letter-spacing:0;text-transform:none}
.vt-grid::before{background:var(--line)}
/* the live fill: --vtp is set by the rail script as the panel re-renders */
.vt-grid::after{content:"";position:absolute;left:16.66%;top:10px;height:2px;border-radius:2px;
  background:var(--sig);width:66.68%;transform:scaleX(var(--vts,0));transform-origin:left center;transition:transform .45s var(--ease);will-change:transform}
.vt{padding-top:28px}
.vt::before{width:15px;height:15px;top:3px;z-index:1;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--spring)}
/* reached rungs are solid; the highest reached carries a soft ring */
.vt.done::before{border-color:var(--acc);background:var(--acc)}
.vt.on::before{border-color:var(--acc);background:var(--acc);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent);transform:translateX(-50%) scale(1.05)}
.vt:hover:not(.on)::before{border-color:var(--acc)}
.vt-q{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.vt-d{font-size:21px;letter-spacing:-.015em}
.vt-u{font-size:12px;font-variant-numeric:tabular-nums}
.vt.on .vt-u{color:var(--ink)}
.rl{margin-top:14px}


/* ── tier rail: undo the inherited box treatment ────────────────────────────
   These files descend from P2, which restyled .vt into bordered cards and hid
   the rail. Everything below re-establishes the rail as the last word. */
.vt-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;position:relative!important}
.vt-grid::before{display:block!important;content:""!important;position:absolute!important;
  left:16.66%!important;right:16.66%!important;top:10px!important;height:2px!important;
  background:var(--line)!important;border-radius:2px!important}
.vt-grid > li{display:flex!important;flex:auto!important}
.vt{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  padding:28px 6px 2px!important;align-items:center!important;text-align:center!important;gap:3px!important;
  position:relative!important;flex-direction:column!important;width:100%!important}
.vt + .vt{box-shadow:none!important}
.vt::before{display:block!important;content:""!important;position:absolute!important;top:3px!important;
  left:50%!important;transform:translateX(-50%)!important;width:15px!important;height:15px!important;
  border-radius:50%!important;background:var(--page)!important;border:2px solid var(--line-strong)!important;z-index:1!important}
.vt.done::before,.vt.on::before{border-color:var(--acc)!important;background:var(--acc)!important}
.vt.on::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)!important;
  transform:translateX(-50%) scale(1.05)!important}
.vt:hover:not(.on)::before{border-color:var(--acc)!important}
.vt.on{background:none!important}

/* Buy now moves into the action row, above Add to cart. On the midnight row it
   takes a light outline: it is the higher-intent path, but the gradient stays
   the primary mark so the two do not compete as equals. */
.buyrow{flex-wrap:wrap}
.buyrow .buynow{flex:1 0 100%;order:-1;margin:0 0 10px;width:auto;border-radius:10px;padding:15px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.26);color:#fff;box-shadow:none}
.buyrow .buynow:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.40);
  transform:none;box-shadow:none}
.buyrow .buynow svg{stroke:#fff}
html[data-theme="dark"] .buyrow .buynow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}
@media(max-width:560px){.buyrow .buynow{padding:13px;font-size:14.5px;margin-bottom:9px}}

/* the Buy now row costs 66px, so the ledger gives it back: the vault reads the
   same, every band is simply tighter by a few pixels */
.pcell{padding:14px 24px 12px;margin-top:20px}
.pcell .fig{font-size:clamp(30px,3.1vw,38px)}
.fmt{padding:12px 24px}
.fmt legend{margin-bottom:8px}
.size{padding:9px 6px}
.rcpt{padding:11px 24px 12px}
.rcpt dl{gap:5px}
.rcpt .tot{padding-top:8px}
.rcpt .tot dd{font-size:18px}
.buyrow{padding:13px 18px}
.buyrow .buynow{padding:13px;margin-bottom:8px}
.stepper button{height:48px;width:40px}
.stepper input{height:48px}
.likebtn{width:48px;height:48px}
.dsr-cta{padding:15px 20px}
@media(max-width:1023px){
  .pcell{padding:12px 18px 10px;margin-top:16px}
  .fmt{padding:10px 18px}
  .rcpt{padding:10px 18px 11px}
  .buyrow{padding:11px 16px}
}
@media(max-width:760px){
  .pcell{padding:11px 14px 9px;margin-top:13px}
  .pcell .fig{font-size:29px}
  .fmt{padding:9px 14px}
  .rcpt{padding:9px 14px 10px}
  .buyrow{padding:10px 12px}
  .buyrow .buynow{padding:12px;margin-bottom:7px}
  .stepper button{height:44px;width:34px}
  .stepper input{height:44px}
  .likebtn{width:44px;height:44px}
}

/* last 12px: the vault header and the badge row carry the most slack */
.dcell-b{padding-top:24px}
.dsr h1{font-size:clamp(28px,3vw,36px)}
.badgerow{margin-top:10px}
.pcell{margin-top:17px}
@media(max-width:760px){
  .dcell-b{padding-top:13px}
  .dsr h1{font-size:26px}
  .badgerow{margin-top:8px}
  .pcell{margin-top:11px}
  .buyrow .buynow{padding:11px;margin-bottom:6px;font-size:14.5px}
}

/* final 6px on desktop */
@media(min-width:1024px){
  .buyrow .buynow{margin-bottom:6px}
  .rcpt dl{gap:4px}
  .dsr-cta{padding:14px 20px}
  .stepper button,.stepper input,.likebtn{height:46px}
  .likebtn{width:46px}
}

/* ── the shot fills its frame ──────────────────────────────────────────────
   retatrutide.png is a square 1400px photo carrying its own dark background,
   so the mask, the drop shadow and the stage's radial were all fighting it —
   the vial floated at 84% height inside a gradient that could never line up
   with the photo's own. object-fit:cover, and the frame IS the photo.
   Stacked layouts get a square stage rather than the full-width letterbox
   they had, because cover on a 714x170 box would crop the vial to a strip. */
.vstage{background:var(--mid);padding:0;overflow:hidden}
.pimg{width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:none!important;mask-image:none!important;filter:none;max-height:none}
.fmt legend.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fmt{padding-top:14px}
.dsr-bar{justify-content:flex-start}
@media(max-width:1023px){
  /* same height as the letterbox it replaces, so the fold is unchanged */
  .vstage{width:170px;aspect-ratio:1;height:auto;margin:18px auto 0}
  .pimg{width:100%;height:100%;max-height:none}
}
@media(max-width:760px){
  .vstage{width:132px;margin:12px auto 0}
}
@media(max-width:400px){
  .vstage{width:132px}
  .pimg{width:100%;height:100%;max-height:none}
}

/* the square stage costs 4px on a phone against the letterbox it replaced */
@media(max-width:760px){
  .vstage{width:124px;margin:10px auto 0}
}

/* ── slab: Abyss navy (#0A1830) ─────────────────────────────
   the product photo's own ground — the shot and the ledger become one material */
.pcell,.fmt,.rcpt,.buyrow{background:#0A1830!important;border-color:rgba(255,255,255,.11)!important}
.fmt,.rcpt,.buyrow{border-top-color:rgba(255,255,255,.075)!important}
html[data-theme="dark"] .pcell,html[data-theme="dark"] .fmt,
html[data-theme="dark"] .rcpt,html[data-theme="dark"] .buyrow{background:#081426!important}
/* the variant tiles sit ON the slab, so they lift from it rather than from black */
.size{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.11)!important}
.size:hover{border-color:rgba(255,255,255,.28)!important}
.vstage{background:#0A1830}
/* Buy now keeps a light outline against whatever the slab is */
.buyrow .buynow{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.24)}
.buyrow .buynow:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.38)}

/* the status bar is gone: the grid is now the first thing in the panel, so the
   top corners belong to it rather than to a bar that no longer exists */
.dsr-grid > *:first-child{border-top-left-radius:21px}
.dcell-c{border-top-right-radius:21px}
.pcell{border-top-left-radius:0}
@media(max-width:1023px){.dsr-grid > *:first-child,.dcell-c{border-radius:0}}

/* the specifier under the product name: what the molecule IS, never what it does */
.pdesc{margin:9px 0 0;font-size:13.4px;line-height:1.5;color:var(--muted);max-width:60ch}
.pdesc b{color:var(--ink);font-weight:600}
/* Some descriptors run to two lines on a phone (the blends especially, which
   have to name both constituents). Budget for two lines rather than one, or
   those pages push Add to cart under the fold. */
@media(max-width:760px){
  .pdesc{font-size:12.1px;line-height:1.4;margin-top:5px}
  .badgerow{margin-top:8px}
  .pcell{margin-top:10px}
  .vstage{width:118px;margin-top:8px}
}
/* ---- out of stock -----------------------------------------------------------
   The ledger tiles hide both stock labels to stay compact, which is right when
   a product is available and wrong when it is not: a sold-out page showed no
   stock state at all. The red label comes back, and the buy path is visibly
   disabled rather than merely inert - cart.js already refuses the line, but a
   live-looking button that does nothing is worse than a dead one. */
.size .sz-oos{display:block!important;margin:2px 0 0;font-size:12px;font-weight:600;color:#ff8a80}
/* an unavailable tile drops its price: the figure is already in the price cell
   above and in the receipt, and the third line was pushing the button off the
   fold on the sold-out pages whose descriptor also runs to two lines */
.size:has(input:disabled) .sz-p{display:none}
.dsr-cta[disabled],.buynow[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5);box-shadow:none}
.dsr-cta[disabled]:hover,.buynow[disabled]:hover{transform:none;filter:grayscale(.5);box-shadow:none}
/* the note lands just under the slab, on the light page - so it takes page
   colours, not the slab's */
.oos-note{margin:10px 0 0;font-size:12.8px;font-weight:600;color:#c0392b}
.oos-note a{color:var(--acc);font-weight:600;border-bottom:1px solid currentColor}
html[data-theme="dark"] .oos-note{color:#ff8a80}
/* Below 1024 the buy column is a flex column with explicit order values, so an
   un-ordered child sorts to order:0 and lands ABOVE the price - which is what
   pushed the button off the fold on all 14 sold-out pages. */
@media(max-width:1023px){ .dcell-b > .oos-note{order:9} }

/* ---- no photo yet -----------------------------------------------------------
   A missing file rendered the browser's broken-image glyph with the alt text
   beside it. A neutral panel with the vial mark reads as "photo pending". */
.pimg-none{width:100%;height:100%;display:grid;place-items:center;background:
  radial-gradient(70% 70% at 50% 40%,rgba(255,255,255,.055),transparent 70%)}
.pimg-none span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}

/* Peptide prose contains sequence strings with no spaces - tesamorelin's lede
   opens with a 78-character token that pushed the page 100px wide on a phone.
   Prose that can carry a sequence must be allowed to break. break-word rather
   than anywhere, so ordinary words still break only when they have to. */
.pd-lede,.rsch-b p,.pd-ans p,.rsch-refs li,.pd-warn li{overflow-wrap:break-word}
/* generated pages carry no prototype chrome */
body{padding-bottom:0}
/* pp-mobile v1 */
@media(max-width:760px){
  /* 1. FULL BLEED. 26px gutters each side cost 52px of a 390px screen and
        made the dark panel look like a card floating inside another card. */
  .wrap{padding-left:0;padding-right:0;max-width:none}
  .dsr{margin:0 0 22px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .dcell-b{padding:16px 16px 18px}
  .dcrumb{padding-left:16px;padding-right:16px}
  /* the footer keeps its gutter when the wrap goes full-bleed */
  .site-footer .wrap{padding-left:16px;padding-right:16px}

  /* 2. HEADER: 197px of a 844px screen was a quarter of the phone gone before
        any product. One row, search full-width beneath. */
  .header .topbar,.header .catnav{display:none}
  .top-ticker{padding:5px 0;font-size:9.5px}
  .top-ticker .marquee-inner span{padding-right:34px}
  .mb-in{padding:6px 12px 8px;gap:6px 10px;flex-wrap:wrap;align-items:center}
  .lock{order:1;display:flex;align-items:center;height:38px}
  .lock img,.lock svg{height:34px;width:auto;max-height:34px}
  .mb-right{order:2;margin-left:auto;gap:15px;height:38px;align-items:center}
  .search{order:3;flex:0 0 100%;width:100%;min-width:0;margin:0}
  .search input{padding:7px 0;font-size:15px}
  .modetog{display:none}
  main{padding-top:118px}

  /* 3. THE PRODUCT IMAGE. 118x118 inside a 390px screen is a thumbnail. */
  .vstage{width:100%;aspect-ratio:1/1;height:auto;max-height:360px;margin:0;border-radius:0}

  /* 4. BODY TEXT: hyphens:auto was breaking words mid-syllable. */
  .rsch-b p,.pd-lede,.pd-ans p,.pd-warn li,.rsch-refs li{
    hyphens:none;-webkit-hyphens:none;text-align:left}
  .rsch-in,.pdoss-in{padding-left:16px;padding-right:16px}
  .pd-spec{margin-inline:0}

  /* 5. STICKY BUY BAR: was 115px tall with a 24px blank button. */
  .sbuy{padding:0}
  .sb-in{display:flex;align-items:center;gap:9px;padding:9px 12px 9px;flex-wrap:nowrap}
  .sb-l{flex:0 1 auto;min-width:0;max-width:104px}
  .sb-th{display:none}
  .sb-in .sb-tx b{font-size:13px;line-height:1.15;white-space:normal;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .sb-tx small{display:none}
  .sb-r{flex:1;display:flex;gap:8px;min-width:0}
  .sb-r .stepper{flex:0 0 auto}
  .sb-r .stepper button{width:30px;height:42px}
  .sb-r .stepper input{width:26px;height:42px}
  .sb-r .dsr-cta{flex:1;min-width:0;padding:12px 8px;font-size:14px}
  /* the phone CSS absolutely-positions and clips .lbl inside .sb-r, which
     removes the label from flow (button collapses) AND clips away the ::after
     word - so the bar showed a product name and an empty button. */
  .sb-r .dsr-cta .lbl{position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip:auto;clip-path:none;white-space:nowrap}
  /* the WhatsApp bubble is injected by cart.js; at 88px it covered buttons */
  .pp-wa,.wa-fab,[class*="whatsapp"]{bottom:96px!important;
    width:54px!important;height:54px!important;right:12px!important}
  .pp-wa svg,.wa-fab svg{width:26px!important;height:26px!important}
}

@media(max-width:760px){
  .vstage{max-height:360px}

  /* hero: descriptor tight under the photo, name centred between it and
     the badge row (15px above, 15px below - founder-tuned) */
  .dcell-b{padding-top:8px}
  .dcell-b > .pdesc{margin-top:0}
  .dsr h1{margin-top:15px}
  .dcell-b > .badgerow{margin-top:15px}

  /* trust strip as a 2x2 grid, ABOVE the mixing-essentials rail, with the
     same 18px of air above and below (stack: image 1, buy 2, grid 3, rail 4) */
  .tcard{order:3;grid-template-columns:1fr 1fr;gap:14px 14px;padding:2px 0 0;margin:0 16px 18px}
  .dcell-c{order:4}
  .tcard .cell{display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-items:start}
  .tcard .tic{width:20px;height:20px;border:0;background:none}
  .tcard .tic svg{width:15px;height:15px}
  .tcard .txt b{font-size:12.8px;line-height:1.3}
  .tcard .txt small{font-size:11.8px;line-height:1.42;margin-top:1px}

  /* five-item nav pinned under the buy bar. Height pinned to 62px so the bar
     at bottom:62px sits flush on it by construction - no see-through slot. */
  .mnav{position:fixed;left:0;right:0;bottom:0;z-index:96;display:flex;height:62px;
    background:var(--mid);border-top:1px solid rgba(255,255,255,.12)}
  .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:0 2px;color:#cfe0ea;font-size:10px;
    letter-spacing:.01em}
  .mnav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
  .mnav a:active{background:rgba(255,255,255,.08)}
  .sbuy{bottom:62px}
  body{padding-bottom:126px}
  .pp-wa,.wa-fab,[class*="whatsapp"]{bottom:150px!important}

  /* Add to cart full width on top; stepper + heart share the middle row;
     Buy now closes the group (the page's own CSS pinned it on top) */
  .buyrow .dsr-cta{flex:1 0 100%;order:-1}
  .buyrow .stepper{flex:1}
  .buyrow .stepper input{flex:1;width:auto;min-width:40px}
  .buyrow .buynow{order:9;margin:0}

  /* full words, not the phone shortening ("Add") */
  .dsr-cta .lbl{font-size:inherit}
  .dsr-cta .lbl::after{content:none}

  /* -/+ as visible 58x46 chips instead of bare glyphs at the far edges */
  .buyrow .stepper button{width:58px;height:46px;font-size:21px;margin:4px;
    background:rgba(255,255,255,.10);border-radius:9px}
  .buyrow .stepper button:hover{background:rgba(255,255,255,.16)}

  .pdoss,.rsch,.rread,.relsec{padding-left:0;padding-right:0}
  .rgrid,.rr-grid{grid-template-columns:1fr;padding:0 16px}

  /* long sections fold into tap-to-open panels: 13,092px became ~3,000 */
  .msec{border-top:1px solid var(--line)}
  .msec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:12px;padding:16px;font-family:"Sora",sans-serif;
    font-weight:600;font-size:15px;color:var(--ink)}
  .msec > summary::-webkit-details-marker{display:none}
  .msec > summary::after{content:"";width:9px;height:9px;flex:none;
    border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  .msec[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .msec > .msec-b{padding-bottom:6px}
  .msec .pdoss,.msec .rsch,.msec .rread,.msec .relsec{padding-top:0;border-top:0}

  /* jump links stacked, centred, symmetric air (17px both sides) */
  .rsch-nav{flex-direction:column;align-items:center;gap:11px;text-align:center;
    padding-top:17px;padding-bottom:16px;margin-bottom:24px}

  /* Related research reading heading: centred, off the panel edges */
  .msec .rread{padding-top:22px}
  .rread h2,.rread .rr-sub{text-align:center;padding-left:16px;padding-right:16px}

  /* Also in stock: gutter back, cards two-up, summary is the only heading */
  .rel-h{padding:0 16px}
  .relsec .rsub{padding:0 16px}
  .rgrid{grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
  .msec .relsec .rel-h h2{display:none}
  .msec .relsec .rel-h{justify-content:flex-end;padding-top:6px;margin-bottom:18px}
  .rgrid .pc .cmeta{display:none}
  .rgrid .addbtn{font-size:12.5px;padding:10px 6px;white-space:nowrap}
}

/* Free BAC water: shown at >= EUR 250 on every width. Two hazards here:
   !important is required, not decorative (the stacked layout re-shows receipt
   lines with display:grid!important, which otherwise forced this row visible at
   any total); and the class must NOT be .free - the script already puts .free on
   the SHIPPING line once shipping is free, so hiding .free hid that line. */
.rcpt .ln.bacline{display:none!important}
.rcpt .ln.bacline.bac-on{display:grid!important}
.rcpt .ln.bacline dd{color:#7fdc9a}

/* the -/+ chips the founder approved on the phone, now on laptop too.
   Heights are set so the stepper stays exactly 48px and nothing shifts. */
@media(min-width:761px){
  /* height+margin sum to the original 46px of content so the stepper box,
     and everything below it, stays exactly where it was */
  .buyrow .stepper button{width:46px;height:40px;margin:3px;border-radius:8px;
    background:rgba(255,255,255,.10)}
  .buyrow .stepper button:hover{background:rgba(255,255,255,.17)}
  .buyrow .stepper input{height:40px;margin:3px 0}
}

@media(min-width:761px){
  .mnav{display:none}      /* phone nav has no desktop styling - hide it */
  .msec > summary{display:none}  /* accordion bars are phone furniture */
  .pc.pc-m{display:none!important}  /* cards 5-6 of Also-in-stock are phone-only */
}

/* ── buy-page prose ─────────────────────────────────────────────────────────
   The SEO/localised copy that justifies this URL existing. It sits below the
   transaction panel, never inside it. */
.buyprose{background:var(--page)}
.buyprose .wrap{max-width:1220px}
.buyprose .bp-in{max-width:78ch;padding:44px 0 8px}
.buyprose h2{font-family:"Sora";font-size:clamp(20px,2.3vw,27px);letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.buyprose p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 14px}
.buyprose p a{color:var(--acc);font-weight:600}
.buyprose .bp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.buyprose .bp-chips span{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.buyprose .bp-chips span.mono{font-family:var(--mono);font-weight:500;font-size:12.5px}
.buyprose .bp-more{font-size:14.5px;color:var(--muted);margin:20px 0 0}
.buyprose .bp-more a{color:var(--acc);font-weight:600}

/* The Ireland page's sections carry grids and a spec table, so they get the full
   panel width rather than the 78ch prose measure — their own paragraphs keep a
   readable line length on their own. */
.buyprose.ireland-sec .bp-in{max-width:none}
.ireland-sec .slede{max-width:72ch}

/* ── buy-page FAQ ─────────────────────────────────────────────────────────
   Same hairline-delimited rows as the specification table; tap to open at every
   width, because a wall of open answers buries the rest of the page. */
.buyfaq{background:var(--page)}
.buyfaq .wrap{max-width:1220px}
.buyfaq .bf-in{max-width:80ch;padding:36px 0 44px}
.buyfaq h2{font-family:"Sora";font-size:clamp(20px,2.3vw,27px);letter-spacing:-.02em;color:var(--ink);margin:0 0 18px}
.buyfaq .qa{border-top:1px solid var(--line)}
.buyfaq .qa:last-child{border-bottom:1px solid var(--line)}
.buyfaq .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;font-family:"Sora";font-size:16.5px;font-weight:600;color:var(--ink)}
.buyfaq .qa summary::-webkit-details-marker{display:none}
.buyfaq .qa summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.buyfaq .qa[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.buyfaq .qa p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 20px}
@media(max-width:760px){
  .buyprose .bp-in{padding:26px 0 4px}
  .buyfaq .bf-in{padding:22px 0 30px}
  .buyprose p{font-size:15.5px}
  /* The visible language rack costs a whole line of the fold — enough to push
     the variant tile below it — and repeats what the header's locale control
     and the hreflang tags already say. Desktop has the room; a phone does not. */
  .dcrumb-lang{display:none}
}