:root{
  --cream:#fbf6f2;
  --paper:#fffdfb;
  --lilac:#8f7a95;
  --lilac-dark:#6f5d76;
  --peach:#f3a184;
  --sage:#93a88d;
  --rose:#d98ba4;
  --ink:#4f474c;
  --muted:#7b7075;
  --line:#e8dedb;
  --shadow:0 14px 34px rgba(93,74,82,.12);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92vw);margin-inline:auto}
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(251,246,242,.9);
  border-bottom:1px solid rgba(143,122,149,.12);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:82px;height:82px;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:22px;font-size:.95rem}
.navlinks a{padding:9px 2px;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a.active{border-color:var(--peach)}
.cart-btn{
  border:0;background:var(--lilac);color:white;
  padding:12px 17px;border-radius:999px;cursor:pointer;font-weight:700
}
.hero{
  padding:72px 0 50px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center
}
.eyebrow{color:var(--lilac-dark);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif;line-height:1.12;color:#594d5b}
h1{font-size:clamp(2.4rem,5.6vw,4.8rem);margin:.12em 0 .18em}
h2{font-size:clamp(1.6rem,3.2vw,2.64rem);margin:0 0 18px}
h3{font-size:1.08rem;margin:0 0 8px}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 20px;border-radius:999px;font-weight:800;border:1px solid transparent
}
.btn-primary{background:var(--lilac);color:white}
.btn-secondary{background:transparent;border-color:var(--lilac);color:var(--lilac-dark)}
.hero-card{background:var(--paper);padding:28px;border-radius:34px;box-shadow:var(--shadow);position:relative}
.hero-card img{aspect-ratio:1/1;object-fit:contain;border-radius:24px;background:#fff9f5}
.hero-note{
  position:absolute;right:18px;bottom:18px;background:white;border:1px solid var(--line);
  border-radius:16px;padding:12px 14px;font-size:.9rem;box-shadow:0 10px 20px rgba(0,0,0,.06)
}
.section{padding:76px 0}
.section.soft{background:#fffaf7;border-block:1px solid #f0e6e1}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:28px}
.section-head p{max-width:650px;color:var(--muted);margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card,.info-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 8px 18px rgba(93,74,82,.05)
}
.product-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:20px}
.price{font-size:1.18rem;font-weight:900;color:var(--lilac-dark)}
.product-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.add-btn{
  border:0;background:var(--peach);color:#5f433b;
  border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer
}
.pill{display:inline-block;background:#f4ecef;color:var(--lilac-dark);padding:7px 10px;border-radius:999px;font-size:.8rem;font-weight:700}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{padding:22px;background:var(--paper);border-radius:20px;border:1px solid var(--line)}
.feature b{display:block;margin-bottom:5px;color:#594d5b}
.about-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.story-box,.contact-box,.safety-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px
}
.checks{list-style:none;padding:0;margin:20px 0 0}
.checks li{padding:8px 0 8px 30px;position:relative}
.checks li::before{content:"✦";position:absolute;left:0;color:var(--peach)}
.footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.small{font-size:.9rem;color:var(--muted)}
.form{display:grid;gap:12px}
.form input,.form textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:white;font:inherit
}
.form textarea{min-height:140px;resize:vertical}
.notice{padding:14px 16px;background:#fff3ee;border:1px solid #f2d6cb;border-radius:14px;color:#6d5148;font-size:.92rem}
.page-hero{padding:58px 0 26px}
.page-hero h1{font-size:clamp(2.16rem,4.8vw,3.84rem)}
.cart-drawer{
  position:fixed;top:0;right:-420px;width:min(400px,92vw);height:100vh;background:white;
  z-index:50;box-shadow:-18px 0 40px rgba(0,0,0,.14);transition:.28s ease;
  padding:24px;display:flex;flex-direction:column
}
.cart-drawer.open{right:0}
.cart-head{display:flex;align-items:center;justify-content:space-between}
.close-btn{border:0;background:#f5eeee;border-radius:999px;width:36px;height:36px;cursor:pointer}
.cart-items{display:grid;gap:12px;margin-top:20px;overflow:auto}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.cart-total{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-weight:900}
.overlay{position:fixed;inset:0;background:rgba(57,45,51,.32);z-index:40;display:none}
.overlay.show{display:block}
.mobile-toggle{display:none}
@media(max-width:850px){
  .navlinks{display:none}
  .hero,.about-grid,.contact-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  .hero{padding-top:40px}
  .brand img{width:64px;height:64px}
}
@media(max-width:560px){
  .cards,.features,.footer-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
  .hero-card{padding:18px}
  .product-meta{align-items:flex-start;flex-direction:column}
}

.hero-title-sm{font-size:clamp(1.92rem,4.48vw,3.84rem)}
.page-title-sm{font-size:clamp(1.73rem,3.84vw,3.07rem)!important}
.product-link{display:block}
.product-link:hover h3{text-decoration:underline;text-underline-offset:3px}
.product-details{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.product-details img{width:100%;border-radius:24px;aspect-ratio:4/3;object-fit:cover}
.product-copy{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.product-copy ul{padding-left:20px}
@media(max-width:850px){.product-details{grid-template-columns:1fr}}

.home-logo{width:80%;margin:0 auto}
.play-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.play-idea{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px}
.play-idea .mini{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--peach);margin-bottom:8px}
.play-idea h3{font-size:1.25rem;margin-bottom:8px}
@media(max-width:760px){.play-ideas{grid-template-columns:1fr}}

.page-hero .page-butterfly{right:0;top:18px;width:58px}
  .hero .page-butterfly{left:auto;right:8px;top:18px;width:54px}
}

/* V6 aanpassingen */
.hero-card{
  padding:5mm;
}

.decor-butterfly{
  position:absolute;
  width:34px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  opacity:.9;
}

/* per pagina een andere, subtiele plek */
.butterfly-home{right:7%;bottom:8%}
.butterfly-assortiment{left:4%;top:58%}
.butterfly-overmij{right:6%;top:46%}
.butterfly-veiligheid{left:6%;bottom:9%}
.butterfly-contact{right:5%;bottom:12%}
.butterfly-appelboom{right:7%;top:54%}
.butterfly-lente{left:5%;top:48%}

.hero,
.page-hero,
.section,
.product-details{
  position:relative;
}

.single-line-lead{max-width:none;white-space:nowrap}
.safety-subhead{font-family:inherit;font-size:1rem;line-height:1.6;margin:12px 0;font-weight:700;color:var(--ink)}

@media(max-width:850px){
  .single-line-lead{white-space:normal}
  .decor-butterfly{width:28px;opacity:.85}
  .butterfly-home{right:4%;bottom:4%}
  .butterfly-assortiment{left:2%;top:62%}
  .butterfly-overmij{right:3%;top:52%}
  .butterfly-veiligheid{left:3%;bottom:6%}
  .butterfly-contact{right:3%;bottom:8%}
  .butterfly-appelboom{right:3%;top:60%}
  .butterfly-lente{left:3%;top:58%}
}

/* V6.1 - groot logo op Home zonder wit kader */
.hero-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.hero-card .home-logo{
  width:80%;
  margin:0 auto;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* V6.3 */
.page-hero{padding:38px 0 12px !important;}
.section{padding:38px 0 !important;}
.section.soft{padding:38px 0 !important;}
.hero{padding:56px 0 28px !important;}
.section-head{margin-bottom:18px !important;}
.pill{display:none !important;}

.feature-grid-four{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}
.feature-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(93,74,82,.05);
}
.feature-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.feature-card .body{padding:16px 16px 18px;}
.feature-card h3{font-size:1.18rem;margin:0 0 8px;}
.feature-card p{margin:0;}

.product-media{position:relative;}
.product-media > img.main-product-image{
  width:100%;
  border-radius:24px;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.product-media .decor-butterfly{
  position:absolute !important;
  top:-18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}
.butterfly-home{
  right:12% !important;
  top:62% !important;
  bottom:auto !important;
}
@media(max-width:900px){
  .feature-grid-four{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .feature-grid-four{grid-template-columns:1fr;}
}
@media(max-width:850px){
  .page-hero{padding:28px 0 10px !important;}
  .section{padding:28px 0 !important;}
  .section.soft{padding:28px 0 !important;}
  .hero{padding:36px 0 20px !important;}
  .butterfly-home{right:10% !important; top:58% !important;}
}

/* V6.4 */
.page-hero{padding:19px 0 6px !important;}
.section{padding:19px 0 !important;}
.section.soft{padding:19px 0 !important;}
.hero{padding:40px 0 16px !important;}
.section-head{margin-bottom:9px !important;}
.about-grid,.contact-grid,.product-details{gap:12px !important;}
.pill{display:none !important;}

/* Home card image row */
.feature-grid-four{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:10px;
  align-items:start;
}
.feature-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.feature-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
}

/* Loose butterflies: 30% larger */
.decor-butterfly{
  width:44px !important;
  height:auto;
}
@media(max-width:850px){
  .page-hero{padding:14px 0 4px !important;}
  .section{padding:14px 0 !important;}
  .section.soft{padding:14px 0 !important;}
  .hero{padding:26px 0 12px !important;}
  .decor-butterfly{width:36px !important;}
}
@media(max-width:900px){
  .feature-grid-four{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .feature-grid-four{grid-template-columns:1fr;}
}

/* Smaller white-card headings on Over mij / Veiligheid / Contact */
.story-box h2,
.contact-box h2,
.safety-box h2{
  font-size:60% !important;
  line-height:1.15 !important;
  margin-bottom:10px !important;
}
/* compensate for percentage font-size being too small on some browsers */
.story-box h2{font-size:clamp(1.15rem, 1.8vw, 1.9rem) !important;}
.contact-box h2{font-size:clamp(1.15rem, 1.8vw, 1.9rem) !important;}
.safety-box h2{font-size:clamp(1.15rem, 1.8vw, 1.9rem) !important;}

/* V6.5 */
.feature-grid-four{
  align-items:start;
}
.feature-card{
  overflow:visible !important;
}
.feature-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain !important;
  border-radius:18px;
}

/* Move the Appelboom butterfly away from the image */
.product-media .butterfly-appelboom{
  top:-34px !important;
  right:8% !important;
  left:auto !important;
  transform:none !important;
}

/* Keep a little room above the image so the butterfly doesn't touch it */
.product-media{
  padding-top:16px;
}

/* V6.6 */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:.95rem}
.form-status.success{background:#f2f7f0;border:1px solid #cfdcc9}
.form-status.error{background:#fff2ef;border:1px solid #efd1c8}
.privacy-content{max-width:850px}
.privacy-content h2{font-size:clamp(1.35rem,2.2vw,2rem);margin-top:30px;margin-bottom:10px}

/* V6.7 - Home speelwereld en privacy */
.home-play-container{
  width:min(1440px,96vw);
}
.home-play-heading{
  margin-bottom:16px;
}
.home-play-heading h2{
  margin-bottom:10px;
  white-space:nowrap;
}
.home-play-heading p{
  margin:0;
  max-width:900px;
}
.home-play-section .feature-grid-four{
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  width:100%;
}
.home-play-section .feature-card img{
  width:100%;
  height:auto;
}

/* Privacy: alleen hoofdtitel blijft groot; tussenkoppen gelijk aan witte vakken */
.privacy-content h2{
  font-size:clamp(1.15rem,1.8vw,1.9rem) !important;
  line-height:1.15 !important;
  margin-top:24px !important;
  margin-bottom:10px !important;
}

@media(max-width:900px){
  .home-play-heading h2{
    white-space:normal;
  }
  .home-play-container{
    width:min(1180px,92vw);
  }
}

/* V6.8 - mirrored left butterflies and playful scoops */
.butterfly-assortiment,
.butterfly-veiligheid,
.butterfly-lente{
  transform: scaleX(-1) !important;
}

/* playful scoop decorations */
.decor-scoop{
  position:absolute;
  width:64px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  opacity:.95;
}
.scoop-home{left:5%; top:68%; transform:rotate(-18deg);}
.scoop-assortiment{right:4%; top:36%; transform:rotate(12deg);}
.scoop-overmij{left:4%; bottom:9%; transform:rotate(-12deg);}
.scoop-veiligheid{right:5%; top:42%; transform:rotate(18deg);}
.scoop-contact{left:6%; top:56%; transform:rotate(-20deg);}
.scoop-privacy{right:4%; bottom:8%; transform:rotate(14deg);}
.scoop-appelboom{left:4%; bottom:8%; transform:rotate(-14deg);}
.scoop-lente{right:4%; bottom:10%; transform:rotate(14deg);}

@media(max-width:850px){
  .decor-scoop{width:52px;}
  .scoop-home{left:3%; top:74%;}
  .scoop-assortiment{right:2%; top:34%;}
  .scoop-overmij{left:2%; bottom:6%;}
  .scoop-veiligheid{right:2%; top:38%;}
  .scoop-contact{left:3%; top:60%;}
  .scoop-privacy{right:2%; bottom:6%;}
  .scoop-appelboom{left:2%; bottom:6%;}
  .scoop-lente{right:2%; bottom:6%;}
}

/* V6.9 - new scoop asset placed below each butterfly */
.decor-scoop{
  position:absolute;
  width:74px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  opacity:.98;
}

/* paired placements: scoop under butterfly */
.scoop-home{right:1%; top:66%; left:auto !important; bottom:auto !important; transform:rotate(10deg);}
.scoop-assortiment{left:1.8%; top:69%; right:auto !important; transform:scaleX(-1) rotate(12deg);}
.scoop-overmij{right:2.5%; top:61%; left:auto !important; bottom:auto !important; transform:rotate(8deg);}
.scoop-veiligheid{left:2.5%; top:78%; right:auto !important; bottom:auto !important; transform:scaleX(-1) rotate(10deg);}
.scoop-contact{right:1.8%; top:74%; left:auto !important; bottom:auto !important; transform:rotate(8deg);}
.scoop-privacy{right:1.8%; top:74%; left:auto !important; bottom:auto !important; transform:rotate(10deg);}
.scoop-appelboom{right:6%; top:22%; left:auto !important; bottom:auto !important; transform:rotate(10deg);}
.scoop-lente{left:2%; top:67%; right:auto !important; bottom:auto !important; transform:scaleX(-1) rotate(10deg);}

@media(max-width:850px){
  .decor-scoop{width:60px;}
  .scoop-home{right:0; top:68%;}
  .scoop-assortiment{left:0; top:72%;}
  .scoop-overmij{right:0; top:64%;}
  .scoop-veiligheid{left:0; top:80%;}
  .scoop-contact{right:0; top:77%;}
  .scoop-privacy{right:0; top:77%;}
  .scoop-appelboom{right:2%; top:18%;}
  .scoop-lente{left:0; top:70%;}
}

/* V7.1 - gecombineerde afbeelding vlinder + schepje */
.decor-butterfly,
.decor-scoop{
  display:none !important;
}

.decor-combo{
  position:absolute;
  width:118px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  opacity:.98;
}

.combo-home{right:2%; top:60%; transform:rotate(4deg);}
.combo-assortiment{left:2%; top:68%; transform:scaleX(-1) rotate(-4deg);}
.combo-overmij{right:2%; top:58%; transform:rotate(3deg);}
.combo-veiligheid{left:2%; top:72%; transform:scaleX(-1) rotate(-3deg);}
.combo-contact{right:2%; top:70%; transform:rotate(4deg);}
.combo-privacy{right:2%; top:72%; transform:rotate(3deg);}
.combo-appelboom{right:4%; top:18%; transform:rotate(3deg);}
.combo-lente{left:2%; top:64%; transform:scaleX(-1) rotate(-4deg);}

@media(max-width:850px){
  .decor-combo{width:92px;}
  .combo-home{right:0; top:64%;}
  .combo-assortiment{left:0; top:71%;}
  .combo-overmij{right:0; top:61%;}
  .combo-veiligheid{left:0; top:76%;}
  .combo-contact{right:0; top:74%;}
  .combo-privacy{right:0; top:75%;}
  .combo-appelboom{right:1%; top:16%;}
  .combo-lente{left:0; top:68%;}
}

/* V7.2 - align home play section with the text above */
.home-play-container{
  width:min(1200px, 92vw) !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.home-play-heading{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.home-play-heading h2,
.home-play-heading p{
  text-align:left !important;
}
.home-play-section .feature-grid-four{
  width:100% !important;
  margin-top:16px !important;
}
@media(max-width:900px){
  .home-play-container{
    width:min(1200px, 92vw) !important;
  }
}