/* supplementscore.eu · score-pagina's (productpagina, merkpagina, uitslagentabel), letter A van Mathijs, 29 okt 2026.
   Bouwt op site.css: zelfde variabelen, knoppen, paginakop, blok en tabel. Alleen wat hier nieuw is staat hier. */

/* ---------- productpagina: letter, drie tegels, knop ---------- */
.score-kop{padding-bottom:clamp(28px,3vw,44px);max-width:none}
.score-kop h1{font-size:clamp(30px,3.8vw,54px);max-width:22ch}
.score-blad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
.score-beeld{margin:0;background:var(--salie);border-radius:var(--r);padding:clamp(24px,3vw,44px);display:grid;place-items:center;min-height:320px}
.score-beeld img{width:100%;max-width:380px;height:auto;max-height:420px;object-fit:contain;mix-blend-mode:multiply}
.score-beeld.leeg{background:var(--papier);color:var(--grijs);font-size:14px;text-align:center}
.score-kern{display:grid;gap:18px;align-content:start}
.score-kern .ss-tag{height:44px;font-size:16px;padding-right:18px}
.score-kern .ss-tag img{height:44px}
.score-kern .zin{font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--inkt);max-width:46ch;text-wrap:pretty}
.tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tegels div{background:var(--salie);border-radius:18px;padding:16px 14px;display:grid;gap:4px;align-content:start}
.tegels b{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--inkt);overflow-wrap:anywhere}
.tegels span{font-size:12.5px;color:var(--grijs);line-height:1.35}
.tegels .ok{color:var(--mintd)}
.score-kern .knoppen{display:flex;flex-wrap:wrap;gap:10px}
.score-kern .knoppen .knop{height:48px;font-size:15px}
details.oordeel{border-top:1px solid var(--lijn);padding-top:14px}
details.oordeel summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15.5px;font-weight:500}
details.oordeel summary::-webkit-details-marker{display:none}
details.oordeel summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--lijn2);display:grid;place-items:center;transition:transform .45s var(--uit),background .3s,color .3s}
details.oordeel summary i::before{content:"+";font-weight:400;font-size:19px;line-height:1;transform:translateY(-1px)}
details.oordeel[open] summary i{transform:rotate(45deg);background:var(--inkt);color:#fff;border-color:var(--inkt)}
details.oordeel p{margin-top:12px;color:var(--tekst);font-size:15.5px;line-height:1.6;max-width:66ch}
details.oordeel p a{border-bottom:1px solid var(--lijn2)}
.score-kern .kleinst{font-size:13px;color:var(--grijs);line-height:1.55;max-width:66ch}
.score-verder{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1px solid var(--lijn);font-size:15px;font-weight:500}
.score-verder a{display:inline-flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--lijn2);padding-bottom:2px;transition:border-color .3s}
.score-verder a:hover{border-color:var(--inkt)}

/* ---------- merkpagina: verdeling en categorieën ---------- */
.balk{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;max-width:720px}
.balk span{display:block;height:100%}
.balk-uitleg{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:13px;color:var(--grijs);margin-top:10px}
.balk-uitleg b{color:var(--inkt);font-weight:500}
.cats{display:grid;max-width:720px;margin-top:clamp(20px,2.5vw,32px)}
.cats li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--lijn);font-size:16px;font-weight:500;transition:color .3s}
.cats li:last-child a{border-bottom:1px solid var(--lijn)}
.cats li a:hover{color:var(--mintd)}
.cats li small{display:block;font-size:13px;color:var(--grijs);font-family:var(--mono);font-weight:400;margin-top:2px}
.cats .lts{display:flex;gap:4px}
.cats .lts img{height:24px;width:auto}
.lt{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap}
.lt img{height:26px;width:auto}

/* ---------- uitslagentabel ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2vw,26px)}
.chips button{appearance:none;border:1.5px solid var(--lijn2);background:none;border-radius:999px;height:38px;padding:0 16px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--tekst);transition:background .3s,color .3s,border-color .3s;display:inline-flex;align-items:center;gap:8px}
.chips button img{height:22px;width:auto}
.chips button.aan{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.score-tabel td:first-child a{border-bottom:1px solid transparent;transition:border-color .3s}
.score-tabel td:first-child a:hover{border-color:var(--inkt)}
.score-tabel td.mono{white-space:normal}
.score-tabel tr[hidden]{display:none}
.score-tabel .lt img{height:24px}
.score-leeg{padding:24px 0;color:var(--grijs);font-size:14.5px}

@media (max-width:900px){
  .score-blad{grid-template-columns:minmax(0,1fr)}
  .score-beeld{min-height:0;padding:20px}
  .score-beeld img{max-height:300px}
}
@media (max-width:640px){
  .tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tegels div{padding:12px 10px}
  .tegels b{font-size:17px}
  .score-kern .knoppen .knop{width:100%}
}