/* Startpagina en collectie-overzicht (sections home-* en collections-overview): aanvullingen op het ontwerp in
   vct-theme.css. Kleuren alleen via de variabelen van het thema. */

/* kop met link en pijlen naast elkaar */
.sh-r{display:flex;align-items:center;gap:14px}
@media (max-width:900px){.marr.dsk{display:none}}

/* bovenste blok */
.clist .pc.ini{background:#fff;color:var(--navy);font-size:16px;text-transform:uppercase}
.clist .pc.ini svg{width:18px;height:18px}
.pt picture{position:absolute;inset:0}
.pt video,.th-img video,.br3 .ph video,.vbn video,.iwt-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tiles.n1{grid-template-rows:minmax(0,1fr)}
.tiles.n3{grid-template-rows:repeat(3,minmax(0,1fr))}
.top.no-tiles{grid-template-columns:minmax(0,1fr)}
@media (min-width:1101px){.top.no-tiles{grid-template-columns:260px minmax(0,1fr)}.top.no-cl{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}.top.no-cl.no-tiles{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.tiles.n1{grid-template-columns:minmax(0,1fr)}.tiles.n3{grid-template-rows:none;grid-template-columns:1fr 1fr 1fr}}

/* fittingzoeker */
.kz .fr.one{grid-template-columns:auto auto;justify-content:start}
.kz .btn svg{width:18px;height:18px}
@media (max-width:900px){.kz .fr.one{grid-template-columns:minmax(0,1fr)}.kz .fr.one small{grid-column:auto}.kz .fr .btn{white-space:nowrap}}

/* USP-tegels: een tegel mag ook een link zijn */
.uspb>a{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--mut);line-height:1.3;transition:background-color .15s ease-out}
.uspb>a:hover{background:var(--line)}
.uspb>*>svg{flex:none}
@media (max-width:900px){.uspb>a{padding:12px;gap:10px}}

/* categorietegels: meer collecties dan kolommen = slider; op desktop het aantal kolommen uit de instelling */
@media (min-width:901px){
.cats{grid-template-columns:repeat(var(--cn,8),minmax(0,1fr))}
.cats.many{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--cn,8) - 1)*14px)/var(--cn,8));overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.cats.many::-webkit-scrollbar{display:none}
}

