/* VCTparts productpagina: aanvullingen op het ontwerp (vct-theme.css) voor de onderdelen van de eigenaar en de
   section-opbouw van het thema. Kleuren alleen via de variabelen van het ontwerp. */

/* ---- opbouw ----------------------------------------------------------------------------------------------------- */
.s-ptabs{display:contents}
.pdp-tabs{width:calc(100% - 40px);max-width:1200px;margin-left:auto;margin-right:auto}
.pdp-tabs[hidden]{display:none}
.pdp .bc span{color:var(--ink)}
.pdp-info section,.pdp-bun section,.pdp-rv section,.pdp-qa section,.pdp-fbr section{scroll-margin-top:calc(var(--hh,0px) + 64px)}
#p-oms,#p-pm{scroll-margin-top:calc(var(--hh,0px) + 64px)}
.pinfo.solo{grid-template-columns:minmax(0,1fr)}
.pinfo.solo .pom{max-width:860px}
.pinfo.pm-only{grid-template-columns:minmax(0,1fr)}
.rdm.rte{font-size:16px}
.rdm img{max-width:100%;height:auto}
.rmb[hidden]{display:none}

/* ---- galerij ---------------------------------------------------------------------------------------------------- */
.gal .main{position:relative}
/* Hoofdfoto vult de volle breedte van de galerij (melding Henk 22-10-2026: "hoofdafbeelding is niet volledige breedte").
   Het ontwerp gaf de foto op desktop de hoogte van het scherm min de kop, waardoor een vierkante foto smal in een brede
   kaart stond. Nu altijd vierkant op de breedte van de kolom. */
@media (min-width:901px){
  .gal .main{height:auto;max-height:none;min-height:0;aspect-ratio:1/1}
  /* De rij miniaturen blijft onder de hoofdfoto in beeld: is het scherm te laag voor een vierkant op de volle kolombreedte,
     dan wordt het vierkant zo groot als in beeld past (minstens 440px), gecentreerd; de foto vult het vierkant altijd. */
  .gal{--gw:min(100%,max(440px,calc(100vh - var(--hh,0px) - 200px)))}
  .gal .mainw,.gal .th{width:var(--gw);margin-inline:auto}
}
@media (min-width:901px){.gal{top:var(--gal-top,calc(var(--hh,0px) + 20px))}}
.gal .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.gal .main img[hidden]{display:none}
.gal .main .gal-v{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.gal .main img{transition:opacity .2s ease-out,transform .25s var(--ease-out)}
.gar.gp{left:12px}.gar.gn{right:12px}
.gar[hidden],.gcnt[hidden]{display:none}
.th button{position:relative;background:#fff}
.th-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;pointer-events:none}
.th-play svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--navy)}

/* ---- koopblok: titel, acties, verkocht ---------------------------------------------------------------------------- */
.info .br a{color:inherit}
.info .br a:hover{color:var(--acc)}
.rate .fs{font-size:16px}
.rate a{color:var(--ink)}
.pact{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0}
.pa{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;color:var(--mut);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .15s ease-out}
.pa svg{width:18px;height:18px}
.pa:hover{color:var(--ink)}
.pa.on,.pa[aria-pressed="true"]{color:var(--acc)}
.pa.on svg{fill:currentColor}
.psold{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14px;color:var(--ink)}
.psold-dot{position:relative;flex:none;width:8px;height:8px;border-radius:999px;background:var(--ok)}
.psold-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ok);opacity:.5;animation:psold 2.4s ease-out infinite}
@keyframes psold{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}
@media (max-width:900px){#prod .info>.pact{display:none}}

/* ---- varianten ------------------------------------------------------------------------------------------------- */
.pvar .opt{margin:18px 0}
.pvar .opt>label{display:flex;justify-content:flex-start;gap:6px}
.pvar .opt>label span{font-weight:400;color:var(--mut)}
.pvar .sl{width:100%;max-width:420px}
button.vb{border:0;background:none;padding:0;font:inherit;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;text-align:center}
.vb .ph{position:relative}
.vb.off{color:var(--mut)}
.chip.off{opacity:.55;text-decoration:line-through}
.vb:focus-visible,.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:12px}

