/* ==========================================================================
   FBT DESIGN SYSTEM — 2. COMPONENTS & PAGE TEMPLATES
   ==========================================================================
   This file preserves the ORIGINAL RELATIVE ORDER of every rule exactly as
   it existed in Flatsome's Custom CSS field, split only into clearly
   labeled sections. That is deliberate, not an oversight: several
   classnames (.fbt-hero, .fbt-eyebrow, .fbt-badge, .fbt-card, .fbt-btn,
   .fbt-newsletter, .fbt-callout, .fbt-grid, .fbt-compare-table,
   .fbt-table-scroll, .fbt-topbar-trust, .fbt-input, .fbt-faq*) are defined
   more than once — first by "Generation 1" (coral accent, still used by
   the product-review article template) and again later by "Generation 2"
   (blue accent, used by most other templates). Because CSS gives the
   LAST-declared rule priority for equal-specificity selectors, changing
   the order these sections load in would change which value currently
   wins and could visibly break either template. Keeping the original
   order guarantees the site looks exactly the same after this migration.

   REMOVED as confirmed dead code (verified against every published page
   and post on the site, 51 URLs, zero matches — see Fase 3 report):
     - Generation 1 "wider canvas" components never used: .fbt-hero-full*,
       .fbt-stat-strip*, .fbt-split*, .fbt-statement*, .fbt-editorial*,
       .fbt-feature-grid*
     - Generation 1 components never used: .fbt-tile*, .fbt-scroller*,
       .flickity-* rules, .fbt-icon / .fbt-icon--*/.fbt-icon-circle*,
       .fbt-section--tight/--loose/--alt, .fbt-section-head,
       .fbt-section-title, .fbt-section-subtitle, .fbt-score--coral,
       .fbt-badge--success/--alert/--ribbon, .fbt-btn--ghost, .fbt-field,
       .fbt-label, .fbt-grid--2/--3, .fbt-hero__content, .fbt-trust
     - The bulk of WPCode snippet #334's "Fase 7" redefinition block
       (a third, never-referenced .fbt-page/.fbt-card__image/
       .fbt-card__store/.fbt-empty-state/.fbt-badge--top/.fbt-section-gray
       component set) — only its genuine bugfix patches were kept, moved
       into utilities.css.
   Nothing else was removed. Anything not verified unused was kept.
   ========================================================================== */


/* ==========================================================================
   GENERATION 1 — "FITBEGINTIPS 2.0" design system (coral accent)
   Live on: product-review article template (fbt-pk-hero, fbt-price-card,
   fbt-price-row, fbt-btn--*, fbt-badge--coral/navy, fbt-score, fbt-callout,
   fbt-compare-table, fbt-table-scroll, fbt-topbar-trust, fbt-wide-row,
   fbt-grid--4, fbt-two-col, fbt-teaser-card).
   ========================================================================== */

.fbt-section{ padding-top:var(--fbt-space-7); padding-bottom:var(--fbt-space-7); }
.fbt-grid{ display:grid; gap:var(--fbt-gutter); }
.fbt-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:849px){
  .fbt-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:549px){
  .fbt-grid--4{ grid-template-columns:1fr; }
  .fbt-section{ padding-top:var(--fbt-space-6); padding-bottom:var(--fbt-space-6); }
}

.fbt-eyebrow{
  font-family:var(--fbt-font-heading); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fbt-primary);
  margin-bottom:var(--fbt-space-2); display:block;
}

/* ---------- Cards ---------- */
.fbt-card{
  background:var(--fbt-surface); border:1px solid var(--fbt-border);
  border-radius:var(--fbt-radius-lg); box-shadow:var(--fbt-shadow-card);
  overflow:hidden; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  display:flex; flex-direction:column;
}
.fbt-card:hover{ box-shadow:var(--fbt-shadow-card-hover); transform:translateY(-4px); border-color:transparent; }
.fbt-card__media{
  position:relative; aspect-ratio:5/4; background:var(--fbt-surface-alt);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fbt-card__media img{ width:100%; height:100%; object-fit:contain; object-position:center; padding:var(--fbt-space-4); }
.fbt-card__body{ padding:var(--fbt-space-4); display:flex; flex-direction:column; gap:var(--fbt-space-2); flex:1; }
.fbt-card__title{ font-family:var(--fbt-font-heading); font-weight:600; font-size:17px; color:var(--fbt-secondary); margin:0; }
.fbt-card__meta{ display:flex; align-items:center; gap:var(--fbt-space-2); font-size:13px; color:var(--fbt-text-muted); }
.fbt-card__footer{ padding:0 var(--fbt-space-4) var(--fbt-space-4); display:flex; gap:var(--fbt-space-2); flex-wrap:wrap; }

.fbt-score{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fbt-font-heading); font-weight:700; font-size:13px;
  background:var(--fbt-secondary); color:#fff; padding:4px 10px; border-radius:var(--fbt-radius-sm);
}
.fbt-score__value{ font-size:14px; }

/* ---------- Badges ---------- */
.fbt-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--fbt-font-heading); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
  padding:4px 10px; border-radius:var(--fbt-radius-pill); white-space:nowrap;
}
.fbt-badge--coral{ background:var(--fbt-primary-soft); color:var(--fbt-primary-dark); }
.fbt-badge--navy{ background:var(--fbt-secondary-soft); color:var(--fbt-secondary); }

/* ---------- Buttons ---------- */
.fbt-btn{
  font-family:var(--fbt-font-heading); font-weight:600; font-size:14px;
  border-radius:var(--fbt-radius-md); padding:12px 22px; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  cursor:pointer; border:2px solid transparent;
}
.fbt-btn:active{ transform:scale(.98); }
.fbt-btn--primary{ background:var(--fbt-primary); color:#fff; }
.fbt-btn--primary:hover{ background:var(--fbt-primary-dark); color:#fff; }
.fbt-btn--outline{ background:transparent; border-color:var(--fbt-secondary); color:var(--fbt-secondary); }
.fbt-btn--outline:hover{ background:var(--fbt-secondary); color:#fff; }
.fbt-btn--sm{ padding:8px 16px; font-size:13px; }
.fbt-btn--full{ width:100%; }

/* ---------- Forms ---------- */
input.fbt-input, select.fbt-input, textarea.fbt-input, .fbt-input{
  width:100%; font-family:var(--fbt-font-body); font-size:15px; color:var(--fbt-secondary);
  background:var(--fbt-surface); border:1.5px solid var(--fbt-border);
  border-radius:var(--fbt-radius-sm); padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fbt-input:focus{ outline:none; border-color:var(--fbt-primary); box-shadow:0 0 0 3px var(--fbt-primary-soft); }
.fbt-input::placeholder{ color:var(--fbt-text-muted); }
input[type=checkbox].fbt-check, input[type=radio].fbt-check{ accent-color:var(--fbt-primary); width:18px; height:18px; }

.fbt-newsletter{ background:var(--fbt-secondary); border-radius:var(--fbt-radius-lg); padding:var(--fbt-space-6); color:#fff; }
.fbt-newsletter .fbt-input{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; }
.fbt-newsletter .fbt-input::placeholder{ color:rgba(255,255,255,.6); }

/* ---------- Comparison tables ---------- */
.fbt-compare-table{ width:100%; border-collapse:separate; border-spacing:0; }
.fbt-compare-table th,.fbt-compare-table td{ padding:var(--fbt-space-3); border-bottom:1px solid var(--fbt-border); text-align:left; }
.fbt-compare-table th{ font-family:var(--fbt-font-heading); color:var(--fbt-secondary); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.fbt-compare-table tr:last-child td{ border-bottom:none; }
.fbt-compare-table .fbt-compare-highlight{ background:var(--fbt-primary-soft); }

/* ---------- Callouts ---------- */
.fbt-callout{ border-left:4px solid var(--fbt-primary); background:var(--fbt-surface-alt); border-radius:0 var(--fbt-radius-md) var(--fbt-radius-md) 0; padding:var(--fbt-space-4); margin:var(--fbt-space-5) 0; }
.fbt-callout--tip{ border-left-color:var(--fbt-success); }
.fbt-callout--warning{ border-left-color:var(--fbt-alert); }

/* Hero (Generation 1 base — layered with Generation 2's own .fbt-hero rule
   further down; both are kept in original order so the merged result
   matches current production exactly) */
.fbt-hero{ position:relative; min-height:640px; display:flex; align-items:center; background-size:cover; background-position:center; }
@media(max-width:849px){
  .fbt-hero{ min-height:auto; }
}

/* ---------- calmer palette / v2 refinements (still Generation 1) ---------- */
.fbt-eyebrow{
  color:var(--fbt-secondary);
  display:inline-flex; align-items:center; gap:8px;
}
.fbt-eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--fbt-primary); display:inline-block; margin-right:8px; flex-shrink:0;
}

/* Fix: eyebrow contrast on Flatsome dark sections (navy-on-navy was invisible) */
.section.dark .fbt-eyebrow{ color:#fff; }

/* ---------- Productkeuze template components ---------- */
.fbt-wide-row{ max-width:1400px !important; }

.fbt-pk-hero{ display:flex; gap:var(--fbt-space-6); align-items:center; flex-wrap:wrap; }
.fbt-pk-hero__media{ flex:0 0 400px; max-width:400px; background:var(--fbt-surface-alt); border-radius:var(--fbt-radius-lg); padding:var(--fbt-space-5); display:flex; align-items:center; justify-content:center; border:1px solid var(--fbt-border); }
.fbt-pk-hero__media img{ width:100%; height:auto; object-fit:contain; max-height:440px; }
.fbt-pk-hero__body{ flex:1 1 380px; min-width:300px; }
.fbt-pk-hero__body h1{ font-family:var(--fbt-font-heading); font-size:32px; line-height:1.2; color:var(--fbt-secondary); margin:0 0 14px; }
.fbt-pk-hero__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.fbt-pk-hero__pitch{ font-size:17px; color:var(--fbt-text); line-height:1.6; margin-bottom:26px; max-width:520px; }
.fbt-pk-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:849px){
  .fbt-pk-hero{ flex-direction:column; }
  .fbt-pk-hero__media{ flex:0 0 auto; max-width:280px; width:100%; }
}

.fbt-price-card{ border:1px solid var(--fbt-border); border-radius:var(--fbt-radius-lg); background:var(--fbt-surface); box-shadow:var(--fbt-shadow-card); overflow:hidden; }
.fbt-price-card__head{ padding:var(--fbt-space-4) var(--fbt-space-4) var(--fbt-space-3); display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--fbt-border); }
.fbt-price-card__head h3{ margin:0; font-family:var(--fbt-font-heading); font-weight:700; font-size:18px; color:var(--fbt-secondary); }
.fbt-price-card__updated{ font-size:12px; color:var(--fbt-text-muted); }
.fbt-price-row{ display:flex; align-items:center; gap:var(--fbt-space-4); padding:var(--fbt-space-4); border-bottom:1px solid var(--fbt-border); flex-wrap:wrap; }
.fbt-price-row:last-of-type{ border-bottom:none; }
.fbt-price-row__store{ display:flex; align-items:center; gap:10px; font-family:var(--fbt-font-heading); font-weight:700; font-size:15px; color:var(--fbt-secondary); min-width:120px; }
.fbt-price-row__dot{ width:8px; height:8px; border-radius:50%; background:var(--fbt-primary); flex-shrink:0; }
.fbt-price-row__price{ font-family:var(--fbt-font-heading); font-weight:700; font-size:22px; color:var(--fbt-secondary); margin-left:auto; }
.fbt-price-row__stock{ font-size:12px; font-weight:600; }
.fbt-price-row__cta{ flex-shrink:0; }
@media(max-width:849px){
  .fbt-price-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .fbt-price-row__price{ margin-left:0; }
  .fbt-price-row__cta{ width:100%; }
  .fbt-price-row__cta .fbt-btn{ width:100%; }
}
.fbt-price-card__foot{ padding:var(--fbt-space-3) var(--fbt-space-4); background:var(--fbt-surface-alt); font-size:12px; color:var(--fbt-text-muted); }

/* ---------- Artikel template (Fase 4, Generation 1) ---------- */
.fbt-article-hero{ position:relative; width:100%; max-width:1400px; margin:0 auto var(--fbt-space-6); border-radius:var(--fbt-radius-lg); overflow:hidden; box-shadow:var(--fbt-shadow-card); aspect-ratio:21/9; background:var(--fbt-surface-alt); }
.fbt-article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.fbt-article-hero__badge{ position:absolute; top:var(--fbt-space-4); left:var(--fbt-space-4); }
@media (max-width:768px){ .fbt-article-hero{ aspect-ratio:4/3; border-radius:var(--fbt-radius-md); } }
.fbt-article-header{ max-width:760px; margin:0 auto var(--fbt-space-6); text-align:left; }
.fbt-article-meta{ display:flex; align-items:center; gap:var(--fbt-space-3); font-size:13px; color:var(--fbt-text-muted); margin-top:var(--fbt-space-2); flex-wrap:wrap; }
.fbt-article-meta__dot{ width:4px; height:4px; border-radius:50%; background:var(--fbt-border); display:inline-block; }
.fbt-article-body{ max-width:760px; margin:0 auto; font-size:17px; line-height:1.75; color:var(--fbt-text); }
.fbt-article-body h2{ margin-top:var(--fbt-space-7); margin-bottom:var(--fbt-space-3); font-size:26px; }
.fbt-article-body h3{ margin-top:var(--fbt-space-6); margin-bottom:var(--fbt-space-2); font-size:20px; }
.fbt-article-body p{ margin-bottom:var(--fbt-space-4); }
.fbt-article-body ul, .fbt-article-body ol{ margin-bottom:var(--fbt-space-4); padding-left:1.3em; }
.fbt-article-body li{ margin-bottom:var(--fbt-space-2); }
.fbt-toc{ max-width:760px; margin:0 auto var(--fbt-space-7); background:var(--fbt-surface-alt); border:1px solid var(--fbt-border); border-radius:var(--fbt-radius-md); padding:var(--fbt-space-5); }
.fbt-toc__title{ font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--fbt-text-muted); margin-bottom:var(--fbt-space-3); }
.fbt-toc ol{ margin:0; padding-left:1.2em; }
.fbt-toc li{ margin-bottom:var(--fbt-space-2); }
.fbt-toc a{ color:var(--fbt-text); text-decoration:none; font-weight:600; }
.fbt-toc a:hover{ color:var(--fbt-primary); }
.fbt-article-image{ max-width:760px; margin:var(--fbt-space-6) auto; }
.fbt-article-image img{ width:100%; border-radius:var(--fbt-radius-md); box-shadow:var(--fbt-shadow-card); display:block; }
.fbt-article-image figcaption{ font-size:13px; color:var(--fbt-text-muted); margin-top:var(--fbt-space-2); text-align:center; }
.fbt-related-section{ max-width:1400px; margin:var(--fbt-space-8) auto 0; }
.fbt-related-section__title{ font-size:22px; font-weight:700; margin-bottom:var(--fbt-space-5); text-align:center; }
.fbt-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--fbt-space-5); }
@media (max-width:900px){ .fbt-related-grid{ grid-template-columns:1fr; } }
.fbt-related-card{ display:block; background:#fff; border:1px solid var(--fbt-border); border-radius:var(--fbt-radius-md); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--fbt-shadow-card); transition:transform .15s ease; }
.fbt-related-card:hover{ transform:translateY(-3px); }
.fbt-related-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.fbt-related-card__body{ padding:var(--fbt-space-4); }
.fbt-related-card__tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fbt-primary); }
.fbt-related-card__title{ font-size:15px; font-weight:700; margin-top:var(--fbt-space-2); color:var(--fbt-secondary); }

