/* CreaEls — style.css */

/* ============================================================
   Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  /* Kleurenpallet */
  --kleur-achtergrond: #e5ddd9;  /* beige — paginaachtergrond */
  --kleur-sectie:      #72817a;  /* groen — achtergrond tekst-secties */
  --kleur-accent:      #8b6d54;  /* lichter bruin — accenten, knoppen */
  --kleur-tekst:       #644232;  /* donkerbruin — tekst en titels */
  --kleur-licht:       #f8f7f4;  /* licht wit — rond foto's en kaarten */

  /* Compatibiliteitsaliassen */
  --kleur-primair:     var(--kleur-accent);
  --kleur-link:        var(--kleur-tekst);
  --kleur-markering:   var(--kleur-sectie);
  --kleur-bevestiging: var(--kleur-licht);
  --kleur-wit:         var(--kleur-licht);

  /* Lettertypes */
  --lettertype-hoofd: 'Playfair Display', serif;
  --lettertype-tekst: 'Lato', sans-serif;
}

/* ============================================================
   CSS Reset & Basisstijlen
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--lettertype-tekst);
  color: var(--kleur-tekst);
  background-color: var(--kleur-achtergrond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Zorg dat main alle beschikbare ruimte opvult zodat footer onderaan blijft */
main {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--kleur-link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--lettertype-hoofd);
  line-height: 1.2;
}

/* ============================================================
   Navigatiebalk (.navbar)
   Grid: logo links | nav gecentreerd
   ============================================================ */

.navbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background-color: var(--kleur-wit);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(44, 31, 20, 0.10);
  gap: 1rem;
}

/* Merk / logo — links */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--kleur-tekst);
  font-family: var(--lettertype-hoofd);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.navbar__brand:hover,
.navbar__brand:focus {
  text-decoration: none;
  color: var(--kleur-link);
}

.navbar__brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--kleur-markering);
}

/* Navigatiemenu — gecentreerd in het midden */
.navbar__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__menu li a {
  display: block;
  color: var(--kleur-tekst);
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.navbar__menu li a:hover,
.navbar__menu li a:focus {
  color: var(--kleur-link);
  border-bottom-color: var(--kleur-link);
  outline: none;
  text-decoration: none;
}

.navbar__menu li a.actief,
.navbar__menu li a[aria-current="page"] {
  color: var(--kleur-link);
  border-bottom-color: var(--kleur-link);
  font-weight: 700;
}

/* Hamburger-knop — verborgen op desktop */
.navbar__toggle {
  display: none;
  background: none;
  border: 2px solid var(--kleur-markering);
  border-radius: 4px;
  color: var(--kleur-link);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.navbar__toggle:hover,
.navbar__toggle:focus {
  background-color: var(--kleur-bevestiging);
  color: var(--kleur-tekst);
  outline: none;
}

/* ============================================================
   Navigatiebalk — Responsief (mobiel ≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  .navbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .navbar__brand {
    grid-column: 1;
    grid-row: 1;
  }

  .navbar__toggle {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }

  /* Menu standaard verborgen */
  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.5rem;
    border-top: 1px solid var(--kleur-markering);
    padding-top: 0.5rem;
    gap: 0;
  }

  /* Menu zichtbaar wanneer open */
  .navbar__menu.is-open {
    display: flex;
  }

  .navbar__menu li a {
    padding: 0.75rem 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--kleur-bevestiging);
    border-left: none;
  }

  .navbar__menu li:last-child a {
    border-bottom: none;
  }
}

/* ============================================================
   Hero-sectie (.hero)
   Compacte slider met kader en navigatiepijlen
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  max-width: 1375px;
  margin: 2rem auto;
  height: 520px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(100, 66, 50, 0.18);
  background-color: var(--kleur-tekst);
}

/* Afzonderlijke slides — gestapeld via absolute positionering */
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Actieve slide is zichtbaar */
.hero__slide.is-actief {
  opacity: 1;
}

/* Donkere overlay met gradient voor leesbaarheid */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(44, 31, 20, 0.15) 0%,
    rgba(44, 31, 20, 0.40) 100%
  );
  text-align: center;
  padding: 2rem;
}

/* Waas-container achter de tekst */
.hero__overlay-tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background-color: rgba(44, 31, 20, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1.25rem 2.5rem;
  border: 1px solid rgba(248, 247, 244, 0.15);
}

