/*
Theme Name: Boulevard Vlaardingen
Theme URI: https://boulevardvlaardingen.nl
Author: Melange Design
Author URI: https://melange-design.nl
Description: Eigen thema voor boulevardvlaardingen.nl, gebouwd op het goedgekeurde ontwerp
  (redesign-2026-09) als vervanger van BeTheme/Elementor. Fundament: header, footer en
  homepage. Volgende fases (archief, bedrijfspagina, blog) volgen op basis van dit thema.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: boulevard-vlaardingen
*/

/* ===========================================================
   Alle regels hieronder komen 1-op-1 uit het goedgekeurde
   ontwerp: homepage.html en categorie-b.html (subheader-stijl).
   Dubbele regels tussen beide bronbestanden zijn samengevoegd.
   =========================================================== */

:root{
  --teal-deep:#012B2E;
  --teal:#0FA3A6;
  --orange:#F26A21;
  --gold:#FFC03A;
  --cream:#F7F4EE;
  --white:#FFFFFF;
  --tekst:#0B2426;
  --lijn:#E4E0D6;
  --radius-l:22px;
  --radius-m:14px;
  font-size:16px;
}
*{box-sizing:border-box;}
/* overflow-x:hidden stond alleen op body. Op iOS Safari (iPad, iPhone)
   is dat niet genoeg om horizontaal swipen van de hele viewport tegen te
   houden: die respecteert overflow-x pas als het OOK op html staat.
   Desktop-browsers verbergen dat verschil, waardoor dit alleen op een
   echt iPad zichtbaar werd. Gevonden 16-9-2026, Jacy. */
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--cream);
  color:var(--tekst);
  font-family:'Poppins', Helvetica, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Sora', Arial, sans-serif;
  color:var(--teal-deep);
  margin:0 0 .5em;
  line-height:1.15;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px;}
/* Secties met een eigen padding-regel (bv. padding:52px 0) zetten de zijruimte van .wrap
   op nul; deze regel met dubbele class wint daarvan en houdt de tekst van de schermrand. */
.wrap.wrap{padding-left:20px;padding-right:20px;}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--teal-deep);color:#fff;
  padding:12px 20px;z-index:999;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
}
.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;
}

/* ============ KOP ============ */
.site-header{
  background:#fff;
  position:sticky;top:0;z-index:80;
  box-shadow:0 2px 10px rgba(1,43,46,.06);
}
.header-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 20px;max-width:1240px;margin:0 auto;
}
.logo-link{flex-shrink:0;display:flex;align-items:center;min-height:44px;}
.logo-link img{height:34px;width:auto;}
@media (max-width:420px){
  .logo-link img{height:24px;}
  .header-row{gap:10px;padding:12px 14px;}
  .zoekbalk{padding:9px 12px;}
}
.zoekbalk{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--cream);border:1px solid var(--lijn);border-radius:999px;
  padding:10px 18px;max-width:520px;margin:0 auto;
  cursor:pointer;
}
.zoekbalk input{
  border:0;background:transparent;flex:1;font-size:.95rem;color:var(--tekst);
  min-width:0;cursor:pointer;
}
.zoekbalk input:focus{outline:none;}
.zoekbalk svg{flex-shrink:0;color:var(--teal-deep);}
.hamburger-btn{
  flex-shrink:0;width:44px;height:44px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal-deep);
}
/* Op verzoek van Jacy (15-9-2026): Home/Over ons/Contact niet langer verstopt in het
   hamburgermenu op desktop. Smal en rechtsboven, de hamburger blijft alleen over voor
   tablet/mobiel waar de categoriebalk ook al verdwijnt (zelfde omslagpunt, 1100px). */
.hoofdmenu-desktop{display:none;}
.hoofdmenu-desktop-lijst{
  list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-shrink:0;
}
.hoofdmenu-desktop-lijst a{
  font-family:'Sora',Arial,sans-serif;font-weight:700;font-size:.82rem;
  color:var(--teal-deep);text-decoration:none;white-space:nowrap;
  padding:8px 2px;min-height:44px;display:flex;align-items:center;
}
.hoofdmenu-desktop-lijst a:hover{color:var(--orange);}
@media (min-width:1101px){
  .hoofdmenu-desktop{display:block;}
  .hamburger-btn{display:none;}
}

/* categorie balk */
.categorie-balk{
  border-top:1px solid var(--lijn);
  background:#fff;
}
.categorie-lijst{
  display:flex;justify-content:center;gap:6px;
  max-width:1240px;margin:0 auto;padding:0 10px;
  list-style:none;
}
/* 900px was te laag: de balk met 7 categorieen heeft zelf ruim 1080px nodig,
   dus tussen 900 en circa 1090px (tabletbreedte, bijv. 1024px) paste hij niet
   en gaf hij horizontale overloop. Gevonden 15-9-2026 bij de pre-livegang-test. */
@media (max-width:1100px){
  .categorie-balk{display:none;}
}
.categorie-item{position:relative;}
.categorie-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;padding:14px 16px;cursor:pointer;
  color:var(--teal-deep);min-height:44px;
  font-family:'Sora',Arial,sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.02em;text-transform:uppercase;text-align:center;white-space:nowrap;
}
.categorie-btn img,.categorie-btn svg{width:26px;height:26px;object-fit:contain;}
.categorie-btn .chev{width:12px;height:12px;margin-top:2px;transition:transform .18s;}
.categorie-item.open .categorie-btn,
.categorie-item:hover .categorie-btn,
.categorie-item:focus-within .categorie-btn{color:var(--orange);}
.categorie-item.open .chev,
.categorie-item:hover .chev,
.categorie-item:focus-within .chev{transform:rotate(180deg);}
/* actieve categorie in de balk (categorie-b.html) */
.categorie-item.actief .categorie-btn{
  color:var(--orange);
  box-shadow:inset 0 -3px 0 0 var(--orange);
}

