/* Merch House — huisstijl. Rustig, veel wit, één hete accentkleur. */
@font-face{font-family:Sora;font-weight:800;font-display:swap;src:url(/fonts/sora-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(/fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
:root{--paper:#FAFAF7;--paper-2:#F1EFE9;--ink:#111311;--ink-2:#4B4F4B;--line:#E2DFD6;--accent:#FF4D1F;--accent-ink:#C7320A;--ok:#1E7B4B;--r:14px;--display:Sora,system-ui,sans-serif;--text:"IBM Plex Sans",system-ui,sans-serif;--shadow:0 12px 40px rgba(17,19,17,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02;margin:0}
h1{font-size:clamp(44px,7vw,92px);font-weight:800}h2{font-size:clamp(30px,4vw,48px);font-weight:800}h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}.eyebrow.accent{color:var(--accent-ink)}
.lede{font-size:20px;color:var(--ink-2);max-width:58ch}
.fine{font-size:13px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:16px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:#000;transform:translateY(-1px)}.btn.accent{background:var(--accent)}.btn.accent:hover{background:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn-small{padding:10px 16px;font-size:14px}.btn-big{padding:18px 30px;font-size:18px;width:100%;justify-content:center}
.link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px;z-index:99}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.brand .sq{width:12px;height:12px;background:var(--accent);border-radius:3px;display:inline-block}
.nav{display:flex;align-items:center;gap:26px}.nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink-2)}.nav a:hover{color:var(--ink)}.nav .btn{color:#fff;white-space:nowrap}
.nav .lang{font-size:13px;font-weight:600;letter-spacing:.04em;border:1.5px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--ink-2);margin-left:-8px}
.menu{display:none}
@media (max-width:520px){.nav .btn{display:none}}
@media (max-width:820px){.nav > a:not(.btn){display:none}.menu{display:block;position:relative}.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:12px;background:#fff}.menu summary::-webkit-details-marker{display:none}.menu summary svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}.menu ul{position:absolute;right:0;top:54px;margin:0;padding:8px;list-style:none;background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:220px}.menu li a{display:block;padding:12px 14px;text-decoration:none;font-weight:500;border-radius:8px}.menu li a:hover{background:var(--paper-2)}}
/* hero */
.hero{padding:72px 0 40px}.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{margin:14px 0 20px}.hero h1 em{font-style:normal;color:var(--accent)}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:28px 0 22px}
.proof{display:flex;gap:10px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-2)}.proof li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.collage figure{margin:0;background:var(--paper-2);border-radius:var(--r);overflow:hidden;aspect-ratio:7/9;display:flex;align-items:center;justify-content:center;position:relative}
.collage figure:first-child{grid-row:span 2;aspect-ratio:auto}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figcaption{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}
.collage .mug{background:var(--ink);color:#fff}
.collage .mug svg{width:70%;height:70%}.collage .mug figcaption{color:var(--ink)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:40px}}
/* strook */
.voorwie{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:#fff}
.voorwie .wrap{display:flex;gap:18px 34px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ink-2)}.voorwie b{color:var(--ink);font-weight:600}
/* secties */
section{padding:88px 0}.sec-head{max-width:760px;margin-bottom:40px}.sec-head h2{margin:10px 0 14px}.sec-head p{color:var(--ink-2);font-size:18px}
.toggle{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:4px;margin-top:18px}
.toggle label{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle input:checked + label{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.producten{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.product .art{aspect-ratio:1/1;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product .art img{width:100%;height:100%;object-fit:cover;object-position:top}.product .art svg{width:56%;height:56%}
.product .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.product .blanco{font-size:13px;color:var(--ink-2)}
.product .prijs{margin-top:auto;padding-top:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.product .prijs small{display:block;font-family:var(--text);font-weight:500;font-size:12px;color:var(--ink-2);letter-spacing:0}
body.zakelijk .p-part,body.particulier .p-zak{display:none}
.product.anders{background:var(--ink);color:#fff;border-color:var(--ink);text-decoration:none}.product.anders .blanco,.product.anders .prijs small{color:#B9BDB7}.product.anders .art{background:#1d201d}
@media (max-width:1000px){.producten{grid-template-columns:repeat(3,1fr)}}@media (max-width:700px){.producten{grid-template-columns:repeat(2,1fr);gap:12px}.product .body{padding:12px}.product .prijs{font-size:17px}}
/* hoe */
.hoe{background:var(--ink);color:#fff}.hoe .eyebrow,.hoe .sec-head p{color:#B9BDB7}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0;counter-reset:s}
.stappen li{background:#1b1e1b;border-radius:var(--r);padding:28px;counter-increment:s;position:relative}
.stappen li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:44px;color:var(--accent);display:block;margin-bottom:14px;letter-spacing:-.04em}
.stappen strong{display:block;font-size:19px;margin-bottom:8px;font-family:var(--display);letter-spacing:-.01em}.stappen p{color:#C9CDC6}
@media (max-width:800px){.stappen{grid-template-columns:1fr}}
/* regels */
.regels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.regel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}.regel h3{margin-bottom:8px}.regel p{color:var(--ink-2);font-size:15px}
@media (max-width:800px){.regels{grid-template-columns:1fr}}
/* twee kanten */
.kanten{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kant{border-radius:var(--r);padding:36px;background:var(--paper-2)}.kant.b{background:#FFE9E1}.kant h3{font-size:26px;margin:8px 0 14px}.kant ul{margin:0;padding-left:18px;color:var(--ink-2)}.kant li{margin:6px 0}
@media (max-width:800px){.kanten{grid-template-columns:1fr}}
/* formulier */
.aanvraag .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.aanvraag h2{margin:10px 0 14px}
form.f{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:18px}
.row{display:grid;gap:6px}.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-weight:600;font-size:14px}.req{color:var(--accent)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input.touched:invalid,textarea.touched:invalid{border-color:#D23B1E}
.drop{border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;cursor:pointer;background:var(--paper);transition:border-color .15s,background .15s}
.drop.over,.drop:hover{border-color:var(--accent);background:#fff}
.drop input{display:none}.drop .naam{font-weight:600;margin-top:6px;color:var(--ok)}.drop svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--ink-2)}.check input{margin-top:4px}
.opties{display:flex;gap:16px;flex-wrap:wrap}.opties label{font-weight:500;display:flex;gap:8px;align-items:center}
.hp{position:absolute;left:-9999px}
.form-status{min-height:1.2em;font-size:14px}.form-status.err{color:#D23B1E}
.prijsindicatie{background:var(--paper-2);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--ink-2)}.prijsindicatie b{color:var(--ink);font-family:var(--display);font-size:22px;letter-spacing:-.02em;display:block;margin:4px 0 2px}
@media (max-width:900px){.aanvraag .wrap{grid-template-columns:1fr}.row-2{grid-template-columns:1fr}}
/* fotoband */
.fotoband{position:relative;height:420px;overflow:hidden}
.fotoband img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.fotoband::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,19,17,.72),rgba(17,19,17,.05) 55%)}
.fb-tekst{position:absolute;left:0;right:0;bottom:36px;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px}
.fb-groot{color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,32px);letter-spacing:-.02em;max-width:24ch;line-height:1.15;margin-top:6px}
.kant{overflow:hidden}
.kant-foto{width:calc(100% + 72px);margin:-36px -36px 22px;height:230px;object-fit:cover}
/* faq */
.faq details{border-top:1px solid var(--line);padding:18px 0}.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--display);font-size:24px;line-height:1}.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--ink-2);max-width:70ch}
/* zus */
.zus{background:#fff;border-top:1px solid var(--line)}.zus .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.zus p{color:var(--ink-2);max-width:60ch}
/* footer */
.foot{background:var(--ink);color:#C9CDC6;padding:56px 0 32px;font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}.foot a{color:#fff;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:6px 0}.foot-head{color:#fff;font-weight:600;margin-bottom:8px}
.brand-foot{font-family:var(--display);font-weight:800;font-size:24px;color:#fff;letter-spacing:-.04em;margin-bottom:10px}
@media (max-width:800px){.foot .wrap{grid-template-columns:1fr}}
/* legal */
.legal{padding:64px 0}.legal .wrap{max-width:760px}.legal h1{font-size:clamp(34px,5vw,56px);margin:10px 0 20px}.legal h2{font-size:22px;margin:28px 0 8px}.legal p{margin:10px 0;color:var(--ink-2)}
.legal a{color:var(--ink)}
/* bedankt */
.bedankt{padding:96px 0;text-align:center}.bedankt h1{font-size:clamp(40px,6vw,76px);margin:14px 0 18px}.bedankt .lede{margin:0 auto 28px}
.rv{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}.rv.in,html:not(.js) .rv{opacity:1;transform:none}