/**
 * TBG ontwerpsysteem 8.450.0 (staging, aan met ?ds=nieuw)
 *
 * Alles staat onder html.tbg-ds. Volgorde:
 *  1. Tokens (licht en donker)
 *  2. Bestaande variabelen naar de tokens
 *  3. Basistypografie
 *  4. Koppen in de inhoud
 *  5. Knoppen
 *  6. Kaarten, randen, schaduw
 *  7. Niets onder 12 px
 *  8. Productpagina: hero en prijsvergelijker
 *  9. Artikel
 * 10. Prijsindex
 * 11. Homepage
 * 12. Producttegel (?tegel=padell)
 */

/* ============================================================
   1. TOKENS
   Acht kleuren: inkt, tekst, gedempt, lijn, tegel, groen,
   groen-tekst, groen-vlak. Drie vlakken die er al waren:
   pagina (crème), kaart (wit), band (de headerkleur).
   ============================================================ */
html.tbg-ds {
    /* Fonts: koppen in één variabele. Manrope proberen = deze regel aanpassen. */
    --tbg-ds-font-kop: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tbg-ds-font-tekst: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Typografische schaal */
    --tbg-ds-h1: clamp(34px, 1.4rem + 2.4vw, 52px);
    --tbg-ds-h2: clamp(25px, 1.2rem + 1.1vw, 32px);
    --tbg-ds-h3: 20px;
    --tbg-ds-h4: 17px;
    --tbg-ds-tekstmaat: 18px;
    --tbg-ds-klein: 14px;
    --tbg-ds-labelmaat: 12px;
    --tbg-ds-kopgewicht: 700;

    /* Kleuren */
    --tbg-ds-inkt: #1c1b18;
    --tbg-ds-tekst: #3d3b36;
    --tbg-ds-gedempt: #6b675e;
    --tbg-ds-lijn: #e8e3da;
    --tbg-ds-tegel: #f3f0ea;
    --tbg-ds-groen: #10b981;
    --tbg-ds-groen-tekst: #047857;
    --tbg-ds-groen-vlak: #e6f5ee;
    /* Vlakken */
    --tbg-ds-pagina: #faf8f4;
    --tbg-ds-kaart: #ffffff;
    --tbg-ds-band: #111827;
    --tbg-ds-op-groen: #ffffff;
    --tbg-ds-op-band: #ffffff;
    --tbg-ds-op-band-gedempt: rgb(255 255 255 / .72);
    /* Afgeleid, geen nieuwe kleur */
    --tbg-ds-lijn-sterk: color-mix(in srgb, var(--tbg-ds-lijn), var(--tbg-ds-inkt) 12%);

    /* Maten */
    --tbg-ds-knop-koop: 54px;
    --tbg-ds-knop: 46px;
    --tbg-ds-knop-klein: 40px;
    --tbg-ds-r-kaart: 16px;
    --tbg-ds-r-tegel: 14px;
    --tbg-ds-r-knop: 10px;
    --tbg-ds-r-chip: 8px;
    --tbg-ds-sectie: 56px;
    --tbg-ds-kopruimte: 24px;
    --tbg-ds-rand: 1px solid var(--tbg-ds-lijn);
    --tbg-ds-schaduw: none;
    --tbg-ds-schaduw-zweef: 0 8px 24px rgb(17 24 39 / .08);
}
html.tbg-ds.tbg-ds-manrope { --tbg-ds-font-kop: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --tbg-ds-kopgewicht: 800; }
@media (max-width: 768px) {
    html.tbg-ds { --tbg-ds-tekstmaat: 16px; --tbg-ds-sectie: 44px; --tbg-ds-kopruimte: 20px; }
}

/* Donker: vaste waarden (palet A van de donkere modus). :root erbij zodat deze
   regels voor de automatisch afgeleide donkere variant gaan. */
