/* LuxeLace — luxelace.phantrium.com
   Zakelijk maar levendig: veel wit, diep aubergine en één verzadigde roze accenttint.
   Bewust geen kant-en-klaar shopthema; de rasters en de typografie zijn hier
   met de hand gezet zodat de winkel niet als de zoveelste template leest. */

/* Palet. Bewust géén bubblegum: de basis is diep aubergine, het roze is een
   verzadigde oudroze en de achtergrond een lichte blush. Dat leest als premium
   beauty en niet als speelgoed — belangrijk bij een gemiddelde orderwaarde van
   ruim €200. Wil je het zachter of feller, dan is dit blok het enige dat hoeft
   te wijzigen; alle regels hieronder verwijzen naar deze variabelen. */
:root {
  --ink: #2B1520;
  --ink-zacht: #5C3A48;
  --grijs: #8A6B76;
  --roze: #D96A93;        /* accent: knopvlaggen, oogjes, iconen */
  --roze-diep: #B24270;   /* accent donker: links, hover, tekst op licht */
  --room: #FDF5F7;
  --room-diep: #F8E7EC;
  --lijn: #F1DCE3;
  --wit: #FFFFFF;
  --groen: #2F6B4F;
  --rood: #A33A3A;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max: 1180px;
  --radius: 2px;
  --schaduw: 0 1px 2px rgba(43,21,32,.05), 0 8px 28px rgba(43,21,32,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font: 400 16px/1.65 var(--sans);
  color: var(--ink);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- typografie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.35rem; }

.oog {
  font: 600 11px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--roze-diep);
}

.lood { font-size: 1.06rem; color: var(--ink-zacht); max-width: 62ch; }

/* ---------- aankondiging ---------- */
.balk {
  background: var(--ink);
  color: var(--room);
  font: 500 12.5px/1 var(--sans);
  letter-spacing: .05em;
  text-align: center;
  padding: 11px 16px;
}
.balk b { color: var(--roze); font-weight: 600; }

/* ---------- kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--lijn);
}
.kop-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.merk { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: .12em; }
.merk span { color: var(--roze); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 14px; color: var(--ink-zacht); padding: 4px 0; border-bottom: 1px solid transparent; transition: .18s; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--roze); }

.mand-knop {
  position: relative; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink); padding: 9px 16px;
  font: 600 13px/1 var(--sans); letter-spacing: .04em;
  transition: .18s;
}
.mand-knop:hover { background: var(--ink); color: var(--wit); }
.mand-teller {
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--roze); color: var(--wit);
  border-radius: 10px; font: 700 11px/19px var(--sans); text-align: center;
}

.menu-knop {
  display: none; width: 40px; height: 40px; margin-left: auto;
  border: 1px solid var(--lijn); position: relative;
}
.menu-knop span, .menu-knop span::before, .menu-knop span::after {
  content: ''; position: absolute; left: 11px; width: 18px; height: 1.5px;
  background: var(--ink); transition: .2s;
}
.menu-knop span { top: 19px; }
.menu-knop span::before { left: 0; top: -6px; }
.menu-knop span::after  { left: 0; top: 6px; }
.menu-knop[aria-expanded="true"] span { background: transparent; }
.menu-knop[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Uitklapmenu voor smalle schermen. Zonder dit was er onder 640px helemaal geen
   navigatie meer: .nav ging op display:none en er stond niets voor in de plaats. */
.mobielmenu {
  display: none; border-bottom: 1px solid var(--lijn); background: var(--wit);
}
.mobielmenu.aan { display: block; }
.mobielmenu a {
  display: block; padding: 15px 18px; font: 500 15px/1 var(--sans);
  border-bottom: 1px solid var(--room-diep);
}
.mobielmenu a:last-child { border-bottom: 0; }

/* ---------- hero ---------- */
/* De beeldkolom bepaalt de hoogte van dit blok. Zonder plafond groeit hij mee
   met de vensterbreedte en duwt hij de kop, de tekst en de knoppen samen onder
   de vouw — dan landt een bezoeker op een foto en niet op een aanbod. */
