/* Nieuwe look van de webshop (09-11-2026, schakelaar 'nieuwe-look').
   Alles hangt aan html.nl: zonder die klasse doet dit bestand niets, en ziet de
   winkel eruit zoals in styles.css. Wit, zwart en één lettertype; rood alleen
   als klein accent. Ronde hoeken (sinds 09-11-2026 op vraag van Michiel), geen schaduwen, geen emoji. */

.nl-head,.nl-foot{display:none}
html.nl .uspbar,html.nl .site-head,html.nl .site-foot{display:none}
html.nl .nl-head{display:block}
html.nl .nl-foot{display:block}

/* ---------- de bestaande winkel in de nieuwe stijl ---------- */
html.nl{
  --font-display:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ink:#111111; --text:#1c1c1c; --muted:#6a6a66; --soft:#9a9a95;
  --surface2:#F3F3F1; --line:#E3E3DF; --line2:#CACAC5;
  --accent-d:#111111; --accent-sf:#F3F3F1;
  --radius:14px; --radius-lg:20px; --radius-pill:999px; --maxw:1280px;
  --shadow:none; --shadow-lg:none; --shadow-clay:none;
}
html.nl body{color:var(--text)}
html.nl h1,html.nl h2,html.nl h3{font-weight:700;letter-spacing:-.025em}
html.nl a{color:inherit}
html.nl .btn{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;letter-spacing:0}
html.nl .btn:hover{background:#333;border-color:#333;transform:none;box-shadow:none}
html.nl .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
html.nl .btn.ghost:hover{background:var(--ink);color:#fff;transform:none}
html.nl .btn.ghost.on{background:var(--ink);border-color:var(--ink);color:#fff}
html.nl .card{border:0;border-radius:0;box-shadow:none;background:transparent}
html.nl .card:hover{transform:none;box-shadow:none}
html.nl .thumb{background:var(--surface2);border-bottom:0}
html.nl .card:hover .thumb img{transform:scale(1.02)}
html.nl .cardbody{padding:12px 0 6px}
html.nl .cardname{font-size:15px;font-weight:600;min-height:0;letter-spacing:-.01em}
html.nl .price-from,html.nl .price{color:var(--ink);font-weight:500}
html.nl .kicker{color:var(--muted);letter-spacing:.08em}
html.nl input,html.nl select,html.nl textarea{border-radius:12px}
/* De chatknop: klein en zwart in plaats van een grote rode bol met een emoji. */
html.nl .fab{width:52px;height:52px;background:#111;box-shadow:none;font-size:0;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px}
html.nl .fab .fabbadge{font-size:11px}

/* ---------- kop ---------- */
.nl-in{max-width:1280px;margin:0 auto;padding:0 32px}
.nl-head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nl-head .nl-in{display:flex;align-items:center;gap:40px;height:68px}
.nl-logo img{height:28px;width:auto;display:block}
.nl-nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.nl-nav a{color:var(--ink);padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.nl-nav a:hover,.nl-nav a.on{border-bottom-color:var(--ink)}
.nl-act{margin-left:auto;display:flex;align-items:center;gap:6px}
.nl-zoek{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line2);padding:6px 2px;margin-right:10px;cursor:text}
.nl-zoek svg,.nl-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nl-zoek input{border:0;outline:0;background:transparent;font:inherit;font-size:15px;width:150px;color:var(--ink);padding:0}
.nl-zoek input::placeholder{color:var(--soft)}
.nl-zoek:focus-within{border-bottom-color:var(--ink)}
.nl-ico{position:relative;display:grid;place-items:center;width:40px;height:40px;color:var(--ink);background:none;border:0;cursor:pointer;padding:0}
.nl-cart span{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#E1121E;color:#fff;font:600 11px/17px var(--font-body);text-align:center}
.nl-cart span[hidden]{display:none}
.nl-menu{display:none}

/* ---------- startpagina ---------- */
.nl-home{color:var(--ink)}
.nl-im{display:block;background:#F3F3F1;aspect-ratio:1/1;overflow:hidden}
.nl-im img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
/* Productfoto's hebben een witte achtergrond: die valt zo weg tegen het grijze vlak. */
.nl-im img,html.nl .thumb img{mix-blend-mode:multiply}
a:hover>.nl-im img,a.nl-im:hover img{transform:scale(1.03)}
.nl-label{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 18px;letter-spacing:.02em}
.nl-held .nl-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-top:72px;padding-bottom:72px}
.nl-held h1{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.nl-lead{font-size:18px;line-height:1.55;color:#444;max-width:40ch;margin:24px 0 32px}
.nl-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.nl-knop{display:inline-flex;align-items:center;height:50px;padding:0 26px;background:#111;color:#fff!important;font-weight:600;font-size:15px;border:1.5px solid #111;border-radius:999px}
.nl-knop:hover{background:#333;border-color:#333}
.nl-knop-2{background:#fff;color:#111!important}
.nl-knop-2:hover{background:#111;color:#fff!important}
.nl-held-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.nl-feiten{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nl-feiten .nl-in{display:grid;grid-template-columns:repeat(4,1fr)}
.nl-feiten .nl-in>div{padding:26px 24px 26px 0;display:flex;flex-direction:column;gap:4px}
.nl-feiten .nl-in>div+div{padding-left:24px;border-left:1px solid var(--line)}
.nl-feiten b{font-size:15px;font-weight:600}
.nl-feiten span{font-size:14px;color:var(--muted);line-height:1.45}

.nl-blok{padding:80px 0}
.nl-grijs{background:#F7F7F5}
.nl-grijs .nl-im{background:#ECECE8}
.nl-kop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.nl-kop h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
.nl-kop a{font-size:15px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap}

.nl-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.nl-cat-t{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.nl-cat-t span{font-size:15px;font-weight:600}
.nl-cat-t small{font-size:14px;color:var(--muted)}

.nl-dtf{background:#111;color:#fff}
.nl-dtf .nl-in{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;padding-top:80px;padding-bottom:80px}
.nl-dtf h2{color:#fff;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em}
.nl-dtf .nl-label{color:#9a9a95}
.nl-dtf-t>p:not(.nl-label){color:#c9c9c4;font-size:17px;line-height:1.55;max-width:46ch;margin:18px 0 30px}
.nl-dtf-lijst{border-top:1px solid #333}
.nl-dtf-rij{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid #333;color:#fff!important;font-size:16px}
.nl-dtf-rij:hover{padding-left:6px}
.nl-dtf-rij{transition:padding .2s ease}
.nl-dtf-m{color:#9a9a95;font-size:14px}
.nl-dtf-rij b{font-weight:600;min-width:70px;text-align:right}
.nl-dtf-b img{width:100%;display:block;background:#fff}

.nl-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 12px}
.nl-prod-n{font-size:15px;font-weight:600;margin-top:12px;letter-spacing:-.01em}
.nl-prod-p{font-size:14px;color:var(--muted);margin-top:2px}

.nl-werk{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nl-werk .nl-im{aspect-ratio:4/5}
.nl-werk .nl-im img{object-fit:cover}
.nl-werk span{display:block;font-size:15px;font-weight:600;margin-top:12px}
.nl-werk small{display:block;font-size:14px;color:var(--muted)}

.nl-vragen{display:grid;grid-template-columns:1fr 2fr;gap:64px}
.nl-vragen h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
.nl-vragen details{border-top:1px solid var(--line)}
.nl-vragen details:last-of-type{border-bottom:1px solid var(--line)}
.nl-vragen summary{list-style:none;cursor:pointer;padding:20px 32px 20px 0;font-size:16px;font-weight:600;position:relative}
.nl-vragen summary::-webkit-details-marker{display:none}
.nl-vragen summary:after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:1.5px solid #111;border-bottom:1.5px solid #111;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.nl-vragen details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.nl-vragen details p{color:#444;font-size:15px;line-height:1.6;margin:0 0 20px;max-width:60ch}
.nl-meer{font-size:15px;color:var(--muted);margin-top:24px}
.nl-meer a{color:var(--ink);border-bottom:1px solid currentColor}

/* ---------- voet ---------- */
.nl-foot{border-top:1px solid var(--line);margin-top:0;background:#fff}
.nl-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:48px}
.nl-fbrand img{height:26px;width:auto;display:block}
.nl-fbrand p{font-size:14px;color:var(--muted);line-height:1.6;max-width:34ch;margin:18px 0 0}
.nl-foot h4{font-size:13px;font-weight:600;margin:0 0 14px;color:var(--ink)}
.nl-fgrid>div:not(.nl-fbrand){display:flex;flex-direction:column;gap:9px}
.nl-fgrid a{font-size:14px;color:#444}
.nl-fgrid a:hover{color:var(--ink);text-decoration:underline}
.nl-fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:28px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.nl-fbot nav{display:flex;gap:18px}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .nl-head .nl-in{gap:24px}
  .nl-nav{gap:20px}
  .nl-zoek input{width:110px}
  .nl-cats{grid-template-columns:repeat(3,1fr);gap:20px 12px}
  .nl-prods{grid-template-columns:repeat(3,1fr)}
}

/* ---------- telefoon ---------- */
@media (max-width:820px){
  .nl-in{padding:0 16px}
  .nl-head .nl-in{height:56px;gap:12px}
  .nl-logo img{height:22px}
  .nl-nav,.nl-zoek,.nl-act>a[aria-label="Account"]{display:none}
  .nl-menu{display:grid}
  .nl-act{gap:0;margin-right:-8px}
  .nl-held .nl-in{grid-template-columns:1fr;gap:28px;padding-top:32px;padding-bottom:40px}
  .nl-held h1{font-size:36px;max-width:none}
  .nl-lead{font-size:16px;margin:16px 0 24px}
  .nl-knoppen{flex-direction:column}
  .nl-knop{justify-content:center;width:100%}
  .nl-held-b{gap:6px}
  .nl-feiten .nl-in{grid-template-columns:1fr 1fr}
  .nl-feiten .nl-in>div,.nl-feiten .nl-in>div+div{padding:18px 12px 18px 0;border-left:0}
  .nl-feiten .nl-in>div:nth-child(even){padding-left:12px;border-left:1px solid var(--line)}
  .nl-feiten .nl-in>div:nth-child(n+3){border-top:1px solid var(--line)}
  .nl-feiten b{font-size:14px}.nl-feiten span{font-size:13px}
  .nl-blok{padding:48px 0}
  .nl-kop{margin-bottom:18px}
  .nl-cats{grid-template-columns:1fr 1fr;gap:18px 8px}
  .nl-dtf .nl-in{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px}
  .nl-dtf-b{order:-1}
  .nl-dtf-rij{grid-template-columns:1fr auto;gap:4px 16px;font-size:15px}
  .nl-dtf-m{grid-row:2;grid-column:1}
  .nl-dtf-rij b{grid-row:1/3;grid-column:2}
  .nl-prods{grid-template-columns:1fr 1fr;gap:22px 8px}
  .nl-werk{grid-template-columns:1fr 1fr;gap:18px 8px}
  .nl-vragen{grid-template-columns:1fr;gap:16px}
  .nl-fgrid{grid-template-columns:1fr 1fr;gap:32px 16px;padding-top:40px}
  .nl-fbrand{grid-column:1/-1}
  html.nl .fab{width:48px;height:48px;bottom:44px}
}

/* ---------- alles rond (09-11-2026) ---------- */
html.nl .btn{border-radius:999px}
html.nl .card .thumb,.nl-im,.nl-dtf-b img,.cd-mock{border-radius:20px;overflow:hidden}
html.nl .card{border-radius:20px}
.nl-zoek{border:1px solid var(--line2);border-radius:999px;padding:7px 14px}
.nl-zoek:focus-within{border-color:var(--ink)}
.nl-ico{border-radius:999px}
.nl-ico:hover{background:#F3F3F1}
.nl-feiten{border:0}
.nl-feiten .nl-in{background:#F7F7F5;border-radius:24px;padding:4px 24px}
.nl-feiten .nl-in>div+div{border-left-color:#E3E3DF}
.nl-dtf{border-radius:28px;margin:0 32px}
.nl-grijs{border-radius:28px;margin:0 32px}
.nl-vragen details{border:1px solid var(--line)!important;border-radius:16px;padding:0 18px;margin-bottom:10px}
.nl-vragen details:last-of-type{border-bottom:1px solid var(--line)!important}
.nl-dtf-rij{border-radius:14px;padding:16px 14px;border-bottom:1px solid #333}
.nl-dtf-rij:hover{background:#1f1f1f;padding-left:14px}
.nl-foot{border-radius:28px 28px 0 0;background:#F7F7F5;border:0;margin-top:40px}
html.nl .fab{border-radius:999px}

/* ---------- drie diensten ---------- */
.nl-diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nl-dienst{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:24px;background:#F7F7F5;transition:transform .2s,background .2s}
.nl-dienst:hover{transform:translateY(-3px);background:#EFEFEC}
.nl-dl{align-self:flex-start;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:#111;color:#fff}
.nl-dienst b{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin-top:6px}
.nl-dienst small{font-size:15px;color:var(--muted);line-height:1.5}
.nl-dienst em{font-style:normal;font-weight:600;margin-top:auto;padding-top:10px}

/* ---------- cadeau-thema's op de homepage ---------- */
.nl-themas{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.nl-themas a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;aspect-ratio:1;border-radius:24px;
  background:color-mix(in srgb,var(--k) 9%,#fff);color:var(--k);text-align:center;padding:12px;transition:transform .2s}
.nl-themas a:hover{transform:translateY(-3px)}
.nl-themas span{font-size:17px;line-height:1.1}
.nl-themas b{font-size:26px;letter-spacing:.02em;line-height:1}

/* ---------- cadeaupagina ---------- */
.cd-h1{font-size:clamp(32px,4.4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0}
.cd-h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0 0 16px}
.cd-lead{font-size:18px;color:#444;max-width:56ch;line-height:1.55;margin:16px 0 24px}
.cd-themas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cd-themas button{border:1.5px solid var(--line2);background:#fff;border-radius:999px;padding:10px 18px;font:500 15px var(--font-body);cursor:pointer}
.cd-themas button.on{background:#111;color:#fff;border-color:#111}
.cd-velden{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.cd-velden label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.cd-velden input{min-width:260px;padding:13px 16px;border:1.5px solid var(--line2);border-radius:14px;font:inherit;font-size:16px}
.cd-velden input:focus{outline:0;border-color:#111}
.cd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cd-kaart{display:block}
.cd-mock{position:relative;background:#F3F3F1;aspect-ratio:1}
.cd-mock img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cd-tekst{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:34%;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.cd-tekst span{font-size:clamp(10px,1.2vw,17px);line-height:1.1}
.cd-tekst b{font-size:clamp(18px,2.6vw,38px);line-height:1;text-transform:uppercase;letter-spacing:.02em;word-break:break-word}
.cd-tekst i{margin-top:6px;width:70%;aspect-ratio:1;border:2px dashed currentColor;border-radius:14px;font-size:11px;font-style:normal;display:grid;place-items:center;opacity:.7}
.cd-tekst:has(i){top:44%}
.cd-naam{font-weight:600;margin-top:12px}
.cd-prijs{color:var(--muted);font-size:14px}
.cd-klein{font-size:14px;color:var(--muted);margin-top:20px}
.cd-binnenkort{background:#F7F7F5;border-radius:16px;padding:14px 18px;display:inline-block}
.cd-binnenkort a{text-decoration:underline}
label.cd-wijs{animation:cdwijs 1.2s ease-in-out 4;outline:3px solid #f5a623;outline-offset:2px}
@keyframes cdwijs{50%{outline-color:transparent}}

/* ---------- borduurpagina ---------- */
.bd-stappen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.bd-stappen li{background:#fff;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px;counter-increment:s}
.bd-stappen li:before{content:counter(s);width:34px;height:34px;border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;font-weight:600;margin-bottom:8px}
.bd-stappen b{font-size:16px}.bd-stappen span{color:var(--muted);font-size:14px;line-height:1.5}
.bd-twee{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.bd-tabel{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:14px;margin:8px 0 16px}
.bd-tabel th{background:#F7F7F5;text-align:left;font-weight:600;padding:10px 14px}
.bd-tabel td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.bd-tabel td small{display:block;color:var(--muted);font-size:12.5px}
.bd-lijst{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5}
.bd-lijst a{text-decoration:underline}

/* ---------- Black Friday ---------- */
.bf-balk{display:none}
html.nl .bf-balk{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 14px;background:#111;color:#fff;padding:9px 16px;font-size:14px}
.bf-balk b{background:#E1121E;padding:3px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bf-balk button{border:1.5px dashed #fff;background:none;color:#fff;border-radius:999px;padding:3px 12px;font:600 13px var(--font-body);letter-spacing:.06em;cursor:pointer}
.bf-tijd{color:#bbb;font-variant-numeric:tabular-nums}

@media (max-width:1080px){.nl-themas{grid-template-columns:repeat(3,1fr)}.bd-stappen{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .nl-diensten,.bd-twee{grid-template-columns:1fr}
  .nl-dienst{padding:22px}
  .nl-dtf,.nl-grijs{margin:0 12px;border-radius:24px}
  .nl-feiten .nl-in{margin:0 12px;padding:4px 16px;border-radius:20px}
  .cd-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cd-velden input{min-width:0;width:100%}.cd-velden label{flex:1 1 100%}
  .bd-stappen{grid-template-columns:1fr}
  .nl-themas a{border-radius:18px}.nl-themas b{font-size:20px}.nl-themas span{font-size:13px}
}

/* ---------- seizoen in het menu ---------- */
.nl-nav .nl-seizoen{color:#c8102e;font-weight:600}
.nl-nav .nl-seizoen:hover{border-bottom-color:#c8102e}

/* ---------- kant-en-klare ontwerpen ---------- */
.sj-stappen{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 32px}
.sj-stappen li{display:flex;align-items:center;gap:10px;background:#F7F7F5;border-radius:999px;padding:8px 18px 8px 8px;font-weight:500}
.sj-stappen b{width:28px;height:28px;border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;font-size:13px}
.sj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}
.sj-grid4{grid-template-columns:repeat(4,1fr);margin-bottom:0}
.sj-kaart{display:block}
.sj-mock{position:relative;background:#F3F3F1;border-radius:22px;overflow:hidden;aspect-ratio:1}
.sj-mock img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.sj-mock .sj-ov{position:absolute;left:31%;top:24%;width:38%;height:38%;object-fit:contain;mix-blend-mode:normal}
.sj-kaart:hover .sj-mock{background:#ECECE8}
.sj-naam{font-weight:600;font-size:16px;margin-top:12px}
.sj-meta{color:var(--muted);font-size:14px}
.sj-venster{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:grid;place-items:center;padding:16px}
.sj-doos{position:relative;background:#fff;border-radius:26px;padding:28px;width:min(760px,100%);max-height:88vh;overflow:auto}
.sj-doos h2{font-size:22px;margin:0}
.sj-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:999px;background:#F3F3F1;cursor:pointer}
.sj-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.sj-prods button{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit}
.sj-prods b{display:block;margin-top:8px;font-size:14px}.sj-prods span{color:var(--muted);font-size:13px}
/* in de ontwerper: alleen de vrijgegeven velden, geen gereedschap */
.sjmodus .toolrow,.sjmodus .canvasdock,.sjmodus .viewtabs,.sjmodus .techlabel,.sjmodus #methodhint{display:none!important}
.sj-paneel{background:#FFF8E7!important;border:0!important;border-radius:20px!important}
.sj-paneel h3{margin:0 0 12px}
.sj-veld,.sj-foto{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;margin-bottom:14px}
.sj-veld input{padding:13px 16px;border:1.5px solid #d6c9a6;border-radius:14px;font:inherit;font-size:17px;background:#fff}
.sj-veld input:focus{outline:0;border-color:#111}
.sj-foto input{display:none}
.sj-foto span{display:flex;align-items:center;justify-content:center;padding:14px;border:1.5px dashed #b69a52;border-radius:14px;background:#fff;cursor:pointer;font-weight:500}
.sj-foto.bezig span{opacity:.5}.sj-foto.klaar span{border-style:solid;border-color:#1a7f37;color:#1a7f37}
.techlabel{font-size:14px;color:var(--muted);margin-top:8px}
.techlabel a{text-decoration:underline}
@media (max-width:1080px){.sj-grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.sj-grid{grid-template-columns:1fr 1fr;gap:12px}.sj-prods{grid-template-columns:1fr 1fr}.sj-doos{padding:20px}}
.cd-chip{border:1.5px solid var(--line2);border-radius:999px;padding:10px 18px;font-weight:500;font-size:15px;background:#fff}
.cd-chip:hover{border-color:#111}
.cd .cd-h2{margin-top:12px}
.techpil{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#F3F3F1;font-size:13px;font-weight:600;margin-bottom:10px;color:#111!important}
.techpil.bd{background:#111;color:#fff!important}
/* per tekst: bedrukt of geborduurd */
.techwissel{display:inline-flex;background:#F3F3F1;border-radius:999px;padding:3px;margin-left:4px}
.techwissel button{border:0;background:none;border-radius:999px;padding:6px 12px;font:600 12.5px var(--font-body);cursor:pointer;color:#555}
.techwissel button.on{background:#111;color:#fff}
/* jouw ontwerp ook op… */
.kopie{margin:40px 0 20px;padding:28px;border-radius:24px;background:#F7F7F5}
.kopie.vers{background:#FFF8E7}
.kopie h2{margin:0;font-size:24px;letter-spacing:-.02em}
.kopie-kop p{margin:6px 0 18px}
.kopie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kopie-kaart{display:flex;flex-direction:column;gap:6px}
.kopie-kaart span{color:var(--muted);font-size:14px;min-height:20px}
.kopie-mock{position:relative;aspect-ratio:1;background:#fff;border-radius:18px;overflow:hidden}
.kopie-mock img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.kopie-mock .kopie-ov{position:absolute;object-fit:contain;mix-blend-mode:normal}
@media(max-width:820px){.kopie-grid{grid-template-columns:1fr 1fr}.kopie{padding:18px;margin:28px -4px}}
.sj-mock .sj-ov{left:31%;top:24%;width:38%;height:38%}
.sj-ctl{background:#fff;border-radius:16px;padding:14px;margin:-6px 0 14px;display:flex;flex-direction:column;gap:10px}
.sj-ctl label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.sj-ctl input[type=range]{width:100%;accent-color:#111}
.sj-ctl-knop{display:flex;gap:8px}

/* ---------- homepage: drie keuzes bovenaan ---------- */
.nl-start .nl-in{padding-top:48px;padding-bottom:24px}
.nl-start h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.035em;line-height:1.02;margin:0}
.nl-start .nl-lead{margin:12px 0 28px}
.nl-keuzes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nl-keuze{display:flex;flex-direction:column;background:#F7F7F5;border-radius:28px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.nl-keuze:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.nl-keuze-b{aspect-ratio:4/3;background:#EFEFEC;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nl-keuze-b>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.nl-keuze-b .sj-mock{width:100%;height:100%;border-radius:0;background:transparent;aspect-ratio:auto}
.nl-keuze-duo img{width:50%;height:90%;object-fit:contain;mix-blend-mode:multiply}
.nl-keuze-t{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.nl-keuze-t b{font-size:24px;letter-spacing:-.02em}
.nl-keuze-t small{font-size:15px;color:var(--muted);line-height:1.5}
.nl-keuze-t .nl-knop{margin-top:auto;align-self:flex-start;height:46px;padding:0 22px}
.nl-blok-kort{padding:40px 0 56px}
.nl-feiten{margin-bottom:40px}
@media (max-width:820px){
  .nl-start .nl-in{padding-top:24px}
  .nl-keuzes{grid-template-columns:1fr;gap:12px}
  .nl-keuze{flex-direction:row;border-radius:22px}
  .nl-keuze-b{width:38%;aspect-ratio:auto;flex:none}
  .nl-keuze-t{padding:16px}
  .nl-keuze-t b{font-size:19px}.nl-keuze-t small{font-size:13.5px}
  .nl-keuze-t .nl-knop{height:40px;padding:0 16px;font-size:14px;width:auto!important;justify-content:center}
}
.nl-start{padding:0}
/* Black Friday: knop in de balk en de pop-up */
.bf-balk .bf-vraag{border-style:solid;background:#fff;color:#111}
.bf-pop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:grid;place-items:center;padding:16px}
.bf-doos{position:relative;width:min(460px,100%);background:#111;color:#fff;border-radius:28px;padding:36px 30px 30px;text-align:center}
.bf-doos h2{color:#fff;font-size:44px;letter-spacing:-.03em;margin:10px 0}
.bf-doos p{color:#ccc;font-size:15px;line-height:1.55;margin:0 0 18px}
.bf-lbl{display:inline-block;background:#E1121E;color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.bf-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;border:0;background:#2a2a2a;color:#fff;cursor:pointer}
.bf-doos form{display:flex;flex-direction:column;gap:12px}
.bf-doos input[type=email]{padding:14px 16px;border-radius:14px;border:0;font:inherit;font-size:16px}
.bf-ok{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:13px;color:#bbb}
.bf-doos .nl-knop{justify-content:center;background:#E1121E;border-color:#E1121E;width:100%}
.bf-fout{color:#ff8a8a;font-size:14px}
.bf-code{display:block;width:100%;margin:6px 0 14px;padding:16px;border:2px dashed #fff;border-radius:16px;background:none;color:#fff;font:700 26px var(--font-body);letter-spacing:.1em;cursor:pointer}

/* ==========================================================================
   Tweede versie (09-11-2026): minder "AI-webshop".
   Wat dat gevoel gaf: alles zwart-wit, één lettertype, pil-knoppen en heel
   ronde vlakken, drie gelijke kaarten, lege shirts in grijze vakken, zwevende
   hover-effecten en een aftelklok. Nu: een eigen koplettertype (Barlow
   Condensed, drukkerij/werkkledij), FV-rood als hoofdkleur voor de knoppen,
   warm papier in plaats van koel grijs, hoeken van 6 tot 10 px, producten op
   wit met een dunne rand, en wie we zijn met adres en btw-nummer.
   ========================================================================== */
html.nl{
  --font-display:'Barlow Condensed','Archivo Narrow',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Barlow','Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rood:#D7141E; --rood-d:#B10F18; --papier:#F6F2EB; --papier2:#EEE8DD;
  --ink:#171512; --text:#24211d; --muted:#6b655c; --line:#E4DED3; --line2:#CFC7B9;
  --radius:8px; --radius-lg:10px;
}
html.nl body{font-family:var(--font-body);font-size:16px}
html.nl h1,html.nl h2,html.nl h3{font-family:var(--font-display);font-weight:700;letter-spacing:0;line-height:1.02}
html.nl .btn{border-radius:6px;background:var(--rood);border-color:var(--rood)}
html.nl .btn:hover{background:var(--rood-d);border-color:var(--rood-d)}
html.nl .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line2)}
html.nl .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
html.nl input,html.nl select,html.nl textarea{border-radius:6px}
html.nl .card .thumb,.nl-im,.cd-mock,.sj-mock,.kopie-mock{border-radius:8px}
html.nl .card{border-radius:8px}
.nl-im,.sj-mock{background:#fff;border:1px solid var(--line)}
.nl-im img,.sj-mock img{mix-blend-mode:multiply}
a:hover>.nl-im{border-color:var(--ink)}
a:hover>.nl-im img,a.nl-im:hover img{transform:none}
.sj-kaart:hover .sj-mock{background:#fff;border-color:var(--ink)}
.nl-knop,.sj-x,.cd-chip,.cd-themas button,.techpil,.techwissel,.techwissel button,.sj-stappen li,.sj-stappen b{border-radius:6px}
.nl-knop{background:var(--rood);border-color:var(--rood)}
.nl-knop:hover{background:var(--rood-d);border-color:var(--rood-d)}
.nl-zoek{border-radius:6px}
.nl-ico{border-radius:6px}
html.nl .fab{border-radius:10px;background-color:var(--ink)}
.nl-vragen details{border-radius:8px}
.sj-doos,.bf-doos{border-radius:12px}
.kopie,.sj-paneel,.sj-ctl{border-radius:10px!important}
.nl-cat-t span,.sj-naam{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.01em}
.nl-kop a{font-weight:600}
.nl-cats{gap:14px}

/* kop: kleine contactregel erboven */
.nl-nav{font-weight:600;font-size:15.5px}
.nl-nav a.on,.nl-nav a:hover{border-bottom-color:var(--rood)}
.nl-cart span{background:var(--rood)}

/* ---------- startpagina v2 ---------- */
.nl2 .nl-in{max-width:1240px}
.h2-plek{font-size:14px;font-weight:600;color:var(--rood);letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
.h2-titel{font-size:clamp(30px,3.4vw,44px);text-transform:uppercase;margin:0}
.h2-sub{color:var(--muted);margin:6px 0 0}
.h2-lead{font-size:18px;line-height:1.55;color:#4a453e;max-width:46ch;margin:18px 0 26px}
.h2-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.h2-knop{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:6px;background:var(--rood);color:#fff!important;font-weight:600;font-size:16px;border:1.5px solid var(--rood)}
.h2-knop:hover{background:var(--rood-d);border-color:var(--rood-d)}
.h2-knop-2{background:#fff;color:var(--ink)!important;border-color:var(--line2)}
.h2-knop-2:hover{background:#fff;border-color:var(--ink)}
.h2-link{font-weight:600;border-bottom:2px solid var(--rood)}

.h2-held{background:var(--papier);border-bottom:1px solid var(--line)}
.h2-held .nl-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:56px}
.h2-held h1{font-size:clamp(44px,5.6vw,76px);text-transform:uppercase;line-height:.95;max-width:12ch;margin:0}
.h2-feit{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;font-weight:500;color:#4a453e}
.h2-feit li{display:flex;align-items:center;gap:8px}
.h2-feit li:before{content:"";width:14px;height:8px;border-left:2px solid var(--rood);border-bottom:2px solid var(--rood);transform:rotate(-45deg) translateY(-2px)}
.h2-beeld{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:480px}
.h2-beeld>a{position:relative;display:block;overflow:hidden;border-radius:8px;background:#fff;border:1px solid var(--line)}
.h2-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.h2-b1{grid-row:1/3}
.h2-b1 span{position:absolute;left:10px;bottom:10px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;padding:5px 10px;border-radius:4px}
.h2-b2 .sj-mock{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.h2-b2 .sj-mock img{object-fit:contain}
.h2-b2 .sj-mock .sj-ov{object-fit:contain}
.h2-beeld>a:only-child,.h2-beeld>a:first-child:nth-last-child(2){grid-row:1/3}

.h2-diensten .nl-in{padding-top:64px;padding-bottom:24px}
.h2-lijst{margin-top:22px;border-top:2px solid var(--ink)}
.h2-dienst{display:grid;grid-template-columns:240px 1fr 220px 24px;gap:24px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line)}
.h2-dienst b{font-family:var(--font-display);font-size:26px;text-transform:uppercase;line-height:1}
.h2-dienst span{color:var(--muted);font-size:15.5px;line-height:1.5}
.h2-dienst em{font-style:normal;font-weight:600;font-size:15px;text-align:right;white-space:nowrap}
.h2-dienst i{font-style:normal;font-size:20px;color:var(--rood);transition:transform .15s}
.h2-dienst:hover{background:var(--papier)}
.h2-dienst:hover i{transform:translateX(3px)}

.h2-blok{padding:64px 0}
.h2-warm{background:var(--papier);border-radius:0;margin:0}

.h2-dtf{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.h2-prijzen{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.h2-prijzen th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:0 0 8px;border-bottom:2px solid var(--ink)}
.h2-prijzen td{padding:14px 0;border-bottom:1px solid var(--line)}
.h2-prijzen td:last-child,.h2-prijzen th:last-child{text-align:right;font-weight:600}
.h2-prijzen tr{cursor:pointer}
.h2-prijzen tbody tr:hover td{color:var(--rood)}
.h2-dtf-b{width:100%;border-radius:8px;border:1px solid var(--line);display:block}

.h2-wie{background:var(--ink);color:#e9e4db}
.h2-wie .nl-in{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.h2-wie .h2-titel{color:#fff;margin-bottom:18px}
.h2-wie-t p{font-size:17px;line-height:1.6;max-width:52ch;margin:0 0 14px;color:#d6d0c5}
.h2-wie .h2-link{color:#fff}
.h2-kaart{margin:0;background:#211e1a;border:1px solid #3a352e;border-radius:10px;padding:8px 22px}
.h2-kaart>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid #3a352e}
.h2-kaart>div:last-child{border-bottom:0}
.h2-kaart dt{color:#9c958a;font-size:14px}
.h2-kaart dd{margin:0;color:#fff;font-size:15px;line-height:1.5}
.h2-kaart a{color:#fff;border-bottom:1px solid #6b655c}
.h2-kaart a:hover{border-bottom-color:var(--rood)}
.nl2 .nl-vragen details{border-radius:8px}
.nl2 .nl-meer a{border-bottom:1px solid currentColor}

/* voet: warm papier, geen grote ronde hoek */
.nl-foot{border-radius:0;background:var(--papier);border-top:1px solid var(--line);margin-top:0}

/* Black Friday: rustige balk, geen klok */
html.nl .bf-balk{background:var(--ink);font-size:14px;padding:8px 16px;gap:6px 14px}
.bf-balk b{background:none;color:#ff6b6b;padding:0;border-radius:0;font-size:14px;letter-spacing:0;text-transform:none;margin-right:4px}
.bf-balk button,.bf-balk .bf-vraag{border:1px solid #6b655c;background:none;color:#fff;border-radius:4px;padding:3px 10px;font:600 13px var(--font-body);letter-spacing:0}
.bf-balk button:hover{border-color:#fff}
.bf-doos{background:#fff;color:var(--ink);text-align:left}
.bf-doos h2{color:var(--ink);font-size:40px;text-transform:uppercase}
.bf-doos p{color:#4a453e}
.bf-lbl{border-radius:4px;background:var(--ink)}
.bf-x{background:#F1ECE4;color:var(--ink);border-radius:6px}
.bf-doos input[type=email]{border:1.5px solid var(--line2);border-radius:6px}
.bf-ok{color:#4a453e}
.bf-doos .nl-knop{border-radius:6px}
.bf-fout{color:var(--rood)}
.bf-code{border-color:var(--ink);color:var(--ink);border-radius:8px}
.bf-pop.hoek{inset:auto 16px 16px auto;background:none;padding:0;display:block}
.bf-pop.hoek .bf-doos{width:min(360px,calc(100vw - 32px));padding:22px 22px 20px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.bf-pop.hoek .bf-doos h2{font-size:30px;margin:8px 0 6px}
.bf-pop.hoek .bf-doos p{font-size:14px;margin-bottom:12px}

@media (max-width:1080px){
  .h2-held .nl-in{grid-template-columns:1fr;gap:32px}
  .h2-beeld{height:380px}
  .h2-dienst{grid-template-columns:200px 1fr 24px}
  .h2-dienst em{grid-column:2;text-align:left;grid-row:2}
  .h2-dienst i{grid-row:1/3;grid-column:3}
  .h2-dtf,.h2-wie .nl-in{grid-template-columns:1fr;gap:32px}
}
@media (max-width:820px){
  .h2-held .nl-in{padding-top:28px;padding-bottom:32px;gap:24px}
  .h2-held h1{font-size:46px}
  .h2-lead{font-size:16px;margin:14px 0 20px}
  .h2-knoppen{flex-direction:column}.h2-knop{width:100%}
  .h2-feit{gap:6px 16px;font-size:13.5px;margin-top:20px}
  .h2-beeld{height:300px;gap:6px}
  .h2-diensten .nl-in{padding-top:40px;padding-bottom:8px}
  .h2-dienst{grid-template-columns:1fr 20px;gap:4px 12px;padding:16px 2px}
  .h2-dienst b{font-size:22px}
  .h2-dienst span{grid-column:1;font-size:14.5px}
  .h2-dienst em{grid-column:1;grid-row:auto;font-size:14px;color:var(--rood)}
  .h2-dienst i{grid-row:1/4;grid-column:2}
  .h2-blok{padding:44px 0}
  .h2-kaart{padding:4px 16px}.h2-kaart>div{grid-template-columns:92px 1fr;gap:10px}
  .bf-pop.hoek{inset:auto 8px 8px 8px}
  .bf-pop.hoek .bf-doos{width:100%}
}
.nl2 section.h2-held,.nl2 section.h2-diensten{padding:0}
.bf-dat{font-style:normal}
@media (max-width:820px){ .bf-dat{display:none} html.nl .bf-balk{flex-wrap:nowrap;font-size:13px;padding:7px 12px} .bf-balk button{white-space:nowrap} }
html.nl .thumb{background:#fff;border:1px solid var(--line)}
html.nl .card:hover .thumb{border-color:var(--ink)}
html.nl .card:hover .thumb img{transform:none}
html.nl .cardname{font-family:var(--font-display);font-size:19px;font-weight:700}

/* ---------- uitklapmenu onder Personaliseren (09-11-2026) ---------- */
.nl-navitem{position:relative;display:flex;align-items:center}
.nl-navitem>a{display:inline-flex;align-items:center;gap:5px}
.nl-pijl{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.nl-drop{position:absolute;top:100%;left:-24px;padding-top:14px;display:none;z-index:60}
.nl-navitem:hover .nl-drop,.nl-navitem:focus-within .nl-drop{display:block}
.nl-navitem.dicht .nl-drop{display:none}
.nl-navitem:hover .nl-pijl{transform:rotate(180deg)}
.nl-drop-in{display:grid;grid-template-columns:1fr 220px;width:min(760px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(23,21,18,.12);overflow:hidden}
.nl-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:12px}
.nl-drop-grid a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;border:0!important}
.nl-drop-grid a:hover{background:var(--papier)}
.nl-drop-im{width:54px;height:54px;flex:none;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
.nl-drop-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.nl-drop-t{display:flex;flex-direction:column;gap:2px}
.nl-drop-t b{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.05}
.nl-drop-t small,.nl-drop-zij small{font-size:13px;color:var(--muted);font-weight:400}
.nl-drop-zij{background:var(--papier);padding:16px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.nl-drop-zij a{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:8px;border:0!important}
.nl-drop-zij a:hover{background:#fff}
.nl-drop-zij b{font-size:15px;font-weight:600}

/* ---------- populaire producten met tabs ---------- */
.h2-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.h2-tabs button{border:1.5px solid var(--line2);background:#fff;color:var(--ink);border-radius:6px;padding:9px 16px;font:600 15px var(--font-body);cursor:pointer}
.h2-tabs button:hover{border-color:var(--ink)}
.h2-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.h2-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px}
.h2-meer{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:24px;border:1.5px dashed var(--line2);border-radius:8px;aspect-ratio:1}
.h2-meer b{font-family:var(--font-display);font-size:26px;text-transform:uppercase;line-height:1}
.h2-meer span{color:var(--muted)}
.h2-meer i{font-style:normal;color:var(--rood);font-size:22px;margin-top:6px}
.h2-meer:hover{border-color:var(--ink)}
.h2-ook{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.h2-ook a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--rood)}
.pr-tabs{margin:14px 0 18px}
@media (max-width:1080px){.h2-prods{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .h2-prods{grid-template-columns:1fr 1fr;gap:20px 10px}
  .h2-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
  .h2-tabs::-webkit-scrollbar{display:none}
  .h2-tabs button{white-space:nowrap;padding:8px 14px;font-size:14px}
  .h2-meer{aspect-ratio:auto;padding:18px}
}

/* voorbeeld van een kant-en-klaar ontwerp, getekend zoals de ontwerper */
.sj-ovl{position:absolute;inset:0;pointer-events:none}
.sj-ovl>*{position:absolute;display:block;overflow:visible}
.sj-mock .sj-ovl img{object-fit:contain;mix-blend-mode:normal}
.sj-ovfoto{border:2px dashed;border-radius:8px;background:rgba(0,0,0,.04);display:grid!important;place-items:center;container-type:inline-size}
.sj-ovfoto.rond{border-radius:50%}
.sj-ovfoto i{font-style:normal;font-size:clamp(7px,13cqw,15px);font-family:var(--font-body)}

/* kassa: wensen */
.co-wens{border:1px solid var(--line);border-radius:10px;padding:14px 14px 4px;margin:6px 0 14px}
.co-wens textarea{width:100%}
.co-vink{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0 0 12px;font-size:14.5px}
.co-vink input{margin-top:3px}
.co-vink small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.co-sub{margin:-4px 0 14px 26px}
.co-sub p{font-size:13px;margin:6px 0 0;line-height:1.45}
.co-let{font-size:13px;margin:6px 0 0;color:#8a4b00;background:#FFF4E0;border-radius:6px;padding:8px 10px;line-height:1.45}
.cd-chip-groot{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.cd-chip-groot:hover{background:#333}
/* uitklapmenu's voor DTF en cadeaus */
.nl-drop-in.nl-drop-smal{width:min(560px,calc(100vw - 48px));grid-template-columns:1fr 220px}
.nl-drop-lijst{padding:12px;display:flex;flex-direction:column;gap:2px}
.nl-drop-lijst>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:8px;border:0!important}
.nl-drop-lijst>a:hover{background:var(--papier)}
.nl-drop-lijst em{font-style:normal;font-weight:600}
.nl-drop-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 10px 4px;margin-top:4px;border-top:1px solid var(--line)}
.nl-drop-chips a{border:1px solid var(--line2)!important;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:500}
.nl-drop-chips a:hover{border-color:var(--ink)!important}

/* ontwerper: vaste plaatsen (compact, één rij) */
.dplaats{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;text-align:left}
.dplaats-r{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dplaats-k{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.dplaats-b{display:flex;align-items:center;gap:8px;text-align:left;border:1.5px solid var(--line2);background:#fff;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:inherit;color:var(--ink)}
.dplaats-b:hover{border-color:var(--ink)}
.dplaats-b.on{border-color:var(--ink);background:var(--ink);color:#fff}
.dplaats-b.on small{color:#cfc8bd}
.dplaats-b b{display:block;font-size:13.5px;font-weight:600;line-height:1.1}
.dplaats-b small{display:block;font-size:11.5px;color:var(--muted);line-height:1.1}
.dplaats-ic{width:30px;height:30px;flex:none;border-radius:50%;background:#F1ECE4;position:relative}
.dplaats-ic:before{content:"";position:absolute;inset:6px 8px;border:1.5px solid #b9b0a2;border-radius:4px 4px 2px 2px}
.dplaats-ic:after{content:"";position:absolute;background:var(--rood);border-radius:1px}
.dplaats-borst:after{width:4px;height:4px;top:10px;right:10px}
.dplaats-midden:after{width:6px;height:4px;top:10px;left:12px}
.dplaats-groot:after,.dplaats-rug:after{width:10px;height:10px;top:10px;left:10px}
.dplaats-nek:after{width:6px;height:3px;top:8px;left:12px}
.dplaats-mouw:after,.dplaats-cap:after{width:6px;height:6px;top:12px;left:12px}
.dplaats-v{display:flex;gap:8px;align-items:center;font-size:13px;color:#4a453e;cursor:pointer;margin-top:10px}

/* staffelkorting in de ontwerper en de winkelwagen */
.staffel{margin:12px 0 4px;border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}
.staffel-duw{font-size:14px;line-height:1.45;margin-bottom:10px}
.staffel-duw b{color:var(--rood)}
.staffel-rij{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.staffel-rij span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border-radius:6px;background:var(--papier);font-size:12.5px;font-weight:600;position:relative}
.staffel-rij span b{font-size:11.5px;font-weight:500;color:var(--muted)}
.staffel-rij span i{font-style:normal;font-size:10.5px;color:#1a7f37;font-weight:600}
.staffel-rij span.on{background:var(--ink);color:#fff}
.staffel-rij span.on b,.staffel-rij span.on i{color:#cfc8bd}
.staffel small{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.staffel-cart{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;background:#FFF5E6;border:1px solid #F3D9A8;border-radius:8px;padding:12px 14px;margin:0 0 14px}
.staffel-cart b{font-size:15px}
.staffel-cart span{grid-column:1;font-size:13.5px;color:#5d5345}
.staffel-cart button{grid-row:1/3;grid-column:2}
@media(max-width:820px){.staffel-cart{grid-template-columns:1fr}.staffel-cart button{grid-row:auto;grid-column:1;justify-self:start;margin-top:6px}}

/* ---------- ontwerper, nieuwe look (10-11-2026) ---------- */
.nl-ontw .stage-wrap{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none;padding:16px;transition:border-color .15s,background .15s}
.nl-ontw .stage-wrap.sleep{border-color:var(--rood);background:#FFF7F7}
.nl-ontw #fabricWrap{max-width:500px;aspect-ratio:auto}
.toolrow[hidden]{display:none}
.dleeg{position:absolute;z-index:2;transform:translate(-50%,-50%);width:max-content;max-width:92%}
.dleeg[hidden]{display:none}
.dleeg-in{display:flex;flex-direction:column;align-items:stretch;gap:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 6px 24px rgba(30,25,20,.12);text-align:center}
.dleeg-in .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;white-space:nowrap}
.dleeg-in small{font-size:11.5px;color:var(--muted)}
.nl-ontw .btn .ic{flex:none}
.dkanten{gap:8px;margin-top:12px}
.dkant{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted)}
.dkant-img{position:relative;display:block;width:64px;height:64px;border:1.5px solid var(--line2);border-radius:8px;background:#fff;overflow:hidden}
.dkant-img img{width:100%;height:100%;object-fit:contain}
.dkant:hover .dkant-img{border-color:#9a9286}
.dkant.on{color:var(--ink);font-weight:600}
.dkant.on .dkant-img{border:2px solid var(--ink)}
.dkant-vink{position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--rood);box-shadow:0 0 0 2px #fff}
.dacties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 2px}
.dacties .btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px}
.dacties-sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.dico{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:8px;padding:8px 9px;cursor:pointer;font:inherit;font-size:13.5px;color:#4a453e}
.dico:hover{background:var(--papier);color:var(--ink)}
.dico[hidden]{display:none}
.dtk{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dtk h3{margin:0 0 10px}
.dtk-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dtk-seg button{text-align:left;background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.dtk-seg button:hover{border-color:#9a9286}
.dtk-seg button.on{border:2px solid var(--ink);padding:9.5px 11.5px;background:var(--papier)}
.dtk-seg b{display:block;font-size:15px}
.dtk-seg small{display:block;font-size:12.5px;line-height:1.35;color:#5d5345;margin-top:3px}
.dtk-een b{display:block}
.dtk-een small{color:var(--muted);font-size:13px}
.dtk-meer{margin-top:8px;font-size:13px}
.dtk-meer summary{cursor:pointer;color:#4a453e;text-decoration:underline}
.dtk-meer dl{margin:8px 0 0}
.dtk-meer dt{font-weight:700;margin-top:6px}
.dtk-meer dd{margin:2px 0 0;color:#4a453e;line-height:1.45}
@media(max-width:820px){.dplaats-r{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.dplaats-b{flex:none}.dacties-sep{display:none}.dico span{display:none}.dico{padding:10px}.dkant-img{width:56px;height:56px}}
.linkknop{background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;padding:4px}
/* keuzemenu en vaste plekken (10-11-2026) */
.dkeuzemenu{display:none}
.kiezen .dkeuzemenu{display:block}
.kiezen #fabricWrap{height:0!important;overflow:hidden;visibility:hidden;aspect-ratio:auto}
.kiezen .dkanten,.kiezen .dacties,.kiezen .dplaats,.kiezen .dkeuzebalk,.kiezen .dslots{display:none!important}
.dslots{display:none}
.geleid .dslots{display:block}
.geleid .dkanten,.geleid .dacties,.geleid .dplaats{display:none!important}
.dkz-kop h2{font-size:clamp(24px,2.6vw,32px);margin:2px 0 4px}
.dkz-kop p{margin:0 0 14px;color:var(--muted);font-size:15px}
.dkz-tech{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px;max-width:560px}
.dkz-tech button{text-align:left;background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:9px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.dkz-tech button.on{border:2px solid var(--ink);padding:8.5px 11.5px;background:var(--papier)}
.dkz-tech b{display:block;font-size:15px}
.dkz-tech small{display:block;font-size:12.5px;color:#5d5345}
.dkz-rij{margin:0 0 16px}
.dkz-rij h3{font-family:var(--font-body);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.dkz-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.dkz{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:1px;text-align:left;background:#fff;border:1.5px solid var(--line2);border-radius:10px;padding:6px 6px 10px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.dkz:hover{border-color:#9a9286}
.dkz.on{border:2px solid var(--ink);padding:5.5px 5.5px 9.5px;box-shadow:0 4px 14px rgba(30,25,20,.08)}
.dkz.on:after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dkz.geen .dkz-foto img{opacity:.35}
.dkz-foto{position:relative;display:block;aspect-ratio:1;background:#F7F5F1;border-radius:7px;overflow:hidden;margin-bottom:6px}
.dkz-foto img{width:100%;height:100%;object-fit:contain;display:block}
.dkz-merk{position:absolute;background:rgba(215,20,30,.82);border-radius:2px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.dkz-merk.bd{background:#2f5d3a}
.dkz b{font-size:14px;line-height:1.25;padding:0 3px}
.dkz small{font-size:12.5px;color:var(--muted);padding:0 3px}
.dkz-voet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.dkz-voet b{font-size:18px}
.dkz-voet small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.dkz-voet b+small{display:inline}
.dkz-voet .btn{min-width:160px;border-radius:8px}
.dkz-vrij{margin:12px 0 0;font-size:14px;color:var(--muted)}
.dkeuzebalk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);background:var(--papier);border-radius:8px;padding:8px 10px 8px 14px;margin:0 0 12px}
.dkeuzebalk[hidden]{display:none}
.dkb-t{flex:1;min-width:140px}
.dkb-t small{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dkb-t b{font-size:15px}
.dkeuzebalk .btn{border-radius:7px}
.dslots{margin-top:14px}
.dslot{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line2);border-radius:10px;padding:8px;margin-bottom:8px;background:#fff;cursor:pointer}
.dslot.on{border:2px solid var(--ink);padding:7.5px}
.dslot-foto{position:relative;flex:none;width:64px;height:64px;border-radius:7px;background:#F7F5F1;overflow:hidden}
.dslot-foto img{width:100%;height:100%;object-fit:contain}
.dslot-in{flex:1;min-width:0}
.dslot-t b{display:block;font-size:14.5px}
.dslot-t small{font-size:12.5px;color:var(--muted)}
.dslot-t .ok{color:#1a7f37;font-weight:600}
.dslot-k{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dslot-k .btn{display:inline-flex;align-items:center;gap:6px;border-radius:7px}
.dslot-tekst{flex:1;min-width:150px;border:1.5px solid var(--line2);border-radius:7px;padding:7px 10px;font:inherit;font-size:14px}
.dslot-tekst:focus{outline:none;border-color:var(--ink)}
@media(max-width:820px){.dkz-l{grid-template-columns:repeat(3,1fr);gap:7px}.dkz b{font-size:12.5px}.dkz small{font-size:11.5px}.dkz-voet .btn{width:100%}.dslot{align-items:flex-start}.dslot-foto{width:52px;height:52px}}
.linkknop{background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;padding:4px}
/* plekkenlijst (10-11-2026, derde versie) */
.geleid .dleeg,.geleid .dkeuzebalk{display:none!important}
.nl-ontw .designer:has(.geleid) .dtk-vrij{display:none}
.dsl-kop{font-family:var(--font-display);font-size:20px;text-transform:uppercase;margin:4px 0 8px}
.dsl{border:1.5px solid var(--line2);border-radius:10px;background:#fff;margin-bottom:8px;overflow:hidden}
.dsl.heeft{border-color:#b9b0a2}
.dsl.open{border:2px solid var(--ink)}
.dsl-rij{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;cursor:pointer;min-height:60px}
.dsl-foto{position:relative;flex:none;width:48px;height:48px;border-radius:7px;background:#F7F5F1;overflow:hidden}
.dsl-foto img{width:100%;height:100%;object-fit:contain}
.dsl-t{flex:1;min-width:0}
.dsl-t b{display:block;font-size:15.5px}
.dsl-t small{display:block;font-size:13px;color:var(--muted)}
.dsl-t .ok{color:#1a7f37;font-weight:700}
.dsl-knop{flex:none;font-weight:600;font-size:14px;color:var(--rood);white-space:nowrap}
.dsl.heeft .dsl-knop{color:var(--ink);text-decoration:underline}
.dsl-knop.dicht{color:var(--ink);font-size:22px;line-height:1;padding:0 4px}
.dsl-in{padding:2px 12px 14px;border-top:1px solid var(--line)}
.dsl-lab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 6px}
.dsl-chips{display:flex;gap:6px;flex-wrap:wrap}
.dsl-chips button{flex:1 1 0;min-width:96px;text-align:left;background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink)}
.dsl-chips button:hover{border-color:#9a9286}
.dsl-chips button.on{border:2px solid var(--ink);padding:7.5px 9.5px;background:var(--papier)}
.dsl-chips b{display:block;font-size:14px}
.dsl-chips small{display:block;font-size:12px;color:#5d5345;margin-top:1px}
.dsl-inh{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dsl-inh .btn{display:inline-flex;align-items:center;gap:6px;border-radius:7px;min-height:40px}
.dsl-inh .dslot-tekst{flex:1;min-width:160px;min-height:40px;border:1.5px solid var(--line2);border-radius:7px;padding:8px 10px;font:inherit;font-size:16px}
.dsl-inh .dslot-tekst:focus{outline:none;border-color:var(--ink)}
.dsl-noot{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.dsl-voet{display:flex;align-items:center;gap:12px;margin-top:14px}
.dsl-voet .btn{border-radius:7px;min-width:90px}
.dsl-voet .linkknop{font-size:13px;color:var(--muted)}
@media(max-width:820px){
  .nl-ontw .stage-wrap{padding:0;border:0;border-radius:0;background:none}
  .dsl-chips button{min-width:0;padding:7px 8px}.dsl-chips button.on{padding:6.5px 7.5px}
  .dsl-chips b{font-size:13px}.dsl-chips small{font-size:11px}
  .dsl-inh .btn,.dsl-inh .dslot-tekst{flex:1 1 100%}
  .dsl-kop{font-size:18px}
}
/* ontwerper: kledingstuk links, bediening rechts (10-11-2026, vierde versie) */
.dplaats-borstr:after{width:4px;height:4px;top:10px;left:10px}
.dmodus{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--papier);border-radius:10px;padding:4px;margin:0 0 14px}
.dmodus button{text-align:left;background:none;border:0;border-radius:7px;padding:9px 11px;cursor:pointer;font:inherit;color:#5d5345}
.dmodus button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,25,20,.12)}
.dmodus b{display:block;font-size:15px}
.dmodus small{display:block;font-size:12px;line-height:1.35;margin-top:2px}
.dvrij-tip{display:none;font-size:13.5px;color:#4a453e;line-height:1.5;background:#fff;border:1px dashed var(--line2);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.vrij .dvrij-tip{display:block}
.vrij .dslots{display:none}
.nl-ontw .stage-wrap.vrij .dacties{justify-content:flex-start}
.dsl-stijl{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
.dsl-stijl label,.dsl-kl{display:flex;align-items:center;gap:10px}
.dsl-stijl label>span,.dsl-kl>span{flex:none;width:76px;font-size:13px;color:var(--muted)}
.dsl-stijl select{flex:1;min-width:0;border:1.5px solid var(--line2);border-radius:7px;padding:7px 8px;font:inherit;font-size:15px;background:#fff}
.dsl-kl>div{display:flex;flex-wrap:wrap;gap:6px}
.dsl-kl button{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.dsl-kl button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
@media(min-width:1100px){
  .nl-ontw .stage-wrap{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
  .nl-ontw .stage-wrap>.dlinks{flex:1 1 0;min-width:0;position:sticky;top:84px}
  .nl-ontw .stage-wrap>.drechts{flex:0 0 360px;min-width:0}
  .nl-ontw .stage-wrap .dslots{margin-top:0}
  .nl-ontw .stage-wrap .dplaats{margin-top:12px}
  .nl-ontw .stage-wrap .dsl-chips button{min-width:0;flex:1 1 40%}
}
@media(max-width:820px){.dsl-chips button{flex:1 1 40%}.dmodus small{font-size:11.5px}}
.dsl-chips button{position:relative}
.dsl-tip{position:absolute;top:-8px;right:8px;background:#1a7f37;color:#fff;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:4px;padding:2px 6px}
.dsl-chips button:disabled{opacity:.5;cursor:not-allowed;border-style:dashed}
.dsl-chips{row-gap:10px}
/* opties links van het kledingstuk (10-11-2026) */
@media(min-width:1100px){
  .nl-ontw .stage-wrap>.drechts{order:-1;flex:0 0 370px}
}
/* compacte editor per kant + tabbladen op de gsm (10-11-2026, vijfde versie) */
.ded-kanten{display:flex;gap:4px;background:var(--papier);border-radius:10px;padding:4px;margin:0 0 4px;overflow-x:auto;scrollbar-width:none}
.ded-kanten button{flex:1 0 auto;position:relative;background:none;border:0;border-radius:7px;padding:9px 7px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#5d5345;white-space:nowrap}
.ded-kanten button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,25,20,.14)}
.ded-vink{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;border-radius:50%;background:#1a7f37;color:#fff;font-style:normal;font-size:10px;vertical-align:1px}
.ded-lab{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}
.dpk-rij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dpk{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border:1.5px solid var(--line2);border-radius:9px;padding:4px 3px 6px;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.dpk:hover{border-color:#9a9286}
.dpk.on{border:2px solid var(--ink);padding:3.5px 2.5px 5.5px;background:var(--papier)}
.dpk-img{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:6px;background:#F7F5F1;overflow:hidden}
.dpk-img img{width:100%;height:100%;object-fit:contain;display:block}
.dpk b{font-size:12px;font-weight:600;line-height:1.15;text-align:center}
.dpk-tip{position:absolute;z-index:1;top:-7px;right:-5px;width:18px;height:18px;border-radius:50%;background:#1a7f37;color:#fff;font-style:normal;font-size:11px;line-height:18px;text-align:center}
.dkz-merk.vrij{background:none;border:1.5px dashed var(--rood);box-shadow:none}
.ded-uitleg{margin:7px 0 0;font-size:13px;color:#4a453e}
.ded-uitleg .ok{color:#1a7f37;font-weight:700}
.ded-hoe{display:flex;align-items:center;gap:12px;margin-top:14px}
.ded-hoe .ded-lab{margin:0;flex:none}
.ded-seg{display:flex;flex:1;gap:4px;background:var(--papier);border-radius:9px;padding:3px}
.ded-seg button{flex:1;background:none;border:0;border-radius:7px;padding:7px 8px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#5d5345}
.ded-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(30,25,20,.14)}
.ded-seg button:disabled{opacity:.45;cursor:not-allowed}
.ded-noot{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.ded .dsl-inh{flex-wrap:nowrap}
.ded .dsl-inh .btn{flex:none}
.ded .dsl-inh .dslot-tekst{min-width:0}
.ded-stijl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ded-stijl select{flex:0 1 150px;min-width:0;border:1.5px solid var(--line2);border-radius:7px;padding:7px 8px;font:inherit;font-size:15px;background:#fff}
.ded-stijl .dsl-kl>div{gap:5px}
.ded-stijl .dsl-kl button{width:22px;height:22px}
.ded-voet{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ded-voet .linkknop{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#4a453e;padding:0}
.ded-voet .linkknop .ic{width:15px;height:15px}
.ded-twijfel{font-size:13px;color:var(--muted);display:flex;gap:7px;align-items:center}
.dmtabs{display:none}
@media(max-width:880px){
  .nl-ontw .pagehead.compact .muted{display:none}
  .nl-ontw .pagehead.compact h1{font-size:24px;margin:4px 0 0}
  .nl-ontw .pagehead.compact{margin-bottom:6px}
  .nl-ontw #fabricWrap{margin:0 auto}
  .nl-ontw .dmtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--papier);border-radius:10px;padding:4px;margin:8px 0 12px}
  .dmtabs button{background:none;border:0;border-radius:7px;padding:10px 4px;font:inherit;font-size:14px;font-weight:700;color:#5d5345;cursor:pointer}
  .dmtabs button.on{background:var(--ink);color:#fff}
  .nl-ontw[data-mt] .paneltabs{display:none}
  .nl-ontw[data-mt=kleur] .drechts,.nl-ontw[data-mt=maten] .drechts{display:none}
  .nl-ontw[data-mt=ontwerp] .designer>div:nth-child(2){display:none}
  .nl-ontw[data-mt=kleur] #pricepanel{display:none}
  .nl-ontw[data-mt] .prodinfo{margin-top:28px}
  .dpk b{font-size:11px}
  .ded-kanten button{font-size:13px;padding:8px 8px}
  .nl-ontw[data-mt] .swatches{gap:8px}
  .nl-ontw[data-mt] .swatches .swatch{width:32px;height:32px}
  .nl-ontw[data-mt] .designer>div:nth-child(2) .panel{padding:14px}
}
.nl-ontw .paneltabs .pt{flex:1 1 auto;white-space:nowrap;padding:9px 6px}
.nl-ontw .paneltabs .pt[data-p=kleur]{flex-grow:1.6}
/* lettertypes als voorbeeld in hun eigen letter, 'Zelf plaatsen' als eigen tegel (10-11-2026) */
.ded-fonts{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:minmax(108px,max-content);gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.ded-fonts button{background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:18px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.ded-fonts button:hover{border-color:#9a9286}
.ded-fonts button.on{border:2px solid var(--ink);padding:5.5px 9.5px;background:var(--papier)}
.ded-stijl .dsl-kl{margin:0}
.dpk-vrij .dpk-img{display:flex;align-items:center;justify-content:center;color:#5d5345;background:repeating-linear-gradient(45deg,#F7F5F1 0 6px,#efebe4 6px 12px)}
.dpk-vrij.on .dpk-img{color:var(--ink)}
.nl-ontw .designer>div,.nl-ontw .drechts,.nl-ontw .dlinks,.ded{min-width:0}
.ded-fonts{max-width:100%}
@media(min-width:1100px){
  .ded-fonts{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .ded-fonts button{max-width:none;font-size:17px;padding:6px 6px}
  .ded-fonts button.on{padding:5.5px 5.5px}
}
/* meerdere plekken per kant (10-11-2026, zesde versie) */
.ded-lab small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:4px}
.dpk.vol{border-color:#1a7f37}
.dpk.bots{opacity:.5}
.dpk-vol{position:absolute;z-index:1;top:-7px;right:-5px;width:18px;height:18px;border-radius:50%;background:#1a7f37;color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.ded-plek{margin-top:10px;border:1.5px solid var(--ink);border-radius:10px;padding:12px;background:#fff}
.ded-plek-kop b{display:block;font-size:15px}
.ded-plek-kop small{display:block;font-size:12.5px;color:#4a453e;margin-top:1px}
.ded-plek-kop .ok{color:#1a7f37;font-weight:700}
.ded-plek .ded-hoe{margin-top:10px}
.ded-plek .dsl-inh{margin-top:10px}
.ded-let{color:#8a4b00}
.ded-wis{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;color:#4a453e;padding:0}
.ded-wis .ic{width:15px;height:15px}
.ded-overzicht{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.ded-chip{background:var(--papier);border:0;border-radius:999px;padding:5px 10px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.ded-chip:hover{background:#ebe5da}
.ded>.ded-twijfel{margin-top:12px}
/* verwijderen en grootte per plek (10-11-2026) */
.ded-plek-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ded-weg{flex:none;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #e3b4b4;color:#b3121c;border-radius:8px;padding:6px 10px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ded-weg:hover{background:#fff4f4;border-color:#b3121c}
.ded-weg .ic{width:16px;height:16px}
.ded-maat{display:flex;align-items:center;gap:8px}
.ded-maat button{flex:none;width:36px;height:36px;border-radius:8px;border:1.5px solid var(--line2);background:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.ded-maat button:hover{border-color:var(--ink)}
.ded-maat input[type=range]{flex:1;min-width:0;accent-color:var(--ink)}
.ded-maat-lab{flex:none;min-width:84px;text-align:right;font-size:14px;font-weight:700}
/* scherpte bij de plek, controle als pop-up bij de winkelwagen (10-11-2026) */
.ded-dpi{font-size:12.5px;color:#4a453e;margin-top:6px}
.ded-dpi .ok{color:#16a34a}.ded-dpi .net{color:#b45309}.ded-dpi .laag{color:#b91c1c}
.dkeur-pop{position:fixed;inset:0;z-index:9000;background:rgba(20,17,14,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.dkeur-in{background:#fff;border-radius:14px;max-width:460px;width:100%;max-height:90vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dkeur-in h3{margin:0 0 14px;font-size:20px}
.dkeur-p{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;background:var(--papier)}
.dkeur-p b{display:block;font-size:14.5px}
.dkeur-p small{display:block;font-size:12px;color:var(--muted);margin:1px 0 4px}
.dkeur-p p{margin:0;font-size:13.5px;line-height:1.45;color:#3f3a33}
.dkeur-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.dkeur-knoppen .btn{flex:1 1 160px;border-radius:8px}
.dkeur-noot{font-size:12.5px;color:var(--muted);margin:12px 0 0}
/* grootte: drie knoppen + schuifbalk (10-11-2026) */
.ded-maatk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.ded-maatk button{position:relative;background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:8px 6px;cursor:pointer;font:inherit;color:var(--ink);text-align:center}
.ded-maatk button:hover{border-color:#9a9286}
.ded-maatk button.on{border:2px solid var(--ink);padding:7.5px 5.5px;background:var(--papier)}
.ded-maatk b{display:block;font-size:14px}
.ded-maatk small{display:block;font-size:12px;color:#5d5345}
.ded-maatk em{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#1a7f37;color:#fff;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:4px;padding:1px 6px;white-space:nowrap}
.ded-maat-zelf{font-size:12.5px;color:var(--muted);margin:2px 0 2px}

/* ---------- Portfolio als fotobibliotheek (11-11-2026) ---------- */
html.nl .pf{padding-top:36px;padding-bottom:40px}
html.nl .pf-kop h1{font-size:clamp(34px,5vw,56px);line-height:1.02;margin:8px 0 12px}
html.nl .pf-kop p{color:var(--muted);font-size:17px;max-width:60ch;margin:0}
html.nl .pf-balk{position:sticky;top:0;z-index:5;background:#fff;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:14px 0;margin:26px 0 6px;border-bottom:1px solid var(--line)}
html.nl .pf-chips{display:flex;flex-wrap:wrap;gap:8px}
html.nl .pf-chip{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;min-height:40px}
html.nl .pf-chip:hover{border-color:var(--ink)}
html.nl .pf-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
html.nl .pf-rechts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
html.nl .pf-kies{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
html.nl .pf-kies select{border:1px solid var(--line2);background:#fff;padding:8px 30px 8px 12px;font:inherit;font-size:14px;color:var(--ink);min-height:40px;border-radius:999px}
html.nl .pf-weergave{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px}
html.nl .pf-weergave button{border:0;background:none;font:inherit;font-size:14px;font-weight:500;padding:7px 14px;border-radius:999px;color:var(--muted);cursor:pointer}
html.nl .pf-weergave button.on{background:var(--ink);color:#fff}
html.nl .pf-telling{font-size:14px;color:var(--muted);margin:14px 0 0}
html.nl .pf-telling button,html.nl .pf-leeg button{border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;padding:0 0 0 8px}
html.nl .pf-leeg{padding:60px 0;text-align:center;color:var(--muted);line-height:2.2}
html.nl .pf-groep{margin-top:34px}
html.nl .pf-groep h2{font-size:20px;text-transform:capitalize;display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
html.nl .pf-groep h2 span{font-size:14px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
/* Metselwerk: foto's houden hun eigen verhouding, zoals in een fotobibliotheek. */
/* Vast raster met gelijke tegels (4:5). Metselwerk met kolommen zette 2 foto's
   in kolom 1 en 3 met een gat ertussen (11-11-2026). */
html.nl .pf-muur{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
html.nl .pf-foto{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--surface2);cursor:zoom-in;aspect-ratio:4/5}
html.nl .pf-foto img,html.nl .pf-foto video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
html.nl .pf-foto:hover img{transform:scale(1.03)}
html.nl .pf-foto:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
html.nl .pf-play{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;font-size:11px;padding:4px 9px}
html.nl .pf-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.65));display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .2s}
html.nl .pf-foto:hover figcaption,html.nl .pf-foto:focus-visible figcaption{opacity:1}
html.nl .pf-foto figcaption b{font-size:15px;font-weight:600}
html.nl .pf-foto figcaption span{font-size:13px;opacity:.85}
@media (hover:none){ html.nl .pf-foto figcaption{opacity:1;padding-top:22px} }
html.nl .pf-projecten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px 18px;margin-top:28px}
html.nl .pf-proj{display:block;text-decoration:none}
html.nl .pf-pc{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--surface2);position:relative}
html.nl .pf-pc img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
html.nl .pf-proj:hover .pf-pc img{transform:scale(1.03)}
html.nl .pf-tag,html.nl .pf-n{position:absolute;top:10px;background:#fff;color:var(--ink);border-radius:999px;font-size:12px;font-weight:600;padding:4px 10px}
html.nl .pf-tag{left:10px}html.nl .pf-n{right:10px;background:rgba(0,0,0,.6);color:#fff;font-weight:500}
html.nl .pf-proj h3{font-size:17px;margin:12px 0 2px}
html.nl .pf-sub{font-size:14px;color:var(--muted)}
html.nl .pf-cta{margin:56px 0 0;padding:40px 0 0;border-top:1px solid var(--line);text-align:center}
html.nl .pf-cta h2{font-size:clamp(24px,3vw,32px);margin:0 0 6px}
html.nl .pf-cta p{color:var(--muted);margin:0 0 18px}
html.nl .pf-cta .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* lightbox */
.pf-lb{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.94);display:none;grid-template-rows:1fr auto;grid-template-columns:64px 1fr 64px}
.pf-lb.open{display:grid}
.pf-lb-beeld{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:24px 0 8px}
.pf-lb-beeld img,.pf-lb-beeld video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.pf-lb-p{grid-row:1;align-self:center;justify-self:center;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.pf-lb-p:hover{background:rgba(255,255,255,.25)}
.pf-lb-p.l{grid-column:1}.pf-lb-p.r{grid-column:3}
.pf-lb-x{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.pf-lb-onder{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:#fff;padding:14px 24px 20px}
.pf-lb-onder b{display:block;font-size:16px}.pf-lb-onder span{font-size:14px;opacity:.75}
.pf-lb-r{display:flex;align-items:center;gap:18px}
.pf-lb-r a{color:#fff;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 16px}
.pf-lb-r a:hover{background:#fff;color:#111}
@media (max-width:640px){
  html.nl .pf-muur{grid-template-columns:1fr 1fr;gap:8px} html.nl .pf-foto{border-radius:10px}
  html.nl .pf-foto figcaption{display:none}
  html.nl .pf-balk{position:static}
  .pf-lb{grid-template-columns:0 1fr 0}.pf-lb-p{display:none}
  .pf-lb-onder{padding:12px 16px 18px}
}

/* ---------- uitklapmenu's, rechterkant en cadeaumenu (11-11-2026) ---------- */
.nl-drop-in.nl-drop-cad{grid-template-columns:1fr 1fr 250px;width:min(760px,calc(100vw - 48px))}
.nl-drop-kol{padding:18px 12px 16px 20px;display:flex;flex-direction:column}
.nl-drop-kol+.nl-drop-kol{border-left:1px solid var(--line)}
.nl-drop-kol h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px}
.nl-drop-kol a{padding:6px 8px;margin:0 -8px;border-radius:6px;font-size:15px;font-weight:500;border:0!important}
.nl-drop-kol a:hover{background:var(--papier)}
.nl-drop-uit{gap:10px;padding:16px}
.nl-drop-uit .nl-drop-kaart{display:flex;flex-direction:column;gap:2px;padding:0 0 12px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)!important}
.nl-drop-uit .nl-drop-kaart:hover{border-color:var(--ink)!important;background:#fff}
.nl-drop-uit .nl-drop-kaart>b,.nl-drop-uit .nl-drop-kaart>small,.nl-drop-uit .nl-drop-kaart>.nl-drop-lbl{padding:0 12px}
.nl-drop-foto,.nl-drop-uit .sj-mock{aspect-ratio:4/3;background:var(--surface2);margin-bottom:8px;position:relative;overflow:hidden}
.nl-drop-foto img{width:100%;height:100%;object-fit:contain;padding:8px}
.nl-drop-uit .sj-mock img{width:100%;height:100%;object-fit:contain}
.nl-drop-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#d71920);font-weight:700}
.nl-drop-uit>.nl-drop-lbl{padding:4px 2px 0}
.nl-drop-uit a.nl-drop-pijl{flex-direction:row;padding:4px 2px;font-size:14px;font-weight:600}
.nl-drop-uit a.nl-drop-pijl:hover{background:none;text-decoration:underline}
.nl-drop-stap{margin:0;padding:0 0 4px 20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text)}
.nl-drop-stap li::marker{font-weight:700}
.nl-drop-uit small,.nl-drop-uit b{white-space:normal}

/* ---------- Bovenbalk op iPad-breedte (12-11-2026) ----------
   Tussen 820 en 1240 px paste de balk niet: het winkelwagen-icoon viel rechts
   weg en de hele pagina schoof opzij. Smaller zoekveld, en onder 1120 px enkel
   het vergrootglas (het veld klapt open als je erop tikt). */
@media (max-width:1240px) and (min-width:821px){
  html.nl .nl-nav{gap:18px;font-size:14.5px}
  html.nl .nl-zoek input{width:96px}
  html.nl .nl-head .nl-in{gap:20px}
}
@media (max-width:1120px) and (min-width:821px){
  html.nl .nl-nav{gap:14px}
  html.nl .nl-zoek{border-color:transparent;padding:6px 8px;margin-right:0}
  html.nl .nl-zoek input{width:0;transition:width .15s}
  html.nl .nl-zoek:focus-within{border-color:var(--line2)}
  html.nl .nl-zoek:focus-within input{width:120px}
}
/* Ontwerper op de gsm (12-11-2026): de chatknop lag over de knoppen Maattabel en
   In winkelwagen. Zolang de ontwerper open is, staat hij boven de onderbalk. */
@media (max-width:820px){ body:has(#ctaBtn) .fab{bottom:calc(96px + env(safe-area-inset-bottom))} }