/* Logo in de overlay */
.hero__logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--kleur-bevestiging);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Merknaam */
.hero__titel {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--kleur-wit);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Tagline */
.hero__tagline {
  font-family: var(--lettertype-tekst);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  color: var(--kleur-bevestiging);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Navigatiepijlen */
.hero__pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background-color: rgba(248, 247, 244, 0.85);
  color: var(--kleur-tekst);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hero__pijl:hover,
.hero__pijl:focus {
  background-color: var(--kleur-licht);
  transform: translateY(-50%) scale(1.08);
  outline: none;
}

.hero__pijl--vorige {
  left: 1rem;
}

.hero__pijl--volgende {
  right: 1rem;
}

/* Stippen-indicator */
.hero__stippen {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 0.5rem;
}

.hero__stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(248, 247, 244, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s, transform 0.2s;
}

.hero__stip.is-actief {
  background-color: var(--kleur-licht);
  transform: scale(1.3);
}

/* Hero responsief — zie geconsolideerde media queries onderaan */

/* ============================================================
   Galerij-sectie (.galerij-sectie)
   ============================================================ */

.galerij-sectie {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-wit);
}

.galerij-sectie__titel {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--kleur-tekst);
  text-align: center;
  margin-bottom: 0.5rem;
}

.galerij-sectie__ondertitel {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  color: var(--kleur-link);
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}

/* Categorie-filterrij */
.galerij-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.galerij-filter__knop {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  font-family: var(--lettertype-tekst);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  border: 1.5px solid var(--kleur-markering);
  color: var(--kleur-link);
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.galerij-filter__knop:hover,
.galerij-filter__knop:focus {
  background-color: var(--kleur-bevestiging);
  border-color: var(--kleur-link);
  outline: none;
}

.galerij-filter__knop.actief,
.galerij-filter__knop[aria-pressed="true"] {
  background-color: var(--kleur-link);
  color: var(--kleur-wit);
  border-color: var(--kleur-link);
}

/* Masonry-stijl grid */
.galerij-grid {
  columns: 3;
  column-gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Galerij-item */
.galerij-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background-color: var(--kleur-bevestiging);
}

.galerij-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.galerij-item:hover img,
.galerij-item:focus-within img {
  transform: scale(1.04);
}

/* Overlay met naam bij hover */
.galerij-item__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(
    to top,
    rgba(44, 31, 20, 0.75) 0%,
    rgba(44, 31, 20, 0) 100%
  );
  color: var(--kleur-wit);
  font-family: var(--lettertype-tekst);
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.galerij-item:hover .galerij-item__overlay,
.galerij-item:focus-within .galerij-item__overlay {
  opacity: 1;
}

/* Galerij responsief — zie geconsolideerde media queries onderaan */

/* ============================================================
   Lightbox (.lightbox)
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(44, 31, 20, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  animation: lightbox-fade-in 0.3s ease forwards;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__afbeelding {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  display: block;
}

.lightbox__bijschrift {
  margin-top: 1rem;
  color: var(--kleur-bevestiging);
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  text-align: center;
  max-width: 600px;
}

/* Sluitknop rechtsboven */
.lightbox__sluiten {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: var(--kleur-bevestiging);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.25rem;
}

.lightbox__sluiten:hover,
.lightbox__sluiten:focus {
  color: var(--kleur-wit);
  outline: none;
}

/* ============================================================
   Over mij-sectie (.over-mij-sectie)
   ============================================================ */

.over-mij-sectie {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-bevestiging);
}

.over-mij-sectie__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.over-mij-sectie__foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(44, 31, 20, 0.18);
}

.over-mij-sectie__tekst h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--kleur-tekst);
  margin-bottom: 1rem;
}

.over-mij-sectie__tekst p {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--kleur-tekst);
  margin-bottom: 1rem;
}

.over-mij-sectie__tekst p:last-child {
  margin-bottom: 0;
}

/* Over mij responsief — zie geconsolideerde media queries onderaan */

/* ============================================================
   Contact-sectie (.contact-sectie)
   ============================================================ */

.contact-sectie {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-wit);
}

.contact-sectie__inner {
  max-width: 600px;
  margin: 0 auto;
}

.contact-sectie__titel {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--kleur-tekst);
  text-align: center;
  margin-bottom: 0.5rem;
}

.contact-sectie__intro {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  color: var(--kleur-link);
  text-align: center;
  margin-bottom: 2rem;
}

/* Formulier */
.contact-formulier {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-formulier__groep {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-formulier label {
  font-family: var(--lettertype-tekst);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kleur-tekst);
  letter-spacing: 0.03em;
}

.contact-formulier input,
.contact-formulier textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  color: var(--kleur-tekst);
  background-color: var(--kleur-wit);
  border: 1.5px solid var(--kleur-markering);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  resize: vertical;
}

