/* ════════════════════════════════════════════════════════════════════════
   hyperdrop-content.css — Hyper Drop RE-SKIN for the lifted editorial pages
   (guide / best / blog / team / about / misc + hub indexes).

   These pages inject a self-contained WP `entry-content` block (its own inline
   <style> defining a soft, rounded "beige cinema" look — 1px borders, 12px
   radius, peach accents) that lib/redress.js only RECOLORS (palette+font swap).
   This sheet converts the component LANGUAGE to Hyper Drop — chunky 2px ink
   borders, hard offset shadows, sticker eyebrows, Bricolage display, color
   blocks — WITHOUT touching the lifted markup / copy / H1 / FAQ (铁律).

   ── Specificity contract ──
   The lifted inline <style> lives in <body> (after this <head> sheet), so on
   EQUAL specificity the inline rule wins. Every rule here is therefore prefixed
   with `.fl-rich` (component classes → 0,2,0 beats inline 0,1,0) or
   `.fl-rich .tvf-raw-html` (element rules → 0,2,1 beats inline 0,1,1).
   Info/policy pages use the more-specific `.fl-info-rich .fl-rich …` block in
   hyperdrop.css, which therefore keeps its own treatment.
   ════════════════════════════════════════════════════════════════════════ */

/* ── shared layout: cap the lifted container, kill the old soft frame ── */
.fl-rich .tvf-raw-html { max-width: 1080px; margin: 0 auto; }

/* ── headings → Bricolage, h2 gets an ink rule, h3 gets a purple key ── */
.fl-rich .tvf-raw-html h2,
.fl-rich .fl-about h2,
.fl-rich h2 {
  font-family: var(--fl-font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.12;
  margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--fl-ink);
}
.fl-rich .tvf-raw-html h3,
.fl-rich h3 {
  font-family: var(--fl-font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 18px; margin: 26px 0 8px; color: var(--fl-ink);
}
.fl-rich .tvf-raw-html h3::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px;
  background: var(--fl-purple); border: 2px solid var(--fl-ink); transform: translateY(1px);
}

/* ── base prose (carries the no-inline-style pages: blog / tvfblog / about) ── */
.fl-rich .tvf-raw-html,
.fl-rich .fl-about { line-height: 1.7; font-size: 15.5px; color: var(--fl-ink); }
.fl-rich p  { margin: 0 0 15px; }
.fl-rich ul, .fl-rich ol { margin: 0 0 16px; padding-left: 22px; }
.fl-rich li { margin: 0 0 7px; }
.fl-rich a  { color: var(--fl-purple); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.fl-rich a:hover { color: var(--fl-hot); }
.fl-rich strong { font-weight: 700; }

/* ── card recipe: white block, 2px ink border, hard offset shadow ──
   applied to every "box" component across the page types. !important wins
   against the inline rules' shorthand background/border/radius on the same
   selector class without needing to out-specify each individual property. */
.fl-rich .fl-tldr,
.fl-rich .fl-verdict-box,
.fl-rich .fl-trust-bar,
.fl-rich .fl-review-snapshot,
.fl-rich .fl-review,
.fl-rich .fl-usp-card,
.fl-rich .fl-mission,
.fl-rich .fl-about-contact,
.fl-rich .fl-compare-verdict,
.fl-rich .fl-compare-notes,
.fl-rich .fl-compare-radar,
.fl-rich .fl-compare-faq,
.fl-rich .fl-product-card,
.fl-rich .fl-verdict-choose {
  background: #fff !important;
  border: 2px solid var(--fl-ink) !important;
  border-left: 2px solid var(--fl-ink) !important;   /* override old border-left:4px accent */
  border-radius: 14px !important;
  box-shadow: 5px 5px 0 var(--fl-ink) !important;
  padding: 20px 22px;
}
/* tinted accents: TL;DR = acid lime, verdict = cream, snapshot = cyan wash */
.fl-rich .fl-tldr            { background: var(--fl-acid) !important; }
.fl-rich .fl-verdict-box,
.fl-rich .fl-compare-verdict { background: var(--fl-cream2) !important; }
.fl-rich .fl-usp-card        { box-shadow: 4px 4px 0 var(--fl-ink) !important; }

/* TL;DR + section eyebrows: small Bricolage label on a sticker */
.fl-rich .fl-tldr > strong:first-child,
.fl-rich .fl-tldr b:first-child {
  display: inline-block; font-family: var(--fl-font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px;
  background: var(--fl-ink); color: var(--fl-acid); padding: 3px 10px; border-radius: 6px; margin-bottom: 8px;
}

/* ── pills / chips: ink-bordered, hover→purple invert ── */
.fl-rich .fl-toc-pills { border: 0 !important; padding: 4px 0 18px !important; }
.fl-rich .fl-toc-pills a,
.fl-rich .fl-flavor-chip,
.fl-rich .fl-chip-name,
.fl-rich .fl-chip-cat,
.fl-rich .fl-device-tags span,
.fl-rich .fl-note-stage,
.fl-rich .fl-note-brand {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--fl-ink) !important; text-decoration: none;
  border: 2px solid var(--fl-ink); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  box-shadow: 2px 2px 0 var(--fl-ink); transition: transform .1s, box-shadow .1s, background .1s;
}
.fl-rich .fl-toc-pills a:hover,
.fl-rich .fl-flavor-chip:hover {
  background: var(--fl-purple); color: #fff !important;
  transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--fl-ink);
}
.fl-rich .fl-chip-cat { background: var(--fl-cyan); }