/* ---------- XXL Nutrition price-comparison integration (Fase 6) ----------
   Per-store accent color for the price dot in .fbt-price-row, so each
   retailer is visually distinguishable. Extends automatically as more
   retailers are added via the affiliate feed (data-store attribute). */
.fbt-price-row[data-store="xxl"] .fbt-price-row__dot{ background:var(--fbt-store-xxl); }
.fbt-price-row[data-store="bol"] .fbt-price-row__dot{ background:var(--fbt-store-bol); }
.fbt-price-row[data-store="amazon"] .fbt-price-row__dot{ background:var(--fbt-store-amazon); }
.fbt-price-row[data-store="myprotein"] .fbt-price-row__dot{ background:var(--fbt-store-myprotein); }
.fbt-price-row[data-store="trainingfit"] .fbt-price-row__dot{ background:var(--fbt-store-trainingfit); }
.fbt-price-row__logo{ width:28px; height:28px; border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--fbt-border); flex-shrink:0; }


/* ==========================================================================
   GENERATION 2 — "v0.2 Sprint 2" design system (blue accent)
   Live on: homepage, productdetail/quick-answer template, vergelijking,
   categorie, calculator, zoekresultaten, artikel (body content), contact,
   over-ons, sidebar widgets, site header/footer trust bar.
   (.fbt-scope base reset + .fbt-container/.fbt-section/.fbt-eyebrow
   tokens for this generation live in base.css, loaded before this file.)
   ========================================================================== */

/* ---------- Buttons ---------- */
.fbt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fbt-space-2);
  font-family: var(--fbt-font-base);
  font-weight: var(--fbt-fw-semibold);
  font-size: var(--fbt-fs-body);
  padding: 14px 26px;
  border-radius: var(--fbt-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--fbt-dur-fast) var(--fbt-ease), background var(--fbt-dur-fast) var(--fbt-ease),
    box-shadow var(--fbt-dur-fast) var(--fbt-ease), border-color var(--fbt-dur-fast) var(--fbt-ease);
  white-space: nowrap;
}
.fbt-btn:hover { transform: translateY(-1px); }
.fbt-btn:active { transform: translateY(0) scale(0.98); }
.fbt-btn:focus-visible { outline: 2px solid var(--fbt-color-blue-600); outline-offset: 2px; }
.fbt-btn-primary { background: var(--fbt-color-blue-600); color: var(--fbt-color-white); box-shadow: 0 1px 2px rgba(29,95,224,0.25); }
.fbt-btn-primary:hover { background: var(--fbt-color-blue-700); box-shadow: 0 10px 24px rgba(29,95,224,0.28); }
.fbt-btn-secondary { background: var(--fbt-color-white); color: var(--fbt-color-navy-900) !important; border-color: var(--fbt-color-gray-200); }
.fbt-btn-secondary:hover { border-color: var(--fbt-color-navy-900); box-shadow: var(--fbt-shadow-sm); }
.fbt-btn-ghost { background: transparent; color: var(--fbt-color-blue-600); padding-inline: 4px; gap: 6px; }
.fbt-btn-ghost svg { transition: transform var(--fbt-dur-fast) var(--fbt-ease); }
.fbt-btn-ghost:hover svg { transform: translateX(3px); }
.fbt-btn-ghost:hover { transform: none; }
.fbt-btn-sm { padding: 8px 16px; font-size: var(--fbt-fs-small); }
.fbt-btn-icon {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: var(--fbt-color-navy-900); color: var(--fbt-color-white); border: none;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--fbt-dur-fast) var(--fbt-ease), transform var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-btn-icon svg { transition: transform var(--fbt-dur-fast) var(--fbt-ease); }
.fbt-btn-icon:hover { background: var(--fbt-color-blue-600); transform: scale(1.06); }
.fbt-btn-icon:hover svg { transform: translateX(1px); }

/* ---------- Badges ---------- */
.fbt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fbt-fs-micro);
  font-weight: var(--fbt-fw-semibold);
  letter-spacing: 0.01em;
  padding: 6px 12px 6px 10px;
  border-radius: var(--fbt-radius-pill);
  background: var(--fbt-color-blue-50);
  color: var(--fbt-color-blue-700);
  box-shadow: 0 1px 2px rgba(11,30,61,0.04);
}
.fbt-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.fbt-badge--fbt-solid { background: var(--fbt-color-blue-600); color: var(--fbt-color-white); }
.fbt-badge--fbt-navy { background: var(--fbt-color-navy-900); color: var(--fbt-color-white); }
.fbt-badge--fbt-gold { background: #fff4e0; color: #a5680c; }

/* ---------- Rating ---------- */
.fbt-rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-text); }
.fbt-rating svg { width: 14px; height: 14px; fill: var(--fbt-color-star); flex-shrink: 0; }
.fbt-rating .fbt-count { color: var(--fbt-color-text-muted); font-weight: var(--fbt-fw-regular); }

/* ---------- Card base ---------- */
.fbt-card {
  background: var(--fbt-color-white);
  border-radius: var(--fbt-radius-lg);
  border: 1px solid var(--fbt-color-gray-100);
  box-shadow: var(--fbt-shadow-sm);
  transition: box-shadow var(--fbt-dur-med) var(--fbt-ease), transform var(--fbt-dur-med) var(--fbt-ease), border-color var(--fbt-dur-med) var(--fbt-ease);
}
.fbt-card:hover { box-shadow: var(--fbt-shadow-md); transform: translateY(-3px); border-color: var(--fbt-color-gray-200); }

/* ---------- Product card — carries roughly half the homepage ---------- */
.fbt-card-product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--fbt-space-4);
  gap: 3px;
}
.fbt-card-product__badge { position: absolute; top: var(--fbt-space-3); left: var(--fbt-space-3); z-index: 1; }
.fbt-card-product__fav {
  position: absolute; top: var(--fbt-space-3); right: var(--fbt-space-3); z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center; color: var(--fbt-color-text-muted);
  box-shadow: var(--fbt-shadow-sm);
}
.fbt-card-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--fbt-radius-md);
  background: var(--fbt-color-gray-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--fbt-space-3);
  overflow: hidden;
}
.fbt-card-product__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--fbt-space-4); transition: transform var(--fbt-dur-med) var(--fbt-ease); }
.fbt-card-product:hover .fbt-card-product__media img { transform: scale(1.06); }
.fbt-card-product__brand { font-size: var(--fbt-fs-micro); color: var(--fbt-color-text-muted); font-weight: var(--fbt-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.fbt-card-product__title { font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-text); line-height: 1.3; margin-top: 1px; }
.fbt-card-product__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--fbt-space-3); padding-top: var(--fbt-space-3); border-top: 1px solid var(--fbt-color-gray-100); }
.fbt-card-product__price { font-size: var(--fbt-fs-h2); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-price); letter-spacing: -0.01em; }
.fbt-card-product__price .fbt-was { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-regular); color: var(--fbt-color-text-muted); text-decoration: line-through; margin-right: 4px; }

/* ---------- Goal card ---------- */
.fbt-card-goal {
  position: relative;
  padding: var(--fbt-space-4);
  padding-top: calc(40px + var(--fbt-space-3) + var(--fbt-space-3));
  display: flex; flex-direction: column; gap: 3px;
  min-height: 152px;
  justify-content: flex-end;
  color: var(--fbt-color-white);
  background: linear-gradient(165deg, var(--fbt-color-blue-700) 0%, var(--fbt-color-navy-900) 75%);
  overflow: hidden;
}
.fbt-card-goal::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120px 120px at 100% 0%, rgba(255,255,255,0.10), transparent 70%);
}
.fbt-card-goal__icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: var(--fbt-space-4); left: var(--fbt-space-4);
  color: var(--fbt-color-white);
}
.fbt-card-goal__icon svg { width: 20px; height: 20px; }
.fbt-card-goal h3 { color: var(--fbt-color-white); font-size: var(--fbt-fs-h3); position: relative; }
.fbt-card-goal p { color: rgba(255,255,255,0.78); font-size: var(--fbt-fs-small); position: relative; }

/* ---------- USP / trust item ---------- */
.fbt-usp { display: flex; align-items: flex-start; gap: var(--fbt-space-3); }
.fbt-usp__icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
}
.fbt-usp__icon svg { width: 20px; height: 20px; stroke: var(--fbt-color-white); }
.fbt-usp h4 { color: inherit; font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-semibold); margin-bottom: 2px; }
.fbt-usp p { color: rgba(255,255,255,0.72); font-size: var(--fbt-fs-small); }

/* ---------- Article card ---------- */
.fbt-card-article { overflow: hidden; }
.fbt-card-article__media { aspect-ratio: 16/10; background: var(--fbt-color-gray-100); overflow: hidden; }
.fbt-card-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fbt-dur-med) var(--fbt-ease); }
.fbt-card-article:hover .fbt-card-article__media img { transform: scale(1.05); }
.fbt-card-article__body { padding: var(--fbt-space-4); }
.fbt-card-article__tag { font-size: var(--fbt-fs-micro); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-blue-600); text-transform: uppercase; letter-spacing: 0.04em; }
.fbt-card-article__title { font-size: var(--fbt-fs-body-lg); font-weight: var(--fbt-fw-semibold); margin-top: 4px; margin-bottom: var(--fbt-space-2); line-height: 1.35; }
.fbt-card-article__meta { font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); }