.contact-formulier input:focus,
.contact-formulier textarea:focus {
  border-color: var(--kleur-link);
  box-shadow: 0 0 0 3px rgba(95, 78, 60, 0.15);
}

.contact-formulier textarea {
  min-height: 140px;
}

/* Verzendknop */
.contact-formulier__knop {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--kleur-link);
  color: var(--kleur-wit);
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  align-self: flex-start;
}

.contact-formulier__knop:hover,
.contact-formulier__knop:focus {
  background-color: var(--kleur-achtergrond);
  outline: none;
}

.contact-formulier__knop:active {
  transform: translateY(1px);
}

/* Social links rij onder formulier */
.contact-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--kleur-link);
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--kleur-markering);
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.contact-social a:hover,
.contact-social a:focus {
  background-color: var(--kleur-link);
  color: var(--kleur-wit);
  border-color: var(--kleur-link);
  outline: none;
  text-decoration: none;
}

/* ============================================================
   Footer (.footer)
   ============================================================ */

.footer {
  background-color: #2C1F14;
  color: var(--kleur-bevestiging);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--kleur-bevestiging);
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  border: 1px solid rgba(208, 205, 198, 0.3);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.footer__link:hover,
.footer__link:focus {
  background-color: var(--kleur-achtergrond);
  color: var(--kleur-wit);
  border-color: var(--kleur-achtergrond);
  outline: none;
  text-decoration: none;
}

.footer__link--instagram::before {
  content: "📷";
  font-size: 1rem;
}

.footer__link--facebook::before {
  content: "📘";
  font-size: 1rem;
}

.footer__link--email::before {
  content: "✉️";
  font-size: 1rem;
}

.footer__copyright {
  font-family: var(--lettertype-tekst);
  font-size: 0.8rem;
  color: rgba(208, 205, 198, 0.55);
  margin-top: 0.5rem;
}

/* ============================================================
   Verkooppunten-sectie (.verkooppunten-sectie)
   Herwerkt als CTA-sectie
   ============================================================ */

.verkooppunten-sectie {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-sectie);
  text-align: center;
}

.verkooppunten-sectie__inner {
  max-width: 800px;
  margin: 0 auto;
}

.verkooppunten-sectie__icoon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.verkooppunten-sectie h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--kleur-licht);
  margin-bottom: 1rem;
}

.verkooppunten-sectie__intro {
  font-family: var(--lettertype-tekst);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--kleur-licht);
  margin-bottom: 2rem;
  opacity: 0.92;
}

.verkooppunten-sectie__cta {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background-color: var(--kleur-licht);
  color: var(--kleur-tekst);
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
  margin-bottom: 2.5rem;
}

.verkooppunten-sectie__cta:hover,
.verkooppunten-sectie__cta:focus {
  background-color: var(--kleur-achtergrond);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}

.verkooppunten-sectie__cta:active {
  transform: translateY(0);
}

/* Verkooppunten-lijst (optioneel, indien meerdere punten) */
.verkooppunten-lijst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 700px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.verkooppunt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(248, 247, 244, 0.15);
  border-radius: 999px;
  border: 1px solid rgba(248, 247, 244, 0.3);
}

.verkooppunt strong {
  font-family: var(--lettertype-tekst);
  font-weight: 700;
  color: var(--kleur-licht);
  font-size: 0.9rem;
}

.verkooppunt span {
  font-family: var(--lettertype-tekst);
  font-size: 0.85rem;
  color: rgba(248, 247, 244, 0.75);
}

/* ============================================================
   Verhaal-sectie (.verhaal-sectie)
   ============================================================ */

.verhaal-sectie {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-bevestiging);
}

.verhaal-sectie__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.verhaal-sectie__foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(44, 31, 20, 0.15);
}

.verhaal-sectie__tekst h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--kleur-tekst);
  margin-bottom: 1rem;
}

.verhaal-sectie__tekst p {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--kleur-tekst);
}

/* Verhaal responsief — zie geconsolideerde media queries onderaan */

/* ============================================================
   Aankoopinfo-banner (.aankoopinfo-banner)
   ============================================================ */

