/* Huisstijl Dweilencentrum (laadt na kw.css), 12-11-2026. Met de hand bijgehouden (inc/eigen.php).
   Uitstraling zoals onlinekabelshop.nl (Rinus): dun gekleurd USP-balkje, witte kop met logo en rond zoekveld,
   donkere menubalk met ronde kleurknop, lichtgrijze vlakken met witte kaarten, ronde knoppen met pijl, lichte voet.
   Hoofdkleur turquoise uit het logo (#00A8A0), donker teal #00807A, inkt #0A2430. Eén lettertype: Figtree. */

:root{
  --kw-inkt:#0A2430;--kw-tekst:#33464F;--kw-grijs:#6B7B83;--kw-lijn:#E3E8EA;--kw-lijn-2:#D3DADD;
  --kw-papier:#F4F6F7;--kw-zacht:#F0F3F4;--kw-well:#fff;
  --kw-pruim:#00807A;--kw-pruim-2:#006A65;--kw-lavendel:#E0F5F4;--kw-lavendel-2:#BFEAE7;--kw-indigo-d:#0A2430;
  --kw-koop:#00A8A0;--kw-koop-2:#008F88;--kw-koop-zacht:#E0F5F4;
  --kw-goud:#00A8A0;--kw-goud-2:#5FD3CD;--kw-goud-zacht:#E0F5F4;
  --kw-tq:#00A8A0;--kw-tq-d:#00807A;--kw-tq-z:#E0F5F4;
  --kw-r:6px;--kw-r-s:6px;--kw-schaduw:0 2px 10px rgba(10,36,48,.08);
  --kw-steek:none;--kw-denim:#fff;
  --kw-kop:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --kw-romp:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{font-size:15px;color:var(--kw-tekst)}
h1,h2,h3,h4{font-family:var(--kw-romp);font-weight:700;letter-spacing:-.01em;color:var(--kw-inkt)}
h2{font-size:1.45rem}
a{color:var(--kw-tq-d)}a:hover{color:var(--kw-pruim-2)}

/* ---------- USP-balkje ---------- */
.kw-usp{background:var(--kw-tq);color:#fff;font-size:.8rem;font-weight:600}
.kw-usp__rij{min-height:30px;gap:40px}
.kw-usp__rij .kw-ico{color:#fff}
@media(min-width:800px){.kw-usp__rij span:nth-child(n+2){display:inline-flex}}

/* ---------- kop: wit, logo, rond zoekveld, iconen ---------- */
.kw-kop{background:#fff;border-bottom:0;box-shadow:none}
.kw-kop::after,.kw-kop::before{display:none!important;content:none!important}
.kw-kop__rij{padding-top:12px;padding-bottom:12px}
.kw-logo--beeld img{height:44px;width:auto;display:block}
@media(min-width:960px){.kw-logo--beeld img{height:62px}}
.kw-kop .kw-zoek{background:#fff;border:1px solid var(--kw-lijn-2);border-radius:999px;max-width:520px;width:100%;justify-self:center}
.kw-kop .kw-zoek:focus-within{border-color:var(--kw-tq)}
.kw-kop .kw-zoek input{padding:10px 18px;font-size:.92rem}
.kw-kop .kw-zoek button{background:none;color:var(--kw-inkt);margin:2px 6px 2px 0;padding:8px}
.kw-kop .kw-zoek button:hover{background:var(--kw-zacht);color:var(--kw-tq-d)}
.kw-kop__snel a{color:var(--kw-inkt);font-weight:500;font-size:.82rem}
.kw-kop__snel a:hover{background:none;color:var(--kw-tq-d)}
@media(min-width:960px){.kw-kop__snel a{flex-direction:row;gap:7px}}
.kw-kop__vgl b,.kw-kop__mand b{background:var(--kw-tq);color:#fff!important}
.kw-kop__menuknop{color:var(--kw-inkt)}

/* ---------- menubalk: donker met ronde turquoise knop ---------- */
.kw-nav{background:var(--kw-inkt);border-top:0}
.kw-nav__rij{min-height:52px;gap:14px}
.kw-nav__alles{background:var(--kw-tq);color:#fff!important;border-radius:999px;padding:9px 18px;font-weight:700}
.kw-nav__alles:hover{background:var(--kw-koop-2)}
.kw-nav__links a{color:#fff;font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.02em;border-radius:999px}
.kw-nav__links a:hover{background:rgba(255,255,255,.1);color:#fff}
.kw-mega{border-top:3px solid var(--kw-tq)}
.kw-mega__kop{color:var(--kw-inkt);font-weight:700}
.kw-mega a:hover{color:var(--kw-tq-d)}
.kw-mega .kw-ico{color:var(--kw-tq)}
@media(min-width:960px){.kw-mega__rij{grid-template-columns:repeat(4,1fr)}}
.kw-mega__voet{display:flex;gap:24px}

/* ---------- knoppen: rond, turquoise ---------- */
.kw-knop{border-radius:999px;font-weight:700}
.kw-knop--vol{background:var(--kw-tq);color:#fff}
.kw-knop--vol:hover{background:var(--kw-koop-2);color:#fff}
.kw-knop--rand{border-radius:999px;border-color:var(--kw-inkt);color:var(--kw-inkt)}
.kw-knop--koop{background:var(--kw-tq);color:#fff!important;border-radius:999px;box-shadow:none}
.kw-knop--koop:hover{background:var(--kw-koop-2)}
.kw-label{color:var(--kw-tq-d);background:var(--kw-tq-z)}

/* ---------- koppen met kleine regel erboven (zoals 'Uitgelicht') ---------- */
.kw-boven{display:block;font-size:.82rem;font-weight:500;letter-spacing:.18em;color:var(--kw-inkt);margin-bottom:2px}
.kw-rij__kop{align-items:flex-end}
.kw-rij__kop a{color:var(--kw-inkt)}
.kw-rij__kop a:hover{color:var(--kw-tq-d)}

/* lichtgrijze vlakken over de volle breedte */
.kw-vlak{background:var(--kw-papier);box-shadow:0 0 0 100vmax var(--kw-papier);clip-path:inset(0 -100vmax);padding-top:36px;padding-bottom:40px}

/* ---------- productkaart ---------- */
.kw-kaart{border-radius:4px;border-color:var(--kw-lijn)}
.kw-kaart:hover{box-shadow:var(--kw-schaduw);border-color:var(--kw-lijn-2);transform:none}
.kw-kaart__soort{left:auto;right:8px;background:var(--kw-tq);color:#fff;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;border-radius:3px;box-shadow:none}
.kw-kaart__korting{left:8px;right:auto;background:var(--kw-inkt);border-radius:3px}
.kw-kaart__naam{font-weight:700;font-size:.9rem}
.kw-kaart__prijs strong{font-family:var(--kw-romp);font-weight:700;font-size:1.1rem}
.kw-kaart__cta{color:#fff;background:var(--kw-tq);border-radius:4px;padding:6px 10px}
.kw-kaart__voet{border-top:0}

/* ---------- categorietegels: witte kaart, grote foto, naam + rond pijltje ---------- */
.kw-cattegels a{border-radius:4px;align-items:stretch;text-align:left;padding:10px 10px 12px;position:relative}
.kw-cattegels a::after{content:"";position:absolute;right:12px;bottom:13px;width:22px;height:22px;border-radius:50%;
  background:var(--kw-tq) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat}
.kw-cattegels strong{text-transform:none;letter-spacing:0;font:600 .88rem/1.25 var(--kw-romp);padding-right:30px}
.kw-cattegels small{padding-right:30px}
.kw-cattegels--klein img{max-width:none}

/* ---------- vloer-hero (lichtgrijs vlak, witte vloerkaarten) ---------- */
.kw-vloerhero{background:var(--kw-papier);color:var(--kw-tekst);padding:30px 0 38px}
.kw-vloerhero__rij{display:grid;gap:24px;align-items:center}
@media(min-width:960px){.kw-vloerhero__rij{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:44px}}
.kw-vloerhero h1{font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.08;margin:0 0 12px}
.kw-vloerhero__tekst>p{color:var(--kw-tekst);margin:0 0 18px;max-width:34em}
.kw-vloerhero .kw-zoek--promo{background:#fff;border:1px solid var(--kw-lijn-2);border-radius:999px;max-width:520px}
.kw-vloerhero .kw-zoek--promo button{background:var(--kw-tq);color:#fff;border-radius:999px}
.kw-vloerhero .kw-promo__vaak{color:var(--kw-grijs);font-size:.88rem}
.kw-vloerhero .kw-promo__vaak a{color:var(--kw-inkt);font-weight:600}
.kw-vloeren{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.kw-vloeren{grid-template-columns:repeat(3,1fr)}}
.kw-vloer{position:relative;display:flex;flex-direction:column;gap:1px;background:#fff;border:1px solid var(--kw-lijn);border-radius:4px;padding:10px 10px 12px;text-decoration:none;color:var(--kw-inkt);height:100%;transition:box-shadow .15s}
.kw-vloer:hover{box-shadow:var(--kw-schaduw)}
.kw-vloer::after{content:"";position:absolute;right:12px;bottom:14px;width:22px;height:22px;border-radius:50%;
  background:var(--kw-tq) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat}
.kw-vloer__staal{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:3px;margin-bottom:9px}
.kw-vloer strong{font:600 .92rem/1.2 var(--kw-romp)}
.kw-vloer small{color:var(--kw-grijs);font-size:.78rem}
.kw-vloer--laminaat .kw-vloer__staal{background:url(vloer/laminaat.webp) center/cover no-repeat}
.kw-vloer--tegels .kw-vloer__staal{background:url(vloer/tegels.webp) center/cover no-repeat}
.kw-vloer--parket .kw-vloer__staal{background:url(vloer/parket.webp) center/cover no-repeat}
.kw-vloer--pvc .kw-vloer__staal{background:url(vloer/pvc.webp) center/cover no-repeat}
.kw-vloer--natuursteen .kw-vloer__staal{background:url(vloer/natuursteen.webp) center/cover no-repeat}
.kw-vloer--alle .kw-vloer__staal{background:var(--kw-tq-z);color:var(--kw-tq-d)}

/* ---------- drie banen ---------- */
.kw-banen{display:grid;gap:16px}
@media(min-width:900px){.kw-banen{grid-template-columns:repeat(3,1fr)}}
.kw-baan{background:#fff;border:1px solid var(--kw-lijn);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.kw-baan__kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;text-decoration:none;color:var(--kw-inkt);border-bottom:3px solid var(--kw-tq);background:#fff}
.kw-baan__kop b{display:block;font:700 1.2rem/1.1 var(--kw-romp)}
.kw-baan__kop small{display:block;color:var(--kw-grijs);margin-top:4px;font-size:.85rem}
.kw-baan__kop img{width:80px;height:80px;object-fit:contain;flex:none}
.kw-baan ul{list-style:none;margin:0;padding:6px}
.kw-baan li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:4px;text-decoration:none;color:var(--kw-tekst)}
.kw-baan li a:hover{background:var(--kw-papier);color:var(--kw-tq-d)}
.kw-baan li .kw-ico{color:var(--kw-tq);flex:none}
.kw-baan li span{flex:1;font-weight:600}
.kw-baan li small{color:var(--kw-grijs);font-variant-numeric:tabular-nums}

/* ---------- keuzebalk (Dweilwijzer) ---------- */
.kw-keuzebalk{background:var(--kw-inkt);border-radius:4px;color:#fff}
.kw-keuzebalk h2,.kw-keuzebalk label{color:#fff}
.kw-keuzebalk p{color:rgba(255,255,255,.75)}
.kw-keuzebalk a{color:var(--kw-goud-2)}
.kw-keuzebalk select{border-radius:999px}

/* ---------- deal als balk ---------- */
.kw-dealbalk{display:grid;grid-template-columns:96px 1fr;gap:14px 20px;align-items:center;background:#fff;border:1px solid var(--kw-lijn);border-radius:4px;padding:14px 20px}
@media(min-width:700px){.kw-dealbalk{grid-template-columns:120px 1fr auto}}
.kw-dealbalk__beeld img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.kw-dealbalk__label{margin:0 0 4px;color:var(--kw-grijs);font-size:.78rem;font-weight:500;letter-spacing:.14em}
.kw-dealbalk__label span{background:var(--kw-tq);color:#fff;border-radius:3px;padding:1px 6px;margin-left:4px;letter-spacing:0}
.kw-dealbalk__naam{font:700 1.08rem/1.25 var(--kw-romp);color:var(--kw-inkt);text-decoration:none}
.kw-dealbalk__prijs{margin:6px 0 0}.kw-dealbalk__prijs strong{font-size:1.2rem;color:var(--kw-inkt)}.kw-dealbalk__prijs s{color:var(--kw-grijs)}
.kw-dealbalk .kw-knop{grid-column:1/-1}
@media(min-width:700px){.kw-dealbalk .kw-knop{grid-column:auto}}

/* ---------- vormen ---------- */
.kw-vormen{display:grid;gap:18px;align-items:center;background:#fff;border:1px solid var(--kw-lijn);border-radius:4px;padding:20px 22px}
@media(min-width:900px){.kw-vormen{grid-template-columns:1fr 1.2fr}}
.kw-vormen h2{margin:0 0 6px;font-size:1.3rem}.kw-vormen p{margin:0;color:var(--kw-grijs)}
.kw-vormen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.kw-vormen ul{grid-template-columns:repeat(4,1fr)}}
.kw-vormen a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border:1px solid var(--kw-lijn);border-radius:4px;text-decoration:none;color:var(--kw-inkt)}
.kw-vormen a:hover{border-color:var(--kw-tq)}
.kw-vormen .kw-ico{color:var(--kw-tq)}.kw-vormen small{color:var(--kw-grijs)}

/* ---------- vergelijkbanner, merken, tekst ---------- */
.kw-vglbanner{border-radius:4px;border-left-color:var(--kw-tq)}
.kw-merken a{border-radius:4px}
.kw-merken a:hover{border-color:var(--kw-tq)}
.kw-seotekst{border-radius:4px}

/* ---------- voet: licht ---------- */
.kw-voet{background:var(--kw-papier);color:var(--kw-tekst);border-top:1px solid var(--kw-lijn)}
.kw-voet .kw-logo--beeld img{height:56px}
.kw-voet__kop{color:var(--kw-inkt)}
.kw-voet a{color:var(--kw-tekst)}
.kw-voet a:hover{color:var(--kw-tq-d)}
.kw-voet__onder{background:#ECEFF1;color:var(--kw-grijs)}

/* ---------- filters, productpagina ---------- */
.kw-vink input:checked + .kw-vink__box,.kw-filter input:checked + i{background:var(--kw-tq);border-color:var(--kw-tq)}
.kw-prijsbox{border-radius:4px}
.kw-plakbalk{border-top:3px solid var(--kw-tq)}
.kw-plusmin>div{border-radius:4px}
.kw-plusmin>div.kw-plus li::before{content:"+";color:var(--kw-tq)}
.kw-plusmin>div.kw-min li::before{content:"–";color:#B4462F}