/* =====================================================================
   HUIS & VERS — shop styling
   Rustige, warme galerij-aesthetic. Cream + eiken.
   ===================================================================== */

:root{
  --bg:        #f8f4ed;   /* warm cream, iets rustiger */
  --surface:   #ffffff;
  --card:      #f2ede3;   /* zacht oatmeal voor kaarten/placeholders */
  --ink:       #23201a;   /* dieper warm bijna-zwart (meer contrast) */
  --ink-soft:  #524a3b;
  --muted:     #8b8172;   /* gedempt bruingrijs */
  --line:      #e5dccd;   /* subtiele lijn */
  --oak:       #4e6b53;   /* accent: diep salie-groen */
  --oak-deep:  #3c5642;
  --green:     #4f855c;   /* voorraad/levering */
  /* donkere footer */
  --foot-bg:    #223028;   /* diep salie-groen, donkere variant van --oak */
  --foot-tekst: #f2ede2;   /* creme, contrast 6,1:1 op de lichtste plek */
  --foot-zacht: #ece7db;   /* bijzaken: licht genoeg om ook op de lichtste
                              plek van de illustratie 4,6:1 te halen */
  --foot-lijn:  rgba(255,255,255,.15);
  --foot-hover: #a8c9b1;   /* licht salie voor hover */
  --shadow:    0 10px 30px -12px rgba(60, 48, 30, .22);
  --max: 1200px;
  --gap: clamp(18px, 3vw, 34px);
  --serif: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* logo-lettertype: Casey via Adobe Fonts (use.typekit.net/wjh5spp.css) */
  --script: "casey", "Brush Script MT", cursive;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--ink); color:#f5efe4;
  font-size:12.5px; letter-spacing:.06em; text-align:center;
  padding:9px 16px;
}
.announce strong{ color:#e8c893; font-weight:600; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:.01em;
  display:inline-flex; align-items:center;
}
.brand span{ color:var(--oak); }
.brand-logo{ height:30px; width:auto; display:block; }
.site-footer .brand-logo{ height:44px; }
.nav{ display:flex; gap:28px; align-items:center; }
.nav a{
  font-size:14px; color:var(--ink-soft); letter-spacing:.02em;
  transition:color .2s;
}
.nav a:hover{ color:var(--oak-deep); }
.nav a.ig{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:100px;
  padding:7px 15px; color:var(--ink);
}
.nav a.ig:hover{ border-color:var(--oak); color:var(--oak-deep); }
.nav a.ig svg{ width:16px; height:16px; }
/* menu is compact (Schilderijen + winkelwagen); op mobiel logo kleiner voor lucht */
@media (max-width:520px){
  .brand-logo{ height:21px; }
  .nav{ gap:18px; }
}

/* ---------- Hero (tekst links, beeld rechts, trein-illustratie als achtergrond) ---------- */
.hero{ padding:clamp(36px,6vw,80px) 0; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("../assets/trein.jpg") center 72% / cover no-repeat;
  opacity:.17;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(to right, var(--bg) 6%, color-mix(in srgb, var(--bg) 40%, transparent) 42%, transparent 72%),
    linear-gradient(to top, var(--bg), transparent 26%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,6vw,80px); align-items:center;
}
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
}
.hero .kicker{ margin-bottom:20px; }
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
}
.hero h1 em{ font-style:italic; color:var(--oak-deep); }
.hero p{
  margin:22px 0 0;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:clamp(16px,1.4vw,18px);
}
.hero .cta-row{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-img{
  border-radius:6px; overflow:hidden; box-shadow:var(--shadow);
}
.hero-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
@media (max-width:820px){
  .hero-img img{ aspect-ratio:4/3; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:14px 26px; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--oak); color:#fff; }
.btn-primary:hover{ background:var(--oak-deep); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--oak); color:var(--oak-deep); }
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn.block{ width:100%; }

/* ---------- Section head ---------- */
.section{ padding:clamp(20px,4vw,40px) 0 clamp(60px,9vw,110px); }
.section-head{ margin-bottom:clamp(26px,4vw,44px); }
.section-head h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,3vw,34px); margin:.35em 0 0; letter-spacing:-.01em;
}

/* ---------- Categorie-chips ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,30px); }
.chip{
  font-size:13.5px; padding:9px 18px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  font-family:var(--sans); transition:.2s;
}
.chip:hover{ border-color:var(--oak); color:var(--oak-deep); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:#f5efe4; }

/* ---------- Set-actie ---------- */
.set-actie{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:14px 18px; margin-bottom:clamp(20px,3vw,30px);
  font-size:14.5px; color:var(--ink-soft);
}
.set-actie svg{ width:18px; height:18px; color:var(--oak); flex:0 0 auto; }
.set-actie strong{ color:var(--ink); }

