:root{
  color-scheme:light dark;

  --bg:#f3f5f3;
  --surface:#ffffff;
  --surface2:#f6f7f6;

  --text:#0f1412;
  --muted:#4a5751;

  --brand:#1e4025;
  --brand2:#94b3a0;

  --border:#e0e6e1;

  --shadow1:0 10px 26px rgba(0,0,0,.06);
  --shadow2:0 18px 48px rgba(0,0,0,.10);

  --gold1:#f1c57a;
  --gold2:#c89a4f;

  --okbg:#ecf8f0;--okbd:#bfe1cc;--oktx:#1f4d35;
  --erbg:#fff3f3;--erbd:#f1cccc;--ertx:#7a1e1e;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#0e1311;
    --surface:#121917;
    --surface2:#0f1512;

    --text:#f0f3f2;
    --muted:#b2bdb7;

    --brand:#86b39a;
    --brand2:#2a5a3f;

    --border:#223128;

    --shadow1:0 10px 26px rgba(0,0,0,.35);
    --shadow2:0 18px 58px rgba(0,0,0,.55);

    --okbg:rgba(46,164,79,.14);--okbd:rgba(46,164,79,.35);--oktx:#b7f5c7;
    --erbg:rgba(248,81,73,.14);--erbd:rgba(248,81,73,.35);--ertx:#ffb4b0;
  }
}

body{background:var(--bg);color:var(--text)}
.container{max-width:1180px;margin:0 auto;padding:0 1.1rem}
.section{padding:3.2rem 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:1.3rem}
.section h2{margin:0;color:var(--brand);font-size:1.55rem;font-weight:900;letter-spacing:.01em}
.subline{margin:.25rem 0 0;color:var(--muted);line-height:1.6}
.link{color:var(--brand);font-weight:800;text-decoration:underline}
.link:hover{opacity:.85;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.25rem;border-radius:999px;font-weight:900;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:var(--shadow1)}
.btn-ghost{background:transparent;color:var(--brand);border-color:rgba(30,64,37,.35)}
.btn-ghost{
  background:transparent;
  color:var(--brand);
  border-color:rgba(30,64,37,.35);
}

.btn-ghost:hover{
  background:rgba(30,64,37,.08);
  color:var(--brand);         /* bewust géén wit */
}
@media(prefers-color-scheme:dark){
  .btn-ghost{border-color:rgba(134,179,154,.35)}
}
.btn-wide{width:100%}

.hero-actions{display:flex;gap:12px;margin-top:1.2rem;flex-wrap:wrap}

/* ===== REVIEWS ===== */
.total-rating{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
#averageScore{color:var(--muted);font-weight:800}

.reviews-slider{position:relative;margin-top:1.2rem}
.reviews-slider .prev,.reviews-slider .next{
  width:42px;height:42px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow1);
  display:grid;place-items:center;cursor:pointer
}
.reviews-slider .prev:hover,.reviews-slider .next:hover{filter:brightness(1.03)}
.reviews-slider .prev{position:absolute;left:-8px;top:50%;transform:translate(-100%,-50%)}
.reviews-slider .next{position:absolute;right:-8px;top:50%;transform:translate(100%,-50%)}
@media(max-width:980px){
  .reviews-slider .prev,.reviews-slider .next{display:none}
}

.viewport{
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  border-radius:24px;
}
.track{
  display:flex;
  gap:16px;
  padding:6px;
  margin:0;
  list-style:none;
}
.review-card{
  min-width:340px;
  max-width:440px;
  scroll-snap-align:start;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--border);
  border-radius:24px;
  padding:1.35rem 1.35rem 1.2rem;
  box-shadow:var(--shadow1);
  opacity:.98;
}
.review-card p{margin:0 0 .9rem;line-height:1.7;color:var(--text)}
.review-card .stars{letter-spacing:.08em}
.review-card .who{display:block;margin-top:.35rem;font-weight:900}
.review-card .plaats{display:block;color:var(--muted);margin-top:.15rem}

/* sterren fill */
.stars{
  --percent:100%;
  display:inline-block;
  background:linear-gradient(90deg,var(--gold1) var(--percent),rgba(130,130,130,.35) var(--percent));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  font-weight:900;
}