/* ── flavor / catalog / explore / usp grids: tighten gap, keep responsive ── */
.fl-rich .fl-flavor-grid,
.fl-rich .fl-catalog-grid,
.fl-rich .fl-explore-grid,
.fl-rich .fl-usp-grid { gap: 12px !important; }

/* ── scores: big Bricolage purple numerals ── */
.fl-rich .fl-big-score,
.fl-rich .fl-verdict-score,
.fl-rich .fl-overall {
  font-family: var(--fl-font-display) !important; font-weight: 900 !important;
  color: var(--fl-purple) !important; line-height: 1 !important;
}
.fl-rich .fl-big-score {
  background: var(--fl-acid); color: var(--fl-ink) !important;
  border: 2px solid var(--fl-ink); box-shadow: 4px 4px 0 var(--fl-ink);
  border-radius: 12px; padding: 10px 16px; display: inline-block;
}
/* score bars: ink track + purple fill */
.fl-rich .fl-score-bar,
.fl-rich .fl-score-line {
  background: var(--fl-cream2) !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 999px !important; overflow: hidden; height: 14px !important;
}
.fl-rich .fl-score-bar > *,
.fl-rich .fl-score-line > * { background: var(--fl-purple) !important; height: 100% !important; }

/* ── tables: ink border + offset shadow + cream2 header (same as info pages) ── */
.fl-rich .tvf-raw-html table,
.fl-rich .fl-spec-table,
.fl-rich .fl-compare-table,
.fl-rich .fl-pref-table {
  width: 100%; border-collapse: separate !important; border-spacing: 0;
  border: 2px solid var(--fl-ink) !important; border-radius: 12px; overflow: hidden;
  box-shadow: 4px 4px 0 var(--fl-ink); margin: 8px 0 24px !important; font-size: 14px;
  background: #fff;
}
.fl-rich .tvf-raw-html th, .fl-rich .fl-compare-table th, .fl-rich .fl-pref-table th, .fl-rich .fl-spec-table th {
  background: var(--fl-cream2) !important; font-family: var(--fl-font-display);
  font-weight: 700; text-align: left; padding: 10px 13px !important;
  border-bottom: 2px solid var(--fl-ink) !important; font-size: 13px;
}
.fl-rich .tvf-raw-html td, .fl-rich .fl-compare-table td, .fl-rich .fl-pref-table td, .fl-rich .fl-spec-table td {
  padding: 9px 13px !important; border-bottom: 1px solid rgba(14,10,20,.12) !important; vertical-align: top;
}
.fl-rich .tvf-raw-html tr:last-child td { border-bottom: 0 !important; }
/* brand cell: logo + name on one centered baseline (the inline 36px logo was top-aligned,
   pushing rows out of line). Flex row keeps logo and brand name level. */
.fl-rich .fl-compare-table td:first-child a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.fl-rich .fl-compare-table .fl-brand-logo { width: 24px !important; height: 24px !important; flex: none; object-fit: contain; background: #fff; border: 1px solid rgba(14,10,20,.15); border-radius: 5px; padding: 1px; margin: 0 !important; }
.fl-rich .fl-compare-table td { vertical-align: middle !important; white-space: nowrap; }

/* ── FAQ: ink dividers, Bricolage summary, + marker ── */
.fl-rich .fl-faq-item,
.fl-rich .fl-compare-faq details,
.fl-rich .tvf-raw-html details {
  border: 2px solid var(--fl-ink) !important; border-radius: 12px;
  box-shadow: 3px 3px 0 var(--fl-ink); background: #fff; margin: 0 0 12px; padding: 4px 16px;
}
.fl-rich .fl-faq-item summary,
.fl-rich .tvf-raw-html summary {
  font-family: var(--fl-font-display); font-weight: 700; font-size: 15.5px;
  cursor: pointer; padding: 12px 0; list-style: none;
}
.fl-rich summary::-webkit-details-marker { display: none; }
.fl-rich .tvf-raw-html details summary::after { content: "+"; float: right; font-weight: 800; color: var(--fl-purple); }
.fl-rich .tvf-raw-html details[open] summary::after { content: "–"; }

/* ── nicotine warning: keep prominent — hot-pink wash, 2px ink border ── */
.fl-rich .fl-nicotine-warning,
.fl-rich .fl-nic-warning {
  background: rgba(255,61,110,.10) !important; border: 2px solid var(--fl-ink) !important;
  border-left: 6px solid var(--fl-hot) !important; border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--fl-ink); padding: 14px 18px !important; font-size: 13.5px;
}

/* ── author / byline ── */
.fl-rich .fl-author,
.fl-rich .tvf-blog-author,
.fl-rich .fl-compare-author {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--fl-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--fl-ink);
  background: #fff; padding: 12px 16px; margin: 18px 0;
}
.fl-rich .fl-author-name { font-family: var(--fl-font-display); font-weight: 800; }
.fl-rich .fl-author-role,
.fl-rich .fl-date { font-family: var(--fl-font-mono); font-size: 12px; color: var(--fl-ink2); letter-spacing: .03em; }

