/* REVIEWS: het herontwerp van 24-10-2026 (docs/ontwerp/reviews/, spec.md), één op één. Alleen indeling en de onderdelen die de basis niet heeft;
   kleur komt uitsluitend uit de variabelen van basis.css. Elke regel staat onder .huid .rv zodat hij de basisregel (die ná dit bestand laadt)
   overschrijft en geen ander scherm raakt. */

.huid .rv { min-width: 0; }
.huid .rv .kop-rij { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.huid .rv .kop-acties { display: flex; gap: 8px; }
.huid .rv .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.huid .rv .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.huid .rv .g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.huid .rv .g2.behandel { grid-template-columns: 1.4fr 1fr; margin-top: 14px; }
.huid .rv .g3.familie { grid-template-columns: 1fr 1fr 1.3fr; margin-top: 14px; }
.huid .rv .g2.inst { margin-top: 14px; }
.huid .rv .g4 { margin-top: 14px; }
.huid .rv .boven14 { margin-top: 14px; }
.huid .rv .kaart { padding: 18px 20px; }
.huid .rv .kaart.vlak { padding: 0; }
.huid .rv .kaart > .kopje:not(.rand) { margin-bottom: 10px; }

/* tegels */
.huid .rv .g4 .tegel .g { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.huid .rv .g4 .tegel .g .k { font-size: 12px; font-weight: 500; }
.huid .rv .tegel.held { background: var(--blauw-900); border-color: var(--blauw-900); color: var(--wit); }
.huid .rv .tegel.held .k, .huid .rv .tegel.held .k:first-child { color: var(--wit); opacity: .75; }

/* de bronscoreregel */
.huid .rv .bronregel { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; align-items: center; color: var(--grijs); }
.huid .rv .bronregel .bron-pill { display: inline-flex; gap: 6px; align-items: center; }
.huid .rv .bronregel b { color: var(--tekst); }

/* kaartkop met filters */
.huid .rv .kopje { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.huid .rv .kopje .kop { font-size: 15px; }
.huid .rv .aantal { font-size: 12px; color: var(--grijs); }
.huid .rv .kopje.rand { padding: 14px 16px 0; }
.huid .rv .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.huid .rv .filters.smal { gap: 6px; }
.huid .rv .sub { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 32px; border-radius: var(--r2); font-size: 13px; border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst); cursor: pointer; font-family: inherit; }
.huid .rv .sub.aan { background: var(--blauw-900); color: var(--wit); border-color: var(--blauw-900); font-weight: 400; }
.huid .rv .sub:hover { text-decoration: none; }
.huid .rv .knop { min-height: 32px; font-size: 13px; }
.huid .rv .knop.klein { min-height: 28px; font-size: 12px; }
.huid .rv .knop.wit { background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand); box-shadow: none; }
.huid .rv .knop.wit:hover { background: var(--bg); color: var(--tekst); }
.huid .rv .knop[disabled] { opacity: .5; cursor: not-allowed; }
.huid .rv .knop.links { justify-content: flex-start; }
.huid .rv button.knop { font-family: inherit; }
.huid .rv .stap-voet { padding: 10px 16px; border-top: 1px solid var(--rand2); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.huid .rv .stap-voet .acties { display: flex; gap: 8px; }

/* sterren en bronpictogram */
.huid .rv .ster { color: var(--goud); letter-spacing: -1px; font-size: 13px; }   /* Twan 24-10: goud, overal dezelfde */
.huid .rv .ster.k { font-size: 11px; color: var(--goud); }
.huid .rv .ster .leeg { color: var(--grijs-300); }
.huid .rv .bron-ic { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; flex: none; border: 1px solid var(--rand); }
.huid .rv .bron-ic.bol { background: var(--blauw-100); color: var(--blauw-900); border-color: var(--blauw-300); }
.huid .rv .bron-ic.wwk { background: var(--groen-100); color: var(--groen-900); border-color: var(--groen-300); }
.huid .rv .bron-ic.shop { background: var(--grijs-100); color: var(--grijs-900); }
.huid .rv .bron-ic.bol, .huid .rv .bron-ic.shop { width: 24px; }
.huid .rv .bron-ic img { display: block; max-width: 20px; max-height: 14px; width: auto !important; height: auto !important; }
.huid .rv .rrow .naam { display: flex; align-items: center; gap: 10px; }
.huid .rv .rrow .naam-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.huid .rv .rv-foto { width: 40px; height: 40px; border-radius: var(--r2); border: 1px solid var(--rand); background: var(--wit); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; color: var(--grijs); }
.huid .rv .rv-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.huid .rv .rv-foto.leeg { background: var(--grijs-100); }

/* statuschips */
.huid .rv .st { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 0; font-family: inherit; }
.huid .rv .st.nieuw, .huid .rv .st.bezig, .huid .rv .st.gemeld { background: var(--blauw-100); color: var(--blauw-900); }
.huid .rv .st.klaar, .huid .rv .st.gereageerd { background: var(--groen-100); color: var(--groen-900); }
.huid .rv .st.grijs, .huid .rv .st.bekeken { background: var(--grijs-300); color: var(--grijs-900); }
.huid .rv button.st { cursor: pointer; }

/* de lijst: Nieuw en Alle reviews */
.huid .rv .rrow { display: grid; grid-template-columns: 24px 90px minmax(0, 1.2fr) minmax(0, 2fr) 70px 150px 24px; cursor: pointer; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--rand2); font-size: 13px; }
.huid .rv .rrow:first-of-type { border-top: 0; }
.huid .rv .rrow:focus-visible, .huid .rv .trow2:focus-visible, .huid .rv .prow:focus-visible { outline: 2px solid var(--blauw); outline-offset: -2px; }
.huid .rv .rrow .tekst, .huid .rv .trow2 .tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tekst); }
.huid .rv .rrow .tekst.telling, .huid .rv .trow2 .tekst.telling { color: var(--grijs); }
.huid .rv .rrow .naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.huid .rv .rrow .naam .k { font-weight: 400; font-size: 11.5px; }
.huid .rv .rrow .pijl { text-align: right; font-size: 16px; color: var(--grijs); }
.huid .rv .rrow .st-kolom { white-space: nowrap; }
.huid .rv .ph { font-size: 11.5px; color: var(--grijs); font-weight: 500; border-top: 0 !important; cursor: default; }
.huid .rv .trow2 { display: grid; grid-template-columns: 90px 70px minmax(0, 2fr) minmax(0, 3fr) 90px 110px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rand2); font-size: 13px; cursor: pointer; }
.huid .rv .trow2:first-of-type { border-top: 0; }