.hero { position: relative; background: var(--room); overflow: hidden; }
.hero-in {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px;
  align-items: center; padding: 56px 0 60px;
}
.hero h1 { margin: 14px 0 18px; font-size: clamp(2.3rem, 4.4vw, 3.5rem); text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--roze-diep); }
.hero .lood { font-size: 1rem; }
.hero-knoppen { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.hero-beeld { position: relative; }
.hero-beeld img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%;
  max-height: 460px; box-shadow: var(--schaduw);
}
.hero-kaartje {
  position: absolute; left: -28px; bottom: 34px;
  background: var(--wit); padding: 16px 20px; box-shadow: var(--schaduw);
  border-left: 3px solid var(--roze);
}
.hero-kaartje strong { display: block; font: 700 14px/1.3 var(--sans); }
.hero-kaartje span { font-size: 12.5px; color: var(--grijs); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; font: 600 14px/1 var(--sans); letter-spacing: .04em;
  border: 1px solid var(--ink); background: var(--ink); color: var(--wit);
  transition: .18s; border-radius: var(--radius);
}
.knop:hover { background: var(--roze-diep); border-color: var(--roze-diep); }
.knop.leeg { background: transparent; color: var(--ink); }
.knop.leeg:hover { background: var(--ink); color: var(--wit); border-color: var(--ink); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop.breed { width: 100%; }

/* ---------- beloftenbalk ---------- */
.beloften { border-bottom: 1px solid var(--lijn); }
/* Scheidingslijnen als border op de cellen, niet als gap-achtergrond: die liep
   ook door de 24px binnenmarge van .wrap en gaf gekleurde stompjes links en
   rechts van de balk. */
.beloften-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.belofte { padding: 24px 22px; border-left: 1px solid var(--lijn); }
.belofte:first-child { border-left: 0; padding-left: 0; }
.belofte:last-child { padding-right: 0; }
.belofte b { display: block; font: 600 14px/1.4 var(--sans); margin-bottom: 4px; }
.belofte span { font-size: 13px; color: var(--grijs); line-height: 1.5; display: block; }

/* ---------- secties ---------- */
/* Kop links, inleiding rechts. Onder elkaar in één smalle kolom kostte dit blok
   ruim 350px hoogte en bleef de halve breedte leeg, waardoor het raster pas ver
   onder de vouw begon. */
section { padding: 72px 0; }
.sectiekop {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px 56px;
  align-items: end; margin-bottom: 36px;
}
.sectiekop h2 { margin: 10px 0 0; }
.sectiekop .lood { font-size: 15px; padding-bottom: 4px; }
.sectiekop.smal { display: block; max-width: 62ch; }

/* voor schermlezers: label wél aanwezig, visueel niet */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- filters + sorteren ---------- */
.filterbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.sorteer { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.telling { font-size: 13px; color: var(--grijs); white-space: nowrap; }
.sorteer select {
  border: 1px solid var(--lijn); background: var(--wit); color: var(--ink);
  font: 500 13.5px/1 var(--sans); padding: 10px 32px 10px 14px; border-radius: 40px;
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--roze-diep) 50%),
                    linear-gradient(135deg, var(--roze-diep) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sorteer select:focus { outline: none; border-color: var(--roze); }
.chip {
  border: 1px solid var(--lijn); padding: 9px 17px;
  font: 500 13px/1 var(--sans); color: var(--ink-zacht);
  border-radius: 40px; transition: .16s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--wit); }

/* ---------- productraster ---------- */
/* Vier kolommen, niet drie: bij drie werd elke kaart 355px breed en 473px hoog,
   waardoor er één rij op het scherm paste en naam en prijs onder de vouw vielen.
   Een winkel moet meerdere producten naast elkaar tonen, anders leest het als
   een fotogalerij. */
.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
.kaart { display: flex; flex-direction: column; text-align: left; padding: 0; }
.kaart-beeld { position: relative; overflow: hidden; background: var(--room-diep); }
/* 3/4 mag hier wél, want bij vier kolommen is een kaart 275px breed en dus 366px
   hoog — een normale winkelkaart. De uitsnede blijft laag genoeg om de lengte
   van het haar te tonen: dát is het product, niet het gezicht. */
.kaart-beeld img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 32%;
  transition: transform .5s ease;
}
.kaart:hover .kaart-beeld img { transform: scale(1.04); }
.vlag {
  position: absolute; top: 12px; left: 12px;
  background: var(--roze); color: var(--wit);
  font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 10px;
}
.kaart-hover {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(43,21,32,.86); color: var(--wit);
  font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 13px; text-align: center;
  transform: translateY(100%); transition: transform .25s ease;
}
.kaart:hover .kaart-hover, .kaart:focus-visible .kaart-hover { transform: none; }

