:root{
  --cream:#F8F2E8;
  --cream-deep:#F1E8D9;
  --rust:#A5543A;
  --rust-dark:#8A4530;
  --brown:#3C2A1E;
  --brown-soft:#6B5645;
  --blush:#E9C6B9;
  --dark:#2A1C13;
  --line:#E4D7C5;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Nunito', sans-serif;
  background:var(--cream);
  color:var(--brown);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces', serif;}
.script{font-family:'Caveat', cursive;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(248,242,232,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1180px;margin:0 auto;}
.logo{font-family:'Fraunces', serif;font-weight:600;font-size:22px;letter-spacing:0.06em;color:var(--brown);}
nav.desktop-nav{display:none;gap:36px;font-weight:600;font-size:14.5px;letter-spacing:0.02em;}
nav.desktop-nav a{position:relative;padding-bottom:4px;}
nav.desktop-nav a.active{color:var(--rust);}
nav.desktop-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rust);border-radius:2px;}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;}
.header-icons{display:flex;align-items:center;gap:4px;}
.menu-btn{display:flex;}
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:6px 24px 18px;border-top:1px solid var(--line);background:var(--cream);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:12px 0;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);}
.mobile-nav a:last-child{border-bottom:none;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:none;transition:transform .25s ease, box-shadow .25s ease;}
.btn-primary{background:var(--rust);color:#fff;box-shadow:0 10px 24px -10px rgba(165,84,58,0.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(165,84,58,0.6);}
.btn-outline{background:transparent;color:var(--brown);border:1.5px solid var(--brown);}
.btn-outline:hover{background:var(--brown);color:#fff;}
.btn-light{background:#fff;color:var(--rust-dark);}
.btn-light:hover{transform:translateY(-2px);}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.55;cursor:not-allowed;}

/* Hero (home) */
.hero{padding:38px 0 56px;}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--blush);color:var(--rust-dark);font-weight:700;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;padding:8px 18px;border-radius:999px;margin-bottom:22px;}
.hero h1{font-size:38px;line-height:1.18;font-weight:500;margin:0 0 18px;color:var(--brown);}
.hero h1 em{font-style:italic;color:var(--rust);}
.hero p.lead{font-size:16px;line-height:1.65;color:var(--brown-soft);max-width:480px;margin:0 0 30px;}
.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.stars{color:var(--rust);font-size:16px;letter-spacing:2px;}
.rating-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--brown-soft);font-weight:600;}
.hero-image-wrap{margin-top:36px;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(60,42,30,0.35);}
.hero-image-wrap img{width:100%;height:340px;object-fit:cover;}

/* Inner-page hero banner */
.page-hero{padding:54px 0 46px;text-align:center;border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:34px;font-weight:500;margin:0 0 14px;}
.page-hero p{max-width:520px;margin:0 auto;color:var(--brown-soft);font-size:15.5px;line-height:1.7;}

/* Feature trio */
.features{padding:50px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.features-grid{display:grid;grid-template-columns:1fr;gap:36px;}
.feature-item{text-align:center;}
.feature-icon{width:54px;height:54px;border-radius:50%;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;color:var(--rust);}
.feature-item h3{font-size:18px;font-weight:600;margin:0 0 8px;}
.feature-item p{font-size:14.5px;color:var(--brown-soft);line-height:1.6;margin:0;max-width:280px;margin-inline:auto;}

/* Section heading pattern */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);margin-bottom:10px;display:block;text-align:center;}
.section-title{font-size:30px;text-align:center;margin:0 0 12px;font-weight:500;}
.section-sub{text-align:center;color:var(--brown-soft);font-size:15px;max-width:480px;margin:0 auto 40px;line-height:1.6;}