/* Per artikel */
.huid .rv .prow { display: grid; grid-template-columns: 40px minmax(0, 1.8fr) 84px 84px 84px minmax(0, 1.6fr) 160px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rand2); font-size: 13px; cursor: pointer; }
.huid .rv .prow:first-of-type { border-top: 0; }
.huid .rv .prow .artnaam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.huid .rv .prow .artsub { font-size: 11.5px; }
.huid .rv .prow .punten { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.huid .rv .prow .lijn-kol { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.huid .rv .prow .lijn-kol svg { width: 80px; height: 26px; }
.huid .rv .prow .lijn-kol .pijl { font-size: 16px; }
.huid .rv .fimg { width: 40px; height: 40px; border-radius: var(--r2); background: var(--grijs-100); border: 1px solid var(--rand2); flex: none; overflow: hidden; }
.huid .rv .fimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.huid .rv .kl { display: inline-block; min-width: 64px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: transparent; color: var(--tekst); font-weight: 500; }
.huid .rv .kl.sterk { font-weight: 600; }
.huid .rv .kl.rood { background: var(--koraal-100); color: var(--koraal-900); }
.huid .rv .kl.groen { background: var(--groen-100); color: var(--groen-900); }
.huid .rv .spark-lijn { fill: none; stroke: var(--blauw-500); stroke-width: 3.5; stroke-linejoin: round; }
.huid .rv .spark-punt { fill: var(--blauw-900); }

/* Review behandelen */
.huid .rv .review { border: 1px solid var(--rand); border-radius: var(--r); background: var(--vlak); padding: 16px 18px; }
.huid .rv .review .kop-regel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.huid .rv .review .tekst-groot { margin-top: 12px; font-size: 14px; line-height: 1.55; }
.huid .rv .review .tekst-groot.telling { color: var(--grijs); }
.huid .rv .review .feiten { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; font-size: 12.5px; }
.huid .rv .spacer { flex: 1; }
.huid .rv .quote { padding: 8px 12px; background: var(--blauw-100); border-radius: var(--r2); font-size: 13px; line-height: 1.5; }
.huid .rv textarea.veld.reactie { min-height: 150px; line-height: 1.5; }
.huid .rv .reactie-acties { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.huid .rv .reactie-acties .vinkje { font-size: 12px; color: var(--grijs); }
.huid .rv .reactie-hint { margin-top: 8px; font-size: 12px; }
.huid .rv .keuzes { display: flex; flex-direction: column; gap: 6px; }
.huid .rv .links-rij { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; }
.huid .rv .links-rij a { color: var(--blauw-900); cursor: pointer; }
.huid .rv .kleintekst { margin-top: 10px; font-size: 12px; }
.huid .rv .uitleg { font-size: 12.5px; color: var(--tekst); }
.huid .rv .artikelrij { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.huid .rv .artikelrij .naam { font-weight: 600; font-size: 13px; }
.huid .rv .artikelrij .k { font-size: 12px; }

/* Productfamilie */
.huid .rv .grootscore { display: flex; align-items: baseline; gap: 8px; }
.huid .rv .grootscore .g { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.huid .rv .verd { display: grid; grid-template-columns: 28px 1fr 92px; gap: 8px; align-items: center; font-size: 12px; margin-top: 4px; }
.huid .rv .verd .bar { height: 7px; border-radius: 4px; background: var(--grijs-300); overflow: hidden; }
.huid .rv .verd .bar i { display: block; height: 100%; }
.huid .rv .verd .r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.huid .rv .verd .s5 { background: var(--blauw-900); }
.huid .rv .verd .s4 { background: var(--blauw-700); }
.huid .rv .verd .s3 { background: var(--blauw-500); }
.huid .rv .verd .s2 { background: var(--blauw-300); }
.huid .rv .verd .s1 { background: var(--koraal-900); }
.huid .rv .lijngrafiek { margin-top: 12px; }
.huid .rv .lijngrafiek svg { width: 100%; height: 150px; }
.huid .rv .lijngrafiek .as { font-size: 10px; fill: var(--grijs); }
.huid .rv .lijngrafiek .raster { stroke: var(--grijs-300); }
.huid .rv .lijngrafiek .reeks { fill: none; stroke: var(--blauw-900); stroke-width: 2; }
.huid .rv .lijngrafiek .punt-c { fill: var(--blauw-900); }
.huid .rv .punt { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; margin-top: 8px; }
.huid .rv .punt .bar { height: 8px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; }
.huid .rv .punt .bar i { display: block; height: 100%; }
.huid .rv .punt.plus .bar i { background: var(--groen-700); }
.huid .rv .punt.min .bar i { background: var(--koraal-900); }
.huid .rv .punt b { font-variant-numeric: tabular-nums; text-align: right; }
.huid .rv .retr { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand2); font-size: 12.5px; }
.huid .rv .retr:first-of-type { border-top: 0; }
.huid .rv .chips-rij { margin-top: 10px; font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.huid .rv .knoppen-rij { display: flex; gap: 8px; margin-top: 10px; }
.huid .rv .maanden { display: grid; grid-template-columns: 110px repeat(6, minmax(0, 1fr)); gap: 8px; font-size: 12.5px; align-items: center; }
.huid .rv .maanden .c { text-align: center; }
.huid .rv .maanden .c.sterk { font-weight: 600; }
.huid .rv .maanden .bar { height: 8px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; }
.huid .rv .maanden .bar i { display: block; height: 100%; }
.huid .rv .maanden .bar.plus i { background: var(--groen-700); }
.huid .rv .maanden .bar.min i { background: var(--koraal-900); }
.huid .rv .batchzin { margin-top: 10px; font-size: 12.5px; }
.huid .rv .batchzin a { color: var(--blauw-900); cursor: pointer; }
.huid .rv .voetregel { padding: 10px 16px; border-top: 1px solid var(--rand2); }

/* Alle reviews: de filterregel en het bladeren */
.huid .rv .filterregel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.huid .rv .filterregel .veld { width: auto; min-height: 32px; font-size: 13px; }
.huid .rv .filterregel input.veld { min-width: 236px; }
.huid .rv .keuze { position: relative; display: inline-flex; }
.huid .rv .keuze::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tekst); font-size: 13px; }
.huid .rv .filterregel select.veld { appearance: none; -webkit-appearance: none; padding-right: 30px; field-sizing: content; cursor: pointer; }
.huid .rv .filterregel select.veld.b130 { min-width: 130px; }
.huid .rv .filterregel select.veld.b120 { min-width: 120px; }
.huid .rv .filterregel select.veld.b110 { min-width: 110px; }
.huid .rv .filterregel .tussen { width: 10px; }
.huid .rv .bladeren { display: flex; gap: 6px; align-items: center; }
.huid .rv .bladeren button { background: none; border: 0; padding: 0 3px; font: inherit; color: var(--tekst); cursor: pointer; }
.huid .rv .bladeren button.aan { color: var(--blauw-900); font-weight: 600; }
.huid .rv .bladeren button[disabled] { color: var(--grijs); cursor: default; }

/* Instellingen */
.huid .rv .verbruik { display: flex; gap: 12px; margin-top: 10px; font-size: 12.5px; align-items: center; }
.huid .rv .verbruik .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; }
.huid .rv .verbruik .bar i { display: block; height: 100%; background: var(--blauw-900); }

.huid .rv .laden { padding: 20px 0; color: var(--grijs); }
.huid .rv .melding { margin-top: 14px; }