/* ---------- Category icon (round) ---------- */
.fbt-category-icon { display: flex; flex-direction: column; align-items: center; gap: var(--fbt-space-2); text-align: center; }
.fbt-category-icon__circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--fbt-color-gray-50); border: 1px solid var(--fbt-color-gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--fbt-color-navy-900);
  transition: border-color var(--fbt-dur-fast) var(--fbt-ease), background var(--fbt-dur-fast) var(--fbt-ease), transform var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-category-icon__circle svg { width: 24px; height: 24px; }
.fbt-category-icon:hover .fbt-category-icon__circle { border-color: var(--fbt-color-blue-600); background: var(--fbt-color-blue-50); color: var(--fbt-color-blue-600); transform: translateY(-2px); }
.fbt-category-icon span { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); }

/* ---------- Section header pattern ---------- */
.fbt-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--fbt-space-5); gap: var(--fbt-space-4); }
.fbt-section-header h2 { font-size: var(--fbt-fs-h1); }

/* ---------- Grids ---------- */
.fbt-grid { display: grid; gap: var(--fbt-space-5); }
.fbt-grid-5 { grid-template-columns: repeat(5, 1fr); }
.fbt-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fbt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fbt-grid-9 { grid-template-columns: repeat(9, 1fr); }

/* ---------- Comparison table ---------- */
.fbt-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fbt-color-white); border-radius: var(--fbt-radius-md); overflow: hidden; border: 1px solid var(--fbt-color-gray-100); }
.fbt-compare-table th, .fbt-compare-table td { padding: var(--fbt-space-3) var(--fbt-space-4); text-align: left; font-size: var(--fbt-fs-small); }
.fbt-compare-table thead th { background: var(--fbt-color-gray-50); font-weight: var(--fbt-fw-semibold); }
.fbt-compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--fbt-color-gray-100); }
.fbt-compare-table .fbt-check { color: var(--fbt-color-blue-600); }

/* ==========================================================================
   Responsive — three layers: desktop (spacious), tablet (tighter),
   mobile (compact/efficient)
   ========================================================================== */
@media (max-width: 1024px) {
  .fbt-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .fbt-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fbt-grid-9 { grid-template-columns: repeat(6, 1fr); gap: var(--fbt-space-4); }
  .fbt-section-header { margin-bottom: var(--fbt-space-4); }
}
@media (max-width: 640px) {
  .fbt-grid-5, .fbt-grid-4, .fbt-grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--fbt-space-3); }
  .fbt-grid-9 { grid-template-columns: repeat(4, 1fr); gap: var(--fbt-space-3); }
  .fbt-section-header { flex-direction: row; align-items: center; margin-bottom: var(--fbt-space-3); }
  .fbt-section-header h2 { font-size: var(--fbt-fs-h2); }
  .fbt-btn { padding: 12px 20px; font-size: var(--fbt-fs-small); }
  .fbt-card-product__price { font-size: var(--fbt-fs-h3); }
  .fbt-category-icon__circle { width: 52px; height: 52px; }
  .fbt-category-icon__circle svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   Homepage layout
   ========================================================================== */

/* ---------- Header (note: superseded once Fase 4 rebuilds the header
   natively in Kadence — kept here since it is still live today) ---------- */
.fbt-site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fbt-color-gray-100);
}
.fbt-site-header .fbt-container { display: flex; align-items: center; gap: var(--fbt-space-6); padding-block: var(--fbt-space-3); }
.fbt-logo { display: flex; align-items: center; gap: var(--fbt-space-2); font-weight: var(--fbt-fw-bold); font-size: 1.25rem; color: var(--fbt-color-navy-900); flex-shrink: 0; }
.fbt-logo__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--fbt-color-blue-600); color: white; display: flex; align-items:center; justify-content:center; font-weight: var(--fbt-fw-bold); }
.fbt-logo__tag { display: block; font-size: 0.6875rem; font-weight: var(--fbt-fw-regular); color: var(--fbt-color-text-muted); }
.fbt-main-nav { display: flex; gap: var(--fbt-space-5); flex: 1; }
.fbt-main-nav a { position: relative; font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); color: var(--fbt-color-text); padding-block: 4px; }
.fbt-main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--fbt-color-blue-600); transition: right var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-main-nav a:hover { color: var(--fbt-color-blue-600); }
.fbt-main-nav a:hover::after { right: 0; }
.fbt-search-box { display: flex; align-items: center; gap: var(--fbt-space-2); background: var(--fbt-color-gray-50); border: 1px solid var(--fbt-color-gray-100); border-radius: var(--fbt-radius-pill); padding: 10px 16px; min-width: 220px; transition: border-color var(--fbt-dur-fast) var(--fbt-ease), background var(--fbt-dur-fast) var(--fbt-ease); }
.fbt-search-box:focus-within { border-color: var(--fbt-color-blue-600); background: var(--fbt-color-white); }
.fbt-search-box input { border: none; background: none; outline: none; font-size: var(--fbt-fs-small); flex: 1; font-family: var(--fbt-font-base); min-width: 0; }
.fbt-search-box svg { flex-shrink: 0; color: var(--fbt-color-text-muted); }
.fbt-nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--fbt-color-gray-200); background: var(--fbt-color-white); color: var(--fbt-color-navy-900);
  align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}

/* ---------- Hero — deliberately bounded, not fullscreen ---------- */
.fbt-hero {
  padding-top: clamp(8px, 1vw, 12px);
  padding-bottom: clamp(28px, 2.5vw, 34px);
  background: var(--fbt-color-white);
}
.fbt-hero .fbt-container { max-width: 1370px; display: grid; grid-template-columns: 1.055fr 0.945fr; gap: var(--fbt-space-6); align-items: center; }
.fbt-hero__title { font-size: var(--fbt-fs-display); letter-spacing: -0.01em; }
.fbt-hero__title em { font-style: normal; color: var(--fbt-color-blue-600); }
.fbt-hero__lead { margin-top: var(--fbt-space-3); font-size: var(--fbt-fs-body-lg); color: var(--fbt-color-text-muted); max-width: 44ch; }
.fbt-hero__ctas { display: flex; gap: var(--fbt-space-3); margin-top: 6px; flex-wrap: wrap; }
/* Nav item horizontal spacing (no native Kadence control for this) */
.main-navigation.header-navigation ul.menu > li > a { padding-left: 15px; padding-right: 15px; }

.fbt-hero__trust { display: flex; gap: var(--fbt-space-5); margin-top: var(--fbt-space-4); flex-wrap: wrap; }
.fbt-hero__trust span { display: flex; align-items: center; gap: 6px; font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); font-weight: var(--fbt-fw-medium); }
.fbt-hero__trust svg { color: var(--fbt-color-blue-600); flex-shrink: 0; }

.fbt-hero__visual { position: relative; }
.fbt-hero__photo {
  height: clamp(500px, 43vw, 650px);
  width: 100%;
  border-radius: var(--fbt-radius-lg);
  overflow: hidden;
}
.fbt-hero__products {
  display: flex; flex-direction: column; gap: var(--fbt-space-2);
  position: absolute; left: -30px; bottom: 40px;
  width: 252px;
}
.fbt-hero__product-card {
  display: flex; align-items: center; gap: var(--fbt-space-2);
  background: var(--fbt-color-white); border-radius: var(--fbt-radius-md); box-shadow: var(--fbt-shadow-lg);
  padding: 10px var(--fbt-space-3); border: 1px solid var(--fbt-color-gray-100);
  transition: transform var(--fbt-dur-fast) var(--fbt-ease), box-shadow var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-hero__product-card:hover { transform: translateX(4px); box-shadow: 0 20px 44px rgba(11,30,61,0.16); }
.fbt-hero__product-card .fbt-thumb {
  width: 40px; height: 40px; border-radius: var(--fbt-radius-sm); background: var(--fbt-color-blue-50);
  color: var(--fbt-color-blue-600); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.fbt-hero__product-card .fbt-thumb svg { width: 20px; height: 20px; }
.fbt-hero__product-card .fbt-info { flex: 1; min-width: 0; }
.fbt-hero__product-card .fbt-info .fbt-brand { font-size: 0.6875rem; color: var(--fbt-color-text-muted); font-weight: var(--fbt-fw-medium); }
.fbt-hero__product-card .fbt-info .fbt-name { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbt-hero__product-card .fbt-price { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-price); flex-shrink: 0; }

/* ---------- Compare + calculator teasers ---------- */
.fbt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fbt-space-5); }
.fbt-teaser-card { padding: var(--fbt-space-5); display: flex; flex-direction: column; gap: var(--fbt-space-2); }
.fbt-teaser-card__visual { border-radius: var(--fbt-radius-md); background: var(--fbt-color-gray-50); aspect-ratio: 16/9; margin-top: var(--fbt-space-2); }

/* ---------- Newsletter ---------- */
.fbt-newsletter { background: var(--fbt-color-navy-900); color: var(--fbt-color-white); padding-block: clamp(28px, 3vw, 48px); }
.fbt-newsletter .fbt-container { display: flex; align-items: center; justify-content: space-between; gap: var(--fbt-space-6); flex-wrap: wrap; }
.fbt-newsletter h2 { color: var(--fbt-color-white); font-size: var(--fbt-fs-h1); }
.fbt-newsletter form { display: flex; gap: var(--fbt-space-2); }
.fbt-newsletter input[type=email] { border: none; border-radius: var(--fbt-radius-pill); padding: 14px 20px; font-family: var(--fbt-font-base); min-width: 260px; }
.fbt-newsletter input[type=email]:focus { outline: 2px solid var(--fbt-color-blue-600); outline-offset: 2px; }

/* ---------- Footer (note: superseded once Fase 5 rebuilds the footer
   natively in Kadence — kept here since it is still live today) ---------- */
.fbt-site-footer { background: var(--fbt-color-gray-50); border-top: 1px solid var(--fbt-color-gray-100); }
.fbt-site-footer .fbt-container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--fbt-space-6); padding-block: clamp(28px, 3vw, 56px); }
.fbt-site-footer h5 { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); margin-bottom: var(--fbt-space-3); }
.fbt-site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--fbt-space-2); }
.fbt-site-footer a { font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); }
.fbt-site-footer a:hover { color: var(--fbt-color-blue-600); }
.fbt-footer-bottom { border-top: 1px solid var(--fbt-color-gray-200); padding-block: var(--fbt-space-4); }
.fbt-footer-bottom .fbt-container { display: flex; justify-content: space-between; font-size: var(--fbt-fs-micro); color: var(--fbt-color-text-muted); padding-block: 0; }

/* ---- Tablet: 901–1024px ---- */
@media (max-width: 1024px) {
  .fbt-hero .fbt-container { gap: var(--fbt-space-5); }
  .fbt-hero__title { font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); }
  .fbt-search-box { min-width: 160px; }
  .fbt-main-nav { gap: var(--fbt-space-4); }
}
/* ---- Mobile transition: ≤900px — hamburger, hero stacks, headline first ---- */
@media (max-width: 900px) {
  .fbt-main-nav { display: none; }
  .fbt-search-box { display: none; }
  .fbt-nav-toggle { display: inline-flex; }
  .fbt-hero .fbt-container { grid-template-columns: 1fr; gap: var(--fbt-space-4); }
  .fbt-hero { padding-block: var(--fbt-space-5); }
  .fbt-hero__photo { height: clamp(180px, 42vw, 260px); border-radius: var(--fbt-radius-md); }
  .fbt-hero__products {
    position: static; flex-direction: row; width: auto;
    overflow-x: auto; margin-top: var(--fbt-space-3); padding-bottom: 4px; left: auto; bottom: auto;
  }
  .fbt-hero__product-card { min-width: 180px; box-shadow: var(--fbt-shadow-sm); flex-shrink: 0; }
  .fbt-hero__lead { max-width: none; }
  .fbt-hero__trust { gap: var(--fbt-space-4); margin-top: var(--fbt-space-3); }
  .fbt-two-col { grid-template-columns: 1fr; }
  .fbt-site-footer .fbt-container { grid-template-columns: 1fr 1fr; }
  .fbt-newsletter .fbt-container { flex-direction: column; align-items: flex-start; }
  .fbt-newsletter form { width: 100%; }
  .fbt-newsletter input[type=email] { min-width: 0; flex: 1; }
}
@media (max-width: 480px) {
  .fbt-site-footer .fbt-container { grid-template-columns: 1fr; gap: var(--fbt-space-4); }
  .fbt-footer-bottom .fbt-container { flex-direction: column; gap: var(--fbt-space-2); }
}

