:root{
  --ink:        #2B2A22;
  --soil:       #4A4636;
  --green-deep: #3E6B2C;
  --green-mid:  #62A044;
  --green-soft: #B9D19E;
  --parchment:  #FFFFFF;
  --parchment-2:#FBF9F4;
  --line:       rgba(62,107,44,0.20);
  --shadow:     0 16px 40px rgba(62,107,44,0.12);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond', serif;font-weight:400;}
.latin{font-style:italic;font-family:'Cormorant Garamond', serif;}
.script{font-family:'Parisienne', cursive; line-height:1;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1080px;margin:0 auto;padding:0 28px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;
  color:var(--green-mid);font-weight:600;
}

/* ---------- GEDEELDE FOCUS-/AANRAAKSTIJL ---------- */
a, button, input, select, .choice-btn, .btn, .btn-plant, .btn-solid,
.btn-submit, .btn-cancel, .plant-check, .gate-card button{
  outline:none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.choice-btn:focus-visible, .btn:focus-visible, .btn-plant:focus-visible,
.btn-solid:focus-visible, .btn-submit:focus-visible, .btn-cancel:focus-visible,
.plant-check:focus-within, .gate-card button:focus-visible,
a:focus, button:focus, input:focus, select:focus{
  outline:2px solid var(--green-mid);
  outline-offset:2px;
  border-radius:4px;
}
.choice-btn:focus-visible, .choice-btn:focus,
.btn-plant:focus-visible, .btn-plant:focus{
  border-radius:6px;
}

/* ---------- GATE ---------- */
#gate{
  position:fixed;inset:0;z-index:999;
  background:var(--parchment-2);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#gate.hidden{display:none;}
.gate-card{
  background:var(--parchment);border:1px solid var(--line);border-radius:4px;
  max-width:420px;width:100%;padding:48px 36px;text-align:center;box-shadow:var(--shadow);
}
.gate-card .monogram{font-family:'Parisienne', cursive;font-size:2.8rem;margin-bottom:2px;color:var(--green-deep);}
.gate-card p{color:var(--soil);opacity:.8;font-size:.95rem;line-height:1.6;}
.gate-card input{
  width:100%;padding:14px 16px;margin-top:18px;border:1px solid var(--line);
  background:#fff;border-radius:3px;font-size:1rem;letter-spacing:.05em;text-align:center;font-family:inherit;
}
.gate-card input:focus{outline:2px solid var(--green-mid);outline-offset:2px;}
.gate-card button{
  margin-top:14px;width:100%;padding:14px;background:var(--green-deep);color:#fff;
  border:none;border-radius:3px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;transition:background .2s;
}
.gate-card button:hover{background:var(--green-mid);}
.gate-error{color:#b0503d;font-size:.82rem;margin-top:10px;min-height:1.2em;}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav .container{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;}
nav .brand{font-size:1.6rem;color:var(--green-deep);text-decoration:none;}
nav ul{list-style:none;display:none;gap:28px;margin:0;padding:0;}
nav ul li a{
  font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;color:var(--soil);opacity:.75;transition:opacity .2s;
}
nav ul li a.active{opacity:1;color:var(--green-deep);font-weight:600;}
nav ul li a:hover{opacity:1;}
@media(min-width:680px){ nav ul{display:flex;} }
nav .burger{
  display:block;background:none;border:none;font-size:1.4rem;color:var(--green-deep);
}
@media(min-width:680px){ nav .burger{display:none;} }
nav .mobile-menu{
  display:none;flex-direction:column;gap:2px;background:#fff;border-top:1px solid var(--line);
}
nav .mobile-menu.open{display:flex;}
nav .mobile-menu a{
  padding:16px 28px;text-decoration:none;color:var(--soil);font-size:1rem;border-bottom:1px solid var(--line);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;text-decoration:none;
  border:1px solid var(--green-deep);color:var(--green-deep);background:none;
  padding:14px 26px;border-radius:3px;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;transition:background .2s,color .2s;
  min-height:44px;line-height:1.4;
}
.btn:hover{background:var(--green-deep);color:#fff;}
.btn-solid{background:var(--green-deep);color:#fff;}
.btn-solid:hover{background:var(--green-mid);}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;background:var(--parchment);padding:60px 24px;
}
.hero-inner{max-width:640px;}
.hero .motto{font-size:clamp(2rem,6vw,3rem);color:var(--green-mid);margin-bottom:6px;}
.hero h1{
  font-family:'Parisienne', cursive;font-weight:400;
  font-size:clamp(3rem,11vw,6rem);color:var(--green-deep);margin:0 0 18px;
}
.hero .sub{font-size:1.3rem;color:var(--soil);margin-bottom:38px;}
.hero .btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- GENERIC PAGE HEADER ---------- */
.page-header{text-align:center;padding:60px 24px 8px;max-width:640px;margin:0 auto;}
.page-header h1{font-size:clamp(2rem,5vw,2.8rem);color:var(--green-deep);margin:10px 0 16px;}
.page-title-large{
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  font-size:clamp(1.25rem,3.4vw,1.7rem) !important;color:var(--green-mid);margin:10px 0 6px;
}
.page-header p{color:var(--soil);opacity:.85;line-height:1.7;}

/* ---------- WIZARD (aanwezigheid) ---------- */
.wizard{max-width:600px;margin:0 auto;padding:6px 24px 90px;}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.choice-btn{
  display:block;width:100%;text-align:left;background:var(--parchment-2);
  border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin-bottom:16px;
  transition:border-color .2s,background .2s;min-height:44px;
}
.choice-btn:hover{
  border-color:var(--green-mid);background:#fff;
  outline:2px solid var(--green-mid);outline-offset:2px;
}
.choice-btn:active, .choice-btn.is-active{
  background:var(--green-mid);border-color:var(--green-mid);
}
.choice-btn:active .title, .choice-btn.is-active .title{color:#fff;}
.choice-btn:active .subtext, .choice-btn.is-active .subtext{color:#fff;opacity:.9;}
.choice-btn:active strong, .choice-btn.is-active strong{color:#fff;}
.choice-btn .title{font-size:1.3rem;color:var(--green-deep);display:block;margin-bottom:4px;}
.choice-icon{width:44px;height:44px;display:block;margin-bottom:10px;}
.card-illustration{max-width:300px;margin:0 auto 12px;}
.wizard-hero-echo{text-align:center;margin:8px 0 20px;}
.wizard-hero-echo .motto{font-size:clamp(1.3rem,4vw,1.7rem);color:var(--green-mid);margin-bottom:2px;}
.wizard-hero-echo h2{font-size:clamp(2.2rem,7vw,3.2rem);color:var(--green-deep);margin:4px 0;font-weight:400;}
.wizard-hero-echo .sub{font-size:1rem;color:var(--soil);}
.card-illustration svg{width:100%;height:auto;display:block;}
.choice-btn .subtext{font-size:.9rem;color:var(--soil);opacity:.8;}
.choice-btn-preferred{
  background:#7CB342;border-color:#7CB342;
}
.choice-btn-preferred:hover{
  background:#8BC34A;border-color:#8BC34A;
}
.choice-btn-preferred .title{color:#FFFFFF;}
.choice-btn-preferred .subtext{color:#F3F9EC;opacity:1;}
.choice-btn-preferred:active .title, .choice-btn-preferred.is-active .title{color:#FFFFFF;}
.choice-btn-preferred:active .subtext, .choice-btn-preferred.is-active .subtext{color:#F3F9EC;}
.wizard-back{
  display:inline-block;margin-bottom:24px;font-size:.85rem;color:var(--soil);
  text-decoration:none;opacity:.75;
}
.wizard-back:hover{opacity:1;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--green-mid);font-weight:600;margin-bottom:6px;}
.field input, .field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:3px;
  font-size:1rem;font-family:inherit;background:#fff;min-height:44px;
}
.toggle-row{display:flex;gap:10px;}
.toggle-row .field{flex:1;}
.form-error{color:#b0503d;font-size:.85rem;margin:10px 0;min-height:1.2em;}
.wizard-confirmation{text-align:center;padding:40px 0;}
.wizard-confirmation h2{color:var(--green-deep);margin-bottom:14px;}

/* ---------- GARDEN GRID (huwelijkslijst) ---------- */
/* ---------- GIFT TITLE ---------- */
.gift-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,5.5vw,2.9rem);color:var(--green-deep);margin:6px 0 18px;text-align:center;}

/* ---------- GARDEN STRIP ---------- */
.garden-strip-wrap{max-width:900px;margin:0 auto;padding:10px 24px 10px;}
.strip-title{
  text-align:center;font-size:1.1rem;color:var(--green-mid);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 -6px;
}
.garden-strip{padding:0 0 40px;}
.strip-plant:focus-visible{outline:2px solid var(--green-mid);outline-offset:3px;}

/* ---------- PRACTICAL NOTE ---------- */
.practical-note{
  max-width:620px;margin:0 auto 30px;padding:14px 20px;text-align:center;
  background:var(--parchment-2);border:1px solid var(--line);border-radius:6px;
  color:var(--soil);font-size:.95rem;
}

/* ---------- PLANTENTEGELS (3 + 2) ---------- */
.plant-list{
  max-width:1000px;margin:0 auto;padding:10px 24px 60px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:32px 24px;
}
.plant-tile{flex:0 1 260px;max-width:260px;}
@media(max-width:640px){
  .plant-tile{flex:0 1 45%;max-width:45%;}
}
@media(max-width:420px){
  .plant-tile{flex:0 1 100%;max-width:100%;}
}
.plant-tile{
  scroll-margin-top:90px;background:var(--parchment-2);border:1px solid var(--line);
  border-radius:10px;padding:16px 16px 20px;transition:box-shadow .2s,transform .2s;
}
.plant-tile:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.plant-tile-photo{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--parchment-2);margin-bottom:12px;}
.tile-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.tile-photo-toggle{
  position:absolute;bottom:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,0.9);border:1px solid var(--line);color:var(--green-deep);
  font-size:.95rem;display:flex;align-items:center;justify-content:center;
}
.tile-photo-toggle:hover{background:#fff;}
.latin-name{font-size:1.1rem;color:var(--green-deep);margin-bottom:2px;}
.common-name{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--green-mid);
  font-weight:600;margin-bottom:10px;
}
.plant-desc{color:var(--soil);opacity:.9;line-height:1.6;margin-bottom:14px;font-size:.92rem;}

/* verberg de standaard pijltjes op invoervelden voor bedragen */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.no-spinner{-moz-appearance:textfield;}

/* ---------- CART SUMMARY ---------- */
.cart-summary{
  max-width:520px;margin:0 auto 80px;padding:30px 24px;background:var(--parchment-2);
  border-radius:8px;border:1px solid var(--line);
}
.cart-total{font-size:1.2rem;color:var(--green-deep);text-align:center;margin:20px 0;}
.cart-total strong{color:var(--green-deep);}

/* ---------- CONFIRMATION PANEL ---------- */
.confirmation-panel{
  max-width:520px;margin:0 auto 80px;padding:36px 30px;background:var(--parchment-2);
  border-radius:8px;border:1px solid var(--line);text-align:center;
}
.confirmation-panel h2{color:var(--green-deep);margin-bottom:12px;}
.confirmation-panel p{color:var(--soil);opacity:.9;line-height:1.7;margin-bottom:24px;}
.confirm-breakdown{text-align:left;margin-bottom:16px;}
.confirm-line{
  display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--soil);
}
.confirm-total{font-size:1.2rem;color:var(--green-deep);margin-bottom:20px;}
.confirm-divider{border:none;border-top:1px solid var(--line);margin:24px 0;}
.amount-tile{
  background:var(--green-deep);color:#fff;border-radius:8px;padding:18px;
  text-align:center;margin-bottom:24px;
}
.amount-tile-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin-bottom:4px;}
.amount-tile-value{font-size:1.8rem;font-weight:600;}
.confirm-subheading{color:var(--green-deep);font-size:1.15rem;margin:0 0 10px;text-align:left;}
.confirm-payment-text{color:var(--soil);opacity:.9;line-height:1.7;text-align:left;margin-bottom:16px;}

.garden-intro{max-width:620px;margin:0 auto;text-align:center;padding:0 24px 20px;}
.garden-intro p{color:var(--soil);opacity:.9;line-height:1.8;font-size:1.1rem;}
.garden-intro-tight{line-height:1.5 !important;}
.plant-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:36px;max-width:1080px;margin:0 auto;padding:20px 24px 80px;
}
.plant-card{
  background:var(--parchment-2);border:1px solid var(--line);border-radius:6px;
  padding:22px 20px 24px;text-align:center;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.plant-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.plant-photo-wrap{
  position:relative;width:100%;aspect-ratio:4/5;margin-bottom:16px;
  border-radius:5px;overflow:hidden;background:#fff;
  display:flex;align-items:flex-end;justify-content:center;
}
.plant-photo-inner{
  width:100%;height:100%;transform-origin:center bottom;
  transition:transform 1s cubic-bezier(.22,.9,.3,1);
}
.plant-photo-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.plant-growth-badge{
  position:absolute;bottom:10px;left:10px;width:38px;height:38px;border-radius:50%;
  background:var(--parchment);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:19px;box-shadow:0 4px 12px rgba(62,107,44,0.18);
}
.plant-credit{font-size:.68rem;color:var(--soil);opacity:.5;margin:-8px 0 12px;}
.plant-name-latin{font-size:1.2rem;margin-bottom:2px;}
.plant-name-common{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green-mid);
  font-weight:600;margin-bottom:10px;
}
.plant-stage{font-size:.95rem;color:var(--soil);opacity:.85;margin-bottom:16px;min-height:1.4em;}
.btn-plant{
  margin-top:auto;background:none;border:1px solid var(--green-deep);color:var(--green-deep);
  padding:12px 18px;border-radius:3px;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  transition:background .2s,color .2s;min-height:44px;
}
.btn-plant:hover{background:var(--green-deep);color:#fff;}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(46,74,38,0.35);display:none;
  align-items:center;justify-content:center;z-index:200;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff;border-radius:6px;max-width:440px;width:100%;padding:36px 30px;
  max-height:88vh;overflow-y:auto;
}
.modal h3{font-size:1.6rem;color:var(--green-deep);margin:0 0 6px;}
.modal p.hint{font-size:.9rem;color:var(--soil);opacity:.85;margin-bottom:22px;}
.plant-checks{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.plant-check{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;font-size:.95rem;cursor:pointer;min-height:44px;
}
.plant-check input{width:auto;margin:0;}
.modal-actions{display:flex;gap:12px;margin-top:22px;}
.modal-actions button{flex:1;padding:14px;border-radius:3px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;border:none;min-height:44px;}
.btn-cancel{background:none;border:1px solid var(--line) !important;color:var(--soil);}
.btn-submit{background:var(--green-deep);color:#fff;}
.modal-msg{font-size:.88rem;margin-top:12px;min-height:1.2em;color:#b0503d;}

/* ---------- LEDGER ---------- */
.ledger{max-width:640px;margin:0 auto;padding:20px 24px 80px;}
.ledger h2{text-align:center;color:var(--green-deep);margin-bottom:6px;}
.ledger-sub{text-align:center;color:var(--soil);opacity:.8;margin-bottom:36px;}
.ledger-item{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem;}
.ledger-empty{text-align:center;color:var(--soil);opacity:.55;font-style:italic;padding:20px 0;}

/* ---------- PAYMENT ---------- */
.payment{background:var(--parchment-2);padding:80px 24px;border-top:1px solid var(--line);}
.payment-inner{
  display:grid;grid-template-columns:1fr;gap:40px;max-width:820px;margin:0 auto;align-items:center;
}
@media(min-width:760px){ .payment-inner{grid-template-columns:1.1fr .9fr;} }
.payment h2{color:var(--green-deep);margin:10px 0 16px;}
.payment p{color:var(--soil);opacity:.9;line-height:1.8;margin-bottom:20px;}
.iban-box{
  background:#fff;border:1px solid var(--green-soft);border-radius:4px;padding:16px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;
}
.iban-box button{
  background:var(--green-deep);color:#fff;border:none;padding:9px 14px;border-radius:3px;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;white-space:nowrap;min-height:38px;
}
.mededeling{font-size:.88rem;color:var(--soil);opacity:.85;}
.mededeling-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-mid);
  font-weight:600;margin:14px 0 6px;
}
.mededeling strong{color:var(--green-deep);}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px;text-align:center;box-shadow:var(--shadow);}
.qr-card #qrcode{display:flex;justify-content:center;margin-bottom:12px;}
.qr-card p{color:var(--soil);opacity:.8;font-size:.78rem;margin:0;}

/* ---------- FOOTER ---------- */
footer{padding:56px 24px 40px;text-align:center;color:var(--soil);opacity:.75;font-size:.9rem;}
footer .monogram{font-family:'Parisienne', cursive;font-size:1.8rem;color:var(--green-deep);opacity:1;margin-bottom:8px;}
footer .foot-links{margin-top:10px;}
footer .foot-links a{margin:0 8px;text-decoration:none;color:var(--soil);opacity:.8;font-size:.85rem;}

/* ---------- LEAF BURST ---------- */
.leaf-burst{position:fixed;inset:0;pointer-events:none;z-index:300;}
.leaf{position:absolute;top:-20px;font-size:20px;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(340deg);opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .plant-photo-inner{transition:none;}
  .leaf{animation:none;display:none;}
  .wizard-step.active{animation:none;}
}