/* themabanner */
.th-img picture{position:absolute;inset:0}
.theme.solo{grid-template-columns:minmax(0,1fr)}
.thl.pr b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.thl.pr small{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* productslider: kaarten even hoog */
.scr>.card{height:100%}

/* combinatiebanner */
.combo .vis a.ph{display:block;border-radius:12px}
.combo .vis a.ph:hover img{transform:scale(1.03)}
.combo .vis .ph img{transition:transform .3s var(--ease-out)}

/* eigen merken */
.brs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.brs.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.br3 .ph.fill img{object-fit:cover;padding:0;mix-blend-mode:normal;transition:transform .4s var(--ease-out)}
.br3:hover .ph.fill img{transform:scale(1.03)}
.br3 .go svg{transition:transform .2s var(--ease-out)}
.br3:hover .go svg{transform:translateX(3px)}
@media (max-width:900px){.brs.n2,.brs.n4{grid-template-columns:minmax(0,1fr)}}

/* merklogo's zonder beeld */
.ml b{font-size:18px;letter-spacing:-.02em}

/* fototegels: 2, 3 of 5 tegels */
.svc.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc.n3{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
@media (min-width:901px){
.svc.n5{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
.svc.n5 .pt{min-height:250px}
.svc.n5 .pt.big{grid-row:span 2}
}
@media (max-width:900px){
.svc.n3 .pt.big,.svc.n5 .pt.big{grid-column:1/-1;aspect-ratio:16/9}
.svc.n2,.svc.n3{grid-template-columns:1fr 1fr}
}

/* reviews */
.rvq.sk{background:var(--soft);border-color:transparent}
.rvq p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rvq b small{font-weight:400;color:var(--mut);font-size:13px}
a.via{color:var(--mut);transition:color .15s ease-out}
a.via:hover{color:var(--ink)}
a.via .tr{margin-left:auto;font-size:12px}
a.fbc2{transition:border-color .15s ease-out}
a.fbc2:hover{border-color:var(--navy)}
.rvn a:hover{color:var(--acc)}

/* blogs */
.blg h3{transition:color .15s ease-out}
.blg a:hover h3{color:var(--acc)}

/* videobanner */
.vbn{position:relative;border-radius:12px;overflow:hidden;background:var(--navy);aspect-ratio:var(--ar,21/9);min-height:260px;color:#fff}
.vbn>img,.vbn>picture,.vbn>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbn::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,34,.8),rgba(4,10,34,0) 60%);pointer-events:none}
.vbn-l{position:absolute;inset:0;z-index:1}
.vbn-t{position:absolute;left:0;bottom:0;z-index:2;padding:32px;display:grid;gap:10px;justify-items:start;max-width:640px;pointer-events:none}
.vbn-t a{pointer-events:auto}
.vbn-t h2{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.vbn-t p{margin:0;color:#d6d9e3}
.vbn-t .btn svg{width:18px;height:18px}
.vbn-p{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(4,10,34,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease-out}
.vbn-p:hover{background:rgba(4,10,34,.8)}
.vbn-p svg{width:18px;height:18px}
.vbn-p .i-play,.vbn-p.paused .i-pause{display:none}
.vbn-p.paused .i-play{display:block}
@media (max-width:900px){.vbn{aspect-ratio:var(--arm,16/9);min-height:0}.vbn-t{padding:18px}}

/* tekstblok */
.hrt-b{max-width:820px}
.hrt-b .t{margin-bottom:12px}
.hrt-b .eyebrow{margin-bottom:6px}
.hrt-b .btn{margin-top:6px}
.hrt-b.c{margin-left:auto;margin-right:auto;text-align:center}
.hrt-b.soft{max-width:none;background:var(--soft);border-radius:12px;padding:36px}
.hrt-b.soft.c>*{max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.hrt-b.soft{padding:24px 20px}}

/* afbeelding met tekst */
.iwt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.iwt.r .iwt-m{order:2}
.iwt.soft{background:var(--soft);border-radius:12px;padding:24px}
.iwt-m{position:relative;border-radius:12px;overflow:hidden;background:var(--soft);aspect-ratio:4/3}
.iwt-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iwt-t .t{margin:4px 0 12px}
.iwt-c{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.iwt-c li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.iwt-c svg{color:var(--ok);margin-top:2px}
@media (max-width:900px){.iwt{grid-template-columns:minmax(0,1fr);gap:20px}.iwt.r .iwt-m{order:0}.iwt.soft{padding:16px}}

/* collectie-overzicht */
.cov .ct{margin-bottom:8px}
.cov-i{max-width:760px;margin-bottom:8px}
.cov section{margin:32px 0 56px}
.cov-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
.cov-cats.cats{display:grid}
.cov .sh{align-items:center;flex-wrap:wrap}
.cov-f{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:0 14px;background:#fff;min-width:280px;transition:border-color .15s ease-out}
.cov-f:focus-within{border-color:var(--navy)}
.cov-f svg{width:18px;height:18px;color:var(--mut)}
.cov-f input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 0;font-size:15px;-webkit-appearance:none;appearance:none}
.cov-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cov-g .sct{min-height:170px}
.cov-g .sct span svg{width:36px;height:36px;color:var(--mut)}
.cov-none{color:var(--mut);margin:12px 0 0}
@media (min-width:901px) and (max-width:1100px){.cov-g,.cov-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
.cov-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.cov-cats .cat b{font-size:14px}
.cov-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cov-f{min-width:0;width:100%}
.cov section{margin:24px 0 40px}
}
.combo.solo{grid-template-columns:minmax(0,1fr)}
.combo.solo p{max-width:60ch}
.th-side h2.t{font-size:22px}
.cov-g .sct span{overflow:hidden;border-radius:12px}
.cov-g .sct span img{width:100%;height:100%;object-fit:contain}
.sh a.fbc2{color:var(--ink);font-weight:400;white-space:normal}
.sh a.fbc2 b{font-weight:700}
@media (max-width:900px){.kz .plate input{font-size:19px;letter-spacing:.06em}}
@media (max-width:900px){.cov-g .sct{min-height:128px}}
/* Beeldtegels (home-beeldtegels): 4 brede banners met de naam en een pijltje eronder, zoals de categorietegels; mobiel schuiven */
.bt-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bt-a{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.bt-ph{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--soft)}
.bt-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease-out)}
.bt-a:hover .bt-ph img{transform:scale(1.05)}
.bt-n{font-size:15px}
.bt-n svg{width:14px;height:14px;vertical-align:-2px;transition:transform .2s var(--ease-out)}.bt-a:hover .bt-n svg{transform:translateX(2px)}
@media (max-width:900px){.bt-g{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}.bt-g::-webkit-scrollbar{display:none}.bt-i{scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){.bt-ph img,.bt-n svg{transition:none}}
/* Telefoon (eigenaar okt 2026): banner van rand tot rand, kleine tegels weg, categorielijst als kaart over de banner */
.clist a.clall-m,.clall-m{display:none}
/* Desktop (vanaf 1101 px, eigenaar okt 2026): dezelfde witte kaart als op telefoon, kop vet, rijen met een lijn ertussen
   en onderaan de knop "Alle categorieën". Compact genoeg om de banner niet op te rekken; is de banner hoger, dan
   verdelen de rijen de ruimte. */
@media (min-width:1101px){
  .s-home-top .clist{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px rgba(4,10,34,.07);padding:16px 0 10px}
  .s-home-top .clhd{padding:0 20px 6px}
  .s-home-top .clh{font-size:15px;font-weight:800;color:var(--ink)}
  .s-home-top .clhd .clall{display:none}
  .s-home-top .clist>a:not(.clall-m){flex:1 1 auto;grid-template-columns:44px minmax(0,1fr) 18px;gap:14px;padding:7px 16px 7px 20px;border-radius:0;border-top:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px}
  .s-home-top .clist>a.sale:not(.clall-m){color:var(--acc-on,#c4520c)}
  .s-home-top .clist>a:not(.clall-m):hover{background:var(--soft)}
  .s-home-top .clist img,.s-home-top .clist .pc{width:44px;height:44px}
  .s-home-top .clist img{object-fit:contain;padding:4px;box-sizing:border-box;background:var(--soft);mix-blend-mode:multiply}
  .s-home-top .clist .cv{width:18px;height:18px}
  .s-home-top .clist a.clall-m{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 12px 0;padding:12px;border-radius:12px;background:var(--soft);color:var(--acc-on,#c4520c);font-weight:700;font-size:15px;transition:background-color .15s ease-out}
  .s-home-top .clist a.clall-m:hover{background:var(--acc-soft)}
  .s-home-top .clall-m svg{width:16px;height:16px;transition:transform .2s var(--ease-out)}
  .s-home-top .clist a.clall-m:hover svg{transform:translateX(2px)}
}
@media (max-width:760px){
  .s-home-top .top{display:flex;flex-direction:column;gap:0;margin-top:0}
  .s-home-top .tiles{display:none}
  .s-home-top .top .pt.big{order:-1;display:block;margin:0 -20px;border-radius:0;min-height:0;aspect-ratio:3/2}
  .s-home-top .top .pt.big .pt-t{left:20px;right:20px;bottom:46px}
  .s-home-top .top .pt.big .pt-t b{font-size:26px}
  /* Geen verschuiving tijdens het laden (meting okt 2026): de lijst staat in de HTML voor de banner (die door order:-1 erboven komt).
     Een eerste verf halverwege het inlezen zette de lijst bovenaan en schoof hem omlaag zodra de banner er was. Daarom de lijst
     verbergen tot de banner (tot en met .pt-t) is ingelezen; zonder :has() valt deze regel weg en is er niets verborgen. */
  .s-home-top .top.ht-mb:not(:has(.ht-deal .pt-t)) .clist{display:none}
  .s-home-top .clist{display:block;position:relative;z-index:2;margin:-28px -8px 0;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(4,10,34,.10);padding:18px 0 6px}
  .s-home-top .clhd{padding:0 20px 6px}
  .s-home-top .clh{font-size:15px;font-weight:800;color:var(--ink)}
  .s-home-top .clhd .clall{display:none}
  .s-home-top .clist>a:not(.clall-m){display:grid;grid-template-columns:56px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:10px 16px 10px 20px;border-bottom:1px solid var(--line);border-top:0;border-radius:0;color:var(--ink);font-size:17px;font-weight:600}
  .s-home-top .clist>a:not(.clall-m):active{background:var(--soft)}
  .s-home-top .clist img,.s-home-top .clist .pc{width:56px;height:56px;border-radius:12px}
  .s-home-top .clist img{object-fit:contain;padding:4px;box-sizing:border-box;background:var(--soft);mix-blend-mode:multiply}
  .s-home-top .clist .cv{width:20px;height:20px;color:var(--mut)}
  .s-home-top .clist .cl-x{display:none!important}
  .s-home-top .clist .pc{display:grid;place-items:center;background:var(--acc-soft);color:var(--acc);font-weight:800;font-size:22px}
  .s-home-top .clist .pc.ini{background:var(--soft);color:var(--navy);font-size:18px;text-transform:uppercase}
  .s-home-top .clist>a.sale:not(.clall-m){color:var(--acc-on,#c4520c)}
  .s-home-top .clist a.clall-m{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 12px 8px;padding:13px;border-radius:12px;background:var(--soft);color:var(--acc-on,#c4520c);font-weight:700;font-size:15px}
  .s-home-top .clall-m svg{width:16px;height:16px}
}
/* Telefoon (eigenaar okt 2026): fittingzoeker gestapeld en ruimer, USP-tegels als een kaart met gelijke rijen */
@media (max-width:760px){
  .s-home-fitting .kz{margin-top:20px;border:0;background:var(--soft);border-radius:16px;padding:18px 16px;gap:14px}
  .s-home-fitting .kz h2{font-size:21px;line-height:1.2;margin-top:4px}
  .s-home-fitting .kz .fr{grid-template-columns:minmax(0,1fr);gap:10px}
  .s-home-fitting .kz .plate{height:56px;background:#f7c600}
  .s-home-fitting .kz .plate input{font-size:22px}
  .s-home-fitting .kz .fr .btn{width:100%;height:50px;font-size:16px}
  .s-home-fitting .kz .fr small{grid-column:1/-1;text-align:center;font-size:14px}
  .s-home-usp .uspb{grid-template-columns:minmax(0,1fr);gap:0;margin-top:12px;background:var(--soft);border-radius:16px;padding:4px 0}
  .s-home-usp .uspb>div,.s-home-usp .uspb>a{background:none;border-radius:0;padding:12px 14px;gap:10px;align-items:center;font-size:13.5px;line-height:1.3;min-width:0}
  .s-home-usp .uspb>*+*{border-top:1px solid var(--line)}
  .s-home-usp .uspb svg{width:20px;height:20px}
  .s-home-usp .uspb>*>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s-home-usp .uspb b{display:inline;font-size:13.5px;margin-right:4px}
  .s-home-usp .uspb>a:hover{background:none}
}
@media (max-width:374px){.s-home-usp .uspb>*>span{white-space:normal}}
/* Merklogo's: instelling Grootte (--mz) vergroot een logo met veel lege rand binnen zijn tegel; de tegel knipt de rand af */
.s-home-logos .ml{overflow:hidden}
.s-home-logos .ml img{transform:scale(var(--mz,1))}
.s-home-logos .ml:hover img{transform:scale(calc(var(--mz,1) * 1.05))}
/* Startpagina bovenkant, rechterdeel (sections/home-top .ht-g, eigenaar okt 2026): aanbieding met tekst, combideals,
   twee fototegels en de fittingzoeker. Desktop 3 kolommen, 2 rijen even hoog als de categorielijst; tablet 2 kolommen.
   Telefoon: .ht-g valt weg (display:contents), zodat de aanbieding bovenaan en de combideals onder de categoriekaart
   komen; fototegels en fittingzoeker verborgen (de fittingzoeker staat daar als eigen sectie eronder). */
.ht-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(240px,1fr);gap:16px;min-width:0}
.s-home-top .top.ht{grid-template-columns:minmax(0,1fr)}
.s-home-top .top.ht .pt.big{min-height:0}
.ht-deal{grid-column:span 2}
.ht-k{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-on,#c4520c)}
.ht-p{font-size:14px;line-height:1.45;color:var(--mut)}
.ht-im{position:absolute;inset:0;display:block}
.ht-deal.has-txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ht-deal.has-txt::after,.ht-deal.has-txt .pt-t{display:none}
.ht-deal.has-txt .ht-im{position:relative;inset:auto}
.ht-dt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:26px 28px;color:#fff;position:relative;z-index:1}
.ht-dt .ht-k{color:var(--acc)}
.ht-h{font-size:30px;line-height:1.1;letter-spacing:-.02em;font-weight:800}
.ht-dt .ht-p{color:#c4c8d6}
.ht-btn{margin-top:4px;pointer-events:none}
.ht-mt{display:none}
.ht-tile .pt-t{left:20px;bottom:18px}.ht-tile .pt-t b{font-size:24px}
/* combideals */
.ht-deals{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px 20px 8px}
.ht-dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ht-dh b{font-size:16px}
.ht-dh a{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--acc-on,#c4520c)}
.ht-dh a svg{width:13px;height:13px}
.ht-dl{display:flex;flex-direction:column;flex:1}
.ht-r{flex:1;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);color:var(--ink)}
.ht-r:first-child{border-top:0}
.ht-r .ph{width:48px;height:48px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:block}
.ht-r .ph img{width:100%;height:100%;object-fit:contain;display:block}
.ht-n{display:block;min-width:0}
.ht-n span{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ht-n em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--sale);margin-top:2px}
.ht-r b{font-size:15px;text-align:right;line-height:1.15;white-space:nowrap}
.ht-r b s{display:block;font-size:12px;font-weight:600;color:var(--mut)}
@media (hover:hover){.ht-r:hover .ht-n span{text-decoration:underline;text-underline-offset:2px}.ht-dh a:hover{text-decoration:underline}}
/* fittingzoeker */
.ht-fz{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--soft);border-radius:20px;padding:18px 20px}
.ht-fh{font-size:20px;line-height:1.2;font-weight:800}
.ht-fa{flex:1;display:flex;flex-direction:column;gap:6px}
.ht-fa[hidden]{display:none}
.ht-fa .ht-p{margin-bottom:auto;padding-bottom:4px}
.ht-fa .btn{justify-content:center;width:100%;padding-top:11px;padding-bottom:11px}
.ht-fa .btn svg{width:18px;height:18px}
.ht-fa small{text-align:center;font-size:13px;color:var(--mut)}
.ht-fa small a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ht-fa[data-kz-saved]{justify-content:flex-end}
.ht-fz .plate{height:46px}
.ht-fz .plate input{font-size:21px;padding-top:0;padding-bottom:0}
.ht-st{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.ht-st li{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 4px;font-size:13px;font-weight:700;text-align:center;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* desktop: hetzelfde raster van 4 kolommen (16px tussenruimte) als de productrasters en de USP-rij eronder; de
   categorielijst is 1 kolom, de vakken rechts vullen er precies 3 */
@media (min-width:1101px){.s-home-top .top.ht{grid-template-columns:repeat(4,minmax(0,1fr))}.s-home-top .top.ht .ht-g{grid-column:span 3}.s-home-top .top.ht.no-cl .ht-g{grid-column:1/-1}}
/* tablet: categorielijst is hier verborgen, dus 2 kolommen */
@media (min-width:761px) and (max-width:1100px){
  .ht-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ht-deal{grid-column:1/-1;min-height:280px}
}
/* de losse fittingzoeker-sectie alleen op telefoon als het bovenste blok er een heeft */
@media (min-width:761px){body:has(.ht-fz) .s-home-fitting{display:none}}
@media (max-width:760px){
  .s-home-top .ht-g{display:contents}
  .s-home-top .ht-tile,.s-home-top .ht-fz{display:none}
  .s-home-top .ht-deal.has-txt{display:block}
  .s-home-top .ht-deal .ht-dt{display:none}
  .s-home-top .ht-deal.has-txt::after{display:block}
  .s-home-top .ht-deal.has-txt .pt-t{display:grid}
  .s-home-top .ht-deal .ht-im{position:absolute;inset:0}
  /* Startblok B (eigenaar okt 2026, docs/ontwerp/aanbieding-telefoon.html): donkere band met tekst, daaronder de hele foto
     (vaste verhouding 3:2 van de telefoonfoto, zodat de lijst eronder niet verschuift als de foto laadt; hoogte niet van de geladen foto), geen knop, geen rondjes; het blok blijft één link. Alleen met mobile_heading. */
  .s-home-top .top .pt.big.ht-deal.has-m{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;background:var(--navy)}
  .s-home-top .ht-deal.has-m::after,.s-home-top .ht-deal.has-m .pt-t,.s-home-top .ht-deal.has-m .ht-dt{display:none}
  .s-home-top .ht-deal.has-m .ht-mt{display:flex;flex-direction:column;gap:4px;padding:12px 20px 14px;color:#fff}
  .s-home-top .ht-deal.has-m .ht-mk{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e9c08a}
  .s-home-top .ht-deal.has-m .ht-mh{font-size:25px;line-height:1.08;letter-spacing:-.025em;font-weight:800}
  .s-home-top .ht-deal.has-m .ht-mp{font-size:13.5px;line-height:1.35;color:#c9ccd8}
  .s-home-top .ht-deal.has-m .ht-im,.s-home-top .ht-deal.has-m .ht-im picture{position:static;display:block}
  .s-home-top .ht-deal.has-m .ht-im img{position:static;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transform:none}
  .s-home-top .ht-deals{order:1;margin:22px -20px 0;padding:0;border:0;border-radius:0;background:none}
  .s-home-top .ht-dh{padding:0 20px 10px;margin:0}
  .s-home-top .ht-dh b{font-size:18px}
  .s-home-top .ht-dh a{font-size:14px}
  .s-home-top .ht-dl{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:10px;overflow-x:auto;padding:0 20px 4px;scroll-padding-inline:20px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .s-home-top .ht-dl::-webkit-scrollbar{display:none}
  .s-home-top .ht-r{scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff}
  .s-home-top .ht-r:first-child{border-top:1px solid var(--line)}
  .s-home-top .ht-r .ph{width:100%;height:auto;aspect-ratio:1;border:0}
  .s-home-top .ht-n{display:contents}
  .s-home-top .ht-n span{order:1;font-size:14px;min-height:36px}
  .s-home-top .ht-r b{order:2;margin-top:auto;padding-top:4px;text-align:left;font-size:17px;display:flex;align-items:baseline;gap:6px}
  .s-home-top .ht-r b s{display:inline}
  .s-home-top .ht-n em{order:3;margin-top:0}
}

/* Combinatiebanner met eigen foto in het navy vlak (sections/home-combo, eigenaar okt 2026): tekst onderaan met een navy
   verloop van onder, de foto erboven blijft zichtbaar. --cb-shade = hoe donker het verloop onderaan is. */
.combo.cb-met>.cb-t{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:380px;overflow:hidden}
.combo .cb-bg{position:absolute;inset:0;z-index:-1}
.combo .cb-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--cb-pos,center)}
.combo .cb-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,34,var(--cb-shade,.7)) 0%,rgba(4,10,34,calc(var(--cb-shade,.7) * .75)) 40%,rgba(4,10,34,0) 85%)}
.combo .cb-bg .cb-m{display:none}
.combo.cb-met h2{font-size:30px;max-width:18ch;text-shadow:0 1px 12px rgba(4,10,34,.35)}
.combo.cb-met p{color:#e3e6ef;max-width:36ch}
@media (max-width:760px){
  .combo.cb-met>.cb-t{min-height:380px}
  .combo .cb-bg .cb-d{display:none}
  .combo .cb-bg .cb-m{display:block}
  .combo.cb-met h2{font-size:26px}
}

/* Kaartkleuren van "Onze eigen merken" (sections/home-own-brands; grijs, .bl, .or en .nv staan in vct-theme.css) */
.br3.kl-groen{background:#e7f5ec}.br3.kl-geel{background:#fdf4d3}.br3.kl-turq{background:#e1f4f3}.br3.kl-paars{background:#efeafb}
.br3.kl-roze{background:#fce8ef}.br3.kl-rood{background:#fde7e5}.br3.kl-zand{background:#f5efe4}
.br3.kl-antr{background:#23262d;color:#fff}.br3.kl-dgroen{background:#12372a;color:#fff}.br3.kl-oranje{background:#c2500f;color:#fff}
.br3:is(.kl-antr,.kl-dgroen) p{color:#c3c7d0}.br3.kl-oranje p{color:rgba(255,255,255,.88)}.br3.kl-oranje small{color:#fff}
.br3:is(.kl-antr,.kl-dgroen,.kl-oranje) .ph:not(.fill){background:#fff}
/* STAP 3 punt 9: met een gekozen auto (html[data-vct-auto], gezet in de head) meteen de stand "met auto"; vct-home.js zet daarna
   dezelfde hidden-standen en de titel. */
html[data-vct-auto] [data-kz] [data-kz-fresh]{display:none!important}
html[data-vct-auto] [data-kz] .ht-fa[data-kz-saved][hidden]{display:flex!important}
html[data-vct-auto] [data-kz] .fr[data-kz-saved][hidden]{display:grid!important}