/* Kleurstaal: één punt per tint. Bij een highlight-kleur twee, want die kleur is
   niet één tint en één staal zou de klant een verkeerd beeld geven. */
.staal { display: inline-flex; gap: 3px; margin-right: 7px; vertical-align: -2px; }
.staal i {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(43,21,32,.18);
}

.kaart-tekst { padding: 16px 2px 0; }
.kaart-tekst h3 { font-size: 1.15rem; margin-bottom: 5px; }
.kaart-meta { font-size: 12.5px; color: var(--grijs); letter-spacing: .03em; margin-bottom: 10px; }
.kaart-prijs { font: 600 15px/1 var(--sans); }
.kaart-prijs span { font-weight: 400; font-size: 12.5px; color: var(--grijs); }

/* ---------- accessoires ---------- */
.acc-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.acc {
  border: 1px solid var(--lijn); padding: 20px; display: flex; flex-direction: column;
  background: var(--wit); transition: .18s;
}
.acc:hover { border-color: var(--roze); }
.acc h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; margin-bottom: 6px; }
.acc p { font-size: 13px; color: var(--grijs); line-height: 1.55; flex: 1; margin-bottom: 14px; }
.acc-onder { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-onder b { font-size: 15px; }
.acc-onder button { font: 600 12.5px/1 var(--sans); border: 1px solid var(--ink); padding: 9px 13px; transition: .16s; }
.acc-onder button:hover { background: var(--ink); color: var(--wit); }

/* ---------- lengtewijzer ---------- */
.lengtegids { display: grid; gap: 2px; }
.lg-rij {
  display: grid; grid-template-columns: 52px 1fr 220px;
  align-items: center; gap: 18px; padding: 9px 0;
  border-bottom: 1px solid var(--lijn);
}
.lg-rij:last-child { border-bottom: 0; }
.lg-maat { font: 600 15px/1 var(--sans); }
.lg-spoor { background: var(--room-diep); height: 14px; }
.lg-balk {
  display: block; height: 14px;
  background: linear-gradient(90deg, var(--roze-diep), var(--roze));
}
.lg-valt { font-size: 13.5px; color: var(--ink-zacht); }

/* ---------- gids ---------- */
.gids { background: var(--room); }
.gids-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gids-item { background: var(--wit); padding: 30px 26px; border-top: 3px solid var(--roze); }
.gids-item h3 { font-size: 1.2rem; margin-bottom: 10px; }
.gids-item p { font-size: 14.5px; color: var(--ink-zacht); }

/* ---------- veelgestelde vragen ---------- */
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font: 600 16px/1.4 var(--sans);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: '+'; position: absolute; right: 6px; top: 20px;
  font: 300 26px/1 var(--sans); color: var(--roze);
}
.vraag[open] summary::after { content: '\2013'; }
.vraag p { padding: 0 40px 24px 0; color: var(--ink-zacht); font-size: 15px; max-width: 78ch; }

