/* huurjepartytent.nl - huisstijl: Royal Blue + Light Cream, titels in FF Mark Pro Heavy, broodtekst in Manrope */
@font-face {
  font-family: "Mark Pro Heavy";
  src: url("/fonts/markpro-heavy.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Zelf gehost (was Google Fonts): voorkomt dat bezoekers-IP's zonder
   toestemming naar Google gestuurd worden bij het laden van het lettertype. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --blue: #0046ff;
  --blue-dark: #001bb7;
  --blue-soft: #e9e9e9;
  --lime: #ff8040;
  --lime-dark: #cc6633;
  --cream: #ffffff;
  --ink: #1d2733;
  --muted: #5c6672;
  --bg: #ffffff;
  --card: #ffffff;
  --line: #d9d9d9;
  --radius: 14px;
  --font-title: "Mark Pro Heavy", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* "clip" en niet "hidden": zo krijgt de wegvliegende envelop op de bedankpagina
   geen horizontale scrollbalk, terwijl sticky elementen blijven werken. */
html { scroll-behavior: smooth; overflow-x: clip; }
[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #111;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
.x-klein { text-transform: lowercase; font-size: 1em; }
.cijfer-groot { font-size: 1em; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Actiebalk */
.actiebalk {
  position: relative;
  background: var(--blue-dark);
  color: #fff;
  font-size: 0.9rem;
  padding: 9px 0;
  text-align: center;
}
.actiebalk .container { display: flex; align-items: center; justify-content: center; }
.actiebalk a { color: #fff; text-decoration: none; }
.actiebalk a:hover { text-decoration: underline; }
.actiebalk strong { color: #fff; }
.actiebalk-link { min-width: 0; opacity: 1; transition: opacity 0.22s ease; }
.actiebalk-link.actiebalk-fade { opacity: 0; }
.actiebalk-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.actiebalk-nav[data-actiebalk-prev] { left: 20px; }
.actiebalk-nav[data-actiebalk-next] { right: 20px; }
.actiebalk-nav:hover { color: #fff; }
.actiebalk-nav svg { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .actiebalk { font-size: 0.82rem; padding: 10px 0; }
  .actiebalk-nav[data-actiebalk-prev] { left: 10px; }
  .actiebalk-nav[data-actiebalk-next] { right: 10px; }
  .actiebalk .container { padding: 0 38px; }
  .actiebalk-link { line-height: 1.45; }
}

/* Header */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.logo {
  display: flex;
  align-items: center;
  align-self: flex-end;
  text-decoration: none;
  white-space: nowrap;
}
.logo img { height: 50px; width: auto; display: block; }
.logo img.logo-icoon { display: none; }
.main-nav { display: flex; align-items: flex-end; align-self: flex-end; gap: 16px; flex: 1; }
.main-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { border-bottom-color: var(--blue); }
.menu-toggle {
  display: none;
  align-self: center;
  border: none;
  background: none;
  padding: 6px;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle svg { width: 26px; height: 26px; display: block; }
.menu-toggle .icoon-sluit { display: none; }
.menu-toggle[aria-expanded="true"] .icoon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icoon-sluit { display: block; }
.cart-btn {
  margin-left: auto;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s;
}
.cart-btn:hover { background: var(--blue-dark); }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  padding: 96px 0;
  overflow-x: clip;
}
/* De kop valt zo in twee even lange regels: "Partytent huren? Vandaag" en
   "aangevraagd, zo geregeld." De clamp schaalt mee, zodat het ook op smallere
   schermen twee regels blijven; text-wrap: balance vangt de rest netjes op. */
.hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, calc(4.6vw - 4px), 3rem);
  margin: 0 0 12px;
  text-wrap: balance;
}
.hero p { font-size: 1.15rem; max-width: 620px; opacity: 0.95; }
.hero .btn-row { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-primary { background: var(--lime); color: #fff; }
.hero .btn-primary:hover { background: #fff; color: var(--blue-dark); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero-art { overflow: visible; position: relative; }
.hero-art img { width: 160%; height: auto; max-width: 820px; margin: 0; display: block; position: relative; left: 0; }

.notfound-hero {
  /* Zelfde blauwtint als de achtergrond van de tentfoto, zodat de foto er
     naadloos in valt zonder zichtbare rand. */
  background: #0153fe;
  color: #fff;
  padding: 64px 0 96px;
  overflow-x: clip;
}
.notfound-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}
.notfound-tekst { text-align: left; }
.notfound-img { width: 100%; height: auto; }
.notfound-hero h1 { color: #fff; font-size: clamp(2.25rem, calc(4.6vw - 4px), 3.4rem); margin: 0 0 16px; text-wrap: balance; }
.notfound-hero p { font-size: 1.25rem; opacity: 0.95; margin: 0; max-width: 500px; }
.notfound-hero .btn-row { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.notfound-hero + .site-footer { margin-top: 0; }
@media (max-width: 780px) {
  .notfound-inner { grid-template-columns: 1fr; text-align: center; }
  .notfound-tekst { text-align: center; }
  .notfound-hero p { max-width: none; margin: 0 auto; }
  .notfound-hero .btn-row { justify-content: center; }
  .notfound-img { order: -1; }
}

.btn {
  display: inline-block;
  font-family: var(--font-title);
  letter-spacing: 0.01em;
  /* Een doorzichtige rand van 2px, zodat een gevulde knop even hoog is als
     een knop mét rand (.btn-outline, .btn-secondary). Zonder dit rekt de
     flexbox van .btn-row de gevulde knop uit tot de hoogte van zijn buurman
     en zakt de ruimte allemaal naar onderen: de letters staan dan te hoog. */
  border: 2px solid transparent;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.05rem;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-secondary { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.btn-secondary:hover { background: var(--blue-soft); }

/* USP bar */
.usp-bar { background: var(--card); border-bottom: 1px solid var(--line); }
.usp-bar .container {
  /* Drie even brede vakken met de tekst in het midden. Eerst stonden ze met
     space-between: dan hangt de plek van het middelste blok af van hoe breed
     de twee buitenste zijn, en de rechter is een stuk breder. Gemeten: het
     middelste blok zat daardoor 45 pixels links van het midden. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 0.95rem;
}
.usp-bar span { display: flex; align-items: center; justify-content: center; gap: 8px; }
.usp-bar svg { width: 17px; height: 17px; flex: none; color: var(--blue); }
@media (max-width: 780px) {
  .usp-bar .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 14px 0; }
  .usp-bar span { flex-direction: column; text-align: center; gap: 5px; padding: 0 2px; font-size: 0.72rem; line-height: 1.25; }
  .usp-bar svg { width: 18px; height: 18px; }
}

/* Sections */
.section { padding: 56px 0; }
.section-alt { background: var(--blue-soft); }
.section h2 { margin-top: 0; }
.section .lead { color: var(--muted); max-width: 680px; }

/* Product grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--blue); }
.card a.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.card .thumb { background: var(--blue-soft); aspect-ratio: 4/3; position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card .badge-overlay {
  position: absolute;
  top: -17px;
  left: -17px;
  z-index: 3;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  transform: rotate(-15deg);
  clip-path: polygon(50.00% 0.00%, 57.41% 12.73%, 69.13% 3.81%, 71.11% 18.40%, 85.36% 14.64%, 81.60% 28.89%, 96.19% 30.87%, 87.27% 42.59%, 100.00% 50.00%, 87.27% 57.41%, 96.19% 69.13%, 81.60% 71.11%, 85.36% 85.36%, 71.11% 81.60%, 69.13% 96.19%, 57.41% 87.27%, 50.00% 100.00%, 42.59% 87.27%, 30.87% 96.19%, 28.89% 81.60%, 14.64% 85.36%, 18.40% 71.11%, 3.81% 69.13%, 12.73% 57.41%, 0.00% 50.00%, 12.73% 42.59%, 3.81% 30.87%, 18.40% 28.89%, 14.64% 14.64%, 28.89% 18.40%, 30.87% 3.81%, 42.59% 12.73%);
  box-shadow: 0 4px 10px rgba(1, 50, 125, 0.3);
}
/* De ster is 100px breed, maar bij de punten is er veel minder ruimte. Zonder
   deze smallere tekstkolom past "Most popular" nét op één regel en loopt de
   tekst tot voorbij de punten. Zo breekt hij netjes over twee regels. */
.card .badge-overlay-tekst { display: block; max-width: 62px; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.5rem; }
.badge {
  display: inline-block;
  background: var(--blue-soft);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  width: fit-content;
}
.badge-populair { background: var(--lime); color: #fff; }

/* Tijdelijk niet te huur: een regel onder de prijs, in de gewone stroom van de
   kaart. Een zwevende badge zou over de rand en de afronding van de kaart heen
   hangen, want die heeft geen weet van de rand eromheen. */
.card-pauze-regel {
  margin: 4px 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--blue-soft);
  border-radius: 8px;
  padding: 7px 12px;
  width: fit-content;
}
/* De foto blijft herkenbaar, maar mag rustiger zodat de kaart niet schreeuwt
   om een tent die je nu niet kunt boeken. */
.card-pauze .thumb img { filter: grayscale(0.55); opacity: 0.8; }
.card-pauze .price { color: var(--muted); }

.pauze-melding {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 22px 0 0;
  background: var(--blue-soft);
}
.pauze-melding p { margin: 0 0 10px; }
.pauze-melding p:last-child { margin-bottom: 0; }
.pauze-kop { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.pauze-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.price { font-family: var(--font-title); font-weight: 700; color: var(--blue); font-size: 1.3rem; margin-top: auto; }
.price small { font-family: var(--font-body); font-size: 0.6em; text-transform: none; color: var(--muted); font-weight: 400; }

/* Category layout */
.cat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; margin-top: 28px; }
.filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  align-self: start;
  position: sticky;
  top: 90px;
}
.filters h3 { margin: 0 0 6px; font-size: 1rem; }
.filters fieldset { border: none; margin: 0 0 18px; padding: 0; }
.filters label { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; padding: 3px 0; cursor: pointer; }
.filters .reset { font-size: 0.85rem; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Sorteerkeuze in eigen stijl (zie sorteerKiezer() in build.js). */
.sorteer { position: relative; }
.sorteer-knop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s;
}
.sorteer-knop:hover { border-color: var(--blue); }
.sorteer-knop::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.15s;
  flex: none;
}
.sorteer-knop[aria-expanded="true"] { border-color: var(--blue); }
.sorteer-knop[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
.sorteer-lijst {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 100%;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sorteer-lijst[hidden] { display: none; }
.sorteer-lijst button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}
.sorteer-lijst button:hover { background: var(--blue-soft); }
.sorteer-lijst button.actief { background: var(--blue); color: #fff; font-weight: 600; }
.result-count { color: var(--muted); font-size: 0.92rem; }
.filters-toggle { display: none; }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.85rem; color: var(--muted); padding: 18px 0 0; }
.breadcrumbs a { color: var(--muted); }

/* Product page */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.product-layout h1 {
  font-size: 2.1rem;
  /* De kop begint bovenaan de rechterkolom en hoort optisch gelijk te lopen met
     de bovenkant van de foto ernaast. Zijn eigen bovenmarge duwde hem 22,5
     pixels omlaag; die is hier weg. Daarnaast zit er boven de letters nog lucht
     van de regelhoogte: nagemeten 7,5 pixels tussen de bovenkant van het vak en
     de bovenkant van de hoofdletters. Die halen we er met een negatieve marge
     af, zodat de letters zelf uitlijnen en niet het onzichtbare vak eromheen. */
  margin-top: -7.5px;
}
.gallery-main { background: var(--blue-soft); border-radius: var(--radius); overflow: hidden; }
.gallery-main img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs button {
  /* Samen precies zo breed als de grote foto erboven. Met een vaste maat van
     84 bleven vijf foto's smaller dan de foto en liep de rechterkant niet
     gelijk. Ze verdelen nu de ruimte. Het omslaan naar een tweede rij is
     daarom weg: dat zou de uitlijning juist weer breken. Let op als er ooit
     veel meer foto's bij een product komen; boven een stuk of acht worden de
     knopjes te klein om nog aan te tikken. */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  aspect-ratio: 1/1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-soft);
  /* De achtergrond liep onder de doorzichtige rand door, waardoor je een grijs
     ringetje om elk fotootje zag. Zo stopt hij bij de rand en blijft er alleen
     kleur over als de foto gekozen of aangewezen is. */
  background-clip: padding-box;
  cursor: pointer;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.active { border-color: var(--blue); }
.gallery-thumbs button:hover { border-color: var(--blue-dark); }
.product-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.product-price {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--blue);
  margin: 12px 0 2px;
}
.product-price small { font-size: 0.95rem; color: var(--muted); font-weight: 400; font-family: var(--font-body); }
/* Vanaf 1140 breed is de container uitgegroeid en ligt de verhouding tussen de
   twee kolommen vast. De onderkant van het servicevak kwam dan 25 pixels boven
   de fotostrook uit; die 25 zetten we hier als extra lucht boven de prijs, zodat
   de twee gelijk eindigen. Onder die breedte schuiven de kolommen mee met het
   scherm en verandert het verschil continu, dus daar zou een vast getal juist
   scheef gaan lopen. */
@media (min-width: 1140px) {
  /* 41 en niet 37: de marge onder de omschrijving erboven valt samen met deze,
     en de grootste van de twee wint. Van 37 kwam er daardoor maar 21 van de
     nodige 25 bij. */
  .product-price { margin-top: 41px; }
}
.price-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }

.options {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 16px;
  margin-bottom: 18px;
}
.options .options-titel { margin: 0 0 8px; font-family: var(--font-title); font-size: 1rem; font-weight: 700; }
.options label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
  font-size: 0.95rem;
}
.options label:last-child { border-bottom: none; }
.options label b { font-family: var(--font-title); font-size: 1.15rem; color: var(--blue); white-space: nowrap; }
.options label span { display: flex; gap: 10px; align-items: center; }

.service-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  font-size: 0.95rem;
}
.service-row b { font-family: var(--font-title); font-size: 1.15rem; color: var(--blue); white-space: nowrap; }
.service-left { align-items: flex-start !important; gap: 10px; flex: 1; }
.service-left input { margin-top: 3px; flex: none; }
.service-text { display: block !important; }
.service-name {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--ink);
}
.service-name .badge { font-size: 0.7rem; padding: 2px 9px; }
/* De knop waarmee de uitleg en de reiskosten uitklappen. Zelfde pijltje als
   bij de veelgestelde vragen, zodat het als een taal leest. Dicht is het vak
   drie regels hoog: de titel, de keuze en deze regel. */
.service-uitklap-knop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  text-align: left;
}
.service-uitklap-knop .faq-icon { width: 24px; height: 24px; flex: none; }
.service-uitklap-knop .faq-icon svg { width: 11px; height: 11px; }
.service-uitklap-knop.open .faq-icon { background: var(--blue); color: #fff; transform: rotate(180deg); }
.service-uitklap[hidden] { display: none; }

.service-vinkjes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  margin: 16px 0 18px;
  padding: 0;
}
.service-vinkjes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink);
}
.service-vinkjes svg { flex: none; width: 15px; height: 15px; color: var(--blue); }
@media (max-width: 780px) {
  /* Op een telefoon 3 en 3, met de letters iets kleiner. Met de gewone maat
     brak de ene regel wel af en de buurregel niet, waardoor de rijen ongelijk
     hoog werden. Met deze maat past elk van de zes op een regel: gemeten op
     390 breed zes regels van 19 hoog, de hele lijst 74 in plaats van 149. */
  .service-vinkjes { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .service-vinkjes li { font-size: 0.76rem; gap: 6px; }
  .service-vinkjes svg { width: 13px; height: 13px; }
}

.reiskosten-check {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.reiskosten-check label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  padding: 0;
  border: none;
  cursor: default;
}
.reiskosten-invoer { display: flex; gap: 8px; }
.reiskosten-invoer input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
}
.reiskosten-invoer button {
  flex: none;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.reiskosten-invoer button:hover { opacity: 0.92; }
.reiskosten-uitkomst {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: var(--ink);
}
.korting-veld { margin-top: 20px; max-width: 420px; }
.korting-veld label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.korting-invoer { display: flex; gap: 8px; }
.korting-invoer input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  text-transform: uppercase;
}
.korting-invoer input::placeholder { text-transform: none; }
.korting-invoer .btn { flex: none; padding: 10px 16px; font-size: 0.88rem; }
.korting-melding { margin: 8px 0 0; font-size: 0.86rem; }
.korting-melding[hidden] { display: none; }
.korting-melding.ok { color: #1a7f37; }
.korting-melding.fout { color: #c0392b; }
.side-regel-korting b { color: #1a7f37; }
.service-toggle {
  background: none;
  border: none;
  padding: 10px 0 2px;
  margin: 0;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.service-toggle:hover { color: var(--blue-dark); }
.service-toggle::after { content: " ›"; text-decoration: none; }
.service-toggle[aria-expanded="true"]::after { content: " ⌃"; }

.service-info {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--blue-soft);
  border-radius: 10px;
  font-size: 0.92rem;
}
.service-info b { color: var(--blue-dark); }
.service-info ul { margin: 8px 0 0; padding-left: 20px; }
.service-info li { padding: 2px 0; }
.service-note { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }
.service-reiskosten-note { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; }

.add-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qty {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.qty button { width: 40px; border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--blue); }
.qty input { width: 46px; text-align: center; border: none; font-size: 1rem; }
.total-line { margin-top: 14px; font-size: 1.05rem; }
.total-line b { font-family: var(--font-title); font-size: 1.3rem; color: var(--blue); }

/* Tabs */
.tabs { margin-top: 48px; }
.tab-btns { display: flex; gap: 8px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tab-btns button {
  border: none;
  background: none;
  padding: 10px 18px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btns button.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; padding: 22px 0; }
.tab-panel.active { display: block; }
.spec-list { list-style: none; padding: 0; margin: 0; max-width: 520px; }
.spec-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
}
.spec-list li span:first-child { color: var(--muted); }
.spec-list li span:last-child { text-align: left; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 28px; }
.step {
  /* Alleen een wit vlak, zonder randlijn. Kan hier omdat de sectie eromheen
     lichtgrijs is: het kaartje tekent zich dus af tegen de achtergrond. */
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
}
.step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-size: 1.1rem;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* FAQ */
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 20px;
  margin-bottom: 12px;
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  transition: color 0.15s ease;
}
.faq-q:hover, .faq-item.open .faq-q { color: var(--blue); }
.faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}
.faq-icon svg { width: 13px; height: 13px; }
.faq-item.open .faq-icon { background: var(--blue); color: #fff; transform: rotate(180deg); }
/* Max-height wordt in JS op de gemeten inhoud gezet (main.js), zodat het
   openen/sluiten soepel animeert in plaats van in één keer te springen. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-a-inner { padding-bottom: 14px; }
.faq-a p { margin: 0; color: var(--muted); }

/* Aanvraag / cart */
.cart-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 90px; }
.cart-items-title { font-size: 1.2rem; margin: 0 0 14px; }
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-areas: "thumb info" "onder onder";
  gap: 12px 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
/* Aparte flex-rij voor aantal + prijs: bij een grid-kolom van maar 72px zou de
   aantal-stepper (116px breed) buiten zijn kolom uitsteken en onder de
   prijs-cel komen te liggen, waardoor je niet meer op "+" kon klikken. */
.cart-item-onder { grid-area: onder; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-thumb {
  width: 72px;
  height: 72px;
  grid-area: thumb;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-soft);
  display: block;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { grid-area: info; min-width: 0; }
.cart-naam {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--blue);
  text-decoration: none;
  display: block;
}
.cart-naam:hover { text-decoration: underline; }
.cart-item .sub { color: var(--muted); font-size: 0.86rem; margin-top: 3px; line-height: 1.5; }
.cart-item .remove {
  display: inline-block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart-item .remove:hover { color: #b0301e; }
.cart-item .qty { width: 116px; flex: none; }
.cart-prijs {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--blue);
  font-size: 1.3rem;
  text-align: right;
}

.side-regel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.4;
}
.side-regel b { font-family: var(--font-title); font-size: 1.1rem; color: var(--ink); }
.side-regel-stack { flex-direction: column; gap: 4px; }
.side-waarde-klein { font-size: 0.95rem; }
.side-totaal {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 16px;
  font-size: 1.02rem;
}
.side-totaal b { color: var(--blue); font-size: 1.3rem; font-family: var(--font-title); }

/* Datumkiezer met eigen kalender */
.wizard-datums { position: relative; margin-top: 4px; }
.datum-veld {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 4px 10px 4px 4px;
}
.datum-deel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.datum-deel:hover { background: var(--blue-soft); }
.datum-deel.actief { border-color: var(--blue); background: var(--blue-soft); }
.datum-deel-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.datum-deel-waarde {
  font-size: 0.88rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.datum-deel-waarde.gekozen { color: var(--blue-dark); font-weight: 600; }
.datum-pijl { align-self: center; color: var(--muted); font-size: 0.9rem; flex: none; }
.datum-icoon { width: 20px; height: 20px; align-self: center; color: var(--blue); flex: none; }

.datum-onder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  margin: 8px 2px 0;
  font-size: 0.82rem;
  color: var(--muted);
  visibility: hidden;
}
.datum-onder.zichtbaar { visibility: visible; }

.tijd-veld { display: flex; gap: 10px; margin-top: 10px; }
.tijd-deel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.tijd-select { position: relative; }
.tijd-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--blue-dark);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.tijd-select-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  margin-top: -3px;
}
.tijd-select-lijst {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: -10px;
  margin: 0;
  padding: 6px;
  list-style: none;
  width: 120px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 27, 183, 0.14);
}
.tijd-select-lijst[hidden] { display: none; }
.tijd-select-lijst button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.tijd-select-lijst button:hover { background: var(--blue-soft); }
.tijd-select-lijst button.actief { background: var(--blue); color: #fff; font-weight: 600; }
.datum-extra-dag-melding {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.85rem;
}
.datum-wis {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kal-opdracht {
  margin: 0 0 8px;
  padding: 6px 10px;
  background: var(--blue-soft);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-dark);
  text-align: center;
}

.kalender {
  position: static;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.kal-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kal-kop b { font-family: var(--font-body); color: var(--blue-dark); font-size: 0.95rem; }
.kal-nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.kal-nav:hover { background: var(--blue-soft); border-color: var(--blue); }
.kal-weekdagen, .kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 34px;
  gap: 2px;
}
/* Altijd ruimte voor 6 weekrijen reserveren (het maximum dat een maand nodig
   heeft), zodat de kalender niet van hoogte verspringt bij het wisselen van
   maand. */
.kal-grid { min-height: calc(34px * 6 + 2px * 5); align-content: start; }
.kal-weekdagen span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 2px;
}
.kal-dag {
  height: 34px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.kal-dag:hover:not(:disabled) { background: var(--blue-soft); }
.kal-dag:disabled { color: #c3c8ce; cursor: default; }
.kal-dag.tussen { background: var(--blue-soft); border-radius: 0; }
.kal-dag.start, .kal-dag.eind {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.kal-dag.start { border-radius: 8px 0 0 8px; }
.kal-dag.eind { border-radius: 0 8px 8px 0; }
.kal-dag.start.eind { border-radius: 8px; }
.kal-hint {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}
.side-btn { width: 100%; margin-top: 20px; text-align: center; }
.side-note { font-size: 0.82rem; color: var(--muted); margin: 14px 0 0; text-align: center; }
/* De regel die verschijnt zodra het totaal boven de duizend euro komt. Iets
   nadrukkelijker dan de gewone voetregel, want hij spreekt het bedrag erboven
   tegen: dat is dan een richtprijs en niet wat je betaalt. */
.side-note-maatwerk { color: var(--ink); font-weight: 600; }
.cart-empty {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--muted);
  margin-top: 24px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--blue-dark); }
.form-grid input, .form-grid textarea, .form-grid select {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.98rem;
  font-family: inherit;
  background: #fff;
}
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.form-note { font-size: 0.85rem; color: var(--muted); }

/* Maatwerk-aanvraag (grote/bijzondere aanvragen) */
.maatwerk-panel {
  background: var(--blue-dark);
  border-radius: var(--radius);
  padding: 48px;
}
.maatwerk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.maatwerk-info h2 { color: #fff; font-size: 2rem; line-height: 1.2; margin: 0 0 14px; }
.maatwerk-info h2 b { font-family: var(--font-title); }
.maatwerk-info > p { color: #fff; opacity: 0.85; margin: 0 0 28px; }
/* Vier punten die vertellen wat iemand krijgt als hij dit formulier invult.
   Zelfde vinkje als op de productpagina, zodat het als één taal leest. */
.maatwerk-vinkjes { list-style: none; padding: 0; margin: 0 0 26px; }
.maatwerk-vinkjes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.maatwerk-vinkjes svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.maatwerk-contact { display: flex; flex-direction: column; gap: 16px; }
.maatwerk-contact-row { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 1.02rem; text-decoration: none; }
.maatwerk-contact-row:hover { text-decoration: underline; }
.maatwerk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  flex: none;
}
.maatwerk-icon svg { width: 18px; height: 18px; }
.maatwerk-form { background: var(--card); border-radius: 12px; padding: 28px; }
.maatwerk-form .form-grid { margin-top: 0; }
.maatwerk-submit { width: 100%; margin-top: 18px; text-align: center; }
.maatwerk-note { margin-top: 14px; }
.maatwerk-bedankt { font-weight: 600; color: var(--ink); }
.maatwerk-bedankt .form-note { font-weight: 400; margin-top: 4px; }
@media (max-width: 860px) {
  .maatwerk-panel { padding: 28px 20px; }
  .maatwerk-grid { grid-template-columns: 1fr; }
}

/* Reserveringsmodule: stappenwizard */
/* Links het menu (wizard + prijsoverzicht), rechts een smalle kolom met je tent(en). */
[data-cart-table] {
  display: grid;
  /* minmax(0, ...) i.p.v. 1fr/340px: anders weigert de kolom te krimpen onder
     de min-content-breedte van zijn inhoud (bv. de stappenbalk-teksten),
     waardoor de hele grid breder werd dan de pagina en delen onklikbaar/
     onbereikbaar raakten. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 28px;
  align-items: start;
  margin-top: 20px;
}
.wizard-outer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wizard, .price-summary { width: 100%; }

/* De stappenbalk en het vak eronder staan bewust plat: ze hadden allebei
   dezelfde zachte schaduw, en die gaf een waas achter de randen. De randlijn
   doet het werk al. Andere vlakken op de site houden hun schaduw wel. */
.wizard-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
}
.wizard-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 6px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.wizard-step:disabled { cursor: default; color: #c3c8ce; }
.wizard-step:focus { outline: none; }
.wizard-step:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.75rem;
  flex: none;
}
.wizard-step:disabled .wizard-step-num { background: #eee; color: #c3c8ce; }
.wizard-step-label { overflow: hidden; text-overflow: ellipsis; }
.wizard-step.actief { background: var(--blue); color: #fff; }
.wizard-step.actief .wizard-step-num { background: rgba(255, 255, 255, 0.25); color: #fff; }
.wizard-step.voltooid:not(.actief) { color: var(--blue-dark); }
.wizard-step.voltooid:not(.actief) .wizard-step-num { background: var(--lime); color: #fff; }

.wizard-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.wizard-content { flex: 1 1 auto; padding: 28px 28px 8px; }
.wizard-panel-title { margin: 0 0 8px; font-size: 1.3rem; }
.wizard-panel-intro { color: var(--muted); margin: 0 0 20px; }
.wizard-nav {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
}
.wizard-nav .btn:disabled { opacity: 0.4; cursor: default; }
/* Melding in het prijsoverzicht zodra het totaal boven de maatwerkdrempel komt. */

.keuzevak-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.keuzevak {
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.keuzevak input { position: absolute; opacity: 0; pointer-events: none; }
.keuzevak:hover { border-color: var(--blue); }
.keuzevak:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.keuzevak-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.keuzevak-title { font-family: var(--font-title); font-size: 1.05rem; color: var(--ink); }
.keuzevak-tekst { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.keuzevak-prijs { margin-left: auto; font-family: var(--font-title); font-size: 1.05rem; color: var(--blue); white-space: nowrap; }

.methode-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.methode-optie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.methode-optie input { position: absolute; opacity: 0; pointer-events: none; }
.methode-optie:hover { border-color: var(--blue); }
.methode-optie:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
/* De pictogrammen van Mollie zijn 32 bij 24; dezelfde verhouding aanhouden
   scheelt witruimte boven en onder het logo. */
.methode-optie img { width: 40px; height: 28px; object-fit: contain; }
.methode-optie span { font-size: 0.85rem; color: var(--ink); }

.wizard-uitleg-lijst { margin: 0 0 4px; padding-left: 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.wizard-highlight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--blue-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 0.98rem;
}
.wizard-highlight b { font-family: var(--font-title); font-size: 1.2rem; color: var(--blue); }

.wizard-address-grid { margin-top: 4px; }
.wizard-bereken-btn { margin-top: 22px; }
.wizard-bereken-melding { font-size: 0.88rem; margin: 10px 0 0; font-weight: 600; }
.wizard-bereken-melding.ok { color: #1a7a3c; }
.wizard-bereken-melding.fout { color: #b3261e; }

.overzicht-blok {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.overzicht-blok-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.overzicht-blok-kop h3 { margin: 0; font-size: 1rem; }
.overzicht-blok p { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.5; }
.overzicht-aanpassen {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex: none;
}
.overzicht-aanpassen:hover { color: var(--blue-dark); }

/* De extra's in stap 4. Een volwaardige productkaart: grote foto met de
   andere foto's eronder, de belangrijkste maten ernaast, en de prijs
   doorgerekend in plaats van een tarief waar de klant zelf mee moet rekenen. */
.extra-advies {
  background: #eaf0ff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.extra-advies p { margin: 0; font-size: 0.95rem; line-height: 1.5; flex: 1; min-width: 240px; }
.extra-advies .btn { padding: 9px 18px; font-size: 0.95rem; white-space: nowrap; }

.extra-groot { display: flex; gap: 22px; align-items: flex-start; }
.extra-groot-fotos { width: 220px; flex: none; }
.extra-groot-foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f4fa;
  background-clip: padding-box;
  cursor: zoom-in;
}
.extra-groot-foto:hover { border-color: var(--blue); }
.extra-groot-foto img { width: 100%; height: auto; display: block; }
.extra-mini { display: flex; gap: 8px; margin-top: 8px; }
.extra-mini button {
  /* Samen precies zo breed als de grote foto erboven, dus ze verdelen de
     ruimte in plaats van een vaste maat te hebben. Met een vaste maat van 92
     bleven twee foto's op 192 steken in een kolom van 220 en liep de rechterkant
     niet gelijk. Zo klopt het ook als er ooit een derde foto bij komt. */
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f4fa;
  background-clip: padding-box;
  cursor: zoom-in;
}
.extra-mini button:hover { border-color: var(--blue); }
.extra-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.extra-groot-info { flex: 1; min-width: 0; }
.extra-groot-info h3 { margin: 0 0 6px; font-size: 1.3rem; }
.extra-groot-kort { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.extra-specs { list-style: none; padding: 0; margin: 0 0 14px; font-size: 0.9rem; color: var(--ink); }
.extra-specs li { padding: 3px 0; display: flex; gap: 8px; }
.extra-specs li b { color: var(--muted); font-weight: 400; min-width: 100px; flex: none; }
.extra-groot-regel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.extra-product-qty { flex: none; }
.extra-prijs { font-family: var(--font-title); color: var(--blue); font-size: 1.1rem; }
.extra-prijs small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: var(--muted); }

@media (max-width: 680px) {
  /* Op een telefoon past de foto niet naast de tekst. */
  .extra-groot { flex-direction: column; }
  .extra-groot-fotos { width: 100%; }
  .extra-advies .btn { width: 100%; }
}

/* De vergrote foto, geopend door op een productfoto te klikken. Bewust kaal:
   alleen de foto en een kruisje. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 20, 30, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 76px 20px 40px;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-main { max-width: 100%; max-height: 82vh; border-radius: var(--radius); object-fit: contain; background: #fff; }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
/* Pijlen naast de foto. Ze staan met een vaste afstand tot de rand van het
   scherm en niet tegen de foto aan: de foto's zijn niet allemaal even breed,
   dus anders zouden de pijlen per foto verspringen. */
.lightbox-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-pijl[hidden] { display: none; }
.lightbox-pijl:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-pijl svg { width: 24px; height: 24px; }
.lightbox-vorige { left: 20px; }
.lightbox-volgende { right: 20px; }
@media (max-width: 780px) {
  .lightbox-overlay { padding: 54px 16px 16px; align-items: flex-start; }
  .lightbox-main { max-height: 70vh; }
  .lightbox-close { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 1.15rem; }
  /* Op een telefoon onderaan naast elkaar in plaats van links en rechts van de
     foto: daar is de foto zo breed dat de pijlen er anders overheen vallen. */
  .lightbox-pijl { top: auto; bottom: 20px; transform: none; width: 44px; height: 44px; }
  .lightbox-vorige { left: 50%; margin-left: -52px; }
  .lightbox-volgende { right: 50%; margin-right: -52px; }
}

.mobile-total-bar { display: none; }

@media (max-width: 680px) {
  .mobile-total-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--card);
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    box-shadow: 0 -6px 20px rgba(0, 27, 183, 0.12);
  }
  .mobile-total-bar::before {
    content: "";
    width: 36px;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--line);
  }
  .mobile-total-bar button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 14px 88px;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.15s;
  }
  .mobile-total-bar button:active { background: var(--blue-soft); }
  .mobile-total-tekst { display: flex; align-items: baseline; gap: 10px; }
  .mobile-total-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--muted);
  }
  .mobile-total-bar b { font-family: var(--font-title); font-size: 1.3rem; color: var(--blue); }
  .mobile-total-arrow {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 27, 183, 0.25);
    transition: transform 0.2s, background 0.2s;
  }
  .mobile-total-bar.open .mobile-total-arrow { background: var(--blue-dark); }
  .mobile-total-arrow svg { width: 16px; height: 16px; }
  .mobile-total-bar.open .mobile-total-arrow { transform: rotate(180deg); }

  .price-summary { display: none; }
  .price-summary.mobile-open {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 59;
    background: var(--card);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    margin: 0;
    max-width: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }
  .wizard-outer { padding-bottom: 74px; }
  .wizard-bar { gap: 2px; padding: 5px; }
  .wizard-step { padding: 8px 5px; gap: 6px; flex: 1 1 0; justify-content: center; }
  .wizard-step-num { width: 24px; height: 24px; font-size: 0.75rem; }
  .wizard-step-label { display: none; }
  .wizard-step.actief { flex-grow: 3.4; }
  .wizard-step.actief .wizard-step-label { display: inline; font-size: 0.85rem; font-weight: 700; }
  .wizard-box { min-height: 0; }
}

/* Akkoord en nieuwsbrief */
.akkoord {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 720px;
}
.check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 11px;
  font-weight: 400 !important;
  color: var(--ink) !important;
  font-size: 0.93rem;
  line-height: 1.5;
  cursor: pointer;
  padding: 7px 0;
}
.check-row input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--blue); }
.check-row + .check-row { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 13px; }
.verplicht {
  display: inline-block;
  background: var(--lime);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 1px;
}
.nieuwsbrief-bevestiging {
  background: var(--blue-soft);
  color: var(--blue-dark);
  border-radius: 10px;
  padding: 10px 16px;
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
}
.error-msg { color: #b0301e; font-size: 0.9rem; display: none; }

.success-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
  margin: 30px 0 0;
}
.success-box h2 { color: var(--blue); font-size: 1.8rem; }
.success-box p { max-width: 440px; margin-left: auto; margin-right: auto; }
.success-box .btn { margin-top: 8px; }
/* Envelop-animatie: de aanvraag glijdt in de envelop, de flap klapt dicht en
   de envelop vliegt weg. Daarna verschijnt het vinkje op dezelfde plek. */
.envelop-scene {
  position: relative;
  width: 170px;
  height: 156px;
  margin: 0 auto 22px;
  perspective: 700px;
}
.envelop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 170px;
  height: 106px;
  transform-style: preserve-3d;
  animation: envelop-wegvliegen 1.1s cubic-bezier(0.6, -0.2, 0.9, 0.5) 1.95s forwards;
}
.envelop-achter {
  position: absolute;
  inset: 0;
  background: var(--blue-dark);
  border-radius: 9px;
}
.envelop-brief {
  position: absolute;
  left: 16px;
  top: 7px;
  width: 138px;
  height: 88px;
  padding: 15px 14px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 8px rgba(0, 27, 183, 0.22);
  z-index: 2;
  animation: envelop-brief-in 0.85s cubic-bezier(0.34, 1.15, 0.64, 1) 0.25s both;
}
.envelop-brief span {
  display: block;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 9px;
  background: var(--blue-soft);
}
.envelop-brief span:nth-child(1) { width: 62%; background: rgba(0, 70, 255, 0.45); }
.envelop-brief span:nth-child(2) { width: 100%; }
.envelop-brief span:nth-child(3) { width: 84%; }
/* De inkeping loopt vanaf de bovenhoeken (0%) naar het midden. Daardoor valt hij
   precies binnen de driehoek van de flap en steekt de brief er niet naast uit. */
.envelop-voor {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(155deg, var(--blue), var(--blue-dark));
  border-radius: 9px;
  clip-path: polygon(0 0, 50% 44%, 100% 0, 100% 100%, 0 100%);
}
/* Iets dieper dan de inkeping (44%), zodat de flap die volledig afdekt. */
.envelop-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 62px;
  background: var(--blue-dark);
  border-radius: 9px 9px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: envelop-flap-dicht 0.7s cubic-bezier(0.5, 0, 0.3, 1.2) 1.15s both;
}
.envelop-scene .success-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 27, 183, 0.3);
  animation: success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s both;
}
.success-icon svg { width: 36px; height: 36px; }
@keyframes envelop-brief-in {
  0% { transform: translateY(-74px) scale(0.94); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes envelop-flap-dicht {
  0% { transform: rotateX(180deg); z-index: 1; }
  49.9% { z-index: 1; }
  50% { z-index: 6; }
  100% { transform: rotateX(0deg); z-index: 6; }
}
@keyframes envelop-wegvliegen {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  20% { transform: translate(0, 16px) rotate(-4deg) scale(0.96); opacity: 1; }
  100% { transform: translate(320px, -340px) rotate(30deg) scale(0.16); opacity: 0; }
}
@keyframes success-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Confetti bij het versturen van de aanvraag */
.confetti-laag {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 200;
}
.confetti-stuk {
  position: absolute;
  top: -24px;
  animation-name: confetti-val;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-fill-mode: forwards;
}
.confetti-stuk span {
  display: block;
  width: 100%;
  height: 100%;
  animation-name: confetti-zwaai;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.confetti-rond span { border-radius: 50%; }
@keyframes confetti-val {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(110vh); opacity: 0.9; }
}
@keyframes confetti-zwaai {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(24px) rotate(200deg); }
}
/* Voor wie bewegende beelden liever overslaat: meteen het eindresultaat tonen. */
@media (prefers-reduced-motion: reduce) {
  .envelop { display: none; }
  .envelop-scene { height: 90px; }
  .envelop-scene .success-icon { animation-delay: 0s; animation-duration: 0.01s; }
  .confetti-laag { display: none; }
}

/* Algemene voorwaarden */
.legal { max-width: 760px; margin: 0 auto; padding-bottom: 24px; }
.legal h1 { margin-bottom: 12px; }
.legal-intro { font-size: 1.05rem; color: var(--ink); }
.legal-date { font-size: 0.85rem; color: var(--muted); margin-top: -4px; }
.legal-toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 20px 40px;
  margin: 28px 0 8px;
  columns: 2;
  column-gap: 32px;
}
.legal-toc li { padding: 3px 0; font-size: 0.94rem; break-inside: avoid; }
.legal-artikel { margin-top: 36px; }
.legal-artikel h2 { font-size: 1.15rem; margin-bottom: 8px; }
.legal-artikel p { margin: 0 0 12px; }
.legal-artikel ul, .legal-artikel ol { margin: 0 0 12px; padding-left: 20px; }
.legal-artikel li { padding: 3px 0; }
.legal-artikel li > ul, .legal-artikel li > ol { margin: 6px 0; }
.legal-artikel h3 { font-size: 1rem; margin: 18px 0 6px; color: var(--blue-dark); }
.legal-slot {
  margin-top: 40px;
  padding: 18px 20px;
  background: var(--blue-soft);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

/* Footer */
.site-footer { background: var(--blue-dark); color: #dbe6f7; margin-top: 64px; padding: 48px 0 24px; }
.section-alt + .site-footer { margin-top: 0; }
.site-footer h3 { color: #fff; margin: 0 0 12px; font-size: 1.1rem; }
/* De eerste kop in de voettekst is het logo in plaats van tekst. De naam blijft
   in de alt-tekst staan, dus voor voorleessoftware en zoekmachines verandert er
   niets. Iets meer ruimte eronder, want het beeldmerk loopt optisch door tot
   aan de onderkant van het vlak. */
.site-footer .footer-logo { margin: 0 0 16px; line-height: 0; }
.site-footer .footer-logo img { display: block; width: 200px; height: auto; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.site-footer a { color: #dbe6f7; text-decoration: none; transition: color 0.15s; }
.site-footer a:hover { color: var(--lime); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 3px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 32px; padding-top: 18px; font-size: 0.85rem; opacity: 0.8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
/* Een gevulde cirkel in hetzelfde blauw als de zwevende knoppen linksonder en
   rechtsonder, met het teken er wit in. Zonder cirkel vielen ze op het
   donkerblauw van de voettekst nauwelijks op; met een wit vlak trokken ze juist
   te veel aandacht. */
.footer-social { display: flex; gap: 14px; flex-shrink: 0; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  transition: background 0.15s;
}
.footer-social a:hover { background: var(--blue-dark); color: #ffffff; text-decoration: none; }
.footer-social svg { width: 19px; height: 19px; }
.footer-link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: #dbe6f7;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.footer-link-btn:hover { color: var(--lime); text-decoration: underline; }

.cookiebanner-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 20, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookiebanner-overlay[hidden] { display: none; }
.cookiebanner {
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  text-align: left;
}
.cookiebanner-logo { height: 32px; width: auto; margin-bottom: 20px; }
.cookiebanner h2 { margin: 0 0 12px; font-size: 1.3rem; }
.cookiebanner p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.cookiebanner a { color: var(--blue); font-weight: 600; }
.cookiebanner-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.cookiebanner-knoppen .btn { flex: 1 1 auto; padding: 12px 16px; font-size: 0.88rem; white-space: nowrap; text-align: center; }

.cookiebanner-instellingen { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.cookiebanner-instellingen[hidden] { display: none; }
.cookie-categorie { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cookie-categorie-tekst { display: flex; flex-direction: column; gap: 2px; }
.cookie-categorie-tekst b { font-size: 0.9rem; color: var(--ink); }
.cookie-categorie-tekst span { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.cookie-toggle {
  position: relative;
  flex: none;
  display: inline-block;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.cookie-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-toggle-bol {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}
.cookie-toggle input:checked ~ .cookie-toggle-bol { transform: translateX(16px); }
.cookie-toggle:has(input:checked) { background: var(--blue); }
.cookie-toggle-vast { background: var(--blue); opacity: 0.6; cursor: not-allowed; }
.cookie-toggle-vast .cookie-toggle-bol { transform: translateX(16px); }

/* Zwevende taalwissel rechtsonder, tegenhanger van de cookieknop linksonder.
   Bewust tekst en geen vlaggetjes: een vlag staat voor een land, niet voor een taal. */
/* Alleen de taalcode, groot en gecentreerd: geen icoon meer nodig. */

/* Op mobiel staat op de aanvraagpagina een vaste totaalbalk onderin.
   De zwevende knoppen schuiven dan omhoog zodat ze er niet overheen vallen. */
@media (max-width: 680px) {
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--blue-dark);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
  font-size: 0.95rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast a { color: #fff; font-weight: 700; }

/* Responsive */
@media (max-width: 1020px) {
  .logo img.logo-vol { display: none; }
  .logo img.logo-icoon { display: block; height: 34px; }
  .site-header .container { gap: 12px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    /* Zonder dit erven de items align-items: flex-end van de desktopversie.
       In een kolom betekent dat rechts uitgelijnd én zo smal als de tekst,
       waardoor ook de scheidingslijntjes ongelijke lengtes kregen. */
    align-items: stretch;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0, 27, 183, 0.1);
    padding: 10px 14px 16px;
  }
  .main-nav.open { display: flex; }
  /* Rijen over de volle breedte met een ruim aanraakvlak, in plaats van
     dunne lijntjes onder losse woorden. */
  .main-nav a {
    display: flex;
    align-items: center;
    padding: 14px 14px;
    border-bottom: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
  }
  .main-nav a:hover { background: var(--blue-soft); border-bottom-color: transparent; }
  .main-nav a:active { background: var(--blue-soft); }
  .main-nav a.active {
    color: var(--blue);
    background: rgba(0, 70, 255, 0.08);
    border-bottom-color: transparent;
  }
  .cart-btn { order: 2; padding: 10px 16px; font-size: 0.92rem; }
  .menu-toggle { display: block; order: 3; }
}
@media (max-width: 860px) {
  .cat-layout { grid-template-columns: 1fr; }
  /* De toolbar breekt hier af, waardoor de sorteerknop links komt te staan.
     De lijst hangt dan ook links uit in plaats van rechts. */
  .sorteer-lijst { right: auto; left: 0; }
  .filters { position: static; display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-block; }
  .product-layout { grid-template-columns: 1fr; }
  /* Onder elkaar staat de kop niet meer naast de foto, dus dan is er ook niets
     om mee uit te lijnen. De gewone ruimte erboven komt terug. */
  .product-layout h1 { margin-top: 0.67em; }
  .form-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.9rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.98rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .legal-toc { columns: 1; }
  [data-cart-table] { grid-template-columns: minmax(0, 1fr); }
  .cart-sidebar { position: static; order: -1; }
}

/* ---------- Koppen op de telefoon ----------
   Op een breed scherm mag een kop groot zijn, op een telefoon van 390 pixels
   niet: daar viel een tussenkop van 2rem over vijf regels uiteen en werd hij
   bijna even groot als de titel van de pagina zelf (nagemeten: h2 32px tegen
   h1 30,4px). Hieronder krijgt elk niveau een eigen maat, zodat de volgorde
   h1 > h2 > h3 ook op een klein scherm te zien blijft.
   Koppen met een eigen regel (voorwaarden, footer, stappen, cookiemelding)
   raken dit niet: die staan op een klasse en winnen het van deze regels. */
@media (max-width: 680px) {
  h1 { font-size: 1.7rem; }
  .hero h1 { font-size: 1.8rem; }
  .product-layout h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  /* De kaarttitel heeft een eigen maat en zou anders even groot blijven als
     de kop van de sectie erboven; dan is niet meer te zien wat waar bij hoort. */
  .card-body h3 { font-size: 1.3rem; }
  .maatwerk-info h2 { font-size: 1.5rem; }
}

/* ---------- Venstertje na 'toevoegen aan aanvraag' ---------- */
.toegevoegd-laag {
  position: fixed;
  inset: 0;
  /* Zelfde donkere waas als achter het cookievenster, geen blauwe zweem. */
  background: rgba(15, 20, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}
.toegevoegd-venster {
  background: #fff;
  border-radius: 18px;
  padding: 30px 28px 26px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.toegevoegd-vink {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toegevoegd-vink svg { width: 24px; height: 24px; }
.toegevoegd-venster h2 { font-size: 1.15rem; margin: 0 0 4px; }
.toegevoegd-venster p { margin: 0; color: var(--muted); }
.toegevoegd-knoppen {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.toegevoegd-knoppen .btn { font-size: 0.95rem; padding: 10px 18px; }
@media (max-width: 420px) {
  .toegevoegd-knoppen { flex-direction: column-reverse; }
  .toegevoegd-knoppen .btn { width: 100%; }
}
.total-line .total-uitleg { display: block; color: var(--muted); margin-top: 2px; }

/* ---------- Tekstselectie in onze eigen kleur ---------- */
/* Het oranje van de site in plaats van het standaardblauw van de browser.
   De tekst wordt donker en niet wit: wit op dit oranje haalt maar 2,5:1 aan
   contrast en is slecht te lezen, donker haalt 6,05:1. */
::selection {
  background: var(--lime);
  color: var(--ink);
}
::-moz-selection {
  background: var(--lime);
  color: var(--ink);
}

/* Iets bredere intro, zodat een langere zin op twee regels past in plaats van
   drie. Alleen waar die extra breedte nodig is: 680px blijft elders de prettige
   leesbreedte. Op smallere schermen valt hij vanzelf terug op de volle breedte. */
.lead.lead-breed { max-width: 860px; }

/* ---------- Zwevende knoppen onderin ---------- */
/* Linksonder één knop voor de instellingen (taal + cookies), rechtsonder
   WhatsApp. Eerder stonden taal en cookies als twee losse knoppen in twee
   hoeken; nu is rechtsonder vrij voor de plek waar bezoekers een
   contactknop verwachten. */
.instellingen-zwevend {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.instellingen-knop {
  /* Een pil in plaats van een rondje, met het instellingen-symbool en de
     taalcode allebei zichtbaar. Met alleen 'NL' erop kon niemand zien dat de
     cookievoorkeuren er ook achter zaten. */
  height: 52px;
  padding: 0 20px;
  gap: 12px;
  border-radius: 999px;
  /* Zelfde blauw en zelfde vorm als de WhatsApp-knop aan de andere kant, zodat
     de twee zwevende knoppen een paar vormen in plaats van los van elkaar te
     staan. */
  border: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.instellingen-knop .instellingen-symbool { width: 24px; height: 24px; }
.instellingen-knop:hover { background: var(--blue-dark); }
.instellingen-menu {
  order: -1;
  position: relative;
  /* Eigen stapelcontext, zodat het puntje met z-index:-1 achter de kaart valt
     en niet achter de pagina. Zelfde truc als bij het WhatsApp-kaartje. */
  isolation: isolate;
  width: 260px;
  /* Niet breder dan het scherm op een smalle telefoon. De ondergrens erbij
     omdat max-width met vw-eenheden in sommige ingesloten weergaven op 0
     uitkomt, en dan zou de kaart helemaal dichtklappen. */
  max-width: calc(100vw - 40px);
  min-width: 240px;
  background: #fff;
  border-radius: 16px;
}
.instellingen-menu[hidden] { display: none; }
/* Zelfde puntje als bij het WhatsApp-kaartje, maar links: deze knop staat
   linksonder. */
.instellingen-menu::before,
.instellingen-menu::after {
  content: "";
  position: absolute;
  left: 28px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.instellingen-menu::before {
  bottom: -9px;
  border-top: 9px solid var(--line);
}
.instellingen-menu::after {
  bottom: -8px;
  border-top: 9px solid #ffffff;
}
.instellingen-kaartkop {
  background: var(--blue);
  color: #fff;
  padding: 18px 20px 20px;
  /* Ronde bovenhoeken hier en niet via overflow:hidden op de kaart, want dat
     knipt ook het puntje eronder weg. */
  border-radius: 15px 15px 0 0;
}
.instellingen-titel {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.25rem;
  line-height: 1.15;
}
.instellingen-onderkop {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}
.instellingen-lijst {
  padding: 10px;
  /* Alleen om het witte deel een randje, net als bij WhatsApp: op de blauwe
     hero tekende een rand om de hele kaart een lichte lijn. */
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 16px 16px;
}
.instellingen-kop {
  margin: 6px 8px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.instellingen-menu a,
.instellingen-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 9px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.instellingen-menu a:hover,
.instellingen-menu button:hover { background: var(--blue-soft); }
.instellingen-menu a.taal-actief { color: var(--blue); font-weight: 700; }
.instellingen-menu .taal-code {
  min-width: 26px;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.instellingen-menu a.taal-actief .taal-code { color: var(--blue); }
.instellingen-menu button svg { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* WhatsApp: groene pil met logo en tekst, zoals bij de meeste webshops. */
.whatsapp-zwevend {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.whatsapp-knop {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Even hoog als de instellingenknop ernaast (52px), zodat ze samen een
     rustig geheel vormen. Ruimer rondom het logo en de tekst dan eerst. */
  padding: 13px 28px 13px 22px;
  border-radius: 999px;
  border: none;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  /* Zonder dit is de regelhoogte van de tekst net iets groter dan het logo en
     wordt de knop 53px in plaats van de 52px van de knop ernaast. */
  line-height: 1;
  transition: background 0.15s ease;
}
.whatsapp-knop:hover { background: var(--blue-dark); }
.whatsapp-icoon { display: flex; }
.whatsapp-knop svg { width: 26px; height: 26px; display: block; }

/* Op een telefoon is er geen ruimte voor de tekst; dan alleen het rondje. */
@media (max-width: 640px) {
  .whatsapp-knop { padding: 13px; gap: 0; }
  .whatsapp-tekst { display: none; }
  .instellingen-zwevend { left: 16px; bottom: 16px; }
}

/* De mobiele totaalbalk in de aanvraag schuift alles omhoog. */
/* De mobiele totaalbalk bestaat alleen onder 680px breed. Zonder die grens
   werden de zwevende knoppen ook op een breed scherm 92px omhoog geduwd,
   terwijl daar helemaal geen balk staat. */
@media (max-width: 680px) {
  body.heeft-mobiele-balk .instellingen-zwevend,
  body.heeft-mobiele-balk .whatsapp-zwevend { bottom: 92px; }
}

/* ---------- Kaartje boven de WhatsApp-knop ---------- */
.whatsapp-kaart {
  position: relative;
  /* Eigen stapelcontext, zodat het puntje met z-index:-1 achter de kaart valt
     en niet achter de pagina. */
  isolation: isolate;
  width: 300px;
  max-width: calc(100vw - 40px);
  /* Geen rand om de hele kaart: op de blauwe hero tekende die een lichte lijn
     om het kaartje heen. Het onderste blok heeft zijn eigen randje. */
  background: #ffffff;
  border-radius: 16px;
}
.whatsapp-kaart[hidden] { display: none; }
/* Het puntje dat naar de knop wijst.
   Twee driehoeken over elkaar: de onderste in de randkleur, de bovenste in het
   wit van de kaart en één pixel hoger. Die tweede dekt precies het stukje
   onderrand van de kaart af waar het puntje aan vastzit, zodat het één vorm
   wordt in plaats van een streep met een driehoekje eronder.
   Eerder stond hier een gedraaid vierkantje; daarbij liep de onderrand van de
   kaart dwars over de basis van het puntje heen. */
.whatsapp-kaart::before,
.whatsapp-kaart::after {
  content: "";
  position: absolute;
  right: 28px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.whatsapp-kaart::before {
  bottom: -9px;
  border-top: 9px solid var(--line);
}
.whatsapp-kaart::after {
  bottom: -8px;
  border-top: 9px solid #ffffff;
}
.whatsapp-kop {
  background: var(--blue);
  color: #fff;
  padding: 20px 22px 22px;
  /* De ronde bovenhoeken stonden eerst via overflow:hidden op de kaart, maar
     dat knipte ook het puntje eronder weg. */
  border-radius: 15px 15px 0 0;
}
.whatsapp-kop p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.whatsapp-hallo {
  font-family: var(--font-title);
  font-size: 1.5rem !important;
  font-weight: 800;
  margin-bottom: 8px !important;
}
.whatsapp-sluiten {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-sluiten:hover { background: rgba(255, 255, 255, 0.32); }
.whatsapp-sluiten svg { width: 15px; height: 15px; }
.whatsapp-persoon {
  display: block;
  padding: 20px 22px 24px;
  /* Alleen om het grijze deel een randje; de blauwe kop hoeft er geen, daar
     viel hij op als een lichte lijn tegen de blauwe hero. */
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 16px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.whatsapp-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  /* Randje eromheen, anders is de witte cirkel onzichtbaar op het witte vlak
     en zweeft het logo los in de kaart. */
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 12px;
}
.whatsapp-avatar img { width: 34px; height: 34px; }
.whatsapp-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #25d366;
  border: 2px solid #ffffff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-badge svg { width: 13px; height: 13px; }
.whatsapp-rol { display: block; font-size: 0.9rem; color: var(--muted); }
.whatsapp-naam {
  display: block;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 2px;
}
.whatsapp-actie {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
}
.whatsapp-persoon:hover .whatsapp-actie { background: var(--blue-dark); }
@media (max-width: 640px) {
  .whatsapp-zwevend { right: 16px; bottom: 16px; }
}


/* Een muisklik hoort geen focusring te geven, toetsenbordgebruik wel. Zonder
   dit tekende de browser een dikke rand om de zwevende knoppen zodra je erop
   klikte. De ring helemaal weghalen zou mensen die met Tab navigeren laten
   zoeken waar ze zijn, dus die blijft voor hen bestaan. */
.whatsapp-knop:focus,
.instellingen-knop:focus,
.whatsapp-sluiten:focus,
.whatsapp-persoon:focus { outline: none; }
.whatsapp-knop:focus-visible,
.instellingen-knop:focus-visible,
.whatsapp-sluiten:focus-visible,
.whatsapp-persoon:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 3px;
}

/* ---------- Bouwmodus ---------- */
/* De pagina die bezoekers zien zolang de site nog niet open is. Staat los van
   de rest: geen menu, geen footer, alleen het blauwe doek met de foto. De
   achtergrondkleur is precies de blauwtint die ook in de foto zit, zodat de
   rand van de afbeelding onzichtbaar is. */
.bouwmodus-body {
  background: var(--blue);
  color: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.bouwmodus {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 48px 24px 120px;
}
.bouwmodus-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 24px;
}
/* Het logo is blauw en zou op dit doek wegvallen. Omkeren maakt er wit van
   zonder dat er een tweede logobestand bijgehouden hoeft te worden. */
.bouwmodus-logo {
  width: 260px;
  max-width: 70%;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 28px;
}
.bouwmodus-tekst h1 {
  font-family: var(--font-title);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 0 0 16px;
  color: #fff;
}
.bouwmodus-tekst p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  margin: 0;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.88);
}
.bouwmodus-foto {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Slotje rechtsonder ---------- */
/* Zelfde plek en zelfde vorm als de WhatsApp-knop op de echte site, zodat het
   niet als een vreemd element aanvoelt. */
.bouwmodus-slot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.bouwmodus-knop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px 13px 20px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--blue);
  font-family: var(--font-title);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.bouwmodus-knop:hover { background: #f1f4ff; }
.bouwmodus-knop svg { width: 22px; height: 22px; display: block; }
.bouwmodus-kaart {
  width: 280px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bouwmodus-kaart[hidden] { display: none; }
.bouwmodus-kaart label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.bouwmodus-kaart input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;   /* onder de 16px zoomt Safari op een iPhone in */
  color: var(--ink);
  background: #fff;
}
.bouwmodus-kaart .btn { width: 100%; text-align: center; }
.bouwmodus-fout {
  margin: 0;
  font-size: 13px;
  color: #b3261e;
}
.bouwmodus-fout[hidden] { display: none; }

@media (max-width: 860px) {
  .bouwmodus-inner { grid-template-columns: 1fr; gap: 8px; }
  .bouwmodus { padding: 36px 20px 110px; }
  .bouwmodus-logo { margin-bottom: 20px; }
}
@media (max-width: 640px) {
  .bouwmodus-knop { padding: 13px; gap: 0; }
  .bouwmodus-knop-tekst { display: none; }
}

/* ---------- Formulier op de klantpagina's ---------- */
/* De annuleerpagina en de uitschrijfpagina hebben elk één veld en staan buiten
   .form-grid, waardoor het invulvak eerst de kale opmaak van de browser kreeg:
   een grijs kadertje met een lettertype dat nergens anders op de site voorkomt.
   Dit trekt het gelijk met de rest. */
.klantveld { display: block; margin: 0 0 22px; }
.klantveld-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.klantveld-hulp {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.klantveld textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  /* Alleen in de hoogte, want breder dan de kolom wordt het lelijk. */
  resize: vertical;
  min-height: 112px;
}
.klantveld textarea::placeholder { color: #98a1ab; }
.klantveld textarea:hover { border-color: #b9c0c8; }
.klantveld textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 70, 255, 0.14); }

.klantknoppen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }


/* Prijstabel op de plaatspagina's. Op een telefoon schuift hij zijwaarts in
   plaats van dat de kolommen onleesbaar smal worden. */
.tabel-omhulsel { overflow-x: auto; margin: 18px 0 10px; }
.prijstabel { width: 100%; border-collapse: collapse; min-width: 440px; font-size: 0.95rem; }
.prijstabel th,
.prijstabel td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prijstabel th { font-family: var(--font-title); font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.prijstabel td:last-child { font-weight: 700; color: var(--blue); }
.prijstabel tr:last-child td { border-bottom: 0; }
.prijstabel a { color: var(--blue); }
.klein-grijs { font-size: 0.85rem; color: var(--muted); }