/* Placeholder- and rating-utility (prototype-only classes, used in homepage
   content) */
.fbt-dsx-ph {
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px; font-size:11px; color:var(--fbt-color-text-muted);
  background: repeating-linear-gradient(135deg, var(--fbt-color-gray-100), var(--fbt-color-gray-100) 10px, var(--fbt-color-gray-50) 10px, var(--fbt-color-gray-50) 20px);
  width:100%; height:100%; border-radius: inherit;
}
.fbt-star { width:14px; height:14px; fill:var(--fbt-color-star); flex-shrink:0; }

/* Mobile hero overflow fix — grid track needs an explicit 0 minimum, else it
   sizes to content min-content and overflows */
@media (max-width: 900px) {
  .fbt-hero .fbt-container { grid-template-columns: minmax(0, 1fr); }
  .fbt-hero__content, .fbt-hero__visual { min-width: 0; }
}

/* ==========================================================================
   Productkeuze template — page-header, quick-answer, faq-accordion
   ========================================================================== */

.fbt-page-header {
  padding-block: var(--fbt-space-6) var(--fbt-space-5);
  background: var(--fbt-color-white);
}
.fbt-page-header__title { font-size: var(--fbt-fs-h1); letter-spacing: -0.01em; max-width: 26ch; }
.fbt-page-header__lead { margin-top: var(--fbt-space-3); font-size: var(--fbt-fs-body-lg); color: var(--fbt-color-text-muted); max-width: 60ch; }
.fbt-page-header__meta { display: flex; gap: var(--fbt-space-4); margin-top: var(--fbt-space-4); font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); flex-wrap: wrap; }
.fbt-page-header__meta span { display: flex; align-items: center; gap: 6px; }
.fbt-page-header__meta svg { color: var(--fbt-color-blue-600); flex-shrink: 0; }

.fbt-quick-answer {
  background: var(--fbt-color-navy-900);
  color: var(--fbt-color-text-inverse);
  border-radius: var(--fbt-radius-lg);
  padding: var(--fbt-space-5);
  display: flex;
  gap: var(--fbt-space-5);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fbt-quick-answer__body { display: flex; flex-direction: column; gap: var(--fbt-space-1); }
.fbt-quick-answer__label { font-size: var(--fbt-fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fbt-color-blue-100); font-weight: var(--fbt-fw-semibold); }
.fbt-quick-answer__product { font-size: var(--fbt-fs-h3); font-weight: var(--fbt-fw-bold); }
.fbt-quick-answer__reason { color: rgba(255,255,255,0.72); font-size: var(--fbt-fs-body); max-width: 56ch; }
.fbt-quick-answer__cta { display: flex; align-items: center; gap: var(--fbt-space-4); flex-shrink: 0; }
.fbt-quick-answer__price { font-size: var(--fbt-fs-h2); font-weight: var(--fbt-fw-bold); }

.fbt-faq { border-top: 1px solid var(--fbt-color-gray-200); max-width: 76ch; }
.fbt-faq-item { border-bottom: 1px solid var(--fbt-color-gray-200); }
.fbt-faq-item summary {
  cursor: pointer; list-style: none; padding: var(--fbt-space-4) 0;
  font-weight: var(--fbt-fw-semibold); font-size: var(--fbt-fs-body-lg);
  display: flex; justify-content: space-between; align-items: center; gap: var(--fbt-space-3);
  color: var(--fbt-color-navy-900);
}
.fbt-faq-item summary::-webkit-details-marker { display: none; }
.fbt-faq-item summary::after {
  content: '+'; font-size: 1.5rem; line-height: 1; color: var(--fbt-color-blue-600); flex-shrink: 0;
  transition: transform var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-faq-item[open] summary::after { transform: rotate(45deg); }
.fbt-faq-item p { margin: 0; padding-bottom: var(--fbt-space-4); color: var(--fbt-color-text-muted); max-width: 70ch; }

.fbt-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  .fbt-page-header { padding-block: var(--fbt-space-5); }
  .fbt-quick-answer { flex-direction: column; align-items: flex-start; }
  .fbt-quick-answer__cta { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .fbt-compare-table-wrap .fbt-compare-table { min-width: 560px; }
}
@media (max-width: 480px) {
  .fbt-page-header__meta { gap: var(--fbt-space-3); }
  .fbt-faq-item summary { font-size: var(--fbt-fs-body); }
}

/* ==========================================================================
   Productdetail template (Productkeuze) — breadcrumb, product hero, buybox,
   tabs, pros/cons, spec table. The green/red pair for pros/cons is the one
   deliberate exception to the blue palette (design explicitly calls for
   green/red here — see tokens.css).
   ========================================================================== */

.fbt-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted);
  padding-block: var(--fbt-space-4);
}
.fbt-breadcrumb a { color: var(--fbt-color-text-muted); }
.fbt-breadcrumb a:hover { color: var(--fbt-color-blue-600); }
.fbt-breadcrumb__sep { color: var(--fbt-color-gray-400); }
.fbt-breadcrumb__current { color: var(--fbt-color-navy-900); font-weight: var(--fbt-fw-medium); }

.fbt-product-hero {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: var(--fbt-space-7);
  align-items: start;
  padding-bottom: var(--fbt-space-6);
}
.fbt-product-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fbt-color-gray-50);
  border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fbt-product-photo img { width: 100%; height: 100%; object-fit: contain; padding: var(--fbt-space-6); }
.fbt-product-photo__badge { position: absolute; top: var(--fbt-space-4); left: var(--fbt-space-4); }

.fbt-product-info__brand { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-blue-600); text-transform: uppercase; letter-spacing: 0.04em; }
.fbt-product-info__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fbt-space-4); margin-top: 4px; }
.fbt-product-info__title { font-size: var(--fbt-fs-h1); letter-spacing: -0.01em; max-width: 20ch; }
.fbt-product-info__desc { margin-top: var(--fbt-space-3); color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-body-lg); max-width: 52ch; }

.fbt-score-badge {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: var(--fbt-color-navy-900); color: var(--fbt-color-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--fbt-shadow-sm);
}
.fbt-score-badge svg { width: 20px; height: 20px; }
.fbt-score-badge span { font-size: 9px; font-weight: var(--fbt-fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; text-align: center; }

.fbt-product-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fbt-space-3) var(--fbt-space-4); margin-top: var(--fbt-space-5); }
.fbt-product-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fbt-fs-body); color: var(--fbt-color-text); }
.fbt-product-checklist svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--fbt-color-blue-600); }

.fbt-product-buybox {
  margin-top: var(--fbt-space-6);
  background: var(--fbt-color-white);
  border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg);
  box-shadow: var(--fbt-shadow-sm);
  padding: var(--fbt-space-5);
}
.fbt-product-buybox__row { display: flex; align-items: center; justify-content: space-between; gap: var(--fbt-space-4); flex-wrap: wrap; }
.fbt-product-buybox__price { font-size: var(--fbt-fs-display); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-price); letter-spacing: -0.01em; }
.fbt-product-buybox__price .fbt-was { font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-regular); color: var(--fbt-color-text-muted); text-decoration: line-through; margin-right: 6px; }
.fbt-product-buybox__ctas { display: flex; gap: var(--fbt-space-3); margin-top: var(--fbt-space-4); flex-wrap: wrap; }
.fbt-product-buybox__ctas .fbt-btn { flex: 1; min-width: 200px; }
.fbt-product-buybox__trust { display: flex; flex-direction: column; gap: 8px; margin-top: var(--fbt-space-4); padding-top: var(--fbt-space-4); border-top: 1px solid var(--fbt-color-gray-100); }
.fbt-product-buybox__trust span { display: flex; align-items: center; gap: 8px; font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); }
.fbt-product-buybox__trust svg { width: 16px; height: 16px; color: var(--fbt-color-blue-600); flex-shrink: 0; }

@media (min-width: 1025px) {
  .fbt-product-buybox--fbt-sticky { position: sticky; top: 96px; }
}

/* Tabs (CSS-only via radio/label, no JS needed) */
.fbt-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.fbt-tabs__nav { display: flex; gap: var(--fbt-space-2); border-bottom: 1px solid var(--fbt-color-gray-200); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fbt-tabs__label {
  cursor: pointer; padding: var(--fbt-space-3) var(--fbt-space-4); white-space: nowrap;
  font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-medium); color: var(--fbt-color-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--fbt-dur-fast) var(--fbt-ease), border-color var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-tabs__label:hover { color: var(--fbt-color-navy-900); }
.fbt-tabs__panel { display: none; padding-block: var(--fbt-space-6); }
#fbt-tab-1:checked ~ .fbt-tabs__nav label[for="fbt-tab-1"],
#fbt-tab-2:checked ~ .fbt-tabs__nav label[for="fbt-tab-2"],
#fbt-tab-3:checked ~ .fbt-tabs__nav label[for="fbt-tab-3"],
#fbt-tab-4:checked ~ .fbt-tabs__nav label[for="fbt-tab-4"],
#fbt-tab-5:checked ~ .fbt-tabs__nav label[for="fbt-tab-5"] {
  color: var(--fbt-color-blue-600); border-bottom-color: var(--fbt-color-blue-600);
}
#fbt-tab-1:checked ~ .fbt-tabs__panels #fbt-panel-1,
#fbt-tab-2:checked ~ .fbt-tabs__panels #fbt-panel-2,
#fbt-tab-3:checked ~ .fbt-tabs__panels #fbt-panel-3,
#fbt-tab-4:checked ~ .fbt-tabs__panels #fbt-panel-4,
#fbt-tab-5:checked ~ .fbt-tabs__panels #fbt-panel-5 { display: block; }
#fbt-tab-1:focus-visible ~ .fbt-tabs__nav label[for="fbt-tab-1"],
#fbt-tab-2:focus-visible ~ .fbt-tabs__nav label[for="fbt-tab-2"],
#fbt-tab-3:focus-visible ~ .fbt-tabs__nav label[for="fbt-tab-3"],
#fbt-tab-4:focus-visible ~ .fbt-tabs__nav label[for="fbt-tab-4"],
#fbt-tab-5:focus-visible ~ .fbt-tabs__nav label[for="fbt-tab-5"] {
  outline: 2px solid var(--fbt-color-blue-600); outline-offset: 2px; border-radius: 4px;
}

/* Voordelen / Nadelen */
.fbt-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fbt-space-5); }
.fbt-pros-cons__col { border-radius: var(--fbt-radius-md); padding: var(--fbt-space-5); }
.fbt-pros-cons__col--fbt-pro { background: var(--fbt-color-green-50); }
.fbt-pros-cons__col--fbt-con { background: var(--fbt-color-red-50); }
.fbt-pros-cons__title { font-size: var(--fbt-fs-body-lg); font-weight: var(--fbt-fw-semibold); margin-bottom: var(--fbt-space-3); }
.fbt-pros-cons__col--fbt-pro .fbt-pros-cons__title { color: var(--fbt-color-green-600); }
.fbt-pros-cons__col--fbt-con .fbt-pros-cons__title { color: var(--fbt-color-red-600); }
.fbt-pros-cons ul { display: flex; flex-direction: column; gap: 10px; }
.fbt-pros-cons li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fbt-fs-body); color: var(--fbt-color-text); }
.fbt-pros-cons li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.fbt-pros-cons__col--fbt-pro svg { color: var(--fbt-color-green-600); }
.fbt-pros-cons__col--fbt-con svg { color: var(--fbt-color-red-600); }

.fbt-spec-table { width: 100%; border-collapse: collapse; max-width: 640px; }
.fbt-spec-table tr { border-bottom: 1px solid var(--fbt-color-gray-100); }
.fbt-spec-table tr:last-child { border-bottom: none; }
.fbt-spec-table th, .fbt-spec-table td { text-align: left; padding: var(--fbt-space-3) 0; font-size: var(--fbt-fs-body); }
.fbt-spec-table th { color: var(--fbt-color-text-muted); font-weight: var(--fbt-fw-regular); width: 45%; }
.fbt-spec-table td { color: var(--fbt-color-text); font-weight: var(--fbt-fw-medium); }