/* ---------- Product grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; gap:38px; } }

.card{ display:block; }
.card-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:3px;
  background:var(--card);
  border:1px solid var(--line);
}
.card-media img,
.card-media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.card-media video{ opacity:0; transition:opacity .55s ease; }
.card-media .poster-img{ transition:transform .8s ease, opacity .55s ease; }
/* hover: video of tweede foto in, hoofdfoto subtiel weg */
.card-media .hover-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease;
}
.card:hover .card-media video{ opacity:1; }
.card:hover .card-media .hover-img{ opacity:1; }
.card:hover .card-media:has(video) .poster-img,
.card:hover .card-media:has(.hover-img) .poster-img{ opacity:0; transform:scale(1.02); }

.card-media .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(4px);
  color:var(--ink-soft);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; border:1px solid var(--line);
}
.card-media .badge.hot{
  background:var(--ink); color:#f0e6d2; border-color:var(--ink);
}
.card:hover .card-media{ box-shadow:var(--shadow); }
.card-media{ transition:box-shadow .3s ease; }

/* placeholder voor binnenkort-producten */
.card-media.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #fbf7f0 0%, var(--card) 70%);
}
.card-media.placeholder .ph-mark{
  font-family:var(--serif); font-size:44px; color:#d9cdba; font-style:italic;
}

.card-body{ padding:16px 2px 0; }
.card-body .cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.card-body h3{
  font-family:var(--serif); font-weight:500; font-size:20px;
  margin:6px 0 0; letter-spacing:-.005em;
}
.card-body .price{ margin-top:5px; color:var(--ink-soft); font-size:14.5px; }
.card:hover h3{ color:var(--oak-deep); }
.card h3, .card-media *{ transition:color .2s; }

/* ---------- Product detail ---------- */
.detail{ padding:clamp(24px,4vw,44px) 0 clamp(60px,9vw,110px); }
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--muted); margin-bottom:clamp(20px,3vw,34px);
}
.back:hover{ color:var(--oak-deep); }
.detail-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,68px);
  align-items:start;
}
@media (max-width:860px){ .detail-grid{ grid-template-columns:1fr; gap:32px; } }

.detail-media{ position:sticky; top:92px; }
@media (max-width:860px){ .detail-media{ position:static; } }
.detail-media .frame{
  aspect-ratio:3/4; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  position:relative;
}
.detail-media .frame img,
.detail-media .frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-media .frame video{ opacity:0; transition:opacity .5s; }
.detail-media .frame.show-video video{ opacity:1; }
.media-toggle{ display:flex; gap:10px; margin-top:14px; }
.media-toggle button{
  flex:1; font-size:13px; letter-spacing:.02em; padding:10px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  transition:.2s;
}
.media-toggle button.active{ border-color:var(--oak); color:var(--oak-deep); background:#fff; }

.detail-info .cat{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.detail-info h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,44px);
  margin:10px 0 0; line-height:1.1; letter-spacing:-.01em;
}
.verse{
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-soft);
  border-left:2px solid var(--oak); padding:2px 0 2px 18px; margin:22px 0 0;
}
.detail-info .desc{ margin:22px 0 0; color:var(--ink-soft); max-width:46ch; }

.price-table{ margin:28px 0 0; border-top:1px solid var(--line); }
.price-table .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.price-table .row .fmt{ font-size:15px; }
.price-table .row .var{ color:var(--muted); font-size:13px; margin-left:8px; }
.price-table .row .amt{ font-variant-numeric:tabular-nums; font-size:15px; }

/* ---------- Variant kiezers (tegels) ---------- */
.variants{ margin:34px 0 0; display:grid; gap:28px; }
.field{ display:block; }
.field-label{
  display:block; font-size:13px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink); margin-bottom:10px; font-weight:700;
}