/* ── trust bar: mono row of guarantees ── */
.fl-rich .fl-trust-bar { font-family: var(--fl-font-mono); font-size: 12.5px; letter-spacing: .02em; }

/* ── best product cards: image frame + purple price + ink CTA ── */
.fl-rich .fl-product-img {
  background: #fff; border: 2px solid var(--fl-ink) !important; border-radius: 10px;
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fl-rich .fl-product-title { font-family: var(--fl-font-display); font-weight: 700; font-size: 15px; }
.fl-rich .fl-product-price { font-family: var(--fl-font-display); font-weight: 900; color: var(--fl-purple) !important; }
.fl-rich .fl-product-btn,
.fl-rich .fl-verdict-choose a,
.fl-rich a.fl-product-btn {
  display: inline-block; background: var(--fl-purple) !important; color: #fff !important;
  border: 2px solid var(--fl-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--fl-ink);
  padding: 9px 18px; font-weight: 700; text-decoration: none; transition: transform .1s, box-shadow .1s;
}
.fl-rich .fl-product-btn:hover,
.fl-rich .fl-verdict-choose a:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--fl-ink); color: #fff !important; }

/* ── team page: per-component cards handled in §MISC below; the old blanket
   `.fl-team > *` boxer was removed — it whitewashed the gradient hero and
   double-framed the card grid. ── */

/* ── responsive: tables scroll, shadows soften on mobile ── */
@media (max-width: 680px) {
  .fl-rich .tvf-raw-html table,
  .fl-rich .fl-compare-table,
  .fl-rich .fl-pref-table { display: block; overflow-x: auto; }
  .fl-rich .fl-tldr, .fl-rich .fl-verdict-box, .fl-rich .fl-product-card { box-shadow: 3px 3px 0 var(--fl-ink) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NATIVE Hyper Drop "PillarB" page shell (guide.njk + reused by best/blog).
   Purpose-built page architecture wrapping the lifted body: sticker hero,
   sticky TOC sidebar, color-block "keep reading" band. gd- namespace.
   ════════════════════════════════════════════════════════════════════════ */
.gd-wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px; }

/* hero */
.gd-hero { padding: 48px 0 30px; }
.gd-crumb { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--fl-ink2); margin: 0 0 30px; }
.gd-crumb-a { color: var(--fl-ink2); text-decoration: none; }
.gd-crumb-a:hover { color: var(--fl-purple); }
.gd-crumb-cur { background: var(--fl-purple); color: #fff; padding: 2px 9px; border-radius: 5px; }
.gd-stickers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.gd-tilt { transform: rotate(-2deg); }
.gd-h1 { font-weight: 900; font-size: clamp(34px, 6vw, 68px); line-height: 0.96; letter-spacing: -0.03em; margin: 0 0 16px; max-width: 16ch; }
.gd-meta { font-size: 11px; letter-spacing: 0.12em; font-weight: 700; color: var(--fl-ink2); }
.gd-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* body grid + sticky TOC */
.gd-body { padding: 14px 0 64px; }
.gd-grid { max-width: 1180px; margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 56px; align-items: start; }
.gd-toc-col { position: relative; }
.gd-toc { position: sticky; top: 90px; background: var(--fl-acid); border: 2px solid var(--fl-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--fl-ink); padding: 18px; }
.gd-toc-label { font-size: 10px; letter-spacing: 0.16em; font-weight: 800; padding-bottom: 10px; border-bottom: 2px solid var(--fl-ink); margin: 0 0 10px; }
.gd-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.gd-toc-link { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--fl-ink); text-decoration: none; padding: 6px 8px; border-radius: 7px; border-left: 3px solid transparent; }
.gd-toc-link:hover { background: rgba(14,10,20,.08); color: var(--fl-ink); }
.gd-toc-link.is-active { background: var(--fl-ink); color: var(--fl-acid); border-left-color: var(--fl-hot); }
.gd-toc-cta { margin-top: 14px; padding-top: 14px; border-top: 2px dashed rgba(14,10,20,.3); }
.gd-toc-btn { width: 100%; text-align: center; font-size: 13px; padding: 11px 14px; }
.gd-main { min-width: 0; }