/* Discover grid */
.discover{padding:64px 0;}
.discover-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.discover-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1/1.05;}
.discover-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.discover-card:hover img{transform:scale(1.06);}
.discover-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(42,28,19,0.78) 0%, rgba(42,28,19,0.15) 55%, transparent 75%);}
.discover-card .label{position:absolute;left:16px;bottom:14px;color:#fff;z-index:2;}
.discover-card .label .age{font-family:'Fraunces',serif;font-size:20px;font-weight:500;}
.discover-card .label .sub{font-size:12px;opacity:0.85;font-weight:600;}
.discover-cta{text-align:center;margin-top:36px;}

/* Quote / Meer as net n boek */
.quote-section{padding:50px 0 70px;text-align:center;}
.quote-section .eyebrow{margin-bottom:6px;}
.quote-section h2{font-size:26px;font-weight:500;margin:0 0 26px;}
.quote-script{font-family:'Caveat',cursive;font-size:46px;color:var(--rust);font-weight:600;margin:0 0 18px;}
.quote-section p{max-width:520px;margin:0 auto 26px;color:var(--brown-soft);line-height:1.7;font-size:15px;}
.heart{display:inline-block;color:var(--rust);}

/* How it works */
.how{padding:60px 0;background:var(--cream-deep);}
.steps{display:grid;grid-template-columns:1fr;gap:34px;margin-top:8px;}
.step{background:var(--cream);border-radius:18px;padding:30px 26px;border:1px solid var(--line);}
.step-num{font-family:'Fraunces',serif;font-size:34px;color:var(--blush);font-weight:600;line-height:1;margin-bottom:14px;}
.step h3{font-size:18px;margin:0 0 10px;font-weight:600;}
.step p{font-size:14.5px;color:var(--brown-soft);line-height:1.6;margin:0;}

.shelf-image{margin-top:48px;border-radius:24px;overflow:hidden;}
.shelf-image img{width:100%;height:280px;object-fit:cover;}

/* Themes */
.themes{padding:64px 0;text-align:center;}
.theme-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:32px 0 36px;}
.pill{padding:11px 22px;border-radius:999px;background:var(--cream-deep);font-weight:700;font-size:13px;color:var(--brown);border:1px solid var(--line);cursor:pointer;}
.pill.active, .pill:hover{background:var(--rust);color:#fff;border-color:var(--rust);}

/* Testimonials */
.testimonials{padding:60px 0;}
.t-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px;}
.t-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;}
.t-card .stars{display:block;margin-bottom:14px;}
.t-card p{font-size:14.5px;line-height:1.65;color:var(--brown);margin:0 0 18px;font-style:italic;}
.t-name{font-size:13.5px;font-weight:800;}
.t-loc{font-size:12.5px;color:var(--brown-soft);}

/* Between pages */
.between{padding:64px 0;}
.between-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;}
.between-image{border-radius:22px;overflow:hidden;}
.between-image img{width:100%;height:300px;object-fit:cover;}
.between-text .eyebrow{text-align:left;}
.between-text h2{font-size:24px;font-weight:500;margin:0 0 14px;text-align:left;}
.between-text p{font-size:15px;line-height:1.7;color:var(--brown-soft);margin:0;}

.stack-row{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;margin-top:60px;}
.stack-row .between-image img{height:260px;}

