/* shop.dvcgraphics.com - zelfde huisstijl als dvcgraphics.com (dvcsite/public_html/css/site.css):
   inktzwarte kop, drukstrook, logo op een wit kaartje, vlakke felle kleuren per afdeling.
   De winkel zelf staat op licht papier: een keuzescherm met prijzen leest beter zwart op wit. */
@font-face{font-family:Zwaar;src:url(/assets/dw/font/black.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Zwaar;src:url(/assets/dw/font/black-ext.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+0100-02AF}
@font-face{font-family:Tekst;src:url(/assets/dw/font/tekst.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tekst;src:url(/assets/dw/font/tekst-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF}

:root{
  --inkt:#0c0c10;--papier:#f4f1ea;--wit:#fff;--geel:#ffd400;--roze:#ff2d87;--blauw:#00b7ff;--groen:#16a34a;--rood:#e5002b;
  --lijn:#d9d4c7;--zacht:#5b5b66;
  --zwaar:Zwaar,"Arial Black",system-ui,sans-serif;
  --tekst:Tekst,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gat:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 16px/1.55 var(--tekst);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--zwaar);font-weight:900;margin:0;line-height:1.05;letter-spacing:-.01em}
:lang(ar) h1,:lang(ar) h2,:lang(ja) h1,:lang(zh) h1,:lang(hi) h1,:lang(ja) h2,:lang(zh) h2,:lang(hi) h2{letter-spacing:0;line-height:1.3}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
.klein{font-size:13px;color:var(--zacht)}
[hidden]{display:none!important}

.drukstrook{display:grid;grid-template-columns:repeat(8,1fr);height:7px}
.drukstrook i:nth-child(1){background:#00b7ff}.drukstrook i:nth-child(2){background:#ff2d87}.drukstrook i:nth-child(3){background:#ffd400}.drukstrook i:nth-child(4){background:#fff}
.drukstrook i:nth-child(5){background:#ff6a13}.drukstrook i:nth-child(6){background:#16a34a}.drukstrook i:nth-child(7){background:#7c3aed}.drukstrook i:nth-child(8){background:#e5002b}

/* de kop */
.kop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px var(--gat);background:var(--inkt);color:#fff}
.merk{display:block;background:#fff;padding:6px 11px 5px;border-radius:12px;transform:rotate(-1deg);flex:none;line-height:0}
.merk img{width:clamp(150px,16vw,220px)}
.shoplabel{font-family:var(--zwaar);font-size:20px;color:var(--geel);transform:rotate(-3deg)}
.kopknoppen{display:flex;align-items:center;gap:14px;margin-inline-start:auto;font-weight:600;font-size:15px}
.tel{font-weight:800;color:var(--geel);text-decoration:none;white-space:nowrap}
.kopknop{text-decoration:none;border:2px solid #fff;padding:6px 12px;border-radius:999px;white-space:nowrap}
.kopknop:hover{background:#fff;color:var(--inkt)}
.wie{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfcfd6}
.mandknop{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--geel);color:var(--inkt)}
.mandknop span{position:absolute;top:-4px;inset-inline-end:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--roze);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.mandknop span.leeg{display:none}
.taal{position:relative}
#taalknop{background:none;border:1px solid #454552;border-radius:4px;padding:5px 6px;cursor:pointer;display:block}
#taalknop img{width:26px;height:19px}
.taalmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;color:var(--inkt);border:2px solid var(--inkt);box-shadow:6px 6px 0 var(--geel);padding:6px;width:190px;max-height:70vh;overflow:auto}
.taalmenu a{display:flex;gap:10px;align-items:center;padding:6px 8px;text-decoration:none;font-size:15px}
.taalmenu a:hover,.taalmenu a.aan{background:var(--geel)}
.taalmenu img{width:24px;height:18px}

/* de afdelingen onder de kop */
.afdelingen{display:flex;gap:8px;overflow-x:auto;padding:10px var(--gat);background:#16161c;scrollbar-width:thin}
.afdelingen a{flex:none;text-decoration:none;color:#fff;font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px;border:2px solid var(--k)}
.afdelingen a:hover,.afdelingen a.aan{background:var(--k);color:var(--i)}

main{max-width:1320px;margin:0 auto;padding:0 var(--gat) 64px}

/* knoppen */
.knop{display:inline-block;padding:11px 18px;font-weight:800;font-size:15.5px;text-decoration:none;border:2.5px solid var(--inkt);cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s;border-radius:0}
.knop:hover{transform:translate(-2px,-2px)}
.knop.geel{background:var(--geel);color:var(--inkt);box-shadow:5px 5px 0 var(--inkt)}
.knop.zwart{background:var(--inkt);color:#fff;box-shadow:5px 5px 0 var(--geel)}
.knop.breed{display:block;width:100%;text-align:center}
.knop[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* de voorpagina */
.held{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,5vw,64px) 0}
.kicker{font-weight:800;color:var(--roze);margin:0 0 12px}
.held h1{font-size:clamp(36px,5vw,72px)}
.uitleg{font-size:clamp(17px,1.4vw,20px);margin:18px 0 0;max-width:36em}
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stappen li{display:flex;align-items:center;gap:14px;background:#fff;border:2.5px solid var(--inkt);padding:14px 16px;box-shadow:5px 5px 0 var(--geel);font-weight:700;font-size:17px}
.stappen li:nth-child(2){box-shadow:5px 5px 0 var(--roze)}.stappen li:nth-child(3){box-shadow:5px 5px 0 var(--blauw)}
.stappen b{font-family:var(--zwaar);font-size:28px;line-height:1;min-width:1.2em}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.catkaart{display:flex;flex-direction:column;text-decoration:none;background:var(--k);color:var(--i);border:2.5px solid var(--inkt);box-shadow:6px 6px 0 var(--inkt);transition:transform .12s}
.catkaart:hover{transform:translate(-3px,-3px)}
.catfoto{aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:2.5px solid var(--inkt)}
.catfoto img{width:100%;height:100%;object-fit:cover}
.catband{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.catnaam{font-family:var(--zwaar);font-size:22px;line-height:1.1}
.cattekst{font-size:14.5px;opacity:.9;flex:1}
.catknop{align-self:flex-start;margin-top:6px;font-weight:800;font-size:14px;background:var(--inkt);color:#fff;padding:6px 12px}

/* een afdeling */
.catkop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px;align-items:center;background:var(--k);color:var(--i);border:2.5px solid var(--inkt);box-shadow:6px 6px 0 var(--inkt);padding:clamp(18px,3vw,32px);margin:28px 0}
.catkop h1{font-size:clamp(30px,4vw,54px)}
.catkop p{margin:10px 0 0;font-size:17px}
.catkop img{border:2.5px solid var(--inkt);background:#fff}
.leegcat{font-size:18px;background:#fff;border:2.5px solid var(--inkt);padding:22px}
.leegcat .knop{margin-top:14px}
.producten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.prodkaart{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:#fff;border:2.5px solid var(--inkt);padding:14px;transition:transform .12s,box-shadow .12s}
.prodkaart:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--geel)}
.prodfoto{aspect-ratio:4/3;background:var(--papier);overflow:hidden}
.prodfoto img{width:100%;height:100%;object-fit:cover}
.prodnaam{font-family:var(--zwaar);font-size:20px;line-height:1.15}
.prodtekst{font-size:14.5px;color:var(--zacht);flex:1}
.prodprijs b{font-size:20px}
.prodkaart .knop{text-align:center;margin-top:4px}

/* het product instellen */
.kruimel{font-size:14px;margin:20px 0 6px;color:var(--zacht)}
.kruimel a{text-decoration:none}
.product{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.prodkop{display:flex;gap:18px;align-items:center;margin-bottom:8px}
.prodkop img{width:180px;border:2.5px solid var(--inkt);background:#fff;flex:none}
.prodkop h1{font-size:clamp(28px,3.4vw,46px)}
.prodkop p{margin:8px 0 0}
.eig{border:none;margin:0;padding:18px 0;border-top:2px solid var(--lijn)}
.eig legend{font-family:var(--zwaar);font-size:20px;padding:0;margin-bottom:12px;float:left;width:100%}
.eig legend+*{clear:both}
.stapnr{display:inline-block;background:var(--k);color:var(--i);font-family:var(--tekst);font-weight:800;font-size:13px;padding:2px 8px;margin-inline-end:6px;vertical-align:middle}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tegel{position:relative;cursor:pointer}
.tegel input{position:absolute;opacity:0;pointer-events:none}
.tegel span{display:flex;flex-direction:column;gap:2px;height:100%;background:#fff;border:2px solid var(--lijn);padding:12px 14px;transition:border-color .1s,box-shadow .1s}
.tegel b{font-size:15.5px}
.tegel small{font-size:13px;color:var(--zacht)}
.tegel:hover span{border-color:var(--inkt)}
.tegel input:checked+span{border-color:var(--inkt);box-shadow:4px 4px 0 var(--k);background:#fffdf3}
.tegel input:focus-visible+span{outline:3px solid var(--blauw);outline-offset:2px}
.tegel.nee{cursor:not-allowed}
.tegel.nee span{opacity:.4;text-decoration:line-through}
.velden{display:flex;flex-wrap:wrap;gap:14px}
.velden label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
input[type=number],input[type=text],input[type=email],input[type=tel],input:not([type]),textarea,select{font:inherit;padding:10px 12px;border:2px solid var(--inkt);background:#fff;border-radius:0;width:100%}
.velden input{width:150px;font-size:18px;font-weight:700}
textarea{resize:vertical}
.hint{font-size:13.5px;color:var(--zacht);margin:8px 0 0}
.staffeltab{margin-top:14px;border-collapse:collapse;width:100%;max-width:480px;background:#fff;font-size:15px}
.staffeltab th,.staffeltab td{border:1.5px solid var(--lijn);padding:7px 10px;text-align:end}
.staffeltab th:first-child,.staffeltab td:first-child{text-align:start}
.staffeltab tbody tr{cursor:pointer}
.staffeltab tbody tr:hover{background:#fffbe0}
.staffeltab tr.aan{background:var(--geel);font-weight:800}
.prijsvak{position:sticky;top:96px;background:#fff;border:2.5px solid var(--inkt);box-shadow:7px 7px 0 var(--k);padding:20px}
.prijsvak h2{font-size:18px;margin-bottom:6px}
.prijsvak .groot{font-family:var(--zwaar);font-size:38px;margin:4px 0 0;line-height:1.1}
.prijsvak .groot small{font-family:var(--tekst);font-size:14px;font-weight:600}
.prijsvak .incl{margin:2px 0 0;font-weight:700}
.perstuk{color:var(--zacht);margin:2px 0 14px;font-size:14px}
.fout{background:#ffe3ea;border-inline-start:5px solid var(--rood);padding:10px 12px;font-weight:600}
.ok{background:#e3f7e8;border-inline-start:5px solid var(--groen);padding:10px 12px;font-weight:600}
.levertijd{font-weight:700;margin:14px 0 6px}
.opbouw summary{cursor:pointer;font-weight:700;font-size:14px}
.opbouw ul{list-style:none;padding:0;margin:8px 0 0;font-size:14px}
.opbouw li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--lijn)}

/* mandje en kassa */
.smal{max-width:760px;margin:0 auto;padding-top:30px}
.smal h1{font-size:clamp(30px,4vw,48px);margin-bottom:16px}
.smal h2{font-size:20px;margin:24px 0 10px}
.mandlijst{display:grid;gap:12px;margin:16px 0}
.mregel{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:2px solid var(--inkt);padding:12px}
.mregel img{width:80px;height:60px;object-fit:cover;background:var(--papier)}
.mregel .mtitel{font-weight:800}
.mregel .mopt{font-size:13.5px;color:var(--zacht)}
.mregel .mprijs{text-align:end;font-weight:800;white-space:nowrap}
.mregel .mprijs small{display:block;font-weight:400;color:var(--zacht);font-size:12.5px}
.mregel button{background:none;border:none;color:var(--rood);font:inherit;font-size:13px;cursor:pointer;padding:4px 0;text-decoration:underline}
.compact .mregel{grid-template-columns:minmax(0,1fr) auto}
.compact .mregel img,.compact .mregel button{display:none}
.mandtotaal{background:#fff;border:2.5px solid var(--inkt);box-shadow:6px 6px 0 var(--geel);padding:16px 18px;margin:16px 0}
.mandtotaal p{display:flex;justify-content:space-between;margin:4px 0}
.mandtotaal .groot{font-family:var(--zwaar);font-size:24px;margin:10px 0 14px}
.kassa label{display:flex;flex-direction:column;gap:4px;font-weight:600;margin:10px 0}
.kassa label.keuze{flex-direction:row;align-items:center;gap:10px;font-weight:600;background:#fff;border:2px solid var(--lijn);padding:10px 12px}
.kassa label.keuze input{width:auto}
.klaar .uitleg{font-size:19px}

/* het back office */
.beheer{padding-top:24px}
.beheer h1{font-size:34px;margin-bottom:12px}
.btabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.btabs a{text-decoration:none;font-weight:800;padding:8px 14px;border:2px solid var(--inkt);background:#fff}
.btabs a.aan{background:var(--inkt);color:#fff}
.btabel{width:100%;border-collapse:collapse;background:#fff;font-size:14.5px}
.btabel th,.btabel td{border:1.5px solid var(--lijn);padding:8px 10px;text-align:start;vertical-align:top}
.btabel th{background:#ece7da}
.bkaart{background:#fff;border:2px solid var(--inkt);padding:16px;margin:0 0 16px}
.bkaart h2{font-size:20px;margin:0 0 10px}
.brij{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.brij label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.brij label.vink{flex-direction:row;align-items:center;gap:8px}
.brij label.vink input{width:auto}
.talen summary{cursor:pointer;font-weight:700;margin:8px 0}
.talen .brij{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.melding{padding:10px 14px;font-weight:700;margin:0 0 14px}
.melding.goed{background:#e3f7e8;border-inline-start:5px solid var(--groen)}
.melding.slecht{background:#ffe3ea;border-inline-start:5px solid var(--rood)}
.regelkaart{border:2px solid var(--lijn);padding:12px;margin:10px 0;background:#fcfbf7}
.regelkaart .kop2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.regelkaart .kop2 input{max-width:280px}
.stafbewerk{border-collapse:collapse;margin-top:8px}
.stafbewerk td,.stafbewerk th{padding:3px 6px;font-size:14px}
.stafbewerk input{width:110px;padding:6px 8px}
.kleinknop{font:inherit;font-size:13px;font-weight:700;padding:5px 10px;border:2px solid var(--inkt);background:#fff;cursor:pointer}
.kleinknop.rood{border-color:var(--rood);color:var(--rood)}
.alskeus{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:14px}
.alskeus label{display:flex;gap:5px;align-items:center;font-weight:500}
.alskeus label input{width:auto}
.proef{background:var(--inkt);color:#fff;padding:14px;position:sticky;bottom:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.proef b{color:var(--geel);font-size:20px}

/* de voet */
.voet{background:var(--inkt);color:#fff;margin-top:40px}
.voetbinnen{max-width:1320px;margin:0 auto;padding:32px var(--gat);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;font-size:15px}
.voet h2{font-size:18px;margin:0 0 8px;color:var(--geel)}
.voet a{color:#fff}
.voetlogo{background:#fff;padding:6px 10px;border-radius:10px;width:200px}
.voet .klein{color:#a9a9b3}
.winkelvoet{background:var(--inkt)}

@media (max-width:980px){
  .product{grid-template-columns:1fr}
  .prijsvak{position:static}
  .held,.catkop{grid-template-columns:1fr}
  .tel,.wie{display:none}
}
@media (max-width:560px){
  .shoplabel{display:none}
  .kopknoppen{gap:8px}
  .prodkop{flex-direction:column;align-items:flex-start}
  .mregel{grid-template-columns:60px minmax(0,1fr)}
  .mregel img{width:60px;height:45px}
  .mregel .mprijs{grid-column:2;text-align:start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}