html.tbg-ds[data-theme="dark"]:root {
    --tbg-ds-inkt: #ecebe8;
    --tbg-ds-tekst: #cfccc6;
    --tbg-ds-gedempt: #a19d95;
    --tbg-ds-lijn: #2d3034;
    --tbg-ds-tegel: #1e2023;
    --tbg-ds-groen: #26c98e;
    --tbg-ds-groen-tekst: #3edaa1;
    --tbg-ds-groen-vlak: rgb(38 201 142 / .14);
    --tbg-ds-pagina: var(--tbg-donker-pagina, #151719);
    --tbg-ds-kaart: var(--tbg-donker-kaart, #17191b);
    --tbg-ds-band: #0d0f12;
    --tbg-ds-op-groen: #0b1410;
    --tbg-ds-lijn-sterk: color-mix(in srgb, var(--tbg-ds-lijn), #ffffff 10%);
    --tbg-ds-schaduw-zweef: 0 8px 24px rgb(0 0 0 / .35);
}

/* ============================================================
   2. BESTAANDE VARIABELEN NAAR DE TOKENS
   (componenten van de plugin, GP-palet, kopfont)
   ============================================================ */
html.tbg-ds {
    --tbg-text: var(--tbg-ds-inkt);
    --tbg-text-dark: var(--tbg-ds-inkt);
    --tbg-dark: var(--tbg-ds-inkt);
    --tbg-text-mid: var(--tbg-ds-tekst);
    --tbg-text-light: var(--tbg-ds-gedempt);
    --tbg-text-meta: var(--tbg-ds-gedempt);
    --tbg-text-muted: var(--tbg-ds-gedempt);
    --tbg-muted: var(--tbg-ds-gedempt);
    --tbg-border: var(--tbg-ds-lijn);
    --tbg-border-dark: var(--tbg-ds-lijn-sterk);
    --tbg-border-strong: var(--tbg-ds-lijn-sterk);
    --tbg-bg: var(--tbg-ds-pagina);
    --tbg-bg-dark: var(--tbg-ds-tegel);
    --tbg-bg-soft: var(--tbg-ds-tegel);
    --tbg-white: var(--tbg-ds-kaart);
    --tbg-bg-card: var(--tbg-ds-kaart);
    --tbg-accent: var(--tbg-ds-groen);
    --tbg-accent-dark: var(--tbg-ds-groen-tekst);
    --tbg-accent-light: var(--tbg-ds-groen-vlak);
    --tbg-bg-success: var(--tbg-ds-groen-vlak);
    --tbg-text-success: var(--tbg-ds-groen-tekst);
    --tbg-radius: var(--tbg-ds-r-kaart);
    --tbg-radius-md: var(--tbg-ds-r-tegel);
    --tbg-radius-lg: var(--tbg-ds-r-kaart);
    --tbg-radius-xl: var(--tbg-ds-r-kaart);
    --tbg-radius-sm: var(--tbg-ds-r-chip);
    --tbg-shadow: none;
    --tbg-shadow-lg: none;
    --tbg-gt-text: var(--tbg-ds-inkt);
    --tbg-gt-text-meta: var(--tbg-ds-gedempt);
    --tbg-gt-text-light: var(--tbg-ds-gedempt);
    --tbg-gt-border: var(--tbg-ds-lijn);
    --tbg-gt-border-strong: var(--tbg-ds-lijn-sterk);
    --tbg-gt-bg-soft: var(--tbg-ds-tegel);
    --tbg-gt-bg: var(--tbg-ds-kaart);
    --contrast-2: var(--tbg-ds-gedempt);
    --contrast-3: var(--tbg-ds-lijn-sterk);
    /* Koppen: elke kopfont-variabele volgt één token */
    --tbg-kopfont: var(--tbg-ds-font-kop);
    --gp-font--geist: var(--tbg-ds-font-kop);
    --gp-font--space-grotesk: var(--tbg-ds-font-kop);
}

/* ============================================================
   3. BASISTYPOGRAFIE
   :where() houdt de specificiteit laag: componentklassen gaan voor.
   ============================================================ */
html.tbg-ds body { color: var(--tbg-ds-tekst); background-color: var(--tbg-ds-pagina); }
/* Lage specificiteit: klassen van GenerateBlocks en componenten gaan altijd voor (o.a. witte koppen in de footer). */
:where(html.tbg-ds) :where(body, button, input, select, textarea) { font-family: var(--tbg-ds-font-tekst); letter-spacing: 0; }
:where(html.tbg-ds) :where(body) { font-size: var(--tbg-ds-tekstmaat); line-height: 1.7; }
:where(html.tbg-ds) :where(h1, h2, h3, h4, h5, h6):where(:not(footer *, .site-footer *)) { font-family: var(--tbg-ds-font-kop); color: var(--tbg-ds-inkt); font-weight: var(--tbg-ds-kopgewicht); }
:where(html.tbg-ds) :where(h1) { font-size: var(--tbg-ds-h1); line-height: 1.08; letter-spacing: -.025em; }
:where(html.tbg-ds) :where(h2) { font-size: var(--tbg-ds-h2); line-height: 1.18; letter-spacing: -.02em; }
:where(html.tbg-ds) :where(h3) { font-size: var(--tbg-ds-h3); line-height: 1.3; letter-spacing: -.01em; }
:where(html.tbg-ds) :where(h4) { font-size: var(--tbg-ds-h4); line-height: 1.35; }
:where(html.tbg-ds) :where(strong, b) { color: inherit; }

/* Alle H1's op de site: dezelfde maat en kleur (artikel, product, prijsindex, home) */
html.tbg-ds h1.gb-text,
html.tbg-ds .tbg-pik__h1,
html.tbg-ds .entry-title {
    font-family: var(--tbg-ds-font-kop);
    font-size: var(--tbg-ds-h1);
    font-weight: var(--tbg-ds-kopgewicht);
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--tbg-ds-inkt);
}

/* ============================================================
   4. KOPPEN IN DE INHOUD (artikel, product, prijsindex, toplijst)
   Geen streep of verloop onder de H2.
   ============================================================ */
html.tbg-ds .dynamic-entry-content h2,
html.tbg-ds .entry-content h2.wp-block-heading {
    font-family: var(--tbg-ds-font-kop);
    font-size: var(--tbg-ds-h2);
    font-weight: var(--tbg-ds-kopgewicht);
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--tbg-ds-inkt);
    margin: var(--tbg-ds-sectie) 0 16px;
    padding-bottom: 0;
    border-bottom: 0;
}
html.tbg-ds .dynamic-entry-content h2::after { display: none; }
html.tbg-ds .dynamic-entry-content h3,
html.tbg-ds .entry-content h3.wp-block-heading {
    font-family: var(--tbg-ds-font-kop);
    font-size: var(--tbg-ds-h3);
    font-weight: var(--tbg-ds-kopgewicht);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--tbg-ds-inkt);
    margin: 36px 0 10px;
}
html.tbg-ds .dynamic-entry-content :where(p, li) { color: var(--tbg-ds-tekst); }
html.tbg-ds .dynamic-entry-content :where(ul, ol) { padding-left: 1.4em; margin-left: 0; }
html.tbg-ds .dynamic-entry-content :where(a:not([class])) { color: var(--tbg-ds-groen-tekst); text-decoration-color: color-mix(in srgb, var(--tbg-ds-groen-tekst), transparent 55%); text-underline-offset: 3px; }

/* ============================================================
   5. KNOPPEN
   Drie hoogtes: 54 (koop), 46 (standaard), 40 (klein, in lijsten).
   Gevuld groen alleen voor naar-de-winkel en de hoofdactie. Geen schaduw,
   geen sprongetje bij hover.
   ============================================================ */
html.tbg-ds :is(.tbg-btn, .tbg-cs__cta, .tbg-cv__knop, .tbg-rv-toolbar__cta, .tbg-rf-submit, .tbg-inline-cta__btn,
    .tbg-t3__btn, .tbg-4a__btn, .tbg-top5__cta, .tbg-pv__link, .tbg-pv__abtop-btn, .gb-text-hp-cta-btn,
    .gb-text-sp2-react, .gb-text-spn-commb, .tbg-dc__alertknop) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tbg-ds-knop);
    padding: 0 20px;
    border: 0;
    border-radius: var(--tbg-ds-r-knop);
    background: var(--tbg-ds-groen);
    color: var(--tbg-ds-op-groen) !important;
    font-family: var(--tbg-ds-font-tekst);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}