/* ===== WHY ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.2rem}
.why-card{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--border);
  border-radius:22px;
  padding:1.35rem 1.35rem 1.2rem;
  box-shadow:var(--shadow1);
}
.why-card h3{margin:0 0 .35rem;font-size:1.05rem;color:var(--brand);font-weight:900}
.why-card p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:980px){.why-grid{grid-template-columns:1fr}}

/* ===== STEPS ===== */
/* ===== STEPS: tekst altijd binnen de kaart ===== */
.steps-grid{align-items:stretch}
.step-card{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;              /* belangrijk in grids */
  overflow:hidden;          /* vangt rare overflow op */
}
.step-card h3{
  flex:0 0 auto;
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.step-card p{
  margin:0;
  min-width:0;
  max-width:100%;
  white-space:normal;       /* laat tekst afbreken */
  overflow-wrap:anywhere;   /* breek lange woorden/urls af */
  word-break:break-word;
  line-height:1.55;
  font-size:.95rem;
}

/* optioneel: alle step-cards even hoog + tekst max 4 lijnen */
@supports(-webkit-line-clamp:4){
  .step-card p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
  }
}


/* ===== PRODUCTS ===== */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:1.2rem}
.product-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow1);
  transition:transform .18s ease,box-shadow .18s ease;
}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.product-card img{width:100%;height:240px;object-fit:cover;display:block;background:var(--surface2)}
.product-body{padding:1.15rem 1.15rem 1.25rem}
.product-body h3{margin:0 0 .35rem;font-size:1.08rem;font-weight:900;color:var(--text)}
.product-desc{margin:0 0 1rem;color:var(--muted);line-height:1.65}
.price-block{border:1px solid var(--border);border-radius:18px;background:var(--surface2);padding:.8rem .9rem;margin-bottom:1rem}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price-row span{color:var(--muted);font-weight:800}
.price-row b{font-size:1.12rem}
.price-row b sup{font-size:.75rem;top:-.25em}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}}

/* ===== PARTNER CARD (jouw achtergrond blijft) ===== */
.partner-strip{padding:3rem 0}
.partner-card{
  max-width:1180px;margin:0 auto;
  padding:1.9rem 2.2rem;
  border-radius:26px;
  background:url('/img/partnerachtergrond.png') no-repeat center center/cover;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 58px rgba(0,0,0,.35);
  color:#f7f3ec;
}
.partner-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,12,12,.62),rgba(12,12,12,.28));
  pointer-events:none;z-index:0;
}
.partner-main{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;position:relative;z-index:1}
.partner-badge{
  display:inline-block;padding:.32rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#ffe7b3;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem
}
.partner-copy h2{margin:0 0 .55rem;font-size:1.7rem;color:#fff;font-weight:900}
.partner-copy p{margin:0 0 .9rem;color:#e9e1d7;line-height:1.65;max-width:65ch}
.partner-copy ul{margin:0;padding-left:1.1rem;color:#efe5d7}
.partner-copy li{margin:.3rem 0;line-height:1.55}
.partner-side{text-align:right;min-width:260px}
.partner-highlight .label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold1);font-weight:900}
.partner-highlight .value{display:block;font-size:1.05rem;font-weight:900;color:#fff;margin-top:.25rem}
.partner-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:.9rem;
  padding:.95rem 1.8rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  color:#1b251a;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.partner-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.partner-side small{display:block;margin-top:.55rem;color:#d8cfc3}
@media(max-width:980px){
  .partner-main{flex-direction:column}
  .partner-side{text-align:left;min-width:auto}
}

/* ===== NEWSLETTER ===== */
/* ===== NEWSLETTER STRIP (premium) ===== */
.newsletter-strip{padding:3.2rem 0}
.newsletter-card{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.8rem;
  padding:2.2rem 2.4rem;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f6f8f6);
  border:1px solid #e3e9e3;
  box-shadow:0 18px 42px rgba(0,0,0,.08);
  overflow:hidden;
}

/* zachte “glow” linksboven (serene luxe) */
.newsletter-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 25%, rgba(30,64,37,.12), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(241,197,122,.18), transparent 60%);
  pointer-events:none;
}

/* top accent line */
.newsletter-card::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#1e4025,#94b3a0,#f1c57a);
  pointer-events:none;
}