/* LinkedOption (app block) in de vorm van het ontwerp (.vs met tegels .vb) */
.pdp-app:empty{display:none}
.pdp-app .vct-lo{display:grid;gap:16px}
.pdp-app .vct-lo__kop{display:flex;justify-content:space-between;font-weight:700;margin:0 0 8px;color:var(--ink);font-size:16px}
.pdp-app .vct-lo__lijst{display:flex!important;gap:10px!important;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px!important;margin:0!important;list-style:none;scrollbar-width:none}
.pdp-app .vct-lo__lijst::-webkit-scrollbar{display:none}
.pdp-app .vct-lo__lijst li{flex:0 0 72px;margin:0;padding:0;scroll-snap-align:start}
.pdp-app .vct-lo__tegel{display:block!important;width:auto!important;text-align:center;font-weight:700;font-size:13px;color:var(--ink)!important;text-decoration:none!important;border:0!important;background:none!important;padding:0!important;box-shadow:none!important;min-height:0!important}
.pdp-app .vct-lo__beeld{display:block!important;position:relative;width:auto!important;height:auto!important;aspect-ratio:1;border:2px solid var(--line)!important;border-radius:12px!important;margin:0 0 6px!important;background:#fff!important;overflow:hidden;transition:border-color .15s ease-out}
.pdp-app .vct-lo__beeld img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.pdp-app .vct-lo__tegel:hover .vct-lo__beeld{border-color:var(--mut)!important}
.pdp-app .vct-lo__tegel.is-huidig .vct-lo__beeld,.pdp-app .vct-lo__tegel[aria-current="page"] .vct-lo__beeld{border-color:var(--acc)!important}
.pdp-app .vct-lo__label{display:block;line-height:1.25;white-space:normal}
.pdp-app .vct-lo--knop .vct-lo__lijst li{flex:0 0 auto}
.pdp-app .vct-lo--knop .vct-lo__tegel{border:1.5px solid var(--line)!important;border-radius:12px!important;padding:9px 16px!important;background:#fff!important}
.pdp-app .vct-lo--knop .vct-lo__tegel.is-huidig{border-color:var(--acc)!important;background:var(--acc-soft)!important}
.pdp-app .vct-lo--kleur .vct-lo__beeld svg{width:100%;height:100%}
.pdp-linked[hidden]{display:none}
/* Varianten: kleinere kaartjes in een rij die van links naar rechts schuift, nooit onder elkaar (melding Henk 22-10-2026).
   Ook de tegels uit het app-block (de stijl van de engine zet flex-wrap:wrap en een breedte van 80px). */
.vs,.pdp-app .vct-lo__lijst{flex-wrap:nowrap!important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.vb{flex:0 0 72px;font-size:13px;line-height:1.25}
button.vb{font-size:13px}
.vb .ph{margin-bottom:5px}

/* ---- prijs en betaalregels ------------------------------------------------------------------------------------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.price strong{margin-right:2px}
.price s{margin-left:0}
.price s:empty,.psave:empty{display:none}
.price small{flex-basis:100%}
.psave{align-self:center;background:var(--acc-soft);color:var(--acc);font-weight:800;font-size:13px;border-radius:999px;padding:4px 10px}
.pworth{color:var(--mut);font-size:16px}
details.kl{display:block;border:0!important;padding:0!important;margin:12px 0}
details.kl[hidden]{display:none}
details.kl summary{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 10px;font-weight:400;font-size:15px;pointer-events:auto;padding:0}
details.kl summary::after{display:none!important}
details.kl .k{background:#ffb3c7;color:var(--navy);padding:4px 10px;border-radius:6px;font-weight:800;font-size:14px}
details.kl .k3{background:var(--soft);border:1px solid var(--line)}
details.kl .k-logo{display:block;flex:none;width:32px;height:24px;border-radius:4px}
.kl-q{font-style:normal;color:var(--mut);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
details.kl p{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13px;line-height:1.5}
.info-i{display:flex;gap:6px}
.pcut{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:14px;color:var(--ink)}
.pcut svg{width:18px;height:18px;color:var(--acc);flex:none}
.pcut b{font-weight:800}

/* ---- voorraad en levering (.dlv) -------------------------------------------------------------------------------- */
.dlv-v{display:grid;gap:3px}
.dlv-v[hidden]{display:none}
.dlv-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dlv b{font-weight:800}
.dlv-s{color:var(--ink)}
.dlv-s strong{font-weight:700}
.dlv-p{color:var(--ok);font-weight:600}
.dlv-p strong{color:var(--ok)}
.dlv-cd{display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlv-cd[hidden]{display:none}
.dlv-cd svg{width:13px;height:13px;color:var(--cta)}
.dlv-low{display:block;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.dlv-low strong{color:var(--acc)}
.dlv.no .dlv-s strong{color:var(--ink)}
.dlv-fs{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.dlv-fs[hidden]{display:none}
.dlv-fs strong{font-weight:800}
.dlv-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.dlv-bar i{display:block;height:100%;width:0;background:var(--ok);border-radius:999px;transition:width .4s var(--ease-out)}
.dlv-fs.done{color:var(--ok);font-weight:600}
.dlv-fs.done .dlv-bar{display:none}
.dlv-pan{margin-top:8px;font-size:14px;color:var(--ink)}
.dlv-pan[hidden]{display:none}
/* STAP 3 punt 8: bij een uitverkochte variant de regel van het paneel (verwachte verzenddag) vooraf een vaste plek geven, zodat de
   koopknop niet verspringt als vct-levertijd.js de tekst zet. Zonder datum blijft een lege regel staan (geen verschuiving). */
.dlv:has(>.dlv-v[data-stock="0"]:not([hidden]))>.dlv-pan[hidden][data-wacht],.vship[data-state="out"]+.dlv-pan[hidden][data-wacht],.vship[data-state="backorder"]+.dlv-pan[hidden][data-wacht]{display:block!important;visibility:hidden;min-height:1.5em}
/* STAP 3 punt 7: het cadeau staat nu onder de koopknop */
.buy+.vg-pp{margin:12px 0 4px}
.dlv-line{padding:14px 16px}
.dlv-r{display:flex;align-items:center;gap:10px;margin:0}
.dlv-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(26,138,74,.2)}
.dlv-dot.wait{background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}

/* ---- vervanger, notities, terug op voorraad ------------------------------------------------------------------- */
.prepl{margin:16px 0}
.prepl-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-weight:600;font-size:14px}
.prepl-b{background:var(--acc-soft);color:var(--acc);font-weight:800;font-size:12px;border-radius:999px;padding:3px 10px}
.prepl-k{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;transition:border-color .15s ease-out}
.prepl-k:hover{border-color:var(--navy)}
.prepl-k .ph{width:80px;height:80px;border-radius:12px}
.prepl-i{display:grid;gap:4px}
.prepl-i .nm{font-size:14px;-webkit-line-clamp:2}
.prepl-go{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:700;font-size:14px}
.prepl-go svg{width:16px;height:16px}
.pnote{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--acc-soft);font-size:14px;line-height:1.45}
.pnote svg{width:18px;height:18px;flex:none;color:var(--acc);margin-top:1px}
.pterug:empty{display:none}
.pterug{margin:14px 0}

/* ---- aanbevolen accessoires (.addon) --------------------------------------------------------------------------- */
.addon{margin:20px 0 6px}
.addon[hidden]{display:none}
.pao{display:grid;gap:10px}
.pao[hidden]{display:none}
.sc.sk{min-height:96px;background:var(--soft);border-color:var(--soft)}
.sc .ph{display:block}
.sc.lock{opacity:.5}
.sc.deal,.sc.svc{margin-top:10px}
.sc.svc .svc-ic{display:grid;place-items:center;background:var(--acc-soft);color:var(--acc)}
.sc.svc .svc-ic svg{width:28px;height:28px}
.sc-save{color:var(--sale)!important;font-weight:700!important}
.sc .adb{display:inline-block}
.adn{margin:8px 0 0;font-size:13px;color:var(--mut)}
.adn[hidden]{display:none}

/* ---- staffel --------------------------------------------------------------------------------------------------- */
.ptiers{margin:20px 0}
.ptiers>b{display:block;font-weight:700;margin-bottom:8px}
.ptiers .tiers{margin-top:2px}
.ptiers .tier{padding-top:14px}
.ptiers-n{margin:8px 0 0;font-size:13px;color:var(--mut)}

/* ---- koopknop en extra knoppen ---------------------------------------------------------------------------------- */
.buy:not(:has(.qty)){grid-template-columns:minmax(0,1fr)}
.qty button{display:grid;place-items:center;color:var(--ink)}
.qty button svg{width:16px;height:16px}
.qty.lock{opacity:.5;pointer-events:none}
#add[aria-busy="true"],#add2[aria-busy="true"],#fbtadd[aria-busy="true"]{opacity:.7;pointer-events:none}
.ppre{margin:-4px 0 12px;font-size:14px;color:var(--mut)}
.ppre p{margin:0}
.ppre[hidden]{display:none}
.pquick,.plink{width:100%;margin:0 0 12px;padding:14px;font-size:16px}
.pquick[hidden]{display:none}
.pquick[aria-busy="true"]{opacity:.7;pointer-events:none}

/* inbouwservice: schakelaar */
.pinst{position:relative;margin:16px 0;border:1.5px solid var(--line);border-radius:12px;padding:14px;transition:border-color .15s ease-out,background-color .15s ease-out}
.pinst:has(input:checked){border-color:var(--acc);background:#fffaf6}
.pinst-m{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;cursor:pointer;padding-right:34px}
.pinst-cb{position:absolute;opacity:0;width:1px;height:1px}
.pinst-sw{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line);transition:background-color .15s ease-out}
.pinst-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(4,10,34,.25);transition:transform .2s var(--ease-out)}
.pinst-cb:checked+.pinst-sw{background:var(--acc)}
.pinst-cb:checked+.pinst-sw::after{transform:translateX(18px)}
.pinst-cb:focus-visible+.pinst-sw{outline:2px solid var(--acc);outline-offset:2px}
.pinst-ic{width:36px;height:36px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center}
.pinst-t{display:grid;line-height:1.3}
.pinst-t small{color:var(--mut)}
.pinst-p{font-weight:800;white-space:nowrap}
.pinst-i{position:absolute;top:50%;right:12px;margin-top:-30px}
.pinst-n{display:flex;align-items:center;gap:6px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.pinst-n svg{width:16px;height:16px;flex:none}

/* AMiO-backordermelding (in het modaal venster) */
.amio-bo .amio-t{font-size:20px;margin:0 0 8px;line-height:1.25}
.amio-bo p{margin:0 0 14px;color:var(--mut);font-size:15px}
.amio-bo p strong{color:var(--ink)}
.amio-d{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.amio-d svg{color:var(--acc);flex:none}
.amio-d b{display:block}
.amio-d small{color:var(--mut)}
.amio-c{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.amio-c svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px}
.amio-bo .btn{width:100%}

/* ---- betaalmethoden, fittingzoeker, vertrouwen ---------------------------------------------------------------------- */
.pmi{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:6px;margin:4px 0 14px}
.pmi img{width:auto;height:22px;max-width:12%;flex:0 1 auto}
.pfit:empty,.pfind:empty{display:none}
.sb-fit{display:block;color:var(--ok);font-size:13px;font-weight:600}
.sb-fit[hidden]{display:none}
.tl li a{color:inherit}
.tl li a:hover b{color:var(--acc)}
.tl li img.tlw{width:auto;height:14px}
.tlr{flex-wrap:wrap;color:var(--mut);font-size:14px}
.tlr .fs{font-size:14px}
.tlr-rec{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--ok);font-weight:600}
.tlr-rec svg{width:14px;height:14px}
.pfc{border:1px solid var(--line)!important;border-radius:12px;margin:16px 0!important;padding:12px 14px!important}
.pusp{display:flex;gap:8px;align-items:flex-start;margin:8px 0;font-size:15px}
.pusp svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:2px}
.pusp p{margin:0}
.pship .rte{color:var(--mut);font-size:15px}
.pship .rte p{margin:8px 0 0}
.pcode{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0;font-size:13px;color:var(--mut)}
.pcode [hidden]{display:none}
.piso{display:flex;align-items:center;gap:16px;margin:20px 0}
.piso img{flex:none;width:72px;height:auto}
.piso p{margin:0;color:var(--mut);font-size:14px;line-height:1.5}
.piso strong{color:var(--ink)}
.ptxt{margin:12px 0}

/* ---- vaste koopbalk ------------------------------------------------------------------------------------------------- */
.sbar .chatb[hidden]{display:none}
.sbar .sbw:has(.chatb[hidden]){grid-template-columns:56px minmax(0,1fr) auto auto}
@media (max-width:900px){.sbar .sbw:has(.chatb[hidden]){grid-template-columns:minmax(0,1fr)}}
.sb-im .ph img{padding:8%}

/* ---- vaak samen gekocht ------------------------------------------------------------------------------------------- */
.bfc.sk{min-height:320px;background:var(--soft);border-color:var(--soft);cursor:default}
.bfc.sk .ph{background:transparent}
.bfc .ph{display:block}
#p-bun[hidden]{display:none}
.mi .mi-go{margin-top:12px}

/* ---- reviews (ontwerp .rv met de widget van Judge.me) ------------------------------------------------------------- */
.rv-main{min-width:0}
.rv-sum .stars .fs{font-size:22px;letter-spacing:2px}
.rv-sum small{color:var(--mut)}
.dist[hidden],.rvph[hidden],.rv-more[hidden],.rv-empty[hidden]{display:none}
.dist button em{font-style:normal}
.dist button:disabled{opacity:.45;cursor:default}
.dist button.on b{color:var(--acc)}
.rv-big{display:block;width:100%;height:auto;border-radius:12px}
.rv-wi p{margin:0 0 16px;color:var(--mut)}
.rv-note{display:flex;gap:10px;align-items:flex-start;margin:28px 0 0;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:14px;color:var(--mut);line-height:1.5}
.rv-note svg{width:18px;height:18px;flex:none;color:var(--ok);margin-top:2px}
.rv-note strong{color:var(--ink)}
.rv-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* widget van Judge.me: eigen kop en samenvatting staan links, de reviews als kaarten .rvc */
.rv-app .jdgm-widget{margin:0!important;padding:0!important;max-width:none!important;font:inherit!important;color:var(--ink)!important}
.rv-app .jdgm-rev-widg{padding:0!important;border:0!important;margin:0!important}
.rv-app .jdgm-rev-widg__title,.rv-app .jdgm-rev-widg__summary,.rv-app .jdgm-histogram,.rv-app .jdgm-rev-widg__sort-wrapper,.rv-app .jdgm-widget-actions-wrapper,.rv-app .jdgm-write-rev-link,.rv-app .jdgm-rev-widg__summary-inner{display:none!important}
.rv-app .jdgm-rev-widg__header{border:0!important;padding:0!important;margin:0!important}
.rv-app .jdgm-rev-widg__reviews{display:grid;gap:0}
.rv-app .jdgm-rev{border-top:1px solid var(--line)!important;padding:20px 0!important;margin:0!important;display:block}
.rv-app .jdgm-rev:first-child{border-top:0!important;padding-top:0!important}
.rv-app .jdgm-rev[hidden]{display:none!important}
.rv-app .jdgm-rev__header{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av au vf" "av ts vf" "st st st";column-gap:12px;row-gap:2px;align-items:center;margin-bottom:8px}
.rv-app .jdgm-rev__header .av{grid-area:av}
.rv-app .jdgm-rev__author{grid-area:au;font-weight:700;color:var(--ink);font-size:16px;line-height:1.2}
.rv-app .jdgm-rev__timestamp{grid-area:ts;color:var(--mut);font-size:13px}
.rv-app .jdgm-rev__buyer-badge{grid-area:vf;display:inline-flex;align-items:center;gap:4px;color:var(--ok)!important;background:none!important;font-size:13px;font-weight:600;padding:0!important;border:0!important}
.rv-app .jdgm-rev__buyer-badge::before{content:"✓";font-weight:800}
.rv-app .jdgm-rev__rating{grid-area:st;margin-top:6px;color:#fbbc05!important;letter-spacing:1px;font-size:16px}
.rv-app .jdgm-rev__rating .jdgm-star,.rv-app .jdgm-star{color:#fbbc05!important}
.rv-app .jdgm-rev__title{display:block;font-size:16px;font-weight:800;margin:4px 0;color:var(--ink)}
.rv-app .jdgm-rev__body{color:#2d3348}
.rv-app .jdgm-rev__body p{margin:0}
.rv-app .jdgm-rev__pics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rv-app .jdgm-rev__pic-link{display:block;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--soft)}
.rv-app .jdgm-rev__pic-img{width:100%!important;height:100%!important;object-fit:cover;margin:0!important}
.rv-app .jdgm-rev__reply{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--soft);border:0!important}
.rv-app .jdgm-rev__replier{font-weight:700;font-size:14px}
.rv-app .jdgm-rev__reply-content p{margin:4px 0 0;color:var(--mut)}
.rv-app .jdgm-paginate{display:flex;gap:6px;margin-top:16px}
.rv-app .jdgm-paginate__page{border:1px solid var(--line);border-radius:12px;padding:6px 10px;cursor:pointer}
.rv-app .jdgm-paginate__page.jdgm-curt{border-color:var(--acc);color:var(--acc)}
.rv-app .jdgm-form-wrapper{margin:0 0 20px;padding:18px;border:1px solid var(--line);border-radius:12px}

/* ---- vraag en antwoord ------------------------------------------------------------------------------------------- */
.qa .rte{color:var(--mut);margin:0 0 16px}
.qa .rte p{margin:0 0 8px}
.qan a{color:var(--acc);font-weight:700}

/* ---- past hier goed bij / laatst bekeken ---------------------------------------------------------------------- */
.pdp-rec[hidden]{display:none}
@media (min-width:1101px){.prec{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.prec .nm{font-size:14px}.prec .pr{font-size:18px}.prec .dl{display:none}.prec .bd{padding:10px 12px 0}.prec .atc{margin:8px 12px 12px;height:40px}}
@media (min-width:901px) and (max-width:1100px){.prec{grid-template-columns:repeat(4,minmax(0,1fr))}.prec>:nth-child(n+5){display:none}}

/* ---- Feedback Company ----------------------------------------------------------------------------------------- */
.fbs .fs.big{font-size:28px}
.fbs img{width:28px;height:28px}
.frc p{flex:1;margin:0}
.frc small{color:var(--mut)}
.frt2:empty{display:none}
.fbw .ar[hidden]{display:none}

/* ---- banners ------------------------------------------------------------------------------------------------------ */
.pvb{margin-top:40px;margin-bottom:40px}
.pvb img,.pib img{display:block;width:100%;height:auto;border-radius:12px}
.pvb a,.pib a{display:block;border-radius:12px}
.pib{margin-top:24px;margin-bottom:24px}
@media (min-width:901px){.pib.mob{display:none}}
.phl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.phl.rev .phl-m{order:2}
.phl-m{border-radius:12px;overflow:hidden;background:var(--soft)}
.phl-m img,.phl-m video{display:block;width:100%;height:auto}
.phl-t .t{margin-bottom:12px}
.phl-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.phl-l li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.phl-l svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:1px}
@media (max-width:900px){.phl{grid-template-columns:minmax(0,1fr);gap:20px}.phl.rev .phl-m{order:0}}
.th button .ph,.sb-im .ph{display:block}
.rv-app .jdgm-star{display:inline-block;font-style:normal;font-family:inherit!important;color:#fbbc05!important;line-height:1}
.rv-app .jdgm-star::before{content:"★"!important;font-family:inherit!important}
.rv-app .jdgm-star.jdgm--off{color:var(--line)!important}
.rv-app .jdgm-star.jdgm--half{background:linear-gradient(90deg,#fbbc05 50%,var(--line) 50%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.pdp-app{min-width:0}
.pdp-app .vct-lo{grid-template-columns:minmax(0,1fr)}
.pdp-app .vct-lo__optie{min-width:0}
@media (max-width:900px){.pdp-app .vct-lo__lijst{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important;scroll-padding-inline:20px}}
.pvar select{width:100%;max-width:420px;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}
.pvar select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
@media (max-width:900px){#fbt.fbv{scroll-padding-inline:20px}}
/* vergroting van de productfoto */
.gal .main.zoomable{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:40;background:rgba(4,10,34,.94);display:grid;place-items:center;padding:56px 16px;opacity:0;transition:opacity .2s var(--ease-out)}
.zoom.open{opacity:1}
.zoom-i{max-width:min(1100px,100%);max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:12px}
.zoom-c{position:absolute;left:50%;bottom:18px;translate:-50% 0;color:#fff;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.zoom button{position:absolute;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:scale .16s var(--ease-out)}
.zoom button:active{scale:.94}
.zoom button svg{width:22px;height:22px}
.zoom-x{top:14px;right:14px}
.zoom-p{left:14px;top:50%;translate:0 -50%}
.zoom-n{right:14px;top:50%;translate:0 -50%}
.zoom button[hidden]{display:none}
@media screen and (prefers-reduced-motion:no-preference){.zoom.open .zoom-i{animation:vct-zoom .22s var(--ease-out)}@keyframes vct-zoom{from{opacity:0;scale:.97}}}
@media (max-width:600px){.zoom-p,.zoom-n{top:auto;bottom:8px;translate:none}.zoom{padding:56px 8px 64px}}
/* product zonder foto: rustig icoon in plaats van een leeg vlak */
.gal .main:not(:has(img,video,iframe)){background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b9c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center/72px no-repeat}
/* heel lange producttitels (meer dan 90 tekens): kleinere kop, anders vult de titel op desktop zeven regels */
@media (min-width:901px){.info h1.h1-lang{font-size:clamp(20px,1.7vw,23px);line-height:1.18}}

/* ---- varianten-rij: zachte rand en pijlen (vct-product.js zet .vscr om de rij) ---------------------------------------- */
.vscr{position:relative}
.vscr::before,.vscr::after{content:"";position:absolute;top:0;bottom:8px;width:48px;pointer-events:none;opacity:0;transition:opacity .2s ease-out;z-index:1}
.vscr::before{left:0;background:linear-gradient(to right,var(--bg,#fff),rgba(255,255,255,0))}
.vscr::after{right:0;background:linear-gradient(to left,var(--bg,#fff),rgba(255,255,255,0))}
.vscr.vscr-ml::before,.vscr.vscr-mr::after{opacity:1}
.vscr-b{position:absolute;top:calc(36px - 16px);z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(4,10,34,.14)}
.vscr-b[hidden]{display:none}
.vscr-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vscr-l{left:2px}.vscr-r{right:2px}
.vscr-b:hover{border-color:var(--mut)}
.vscr-b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:900px){
  .vscr-vs{margin-left:-20px;margin-right:-20px}
  .vscr-vs>.vs{margin-left:0!important;margin-right:0!important}
  .vscr-l{left:8px}.vscr-r{right:8px}
}
@media (prefers-reduced-motion:reduce){.vscr::before,.vscr::after{transition:none}}

/* ---- aanbevolen accessoires compacter (melding Henk 22-10-2026: "mogen wel heel iets kleiner, zijn wel heel prominent") */
.addon .pao{gap:8px}
.addon .sc{grid-template-columns:auto 52px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:12px}
.addon .sc.sk{min-height:70px}
.addon .sc .ph{width:52px;height:52px;border-radius:6px}
.addon .scc{display:grid;place-items:center;min-width:24px;min-height:24px;cursor:pointer}
.addon .scc input{width:20px;height:20px}
.addon .sci{gap:1px}
.addon .sci small{font-size:11px}
.addon .sci .nm{font-size:13px;line-height:1.3;-webkit-line-clamp:1}
.addon .scp{gap:6px}
.addon .scp strong{font-size:14px}
.addon .scp s{font-size:12px}
.addon .bdg{font-size:11px;padding:1px 6px}
.addon .sca{margin-top:0}
.addon .alt{font-size:12.5px}
.addon .adh{margin-bottom:8px}
.addon .adh b{font-size:15px}
/* Henk 25 okt 2026 ("rare bug met de witte vervaging"): de witte verlopen (::before/::after) lagen als blok over de kaartjes en
   de namen eronder. Nu vervaagt de rij zelf aan de kant waar nog meer staat (mask): geen wit vlak, ook niet op een andere
   achtergrond, en de pijlknoppen blijven scherp erboven. */
.vscr::before,.vscr::after{content:none}
.vscr.vscr-mr>:is(.vs,.vct-lo__lijst){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.vscr.vscr-ml>:is(.vs,.vct-lo__lijst){-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.vscr.vscr-ml.vscr-mr>:is(.vs,.vct-lo__lijst){-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* UX-ronde psychologie (okt 2026): inbouwservice in verhouding (contrast), waarschuwing bij zelf monteren (verlies) */
.pinst-c{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-size:13px;color:var(--mut)}
.pinst-c span:first-child{color:var(--ink);font-weight:600}
.pinst-w{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:13px;color:var(--ink)}
.pinst-w svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--acc)}
/* bundelkorting: voortgang naar de volgende trap (voorsprong) en accessoire naast de prijs van het hoofdproduct (contrast) */
.adp{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:13px;color:var(--ink)}
.adp-d{display:inline-flex;gap:4px;flex:none}
.adp-d i{width:18px;height:6px;border-radius:3px;background:var(--line);transition:background-color .16s ease-out}
.adp-d i.on{background:var(--acc)}
.adp[hidden]{display:none}
/* Levertijd duidelijker: verzend-/bezorgmoment groter; disclaimer eronder */
.dlv-s{font-size:16px}
.dlv-s strong,.dlv-r strong{color:var(--ok)}
.dlv-note{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--mut)}
.dlv-note{display:flex;align-items:flex-start;gap:8px}.dlv-note svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ok)}
/* ---- voorraad- en verzendblok (.vship; snippets/vct-ship-block.liquid, spec okt 2026) ------------------------------ */
.vship{--vs-ink:#1c1f2a;--vs-ink2:#565b69;--vs-ink3:#6b707e;--vs-line:#ececf0;--vs-good:#11823b;--vs-warn:#b35f00;--vs-warn-bg:#fff3e0;--vs-bad:#c62828;--vs-bad-bg:#fdecec;
  background:#fff;border:1px solid var(--vs-line);border-radius:14px;padding:12px 14px;display:grid;gap:9px;margin:16px 0;color:var(--vs-ink)}
.vship svg{display:block}
.vship p{margin:0}
.vs-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vs-stock{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--vs-good)}
.vs-stock i{width:9px;height:9px;border-radius:50%;background:currentColor;position:relative;flex:none}
.vs-stock i::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:currentColor;opacity:.2}
.vs-stock.low,.vs-stock.back{color:var(--vs-warn)}
.vs-stock.out{color:var(--vs-bad)}
.vs-timer{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--vs-ink);color:#fff;border-radius:6px;height:24px;padding:0 8px;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.vs-timer svg{width:12px;height:12px}
.vs-timer[hidden]{display:none}
.vs-lead{font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.vs-lead em{font-style:normal;color:var(--vs-good)}
.vs-lead em.vs-w{color:var(--vs-warn)}
.vs-sub{margin-top:2px!important;color:var(--vs-ink2);font-size:12.5px;line-height:1.4}
.vs-note{border-radius:10px;padding:6px 9px;font-size:12.5px;font-weight:600;background:var(--vs-warn-bg);color:var(--vs-warn)}
.vs-note.out{background:var(--vs-bad-bg);color:var(--vs-bad)}
.vs-note[hidden],.vs-steps[hidden],.vs-foot[hidden]{display:none}
.vs-steps{display:grid;grid-template-columns:repeat(3,1fr);position:relative;list-style:none;margin:0;padding:0}
.vs-steps::before{content:'';position:absolute;left:16.6%;right:16.6%;top:8px;height:2px;background:var(--vs-line)}
.vs-step{position:relative;text-align:center;display:grid;justify-items:center;gap:3px}
.vs-dot{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--vs-line);display:flex;align-items:center;justify-content:center;color:var(--vs-ink3);position:relative;z-index:1;box-sizing:border-box}
.vs-dot svg{width:10px;height:10px}
.vs-step.on .vs-dot{background:var(--vs-good);border-color:var(--vs-good);color:#fff}
.vs-step.next .vs-dot{border-color:var(--vs-good);color:var(--vs-good)}
.vs-steps.back .vs-step.next .vs-dot{border-color:var(--vs-warn);color:var(--vs-warn)}
.vs-step div b{font-size:12px;font-weight:700;display:block;line-height:1.2}
.vs-step div span{font-size:11.5px;color:var(--vs-ink2);display:block;line-height:1.2}
.vs-perks{display:flex;gap:12px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--vs-line);font-size:12.5px;font-weight:600}
.vs-perk{display:inline-flex;align-items:center;gap:6px}
.vs-perk svg{width:14px;height:14px;color:var(--vs-good)}
.vs-foot{font-size:11px;color:var(--vs-ink2);line-height:1.35;margin-top:-3px!important}
@media (prefers-reduced-motion:no-preference){.vs-stock i::after{animation:vs-p 2s ease-out infinite}}
@keyframes vs-p{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.5);opacity:0}}
/* Vaste koopbalk bij uitverkocht: "Mail mij" (scrolt naar het terug-op-voorraadformulier) */
#add2 .ic-mail{display:none}
#add2.is-mail .ic-mail{display:block}
#add2.is-mail .ic-cart{display:none}
#add2.is-mail{background:var(--acc)!important;color:#fff!important}
/* Eén lijnstijl op de productpagina (eigenaar okt 2026: "overal andere lijntjes"): 1px var(--line), hoek 12px */
.vship{--vs-line:var(--line);border-color:var(--line);border-radius:12px}
.vg-pp-r{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--acc-soft,#fdeee3) 45%,#fff)}
.sc{border-width:1px}
.pinst{border-width:1px}
/* Tijdlijn (eigenaar okt 2026, optie A): telefoon drie gelijke kolommen, gecentreerd (zoals de spec); vanaf 761 px
   het eerste bolletje links, het middelste in het midden, het laatste rechts, de lijn van bolletje tot bolletje. */
@media (min-width:761px){
  .vs-steps{grid-template-columns:1fr auto 1fr}
  .vs-steps::before{left:9px;right:9px}
  .vs-step:nth-child(1){justify-items:start;text-align:left}
  .vs-step:nth-child(2){justify-items:center;text-align:center}
  .vs-step:nth-child(3){justify-items:end;text-align:right}
}
/* "Op voorraad": kleine, stille ring (de pulserende ring gaf een grijze vlek buiten de lijn van de tekst) */
.vs-stock i::after{inset:-3px;opacity:.18;animation:none}
/* Videoknop op de hoofdfoto (alleen bij een productvideo): klein wit pilletje linksonder, tegenover de teller.
   Speelt de video, dan schuiven knop en teller naar boven zodat de bediening van de video vrij blijft. */
.gvid{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:border-color .15s ease-out,transform .16s var(--ease-out)}
.gvid::before{content:"";position:absolute;inset:-7px -4px}
.gvid svg{width:11px;height:11px;flex:none;color:var(--acc)}
.gvid small{font-size:12px;font-weight:600;color:var(--mut)}
.gvid:active{transform:scale(.96)}
@media (hover:hover){.gvid:hover{border-color:var(--navy)}}
.gvid:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.gvid.on{background:rgba(4,10,34,.7);border-color:transparent;color:#fff;padding:0 12px}
.mainw.is-video .gvid,.mainw.is-video .gcnt{top:12px;bottom:auto}
/* Productvideo live op de pagina (snippets/vct-pdp-video): desktop onder de foto's (.pv-d, even breed als de foto),
   telefoon onder de koopknop (.pv-m); compact 16:9, label met duur, knoppen rechtsonder */
.pv{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.pv>img,.pv>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-tag{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--ink);font-size:12px;font-weight:800;line-height:1.2;border-radius:999px;padding:4px 10px}
.pv-tag i{width:7px;height:7px;border-radius:50%;background:#e5372b}
.pv.is-on .pv-tag i{animation:pv-knip 1.6s ease-in-out infinite}
@keyframes pv-knip{50%{opacity:.25}}
.pv-ctl{position:absolute;right:10px;bottom:12px;z-index:2;display:flex;gap:6px}
.pv-ctl button{width:36px;height:36px;border-radius:50%;border:0;padding:0;background:rgba(4,10,34,.65);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease-out}
.pv-ctl button[hidden]{display:none}
.pv-ctl button:hover{background:rgba(4,10,34,.85)}
.pv-ctl svg{width:16px;height:16px}
.pv-ctl .pv-i2{display:none}
.pv.is-on [data-pv-play] .pv-i1,.pv.has-sound [data-pv-sound] .pv-i1{display:none}
.pv.is-on [data-pv-play] .pv-i2,.pv.has-sound [data-pv-sound] .pv-i2{display:block}
.pv-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:2}
.pv-bar b{display:block;height:100%;width:0;background:var(--acc)}
.gal .pv-d{order:3;width:var(--gw,100%);margin:2px auto 0}
@media (min-width:901px){.pv-m{display:none}}
@media (max-width:900px){.pv-d{display:none}.pv-m{margin:14px 0 4px}}
@media (prefers-reduced-motion:reduce){.pv.is-on .pv-tag i{animation:none}}