@media (max-width: 1024px) {
  .fbt-product-hero { grid-template-columns: 1fr; gap: var(--fbt-space-5); }
  .fbt-product-photo { max-width: 440px; margin-inline: auto; }
  .fbt-pros-cons { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fbt-product-info__title { font-size: var(--fbt-fs-h1); max-width: none; }
  .fbt-product-checklist { grid-template-columns: 1fr; }
  .fbt-product-buybox__ctas .fbt-btn { min-width: 100%; }
  .fbt-tabs__label { padding: var(--fbt-space-3) var(--fbt-space-3); font-size: var(--fbt-fs-small); }
  .fbt-spec-table th, .fbt-spec-table td { font-size: var(--fbt-fs-small); }
}

/* ==========================================================================
   Vergelijking template — winner block, filter chips, brand badges
   ========================================================================== */

.fbt-winner-block {
  background: var(--fbt-color-navy-900);
  color: var(--fbt-color-text-inverse);
  border-radius: var(--fbt-radius-lg);
  padding: var(--fbt-space-5);
  display: flex;
  gap: var(--fbt-space-5);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fbt-winner-block__body { display: flex; flex-direction: column; gap: var(--fbt-space-1); }
.fbt-winner-block__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fbt-fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: #ffd77a; font-weight: var(--fbt-fw-semibold); }
.fbt-winner-block__label svg { width: 14px; height: 14px; }
.fbt-winner-block__product { font-size: var(--fbt-fs-h3); font-weight: var(--fbt-fw-bold); }
.fbt-winner-block__reason { color: rgba(255,255,255,0.72); font-size: var(--fbt-fs-body); max-width: 56ch; }
.fbt-winner-block__cta { display: flex; align-items: center; gap: var(--fbt-space-4); flex-shrink: 0; }
.fbt-winner-block__price { font-size: var(--fbt-fs-h2); font-weight: var(--fbt-fw-bold); }

.fbt-filters { display: flex; gap: var(--fbt-space-2); flex-wrap: wrap; margin-bottom: var(--fbt-space-5); }
.fbt-filters__radio { position: absolute; opacity: 0; pointer-events: none; }
.fbt-filters__chip {
  cursor: pointer; padding: 9px 18px; border-radius: var(--fbt-radius-pill);
  border: 1px solid var(--fbt-color-gray-200); background: var(--fbt-color-white);
  font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); color: var(--fbt-color-text-muted);
  transition: all var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-filters__chip:hover { border-color: var(--fbt-color-blue-600); color: var(--fbt-color-navy-900); }
#fbt-filter-all:checked ~ .fbt-filters label[for="fbt-filter-all"],
#fbt-filter-beginners:checked ~ .fbt-filters label[for="fbt-filter-beginners"],
#fbt-filter-prijs:checked ~ .fbt-filters label[for="fbt-filter-prijs"],
#fbt-filter-smaak:checked ~ .fbt-filters label[for="fbt-filter-smaak"] {
  background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white);
}
/* Row/card visibility by data-tag, default: everything visible.
   .fbt-filter-scope is the shared sibling wrapper around table + cards. */
#fbt-filter-beginners:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="beginners"]) { display: none; }
#fbt-filter-prijs:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="prijs"]) { display: none; }
#fbt-filter-smaak:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="smaak"]) { display: none; }

.fbt-brand-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fbt-fs-micro); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fbt-brand-badge__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fbt-brand-badge__dot--fbt-xxl { background: var(--fbt-color-blue-600); }
.fbt-brand-badge__dot--fbt-bf { background: #e0602c; }
.fbt-brand-badge__dot--fbt-mp { background: #00a99d; }

.fbt-compare-table tr.fbt-compare-table__row--fbt-winner td { background: var(--fbt-color-blue-50); font-weight: var(--fbt-fw-medium); }
.fbt-compare-table__winner-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fbt-fs-micro); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-blue-600); margin-left: 6px; }

@media (max-width: 900px) {
  .fbt-winner-block { flex-direction: column; align-items: flex-start; }
  .fbt-winner-block__cta { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .fbt-filters { gap: var(--fbt-space-1); }
  .fbt-filters__chip { padding: 7px 14px; }
}

/* ==========================================================================
   Artikel template — hero, layout + sticky TOC, callouts
   ========================================================================== */

.fbt-article-hero__media {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--fbt-radius-lg);
  overflow: hidden;
  background: var(--fbt-color-gray-50);
  border: 1px solid var(--fbt-color-gray-100);
  margin-top: var(--fbt-space-5);
}
.fbt-article-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.fbt-article-hero__author { display: flex; align-items: center; gap: 10px; margin-top: var(--fbt-space-4); }
.fbt-article-hero__author-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--fbt-color-navy-900);
  color: var(--fbt-color-white); display: flex; align-items: center; justify-content: center;
  font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); flex-shrink: 0;
}
.fbt-article-hero__author-name { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); }
.fbt-article-hero__author-role { font-size: var(--fbt-fs-micro); color: var(--fbt-color-text-muted); }

.fbt-article-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--fbt-space-7); align-items: start; }
.fbt-article-content { min-width: 0; max-width: 72ch; }
.fbt-article-content h2 { font-size: var(--fbt-fs-h3); margin-top: var(--fbt-space-7); margin-bottom: var(--fbt-space-3); scroll-margin-top: 100px; }
.fbt-article-content h2:first-child { margin-top: 0; }
.fbt-article-content p { font-size: var(--fbt-fs-body-lg); line-height: 1.7; color: var(--fbt-color-text); margin-top: var(--fbt-space-4); }
.fbt-article-content ul { margin-top: var(--fbt-space-4); display: flex; flex-direction: column; gap: 10px; }
.fbt-article-content li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fbt-fs-body-lg); color: var(--fbt-color-text); }
.fbt-article-content li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; color: var(--fbt-color-blue-600); }

.fbt-article-toc {
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-5); box-shadow: var(--fbt-shadow-sm);
}
@media (min-width: 1025px) {
  .fbt-article-toc--fbt-sticky { position: sticky; top: 96px; }
}
.fbt-article-toc__title { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fbt-color-text-muted); margin-bottom: var(--fbt-space-3); }
.fbt-article-toc ol { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: fbt-toc; }
.fbt-article-toc li { counter-increment: fbt-toc; }
.fbt-article-toc ol a { display: flex; gap: 8px; font-size: var(--fbt-fs-small); color: var(--fbt-color-text); line-height: 1.4; }
.fbt-article-toc ol a::before { content: counter(fbt-toc) "."; color: var(--fbt-color-blue-600); font-weight: var(--fbt-fw-semibold); flex-shrink: 0; }
.fbt-article-toc ol a:hover { color: var(--fbt-color-blue-600); }

.fbt-callout {
  border-radius: var(--fbt-radius-md); padding: var(--fbt-space-5);
  background: var(--fbt-color-blue-50); border-left: 4px solid var(--fbt-color-blue-600);
  margin: var(--fbt-space-6) 0;
}
.fbt-callout__title { display: flex; align-items: center; gap: 8px; font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); margin-bottom: 6px; }
.fbt-callout__title svg { width: 18px; height: 18px; color: var(--fbt-color-blue-600); flex-shrink: 0; }
.fbt-callout p { margin-top: 0 !important; font-size: var(--fbt-fs-body) !important; color: var(--fbt-color-text); }

.fbt-related-compare {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fbt-space-4); flex-wrap: wrap;
  background: var(--fbt-color-navy-900); color: var(--fbt-color-text-inverse);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-5); margin-top: var(--fbt-space-7);
}
.fbt-related-compare__title { font-size: var(--fbt-fs-h4); font-weight: var(--fbt-fw-bold); }
.fbt-related-compare__desc { color: rgba(255,255,255,0.72); font-size: var(--fbt-fs-small); margin-top: 4px; }

@media (max-width: 1024px) {
  .fbt-article-layout { grid-template-columns: 1fr; }
  .fbt-article-toc { margin-top: var(--fbt-space-6); }
}
@media (max-width: 640px) {
  .fbt-article-hero__media { aspect-ratio: 16 / 9; }
  .fbt-article-content p, .fbt-article-content li { font-size: var(--fbt-fs-body); }
}

/* ==========================================================================
   Categorie template — stats row, promo card, doelfilters
   ========================================================================== */

.fbt-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .fbt-grid-2 { grid-template-columns: 1fr; } }

.fbt-category-stats { display: flex; gap: var(--fbt-space-6); margin-top: var(--fbt-space-5); flex-wrap: wrap; }
.fbt-category-stats__item { display: flex; flex-direction: column; gap: 2px; }
.fbt-category-stats__value { font-size: var(--fbt-fs-h3); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-navy-900); }
.fbt-category-stats__label { font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); }

.fbt-compare-promo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fbt-space-5); flex-wrap: wrap;
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-5); box-shadow: var(--fbt-shadow-sm);
}
.fbt-compare-promo__body { display: flex; flex-direction: column; gap: 4px; max-width: 56ch; }
.fbt-compare-promo__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fbt-fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fbt-color-blue-600); font-weight: var(--fbt-fw-semibold); }
.fbt-compare-promo__label svg { width: 14px; height: 14px; }
.fbt-compare-promo__title { font-size: var(--fbt-fs-h3); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-navy-900); }
.fbt-compare-promo__desc { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-body); }

@media (max-width: 640px) {
  .fbt-category-stats { gap: var(--fbt-space-4); }
  .fbt-compare-promo { flex-direction: column; align-items: flex-start; }
}

/* Filter bugfix: .fbt-filterable-card was missing from the original filter
   rules (Vergelijking template) — the product-card grid didn't filter on
   /eiwitpoeder-vergelijken/. Fixed inline here rather than as a bolt-on
   patch, plus the categorie template's own doelfilters. */
#fbt-filter-beginners:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="beginners"]) { display: none; }
#fbt-filter-prijs:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="prijs"]) { display: none; }
#fbt-filter-smaak:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="smaak"]) { display: none; }

#fbt-cat-filter-eiwitpoeder:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="eiwitpoeder"]),
#fbt-cat-filter-eiwitpoeder:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="eiwitpoeder"]) { display: none; }
#fbt-cat-filter-creatine:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="creatine"]),
#fbt-cat-filter-creatine:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="creatine"]) { display: none; }
#fbt-cat-filter-overzicht:checked ~ .fbt-filter-scope .fbt-filterable:not([data-tag~="overzicht"]),
#fbt-cat-filter-overzicht:checked ~ .fbt-filter-scope .fbt-filterable-card:not([data-tag~="overzicht"]) { display: none; }

/* ==========================================================================
   Calculator template
   ========================================================================== */

.fbt-calc-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--fbt-space-7); align-items: start; }

.fbt-calc-form {
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-6); box-shadow: var(--fbt-shadow-sm);
}
.fbt-calc-field { margin-bottom: var(--fbt-space-5); }
.fbt-calc-field:last-of-type { margin-bottom: var(--fbt-space-6); }
.fbt-calc-field label.fbt-calc-label {
  display: block; font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold);
  color: var(--fbt-color-navy-900); margin-bottom: 8px;
}
.fbt-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fbt-space-4); }

.fbt-calc-toggle { display: grid; gap: var(--fbt-space-2); }
.fbt-calc-toggle--fbt-2 { grid-template-columns: 1fr 1fr; }
.fbt-calc-toggle--fbt-3 { grid-template-columns: repeat(3, 1fr); }
.fbt-calc-toggle__radio { position: absolute; opacity: 0; pointer-events: none; }
.fbt-calc-toggle__pill {
  cursor: pointer; text-align: center; padding: 10px 12px; border-radius: var(--fbt-radius-sm);
  border: 1.5px solid var(--fbt-color-gray-200); background: var(--fbt-color-white);
  font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); color: var(--fbt-color-text-muted);
  transition: all var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-calc-toggle__pill:hover { border-color: var(--fbt-color-blue-600); color: var(--fbt-color-navy-900); }