/* segmentkiezer (Type): twee duidelijk zichtbare opties */
.seg{ display:flex; gap:10px; }
.seg-btn{
  flex:1; font-family:var(--sans); font-size:14px; font-weight:500;
  color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:13px 10px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.seg-btn:hover{ border-color:var(--oak); color:var(--oak-deep); }
.seg-btn.active{
  background:var(--oak); border-color:var(--oak-deep); color:#fff;
  box-shadow:inset 0 0 0 1px var(--oak-deep);
}
.opt-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (max-width:480px){ .opt-row{ grid-template-columns:repeat(2,1fr); } }
.opt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .opt-grid{ grid-template-columns:repeat(2,1fr); } }
.opt{
  font-family:var(--sans); cursor:pointer; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:11px 8px 10px; display:flex; flex-direction:column; gap:2px;
  transition:border-color .15s, box-shadow .15s;
}
.opt:hover{ border-color:var(--oak); }
.opt.active{
  border-color:var(--oak-deep);
  box-shadow:inset 0 0 0 1px var(--oak-deep);
}
.opt .opt-t{ font-size:14px; font-weight:600; color:var(--ink); }
.opt .opt-s{ font-size:11.5px; color:var(--muted); }
.opt .opt-p{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; font-variant-numeric:tabular-nums; }
.opt.active .opt-p, .opt.active .opt-s{ color:var(--oak-deep); }
.opt .opt-tag{
  font-size:11px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-left:4px;
  vertical-align:1px;
}
.opt.active .opt-tag{ color:var(--oak-deep); border-color:var(--oak); }

/* visuele uitvoering-tegels: compact, thumbnail links */
.opt-row{ grid-template-columns:repeat(2,1fr); }
.opt-visual{
  display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:10px; row-gap:0;
  text-align:left; padding:8px 12px 8px 8px;
}
.opt-visual .opt-img{
  grid-row:1 / 3; width:42px; height:42px; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
}
.opt-visual .opt-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.opt-visual .opt-t{ grid-column:2; align-self:end; }
.opt-visual .opt-s{ grid-column:2; align-self:start; }
.opt-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .opt-grid-3{ grid-template-columns:1fr; } }
.field[hidden]{ display:none; }

/* custom tekst veld */
#custom-tekst{
  width:100%; font:inherit; font-size:13.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; resize:vertical; min-height:76px;
  transition:border-color .2s;
}
#custom-tekst:hover{ border-color:var(--oak); }
#custom-tekst:focus{
  outline:none; border-color:var(--oak);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oak) 18%, transparent);
}
.field-hint{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted); }

/* papier-afwerking: glans-effect op de thumbnail */
.finish{ position:relative; }
.finish::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.finish-mat img{ filter:saturate(.94) contrast(.97); }
.finish-satijn::after{
  background:linear-gradient(115deg,
    transparent 32%, rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.08) 56%, transparent 66%);
}
.finish-glans img{ filter:saturate(1.12) contrast(1.07); }
.finish-glans::after{
  background:linear-gradient(115deg,
    transparent 26%, rgba(255,255,255,.6) 44%,
    rgba(255,255,255,.18) 53%, transparent 62%);
}
/* hover: lichtglans veegt over satijn en glans (mat blijft vlak) */
.opt:hover .finish-satijn::after,
.opt:hover .finish-glans::after{
  animation:sheen .9s ease;
}
@keyframes sheen{
  from{ transform:translateX(-70%); }
  to{ transform:translateX(70%); }
}