/* ---------- voet ---------- */
.voet { background: var(--ink); color: var(--room-diep); padding: 64px 0 30px; }
.voet-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.voet h4 { font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--roze); margin-bottom: 16px; }
.voet a, .voet p, .voet li { font-size: 14px; color: #C9BFB4; }
.voet ul { list-style: none; display: grid; gap: 9px; }
.voet a:hover { color: var(--wit); }
.voet .merk { color: var(--wit); margin-bottom: 12px; }
.voet-onder {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #8E837A;
}

/* ---------- overlay + laden ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(26,20,24,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 80;
}
.overlay.aan { opacity: 1; pointer-events: auto; }

/* ---------- winkelmand ---------- */
.mand {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--wit); z-index: 90; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mand.aan { transform: none; }
.mand-kop { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--lijn); }
.mand-kop h3 { font-size: 1.25rem; }
.sluit { font-size: 24px; line-height: 1; color: var(--grijs); padding: 4px 8px; }
.sluit:hover { color: var(--ink); }
.mand-lijst { flex: 1; overflow-y: auto; padding: 8px 24px; }
.mand-leeg { text-align: center; color: var(--grijs); padding: 60px 20px; font-size: 14.5px; }
.mand-regel { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.mand-regel img { width: 62px; height: 78px; object-fit: cover; background: var(--room-diep); }
.mand-regel b { display: block; font: 600 13.5px/1.35 var(--sans); }
/* block, anders komt de aantalregel op dezelfde regel als de varianttekst te staan */
.mand-regel small { display: block; color: var(--grijs); font-size: 12.5px; }
.aantal { display: inline-flex; align-items: center; border: 1px solid var(--lijn); margin-top: 8px; }
.aantal button { width: 26px; height: 26px; font-size: 15px; line-height: 1; color: var(--grijs); }
.aantal button:hover { color: var(--ink); }
.aantal span { min-width: 26px; text-align: center; font: 600 13px/1 var(--sans); }
.mand-regel .prijs { font: 600 14px/1 var(--sans); white-space: nowrap; }
.weg { display: block; margin-top: 10px; font-size: 12px; color: var(--grijs); text-decoration: underline; }
.weg:hover { color: var(--rood); }
.mand-voet { border-top: 1px solid var(--lijn); padding: 20px 24px 24px; background: var(--room); }
.mand-erbij { border: 1px dashed var(--lijn); padding: 14px 16px; margin-bottom: 18px; background: var(--wit); }
.erbij-kop {
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--roze-diep); margin-bottom: 12px;
}
.erbij-regel { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.erbij-regel b { display: block; font: 600 13px/1.35 var(--sans); }
.erbij-regel small { color: var(--grijs); font-size: 12px; line-height: 1.4; }
.erbij-knop {
  margin-left: auto; white-space: nowrap;
  border: 1px solid var(--ink); padding: 8px 12px;
  font: 600 12.5px/1 var(--sans); transition: .16s;
}
.erbij-knop:hover { background: var(--ink); color: var(--wit); }
.mand-rij { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--ink-zacht); }
.mand-rij.totaal { font: 700 18px/1 var(--serif); color: var(--ink); margin: 14px 0 16px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.verzendhint { font-size: 12.5px; color: var(--roze-diep); margin-bottom: 12px; }

/* ---------- venster (productdetail + checkout) ---------- */
.venster {
  position: fixed; inset: 0; z-index: 95; display: none;
  overflow-y: auto; padding: 40px 20px;
}
.venster.aan { display: block; }
.venster-in {
  max-width: 900px; margin: 0 auto; background: var(--wit);
  box-shadow: var(--schaduw); position: relative;
}
.venster-sluit { position: absolute; top: 14px; right: 16px; font-size: 26px; line-height: 1; color: var(--grijs); z-index: 2; }
.venster-sluit:hover { color: var(--ink); }

.detail { display: grid; grid-template-columns: 1fr 1fr; }
.detail-beeld { background: var(--room-diep); }
.detail-beeld img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.detail-tekst { padding: 40px 38px; }
.detail-tekst h2 { font-size: 2rem; margin: 10px 0 12px; }
.detail-tekst .kop { font-size: 15.5px; color: var(--roze-diep); font-weight: 500; margin-bottom: 14px; background: none; border: 0; position: static; }
.detail-tekst p.body { font-size: 14.5px; color: var(--ink-zacht); margin-bottom: 24px; }

.keuze { margin-bottom: 20px; }
.keuze label { display: block; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: 10px; }
.opties { display: flex; flex-wrap: wrap; gap: 8px; }
.optie {
  border: 1px solid var(--lijn); padding: 9px 15px; font: 500 13.5px/1 var(--sans);
  transition: .15s; min-width: 54px; text-align: center;
}
.optie:hover { border-color: var(--ink); }
.optie[aria-pressed="true"] { background: var(--ink); color: var(--wit); border-color: var(--ink); }

.keuze-hint { font-size: 13px; color: var(--grijs); margin-top: 10px; line-height: 1.5; }

.detail-prijs { font: 600 28px/1 var(--serif); margin: 22px 0 14px; }
/* line-height 1 liet de twee regels van de subtekst tegen elkaar aan lopen zodra
   hij afbrak, wat bij elke lengte boven de 9 inch gebeurt. */
.detail-prijs small { font: 400 13px/1.55 var(--sans); color: var(--grijs); display: block; margin-top: 8px; }
.spec { list-style: none; margin: 22px 0 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-zacht); }
.spec li { padding-left: 18px; position: relative; }
.spec li::before { content: '\2014'; position: absolute; left: 0; color: var(--roze); }