#fbt-calc-gender-man:checked ~ .fbt-calc-toggle label[for="fbt-calc-gender-man"],
#fbt-calc-gender-vrouw:checked ~ .fbt-calc-toggle label[for="fbt-calc-gender-vrouw"],
#fbt-calc-goal-afvallen:checked ~ .fbt-calc-toggle label[for="fbt-calc-goal-afvallen"],
#fbt-calc-goal-onderhoud:checked ~ .fbt-calc-toggle label[for="fbt-calc-goal-onderhoud"],
#fbt-calc-goal-spieropbouw:checked ~ .fbt-calc-toggle label[for="fbt-calc-goal-spieropbouw"] {
  background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white);
}

.fbt-calc-result {
  background: var(--fbt-color-navy-900); color: var(--fbt-color-text-inverse);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-6); box-shadow: var(--fbt-shadow-sm);
}
@media (min-width: 1025px) {
  .fbt-calc-result--fbt-sticky { position: sticky; top: 96px; }
}
.fbt-calc-result__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fbt-fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: #ffd77a; font-weight: var(--fbt-fw-semibold); }
.fbt-calc-result__label svg { width: 14px; height: 14px; }
.fbt-calc-result__kcal { font-size: 40px; font-weight: var(--fbt-fw-bold); line-height: 1.1; margin-top: 10px; }
.fbt-calc-result__kcal span { font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-medium); color: rgba(255,255,255,0.65); }
.fbt-calc-result__sub { color: rgba(255,255,255,0.72); font-size: var(--fbt-fs-small); margin-top: 4px; }
.fbt-calc-result__divider { height: 1px; background: rgba(255,255,255,0.15); margin: var(--fbt-space-5) 0; }
.fbt-calc-result__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--fbt-space-3); }
.fbt-calc-result__row-label { font-size: var(--fbt-fs-small); color: rgba(255,255,255,0.72); }
.fbt-calc-result__row-value { font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-semibold); }
.fbt-calc-result__note { font-size: var(--fbt-fs-micro); color: rgba(255,255,255,0.55); margin-top: var(--fbt-space-5); line-height: 1.5; }
.fbt-calc-result__cta { display: block; margin-top: var(--fbt-space-5); text-align: center; }
.fbt-calc-result--fbt-empty .fbt-calc-result__kcal,
.fbt-calc-result--fbt-empty .fbt-calc-result__sub,
.fbt-calc-result--fbt-empty .fbt-calc-result__divider,
.fbt-calc-result--fbt-empty .fbt-calc-result__row,
.fbt-calc-result--fbt-empty .fbt-calc-result__cta { display: none; }
.fbt-calc-result__empty-msg { display: none; color: rgba(255,255,255,0.75); font-size: var(--fbt-fs-body); margin-top: 10px; line-height: 1.6; }
.fbt-calc-result--fbt-empty .fbt-calc-result__empty-msg { display: block; }

/* Bugfix: .fbt-scope a { color:inherit } (specificity 0,1,1) beat
   .fbt-btn-secondary (0,1,0), making secondary buttons on dark cards (like
   this result card) invisible (white text on white). Latent sitewide,
   first surfaced here. A compound selector (0,2,0) always wins, without
   touching the existing rule. */
.fbt-btn.fbt-btn-primary { color: var(--fbt-color-white); }
.fbt-btn.fbt-btn-secondary { color: var(--fbt-color-navy-900); }
.fbt-btn.fbt-btn-ghost { color: var(--fbt-color-blue-600); }

@media (max-width: 1024px) {
  .fbt-calc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fbt-calc-row { grid-template-columns: 1fr 1fr; gap: var(--fbt-space-3); }
  .fbt-calc-result { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 8px 24px rgba(10,20,40,0.35); }
  .fbt-calc-result__kcal { font-size: 32px; }
}

/* ==========================================================================
   Zoekresultaten template
   ========================================================================== */

.fbt-search-bar { display: flex; gap: var(--fbt-space-3); margin-top: var(--fbt-space-5); max-width: 560px; }
.fbt-search-bar .fbt-input { flex: 1; }
.fbt-search-count { margin-top: var(--fbt-space-3); color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small); }
.fbt-search-count strong { color: var(--fbt-color-navy-900); }

.fbt-search-tabs { display: flex; gap: var(--fbt-space-2); flex-wrap: wrap; margin-bottom: var(--fbt-space-5); }
.fbt-search-tab {
  cursor: pointer; padding: 9px 18px; border-radius: var(--fbt-radius-pill);
  border: 1px solid var(--fbt-color-gray-200); background: var(--fbt-color-white);
  font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); color: var(--fbt-color-text-muted);
  transition: all var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-search-tab:hover { border-color: var(--fbt-color-blue-600); color: var(--fbt-color-navy-900); }
.fbt-search-tab--fbt-active { background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white); }

.fbt-search-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fbt-space-4); }
.fbt-search-card {
  display: block; background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-left: 4px solid var(--fbt-color-gray-200); border-radius: var(--fbt-radius-md);
  padding: var(--fbt-space-4) var(--fbt-space-5); text-decoration: none; color: inherit;
  box-shadow: var(--fbt-shadow-sm); transition: transform var(--fbt-dur-fast) var(--fbt-ease), box-shadow var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-search-card:hover { transform: translateY(-2px); box-shadow: var(--fbt-shadow-md); }
.fbt-search-card--fbt-product { border-left-color: var(--fbt-color-blue-600); }
.fbt-search-card--fbt-artikel { border-left-color: #16a34a; }
.fbt-search-card--fbt-vergelijking { border-left-color: #ea580c; }
.fbt-search-card--fbt-pagina { border-left-color: var(--fbt-color-gray-200); }
.fbt-search-card__badge { display: block; font-size: var(--fbt-fs-micro); font-weight: var(--fbt-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fbt-color-text-muted); margin-bottom: 6px; }
.fbt-search-card__title { display: block; font-size: var(--fbt-fs-body); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); line-height: 1.4; }

.fbt-search-state { text-align: center; padding: var(--fbt-space-8) var(--fbt-space-5); color: var(--fbt-color-text-muted); }
.fbt-search-state svg { width: 40px; height: 40px; color: var(--fbt-color-gray-200); margin-bottom: var(--fbt-space-4); }
.fbt-search-state__title { font-size: var(--fbt-fs-h4); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); margin-bottom: 6px; }
.fbt-search-state__hint { font-size: var(--fbt-fs-body); max-width: 48ch; margin: 0 auto; }

[data-fbt-search-state="prompt"] .fbt-search-empty,
[data-fbt-search-state="prompt"] .fbt-search-grid,
[data-fbt-search-state="prompt"] .fbt-search-tabs,
[data-fbt-search-state="prompt"] .fbt-search-count { display: none; }
[data-fbt-search-state="empty"] .fbt-search-prompt,
[data-fbt-search-state="empty"] .fbt-search-grid,
[data-fbt-search-state="empty"] .fbt-search-tabs { display: none; }
[data-fbt-search-state="results"] .fbt-search-prompt,
[data-fbt-search-state="results"] .fbt-search-empty { display: none; }
.fbt-search-prompt, .fbt-search-empty { display: block; }

@media (max-width: 900px) {
  .fbt-search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fbt-search-grid { grid-template-columns: 1fr; }
  .fbt-search-bar { flex-direction: column; }
}

/* ==========================================================================
   Artikel template extension — subheadings, images, tables and links inside
   real article content
   ========================================================================== */
.fbt-article-content h3 { font-size: var(--fbt-fs-h4); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-navy-900); margin-top: var(--fbt-space-6); margin-bottom: var(--fbt-space-2); scroll-margin-top: 100px; }
.fbt-article-content h4 { font-size: var(--fbt-fs-body-lg); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); margin-top: var(--fbt-space-5); margin-bottom: var(--fbt-space-2); }
.fbt-article-content img { width: 100%; height: auto; border-radius: var(--fbt-radius-md); margin-top: var(--fbt-space-4); display: block; }
.fbt-article-content figure { margin: var(--fbt-space-4) 0 0 0; }
.fbt-article-content figcaption { font-size: var(--fbt-fs-micro); color: var(--fbt-color-text-muted); margin-top: 6px; text-align: center; }
.fbt-article-content a:not(.fbt-btn):not(.fbt-btn-icon) { color: var(--fbt-color-blue-600); text-decoration: underline; text-underline-offset: 2px; }
.fbt-article-content table.fbt-compare-table { margin-top: var(--fbt-space-4); }
.fbt-article-content ol:not(.fbt-article-toc ol):not(.fbt-toc-inline__list) { margin-top: var(--fbt-space-4); padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.fbt-article-content ol:not(.fbt-article-toc ol):not(.fbt-toc-inline__list) li { font-size: var(--fbt-fs-body-lg); color: var(--fbt-color-text); }
.fbt-article-content strong { color: var(--fbt-color-navy-900); font-weight: var(--fbt-fw-semibold); }

/* ==========================================================================
   Contact template — restyles the existing Contact Form 7 output purely via
   CSS. CF7 markup/logic itself is untouched, so submission/validation
   keeps working.
   ========================================================================== */

.fbt-contact-form-card {
  max-width: 640px; margin: 0 auto;
  background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-6); box-shadow: var(--fbt-shadow-sm);
}
.fbt-contact-form-card__intro { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-body); margin-bottom: var(--fbt-space-5); }
.fbt-contact-form-card__note {
  color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small);
  margin-top: var(--fbt-space-5); padding-top: var(--fbt-space-5); border-top: 1px solid var(--fbt-color-gray-100);
}
.fbt-contact-form-card .wpcf7-form p { margin-bottom: var(--fbt-space-5); }
.fbt-contact-form-card .wpcf7-form p:last-of-type { margin-bottom: 0; }
.fbt-contact-form-card .wpcf7-form label {
  display: block; font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold);
  color: var(--fbt-color-navy-900); margin-bottom: 8px;
}
.fbt-contact-form-card .wpcf7-form-control-wrap { display: block; }
.fbt-contact-form-card .wpcf7-form-control {
  width: 100%; font-family: var(--fbt-font-body, inherit); font-size: 15px; color: var(--fbt-color-text);
  background: var(--fbt-color-white); border: 1.5px solid var(--fbt-color-gray-200);
  border-radius: var(--fbt-radius-sm); padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fbt-contact-form-card textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.fbt-contact-form-card .wpcf7-form-control:focus {
  outline: none; border-color: var(--fbt-color-blue-600); box-shadow: 0 0 0 3px rgba(29,95,224,0.14);
}
.fbt-contact-form-card input.wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fbt-space-2);
  font-family: var(--fbt-font-base); font-weight: var(--fbt-fw-semibold); font-size: var(--fbt-fs-body);
  padding: 14px 26px; border-radius: var(--fbt-radius-pill); border: 2px solid transparent; cursor: pointer;
  background: var(--fbt-color-blue-600); color: var(--fbt-color-white); box-shadow: 0 1px 2px rgba(29,95,224,0.25);
  transition: background var(--fbt-dur-fast) var(--fbt-ease), box-shadow var(--fbt-dur-fast) var(--fbt-ease);
}
.fbt-contact-form-card input.wpcf7-submit:hover { background: var(--fbt-color-blue-700); box-shadow: 0 10px 24px rgba(29,95,224,0.28); }
.fbt-contact-form-card .wpcf7-spinner { margin-left: 10px; }
.fbt-contact-form-card .wpcf7-response-output {
  margin-top: var(--fbt-space-4); padding: var(--fbt-space-4); border-radius: var(--fbt-radius-md);
  border: 1.5px solid var(--fbt-color-gray-200); font-size: var(--fbt-fs-small); color: var(--fbt-color-text);
}
.fbt-contact-form-card form.sent .wpcf7-response-output { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.fbt-contact-form-card form.invalid .wpcf7-response-output,
.fbt-contact-form-card form.failed .wpcf7-response-output,
.fbt-contact-form-card form.spam .wpcf7-response-output { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.fbt-contact-form-card .wpcf7-not-valid-tip { color: #dc2626; font-size: var(--fbt-fs-micro); margin-top: 4px; display: block; }
@media (max-width: 640px) {
  .fbt-contact-form-card { padding: var(--fbt-space-5); }
}

/* ==========================================================================
   Over ons template — reuses .fbt-article-content prose style and
   .fbt-btn/.fbt-page-header/.fbt-eyebrow components
   ========================================================================== */
.fbt-about-content { max-width: 72ch; margin: 0 auto; }
.fbt-about-cta { text-align: center; margin-top: var(--fbt-space-7); }

/* ==========================================================================
   Sidebar widgets — reusable across templates (popular articles,
   categories, recommended product, newsletter)
   ========================================================================== */
.fbt-callout ul { display: block; padding-left: 20px; margin: 10px 0 0; list-style: disc; }
.fbt-callout li { display: list-item; align-items: initial; gap: 0; font-size: var(--fbt-fs-body); }

.fbt-sidebar-widget { background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-200); border-radius: var(--fbt-radius-lg); padding: 24px; margin-bottom: 20px; }
.fbt-sidebar-widget__title { font-size: 1rem; font-weight: 700; color: var(--fbt-color-navy-900); margin: 0 0 16px; }

.fbt-sidebar-article-list { display: flex; flex-direction: column; gap: 16px; }
.fbt-sidebar-article { display: flex; gap: 12px; text-decoration: none; }
.fbt-sidebar-article__thumb { width: 56px; height: 56px; border-radius: var(--fbt-radius-sm); background: var(--fbt-color-gray-100); flex-shrink: 0; overflow: hidden; }
.fbt-sidebar-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fbt-sidebar-article__title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--fbt-color-navy-900); line-height: 1.35; margin: 0 0 4px; }
.fbt-sidebar-article:hover .fbt-sidebar-article__title { color: var(--fbt-color-blue-600); }
.fbt-sidebar-article__date { display: block; font-size: 0.75rem; color: var(--fbt-color-text-muted); }

