/* Wellnesswoningen.nl designsysteem — 1-op-1 uit de Claude Design handoff
   (_design_handoff/wellnesswoningen-v1: tokens in wellness-v4.jsx, chrome in
   wellness-chrome.jsx/wellness-header.jsx). Poppins zelf gehost (CLS, zie base.html).
   Klassenprefix w- ; de p-g*-gridklassen en breakpoints komen letterlijk uit de handoff. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400-latin.9212f6f9860f.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-500-latin.a09f2fccfee3.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-600-latin.72993dddf88a.woff2") format("woff2"); }

:root {
  --w-brand: #0E3B3C; --w-brand-dk: #0A2C2D; --w-brand-lt: #E8F1EF; --w-mint: #8FD3C4;
  --w-cta: #E9622F; --w-amber: #F2A31B; --w-promo: #F2653A; --w-link: #1F6FD0;
  --w-ink: #13322F; --w-ink2: #5D706E; --w-ink3: #93A3A1;
  --w-wash: #F5F8F7; --w-line: #E4EBE9;
  --w-font: Poppins, -apple-system, system-ui, sans-serif;
}

/* clip in plaats van hidden: hidden maakt body een scrollcontainer en dan werkt
   position: sticky niet meer (het boekblok naast de kalender bleef bovenaan staan). */
html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; background: #fff;
  font-family: var(--w-font); color: var(--w-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { color: var(--w-link); }
a:hover { color: var(--w-brand); }
::selection { background: rgba(233, 98, 47, .2); }

.w-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- Topstrip ---------- */
.w-topstrip { background: var(--w-wash); border-bottom: 1px solid var(--w-line); }
.w-topstrip .w-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px;
  padding: 8px 32px; font-size: 11.5px; font-weight: 500; color: var(--w-ink2); }
.w-topstrip span { display: flex; align-items: center; gap: 6px; }

/* ---------- Header + megamenu ---------- */
.w-header { background: #fff; border-bottom: 1px solid var(--w-line); position: relative; z-index: 40; }
.w-header__in { display: flex; align-items: stretch; gap: 18px; height: 66px; }
.w-logo { display: flex; flex-direction: column; justify-content: center; gap: 1px;
  text-decoration: none; line-height: 1.05; padding-right: 4px; }
.w-logo__naam { font-size: 17.5px; font-weight: 600; letter-spacing: -.4px; color: var(--w-brand); }
.w-logo__naam b { font-weight: 600; color: var(--w-cta); }
.w-logo__sub { font-size: 8.5px; font-weight: 500; letter-spacing: 1.6px; color: var(--w-ink3); }
.w-nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.w-nav__item { position: static; display: flex; }
.w-nav__link { display: flex; align-items: center; gap: 4px; padding: 0 9px; font-size: 13.5px;
  white-space: nowrap; font-weight: 500; color: var(--w-ink); text-decoration: none; }
.w-nav__link:hover, .w-nav__item:focus-within > .w-nav__link { font-weight: 600;
  color: var(--w-brand); box-shadow: inset 0 -2px 0 var(--w-cta); }
.w-nav__link--actief { font-weight: 600; color: var(--w-brand); box-shadow: inset 0 -2px 0 var(--w-cta); }
.w-nav__link--promo { color: var(--w-promo); }
.w-nav__link--promo:hover { color: var(--w-promo); box-shadow: none; font-weight: 500; }
.w-header__acties { margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; flex-shrink: 0; }
.w-header__acties a { color: var(--w-ink); text-decoration: none; white-space: nowrap; }
.w-zoekknop { font-family: var(--w-font); display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--w-line); border-radius: 99px; padding: 7px 12px;
  font-size: 12.5px; color: var(--w-ink2); cursor: pointer; text-decoration: none; }
.w-knop-brand { background: var(--w-brand); color: #fff !important; padding: 8px 13px;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Megapanel: puur CSS (hover + focus-within), geen JS nodig. Opbouw uit het ontwerp
   "Mega menu's" (ronde 1): panelen over de volle breedte, grote regels voor de soort
   wellness, balkjes per land, een voetstrook en een gedimde pagina eronder. */
.w-nav__label { font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 7px;
  border-radius: 99px; background: #FDEBE3; color: #B8441A; margin-left: 2px; }
.w-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line);
  box-shadow: 0 30px 60px -30px rgba(10, 44, 45, .45); }
.w-nav__item:hover .w-mega, .w-nav__item:focus-within .w-mega { display: block; }
.w-nav__item--dicht .w-mega { display: none !important; }
/* Gedimde pagina onder het open paneel. pointer-events: none, anders telt de muis boven de
   dimlaag nog als hover op het menu-item en gaat het paneel nooit meer dicht. */
.w-mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
  background: rgba(10, 44, 45, .38); pointer-events: none; }
.w-mega__in { display: grid; gap: 34px; padding: 28px 32px 30px; }
.w-mega__in--aanbod { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) 280px; }
.w-mega__in--bestemmingen { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.4fr) 270px; }
.w-mega__in--gids { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 270px; }
.w-mega__kop { font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--w-ink3); margin-bottom: 4px; }
.w-mega__kop--los { margin-top: 22px; }
.w-mega__lijst { display: grid; }
.w-mega__lijst a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--w-line); font-size: 13.5px; font-weight: 500;
  color: var(--w-ink); text-decoration: none; }
.w-mega__lijst a:hover, .w-mega__soorten a:hover .w-mega__soort { color: var(--w-cta); }
.w-mega__lijst a small, .w-mega__soorten small { font-size: 12px; font-weight: 400; color: var(--w-ink3);
  font-variant-numeric: tabular-nums; }