/* ---------- checkout ---------- */
.checkout { padding: 40px 38px 44px; }
.checkout h2 { font-size: 1.9rem; margin-bottom: 6px; }
.checkout > p.intro { color: var(--grijs); font-size: 14.5px; margin-bottom: 26px; }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld { margin-bottom: 16px; }
.veld label { display: block; font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin-bottom: 7px; }
.veld input, .veld select, .veld textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--lijn);
  font: 400 15px/1.4 var(--sans); color: var(--ink); background: var(--wit);
  border-radius: var(--radius); transition: .15s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--roze); box-shadow: 0 0 0 3px rgba(176,141,87,.14);
}
.veld textarea { resize: vertical; min-height: 74px; }
.samenvatting { background: var(--room); padding: 20px 22px; margin: 22px 0; }
.samenvatting .mand-rij { margin-bottom: 7px; }
.fout { background: #FDF1F1; border-left: 3px solid var(--rood); color: #7A2A2A; padding: 12px 15px; font-size: 14px; margin-bottom: 18px; display: none; }
.fout.aan { display: block; }
.betaalhint { font-size: 12.5px; color: var(--grijs); text-align: center; margin-top: 14px; line-height: 1.6; }

/* ---------- bedankpagina ---------- */
.bedankt { max-width: 660px; margin: 0 auto; padding: 90px 24px; text-align: center; }
.bedankt .vink { width: 62px; height: 62px; border-radius: 50%; background: var(--groen); color: var(--wit); font-size: 30px; line-height: 62px; margin: 0 auto 24px; }
.bedankt h1 { font-size: 2.6rem; margin-bottom: 14px; }
.bedankt .kader { border: 1px solid var(--lijn); padding: 26px; margin: 32px 0; text-align: left; }

/* ---------- responsief ---------- */
@media (max-width: 1100px) {
  .raster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .sectiekop { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .lg-rij { grid-template-columns: 46px 1fr; gap: 12px; }
  .lg-valt { grid-column: 2; font-size: 12.5px; }
  .beloften-in { grid-template-columns: repeat(2, 1fr); }
  .belofte:nth-child(3) { border-left: 0; padding-left: 0; }
  .belofte:nth-child(2) { padding-right: 0; }
  /* Tekst blijft bovenaan staan. Met het beeld op order:-1 landde een bezoeker
     op een portret zonder kop, tekst of knop in beeld. */
  .hero-in { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 48px; }
  .hero-beeld img { aspect-ratio: 16/10; max-height: 320px; object-position: 50% 20%; }
  .hero-kaartje { left: 14px; bottom: 16px; }
  .acc-raster { grid-template-columns: repeat(2, 1fr); }
  .gids-raster { grid-template-columns: 1fr; }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1fr; }
  .detail-beeld img { min-height: 300px; max-height: 380px; }
}
@media (max-width: 640px) {
  section { padding: 52px 0; }
  .wrap { padding: 0 18px; }
  .balk { font-size: 11.5px; padding: 9px 14px; line-height: 1.5; }
  .nav { display: none; }
  .menu-knop { display: block; }
  .kop-in { gap: 12px; height: 62px; }
  .merk { font-size: 1.35rem; }
  .mand-knop { padding: 8px 12px; font-size: 12px; }
  .hero-beeld img { aspect-ratio: 3/2; max-height: 260px; }
  .raster { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .filterbalk { gap: 14px; }
  .sorteer { margin-left: 0; width: 100%; justify-content: space-between; }
  .kaart-hover { display: none; }
  .kaart-tekst h3 { font-size: 1rem; }
  .kaart-meta { font-size: 11.5px; }
  .acc-raster { grid-template-columns: 1fr; }
  .beloften-in { grid-template-columns: 1fr; }
  .belofte { border-left: 0; padding: 16px 0; border-top: 1px solid var(--lijn); }
  .belofte:first-child { border-top: 0; }
  .voet-raster { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; }
  .detail-tekst, .checkout { padding: 30px 22px 34px; }
  .venster { padding: 0; }
  .hero-kaartje { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}