html.tbg-ds :is(.tbg-btn, .tbg-cs__cta, .tbg-cv__knop, .tbg-rv-toolbar__cta, .tbg-rf-submit, .tbg-inline-cta__btn,
    .tbg-t3__btn, .tbg-4a__btn, .tbg-top5__cta, .tbg-pv__link, .tbg-pv__abtop-btn, .gb-text-hp-cta-btn,
    .gb-text-sp2-react, .gb-text-spn-commb, .tbg-dc__alertknop):hover {
    background: color-mix(in srgb, var(--tbg-ds-groen), var(--tbg-ds-inkt) 12%);
    color: var(--tbg-ds-op-groen) !important;
    box-shadow: none;
    transform: none;
}
/* Klein in lijsten en tabellen */
html.tbg-ds :is(.tbg-pv__link, .tbg-top5__cta, .tbg-t3__btn, .tbg-inline-cta__btn, .tbg-rv-toolbar__cta, .gb-text-sp2-react) {
    min-height: var(--tbg-ds-knop-klein);
    padding: 0 16px;
    font-size: 14px;
}
/* Koopknop bovenaan de productpagina en de lg-variant */
html.tbg-ds :is(.tbg-pv__abtop-btn, .tbg-btn--lg, .tbg-4a__btn) { min-height: var(--tbg-ds-knop-koop); padding: 0 26px; font-size: 16px; }
/* Secundair: rand, geen vulling */
html.tbg-ds :is(.tbg-4a__codesbtn, .tbg-gt-be-filter, .tbg-rv-toolbar__btn, .tbg-pvx-more, .tbg-dc__alles, .tbg-cc__cta) {
    min-height: var(--tbg-ds-knop-klein);
    border: 1px solid var(--tbg-ds-lijn-sterk);
    border-radius: var(--tbg-ds-r-knop);
    background: var(--tbg-ds-kaart);
    color: var(--tbg-ds-inkt);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
/* Chips en segmentknoppen */
html.tbg-ds :is(.tbg-pg__per, .tbg-pic__knop, .tbg-pv__sort) {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--tbg-ds-r-chip);
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   6. KAARTEN, RANDEN, SCHADUW
   Wit, rand van 1 px, radius 16, geen schaduw.
   ============================================================ */
html.tbg-ds :is(a.gb-loop-item, .tbg-related__card, .tbg-4a, .tbg-cs, .tbg-to, .tbg-pic__editie, .tbg-tlc__row) {
    border-radius: var(--tbg-ds-r-kaart);
    box-shadow: none;
}
html.tbg-ds :is(a.gb-loop-item, .tbg-related__card, .tbg-4a, .tbg-pic__editie):hover { box-shadow: none; transform: none; }
html.tbg-ds :is(.tbg-related__score, .gb-element-rv-score, .tbg-dealkaart__knop, .tbg-inline-cta__img, .tbg-cs, .tbg-to) { box-shadow: none; }
html.tbg-ds img.gb-media-spn-fimg { box-shadow: none; border-radius: var(--tbg-ds-r-kaart); }
html.tbg-ds .entry-content :where(table) { border-color: var(--tbg-ds-lijn); }

/* ============================================================
   7. NIETS ONDER 12 PX
   Gemeten op product, artikel, home, prijsindex en toplijst (13-10).
   ============================================================ */
html.tbg-ds :is(
    .tbg-rx__abadge, .tbg-rv__badge, .tbg-rv__duration, .tbg-rv__date, .tbg-top5__metric-label, .tbg-pv__tsc-pop,
    .tbg-related__brand, .tbg-related__eyebrow, .tbg-replyto, .tbg-rv-bar__label, .tbg-rv-bar__count, .tbg-pv__chk, .tbg-pv__kwh,
    .tbg-pv__codewoord, .tbg-pv__coupon-val, .tbg-pv__inprijs, .tbg-pv__coupon-act-txt, .tbg-pv__precode, .tbg-pv__inclcode,
    .tbg-pv__sorts-lbl, .tbg-pv__lev b, .tbg-pg__stat-lbl, .tbg-top5__rank, .tbg-rf-hint, .tbg-cmt-n,
    .gb-text-hero2-sp1l, .gb-text-hero2-sp2l, .gb-text-hero2-sp3l, .gb-text-hero2-ss1, .gb-text-hero2-ss2, .gb-text-hero2-ss3,
    .gb-text-hero2-author-r, .gb-text-footer-affiliate,
    .tbg-tlc__rank, .tbg-tlc__specs, .tbg-tlc__chip, .tbg-tlc__score,
    .gb-text-aanr1-sp, .gb-text-aanr2-sp, .gb-text-aanr3-sp, .gb-text-aanr1-sc10, .gb-text-aanr2-sc10, .gb-text-aanr3-sc10,
    .gb-text-spn-cav1, .gb-text-spn-cav2, .gb-text-spn-cav3,
    .gb-text-rv-score-max, .gb-text-rv-badge, .gb-text-rv-brand,
    .tbg-pik__label,
    .tbg-gt-spec-unit, .tbg-gt-brand, .tbg-gt-ppk-sub, .tbg-gt-price-sep, .tbg-gt-price-cta, .tbg-gt-price-from, .tbg-gt-eyebrow,
    .tbg-gt-be-count, .tbg-gt-count, .tbg-gt-foot, .tbg-4a__scorelbl, .tbg-t3__lab, .tbg-t3__aanrader,
    .tbg-dc__kicker, .tbg-dc__kop, .tbg-dc-groot__bron, .tbg-deals__chip-val
) { font-size: 12px; }
html.tbg-ds .tbg-pv__lev b, html.tbg-ds .tbg-pv__chk { font-size: 12px; }
/* Tweede ronde (gemeten met ?ds=nieuw): vloer van 12 px, ook waar componenten dieper nesten */
html.tbg-ds :is(
    .tbg-pv__pills-lbl, .tbg-pv__codes-hint, .tbg-pvx-head__item, .tbg-pvx-head__item span, .tbg-pv__codewoord, .tbg-pctx__onder,
    .tbg-pg__fold-hide, .tbg-pg__marker, .tbg-pv__foot-row, .gb-element-meta-row .gb-text, .gb-text-feat-label, .gb-element-feat-wrap .gb-text,
    .rating-score .gb-text, .gb-element-rb7tkol .gb-text, .tbg-top5__eyebrow, .tbg-top5__badge, .tbg-reviews__label, .tbg-rv-summ__count,
    .tbg-rf-footer__note, .gb-text-sb300010, .tbg-related__score small, .tbg-related__specs span, .gb-text-rc-merk, .gb-text-rc-merk span,
    .gb-text-fa7fcb9f, .gb-text-13fdd9d2, .gb-text-13fdd9d2 a, .gb-text-spn-kick, .gb-text-spn-kick a, .gb-text-76b9f67a, .tbg-pim__as span,
    .tbg-4a__spec .k, .tbg-4a__spec .m
) { font-size: 12px !important; }
html.tbg-ds :is(.tbg-related__specs span, .tbg-pvx-head__item, .tbg-pv__foot-row) { font-size: 13px !important; }
html.tbg-ds :is(.tbg-gt th, .tbg-gt td strong, .tbg-gt .k, .tbg-gt .m, .tbg-gt .srt) { font-size: 12px; }
html.tbg-ds :is(.gb-text-e8399aa4, .gb-text-a1520831, .gb-text-ba0458c4) { font-size: 12px; }
html.tbg-ds .gb-element-hero2-pimg small, html.tbg-ds .tbg-pv small { font-size: 12px; }

/* ============================================================
   8. PRODUCTPAGINA: HERO EN PRIJSVERGELIJKER
   ============================================================ */
html.tbg-ds body.single-thuisbatterij h1.gb-text { font-size: clamp(30px, 1.2rem + 1.5vw, 42px); line-height: 1.1; }
html.tbg-ds :is(a[class*="plausible-event-surface=primary-cta"], .gb-element-hero2-pcol a.gb-text) { box-shadow: none; }
html.tbg-ds .gb-element-hero2-pimg { border-radius: var(--tbg-ds-r-tegel); background-color: var(--tbg-ds-tegel); }
/* Kernspecs: label 12 px boven, waarde 18 px */
html.tbg-ds .gb-element-hero2-specstrip { border-radius: var(--tbg-ds-r-tegel); background: var(--tbg-ds-tegel); }
html.tbg-ds :is(.gb-text-hero2-sp1v, .gb-text-hero2-sp2v, .gb-text-hero2-sp3v) { font-size: 18px; font-weight: 700; color: var(--tbg-ds-inkt); }
html.tbg-ds :is(.gb-text-hero2-sp1l, .gb-text-hero2-sp2l, .gb-text-hero2-sp3l) { letter-spacing: .06em; color: var(--tbg-ds-gedempt); }
html.tbg-ds :is(.gb-text-hero2-ss1, .gb-text-hero2-ss2, .gb-text-hero2-ss3) { font-size: 13px; color: var(--tbg-ds-gedempt); }
html.tbg-ds :is(.gb-text-hero2-ss1, .gb-text-hero2-ss2, .gb-text-hero2-ss3) strong { color: var(--tbg-ds-inkt) !important; }
/* Prijsvergelijker */
html.tbg-ds .tbg-pv__pills { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 18px; }
html.tbg-ds .tbg-pv__pills::-webkit-scrollbar { display: none; }
html.tbg-ds .tbg-pv__pills-lbl { flex-shrink: 0; margin-right: 4px; font-size: 12px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tbg-ds-gedempt); }
html.tbg-ds .tbg-pv__pill {
    flex-shrink: 0; height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--tbg-ds-lijn); border-radius: 8px;
    background: var(--tbg-ds-kaart); color: var(--tbg-ds-tekst); font-size: 14px !important; font-weight: 600; line-height: 30px; white-space: nowrap;
}
html.tbg-ds .tbg-pv__pill:hover { border-color: var(--tbg-ds-lijn-sterk); color: var(--tbg-ds-inkt); }
html.tbg-ds .tbg-pv__pill.is-active { border-color: var(--tbg-ds-inkt); background: var(--tbg-ds-kaart); color: var(--tbg-ds-inkt); }
html.tbg-ds .tbg-pv { border-color: var(--tbg-ds-lijn); border-radius: var(--tbg-ds-r-kaart); box-shadow: none; }
html.tbg-ds .tbg-pv__row { border-color: var(--tbg-ds-lijn); }
html.tbg-ds .tbg-pv__link { box-shadow: none; }
html.tbg-ds .tbg-pv__dot { box-shadow: none; }
html.tbg-ds .tbg-pv :is(.tbg-pv__name, .tbg-pv__name a) { font-size: 16px; font-weight: 700; color: var(--tbg-ds-inkt); }