/* CTA */
.cta{background:var(--dark);color:#F8F2E8;padding:64px 0;}
.cta-inner{text-align:center;max-width:560px;margin:0 auto;}
.cta h2{font-size:30px;font-weight:500;margin:0 0 14px;color:#fff;}
.cta p{color:#D9C9B8;font-size:15px;line-height:1.7;margin:0 0 30px;}
.cta-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:34px;text-align:left;}
.cta-feature{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#EFE4D5;}
.cta-feature .dot{color:var(--blush);font-size:16px;}

/* Footer */
footer{background:var(--dark);color:#cdbba7;padding:50px 0 26px;border-top:1px solid rgba(255,255,255,0.08);}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-bottom:40px;}
.foot-logo{font-family:'Fraunces',serif;font-size:22px;color:#fff;font-weight:600;letter-spacing:0.05em;margin-bottom:12px;}
.foot-tag{font-size:13.5px;line-height:1.6;color:#B7A48F;max-width:260px;}
.foot-col h4{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#E9C6B9;margin:0 0 16px;font-weight:800;}
.foot-col a, .foot-col p{display:block;font-size:14px;color:#cdbba7;margin-bottom:10px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:22px;font-size:12.5px;color:#9C8A75;text-align:center;}

/* ===== SHOP / WINKEL ===== */
.shop-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px;}
.product-grid{display:grid;grid-template-columns:1fr;gap:26px;}
.product-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;}
.product-img{aspect-ratio:4/3;overflow:hidden;}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .product-img img{transform:scale(1.05);}
.product-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-age{font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--rust);}
.product-title{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:0;}
.product-desc{font-size:13.5px;color:var(--brown-soft);line-height:1.55;margin:0;flex:1;}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.product-price{font-weight:800;font-size:16px;color:var(--brown);}
.product-card .btn{padding:11px 20px;font-size:11.5px;}

/* ===== ABOUT ===== */
.about-block{padding:60px 0;}
.about-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;}
.about-grid img{border-radius:22px;width:100%;height:320px;object-fit:cover;}
.value-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:8px;}
.value-card{text-align:center;padding:28px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;}
.value-card .feature-icon{margin-bottom:14px;}
.value-card h3{font-size:17px;margin:0 0 8px;font-weight:600;}
.value-card p{font-size:14px;color:var(--brown-soft);line-height:1.6;margin:0;}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:50px;}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;}
.contact-card .feature-icon{margin:0 auto 14px;}
.contact-card h3{font-size:16px;margin:0 0 6px;font-weight:700;}
.contact-card p{font-size:14px;color:var(--brown-soft);margin:0;}
.contact-card a{color:var(--rust);font-weight:700;}

/* ===== FORMS (Bestel + Kontak) ===== */
.form-wrap{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 26px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-weight:700;font-size:13.5px;margin-bottom:8px;color:var(--brown);}
.form-row .hint{font-weight:400;color:var(--brown-soft);font-size:12px;display:block;margin-top:4px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--cream);font-family:'Nunito',sans-serif;font-size:14.5px;color:var(--brown);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust);}
.form-row textarea{resize:vertical;min-height:100px;}
.form-grid-2{display:grid;grid-template-columns:1fr;gap:0 16px;}
.form-section-title{font-family:'Fraunces',serif;font-size:18px;font-weight:600;margin:28px 0 16px;padding-top:18px;border-top:1px solid var(--line);}
.form-section-title:first-child{margin-top:0;padding-top:0;border-top:none;}
.radio-row{display:flex;flex-wrap:wrap;gap:10px;}
.radio-pill{flex:1;min-width:120px;}
.radio-pill input{position:absolute;opacity:0;}
.radio-pill label{display:block;text-align:center;padding:12px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--cream);font-weight:700;font-size:13px;cursor:pointer;}
.radio-pill input:checked + label{background:var(--rust);color:#fff;border-color:var(--rust);}

@media(min-width:780px){
  nav.desktop-nav{display:flex;}
  .menu-btn{display:none;}
  .mobile-nav{display:none !important;}
  .hero{padding:64px 0 90px;}
  .hero-inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
  .hero h1{font-size:54px;}
  .hero-image-wrap{margin-top:0;}
  .hero-image-wrap img{height:520px;}
  .page-hero h1{font-size:46px;}
  .features-grid{grid-template-columns:repeat(3,1fr);}
  .discover-grid{grid-template-columns:repeat(4,1fr);}
  .section-title{font-size:38px;}
  .steps{grid-template-columns:repeat(3,1fr);}
  .between-grid, .stack-row{grid-template-columns:1fr 1fr;}
  .stack-row{direction:rtl;}
  .stack-row > *{direction:ltr;}
  .cta-features{grid-template-columns:repeat(4,1fr);}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .about-grid{grid-template-columns:1fr 1fr;}
  .about-grid.reverse{direction:rtl;}
  .about-grid.reverse > *{direction:ltr;}
  .value-grid{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:repeat(3,1fr);}
  .form-grid-2{grid-template-columns:1fr 1fr;}
  .form-grid-2 .form-row{margin-bottom:20px;}
}
@media(min-width:1100px){
  .quote-script{font-size:58px;}
}

/* Vorm-status boodskappe (Supabase) */
.form-msg{
  display:none;
  margin-top:16px;
  padding:14px 18px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:600;
  text-align:center;
}
.form-msg.show{display:block;}
.form-msg.success{
  background:#E9F3EA;
  color:#2F6B36;
  border:1px solid #BEDDC1;
}
.form-msg.error{
  background:#FBEAE7;
  color:var(--rust-dark);
  border:1px solid #F0C8C0;
}
button[type="submit"][disabled]{
  opacity:.65;
  cursor:not-allowed;
}