.aankoopinfo-banner {
  background-color: var(--kleur-licht);
  border-top: 3px solid var(--kleur-achtergrond);
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.aankoopinfo-banner p {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  color: var(--kleur-tekst);
  line-height: 1.6;
}

.aankoopinfo-banner a {
  color: var(--kleur-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.aankoopinfo-banner a:hover,
.aankoopinfo-banner a:focus {
  color: var(--kleur-achtergrond);
}

/* ============================================================
   Product Grid (.product-grid) — categorie.html compatibiliteit
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Product grid responsief — zie geconsolideerde media queries onderaan */

/* Productkaart */
.product-card {
  background-color: var(--kleur-wit);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(44, 31, 20, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(44, 31, 20, 0.18);
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.product-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.product-card__body h3 {
  font-family: var(--lettertype-hoofd);
  font-size: 1.1rem;
  color: var(--kleur-tekst);
  margin-bottom: 0.4rem;
}

.product-card__body p {
  font-family: var(--lettertype-tekst);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--kleur-tekst);
}

/* ============================================================
   Nieuws-pagina (.nieuws-pagina)
   ============================================================ */

.nieuws-pagina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.nieuws-uitgelicht img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(44, 31, 20, 0.15);
  object-fit: cover;
}

.nieuws-tekst h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--kleur-tekst);
  margin-bottom: 1rem;
}

.nieuws-tekst p {
  font-family: var(--lettertype-tekst);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--kleur-tekst);
}

/* Nieuws responsief — zie geconsolideerde media queries onderaan */

/* ============================================================
   Onderste navigatie (.onderste-nav)
   ============================================================ */

.onderste-nav {
  background-color: var(--kleur-link);
  padding: 0.75rem 1.5rem;
}

.onderste-nav ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.onderste-nav ul li a {
  display: inline-block;
  color: var(--kleur-wit);
  font-family: var(--lettertype-tekst);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
}

