/* VCTparts thema: aanvullingen voor collectie, zoeken, favorieten, winkelwagen, blog en 404 (bouwer "winkel").
   De basisklassen (.row, .tb, .fa, .scw, .cp, .li, .sum, .bart, .btoc ...) staan in vct-theme.css. */

/* ---- collectie: subcollecties ---------------------------------------------------------------------------------- */
.coll .ct{margin-bottom:18px}
.sct.on{border-color:var(--acc);background:var(--acc-soft)}
.sct.back span{width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--ink)}
.sct.back{min-height:0}
.sct .sct-l{font-style:normal;font-weight:800;font-size:34px;color:var(--mut)}
.scw .ar svg{width:18px;height:18px}
.kiezers:empty{display:none}
.kiezers{margin:0 0 24px}

/* ---- werkbalk en filters --------------------------------------------------------------------------------------- */
.tb .flt{text-decoration:none}
.flt svg,.sl svg{width:18px;height:18px;flex:none}
.flt .fcnt{display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:var(--acc);color:#fff;border-radius:999px;min-width:22px;height:22px;line-height:1;font-size:12px;padding:0 7px;box-sizing:border-box}
.ff-go{display:none}
.no-js .ff-go{display:inline-flex}
.fchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.fchips .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:14px}
.fchips .chip svg{width:14px;height:14px}
.fclr{font-size:14px;font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.fa .fv{align-items:center}
.fa .fv span{flex:1;min-width:0}
.fa .fv small{color:var(--mut);font-size:13px}
.fa .fv.dis{opacity:.45;cursor:default}
.fa .fmore{border:0!important;padding:0!important}
.fa .fmore summary{font-weight:600;font-size:14px;color:var(--acc);padding:6px 0;justify-content:flex-start}
.fa .fmore summary::after{display:none}
.fa .fmore[open] summary{display:none}
.fpr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.fa .fpr .fld input{width:100%;height:46px;padding:18px 10px 4px;font-size:15px;accent-color:auto}
.fa .fpr .fld label{display:block;padding:0;top:5px;left:11px;font-size:11px;cursor:text}
.fa .fpr .fld input::placeholder{color:#a3a8b8}
.fpr>span{color:var(--mut)}
.fa:target{display:block;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.fa-ft{display:none}
.cl.nf{display:block}
.cg{min-width:0}
.cg.busy,[data-results].busy{opacity:.45;pointer-events:none;transition:opacity .15s ease-out}
.tb .cnt{margin:0;font-size:15px;align-self:center}
.empty.sm{padding:40px 20px}
.cdesc{margin-top:36px;max-width:860px}
.cdesc .rdm{overflow:hidden;position:relative;transition:max-height .3s var(--ease-out)}
.cdesc .rdm:not(.open):not(.fits)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.cdesc .lnk3{background:none;border:0;padding:0;margin-top:8px;cursor:pointer;font:inherit;font-weight:700}

/* ---- productrij ------------------------------------------------------------------------------------------------ */
.row .ph{display:block}
.row .ph img{transition:transform .3s var(--ease-out)}
.row:hover .ph img{transform:scale(1.04)}
.row:hover .nm{text-decoration:underline;text-underline-offset:3px}
.rb .st{display:flex;align-items:center;gap:4px;min-height:18px}
.rb .st:empty{display:none}
.rb .pr small{font-size:13px;font-weight:600;color:var(--mut)}
.ok.no{color:#b3261e}
a.add{text-decoration:none}
.add svg{width:20px;height:20px}
.add[aria-busy="true"]{opacity:.6}
.srow{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.srow-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.srow b{font-size:17px;line-height:1.3}
.srow-x{color:var(--mut);font-size:14px}
.srow:hover b{text-decoration:underline;text-underline-offset:3px}

@media (min-width:901px){
  .cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-content:start}
  .cg>.row:nth-child(2),.cg>.srow:nth-child(2){border-top:0}
  .cg>.empty{grid-column:1/-1}
  .cl.nf .cg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl.nf .cg>.row:nth-child(3){border-top:0}
  .tb{gap:12px;align-items:center}
  .tb .cnt{margin-right:auto}
  .tb .cmpm{align-self:stretch}
  .fa{position:sticky;top:calc(var(--hh,0px) + 16px);max-height:calc(100vh - var(--hh,0px) - 32px);overflow:auto;padding-right:6px;scrollbar-width:thin}
  .fa:target{border:0;padding:0 6px 0 0;margin:0}
  .fbar{display:none!important}
}
@media (max-width:900px){
  .tb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb .cnt{margin-top:2px}
  .tb .cnt{grid-column:1;order:9}
  .tb .cmpm{grid-column:2;order:10;justify-self:end;padding:6px 12px;font-size:14px}
  .tb.nf .sl{grid-column:1/-1}
  .fa.open,.fa:target{display:block}
  .fa-ft{display:block;position:sticky;bottom:0;background:#fff;padding:12px 0 2px;border-top:1px solid var(--line)}
  .fa-ft .btn{width:100%}
  .row .ph{flex-basis:34%}
  .rb .nm{font-size:15px}
  .rb .pr{font-size:18px}
  .add{height:42px;padding:0 12px}
  .fbar .btn{flex:1}
  .fbar .btn svg{width:18px;height:18px}
  .flt-open .fbar{display:none}
}

/* ---- collectie: banner, waarom wij, FAQ, fototegels -------------------------------------------------------------- */
/* .w zet margin:0 auto en at zo de ruimte tussen secties op; hier terug (Henk: "elementen veel te strak op elkaar") */
section.w{margin-top:56px;margin-bottom:56px}
.cban{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--soft);border-radius:12px;overflow:hidden}
.cban.rev .cban-im{order:2}
.cban.noimg{grid-template-columns:minmax(0,1fr)}
.cban-im{align-self:stretch;min-height:280px;position:relative;background:#fff}
.cban-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cban-t{padding:36px 40px 36px 0}
.cban.rev .cban-t,.cban.noimg .cban-t{padding-left:40px}
.cban-t h2{margin-bottom:12px}
.cban-t .rte{color:var(--mut)}
.cchk{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.cchk li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.cchk svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:2px}
.cban-t .btn{margin-top:20px}
.cusp-i{max-width:860px;margin:0 0 28px;color:var(--mut)}
.kh.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kh.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kh .rte.sm{font-size:15px;color:var(--mut);line-height:1.55}
.kh .rte.sm p{margin:0}
.khc:hover{border-color:var(--line)}
.cfaq .qal{max-width:860px}
.qa summary svg{flex:none}
.qa[open] summary svg{transform:rotate(180deg)}
.qa .rte{padding:0 0 16px;color:var(--mut);font-size:15px}
.qa .rte p{margin:0 0 10px;color:inherit;font-size:inherit}
.cgal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 24px}
.cgal.n1{grid-template-columns:minmax(0,1fr)}
.cgal .pt{aspect-ratio:21/9;min-height:0}
@media (max-width:1100px){.kh.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  section.w{margin-top:40px;margin-bottom:40px}
  .cban{grid-template-columns:minmax(0,1fr);gap:0}
  .cban.rev .cban-im{order:0}
  .cban-im{min-height:0;aspect-ratio:16/10}
  .cban-t,.cban.rev .cban-t,.cban.noimg .cban-t{padding:22px 20px 24px}
  .kh.k4,.kh.k3,.kh.k2{grid-template-columns:minmax(0,1fr)}
  .cgal{grid-template-columns:minmax(0,1fr)}
  .cgal .pt{aspect-ratio:16/9}
}

/* ---- zoeken ---------------------------------------------------------------------------------------------------- */
.srch .ct .q{color:var(--acc)}
.sfrm{display:flex;gap:10px;max-width:640px;margin:0 0 24px}
.sfrm .fld{flex:1}
.sfrm .fld input{font-size:16px}
.sfrm .fld input:not(:placeholder-shown)+label,.sfrm .fld input:focus+label{top:7px}
.sfrm .fld input:placeholder-shown:not(:focus)+label{top:50%;transform:translateY(-50%);font-size:15px}
.sfrm .btn{height:52px}
.sfrm .btn svg{width:18px;height:18px}
.scat{margin:48px 0 0}
.sempty{display:grid;gap:22px;margin-top:8px}
.se-i{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:22px}
.se-i .ki{flex:none;margin:0}
.se-i h2{margin:2px 0 8px;font-size:22px;letter-spacing:-.02em}
.se-i ul{margin:0;padding-left:20px;color:var(--mut)}
.se-fz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--acc-soft);border-radius:12px;padding:18px 22px}
.se-fz .ki{margin:0;background:#fff}
.se-fz b{display:block;font-size:17px}
.se-fz>span:nth-child(2){color:var(--mut)}
.se-fz b{color:var(--ink)}
.se-fz .btn{color:#fff}
.se-fz .btn svg{width:16px;height:16px}
.se-h{margin:8px 0 0;font-size:20px}
@media (min-width:901px){.cats.se-cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sempty .hlp a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sempty .hlp b{display:block;color:var(--ink)}
@media (max-width:900px){
  .se-fz{grid-template-columns:auto minmax(0,1fr)}
  .se-fz .btn{grid-column:1/-1}
  .sfrm .btn span{display:none}
}

/* ---- favorieten ------------------------------------------------------------------------------------------------ */
.favs{padding-bottom:24px}
.favs-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.favs-n{color:var(--mut);font-weight:600;font-size:.6em}
.favs-note{display:flex;align-items:center;gap:8px;color:var(--mut);margin:0 0 18px}
.favs-note svg{width:18px;height:18px;color:var(--acc)}
.favs-load{color:var(--mut)}
.favs-load[hidden],.favs-g[hidden]{display:none}
.favs .empty .ki{margin:0 auto 12px}
@media (max-width:900px){.favs-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---- winkelwagen ----------------------------------------------------------------------------------------------- */
.cartp{padding-bottom:8px}
.cp-l{min-width:0}
.shipc .ship{font-size:15px}
.shipc .ship .g-cost{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.shipc .meter i{transition:width .6s var(--ease-out)}
.shipc .dlt span{min-width:0}
.shipc .dlt small{display:block;color:var(--mut);font-size:13px}
.shipc .dlt.late svg{color:var(--acc)}
.vct-goal.is-unlocked .ship{animation:bump .5s var(--ease-out)}
.gfill{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.gfill .ph{width:56px;height:56px;border-radius:12px;background:#fff}
.gf-t{display:grid;gap:1px;min-width:0}
.gf-t small{color:var(--ok);font-weight:700;font-size:12px}
.gf-t .nm{font-size:14px;-webkit-line-clamp:1}
.gf-t b{font-size:14px}
.gf-add{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--navy);background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer}
.gf-add:hover{background:var(--navy);color:#fff}
.gf-add svg{width:14px;height:14px}
.li .ok{margin:0 0 10px}
.lnote{display:flex;align-items:center;gap:6px;color:#9a4a0c;font-size:13px;font-weight:600;margin:-12px 0 12px 130px}
.lnote svg{width:15px;height:15px}
.cp-later:empty{display:none}
.cp-later{margin-top:20px}
.cp-later h3{font-size:16px;margin:0 0 10px}
.cpu h2.t{font-size:20px}
.upc{position:relative}
.upc[hidden],.cpu-sub[hidden]{display:none}
.cpu-sub{font-size:16px;margin:20px 0 10px}
.upb{position:absolute;top:-9px;left:10px;background:var(--ok);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.cass svg{width:22px;height:22px;color:var(--acc);flex:none}
.cass b{display:block;color:var(--ink)}
.sum .okc{color:var(--ok)}
.kc-i{display:flex;gap:8px;align-items:flex-start;margin:8px 0 4px!important;font-size:14px}
.kc-i svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--acc)}
.gtee{display:flex;align-items:center;gap:6px;justify-content:center;font-size:13px;font-weight:600;color:var(--ok);margin:14px 0 8px}
.gtee svg{width:16px;height:16px}
.sum .btn.go{margin-top:0}
.sum .terms{font-size:12px;color:var(--mut);text-align:center;margin:8px 0 0}
.sum .terms a{text-decoration:underline;text-underline-offset:2px}
.sum .tblk a.tb-r:hover b{text-decoration:underline}
.sum .hlp a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sum .hlp b{display:block;color:var(--ink)}
.cbar{display:none}
@media (min-width:901px){.sum{top:calc(var(--hh,0px) + 20px)}}
@media (max-width:900px){
  .cbar{display:flex}
  .lnote{margin-left:98px}
  .gfill{grid-template-columns:48px minmax(0,1fr) auto}
  .gfill .ph{width:48px;height:48px}
}
@media (max-width:900px){
  .li-a{flex-wrap:wrap;gap:10px 16px}
  .li-a .rm{white-space:nowrap}
  .sum .pmr{gap:4px}
  .sum .pmr img{width:31px;height:22px}
}

/* ---- blog ------------------------------------------------------------------------------------------------------ */
.blg-l{max-width:62ch}
.blg-tags{margin:0 0 22px}
.blg-tags .chip{padding:7px 14px;font-size:14px}
.blgl{row-gap:32px}
.blgc p{margin:0;color:var(--mut);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blg-m{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mut);font-size:13px;margin-top:auto;padding-top:4px}
.blg-m .go{display:inline-flex;align-items:center;gap:4px;color:var(--acc);font-weight:700;font-size:14px}
.blg-m .go svg{width:14px;height:14px;transition:transform .2s var(--ease-out)}
.blgc:hover .go svg{transform:translateX(3px)}
.blgc:hover h3{text-decoration:underline;text-underline-offset:3px}
.bcat:hover{background:var(--acc);color:#fff}
.shr{color:var(--ink)}
.bcont>:first-child{margin-top:0}
.bcont h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:40px 0 12px;line-height:1.2}
.bbody .rte{font-size:inherit;line-height:inherit;color:inherit}
.bbody>h2{scroll-margin-top:calc(var(--hh,0px) + 20px)}
.bbody .qal{margin-top:6px}
.bbody .qa .rte{font-size:15px}
.bpc em s{font-style:normal;font-weight:400;color:var(--mut);font-size:13px}
.bcarly{display:flex;gap:16px;align-items:flex-start;background:var(--soft);border-radius:12px;padding:22px;margin:36px 0 0}
.bcarly .ki{flex:none;margin:0;background:#fff}
.bcarly b{display:block;font-size:19px;line-height:1.25;color:var(--ink)}
.bcarly p{margin:6px 0 14px;font-size:15px;color:var(--mut);line-height:1.55}
.bfoot .chip.on{border-color:var(--acc);background:var(--acc-soft)}
.bfoot .chip:disabled{text-decoration:none;opacity:1;cursor:default}
.bthanks{font-style:normal;color:var(--ok);font-weight:600;font-size:14px}
@media (max-width:900px){
  .blgl{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);overflow:visible}
  .bcont h2{font-size:22px}
  .bcarly{flex-direction:column}
}

/* ---- 404 ------------------------------------------------------------------------------------------------------- */
.e404{padding-top:24px}
.e4{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.e4.noimg{grid-template-columns:minmax(0,1fr)}
.e4-c{display:inline-block;background:var(--acc-soft);color:var(--acc);font-weight:800;border-radius:999px;padding:4px 14px;font-size:14px;letter-spacing:.06em}
.e4 h1{font-size:clamp(32px,4.4vw,52px);margin:14px 0 12px}
.e4 .lead{max-width:52ch;margin-bottom:22px}
.e4 .sfrm{margin-bottom:16px}
.e4-b{display:flex;flex-wrap:wrap;gap:10px}
.e4-v{border-radius:16px;overflow:hidden;background:var(--soft);aspect-ratio:595/506}
.e4-v video,.e4-v img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .e4{grid-template-columns:minmax(0,1fr);gap:24px}
  .e4-v{order:-1;max-width:420px}
}
@media (prefers-reduced-motion:reduce){.e4-v video{display:none}}
.btoc nav{gap:0;padding-bottom:0;overflow:visible;font-size:15px}
.btoc nav a{white-space:normal;line-height:1.35}
.btoc nav[hidden],.btoc b[hidden]{display:none}
.blogp .ct{margin-bottom:22px}
/* tablet staand (600-900 px): rijen in twee kolommen, anders staan er grote lege vlakken naast een smalle tekst */
@media (min-width:600px) and (max-width:900px){
  .cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-content:start}
  .cg>.row:nth-child(2),.cg>.srow:nth-child(2){border-top:0}
  .cg>.empty,.cg>:not(.row):not(.srow){grid-column:1/-1}
  .cg .row .ph{flex-basis:38%;max-width:160px}
}