/* ===== Amino House — Polish Layer =====
   Same layout as base, just refined: corporate navy accent, refined italic serif,
   crisper CTAs, clearer buy path. Loaded last to override styles.css.
*/

:root {
  /* Refined accent: deep corporate navy instead of lavender-blue */
  --accent: #0b2545;
  --accent-hover: #173a6b;
  --accent-soft: #eef3fa;
  --accent-line: #1a3a6b;

  /* Tighten the ink to something less harsh than near-black */
  --ink: #0e1626;
  --ink-soft: #2a3447;
  /* Heading emphasis tone — lighter slate-navy so <em> words read as a connected
     two-tone headline (accent #0b2545 is too close to ink to show) */
  --em-tone: #5f7492;

  /* Cooler greys */
  --muted: #5b6477;
  --border: #e4e7ee;
  --border-strong: #ccd2dd;
  --off: #f6f8fb;

  /* Unused — nothing on this site references var(--serif), by design. System fonts only, so this
     token cannot cause a download for something that never paints. See inc/enqueue.php. */
  --serif: Georgia, 'Times New Roman', serif;
}

body { color: var(--ink); }

/* ===== Two-tone accent in headings (em = --em-tone, same font/weight) ===== */
h1 em, h2 em, h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -0.015em;
  color: var(--em-tone);
}

/* Slightly tighter, more confident headings */
h1, h2, h3, h4 { letter-spacing: -0.022em; }
h1 { font-weight: 500; letter-spacing: -0.032em; }
h2 { font-weight: 500; letter-spacing: -0.022em; }
h3 { font-weight: 500; }

/* ===== Eyebrow + lede refinements ===== */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.lede { font-size: 17.5px; color: var(--muted); }