.fbt-sidebar-cats { list-style: none; margin: 0; padding: 0; }
.fbt-sidebar-cats li { border-top: 1px solid var(--fbt-color-gray-100); }
.fbt-sidebar-cats li:first-child { border-top: none; }
.fbt-sidebar-cats a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--fbt-color-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.fbt-sidebar-cats a:hover { color: var(--fbt-color-blue-600); }
.fbt-sidebar-cats svg { color: var(--fbt-color-gray-400); flex-shrink: 0; width: 16px; height: 16px; }

.fbt-sidebar-product__image { width: 100%; aspect-ratio: 1; border-radius: var(--fbt-radius-md); background: var(--fbt-color-gray-50); overflow: hidden; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.fbt-sidebar-product__image img { width: 100%; height: 100%; object-fit: contain; }
.fbt-sidebar-product__name { font-weight: 700; color: var(--fbt-color-navy-900); margin: 0 0 6px; font-size: 0.95rem; }
.fbt-sidebar-product__rating { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--fbt-color-text-muted); margin: 0 0 14px; }
.fbt-sidebar-product__rating svg { color: var(--fbt-color-star); width: 14px; height: 14px; }
.fbt-sidebar-product__rating strong { color: var(--fbt-color-text); }
.fbt-sidebar-product__price { font-weight: 700; font-size: 1.1rem; color: var(--fbt-color-navy-900); margin: 0 0 14px; }

.fbt-sidebar-newsletter-text { font-size: 0.85rem; color: var(--fbt-color-text-muted); margin: 0 0 14px; line-height: 1.5; }
.fbt-sidebar-newsletter-form input { width: 100%; margin-bottom: 10px; }
.fbt-btn--block { width: 100%; text-align: center; }

/* ==========================================================================
   Inline TOC + author box + sidebar — reusable article-template components
   ========================================================================== */
.fbt-toc-inline { border: 1px solid var(--fbt-color-gray-200); border-radius: var(--fbt-radius-lg); padding: 24px 28px; margin: 32px 0; background: var(--fbt-color-white); }
.fbt-toc-inline__checkbox { display: none !important; }
.fbt-toc-inline__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fbt-toc-inline__title { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fbt-color-navy-900); }
.fbt-toc-inline__toggle { font-size: 0.85rem; color: var(--fbt-color-blue-600); cursor: pointer; font-weight: 600; }
.fbt-toc-inline__toggle:hover { text-decoration: underline; }
.fbt-toc-inline__toggle-hide { display: none; }
.fbt-toc-inline__checkbox:checked ~ .fbt-toc-inline__header .fbt-toc-inline__toggle-show { display: none; }
.fbt-toc-inline__checkbox:checked ~ .fbt-toc-inline__header .fbt-toc-inline__toggle-hide { display: inline; }
.fbt-toc-inline__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 12px; counter-reset: fbt-toc-inline; }
.fbt-toc-inline__list li { counter-increment: fbt-toc-inline; }
.fbt-toc-inline__list li a { display: flex; gap: 8px; color: var(--fbt-color-text); text-decoration: none; font-size: 0.925rem; line-height: 1.4; }
.fbt-toc-inline__list li a::before { content: counter(fbt-toc-inline) "."; color: var(--fbt-color-blue-600); font-weight: 600; flex-shrink: 0; }
.fbt-toc-inline__list li a:hover { color: var(--fbt-color-blue-600); }
.fbt-toc-inline__extra { display: none !important; }
.fbt-toc-inline__checkbox:checked ~ .fbt-toc-inline__list .fbt-toc-inline__extra { display: block !important; }
@media (max-width: 680px) {
  .fbt-toc-inline__list { grid-template-columns: 1fr; }
}

.fbt-author-box { display: flex; gap: 20px; align-items: flex-start; background: var(--fbt-color-gray-50); border: 1px solid var(--fbt-color-gray-200); border-radius: var(--fbt-radius-lg); padding: 28px; margin: 40px 0; }
.fbt-author-box__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--fbt-color-navy-900); color: var(--fbt-color-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; flex-shrink: 0; }
.fbt-author-box__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--fbt-color-text-muted); margin-bottom: 4px; }
.fbt-author-box__name { font-weight: 700; font-size: 1.05rem; color: var(--fbt-color-navy-900); margin-bottom: 8px; }
.fbt-author-box__bio { color: var(--fbt-color-text-muted); margin: 0; line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 480px) {
  .fbt-author-box { flex-direction: column; }
}

.fbt-sidebar { display: flex; flex-direction: column; }
.fbt-sidebar--sticky { position: sticky; top: 24px; }

/* Topbar trust bar (header redesign) */
.fbt-topbar-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fbt-space-4);list-style:none;margin:0;padding:0;}
.fbt-topbar-trust__item{display:flex;align-items:center;gap:var(--fbt-space-1);font-size:var(--fbt-fs-micro);font-weight:var(--fbt-fw-medium);color:var(--fbt-color-navy-900);white-space:nowrap;}
.fbt-topbar-trust__item::before{content:"\2713";color:var(--fbt-color-success);font-weight:700;}
@media (max-width:768px){.fbt-topbar-trust{gap:var(--fbt-space-3);}.fbt-topbar-trust__item{font-size:11px;}}
@media (max-width:549px){.fbt-topbar-trust{gap:var(--fbt-space-2) var(--fbt-space-3);}}

/* No dot-prefix on the category badge in the article page-header */
.fbt-page-header .fbt-eyebrow::before { display: none; }

/* Kennisbank category cards (reuses .fbt-card + .fbt-category-icon) */
a.fbt-card--category { text-decoration: none; color: inherit; cursor: pointer; }
a.fbt-card--category:hover .fbt-category-icon__circle { background: var(--fbt-color-blue-50); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-blue-600); }
a.fbt-card--category:hover .fbt-card__title { color: var(--fbt-color-blue-600); }

/* Categorie archief (custom layout on top of the native Flatsome loop) */
.fbt-archive-main { min-width: 0; }
.fbt-sort-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fbt-space-3); margin-bottom: var(--fbt-space-5); }
.fbt-sort-row__label { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small); }
.fbt-sort-row__links { display: flex; gap: var(--fbt-space-2); flex-wrap: wrap; }
.fbt-btn-secondary--fbt-active { background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white); }
.fbt-archive-grid { margin-bottom: var(--fbt-space-6); }
.fbt-pagination { display: flex; justify-content: center; margin-top: var(--fbt-space-6); }
.fbt-pagination ul { display: flex; list-style: none; gap: var(--fbt-space-2); margin: 0; padding: 0; flex-wrap: wrap; }
.fbt-pagination li { display: flex; }
.fbt-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--fbt-radius-pill); border: 1px solid var(--fbt-color-gray-200); background: var(--fbt-color-white); color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-medium); text-decoration: none; transition: all var(--fbt-dur-fast) var(--fbt-ease); }
.fbt-pagination .page-numbers:hover { border-color: var(--fbt-color-blue-600); color: var(--fbt-color-navy-900); }
.fbt-pagination .page-numbers.current { background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white); }
.fbt-pagination .page-numbers.dots { border: none; background: transparent; }
@media (max-width: 900px) { .fbt-sort-row { flex-direction: column; align-items: flex-start; } }

/* Comparison tables scrollable on mobile (instead of the whole page
   scrolling horizontally) */
.fbt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--fbt-space-5); border-radius: var(--fbt-radius-md); }
.fbt-table-scroll .fbt-compare-table { margin-bottom: 0; }
@media (max-width: 700px) {
  .fbt-table-scroll .fbt-compare-table { min-width: 560px; }
  .fbt-table-scroll { box-shadow: inset -12px 0 8px -8px rgba(0,0,0,0.08); }
}


/* ==========================================================================
Artikeltemplate v2 (Premium Article Redesign, Sprint 10) — icon-cards,
callout variants, sidebar-widget polish, Koopgids/Calculator sidebar
cards, wider sticky sidebar, bottom-of-article CTA. Purely additive: no
existing selector above is modified, so every already-published fbt-
page/post keeps rendering exactly as before this addition.
========================================================================== */

/* Wider sidebar column (340px per brief) with more breathing room */
@media (min-width: 1025px) {
.fbt-article-layout { grid-template-columns: minmax(0,1fr) 340px; gap: var(--fbt-space-8); }
}

/* Subtle shadow on every sidebar card (uniform premium finish) */
.fbt-sidebar-widget { box-shadow: var(--fbt-shadow-sm); }

/* Hero image height cap (brief: max ~500px tall) */
.fbt-article-hero__media { max-height: 500px; }

/* Icon-card row — max 4 across, subtle shadow, rounded corners */
.fbt-icon-card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fbt-space-4); margin: var(--fbt-space-6) 0; }
.fbt-icon-card { background: var(--fbt-color-white); border: 1px solid var(--fbt-color-gray-100); border-radius: var(--fbt-radius-md); box-shadow: var(--fbt-shadow-sm); padding: var(--fbt-space-5) var(--fbt-space-4); text-align: center; }
.fbt-icon-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--fbt-color-blue-50); color: var(--fbt-color-blue-600); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--fbt-space-3); }
.fbt-icon-card__icon svg { width: 20px; height: 20px; }
.fbt-icon-card__label { font-size: var(--fbt-fs-small); font-weight: var(--fbt-fw-semibold); color: var(--fbt-color-navy-900); line-height: 1.3; }
@media (max-width: 900px) { .fbt-icon-card-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fbt-icon-card-row { grid-template-columns: 1fr; } }

/* Callout variants — tip / warning / expert / summary (Gen2-blue palette) */
.fbt-callout--fbt-tip { background: var(--fbt-color-green-50); border-left-color: var(--fbt-color-green-600); }
.fbt-callout--fbt-tip .fbt-callout__title { color: var(--fbt-color-green-600); }
.fbt-callout--fbt-tip .fbt-callout__title svg { color: var(--fbt-color-green-600); }
.fbt-callout--fbt-warning { background: var(--fbt-color-red-50); border-left-color: var(--fbt-color-red-600); }
.fbt-callout--fbt-warning .fbt-callout__title { color: var(--fbt-color-red-600); }
.fbt-callout--fbt-warning .fbt-callout__title svg { color: var(--fbt-color-red-600); }
.fbt-callout--fbt-expert { background: var(--fbt-color-navy-900); border-left-color: #ffd77a; }
.fbt-callout--fbt-expert .fbt-callout__title { color: #ffd77a; }
.fbt-callout--fbt-expert .fbt-callout__title svg { color: #ffd77a; }
.fbt-callout--fbt-expert p { color: rgba(255,255,255,0.85) !important; }
.fbt-callout--fbt-summary { background: var(--fbt-color-blue-50); border-left-color: var(--fbt-color-blue-600); }
.fbt-callout--fbt-summary ul { margin-top: var(--fbt-space-2); }

/* Koopgids / Calculator sidebar-widget inner layout (reuses the existing
.fbt-sidebar-widget card shell — just adds an icon + helper-text style) */
.fbt-sidebar-widget__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--fbt-color-blue-50); color: var(--fbt-color-blue-600); display: flex; align-items: center; justify-content: center; margin-bottom: var(--fbt-space-3); }
.fbt-sidebar-widget__icon svg { width: 20px; height: 20px; }
.fbt-sidebar-widget__text { font-size: var(--fbt-fs-small); color: var(--fbt-color-text-muted); margin: 0 0 var(--fbt-space-4); line-height: 1.5; }

/* Sidebar ToC widget variant — same numbered-list look as .fbt-article-toc,
wrapped in the uniform .fbt-sidebar-widget card so all 5 sidebar cards
share one style (brief: "dezelfde kaart-stijl overal") */
.fbt-sidebar-widget--fbt-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: fbt-side-toc; }
.fbt-sidebar-widget--fbt-toc li { counter-increment: fbt-side-toc; }
.fbt-sidebar-widget--fbt-toc a { display: flex; gap: 8px; font-size: var(--fbt-fs-small); color: var(--fbt-color-text); line-height: 1.4; text-decoration: none; }
.fbt-sidebar-widget--fbt-toc a::before { content: counter(fbt-side-toc) "."; color: var(--fbt-color-blue-600); font-weight: var(--fbt-fw-semibold); flex-shrink: 0; }
.fbt-sidebar-widget--fbt-toc a:hover { color: var(--fbt-color-blue-600); }

