/* Knop Inhoud (TOC F) en de onderbalk-knop, live-variant 8.409.63: uit designsysteem.css (alleen de onderdelen die op staging zonder ontwerpsysteem gelden). */
.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; }
/* 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; }