/* ===== Top utility bar ===== */
.utility {
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.utility-inner {
  max-width: none;
  display: flex; align-items: center;
  height: 38px;
  padding: 0 40px;
  gap: 24px;
}
.utility-left { display: flex; gap: 24px; align-items: center; flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.utility-right { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }
.utility-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
}
.utility-item svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.utility-item.is-link { cursor: pointer; }
.utility-item.is-link:hover { color: #fff; }
.utility-dot { width: 6px; height: 6px; border-radius: 100px; background: #4ade80; display: inline-block; flex-shrink: 0; }
.utility-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.18); flex-shrink: 0; }

@media (max-width: 1100px) {
  .utility-inner > .utility-left > .utility-item:nth-child(5),
  .utility-inner > .utility-left > .utility-sep:nth-child(4) { display: none; }
}
@media (max-width: 880px) {
  .utility { display: none; }
}

/* ===== Header — tighter, more institutional ===== */
.hdr {
  background: #fff;
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hdr-inner { height: 76px; gap: 56px; }
.hdr .wrap { padding: 0 40px; }
.logo { height: 44px; }
.nav { gap: 28px; }
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  padding: 8px 0;
  white-space: nowrap;
}
.nav a:hover { color: var(--accent); }
.nav a.active { color: var(--accent); }
.nav a.active::after { background: var(--accent); bottom: -22px; height: 2px; }
.hdr-actions { gap: 4px; }
.icon-btn { width: 38px; height: 38px; }
.icon-btn:hover { background: var(--off); }
.icon-btn svg { stroke: var(--ink); width: 17px; height: 17px; }
.cart-count { background: var(--accent); }
.hdr-auth { border-color: var(--accent); color: var(--accent); height: 38px; font-weight: 600; white-space: nowrap; padding: 0 16px; }
.hdr-auth:hover { background: var(--accent); color: #fff; }

/* ===== Announcement (more institutional) ===== */
.announce-marquee {
  background: var(--ink);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 0;
  font-weight: 500;
}
.announce-marquee::before { background: linear-gradient(90deg, var(--ink), transparent); }
.announce-marquee::after { background: linear-gradient(-90deg, var(--ink), transparent); }
.announce-dot { color: var(--accent-soft); opacity: 0.5; }

/* ===== Buttons — crisper, more confident ===== */
.btn {
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 14px;
  height: 48px;
}
.btn-ink {
  background: var(--accent);
  color: #fff;
}
.btn-ink:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(11,37,69,0.18); }
.btn-ghost { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; }
.btn-ghost:hover { background: var(--accent); color: #fff; }
.btn-lg { height: 56px; font-size: 14.5px; padding: 0 30px; }

/* Solid black ink button — used in announcement bar / dark contexts */
.btn-onyx { background: var(--ink); color: #fff; }
.btn-onyx:hover { background: #000; }

/* ===== Hero refinements ===== */
.hero {
  padding: 80px 0 100px;
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(11,37,69,0.06), transparent 60%),
    radial-gradient(700px 380px at 12% 110%, rgba(11,37,69,0.04), transparent 60%),
    #fff;
}
.hero-copy .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 0.18em; }
/* ── THE VIALS ARE THE SAME SIZE IN EVERY LANGUAGE ────────────────────────────
 *
 * They were not. Measured at 1440px, the centre vial rendered 173px in English, German, Italian,
 * Romanian, Norwegian, Turkish and Arabic — and 125px in Dutch, 128px in French, 113px in Polish.
 * A third smaller, on the first thing a customer sees.
 *
 * ── THE CAUSE, TO THE PIXEL ─────────────────────────────────────────────────
 *
 * `.hero-grid` is `grid-template-columns: 1.15fr 1fr`, and an `fr` track carries an automatic
 * minimum of `min-content`. min-content for the copy column is its LONGEST UNBREAKABLE WORD. So
 * whenever that word is wider than the column's 1.15fr share (531px here), the word wins and the
 * copy column is forced open — and `.hero-visual` is `aspect-ratio: 1/1; width: 100%` of what is
 * left, with the vials sized as a PERCENTAGE of that. The heading pushes; the vials pay.
 *
 *     word                      copy column   visual   centre vial
 *     "Independently"   514px          531      461         173
 *     "Gedocumenteerd." 648px          659      333         125
 *     "Udokumentowane." 680px          691      301         113
 *
 * The column width tracks the longest word to within a few pixels in every language. Nothing about
 * the vials is language-aware; they were simply the thing standing next to the text.
 *
 * ── THE FIX ─────────────────────────────────────────────────────────────────
 *
 * `min-width: 0` on the copy column removes the min-content floor, so the 1.15fr / 1fr ratio holds
 * absolutely and the visual column is the same width in all fifteen languages. The heading then has
 * to fit a narrower box, which is exactly the trade the brief asks for: the header adapts, the vials
 * stay fixed.
 *
 * Three things let it fit gracefully rather than by brute force:
 *   · `hyphens: auto` breaks a long word at a real syllable boundary. It works because <html> already
 *     carries the right `lang` (inc/i18n-routing.php), which is what the browser hyphenates by.
 *   · `overflow-wrap: break-word` is the last resort for a word no dictionary will break, so it can
 *     never spill out of the column instead.
 *   · the upper clamp drops 80px -> 72px. At 80px, "Udokumentowane." needs 680px and the column is
 *     531; at 72px it needs ~612 and hyphenates cleanly rather than breaking mid-syllable. English
 *     loses 8px of display size and no line.
 *
 * NOT DONE, deliberately: pinning the vials with a fixed px height. That would have made this
 * measurement pass while leaving the copy column still lurching between 531px and 691px — the same
 * layout break, with the evidence hidden.
 */
.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(44px, 6.4vw, 72px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.034em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--em-tone);
  letter-spacing: -0.025em;
}
.hero .lede { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 56ch; }
.hero-ctas { gap: 12px; margin-bottom: 32px; }
.hero-trust { font-size: 13.5px; color: var(--ink); font-weight: 600; gap: 28px; flex-wrap: wrap; }
.hero-trust .dot { background: #16a34a; }

/* Hero visual cards (refined typography only — no structural change) */
.hero-vial.v1 { background: #e7eef9; }
.hero-vial.v2 { background: #f0e8e6; }
.hero-card .ic { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hero-card .val { font-weight: 600; color: var(--ink); }
.hero-card .lab { color: var(--muted); }

/* ===== Trust badges strip (subtle, anchored right after hero) ===== */
.trust-strip {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
/*
 * THE STRIP IS THE ANNOUNCEMENT MARQUEE (bug-fix round 6, task 1): same `.announce-marquee` /
 * `.announce-track` loop (styles.css), same reduced-motion fallback (motion.css), in the strip's own
 * colours, running the OTHER way from the top bar. Its speed is the top bar's in px/s — preview.js
 * sets --marquee-dur from the two tracks' widths. Every cell carries the same trailing space, so the
 * gap at the loop's seam is the gap everywhere else.
 */
.announce-marquee--trust {
  background: var(--off);
  color: var(--ink);
  padding: 20px 0;
  font-size: inherit;
  letter-spacing: normal;
}
.announce-marquee--trust::before { background: linear-gradient(90deg, var(--off), transparent); }
.announce-marquee--trust::after { background: linear-gradient(-90deg, var(--off), transparent); }
.announce-marquee--trust .trust-cell { flex: 0 0 auto; white-space: nowrap; margin-inline-end: 48px; }
.announce-track.announce-track--reverse {
  animation-name: announce-scroll-reverse;
  animation-duration: var(--marquee-dur, 38s);
}
@keyframes announce-scroll-reverse {
  from { transform: translate3d(-33.3333%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
/* Stops under a pointer (desktop) or a held finger (.is-held, preview.js) so a cell can be read. */
@media (hover: hover) {
  .announce-marquee--trust:hover .announce-track { animation-play-state: paused; }
}
.announce-marquee--trust.is-held .announce-track { animation-play-state: paused; }
.trust-rating {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none;
  padding-right: 28px;
  border-right: 1px solid var(--border-strong);
}
.trust-stars { display: inline-flex; gap: 2px; color: #e8a33d; }
.trust-rating-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.trust-rating-meta b { color: var(--ink); font-weight: 700; font-size: 13px; }
.trust-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.trust-cell {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.trust-cell svg, .trust-cell .badge {
  width: 32px; height: 32px;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.trust-cell small {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 3px;
}
.trust-cta {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.trust-cta:hover { text-decoration: underline; }

/* ===== Stats band ===== */
.stats-band { background: var(--ink); padding: 64px 0; }
.stats-v { font-weight: 500; letter-spacing: -0.034em; }
.stats-cell { border-color: rgba(255,255,255,0.12); padding: 4px 32px; }

/* ===== Section base + sec head ===== */
.sec-head h2 em { color: var(--em-tone); }

/* ===== Pillars / WhyGrid — more institutional ===== */
.pillar {
  border-color: var(--border);
  border-radius: 8px;
  background: #fff;
}
.pillar:hover { box-shadow: 0 10px 30px rgba(11,37,69,0.08); border-color: var(--border-strong); }
.pillar-ic {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
}
.pillar h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; }
.pillar p { color: var(--muted); }

.why { border-radius: 8px; border-color: var(--border); }
.why .ic { background: var(--accent-soft); color: var(--accent); }

/* ===== Section background (off) ===== */
.section-off { background: var(--off); }

/* ===== Product card ===== */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(11,37,69,0.08);
  transform: translateY(-2px);
}
.card-img {
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: var(--off);
}
.card-meta { padding: 18px 18px 20px; }
/* The name is a flex item, so it defaults to `min-width: auto` and refuses to shrink below its
   own longest word — which pushed the price out past the card's right edge and the card's
   `overflow: hidden` clipped it. Measured on every phone width: 14/14 cards clipped at 360px,
   5/14 at 390px, worst overflow 24px. Same mechanism as the signup modal (DIVERGENCES §10), and
   the same in the export, so it goes to DESIGN-SYNC too.
   The name may now shrink and wrap; the price never gives up a pixel. */
.card-head { gap: 8px; }
/* The flex item is the UNCLASSED wrapper around the name and the goal tags, not .card-name — so
   min-width has to go there. Its min-content was being set by the widest tag chip ("Muscle
   Growth", ~100px), which is why the column would not shrink and the price was pushed out.
   The chip may now wrap its own text instead of dictating the column width. */
.card-head > div:first-child { min-width: 0; }
/*
 * THE CHIPS GET THE WHOLE CARD (round 2, task 4). Inside the name column they had the width left
 * over after the price — 60–80px on a phone — and a chip is `nowrap`, so "Aumento muscular",
 * "Crescita muscolare", "Ämnesomsättning" spilled past their pill by up to 43px in thirteen
 * languages. The wrapper is dissolved (`display: contents`) so name, chips and price are siblings:
 * name and price share the first row exactly as before, and the chips take a full-width row under
 * them, wrapping chip by chip. The longest term in any language (126px) fits a phone card with room;
 * should a term ever exceed the card, the text wraps INSIDE the pill rather than past it — the pill
 * keeps its padding and its shape either way. Logical properties throughout, so /ar/ mirrors.
 */
.card-head { flex-wrap: wrap; }
.card-head > div:first-child { display: contents; }
.card-head .card-name { flex: 1 1 0; min-width: 0; }
.card-head .gtags { flex: 1 0 100%; order: 10; margin-top: 0; }
.card-head .gtag { white-space: normal; text-align: center; line-height: 1.15; padding-block: 3px; max-width: 100%; }
/* `break-word`, not `anywhere`: `anywhere` also shrinks min-content to a single character, which
   made "BPC-157 / TB-500 (Wolverine)" break as "(Wolverine" + ")". This only breaks a word that
   genuinely cannot fit — the wrapper's min-width: 0 above is what allows the column to shrink. */
.card-name { overflow-wrap: break-word; }
.card-head .gtag { max-width: 100%; }
.card-price { flex: 0 0 auto; white-space: nowrap; }
.card-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.card-type { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.card-price { font-size: 16px; font-weight: 600; color: var(--ink); }
.card-price .from { font-size: 10px; color: var(--muted); font-weight: 500; letter-spacing: 0.1em; }

/* Always-visible primary CTA on product cards */
.card .btn { margin-top: auto; height: 42px; font-size: 13px; font-weight: 600; }
.card .btn-ink { background: var(--accent); }
.card .btn-ink:hover { background: var(--accent-hover); }

/* Clearer locked state */
.card-locked { flex-direction: column; gap: 10px; margin-top: 14px; align-items: stretch; }
.card-locked .signin-link {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  display: inline-flex;
  justify-content: center;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.card-locked .signin-link:hover { background: var(--accent); color: #fff; text-decoration: none; }
.card-locked .btn-ghost { height: 42px; font-size: 13px; }

/* Card badge */
.card-badge {
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
}
.card-badge--bestseller { background: var(--accent); color: #fff; }
.card-badge--new { background: #c0392b; color: #fff; }
.card-badge--restocked { background: #16a34a; color: #fff; }

/* Card quick-add button (the + on hover) */

/* ===== Press strip (more confident) ===== */
.press {
  padding: 36px 0;
  border-color: var(--border);
  opacity: 1;
}
.press-item { color: #8893a8; font-weight: 600; letter-spacing: 0.04em; }

/* ===== Categories ===== */
.cat { border-radius: 8px; border-color: var(--border); }
.cat:hover { border-color: var(--accent); background: #fff; }
.cat-name { font-weight: 500; letter-spacing: -0.014em; }
.cat-num { color: var(--muted); }
.cat-arrow { background: var(--ink); }
.cat:hover .cat-arrow { background: var(--accent); }

/* ===== Quality tabs ===== */
.q-tab.active { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(11,37,69,0.06); }
.q-panel { border-radius: 8px; border-color: var(--border); }
.q-panel .eyebrow { color: var(--accent); }

/* ===== Compound finder ===== */
.finder-card { border-radius: 10px; border-color: var(--border); }
.finder-step-pip.done .finder-pip-num { background: var(--accent); border-color: var(--accent); }
.finder-step-pip.done { color: var(--accent); }
.finder-option { border-radius: 8px; border-color: var(--border); }
.finder-option:hover { border-color: var(--accent); }
.finder-option-label { font-weight: 600; }
.finder-result { border-radius: 8px; border-color: var(--border); }
.finder-result:hover { border-color: var(--accent); }
.finder-result-arrow { color: var(--accent); }
.finder-card--result .eyebrow { color: var(--accent); }

/* ===== Stacks ===== */
.stack-card { border-radius: var(--radius-card); }
.stack-save {
  background: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
}
/* The start corner, so /ar/ mirrors it (logical, not `left`) — stacks and discounted cards alike. */
.stack-save { left: auto; inset-inline-start: 14px; }

/* ===== Compound comparison data table ===== */
.cmp-table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cmp-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  background: var(--ink);
  color: rgba(255,255,255,0.75);
}
.cmp-head .cmp-c {
  padding: 16px 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cmp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  transition: background .15s ease;
}
.cmp-row:hover { background: var(--off); }
.cmp-c { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.cmp-c--prod { gap: 4px; border-right: 1px solid var(--border); }
.cmp-prod-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cmp-prod-mg { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }

.cmp-metric-label { display: none; }

.cmp-versus { display: flex; flex-direction: column; gap: 10px; }
.cmp-ah, .cmp-other {
  display: flex; flex-direction: column; line-height: 1.15;
}
.cmp-ah b {
  font-size: 18px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.01em;
}
.cmp-ah small {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); opacity: 0.7; margin-top: 2px;
}
.cmp-other {
  font-size: 14px; color: var(--muted); font-weight: 500;
  white-space: nowrap;
}
.cmp-other small {
  display: block;
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: #aab1be; margin-top: 2px;
  text-decoration: none;
}
.cmp-ah b { white-space: nowrap; }
.cmp-strike {
  display: inline-block;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: #c0392b;
  text-decoration-thickness: 1.5px;
}

.cmp-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background: var(--off);
  flex-wrap: wrap;
}
.cmp-foot-note { font-size: 12px; color: var(--muted); max-width: 60ch; line-height: 1.45; }
.cmp-foot-cta { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.cmp-foot-cta:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr 1fr; gap: 0; }
  .cmp-c { padding: 16px 18px; border-top: 1px solid var(--border); }
  .cmp-c--prod {
    grid-column: 1 / -1;
    flex-direction: row; align-items: baseline; gap: 10px;
    border-right: 0; border-top: 0;
    background: var(--off);
  }
  .cmp-c--hide-sm { display: flex !important; }
  .cmp-metric-label {
    display: block;
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px;
  }
  .cmp-row .cmp-c--metric:nth-child(odd) { border-right: 1px solid var(--border); }
}

/* ===== How it works ===== */
.hiw-step { border-radius: 10px; border-color: var(--border); }
.hiw-num { color: var(--accent); }
.hiw-step h3 { font-weight: 600; letter-spacing: -0.014em; }

/* ===== Research cards (teaser) ===== */
.r-card { border-radius: 8px; border-color: var(--border); }
.r-card:hover { border-color: var(--border-strong); }
.r-body h3 { font-weight: 600; letter-spacing: -0.012em; }
.r-thumb .tag { font-weight: 600; }

/* ===== FAQ ===== */
.faq summary { font-weight: 600; }
/* CLOSED MEANS NOTHING OF THE ANSWER, on every accordion (ruling, 15 Sep 2026). The native <details>
 * already hides its content when closed, and the supply accordion's body carries `hidden`; these
 * rules make the closed state independent of any user-agent quirk or later `display` rule: a closed
 * item is its header and its own padding, and its content has no box, no margin, no padding. The
 * icon follows the same state attribute the content does, so the two can never disagree. */
.faq details:not([open]) > :not(summary), .pd-faq-list details:not([open]) > :not(summary) { display: none !important; margin: 0; padding: 0; }
.pd-acc-a[hidden] { display: none !important; }
.ft-col-acc:not(.is-open) .ft-col-body ul { margin: 0; padding: 0; }

/* ===== CTA banner ===== */
.cta-banner {
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  border-radius: 12px;
}
.cta-banner::before { background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%); }
.cta-banner h2 em { color: #c8d6ec; }
.cta-banner .btn-ink { background: #fff; color: var(--accent); }
.cta-banner .btn-ink:hover { background: var(--accent-soft); color: var(--accent); }
.cta-banner .btn-ghost { border-color: rgba(255,255,255,0.45); color: #fff; }

/* ===== CTA banner — per-page variants (so the same card reads differently) ===== */
/* Wholesale: vivid accent-blue, with a subtle bulk-grid motif */
.cta-banner--accent {
  background: linear-gradient(135deg, var(--accent) 0%, #1b2a6b 100%);
}
.cta-banner--accent::before {
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 60%);
}
.cta-banner--accent h2 em { color: #dbe4ff; }
.cta-banner--accent .btn-ink { background: #fff; color: var(--accent); }
.cta-banner--accent .btn-ink:hover { background: var(--ink); color: #fff; }
.cta-banner--accent .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-banner--accent .btn-ghost:hover { background: #fff; color: var(--accent); }
.cta-banner--accent .eyebrow { color: #dbe4ff !important; }

/* Partner: light card — inverts the pattern so it stands apart from the dark banners */
.cta-banner--light {
  background: var(--accent-soft, #eef2ff);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, #fff);
}
.cta-banner--light::before {
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%);
}
.cta-banner--light h2 { color: var(--ink); }
.cta-banner--light h2 em { color: var(--em-tone); }
.cta-banner--light p { color: var(--muted); }
.cta-banner--light .eyebrow { color: var(--accent) !important; }
.cta-banner--light .btn-ink { background: var(--accent); color: #fff; }
.cta-banner--light .btn-ink:hover { background: var(--ink); color: #fff; }
.cta-banner--light .btn-ghost { border-color: color-mix(in oklab, var(--ink) 30%, transparent); color: var(--ink); }
.cta-banner--light .btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===== Newsletter — engaging marketing surface ===== */
.news {
  position: relative;
  border-radius: 24px;
  padding: 80px 72px;
  background: linear-gradient(135deg, #0a1e3c 0%, #102b50 55%, #0b2545 100%);
  color: #fff;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

/* Decorative background layers */
.news-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* Two-column layout — copy left, form right */
.news { padding: 48px 56px; }
.news-split {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.news-col-text { max-width: 460px; }
.news-logo { height: 26px; width: auto; display: block; margin-bottom: 20px; opacity: 0.95; }
.news-col-text .news-h2 { margin-bottom: 14px; }
.news-col-text .news-lede { margin: 0; }
.news-col-form { width: 100%; }
.news-col-form .news-form { width: 100%; margin-top: 0; }
.news-col-form .news-confirm { text-align: left; }
.news-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, #000 50%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, #000 50%, transparent 80%);
}
.news-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.news-bg-glow--a {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(120,158,255,0.5), transparent 60%);
}
.news-bg-glow--b {
  width: 460px; height: 460px;
  bottom: -160px; right: -100px;
  background: radial-gradient(circle, rgba(56,189,248,0.45), transparent 65%);
}

.news h2 em { color: inherit; }

.news-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Copy column */
.news-copy { min-width: 0; }
.news-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.7);
}
.news-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 100px;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.15);
  display: inline-block;
  animation: news-pulse 2s ease-in-out infinite;
}
@keyframes news-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74,222,128,0.15); }
  50% { box-shadow: 0 0 0 8px rgba(74,222,128,0.05); }
}

.news-h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: #fff;
  margin: 18px 0 16px;
}
.news-h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: #c9d8ff;
}
.news-lede {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 0 32px;
  max-width: 52ch;
}

.news-benefits {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.news-benefits li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.news-benefits li b { color: #fff; font-weight: 600; }
.news-benefit-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 6px 0;
  text-align: center;
  font-weight: 600;
}

/* Form refresh (on dark) */
.news-form {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin: 0;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 7px 7px 7px 22px;
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.news-form:focus-within {
  border-color: rgba(201,216,255,0.6);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 6px rgba(201,216,255,0.1);
}
.news-form.is-done {
  border-color: rgba(74,222,128,0.7);
  background: rgba(74,222,128,0.08);
  box-shadow: 0 0 0 6px rgba(74,222,128,0.12);
}

.news-form-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: color .2s ease, transform .25s cubic-bezier(.5,1.6,.4,1);
  flex-shrink: 0;
}
.news-form-icon svg { width: 100%; height: 100%; }
.news-form:focus-within .news-form-icon { color: #c9d8ff; transform: scale(1.05); }
.news-form.is-done .news-form-icon { color: #4ade80; transform: rotate(-10deg) scale(1.1); }

.news-form input {
  flex: 1; min-width: 0; width: 100%;
  border: 0;
  padding: 0 4px;
  background: none;
  font: inherit;
  font-size: 15px;
  color: #fff;
}
.news-form input:focus { outline: none; }
.news-form input::placeholder { color: rgba(255,255,255,0.45); }
.news-form input:disabled { color: rgba(255,255,255,0.5); }

/* Button — already styled, fine-tune for dark */
.news-btn {
  position: relative;
  height: 46px;
  min-width: 156px;
  width: max-content;    /* grows for longer localized labels instead of clipping */
  padding: 0 22px;
  border: 0;
  border-radius: 100px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
  isolation: isolate;
}
.news-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  height: 100%; width: 50%;
  background: linear-gradient(100deg, transparent 0%, rgba(11,37,69,0.18) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .55s ease;
  z-index: 0;
  pointer-events: none;
}
.news-btn:hover:not(:disabled) {
  background: #c9d8ff;
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}
.news-btn:hover:not(:disabled)::before { left: 120%; }
.news-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.news-btn:disabled { cursor: progress; }

.news-btn-label, .news-btn-sending, .news-btn-done {
  position: absolute;
  inset: 0;
  white-space: nowrap;   /* localized labels (Abonnieren/Aangemeld) must never wrap or clip */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
  transition: transform .35s cubic-bezier(.5,1.4,.4,1), opacity .25s ease;
  z-index: 1;
}
.news-btn-done svg, .news-btn-sending svg { width: 16px; height: 16px; flex: 0 0 auto; }
.news-btn-done { border-radius: inherit; }
.news-btn-label { transform: translateY(0); opacity: 1; }
.news-btn-sending { transform: translateY(110%); opacity: 0; }
.news-btn-done { transform: translateY(110%); opacity: 0; background: #16a34a; color: #fff; }

.news-btn.is-sending .news-btn-label { transform: translateY(-110%); opacity: 0; }
.news-btn.is-sending .news-btn-sending { transform: translateY(0); opacity: 1; }
.news-btn.is-done .news-btn-label { transform: translateY(-110%); opacity: 0; }
.news-btn.is-done .news-btn-sending { transform: translateY(-110%); opacity: 0; }
.news-btn.is-done .news-btn-done { transform: translateY(0); opacity: 1; }
.news-btn.is-done { background: #16a34a; color: #fff; }

.news-btn-arrow { display: inline-flex; width: 18px; height: 18px; transition: transform .3s cubic-bezier(.5,1.6,.4,1); }
.news-btn-arrow svg { width: 100%; height: 100%; }
.news-btn:hover:not(:disabled) .news-btn-arrow { transform: translateX(4px); }

.news-btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(11,37,69,0.25);
  border-top-color: var(--accent);
  border-radius: 100px;
  animation: news-spin 0.8s linear infinite;
}
@keyframes news-spin { to { transform: rotate(360deg); } }

.news-confirm {
  font-size: 13px;
  color: #4ade80;
  font-weight: 600;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.news-confirm.on { opacity: 1; transform: translateY(0); }
/* A refusal in the same green as a confirmation reads as a confirmation at a glance. */
.news-confirm.is-err { color: #fca5a5; }

/* Social proof row */
.news-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  flex-wrap: wrap;
}
.news-meta b { color: #fff; font-weight: 600; }
.news-meta-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }

.news-avatars { display: inline-flex; }
.news-av {
  width: 28px; height: 28px;
  border-radius: 100px;
  background: linear-gradient(135deg, #c9d8ff, #6b8bd4);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #102b50;
  margin-left: -8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.news-av:first-child { margin-left: 0; }
.news-av-1 { background: linear-gradient(135deg, #c9d8ff, #6b8bd4); }
.news-av-2 { background: linear-gradient(135deg, #fde6c8, #d4a06b); color: #5a3f1b; }
.news-av-3 { background: linear-gradient(135deg, #c8e6c8, #6bcc8a); color: #1b4a2a; }
.news-av-4 { background: linear-gradient(135deg, #e8c8e6, #b86bcc); color: #4a1b46; }

/* ===== Letter preview card ===== */
.news-preview {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
.news-letter {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #f7f5ed;
  color: #1f2433;
  border-radius: 6px;
  padding: 36px 32px 28px;
  transform: rotate(-3.5deg) translateY(-6px);
  transition: transform .5s cubic-bezier(.3,1.2,.4,1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -30px rgba(0,0,0,0.5),
    0 18px 40px -18px rgba(0,0,0,0.35);
  z-index: 2;
}
.news-letter::before {
  /* corner fold */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: linear-gradient(225deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 50%, transparent 50.5%);
  border-radius: 0 6px 0 6px;
  pointer-events: none;
}
.news-letter::after {
  /* postmark ring */
  content: '';
  position: absolute;
  top: 24px; right: 28px;
  width: 64px; height: 64px;
  border: 1.5px dashed rgba(11,37,69,0.25);
  border-radius: 100px;
  pointer-events: none;
}
.news:hover .news-letter,
.news-preview:hover .news-letter {
  transform: rotate(-1.5deg) translateY(-10px);
}

.news-letter-shadow {
  position: absolute;
  width: 88%;
  height: 96%;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  filter: blur(40px);
  z-index: 0;
  transform: translate(20px, 24px) rotate(2deg);
}

.news-letter-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(11,37,69,0.14);
  margin-bottom: 22px;
}
.news-letter-stamp {
  display: flex; flex-direction: column;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  line-height: 1.15;
}
.news-letter-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.news-letter-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11,37,69,0.55);
}
.news-letter-date {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}

.news-letter-title {
  font-family: inherit;
  font-weight: 600; letter-spacing: -0.015em;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: #14182b;
  margin-bottom: 22px;
  font-weight: 500;
}
.news-letter-title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}

.news-letter-toc {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(11,37,69,0.1);
}
.news-letter-toc li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(11,37,69,0.1);
  font-size: 13px;
  color: #1f2433;
  font-weight: 500;
}
.news-letter-toc li span:first-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(11,37,69,0.45);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.news-letter-toc li.on {
  color: var(--accent);
}
.news-letter-pill {
  background: var(--accent); color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 100px;
}

.news-letter-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,37,69,0.14);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-letter-foot-k { color: rgba(11,37,69,0.55); }
.news-letter-foot-v { color: var(--accent); font-weight: 600; }

/* Responsive */
@media (max-width: 1024px) {
  .news { padding: 56px 44px; }
  .news-grid { grid-template-columns: 1fr; gap: 56px; }
  .news-preview { min-height: 0; }
  .news-letter { max-width: 380px; transform: rotate(-2deg); }
  .news-split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .news { padding: 40px 24px !important; border-radius: 18px; }
  .news-logo { height: 22px; margin-bottom: 16px; }
  .news-h2 { font-size: 30px; }
  .news-split { gap: 22px; }
  .news-col-text { max-width: none; }
  .news-form { grid-template-columns: 1fr; border-radius: 14px; padding: 12px; gap: 10px; background: rgba(255,255,255,0.08); }
  .news-form-icon { display: none; }
  .news-form input { padding: 8px 12px; height: 44px; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; background: rgba(255,255,255,0.04); }
  .news-btn { width: 100%; min-width: 0; height: 48px; }
  .news-meta { font-size: 12px; }
  .news-letter { padding: 28px 24px 22px; }
  .news-letter-title { font-size: 22px; }
}

/* ===== Footer ===== */
footer.ft {
  background: var(--ink);
  padding: 80px 0 28px;
}
.ft-brand p { color: rgba(255,255,255,0.55); }
.ft-col h4 { letter-spacing: 0.14em; font-weight: 600; font-size: 11px; }
.ft-col a { font-size: 13.5px; color: rgba(255,255,255,0.7); }
.ft-col a:hover { color: #fff; }

/* ===== Auth modal ===== */
.auth-modal { border-radius: 12px; }
.auth-side { background: linear-gradient(180deg, var(--ink) 0%, var(--accent) 100%); }
.auth-perks li span { color: #4ade80; }
.auth-tabs button.on { color: var(--accent); }
.auth-forgot { color: var(--accent); }

/* ===== Loyalty tier ladder (auth surfaces) ===== */
.auth-loy { margin-top: 22px; }
.auth-loy-hd {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82);
  margin-bottom: 12px; font-weight: 500;
}
.auth-loy-hd b { color: #fff; font-weight: 700; }
.auth-loy-star { color: var(--accent); font-size: 11px; line-height: 1.6; flex: 0 0 auto; }
/* On the modal aside the gradient ends in accent, so use a lighter star there */
.auth-side .auth-loy-star { color: #fff; opacity: .9; }

.loy-ladder { display: flex; flex-direction: column; gap: 7px; }
.loy-ladder--stack .loy-tier {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.loy-tier-disc {
  flex: 0 0 auto; min-width: 48px; text-align: center; white-space: nowrap;
  margin-top: 1px;
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  color: #fff; padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.1); font-variant-numeric: tabular-nums;
}
.loy-tier[data-tier="member"] .loy-tier-disc { background: rgba(255,255,255,.08); color: rgba(255,255,255,.62); font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.loy-tier[data-tier="silver"] .loy-tier-disc { background: rgba(203,213,225,.24); color: #e2e8f0; }
.loy-tier[data-tier="gold"] .loy-tier-disc { background: rgba(230,179,77,.26); color: #f0c976; }
.loy-tier[data-tier="platinum"] .loy-tier-disc { background: linear-gradient(135deg, rgba(226,232,240,.32), rgba(148,163,184,.32)); color: #f8fafc; }
.loy-tier-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.loy-tier-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.loy-tier-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.loy-tier-min { font-size: 11.5px; color: rgba(255,255,255,.55); }
.loy-tier-perks { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.loy-tier-perks li {
  position: relative; padding-left: 15px;
  font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.72);
}
.loy-tier-perks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: #4ade80; font-weight: 700; font-size: 10px;
}
/* Per-tier card tints so Member / Silver / Gold / Platinum read as distinct
   metals (not just the badge). Placed after the base so they win on source order. */
.loy-tier[data-tier="member"]   { background: rgba(100,116,139,.08); border-color: rgba(148,163,184,.18); }
/* Silver — flat, dim, cool grey. No highlight streak, so it reads matte next to Platinum. */
.loy-tier[data-tier="silver"]   { background: rgba(120,134,156,.14); border-color: rgba(176,190,210,.34); }
.loy-tier[data-tier="gold"]     { background: rgba(230,179,77,.16);  border-color: rgba(230,179,77,.42); }
/* Platinum — bright metallic with a diagonal sheen band + soft glow, so it looks polished/shiny. */
.loy-tier[data-tier="platinum"] {
  background:
    linear-gradient(114deg,
      rgba(226,232,240,.10) 0%,
      rgba(226,232,240,.30) 34%,
      rgba(255,255,255,.62) 50%,
      rgba(203,213,225,.30) 64%,
      rgba(148,163,184,.10) 100%);
  border-color: rgba(240,246,252,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 14px rgba(226,232,240,.14);
}

/* Current tier — a bright ring instead of flattening the tint background. */
.loy-tier.on { border-color: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.loy-tier.on .loy-tier-perks li { color: rgba(255,255,255,.82); }

/* ===== Cart drawer \u2014 loyalty nudge (guests) ===== */
.cart-loy {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  background: var(--off); border: 1px solid var(--border); cursor: pointer;
  font-size: 12.5px; line-height: 1.4; color: var(--muted);
  transition: border-color .15s ease, background .15s ease;
}
.cart-loy:hover { border-color: var(--ink); background: #fff; }
.cart-loy-ic { color: var(--accent); flex: 0 0 auto; font-size: 10px; line-height: 1.55; }
.cart-loy b { color: var(--ink); font-weight: 700; }

/* ===== Checkout \u2014 current tier status strip ===== */
.co-tier {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
  background: var(--off); border: 1px solid var(--border);
}
.co-tier-badge {
  flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px; background: var(--ink); color: #fff;
}
.co-tier-badge[data-tier="silver"] { background: #64748b; }
.co-tier-badge[data-tier="gold"] { background: #c99a3a; }
.co-tier-badge[data-tier="platinum"] { background: linear-gradient(135deg,#475569,#94a3b8); }
.co-tier-txt { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.co-tier-txt b { color: var(--ink); font-weight: 700; }

/* ===== Account / Page header ===== */
.page-hd h1 em { color: var(--em-tone); }
.page-hd { padding: 80px 0 56px; }

/* Filters (research, products) */
.chip { border-radius: 100px; }
.chip.on { background: var(--accent); border-color: var(--accent); }
.chip-count {
  display: inline-block; margin-left: 5px;
  font-size: 10px; font-weight: 700; opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.chip.on .chip-count { opacity: 0.7; }
.r-type-chip { background: var(--accent); }

/* Category eyebrow — only shown in the mobile article-list layout below */
.r-cat-eyebrow { display: none; }

/* ===== Research page → professional article-list on mobile ===== */
/* Small colored thumbnail on the left, category + headline + dek on the right —
   image de-emphasized, reads like a publication's article index. */
@media (max-width: 640px) {
  .r-grid-tight { grid-template-columns: 1fr !important; gap: 10px !important; }

  .r-grid-tight .r-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
  }
  .r-grid-tight .r-card:hover { transform: none; box-shadow: none; }

  /* thumbnail → small full-height strip on the side */
  .r-grid-tight .r-thumb {
    aspect-ratio: auto;
    width: 96px;
    height: 100%;
    min-height: 116px;
    border-radius: 0;
    font-size: 0;
  }
  /* drop the on-image chips; category becomes a text eyebrow instead */
  .r-grid-tight .r-thumb .tag,
  .r-grid-tight .r-type-chip--abs { display: none; }

  .r-grid-tight .r-body {
    padding: 13px 40px 13px 15px;   /* right pad keeps the title clear of the save button */
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .r-grid-tight .r-cat-eyebrow {
    display: block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
  }
  .r-grid-tight .r-body h3 {
    font-size: 14.5px; font-weight: 600; line-height: 1.28;
    margin-bottom: 5px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .r-grid-tight .r-body p {
    font-size: 12px; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* compact footer: keep the meta line, hide compound chips to declutter */
  .r-grid-tight .r-card-foot { margin-top: auto; padding-top: 9px; gap: 0; }
  .r-grid-tight .r-meta { margin-top: 0; font-size: 10.5px; gap: 7px; }
  .r-grid-tight .r-compounds { display: none; }

  /* save → small, top-right of the row */
  .r-grid-tight .r-card-save {
    top: 9px; right: 9px;
    width: 26px; height: 26px;
    background: rgba(255,255,255,.9);
  }

  /* Featured lead card → same horizontal article-list row */
  .r-featured {
    grid-template-columns: 96px 1fr !important;
    border-radius: 8px;
    margin-bottom: 10px;
    align-items: stretch;
    position: relative;
  }
  .r-featured:hover { transform: none; box-shadow: none; }
  .r-featured-thumb { min-height: 116px; height: 100%; }
  .r-featured-pill { display: none; }            /* hide the on-image star pill */
  .r-featured-body { padding: 13px 40px 13px 15px; }
  .r-featured-body .r-cat-eyebrow {
    display: block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
  }
  .r-featured-body .r-meta-row { display: none; }
  .r-featured-body h2 {
    font-size: 14.5px !important; font-weight: 600; line-height: 1.28 !important;
    margin-bottom: 5px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .r-featured-body > p {
    font-size: 12px; line-height: 1.45; color: var(--muted); margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .r-featured-findings { display: none; }
  /* collapse the foot to just a compact save icon, top-right like the grid cards */
  .r-featured-foot {
    position: absolute; top: 9px; right: 9px;
    margin: 0; gap: 0;
  }
  .r-featured-foot .btn-ink { display: none; }    /* hide "Read analysis" (card is tap-through) */
  .r-featured-foot .r-save {
    width: 26px; height: 26px; padding: 0; gap: 0;
    border-radius: 100px; font-size: 0;           /* hide the label, keep the icon */
    background: rgba(255,255,255,.9);
    justify-content: center;
  }
  .r-featured-foot .r-save svg { width: 14px; height: 14px; }
}

/* ===== Cart drawer (small refinements) ===== */
.cart-progress-fill { background: var(--accent); }
.cart-progress-line b { color: var(--accent); }
.cart-progress-line--win { color: #16a34a; }

/* ===== Product photography (uploaded vial images) ===== */
.card-img { position: relative; overflow: hidden; }
.card-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block; z-index: 0;
}

/* PDP main image — fill the card cleanly (crop empty studio space) */
.pd-img { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.pd-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  display: block;
}
.pd-thumb { position: relative; overflow: hidden; }
.pd-thumb-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  display: block;
}
.pd-related-thumb { position: relative; overflow: hidden; }
.pd-related-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block; z-index: 0;
}
.pd-related-thumb .card-badge { z-index: 2; }
.finder-result-thumb { position: relative; overflow: hidden; }
.finder-result-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}

/* A keyed reorder link rendered for a guest: the same shell, without the account sidebar it has no
 * business showing someone who has no account. See template-account.php. */
.acct-wrap--solo { grid-template-columns: 1fr; }
.acct-wrap--solo .acct-main { max-width: 760px; margin-inline: auto; }

/* Cart drawer / account / order thumbnails
 *
 * ── .cart-photo REQUIRES A POSITIONED PARENT ──────────────────────────────────────────────────
 *
 * It is `position: absolute; inset: 0`, so it fills its containing block — which is the nearest
 * POSITIONED ancestor, not the nearest box. A parent that is merely 56px with overflow:hidden does
 * not qualify: the image then sizes against the initial containing block and renders at the full
 * viewport, and `overflow: hidden` on an unpositioned ancestor cannot clip it because the image's
 * containing block is outside that ancestor entirely.
 *
 * That is exactly what the reorder review page did. `.reorder-thumb` was the one .cart-photo parent
 * of six never added to this list, so every row's thumbnail rendered at 1440x900 and the page read
 * as a single enormous product image above the subtotal.
 *
 * The list is kept, because it is also what applies the clipping. The :has() rule after it is the
 * part that does not need maintaining: any element that directly wraps a .cart-photo gets the
 * containing block that photo is written against, whether or not somebody remembered this file.
 */
.cart-thumb, .cart-upsell-thumb, .acct-order-thumb, .acct-sub-thumb, .acct-reorder-thumb,
.reorder-thumb { position: relative; overflow: hidden; }

:has(> .cart-photo) { position: relative; }

.cart-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}

/* ===== Heading emphasis EVERYWHERE — two-tone slate ===== */
h1 em, h2 em, h3 em,
.stack-tagline em,
.q-panel .eyebrow em,
.modal-body h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--em-tone);
  letter-spacing: -0.02em;
}
.compare-head h3, .hiw-step .hiw-num { font-family: inherit; font-style: normal; }

/* hiw-num was an italic serif numeric — switch font, keep navy */
.hiw-num {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-size: 56px;
}

/* ===== Product detail page accents ===== */
.pd-price b, .pd-price-now { color: var(--ink); }
.pd-eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 0.16em; }
.pd-add-row .btn-ink { background: var(--accent); }
.pd-add-row .btn-ink:hover { background: var(--accent-hover); }

/* ===== PDP inline bulk case ===== */
.pd-case {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 10px;
  padding: 16px 18px;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pd-case:hover { border-color: var(--border-strong); background: var(--off); }
.pd-case.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(11,37,69,0.06); }

.pd-case-radio {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 100px;
  position: relative;
  transition: border-color .15s ease;
}
.pd-case.on .pd-case-radio { border-color: var(--accent); }
.pd-case.on .pd-case-radio::after {
  content: ''; position: absolute; inset: 4px;
  background: var(--accent); border-radius: 100px;
}

.pd-case-vials { position: relative; width: 52px; height: 34px; flex-shrink: 0; }
.pd-case-vial {
  position: absolute; bottom: 0;
  width: 14px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
  border: 1px solid rgba(11,37,69,0.2);
  border-radius: 3px 3px 6px 6px;
}
.pd-case-vial::before {
  content: ''; position: absolute; top: -3px; left: 3px; right: 3px;
  height: 4px; background: var(--accent); border-radius: 2px;
}

.pd-case-meta { flex: 1; min-width: 0; }
.pd-case-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
}
.pd-case-tag {
  background: var(--accent); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
}
.pd-case-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

.pd-case-price { text-align: right; flex-shrink: 0; }
.pd-case-unit { display: block; font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.pd-case-unit small { font-size: 11px; font-weight: 500; color: var(--muted); }
.pd-case-off {
  display: inline-block; margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #16a34a;
}

@media (max-width: 480px) {
  .pd-case { gap: 12px; padding: 14px; }
  .pd-case-vials { display: none; }
}

/* =====================================================================
   MOBILE OPTIMIZATION — overrides all base + polish rules (loads last)
   ===================================================================== */

/* --- Hamburger button (hidden on desktop) --- */
.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  margin-left: -8px;
  border: 0; background: none; cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.hdr-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.5,1.3,.4,1), opacity .2s ease;
  margin: 0 auto;
}
.hdr-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.on span:nth-child(2) { opacity: 0; }
.hdr-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile slide-in nav --- */
.mnav-scrim {
  position: fixed; inset: 0;
  background: rgba(10,20,40,0.5);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1200;
}
.mnav-scrim.on { opacity: 1; visibility: visible; }

.mnav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(82vw, 340px);
  background: #fff;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .34s cubic-bezier(.4,0,.1,1);
  box-shadow: 0 0 60px rgba(10,20,40,0.25);
  padding: max(env(safe-area-inset-top), 16px) 0 max(env(safe-area-inset-bottom), 16px);
}
.mnav.on { transform: translateX(0); }

.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mnav-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.mnav-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--off); border-radius: 10px;
  color: var(--ink); cursor: pointer;
}
.mnav-close:active { background: var(--border); }

.mnav-links {
  display: flex; flex-direction: column;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}
.mnav-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 22px;
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mnav-links a svg { color: var(--muted); }
.mnav-links a.active { color: var(--accent); }
.mnav-links a.active svg { color: var(--accent); }
.mnav-links a:active { background: var(--off); }

.mnav-cat-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 17px 22px;
  font-size: 16px; font-weight: 500; color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.mnav-cat-toggle svg { color: var(--muted); }
.mnav-cat-toggle.on { color: var(--accent); }
.mnav-cat-toggle.on svg { color: var(--accent); }
.mnav-cat-list { display: flex; flex-direction: column; background: var(--off); }
.mnav-cat-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 22px 14px 34px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  font-family: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.mnav-cat-item:active { background: var(--border); }

.mnav-foot {
  padding: 20px 22px 8px;
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--border);
}
.mnav-contact {
  font-size: 13px; color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px;
}
.mnav-contact-arrow {
  color: var(--accent);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.mnav-contact:hover .mnav-contact-arrow,
.mnav-contact:active .mnav-contact-arrow { transform: translateX(3px); }

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */

@media (max-width: 900px) {
  /* Was `html, body { overflow-x: hidden }` — that turned html/body into scroll
     containers below 900px and broke the sticky floating header (it scrolled away
     instead of staying pinned). Base rule already does `body { overflow-x: clip }`,
     which clips horizontal overflow WITHOUT breaking sticky. Do NOT set hidden here. */
  .wrap { padding-left: 22px; padding-right: 22px; }
  .hdr .wrap { padding-left: 16px; padding-right: 16px; }

  /* ONE ROW, FIVE CONTROLS: burger · language | centred logo | avatar · cart.
     The grid stays three columns and the two groups keep the child count at three, which is what
     keeps the right-hand controls out of a second row.

     The side tracks are `auto`, NOT `1fr`. Equal `1fr` tracks centre the logo in the BAR, which
     looks right in English and silently breaks everywhere the translated controls are wider: the
     right group needs more than its half, and since it is a grid item it does not push anything —
     it overlaps the centred logo. That reads as a layout bug, not an overflow, so no page-overflow
     or wrap check catches it (measured: Arabic -16px at 390px, -31px at 360px, German -1px).
     Content-sized side tracks plus a logo centred in the middle track give every language a logo
     centred in the space that is actually free, and no overlap at any width.

     min-width:0 lets the two groups compress rather than force page overflow at 360px. No
     flex-wrap here in either direction: nowrap is already the initial value and nothing sets wrap,
     so writing it would only be dormant CSS that looks like it is doing the work. The wrap that
     actually mattered was the grid auto-placing a fourth child, and markup fixed that. */
  .hdr-burger { display: flex; }
  .nav { display: none !important; }
  .hdr-inner { gap: 12px !important; grid-template-columns: auto minmax(0, 1fr) auto; }
  .hdr-lead,
  .hdr-inner > .hdr-actions { min-width: 0; }
  .hdr-lead { display: flex; align-items: center; gap: 4px; }
  .hdr-inner > .hdr-lead { justify-self: start; }
  .hdr-inner > .logo { height: 38px; justify-self: center; margin: 0; }
  .hdr-inner > .hdr-actions { justify-self: end; }
  .hdr-search-btn { display: none; }   /* search lives in menu / products page */
  .hdr-acct-name { display: none; }
}

@media (max-width: 768px) {
  section { padding: 64px 0 !important; }

  /* Catalog / simple page header — compact so products are visible sooner */
  .page-hd { padding: 26px 0 16px !important; }
  .page-hd h1 { font-size: clamp(28px, 7.4vw, 34px) !important; margin-bottom: 8px !important; }
  .page-hd p { font-size: 14px !important; }
  .page-hd .eyebrow { font-size: 11px !important; }
  .catalog-body { padding-top: 0 !important; }

  /* Hero stacks — COPY-FIRST on mobile: eyebrow → headline → lede → vials → CTAs → trust.
     .hero-copy dissolves (display: contents) so its children join the column and the
     vial group can sit between the lede and the CTAs — it supports the message now,
     it doesn't introduce it. Headline is the first content below the nav. */
  .hero { padding: 36px 0 56px !important; }
  .hero-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; }
  .hero-copy h1 { order: 2; }
  .hero-copy .lede { order: 3; margin-bottom: 10px !important; }
  .hero-visual { order: 4; }
  .hero-ctas { order: 5; }
  .hero-trust { order: 6; white-space: nowrap; flex-wrap: nowrap; gap: 18px; }
  /* Homepage QA-protocol section archived on mobile (its facts live on the
     Quality & testing page); tall tab list + detail card cost a full screen. */
  .quality-section { display: none !important; }
  /* Mobile: rotating dispatch/CoA pill hidden (its facts live in the announcement
     bar + trust dots) and the vials pull up into the freed space. */
  .hero-coa { display: none !important; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 48px) !important; margin-bottom: 18px !important; }
  .hero .lede { font-size: 15.5px !important; margin-bottom: 26px !important; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1; justify-content: center; }
  /* The square box left ~32% dead space above the vials (they anchor near the
     bottom, and the CoA pill that used to fill the top is hidden on mobile).
     Crop the box to 0.72 and scale every vial's height/bottom by the same
     1/0.72 so they render at exactly the same size, just without the gap. */
  .hero-visual { max-width: min(400px, 96vw); margin: -10px auto 18px; padding-top: 0 !important; aspect-ratio: 1 / .72; }
  .hero-visual .hv-center { height: 83%; bottom: 11%; }
  .hero-visual .hv-left { height: 65%; bottom: 16.5%; }
  .hero-visual .hv-right { height: 68%; bottom: 15%; }
  .hero-visual .hero-glow::after { bottom: 12.5%; height: 10%; }

  /* Section heads */
  .sec-head .sec-head-row { grid-template-columns: 1fr !important; gap: 16px !important; }
  /* SECTION INTRO PARAGRAPHS ARE DESKTOP-ONLY (owner ruling, 14 Sep 2026). On a phone a section is
     eyebrow + heading + cards; the intro sentence under the heading costs a third of a screen
     before the first card. One rule for every header component the theme has — .sec-head (home
     sections, wholesale, partner, quality), .sec-hd (about), .page-hd (FAQ, contact, catalog,
     quality, about, wholesale, apply, calculator) and .r-hero-band (bundles, research) — so a new
     section inherits it. display:none keeps the text in the DOM: translations, SEO and the
     untranslated detector (which diffs hidden text) see it exactly as before. The homepage hero lede
     is the page's thesis, not a section intro, and is not touched. Where a section head had a
     paragraph, its margins are pulled in so the heading closes ranks with the cards; a head without
     one (cart, FAQ home section) keeps its exact geometry — the oracle measured the cart page. */
  .sec-head > .lede, .sec-head > p, .sec-hd > .lede, .sec-hd > p,
  .page-hd > p, .page-hd > .wrap > p, .r-hero-band > .wrap > p { display: none !important; }
  .sec-head:has(> .lede, > p) { margin-bottom: 32px; }
  .sec-head:has(> .lede, > p) h2 { margin-bottom: 0; }

  /* Trust strip: the marquee (above) on phones too, a little tighter. */
  .announce-marquee--trust { padding: 16px 0; }
  .announce-marquee--trust .trust-cell { margin-inline-end: 32px; }

  /* Stats band */
  .stats-band { padding: 44px 0 !important; }
  .stat-row { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  .stats-cell { padding: 4px 0 !important; border: 0 !important; text-align: center; }
  .stats-v { font-size: clamp(28px, 9vw, 40px) !important; }

  /* CTA banner */
  .cta-banner { padding: 36px 28px !important; border-radius: 16px; }
  .cta-banner h2 { font-size: clamp(30px, 8vw, 44px) !important; }
  .cta-banner .btns { flex-direction: column; }
  .cta-banner .btns .btn { width: 100%; justify-content: center; }

  /* Compare / quality / how-it-works already collapse via base rules */
}

@media (max-width: 560px) {
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* Products & research → 2-up on phones (see 4 research cards at once) */
  .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .research-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .cats { grid-template-columns: 1fr 1fr !important; }

  /* Research card density — compact 2-up */
  .research-grid .r-thumb { aspect-ratio: 5/3 !important; }
  .research-grid .r-thumb .tag { top: 9px; left: 9px; padding: 4px 9px; font-size: 9.5px; }
  .research-grid .r-body { padding: 13px 13px 15px !important; }
  .research-grid .r-body h3 {
    font-size: 13.5px !important; line-height: 1.3 !important; margin-bottom: 6px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .research-grid .r-body p {
    font-size: 11.5px !important; line-height: 1.45 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .research-grid .r-meta { margin-top: 10px !important; font-size: 10.5px !important; gap: 6px !important; }

  /* Product card density */
  /* 12px, not 14px. On a 171px card that is 28px of horizontal padding, and it left the name
     column at 77px while the longest product name on the site — "(Wolverine)" — needs 79px, so it
     broke a word across lines and left ")" stranded. Four pixels back is imperceptible and fixes
     it outright. */
  .card-meta { padding: 14px 12px 16px; }
  .card-name { font-size: 14px; }
  .card .btn { height: 40px; font-size: 12.5px; }

  /* Stacks: 2-up on mobile */
  .stacks-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Compound finder */
  .finder { padding: 22px 18px !important; }
  .finder-grid { grid-template-columns: 1fr !important; }
  .finder-steps { gap: 6px; }
  .finder-step-pip .finder-pip-num { font-size: 11px; }
  .finder-card h3 { font-size: 24px; }

  /* Section heads tighten */
  h2 { font-size: clamp(28px, 8vw, 40px) !important; }

  /* Newsletter — compact + kill the big gap above the card on mobile */
  .news-section { padding-top: 0 !important; padding-bottom: 20px !important; margin-top: -40px; }
  .news { padding: 30px 20px !important; }
  .news-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .news-h2 { font-size: clamp(21px, 6vw, 27px) !important; }
  .news-lede { font-size: 13.5px !important; }
  .news-logo { height: 20px !important; margin-bottom: 12px !important; }
  .news-preview { order: -1; }              /* show the letter first */
  .news-letter { transform: rotate(-1.5deg) scale(0.95); margin: 0 auto; }
  .news-meta { font-size: 11.5px; gap: 10px; }

  /* Footer single column already; tighten */
  footer.ft { padding: 36px 0 18px; }

  /* Product detail */
  .pd-quick { grid-template-columns: 1fr 1fr !important; }
  /* 3rd quick-stat spans the full width so there's no empty cell */
  .pd-quick .pd-quick-item:last-child { grid-column: 1 / -1; border-right: 0 !important; border-top: 1px solid var(--border); }
  .pd-tier-vis { gap: 2px; }

  /* Bundle page */
  .bundle-buy-row { flex-direction: column; align-items: stretch; gap: 16px; }

  /* Small-phone hero refinements */
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px) !important; }
  .hero-visual { max-width: min(360px, 97vw) !important; margin: -10px auto 16px; }
  .hero-trust { gap: 14px; font-size: 12.5px; }
  .hero-coa-ic { width: 30px; height: 30px; }
  .hero-coa-val { font-size: 13px; }
  .hero-coa-arrow { width: 24px; height: 24px; }
  .hero-card { padding: 8px 11px !important; font-size: 11.5px !important; }
  .hero-card .ic { width: 26px; height: 26px; }
  .hero-card.c1 { left: 2%; }
  .hero-card.c2 { right: 2%; }
}

/* --- Touch ergonomics: bigger tap targets everywhere small --- */
@media (max-width: 900px) and (pointer: coarse) {
  .btn { min-height: 46px; }
  .icon-btn { width: 42px; height: 42px; }
  .news-letter-toc li { padding: 13px 0; }
  a, button { -webkit-tap-highlight-color: rgba(11,37,69,0.08); }
}

/* --- Prevent iOS zoom on input focus (font-size >= 16px) --- */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
}

/* =====================================================================
   BULK OFFERS PAGE
   ===================================================================== */
.bulk-banner {
  background: var(--ink);
  padding: 26px 0;
}
.bulk-banner-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.bulk-banner-item {
  display: flex; flex-direction: column; gap: 3px;
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,0.18);
}
.bulk-banner-item b {
  font-family: inherit; font-style: normal; font-weight: 700;
  font-size: 20px; color: #fff; letter-spacing: -0.01em;
}
.bulk-banner-item span { font-size: 12.5px; color: rgba(255,255,255,0.6); }

.bulk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.bulk-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bulk-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 32px rgba(11,37,69,0.1);
  transform: translateY(-3px);
}
.bulk-thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.bulk-off {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  background: #c0392b; color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 6px;
}
.bulk-vialcount {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; color: var(--accent);
}
.bulk-vials { position: absolute; inset: 0; }
.bulk-vial {
  position: absolute; bottom: -18px;
  width: 13%; height: 78%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
  border: 1px solid rgba(11,37,69,0.18);
  border-radius: 5px 5px 9px 9px;
}
.bulk-vial::before {
  content:''; position: absolute; top: -5px; left: 22%; right: 22%;
  height: 6px; background: var(--accent); border-radius: 3px;
}
.bulk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bulk-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bulk-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.bulk-mg { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 3px; }

/* Volume discount ladder */
.vol-ladder {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.vol-step {
  position: relative;
  border: 1px solid var(--border); border-radius: 16px;
  background: #fff;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.vol-step.is-popular {
  border-color: var(--ink);
  box-shadow: 0 14px 32px rgba(11,37,69,0.1);
}
.vol-step-flag {
  position: absolute; top: 0; right: 0;
  background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 12px; border-radius: 0 16px 0 12px;
}
.vol-step-qty {
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
  line-height: 1; display: flex; align-items: baseline; gap: 8px;
}
.vol-step-qty small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.vol-step-off {
  font-family: inherit; font-style: normal; font-weight: 700;
  font-size: 28px; color: var(--accent); letter-spacing: -0.02em;
}
.vol-step-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }

/* Per-card tier selector */
.bulk-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bulk-tier {
  position: relative;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer;
  padding: 9px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bulk-tier:hover { border-color: var(--border-strong); }
.bulk-tier b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.bulk-tier span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }
.bulk-tier.is-active {
  border-color: var(--ink); background: var(--ink);
  box-shadow: 0 6px 16px rgba(11,37,69,0.16);
}
.bulk-tier.is-active b { color: #fff; }
.bulk-tier.is-active span { color: rgba(255,255,255,0.7); }
.bulk-tier-flag {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 8px; font-weight: 700; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px; white-space: nowrap;
}
@media (max-width: 1024px) {
  .vol-ladder { grid-template-columns: 1fr; }
}
.bulk-price {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 14px 0; margin-top: auto;
  border-top: 1px solid var(--border);
}
.bulk-unit { font-size: 13px; color: var(--muted); }
.bulk-unit b { font-size: 22px; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.bulk-case { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.bulk-case-was { font-size: 12px; color: var(--muted); text-decoration: line-through; text-decoration-color: #c0392b; }
.bulk-case-now { font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.bulk-case-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* Bulk CTA band */
.bulk-cta {
  background: linear-gradient(135deg, #0a1e3c 0%, #102b50 55%, #0b2545 100%);
  color: #fff;
  padding: 88px 0;
}
.bulk-cta-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.bulk-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); margin: 14px 0 18px; }
.bulk-cta h2 em { color: #c9d8ff; }
.bulk-cta p { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.6; max-width: 54ch; margin: 0 0 28px; }
.bulk-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.bulk-cta .btn-ink { background: #fff; color: var(--accent); }
.bulk-cta .btn-ink:hover { background: #c9d8ff; color: var(--accent); }
.bulk-cta .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.bulk-cta .btn-ghost:hover { background: #fff; color: var(--accent); }
.bulk-cta-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; overflow: hidden; }
.bulk-cta-stat { background: #102b50; padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.bulk-cta-stat b { font-family: inherit; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.bulk-cta-stat span { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }

@media (max-width: 1024px) {
  .bulk-grid { grid-template-columns: repeat(2, 1fr); }
  .bulk-banner-row { grid-template-columns: 1fr 1fr; gap: 22px; }
  .bulk-cta-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .bulk-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bulk-banner-row { grid-template-columns: 1fr; gap: 14px; }
  .bulk-body { padding: 14px; }
  .bulk-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FLOATING HEADER  (marquee stays in normal flow above it)
   The .hdr becomes a transparent sticky gutter; the inner
   .hdr-inner is the floating frosted "card".
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 14px 24px;
  pointer-events: none;            /* click-through the transparent gutter */
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
/* Re-enable clicks on the floating bar AND the mobile drawer/scrim
   (they're children of .hdr, so they'd otherwise inherit none). */
.hdr .wrap.hdr-inner,
.hdr .mnav,
.hdr .mnav-scrim { pointer-events: auto; }
.hdr .wrap.hdr-inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 66px;
  padding: 0 12px 0 22px;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(13,15,26,.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(13,15,26,.05), 0 6px 18px rgba(13,15,26,.07);
  transition: height .3s cubic-bezier(.4,0,.2,1), background .3s ease,
              box-shadow .3s ease, border-color .3s ease;
}
/* Scroll-compacted state (class toggled from JS) */
.hdr.is-scrolled { padding-top: 9px; padding-bottom: 9px; }
.hdr.is-scrolled .wrap.hdr-inner {
  height: 58px;
  background: #fff;
  border-color: rgba(13,15,26,.1);
  box-shadow: 0 1px 2px rgba(13,15,26,.06), 0 8px 22px rgba(13,15,26,.09);
}
.hdr .wrap.hdr-inner .logo { height: auto; flex: 0 0 auto; }
.hdr .wrap.hdr-inner .logo img { height: 40px; width: auto; max-width: none; flex: none; transition: height .3s cubic-bezier(.4,0,.2,1); }
.hdr.is-scrolled .wrap.hdr-inner .logo img { height: 36px; }

/* Nav links → segmented pill style (replaces the hanging underline) */
.hdr .nav { gap: 4px; }
/* Narrow-desktop squeeze (901–1020px): the desktop nav + globe + actions no
   longer fit at the default 56px gaps — compact everything so nothing clips. */
/* Re-tightened 13 Aug 2026: the language switcher returned to .hdr-actions and
   the nav is now 6 items, so these values no longer left room — the actions
   cluster overflowed the header pill AND the viewport (horizontal scrollbar,
   clipped cart) from 901px to ~937px. The nav track is auto-sized and cannot
   shrink below max-content, so the nav itself has to give up the width. */
@media (min-width: 901px) and (max-width: 1080px) {
  .hdr-inner { gap: 12px; }
  .hdr .wrap { padding: 0 16px; }
  .hdr .nav { gap: 0; min-width: 0; }
  .hdr .nav a { padding: 8px 6px; font-size: 12.5px; letter-spacing: -.005em; }
  .hdr-actions { gap: 4px; }
}
.hdr .nav a {
  padding: 8px 14px;
  border-radius: 10px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.hdr .nav a:hover { background: var(--off); color: var(--ink); }
.hdr .nav a.active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, #fff);
}
.hdr .nav a.active::after { display: none; }   /* kill underline indicator */

/* Mobile: clearly-floating card — wider gutters + a distinct shadow so it
   reads as floating over the (often white) content behind it. */
@media (max-width: 640px) {
  .hdr { padding: 12px 14px; }
  .hdr.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
  .hdr .wrap.hdr-inner {
    height: 56px;
    border-radius: 16px;
    padding: 0 8px;
    background: #fff;
    border-color: rgba(13,15,26,.1);
    box-shadow: 0 2px 6px rgba(13,15,26,.07), 0 10px 24px rgba(13,15,26,.09);
  }
  .hdr.is-scrolled .wrap.hdr-inner {
    height: 52px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(13,15,26,.08), 0 10px 26px rgba(13,15,26,.10);
  }
  .hdr .wrap.hdr-inner .logo img,
  .hdr.is-scrolled .wrap.hdr-inner .logo img { height: 34px; }
}

/* Narrow phones, worst case: the widest control on the right is a translated LABEL, not an icon.
   Signed out, the row is burger · language · logo · Sign in · cart, and "Sign in" is two short
   words in English and a 156px pill in Portuguese. At 360px that left the centred logo overlapped
   by the right-hand group — overlap, not overflow, so the page never scrolled sideways and every
   wrap and overflow check passed while the header looked plainly broken.

   Buy the width back from the gaps, the gutters and the pill's English-sized padding rather than
   from the controls themselves. Verified across all fifteen languages at 390px and 360px
   (scripts/header-fit-test.mjs), not just the one that first showed the fault; the tightest is
   Portuguese at 4px. Signed in this block is slack — the account pill is an avatar and a chevron,
   because the name is hidden from ≤900px above — so the signed-out row is what sets these values. */
@media (max-width: 400px) {
  .hdr { padding-left: 10px; padding-right: 10px; }
  .hdr .wrap.hdr-inner { padding: 0 6px; }
  .hdr-inner { gap: 6px !important; }
  .hdr-actions { gap: 4px; }
  .hdr-lead { gap: 3px; }
  .hdr-auth { padding: 0 10px; }
}

/* ===== Sold-out product card ===== */
.card-badge--soldout { background: var(--ink); color: #fff; opacity: .92; }
.card--soldout .card-photo { opacity: .5; filter: grayscale(.35); }
.card--soldout .card-price { opacity: .55; }

/* ===== PDP sold-out: hide all purchase config, show only the notify card ===== */
.pd-buy--soldout .pd-countdown,
.pd-buy--soldout .pd-dose,
.pd-buy--soldout .pd-qtybar,
.pd-buy--soldout .pd-priceline,
.pd-buy--soldout .pd-sub,
.pd-buy--soldout .pd-bundle,
.pd-buy--soldout .pd-kit,
.pd-buy--soldout .pd-badges,
.pd-buy--soldout .pd-ship,
.pd-buy--soldout .pd-pay { display: none !important; }
.pd-buy--soldout .pd-cta-row { margin-top: 0; }

/* ===== PDP notify-when-in-stock ===== */
.pd-notify {
  border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(180deg, #fff, var(--off));
  padding: 20px; margin-top: 4px;
  box-shadow: 0 1px 2px rgba(13,15,26,.04), 0 10px 30px rgba(13,15,26,.06);
}
.pd-notify-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.pd-notify-bell {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, #fff); color: var(--accent);
}
.pd-notify-bell svg { width: 22px; height: 22px; }
.pd-notify-headtx { min-width: 0; padding-top: 1px; }
.pd-notify-head .pd-notify-t {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2;
}
.pd-notify-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 100px; line-height: 1.4;
}
.pd-notify-lead { font-size: 13.5px; color: var(--muted); font-weight: 400; margin-top: 5px; line-height: 1.5; }
.pd-notify-form { display: flex; flex-direction: column; gap: 9px; }
.pd-notify-form input {
  width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 12px;
  padding: 0 16px; height: 52px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-notify-form input::placeholder { color: color-mix(in oklab, var(--muted) 75%, #fff); }
.pd-notify-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.pd-notify-form .btn { width: 100%; white-space: nowrap; }
.pd-notify-fine {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12px; color: var(--muted);
}
.pd-notify-fine svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.pd-notify--done { display: flex; align-items: center; gap: 13px; }
.pd-notify-ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 100px;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
}
.pd-notify-ic svg { width: 20px; height: 20px; }
.pd-notify--done .pd-notify-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.pd-notify-s { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
@media (max-width: 480px) {
  .pd-notify { padding: 17px; }
  .pd-notify-head { gap: 11px; margin-bottom: 14px; }
  .pd-notify-bell { width: 40px; height: 40px; }
  .pd-notify-head .pd-notify-t { font-size: 15px; }
  .pd-notify-form input { height: 50px; }
}

/* ===== Checkout payment error ===== */
.co-pay-error {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid color-mix(in oklab, #c0392b 40%, var(--border));
  background: color-mix(in oklab, #c0392b 8%, #fff);
  color: #a02a1e; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.45;
}
.co-pay-error svg { flex-shrink: 0; margin-top: 1px; color: #c0392b; }

/* ===== Contact form success ===== */
.contact-sent {
  border: 1px solid var(--border); border-radius: 16px; background: var(--off);
  padding: 40px 32px; text-align: center; align-self: start;
}
.contact-sent-ic {
  width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 100px;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.contact-sent h2 { font-size: 24px; margin-bottom: 8px; }
.contact-sent p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 380px; margin: 0 auto 24px; }

/* ===== Account address book ===== */
.addr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.addr-card {
  position: relative; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; padding: 18px; min-width: 0;
}
.addr-card--def { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.addr-def-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 100px;
}
.addr-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.addr-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.addr-lines { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.addr-actions { display: flex; gap: 16px; margin-top: 14px; }
.addr-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.addr-link:hover { color: var(--accent); }
.addr-link--danger { color: #c0392b; }
.addr-add {
  border: 1.5px dashed var(--border); border-radius: 14px; background: var(--off);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 140px; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.addr-add:hover { border-color: var(--ink); color: var(--ink); }
.addr-add-plus {
  width: 34px; height: 34px; border-radius: 100px; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--ink);
}
.addr-form { margin-top: 4px; }
.addr-form label { display: block; margin-bottom: 14px; }

/* ===== Entry gate (first-visit welcome) ===== */
.gate-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,13,22,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: gateFade .25s ease;
}
@keyframes gateFade { from { opacity: 0; } to { opacity: 1; } }
.gate-card {
  position: relative;
  width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; border-radius: 20px;
  padding: 34px 34px 26px;
  box-shadow: 0 24px 80px rgba(10,13,22,.35);
  text-align: center;
}
.gate-x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gate-x:hover { color: var(--ink); border-color: var(--ink); }
.gate-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.gate-logo img { height: 30px; }
.gate-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
.gate-sub { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.gate-field { display: block; text-align: left; margin-bottom: 14px; }
.gate-field-l {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.gate-field select {
  width: 100%; height: 48px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  background: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7a90' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.gate-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,37,69,.10); }
.gate-check {
  display: flex; align-items: flex-start; gap: 11px;
  text-align: left; font-size: 14px; color: var(--ink); line-height: 1.45;
  margin: 0 0 12px; cursor: pointer;
}
.gate-check input {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px;
  accent-color: var(--accent); cursor: pointer;
}
.gate-enter { margin-top: 8px; }
.gate-enter:disabled { opacity: .45; cursor: not-allowed; }
.gate-fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.gate-fine a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.gate-fine a:hover { color: var(--accent); }
/* The FOOTER language switcher was REMOVED, not restyled — 2 September 2026 ruling (owner-confirmed,
   export 1234567ccd): the control is a HEADER control on both viewports and `.ft-bot` carries only
   the © disclaimer. Its rules are deleted here and in i18n.css.

   Deleted rather than left dormant, for the reason this exact block used to give about the header
   switcher: styles that outlive their markup make the next placement change look intentional when
   it is actually an accident. Two of the three previous moves left a styled ghost behind — the
   21 Aug header rules survived here for two weeks, and this .ft-lang block was still styling a
   <select> that stopped existing on 31 August. The current switcher lives in one place,
   assets/css/i18n.css, under .hdr-lang-*. */
.gate-logo img { height: 26px; width: auto; max-width: 78%; object-fit: contain; }
@media (max-width: 480px) {
  .gate-backdrop { padding: 12px; align-items: flex-end; }
  .gate-card { padding: 26px 20px 20px; border-radius: 18px 18px 14px 14px; max-height: calc(100vh - 24px); }
  .gate-title { font-size: 26px; }
  .gate-sub { font-size: 13.5px; margin-bottom: 18px; }
}

/* ===== Form-state discipline (global, component-level — states can't drift) ===== */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,37,69,.10); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:user-invalid, textarea:user-invalid { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180,35,24,.08); }
.news-form input:focus-visible, .news-form input:user-invalid { box-shadow: none; }
/* Reserve-order panel (checkout step 4 — replaces card fields) */
.co-reserve { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); background: var(--off); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.co-reserve svg { flex: 0 0 auto; color: var(--accent); margin-top: 2px; }

/* ===== Micro-interaction discipline (anti-generic pass — precise, quick, calm) ===== */
.btn, .pd-tool, .pd-var, .co-deliv, .chip { transition-duration: .16s; transition-timing-function: ease; }
.btn:active { transform: translateY(1px); transition-duration: .1s; }
.btn-ink:hover { box-shadow: 0 4px 14px rgba(11,37,69,.22); }
.card:active, .stack-card:active { transform: translateY(0); }
select:hover, .pd-kit-sel:hover { border-color: var(--border-strong, #ccd2dd); }
/* Motion rule: NO scroll-triggered fade-ins anywhere in the store (coming-soon
   entrance is the one sanctioned load animation). Motion only communicates
   state (hover/active/open) or directs attention (CoA shine, dispatch tick). */

/* ===== BUY-COLUMN RESOLUTION (visual finish pass — one material) =====
   Normative system, mirrored in TOKENS.md §Buy-column material:
   · blocks: r12 · 1px var(--border) · #fff (no tints, no gradients, no shadows)
   · inner tiles/badges/checks: r8 (concentric, parent−4)
   · row padding 12px 14px (mobile 10px 12px) · column gap 12px (mobile 10px)
   · selected = 1px --accent border + --accent-soft tint + accent-filled mark
   · hover = --border-strong border (list rows: --off wash) · disabled = .55 opacity
   · every transition .16s ease · prices 700 tabular-nums */
.pd-countdown, .pd-lot, .pd-dose-list, .pd-qtybar, .pd-kit-item, .pd-ship, .pd-tool, .pd-notify, .pd-tier, .pd-sub-opt { border-radius: 12px; border: 1px solid var(--border); background: #fff; box-shadow: none; }
.pd-tool--coa { background: var(--accent); border-color: var(--accent); } /* the one sanctioned exception: CTA-family navy */
.pd-dose-badge, .pd-tool-ic, .pd-notify-bell, .pd-kit-check, .pd-kit-img, .cart-thumb { border-radius: 8px; }
.pd-ship-hd, .pd-kit-item, .pd-dose-opt, .pd-tool { padding: 12px 14px; }
.pd-qtybar { padding: 8px 10px 8px 14px; }
.pd-countdown, .pd-lot, .pd-dose, .pd-qtybar, .pd-priceline, .pd-ship, .pd-pay { margin-bottom: 12px; }
.pd-kit { margin-top: 12px; }
.pd-bundle { margin: 12px 0; }
.pd-cta-row { margin-top: 12px; margin-bottom: 12px; }
/* one selected mechanism */
.pd-dose-opt.on { background: var(--accent-soft); }
.pd-dose-opt.on::before { display: none; }
.pd-dose-opt.on .pd-dose-badge { background: var(--accent); color: #fff; }
.pd-dose-opt.on .pd-dose-sub { color: var(--accent); font-weight: 500; }
.pd-kit-item.on { border-color: var(--accent); background: var(--accent-soft); }
.pd-kit-item.on .pd-kit-check { background: var(--accent); border-color: var(--accent); }
.pd-kit-item.on:hover { border-color: var(--accent); }
.pd-var.on { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); font-weight: 600; }
.pd-tier.on, .pd-sub-opt.on { border-color: var(--accent); background: var(--accent-soft); }
/* one hover mechanism */
.pd-var:hover, .pd-kit-item:hover, .pd-tool:hover, .pd-tier:hover, .pd-sub-opt:hover { border-color: var(--border-strong); }
.pd-dose-opt:hover { background: var(--off); }
/* one clock */
.pd-dose-opt, .pd-dose-badge, .pd-var, .pd-tier, .pd-sub-opt, .pd-kit-item, .pd-kit-check, .pd-tool, .pd-qty button, .pd-ship-chev, .cart-step-btn { transition-property: background-color, border-color, color, opacity, transform; transition-duration: .16s; transition-timing-function: ease; }
.pd-kit-check svg { transition: opacity .16s ease; }
/* one type hierarchy in rows */
.pd-bundle-label, .pd-row label, .pd-qtybar-label, .pd-tools-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-kit-name { font-weight: 600; }
.pd-dose-name { font-size: 15px; }
.pd-ship-t { font-size: 13px; }
.pd-dose-amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-kit-price, .pd-priceline .val, .pd-add-total, .cart-price, .cart-sub { font-variant-numeric: tabular-nums; }
.pd-kit-price { font-weight: 700; }
.cart-price { font-weight: 700; }
/* mobile: same radii, own spacing values */
@media (max-width: 640px) {
  .pd-countdown, .pd-lot, .pd-dose-list, .pd-qtybar, .pd-kit-item, .pd-ship, .pd-tool, .pd-notify, .pd-tier, .pd-sub-opt, .pd-var { border-radius: 12px; }
  .pd-ship-hd, .pd-kit-item, .pd-dose-opt, .pd-tool { padding: 10px 12px; }
  .pd-qtybar { padding: 7px 8px 7px 12px; }
  .pd-countdown { padding: 10px 12px !important; }
  .pd-lot { padding: 10px 12px !important; }
  .pd-countdown, .pd-lot, .pd-dose, .pd-qtybar, .pd-priceline, .pd-ship, .pd-pay { margin-bottom: 10px !important; }
  .pd-kit { margin-top: 10px; }
  .pd-bundle { margin: 10px 0; }
  .pd-cta-row { margin-top: 10px; margin-bottom: 10px; }
}

/* ===== Usability-audit fixes (matrix sweep 320→1920) ===== */
/* Wholesale custom-quote card overflowed ≤360 (min-content wider than column) */
.wh-custom, .wh-custom-card { min-width: 0; }
.wh-custom-card * { min-width: 0; }
.wh-quote-v { overflow-wrap: anywhere; }
/* Kit row min-content overflowed at 320 (+15px): compress fixed parts, let text shrink */
.pd-kit-name { min-width: 0; }
.pd-kit-sel { min-width: 0; }
@media (max-width: 374px) {
  .pd-kit-item { gap: 8px; }
  .pd-kit-img { width: 36px; height: 36px; }
}
/* Touch targets ≥44px on touch viewports — visual size kept where small is
   intentional; hit area expanded via ::after (part of the element's hit region) */
@media (max-width: 932px) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .pd-kit-sel { height: 44px; }
  .r-save, .r-card-save, .po-pip { position: relative; }
  .r-save::after, .r-card-save::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  .po-pip::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
}

/* Audit round 2: checkout promo input couldn't shrink (+18px @320) */
.co-promo-row input { min-width: 0; flex: 1 1 auto; }
@media (max-width: 932px) {
  /* research grid/list toggle 32→44 */
  .r-view-toggle button { width: 44px; height: 44px; }
  /* cart stepper (22px visual, grouped pill) + Remove: 44px HIT areas via ::after */
  .cart-step-btn, .cart-remove { position: relative; }
  .cart-step-btn::after { content: ""; position: absolute; inset: -11px; }
  .cart-remove::after { content: ""; position: absolute; inset: -14px -8px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEME-ONLY (not in the design source): login-page loyalty ladder layout.
   Loyalty is ARCHIVED (DIVERGENCES.md §3 / ARCHIVED.md §2) so none of this
   renders today — it is kept, inert, so the restore path stays intact. These
   are the only two selectors in this file that the v9 source does not define.
   ───────────────────────────────────────────────────────────────────────────── */

/* Current tier — a bright ring instead of flattening the tint background. */
.loy-tier.on { border-color: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.loy-tier.on .loy-tier-perks li { color: rgba(255,255,255,.82); }

/* v2 AU1: auth-PAGE ladder = compact 2x2 grid, perks hidden (modal keeps the stacked+perks layout) */
.auth-page-sell .loy-ladder,
.auth-page-sell-mobile .loy-ladder {
  display: grid; gap: 10px;
}
.auth-page-sell .loy-ladder { grid-template-columns: repeat(2, 1fr); }
.auth-page-sell-mobile .loy-ladder { grid-template-columns: repeat(2, 1fr); }

/* Each tier becomes a vertical mini-card: badge → name/threshold → perks. */
.auth-page-sell .loy-tier,
.auth-page-sell-mobile .loy-tier {
  flex-direction: column; align-items: flex-start; gap: 10px;
  height: 100%; padding: 13px 13px 14px;
}
.auth-page-sell .loy-tier-txt,
.auth-page-sell-mobile .loy-tier-txt { width: 100%; gap: 8px; }
.auth-page-sell .loy-tier-head,
.auth-page-sell-mobile .loy-tier-head {
  flex-direction: column; align-items: flex-start; gap: 1px;
}
.auth-page-sell .loy-tier-name,
.auth-page-sell-mobile .loy-tier-name { font-size: 14px; }
/* Simpler + shorter: badge + name + threshold only. Per-tier perks stay in the
   AuthModal (which keeps the stacked layout), just hidden on the login page. */
.auth-page-sell .loy-tier-perks,
.auth-page-sell-mobile .loy-tier-perks { display: none; }
.auth-page-sell .loy-tier,
.auth-page-sell-mobile .loy-tier { gap: 8px; padding: 12px 13px 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   P1 · TOUCH-ACTION — the 300ms that is not the 300ms everyone talks about
   ═══════════════════════════════════════════════════════════════════════════
   The old 300ms click delay is gone: it disappears once a page declares
   `<meta name="viewport" content="width=device-width">`, which every template here does. What is
   NOT gone is the delay a browser takes on a control it might have to double-tap-zoom instead —
   the engine has to wait to find out which gesture it is watching, and until it decides, nothing
   happens. On a button that is the difference between "it responded" and "did that register?".

   `touch-action: manipulation` says: this element is for tapping and panning, never for
   double-tap-zoom, so act on the first touch. It does NOT disable pinch-to-zoom, which stays
   available everywhere on the page — a `user-scalable=no` viewport or `touch-action: none` on
   <body> would take that away, and taking pinch-zoom off a site people read on a phone is not a
   trade worth making for a few milliseconds.

   Scoped to controls for that reason, not applied to `*`. Body text keeps every gesture it has.

   Measured first: a tap probe across the home, catalog, PDP and cart confirmed every one of these
   targets is genuinely reachable — nothing invisible sits over them — and that all of them
   reported `touch-action: auto` before this block existed. */
a[href],
button,
input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"],
select,
label,
summary,
[role="button"], [role="tab"], [role="switch"],
.btn, .icon-btn, .hdr-burger,
.card, .card-photo,
.pd-dose-opt, .pd-add, .pd-qty, .pd-acc-h, .pd-tool, .pd-kit-item,
.cart-step-btn, .cart-rm, .cart-upsell-go,
.co-sum-item, .co-paym-opt, .co-step-h,
.sticky-buy-add, .sticky-notify-btn, .sticky-buy-dose,
.acct-nav-item, .acct-reorder-card, .acct-toggle,
.calc-preset, .calc-input,
.ft-acc-btn, .news-btn, .coa-x, .coa-doc-act {
  touch-action: manipulation;
}

/* A 42px control fails the 44px minimum by two pixels, which is exactly the size of miss that
   feels like the site ignored you rather than like you missed. The bars inside are unchanged —
   only the region that counts as "the button" grows. */
.hdr-burger { width: 44px; height: 44px; }

/* ═══ PARTNERSHIP TAB + AFFILIATE DASHBOARD CARD (DIVERGENCES.md §29) ═══════════
   Built from the account's existing vocabulary — the same card shell, the same
   eyebrow key, the same pill buttons — so the tab reads as part of the account
   rather than a bolted-on portal. */

/* The third dashboard card. At ≤720px the grid is two columns (DIVERGENCES §11);
   a third card would leave a ragged half-width orphan, so it spans the row. Two
   equal cards above, one full-width below — still "side by side, equal size",
   which is what §11 is protecting. */
.acct-stat--affiliate .acct-stat-v { letter-spacing: .04em; }
.acct-stat--affiliate .acct-stat-d a { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) {
  .acct-stats .acct-stat--affiliate { grid-column: 1 / -1; }
}

.pt-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 100px; background: #fff;
  font-size: 13.5px;
}
.pt-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.pt-status--expired .pt-status-dot { background: #b91c1c; }
.pt-status-tx { font-weight: 600; color: var(--ink); }
.pt-status--expired .pt-status-tx { color: #b91c1c; }
.pt-uses { color: var(--muted); margin-left: auto; }

.pt-card {
  padding: 20px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
}
.pt-k {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.pt-code-row { display: flex; align-items: stretch; gap: 8px; }
.pt-code {
  flex: 1; min-width: 0; /* min-width:auto on a flex child is the overflow bug this build keeps hitting */
  display: flex; align-items: center; padding: 0 16px; height: 44px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--paper, #f7f8fa);
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-link {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--paper, #f7f8fa);
  font: inherit; font-size: 13.5px; color: var(--muted);
  text-overflow: ellipsis;
}
.pt-link:focus { outline: none; border-color: var(--ink); color: var(--ink); }
.pt-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--ink); border-radius: 100px; background: #fff; color: var(--ink);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pt-copy:hover { background: var(--ink); color: #fff; }
/* Confirmation, in the site's motion vocabulary: it says what happened rather than
   trusting the clipboard to have visibly worked. */
.pt-copy.is-copied {
  background: var(--green-soft, #e7f6ee); border-color: #16a34a; color: #0f7a45;
  animation: ptCopied .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes ptCopied { from { transform: scale(.96); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pt-copy.is-copied { animation: none; } }

.pt-hint { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pt-terms { margin: 0; padding-left: 18px; }
.pt-terms li { font-size: 14px; line-height: 1.7; color: var(--ink); }

.pt-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-earn-cell { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--paper, #f7f8fa); }
.pt-earn-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pt-earn-k { margin-top: 2px; font-size: 12px; color: var(--muted); }

@media (max-width: 932px) {
  /* 44px targets without growing the visual — the standing rule (TOKENS.md). */
  .pt-copy { position: relative; }
  .pt-copy::after { content: ""; position: absolute; inset: -6px; }
  .pt-code-row { flex-wrap: wrap; }
  .pt-copy { width: 100%; justify-content: center; }
  .pt-uses { margin-left: 0; width: 100%; }
}

/* ═══ UNSUBSCRIBE CONFIRMATION (DIVERGENCES.md §30) ══════════════════════════
   Deliberately the plainest page on the site. Someone arriving here has already
   decided; the page's whole job is to confirm it happened and get out of the
   way. No offers, no "are you sure", no survey — those are dark patterns and,
   for a one-click list-unsubscribe, non-compliant. */
.unsub { padding: 96px 0 120px; }
.unsub-wrap { max-width: 560px; }
.unsub h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; margin: 14px 0 0; }
.unsub-lede { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* Stating what still arrives is not fine print: someone who unsubscribes and then
   stops seeing invoices assumes the shop lost their order. */
.unsub-note {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--paper, #f7f8fa);
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}

.unsub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
/* The undo is a quiet link, not a button. It must be findable and must never compete
   with the confirmation — an equally loud "resubscribe" reads as pressure. */
.unsub-undo { position: relative; font-size: 14px; color: var(--muted); text-decoration: underline; }
.unsub-undo:hover { color: var(--ink); }

@media (max-width: 932px) {
  .unsub { padding: 64px 0 88px; }
  .unsub h1 { font-size: 30px; }
  .unsub-actions { gap: 14px; }
  .unsub-actions .btn { width: 100%; justify-content: center; }
  /* 44px target without growing the visual (TOKENS.md). */
  .unsub-undo::after { content: ""; position: absolute; inset: -14px -10px; }
}

/* ===== Shipping info (feature: shipping_info) =================================
 *
 * Every rule here is RTL-safe BY CONSTRUCTION rather than by a matching block in rtl.css:
 * no left/right offsets, no text-align, no directional margins. The rows are flex with
 * space-between, which mirrors itself, and the separator is a real character in the flow.
 * That is deliberate — a second copy of these rules in rtl.css is a second place to forget.
 *
 * Nothing below renders at all while the flag is off; the markup is not emitted.
 */

/* The quiet one-liner: PDP shipping panel, cart drawer, cart page. */
.ship-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.ship-line-d { font-weight: 600; color: var(--ink); }
.ship-line-sep { opacity: .5; }

/* The checkout delivery-step panel. */
.co-shipinfo {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafbfc;
}
.co-shipinfo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
}
.co-shipinfo-row + .co-shipinfo-row { border-top: 1px solid var(--border); }
.co-shipinfo-k { color: var(--muted); }
.co-shipinfo-v { font-weight: 600; color: var(--ink); text-align: end; }
.co-shipinfo-free {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.co-shipinfo-free.is-free { color: #15803d; font-weight: 600; }
.co-shipinfo-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  opacity: .8;
}

/* The per-order block: confirmation page and account order row. */
.ship-block {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ship-block-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}
.ship-block-k { color: var(--muted); }
.ship-block-v { font-weight: 600; color: var(--ink); text-align: end; }
/* The number is machine-readable data a customer may retype into a carrier's site, so it gets a
   monospace face and is allowed to break rather than widening the row past the container. */
.ship-block-track {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.ship-block-status--delivered { color: #15803d; }
.ship-block-cta { margin: 10px 0 0; }

@media (max-width: 560px) {
  /* Below this the two columns stop fitting on one line and the value wraps under its own label,
     which reads as a broken table. Stacked, it reads as a list. */
  .co-shipinfo-row,
  .ship-block-row { flex-direction: column; gap: 2px; }
  .co-shipinfo-v,
  .ship-block-v { text-align: start; }
}

/* ===== Add-to-cart refusal =====================================================
 *
 * Where a stock refusal goes now. Before this existed the message was queued in the
 * session with nowhere to render and eventually surfaced on the account dashboard,
 * which is the bug this element closes.
 *
 * RTL-safe by construction: no directional offsets, and the accent sits on the
 * inline-start edge via a logical property so it mirrors itself.
 */
.pd-add-err {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border-inline-start: 3px solid #b42318;
  background: #fef3f2;
  color: #912018;
  font-size: 13px;
  line-height: 1.5;
}
.pd-add-err[hidden] { display: none !important; }

/*
 * The CALM tone of the same element. An adjusted quantity is not a failure — the item went in the
 * cart — so it must not carry the red of a refusal, or customers learn to read both as breakage.
 * Same box, same position, ink rather than alarm.
 */
.pd-add-err--calm {
  border-inline-start-color: var(--ink, #0b2545);
  background: #f4f6fa;
  color: #33405c;
}

/* ── Account addresses ────────────────────────────────────────────────────────
 * The FIELDS themselves are not styled here. They use .co-field and .co-select from checkout.css,
 * which already loads site-wide — that is the point: the account page and the checkout render the
 * same control because they render the same class, so they cannot drift apart. Only the page's own
 * furniture is below.
 */
.addr-form .acct-card + .addr-same { margin-top: -8px; }
.addr-same {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 12px;
  background: var(--off, #f7f8fa);
}
.addr-same-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  cursor: pointer;
  /* A 44px row, so the whole strip is the tap target rather than a 16px box inside it. */
  min-height: 24px;
}
.addr-same-label input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ink, #0b2545); }
.addr-card-form[hidden] { display: none !important; }
.addr-form .co-field-grid { margin: 0; }

/* ── Password strength meter ──────────────────────────────────────────────────
 * FIXED HEIGHT FROM FIRST PAINT. The whole element occupies its space whether or not it has
 * anything to say, because it sits directly above a submit button — and a meter that appears when
 * typing starts moves that button under a thumb already on its way down. That is the layout shift
 * the brief forbids at checkout, and it is just as unwelcome on a phone at signup.
 *
 * The bar is logical-direction aware, so in Arabic it fills from the right like everything else.
 */
.pw-meter {
  /*
   * TWO LINES OF TEXT, RESERVED. One line was not enough: "Weak — a few more characters would help
   * a lot" wraps on a narrow form, and the submit button moved 13px the moment somebody typed —
   * measured, not guessed. Two lines covers every advice label in all fifteen languages, so
   * ordinary typing never shifts anything. A hard refusal can still be longer, and is allowed to
   * push: at that point the customer is not about to press the button anyway.
   */
  min-height: 52px;
  margin: 8px 0 0;
}
.pw-meter-track {
  height: 4px;
  border-radius: 100px;
  background: var(--border, #e6e8ee);
  overflow: hidden;
}
.pw-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--ink, #0b2545);
  transition: width .18s ease, background-color .18s ease;
}
.pw-meter[data-pw-score="1"] .pw-meter-fill { background: #b42318; }
.pw-meter[data-pw-score="2"] .pw-meter-fill { background: #b25e09; }
.pw-meter[data-pw-score="3"] .pw-meter-fill { background: #3f7d3f; }
.pw-meter[data-pw-score="4"] .pw-meter-fill { background: #2f6f3f; }
.pw-meter-text {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #5b6172);
  min-height: 36px; /* two lines at this size — see .pw-meter */
}
/* A hard gate reads differently from advice — this is the sentence that will stop the submit. */
.pw-meter--problem .pw-meter-text { color: #912018; }
.pw-meter--problem .pw-meter-fill { background: #b42318; }

/* ── The account Language field ──────────────────────────────────────────────
 * The select inherits the form's input styling; only the hint and the empty grid cell beside it are
 * new. The spacer exists because .acct-form-row is a two-column grid and a lone field in it would
 * otherwise stretch to the full width, which reads as a different kind of control.
 */
.acct-form-row select {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 10px;
  background: #fff;
  color: inherit;
}
.acct-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #5b6172);
  font-weight: 400;
}
.acct-form-spacer { display: block; }
@media (max-width: 640px) { .acct-form-spacer { display: none; } }

/* "Only 2 left." — stated beside the quantity, before it is needed, not after it is refused. */
.pd-stock-left {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8a5a00;
}
.pd-stock-left[hidden] { display: none !important; }

/* The same sentence inside the cart drawer, attached to the row it is about. */
.cart-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #33405c;
  border-inline-start: 3px solid var(--ink, #0b2545);
  padding-inline-start: 9px;
}

/* ── The reorder review page ──────────────────────────────────────────────────
 * Borrows the account order row's grammar rather than inventing a fourth list style: same thumb
 * size, same name/meta stack, same muted sub-line. An unavailable row is faded and struck at the
 * price, matching how a sold-out dose already reads on a PDP.
 */
.reorder-list { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 0; }
.reorder-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border, #e6e8ee);
}
.reorder-thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #f4f6fa; display: flex; align-items: center; justify-content: center; }
.reorder-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reorder-name { font-weight: 700; font-size: 14.5px; color: var(--ink, #0d0f1a); }
.reorder-dose { font-size: 12.5px; color: var(--muted, #5b6172); margin-top: 2px; }
.reorder-reason { font-size: 12.5px; color: #912018; margin-top: 4px; }
.reorder-note { font-size: 12.5px; color: #8a5a00; margin-top: 4px; }
.reorder-qty { font-size: 13.5px; color: var(--muted, #5b6172); font-variant-numeric: tabular-nums; }
.reorder-price { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.reorder-row--out .reorder-thumb,
.reorder-row--out .reorder-name,
.reorder-row--out .reorder-dose { opacity: .5; }
.reorder-msg { margin: 14px 0 0; font-size: 13px; color: var(--muted, #5b6172); }
.reorder-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border, #e6e8ee);
}
.reorder-total { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.reorder-total b { font-size: 19px; font-variant-numeric: tabular-nums; }
.reorder-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Both actions stay reachable with a thumb on a phone: full width, stacked, 44px minimum. */
@media (max-width: 640px) {
  .reorder-row { grid-template-columns: 48px 1fr auto; }
  .reorder-row .reorder-qty { grid-column: 2; justify-self: start; }
  .reorder-actions { width: 100%; }
  .reorder-actions .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ══ PAYMENT MARKS (inc/payment-marks.php) ═══════════════════════════════════
 *
 * ONE COMPONENT. Every row of accepted-method marks on the site — footer, product page, cart
 * drawer and cart page, checkout (rail on desktop, the row above the steps on a phone), and the
 * marks on each payment tile — is the same markup from one PHP function, styled by these rules
 * and sized by four custom properties. A context sets the properties; it never restyles a mark.
 *
 *   --pm-sym   height of the symbol marks (Mastercard, iDEAL, Bancontact — the square-ish ones)
 *   --pm-word  height of the wordmarks (Visa, Apple Pay, Google Pay, Revolut Pay)
 *   --pm-gap   space between marks
 *   --pm-box   the box every mark sits in, so seven of them share one baseline
 *
 * The scheme SVGs are <img> with explicit width/height attributes from PHP (intrinsic size per
 * file — Apple Pay's own file declares none and once rendered 0×0), scaled by max-height only, so
 * they are never stretched, recoloured or cropped. Only the dark footer wraps them in white tiles.
 *
 * SIZES, AND WHY. Desktop: symbols 18px tall (the Mastercard symbol is then 23px wide), wordmarks
 * 11–13px. Phones ≤ 430px: symbols 18px, wordmarks 11px, gaps 6px — the smallest that keeps the
 * Mastercard symbol ≥ 23px wide and the Revolut wordmark ≥ 40px, which is the floor this system
 * accepts as legible. At those sizes seven marks measure ~203px plus gaps: one line in the cart
 * drawer (251px at 375), the checkout row, and the footer tiles (~300px in 335). */
/* ONE LINE, EVERYWHERE (ruling, 15 Sep 2026): no row of marks wraps, on any surface. When a row is
 * tighter than its marks, the marks shrink together — each <img> is capped at 100% of a flex item
 * that may shrink, so seven marks lose a few percent each and stay on the line. There is no heading
 * on any row (the "We accept" lead was retired the same day): the marks are their own caption. */
.pm-row { --pm-sym: 18px; --pm-word: 11px; --pm-gap: 12px; --pm-box: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.pm-marks { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pm-gap); flex-wrap: nowrap; align-items: center; min-width: 0; }
.pm-mark { display: inline-flex; align-items: center; justify-content: center; height: var(--pm-box); flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); }
.pm-mark img { display: block; width: auto; height: auto; max-height: var(--pm-word); max-width: min(34px, 100%); }
.pm-mark--mastercard img, .pm-mark--ideal img, .pm-mark--bancontact img { max-height: var(--pm-sym); }
.pm-mark--visa img { max-height: var(--pm-word); }
.pm-mark--revolut-pay img { max-height: calc(var(--pm-word) - 1px); max-width: min(46px, 100%); }
.pm-mark svg { stroke: var(--muted); flex-shrink: 0; }
.pm-mark-text { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Footer: white tiles on the navy ground — the one place the marks need a ground of their own.
 * They live in .ft-bot beside the © disclaimer (footer.php, styles.css): at the end edge on desktop,
 * on the paragraph's level, keeping their size while the paragraph wraps; under it on phones, one
 * line (rulings, 15 Sep 2026). */
.ft .pm-row--footer { --pm-sym: 22px; --pm-word: 14px; --pm-gap: 6px; --pm-box: 28px; margin-top: 0; flex: 0 0 auto; margin-inline-start: auto; }
.ft .pm-mark { min-width: 42px; padding: 0 6px; background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }
.ft .pm-mark img { max-width: min(34px, 100%); }
.ft .pm-mark--revolut-pay img { max-width: min(48px, 100%); }
@media (max-width: 640px) {
  .ft .pm-row--footer { flex: 0 1 auto; margin-inline-start: 0; }
  .ft .pm-mark { min-width: 0; padding: 0 4px; }
}

/* Product page: ONE LINE, EVERY WIDTH (owner ruling, 15 Sep 2026, superseding the wrapping row
 * of the same morning). SSL lock and words at the start edge, the marks at the end edge,
 * vertically centred, and nothing wraps or overlaps between 320 and 1440px. The row is a size
 * container and steps its own type and mark sizes down as ITS width shrinks — the column's
 * width, not the viewport's, is what the row has to fit. A shrink on the marks is the last
 * resort: every <img> is capped at 100% of a flex item that may shrink (see .pm-mark img), so a
 * language a few pixels longer than a step allowed costs the marks a few percent, never a
 * second line and never a collision.
 *
 * MEASURED on Local at 320px, where the row is 284px wide: the longest short string (Polish,
 * "Bezpieczna płatność SSL") is 134px at 11px plus the lock, and seven marks at the smallest
 * legible sizes (symbols 14px, wordmarks 9px) are 191px plus six gaps. They cannot share 284px
 * at any legible size. So the narrowest step — a row under 336px, which is viewports up to
 * about 370px — keeps the lock and the letters "SSL" beside the seven marks; from 375px up the
 * words are on the line. The full sentence stays in a visually-hidden span on every step, so a
 * screen reader always hears it. Logical properties only; /ar/ mirrors. */
.pd-pay { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; max-width: 100%; container-type: inline-size; }
.pd-pay .pd-pay-ssl { flex: 0 0 auto; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pd-pay .pd-pay-ssl svg { flex: 0 0 auto; }
.pd-pay-ssl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pd-pay-ssl-short, .pd-pay-ssl-min { display: none; }
.pd-pay .pm-row--pdp { --pm-sym: 18px; --pm-word: 13px; --pm-gap: 10px; margin-top: 0; flex: 0 1 auto; min-width: 0; margin-inline-start: auto; }
.pd-pay .pm-row--pdp .pm-marks { justify-content: flex-end; }
@container (max-width: 519px) {
  .pd-pay-ssl-long { display: none; }
  .pd-pay-ssl-short { display: inline; }
  .pd-pay .pd-pay-ssl { font-size: 12px; }
  .pd-pay .pm-row--pdp { --pm-sym: 16px; --pm-word: 11px; --pm-gap: 6px; }
}
@container (max-width: 419px) {
  .pd-pay { gap: 8px; }
  .pd-pay .pd-pay-ssl { font-size: 11px; gap: 4px; }
  .pd-pay .pm-row--pdp { --pm-sym: 14px; --pm-word: 9px; --pm-gap: 4px; }
}
@container (max-width: 335px) {
  .pd-pay-ssl-short { display: none; }
  .pd-pay-ssl-min { display: inline; }
}
/* The buy CTA is the one nowrap element in the buy box wider than a 320px phone in Polish ("Dodaj do
 * koszyka · €84.93" measures 324px). Below 360px it may wrap onto two centred lines rather than
 * widen the column and scroll the page sideways (found by scripts/marks-row-test.mjs, 15 Sep 2026). */
@media (max-width: 360px) {
  .pd-buy .btn-lg { white-space: normal; text-align: center; line-height: 1.25; }
}
/* Same narrowest-phone finding: flex and grid children default to min-width:auto, so the kit tile
 * (Polish "100 strzykawek" in the pack select) and the shipping timeline (Arabic) pushed the
 * product column past a 320px viewport. min-width:0 lets them shrink; layouts are unchanged. */
.pd-kit-item > *, .pd-kit-sum-row > *, .pd-timeline > * { min-width: 0; }
.pd-kit-sel { max-width: 100%; }
/* A <select> reports its widest option as its minimum width whatever min-width says, and the
 * shipping panel's header button does the same with its label; `contain: inline-size` keeps both
 * out of the column's intrinsic width (the pd-pay row has used it since 13 Sep) — they are sized
 * by their container, never the other way round. */
.pd-kit-meta, .pd-ship-hd { contain: inline-size; }
/* Stack / bundle card CTAs: "Uitverkocht. Houd me op de hoogte" clipped both sides of the full-width button
 * on phones. The label is "Notify me" now (the card's badge already says sold out) and any translation
 * that is still wider than the button wraps to a second centred line rather than clipping. The sold-out
 * tint is a token, not an inline hex. */
.stack-foot .btn, .card .btn { white-space: normal; text-align: center; line-height: 1.2; min-width: 0; height: auto; min-height: 42px; padding-block: 8px; }
.stack-foot .btn { min-height: 48px; }
/* Two stack cards share a phone's width: the CTA gives up its side padding so the longest word of the fourteen
 * ("Benachrichtigen") fits its 106px at 320. */
@media (max-width: 640px) { .stack-foot .btn { padding-inline: 8px; font-size: 12.5px; overflow-wrap: anywhere; } }
/* "FROM" on the cart upsell and the pairs-well-with tiles (task 16): the card's own from-word, small and quiet. */
.cart-upsell-price .from, .pd-kit-price .from { font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
.pd-kit-img:not(img) { display: inline-block; width: 40px; height: 40px; border-radius: 8px; background: var(--off); }
.btn--soldout, .btn--soldout:hover { background: var(--muted); color: #fff; }
/* The supply page's quantity tiles: "5 fiolek NAJLEPSZA WARTOŚĆ" (Polish) is a flex line that would not
 * wrap, and its min-content widened the product column to 315px in a 320px viewport (found by the
 * extended marks-row suite, 15 Sep 2026). The list is sized by its container and the name line wraps. */
.pd-dose-list { contain: inline-size; }
.pd-dose-name { flex-wrap: wrap; row-gap: 2px; }

/* Cart drawer and cart page: centred under the buttons, a breath below. */
.pm-row--cart { --pm-sym: 18px; --pm-word: 13px; --pm-gap: 9px; justify-content: center; margin-top: 16px; }

/* Checkout, desktop: a fourth line in the rail's trust list, in that list's own type. */
.pm-row--rail { --pm-sym: 18px; --pm-word: 13px; --pm-gap: 12px; gap: 10px; padding: 0 6px; }

/* Checkout, phone: above the steps, with room on both sides. Hidden while the rail is beside the form. */
.pm-row--entry { --pm-sym: 18px; --pm-word: 13px; --pm-gap: 12px; display: none; margin: 18px 0 22px; }

/* Payment step: the tile's own marks on its name line, small. */
.co-pay-mark .pm-row--step { --pm-sym: 16px; --pm-word: 10px; --pm-gap: 8px; --pm-box: 16px; display: inline-flex; vertical-align: middle; }
/* The carrier mark on a delivery row: the payment step's sizing, one mark, no tile (the row is the
   tile). A hidden mark takes no space; a row whose marks are all hidden is hidden with them. */
.co-deliv .pm-row--deliv { --pm-sym: 18px; --pm-word: 11px; --pm-gap: 6px; --pm-box: 18px; display: inline-flex; vertical-align: middle; }
.co-deliv .pm-row--deliv[hidden], .co-deliv .pm-mark[hidden] { display: none; }
.co-deliv .pm-mark--postnl img { max-height: var(--pm-sym); }
.co-deliv .pm-mark--dhl img { max-height: var(--pm-word); max-width: min(50px, 100%); }
.co-pay-mark .pm-mark img { max-width: min(30px, 100%); }
.co-pay-mark .pm-mark--revolut-pay img { max-width: min(42px, 100%); }

/* One pre-payment placement per viewport (checkout.css moves the rail below the form at 980px). */
@media (max-width: 980px) {
  .pm-row--rail { display: none; }
  .pm-row--entry { display: flex; }
}

/* PHONES. Seven marks on one line at 375, 390 and 430: symbols 18px, wordmarks 11px, gaps 6px,
 * and the lead word on its own line above the row. Footer tiles tighten to 4px padding. */
@media (max-width: 430px) {
  .pm-row { --pm-gap: 6px; gap: 8px; }
  /* Wordmarks drop from 13px to 11px on phones; the symbols keep their 18px (the legibility floor). */
  .pm-row--cart, .pm-row--entry, .pm-row--rail { --pm-word: 11px; }
  .ft .pm-row--footer { --pm-sym: 18px; --pm-word: 11px; --pm-gap: 4px; --pm-box: 24px; }
  .pm-row--cart { --pm-gap: 6px; }
  .co-pay-mark { margin-inline-start: 0; display: flex; margin-top: 6px; }
  /* (the product page row sizes itself by its own width — container steps above — not by the viewport) */
}

/* The checkout's "you came back before paying" line: the .co-note grammar, above the steps. */
.co-note--back { margin: 0 0 18px; }

/* The unpaid hero: the same mark and eyebrow, in the accent rather than the success green, because a
 * green tick above "Payment not completed" argues with itself. */
.oc-hero--unpaid .oc-check { background: var(--accent-soft); color: var(--accent); box-shadow: 0 14px 34px rgba(11,37,69,.12); }
/* Doubled class, because checkout.css (loaded later) sets `.oc-hero .eyebrow` green at the same specificity. */
.oc-hero.oc-hero--unpaid .eyebrow { color: var(--accent); }

/* The confirmation page's retry card: the .oc-card shell, the confirming panel's type. */
.ah-retry h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; }
.ah-retry p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 48ch; text-wrap: pretty; }
.ah-retry p b { color: var(--ink); }
.ah-retry-why { margin-top: 10px; font-size: 13px; padding: 10px 12px; background: var(--off); border-radius: 8px; }

/* ══ TOASTS (inc/account-feedback.php · woocommerce/notices/success.php, notice.php) ══════════
 * One component for every confirmation on the account pages: green, fixed under the header so a
 * save is never confirmed off-screen, a close button, Escape closes, announced through the live
 * region the container is. Logical properties only; /ar/ mirrors. Motion respects the reader. */
.ah-toasts { position: fixed; top: 84px; inset-inline: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.ah-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(100%, 560px); padding: 12px 8px 12px 16px; border-radius: 12px; background: var(--green-soft); color: var(--green); border: 1px solid var(--green); box-shadow: 0 10px 28px rgba(13,15,26,.14); font-size: 14px; font-weight: 500; line-height: 1.4; animation: ahToastIn .28s cubic-bezier(.2,.8,.3,1) both; }
.ah-toast--notice, .ah-toast--error { background: #fff; color: var(--ink); border-color: var(--border); }
.ah-toast > svg:first-child { flex: 0 0 auto; }
.ah-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ah-toast-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ah-toast-close:hover, .ah-toast-close:focus-visible { background: rgba(13,15,26,.07); }
.ah-toast:focus-visible, .ah-toast-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ah-toast--out { animation: ahToastOut .24s ease both; }
@keyframes ahToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ahToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ah-toast, .ah-toast--out { animation: none; } }
@media (max-width: 640px) { .ah-toasts { top: 70px; padding: 0 12px; } .ah-toast { font-size: 13.5px; } }

/* ══ SETTINGS: the language control looks like the header's (outline, chevron), fitted to the form column ══ */
.acct-select { position: relative; display: block; }
.acct-form-row .acct-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; padding-block: 0; padding-inline: 14px 40px; border: 1px solid var(--border); border-radius: 100px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 42px; cursor: pointer; transition: border-color .15s ease; }
.acct-form-row .acct-select select:hover, .acct-form-row .acct-select select:focus-visible { border-color: var(--ink); outline: none; }
.acct-select-chev { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink); }

/* ══ PASSWORDS: the requirements above the field; the meter says pass or fail, not only a colour ══ */
.pw-req { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
.pw-meter[data-pw-state="ok"] .pw-meter-text { color: var(--green); font-weight: 600; }
.pw-meter[data-pw-state="ok"] .pw-meter-text::before { content: "✓ "; }
.pw-meter[data-pw-state="fail"] .pw-meter-text::before { content: "✕ "; }

/* ══ SETTINGS: back-in-stock alerts as a list of the sold-out products with toggles ══ */
.acct-row--restock { border-bottom: 0; }
.acct-restock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-restock-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.acct-restock-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--off); display: flex; align-items: center; justify-content: center; }
.acct-restock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-restock-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-restock-name { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.acct-restock-sub { font-size: 12.5px; color: var(--muted); }
.acct-restock-empty { font-size: 13px; color: var(--muted); padding: 8px 0 4px; }
/* Partner pricing (24 Sep 2026): retail struck through, the partner's price beside it — wherever a price
   is shown to a signed-in partner (cards, product page, cart, checkout). Nobody else ever sees these. */
.pp-retail { text-decoration: line-through; color: var(--muted); font-weight: 400; margin-inline-end: 4px; }
.pp-mine { text-decoration: none; font-weight: inherit; color: inherit; }
.pp-price { white-space: nowrap; }
/* Stacks are never discounted: the note beside an applied discount (inc/stack-discounts.php). */
.stack-note{margin:2px 0 8px;font-size:12px;line-height:1.45;color:var(--muted);text-wrap:pretty}

/*
 * DISCOUNTED PRODUCT CARDS TAKE THE STACK CARD'S TREATMENT (owner, 25 Sep 2026). A struck price and a
 * new price side by side were wider than the old single price, and the price never gives up a pixel
 * (.card-price above), so the name was squeezed to a character or two a line ("GH K- Cu"). Now, when
 * a card is discounted: the stacks' own badge ("SAVE 20%") in the image's start corner, the name on a
 * full-width line of its own, and the prices stacked at the end as the stacks stack them — small struck
 * original on top, the price below (the same .stack-was / .stack-now). The chips keep their own row.
 * An undiscounted card is unchanged.
 */
.card-head:has(.card-price--deal) .card-name { flex: 1 0 100%; }
.card-price--deal { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; text-align: end; line-height: 1.15; }
.card-price--deal .stack-was { font-size: 11.5px; margin-bottom: 1px; }
.card-price--deal .stack-now { font-size: 17px; font-weight: 600; }
.card-price--deal .from { margin-inline-end: 4px; }
.card-img .card-save { top: 12px; inset-inline-start: 12px; }

/* ── About: "Amino House at a glance" (1 Nov 2026) — a definition list of plain facts ── */
.ah-facts { margin: 30px 0 0; border-top: 1px solid var(--border); }
.ah-facts-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.ah-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ah-facts dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ah-facts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
@media (max-width: 640px) { .ah-facts-row { grid-template-columns: minmax(0, 1fr); } }