/* foto-galerij pijlen op de grote foto */
.foto-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line);
  background:color-mix(in srgb, #fff 88%, transparent);
  backdrop-filter:blur(4px);
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.foto-nav svg{ width:18px; height:18px; }
.foto-nav.prev{ left:12px; }
.foto-nav.next{ right:12px; }
.foto-nav:hover{ background:#fff; color:var(--oak-deep); }

/* op touch geen pijlen (daar swipe je) */
@media (hover:none){
  .foto-nav{ display:none; }
}
.detail-media .frame{ touch-action:pan-y; }

.foto-count{
  position:absolute; right:12px; bottom:12px; z-index:3;
  font-size:12px; color:var(--ink-soft); letter-spacing:.04em;
  background:color-mix(in srgb, #fff 85%, transparent);
  backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:100px; padding:4px 11px;
  font-variant-numeric:tabular-nums;
}

/* uitgeschakelde bestelknop (nog geen uitvoering gekozen) */
.btn.disabled{
  background:var(--card); color:var(--muted); cursor:not-allowed;
  border-color:var(--line); pointer-events:auto;
}
.btn.disabled:hover{ background:var(--card); }

/* papier-tegels: gecentreerd en gelijk van hoogte */
.opt-grid-3 .opt{ align-items:center; justify-content:center; min-height:64px; }
.opt-grid-3 .opt .opt-s{ white-space:nowrap; }

/* foto-galerij thumbnails */
.thumbs{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px;
}
.thumb{
  padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  cursor:pointer; background:var(--card); aspect-ratio:1/1;
  transition:border-color .15s, box-shadow .15s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb:hover{ border-color:var(--oak); }
.thumb.active{ border-color:var(--oak-deep); box-shadow:inset 0 0 0 1px var(--oak-deep); }
@media (max-width:640px){ .thumbs{ grid-template-columns:repeat(5,1fr); } }

/* ---------- Prijs + levertijd + trust ---------- */
.price-line{ margin:38px 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-big{ font-family:var(--serif); font-size:32px; font-weight:500; letter-spacing:-.01em; }
.price-sub{ font-size:13px; color:var(--muted); }
.delivery{
  margin-top:26px; font-size:14px; color:var(--ink-soft);
  display:flex; align-items:center; gap:9px;
}
.delivery .dot{
  width:8px; height:8px; border-radius:50%; background:#5a9367; flex:0 0 auto;
}
.trust-list{
  margin:32px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.trust-list li{
  padding:10px 0 10px 26px; font-size:14px; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 4' fill='none' stroke='%234e6b53' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
}

/* ---------- Cross-sell ---------- */
.cross-sell{ margin-top:46px; border-top:1px solid var(--line); padding-top:34px; }
.cross-sell h3{
  font-family:var(--serif); font-weight:500; font-size:22px; margin:0 0 18px;
}
.grid-3{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr 1fr !important; } }
.cross-sell .card-body h3{ font-size:16px; }

.perso{
  margin:26px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:6px; padding:18px 20px;
}
.perso h4{ margin:0 0 6px; font-size:14px; letter-spacing:.02em; }
.perso p{ margin:0; font-size:14px; color:var(--ink-soft); }

.buy{ margin:30px 0 0; }
.buy .note{ margin:12px 2px 0; font-size:13px; color:var(--muted); text-align:center; }

.info-list{ margin:30px 0 0; border-top:1px solid var(--line); }
.info-list .item{ border-bottom:1px solid var(--line); }
.info-list .item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; font-size:14px; font-weight:600; color:var(--ink);
}
.info-list .item summary::-webkit-details-marker{ display:none; }
.info-list .item summary::after{
  content:"+"; color:var(--muted); font-size:20px; font-weight:400; line-height:1;
  transition:transform .26s ease;
}
.info-list .item[open] summary::after{ transform:rotate(45deg); }
.info-list .item summary:hover{ color:var(--oak-deep); }
.info-list .item .d{ font-size:14px; color:var(--ink-soft); padding:0 0 16px; }

.soon-banner{
  margin:26px 0 0; padding:16px 20px; border:1px dashed var(--oak);
  border-radius:6px; background:#fff; color:var(--oak-deep); font-size:14.5px;
}

/* ---------- Kwaliteit / story ---------- */
.quality{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quality .wrap{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,80px);
  align-items:center; padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(48px,7vw,84px);
}
@media (max-width:820px){ .quality .wrap{ grid-template-columns:1fr; } }
.quality-img{ border-radius:4px; overflow:hidden; box-shadow:var(--shadow); }
.quality-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.quality h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px); margin:.4em 0 0; letter-spacing:-.01em; }
.spec-list{ margin:24px 0 0; padding:0; list-style:none; }
.spec-list li{
  padding:14px 0 14px 32px; border-bottom:1px solid var(--line);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 4' fill='none' stroke='%234e6b53' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 18px;
}
.spec-list .st{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.spec-list .ss{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
.quality-fsc{
  display:flex; align-items:center; gap:12px; margin-top:20px;
  font-size:13px; color:var(--muted);
}
.quality-fsc img{ height:44px; width:auto; }

/* ---------- Werkwijze: 3 visuele stappen ---------- */
.steps-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
@media (max-width:680px){ .steps-grid{ grid-template-columns:1fr; } }
.step-card{
  position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow);
}
.step-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s ease;
}
.step-card:hover img{ transform:scale(1.04); }
.step-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,24,18,.62) 0%, rgba(28,24,18,.12) 42%, transparent 60%);
}
.step-card .step-label{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  color:#f7f2e8;
}
.step-card .step-num{
  display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#d9cba8; margin-bottom:5px;
}
.step-card .step-t{
  font-family:var(--serif); font-size:clamp(19px,2vw,23px); font-weight:500;
}

/* ---------- Verpakking ---------- */
.pack-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);
  max-width:820px; margin:0 auto;
}
@media (max-width:640px){ .pack-grid{ grid-template-columns:1fr; } }
.pack-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; text-align:center; padding-bottom:24px;
}
.pack-img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  margin-bottom:20px;
}
.pack-card .t{ font-family:var(--serif); font-size:19px; margin:0 0 5px; color:var(--ink); padding:0 24px; }
.pack-card .d{ font-size:13.5px; color:var(--muted); margin:0; padding:0 24px; }
.pack-note{
  text-align:center; margin:clamp(18px,3vw,26px) auto 0; font-size:13.5px; color:var(--muted);
}

