@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/s/figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/s/figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/s/figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/s/figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/s/figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/s/fraunces-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[hidden]{display:none!important}
img{max-width:100%}

:root{--creme:#fff8ec;--inkt:#2a1620;--kers:#b01136;--kersdonker:#8c0d2b;--rand:#eadcc0;--veldrand:#dccfb6;--zacht:#6b5a5f;--wit:#ffffff;--etiket:#f8e9cd;--roze:#fbe0e5;--opkers:#ffe9ee;
  --kop:Fraunces,Georgia,serif;--tekst:Figtree,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.5;}
h1,h2{font-family:var(--kop);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,5vw,38px)}h2{font-size:21px}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--kers);outline-offset:2px}
.kop{border-bottom:1px solid var(--rand);padding:16px}
.kop div{max-width:1040px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px}
.kop img{width:168px;display:block}.kop span{color:var(--zacht);font-size:14px}

/* ---- betaalpagina ---- */
.rij{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.links{padding:38px 40px 60px 16px;display:grid;justify-items:end}
.links>form{width:100%;max-width:470px;display:grid;gap:26px}
.blok{display:grid;gap:10px}
.veld{display:grid;gap:4px}
.veld label{font-size:13px;font-weight:600;color:var(--zacht)}
.veld input{width:100%;min-width:0;height:50px;border:1px solid var(--veldrand);border-radius:9px;background:var(--wit);color:var(--inkt);padding:0 13px;font:500 16px var(--tekst)}
.veld input:focus{outline:2px solid var(--kers);outline-offset:0;border-color:var(--kers)}
.veld.fout input{border-color:var(--kers);background:var(--roze)}
.veld small{color:var(--kers);font-size:13px;font-weight:600;min-height:0}
.twee{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px}.twee.om{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.land{color:var(--zacht);font-size:14px}
.vink{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:15px}
.vink input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--kers)}
.vink a{color:var(--kers);font-weight:600}
.vink.fout span{color:var(--kers);font-weight:600}
.bestel{height:58px;border:0;border-radius:9px;background:var(--kers);color:var(--wit);font-weight:800;font-size:17px;width:100%}
.bestel:hover{background:var(--kersdonker)}
.onder{font-size:14px;color:var(--zacht)}
.melding{border:2px dashed var(--kers);border-radius:9px;padding:14px 16px;font-weight:600}
.rechts{position:relative;background:var(--kers);color:var(--fg);padding:74px 16px 60px 40px}
.druip{position:absolute;left:0;top:-1px;width:100%;height:38px;display:block}
.inh{max-width:400px;display:grid;gap:22px}
.rechts h2{color:var(--fg)}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;font-variant-numeric:tabular-nums}
.pot{width:64px;height:64px;border-radius:10px;background:var(--potbg,var(--wit));display:grid;place-items:center}.pot img{height:52px;width:auto}
.item b{display:block;font-weight:700}.item small{color:var(--fgz);font-size:14px}
.sommen{display:grid;gap:8px;border-top:1px solid var(--lijn);padding-top:18px;font-variant-numeric:tabular-nums}
.som{display:flex;justify-content:space-between;gap:12px}
.tot{font-size:21px;font-weight:800;margin-top:6px}
.beloftes{display:grid;gap:6px;color:var(--fgz);font-size:15px;list-style:none;padding:0;margin:0}
.beloftes li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.beloftes li::before{content:"";width:10px;height:13px;margin-top:5px;background:var(--fg);border-radius:50%/40% 40% 60% 60%}