.flyout{
  position:absolute;top:100%;left:0;
  width:min(720px,90vw);
  background:#fff;border-radius:0 0 var(--radius-m) var(--radius-m);
  box-shadow:0 24px 40px rgba(1,43,46,.18);
  display:none;
  overflow:visible;
  z-index:60;
}
.categorie-item:hover .flyout,
.categorie-item:focus-within .flyout,
.categorie-item.open .flyout{display:flex;}
.flyout-lijst{
  list-style:none;margin:0;padding:10px 0;width:280px;flex-shrink:0;
  border-right:1px solid var(--lijn);
}
.flyout-lijst li{border-bottom:1px solid var(--lijn);}
.flyout-lijst li:last-child{border-bottom:0;}
.flyout-lijst a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;font-size:.82rem;font-weight:600;letter-spacing:.01em;
  color:var(--teal-deep);text-decoration:none;min-height:44px;
}
.flyout-lijst a:hover{color:var(--orange);}
.flyout-lijst a svg{width:14px;height:14px;flex-shrink:0;opacity:.5;}
.flyout-content{
  flex:1;background:#EEECE4;border-radius:0 0 var(--radius-m) 0;
  padding:26px 26px 26px;position:relative;overflow:visible;min-height:210px;
}
.flyout-content h3{font-size:1.1rem;margin-bottom:.4em;}
.flyout-content p{font-size:.85rem;max-width:none;color:#33504f;margin:0;}
/* Verplaatst 16-9-2026: de categorie-afbeelding overlapte altijd de
   verhaaltekst en de knop (bevestigd voor alle 7 categorieen, niet alleen
   Onderhoud & Reparatie, waar Jacy hem het eerst zag). Een eerste poging om
   hem los in de witte flyout-lijst-kolom te zetten liep alsnog vast bij
   categorieen met veel winkels (bijv. Wonen & Slapen, 9 items): dan is de
   kolom zelf al zo lang dat de absoluut gepositioneerde afbeelding over het
   laatste winkelitem heen viel. Nu in de normale flow, na de knop, zodat
   .flyout-content vanzelf meegroeit en er nooit overlap kan ontstaan. */
.flyout-beeld{
  display:block;margin:16px auto 0;width:120px;max-width:100%;
  filter:drop-shadow(0 10px 14px rgba(1,43,46,.18));
}
/* De knop moet zichtbaar over de afbeelding heen liggen (niet erdoor
   afgesneden worden zoals voorheen: de afbeelding is position:absolute en
   staat later in de DOM, dus zonder z-index tekende hij bovenop de knop).
   Ook de verhaaltekst mocht van Jacy een stuk breder, was hardcoded op
   max-width:230px terwijl er in het kader veel meer ruimte is. 15-9-2026. */
.flyout-knop{position:relative;z-index:2;margin-top:20px;padding:20px 26px;}
/* geen kinderen: eenvoudige lijst zonder tweede kolom */
.flyout.flyout-simpel{width:280px;}
.flyout.flyout-simpel .flyout-lijst{border-right:0;width:280px;}

/* mobiel menu */
.mobiel-menu{
  position:fixed;inset:0;background:var(--teal-deep);color:#fff;
  z-index:120;display:none;flex-direction:column;overflow-y:auto;
}
.mobiel-menu.open{display:flex;}
.mobiel-menu-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.15);
}
.mobiel-menu-top img{height:28px;width:auto;}
.mobiel-menu-close{
  width:44px;height:44px;border:0;background:transparent;color:#fff;cursor:pointer;
}
.mobiel-zoek{
  margin:16px 20px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.1);border-radius:999px;padding:10px 16px;
}
.mobiel-zoek input{background:transparent;border:0;color:#fff;flex:1;font-size:.95rem;}
.mobiel-zoek input::placeholder{color:rgba(255,255,255,.7);}
.mobiel-zoek svg{color:#fff;}
.mobiel-zoek-verzend{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:0;background:transparent;padding:0;margin:0;cursor:pointer;
}
.mobiel-accordeon{padding:0 10px 30px;}
/* Home/Over ons/Contact (hoofdmenu) netjes als onderdeel van hetzelfde menu tonen,
   zelfde stijl als de categorie-accordeonknoppen eronder. Gevonden 14-9-2026. */
.mobiel-hoofdmenu-lijst{list-style:none;margin:0 0 8px;padding:0;}
.mobiel-hoofdmenu-lijst li{border-bottom:1px solid rgba(255,255,255,.15);}
.mobiel-hoofdmenu-lijst a{
  display:flex;align-items:center;min-height:44px;padding:16px 10px;
  font-family:'Sora',Arial,sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.01em;color:#fff;text-decoration:none;
}
.mobiel-hoofdmenu-lijst a:hover{color:var(--gold);}
.mobiel-acc-item{border-bottom:1px solid rgba(255,255,255,.15);}
.mobiel-acc-btn{
  width:100%;background:none;border:0;color:#fff;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 10px;font-family:'Sora',Arial,sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.01em;cursor:pointer;min-height:44px;
}
.mobiel-acc-btn img,.mobiel-acc-btn svg{width:22px;height:22px;flex-shrink:0;filter:brightness(0) invert(1);}
.mobiel-acc-btn .lbl{flex:1;display:flex;align-items:center;gap:12px;}
.mobiel-acc-btn .chev{transition:transform .18s;flex-shrink:0;}
.mobiel-acc-item.open .chev{transform:rotate(180deg);}
.mobiel-acc-panel{display:none;padding:0 10px 16px 54px;}
.mobiel-acc-item.open .mobiel-acc-panel{display:block;}
.mobiel-acc-panel a{
  display:block;padding:10px 0;font-size:.86rem;color:rgba(255,255,255,.88);
  text-decoration:none;min-height:44px;display:flex;align-items:center;
}
.mobiel-acc-panel a:hover{color:var(--gold);}
.mobiel-acc-panel a.mobiel-acc-hoofdlink{font-weight:700;color:#fff;}

/* ============ HERO ============ */
.hero{position:relative;background:var(--teal-deep);}
/* Geen overflow:hidden meer op .hero zelf: de video-wrap knipt zichzelf al af,
   en .hero-kaart eindigt exact op de onderrand van .hero, waardoor de
   hero-cutout-flip (die daar met een negatieve bottom overheen hangt) zijn
   onderkant kwijtraakte: de wielen van de auto en een poot van de fauteuil
   werden afgesneden. Gevonden 14-9-2026, zie DOSSIER.md. */
/* Beeldverhouding dicht bij de echte video (1280x466, ong. 2,75:1) i.p.v.
   16/10: bij die eerdere waarde overschreef max-height:640px op brede
   schermen de aspect-ratio (bij 1600px breed zou 16/10 een hoogte van
   1000px geven, dus de browser knipte terug naar 640px), waardoor de
   video zwaar werd uitvergroot (rond de 1,37x) om die hoogte te vullen.
   Dat gaf het "ingezoomde" gevoel dat Jacy meldde: veel van de boven- en
   onderkant van de beelden voelde weg. Met de echte verhouding en een
   ruimere max-height wordt de video nog maar heel licht uitvergroot.
   15-9-2026. */
.hero-video-wrap{position:relative;width:100%;aspect-ratio:1280/466;overflow:hidden;}
@media (min-width:1920px){
  /* Boven ong. 1920px breed capt dit de hoogte, anders wordt de hero op een heel breed scherm onnodig hoog. Bij deze breedte is de crop minimaal. */
  .hero-video-wrap{max-height:820px;}
}
@media (max-width:640px){
  /* Mobiele video (640x426, ong. 1,5:1) krijgt om dezelfde reden zijn
     eigen, dichterbij liggende verhouding. */
  .hero-video-wrap{aspect-ratio:640/426;max-height:360px;}
}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;}
.hero-carrousel{position:relative;width:100%;height:100%;}
.hero-carrousel-beeld{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-carrousel-beeld.actief{opacity:1;}
/* Video en carrousel staan allebei altijd in de HTML (cache-onafhankelijk,
   zie front-page.php); CSS kiest welke zichtbaar is per breedte. */
.hero-video-wrap video{display:none;}
@media (min-width:641px){
  .hero-carrousel{display:none;}
  .hero-video-wrap video{display:block;}
}
.hero-onder{
  position:relative;max-width:1240px;margin:0 auto;padding:0 20px;
}
.hero-kaart{
  background:#fff;border-radius:var(--radius-l);
  padding:28px 26px 24px;
  margin:-70px auto 0;
  max-width:640px;
  box-shadow:0 20px 40px rgba(1,43,46,.18);
  position:relative;z-index:6;
}
@media (min-width:701px){
  .hero-kaart{margin:-90px 0 0;padding:34px 40px 30px;}
}
/* Beeldmerk op verzoek van Jacy verplaatst: niet meer los linksboven over de video, maar
   op de rechterbovenhoek van het witte kaartje, een stukje over de hoek heen. Gevonden
   14-9-2026. */
.hero-kaart .hero-merk{
  position:absolute;top:-18px;right:-14px;width:64px;height:auto;z-index:8;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@media (min-width:701px){.hero-kaart .hero-merk{width:84px;height:auto;top:-24px;right:-20px;}}
.hero-kaart .bovennaam{
  font-family:'Sora',Arial,sans-serif;font-weight:800;letter-spacing:.02em;
  font-size:clamp(1.5rem,4.4vw,2.1rem);color:var(--teal-deep);margin-bottom:.1em;
}
.hero-kaart .slagzin{
  font-family:'Sora',Arial,sans-serif;font-weight:700;color:var(--orange);
  font-size:clamp(1.2rem,3.6vw,1.6rem);margin-bottom:.5em;
}
.hero-kaart p.intro{font-size:.92rem;color:#33504f;margin:0;}
/* Op mobiel stond de auto/fauteuil-flip helemaal uit (display:none), wat
   onder het witte kaartje een kaal donker vlak van .hero achterliet, vlak
   boven de al even donkere .strook-open. Jacy wilde die twee dingen
   tegelijk oplossen: de auto/stoel daar juist tonen (klein, binnen de
   viewport) en het kale donkere vlak zo laten verdwijnen. 16-9-2026. */
.hero-cutout-flip{
  display:block;position:absolute;left:50%;bottom:-115px;width:150px;z-index:7;
  transform:translateX(-15%);
  perspective:1000px;
  filter:drop-shadow(0 14px 16px rgba(1,43,46,.3));
}
@media (min-width:520px){.hero-cutout-flip{width:190px;bottom:-145px;}}
@media (min-width:901px){
  .hero-cutout-flip{
    left:auto;right:-10px;bottom:-64px;width:420px;
    transform:none;
    perspective:1400px;
    filter:drop-shadow(0 20px 22px rgba(1,43,46,.3));
  }
}
.hero-cutout-vlak{
  position:relative;width:100%;aspect-ratio:1/1;transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.5,0,.25,1);
}
.hero-cutout-vlak.gedraaid{transform:rotateY(180deg);}
.hero-cutout-zijde{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;align-items:flex-end;justify-content:center;
}
.hero-cutout-zijde img{width:100%;height:100%;object-fit:contain;object-position:bottom;}
.hero-cutout-zijde.voor img{transform:scale(1.1) translateY(-4%);transform-origin:center bottom;}
.hero-cutout-zijde.achter{transform:rotateY(180deg);}

/* ============ VANDAAG OPEN STROOK ============ */
/* margin-top stond op 26px op mobiel; dat liet de crème body-achtergrond
   zichtbaar als een witte/lichte rand tussen de hero en deze strook, vooral
   nu de auto/stoel-animatie verder naar beneden steekt. Op 0 gezet zodat de
   strook direct aansluit, net als al gebeurde vanaf 901px. Gevonden 17-9-2026. */
.strook-open{
  background:var(--teal-deep);color:#fff;padding:30px 0 34px;margin-top:0;
}
.strook-grid{
  display:grid;gap:22px;
  grid-template-columns:1fr;
}
@media (min-width:800px){
  .strook-grid{grid-template-columns:1.1fr 1fr .9fr;align-items:stretch;}
}
.strook-blok{
  background:rgba(255,255,255,.06);border-radius:var(--radius-m);
  padding:20px 22px;
}
.strook-blok h2{color:#fff;font-size:1.05rem;margin-bottom:.3em;}
.strook-status{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.strook-status .getal{
  font-family:'Sora',Arial,sans-serif;font-weight:800;color:var(--gold);
  font-size:2.4rem;line-height:1;
}
.strook-status .van{font-size:.95rem;color:rgba(255,255,255,.85);}
.strook-blok p{font-size:.86rem;color:rgba(255,255,255,.85);margin:.6em 0 0;}
.strook-blok .dag{color:var(--teal);font-weight:600;}
.strook-uitzondering{
  margin-top:10px;font-size:.78rem;background:rgba(255,255,255,.08);
  border-left:3px solid var(--gold);padding:8px 12px;border-radius:6px;
  color:rgba(255,255,255,.9);
}
.strook-route{display:flex;flex-direction:column;gap:10px;}
.strook-route .adres{font-size:.9rem;display:flex;align-items:flex-start;gap:8px;}
.strook-route .parkeren{
  display:inline-flex;align-items:center;gap:8px;background:rgba(15,163,166,.25);
  color:#fff;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;
  width:fit-content;
}
.knop-route{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--orange);color:#fff;text-decoration:none;font-weight:700;
  padding:12px 18px;border-radius:999px;font-size:.86rem;min-height:44px;
}
.knop-route:hover{background:#d85a15;}

/* ============ KNOPPEN ALGEMEEN ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;font-weight:700;font-size:.88rem;
  text-decoration:none;min-height:44px;border:0;cursor:pointer;
}
.btn-geel{background:var(--gold);color:var(--teal-deep);}
.btn-geel:hover{background:#ffb300;}
.btn-outline{background:transparent;color:var(--teal-deep);border:2px solid var(--teal-deep);}
.btn-outline:hover{background:var(--teal-deep);color:#fff;}

/* ============ SFEERTEGELS ============ */
.sfeer-sectie{padding:52px 0 12px;}
.sfeer-sectie h2{text-align:center;font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:.2em;}
.sfeer-sectie .sub{text-align:center;color:#33504f;max-width:560px;margin:0 auto 30px;font-size:.95rem;}
.sfeer-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media (min-width:1000px){.sfeer-grid{grid-template-columns:repeat(4,1fr);}}
.sfeer-tegel{
  position:relative;border-radius:var(--radius-m);overflow:hidden;
  aspect-ratio:3/4;background:var(--teal-deep);
  display:block;text-decoration:none;
}
.sfeer-tegel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.sfeer-tegel.contain img{object-fit:contain;padding:14%;}
.sfeer-tegel.tint-a{background:linear-gradient(160deg,#013b3e,#0FA3A6);}
.sfeer-tegel.tint-b{background:linear-gradient(160deg,#7a3a12,#F26A21);}
.sfeer-tegel.tint-c{background:linear-gradient(160deg,#8a6100,#FFC03A);}
.sfeer-tegel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(1,20,22,.86) 0%, rgba(1,20,22,.15) 55%, rgba(1,20,22,0) 75%);
}
.sfeer-tekst{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;}
.sfeer-tekst .boven{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.85);display:block;margin-bottom:2px;}
.sfeer-tekst .naam{
  font-family:'Sora',Arial,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(.95rem,2.4vw,1.25rem);line-height:1.12;display:block;
}
.sfeer-tekst .streep{display:block;width:34px;height:4px;background:var(--gold);margin-top:8px;border-radius:2px;}

/* ============ OVER ONS / TELLERS ============ */
.over-ons{background:var(--teal-deep);color:#fff;padding:60px 0;margin-top:50px;}
.over-ons-grid{display:grid;gap:34px;align-items:center;}
@media (min-width:860px){.over-ons-grid{grid-template-columns:1.15fr .85fr;}}
.over-ons h2{color:#fff;font-size:clamp(1.3rem,3vw,1.7rem);}
.over-ons p{color:rgba(255,255,255,.85);font-size:.92rem;max-width:560px;}
.over-ons-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;}
.over-ons-links a.tekstlink{color:var(--gold);font-weight:700;text-decoration:none;font-size:.9rem;}
.kaart-visueel{
  background:#fff;border-radius:var(--radius-l);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.kaart-visueel .badge{
  position:absolute;background:var(--teal-deep);color:#fff;border-radius:16px;
  padding:16px 22px;text-align:center;box-shadow:0 14px 26px rgba(0,0,0,.25);
}
.kaart-visueel .badge .n{font-family:'Sora',Arial,sans-serif;font-weight:800;color:var(--gold);font-size:1.8rem;display:block;}
.kaart-visueel .badge .l{font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;}
.tellers{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:32px;
}
@media (min-width:640px){.tellers{grid-template-columns:repeat(4,1fr);}}
.teller{text-align:center;}
/* Lijnpictogrammen in de stijl van de merkgids: pand, bank, auto en ster. */
.teller .icoon{display:block;width:38px;height:28px;margin:0 auto 10px;color:var(--gold);}
.teller .icoon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.teller .n{
  font-family:'Sora',Arial,sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.8rem,4vw,2.6rem);display:block;
}
.teller .l{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.75);}

/* ============ LOGO CAROUSEL ============ */
.logos-sectie{padding:44px 0;overflow:hidden;background:#fff;}
.logos-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);}
.logos-track{display:flex;gap:40px;width:max-content;animation:scrollen 46s linear infinite;align-items:center;}
.logos-track a{display:inline-flex;align-items:center;height:44px;}
.logos-track img{height:44px;width:auto;filter:grayscale(1);opacity:.75;object-fit:contain;transition:filter .2s,opacity .2s;}
.logos-track a:hover img,.logos-track a:focus-visible img{filter:grayscale(0);opacity:1;}
@keyframes scrollen{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.logos-track{animation:none;overflow-x:auto;}}

/* ============ AANBIEDINGEN ============ */
.aanbiedingen{padding:50px 0;}
.aanbiedingen-label{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px;
}
.badge-voorbeeld{
  background:var(--gold);color:var(--teal-deep);font-weight:800;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:999px;
}
.aanbiedingen p.uitleg{font-size:.88rem;color:#33504f;max-width:620px;margin:6px 0 28px;}
/* Altijd 1 rij, nooit wrappen, net als de sfeerfoto's: bij weinig
   aanbiedingen blijft de rij kort, bij veel wordt hij horizontaal
   scrollbaar/swipebaar. Geldt voor zowel de homepage (altijd 3 items) als
   de bedrijfspagina (wisselend aantal). 15-9-2026 op verzoek van Jacy. */
.aanbiedingen-grid{
  display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;
}
.aanbiedingen-grid::-webkit-scrollbar{display:none;}
.aanbiedingen-grid .aanbieding-kaart{flex:0 0 280px;width:280px;scroll-snap-align:start;}
@media (max-width:640px){
  .aanbiedingen-grid .aanbieding-kaart{flex:0 0 82%;width:82%;}
}
.aanbiedingen-cta{text-align:center;margin-top:18px;}
.aanbieding-kaart{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.aanbieding-kaart .aanbieding-foto{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--cream);
}
.aanbieding-kaart .aanbieding-inner{
  padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;
}
.aanbieding-kaart .winkel{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);
}
.aanbieding-kaart h3{font-size:1.05rem;margin:0;}
.aanbieding-kaart .omschrijving{font-size:.86rem;color:#33504f;flex:1;}
/* Prijzen gestapeld i.p.v. naast elkaar, 16-9-2026 op verzoek van Jacy: nam
   bij een hoge van-prijs (bijv. een auto) te veel breedte in, en liet de
   kaart daardoor niet smaller maken voor een vierde tegel per rij. */
.prijs-rij{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:6px;}
.prijs-oud{text-decoration:line-through;color:#8a8a8a;font-size:.82rem;}
.prijs-nieuw{font-family:'Sora',Arial,sans-serif;font-weight:800;color:#DC5050;font-size:1.4rem;}
.geldig{font-size:.75rem;color:#607d7c;}
.aanbieding-kaart .btn{align-self:flex-start;margin-top:8px;}
.mini-voorbeeld{
  position:absolute;top:16px;right:16px;font-size:.65rem;font-weight:700;
  color:#8a6d00;background:#FFF3CE;padding:3px 9px;border-radius:999px;
}

/* ============ BLOG ============ */
.blog-sectie{padding:50px 0;background:#fff;}
.blog-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:760px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-kaart{border-radius:var(--radius-m);overflow:hidden;background:var(--cream);border:1px solid var(--lijn);}
/* height:auto expliciet nodig, anders wint het HTML height-attribuut van
   the_post_thumbnail() (bijv. height="480") het van aspect-ratio, en werd
   elke kaart een andere hoogte/verhouding afhankelijk van de brondimensies
   van die ene afbeelding. Gevonden 16-9-2026, Jacy: "op pagina 2 andere
   verhoudingen dan op pagina 1". */
.blog-kaart img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
/* Zoekresultaat/blogkaart zonder uitgelichte afbeelding (bijv. een gewone
   pagina als Wonen & Slapen in de zoekresultaten): een lege kaart voelde
   voor Jacy aan als kapot, dus een rustig vlak met het beeldmerk i.p.v.
   niets. 16-9-2026. */
.blog-kaart-geen-foto{
  display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;
  background:var(--cream,#EEECE4);
}
.blog-kaart-geen-foto img{width:auto;max-width:45%;height:auto;max-height:56px;aspect-ratio:auto;opacity:.55;object-fit:contain;}
.blog-kaart .inhoud{padding:18px 18px 22px;}
.blog-kaart h3{font-size:1rem;margin-bottom:.4em;}
.blog-kaart p{font-size:.85rem;color:#33504f;}
.blog-cta{text-align:center;margin-top:8px;}
/* een blogkaart die naar het artikel linkt (categorie-b.html) */
.blog-sectie .blog-kaart{display:block;text-decoration:none;color:inherit;}

/* ============ REVIEWS ============ */
/* Basisvariant (lichte achtergrond, categorie-b.html), gebruikt overal waar geen
   .reviews-sectie-context geldt. De donkere variant hieronder overschrijft dit op
   de homepage-reviewsectie via een specifiekere selector. */
.sterren{position:relative;height:18px;width:96px;margin:0 auto 6px;}
.sterren .laag{position:absolute;inset:0;display:flex;gap:2px;color:#d8d2c2;}
.sterren .hoog{position:absolute;inset:0;display:flex;gap:2px;color:var(--gold);overflow:hidden;}
.sterren svg{width:16px;height:16px;flex-shrink:0;}

.reviews-sectie{background:var(--teal-deep);color:#fff;padding:56px 0;}
.reviews-sectie h2{color:#fff;text-align:center;font-size:clamp(1.4rem,3.2vw,1.9rem);}
.reviews-sub{text-align:center;color:rgba(255,255,255,.8);font-size:.9rem;max-width:600px;margin:8px auto 34px;}
.reviews-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
@media (min-width:700px){.reviews-grid{grid-template-columns:repeat(3,1fr);}}
.review-kaart{
  background:rgba(255,255,255,.07);border-radius:var(--radius-m);
  padding:18px;text-align:center;
}
.review-kaart .naam{font-weight:700;font-size:.88rem;margin-bottom:6px;}
/* Donkere achtergrond: sterren-onderlaag lichter, zichtbaar tegen teal-deep. */
.reviews-sectie .sterren .laag{color:rgba(255,255,255,.25);}
.review-kaart .cijfer{font-size:.78rem;color:rgba(255,255,255,.75);}
.reviews-cta{text-align:center;margin-top:30px;}

/* ============ NIEUWSBRIEF ============ */
.nieuwsbrief{background:var(--gold);padding:44px 0;}
.nieuwsbrief-inner{text-align:center;max-width:520px;margin:0 auto;}
.nieuwsbrief h2{font-size:1.3rem;margin-bottom:.3em;}
.nieuwsbrief p{font-size:.88rem;color:#4a3a00;margin-bottom:18px;}
.nieuwsbrief-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.nieuwsbrief-form input[type=email]{
  flex:1;min-width:200px;padding:13px 18px;border-radius:999px;border:1px solid #d9a900;
  font-size:.9rem;min-height:44px;
}
.nieuwsbrief-form button{background:var(--teal-deep);color:#fff;}
.nieuwsbrief-melding{margin-top:12px;font-size:.86rem;font-weight:600;color:var(--teal-deep);display:none;}
.nieuwsbrief-melding.zichtbaar{display:block;}

/* ============ FOOTER ============ */
footer{background:var(--teal-deep);color:rgba(255,255,255,.85);padding:50px 0 26px;}
.footer-grid{display:grid;gap:30px;grid-template-columns:1fr;}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-logo img{height:30px;width:auto;margin-bottom:12px;filter:brightness(0) invert(1);}
footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:9px;font-size:.86rem;}
footer a{text-decoration:none;color:rgba(255,255,255,.85);}
footer a:hover{color:var(--gold);}
.footer-adres p{font-size:.86rem;margin:0 0 8px;}
.footer-onder{
  border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;
  font-size:.78rem;color:rgba(255,255,255,.6);text-align:center;
}

/* ============ ZOEKVENSTER ============ */
.zoek-knop{
  flex-shrink:0;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:none;align-items:center;justify-content:center;color:var(--teal-deep);
}
@media (max-width:760px){
  .zoekbalk{display:none;}
  .zoek-knop{display:flex;}
}
.zoek-overlay{
  position:fixed;inset:0;z-index:200;display:none;padding:0 18px;overflow-y:auto;
  background:rgba(1,20,22,.74);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.zoek-overlay.open{display:block;}
.zoek-venster{
  position:relative;background:#fff;border-radius:24px;max-width:660px;
  margin:12vh auto 40px;padding:28px 28px 30px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
@media (max-width:760px){
  .zoek-venster{margin:7vh auto 30px;padding:20px 18px 24px;border-radius:20px;}
}
.zoek-sluit{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--cream);color:var(--teal-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.zoek-sluit:hover{background:#ece7dc;}
.zoek-veld{
  display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--teal-deep);
  padding:4px 0 14px;margin:4px 52px 24px 0;
}
.zoek-veld svg{flex-shrink:0;color:var(--teal);}
/* Het zoekicoon is nu ook de submit-knop (16-9-2026), zodat Enter in het veld
   betrouwbaar het zoekformulier verzendt: een form zonder enig submit-control
   submit niet in elke browser via Enter. Reset de knop-standaardstijl. */
.zoek-veld-verzend{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:0;background:transparent;padding:0;margin:0;cursor:pointer;color:var(--teal);
}
.zoek-veld input{
  border:0;background:transparent;flex:1;min-width:0;font-family:inherit;
  font-size:1.12rem;color:var(--tekst);
}
.zoek-veld input:focus{outline:none;}
.zoek-kop{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#607d7c;margin:0 0 12px;
}
.zoek-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px;}
.zoek-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  background:var(--cream);border:1px solid var(--lijn);color:var(--teal-deep);
  text-decoration:none;font-size:.86rem;font-weight:600;
}
.zoek-chip:hover{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);}
.zoek-lijst{list-style:none;margin:0;padding:0;}
.zoek-lijst li + li{border-top:1px solid var(--lijn);}
.zoek-lijst a{
  display:flex;align-items:center;gap:12px;min-height:52px;text-decoration:none;
  color:var(--teal-deep);font-size:.92rem;font-weight:500;
}
.zoek-lijst a:hover{color:var(--orange);}
.zoek-lijst .rond{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.zoek-lijst .pijl{margin-left:auto;color:var(--teal);}
.zoek-hint{margin:24px 0 0;font-size:.78rem;color:#8a96a5;}
@media (max-width:760px){
  .zoek-venster{margin-top:5vh;}
  .zoek-veld{margin-bottom:20px;padding-bottom:12px;}
  .zoek-veld input{font-size:1rem;}
  .zoek-chips{gap:8px;margin-bottom:20px;}
  .zoek-chip{padding:0 14px;font-size:.82rem;}
  .zoek-lijst a{min-height:48px;font-size:.88rem;}
  .zoek-hint{margin-top:18px;}
}
/* Zonder de zoekbalk mist de kop op mobiel zijn rekruimte, dus schuiven het
   zoekknopje en de hamburger naar de rechterkant. */
@media (max-width:760px){
  .zoek-knop{margin-left:auto;}
}

/* ===========================================================
   CATEGORIEPAGINA (categorie-b.html), voor een latere fase van
   het bouwplan (archive-bedrijven.php). Alvast meegenomen zodat
   style.css de complete goedgekeurde CSS bevat, ontdubbeld.
   =========================================================== */

/* ---- Subheader-banner: DIT is de goedgekeurde stijl (diagonale
   strepen op diep teal). Gebruik deze overal waar een subheader
   nodig is, nooit de oude variant uit categorie.html. ---- */
.cat-banner{position:relative;background:var(--teal-deep);padding:52px 0 48px;overflow:hidden;}
.cat-strepen{
  position:absolute;top:-40%;bottom:-40%;right:-46px;width:300px;
  display:flex;gap:16px;transform:skewX(-18deg);pointer-events:none;
}
.cat-strepen span{border-radius:5px;}
.cat-strepen .baan-teal{flex:1.5;background:var(--teal);}
.cat-strepen .baan-oranje{flex:1;background:var(--orange);}
.cat-strepen .baan-goud{flex:.85;background:var(--gold);}
@media (max-width:760px){
  .cat-strepen{width:92px;right:-24px;gap:8px;top:-15%;bottom:-15%;}
  .cat-banner .cat-banner-inner.wrap{padding-right:104px;}
}
.cat-banner-inner{position:relative;z-index:1;}
.kruimelpad{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:14px;}
.kruimelpad a{color:#fff;text-decoration:underline;}
.kruimelpad a:hover,.kruimelpad a:focus-visible{color:var(--gold);}
.cat-banner h1{color:#fff;font-size:clamp(2rem,5vw,2.8rem);margin:0;}
.cat-banner .accent{display:block;width:56px;height:4px;background:var(--orange);border-radius:2px;margin-top:16px;}

/* ---- Intro ---- */
.cat-intro{padding:46px 0 6px;}
.cat-intro h2{font-size:clamp(1.4rem,3vw,1.9rem);}
.cat-intro h3{font-size:clamp(1.15rem,2.4vw,1.4rem);margin-top:1.1em;}
.cat-intro p{font-size:.95rem;color:#33504f;max-width:780px;}
.winkel-navlijst{font-size:.88rem;color:#33504f;max-width:780px;margin-top:1.2em;}
.winkel-navlijst a{color:var(--teal);font-weight:600;text-decoration:underline;}
.winkel-navlijst a:hover,.winkel-navlijst a:focus-visible{color:var(--orange);}

/* ---- Filters en winkelkaarten ---- */
.cat-winkels{padding:34px 0 14px;}
.filter-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px;}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  background:#fff;border:2px solid var(--lijn);color:var(--teal-deep);
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:.82rem;
  cursor:pointer;min-height:44px;
}
.chip.actief{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.chip:hover{border-color:var(--teal-deep);}
.winkel-teller{font-size:.86rem;font-weight:600;color:#33504f;margin:0;}

.winkel-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:640px){.winkel-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.winkel-grid{grid-template-columns:repeat(3,1fr);}}
.winkel-kaart{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  scroll-margin-top:110px;
}
.winkel-kaart.kaart-actief{box-shadow:0 16px 32px rgba(1,43,46,.22);transform:translateY(-2px);border-color:var(--orange);}
.winkel-foto-wrap{position:relative;aspect-ratio:4/3;background:var(--teal-deep);}
.winkel-foto-wrap img{width:100%;height:100%;object-fit:cover;}
.winkel-logo-badge{
  position:absolute;right:14px;bottom:-18px;width:56px;height:56px;border-radius:50%;
  background:#fff;box-shadow:0 8px 16px rgba(1,43,46,.25);display:flex;align-items:center;justify-content:center;padding:6px;
}
.winkel-logo-badge img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.winkel-inhoud{padding:28px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.winkel-inhoud h3{font-size:1.05rem;margin:0;}
.winkel-inhoud .omschrijving{font-size:.85rem;color:#33504f;margin:0;flex:1;}
.winkel-adres{font-size:.8rem;color:#33504f;margin:0;display:flex;align-items:flex-start;gap:6px;}
.winkel-telefoon{font-size:.8rem;margin:0;}
.winkel-telefoon a{color:var(--teal-deep);text-decoration:underline;}
.winkel-status{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;margin:2px 0 0;}
.winkel-status .bol{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#9aa6a5;}
.winkel-status.open{color:#1f7a37;}
.winkel-status.open .bol{background:#2FA84F;}
.winkel-status.dicht{color:#607d7c;}
.winkel-rating{display:flex;align-items:center;gap:8px;margin-top:2px;}
.winkel-rating .cijfer{font-size:.78rem;color:#607d7c;}
.winkel-kaart .btn{margin-top:8px;align-self:flex-start;}
.voetnoot-zondag{font-size:.78rem;color:#607d7c;margin-top:20px;}

/* ---- Plattegrond ---- */
.cat-plattegrond{padding:52px 0;}
.cat-plattegrond h2{text-align:center;margin-bottom:26px;}
.plattegrond-layout{display:grid;gap:26px;grid-template-columns:1fr;align-items:start;}
@media (min-width:820px){.plattegrond-layout{grid-template-columns:1.6fr 1fr;}}
.plattegrond-svg-wrap{background:var(--teal-deep);border-radius:var(--radius-l);padding:18px;}
.plattegrond-svg-wrap svg{width:100%;height:auto;display:block;}
.plattegrond-onderschrift{color:rgba(255,255,255,.7);font-size:.76rem;text-align:center;margin:10px 0 0;}
.pin{outline:none;cursor:pointer;}
.pin-cirkel{fill:var(--orange);stroke:#fff;stroke-width:2;transition:fill .15s;}
.pin:hover .pin-cirkel,.pin:focus .pin-cirkel,.pin.pin-actief .pin-cirkel{fill:var(--gold);}
.pin:focus .pin-cirkel{stroke:#fff;stroke-width:3;}
.pin text{font-family:'Sora',Arial,sans-serif;font-weight:700;fill:var(--teal-deep);font-size:13px;text-anchor:middle;pointer-events:none;}
.plattegrond-legenda{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.plattegrond-legenda button{
  width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--lijn);
  border-radius:var(--radius-m);padding:10px 14px;cursor:pointer;font-size:.85rem;font-weight:600;
  color:var(--teal-deep);text-align:left;min-height:44px;
}
.plattegrond-legenda button .nr{
  width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;
}
.plattegrond-legenda li.legenda-actief button{border-color:var(--orange);background:#FFF3E8;}
.plattegrond-route{text-align:center;margin-top:28px;}

/* ===========================================================
   MELANGE BUILDER: bewerkbare zones (fundament)
   Zie functions.php: boulevard_builder_zone(). De echte koppeling
   aan Melange Builder is een apart planpunt in Fase 3, dit is de
   visuele markering zodat een bewerkbaar blok herkenbaar is.
   =========================================================== */
.mb-zone{position:relative;}

/* ============================================================
   CATEGORIE- EN BEDRIJFSPAGINA
   Toegevoegd bij archive-bedrijven.php / taxonomy-bedrijfscategorie.php
   en single-bedrijven.php. Zelfde CSS-variabelen als de rest van het thema.
============================================================ */

/* ---- subheader met de merkstrepen (categorie-b.html, goedgekeurd) ---- */
.cat-banner{position:relative;background:var(--teal-deep);padding:52px 0 48px;overflow:hidden;}
.cat-strepen{
  position:absolute;top:-40%;bottom:-40%;right:-46px;width:300px;
  display:flex;gap:16px;transform:skewX(-18deg);pointer-events:none;
}
.cat-strepen span{border-radius:5px;}
.cat-strepen .baan-teal{flex:1.5;background:var(--teal);}
.cat-strepen .baan-oranje{flex:1;background:var(--orange);}
.cat-strepen .baan-goud{flex:.85;background:var(--gold);}
@media (max-width:760px){
  .cat-strepen{width:76px;right:-24px;gap:7px;top:-10%;bottom:-10%;transform:skewX(-10deg);}
  .cat-banner .cat-banner-inner{padding-right:104px;}
}
.cat-banner-inner{position:relative;z-index:1;}
.cat-banner .kruimelpad{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:14px;}
.cat-banner .kruimelpad a{color:#fff;text-decoration:underline;}
.cat-banner .kruimelpad a:hover,.cat-banner .kruimelpad a:focus-visible{color:var(--gold);}
.cat-banner h1{color:#fff;font-size:clamp(2rem,5vw,2.8rem);margin:0;}
.cat-banner .accent{display:block;width:56px;height:4px;background:var(--orange);border-radius:2px;margin-top:16px;}

/* ---- filter en teller ---- */
.filter-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0 26px;}
.filter-chip{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  background:var(--cream);border:1px solid var(--lijn);color:var(--teal-deep);
  font-size:.86rem;font-weight:600;cursor:pointer;
}
.filter-chip.actief{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);}
.winkel-teller{margin-left:auto;font-size:.85rem;color:#607d7c;}

/* ---- winkelkaarten ---- */
.cat-winkels{padding:6px 0 14px;}
.winkels-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media (min-width:640px){.winkels-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.winkels-grid{grid-template-columns:repeat(3,1fr);}}
.winkel-kaart{
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 30px rgba(1,43,46,.1);
  display:flex;flex-direction:column;
}
.winkel-foto-wrap{position:relative;aspect-ratio:4/3;background:var(--teal-deep);}
.winkel-foto-wrap img{width:100%;height:100%;object-fit:cover;}
.winkel-logo-badge{
  position:absolute;right:14px;bottom:-18px;width:56px;height:56px;border-radius:50%;
  background:#fff;box-shadow:0 8px 16px rgba(1,43,46,.25);display:flex;align-items:center;justify-content:center;padding:6px;
}
.winkel-logo-badge img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.winkel-inhoud{padding:26px 20px 20px;flex:1;display:flex;flex-direction:column;gap:8px;}
.winkel-inhoud h3{font-size:1.05rem;margin:0;}
.winkel-inhoud .omschrijving{font-size:.86rem;color:#33504f;flex:1;}
.winkel-status{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;}
.winkel-status .bol{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.winkel-status.open .bol{background:#0FA3A6;}
.winkel-status.dicht .bol{background:#8a96a5;}
.winkel-status.open{color:#0c7d7f;}
.winkel-status.dicht{color:#607d7c;}
.winkel-adres{font-size:.82rem;color:#607d7c;}
.winkel-kaart .btn{align-self:flex-start;margin-top:6px;}

/* ---- schematische plattegrond ---- */
.cat-plattegrond{padding:40px 0 10px;}
.plattegrond-svg-wrap{
  background:var(--teal-deep);border-radius:20px;padding:26px 20px 40px;position:relative;overflow:hidden;
}
.plattegrond-svg-wrap svg{width:100%;height:auto;display:block;}
.plattegrond-svg-wrap .straatnaam{fill:rgba(255,255,255,.5);font-size:11px;font-family:'Poppins',Arial,sans-serif;}
.plattegrond-legenda{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.plattegrond-legenda li{
  display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06);border-radius:10px;padding:8px 12px;
}
.plattegrond-legenda .nr{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;
}
.plattegrond-onderschrift{text-align:center;font-size:.76rem;color:rgba(255,255,255,.5);margin-top:14px;}

/* ---- bedrijfspagina ---- */
/* Vaste hoogte + eigen ::after-gradient, exact volgens het goedgekeurde ontwerp
   showcase/bedrijf.html. Eerder stond hier een aspect-ratio (21:9) op de foto zelf
   zonder vaste hoogte op de sectie, waardoor de gevelfoto op een brede desktop
   tot bijna 900px hoog werd, met een losse gradient-achtergrond op .bedrijf-hero-inner
   die alleen zo groot was als de tekst erin (breadcrumb + titel), niet de hele hero.
   Gevonden en gefixt 15-9-2026 na melding van Jacy. */
.bedrijf-hero{position:relative;height:280px;overflow:hidden;background:var(--teal-deep);}
@media (min-width:701px){.bedrijf-hero{height:420px;}}
.bedrijf-hero .gevel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bedrijf-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(1,20,22,.88) 0%, rgba(1,20,22,.35) 55%, rgba(1,20,22,.1) 100%);
}
.bedrijf-hero-inner{
  position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 20px;
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;
}
@media (min-width:701px){.bedrijf-hero-inner{padding-bottom:30px;}}
.bedrijf-hero-inner .kruimelpad{font-size:.8rem;color:rgba(255,255,255,.8);margin-bottom:12px;}
.bedrijf-hero-inner .kruimelpad a{color:#fff;text-decoration:underline;}
.bedrijf-hero-inner h1{color:#fff;margin:0;font-size:clamp(1.7rem,4.4vw,2.6rem);}

.hero-logo-strook{margin-top:-40px;position:relative;z-index:3;}
.logo-kaart-wrap{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;justify-content:flex-end;}
.logo-kaart{
  width:90px;height:90px;background:#fff;border-radius:18px;box-shadow:0 14px 30px rgba(1,43,46,.25);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.logo-kaart img{width:100%;height:100%;object-fit:contain;}

.statusbalk{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:22px 0 20px;
}
.status-nu{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;}
.status-nu .status-bol{width:10px;height:10px;border-radius:50%;}
.status-nu .status-bol.groen{background:#0FA3A6;}
.status-nu .status-bol.grijs{background:#8a96a5;}
.status-chips{display:flex;gap:8px;margin-left:auto;}
.cat-chip{
  display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;
  background:var(--cream);color:var(--teal-deep);text-decoration:none;font-size:.8rem;font-weight:600;
}

.actie-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:#0c8a8d;}

.bedrijf-info{padding:20px 0 44px;}
.bedrijf-info-grid{display:grid;gap:34px;grid-template-columns:1fr;}
@media (min-width:860px){.bedrijf-info-grid{grid-template-columns:1.4fr 1fr;}}
.bedrijf-info-grid p{font-size:.95rem;color:#33504f;}
.uren-kaart,.adres-kaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;}
.adres-kaart{margin-top:16px;}
.uren-kaart h3,.adres-kaart h3{font-size:1rem;margin-bottom:14px;}
.uren-lijst{list-style:none;margin:0;padding:0;}
.uren-lijst li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lijn);font-size:.86rem;}
.uren-lijst li:last-child{border-bottom:0;}
.uren-lijst li.vandaag{font-weight:700;color:var(--teal-deep);}
.koopzondag-regel{margin-top:12px;font-size:.78rem;color:#607d7c;}

.gerelateerd-winkels{padding:10px 0 50px;}
.gerelateerd-winkels h2{text-align:center;margin-bottom:26px;}
.gerel-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
@media (min-width:700px){.gerel-grid{grid-template-columns:repeat(4,1fr);}}
.gerel-kaart{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--lijn);
  border-radius:14px;overflow:hidden;
}
.gerel-kaart .foto{aspect-ratio:4/3;overflow:hidden;}
.gerel-kaart .foto img{width:100%;height:100%;object-fit:cover;}
.gerel-kaart .naam{padding:10px 12px;font-size:.82rem;font-weight:700;color:var(--teal-deep);}

/* ---- Openingstijden-overzichtspagina: een tabel (naam, status, tijden)
   in plaats van een eigen kaart per bedrijf. Elke kaart met eigen rand gaf
   op mobiel een onrustige, gesegmenteerde indruk (Jacy, 17-9-2026). ---- */
.openingstijden-tabel-wrap{
  background:#fff;border:1px solid var(--lijn);border-radius:16px;overflow:hidden;
}
.openingstijden-tabel{width:100%;border-collapse:collapse;}
.openingstijden-tabel thead th{
  text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:#607d7c;padding:14px 16px;border-bottom:1px solid var(--lijn);background:#f7f6f1;
}
.openingstijden-tabel tbody tr{border-bottom:1px solid var(--lijn);}
.openingstijden-tabel tbody tr:last-child{border-bottom:0;}
.openingstijden-tabel td{padding:16px;vertical-align:top;}
.ot-tijd-vandaag{font-weight:700;color:var(--teal-deep);white-space:nowrap;}
.ot-naam a{color:var(--teal-deep);font-weight:700;text-decoration:none;}
.ot-naam a:hover,.ot-naam a:focus-visible{text-decoration:underline;}
.ot-status{white-space:nowrap;}
.uren-lijst-compact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:2px 16px;}
.uren-lijst-compact li{display:flex;gap:6px;font-size:.82rem;white-space:nowrap;}
.uren-lijst-compact li.vandaag{font-weight:700;color:var(--teal-deep);}
.uren-lijst-compact .dagnaam{color:#607d7c;min-width:1.6em;}
.uren-lijst-compact li.vandaag .dagnaam{color:inherit;}
@media (max-width:760px){
  .openingstijden-tabel thead{display:none;}
  .openingstijden-tabel,.openingstijden-tabel tbody,.openingstijden-tabel tr,.openingstijden-tabel td{display:block;width:100%;}
  .openingstijden-tabel tr{padding:16px;}
  .openingstijden-tabel td{padding:0;}
  .ot-naam{font-size:1rem;margin-bottom:6px;}
  .ot-status{margin-bottom:10px;}
  .uren-lijst-compact{grid-template-columns:repeat(2,auto);}
}
/* /openingstijden-vandaag/ heeft maar 1 tijd per bedrijf (geen weektabel), dus
   die kan op mobiel netjes als grid: naam bovenaan, status eronder, en de
   tijd rechts uitgelijnd naast allebei. Los van de gewone weektabel-opmaak
   hierboven, die blijft voor /openingstijden/. Gevonden/gebouwd 17-9-2026. */
@media (max-width:760px){
  .openingstijden-tabel-vandaag tr{
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
    align-items:center;column-gap:14px;
  }
  .openingstijden-tabel-vandaag .ot-naam{grid-column:1;grid-row:1;margin-bottom:0;}
  .openingstijden-tabel-vandaag .ot-status{grid-column:1;grid-row:2;margin-bottom:0;}
  .openingstijden-tabel-vandaag .ot-tijd-vandaag{
    grid-column:2;grid-row:1 / span 2;text-align:right;
  }
}
.strook-openingstijden-link{
  display:inline-block;margin-top:14px;
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8);
}
.strook-openingstijden-link:hover,.strook-openingstijden-link:focus-visible{
  background:#fff;color:var(--teal-deep);border-color:#fff;
}

/* ---- Nieuwsbrief-vak: diagonale strepen, zelfde patroon als .cat-strepen maar in
   teal-tinten zodat ze afsteken tegen de gele achtergrond van het vak. ---- */
.nieuwsbrief{position:relative;overflow:hidden;}
.nieuwsbrief-strepen{
  position:absolute;top:-40%;bottom:-40%;right:-46px;width:260px;
  display:flex;gap:14px;transform:skewX(-18deg);pointer-events:none;z-index:0;
}
.nieuwsbrief-strepen span{border-radius:5px;}
.nieuwsbrief-strepen .baan-teal-deep{flex:1.5;background:var(--teal-deep);opacity:.16;}
.nieuwsbrief-strepen .baan-teal{flex:1;background:var(--teal);opacity:.22;}
.nieuwsbrief-strepen .baan-wit{flex:.85;background:var(--white);opacity:.35;}
.nieuwsbrief-inner{position:relative;z-index:1;}
@media (max-width:760px){
  .nieuwsbrief-strepen{width:110px;right:-24px;gap:8px;top:-15%;bottom:-15%;}
}

/* ---- Openingstijden-vandaag pagina ---- */
.openingstijden-vandaag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.openingstijden-vandaag-kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m,16px);padding:18px 20px;}
.openingstijden-vandaag-kaart h3{margin:0 0 8px;font-size:1rem;}
.openingstijden-vandaag-kaart h3 a{color:var(--teal-deep);text-decoration:none;}
.openingstijden-vandaag-kaart h3 a:hover,.openingstijden-vandaag-kaart h3 a:focus-visible{text-decoration:underline;}
.openingstijden-vandaag-kaart .winkel-status{margin-bottom:8px;}
.openingstijden-vandaag-tijd{display:block;font-size:.88rem;color:#33504f;}

/* ---- Reviews-pagina ---- */
.reviews-pagina-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}
.review-pagina-kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m,16px);padding:24px;display:flex;flex-direction:column;gap:10px;}
.review-pagina-kaart .sterren{position:static;width:auto;height:auto;display:flex;gap:2px;margin:0;color:var(--gold);}
.review-pagina-kaart .sterren svg{width:16px;height:16px;}
.review-tekst{font-size:.92rem;color:#33504f;line-height:1.55;flex-grow:1;}
.review-auteur{font-weight:700;font-size:.9rem;color:var(--teal-deep);margin:0;}
.review-bedrijf{font-size:.8rem;color:#607d7c;margin:0;}
.reviews-eigen-cta{padding:50px 0 60px;}
.reviews-eigen-cta-inner{
  background:var(--teal-deep);border-radius:var(--radius-m,16px);padding:44px 32px;text-align:center;
}
.reviews-eigen-cta-inner h2{color:#fff;margin-bottom:.4em;}
.reviews-eigen-cta-inner p{color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 22px;}

/* ---- Bedrijfspagina-uitbreiding: bijzondere tijden, sfeerfoto's, review ---- */
.bijzonder-tijden-kaart{
  background:#FFF6E6;border:1px solid var(--gold);border-radius:var(--radius-m,16px);
  padding:18px 20px;margin-top:16px;
}
.bijzonder-tijden-kaart h3{font-size:.95rem;margin-bottom:10px;color:#7a5a00;}
.bijzonder-tijden-lijst{list-style:none;margin:0;padding:0;}
.bijzonder-tijden-lijst li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.86rem;color:#5a4400;}
.bt-datum{font-weight:700;}

/* Sfeerfoto's: kop en korte tekst links, een gestapelde zigzag-kolom foto's
   rechts, in plaats van een volle-breedte grid met te grote tegels. Op verzoek
   van Jacy 15-9-2026, na de melding dat de foto's op desktop veel te groot
   stonden. */
/* Sfeerfoto's: kop en korte tekst bovenaan, daaronder alle foto's netjes op
   een rij, allemaal even hoog. Twee eerdere zigzag-varianten (foto's
   afwisselend links/rechts, met of zonder grote sprong) oogden bij Jacy
   allebei "raar"/verwarrend in plaats van als bewust patroon, dus
   15-9-2026 vereenvoudigd naar een gewone rij. */
.sfeerfotos{padding:20px 0 40px;}
.sfeerfotos h2{margin-bottom:6px;}
.sfeerfotos-intro{color:#33504f;font-size:.95rem;margin:0 0 18px;}
/* Altijd een echte enkele rij, nooit wrappen naar een volgende regel: bij
   weinig foto's blijft de rij kort, bij veel foto's wordt hij horizontaal
   scrollbaar/swipebaar (native scroll-snap, geen JS). Op verzoek van Jacy
   15-9-2026, na een eerdere versie die op smallere schermbreedtes toch
   terugviel op wrappen. */
.sfeerfotos-rij{
  display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;
}
.sfeerfotos-rij::-webkit-scrollbar{display:none;}
.sfeerfoto-item{
  flex:0 0 300px;width:300px;aspect-ratio:4/3;border-radius:var(--radius-m,16px);
  overflow:hidden;box-shadow:0 14px 28px rgba(1,43,46,.14);scroll-snap-align:start;
}
.sfeerfoto-item img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:640px){
  .sfeerfoto-item{flex:0 0 82%;width:82%;}
}

.bedrijf-review{padding:10px 0 34px;}
.bedrijf-review h2{margin-bottom:16px;}
/* Zelfde rij-opzet als .sfeerfotos-rij, zodat de reviews in dezelfde
   beeldtaal doorlopen als de sfeerfoto's erboven. 15-9-2026 op verzoek
   van Jacy. */
.bedrijf-review-rij{
  display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;
}
.bedrijf-review-rij::-webkit-scrollbar{display:none;}
.bedrijf-review-kaart{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m,16px);
  padding:24px;flex:0 0 300px;width:300px;display:flex;flex-direction:column;
  scroll-snap-align:start;
}
.bedrijf-review-kaart .sterren{display:flex;gap:2px;color:var(--gold);margin-bottom:10px;}
.bedrijf-review-kaart .review-tekst{font-size:.9rem;color:#33504f;line-height:1.6;margin-bottom:12px;flex-grow:1;}
.bedrijf-review-kaart .review-auteur{font-weight:700;font-size:.9rem;color:var(--teal-deep);margin:0;}
@media (max-width:640px){
  .bedrijf-review-kaart{flex:0 0 82%;width:82%;}
}

/* ---- Generieke pagina-inhoud (page.php) ---- */
.pagina-inhoud{padding:40px 0 60px;max-width:800px;color:#33504f;line-height:1.65;}
.pagina-inhoud h1,.pagina-inhoud h2,.pagina-inhoud h3{color:var(--teal-deep);margin:1.4em 0 .5em;}
.pagina-inhoud h1:first-child,.pagina-inhoud h2:first-child,.pagina-inhoud h3:first-child{margin-top:0;}
.pagina-inhoud h2{font-size:1.5rem;}
.pagina-inhoud h3{font-size:1.2rem;}
.pagina-inhoud h5,.pagina-inhoud h6{color:var(--orange);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:700;margin:1.2em 0 .3em;}
.pagina-inhoud p{margin:0 0 1em;}
.pagina-inhoud a{color:var(--teal);}
.pagina-inhoud a:hover{color:var(--orange);}
.pagina-inhoud figure{margin:1.5em 0;}
.pagina-inhoud img{max-width:100%;height:auto;border-radius:var(--radius-m,16px);display:block;}
.pagina-inhoud ul,.pagina-inhoud ol{margin:0 0 1em;padding-left:1.4em;}

/* ---- Over-ons-pagina: zigzag secties ---- */
.label-oranje{display:inline-block;color:var(--orange);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;font-weight:700;margin-bottom:10px;}
.accent-getal{color:var(--orange);}

.overons-intro{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:56px 0 40px;
}
@media (min-width:860px){.overons-intro{grid-template-columns:1.1fr 0.9fr;}}
.overons-intro h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--teal-deep);margin:0 0 20px;line-height:1.2;}
.overons-intro blockquote{
  margin:0;padding-left:18px;border-left:4px solid var(--orange);
  color:#33504f;font-size:1.02rem;line-height:1.65;
}
.overons-intro-beeld img{width:100%;border-radius:var(--radius-m,16px);display:block;}

.overons-zigzag{
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;padding:30px 0;
}
@media (min-width:860px){.overons-zigzag{grid-template-columns:0.9fr 1.1fr;}}
.overons-zigzag-beeld img{width:100%;border-radius:var(--radius-m,16px);display:block;}
.overons-zigzag-tekst h2{color:var(--teal-deep);font-size:1.6rem;margin:0 0 14px;}
.overons-zigzag-tekst p{color:#33504f;line-height:1.65;margin:0;}

.overons-kaarten{
  display:grid;grid-template-columns:1fr;gap:24px;padding:30px 0;
}
@media (min-width:860px){.overons-kaarten{grid-template-columns:1.2fr 0.8fr;}}
.overons-kaart-wit{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-m,16px);padding:32px;
}
.overons-kaart-wit h2{color:var(--teal-deep);font-size:1.5rem;margin:0 0 16px;text-transform:uppercase;}
.overons-kaart-wit p{color:#33504f;line-height:1.65;margin:0 0 1em;}
.overons-kaart-wit p:last-child{margin-bottom:0;}
.overons-kaart-donker{
  background:var(--teal-deep);border-radius:var(--radius-m,16px);padding:32px;
  display:flex;flex-direction:column;gap:20px;justify-content:center;
}
.overons-kaart-donker blockquote{color:#fff;font-style:italic;font-size:.98rem;line-height:1.6;margin:0;}

.overons-verhaal{max-width:800px;padding:20px 0 40px;color:#33504f;line-height:1.65;}
.overons-verhaal p{margin:0 0 1.2em;}
.overons-verhaal p:last-child{margin-bottom:0;}

.overons-stats{position:relative;background:var(--teal-deep);overflow:hidden;padding:56px 0;margin-top:20px;}
.overons-stats-inner{position:relative;z-index:1;text-align:center;}
.overons-stats h2{color:#fff;font-size:clamp(1.4rem,3.2vw,1.9rem);margin:0 0 34px;}
.overons-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:640px;margin:0 auto 40px;}
@media (min-width:640px){.overons-stats-grid{grid-template-columns:repeat(4,1fr);}}
.overons-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.overons-stat-icoon{
  display:block;width:38px;height:28px;margin-bottom:6px;color:var(--gold);
  opacity:0;transform:translateY(10px) scale(.8);transition:opacity .5s ease,transform .5s ease;
}
.overons-stat-icoon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.overons-stat.in-beeld .overons-stat-icoon{opacity:1;transform:translateY(0) scale(1);}
.overons-stat:nth-child(2) .overons-stat-icoon{transition-delay:.08s;}
.overons-stat:nth-child(3) .overons-stat-icoon{transition-delay:.16s;}
.overons-stat:nth-child(4) .overons-stat-icoon{transition-delay:.24s;}
.overons-stat .cijfer{font-family:'Sora',Arial,sans-serif;font-weight:800;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--gold);}
.overons-stat .label{color:rgba(255,255,255,.8);font-size:.86rem;text-transform:uppercase;letter-spacing:.03em;}
.overons-stats p{color:rgba(255,255,255,.85);max-width:720px;margin:0 auto;}

/* ---- Contactpagina ---- */
.contact-intro{padding:44px 0 10px;}
.contact-intro h2{font-size:clamp(1.5rem,3.6vw,2.2rem);color:var(--teal-deep);margin:8px 0 0;line-height:1.25;}
.contact-intro .accent-tekst{color:var(--orange);}

.contact-kaart-sectie{padding:30px 0 60px;}
.contact-kaart{
  background:var(--teal-deep);border-radius:var(--radius-m,16px);padding:44px;max-width:640px;
}
.contact-kaart-label{color:rgba(255,255,255,.7);font-size:.86rem;font-weight:600;}
.contact-kaart-kop{display:flex;align-items:center;gap:18px;margin:18px 0 28px;}
.contact-icoon{
  width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-kaart-kop h3{color:#fff;font-size:1.3rem;margin:0;line-height:1.25;}

/* Formulier: velden op de donkere kaart */
.melange-contact-form-wrap{color:#fff;}
.melange-contact-field{margin:0 0 16px;}
.contact-kaart .melange-contact-field label{display:block;color:#fff;font-size:.86rem;font-weight:600;margin-bottom:6px;}
.melange-contact-field .req{color:var(--gold);}
.contact-kaart .melange-contact-field input,
.contact-kaart .melange-contact-field textarea{
  width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:13px 16px;color:#fff;font-size:.92rem;font-family:inherit;
}
.melange-contact-field input::placeholder,
.melange-contact-field textarea::placeholder{color:rgba(255,255,255,.5);}
.melange-contact-field input:focus,
.melange-contact-field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
.melange-contact-field textarea{resize:vertical;min-height:110px;}
.melange-contact-hp{position:absolute;left:-9999px;}
.contact-kaart .melange-contact-ip-notice{background:rgba(255,255,255,.06);font-size:.76rem;color:rgba(255,255,255,.6);margin:0 0 16px;padding:10px 14px;border-radius:8px;}
.melange-contact-submit{margin:8px 0 0;}
.contact-kaart .melange-contact-submit button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:700;font-size:.9rem;
  background:var(--orange);color:#fff;border:0;cursor:pointer;min-height:44px;
}
.melange-contact-submit button:hover{background:#d9591a;}
.melange-contact-message{
  border-radius:12px;padding:14px 18px;margin:0 0 20px;font-size:.9rem;
}
.melange-contact-message--success{background:rgba(47,168,79,.18);color:#a9e8b8;}
.melange-contact-message--error{background:rgba(220,80,80,.18);color:#ffb3b3;}

/* ---- Blogsjablonen (single.php, home.php) ---- */
.blog-meta-rij{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:26px 0 0;}
.blog-datum{color:#607d7c;font-size:.86rem;font-weight:600;}
.blog-categorieen{display:flex;flex-wrap:wrap;gap:8px;}
.blog-uitgelicht{margin-top:22px;}
.blog-uitgelicht img{width:100%;max-height:460px;object-fit:cover;border-radius:var(--radius-m,16px);display:block;}
.blog-inhoud{padding-top:30px;}
.blog-inhoud .blog-highlight{
  background:#EEECE4;border-radius:var(--radius-m,16px);padding:24px 26px;margin:1.6em 0;
}
.blog-inhoud .blog-highlight h2{margin-top:0;}
.blog-inhoud .blog-highlight p:last-child{margin-bottom:0;}
.blog-paginering{display:flex;justify-content:center;gap:8px;margin-top:34px;}
.blog-paginering span a,.blog-paginering span.current{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem;color:var(--teal-deep);
  border:1px solid var(--lijn);padding:0 10px;
}
.blog-paginering span.current{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);}
.blog-paginering span a:hover{background:var(--cream);}

/* Pre-live fix 15-9-2026: footer-links minimaal 44x44px tikgebied, maar dat
   hoorde alleen op mobiel te gelden (aanraakdoel); op desktop maakte het de
   Snel naar/Categorieen-kolommen onnodig ver uit elkaar (Jacy, 16-9-2026). */
.footer-grid ul li a{display:inline-flex;align-items:center;}
@media (max-width:640px){
  .footer-grid ul li a{min-height:44px;padding:6px 0;}
}

/* Pre-live fix 15-9-2026: kruimelpad-link (Home) minimaal 44x44px tikgebied op mobiel */
@media (max-width:640px){
  .kruimelpad a{display:inline-flex;align-items:center;min-height:44px;}
}

/* Pre-live fix 15-9-2026: Melange-creditlink in footer-onder minimaal 44px tikhoogte op mobiel, zonder de regel visueel te vergroten (negatieve margin compenseert de padding) */
@media (max-width:640px){
  .footer-onder a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin:-12px -2px;}
}

/* ---- Interactieve winkelkaart (Leaflet), vervangt de schematische SVG-plattegrond, 15-9-2026 ---- */
.winkelkaart{
  width:100%;height:420px;border-radius:var(--radius-l,16px);overflow:hidden;
  background:var(--teal-deep);z-index:0;
}
.winkelkaart .leaflet-container{border-radius:var(--radius-l,16px);font-family:inherit;}
.winkelkaart-speld span{
  display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;
  background:var(--orange,#FF7A00);transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff;
}
@media (max-width:640px){
  .winkelkaart{height:320px;}
}

/* Pre-live fix 15-9-2026: laatste tikgebieden op mobiel naar 44px, gevonden door de tweede testronde */
@media (max-width:640px){
  .openingstijden-kaart h3 a{display:inline-block;min-height:44px;display:inline-flex;align-items:center;}
  .cat-chip{min-height:44px;padding:0 16px;}
}

/* ---- Aanbiedingenpagina (page-aanbiedingen.php), 16-9-2026 ---- */
.aanbiedingen-pagina-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:22px;
}
.aanbiedingen-pagina-grid .aanbieding-kaart{width:auto;}
.aanbiedingen-leeg{margin-top:30px;color:#33504f;}