/* =============================================================
   Productvergelijking — "Vergelijkbare en betere producten"
   Huisstijl Thuisbatterij.nl: Poppins, groen #67BF61, grijs #454645.
   ============================================================= */

.tbv {
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #000;
  margin: 32px 0;
}

.tbv-titel {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #000;
}

/* Waarop we vergelijken. Verandert mee als de bezoeker bovenaan een andere
   configuratie kiest, zodat duidelijk is waarom de getallen verschuiven. */
.tbv-ijk { margin: 0 0 16px; font-size: 13px; color: #454645; }

/* Op smalle schermen schuift de tabel horizontaal; de eerste kolom met de
   rijnamen blijft staan, zodat je altijd ziet waar je naar kijkt. */
.tbv-schuif {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* De systeembalk verbergen we; we tekenen zelf een rustiger balkje. */
  scrollbar-width: none;
}

.tbv-schuif::-webkit-scrollbar { display: none; }

/* Het balkje verschijnt alleen als er echt iets te schuiven valt; de JS zet
   daarvoor de klasse op het blok. */
.tbv-balk {
  display: none;
  position: relative;
  height: 4px;
  margin: 14px auto 0;
  max-width: 320px;
  background: #E8EBE8;
  border-radius: 999px;
}

.tbv-heeft-schuif .tbv-balk { display: block; }

.tbv-balk-duim {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: #67BF61;
  border-radius: 999px;
  transition: left .08s linear;
}

.tbv-tabel {
  border-collapse: collapse;
  width: 100%;
  min-width: 680px;
  font-size: 14px;
  line-height: 1.45;
}

.tbv-tabel th,
.tbv-tabel td {
  vertical-align: top;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #E8EBE8;
  background: #fff;
}

.tbv-tabel tbody th[scope="row"] {
  width: 180px;
  font-weight: 600;
  color: #454645;
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 1;
}

.tbv-hoek { border-bottom: 1px solid #E8EBE8; background: #fff; }

/* Kolomkop: labeltje, foto, naam. */
.tbv-kop { width: 190px; }

/* Vaste hoogtes voor vlaggetje, foto en naam. Daardoor staan de productnamen
   op dezelfde regel en begint elke rij eronder op dezelfde hoogte, ook als een
   kolom geen label heeft of een afwijkende foto. */
.tbv-vlag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #454645;
  background: #F2F4F2;
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 10px;
  white-space: nowrap;
}

/* Lege kolommen houden dezelfde regelhoogte, maar tonen niets. */
.tbv-vlag.is-leeg { background: transparent; color: transparent; }

.tbv-fotovak {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 120px;
  margin-bottom: 10px;
}

.tbv-foto {
  display: block;
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tbv-naam {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  min-height: 2.9em;
}
.tbv-naam--link { color: #454645; text-decoration: none; }
.tbv-naam--link:hover { color: #000; text-decoration: underline; }

.tbv-sub { display: block; font-size: 12px; color: #454645; font-weight: 400; }

/* De kolom van het product waar de bezoeker nu is: rustig grijsgroen, zodat
   hij herkenbaar is zonder de aandacht te trekken. */
.tbv-kop.is-huidig,
.tbv-cel.is-huidig { background: #F6F8F6; }

.tbv-knoprij td,
.tbv-knoprij th { border-bottom: none; padding-top: 16px; }

.tbv-knop {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #454645;
  background: #fff;
  border: 1px solid #C9CFC9;
}

.tbv-knop:hover { color: #000; border-color: #454645; }

/* Sterren, gelijk aan de productkaarten in de calculator. */
.tbv-sterren {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  vertical-align: -1px;
}

.tbv-sterren-leeg { color: #D7DAD7; }

.tbv-sterren-vol {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #ECAA15;
  white-space: nowrap;
}

.tbv-veilig {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3F7F3B;
  background: #EDF8ED;
  border-radius: 6px;
  padding: 2px 7px;
}

.tbv-reviewaantal { font-size: 12px; color: #454645; }
.tbv-geenreviews { font-size: 12px; color: #6B6C6B; }

@media (max-width: 782px) {
  .tbv-titel { font-size: 19px; }
  .tbv-tabel { font-size: 13px; }
  .tbv-tabel th, .tbv-tabel td { padding: 10px; }
  .tbv-tabel tbody th[scope="row"] { width: 130px; }
  .tbv-kop { width: 150px; }
  .tbv-fotovak { height: 86px; }
  .tbv-foto { max-width: 86px; max-height: 86px; }
  .tbv-naam { min-height: 4.4em; }
  .tbv-vlag { font-size: 9.5px; padding: 3px 7px; }
}

/* =============================================================
   Thema-reset. Het thema zet randen rondom elke cel en afwisselend grijze
   rijen op iedere tabel. Binnen dit blok willen we alleen onze eigen
   lijnen; daarom met extra specificiteit, en het hoekvak linksboven helemaal
   leeg en randloos.
   ============================================================= */
.tbv table.tbv-tabel,
.tbv table.tbv-tabel tr,
.tbv table.tbv-tabel th,
.tbv table.tbv-tabel td {
  border: 0;
}
.tbv table.tbv-tabel tbody tr > th,
.tbv table.tbv-tabel tbody tr > td,
.tbv table.tbv-tabel thead tr > th {
  border-bottom: 1px solid #E8EBE8;
}
.tbv table.tbv-tabel tbody tr:nth-child(odd) > td,
.tbv table.tbv-tabel tbody tr:nth-child(even) > td,
.tbv table.tbv-tabel tbody tr:nth-child(odd) > th,
.tbv table.tbv-tabel tbody tr:nth-child(even) > th { background-color: #fff; }
.tbv table.tbv-tabel tbody tr > td.is-huidig,
.tbv table.tbv-tabel thead tr > th.is-huidig { background-color: #F6F8F6; }
.tbv table.tbv-tabel thead tr > td.tbv-hoek {
  border: 0;
  background: transparent;
}
.tbv table.tbv-tabel tbody tr.tbv-knoprij > td,
.tbv table.tbv-tabel tbody tr.tbv-knoprij > th { border-bottom: 0; }

/* Cijfer en sterren op één regel, met eventueel een i-tje erachter. */
.tbv-regel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tbv-cijfer { font-weight: 700; font-size: 14px; color: #000; }
.tbv-reviewaantal { display: block; margin-top: 2px; }

/* Onze score. */
.tbv-score { font-size: 20px; font-weight: 700; color: #000; line-height: 1; }
.tbv-sub--inline { display: inline; }
.tbv-beste { display: block; width: fit-content; margin-top: 6px; }

/* i-tje met toelichting. Opent bij muis erop, bij toetsenbordfocus en bij
   tikken (de JS zet dan .is-open). De tekst klapt naar beneden uit, zodat hij
   binnen het schuifvak van de tabel blijft. */
.tbv-info { position: relative; display: inline-flex; }
.tbv .tbv-info .tbv-info-knop {
  width: 18px;
  min-width: 0;
  min-height: 0;
  text-transform: none;
  letter-spacing: 0;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #C9CFC9;
  background: #fff;
  color: #454645;
  font: 700 11px/16px Poppins, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}
.tbv .tbv-info .tbv-info-knop:hover,
.tbv .tbv-info .tbv-info-knop:focus,
.tbv .tbv-info .tbv-info-knop:focus-visible { background: #fff; border-color: #67BF61; color: #000; outline: none; }

/* De rijkop van de scorerij staat vast tijdens het schuiven; zijn toelichting
   moet boven de vaste rijkoppen eronder komen te liggen. */
.tbv table.tbv-tabel tbody tr.tbv-scorerij > th { z-index: 3; }
.tbv-info-tekst {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 5;
  width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E0E4E0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: left;
  white-space: pre-line;
  /* Echt weg als hij dicht is: een onzichtbare toelichting telt anders mee
     voor de breedte en maakt de tabel schuifbaar terwijl alles past. */
  display: none;
}
.tbv-info:hover .tbv-info-tekst,
.tbv-info-knop:focus-visible + .tbv-info-tekst,
.tbv-info.is-open .tbv-info-tekst { display: block; }

/* In de laatste kolom klapt de toelichting naar links uit, zodat hij binnen
   de tabel blijft. */
.tbv-tabel td.tbv-cel:last-child .tbv-info-tekst { left: auto; right: -8px; }

/* Ruimte onderin zodat een uitgeklapte toelichting niet wordt afgesneden. */
.tbv-schuif { padding-bottom: 4px; }

@media (max-width: 782px) {
  .tbv-info-tekst { width: 200px; }
  .tbv-score { font-size: 18px; }
}

/* =============================================================
   Rijnaam als eigen regel (mobiel). Op desktop verborgen; daar staat de
   rijnaam gewoon in de eerste kolom.
   ============================================================= */
.tbv table.tbv-tabel tr.tbv-labelrij { display: none; }

@media (max-width: 782px) {
  /* Drie producten passen precies in beeld (huidig, de beste keuze en de
     nummer twee); zijn er meer, dan wordt de tabel naar verhouding breder en
     veeg je naar de rest. De rijnaam staat als eigen regel boven de waarden;
     een aparte kolom met rijnamen past er niet bij en schoof over het huidige
     product heen. */
  .tbv table.tbv-tabel {
    min-width: 0;
    width: var(--tbv-breedte, 100%);
    table-layout: fixed;
    font-size: 12.5px;
  }
  .tbv table.tbv-tabel thead td.tbv-hoek,
  .tbv table.tbv-tabel tbody tr:not(.tbv-labelrij) > th[scope="row"] { display: none; }

  .tbv table.tbv-tabel .tbv-kop,
  .tbv table.tbv-tabel .tbv-cel { width: var(--tbv-kol, 33.333%); }

  .tbv table.tbv-tabel th,
  .tbv table.tbv-tabel td { padding: 4px 6px 8px; }
  .tbv table.tbv-tabel thead tr > th.tbv-kop { padding-top: 8px; }

  .tbv-fotovak { height: 64px; margin-bottom: 6px; }
  .tbv-foto { max-width: 64px; max-height: 64px; }
  .tbv-naam { font-size: 12.5px; line-height: 1.3; min-height: 3.9em; }
  .tbv-sub { font-size: 11px; }
  .tbv-score { font-size: 17px; }
  .tbv-cijfer { font-size: 12.5px; }
  .tbv-sterren { font-size: 11px; letter-spacing: 0; }
  .tbv-veilig { font-size: 10.5px; padding: 2px 5px; }
  .tbv-regel { gap: 4px; }
  .tbv-knop { padding: 7px 10px; font-size: 12.5px; }

  /* De rijnaam boven de waarden, over de hele breedte. De achtergrond loopt
     grijs door onder de kolom van het huidige product (het eerste derde), zodat
     die kolom niet onderbroken wordt. */
  .tbv table.tbv-tabel tr.tbv-labelrij { display: table-row; }
  .tbv table.tbv-tabel tbody tr.tbv-labelrij > th {
    position: static;
    padding: 10px 6px 0;
    border-bottom: 0;
    text-align: left;
    font-weight: 600;
    background-color: #fff;
    background-image: linear-gradient(to right, #F6F8F6 0, #F6F8F6 var(--tbv-kol, 33.333%), transparent var(--tbv-kol, 33.333%));
  }

  /* De rijnaam blijft links in beeld terwijl je naar rechts veegt. */
  .tbv-labeltekst {
    position: sticky;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #454645;
  }
  .tbv-labeltekst .tbv-sub { display: inline; font-weight: 400; }
  .tbv-labeltekst .tbv-regel { display: inline-flex; }

  /* De knoprij heeft geen rijnaam; wat ruimte erboven is genoeg. */
  .tbv table.tbv-tabel tbody tr.tbv-knoprij > td { padding-top: 10px; }

  /* Toelichtingen passen in een derde van de breedte niet; geef ze vaste
     breedte binnen het scherm. */
  .tbv-info-tekst { width: 190px; }
  /* Toevoegingen die op mobiel over twee regels breken laten we daar weg:
     de reeks onder de capaciteit en "vaste/vloeibare elektrolyt". */
  .tbv .tbv-lang { display: none; }
  /* In de derde kolom en verder naar links uitklappen, zodat de toelichting
     binnen beeld blijft. */
  .tbv table.tbv-tabel tbody tr > td:nth-child(n+4) .tbv-info-tekst { left: auto; right: -6px; }
}


/* Korte varianten (bijv. "(42)" bij reviews) alleen op mobiel. */
.tbv .tbv-kort { display: none; }

/* =============================================================
   Mobiel compact: het hele blok past in één scherm.
   ============================================================= */
@media (max-width: 782px) {
  .tbv { margin: 20px 0; }
  .tbv h2.tbv-titel { font-size: 18px; line-height: 1.25; font-weight: 700; margin: 0 0 2px; }
  .tbv-ijk { font-size: 11.5px; margin: 0 0 8px; }

  .tbv .tbv-kort { display: inline; }
  .tbv-reviewaantal.tbv-kort { font-size: 11px; color: #454645; margin: 0; }

  .tbv table.tbv-tabel { line-height: 1.3; }
  .tbv table.tbv-tabel th,
  .tbv table.tbv-tabel td { padding: 2px 6px 6px; }
  .tbv table.tbv-tabel thead tr > th.tbv-kop { padding: 6px 6px 6px; }
  .tbv table.tbv-tabel tbody tr.tbv-labelrij > th { padding: 6px 6px 0; }

  .tbv-fotovak { height: 48px; margin-bottom: 4px; }
  .tbv-foto { max-width: 52px; max-height: 48px; }
  /* Productnaam maximaal drie regels, altijd even hoog. */
  .tbv-naam {
    font-size: 12px;
    line-height: 1.25;
    min-height: 3.75em;
    max-height: 3.75em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .tbv-labeltekst { font-size: 11px; }
  .tbv-sub { font-size: 10.5px; line-height: 1.3; }
  .tbv-score { font-size: 16px; }
  /* "Beste keuze" naast het cijfer in plaats van eronder. */
  .tbv-beste { display: inline-block; margin: 0 0 0 4px; vertical-align: 2px; }
  .tbv-veilig { font-size: 10px; padding: 1px 5px; margin-top: 2px; }
  .tbv-regel { gap: 3px; flex-wrap: nowrap; }
  .tbv-sterren { font-size: 10px; }
  .tbv-cijfer { font-size: 12px; }

  .tbv table.tbv-tabel tbody tr.tbv-knoprij > td { padding-top: 6px; }
  .tbv-knop { padding: 5px 10px; font-size: 12px; border-radius: 6px; }

  /* Toelichting bij een rijnaam: uitlijnen op het begin van de rijnaam (die
     links in beeld staat), zo breed als het scherm toelaat, en boven de rijen
     eronder. De rijnaam zelf staat vast tijdens vegen en vormt daardoor een
     eigen laag; die tillen we op zolang de toelichting open is. */
  .tbv table.tbv-tabel tr.tbv-labelrij .tbv-labeltekst .tbv-info { position: static; }
  .tbv table.tbv-tabel tr.tbv-labelrij .tbv-info-tekst {
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 48px));
  }
  .tbv table.tbv-tabel tr.tbv-labelrij .tbv-labeltekst { z-index: 2; }
  .tbv table.tbv-tabel tr.tbv-labelrij.is-boven .tbv-labeltekst,
  .tbv table.tbv-tabel tr.tbv-labelrij .tbv-labeltekst:has(.tbv-info.is-open),
  .tbv table.tbv-tabel tr.tbv-labelrij .tbv-labeltekst:has(.tbv-info:hover) { z-index: 20; }

  /* Reviews op één regel: cijfer, kleine sterren en (aantal). */
  .tbv table.tbv-tabel td .tbv-sterren { font-size: 9px; letter-spacing: -0.5px; }
  .tbv table.tbv-tabel td .tbv-regel { gap: 2px; }
  .tbv table.tbv-tabel td .tbv-cijfer { font-size: 11px; }
  .tbv table.tbv-tabel td .tbv-reviewaantal.tbv-kort { font-size: 10px; }
  .tbv-info-tekst { box-sizing: border-box; }

  .tbv-balk { margin-top: 8px; }
}

/* De app-rij staat onderaan de tabel: daar klapt de toelichting naar boven
   uit, anders valt hij buiten het blok. */
.tbv table.tbv-tabel tr.tbv-apprij .tbv-info-tekst,
.tbv table.tbv-tabel tr.tbv-apprij-label .tbv-info-tekst {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Capaciteit direct naast de prijs: "€ 1.449 · 5,8 kWh". */
.tbv-naast { font-size: 12.5px; font-weight: 400; color: #454645; white-space: nowrap; }
@media (max-width: 782px) {
  .tbv-naast { font-size: 11px; }
}

/* =============================================================
   Thema-reset, deel 2 (Hello Elementor).
   - Het thema zet een rand boven de eerste rij van elke tabel, met een regel
     die zwaarder weegt dan de reset hierboven; daarom hier nog specifieker.
   - Het thema kan de knop als gewone tekstlink weergeven; dan telt de
     binnenruimte niet mee voor de rijhoogte en valt de onderrand van de knop
     buiten de cel weg. We dwingen de knopvorm af en geven de rij ruimte.
   ============================================================= */
.tbv .tbv-schuif table.tbv-tabel,
.tbv .tbv-schuif table.tbv-tabel thead,
.tbv .tbv-schuif table.tbv-tabel tbody,
.tbv .tbv-schuif table.tbv-tabel thead tr > th.tbv-kop,
.tbv .tbv-schuif table.tbv-tabel thead tr > td.tbv-hoek {
  border-top: 0;
  border-block-start: 0;
}
.tbv .tbv-schuif table.tbv-tabel tr.tbv-knoprij > td,
.tbv .tbv-schuif table.tbv-tabel tr.tbv-knoprij > th {
  padding-bottom: 14px;
  vertical-align: top;
}
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop {
  display: inline-block;
  line-height: 1.2;
  box-sizing: border-box;
  text-decoration: none;
}

/* De knop zelf: het thema haalt bij links de onderrand weg (of zet hem op 0),
   waardoor de knop onderaan open bleef. De vorm van deze ene knop leggen we
   daarom met voorrang vast; dit is bewust de enige plek met !important. */
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop,
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop:hover,
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop:focus {
  display: inline-block !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop { border-color: #C9CFC9 !important; }
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop:hover,
.tbv .tbv-schuif table.tbv-tabel a.tbv-knop:focus { border-color: #454645 !important; }
@media (max-width: 782px) {
  .tbv .tbv-schuif table.tbv-tabel a.tbv-knop,
  .tbv .tbv-schuif table.tbv-tabel a.tbv-knop:hover,
  .tbv .tbv-schuif table.tbv-tabel a.tbv-knop:focus {
    padding: 5px 10px !important;
    border-radius: 6px !important;
  }
}