@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
:root{--groen:#80bd01;--groen-d:#6a9e00;--groen-l:#eef7dc;--tekst:#2b2b2b;--grijs:#6f6f6f;--lijn:#e6e6e6;--bg:#f8f6f0;--r:999px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tekst);font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.kop{display:flex;align-items:center;gap:18px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--lijn)}
.logo{font-weight:600;font-size:18px;color:var(--tekst);text-decoration:none;letter-spacing:-.2px}
.logo span{color:var(--groen)}
.kop h1{font-size:16px;font-weight:500;margin:0;color:var(--grijs)}
body.embed .kop{display:none}
.werk{flex:1;display:flex;min-height:0}
.podium{position:relative;flex:1;min-width:0;background:#e9e7e1;overflow:hidden;touch-action:none}
#doek{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#doek.pak{cursor:grabbing}
.weg-x{position:absolute;left:0;top:0;z-index:3;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#fff;color:#2b2b2b;box-shadow:0 1px 4px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;will-change:transform}
.weg-x[hidden]{display:none}
.weg-x svg{width:16px;height:16px}
.weg-x:hover{background:#f2f2f2}
.weg-x:focus-visible{outline:3px solid #80bd01;outline-offset:2px}
@media (pointer:coarse){.weg-x{width:34px;height:34px}.weg-x svg{width:18px;height:18px}.weg-x::after{content:'';position:absolute;inset:-6px;border-radius:50%}}
.paneel{width:390px;flex:none;background:#fff;border-left:1px solid var(--lijn);overflow-y:auto;padding:16px 18px 24px}
.blok{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--lijn)}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--lijn);background:#fff;border-radius:var(--r);padding:9px 16px;font-weight:500;cursor:pointer;text-decoration:none;color:var(--tekst);transition:background .15s,border-color .15s;min-height:42px;white-space:nowrap}
.knop:hover{border-color:var(--groen)}
.knop.groen{background:var(--groen-d);border-color:var(--groen-d);color:#fff;font-weight:600}
.knop.groen:hover{background:#5a8700;border-color:#5a8700}
.knop.donker{background:#2b2b2b;border-color:#2b2b2b;color:#fff}
.knop.groot{padding:14px 26px;font-size:16px}
.knop.klein{padding:6px 12px;min-height:36px;font-size:14px}
.knop svg{width:22px;height:22px}
.knop[disabled],.knop.uit{opacity:.45;pointer-events:none}
.start{position:absolute;inset:0;display:flex;padding:20px;background:linear-gradient(135deg,#f8f6f0,#eef3e2);overflow:auto}
.start-in{max-width:520px;text-align:center;margin:auto}
.start h2{font-size:24px;font-weight:600;margin:0 0 8px}
.start p{color:var(--grijs);margin:0 0 18px;line-height:1.5}
.start .of{margin:20px 0 10px;font-size:14px}
.kamers{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kamer{border:2px solid transparent;border-radius:14px;padding:0;background:none;cursor:pointer;overflow:hidden;width:150px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.kamer:hover{border-color:var(--groen)}
.kamer img{display:block;width:100%;height:100px;object-fit:cover}
.kamer span{display:block;font-size:13px;padding:6px;background:#fff}
.privacy{display:flex;gap:8px;align-items:flex-start;justify-content:center;font-size:13px;color:#4f6b12;background:var(--groen-l);border-radius:12px;padding:10px 12px;margin-top:22px;text-align:left}
.privacy svg{width:18px;height:18px;flex:none;color:var(--groen-d)}
.privacy.klein{justify-content:flex-start;margin:4px 0 8px}
.disclaimer{font-size:12px;color:var(--grijs);margin:0;line-height:1.5}
.actief{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.actief img{width:58px;height:58px;object-fit:contain;background:#f3f3f3;border-radius:12px}
.actief img:not([src]){visibility:hidden}
.actief-naam{font-weight:600;line-height:1.3}
.actief-prijs{color:var(--groen-d);font-weight:500;font-size:14px}
.rij{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.veld{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--grijs);flex:1;min-width:140px;margin-bottom:10px}
.veld select{border:1.5px solid var(--lijn);border-radius:var(--r);padding:9px 14px;background:#fff;color:var(--tekst);min-height:42px}
.schuif{display:block}
.schuif span.w{float:right;color:var(--tekst);font-weight:500}
input[type=range]{width:100%;accent-color:var(--groen);height:28px}
.schakel{display:flex;border:1.5px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.schakel button{flex:1;border:0;background:#fff;padding:9px 10px;cursor:pointer;min-height:39px}
.schakel button.aan{background:var(--groen);color:#fff}
.knoppen{justify-content:space-between;align-items:center}
.vink{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.vink input{accent-color:var(--groen);width:18px;height:18px}
.schaal-info{font-size:13px;color:var(--grijs);margin:8px 0 0;line-height:1.45}
.schaal-info b{color:var(--tekst)}
.schaal-info a{color:var(--groen-d);font-weight:500}
/* tabbladen per shopcategorie: grote knoppen (44 px), op de telefoon één rij die horizontaal schuift */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tabs button{border:1.5px solid var(--lijn);background:#fff;border-radius:var(--r);padding:0 14px;min-height:44px;cursor:pointer;font-size:14px;white-space:nowrap;touch-action:manipulation;color:var(--tekst)}
.tabs button span{color:var(--grijs);font-size:12px;margin-left:2px}
.tabs button.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.tabs button.aan span{color:#fff;opacity:.85}
@media (max-width:820px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px 10px;padding:0 14px 2px;scroll-padding:0 14px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none}
}
.zoek{width:100%;border:1.5px solid var(--lijn);border-radius:var(--r);padding:9px 16px;margin-bottom:10px;min-height:44px;font-size:16px}
.zoek:focus,.veld select:focus,.invoer input:focus{outline:none;border-color:var(--groen)}
.lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:330px;overflow-y:auto;padding:2px}
.item{border:1.5px solid var(--lijn);border-radius:14px;background:#fff;padding:6px;cursor:pointer;text-align:center;font-size:12px;line-height:1.25}
.item:hover{border-color:var(--groen)}
.item.aan{border-color:var(--groen);box-shadow:0 0 0 2px var(--groen-l)}
.item img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;margin-bottom:4px}
.item .n{display:block;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-height:3.75em}
.item .p{display:block;color:var(--groen-d);font-weight:500;margin-top:2px}
.acties{display:flex;flex-wrap:wrap;gap:8px}
.acties .knop.klein{flex:1 1 30%}
.acties .knop{flex:1 1 45%}
.acties #download,.acties #naar-product{flex-basis:100%}
.ijk{position:absolute;left:0;right:0;bottom:0;padding:12px;pointer-events:none}
.ijk-balk{pointer-events:auto;background:rgba(255,255,255,.97);border-radius:18px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18);max-width:640px;margin:0 auto}
.ijk-balk p{margin:0 0 10px;font-size:14px;line-height:1.45}
.ijk-rij{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.ijk-rij label{display:flex;flex-direction:column;font-size:13px;color:var(--grijs);flex:1;min-width:150px}
.invoer{display:flex;align-items:center;gap:6px;color:var(--tekst)}
.invoer input{width:100%;border:1.5px solid var(--lijn);border-radius:var(--r);padding:9px 14px;min-height:42px}
.tip{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(43,43,43,.88);color:#fff;font-size:13px;padding:8px 14px;border-radius:var(--r);max-width:92%;text-align:center;pointer-events:none;transition:opacity .3s}
.greep{display:none}
[hidden]{display:none!important}
.veld b{color:var(--tekst);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:4px}
.chip{border:1.5px solid var(--lijn);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;min-height:36px;color:var(--tekst)}
.chip.aan{border-color:var(--groen);background:var(--groen-l);font-weight:500}
.bol{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--lijn);cursor:pointer;background-size:cover;background-position:center;padding:0}
.bol.aan{box-shadow:0 0 0 2.5px var(--groen)}
.afw-info{font-size:12px;color:var(--grijs);line-height:1.4}
.noot{flex-basis:100%;font-size:12px;color:var(--grijs);margin:0;line-height:1.4}
@media (max-width:820px){
  .kop{padding:8px 14px;gap:10px}.kop h1{font-size:14px}.logo{font-size:16px}
  .werk{flex-direction:column}
  .podium{flex:none;height:46vh;height:46dvh}
  body:not(.heeft-foto) .podium{flex:1;height:auto}
  body:not(.heeft-foto) .paneel{display:none}
  .paneel{width:auto;flex:1;border-left:0;border-top:1px solid var(--lijn);padding:10px 14px 18px;border-radius:18px 18px 0 0;margin-top:-14px;position:relative;z-index:2;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
  .greep{display:block;width:44px;height:5px;border-radius:5px;background:#d6d6d6;margin:0 auto 10px}
  .lijst{grid-template-columns:repeat(4,1fr);max-height:none}
  .start h2{font-size:20px}.kamer{width:130px}.kamer img{height:84px}
  .start .privacy{margin-top:14px}
  .start{padding:14px}.start h2{font-size:18px;margin-bottom:4px}.start p{font-size:13px;margin-bottom:12px}.start .of{margin:12px 0 8px}
  .knop.groot{padding:12px 20px;font-size:15px}
  .ijk{position:fixed;z-index:20;padding:8px}
  .ijk-balk p{font-size:13px;margin-bottom:8px}
  .tip{top:auto;bottom:22px;font-size:12px}
  .bestelbalk{bottom:-18px}
}
@media (max-width:420px){.lijst{grid-template-columns:repeat(3,1fr)}}

/* randafwerking als tegels, met dezelfde afbeeldingen en woorden als de kaartjes op de productpagina's van mosschilderij.nl.
   Alle tegels staan naast elkaar in beeld (geen verborgen scrollrij), Kopse zijde zwart altijd als eerste. */
.tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:6px}
.tegels.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.tegel{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:5px 5px 7px;min-height:44px;border:1.5px solid var(--lijn);border-radius:12px;background:#fff;cursor:pointer;color:var(--tekst);font:inherit;text-align:center;min-width:0;touch-action:manipulation}
.tegel img{width:100%;aspect-ratio:3/1;object-fit:contain;border-radius:6px;background:#fff;display:block}
.tegel .tn{font-size:11.5px;line-height:1.25;font-weight:500;min-height:2.5em;display:flex;align-items:center;justify-content:center;overflow-wrap:break-word}
.tegels.twee .tn{font-size:12.5px}
.tegel .to{font-size:11.5px;color:var(--groen-d);font-weight:600;line-height:1.1}
.tegel.aan{border-color:var(--groen);box-shadow:0 0 0 2px var(--groen) inset;background:var(--groen-l)}
.tegel.anders{opacity:.6}
.tegel:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
@media (max-width:420px){.tegel{padding:4px 3px 6px}.tegel .tn{font-size:10.5px}.tegels.twee .tn{font-size:12px}.tegels{gap:5px}}

/* ---- v4: onboarding, voortgang, vertrouwen, toegankelijkheid ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;background:#fff;padding:8px 14px;border-radius:8px;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.2)}
:focus-visible{outline:2px solid var(--groen-d);outline-offset:2px}
#doek:focus-visible{outline-offset:-3px}
.knop svg{width:20px;height:20px;flex:none}
.knop.groot svg{width:22px;height:22px}
.kop{position:relative}
.terug{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--tekst);text-decoration:none;font-size:14px;font-weight:500;padding:6px 10px;border-radius:999px}
.terug:hover{background:var(--groen-l)}
.terug svg{width:18px;height:18px}
.start-product{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:5px 16px 5px 5px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin:0 auto 14px;text-align:left}
.start-product img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:#f3f3f3}
.start-product small{display:block;font-size:11px;color:var(--grijs);line-height:1.2}
.start-product b{font-weight:600;font-size:14px;line-height:1.25}
.stappen-uitleg{list-style:none;padding:0;margin:4px auto 20px;display:flex;gap:10px;justify-content:center;text-align:left}
.stappen-uitleg li{flex:1;display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.75);border-radius:14px;padding:10px;font-size:13px;line-height:1.35;max-width:170px}
.stappen-uitleg b,.stappen b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--groen-d);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.fototip{font-size:12.5px!important;margin:10px auto 0!important;max-width:420px;color:#666}
.fototip svg{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:4px;color:#5a8700}
.laden{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:rgba(248,246,240,.86);z-index:5;font-weight:500}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--groen-l);border-top-color:var(--groen-d);animation:draai 0.9s linear infinite;display:inline-block}
.spin.klein{width:22px;height:22px;border-width:2.5px}
.laadt{text-align:center;padding:20px 0}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}.tip{transition:none}}
.stappen{list-style:none;display:flex;gap:4px;padding:0;margin:0 0 14px;counter-reset:s}
.stappen li{flex:1;position:relative}
.stappen button{width:100%;display:flex;align-items:center;gap:7px;border:0;background:#f4f4f2;border-radius:999px;padding:5px 10px 5px 5px;cursor:pointer;font-size:13px;color:var(--grijs);min-height:34px}
.stappen b{width:24px;height:24px;background:#d9d9d9}
.stappen .klaar b{background:var(--groen-d);font-size:0}
.stappen .klaar b::after{content:"";width:9px;height:5px;border:2.2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.stappen .klaar button{color:var(--tekst)}
.stappen .nu button{background:var(--groen-l);color:var(--tekst);font-weight:500;box-shadow:0 0 0 1.5px var(--groen-d) inset}
.stappen .nu b{background:var(--groen-d)}
.kop2{font-size:15px;font-weight:600;margin:0 0 10px}
.advies p{font-size:13px;color:var(--grijs);margin:0 0 10px;line-height:1.45}
.advies-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.advies-knoppen .knop{flex:1 1 30%}
#wa svg{color:#1faa53}
.vertrouwen{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px;font-size:13px}
.vertrouwen li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.vertrouwen svg{width:17px;height:17px;flex:none;color:var(--groen-d);margin-top:1px}
.vertrouwen a{color:var(--tekst);text-decoration:underline;text-decoration-color:#c8c8c8;text-underline-offset:2px}
.vertrouwen a:hover{text-decoration-color:var(--groen-d)}
.acties{order:0}
.acties #download,.acties #deel{flex:1 1 45%}
.acties #naar-product{flex-basis:100%;font-size:15.5px;min-height:48px}
.noot{order:0}
.ijk-stappen{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.45}
.ijk-stappen li{margin-bottom:2px}
.schuif .w{float:right;color:var(--tekst);font-weight:500}
.uit-melding{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);text-align:center;padding:24px}
.paneel{scroll-behavior:smooth}
@media (max-width:820px){
  .stappen-uitleg{flex-direction:column;align-items:stretch;gap:6px;margin-bottom:14px}
  .stappen-uitleg li{max-width:none;padding:8px 10px;align-items:center}
  .terug span{display:none}
  .kop h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stappen{margin-bottom:10px}
  .stappen button{font-size:12px;padding:4px 8px 4px 4px;min-height:32px}
  .acties #naar-product{font-size:15px}
}
@media (max-width:360px){.stappen span{display:none}.stappen button{justify-content:center}}
.bestelbalk{position:sticky;bottom:-24px;z-index:3;background:#fff;padding:10px 0 12px;margin:-6px 0 8px;box-shadow:0 -10px 12px -12px rgba(0,0,0,.25)}
.bestelbalk .knop{width:100%;min-height:50px;font-size:15.5px}
body:not(.heeft-foto) #blok-actief{display:none}
.stappen button{white-space:nowrap}
.stappen span{overflow:hidden;text-overflow:ellipsis}
.acties .knop{flex:1 1 45%}
.acties .knop.klein{flex:1 1 28%}
.fout-melding{background:#fff4e5;color:#7a4b00;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;margin:0 0 12px}
.fout-melding .knop{margin-left:6px;min-height:34px}
@media (max-width:820px){.start{align-items:flex-start}.start-in{margin:6px auto 0}}

/* Alles in winkelmandje */
.bestelbalk #alles-mand{margin-bottom:8px}
.bestelbalk #alles-mand[hidden]{display:none}
.bestelbalk #naar-product.licht{background:#fff;color:#1d1d1b;border:2px solid #80bd01;min-height:42px;font-size:14px}
.mand-blok .kop3{font-size:14px;font-weight:600;margin:0 0 6px}
.mand-lijst{list-style:none;margin:0 0 6px;padding:0;max-height:190px;overflow:auto;border:1px solid #e6e3da;border-radius:6px;background:#fff}
.mand-lijst li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:7px 10px;border-top:1px solid #efece4;font-size:13px;line-height:1.35}
.mand-lijst li:first-child{border-top:0}
.mand-naam{font-weight:600;grid-column:1}
.mand-wat{grid-column:1;color:#555}
.mand-prijs{grid-column:2;grid-row:1/span 2;align-self:center;font-weight:600;white-space:nowrap}
.mand-uitslag{margin-top:8px;padding:10px 12px;border-radius:6px;background:#f3f8e6;font-size:13.5px;line-height:1.45}
.mand-uitslag p{margin:0 0 6px}
.mand-uitslag ul{margin:0 0 10px;padding-left:18px}
.mand-uitslag .knop{display:inline-flex;width:auto;min-height:44px}
.mand-uitslag code{font-size:11px;word-break:break-all}
.mand-ophang-vink{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px;margin:0 0 4px;cursor:pointer}
.mand-ophang-vink input{width:20px;height:20px;accent-color:#80bd01;flex:none}
.mand-ophang{grid-column:1/span 2;color:#5b7d12;font-size:12.5px}