/* programmatic-fallback bits */
.gd-lede { font-size: 17px; line-height: 1.6; color: var(--fl-ink2); max-width: 660px; margin: 0 0 8px; }
.gd-h2 { font-size: clamp(24px,3.4vw,34px); font-weight: 800; letter-spacing: -0.02em; margin: 30px 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--fl-ink); }
.gd-device-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 16px; }
.gd-device-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; padding: 0; }
.gd-device-img { aspect-ratio: 1/1; background: #fff; border-bottom: 2px solid var(--fl-ink); display: flex; align-items: center; justify-content: center; }
.gd-device-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.gd-device-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.gd-device-name { font-weight: 700; font-size: 14px; }
.gd-device-price { font-weight: 900; font-size: 18px; color: var(--fl-purple); }
.gd-flavor-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* keep-reading band */
.gd-keep { background: var(--fl-cream2); border-top: 3px solid var(--fl-ink); padding: 54px 0 64px; margin-top: 24px; }
.gd-keep-h2 { font-size: clamp(40px,7vw,72px); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; margin: 16px 0 30px; }
.gd-keep-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; }
.gd-keep-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--fl-ink); border: 2px solid var(--fl-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--fl-ink); padding: 20px; transition: transform .12s, box-shadow .12s; }
.gd-keep-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--fl-ink); }
.gd-keep-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; background: var(--fl-ink); color: var(--fl-cream); align-self: flex-start; padding: 3px 9px; border-radius: 5px; }
.gd-keep-title { font-size: 21px; font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; }
.gd-keep-go { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-top: auto; }
.gd-keep-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* responsive: collapse sidebar under the content on tablet/mobile */
@media (max-width: 900px) {
  .gd-grid { grid-template-columns: 1fr; gap: 22px; }
  .gd-toc { position: static; max-width: none; }
  .gd-toc-list { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX (2026-06): lifted best/flavor ranking components whose original theme
   CSS wasn't captured in the scrape. Appended last so equal-specificity wins.
   • fl-product-card  → proper flex row (img | info | Shop btn)
   • fl-note-brand    → readable full-width tasting-note card (was wrongly pill-ified)
   • fl-note-stage    → inline purple "First Inhale:" label (was a giant oval pill)
   ═══════════════════════════════════════════════════════════════════════ */
.fl-rich .fl-product-card {
  display: flex !important; align-items: center; gap: 14px;
  padding: 12px 14px !important; margin: 0 0 12px;
}
.fl-rich .fl-product-card > a:first-child { flex-shrink: 0; line-height: 0; display: block; }
.fl-rich .fl-product-img { width: 60px !important; height: 60px !important; flex-shrink: 0; }
.fl-rich .fl-product-img img { width: 100%; height: 100%; object-fit: cover; }
.fl-rich .fl-product-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fl-rich .fl-product-title { font-size: 14.5px; line-height: 1.25; }
.fl-rich .fl-product-price { font-size: 18px; line-height: 1; }
.fl-rich .fl-product-card .fl-product-btn { flex-shrink: 0; padding: 8px 16px; font-size: 13px; white-space: nowrap; }

/* tasting-notes: container block + inline stage label (undo the pill treatment) */
.fl-rich .fl-note-brand {
  display: block !important; align-items: initial;
  background: #fff !important; color: var(--fl-ink) !important;
  border: 2px solid var(--fl-ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--fl-ink) !important;
  padding: 18px 20px !important; margin: 0 0 16px !important;
  font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.7 !important;
}
.fl-rich .fl-note-stage {
  display: inline !important; align-items: initial;
  background: transparent !important; color: var(--fl-purple) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 4px 0 0 !important;
  font-family: var(--fl-font-display); font-weight: 800 !important; font-size: inherit !important;
  letter-spacing: 0;
}
/* if note-brand columns sit in a flex/grid wrapper, let them stack full-width for readability */
.fl-rich .fl-compare-notes { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FIX (2026-06): /guide/{brand}-vape-flavors PillarB lifted per-flavor blocks.
   These rich components shipped with the original theme CSS (not captured in scrape):
   • fl-score-bar / fl-score-line — were a TEXT row of 6 dim scores but the old rule
     forced them into a 14px clipped bar → scores invisible. Un-bar to a readable chip row.
   • fl-tasting-card  → bordered Inhale/Mid-draw/Exhale note card
   • fl-edge          → hot-pink "Edge:" callout
   • fl-overall       → acid score badge (was tiny purple text)
   • h4 (flavor name) → Bricolage heading w/ dashed divider between flavors
   • tvf-gp-* product grid widget → Hyper Drop chunky cards (was soft 1px WP style)
   ═══════════════════════════════════════════════════════════════════════ */
.fl-rich .fl-score-bar,
.fl-rich .fl-score-line {
  background: var(--fl-cream2) !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 10px !important; height: auto !important; overflow: visible !important;
  padding: 9px 14px !important; margin: 12px 0 !important; display: block !important;
  font-family: var(--fl-font-mono) !important; font-size: 12.5px !important;
  font-weight: 700 !important; letter-spacing: 0.01em; color: var(--fl-ink) !important; line-height: 1.5 !important;
}
.fl-rich .fl-score-bar > *,
.fl-rich .fl-score-line > * { background: transparent !important; height: auto !important; }

.fl-rich .fl-overall {
  display: inline-block !important; font-family: var(--fl-font-display) !important; font-weight: 900 !important;
  background: var(--fl-acid) !important; color: var(--fl-ink) !important;
  border: 2px solid var(--fl-ink) !important; border-radius: 999px !important;
  padding: 4px 15px !important; font-size: 15px !important; box-shadow: 2px 2px 0 var(--fl-ink);
  margin: 10px 0 !important; line-height: 1.3 !important;
}

.fl-rich .fl-tasting-card {
  background: #fff !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 14px !important; box-shadow: 4px 4px 0 var(--fl-ink) !important;
  padding: 18px 20px !important; margin: 14px 0 !important;
}
.fl-rich .fl-tasting-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; }
.fl-rich .fl-tasting-card p:last-child { margin: 0; }
.fl-rich .fl-tasting-card strong { font-family: var(--fl-font-display); color: var(--fl-purple); }

.fl-rich .fl-edge {
  background: var(--fl-cream2); border: 2px solid var(--fl-ink); border-left: 6px solid var(--fl-hot);
  border-radius: 10px; padding: 12px 16px; margin: 12px 0; font-size: 14px; line-height: 1.6;
}
.fl-rich .fl-edge strong { font-family: var(--fl-font-display); color: var(--fl-hot); }

.fl-rich h4 {
  font-family: var(--fl-font-display); font-weight: 800; font-size: 22px;
  margin: 34px 0 8px; letter-spacing: -0.01em; line-height: 1.12; color: var(--fl-ink);
  padding-top: 16px; border-top: 2px dashed rgba(14,10,20,0.18);
}

/* tvf-gp product-grid widget → Hyper Drop (override the lifted inline .tvf-gp-* soft style) */
.fl-rich .tvf-gp-grid { gap: 18px !important; }
.fl-rich .tvf-gp-card {
  background: #fff !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 16px !important; box-shadow: 5px 5px 0 var(--fl-ink) !important;
  overflow: hidden; transition: transform .12s ease, box-shadow .12s ease !important;
}
.fl-rich .tvf-gp-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--fl-ink) !important; }
.fl-rich .tvf-gp-img-wrap { border-bottom: 2px solid var(--fl-ink) !important; background: #fff !important; aspect-ratio: 1 !important; }
.fl-rich .tvf-gp-img-wrap img { object-fit: contain !important; padding: 14px; }
.fl-rich .tvf-gp-title { font-family: var(--fl-font-display) !important; font-weight: 700 !important; color: var(--fl-ink) !important; }
.fl-rich .tvf-gp-price { color: var(--fl-purple) !important; font-family: var(--fl-font-display) !important; font-weight: 800 !important; }
.fl-rich .tvf-gp-cart {
  background: var(--fl-purple) !important; color: #fff !important;
  border: 2px solid var(--fl-ink) !important; border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--fl-ink) !important; font-weight: 700 !important; text-decoration: none !important;
}
.fl-rich .tvf-gp-cart:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--fl-ink) !important; }
/* out-of-stock state (cards now flagged by the guide-products API) + hide WC a11y price text */
.fl-rich .tvf-gp-price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.fl-rich .tvf-gp-img-wrap { position: relative !important; }
.fl-rich .tvf-gp-card.is-oos { opacity: .82; }
.fl-rich .tvf-gp-cart.tvf-gp-oos {
  background: #b9b2c2 !important; color: #fff !important;
  box-shadow: 2px 2px 0 var(--fl-ink) !important;
  cursor: not-allowed; pointer-events: none;
}
.fl-rich .tvf-gp-cart.tvf-gp-oos:hover { transform: none; }
.fl-rich .tvf-gp-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--fl-hot); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border: 2px solid var(--fl-ink); border-radius: 999px;
}
/* tvf-gp BASE LAYOUT — guide pages ship this inline with the WP widget; the /best/
   Shop grid (best.njk) reuses the same classes, so the layout must live in shared CSS. */