/* ---------- Founder (tekst links, foto rechts) ---------- */
.founder{ padding:clamp(56px,8vw,100px) 0; }
.founder-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,6vw,80px); align-items:center;
}
@media (max-width:760px){ .founder-grid{ grid-template-columns:1fr; gap:28px; } }
.founder blockquote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.3vw,24px); line-height:1.5; color:var(--ink);
  margin:24px 0 0;
}
.founder .sig{ margin-top:20px; font-size:14px; color:var(--muted); }
.founder .sig strong{ color:var(--ink-soft); font-weight:600; }
.founder-img{
  border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
  max-width:380px; justify-self:end;
}
@media (max-width:760px){ .founder-img{ justify-self:start; } }
.founder-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }

/* trein-vignet vaag in de verzendsectie */
#verpakking{ position:relative; overflow:hidden; }
#verpakking .wrap{ position:relative; z-index:1; }
.trein-vignet{
  position:absolute; right:-60px; bottom:-50px; width:min(620px,55vw);
  opacity:.14; mix-blend-mode:multiply; pointer-events:none;
  transform:rotate(-4deg);
}
@media (max-width:680px){
  #verpakking{ padding-bottom:150px; }
  .trein-vignet{ width:72vw; right:-20px; bottom:-14px; opacity:.18; }
}

