/**
 * Producttegels (8.453.0, staging): bijgesneden productfoto op een vaste vloer, standaard de groene
 * variant g2. Los van het ontwerpsysteem; uit met ?tegel=uit. Zie includes/class-tegel.php.
 */
/* ============================================================
   12. PRODUCTTEGEL (?tegel=padell of ?tegel=echt)
   Vrijstaand, bijgesneden beeld op een licht verloop met een zachte
   vloerschaduw. De maat zet class-tegel.php (script): alle producten op
   dezelfde vloer, even groot of op echte maat.
   ============================================================ */
html.tbg-tegel-padell {
    --tbg-ds-tegel-vlak: radial-gradient(42% 7% at 50% 86%, rgb(28 27 24 / .16), transparent 72%), linear-gradient(180deg, #ffffff 0%, #f1eee8 100%);
}
html.tbg-tegel-padell[data-theme="dark"] {
    --tbg-ds-tegel-vlak: radial-gradient(42% 7% at 50% 86%, rgb(0 0 0 / .5), transparent 72%), linear-gradient(180deg, #24272b 0%, #1b1d20 100%);
}
/* Groene varianten (?tegel=g1|g2|g3): alleen tinten van groen-vlak en mint, laag gehouden zodat het product de held blijft */
html.tbg-tegel-g1 {
    --tbg-ds-tegel-vlak: radial-gradient(42% 7% at 50% 86%, rgb(28 27 24 / .14), transparent 72%), linear-gradient(0deg, #e3f4ec 0%, #f2faf6 45%, #ffffff 100%);
}
html.tbg-tegel-g2 {
    --tbg-ds-tegel-vlak:
        radial-gradient(42% 7% at 50% 86%, rgb(28 27 24 / .13), transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='1.2' stroke-opacity='.16'%3E%3Cpath d='M230 300 C 300 220, 340 150, 400 120'/%3E%3Cpath d='M270 300 C 330 235, 360 185, 400 165'/%3E%3Cpath d='M310 300 C 350 255, 375 220, 400 210'/%3E%3C/g%3E%3C/svg%3E") right bottom / 100% 100% no-repeat,
        radial-gradient(70% 60% at 100% 100%, rgb(16 185 129 / .16), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f5faf7 100%);
}
html.tbg-tegel-g3 {
    --tbg-ds-tegel-vlak:
        radial-gradient(40% 6% at 50% 84%, rgb(28 27 24 / .12), transparent 72%),
        radial-gradient(60% 34% at 50% 88%, #d3efe1 0, #e3f5ec 55%, rgb(227 245 236 / 0) 72%),
        linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}
html.tbg-tegel-g1[data-theme="dark"] {
    --tbg-ds-tegel-vlak: radial-gradient(42% 7% at 50% 86%, rgb(0 0 0 / .5), transparent 72%), linear-gradient(0deg, rgb(38 201 142 / .12) 0%, #1d2023 60%, #1b1d20 100%);
}
html.tbg-tegel-g2[data-theme="dark"] {
    --tbg-ds-tegel-vlak:
        radial-gradient(42% 7% at 50% 86%, rgb(0 0 0 / .5), transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2326c98e' stroke-width='1.2' stroke-opacity='.18'%3E%3Cpath d='M230 300 C 300 220, 340 150, 400 120'/%3E%3Cpath d='M270 300 C 330 235, 360 185, 400 165'/%3E%3Cpath d='M310 300 C 350 255, 375 220, 400 210'/%3E%3C/g%3E%3C/svg%3E") right bottom / 100% 100% no-repeat,
        radial-gradient(70% 60% at 100% 100%, rgb(38 201 142 / .14), transparent 70%),
        linear-gradient(180deg, #202326 0%, #1b1d20 100%);
}
html.tbg-tegel-g3[data-theme="dark"] {
    --tbg-ds-tegel-vlak:
        radial-gradient(40% 6% at 50% 84%, rgb(0 0 0 / .5), transparent 72%),
        radial-gradient(60% 34% at 50% 88%, rgb(38 201 142 / .18) 0, rgb(38 201 142 / .08) 55%, transparent 72%),
        linear-gradient(180deg, #202326 0%, #1b1d20 100%);
}
/* Witte productachtergronden vallen weg op een gekleurde tegel */
/* (multiply alleen bij foto's met een witte achtergrond, zie data-tbg-wit) */
html[class*="tbg-tegel-g"] .tbg-dd-hero .tbg-dd-kaart--ft .tbg-dd-kaart__tegel { background: var(--tbg-ds-tegel-vlak) !important; }

html.tbg-tegel-padell .tbg-tegel { position: relative !important; overflow: hidden; background: var(--tbg-ds-tegel-vlak) !important; }
html.tbg-tegel-padell .tbg-tegel > a { position: static !important; }
html.tbg-tegel-padell img.tbg-tegel__img {
    position: absolute !important; left: 50% !important; top: auto !important; transform: translateX(-50%);
    max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
    object-fit: contain; border-radius: 0 !important; background: none !important;
    filter: drop-shadow(0 8px 10px rgb(28 27 24 / .14));
}
html.tbg-tegel-padell:not([data-theme="dark"]) img.tbg-tegel__img[data-tbg-wit] { mix-blend-mode: multiply; filter: none; }
/* Homepage: Populaire thuisbatterijen en Recent toegevoegd */
html.tbg-tegel-padell a.gb-loop-item-bd34ac37 > div:first-child,
html.tbg-tegel-padell a.gb-loop-item-rc-card > div:first-child {
    aspect-ratio: 4 / 3; height: auto !important; border-radius: var(--tbg-ds-r-tegel, 14px); margin: 8px 8px 0;
}
/* Toplijst: top 3 en productblokken */
html.tbg-tegel-padell .tbg-t3 .tbg-t3__img { border-radius: var(--tbg-ds-r-tegel, 14px); }
html.tbg-tegel-padell .tbg-4a .tbg-4a__shot { border-radius: var(--tbg-ds-r-tegel, 14px); }
/* Vergelijking (vs-pagina) bovenaan: de link om de foto staat in een gecentreerde kolom en had geen eigen maat,
   dus klapte hij met de absolute tegelfoto dicht tot 0x0 (8.409.85). Vaste breedte en verhouding, geen auto-marge (die heft stretch op). */
html.tbg-tegel-padell :is(.gb-loop-item-vx3-lia, .gb-loop-item-vx3-lib) > a { display: block; width: 100%; max-width: 240px; aspect-ratio: 4 / 3; height: auto; border-radius: var(--tbg-ds-r-tegel, 14px); }
@media (max-width: 767px) { html.tbg-tegel-padell :is(.gb-loop-item-vx3-lia, .gb-loop-item-vx3-lib) > a { max-width: 150px; } }


/* Overal op de site (8.453.0): kleine tegels in lijsten en tabellen */
html.tbg-tegel-padell .tbg-tegel.tbg-tegel--klein { border-radius: 8px; }
html.tbg-tegel-padell .tbg-tegel--klein img.tbg-tegel__img { filter: drop-shadow(0 3px 4px rgb(28 27 24 / .14)); }
html.tbg-tegel-padell[data-theme="dark"] .tbg-tegel--klein img.tbg-tegel__img { filter: none; }
/* Archief, zoekresultaten, merkpagina, vergelijking, prijsindex: de bestaande vlakken krijgen de tegel */
html.tbg-tegel-padell :is(.tbg-card__visual, .gb-element-brand-mod-img, .tbg-battery-img, .tbg-pil__foto, .tbg-rvs-img, .tbg-gt-thumb, .tbg-tlc__shot).tbg-tegel { padding: 0 !important; }
html.tbg-tegel-padell .gb-element-brand-mod-img.tbg-tegel { border-radius: var(--tbg-ds-r-tegel, 14px); }
html.tbg-tegel-padell .tbg-tegel :is(.tbg-card__img, .tbg-card__imglink) { position: static !important; background: none !important; }
/* Zijbalkkaart productpagina: het beeld is zelf het vlak */
html.tbg-tegel-padell .gb-element-sb100000 img[data-tbg-tegel] { background: var(--tbg-ds-tegel-vlak) !important; object-fit: contain; padding: 14px 24px 18px; box-sizing: border-box; }
html.tbg-tegel-padell:not([data-theme="dark"]) .gb-element-sb100000 img[data-tbg-wit] { mix-blend-mode: multiply; }

/* Reviewbox: alleen het vlak, geen clipping (de scorecirkel steekt bewust buiten de foto uit) */
html.tbg-tegel-padell #reviewbox .gb-element-ef538943 { background: var(--tbg-ds-tegel-vlak) !important; }
/* 8.467.21: reviewkaart op mobiel. Het productvlak over de volle breedte bovenaan de kaart (de kaart rondt de hoeken af),
   het tegelscript zet het product op de vloer (class-tegel.php, alleen tot 640 px), de scorering linksboven in het vlak,
   merk, naam en "Getest door" links uitgelijnd met de award rechts ernaast. Desktop blijft gelijk. */
@media (max-width: 640px) {
    #reviewbox .gb-element-277be545 { gap: 18px; padding: 0 0 22px; }
    #reviewbox .gb-element-ef538943 { align-self: stretch; width: auto; max-width: none; height: auto; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--tbg-ds-lijn, #e8e3da); border-radius: 0; --tbg-tegel-opp: .36; }
    #reviewbox .gb-element-636a37c0 { top: 14px; left: 14px; width: 60px; height: 60px; }
    #reviewbox .gb-element-c02f9aa2 { align-self: stretch; padding: 0 20px; }
    #reviewbox .gb-element-rb7trij { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
    #reviewbox .gb-element-rb7tkol { flex: 1 1 auto; }
    #reviewbox .gb-element-6889f223 { justify-content: flex-start; margin-top: 12px; }
    #reviewbox .gb-text-046721e2 { font-size: 12px; }
    #reviewbox .gb-media-3d441f95 { width: 60px; }
}