/* Bottom-of-article CTA row (e.g. link to Productkeuze) — lighter,
card-style companion to the navy .fbt-related-compare block */
.fbt-article-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--fbt-space-4); flex-wrap: wrap; background: var(--fbt-color-blue-50); border-radius: var(--fbt-radius-lg); padding: var(--fbt-space-5); margin: var(--fbt-space-7) 0; }
.fbt-article-bottom-cta__title { font-size: var(--fbt-fs-h4); font-weight: var(--fbt-fw-bold); color: var(--fbt-color-navy-900); }
.fbt-article-bottom-cta__desc { color: var(--fbt-color-text-muted); font-size: var(--fbt-fs-small); margin-top: 4px; }
@media (max-width: 640px) { .fbt-article-bottom-cta { flex-direction: column; align-items: flex-start; } }


/* ==========================================================================
Artikeltemplate v3 (Sprint 11 — Mobiele verfijningen, pilotpagina feedback)
Alleen mobiel/gestapelde layout (<=1024px, zelfde breakpoint als .fbt-article-layout
stacking hierboven): Inhoudsopgave verplaatst naar boven in de contentkolom
(hergebruikt bestaande .fbt-article-toc component), icon-cards, expertadvies,
samenvatting en de onderste product-CTA worden op mobiel verborgen.
========================================================================== */

/* Mobiele inline inhoudsopgave: verborgen op desktop, zichtbaar op mobiel/tablet.
Hergebruikt de bestaande .fbt-article-toc kaartstijl (zie hierboven). */
.fbt-toc-mobile-only { display: none; }
@media (max-width: 1024px) {
  .fbt-toc-mobile-only { display: block; margin-top: var(--fbt-space-5); }
  /* De sidebar-ToC-widget verbergen op mobiel: die staat nu onderaan de pagina
  en zou dubbelop zijn met de nieuwe inline versie bovenaan. */
  .fbt-sidebar .fbt-sidebar-widget--fbt-toc { display: none; }
}

/* Secties die op mobiel worden verborgen (blijven gewoon zichtbaar op desktop) */
@media (max-width: 1024px) {
  .fbt-hide-mobile { display: none !important; }
}


/* Sprint 12 — Mobiele verfijningen ronde 2 (pilotpagina feedback):
"Twijfel je nog?"-kaart verbergen op mobiel. */

/* Nieuwsbrief-tekst leesbaar maken op alle breedtes (mobiel + desktop) —
overschrijft de sitebrede legacy-regel ".prose p, article p { color:#374151 !important }"
uit base.css die de bedoelde witte kleur op de donkerblauwe achtergrond blokkeerde. */
.fbt-newsletter-desc { color: #fff !important; }


/* ==========================================================================
Sprint 13 — "Populaire keuzes" (affiliate productkaarten) hoger op de pagina
Verplaatst vanuit de losse full-width sectie onderaan naar een kaart middenin
de artikelkolom, direct na de intro/icon-cards en vóór de eerste H2. Zelfde
kaartjes/grid als voorheen, nu in een afgebakend kader zodat het als een
duidelijk "aanbevolen producten" blok voelt binnen de lopende tekst.
========================================================================== */
.fbt-inline-products {
  background: var(--fbt-color-white);
  border: 1px solid var(--fbt-color-gray-100);
  border-radius: var(--fbt-radius-lg);
  box-shadow: var(--fbt-shadow-sm);
  padding: var(--fbt-space-6);
  margin: var(--fbt-space-6) 0 var(--fbt-space-7);
}
.fbt-inline-products h2 { margin-top: 0; }
.fbt-inline-products__header { margin-bottom: var(--fbt-space-4); }
@media (max-width: 640px) {
  .fbt-inline-products { padding: var(--fbt-space-4); }
}


/* ==========================================================================
Sprint 14 — Calculator direct invulbaar in de sidebar (pilotpagina feedback)
Hergebruikt de bestaande .fbt-calc-* componenten van de losse /calculator/
pagina, met eigen ids (fbt-side-calc-*) zodat er geen conflict ontstaat met
de standalone calculatorpagina zelf.
========================================================================== */
#fbt-side-calc-gender-man:checked ~ .fbt-calc-toggle label[for="fbt-side-calc-gender-man"],
#fbt-side-calc-gender-vrouw:checked ~ .fbt-calc-toggle label[for="fbt-side-calc-gender-vrouw"],
#fbt-side-calc-goal-afvallen:checked ~ .fbt-calc-toggle label[for="fbt-side-calc-goal-afvallen"],
#fbt-side-calc-goal-onderhoud:checked ~ .fbt-calc-toggle label[for="fbt-side-calc-goal-onderhoud"],
#fbt-side-calc-goal-spieropbouw:checked ~ .fbt-calc-toggle label[for="fbt-side-calc-goal-spieropbouw"] {
  background: var(--fbt-color-blue-600); border-color: var(--fbt-color-blue-600); color: var(--fbt-color-white);
}
.fbt-sidebar-widget .fbt-calc-result { margin-top: var(--fbt-space-4); padding: var(--fbt-space-5); }
.fbt-sidebar-widget .fbt-calc-field:last-of-type { margin-bottom: var(--fbt-space-4); }
.fbt-sidebar-widget .fbt-calc-result__kcal { font-size: 30px; }


/* ==========================================================================
Sprint 15 — Knop(pen) in "Jouw resultaat" (.fbt-calc-result) overal blauw met
witte tekst, i.p.v. de secundaire (lichte) knopstijl — dit geldt voor elke
knop binnen dit component, nu en in de toekomst (bijv. .fbt-calc-result__cta
op de losse /calculator/ pagina).
========================================================================== */
.fbt-calc-result .fbt-btn {
  background: var(--fbt-color-blue-600);
  border-color: var(--fbt-color-blue-600);
  color: var(--fbt-color-white) !important;
}
.fbt-calc-result .fbt-btn:hover {
  background: var(--fbt-color-blue-700);
  border-color: var(--fbt-color-blue-700);
}


/* Sprint 16 — Sidebar calculator verfijningen (knop, toggle, leesbaarheid) */
.fbt-calc-result__empty-msg {
  color: rgba(255,255,255,0.75) !important;
}
.fbt-calc-toggle--fbt-3 .fbt-calc-toggle__pill {
  padding: 10px 8px;
  font-size: 13px;
}
.fbt-sidebar-widget #fbt-side-calc-submit {
  padding: 12px 20px;
  font-size: 14.5px;
}


/* Sprint 18 — Categorie-archief template v2, design/UX-polishronde
   (verticale spacing, kaartconsistentie met artikeltemplate, afbeelding-
   fallback, badge/typografie-check, hover/focus-consistentie, balans
   interne-linkblokken). Vervangt Sprint 17 in-place. */

.fbt-page-header__lead--fbt-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fbt-usp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fbt-space-5);
  margin-top: var(--fbt-space-6);
  margin-bottom: var(--fbt-space-6);
}
.fbt-usp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--fbt-space-3);
  font-size: var(--fbt-fs-small);
  color: var(--fbt-color-text-muted);
}
.fbt-usp-item strong {
  display: block;
  color: var(--fbt-color-text);
  font-size: var(--fbt-fs-body);
  margin-bottom: 2px;
}
.fbt-usp-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fbt-color-blue-50, #eef4ff);
  color: var(--fbt-color-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fbt-usp-item__icon svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 900px) {
  .fbt-usp-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fbt-usp-row { grid-template-columns: 1fr; }
}

.fbt-section--fbt-tight { padding-top: 0; }

.fbt-section__heading {
  font-size: var(--fbt-fs-h3);
  color: var(--fbt-color-navy-900, var(--fbt-secondary));
  margin: 0 0 var(--fbt-space-5);
}

.fbt-related-card--featured .fbt-related-card__excerpt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fbt-color-text-muted);
  margin-top: var(--fbt-space-2);
}
.fbt-related-card--featured .fbt-related-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--fbt-color-text-muted);
  margin-top: var(--fbt-space-3);
}
.fbt-related-card--featured .fbt-related-card__meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fbt-related-card--featured .fbt-related-card__meta svg {
  color: var(--fbt-color-blue-600);
  flex-shrink: 0;
}

/* Consistent fallback for cards whose post has no featured image — reuses
   the site's existing .fbt-dsx-ph diagonal-stripe placeholder utility so a
   missing thumbnail never leaves a blank gap in the grid row. */
.fbt-related-card__thumb-ph {
  height: 160px;
}

.fbt-internal-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fbt-space-4);
  margin-top: var(--fbt-space-7);
}
.fbt-internal-link-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--fbt-space-4);
  border: 1px solid var(--fbt-border);
  border-radius: var(--fbt-radius-md);
  background: var(--fbt-color-white);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  /* Fixed-ish width instead of grid auto-fit stretch: 1-3 cards read as an
     intentional row instead of stretching to fill the whole content column
     when a sparse category has few internal-link targets available. */
  flex: 0 1 260px;
}
.fbt-internal-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fbt-shadow-card);
}
.fbt-internal-link-card:focus-visible,
.fbt-sidebar-guide-card:focus-visible {
  outline: 2px solid var(--fbt-color-blue-600);
  outline-offset: 2px;
}
.fbt-internal-link-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fbt-primary);
}
.fbt-internal-link-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fbt-secondary);
  padding-right: 20px;
}
.fbt-internal-link-card svg {
  position: absolute;
  right: var(--fbt-space-4);
  bottom: var(--fbt-space-4);
  width: 16px;
  height: 16px;
  color: var(--fbt-color-text-muted);
}

.fbt-products-section { margin-top: var(--fbt-space-7); }
.fbt-product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fbt-space-5);
}
@media (max-width: 900px) {
  .fbt-product-row { grid-template-columns: 1fr; }
}
.fbt-product-mini-card {
  border: 1px solid var(--fbt-border);
  border-radius: var(--fbt-radius-md);
  padding: var(--fbt-space-4);
  background: var(--fbt-color-white);
  text-align: center;
}
.fbt-product-mini-card__image {
  width: 70%;
  max-width: 110px;
  aspect-ratio: 1;
  margin: 0 auto var(--fbt-space-3);
  background: var(--fbt-color-gray-50);
  border-radius: var(--fbt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fbt-product-mini-card__image img { width: 100%; height: 100%; object-fit: contain; }
.fbt-product-mini-card__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fbt-color-navy-900, var(--fbt-secondary));
  margin-bottom: 4px;
}
.fbt-product-mini-card__price {
  font-weight: 700;
  margin-bottom: var(--fbt-space-3);
}

.fbt-sidebar-count-list { list-style: none; margin: 0; padding: 0; }
.fbt-sidebar-count-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--fbt-color-gray-100);
  font-size: 14px;
}
.fbt-sidebar-count-list li:last-child { border-bottom: none; }
.fbt-count-pill {
  background: var(--fbt-color-gray-50);
  color: var(--fbt-color-text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.fbt-sidebar-guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fbt-sidebar-guide-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--fbt-radius-md);
  margin-bottom: var(--fbt-space-3);
}
.fbt-sidebar-guide-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fbt-secondary);
}