/* ---------- Betaal-iconen ---------- */
.pay-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pay{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--line); border-radius:5px; background:#fff;
  padding:5px 8px; color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:44px;
}
.pay img{ max-height:15px; max-width:40px; width:auto; height:auto; display:block; object-fit:contain; }
.pay-row{ gap:7px; }
.pay.ideal{ color:#c06; }
.buy .pay-row.pay-left{ margin-top:18px; justify-content:flex-start; }
/* FSC-keurmerk: bij het merkverhaal, los van de betaalmethoden */
.foot-fsc{
  display:flex; align-items:center; gap:10px; margin-top:20px;
  font-size:12.5px; color:var(--muted);
}
.foot-fsc img{ height:32px; width:auto; opacity:.85; flex:0 0 auto; }



/* ---------- Sticky mobiel bestel-balk ---------- */
.sticky-buy{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items:center; gap:14px;
}
.sticky-buy .sp{ font-family:var(--serif); font-size:20px; font-weight:500; }
.sticky-buy .btn{ flex:1; padding:13px 18px; }
@media (max-width:860px){
  .sticky-buy.on{ display:flex; }
}

/* ---------- Maatgids ---------- */
.size-guide{ padding:6px 0 16px; }
.size-wall{
  position:relative; background:#efe9dd; border-radius:6px;
  height:190px; overflow:hidden; border:1px solid var(--line);
}
.size-wall .sofa{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:62%; height:34%;
  background:#d9cdb8; border-radius:10px 10px 0 0;
}
.size-wall .sofa::before{
  content:""; position:absolute; top:-18%; left:4%; right:4%; height:36%;
  background:#cfc2ab; border-radius:8px;
}
.size-wall .p{
  position:absolute; background:#fff; border:2px solid var(--oak);
  display:flex; align-items:flex-end; justify-content:center;
  font-size:9px; color:var(--ink-soft); padding-bottom:2px;
}
.size-note{ margin:10px 0 0; font-size:13px; color:var(--muted); }

/* ---------- Value strip ---------- */
.values{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.values .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding-top:34px; padding-bottom:34px; }
@media (max-width:680px){ .values .wrap{ grid-template-columns:1fr; gap:20px; } }
.value .t{ font-family:var(--serif); font-size:18px; margin:0 0 5px; }
.value .d{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---------- Footer ---------- */
.site-footer{
  padding:clamp(48px,7vw,84px) 0 40px;
  position:relative;
}

/* ---------- Merkpaneel: donker blok met de ASCII-illustratie erachter ----------
   Alleen dit blok is donker (logo, tagline, FSC-regel). De rest van de
   footer blijft creme, zodat de illustratie een accent is en geen behang. */
.foot-merk{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--foot-bg);
  color:var(--foot-tekst);
  border-radius:14px;
  padding:clamp(22px,3vw,32px);
  max-width:430px;
}
.foot-merk > *{ position:relative; z-index:2; }
.foot-ascii{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; z-index:0;
  opacity:.48;
  /* De bron is donkere inkt op licht papier. Omgekeerd lichten de handen juist
     op tegen het donkere paneel; sepia zet de koele omkering terug naar warm.
     De helderheid staat bewust onder 1: zo blijft de lichtste plek donker
     genoeg om de tekst er overal leesbaar op te houden. */
  filter:invert(1) sepia(.55) saturate(1.35) brightness(.85);
}
@media (prefers-reduced-motion: reduce){ .foot-ascii{ display:none; } }
.site-footer .top{ display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.site-footer .brand{ font-size:24px; }
.site-footer p{ color:var(--ink-soft); font-size:14.5px; max-width:40ch; margin:12px 0 0; }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-links a{ font-size:14px; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--oak-deep); }

/* footerkolommen met kopjes (Baymard: links in benoemde secties) */
.foot-kolommen{
  display:grid; grid-template-columns:repeat(3, minmax(140px, auto));
  gap:clamp(24px,4vw,56px);
}
@media (max-width:640px){ .foot-kolommen{ grid-template-columns:1fr 1fr; gap:26px 24px; } }
.foot-kolom{ display:flex; flex-direction:column; gap:9px; }
.foot-kolom h4{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-weight:600; margin:0 0 3px;
}
.foot-kolom a{ font-size:13.5px; color:var(--ink-soft); }
.foot-kolom a:hover{ color:var(--oak-deep); }

/* wettelijke bedrijfsgegevens (verplicht, altijd zichtbaar) */
.foot-bedrijf{
  margin:clamp(28px,4vw,44px) 0 0;
  font-size:12.5px; color:var(--muted); line-height:1.7;
}

/* compacte links op checkout-pagina's */
.foot-mini{
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:13px;
}
.foot-mini a{ color:var(--ink-soft); }
.foot-mini a:hover{ color:var(--oak-deep); }
.foot-mini + .foot-bedrijf{ margin-top:16px; }
.site-footer .bottom{
  margin-top:clamp(30px,4vw,48px); padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.site-footer .bottom .pay-row{ margin-top:0; }

/* ---------- Tekst binnen het donkere merkpaneel ---------- */
.foot-merk .brand{ color:var(--foot-tekst); }
.foot-merk p{ color:var(--foot-tekst); }
.foot-merk .foot-fsc{ color:var(--foot-zacht); }

/* het logo is monochroom zwart: op het donkere paneel omkeren naar wit */
.foot-merk .brand-logo{ filter:brightness(0) invert(1); }

/* het merk is een link naar de homepagina */
.foot-merk a.brand{ transition:opacity .2s; }
.foot-merk a.brand:hover{ opacity:.72; }
.foot-merk a.brand:focus-visible{
  outline:2px solid var(--foot-hover); outline-offset:4px; border-radius:4px;
}

/* keurmerk op een lichte tegel, anders valt het donkere logo weg */
.foot-merk .foot-fsc img{
  opacity:1; background:#fff; border-radius:6px; padding:4px 6px;
}

/* ---------- Mini-winkelwagen popover ---------- */
.cart-pop{
  position:absolute; top:calc(100% + 10px); right:clamp(12px,4vw,44px);
  width:min(340px, calc(100vw - 32px)); z-index:120;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.pop-item{ display:flex; gap:10px; align-items:center; }
.pop-item img{
  width:44px; height:58px; object-fit:cover; border-radius:5px;
  border:1px solid var(--line); flex:0 0 auto;
}
.pop-info{ flex:1; min-width:0; }
.pop-titel{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.pop-opties{ display:block; font-size:11.5px; color:var(--muted); }
.pop-prijs{ font-size:13px; font-weight:600; flex:0 0 auto; }
.pop-totaal{
  display:flex; justify-content:space-between; font-weight:600; font-size:14.5px;
  border-top:1px solid var(--line); padding-top:11px; margin-top:2px;
}
.pop-leeg{ margin:4px 0 6px; font-size:14px; color:var(--ink-soft); text-align:center; }
.cart-pop .btn{ padding:11px 18px; font-size:14px; }

/* ---------- Tekstpagina's (voorwaarden, privacy, verzending, FAQ) ---------- */
.tekstpagina{ max-width:62ch; padding-bottom:clamp(40px,6vw,72px); }
.tekstpagina h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,38px); margin:0 0 .4em; letter-spacing:-.01em;
}
.tekstpagina .lead{ font-size:17px; color:var(--ink-soft); margin:0 0 34px; }
.tekstpagina h2{
  font-family:var(--serif); font-weight:600; font-size:19px;
  margin:36px 0 10px; color:var(--ink);
}
.tekstpagina p, .tekstpagina li{ color:var(--ink-soft); font-size:15px; }
.tekstpagina ul, .tekstpagina ol{ padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.tekstpagina a{ color:var(--oak-deep); text-decoration:underline; }
.tekstpagina strong{ color:var(--ink); }
.adresblok{ line-height:1.8; }
.tekst-noot{ margin-top:40px; font-size:13px; color:var(--muted); }
.faq-lijst{ margin-top:8px; }
.faq-lijst .item summary{ font-size:15px; }

/* ---------- Broodkruimels ---------- */
.kruimels{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13px; margin-bottom:clamp(18px,3vw,28px);
}
.kruimels a{ color:var(--muted); transition:color .2s; }
.kruimels a:hover{ color:var(--oak-deep); }
.kruimel-sep{ color:var(--line); }
.kruimel-huidig{ color:var(--ink); font-weight:500; }

/* ---------- Checkout statusbalk ---------- */
.stappenbalk{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,14px); margin:4px 0 clamp(24px,4vw,36px);
}
.stap{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.stap-n{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}
.stap.actief{ color:var(--ink); }
.stap.actief .stap-n{ border-color:var(--oak); background:var(--oak); color:#fff; }
.stap.klaar{ color:var(--ink-soft); }
.stap.klaar .stap-n{ border-color:var(--oak); color:var(--oak-deep); background:color-mix(in srgb, var(--oak) 12%, #fff); }
.stap-lijn{ width:clamp(22px,5vw,44px); height:1.5px; background:var(--line); }
.stap-lijn.klaar{ background:var(--oak); }
@media (max-width:480px){ .stap{ font-size:11.5px; gap:5px; } }

/* ---------- Winkelwagen ---------- */
.cart-link{
  position:relative; display:inline-flex; align-items:center;
  padding:6px; color:var(--ink);
}
.cart-link svg{ width:21px; height:21px; }
.cart-link:hover{ color:var(--oak-deep); }
.cart-count{
  position:absolute; top:-2px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--oak); color:#fff; border-radius:100px;
  font-size:11px; font-weight:600; line-height:17px; text-align:center;
}
.cart-h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,36px); margin:.3em 0 0;
}
.cart-grid{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:clamp(24px,4vw,48px); margin-top:clamp(22px,3vw,34px);
  align-items:start;
}
@media (max-width:820px){ .cart-grid{ grid-template-columns:1fr; } }
.cart-item{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.cart-item:first-child{ border-top:1px solid var(--line); }
.cart-thumb{ flex:0 0 84px; }
.cart-thumb img{
  width:84px; height:112px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line);
}
.cart-info{ flex:1; min-width:0; }
.cart-titel{ font-weight:600; font-size:15.5px; color:var(--ink); }
.cart-titel:hover{ color:var(--oak-deep); }
.cart-opties{ font-size:13px; color:var(--muted); margin-top:3px; }
.cart-regel-onder{
  display:flex; justify-content:space-between; align-items:center; margin-top:14px;
}
.qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:100px; background:#fff;
}
.qty-btn{
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  font-size:16px; color:var(--ink-soft); border-radius:100px;
}
.qty-btn:hover{ color:var(--oak-deep); background:var(--card); }
.qty-n{ min-width:22px; text-align:center; font-size:14px; font-weight:600; }
.cart-prijs{ font-weight:600; font-size:15.5px; }
.cart-weg{
  flex:0 0 auto; width:32px; height:32px; border:0; background:transparent;
  cursor:pointer; color:var(--muted); border-radius:6px;
}
.cart-weg:hover{ color:#a33; background:var(--card); }
.cart-weg svg{ width:15px; height:15px; }
.cart-samenvatting{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:22px; position:sticky; top:92px;
}
.cart-samenvatting .rij{
  display:flex; justify-content:space-between; font-size:14.5px;
  padding:7px 0; color:var(--ink-soft);
}
.cart-samenvatting .rij.totaal{
  border-top:1px solid var(--line); margin-top:8px; padding-top:14px;
  font-weight:600; font-size:17px; color:var(--ink);
}
.cart-samenvatting .gratis{ color:var(--green); font-weight:600; }
.btw-noot{ font-size:12.5px; color:var(--muted); margin:2px 0 14px; }
.cart-samenvatting .verder{
  display:block; text-align:center; margin-top:12px; font-size:14px; color:var(--muted);
}
.cart-samenvatting .verder:hover{ color:var(--oak-deep); }
.cart-samenvatting .pay-row{ justify-content:center; margin-top:16px; }
.cart-leeg{ text-align:center; padding:60px 0; }
.cart-leeg h1{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px); margin:.4em 0; }
.cart-leeg-sub{ color:var(--ink-soft); margin:0 0 26px; }

/* ---------- Afrekenen ---------- */
.co-grid{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(24px,4vw,48px); margin-top:clamp(22px,3vw,34px); align-items:start;
}
@media (max-width:820px){ .co-grid{ grid-template-columns:1fr; }
  .co-grid .cart-samenvatting{ order:-1; position:static; } }
.co-form{ display:flex; flex-direction:column; gap:16px; }
.co-veld{ display:flex; flex-direction:column; gap:6px; flex:1; }
.co-veld span{ font-size:13px; font-weight:600; color:var(--ink); }
.co-veld input, .co-veld select, .co-veld textarea{
  font:inherit; font-size:14.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; transition:border-color .2s; width:100%;
}
.co-veld input:focus, .co-veld select:focus, .co-veld textarea:focus{
  outline:none; border-color:var(--oak);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oak) 16%, transparent);
}
.co-veld2{ display:flex; gap:14px; }
@media (max-width:560px){ .co-veld2{ flex-direction:column; } }
.co-akkoord{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--ink-soft); cursor:pointer;
  padding:4px 0;
}
.co-akkoord input{ margin-top:2px; accent-color:var(--oak); }
.co-fout{
  color:#8f2f2f; background:#fbeeee; border:1px solid #eacaca;
  border-radius:8px; padding:11px 14px; font-size:14px; margin:0;
}
.co-veilig{ text-align:center; font-size:12.5px; color:var(--muted); margin:10px 0 0; }
.co-kop{ font-family:var(--serif); font-weight:600; font-size:18px; margin:0 0 14px; }
.co-item{
  display:flex; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.co-thumb{
  position:relative; flex:0 0 auto; display:block;
}
.co-thumb img{
  width:46px; height:60px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); display:block;
}
.co-badge{
  position:absolute; top:-7px; right:-7px;
  min-width:19px; height:19px; padding:0 5px;
  background:var(--oak); color:#fff; border-radius:100px;
  font-size:11px; font-weight:600; line-height:19px; text-align:center;
}
.co-aantal{ color:var(--muted); flex:0 0 auto; }
.co-naam{ flex:1; min-width:0; }
.co-opties{ display:block; font-size:12.5px; color:var(--muted); }
.co-prijs{ font-weight:600; flex:0 0 auto; }
.co-totaal{
  display:flex; justify-content:space-between; gap:10px;
  padding-top:14px; margin-top:6px; font-weight:600; font-size:15.5px;
}
.co-totaal span:first-child{ font-size:13px; font-weight:500; color:var(--ink-soft); }