.fl-rich .tvf-gp-wrap { margin: 6px 0 4px; }
.fl-rich .tvf-gp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 20px; }
.fl-rich .tvf-gp-header h2 { margin: 0; }
.fl-rich .tvf-gp-header a { font-size: 14px; color: #1a73e8; text-decoration: none; font-weight: 600; white-space: nowrap; padding-top: 8px; }
.fl-rich .tvf-gp-header a:hover { text-decoration: underline; }
.fl-rich .tvf-gp-grid { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 120px; }
.fl-rich .tvf-gp-card { display: flex; flex-direction: column; }
.fl-rich .tvf-gp-img-wrap { display: block; overflow: hidden; }
.fl-rich .tvf-gp-info { padding: 12px 14px 6px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fl-rich .tvf-gp-title { display: block; font-size: 15px; line-height: 1.25; }
.fl-rich .tvf-gp-sub { display: block; font-size: 12px; color: #4a4255; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-rich .tvf-gp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 15px; }
.fl-rich .tvf-gp-price del { font-weight: 400; font-size: 13px; color: #9a93a5; }
.fl-rich .tvf-gp-price ins { text-decoration: none; }
.fl-rich .tvf-gp-cart { display: block; text-align: center; padding: 10px; margin: 0 14px 14px; font-size: 13px; }
.fl-rich .tvf-gp-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 24px 0 0; }
.fl-rich .tvf-gp-pager button { font-family: inherit; padding: 8px 18px; border: 2px solid var(--fl-ink); background: #fff; color: var(--fl-ink); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; box-shadow: 2px 2px 0 var(--fl-ink); transition: all .12s ease; }
.fl-rich .tvf-gp-pager button:hover:not(:disabled) { background: var(--fl-purple); color: #fff; }
.fl-rich .tvf-gp-pager button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.fl-rich .tvf-gp-pager span { font-size: 13px; font-weight: 700; }
@media (max-width: 860px) { .fl-rich .tvf-gp-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Best by Category — was wrongly lumped into the chip/pill rule (turned the grid
   container into an inline-flex pill → cyan blob with overflowing cards). Proper
   responsive card grid instead. ── */
.fl-rich .fl-compare-cat {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; margin: 1rem 0 !important;
  font-weight: 400 !important;
}
.fl-rich .fl-compare-cat > div {
  display: block; background: #fff; border: 2px solid var(--fl-ink);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--fl-ink); padding: 16px 18px;
}
.fl-rich .fl-compare-cat > div strong { display: block; color: var(--fl-purple); font-size: 15px; margin-bottom: 6px; }
.fl-rich .fl-compare-cat > div span { font-size: 13.5px; line-height: 1.5; color: var(--fl-ink2); }
@media (max-width: 860px) { .fl-rich .fl-compare-cat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fl-rich .fl-compare-cat { grid-template-columns: 1fr !important; } }

/* ── Topic "Our Top N … Ranked" (fl-topic-rank) → 2-per-row grid of compact cards
   (rank# + flavor + score + blurb + product card stacked). ── */
.fl-rich .fl-topic-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; counter-reset: rank; margin: 1.5rem 0; }
.fl-rich .fl-topic-rank-item {
  flex-direction: column !important; align-items: stretch !important; gap: 8px;
  background: #fff !important; border: 2px solid var(--fl-ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--fl-ink); padding: 18px 20px !important; margin: 0 !important;
}
.fl-rich .fl-topic-rank-info { display: block; }
.fl-rich .fl-topic-rank-info > .fl-product-card { margin: 12px 0 0 !important; }
@media (max-width: 720px) { .fl-rich .fl-topic-rank { grid-template-columns: 1fr; } }

/* ── Topic "How We Pick…" 6-dimension list → card grid (was plain <ul>). ── */
.fl-rich .fl-method-grid {
  list-style: none !important; padding: 0 !important; margin: 16px 0 24px !important;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.fl-rich .fl-method-grid li {
  background: #fff; border: 2px solid var(--fl-ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--fl-ink); padding: 14px 16px; font-size: 13.5px; line-height: 1.5;
}
.fl-rich .fl-method-grid li strong { display: block; color: var(--fl-purple); margin-bottom: 5px; font-family: var(--fl-font-display); }
@media (max-width: 760px) { .fl-rich .fl-method-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fl-rich .fl-method-grid { grid-template-columns: 1fr; } }

/* ── "Related Guides & Comparisons" (fl-compare-links) → internal-link cluster grid. ── */
.fl-rich .fl-compare-links {
  background: var(--fl-cream2) !important; border: 2px solid var(--fl-ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--fl-ink); padding: 20px 24px !important;
}
.fl-rich .fl-compare-links ul {
  columns: auto !important; list-style: none !important; padding: 0 !important; margin: 12px 0 0 !important;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.fl-rich .fl-compare-links li { padding: 0 !important; font-size: 13.5px; }
.fl-rich .fl-compare-links li a {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--fl-ink);
  border-radius: 10px; padding: 10px 14px; font-weight: 600; text-decoration: none; color: var(--fl-ink) !important;
  box-shadow: 2px 2px 0 var(--fl-ink); transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.fl-rich .fl-compare-links li a::before { content: "→"; color: var(--fl-purple); font-weight: 800; flex: none; }
.fl-rich .fl-compare-links li a:hover { background: var(--fl-purple); color: #fff !important; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--fl-ink); }
.fl-rich .fl-compare-links li a:hover::before { color: #fff; }
@media (max-width: 600px) { .fl-rich .fl-compare-links ul { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   §MISC — standalone pages (about / team / editor / tasting-guide /
   pg-vg-guide / quiz). Their lifted WP entry-content ships a soft "beige
   cinema" inline <style> (1px #E8DFD0 borders, 12px radius, soft drop
   shadow); lib/redress.js already recolored it to the Hyper Drop palette.
   This block converts the CHARACTER → chunky 2px ink borders, hard offset
   shadows, sticker labels, Bricolage display — markup/copy untouched (铁律).
   Inline <style> rules are single-class (0,1,0); `.fl-rich .fl-x` = 0,2,0
   wins, with !important on shorthand-conflicting props. JS-driven display
   toggles (quiz steps / FAQ .open) are NOT touched.
   ════════════════════════════════════════════════════════════════════════ */

/* ── about: usp grid was display:block (no inline style) → 2-col grid ── */
.fl-rich .fl-usp-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px !important; margin: 18px 0 8px; }
.fl-rich .fl-usp-card h3 { margin-top: 0; }
.fl-rich .fl-mission h3 { margin-top: 0; }
.fl-rich .fl-about-contact { background: var(--fl-cream2) !important; }
@media (max-width: 640px) { .fl-rich .fl-usp-grid { grid-template-columns: 1fr; } }

/* ── section headings used by tg / pvg (.fl-heading) → Bricolage + ink rule ── */
.fl-rich .fl-heading {
  font-family: var(--fl-font-display) !important; font-weight: 800 !important; letter-spacing: -0.02em;
  font-size: clamp(22px, 3vw, 30px) !important; line-height: 1.12; color: var(--fl-ink) !important;
  margin: 42px 0 16px !important; padding-bottom: 10px !important;
  border: 0 !important; border-bottom: 3px solid var(--fl-ink) !important; border-image: none !important;
}
.fl-rich .fl-subheading { font-family: var(--fl-font-display) !important; font-weight: 700 !important; color: var(--fl-ink) !important; }

/* ── secondary gradient hero box (tg / pvg / team) → chunky framed ── */
.fl-rich .fl-tg__hero, .fl-rich .fl-pvg__hero, .fl-rich .fl-team__hero {
  border: 2.5px solid var(--fl-ink) !important; border-radius: 18px !important;
  box-shadow: 7px 7px 0 var(--fl-ink) !important; padding: 30px 30px !important;
}
.fl-rich .fl-tg__hero h2, .fl-rich .fl-pvg__hero h2 {
  font-family: var(--fl-font-display) !important; font-weight: 800 !important;
  font-size: clamp(26px, 4vw, 36px) !important; letter-spacing: -0.02em;
}
.fl-rich .fl-tg__hero-badges span, .fl-rich .fl-pvg__hero-badges span {
  background: var(--fl-acid) !important; color: var(--fl-ink) !important;
  border: 2px solid var(--fl-ink) !important; border-radius: 6px !important;
  font-family: var(--fl-font-display); font-weight: 800 !important; box-shadow: 2px 2px 0 var(--fl-ink);
}

/* ── unified card recipe: white block, 2px ink border, hard offset shadow ── */
.fl-rich .fl-tg__phase-card, .fl-rich .fl-tg__vocab-card, .fl-rich .fl-tg__tip,
.fl-rich .fl-tg__family-card, .fl-rich .fl-tg__spectrum,
.fl-rich .fl-pvg__compare-card, .fl-rich .fl-pvg__ratio-card, .fl-rich .fl-pvg__nic-card,
.fl-rich .fl-team__card, .fl-rich .fl-team__method, .fl-rich .fl-editor__header {
  background: #fff !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 14px !important; box-shadow: 4px 4px 0 var(--fl-ink) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.fl-rich .fl-tg__phase-card:hover, .fl-rich .fl-tg__family-card:hover,
.fl-rich .fl-pvg__ratio-card:hover, .fl-rich .fl-team__card:hover {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fl-ink) !important;
  border-color: var(--fl-ink) !important;
}
/* card headings → Bricolage */
.fl-rich .fl-tg__phase-card h3, .fl-rich .fl-tg__vocab-card h3, .fl-rich .fl-tg__family-card h3,
.fl-rich .fl-pvg__compare-card h3, .fl-rich .fl-pvg__ratio-card h3, .fl-rich .fl-pvg__nic-card h3,
.fl-rich .fl-team__name, .fl-rich .fl-team__method h2 {
  font-family: var(--fl-font-display) !important; font-weight: 700 !important; color: var(--fl-ink) !important;
}

/* ── tinted info blocks (intro / tldr / tip) → cream2; warning → hot wash ── */
.fl-rich .fl-tg__intro-box, .fl-rich .fl-pvg__tldr, .fl-rich .fl-pvg__tip-box {
  background: var(--fl-cream2) !important; border: 2px solid var(--fl-ink) !important;
  border-radius: 14px !important; box-shadow: 4px 4px 0 var(--fl-ink) !important;
}
.fl-rich .fl-tg__warning, .fl-rich .fl-pvg__warning {
  background: color-mix(in srgb, var(--fl-hot) 12%, #fff) !important;
  border: 2px solid var(--fl-ink) !important; border-left: 6px solid var(--fl-hot) !important;
  border-radius: 12px !important; box-shadow: 4px 4px 0 var(--fl-ink) !important;
}

/* ── phase number badge / family icon → ink-bordered ── */
.fl-rich .fl-tg__phase-num {
  border: 2px solid var(--fl-ink) !important; box-shadow: 2px 2px 0 var(--fl-ink);
  font-family: var(--fl-font-display) !important;
}

/* ── small pills / best-tags / vocab words → ink chips ── */
.fl-rich .fl-tg__vocab-card .fl-tg__vocab-words span,
.fl-rich .fl-pvg__ratio-best, .fl-rich .fl-pvg__nic-best {
  background: #fff !important; color: var(--fl-ink) !important;
  border: 2px solid var(--fl-ink) !important; font-weight: 700 !important;
}
.fl-rich .fl-pvg__nic-best { background: var(--fl-acid) !important; padding: 2px 9px; border-radius: 6px; display: inline-block; }

/* ── comparison / spectrum top accents stay; just thicken table & header ── */
.fl-rich .fl-pvg__flavor-table {
  border: 2px solid var(--fl-ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--fl-ink) !important;
}
.fl-rich .fl-pvg__flavor-table thead { background: var(--fl-cream2) !important; }
.fl-rich .fl-pvg__flavor-table th {
  font-family: var(--fl-font-display) !important; color: var(--fl-ink) !important;
  border-bottom: 2px solid var(--fl-ink) !important;
}

/* ── FAQ accordions (tg / pvg) → chunky ── */
.fl-rich .fl-tg__faq-item, .fl-rich .fl-pvg__faq-item {
  border: 2px solid var(--fl-ink) !important; border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--fl-ink) !important; margin-bottom: 12px !important; overflow: hidden;
}
.fl-rich .fl-tg__faq-q, .fl-rich .fl-pvg__faq-q {
  font-family: var(--fl-font-display) !important; font-weight: 700 !important; color: var(--fl-ink) !important;
}

/* ── CTA bands (tg / pvg) → cream2 framed; buttons → ink pills w/ offset ── */
.fl-rich .fl-tg__cta, .fl-rich .fl-pvg__cta {
  background: var(--fl-cream2) !important; border: 2.5px solid var(--fl-ink) !important;
  border-radius: 18px !important; box-shadow: 6px 6px 0 var(--fl-ink) !important;
}
.fl-rich .fl-tg__cta h2, .fl-rich .fl-pvg__cta h2 { font-family: var(--fl-font-display) !important; font-weight: 800 !important; color: var(--fl-ink) !important; }
.fl-rich .fl-tg__cta-btn, .fl-rich .fl-pvg__cta-btn {
  border: 2px solid var(--fl-ink) !important; border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--fl-ink) !important; font-family: var(--fl-font-display); font-weight: 700 !important;
  transition: transform .1s ease, box-shadow .1s ease !important;
}
.fl-rich .fl-tg__cta-btn--primary, .fl-rich .fl-pvg__cta-btn--primary { background: var(--fl-purple) !important; color: #fff !important; }
.fl-rich .fl-tg__cta-btn--secondary, .fl-rich .fl-pvg__cta-btn--secondary { background: #fff !important; color: var(--fl-ink) !important; }
.fl-rich .fl-tg__cta-btn:hover, .fl-rich .fl-pvg__cta-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--fl-ink) !important; }

/* ── team / editor avatars → ink ring for definition ── */
.fl-rich .fl-team__avatar { border: 2px solid var(--fl-ink) !important; }
.fl-rich .fl-editor__avatar { border: 3px solid var(--fl-ink) !important; }
.fl-rich .fl-team__role, .fl-rich .fl-editor__role { color: var(--fl-purple) !important; font-weight: 700 !important; }

/* ── editor page: section headings + quote callout + cta ── */
.fl-rich .fl-editor__section h2 {
  font-family: var(--fl-font-display) !important; font-weight: 800 !important; color: var(--fl-ink) !important;
  border-bottom: 3px solid var(--fl-ink) !important; letter-spacing: -0.01em;
}
.fl-rich .fl-editor__quote {
  background: var(--fl-cream2) !important; border: 2px solid var(--fl-ink) !important;
  border-left: 6px solid var(--fl-purple) !important; border-radius: 0 12px 12px 0 !important;
  box-shadow: 4px 4px 0 var(--fl-ink) !important; color: var(--fl-ink) !important;
}
.fl-rich .fl-editor__cta a {
  background: var(--fl-purple) !important; color: #fff !important;
  border: 2px solid var(--fl-ink) !important; box-shadow: 3px 3px 0 var(--fl-ink) !important;
  font-family: var(--fl-font-display); font-weight: 700 !important;
}

/* ── quiz: option cards / result cards / header → chunky (display toggles intact) ── */
.fl-rich .fl-quiz__opt, .fl-rich .fl-quiz__result-card {
  border: 2px solid var(--fl-ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--fl-ink) !important; transition: transform .12s ease, box-shadow .12s ease !important;
}
.fl-rich .fl-quiz__opt:hover, .fl-rich .fl-quiz__result-card:hover {
  transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--fl-ink) !important; border-color: var(--fl-ink) !important;
}
.fl-rich .fl-quiz__opt--selected { background: var(--fl-acid) !important; border-color: var(--fl-ink) !important; }
.fl-rich .fl-quiz__opt-label, .fl-rich .fl-quiz__step-q, .fl-rich .fl-quiz__result-name,
.fl-rich .fl-quiz__result-subtitle, .fl-rich .fl-quiz__result-card h4 {
  font-family: var(--fl-font-display) !important; font-weight: 700 !important; color: var(--fl-ink) !important;
}
.fl-rich .fl-quiz__result-name { color: #fff !important; }
.fl-rich .fl-quiz__result-header {
  border: 2.5px solid var(--fl-ink) !important; border-radius: 18px !important; box-shadow: 6px 6px 0 var(--fl-ink) !important;
}
.fl-rich .fl-quiz__slider-next, .fl-rich .fl-quiz__btn {
  border: 2px solid var(--fl-ink) !important; border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--fl-ink) !important; font-family: var(--fl-font-display); font-weight: 700 !important;
}
.fl-rich .fl-quiz__btn--primary, .fl-rich .fl-quiz__slider-next { background: var(--fl-purple) !important; color: #fff !important; }
.fl-rich .fl-quiz__btn--secondary { background: #fff !important; color: var(--fl-ink) !important; }
.fl-rich .fl-quiz__progress { border: 2px solid var(--fl-ink) !important; height: 12px !important; }