.onderste-nav ul li a:hover,
.onderste-nav ul li a:focus {
  background-color: var(--kleur-achtergrond);
  color: var(--kleur-wit);
  outline: none;
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Navbar: iets compacter */
  .navbar {
    padding: 0.65rem 1.25rem;
  }

  /* Galerij: 2 kolommen op tablet */
  .galerij-grid {
    columns: 2;
  }

  /* Twee-koloms layouts iets smaller */
  .verhaal-sectie__inner,
  .over-mij-sectie__inner {
    gap: 2rem;
  }

  .nieuws-pagina {
    gap: 2rem;
    padding: 2.5rem 1.25rem;
  }

  /* Product grid: 2 kolommen blijft, maar minder padding */
  .product-grid {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================================================
   RESPONSIVE — Mobiel & kleine tablet (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* --- Navbar --- */
  .navbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 0.65rem 1rem;
    gap: 0;
  }

  .navbar__brand {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.1rem;
  }

  .navbar__brand img {
    width: 36px;
    height: 36px;
  }

  .navbar__toggle {
    display: block;
    grid-column: 2;
    grid-row: 1;
    /* Groter aanraakdoel */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.5rem;
    border-top: 1px solid var(--kleur-markering);
    padding-top: 0.25rem;
    gap: 0;
  }

  .navbar__menu.is-open {
    display: flex;
  }

  .navbar__menu li a {
    padding: 0.85rem 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--kleur-bevestiging);
    border-left: none;
    /* Groter aanraakdoel */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .navbar__menu li:last-child a {
    border-bottom: none;
  }

  /* --- Hero --- */
  .hero {
    height: 320px;
    margin: 1rem;
    border-radius: 8px;
  }

  .hero__pijl {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* --- Verhaal sectie --- */
  .verhaal-sectie {
    padding: 2.5rem 1rem;
  }

  .verhaal-sectie__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .verhaal-sectie__foto {
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }

  /* --- Over mij --- */
  .over-mij-sectie {
    padding: 2.5rem 1rem;
  }

  .over-mij-sectie__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .over-mij-sectie__foto {
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }

  /* --- Galerij --- */
  .galerij-sectie {
    padding: 2.5rem 1rem;
  }

  .galerij-grid {
    columns: 2;
    column-gap: 0.75rem;
  }

  .galerij-item {
    margin-bottom: 0.75rem;
  }

  /* Overlay altijd zichtbaar op touch (geen hover) */
  .galerij-item__overlay {
    opacity: 1;
  }

  /* --- Nieuws --- */
  .nieuws-pagina {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  /* --- Verkooppunten --- */
  .verkooppunten-sectie {
    padding: 3rem 1rem;
  }

  .verkooppunten-lijst {
    flex-direction: column;
    align-items: center;
  }

  /* --- Contact --- */
  .contact-sectie {
    padding: 2.5rem 1rem;
  }

  .contact-formulier__knop {
    width: 100%;
    text-align: center;
    align-self: stretch;
    /* Groter aanraakdoel */
    min-height: 48px;
  }

  .contact-social {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-social a {
    justify-content: center;
    min-height: 44px;
  }

  /* --- Product grid --- */
  .product-grid {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
  }

  /* --- Footer --- */
  .footer {
    padding: 2rem 1rem;
  }

  .footer__links {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .footer__link {
    min-height: 44px;
    justify-content: center;
    width: 100%;
    max-width: 260px;
  }

  /* --- Lightbox op mobiel --- */
  .lightbox {
    padding: 1rem;
  }

  .lightbox__afbeelding {
    max-width: 95vw;
    max-height: 70vh;
  }

  .lightbox__sluiten {
    top: 0.5rem;
    right: 0.75rem;
    font-size: 2.5rem;
    /* Groter aanraakdoel */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   RESPONSIVE — Kleine telefoon (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* Hero nog iets kleiner */
  .hero {
    height: 260px;
    margin: 0.75rem;
  }

  /* Galerij: 1 kolom op kleine telefoon */
  .galerij-grid {
    columns: 1;
  }

  /* Navbar brand naam kleiner */
  .navbar__brand {
    font-size: 1rem;
  }

  .navbar__brand img {
    width: 32px;
    height: 32px;
  }

  /* Verkooppunt tekst kleiner */
  .verkooppunt span {
    font-size: 0.85rem;
  }

  /* Aankoopinfo banner */
  .aankoopinfo-banner {
    padding: 1rem;
  }

  .aankoopinfo-banner p {
    font-size: 0.9rem;
  }
}

/* ============================================================
   Hulpklassen
   ============================================================ */

/* Verberg element visueel maar houd het toegankelijk */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Gecentreerde sectie-wrapper */
.sectie-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Sectie-titel gecentreerd */
.sectie-titel {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--kleur-tekst);
  text-align: center;
  margin-bottom: 2rem;
}

/* ============================================================
   Verhaal-sectie preview link (.verhaal-sectie__meer)
   ============================================================ */

.verhaal-sectie__meer {
  display: inline-block;
  margin-top: 1rem;
  color: var(--kleur-link);
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 2px solid var(--kleur-link);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.verhaal-sectie__meer:hover,
.verhaal-sectie__meer:focus {
  color: var(--kleur-achtergrond);
  border-color: var(--kleur-achtergrond);
  text-decoration: none;
  outline: none;
}

/* ============================================================
   Formulier-foutmeldingen (.formulier-fout)
   ============================================================ */

.formulier-fout {
  display: block;
  color: #c0392b;
  font-family: var(--lettertype-tekst);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* ============================================================
   Over mij — uitgebreide secties
   ============================================================ */

/* Waarden & missie sectie */
.over-mij-waarden {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-sectie);
}

.over-mij-waarden h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--kleur-licht);
  text-align: center;
  margin-bottom: 1.5rem;
}

.over-mij-waarden p {
  font-family: var(--lettertype-tekst);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--kleur-licht);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Materialen sectie */
.over-mij-materialen {
  padding: 4rem 1.5rem;
  background-color: var(--kleur-licht);
}

.over-mij-materialen h2 {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--kleur-tekst);
  text-align: center;
  margin-bottom: 1.5rem;
}

.over-mij-materialen p {
  font-family: var(--lettertype-tekst);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--kleur-tekst);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Quote blockquote */
.over-mij-quote {
  padding: 4rem 2rem;
  background-color: var(--kleur-achtergrond);
  border-left: 5px solid var(--kleur-accent);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.over-mij-quote p {
  font-family: var(--lettertype-hoofd);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: var(--kleur-tekst);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.over-mij-quote cite {
  font-family: var(--lettertype-tekst);
  font-size: 0.95rem;
  font-style: normal;
  color: var(--kleur-accent);
  letter-spacing: 0.04em;
}

/* Responsief — mobiel (≤ 767px) */
@media (max-width: 767px) {
  .over-mij-waarden,
  .over-mij-materialen {
    padding: 2.5rem 1rem;
  }

  .over-mij-quote {
    padding: 2.5rem 1.25rem;
    margin: 0 1rem;
    border-left-width: 4px;
  }
}

/* ============================================================
   Scroll-animaties (.fade-in-element)
   Intersection Observer — uitgeschakeld bij prefers-reduced-motion
   ============================================================ */

.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-element.is-zichtbaar {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-element {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Terug naar boven-knop (.terug-naar-boven)
   ============================================================ */

.terug-naar-boven {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--kleur-accent);
  color: var(--kleur-licht);
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(100, 66, 50, 0.3);
}

.terug-naar-boven.is-zichtbaar {
  opacity: 1;
  pointer-events: auto;
}

.terug-naar-boven:hover,
.terug-naar-boven:focus {
  background-color: var(--kleur-tekst);
  transform: translateY(-2px);
  outline: none;
}

.terug-naar-boven:active {
  transform: translateY(0);
}