/**
 * 8.467.22 (staging): één scorepil op elk productbeeld, zie includes/class-score.php.
 * Kleur en notatie van de pil op /thuisbatterij/ en de dealkaarten. Drie maten. Uit met optie tbg_score_uniform = uit of ?score=oud.
 */
.tbg-scorepil.tbg-scorepil {
    display: inline-flex !important; align-items: baseline !important; gap: 1px !important;
    min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 4px 8px !important;
    border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
    background: color-mix(in srgb, #10b981, #000 22%) !important; color: #fff !important;
    font: 800 14px/1.1 var(--tbg-ds-font-tekst, "Manrope", system-ui, sans-serif) !important;
    font-variant-numeric: tabular-nums; letter-spacing: 0 !important; white-space: nowrap; pointer-events: none;
}
.tbg-scorepil.tbg-scorepil > :first-child { font: inherit !important; color: inherit !important; }
.tbg-scorepil.tbg-scorepil > small, .tbg-scorepil.tbg-scorepil > .tbg-card__score-max {
    display: inline !important; font-size: 12px !important; font-weight: 600 !important; color: inherit !important; opacity: .85;
}
.tbg-scorepil.tbg-scorepil--vlak { position: absolute !important; z-index: 3 !important; top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; }

/* groot: productvlak bovenaan de productpagina */
.tbg-scorepil.tbg-scorepil--groot { padding: 5px 10px !important; font-size: 16px !important; }
.tbg-scorepil.tbg-scorepil--groot > small { font-size: 13px !important; }
.tbg-scorepil.tbg-scorepil--groot.tbg-scorepil--vlak { top: 14px !important; right: 14px !important; }

/* klein: tegels tot 120 px (het tegelscript zet dan .tbg-tegel--klein) en losse kleine vlakken */
.tbg-scorepil.tbg-scorepil--klein, .tbg-tegel--klein .tbg-scorepil.tbg-scorepil { padding: 2px 6px !important; border-radius: 6px !important; font-size: 12px !important; }
.tbg-scorepil.tbg-scorepil--klein > :is(small, .tbg-card__score-max), .tbg-tegel--klein .tbg-scorepil.tbg-scorepil > :is(small, .tbg-card__score-max) { font-size: 11px !important; }
.tbg-tegel--klein .tbg-scorepil.tbg-scorepil--vlak, .tbg-scorepil.tbg-scorepil--klein.tbg-scorepil--vlak { top: 6px !important; right: 6px !important; }

/* Vergelijkingenoverzicht: duim van 60 px, de pil blijft onder het beeld */
.tbgv__imgwrap .tbg-scorepil.tbg-scorepil { position: absolute !important; top: auto !important; bottom: -9px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); }

html[data-theme="dark"] .tbg-scorepil.tbg-scorepil { background: #26c98e !important; color: #0b1410 !important; }

/* Reviewsamenvatting: de scorering blijft als detailweergave, in de kleur van de pil */
#reviewbox .gb-element-636a37c0.rating-score { color: color-mix(in srgb, #10b981, #000 22%) !important; }
html[data-theme="dark"] #reviewbox .gb-element-636a37c0.rating-score { color: #26c98e !important; }

/* Archief: de grid-CSS werkt met een id; hier dezelfde regels op dat niveau */
#tbg-grid-app .tbg-scorepil.tbg-scorepil > .tbg-card__score-num { font-size: 14px !important; font-weight: 800 !important; color: inherit !important; }
#tbg-grid-app .tbg-scorepil.tbg-scorepil > .tbg-card__score-max { display: inline !important; font-size: 12px !important; font-weight: 600 !important; color: inherit !important; }
#tbg-grid-app .tbg-tegel--klein .tbg-scorepil.tbg-scorepil > .tbg-card__score-num { font-size: 12px !important; }
#tbg-grid-app .tbg-tegel--klein .tbg-scorepil.tbg-scorepil > .tbg-card__score-max { font-size: 11px !important; }
#tbg-grid-app .tbg-scorepil.tbg-scorepil--vlak { top: 12px !important; right: 12px !important; }
#tbg-grid-app .tbg-tegel--klein .tbg-scorepil.tbg-scorepil--vlak { top: 6px !important; right: 6px !important; }