/* ---------- Bedankt ---------- */
.bedankt{ max-width:560px; margin:0 auto; text-align:center; padding:40px 0 20px; }

/* besteloverzicht op de bedankt-pagina */
.bd-kaart{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; margin:32px 0 0; text-align:left;
}
.bd-kop{
  font-family:var(--serif); font-weight:600; font-size:16px;
  margin:0 0 16px; color:var(--ink);
}
.bd-kop-los{ text-align:left; margin:36px 0 12px; }
.bd-item{
  display:flex; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.bd-item:last-of-type{ border-bottom:0; }
.bd-item img{
  width:52px; height:68px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); flex:0 0 auto;
}
.bd-info{ flex:1; min-width:0; }
.bd-titel{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.bd-opties{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.bd-tekst{ display:block; font-size:12.5px; color:var(--oak-deep); font-style:italic; margin-top:3px; }
.bd-aantal{ font-size:13px; color:var(--muted); flex:0 0 auto; }
.bd-totaal{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
  font-weight:600; font-size:15px;
}

/* verwachte bezorging */
.bd-lever{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:color-mix(in srgb, var(--oak) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--oak) 26%, var(--line));
  border-radius:10px; padding:16px 20px; margin-top:16px;
}
.bd-lever svg{ width:26px; height:26px; color:var(--oak-deep); flex:0 0 auto; }
.bd-lever-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.bd-lever-s{ display:block; font-size:12.5px; color:var(--muted); }

.bd-knoppen{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.bedankt-vink{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  background:var(--oak); color:#fff; display:flex; align-items:center; justify-content:center;
}
.bedankt-vink svg{ width:30px; height:30px; }
.bedankt h1{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,34px); margin:.3em 0; }
.bedankt-sub{ color:var(--ink-soft); }
.bedankt-stappen{
  text-align:left; margin:0 auto 30px; padding-left:22px;
  display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink-soft);
}
.bedankt-stappen strong{ color:var(--ink); }
.bedankt-vraag{ font-size:14px; color:var(--muted); margin-bottom:26px; }
.bedankt-vraag a{ color:var(--oak-deep); text-decoration:underline; }

/* utility */
.center{ text-align:center; }
.mt-s{ margin-top:14px; }