/* ============================================================
   9. ARTIKEL
   ============================================================ */
html.tbg-ds .gb-text-spn-h1 { margin-bottom: 16px; }
html.tbg-ds .tbg-toc, html.tbg-ds .tbg-inhoud { border-color: var(--tbg-ds-lijn); border-radius: var(--tbg-ds-r-tegel); }

/* Artikel volgens de padell-lessen: tekst 18 px, geen promobalk, geen losse
   CTA-banners in de tekst (het blok De beste plug-in batterijen onderaan is de
   ene CTA, in zijn eigen ontwerp), uitgelichte afbeelding zoals in de oude weergave,
   inhoudsopgave links. */
html.tbg-ds body.single-post .tbg-cs__title { font-family: var(--tbg-ds-font-kop); color: var(--tbg-ds-inkt); letter-spacing: -.02em; }
html.tbg-ds body.single-post .dynamic-entry-content :where(p, li) { font-size: var(--tbg-ds-tekstmaat); line-height: 1.7; }
html.tbg-ds body.single-post :is(.tbg-dealkaart--onder, .tbg-inline-cta, #tbg-dealbalk, .tbg-dealbalk) { display: none !important; }
/* Inhoudsopgave links (padell): 220 px breed, 56 px naast de tekstkolom, onder de vaste
   header, 14 px, grijze lijn met de actieve kop in inkt. Positie en zichtbaarheid zet het
   script in class-designsysteem.php; zonder ruimte links blijft de gewone inhoudsopgave. */
.tbg-ds-zijtoc { display: none; }
html.tbg-ds.tbg-ds-zijtoc-aan body.single-post .tbg-toc { display: none; }
html.tbg-ds.tbg-ds-zijtoc-aan .tbg-ds-zijtoc {
    display: block; position: fixed; z-index: 5; width: 220px; box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--tbg-ds-lijn) transparent;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
    font-family: var(--tbg-ds-font-tekst);
}
html.tbg-ds .tbg-ds-zijtoc.is-zichtbaar { opacity: 1; visibility: visible; }
.tbg-ds-zijtoc__kop { display: block; margin: 0 0 12px; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tbg-ds-gedempt); }
.tbg-ds-zijtoc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--tbg-ds-lijn); }
.tbg-ds-zijtoc li { margin: 0; padding: 0; }
.tbg-ds-zijtoc a {
    display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent;
    font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--tbg-ds-gedempt); text-decoration: none;
    overflow-wrap: break-word;
}
.tbg-ds-zijtoc a:hover { color: var(--tbg-ds-inkt); }
.tbg-ds-zijtoc a.is-actief { color: var(--tbg-ds-inkt); border-left-color: var(--tbg-ds-inkt); }
.tbg-ds-zijtoc a:focus-visible { outline: 2px solid var(--tbg-ds-groen-tekst); outline-offset: 2px; }