.w-mega__soorten a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 1px 14px; padding: 11px 0; border-bottom: 1px solid var(--w-line); text-decoration: none; }
.w-mega__soort { font-size: 20px; font-weight: 600; letter-spacing: -.3px; line-height: 1.15; color: var(--w-brand); }
.w-mega__uitleg { grid-column: 1 / -1; font-size: 12.5px; color: var(--w-ink2); }
/* Verder in Europa: naam, balkje (aandeel t.o.v. het grootste land), aantal. */
.w-mega__lijst--balk a { display: grid; grid-template-columns: 104px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.w-mega__lijst--balk small { text-align: right; }
.w-mega__balk { display: block; height: 6px; border-radius: 3px; background: var(--w-brand-lt); overflow: hidden; }
.w-mega__balk > span { display: block; height: 100%; border-radius: 3px; background: var(--w-mint); }
.w-mega__meer { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px;
  font-weight: 600; color: var(--w-cta); text-decoration: none; }
.w-mega__tabel > div { display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--w-line); font-size: 13.5px; font-weight: 500; }
.w-mega__tabel b { font-size: 17px; font-weight: 600; color: var(--w-brand); }
.w-mega__noot { font-size: 12px; color: var(--w-ink2); margin: 10px 0 0; line-height: 1.5; }
.w-mega__voet { background: var(--w-wash); border-top: 1px solid var(--w-line); }
.w-mega__voet-in { display: flex; align-items: center; gap: 26px; padding: 12px 32px; font-size: 13px; color: var(--w-ink2); }
.w-mega__voet-in strong { font-weight: 600; color: var(--w-brand); }
.w-mega__voet-in a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--w-cta); text-decoration: none; }
.w-mega__promo { background: var(--w-wash); border-radius: 12px; overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column; align-self: start; }
.w-mega__promo-foto { display: block; height: 150px; position: relative; overflow: hidden; background: var(--w-brand-dk); }
.w-mega__promo-foto img { width: 100%; height: 100%; object-fit: cover; }
.w-mega__promo-body { display: block; padding: 16px 18px 18px; }
.w-mega__promo-titel { display: block; font-size: 16px; font-weight: 600; color: var(--w-brand); line-height: 1.3; }
.w-mega__promo-sub { display: block; font-size: 12.5px; color: var(--w-ink2); margin-top: 5px; line-height: 1.55; }
.w-mega__promo-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--w-cta); }
.w-mega__promo--donker { background: var(--w-brand); }
.w-mega__promo--donker .w-mega__promo-titel { color: #fff; }
.w-mega__promo--donker .w-mega__promo-sub { color: rgba(255, 255, 255, .72); }
.w-mega__promo-knop { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 9px 15px;
  border-radius: 99px; background: var(--w-cta); color: #fff; font-size: 12.5px; font-weight: 600; }
.w-mega__garantie { display: block; padding: 20px; border-radius: 12px; background: var(--w-brand);
  color: #fff; text-decoration: none; align-self: start; }
.w-mega__garantie:hover { color: #fff; }
.w-mega__garantie-kop { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--w-mint); }
.w-mega__garantie-tekst { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; margin: 10px 0 14px; }
.w-mega__garantie a, .w-mega__garantie-link { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--w-mint); text-decoration: none; }

/* Mobiel menu: <details> + drill-down (static/js/menu.js), zelfde links als desktop
   (harde regel: mobiel = desktop). Schermvullend, want een uitklap onder de balk werd op een
   telefoon een lange lijst die half achter de pagina eronder verdween.
   Zonder JS (geen .w-burger--js) staan alle schermen gewoon onder elkaar. */
.w-burger { display: none; }
.w-burger > summary { list-style: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: #fff; border: 1px solid var(--w-line); border-radius: 8px; cursor: pointer; }
.w-burger > summary::-webkit-details-marker { display: none; }
.w-burger__icoon { position: relative; width: 18px; height: 14px; display: block; }
.w-burger__icoon i { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px;
  background: var(--w-brand); transition: transform .25s, opacity .2s, top .25s; }
.w-burger__icoon i:nth-child(1) { top: 0; }
.w-burger__icoon i:nth-child(2) { top: 6px; }
.w-burger__icoon i:nth-child(3) { top: 12px; }
.w-burger[open] > summary { background: var(--w-brand); border-color: var(--w-brand); }
.w-burger[open] .w-burger__icoon i { background: #fff; top: 6px; }
.w-burger[open] .w-burger__icoon i:nth-child(1) { transform: rotate(45deg); }
.w-burger[open] .w-burger__icoon i:nth-child(2) { opacity: 0; }
.w-burger[open] .w-burger__icoon i:nth-child(3) { transform: rotate(-45deg); }
/* De knop en de merknaam moeten BOVEN het schermvullende paneel liggen, anders vangt het
   paneel de klik op en gaat het menu niet meer dicht. Let op: geen z-index op
   .w-header__acties, want dat zou een eigen stapellaag maken waarin het paneel de knop
   alsnog bedekt. */
.w-burger > summary { position: relative; z-index: 60; }
.w-logo { position: relative; z-index: 60; }
/* Het paneel bedekt het hele scherm, MAAR de knop waarmee je het sluit moet erboven
   blijven. De hele headerbalk (met logo én knop) ligt op een hogere laag dan het paneel, en
   de menu-inhoud start met padding onder die balk in plaats van met een positie. */
.w-burger__paneel { position: fixed; inset: 0; z-index: 50; background: var(--w-wash);
  padding: 82px 16px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Open menu: de headerbalk gaat vast bovenaan staan. Anders lag de sluitknop buiten beeld
   zodra je het menu opende nadat je de pagina al een stuk had gescrold, en zat de topstrook
   tussen balk en menu in. */
.w-header:has(.w-burger[open]) { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }
/* Het paneel zit in .w-header__acties en erft daar nowrap en de linkkleur van. */
.w-header__acties .w-burger__paneel a { white-space: normal; color: var(--w-ink); }
.w-header__acties .w-burger__paneel .w-mpromo, .w-header__acties .w-burger__paneel .w-mega__garantie { color: #fff; }
/* Wit achter logo en knop, zodat de menu-inhoud er bij scrollen niet doorheen schemert. */
.w-burger__paneel::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 66px;
  background: #fff; border-bottom: 1px solid var(--w-line); z-index: 1; }
.w-scherm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.w-scherm + .w-scherm { margin-top: 34px; }
.w-burger--js .w-scherm { display: none; margin-top: 0; }
.w-burger--js .w-scherm--actief { display: grid; }
.w-scherm__terug { display: none; }
.w-burger--js .w-scherm__terug { display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  margin: -8px 0 -12px -4px; padding: 10px 6px; border: 0; background: none; cursor: pointer;
  font: 600 15px var(--w-font); color: var(--w-cta); }
.w-scherm__terug i { width: 8px; height: 8px; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.w-scherm__titel { font-size: 21px; font-weight: 600; letter-spacing: -.3px; color: var(--w-brand); }
.w-scherm__blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.w-scherm__kop { font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--w-ink3); padding: 0 4px; }
.w-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.w-tegel { display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 13px 14px;
  border-radius: 14px; background: #fff; border: 1px solid var(--w-line); text-decoration: none; }
.w-tegel span { font-size: 17px; font-weight: 600; color: var(--w-brand); }
.w-tegel em { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--w-ink2); }
.w-tegel small { margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--w-ink3); }
.w-mlijst { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--w-line); }
.w-mlijst > a, .w-mlijst > button, .w-mlijst > div { display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 8px 16px; border: 0; border-top: 1px solid var(--w-line);
  background: none; text-align: left; font: inherit; color: var(--w-ink); text-decoration: none; cursor: pointer; }
.w-mlijst > :first-child { border-top: 0; }
.w-mlijst > * > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.w-mlijst b { font-size: 15.5px; font-weight: 500; color: var(--w-brand); }
.w-mlijst small { font-size: 12.5px; color: var(--w-ink2); }
.w-mlijst .w-mega__balk { height: 4px; margin-top: 5px; }
.w-mlijst .w-mlijst__aantal { font-variant-numeric: tabular-nums; color: var(--w-ink3); font-size: 13.5px; }
.w-mlijst__pijl { flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--w-ink3);
  border-top: 2px solid var(--w-ink3); transform: rotate(45deg); }
/* Zonder JS zijn de knoppen naar een subscherm zinloos: die schermen staan er al onder. */
.w-burger:not(.w-burger--js) .w-mlijst > button { display: none; }
.w-mlijst--tabel > div { cursor: default; justify-content: space-between; }
.w-mlijst--tabel span { font-size: 15px; font-weight: 500; }
.w-mlijst--tabel b { font-size: 17px; font-weight: 600; }
.w-mpromo { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px;
  background: var(--w-brand); color: #fff; text-decoration: none; }
.w-mpromo:hover { color: #fff; }
.w-mpromo img { width: 84px; height: 84px; flex: none; border-radius: 10px; object-fit: cover; }
.w-mpromo span { display: flex; flex-direction: column; gap: 4px; }
.w-mpromo b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.w-mpromo small { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* ---------- Hero + zoekbalk ---------- */
/* Zonder foto blijft de hero een rustig merkvlak in plaats van een gat: geen willekeurige
   stockfoto meer die doet alsof hij de bestemming toont. */
.w-hero { position: relative; height: 430px; background: var(--w-brand-dk);
  background-image: radial-gradient(120% 90% at 20% 0%, #14514f 0%, var(--w-brand-dk) 62%); }
.w-hero--land { height: 400px; }
/* De beeldlaag krijgt een eigen z-index zodat alles wat erin zit (poster, video) samen
   ONDER de tekstlaag blijft. Zonder deze regel kroop de video met z-index:1 boven de h1 en
   de zoekbalk: die stonden er nog wel, maar onzichtbaar en niet aanklikbaar. */
.w-hero__foto { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.w-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
/* De poster ligt eronder en blijft staan als de video niet speelt (geen ondersteuning,
   data-besparing, of prefers-reduced-motion). */
.w-hero__poster { position: absolute; inset: 0; z-index: 0; }
.w-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .w-hero__video { display: none; }
}
/* Drie lagen in de hero, van onder naar boven: beeld (0), verloop (1), tekst en zoekbalk (2).
   Expliciet, want een impliciete stapeling ging al een keer mis. */
.w-hero__grad { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(10,44,45,.28) 0%, rgba(10,44,45,.1) 35%, rgba(10,44,45,.72) 100%); }
.w-hero__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding-bottom: 34px; }
.w-hero h1 { font-size: 38px; font-weight: 600; color: #fff; letter-spacing: -.9px;
  line-height: 1.15; margin: 0; max-width: 560px; text-shadow: 0 1px 18px rgba(10,44,45,.4); }
.w-hero--land h1 { font-size: 34px; letter-spacing: -.9px; line-height: 1.2; margin: 10px 0 0; max-width: 620px; }
.w-hero__sub { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); margin: 10px 0 0; max-width: 560px; }
.w-hero__zoek { margin-top: 24px; max-width: 780px; }

.w-zoekbalk { background: #fff; border-radius: 8px; padding: 5px; display: flex;
  box-shadow: 0 12px 30px -12px rgba(10,44,45,.3); }
.w-zoekbalk__veld { min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 0 8px 0 16px; border-right: 1px solid var(--w-line); font-size: 14px;
  color: var(--w-ink2); white-space: nowrap; overflow: hidden; }
.w-zoekbalk__veld > svg { flex-shrink: 0; }
.w-zoekbalk__veld input { border: none; flex: 1; min-width: 0; padding: 12px 0;
  font-family: var(--w-font); font-size: 14px; color: var(--w-ink); background: none; outline: none; }
.w-zoekbalk__veld input::placeholder { color: var(--w-ink2); }
.w-zoekbalk__veld--waar { flex: 1.3; } .w-zoekbalk__veld--datum { flex: 1; }
.w-zoekbalk__veld--wie { flex: .85; }
.w-zoekbalk__knop { font-family: var(--w-font); background: var(--w-cta); color: #fff; border: none;
  border-radius: 6px; padding: 0 24px; font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* ---------- Zoekresultaten (/zoeken/) ---------- */
.w-zoek__kop { font-size: 26px; font-weight: 600; color: var(--w-brand); margin: 12px 0 18px;
  letter-spacing: -.4px; }
.w-zoekform { background: #fff; border: 1px solid var(--w-line); border-radius: 8px; padding: 12px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.w-zoekform__veld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.w-zoekform__veld > span { font-size: 12px; font-weight: 600; color: var(--w-ink2); }
.w-zoekform__veld input, .w-zoekform__veld select { font-family: var(--w-font); font-size: 14px;
  color: var(--w-ink); background: #fff; border: 1px solid var(--w-line); border-radius: 6px;
  padding: 11px 12px; width: 100%; min-width: 0; }
.w-zoekform .w-zoekbalk__knop { padding: 12px 24px; height: 43px; }
.w-zoek__balk { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  justify-content: space-between; margin: 20px 0 14px; }
.w-zoek__telling { font-size: 14px; color: var(--w-ink2); margin: 0; }
.w-zoek__telling b { color: var(--w-ink); font-weight: 600; }
.w-zoek__sorteer { display: flex; gap: 8px; flex-wrap: wrap; }
.w-zoek__sorteerknop { font-size: 13px; color: var(--w-ink2); text-decoration: none;
  border: 1px solid var(--w-line); border-radius: 999px; padding: 7px 14px; background: #fff; }
.w-zoek__sorteerknop.is-aan { color: var(--w-brand); border-color: var(--w-brand);
  background: var(--w-brand-lt); font-weight: 600; }
.w-blader { display: flex; gap: 18px; align-items: center; justify-content: center;
  margin: 28px 0 8px; font-size: 14px; color: var(--w-ink2); }
.w-blader a { color: var(--w-link); text-decoration: none; font-weight: 600; }
.w-zoek__leeg { background: var(--w-wash); border-radius: 8px; padding: 24px;
  font-size: 14px; color: var(--w-ink2); line-height: 1.7; }
.w-zoek__leeg p { margin: 0 0 10px; color: var(--w-ink); font-weight: 600; }
.w-zoek__leeg ul { margin: 0; padding-left: 20px; }
.w-zoek__leeg a { color: var(--w-link); }

/* Filterkolom links, resultaten rechts. Op mobiel klapt de kolom uit achter "Filters" (een
   verborgen vinkje, zodat het ook zonder JavaScript werkt). */
.w-zoek__opzet { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px;
  align-items: start; margin-top: 22px; }
.w-zoek__opzet .w-zoek__balk { margin-top: 0; }
.w-filters__schakel { position: absolute; opacity: 0; pointer-events: none; }
.w-filters__knop { display: none; }
.w-filters { background: #fff; border: 1px solid var(--w-line); border-radius: 8px;
  padding: 16px 16px 12px; }
.w-filters__kop { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 15px; color: var(--w-ink); }
.w-filters__kop a { font-size: 13px; color: var(--w-link); }
.w-filters__groep { border: 0; border-top: 1px solid var(--w-line); margin: 0; padding: 12px 0 8px; }
.w-filters__groep legend { font-size: 14px; font-weight: 600; color: var(--w-ink);
  padding: 12px 0 6px; float: left; width: 100%; }
.w-filters__optie { display: flex; align-items: center; gap: 10px; clear: both;
  padding: 5px 0; font-size: 14px; color: var(--w-ink); cursor: pointer; }
.w-filters__optie input { width: 17px; height: 17px; margin: 0; accent-color: var(--w-brand);
  flex-shrink: 0; }
.w-filters__optie span { flex: 1; min-width: 0; }
.w-filters__optie small { font-size: 12px; color: var(--w-ink3); }
.w-filters__toon { width: 100%; margin-top: 10px; background: var(--w-brand); color: #fff;
  border: 0; border-radius: 6px; padding: 11px; font: 600 14px var(--w-font); cursor: pointer; }
.w-zoek__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.w-zoek__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 16px; }
.w-zoek__chip { font-size: 13px; color: var(--w-brand); background: var(--w-brand-lt);
  border: 1px solid var(--w-brand); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; font-weight: 600; }
.w-zoek__chip span { margin-left: 4px; }
.w-zoek__chipwis { font-size: 13px; color: var(--w-link); }

/* ---------- Garantiebalk ---------- */
.w-garantiebalk { background: var(--w-wash); border-bottom: 1px solid var(--w-line); }
/* space-between met flex-wrap gaf een rommelig blok zodra er een regel omklapte: de laatste
   rij werd dan over de volle breedte uitgesmeerd. Gelijke afstanden vanaf links leest
   rustiger en houdt de items op één lijn. */
.w-garantiebalk .w-wrap { display: flex; justify-content: flex-start; flex-wrap: wrap;
  align-items: center; gap: 10px 32px; padding: 12px 32px; font-size: 13px; color: var(--w-ink); }
.w-garantiebalk b { font-weight: 600; }
.w-garantiebalk__item { display: flex; align-items: center; gap: 8px; }
.w-schildje { width: 27px; height: 30px; background: var(--w-brand); color: #fff;
  border-radius: 4px 4px 13px 13px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: 7px; font-weight: 600; line-height: 1.2; flex-shrink: 0; }

/* ---------- Secties ---------- */
.w-sectie { margin-top: 56px; }
.w-sectie--strak { margin-top: 48px; }
.w-sectie--ruim { margin-top: 64px; }
.w-sectie__kop { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.w-sectie__kop h2 { font-size: 20px; font-weight: 600; color: var(--w-brand); margin: 0; letter-spacing: -.3px; }
.w-sectie__link { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500;
  color: var(--w-link); text-decoration: none; }

.p-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.p-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.p-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.p-g8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }

/* ---------- Woningkaart ---------- */
.w-kaart { display: flex; flex-direction: column; }
.w-kaart__foto { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: var(--w-brand-lt); }
.w-kaart__foto img { width: 100%; height: 100%; object-fit: cover; }
.w-kaart__badge { position: absolute; top: 9px; left: 9px; background: var(--w-link); color: #fff;
  padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 600; pointer-events: none; }
.w-kaart__gasten { position: absolute; bottom: 9px; right: 9px; background: rgba(10,44,45,.7);
  color: #fff; padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 500;
  display: flex; align-items: center; gap: 4px; pointer-events: none; }
.w-kaart__plek { font-size: 11.5px; color: var(--w-ink3); margin-top: 10px; }
.w-kaart__naam { font-size: 14.5px; font-weight: 600; color: var(--w-brand); margin-top: 3px;
  line-height: 1.35; text-decoration: none; display: block; }
/* Wellness die gedeeld is met andere gasten (accommodaties/wellness_ligging.py). */
.w-kaart__gedeeld { font-size: 11.5px; color: var(--w-ink2); margin-top: 4px; }
.w-kaart__voet { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 9px; }
.w-kaart__vanaf { font-size: 10.5px; color: var(--w-ink3); }
.w-kaart__prijs { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.w-kaart__prijs small { font-size: 11.5px; font-weight: 400; color: var(--w-ink2); }
.w-kaart__score { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.w-kaart__scorewoord { font-size: 11px; color: var(--w-ink2); white-space: nowrap; }
.w-score { background: var(--w-amber); color: #fff; padding: 2px 6px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600; }
.w-promotegel { background: var(--w-promo); color: #fff; border-radius: 8px; padding: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 200px; }
.w-promotegel__a { font-size: 15px; font-weight: 400; line-height: 1.45; }
.w-promotegel__b { font-size: 15.5px; font-weight: 600; line-height: 1.45; }

/* ---------- Themategels ---------- */
/* display:block is hier niet cosmetisch: dit is een <a>, en op een inline element doen
   aspect-ratio, overflow en border-radius niets. De tegels stonden daardoor als enige op de
   site met rechte hoeken. */
.w-thema__foto { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  background: var(--w-brand-lt); }
.w-thema__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.w-thema__label { display: block; font-size: 12.5px; font-weight: 500; margin-top: 8px;
  text-align: center; color: var(--w-brand); text-decoration: none; }

/* ---------- Garantie / USP-kaarten ---------- */
.w-usp { background: var(--w-wash); border-radius: 8px; padding: 20px; }
.w-usp__icoon { width: 36px; height: 36px; border-radius: 8px; background: var(--w-brand-lt);
  display: flex; align-items: center; justify-content: center; }
.w-usp__titel { font-size: 14.5px; font-weight: 600; color: var(--w-brand); margin-top: 13px; }
.w-usp__tekst { font-size: 13px; color: var(--w-ink2); margin-top: 6px; line-height: 1.6; }

/* ---------- Banners ---------- */
.w-banner { border-radius: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  color: #fff; min-height: 190px; overflow: hidden; background: var(--w-brand); }
.w-banner--donker { background: var(--w-brand-dk); }
.w-banner__body { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.w-banner__titel { font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; }
.w-banner__tekst { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 7px; line-height: 1.6; }
.w-banner__cta { align-self: flex-start; margin-top: 16px; background: var(--w-cta); color: #fff;
  padding: 9px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.w-banner__foto { height: 100%; min-width: 0; }
.w-banner__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bestemmingen (landkaartjes) ---------- */
.w-land { position: relative; display: block; height: 96px; background: var(--w-brand-dk);
  border-radius: 8px; overflow: hidden; text-decoration: none; }
.w-land img, .w-land svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-land__naam { position: absolute; left: 12px; bottom: 9px; color: #fff; font-size: 13.5px; font-weight: 600; }
.w-land__aantal { position: absolute; right: 12px; bottom: 9px; color: rgba(255,255,255,.75); font-size: 11px; }

/* ---------- Reviewkaarten ---------- */
.w-quote { border: 1px solid var(--w-line); border-radius: 8px; padding: 20px; }
.w-quote__sterren { display: flex; gap: 2px; }
.w-quote p { font-size: 13.5px; line-height: 1.7; color: var(--w-ink); margin: 11px 0 16px; }
.w-quote__wie { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; }
.w-quote__wie small { color: var(--w-ink3); font-weight: 400; font-size: 12.5px; }
.w-avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--w-brand-lt);
  color: var(--w-brand); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0; }

/* ---------- Tekst + FAQ (details/summary, SSR) ---------- */
.w-subkop { font-size: 14.5px; font-weight: 600; color: var(--w-brand); }
.w-tekst { font-size: 13.5px; line-height: 1.75; color: var(--w-ink2); margin: 6px 0 0; }
.w-faq { border: 1px solid var(--w-line); border-radius: 8px; overflow: hidden; }
.w-faq details { border-top: 1px solid var(--w-line); background: #fff; }
.w-faq details:first-child { border-top: none; }
.w-faq details[open] { background: var(--w-wash); }
.w-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 18px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--w-brand); }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after { content: "+"; font-size: 18px; font-weight: 500; color: var(--w-cta); line-height: 1; }
.w-faq details[open] summary::after { content: "−"; }
.w-faq details p { font-size: 13.5px; line-height: 1.75; color: var(--w-ink2); margin: 0; padding: 0 52px 16px 18px; }

/* Homepagetekst: lopende tekst breed, zijkolom met links naar thema's en magazine. */
.w-hometekst { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.w-hometekst h3.w-subkop { margin: 22px 0 0; }
.w-linklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.w-linklijst a { color: var(--w-brand); font-weight: 500; text-decoration: none; }
.w-linklijst a:hover { text-decoration: underline; }

/* ---------- SEO-blok ---------- */
.w-seoblok { background: var(--w-wash); border-radius: 8px; padding: 32px 36px; gap: 40px; }
.w-seoblok--feiten { grid-template-columns: 280px minmax(0, 1fr); }
.w-seoblok h2 { font-size: 19px; font-weight: 600; color: var(--w-brand); margin: 0; letter-spacing: -.3px; }
.w-seoblok p { font-size: 13.5px; line-height: 1.75; color: var(--w-ink2); margin-top: 11px; }
.w-vinkjes { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.w-vinkjes > div { display: flex; gap: 9px; align-items: center; font-size: 13.5px; }

/* ---------- Footer ---------- */
.w-footer { background: var(--w-brand-dk); color: rgba(255,255,255,.72); margin-top: 64px;
  padding-top: 44px; padding-bottom: 20px; }
.p-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; gap: 32px; }
.w-footer__kop { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 11px; }
.w-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.w-footer ul a { font-size: 12.5px; color: rgba(255,255,255,.72); text-decoration: none; }
.w-footer__nieuwsbrief { font-size: 12.5px; line-height: 1.6; }
.w-footer__mailrij { display: flex; margin-top: 12px; }
.w-footer__mailrij input { flex: 1; min-width: 0; padding: 10px 12px; border: none;
  border-radius: 6px 0 0 6px; font-family: var(--w-font); font-size: 12.5px; outline: none; }
.w-footer__mailrij button { font-family: var(--w-font); background: var(--w-cta); color: #fff;
  border: none; border-radius: 0 6px 6px 0; padding: 0 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.w-footer__onder { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px;
  color: rgba(255,255,255,.5); }
.w-footer__onder a { color: rgba(255,255,255,.5); text-decoration: none; }

/* ---------- Kruimelpad ---------- */
.w-kruimels { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--w-ink3); flex-wrap: wrap; }
.w-kruimels a { color: var(--w-ink3); text-decoration: none; }
.w-kruimels b { color: var(--w-ink2); font-weight: 400; }
.w-kruimels--donker, .w-kruimels--donker a { color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(10,44,45,.5); }
.w-kruimels--donker b { color: #fff; font-weight: 500; }

/* ---------- Chips ---------- */
.w-chip { border: 1px solid var(--w-line); border-radius: 99px; padding: 8px 14px; font-size: 12.5px;
  font-weight: 500; color: var(--w-brand); text-decoration: none; display: inline-block; }
.w-chip:hover { border-color: var(--w-cta); color: var(--w-brand); }
.w-chip--actief { background: var(--w-brand-lt); border-color: var(--w-brand-lt); }
.w-chips { display: flex; gap: 9px; flex-wrap: wrap; }

/* Klimaatgrafiek (plaatspagina) — overgenomen uit design.css, in de wellness-tokens. */
.weather { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px;
  align-items: end; padding: 18px; background: var(--w-wash); border-radius: 8px; }
.weather__col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.weather__track { display: flex; align-items: flex-end; height: 110px; }
.weather__bar { width: 22px; border-radius: 4px 4px 0 0; }
.weather__temp { font-size: 12px; font-weight: 600; color: var(--w-brand); }
.weather__sea { font-size: 10.5px; color: var(--w-ink3); }
.weather__m { font-size: 10.5px; color: var(--w-ink2); }
@media (max-width: 720px) { .weather__bar { width: 100%; } .weather { gap: 4px; padding: 12px; } }

/* ---------- Lopende SEO-tekst (partials/seo_sections.html) ---------- */
/* De redactionele tekst komt als HTML uit de database: opmaken via de elementen zelf,
   want daar kunnen geen klassen aan meegegeven worden. */
.w-seotekst { font-size: 13.5px; line-height: 1.75; color: var(--w-ink2); }
.w-seotekst h2 { font-size: 19px; font-weight: 600; color: var(--w-brand); letter-spacing: -.3px;
  margin: 0 0 12px; }
.w-seotekst h3 { font-size: 15px; font-weight: 600; color: var(--w-brand); margin: 22px 0 8px; }
.w-seotekst p { margin: 0 0 12px; }
.w-seotekst ul, .w-seotekst ol { margin: 0 0 12px; padding-left: 20px; }
.w-seotekst li { margin-bottom: 5px; }
.w-seotekst a { color: var(--w-link); }
.w-seotekst table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.w-seotekst th, .w-seotekst td { text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--w-line); }
.w-seotekst th { font-weight: 600; color: var(--w-brand); background: #fff; }
.w-seotekst__bron { font-size: 11.5px; color: var(--w-ink3); margin-top: 16px; }

/* ---------- Juridische pagina's (voorwaarden, privacy, cookies) ----------
   Eén leeskolom met een rustige typografische hiërarchie. Deze pagina's hadden hun opmaak
   in een inline <style> met variabelen uit het oude systeem; die bestonden hier niet meer,
   waardoor de tekst als kale HTML op de pagina stond. */
.w-legal { max-width: 780px; }
.w-legal__kop { border-bottom: 1px solid var(--w-line); padding-bottom: 22px; margin-bottom: 8px; }
.w-legal__label { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--w-cta); }
.w-legal__kop h1 { font-size: 30px; font-weight: 600; color: var(--w-brand); letter-spacing: -.7px;
  margin: 8px 0 0; }
.w-legal__versie { font-size: 13.5px; line-height: 1.7; color: var(--w-ink2); margin: 8px 0 0; }
.w-legal h2 { font-size: 19px; font-weight: 600; color: var(--w-brand); letter-spacing: -.3px;
  margin: 34px 0 10px; }
.w-legal h3 { font-size: 15.5px; font-weight: 600; color: var(--w-brand); margin: 24px 0 8px; }
.w-legal p, .w-legal li { font-size: 14px; line-height: 1.75; color: var(--w-ink2); }
.w-legal p { margin: 0 0 12px; }
.w-legal ul, .w-legal ol { padding-left: 20px; margin: 8px 0 14px; }
.w-legal li { margin-bottom: 6px; }
.w-legal b, .w-legal strong { color: var(--w-ink); font-weight: 600; }
.w-legal a { color: var(--w-link); }
.w-legal table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0 18px; }
.w-legal th, .w-legal td { border: 1px solid var(--w-line); padding: 9px 12px; text-align: left;
  vertical-align: top; color: var(--w-ink2); }
.w-legal th { background: var(--w-wash); color: var(--w-brand); font-weight: 600; }
.w-legal__slot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--w-line);
  font-size: 12.5px; color: var(--w-ink3); }

/* ---------- Zoekbalk (sbx): de uitgewerkte balk van vakantiewoningen.nl ----------
   Overgenomen inclusief autocomplete, kalender van twee maanden, gasten-steppers en het
   filterpaneel; alleen de opmaak is naar de wellness-tokens gebracht. De HTML staat in
   partials/searchbar.html en het gedrag in static/js/search.js — beide ongewijzigd, want
   die interactie is uitgekauwd en werkt zonder JS ook nog (bestemming + Zoeken). */
.sbx { position: relative; background: #fff; border-radius: 8px; padding: 5px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr .9fr auto; gap: 4px;
  align-items: stretch; color: var(--w-ink);
  box-shadow: 0 12px 30px -12px rgba(10, 44, 45, .3); }
.w-hero .sbx { box-shadow: 0 12px 30px -12px rgba(10, 44, 45, .45); }
.sbx__field { position: relative; text-align: left; background: transparent; border: none;
  border-right: 1px solid var(--w-line); padding: 8px 14px; cursor: pointer;
  font-family: var(--w-font); min-width: 0; border-radius: 6px 0 0 6px; }
.sbx__field:hover { background: var(--w-wash); }
.sbx__field label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--w-ink3); cursor: pointer; }
.sbx__field input { width: 100%; border: 0; background: transparent; font-family: var(--w-font);
  font-size: 14px; font-weight: 500; color: var(--w-ink); padding: 2px 0 0; outline: none; }
.sbx__field > span { display: block; font-size: 14px; font-weight: 500; color: var(--w-ink);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx__submit { align-self: center; height: 44px; padding: 0 24px; border: none; border-radius: 6px;
  background: var(--w-cta); color: #fff; font-family: var(--w-font); font-size: 14px;
  font-weight: 600; cursor: pointer; }
.sbx__submit:hover { filter: brightness(.96); }

.sbx-pop { position: absolute; top: calc(100% + 8px); z-index: 60; background: #fff;
  border: 1px solid var(--w-line); border-radius: 10px; color: var(--w-ink);
  box-shadow: 0 22px 48px -20px rgba(10, 44, 45, .38); }
.sbx-ac { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; z-index: 60;
  background: #fff; border: 1px solid var(--w-line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 22px 48px -20px rgba(10, 44, 45, .38); }
.sbx-ac__item { display: block; width: 100%; text-align: left; padding: 11px 16px; background: #fff;
  border: none; border-top: 1px solid var(--w-line); cursor: pointer; font-family: var(--w-font); }
.sbx-ac__item:first-child { border-top: none; }
.sbx-ac__item:hover { background: var(--w-wash); }
.sbx-ac__item b { display: block; font-size: 13.5px; font-weight: 600; color: var(--w-brand); }
.sbx-ac__item span { display: block; font-size: 12px; color: var(--w-ink3); margin-top: 2px; }

.sbx-cal { left: 50%; transform: translateX(-50%); width: 640px; padding: 20px 20px 16px; }
.sbx-cal__months { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sbx-cal__nav { position: absolute; top: -4px; width: 32px; height: 32px; border-radius: 999px;
  background: #fff; border: 1px solid var(--w-line); cursor: pointer; font-size: 15px;
  color: var(--w-brand); z-index: 2; }
.sbx-cal__nav:hover { border-color: var(--w-cta); }
.sbx-cal__nav--prev { left: 0; } .sbx-cal__nav--next { right: 0; }
.sbx-cal__title { text-align: center; font-weight: 600; font-size: 14.5px; color: var(--w-brand);
  margin-bottom: 12px; }
.sbx-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sbx-cal__wd { text-align: center; font-size: 10px; font-weight: 600; color: var(--w-ink3);
  padding: 4px 0; letter-spacing: .04em; }
.sbx-cal__day { aspect-ratio: 1; border: none; background: transparent; border-radius: 999px;
  font-family: var(--w-font); font-size: 13px; font-weight: 500; color: var(--w-ink); cursor: pointer; }
.sbx-cal__day:hover { background: var(--w-wash); }
.sbx-cal__day.is-past { color: var(--w-line); cursor: default; }
.sbx-cal__day.is-sel { background: var(--w-brand); color: #fff; }
.sbx-cal__day.is-range { background: var(--w-brand-lt); border-radius: 0; }
.sbx-cal__foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--w-line); }
.sbx-cal__hint { font-size: 12.5px; color: var(--w-ink2); }

.sbx-guests { right: 90px; width: 280px; padding: 18px; }
.sbx-guests__row { display: grid; grid-template-columns: 1fr 32px 30px 32px; align-items: center;
  gap: 6px; padding: 8px 0; }
.sbx-guests__row span { font-size: 13.5px; font-weight: 500; }
.sbx-guests__row b { text-align: center; font-size: 15px; font-weight: 600; }
.sbx-guests__row button { width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--w-line); background: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; color: var(--w-brand); font-family: var(--w-font); }
.sbx-guests__row button:hover { border-color: var(--w-cta); }
.sbx-guests__apply, .sbx-cal__foot button, .sbx-filters__voet button {
  border: none; border-radius: 6px; background: var(--w-cta); color: #fff;
  font-family: var(--w-font); font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; }
.sbx-guests__apply { width: 100%; margin-top: 10px; }
.sbx-cal__foot button:disabled { opacity: .4; cursor: default; }

/* Filterpaneel */
.sbx-filters { left: 0; right: 0; width: auto; padding: 0; z-index: 95;
  max-height: min(66vh, 520px); display: none; flex-direction: column; overflow-y: auto; }
.sbx-filters:not([hidden]) { display: flex; }
.sbx-filters__kop { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--w-line); flex: none; }
.sbx-filters__kop b { font-size: 14.5px; font-weight: 600; color: var(--w-brand); }
.sbx-filters__wis { border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--w-ink3); cursor: pointer; text-decoration: underline; font-family: var(--w-font); }
.sbx-filters__wis:hover { color: var(--w-cta); }
.sbx-filters__groep { padding: 12px 18px 2px; flex: none; }
.sbx-filters__titel { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--w-ink3); margin-bottom: 9px; }
.sbx-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sbx-filters__voet { position: sticky; bottom: 0; margin-top: 10px; padding: 12px 18px;
  background: #fff; border-top: 1px solid var(--w-line); border-radius: 0 0 10px 10px; }
.sbx-filters__voet button { width: 100%; }

.fchip { cursor: pointer; }
.fchip input { position: absolute; opacity: 0; pointer-events: none; }
.fchip__in { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--w-line);
  border-radius: 999px; padding: 8px 14px 8px 11px; font-size: 13px; font-weight: 500;
  color: var(--w-ink); background: #fff; transition: border-color .12s, background .12s, color .12s; }
.fchip__in svg { flex: none; color: var(--w-ink3); }
.fchip:hover .fchip__in { border-color: var(--w-ink3); }
.fchip input:checked + .fchip__in { border-color: var(--w-cta); background: #FDEDE6;
  color: var(--w-brand); }
.fchip input:checked + .fchip__in svg { color: var(--w-cta); }
.fchip input:focus-visible + .fchip__in { outline: 2px solid var(--w-link); outline-offset: 2px; }

/* Actieve filters als pills onder de balk */
.sbx-active { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 10px 4px; }
.sbx-active[hidden] { display: none; }
.sbx-active .apill { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  font-family: var(--w-font); font-size: 12.5px; font-weight: 600; color: var(--w-cta);
  background: #FDEDE6; border-radius: 999px; padding: 6px 11px; }
.sbx-active .apill:hover { background: #FBDFD3; }

@media (max-width: 900px) {
  .sbx { grid-template-columns: 1fr 1fr; }
  .sbx__field--dest, .sbx__submit { grid-column: span 2; }
  .sbx__field { border-right: none; border-bottom: 1px solid var(--w-line); }
  .sbx-cal { width: min(94vw, 640px); }
  .sbx-cal__months { grid-template-columns: 1fr; }
  .sbx-guests { right: 0; }
}
@media (max-width: 560px) {
  /* Twee kolommen in plaats van alles onder elkaar. Vijf volle velden plus een knop maakten
     de zoekbalk zo hoog dat de hero eromheen het halve scherm at. Nu: bestemming over de
     volle breedte, dan aankomst naast vertrek, gasten naast filters, knop eronder. Dat
     scheelt twee rijen en leest nog steeds als een formulier. */
  .sbx { grid-template-columns: 1fr 1fr; gap: 0; }
  .sbx__field { min-width: 0; border-right: 1px solid var(--w-line);
    border-bottom: 1px solid var(--w-line); border-radius: 0; padding: 6px 12px; }
  .sbx__field:nth-of-type(2n) { border-right: none; }
  .sbx__field--dest, .sbx__submit { grid-column: 1 / -1; }
  .sbx__field--dest { border-right: none; }
  .sbx__field label { font-size: 10px; }
  .sbx__field > span, .sbx__field input { font-size: 13.5px; }
  .sbx__field input { padding: 1px 0; }
  .sbx__submit { height: 46px; margin-top: 8px; }
  .sbx-ac { width: 100%; }
  .sbx-guests { left: 0; right: auto; width: 100%; }
  /* Eén maand op mobiel: twee onder elkaar duwden Toepassen buiten beeld. */
  .sbx-cal { left: 0; transform: none; width: 100%; padding: 16px; max-height: 72vh; overflow-y: auto; }
  .sbx-cal__month + .sbx-cal__month { display: none; }
  .sbx-cal__foot { position: sticky; bottom: 0; background: #fff; padding-bottom: 4px; }
}

/* ---------- Woningdetail (wellness-detail.jsx) ---------- */
.wd-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 158px 158px;
  gap: 8px; height: 324px; }
.wd-gal__cel { position: relative; min-height: 0; border-radius: 8px; overflow: hidden;
  background: var(--w-brand-lt); }
.wd-gal__cel:first-child { grid-row: span 2; }
.wd-gal__cel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.wd-gal__knop { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; }
.wd-gal__knop:hover img { transform: scale(1.03); }
.wd-gal__knop:focus-visible { outline: 3px solid var(--w-cta); outline-offset: -3px; }
.wd-gal__meer { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.94);
  border-radius: 6px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--w-brand);
  text-decoration: none; display: flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  font-family: var(--w-font); }
.wd-gal__meer:hover { background: #fff; }

/* Fotopopup */
.wd-lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8, 22, 22, .96); color: #fff; }
.wd-lb[open] { display: flex; flex-direction: column; }
.wd-lb::backdrop { background: rgba(8, 22, 22, .96); }
.wd-lb__kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.wd-lb__teller { font-size: 13.5px; font-weight: 500; letter-spacing: .3px; }
.wd-lb__sluit { background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0; border-radius: 50%; }
.wd-lb__sluit:hover { background: rgba(255,255,255,.12); }
.wd-lb__podium { position: relative; flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: 0 76px; touch-action: pan-y; }
.wd-lb__foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.wd-lb__pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.92); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.wd-lb__pijl:hover { background: #fff; }
.wd-lb__pijl[hidden] { display: none; }
.wd-lb__pijl--vorige { left: 16px; }
.wd-lb__pijl--volgende { right: 16px; }
.wd-lb__podium { margin-bottom: 24px; }
@media (max-width: 700px) {
  .wd-lb__podium { padding: 0; }
  .wd-lb__foto { border-radius: 0; }
  .wd-lb__pijl { width: 40px; height: 40px; background: rgba(255,255,255,.8); }
  .wd-lb__pijl--vorige { left: 8px; }
  .wd-lb__pijl--volgende { right: 8px; }
}
.wd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.wd-side { position: sticky; top: 16px; }
@media (max-width: 1120px) {
  .wd-cols { grid-template-columns: 1fr; }
  .wd-side { position: static; max-width: 420px; }
}
@media (max-width: 860px) {
  .wd-gal { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; height: 308px; }
}

/* ---------- Responsief (breakpoints uit de handoff; niets verdwijnt, alles klapt om) ---------- */
@media (max-width: 1000px) {
  .p-g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-g8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-zoek__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Zoekpagina smal: de filterkolom gaat boven de resultaten, dicht achter de knop "Filters". */
@media (max-width: 800px) {
  .w-zoek__opzet { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .w-filters__knop { display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    border: 1px solid var(--w-line); border-radius: 999px; padding: 9px 16px; background: #fff;
    font-size: 14px; font-weight: 600; color: var(--w-brand); cursor: pointer; }
  .w-filters__schakel:focus-visible + .w-filters__knop { outline: 2px solid var(--w-brand); }
  .w-filters { display: none; }
  .w-filters__schakel:checked ~ .w-filters { display: block; }
}
/* Smalle desktop: vijf menu-items passen niet naast logo, Verhuren en Contact. Verhuren en het
   seizoenslabel vallen hier weg (Verhuren staat ook in de footer), de items schuiven in. */
@media (max-width: 1100px) {
  .w-header__in { gap: 12px; }
  .w-nav__link { padding: 0 6px; }
  .w-nav .w-nav__label, .w-header__acties .w-verberg-mobiel { display: none; }
  .w-mega__in { gap: 24px; }
  .w-mega__in--aanbod, .w-mega__in--bestemmingen, .w-mega__in--gids { grid-template-columns: repeat(3, minmax(0, 1fr)) 230px; }
}
@media (max-width: 940px) {
  .w-nav { display: none; }
  .w-burger { display: block; align-self: center; }
  .w-header__acties .w-verberg-mobiel { display: none; }
}
@media (max-width: 900px) {
  .p-g2, .w-hometekst { grid-template-columns: 1fr; }
  .w-banner { grid-template-columns: 1fr 1fr; }
  .w-seoblok { padding: 24px; }
  .w-seoblok--feiten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .p-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-zoekbalk { flex-wrap: wrap; }
  .w-zoekbalk__veld { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--w-line); }
  .w-zoekbalk__knop { flex-basis: 100%; justify-content: center; padding: 12px 24px; }
  .w-zoekform__veld { flex-basis: 100%; }
  .w-zoekform .w-zoekbalk__knop { flex-basis: 100%; }
  .w-zoek__kop { font-size: 21px; }
}
@media (max-width: 720px) {
  .p-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Twee themategels naast elkaar. Vier pasten op papier maar niet in de praktijk: bij
     ongeveer 80 pixels per tegel liepen de labels ("Kindvriendelijk") in elkaar over. */
  .p-g8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .w-thema__label { font-size: 13px; margin-top: 9px; }
  .w-wrap { padding: 0 18px; }

  /* Topstrip en garantiebalk op één regel die zijwaarts schuift. Met omklappen namen ze
     samen bijna een derde van het eerste scherm in beslag, nog voor de hero begint. Alle
     vier de punten blijven staan (mobiel toont hetzelfde als desktop), maar de bezoeker
     ziet eerst waar de site over gaat. */
  .w-topstrip .w-wrap, .w-garantiebalk .w-wrap {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 18px; padding-top: 9px; padding-bottom: 9px;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  }
  .w-topstrip .w-wrap::-webkit-scrollbar, .w-garantiebalk .w-wrap::-webkit-scrollbar { display: none; }
  .w-topstrip .w-wrap > *, .w-garantiebalk .w-wrap > * { flex: none; white-space: nowrap; }
  .w-topstrip .w-wrap { font-size: 12px; }
  .w-garantiebalk .w-wrap { font-size: 12.5px; }

  /* Nieuwsbrief in de voettekst: het invoerveld en de knop naast elkaar lieten van het veld
     een strookje over waarin "Je e-n" paste. Onder elkaar, allebei over de volle breedte. */
  .w-footer__mailrij { flex-wrap: wrap; gap: 8px; }
  .w-footer__mailrij input { flex: 1 0 100%; border-radius: 6px; padding: 12px 14px; font-size: 14px; }
  .w-footer__mailrij button { flex: 1 0 100%; border-radius: 6px; padding: 12px 14px; font-size: 14px; }

  /* De hero laat de inhoud de hoogte bepalen in plaats van vast 430 px: de zoekbalk paste
     daar niet in en drukte de titel eruit. Het minimum is bewust bescheiden, want de
     zoekbalk staat op twee kolommen en de bezoeker moet ook zien wat eronder staat. */
  .w-hero, .w-hero--land { height: auto; min-height: 0; }
  .w-hero__in { padding-top: 36px; padding-bottom: 24px; }
  .w-hero h1, .w-hero--land h1 { font-size: 27px; letter-spacing: -.6px; max-width: none; }
  .w-hero__sub { font-size: 14px; }
  .w-hero__zoek { margin-top: 18px; }
  /* Meer verloop onderin: op een staand scherm staat de tekst over een groter deel van de
     foto en werd hij anders onleesbaar. */
  .w-hero__grad {
    background: linear-gradient(180deg, rgba(10,44,45,.34) 0%, rgba(10,44,45,.28) 30%, rgba(10,44,45,.82) 100%);
  }
}
@media (max-width: 520px) {
  .p-g3 { grid-template-columns: 1fr; }
  .w-banner { grid-template-columns: 1fr; }
  .w-banner__foto { min-height: 150px; order: -1; }
}

/* ---------- Magazine ---------- */
/* Overzicht uit wellness-blog.jsx (WBlogIndex + WBlogCard) en de artikelpagina uit
   wellness-article.jsx (WArticle: leeskolom + zijkolom met inhoudsopgave). Zelfde
   maatvoering, tokens en breakpoints als de rest van dit bestand. */

/* Kop van het overzicht */
.w-magkop { max-width: 620px; margin-top: 14px; }
.w-magkop h1 { font-size: 28px; font-weight: 600; color: var(--w-brand); letter-spacing: -.7px; margin: 0; }
.w-magkop p { font-size: 14px; line-height: 1.7; color: var(--w-ink2); margin: 9px 0 0; }

/* Filterrij: dezelfde chips als elders, actief in de merkkleur (uit het design) */
.w-chip--vol { background: var(--w-brand); border-color: var(--w-brand); color: #fff; }
.w-chip--vol:hover { color: #fff; border-color: var(--w-brand); }
.w-chip em { font-style: normal; color: var(--w-ink3); }
.w-chip--vol em { color: rgba(255, 255, 255, .7); }

/* Uitgelicht artikel */
.w-mag-uit { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: stretch; }
.w-mag-lead { position: relative; display: block; min-height: 360px; border-radius: 8px;
  overflow: hidden; text-decoration: none; background: var(--w-brand-dk); }
.w-mag-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-mag-lead__grad { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,44,45,.05) 30%, rgba(10,44,45,.82) 100%); }
.w-mag-lead__cap { position: absolute; left: 26px; right: 26px; bottom: 24px; pointer-events: none; }
.w-mag-lead__badge { display: inline-block; background: var(--w-cta); color: #fff; padding: 3px 9px;
  border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.w-mag-lead__titel { display: block; color: #fff; font-size: 24px; font-weight: 600;
  letter-spacing: -.6px; line-height: 1.25; margin-top: 11px; }
.w-mag-lead__tekst { display: block; color: rgba(255,255,255,.82); font-size: 13.5px;
  line-height: 1.65; margin-top: 8px; max-width: 520px; }
.w-mag-lead__meta { display: block; color: rgba(255,255,255,.6); font-size: 11.5px; margin-top: 11px; }

/* Kolommetje met kleine artikelen naast het uitgelichte stuk */
.w-mag-mini { display: grid; gap: 18px; align-content: start; }
.w-mag-mini--rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.w-mag-mini > a { display: grid; grid-template-columns: 112px 1fr; gap: 14px; text-decoration: none; }
.w-mag-mini__foto { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: var(--w-brand-lt); }
.w-mag-mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.w-mag-mini__meta { display: block; font-size: 11px; color: var(--w-ink3); }
.w-mag-mini__titel { display: block; font-size: 14px; font-weight: 600; color: var(--w-brand);
  line-height: 1.35; margin-top: 4px; }

/* Artikelkaart (WBlogCard) */
.w-artkaart { display: flex; flex-direction: column; text-decoration: none; }
.w-artkaart__foto { display: block; position: relative; aspect-ratio: 3 / 2; border-radius: 8px;
  overflow: hidden; background: var(--w-brand-lt); }
.w-artkaart--groot .w-artkaart__foto { aspect-ratio: 16 / 9; }
.w-artkaart__foto img { width: 100%; height: 100%; object-fit: cover; }
.w-artkaart__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  margin-top: 12px; font-size: 11.5px; color: var(--w-ink3); }
.w-artkaart__cat { color: var(--w-cta); font-weight: 600; }
.w-artkaart__titel { display: block; font-size: 15.5px; font-weight: 600; color: var(--w-brand);
  margin-top: 6px; line-height: 1.3; letter-spacing: -.3px; }
.w-artkaart--groot .w-artkaart__titel { font-size: 21px; }
.w-artkaart__tekst { display: block; font-size: 13px; line-height: 1.7; color: var(--w-ink2); margin-top: 8px; }
.w-artkaart--groot .w-artkaart__tekst { font-size: 14.5px; }

.w-mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.w-mag-leeg { font-size: 13.5px; line-height: 1.75; color: var(--w-ink2); background: var(--w-wash);
  border-radius: 8px; padding: 24px 26px; margin: 0; }

/* Paginering (de "meer laden"-knop uit het design, maar met echte pagina's) */
.w-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.w-pager__knop { border: 1px solid var(--w-line); background: #fff; border-radius: 6px;
  padding: 11px 22px; font-size: 13px; font-weight: 500; color: var(--w-brand); text-decoration: none; }
.w-pager__knop--uit { color: var(--w-ink3); }
.w-pager__nu { font-size: 12.5px; color: var(--w-ink3); }

/* Nieuwsbriefblok onder het overzicht */
.w-mag-brief { background: var(--w-brand); border-radius: 8px; color: #fff; display: grid;
  grid-template-columns: 1.2fr 1fr; gap: 32px; padding: 30px 34px; align-items: center; }
.w-mag-brief__titel { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.w-mag-brief p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.78); margin: 8px 0 0; }
.w-mag-brief form { display: flex; }
.w-mag-brief input { flex: 1; min-width: 0; padding: 12px 14px; border: none;
  border-radius: 6px 0 0 6px; font-family: var(--w-font); font-size: 13px; outline: none; }
.w-mag-brief button { font-family: var(--w-font); background: var(--w-cta); color: #fff; border: none;
  border-radius: 0 6px 6px 0; padding: 0 18px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* --- Artikelpagina --- */
.w-art__kop { max-width: 720px; margin-top: 16px; }
.w-art__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  font-size: 12px; color: var(--w-ink3); }
.w-art__meta a { color: var(--w-ink3); text-decoration: none; }
.w-art__cat { color: var(--w-cta); font-weight: 600; }
.w-art__kop h1 { font-size: 34px; font-weight: 600; color: var(--w-brand); letter-spacing: -1px;
  line-height: 1.2; margin: 10px 0 0; }
.w-art__lead { font-size: 16.5px; line-height: 1.75; color: var(--w-ink2); margin: 14px 0 0; }
.w-art__hero { position: relative; height: 400px; border-radius: 8px; overflow: hidden;
  background: var(--w-brand-lt); }
.w-art__hero img { width: 100%; height: 100%; object-fit: cover; }
.w-art__bijschrift { font-size: 11.5px; color: var(--w-ink3); margin-top: 8px; }
.w-art__bijschrift a { color: var(--w-ink3); }

.w-art__kolommen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
.w-art__body { max-width: 700px; min-width: 0; font-size: 15px; line-height: 1.8; color: var(--w-ink); }
.w-art__body p { margin: 0 0 16px; }
.w-art__body h2 { font-size: 20px; font-weight: 600; color: var(--w-brand); letter-spacing: -.4px;
  line-height: 1.35; margin: 34px 0 12px; scroll-margin-top: 24px; }
.w-art__body h3 { font-size: 16.5px; font-weight: 600; color: var(--w-brand); letter-spacing: -.2px;
  line-height: 1.4; margin: 26px 0 10px; scroll-margin-top: 24px; }
.w-art__body ul, .w-art__body ol { margin: 0 0 16px; padding-left: 20px; }
.w-art__body li { margin-bottom: 7px; }
.w-art__body a { color: var(--w-link); text-decoration: underline; text-underline-offset: 2px; }
.w-art__body a:hover { color: var(--w-brand); }
.w-art__body img { width: 100%; border-radius: 8px; margin: 8px 0; }
.w-art__body table { width: 100%; border-collapse: collapse; border: 1px solid var(--w-line);
  border-radius: 8px; overflow: hidden; font-size: 13px; margin: 0 0 16px; }
.w-art__body th, .w-art__body td { padding: 11px 16px; border-top: 1px solid var(--w-line); text-align: left; }
.w-art__tabel { overflow-x: auto; margin: 0 0 16px; }
.w-art__tabel table { margin: 0; }
@media (max-width: 600px) { .w-art__body th, .w-art__body td { padding: 9px 10px; } }
.w-art__body th { background: var(--w-wash); color: var(--w-brand); font-weight: 600; }
.w-art__body tr:first-child th, .w-art__body tr:first-child td { border-top: none; }
.w-art__lead--body { font-size: 16px; line-height: 1.8; color: var(--w-ink2); margin: 0 0 20px; }

.w-art__citaat { border-left: 3px solid var(--w-cta); padding-left: 20px; margin: 28px 0; }
.w-art__citaat p { font-size: 19px; font-weight: 500; line-height: 1.55; color: var(--w-brand);
  letter-spacing: -.3px; margin: 0; }
.w-art__citaat footer { font-size: 12.5px; color: var(--w-ink2); margin-top: 9px; }
.w-art__figuur { margin: 24px 0 28px; }
.w-art__figuur img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin: 0; }
.w-art__figuur figcaption { margin-top: 8px; font-size: 11.5px; color: var(--w-ink3); }
.w-art__figuur figcaption a { color: var(--w-ink3); }

/* Woningenblok in de leeskolom (design: "Woningen waar het water al warm is").
   Dient ook als omlijsting van de woningen-carousel tussen de hoofdstukken. */
.w-art__woningen { background: var(--w-wash); border-radius: 8px; padding: 22px 22px 24px; margin: 30px 0; }
.w-art__woningen-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.w-art__woningen-titel { font-size: 14.5px; font-weight: 600; color: var(--w-brand); }
.w-art__woningen-sub { font-size: 12.5px; color: var(--w-ink2); margin-top: 5px; }
.w-art__woningen-alle { font-size: 12.5px; font-weight: 600; color: var(--w-cta);
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.w-art__woningen-spoor { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-top: 16px; padding-bottom: 6px; }
.w-art__woningen-spoor > * { flex: 0 0 210px; scroll-snap-align: start; }

/* Zijkolom */
.w-art__zij { position: sticky; top: 16px; display: grid; gap: 22px; }
.w-zij__label { font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--w-ink3); margin-bottom: 10px; }
.w-toc { display: grid; gap: 8px; border-left: 1px solid var(--w-line); }
.w-toc a { font-size: 12.5px; color: var(--w-ink2); text-decoration: none; padding-left: 12px; line-height: 1.5; }
.w-toc a:hover { color: var(--w-brand); }
.w-tocbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
.w-tocbox > summary::-webkit-details-marker { display: none; }
.w-tocbox > summary .w-zij__label { margin-bottom: 0; }
.w-tocbox__n { font-size: 11px; color: var(--w-ink3); }
.w-tocbox[open] > summary { margin-bottom: 10px; }
.w-zij-cta { background: var(--w-brand); border-radius: 8px; padding: 18px; color: #fff; }
.w-zij-cta__titel { font-size: 14px; font-weight: 600; }
.w-zij-cta p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 6px 0 0; }
.w-zij-cta a { display: block; margin-top: 13px; background: var(--w-cta); color: #fff;
  text-align: center; padding: 9px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; }
.w-zij-lijst { display: grid; gap: 14px; }
.w-zij-lijst > a { display: grid; grid-template-columns: 64px 1fr; gap: 11px; text-decoration: none;
  font-size: 12.5px; font-weight: 500; color: var(--w-brand); line-height: 1.4; align-items: start; }
.w-zij-lijst__foto { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  background: var(--w-brand-lt); }
.w-zij-lijst__foto img { width: 100%; height: 100%; object-fit: cover; }
.w-deel { display: flex; flex-wrap: wrap; gap: 8px; }
.w-deel a, .w-deel button { font-family: var(--w-font); border: 1px solid var(--w-line);
  background: #fff; border-radius: 6px; padding: 7px 11px; font-size: 12px; font-weight: 500;
  color: var(--w-brand); text-decoration: none; cursor: pointer; }
.w-deel a:hover, .w-deel button:hover { border-color: var(--w-cta); }

/* Artikelslider op locatiepagina's */
.w-aslider__nav { margin-left: auto; display: flex; gap: 8px; }
.w-aslider__pijl { font-family: var(--w-font); width: 34px; height: 34px; border: 1px solid var(--w-line);
  background: #fff; border-radius: 99px; font-size: 16px; line-height: 1; color: var(--w-brand); cursor: pointer; }
.w-aslider__spoor { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; }
.w-aslider__cel { flex: 0 0 300px; scroll-snap-align: start; }

/* Het auteursblok en de auteursregel komen uit partials/auteur.html, dat ook op de
   redacteurspagina's staat. Hier krijgen ze de wellness-tokens; de opmaak in design.css
   is de oude huisstijl en verdwijnt met dat bestand. */
.aut-regel { display: flex; align-items: center; gap: 11px; }
.aut-regel b { display: block; font-size: 13px; font-weight: 600; color: var(--w-brand); }
.aut-regel b a { color: inherit; text-decoration: none; }
.aut-regel > div > span { display: block; font-size: 11.5px; color: var(--w-ink3); margin-top: 2px; }
.aut-foto { width: 34px; height: 34px; min-width: 34px; border-radius: 99px; overflow: hidden;
  background: var(--w-brand-lt); color: var(--w-brand); display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 600; }
.aut-foto img { width: 100%; height: 100%; object-fit: cover; }
.aut-foto--l { width: 46px; height: 46px; min-width: 46px; font-size: 17px; }
.aut-kort { color: inherit; text-decoration: none; font-weight: 600; }
.artd__authorbox { display: flex; gap: 14px; align-items: center; border: 1px solid var(--w-line);
  border-radius: 8px; padding: 18px; margin-top: 34px; background: #fff; }
.artd__authorbox .side-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .7px;
  text-transform: uppercase; color: var(--w-ink3); }
.artd__authorbox b { display: block; font-size: 13.5px; font-weight: 600; color: var(--w-brand); margin-top: 3px; }
.artd__authorbox b a { color: inherit; text-decoration: none; }
.artd__authorbox p { font-size: 12.5px; color: var(--w-ink2); margin: 3px 0 0; line-height: 1.6; }
.artd__authorbox > div > a { display: inline-block; margin-top: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--w-cta); text-decoration: none; }

@media (max-width: 1000px) {
  .w-art__kolommen { grid-template-columns: 1fr; gap: 32px; }
  .w-art__zij { position: static; }
  .w-art__body { max-width: none; }
  .w-art__hero { height: 300px; }
}
@media (max-width: 900px) {
  .w-mag-uit { grid-template-columns: 1fr; gap: 22px; }
  .w-mag-lead { min-height: 300px; }
  .w-mag-brief { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
}
@media (max-width: 860px) {
  .w-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .w-mag-mini--rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-art__kop h1 { font-size: 27px; letter-spacing: -.7px; }
  .w-art__lead { font-size: 15px; }
}
@media (max-width: 720px) {
  .w-art__hero { height: 220px; }
  .w-aslider__cel { flex-basis: 260px; }
  .w-mag-lead__cap { left: 18px; right: 18px; bottom: 18px; }
  .w-mag-lead__titel { font-size: 20px; }
}
@media (max-width: 520px) {
  .w-mag-grid { grid-template-columns: 1fr; }
  .w-mag-mini--rij { grid-template-columns: 1fr; }
  .w-mag-mini > a { grid-template-columns: 92px 1fr; }
  .w-pager { flex-wrap: wrap; gap: 10px; }
}

/* --- Woningpagina: kalender, prijs en boeken (Interhome) ---------------------------- */
.wk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.wk__meer { margin-top: 22px; }
.wk__meer > summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--w-brand); margin-bottom: 18px; }
.wk__maand { font-size: 13px; font-weight: 600; color: var(--w-brand); margin-bottom: 8px; text-transform: capitalize; }
.wk__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wk__kop { font-size: 10px; color: var(--w-ink3); text-align: center; padding-bottom: 3px; }
.wk__dag { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; border-radius: 5px; color: var(--w-ink); background: var(--w-wash);
  text-decoration: none; position: relative; }
.wk__dag--buiten { background: transparent; color: var(--w-ink3); }
.wk__dag--bezet { background: #F1F1F1; color: #B9C3C1; text-decoration: line-through; }
.wk__dag--aanvraag { background: #FBF3E2; color: var(--w-ink2); }
.wk__dag--vrij { background: #E8F1EF; color: var(--w-brand); }
a.wk__dag--checkin { background: #D7EAE5; font-weight: 600; cursor: pointer; }
a.wk__dag--checkin:hover, a.wk__dag--vertrek:hover { background: var(--w-brand); color: #fff; }
a.wk__dag--vertrek { background: #FDEDE6; color: var(--w-cta); font-weight: 600; }
.wk__dag--gekozen { background: var(--w-cta) !important; color: #fff !important; font-weight: 600; }
.wk__dag--verblijf { background: #FDEDE6 !important; color: var(--w-cta); }
.wk__legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11.5px; color: var(--w-ink2); }
.wk__legenda span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; background: var(--w-wash); }
.wk__legenda .l-checkin::before { background: #D7EAE5; }
.wk__legenda .l-vrij::before { background: #E8F1EF; }
.wk__legenda .l-bezet::before { background: #F1F1F1; }
.wk__legenda .l-aanvraag::before { background: #FBF3E2; }
.wk__legenda .l-gekozen::before { background: var(--w-cta); }
.wk__legenda .l-vertrek::before { background: #FDEDE6; box-shadow: inset 0 0 0 1px #F6C3AE; }
/* Datumkiezer (wk.js): dagen zijn knoppen, vertrekdagen dragen hun prijs */
button.wk__dag { font-family: var(--w-font); border: none; padding: 0; cursor: pointer; flex-direction: column; gap: 1px; line-height: 1.1; }
button.wk__dag--checkin { background: #D7EAE5; font-weight: 600; }
button.wk__dag--checkin:hover, button.wk__dag--vertrek:hover { background: var(--w-brand); color: #fff; }
button.wk__dag--vertrek { background: #FDEDE6; color: var(--w-cta); font-weight: 600; box-shadow: inset 0 0 0 1px #F6C3AE; }
button.wk__dag--vertrek:hover { background: var(--w-cta); color: #fff; box-shadow: none; }
button.wk__dag:focus-visible { outline: 2px solid var(--w-brand); outline-offset: 1px; }
.wk__p { font-size: 9.5px; font-weight: 500; letter-spacing: -.2px; opacity: .9; }
.wk__dag--gedimd { opacity: .45; }
.wk__dag--gedimd.wk__dag--checkin { opacity: .7; }
.wk__dag--voorproef { background: #FDEDE6 !important; color: var(--w-cta) !important; opacity: 1; }
.wk__link { font: inherit; color: var(--w-cta); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.wb__datum { width: 100%; text-align: left; font-family: var(--w-font); font-size: 13.5px; font-weight: 500;
  color: var(--w-ink); background: transparent; border: none; padding: 3px 0 0; cursor: pointer; }
.wb__datum.is-leeg { color: var(--w-ink3); font-weight: 400; }
.wb__veld:has(.wb__datum.is-actief) { background: var(--w-brand-lt); box-shadow: inset 0 -2px 0 var(--w-brand); }
.wb__datum, .is-js .wb__datum-invoer, .is-js [data-wb-verstuur] { display: none; }
.is-js .wb__datum { display: block; }
.wb-pop { margin-top: 8px; border: 1px solid var(--w-line); border-radius: 8px; padding: 12px; background: #fff;
  box-shadow: 0 14px 30px -16px rgba(10,44,45,.35); }
.wb-pop .wk__grid { gap: 3px; }
.wb-pop .wk__dag { font-size: 12px; }
.wb-pop .wk__p { font-size: 8.5px; }
.wb-pop__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wb-pop__maand { font-size: 13.5px; font-weight: 600; color: var(--w-brand); text-transform: capitalize; }
.wb-pop__pijl { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--w-line); background: #fff; color: var(--w-brand);
  font-size: 18px; line-height: 1; cursor: pointer; }
.wb-pop__pijl:disabled { opacity: .35; cursor: default; }
.wb-pop__hint { font-size: 11.5px; color: var(--w-ink2); margin-bottom: 8px; text-align: center; }
.wb-pop__voet { display: flex; justify-content: space-between; margin-top: 10px; }
.wb-pop__link { font-family: var(--w-font); font-size: 12.5px; color: var(--w-brand); background: none; border: none; padding: 4px 0;
  cursor: pointer; text-decoration: underline; }
.wb__label { font-size: 12px; font-weight: 600; letter-spacing: .6px; color: var(--w-ink3); text-transform: uppercase; }
.wb__uitkomst { display: grid; gap: 10px; transition: opacity .15s; }
.wb__uitkomst:empty { display: none; }
.wb__uitkomst.is-bezig { opacity: .45; pointer-events: none; }
button.wb__optie { font-family: var(--w-font); background: #fff; width: 100%; cursor: pointer; text-align: left; }
.wb__optie small { color: var(--w-ink3); }
.wb__laden { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--w-line); padding-top: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--w-ink2); }
.wb__laden b { color: var(--w-brand); font-weight: 600; }
.wb__spinner { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  border: 2px solid var(--w-brand-lt); border-top-color: var(--w-brand); animation: wb-draai .8s linear infinite; }
@keyframes wb-draai { to { transform: rotate(360deg); } }
.wb { border: 1px solid var(--w-line); border-radius: 8px; box-shadow: 0 12px 30px -18px rgba(10,44,45,.35);
  overflow: hidden; background: #fff; }
.wb__kop { padding: 16px 18px; border-bottom: 1px solid var(--w-line); }
.wb__prijs { font-size: 22px; font-weight: 600; color: var(--w-brand); letter-spacing: -.5px; }
.wb__body { padding: 18px; display: grid; gap: 10px; }
.wb__velden { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--w-line); border-radius: 6px; overflow: hidden; }
.wb__veld { padding: 9px 12px; }
.wb__veld + .wb__veld { border-left: 1px solid var(--w-line); }
.wb__veld label { display: block; font-size: 10.5px; color: var(--w-ink3); }
.wb__veld input, .wb__veld select { width: 100%; border: none; background: transparent; font-family: var(--w-font);
  font-size: 13px; font-weight: 500; color: var(--w-ink); padding: 2px 0; }
.wb__rij { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--w-ink2); }
.wb__totaal { display: flex; justify-content: space-between; border-top: 1px solid var(--w-line); margin-top: 4px;
  padding-top: 9px; font-size: 15px; font-weight: 600; color: var(--w-brand); }
.wb__knop { font-family: var(--w-font); display: block; text-align: center; background: var(--w-cta); color: #fff !important;
  border: none; border-radius: 6px; padding: 13px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; }
.wb__knop--licht { background: #fff; color: var(--w-brand) !important; border: 1px solid var(--w-line); font-weight: 500; font-size: 13px; padding: 11px 16px; }
.wb__opties { display: grid; gap: 6px; }
.wb__optie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--w-line); border-radius: 6px; font-size: 12.5px; color: var(--w-ink); text-decoration: none; }
.wb__optie:hover { border-color: var(--w-brand); color: var(--w-brand); }
.wb__optie b { color: var(--w-brand); }
.wb__melding { background: #FDEDE6; color: var(--w-cta); border-radius: 6px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.wb__info { background: var(--w-brand-lt); color: var(--w-brand); border-radius: 6px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.wko { display: grid; gap: 22px; }
.wko__groep h3 { font-size: 13px; font-weight: 600; color: var(--w-brand); margin: 0 0 8px; }
.wko__rij { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--w-line);
  font-size: 12.5px; color: var(--w-ink2); }
.wko__rij:first-of-type { border-top: none; }
.wko__rij b { color: var(--w-ink); font-weight: 500; }
.wko__rij small { display: block; color: var(--w-ink3); font-size: 11px; margin-top: 2px; }
.wko__bedrag { white-space: nowrap; color: var(--w-ink); font-weight: 500; }
.wbf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wbf label { display: block; }
.wbf label span.k { display: block; font-size: 12px; font-weight: 600; color: var(--w-brand); margin-bottom: 5px; }
.wbf input, .wbf select, .wbf textarea { width: 100%; box-sizing: border-box; font-family: var(--w-font); font-size: 13.5px;
  padding: 11px 12px; border: 1px solid var(--w-line); border-radius: 6px; background: #fff; color: var(--w-ink); }
.wbf .fout { color: var(--w-cta); font-size: 11.5px; margin-top: 4px; display: block; }
.wbf .breed { grid-column: 1 / -1; }
.wb-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--w-ink2); }
.wb-check input { width: auto; margin-top: 3px; }
.wb-status { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.wb-status--open { background: #FBF3E2; color: #8A5A00; }
.wb-status--ok { background: #E8F1EF; color: var(--w-brand); }
.wb-status--fout { background: #FDEDE6; color: var(--w-cta); }
@media (max-width: 720px) {
  .wk { grid-template-columns: 1fr; }
  .wbf { grid-template-columns: 1fr; }
  .wb__velden { grid-template-columns: 1fr; }
  .wb__veld + .wb__veld { border-left: none; border-top: 1px solid var(--w-line); }
}

/* --- Bronnen en redacteur onder een met de hand geschreven tekst --------------------- */
.w-bronnen { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--w-line); font-size: 12.5px; color: var(--w-ink2); }
.w-bronnen__door { margin: 0 0 8px; }
.w-bronnen__door a { font-weight: 500; }
.w-bronnen summary { cursor: pointer; font-weight: 600; color: var(--w-brand); list-style: none; }
.w-bronnen summary::-webkit-details-marker { display: none; }
.w-bronnen summary::after { content: " +"; color: var(--w-cta); }
.w-bronnen details[open] summary::after { content: " −"; }
.w-bronnen ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.55; }
.w-bronnen ol a { word-break: break-word; }
.w-bronnen ol span { color: var(--w-ink3); }
.w-bronnen p { margin: 10px 0 0; color: var(--w-ink3); }