/* ---- ronde 4: plankje met potjes om toe te voegen ---- */
#scherm-betalen{max-width:592px;margin:0 auto;padding:26px 16px 40px;display:grid;gap:30px}
#scherm-betalen form{display:grid;gap:30px}
.deel{display:grid;gap:16px}
.dk{font-size:clamp(28px,5vw,36px)}
.sub{color:var(--zacht)}
#plank{position:relative;background:var(--kers);border-radius:16px;padding:54px 12px 0;overflow:hidden}
#plank .druip{height:30px}
.vakken{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:end;border-bottom:10px solid var(--etiket);padding:0 2px}
.vak{position:relative;display:grid;justify-items:center;align-items:end;min-height:112px}
.vak img{height:104px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .25))}
.vak .x{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%;border:0;background:var(--creme);color:var(--inkt);font-weight:800;line-height:1}
.vak .plus{width:100%;height:96px;margin-bottom:6px;border-radius:10px;border:2px dashed var(--opkers);background:none;color:var(--wit);font-size:28px;font-weight:700}
.vak .plus:hover{background:rgb(255 255 255 / .12)}
.plankvoet{color:var(--wit);font-weight:700;text-align:center;padding:12px 0 16px;font-size:15px}
#erbij{display:grid;gap:12px}
.erbijlijst{background:var(--wit);border:1px solid var(--rand);border-radius:12px;padding:0 12px}
.kaartje{display:grid;grid-template-columns:36px minmax(0,1fr) auto 40px;gap:10px;align-items:center;padding:6px 0;font-variant-numeric:tabular-nums}
.kaartje+.kaartje{border-top:1px solid var(--rand)}
.kaartje img{height:38px;width:auto;justify-self:center}
.kaartje b{overflow-wrap:anywhere}
.kaartje s{color:var(--zacht);font-size:14px;margin-right:4px}
.kaartje .nu{color:var(--kers);font-weight:800}
.kaartje button{width:40px;height:40px;border-radius:50%;border:2px solid var(--inkt);background:none;color:var(--inkt);font-weight:800;font-size:20px;line-height:1;padding:0}
.kaartje button:hover{background:var(--inkt);color:var(--wit)}
.vinkjes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vinkjes li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px}
.vinkjes li::before{content:"";width:12px;height:7px;margin-top:6px;border-left:3px solid var(--kers);border-bottom:3px solid var(--kers);transform:rotate(-45deg)}
.telregel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--rand);padding-top:14px;font-variant-numeric:tabular-nums}
.telregel b{font-size:24px}.telregel small{display:block;color:var(--kers);font-size:14px;font-weight:700}
.sommen3{display:grid;gap:8px;font-variant-numeric:tabular-nums;background:var(--wit);border:1px solid var(--rand);border-radius:12px;padding:16px}
.sommen3 s{color:var(--zacht);margin-right:6px}
.ideal{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;border:2px solid var(--kers);border-radius:9px;background:var(--wit);padding:14px}
.ideal i{width:18px;height:18px;border-radius:50%;border:6px solid var(--kers);display:block}
.ideal span{font-weight:700}.ideal small{color:var(--zacht)}
#scherm-betalen .bestel{background:var(--inkt)}
#scherm-betalen .bestel:hover{background:#000}
.verder{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--creme);border-top:1px solid var(--rand);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.verder button{width:100%;height:52px;border:0;border-radius:9px;background:var(--inkt);color:var(--wit);font-weight:800;font-size:16px}
/* inloggen, de inlogmail en eerdere leveringen */
.los{max-width:560px;margin:0 auto;padding:48px 16px;display:grid;gap:22px}
.melding.fout{border-style:solid;background:var(--roze)}
.bestel:disabled,.knop:disabled,.stil:disabled{opacity:.6;cursor:default}
.eerder{display:grid;font-variant-numeric:tabular-nums}
.eerder div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--rand)}
.eerder div:first-child{border-top:0;padding-top:0}
.eerder small{color:var(--zacht);font-size:14px}
.eerder span,.eerder small:last-child{text-align:right}
.brief{background:var(--wit);border:1px solid var(--rand);border-radius:16px;overflow:hidden}
.brief dl{margin:0;padding:14px 22px;border-bottom:1px solid var(--rand);display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;font-size:14px}
.brief dt{color:var(--zacht)}.brief dd{margin:0;font-weight:600}
.brief .inhoud{padding:26px 22px;display:grid;gap:16px;justify-items:start}
.brief .inhoud img{width:150px}
.brief a.knop,a.inlogknop{display:inline-grid;place-items:center;text-decoration:none}
@media (prefers-reduced-motion:no-preference){
 .vak.nieuw img{animation:plof .35s cubic-bezier(.3,1.6,.5,1)}
 #erbij.flits .erbijlijst{animation:flits .7s}
 @keyframes plof{from{transform:translateY(-26px) scale(.8);opacity:0}}
 @keyframes flits{40%{border-color:var(--kers);box-shadow:0 0 0 3px var(--roze)}}
}
@media (min-width:940px){
 #scherm-betalen{max-width:1040px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start;padding-top:38px}
 .verder{display:none}
 .vak{min-height:132px}.vak img{height:122px}.vak .plus{height:112px}
}

/* ---- beheerpagina ---- */
.beheer{max-width:560px;margin:0 auto;padding:36px 16px 40px;display:grid;gap:26px}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--kers)}
.status::before{content:"";width:10px;height:13px;background:var(--kers);border-radius:50%/40% 40% 60% 60%}
.status.uit{color:var(--zacht)}.status.uit::before{background:var(--zacht)}
.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:22px;display:grid;gap:18px}
.groot{font-family:var(--kop);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.uitleg{color:var(--zacht);font-size:15px}
.kies{display:grid;gap:12px}
.kies .rijtje{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center}
.kies .pot{width:52px;height:52px;background:var(--creme)}.kies .pot img{height:42px}
.tel{display:grid;grid-template-columns:40px 28px 40px;align-items:center;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.tel button{width:40px;height:40px;border-radius:50%;border:2px solid var(--inkt);background:none;color:var(--inkt);font-weight:800;font-size:20px;line-height:1}
.tel button:disabled{border-color:var(--rand);color:var(--rand);cursor:default}
.prijsregel{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--rand);padding-top:14px;font-weight:700;font-variant-numeric:tabular-nums}
.prijsregel small{display:block;font-weight:500;color:var(--zacht);font-size:14px}
.knop{height:52px;border-radius:9px;border:0;background:var(--kers);color:var(--wit);font-weight:800;padding:0 20px}
.knop:hover{background:var(--kersdonker)}
.stil{height:52px;border-radius:9px;border:2px solid var(--inkt);background:none;color:var(--inkt);font-weight:700;padding:0 20px}
.acties{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vraag{background:var(--etiket);border-radius:12px;padding:16px;display:grid;gap:12px}
.ok{background:var(--etiket);border-radius:12px;padding:14px 16px;font-weight:600}
.adres{color:var(--zacht);font-size:15px}.adres b{color:var(--inkt)}

@media (max-width:820px){.rij{grid-template-columns:1fr}.rechts{order:-1;padding:58px 16px 30px}.inh{margin:0 auto}.links{padding:26px 16px 40px;justify-items:center}.kop span{display:none}.acties{grid-template-columns:1fr}}