/* Variant b: smalle kolom rechts, alleen H2, voortgangslijn per sectie, actieve kop vet */
.tbg-ds-tocb ol { border-left: 0; }
.tbg-ds-tocb li { padding: 0 0 10px; }
.tbg-ds-tocb a { margin: 0; padding: 0 0 6px; border-left: 0; font-weight: 500; }
.tbg-ds-tocb a.is-actief { font-weight: 700; color: var(--tbg-ds-inkt); border-left: 0; }
.tbg-ds-tocb__lijn { display: block; height: 2px; background: var(--tbg-ds-lijn); border-radius: 2px; overflow: hidden; }
.tbg-ds-tocb__lijn i { display: block; height: 100%; background: var(--tbg-ds-inkt); transform: scaleX(0); transform-origin: left; }

/* Variant d: compacte zijbalk, 180 px, alleen H2, hooguit 6 regels */
.tbg-ds-tocd { display: none; }
html.tbg-ds.tbg-ds-tocd-aan body.single-post .tbg-toc { display: none; }
html.tbg-ds.tbg-ds-tocd-aan .tbg-ds-tocd {
    display: block; position: fixed; z-index: 5; width: 180px; font-family: var(--tbg-ds-font-tekst);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
html.tbg-ds .tbg-ds-tocd.is-zichtbaar { opacity: 1; visibility: visible; }
.tbg-ds-tocd ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--tbg-ds-lijn); }
.tbg-ds-tocd li { margin: 0; padding: 0; }
.tbg-ds-tocd a {
    display: block; margin-left: -1px; padding: 4px 0 4px 12px; border-left: 2px solid transparent;
    font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--tbg-ds-gedempt); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbg-ds-tocd a:hover { color: var(--tbg-ds-inkt); }
.tbg-ds-tocd a.is-actief { color: var(--tbg-ds-inkt); font-weight: 700; border-left-color: var(--tbg-ds-inkt); }
.tbg-ds-tocd__meer {
    display: block; margin: 6px 0 0 13px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
    font: 600 13px/1.3 var(--tbg-ds-font-tekst); color: var(--tbg-ds-gedempt);
}
.tbg-ds-tocd__meer:hover, .tbg-ds-tocd__meer:focus { background: none; color: var(--tbg-ds-inkt); }
.tbg-ds-tocd__meer[hidden] { display: none; }

/* Variant e: chips "Spring naar" onder de intro */
.tbg-ds-toce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 40px; font-family: var(--tbg-ds-font-tekst); }
.tbg-ds-toce__kop { width: 100%; margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tbg-ds-gedempt); }
.dynamic-entry-content .tbg-ds-toce a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--tbg-ds-lijn-sterk); border-radius: 999px;
    background: var(--tbg-ds-kaart); color: var(--tbg-ds-inkt); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.dynamic-entry-content .tbg-ds-toce a:hover { border-color: var(--tbg-ds-inkt); }
html body .dynamic-entry-content .tbg-ds-toce a { color: var(--tbg-ds-inkt) !important; text-decoration: none !important; font-size: 14px !important; }
html.tbg-ds.tbg-ds-toce-aan body.single-post .tbg-toc { display: none; }

/* Variant f: zwevende knop Inhoud met paneel */
.tbg-ds-tocf { position: fixed; z-index: 60; bottom: 24px; right: 16px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; font-family: var(--tbg-ds-font-tekst); }
@media (min-width: 768px) { .tbg-ds-tocf { right: auto; } }
.tbg-ds-tocf.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.tbg-ds-tocf__knop {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 16px; border: 1px solid var(--tbg-ds-lijn-sterk); border-radius: 999px;
    background: var(--tbg-ds-kaart); color: var(--tbg-ds-inkt); font: 700 14px/1 var(--tbg-ds-font-tekst); cursor: pointer; box-shadow: var(--tbg-ds-schaduw-zweef);
}
.tbg-ds-tocf__knop:hover, .tbg-ds-tocf__knop:focus { background: var(--tbg-ds-kaart); color: var(--tbg-ds-inkt); border-color: var(--tbg-ds-inkt); }
.tbg-ds-tocf__paneel {
    position: absolute; bottom: 54px; left: 0; width: 320px; max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--tbg-ds-kaart); border: var(--tbg-ds-rand); border-radius: var(--tbg-ds-r-kaart); box-shadow: var(--tbg-ds-schaduw-zweef); padding: 6px 0 8px;
}
.tbg-ds-tocf__kop { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; font-size: 14px; color: var(--tbg-ds-inkt); }
.tbg-ds-tocf__sluit { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tbg-ds-gedempt); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: none; }
.tbg-ds-tocf__sluit:hover, .tbg-ds-tocf__sluit:focus { background: var(--tbg-ds-tegel); color: var(--tbg-ds-inkt); }
@media (max-width: 767px) {
    .tbg-ds-tocf__paneel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    html.tbg-ds-tocf-open body::after { content: ""; position: fixed; inset: 0; z-index: 59; background: rgb(17 24 39 / .35); }
}