.newsletter-copy{position:relative;min-width:0;text-align:left}
.newsletter-copy h2{margin:.55rem 0 .6rem;color:#1e4025;font-size:1.75rem;line-height:1.15}
.newsletter-copy p{margin:0;color:#3f4f45;max-width:62ch;line-height:1.65}

/* punten met ✓ in lijn (geen losse icons) */
.newsletter-points{
  margin:1.05rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.45rem;
  max-width:62ch;
}
.newsletter-points li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  color:#2f4036;
  line-height:1.5;
}
.newsletter-points li::before{
  content:"✓";
  flex:0 0 18px;
  display:inline-flex;
  justify-content:center;
  color:#1e4025;
  font-weight:900;
  margin-top:.05rem;
}

/* mini-proof */
.newsletter-proof{
  margin-top:1rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#5a6a60;
  font-weight:700;
  font-size:.92rem;
}
.newsletter-proof .dot{
  width:10px;height:10px;border-radius:50%;
  background:#1e4025;
  box-shadow:0 0 0 6px rgba(30,64,37,.10);
}

/* form blok rechts */
.newsletter-formwrap{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(30,64,37,.12);
  border-radius:18px;
  padding:1.4rem 1.4rem 1.2rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.newsletter-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.newsletter-form input,
.newsletter-form select{
  width:100%;
  padding:.92rem 1rem;
  border-radius:14px;
  border:1px solid #cfd8cf;
  background:#fff;
  color:#1b1b1b;
  outline:none;
  box-sizing:border-box;
}

.newsletter-form input:focus,
.newsletter-form select:focus{
  border-color:#94b3a0;
  box-shadow:0 0 0 3px rgba(30,64,37,.12);
}

.newsletter-form .btn{width:100%}
.newsletter-form .hint{
  display:block;
  margin-top:.2rem;
  color:#66756b;
  line-height:1.45;
}

/* alert */
.newsletter-alert{
  padding:.85rem 1rem;
  border-radius:14px;
  margin-bottom:12px;
  font-weight:800;
}
.newsletter-alert.ok{background:#ecf8f0;border:1px solid #bfe1cc;color:#1f4d35}
.newsletter-alert.error{background:#fff3f3;border:1px solid #f1cccc;color:#7a1e1e}

/* Responsive */
@media(max-width:980px){
  .newsletter-card{grid-template-columns:1fr;padding:1.8rem}
  .newsletter-form .form-row{grid-template-columns:1fr}
}

/* Dark mode */
@media(prefers-color-scheme:dark){
  .newsletter-card{
    background:linear-gradient(180deg,#141b17,#0f1512);
    border-color:#233228;
    box-shadow:0 22px 50px rgba(0,0,0,.55);
  }
  .newsletter-copy h2{color:#e7f2ea}
  .newsletter-copy p,.newsletter-points li{color:#cfded4}
  .newsletter-points li::before{color:#94b3a0}
  .newsletter-proof{color:#b8c2bc}
  .newsletter-proof .dot{background:#94b3a0;box-shadow:0 0 0 6px rgba(148,179,160,.12)}
  .newsletter-formwrap{
    background:rgba(16,22,18,.78);
    border-color:rgba(148,179,160,.18);
  }
  .newsletter-form input,.newsletter-form select{
    background:#101612;
    border-color:#2b3a31;
    color:#f2f4f3;
  }
  .newsletter-form input:focus,.newsletter-form select:focus{
    box-shadow:0 0 0 3px rgba(148,179,160,.16);
    border-color:#94b3a0;
  }
}


/* ===== CONTACT ===== */
.contact-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border-radius:26px;
  padding:1.6rem 1.6rem 1.4rem;
  box-shadow:var(--shadow1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.contact-card p{margin:.35rem 0 0;color:var(--muted);line-height:1.7}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){
  .section-head{flex-direction:column;align-items:flex-start}
  .total-rating{align-items:flex-start}
  .contact-card{flex-direction:column;align-items:flex-start}
}
/* ===== STEPS: rustiger tekst in cards ===== */
.step-card p{font-size:.95rem;line-height:1.6}

/* ===== PRODUCTS: badges + strakkere afbeeldingen + footer onderaan ===== */
.product-card{display:flex;flex-direction:column}
.product-card img{height:260px;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
/* container op de afbeelding */
/* ===== PRODUCT IMAGE ===== */
.p-img{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:#f2f4f2;
}

.lazy-img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .45s ease, transform .6s ease;
}

.lazy-img.is-loaded{
  opacity:1;
  transform:scale(1);
}

/* subtiele hover, geen schreeuwerig effect */
.p-img:hover .lazy-img{
  transform:scale(1.03);
}

/* ===== BADGES ===== */
.p-badges{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  gap:8px;
  z-index:2;
  pointer-events:none;
}

.badge{
  padding:.32rem .75rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.08);
}

/* Handgemaakt */
.badge-green{
  background:rgba(30,64,37,.92);
  color:#fff;
  border-color:rgba(30,64,37,.9);
}

/* Asverwerking */
.badge-gold{
  background:rgba(241,197,122,.95);
  color:#1b251a;
  border-color:rgba(200,154,79,.9);
}

/* Dark mode */
@media(prefers-color-scheme:dark){
  .p-img{background:#101612}
  .badge{border-color:rgba(255,255,255,.12)}
  .badge-green{background:rgba(134,179,154,.22);color:#e7f2ea}
  .badge-gold{background:rgba(200,154,79,.9);color:#1b251a}
}



.product-body{display:flex;flex-direction:column;flex:1}
.product-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.price-block{margin-top:auto} /* <-- prijs altijd onderaan */
.btn-wide{margin-top:12px}

/* ===== NEWSLETTER: minder kaal, duidelijk “Nieuwsbrief” ===== */
.newsletter-card{position:relative;overflow:hidden}
.newsletter-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 220px at 20% 0%, rgba(30,64,37,.10), transparent 60%),
             radial-gradient(700px 220px at 90% 30%, rgba(241,197,122,.14), transparent 55%);
  pointer-events:none;
}
.newsletter-card>*{position:relative;z-index:1}
.pill{
  display:inline-block;
  padding:.28rem .85rem;
  border-radius:999px;
  background:rgba(30,64,37,.10);
  border:1px solid rgba(30,64,37,.18);
  color:var(--brand);
  font-weight:900;
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ===== CONTACT: netter en “volwassener” ===== */
/* ===== CONTACT CARD FIX (strak, geen zwevende ✓, geen rare centrering) ===== */
.contact-section{padding:3rem 0}
.contact-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:2rem;
  padding:2.2rem 2.4rem;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#f6f8f6);
  border:1px solid #e3e9e3;
  box-shadow:0 18px 42px rgba(0,0,0,.08);
  align-items:center;
  text-align:left; /* override globale center */
}

.contact-left{min-width:0;text-align:left}
.contact-left h2{
  margin:.2rem 0 .6rem;
  font-size:1.65rem;
  color:#1e4025;
  line-height:1.2;
}
.contact-intro{
  margin:0;
  color:#3f4f45;
  max-width:58ch;
  line-height:1.65;
}

/* ✓ netjes naast tekst, niet links “los” */
.contact-points{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.45rem;
  max-width:58ch;
}
.contact-points li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  color:#2f4036;
  line-height:1.5;
}
.contact-points li::before{
  content:"✓";
  flex:0 0 18px;
  display:inline-flex;
  justify-content:center;
  color:#1e4025;
  font-weight:900;
  margin-top:.05rem;
}

/* knoppen rechts compact + mooi uitgelijnd */
.contact-actions{
  justify-self:end;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;              /* minder “lege lucht” */
  align-items:stretch;   /* knoppen even breed */
}
.contact-actions .btn{
  width:100%;
  max-width:280px;
  text-align:center;
  padding:.95rem 1.2rem;
}

/* Responsive */
@media(max-width:900px){
  .contact-card{grid-template-columns:1fr;padding:1.8rem}
  .contact-actions{justify-self:start;align-items:flex-start}
  .contact-actions .btn{max-width:100%}
}

/* Dark mode */
@media(prefers-color-scheme:dark){
  .contact-card{background:linear-gradient(180deg,#141b17,#0f1512);border-color:#233228;box-shadow:0 22px 50px rgba(0,0,0,.55)}
  .contact-left h2{color:#e7f2ea}
  .contact-intro,.contact-points li{color:#cfded4}
  .contact-points li::before{color:#94b3a0}
}
.contact-section #contact-title{
  color:#1e4025;
}

@media(prefers-color-scheme:dark){
  .contact-section #contact-title{
    color:#e7f2ea;
  }
}