/* Genummerde inhoudslijst (paneel van knop Inhoud): 01, 02 in een vaste smalle kolom, tikvlak 44 px */
.tbg-ds-tocl { list-style: none; margin: 0; padding: 0 8px 4px; }
.tbg-ds-tocl li { margin: 0; padding: 0; }
.tbg-ds-tocl a {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 10px; box-sizing: border-box;
    border-radius: 10px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--tbg-ds-tekst); text-decoration: none;
}
.tbg-ds-tocl__nr { font-size: 13px; font-weight: 700; color: var(--tbg-ds-gedempt); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tbg-ds-tocl__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbg-ds-tocl a:hover { background: var(--tbg-ds-tegel); color: var(--tbg-ds-inkt); }
.tbg-ds-tocl a.is-actief { background: var(--tbg-ds-tegel); color: var(--tbg-ds-inkt); font-weight: 700; }
.tbg-ds-tocl a.is-actief .tbg-ds-tocl__nr { color: var(--tbg-ds-inkt); }
html.tbg-ds-spring-weg nav.gb-element-sb200002 { display: none !important; }

/* Inklapbare inhoudsopgave bovenaan het artikel, uitgeklapt: alleen H2, genummerd, rustig */
html.tbg-ds body.single-post .tbg-toc { border: var(--tbg-ds-rand); border-radius: var(--tbg-ds-r-tegel); background: var(--tbg-ds-kaart); box-shadow: none; counter-reset: tbgtoc; }
html.tbg-ds body.single-post .tbg-toc__header { min-height: 52px; padding: 0 16px; }
html.tbg-ds body.single-post .tbg-toc__left { font-size: 15px; font-weight: 700; color: var(--tbg-ds-inkt); gap: 10px; }
html.tbg-ds body.single-post .tbg-toc__body { display: grid; grid-template-rows: 0fr; max-height: none !important; transition: grid-template-rows .25s ease; }
html.tbg-ds body.single-post .tbg-toc--open .tbg-toc__body { grid-template-rows: 1fr; }
html.tbg-ds body.single-post .tbg-toc__body > .tbg-toc__binnen { min-height: 0; overflow: hidden; }
html.tbg-ds body.single-post .tbg-toc__binnen { display: grid; grid-template-columns: 1fr; column-gap: 32px; padding: 0 8px; }
html.tbg-ds body.single-post .tbg-toc--open .tbg-toc__binnen { padding: 4px 8px 10px; border-top: var(--tbg-ds-rand); }
@media (min-width: 900px) { html.tbg-ds body.single-post .tbg-toc__binnen.is-twee { display: block; columns: 2; column-gap: 32px; } html.tbg-ds body.single-post .tbg-toc__binnen.is-twee .tbg-toc__section { break-inside: avoid; } }
html.tbg-ds body.single-post .tbg-toc :is(.tbg-toc__sub-list, .tbg-toc__expand-btn, .tbg-toc__dot) { display: none !important; }
html.tbg-ds body.single-post .tbg-toc__section, html.tbg-ds body.single-post .tbg-toc__section-header { margin: 0; padding: 0; border: 0; background: none; display: block; }
html.tbg-ds body.single-post .tbg-toc .tbg-toc__section-link {
    counter-increment: tbgtoc; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 10px;
    min-height: 44px; padding: 11px 10px; box-sizing: border-box; border-radius: 10px;
    font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--tbg-ds-tekst); text-decoration: none;
}
html.tbg-ds body.single-post .tbg-toc .tbg-toc__section-link::before { content: counter(tbgtoc, decimal-leading-zero); font-size: 13px; font-weight: 700; color: var(--tbg-ds-gedempt); font-variant-numeric: tabular-nums; }
html.tbg-ds body.single-post .tbg-toc .tbg-toc__section-link:hover { background: var(--tbg-ds-tegel); color: var(--tbg-ds-inkt); }
@media (prefers-reduced-motion: reduce) { html.tbg-ds body.single-post .tbg-toc__body { transition: none; } }

/* Variant c: plakkende balk onder de header met de huidige sectie, klapt open tot de lijst */
html.tbg-ds.tbg-ds-tocc-aan body.single-post .tbg-toc { display: none; }
.tbg-ds-tocc {
    position: fixed; left: 0; right: 0; z-index: 50; background: var(--tbg-ds-kaart); border-bottom: var(--tbg-ds-rand);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
    font-family: var(--tbg-ds-font-tekst);
}
.tbg-ds-tocc.is-zichtbaar { transform: none; opacity: 1; visibility: visible; }
.tbg-ds-tocc__in { position: relative; margin-left: var(--tocc-x, 16px); width: var(--tocc-w, calc(100% - 32px)); }
.tbg-ds-tocc__knop {
    display: flex; align-items: center; gap: 6px; width: 100%; height: 48px; margin: 0; padding: 0; border: 0; background: transparent;
    color: var(--tbg-ds-inkt); font: 600 14px/1.2 var(--tbg-ds-font-tekst); text-align: left; cursor: pointer; box-shadow: none;
}
.tbg-ds-tocc__knop:hover, .tbg-ds-tocc__knop:focus { background: transparent; color: var(--tbg-ds-inkt); }
.tbg-ds-tocc__label { color: var(--tbg-ds-gedempt); font-weight: 500; flex-shrink: 0; }
.tbg-ds-tocc__nu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbg-ds-tocc__knop svg { flex-shrink: 0; transition: transform .15s ease; }
.tbg-ds-tocc.is-open .tbg-ds-tocc__knop svg { transform: rotate(180deg); }
.tbg-ds-tocc__paneel {
    position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--tbg-ds-kaart); border: var(--tbg-ds-rand); border-top: 0; border-radius: 0 0 var(--tbg-ds-r-tegel) var(--tbg-ds-r-tegel);
    box-shadow: var(--tbg-ds-schaduw-zweef); padding: 6px 0;
}
.tbg-ds-tocc__paneel ol { list-style: none; margin: 0; padding: 0; }
.tbg-ds-tocc__paneel a { display: block; padding: 10px 16px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--tbg-ds-gedempt); text-decoration: none; }
.tbg-ds-tocc__paneel a:hover { background: var(--tbg-ds-tegel); color: var(--tbg-ds-inkt); }
.tbg-ds-tocc__paneel a.is-actief { color: var(--tbg-ds-inkt); background: var(--tbg-ds-tegel); }
@media (max-width: 999px) { .tbg-ds-tocc__knop { height: 44px; } }
.tbg-ds-tocc-vast { margin: 0 0 28px; border: var(--tbg-ds-rand); border-radius: var(--tbg-ds-r-tegel); background: var(--tbg-ds-kaart); font-family: var(--tbg-ds-font-tekst); }
.tbg-ds-tocc-vast .tbg-ds-tocc__knop { height: 52px; padding: 0 16px; justify-content: space-between; }
.tbg-ds-tocc-vast .tbg-ds-tocc__label { color: var(--tbg-ds-inkt); font-weight: 700; }
.tbg-ds-tocc-vast.is-open .tbg-ds-tocc__knop svg { transform: rotate(180deg); }
.tbg-ds-tocc-vast .tbg-ds-tocc__paneel { position: static; max-height: none; border: 0; border-top: var(--tbg-ds-rand); border-radius: 0; box-shadow: none; }

/* Productpagina: plakkende sectienavigatie (?pnav=1) */
.tbg-ds-pnav {
    position: fixed; left: 0; right: 0; z-index: 49; background: var(--tbg-ds-kaart); border-bottom: var(--tbg-ds-rand);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
    font-family: var(--tbg-ds-font-tekst);
}
.tbg-ds-pnav.is-zichtbaar { transform: none; opacity: 1; visibility: visible; }
.tbg-ds-pnav__in { display: flex; align-items: center; gap: 24px; max-width: 1180px; height: 56px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.tbg-ds-pnav__naam { flex-shrink: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--tbg-ds-kopgewicht) 16px/1.2 var(--tbg-ds-font-kop); color: var(--tbg-ds-inkt); }
.tbg-ds-pnav__tabs { display: flex; align-items: stretch; gap: 4px; height: 100%; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tbg-ds-pnav__tabs::-webkit-scrollbar { display: none; }
.tbg-ds-pnav__tabs a {
    display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 12px; border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 600; color: var(--tbg-ds-gedempt); text-decoration: none; white-space: nowrap;
}
.tbg-ds-pnav__tabs a:hover { color: var(--tbg-ds-inkt); }
.tbg-ds-pnav__tabs a.is-actief { color: var(--tbg-ds-inkt); border-bottom-color: var(--tbg-ds-inkt); }
.tbg-ds-pnav__koop { display: none; align-items: center; gap: 14px; flex-shrink: 0; }
.tbg-ds-pnav.met-koop .tbg-ds-pnav__koop { display: flex; }
.tbg-ds-pnav__prijs { font: 800 18px/1 var(--tbg-ds-font-kop); color: var(--tbg-ds-inkt); white-space: nowrap; }
.tbg-ds-pnav__prijs span { font: 500 14px var(--tbg-ds-font-tekst); color: var(--tbg-ds-gedempt); margin-right: 4px; }
.tbg-ds-pnav__knop { display: inline-flex; align-items: center; min-height: var(--tbg-ds-knop-klein); padding: 0 18px; border-radius: var(--tbg-ds-r-knop); background: var(--tbg-ds-groen); color: var(--tbg-ds-op-groen) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.tbg-ds-pnav__knop:hover { background: color-mix(in srgb, var(--tbg-ds-groen), var(--tbg-ds-inkt) 12%); }
/* Vervangt de lijst Spring naar en, zodra de balk een prijs toont, de zwevende prijskaart in de zijbalk */
html.tbg-ds-pnav-aan nav.gb-element-sb200002 { display: none !important; }
html.tbg-ds-pnav-koop .tbg-ds-pnav-dubbel { visibility: hidden; }
@media (max-width: 900px) {
    .tbg-ds-pnav__in { height: 48px; padding: 0; gap: 0; }
    .tbg-ds-pnav__naam, .tbg-ds-pnav__koop, .tbg-ds-pnav.met-koop .tbg-ds-pnav__koop { display: none; }
    .tbg-ds-pnav__tabs { padding: 0 8px; }
}

/* ============================================================
   10. PRIJSINDEX
   H2 in de inktkleur, cijferkaartjes zonder kader.
   ============================================================ */
html.tbg-ds .tbg-pik__h1 { margin-bottom: 20px; }
html.tbg-ds .tbg-pi-klasse { font-size: var(--tbg-ds-h3); font-weight: var(--tbg-ds-kopgewicht); color: var(--tbg-ds-inkt); }
html.tbg-ds .tbg-pic__knop.is-active { background: var(--tbg-ds-inkt); color: var(--tbg-ds-kaart); }
html.tbg-ds .tbg-pik__links .tbg-pik__label { color: var(--tbg-ds-groen-tekst); }

/* ============================================================
   11. HOMEPAGE
   Sectiekoppen op één maat.
   ============================================================ */
html.tbg-ds body.home h2.gb-text,
html.tbg-ds body.home h2.tbg-cs__title {
    font-family: var(--tbg-ds-font-kop);
    font-size: clamp(24px, 1.1rem + .9vw, 30px);
    font-weight: var(--tbg-ds-kopgewicht);
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--tbg-ds-inkt);
}
html.tbg-ds body.home h3.gb-text { font-size: 17px; font-weight: var(--tbg-ds-kopgewicht); color: var(--tbg-ds-inkt); }
html.tbg-ds body.home h1.gb-text { letter-spacing: -.03em; }

/* 12. Producttegels: zie assets/css/tegel.css (class-tegel.php, los van deze laag) */

/* Productpagina: Meer van merk en Vergelijkbare thuisbatterijen */
html.tbg-ds .tbg-related__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; width: 100%; max-width: none !important; }
html.tbg-ds .tbg-related__card { display: flex; flex-direction: column; width: auto !important; max-width: none !important; padding: 0 !important; background: var(--tbg-ds-kaart); border: var(--tbg-ds-rand) !important; border-radius: var(--tbg-ds-r-kaart) !important; box-shadow: none !important; transition: border-color .15s ease; transform: none !important; }
html.tbg-ds .tbg-related__card:hover { border-color: var(--tbg-ds-lijn-sterk) !important; }
html.tbg-ds .tbg-related__visual { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; height: auto !important; margin: 8px 8px 0; border-radius: var(--tbg-ds-r-tegel); overflow: hidden; background: var(--tbg-ds-tegel-vlak, var(--tbg-ds-tegel)) !important; }
html.tbg-ds .tbg-related__img { max-width: 72% !important; max-height: 72% !important; object-fit: contain; }
html.tbg-ds .tbg-related__score { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: var(--tbg-ds-r-chip); border: var(--tbg-ds-rand); background: var(--tbg-ds-kaart) !important; color: var(--tbg-ds-inkt) !important; font-size: 13px !important; font-weight: 800; box-shadow: none !important; }
html.tbg-ds .tbg-related__score small { display: none; }
html.tbg-ds .tbg-related__score--ongetest { display: none !important; }
html.tbg-ds .tbg-related__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 16px !important; }
html.tbg-ds .tbg-related__brand { font-size: 12px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tbg-ds-gedempt) !important; }
html.tbg-ds .tbg-related__name { font-family: var(--tbg-ds-font-kop); font-size: 16px !important; font-weight: 700; line-height: 1.3; color: var(--tbg-ds-inkt) !important; }
html.tbg-ds .tbg-related__specs { display: flex; gap: 10px; font-size: 14px !important; color: var(--tbg-ds-gedempt); }
html.tbg-ds .tbg-related__specs span { font-size: 14px !important; }
html.tbg-ds .tbg-related__prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
html.tbg-ds .tbg-related__prijs b { font: 800 20px/1.1 var(--tbg-ds-font-kop); color: var(--tbg-ds-inkt); }
html.tbg-ds .tbg-related__prijs span { font-size: 14px; color: var(--tbg-ds-gedempt); }
html.tbg-ds .tbg-related__title { font-family: var(--tbg-ds-font-kop); font-size: var(--tbg-ds-h2) !important; font-weight: var(--tbg-ds-kopgewicht); letter-spacing: -.02em; color: var(--tbg-ds-inkt); }
html.tbg-ds .tbg-related__eyebrow { font-size: 12px !important; letter-spacing: .1em; color: var(--tbg-ds-groen-tekst); }
html.tbg-ds :is(.tbg-related__sub, .tbg-related__more) { font-size: 14px !important; }
@media (max-width: 767px) {
    html.tbg-ds .tbg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    html.tbg-ds .tbg-related__body { padding: 10px 10px 14px !important; }
    html.tbg-ds .tbg-related__name { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html.tbg-ds * { transition-duration: 0s !important; }
}
/* Sheet van knop Inhoud boven de onderbalk van de productpagina */
@media (max-width: 767px) { .tbg-ds-tocf.is-open { z-index: 100000; } html.tbg-ds-tocf-open body::after { z-index: 99999; } }

/* Knop Inhoud zonder het ontwerpsysteem (8.457.0): dezelfde tokens als vaste waarden */
html:not(.tbg-ds) :is(.tbg-ds-tocf, .tbg-ds-balkinhoud) {
    --tbg-ds-font-tekst: "Manrope", system-ui, sans-serif; --tbg-ds-inkt: #1c1b18; --tbg-ds-tekst: #3d3b36; --tbg-ds-gedempt: #6b675e;
    --tbg-ds-lijn: #e8e3da; --tbg-ds-lijn-sterk: #d6d0c4; --tbg-ds-tegel: #f3f0ea; --tbg-ds-kaart: #ffffff; --tbg-ds-r-kaart: 16px;
    --tbg-ds-rand: 1px solid #e8e3da; --tbg-ds-schaduw-zweef: 0 8px 24px rgb(17 24 39 / .08);
}
html[data-theme="dark"]:not(.tbg-ds) :is(.tbg-ds-tocf, .tbg-ds-balkinhoud) {
    --tbg-ds-inkt: #ecebe8; --tbg-ds-tekst: #cfccc6; --tbg-ds-gedempt: #a19d95; --tbg-ds-lijn: #2d3034; --tbg-ds-lijn-sterk: #3a3d42; --tbg-ds-tegel: #1e2023; --tbg-ds-kaart: #17191b; --tbg-ds-rand: 1px solid #2d3034; --tbg-ds-schaduw-zweef: 0 8px 24px rgb(0 0 0 / .35);
}
/* H3 onder hun H2: ingesprongen en kleiner, zonder nummer */
.tbg-ds-tocl li.is-sub a { grid-template-columns: 28px minmax(0, 1fr); min-height: 40px; padding: 8px 10px 8px 24px; font-size: 14px; font-weight: 500; color: var(--tbg-ds-gedempt); }
.tbg-ds-tocl li.is-sub a.is-actief { color: var(--tbg-ds-inkt); font-weight: 700; }
/* Knopje Inhoud links in de onderbalk (alleen mobiel) */
.tbg-ds-balkinhoud { display: none; }
@media (max-width: 767px) {
    .tbg-ds-balkinhoud {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: 0 8px 0 0; padding: 0;
        border: 1px solid var(--tbg-ds-lijn-sterk, #d6d0c4); border-radius: 12px; background: var(--tbg-ds-kaart, #fff); color: var(--tbg-ds-inkt, #1c1b18); box-shadow: none; cursor: pointer;
    }
    .tbg-ds-balkinhoud:hover, .tbg-ds-balkinhoud:focus { background: var(--tbg-ds-tegel, #f3f0ea); color: var(--tbg-ds-inkt, #1c1b18); }
    .tbg-ds-tocf.in-balk .tbg-ds-tocf__knop { display: none; }
    .tbg-ds-tocf.in-balk { pointer-events: none; }
    .tbg-ds-tocf.in-balk .tbg-ds-tocf__paneel { pointer-events: auto; border-radius: 16px 16px 0 0; }
}

@media (min-width: 768px) { .tbg-ds-tocf.is-rechts .tbg-ds-tocf__paneel { left: auto; right: 0; } }

/* 8.461.0 (?inhoud=kort): H3's ingeklapt onder hun H2, pijltje per H2 */
.tbg-ds-tocl.is-inklap li.heeft-sub { position: relative; }
.tbg-ds-tocl.is-inklap li.heeft-sub > a { padding-right: 44px; }
.tbg-ds-tocl__klap {
    position: absolute; top: 6px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--tbg-ds-gedempt, #6b675e); box-shadow: none; cursor: pointer;
}
.tbg-ds-tocl__klap:hover, .tbg-ds-tocl__klap:focus { background: var(--tbg-ds-tegel, #f3f0ea); color: var(--tbg-ds-inkt, #1c1b18); }
.tbg-ds-tocl__klap svg { transition: transform .15s ease; }
.tbg-ds-tocl li.is-open > .tbg-ds-tocl__klap svg { transform: rotate(180deg); }
.tbg-ds-tocl li.is-sub[hidden] { display: none; }
/* 8.462.2: koppen onder Review; H3 een stap verder in */
.tbg-ds-tocl li.is-sub.is-diep a { padding-left: 40px; font-size: 13px; }
/* Scorebadge op tegels (vergelijkbare batterijen, meer van merk): groene pill zoals deals en archief */
html.tbg-ds .tbg-related__score { height: auto; padding: 4px 8px; gap: 1px; align-items: baseline; border: 0; border-radius: 8px; background: color-mix(in srgb, #10b981, #000 22%) !important; color: #fff !important; font-size: 14px !important; font-variant-numeric: tabular-nums; }
html.tbg-ds .tbg-related__score small { display: inline; font-size: 12px !important; font-weight: 600; opacity: .85; }
html.tbg-ds[data-theme="dark"] .tbg-related__score { background: #26c98e !important; color: #0b1410 !important; }