/* site.css — banuslodge.com-specifieke opmaak bovenop framework-CSS.
 *
 * Geen hard-coded kleuren: alles via tokens uit /css/variables/website.css
 * (brand + --bl-*) of de framework-base /modules/variables.css. Conflicten
 * oplossen via specificity/cascade, nooit met !important.
 *
 * Referentie-design: statische export op
 * age.playground.easyhandling.nl/banuslodge/ (Playfair Display-koppen,
 * cream-vlakken, witte kaarten met scallop-rand, zwevende pill-navigatie).
 */

/* ── Header: zwevend óver de hero, zoals het design ─────────────────────── */
/* De header reserveert geen flow-ruimte meer (fixed); gewone pagina's krijgen
   padding-top, een full-bleed hero als eerste laag schuift er juist onder
   (foto loopt achter de pill door). Hide-on-scroll (transform via JS) blijft
   gewoon werken — transform werkt op fixed net als op sticky. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 0;
    /* compenseert de verdwenen scrollbar bij een open menu: scroll-lock.js (framework) zet
       --scrollbar-comp op :root en de body leest 'm al. Deze fixed header leest dezelfde var
       zodat 'ie niet verspringt. 0px fallback = geen effect als er niets gelockt is. */
    padding-right: var(--scrollbar-comp, 0px);
}

/* Site-canvas (design-maten): body full-width (het 1760-frame is eruit, Ronny) —
   header-pill max 1280, content-lagen 24px gutter links/rechts. Full-bleed banden
   + footer pakken nu de volle viewport-breedte i.p.v. te stoppen op 1760; de
   bestaande viewport-bleed-hacks (calc(50% - 50vw) + overflow-x:clip) worden dan
   simpelweg no-ops. Content blijft in het 1280-grid. */
body {
    --gutter: 24px;
}
main#main-content {
    padding-top: var(--site-header-height, 64px);
}
main#main-content > .layer__header.layer--bleed:first-child {
    margin-top: calc(-1 * var(--site-header-height, 64px));
    /* design .hero-frame: alleen onderhoeken rond + zachte schaduw */
    border-radius: 40px;
    overflow: hidden;
    box-shadow: var(--bl-shadow);
}
/* Hero-hoogte is in het design viewport-relatief (.hero-frame), niet een
   vaste beeldverhouding; een expliciete height wint van de inline
   aspect-ratio (die geldt alleen bij height:auto). De foto eronder is
   absolute+cover en vult elke hoogte. */
main#main-content > .layer__header.layer--bleed:first-child .layer__header-body {
    height: clamp(520px, 72vh, 720px);
}

/* ── Hero-slideshow: crossfade-slides + dots + payoff ────────────────────── */
/* De slides leven binnen .layer__header-media-wrap (absolute, inset 0); de
   layers.css-mediaregels (cover) gelden zo ook voor img/video in de slides.
   Crossfade exact als het design: opacity 1.6s ease-in-out. */
.hero-slides {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}
.hero-slide--active {
    opacity: 1;
}
.hero-slide .media,
.hero-slide img,
.hero-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dots: gecentreerd, design-positie bottom 96px; 9px-cirkels, actief = 26px-pill. */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    z-index: 3;
}
.hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--bl-cream-55);
    transition: width .25s, background .25s;
}
.hero-dots button.active {
    width: 26px;
    border-radius: 6px;
    background: var(--bl-cream);
}

/* Payoff/H1: linksonder, ruim bóven de dots (bottom 96px) en de zwevende
   zoekwidget (die −46px de hero in steekt).
   GEEN overlay op de hero-video (wens Age 2026-07-03): zowel de eigen scrim
   (::after) als de generieke layers.css-gradient (::before) uitgezet. */
main#main-content > .layer__header.layer--bleed:first-child .layer__header-body::before,
main#main-content > .layer__header.layer--bleed:first-child .layer__header-body::after {
    background: none;
}
main#main-content > .layer__header.layer--bleed:first-child .media-play {
    display: none;
}
main#main-content > .layer__header.layer--bleed:first-child .layer__header-overlay {
    z-index: 2;
    /* ruim boven de dots + de zwevende zoekwidget */
    padding-bottom: clamp(140px, 18vh, 180px);
    color: var(--on-image-fg);
}
main#main-content > .layer__header.layer--bleed:first-child .layer__header-title {
    color: var(--on-image-fg);
    /* Geen wees-woord op regel 2: balanceer regellengtes (progressive
       enhancement — oudere Safari negeert text-wrap) + genoeg breedte om op
       brede schermen op één regel te passen. */
    max-width: 24ch;
    text-wrap: balance;
}
main#main-content > .layer__header.layer--bleed:first-child .layer__header-subtitle {
    color: var(--on-image-fg-soft);
}

/* De pill: dekkend wit met palm-canopy-print, vast aan de bovenrand zoals het
   design (.nav-pill). Geen blur/transparantie meer — palmen komen nu uit een
   achtergrond-SVG (zelfde css/custom-map als dit bestand). */
.site-header__inner {
    background-color: var(--color-bg-elev);
    background-image: url('bg-menu-palmtrees-01.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border-radius: 0 0 46px 46px;  /* alleen onderhoeken rond */
    box-shadow: var(--bl-shadow);
    width: calc(100% - 48px);      /* 24px lucht links/rechts, net als de lagen */
    max-width: 1280px;
    margin-top: 0;                 /* niet meer zwevend */
    margin-inline: auto;
    padding: 15px 14px 15px 28px;
}

/* Taalswitcher-dropdown (vlag + talen + vinkje op actief). CSS-only via <details>. */
.lang-switcher { position: relative; flex-shrink: 0; }
.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}
.lang-switcher__toggle::-webkit-details-marker { display: none; }
.lang-switcher__toggle:hover,
.lang-switcher[open] .lang-switcher__toggle { background: rgba(0, 0, 0, .06); }
.lang-switcher__flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--color-border);
}
.lang-switcher__iso { font-size: .8rem; font-weight: 700; color: var(--color-fg-muted); }
.lang-switcher__caret { width: 9px; height: auto; color: var(--color-fg-muted); opacity: .65; }

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 12rem;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    z-index: 50;
}
.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-fg);
    white-space: nowrap;
}
.lang-switcher__item:hover { background: rgba(0, 0, 0, .06); }
.lang-switcher__item .lang-switcher__flag { width: 20px; height: 20px; }
.lang-switcher__name { flex: 1; }
.lang-switcher__item .lang-switcher__iso { color: var(--color-fg-muted); }
.lang-switcher__item.is-active .lang-switcher__name { color: var(--color-primary); font-weight: 600; }
.lang-switcher__check { color: var(--color-primary); font-weight: 700; }

/* Hamburger ook op desktop (design): opent dezelfde drawer als mobiel.
   Volgorde rechts in de pill: telefoon → knop → vlag → hamburger. */
.site-header__menu-toggle {
    display: inline-flex;
    order: 10;
}
.lang-switcher { order: 9; }
.site-nav__ctas--main { order: 8; }
@media (max-width: 71.875rem) {
    /* Onder 1150px: CTA's in de drawer (--mobile);
       de main-CTA's zouden de pill anders te breed maken.
       Extra specificiteit: wint van de display:flex verderop in dit bestand. */
    .site-header__inner .site-nav__ctas--main { display: none; }
}
@media (min-width: 71.9375rem) {
    /* Zónder menubuilder-zijmenu (button-variant) is het volledige menu al
       inline zichtbaar op desktop — de hamburger zou datzelfde #site-nav
       verplaatsen en de pill laten verspringen. Verberg 'm daarom op desktop;
       mobiel houdt de hamburger + drawer. (NL heeft wél een zijmenu → blijft.) */
    .site-header[data-has-sidemenu="0"] .site-header__menu-toggle { display: none; }

    body[data-menu-open="true"] .site-header__nav {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        right: 14px;
        min-width: 280px;
        background: var(--color-bg-elev);
        border-radius: var(--bl-radius);
        box-shadow: var(--bl-shadow);
        padding: 18px 22px;
    }
    body[data-menu-open="true"] .site-header__nav .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
.site-nav__link {
    font-family: var(--font-body);
    font-weight: 500; /* een stap lichter (was 600) — wens Age 2026-07-03 */
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.site-nav__link:hover,
.site-nav__item--active > .site-nav__link {
    color: var(--color-primary);
}
.site-nav__item--active > .site-nav__link {
    text-decoration: underline;
    text-underline-offset: 9px;
    text-decoration-thickness: 2px;
}

/* ── Koppen: Playfair op design-gewicht ─────────────────────────────────── */
.general__title,
.card__title,
.layer__header-title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
}

/* Kop-maat: de standaard sectie-h2 (clamp 30→46, ink, gewicht 500) komt uit
   het CMS-thema ("Website opmaak"); hier alleen de design-uitzonderingen per
   sectie-soort (0,2,0 wint van de generieke theme-regel). */
.layer__text[data-subtype="text"] .general__title {
    font-size: clamp(32px, 4.4vw, 52px);   /* welkom-sectie */
}
.layer__region[data-view="columns"] .general__title {
    font-size: clamp(30px, 3.6vw, 44px);   /* omgeving */
}

/* ── Body-tekst in lagen (design) ───────────────────────────────────────── */
/* Maat/regelafstand EN de tekstkleur komen uit het CMS-thema (design-slot op
   .general__text); hier alleen de alinea-spacing. GEEN hardcoded color op p:
   die zou (hogere specificity) de design-slot-kleur overrulen. Donkere banden
   zetten hun eigen kleur via de hogere-specificity-overrides hieronder. */
.general__text p {
    margin-bottom: 22px;
}
/* Koppen + lijsten in rich-text kregen geen spatiëring (de reset zet koppen op
   margin:0; alleen p had margin-bottom) → ze plakten tegen de omringende tekst.
   Scoped op .general__text; specifieke contexten (band-lijsten, contact-checklist)
   hebben hogere specificity en overrulen dit. */
.general__text :is(h2, h3, h4, h5, h6) {
    margin: 1.4em 0 .45em;
}
.general__text > :first-child {
    margin-top: 0;
}
.general__text :is(ul, ol) {
    margin: 0 0 22px;
    padding-left: 1.3em;
}
.general__text li {
    margin-bottom: .3em;
}
.general__text li:last-child {
    margin-bottom: 0;
}
.general__text > :last-child {
    margin-bottom: 0;
}
/* Donkere banden: cream-soft. Hogere specificity dan de basis-p, zodat de
   band-scope 'm overschrijft (i.p.v. via color:inherit). */
.layer__text--filling .layer__text-col--1 .general__text p {  /* band-tekst erft de design-kleur van kolom-1 */
    color: inherit;
}
.layer__region[data-view="columns"] .layer__region-body p,  /* omgeving-body */
.layer__region[data-view="stacked"] .general__text p {       /* locatie */
    color: var(--bl-cream-soft-72);                          /* design: .72 */
}
/* De vroegere globale welkom-tekstkleur + ondertekening-italic op ELKE laatste
   alinea (`.layer__text[data-subtype=text] .general__text p:last-child`) zijn
   verwijderd: ze overruleden per-laag design-slots (bv. witte kaart-tekst) en
   waren op meerdere plekken met id-CSS weg-gehackt. De welkom-kleur/ondertekening
   staat nu per-laag via de design-slots (welkom-laag 8). */

/* ── Kaarten (verblijven/impressie): wit, rond, lift op hover ───────────── */
.card--banner {
    background: var(--color-bg-elev);
    border-radius: var(--bl-radius);
    overflow: hidden;
    box-shadow: var(--bl-shadow-sm);
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out);
}
.card--banner:hover {
    transform: translateY(-6px);
    box-shadow: var(--bl-shadow);
}
.card--banner .card__media {
    aspect-ratio: 4 / 3;          /* geen vaste hoogte: verhouding blijft */
    position: relative;
    overflow: visible;
}
/* Verblijf-kaart hover: tweede foto langzaam infaden + subtiele inzoom (design). */
.card--banner .media-hover { transition: opacity .55s ease, transform .65s ease; }
/* NB: gebruik hier GEEN margin op .media__viewport om een hover-naad te maskeren --
   dat legt in ruststand de witte kaart-achtergrond onderaan bloot (zichtbaar lijntje).
   De hover-zoom is scale(1.03): de foto overvult de clip al, dus een crop is niet nodig. */
.card--banner:hover .media-hover { opacity: 1; transform: scale(1.06); }
/* Scallop-rand over de volle breedte van de kaartfoto — alleen op kaarten
   mét caption (verblijven); pure foto-grids (impressie) blijven strak. De SVG
   heeft preserveAspectRatio="none" en rekt mee tot rand-tot-rand. */
.card--captioned .card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 23px;
    background: url('banus-scallop.svg') bottom center / 100% 23px no-repeat;
}
.card--banner .card__content {
    /* Foto loopt rand-tot-rand (scallop onderaan); alléén de body-tekst krijgt
       padding — daarom hier geen content-padding meer. Kaarten zijn wit, óók op
       donkere band-secties: kleur niet laten erven van de sectie-color-fg. */
    color: var(--color-fg);
}
/* De stapel-`gap` van de base-`.card__link` zou tussen alle blokken ruimte
   zetten; deze kaart stuurt z'n eigen ritme via per-blok padding/margin. */
.card--banner .card__link {
    gap: 0;
}
.card--banner .card__title {
    font-size: 28px;
    padding: 0 28px;               /* body-padding (design .stay-body): 28px zij */
    margin-top: 26px;              /* eerste body-regel onder de foto */
}
.card--banner .card__subtitle {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13.5px;
    padding: 0 28px;
}

/* ── Verblijf-kaart-anatomie (design .stay-card) ─────────────────────────────
   Caption-kaarten (verblijven) tonen onder de titel een meta-regel met bed-
   icoon, een beschrijvende body-tekst en rechtsonder een ronde pijl-knop. Alle
   extra's hangen aan .card--captioned, zodat foto-only impressie-kaarten (en
   andere sites/demo.nl, die geen card__text/card__foot renderen) ongemoeid
   blijven. */
/* Meta-regel: bed/personen-icoon (SVG-mask, terra) + "1–4 personen". De subtitle
   ván de banner is de meta-regel — geen nieuw veld. */
.card--captioned .card__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    margin-bottom: 16px;
}
.card--captioned .card__subtitle::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-color: var(--color-primary);     /* terra; mask kleurt 't icoon */
    -webkit-mask: url('banus-personen.svg') center / contain no-repeat;
            mask: url('banus-personen.svg') center / contain no-repeat;
}
/* Beschrijvende body-tekst (banner `text`-veld). */
.card--banner .card__text {
    padding: 0 28px;
    color: var(--bl-body-text);
    font-size: 14.5px;
    line-height: 1.65;
}
.card--banner .card__text p {
    margin: 0;
}
/* Card-voet: drukt de ronde pijl-knop met margin-top:auto naar de onderkant,
   rechts uitgelijnd (design .card-foot). */
.card--banner .card__foot {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding: 22px 28px 28px;
}
/* Ronde pijl-knop: olive-dark cirkel + witte pijl (SVG-mask). Bewust een span
   (de hele kaart is al een anchor); puur visuele affordance. */
.card--banner .card__cta {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bl-olive-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur-fast, .2s) var(--ease-out),
                background var(--dur-fast, .2s) var(--ease-out);
}
.card--banner .card__link:hover .card__cta {
    transform: translateX(3px);
    background: var(--bl-olive);
}
.card--banner .card__cta-icon {
    width: 12px;
    height: 12px;
    background-color: var(--color-primary-fg);  /* cream pijl op de cirkel */
    -webkit-mask: url('banus-arrow.svg') center / contain no-repeat;
            mask: url('banus-arrow.svg') center / contain no-repeat;
}

/* ── Impressie-mozaïek (design .gallery / bento) ─────────────────────────────
   Layer-CMS-veld `view=mosaic` zet data-view="mosaic" op de sectie. Het design:
   één grote foto links (2 kolommen × 2 rijen) + 4 kleine rechts in een 4×2-grid
   van 200px-rijen, 18px gap, ronde hoeken. Eerste card = de grote tegel; de
   overige vullen de resterende cellen. Default (geen view) blijft de gewone
   kolom-grid, dus geen impact op andere sites/lagen. */
.layer__cards[data-view="mosaic"] .layer__cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 18px;
}
/* Mobiel: gewoon één kolom; tablet: twee kolommen (huisregel responsief). */
@media (max-width: 599px) {
    .layer__cards[data-view="mosaic"] .layer__cards-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 600px) and (max-width: 899px) {
    .layer__cards[data-view="mosaic"] .layer__cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* De grote tegel: 2×2 vanaf desktop (4-koloms grid). */
@media (min-width: 900px) {
    .layer__cards[data-view="mosaic"] .layer__cards-grid > .card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}
/* Foto's vullen hun cel volledig (de rijen hebben een vaste hoogte). De
   impressie-kaarten hebben geen body/aspect-ratio, dus stretch alles. */
.layer__cards[data-view="mosaic"] .card,
.layer__cards[data-view="mosaic"] .card__content,
.layer__cards[data-view="mosaic"] .card__link,
.layer__cards[data-view="mosaic"] .card__media {
    height: 100%;
}
.layer__cards[data-view="mosaic"] .card__content {
    border-radius: var(--bl-radius);
    box-shadow: none;
}

/* Hairline sub-pixel-naden tussen de mosaic-tegels wegwerken. Oorzaak: repeat(4,1fr)
   + 18px gap geeft fractionele celbreedtes, waardoor de foto z'n cel net niet tot de
   laatste (sub)pixel dekt en de achtergrond als dun lijntje doorschijnt. Fix = de
   media 1px over de cel laten lopen (viewport inset:-1px) en clippen op de ronde
   tegel; dekt de rand en legt NOOIT bg bloot (anders dan de oude viewport-margin-hack
   die juist bg toonde). */
.layer__cards[data-view="mosaic"] .card,
.layer__cards[data-view="mosaic"] .card__content { overflow: hidden; }
.layer__cards[data-view="mosaic"] .card__media .media__viewport { inset: -1px; }
/* Zelfde sub-pixel-naad-fix voor ALLE banner-kaarten (home/verblijven): grids met
   repeat(N,1fr)+gap geven fractionele celbreedtes → dunne bg-lijntjes langs de
   fotoranden. Foto 1px over de cel laten lopen en clippen (card--banner heeft
   overflow:hidden) — dekt de rand, legt nooit bg bloot. */
.card--banner .card__media .media__viewport {
    inset: -1px;
    bottom: 5px;
}

/* ── Zoek & boek-resultaatkaarten: rond olijf-pijltje-knopje ─────────────────
   Dezelfde affordance als de verblijf-kaarten (card__cta): olive-dark cirkel +
   cream pijl (banus-arrow.svg, kleur zit in de svg). De kaart is al een <a>,
   dus dit is een puur visueel ::after — geen extra interactief element/tekst.
   Wens Age 2026-07-06. */
.search-results__card-link { position: relative; }
.search-results__card-body { padding-bottom: 3.5rem; }
.search-results__card-link::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--bl-olive-dark);
    background-image: url('banus-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: transform var(--dur-fast, .2s) var(--ease-out),
                background-color var(--dur-fast, .2s) var(--ease-out);
    pointer-events: none;
}
.search-results__card-link:hover::after {
    transform: translateX(3px);
    background-color: var(--bl-olive);
}
.layer__cards[data-view="mosaic"] .card__media {
    aspect-ratio: auto;            /* vaste rij-hoogte stuurt nu de maat */
}
.layer__cards[data-view="mosaic"] .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.layer__cards[data-view="mosaic"] .card:hover .card__content {
    transform: none;               /* mozaïek: subtiele zoom i.p.v. lift */
}
.layer__cards[data-view="mosaic"] .card:hover .card__media img {
    transform: scale(1.03);
    transition: transform var(--dur-med, .4s) var(--ease-out);
}

/* ── USP-lagen ──────────────────────────────────────────────────────────── */
/* Framework geeft deze laag een eigen vlak (--color-bg-soft = #ede4dc); het
   design wil 'm op de cream-pagina laten staan, dus transparant. */
.layer__usps {
    background-color: transparent;
}
/* De lijst gecentreerd op design-breedte (.features = 980px). */
.layer__usps .layer__usps-list {
    max-width: 980px;
    margin-inline: auto;
}
/* Icon-formaat komt uit het CMS (advanced_scale/advanced_scale_size op de
   laag → --usp-icon-size). Design: visual met titel/subtitel ERONDER,
   gecentreerd — de framework-default (icoon links, tekst rechts) past niet. */
.layer__usps .usp,
.layer__region .usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
/* Grid: mobiel 1, tablet 2, desktop 4 op een rij (design). De inline-view-
   variant expliciet meenemen zodat de framework-default (3 kolommen) het
   niet wint op specificity. */
@container (min-width: 36rem) {
    .layer__usps .layer__usps-list,
    .layer__usps[data-view="inline"] .layer__usps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 56rem) {
    .layer__usps .layer__usps-list,
    .layer__usps[data-view="inline"] .layer__usps-list {
        grid-template-columns: repeat(4, 1fr);
    }
}
.layer__usps .usp__title,
.layer__region .usp__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
}
.layer__usps .usp__text {
    color: var(--color-fg-muted);
    font-size: 15px;
}

/* ── Eyebrow-koppen: subtitle als terra-kapitaaltjes bóven de grote titel ── */
/* Gedeeld patroon voor cards- én reviews-koppen (design): subtitle staat in de
   DOM ná de h2 maar wordt met order:-1 erbovenop getild. */
.layer__cards-heading,
.layer__reviews-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.layer__cards-tagline,
.layer__cards-subtitle,
.layer__reviews-subtitle {
    order: -1;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 12px;
}
/* Media-album (mosaic): de tagline is de eyebrow (hierboven); de subtitel is een
   échte subtitel ónder de titel met een eigen, rustige opmaak (geen eyebrow). */
.layer__cards[data-view="mosaic"] .layer__cards-subtitle {
    order: 0;
    font-family: inherit;
    font-size: var(--fs-h3);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-fg-muted);
    margin-top: 8px;
    margin-bottom: 0;
}

/* ── Region-laag: tekst links, icoon-grid (2×2) rechts ──────────────────── */
.layer__region {
    --usp-icon-size: 144px;        /* zelfde ornament-maat als de usp-lagen */
}
/* Columns-view: witte pill-kaartjes met icoon + tekst naast elkaar (design). */
.layer__region[data-view="columns"] {
    --usp-icon-size: 44px;
}
.layer__region[data-view="columns"] .usp {
    flex-direction: row;
    text-align: left;
    gap: 12px;
    background: var(--color-bg-elev);
    border-radius: 999px;
    box-shadow: var(--bl-shadow-sm);
    padding: 12px 20px;
}
.layer__region[data-view="columns"] .usp__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}
/* Stacked-view (locatie-band): content-brede FOTO-band die de olijf-band
   erboven overlapt. Tekst gecentreerd boven, brede grid eronder met frosted
   kaartjes en witte Playfair-cijfers. */
.layer__region[data-view="stacked"] {
    --usp-icon-size: 46px;
    max-width: var(--content-max);
    margin-inline: auto;
    margin-top: -130px;            /* trekt de band over de olijf-band heen */
    border-radius: 34px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 70px 56px 64px;
    background: url('Banus-strand-bg-foto-02.webp') center / cover;
    color: var(--color-primary-fg); /* cream op de foto */
}
@media (max-width: 767px) {
    .layer__region[data-view="stacked"] {
        margin-top: -56px;
    }
}
.layer__region[data-view="stacked"] .layer__region-layout {
    display: block;
}
.layer__region[data-view="stacked"] .layer__region-text {
    text-align: center;
    margin-bottom: 38px;
}
.layer__region[data-view="stacked"] .layer__region-usps {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@container (min-width: 56rem) {
    .layer__region[data-view="stacked"] .layer__region-usps {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Frosted kaartjes op de foto-band — design .loc-card: donker blauwgrijs
   glas (blur), geen cream-alpha. Transition staat klaar zoals het design
   (geen hover gedefinieerd, maar toekomstvast). */
.layer__region[data-view="stacked"] .usp {
    background: var(--bl-frost);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bl-frost-border);
    border-radius: var(--bl-radius);
    padding: 24px 18px;
    text-align: center;
    transition: backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease,
                background .4s ease;
}
/* Hover: glas wordt helderder (mínder blur) en het vlak iets donkerder —
   de foto erachter komt dichterbij. */
.layer__region[data-view="stacked"] .usp:hover {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: var(--bl-frost-hover);
}
.layer__region[data-view="stacked"] .usp__title {
    color: var(--on-image-fg);
    font-size: 22px;
    font-weight: 500;              /* design: Playfair 500, geen 600 */
}
.layer__region[data-view="stacked"] .usp__text {
    color: var(--bl-cream-90);
    font-size: 15px;
}
.layer__region-layout {
    display: grid;
    gap: 40px;
}
@container (min-width: 56rem) {
    .layer__region-layout {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
.layer__region-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
}
.layer__region-tagline {
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.layer__region-title {
    margin-bottom: 18px;
}
.layer__region-buttons {
    margin-top: 22px;
}

/* ── Reviews: witte kaartjes met zand-sterren ───────────────────────────── */
/* Design-maten: 26px tussen de kaarten (slide = transparante .reviews__slide-
   wrapper, de kaart erbinnen), grid 48px onder de kop. */
.layer__reviews .carousel { margin-top: 48px; }
.layer__reviews .carousel__container { margin-left: -26px; }
.layer__reviews .carousel__slide { padding-left: 26px; }
/* Gelijke kaart-hoogtes: de slide-wrapper strekt al mee (flex-stretch van de
   carousel-container); laat de kaart de wrapper vullen. */
.reviews__slide { display: flex; }
.reviews__slide .reviews__item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.reviews__slide .reviews__item-foot { margin-top: auto; }  /* auteur onderaan */
.reviews__item {
    background: var(--color-bg-elev);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-sm);
    padding: 24px 28px;
}
.reviews__item-stars-fill {
    color: var(--bl-sand);
}
.reviews__item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.reviews__item-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding-inline: 8px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--bl-brown);
}
.reviews__item-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 8px;
}
.reviews__item-author {
    font-weight: 600;
}
.reviews__item-author {
    font-weight: 600;
}
.reviews__item-text {
    font-style: italic;
}

/* ── Zoek&boek-widget: zwevende balk óver de hero-foto ──────────────────── */
/* De widget is een eigen laag direct ná de hero (geen LayerHeader-port);
   de sectie is transparant en wordt met negatieve marge de hero-foto op
   getrokken — alleen de witte pill zweeft op het beeld, zoals het design. */
.layer__header + .layer__search-and-book {
    margin-top: -7em;
    position: relative;
    z-index: 10;
    background: transparent;
}
@media (max-width: 767px) {
    /* Mobiel stapelt het formulier (hoge pill) en is de hero-foto laag:
       minder overlap, anders verdwijnt de foto achter de widget. */
    .layer__header + .layer__search-and-book {
        margin-top: -8em;    /* nog 64px hoger, dieper over de hero-video — wens Age 2026-07-07 */
    }
}

/* Widget = één doorlopende pill met dividers en ronde zoekknop (design). */
.layer__search-and-book .sab__form {
    background: var(--color-bg-elev);
    border-radius: 999px;
    box-shadow: var(--bl-shadow);
    padding: 12px 12px 12px 10px;
    display: flex;
    align-items: center;
    gap: 0;
}
.layer__search-and-book .sab__field {
    flex: 1 1 0;
    padding-inline: 22px;
}
.layer__search-and-book .sab__field + .sab__field {
    border-left: 1px solid var(--color-border);
}
.layer__search-and-book .sab__input {
    border: 0;
    background: transparent;
    padding-inline: 0;
}
.layer__search-and-book .sab__submit {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 16px 34px;
}
@media (max-width: 767px) {
    .layer__search-and-book .sab__form {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--bl-radius);
        gap: 0;                       /* strakker: velden sluiten aaneen, dividers scheiden — wens Age 2026-07-07 */
        padding: 4px 8px 12px;
    }
    /* icoon-rondje verbergen op mobiel (wens Age 2026-07-07) */
    .layer__search-and-book .sab__form::before { display: none; }
    .layer__search-and-book .sab__field { padding: 12px 16px; }
    .layer__search-and-book .sab__input { padding: 2px 0; }
    .layer__search-and-book .sab__field + .sab__field {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
    .layer__search-and-book .sab__submit-wrap { margin-top: 2px; }
}
.layer__search-and-book .sab__submit {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: 999px;
    font-weight: 600;
}

/* ── Knoppen (front-end .button, design) ────────────────────────────────── */
/* Alleen de site-knoppen, NIET de CMS-knoppen. */
.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 40px;
}
/* Light-variant op de olijf-band (omgeving): cream vlak, bruine tekst. */
.layer__region[data-view="columns"] .button {
    background: var(--color-bg);
    color: var(--bl-brown);
}
/* Zoek-submit: uppercase, smaller, gespatieerd (design). */
.layer__search-and-book .sab__submit {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}

/* ── Header-CTA's: telefoon subtiel, "Zoek & boek" als terra-pill ────────── */
.site-nav__ctas--main {
    display: flex;
    align-items: center;
    gap: 18px;
}
.site-nav__ctas--main .site-nav__cta {
    font-weight: 500; /* gelijk aan de nav-links (wens Age) */
    font-size: 14px;
}
.site-nav__ctas--main .site-nav__cta[href^="tel:"] {
    background: transparent;
    font-weight: 500; /* leest als menu-item — even licht als de nav-links */
    color: var(--color-fg);
    padding: 0;
    border-radius: 0;
}
.site-nav__ctas--main .site-nav__cta[href^="tel:"]:hover {
    background: transparent;
    color: var(--color-primary);
    transform: none;
}
.site-nav__ctas--main .site-nav__cta:not([href^="tel:"]) {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    padding: 11px 22px;
    border-radius: 999px;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.site-nav__ctas--main .site-nav__cta:not([href^="tel:"]):hover {
    background: var(--color-primary-dk);
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINAVOET — naar het referentie-design (age.playground .../banuslodge/).
   Drie kolommen op één rij: [logo + "Volg ons" + socials] | [Contact] |
   [Informatie (2 sub-kolommen, →-pijl)]. Markup is een gegeven (FooterRenderer):
   we herschikken met CSS-grid over de bestaande rijen. site.css laadt ná
   footer.css, dus deze regels winnen op cascade/specificity (geen !important).
   ══════════════════════════════════════════════════════════════════════════ */

/* Warm bruin vlak (design .site-footer), met de azulejo-tegelrand erboven
   (design .azulejo: 50px hoog, repeat-x, 80px lucht). De ::before tekent de
   rand op een cream-strook bóven het bruin — zelfde beeld als de losse
   design-div, zonder template-wijziging. */
footer.site-footer {
    background-color: var(--bl-brown);
    color: var(--bl-cream-soft-82);
    padding: 0;
    /* Full-bleed: footer + azulejo breken uit de 1760-body en pakken de
       volledige viewport (Ronny, 2026-06-06). De clip op <html> hieronder
       vangt het scrollbar-randje dat 100vw kan geven. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
html {
    overflow-x: clip;
}
footer.site-footer::before {
    content: "";
    display: block;
    height: 130px;                 /* 80px lucht + 50px tegelrand */
    background:
        url('patroon-trap01.webp') left bottom / auto 50px repeat-x,
        var(--theme-color-8);   /* cream, gelijk aan de body-bg — geen witte strook meer */
}
footer.site-footer .site-footer__inner {
    padding-top: 62px;             /* oude footer-padding, nu onder de rand */
}

/* Eén rij met drie kolommen. De FooterRenderer levert twee rijen (--top met
   logo/socials, --main met contact/links); we laten beide rijen als
   `display: contents` opgaan in dít grid, zodat hun kolommen op één rij komen
   te liggen: brand | contact | informatie (design .footer-top-verhoudingen). */
footer.site-footer .site-footer__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 50px;
    align-items: start;
}
footer.site-footer .site-footer__row--top,
footer.site-footer .site-footer__row--main {
    display: contents;
}
/* Plaats de kolommen expliciet op de drie grid-tracks (volgorde in de DOM is
   media → intro → address → links; address moet kolom 2, informatie kolom 3). */
footer.site-footer .site-footer__col--media   { grid-column: 1; }
footer.site-footer .site-footer__col--intro   { grid-column: 1; }
footer.site-footer .site-footer__col--address { grid-column: 2; }
footer.site-footer .site-footer__col--links   { grid-column: 3; }

/* Logo wit, 150px (design .footer-brand img). aspect-ratio reserveert de
   hoogte (SVG heeft geen intrinsieke afmetingen), zodat het logo nooit naar
   hoogte 0 klapt vóór het laadt. */
footer.site-footer .site-footer__logo img,
footer.site-footer .site-footer__media img {
    width: 150px;
    height: auto;
    aspect-ratio: 202 / 74;
    margin-bottom: 0;
}

/* ── "Volg ons" + ronde social-knoppen (design .footer-follow) ───────────── */
/* Het "Volg ons"-kopje komt nu uit de markup zelf: FooterRenderer rendert
   .site-footer__socials-title uit het per-taal CMS-veld socials_title (met
   per-taal fallbacktekst). Het oude ::before-kopje op de wrapper is daarom
   verwijderd — dat gaf een dubbel "Volg ons" en was bovendien NL-only. */
footer.site-footer .site-footer__socials-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
footer.site-footer .site-footer__socials {
    gap: 14px;
}
/* Ronde icon-knop. We stylen de <li>-inner als knop; de tekst-<span>
   ("Facebook"/"Instagram") gaat visueel weg maar blijft toegankelijk
   (sr-only-techniek), géén display:none op de hele link. */
footer.site-footer .site-footer__social-inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bl-cream-12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast, .2s) var(--ease-out, ease);
}
footer.site-footer .site-footer__social-inner:hover {
    background: var(--bl-cream-25);
}
footer.site-footer .site-footer__social-icon {
    width: 16px;
    height: 16px;
    color: var(--bl-cream);
}
footer.site-footer .site-footer__social-icon img {
    width: 16px;
    height: 16px;
}
/* Tekstlabel toegankelijk verbergen (sr-only). */
footer.site-footer .site-footer__social-inner > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Koppen Contact / Informatie (design .footer-col h4) ──────────────────── */
footer.site-footer .site-footer__col-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    color: var(--bl-cream);
    margin-bottom: 20px;
}

/* ── Adres (design .footer-col p) ─────────────────────────────────────────── */
footer.site-footer .site-footer__address {
    font-size: 14px;
    color: var(--bl-cream-soft-82);
    line-height: 1.9;
}
footer.site-footer .site-footer__address a {
    color: inherit;
    text-decoration: none;
}
footer.site-footer .site-footer__address a:hover {
    color: var(--bl-cream);
}

/* ── Informatie-links: 2 sub-kolommen, →-pijl, geen underline ─────────────── */
footer.site-footer .site-footer__col--links .site-footer__links-col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 30px;
}
footer.site-footer .site-footer__col--links a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--bl-cream-soft-82);
    padding: 5px 0;
    text-decoration: none;
    transition: color var(--dur-fast, .2s) var(--ease-out, ease);
}
footer.site-footer .site-footer__col--links a:hover {
    color: var(--bl-cream);
    text-decoration: none;
}
footer.site-footer .site-footer__col--links a::before {
    content: "→";
    color: var(--bl-sand);
    font-size: 12px;
}

/* ── Onderbalk: legal-links (menu_3) links, © in het midden, MM-icoon rechts ── */
footer.site-footer .site-footer__credit {
    grid-column: 1 / -1;
    border-top: 1px solid var(--bl-cream-14);
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px 26px;
    font-size: 12.5px;
    color: var(--bl-cream-soft-60);
}
footer.site-footer .site-footer__credit-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    justify-self: start;
}
footer.site-footer .site-footer__copyright {
    justify-self: center;
    text-align: center;
}
footer.site-footer .site-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
footer.site-footer .site-footer__legal a {
    color: inherit;
    text-decoration: none;
}
footer.site-footer .site-footer__legal a:hover {
    color: var(--bl-cream);
    text-decoration: underline;
}
/* Multiminded-merk-credit: icoon kleurt mee via currentColor. */
footer.site-footer .site-footer__credit-link {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    color: var(--bl-cream-soft-60);
    transition: color .15s ease;
}
footer.site-footer .site-footer__credit-link:hover {
    color: var(--bl-cream);
}
footer.site-footer .site-footer__credit-logo {
    display: block;
    height: 24px;
    width: auto;
}

/* ── Responsief: tablet 2 kolommen, mobiel stapelen (geen overflow) ───────── */
@media (max-width: 60rem) {
    footer.site-footer .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }
    footer.site-footer .site-footer__col--links { grid-column: 1 / -1; }
}
@media (max-width: 35rem) {
    footer.site-footer .site-footer__inner {
        grid-template-columns: 1fr;
    }
    footer.site-footer .site-footer__col--media,
    footer.site-footer .site-footer__col--intro,
    footer.site-footer .site-footer__col--address,
    footer.site-footer .site-footer__col--links {
        grid-column: 1;
    }
    footer.site-footer .site-footer__col--links .site-footer__links-col ul {
        grid-template-columns: 1fr;
    }
    /* Onderbalk: 3-koloms grid → gecentreerde stapel (legal · © · icoon). */
    footer.site-footer .site-footer__credit {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
    }
    footer.site-footer .site-footer__credit-left { justify-self: center; }
    footer.site-footer .site-footer__legal { justify-content: center; }
    footer.site-footer .site-footer__credit-link { justify-self: center; }
}

/* ── Book-bar — sticky "boek direct"-balk onderaan ──────────────────────────
 * Overlay (geen body-padding): fixed onderaan, fade-in zodra de impressie-
 * sectie in beeld komt en fade-uit bij de footer — gestuurd door
 * /js/book-bar.js. Schaduw werpt omhoog (--bl-shadow-up). */
.book-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--color-bg-elev);
    box-shadow: var(--bl-shadow-up);
    padding: 16px 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.book-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}
.book-bar-text {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 24px);
    color: var(--bl-olive-dark);
}
.book-bar .btn-terra {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    padding: 12px 26px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.book-bar .btn-terra:hover {
    background: var(--color-primary-dk);
    transform: translateY(-2px);
}
/* Mobiel compact: balk niet over de volle breedte schreeuwen; onder ~480px
 * verbergt de tekst en blijft alleen de knop staan. */
@media (max-width: 600px) {
    .book-bar {
        padding: 12px 16px;
    }
    .book-bar-inner {
        gap: 14px;
    }
}
@media (max-width: 480px) {
    .book-bar-text {
        display: none;
    }
    .book-bar-inner {
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIELE POLISH (≤ ~600px) — 390px is de maatstaf.
   Het design heeft zelf nauwelijks mobiele opmaak; deze sectie geeft de site
   merk-eigen ademruimte op telefoon. Alles in (max-width)-media/container-
   queries gescoped zodat desktop ongemoeid blijft. Geen !important, tokens-only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Verblijf-band ("de 3 huizen", home laag 650) ─────────────────────────────
   Desktop staat de terra-band op 56px zij-padding + de laag-inner nóg 24px —
   op 390px bleef daardoor maar ~202px kaartbreedte over (foto te klein, tekst
   geknepen). Design-conventie elders is 26px zij-padding mobiel. We knijpen de
   band-zijpadding én de inner-gutter zodat de kaart bijna de volle bandbreedte
   pakt; de kaart wordt zo even royaal als op /verblijven. */
@media (max-width: 600px) {
    /* 0,4,0: wint van de injected theme-regel (0,3,0, later in de bron)
       met width:90% — die zou hier ~33px afsnoepen. */
    [data-layer-id="650"].layer__cards.layer-section > .layer__sc > .layer__inner {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
    }
    /* Eén kaart per rij, ruime tussenruimte (de band is smal). */
    [data-layer-id="650"] .layer__cards-grid {
        gap: 22px;
    }
}

/* ── Verblijf-kaart-anatomie op mobiel (home-band én /verblijven) ─────────────
   Bredere kaarten betekent: kop iets groter mag, foto-verhouding wat platter
   (4:3 oogt op smalle kaarten log), en de body krijgt iets minder zij-padding
   zodat de tekst niet in een smalle koker valt. */
@media (max-width: 600px) {
    .card--banner .card__media {
        aspect-ratio: 16 / 11;        /* iets platter dan 4:3 — rustiger op smal */
    }
    .card--banner .card__title {
        font-size: 25px;
        padding-inline: 22px;
        margin-top: 22px;
    }
    .card--banner .card__subtitle,
    .card--banner .card__text {
        padding-inline: 22px;
    }
    .card--captioned .card__subtitle {
        margin-top: 8px;
        margin-bottom: 12px;
    }
    .card--banner .card__foot {
        padding: 18px 22px 22px;
    }
}

/* ── Reviews-carousel: één kaart prominent, randje van de volgende ────────────
   Op desktop tonen meerdere kaarten naast elkaar; op 390px werd de kaart maar
   ~154px breed (twee halve kaarten). Smallere slide-gap + bredere slide-basis
   geeft één leesbare kaart met een subtiele peek. */
@media (max-width: 600px) {
    .layer__reviews .carousel__container { margin-left: -12px; }
    /* 0,4,0: wint van de framework-container-query
       `.carousel__container[data-layout-cols] .carousel__slide` (0,3,0). */
    .layer__reviews .carousel__container[data-layout-cols] .carousel__slide {
        padding-left: 12px;
        flex-basis: 96%;              /* vrijwel volle breedte, klein peekje */
    }
    .reviews__item { padding: 22px 22px; }
    /* Pijlen niet meer óver de kaarten zweven maar als rij eronder
       (boven de dots) — de absolute overlay wordt een gewone flex-rij. */
    .layer__reviews .carousel__controls {
        position: static;
        justify-content: center;
        gap: 14px;
        padding: 0;
        margin-top: 14px;
        pointer-events: auto;
    }
}

/* ── Footer-aanloop: cream-gat boven de azulejo-rand inkorten ─────────────────
   De ::before reserveert 130px (80px lucht + 50px tegelrand) — op mobiel gaapt
   dat met de sectie-onderpadding samen tot een leeg blok. Minder lucht boven de
   rand op telefoon. */
@media (max-width: 600px) {
    footer.site-footer::before {
        height: 96px;              /* 46px lucht + 50px tegelrand */
    }
    footer.site-footer .site-footer__inner {
        padding-top: 44px;
    }
}

/* ── Zoek&boek-widget (los: home-hero + /zoek-en-boek) ───────────────────────
   De gestapelde mobiele pill kreeg al flex-direction:column; geef 'm wat meer
   binnenlucht en een nettere knop-breedte zodat 'ie niet als koker oogt. */
@media (max-width: 600px) {
    .layer__search-and-book .sab__form {
        padding: 14px;
        gap: 4px;
    }
    .layer__search-and-book .sab__field {
        padding-block: 8px;
    }
    .layer__search-and-book .sab__submit {
        margin-top: 6px;
        padding-block: 15px;
    }
}

/* ── 123boeken-widget: gestyled naar de site, maar lokaal gescoped ──────────
   De gateway levert HTML die we niet 1-op-1 controleren, dus we stylen de
   booking-wrapper en de meest gangbare form-controls in één lage-specificity
   laag. Zo blijft de site-typografie en knoptaal consistent zonder andere
   formulieren te raken. */
.layer__booking[data-booking-engine="widget"],
.booking-widget--debug {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.booking-widget--debug {
    padding: var(--space-4);
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--bl-shadow);
}
.booking-widget--debug :where(h1, h2, h3, h4) {
    margin: 0;
    color: var(--color-fg);
    line-height: 1.15;
}
.booking-widget--debug :where(p, ul, ol) {
    margin-block: 0;
}
.booking-widget--debug :where(form, .booking-form) {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.booking-widget--debug :where(input, select, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--form-input-border, #dedede);
    border-radius: var(--form-radius, var(--radius-sm));
    background: var(--form-input-bg, transparent);
    color: var(--color-fg);
    font: inherit;
    line-height: 1.2;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.booking-widget--debug :where(input, select, textarea):focus,
.booking-widget--debug :where(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--form-input-border-active, var(--color-primary, #1e2a3a));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.booking-widget--debug :where(button, .button, [role="button"]) {
    border-radius: var(--radius-sm);
}
.booking-widget--debug :where(button, .button, [role="button"]):is(:hover, :focus-visible) {
    transform: translateY(-1px);
}
.booking-widget--debug :where(table) {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.booking-widget--debug :where(th, td) {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.booking-widget--debug :where(th) {
    background: var(--color-bg-soft);
    font-weight: 600;
    color: var(--color-fg-muted);
    text-align: left;
}
.booking-widget--debug :where(a) {
    color: var(--color-primary);
}
.booking-widget--debug :where(.button--primary, button[type="submit"]) {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-color: var(--color-primary);
}
.booking-widget--debug :where(.button--primary, button[type="submit"]):is(:hover, :focus-visible) {
    background: var(--color-primary-dk, var(--color-primary));
    border-color: var(--color-primary-dk, var(--color-primary));
}
.booking-widget--debug :where(.button--secondary, .button--ghost) {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
    color: var(--color-fg);
}
.booking-widget--debug :where(.button--secondary, .button--ghost):is(:hover, :focus-visible) {
    background: var(--color-bg-elev);
}
.booking-widget--debug :where(.calendar, [class*="calendar"], [class*="date-picker"], [class*="datepicker"]) {
    border-radius: var(--radius-md);
    overflow: hidden;
}
.booking-widget--debug :where(.calendar button, [class*="calendar"] button, [class*="date-picker"] button, [class*="datepicker"] button) {
    border-radius: 999px;
}

.layer__booking[data-booking-engine="widget"] .widget-123boeken-booking {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--bl-shadow);
    font-size: 0.96rem;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-button,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-title,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-text,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-header,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-content,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-table {
    width: 100%;
}
/* "Terug"-knop binnen de boekwidget verbergen: de bezoeker komt hier al met
   gekozen accommodatie + periode vanaf de detailpagina, dus een terug-stap in
   de widget zelf is verwarrend. De wrapper met :has() weg zodat er geen lege
   ruimte overblijft; de losse selector is de fallback voor oudere browsers. */
.layer__booking[data-booking-engine="widget"] .widget-123boeken-button:has(.widget-123boeken-back),
.layer__booking[data-booking-engine="widget"] .widget-123boeken-back {
    display: none;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.15rem, 1rem + 0.3vw, 1.45rem);
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.15;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-text {
    color: var(--color-fg-muted);
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-section-container {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
    gap: var(--space-3);
}
@media (max-width: 960px) {
    .layer__booking[data-booking-engine="widget"] .widget-123boeken-section-container {
        grid-template-columns: 1fr;
    }
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-header {
    padding: 0.85rem 1rem;
    background: var(--color-bg-soft);
    color: var(--color-fg);
    font-weight: 700;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-header {
    background: var(--color-bg-soft) !important;
    color: var(--color-fg) !important;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-content {
    padding: 0.85rem 1rem;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-prices,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-pricelist,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-price-total,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-price-basic {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
}
/* Mobiel/tablet: zonder onze grid-gap plakken de widget-rijen op elkaar. Wat
   lucht ertussen. Specificiteit matcht de widget z'n eigen keten (+ onze prefix)
   zodat het wint zónder `!important`. */
@media (max-width: 64rem) {
    .layer__booking[data-booking-engine="widget"] .widget-123boeken-section .widget-123boeken-content .widget-123boeken-table .widget-123boeken-row {
        margin-bottom: .6rem;
    }
}
/* Géén eigen grid-override op de widget-rijen: de 123boeken-widget heeft een
   veel specifiekere eigen regel (`[data-widget] .section .content .table>.row`),
   dus onze grid won alleen mét `!important` én forceerde op mobiel overflow
   (vaste 11rem-kolom). De widget z'n natuurlijke rij-layout oogt prima, dus we
   laten 'm met rust. */
.layer__booking[data-booking-engine="widget"] .widget-123boeken-cell:first-child {
    color: var(--color-fg-muted);
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.25;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-cell:last-child {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: visible;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row select,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row input,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row textarea {
    width: 100%;
    min-width: 0;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row .bind,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row :is(select, input, textarea) {
    width: 100% !important;
    min-width: 0;
    min-height: 2.75rem !important;
    box-sizing: border-box;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row :is(select, input, textarea) {
    height: auto !important;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--form-input-border, #dedede);
    border-radius: var(--form-radius, var(--radius-sm));
    background: var(--form-input-bg, transparent);
    color: var(--color-fg);
    font: inherit;
    line-height: 1.35;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row select {
    appearance: auto;
    padding-right: 2rem;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row :is(select, input, textarea):focus,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-row :is(select, input, textarea):focus-visible {
    outline: none;
    border-color: var(--form-input-border-active, var(--color-primary, #1e2a3a));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.layer__booking[data-booking-engine="widget"] .select-display {
    position: relative;
    width: 100% !important;
    min-width: 0;
    min-height: 2.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 4px 2.25rem 4px 8px !important;
    border: 1px solid var(--form-input-border, #dedede) !important;
    border-radius: var(--form-radius, var(--radius-sm));
    background: var(--form-input-bg, transparent) !important;
    color: var(--color-fg) !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    box-shadow: none;
}
.layer__booking[data-booking-engine="widget"] .select-display:focus-visible,
.layer__booking[data-booking-engine="widget"] .select-display[aria-expanded="true"] {
    outline: none;
    border-color: var(--form-input-border-active, var(--color-primary, #1e2a3a)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.layer__booking[data-booking-engine="widget"] .select-display .select-arrow {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-fg-muted);
    opacity: 0.9;
}
.layer__booking[data-booking-engine="widget"] .select-display[aria-expanded="true"] .select-arrow {
    transform: translateY(-50%) scaleY(-1);
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-section-message,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-section-loader {
    border-radius: var(--radius-sm);
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-message {
    border-radius: var(--radius-md);
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-bookButton {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.7rem 1.05rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-fg);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-bookButton:hover,
.layer__booking[data-booking-engine="widget"] .widget-123boeken-bookButton:focus-visible {
    transform: translateY(-1px);
    background: var(--color-primary-dk, var(--color-primary));
    border-color: var(--color-primary-dk, var(--color-primary));
    outline: none;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-message {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-message .widget-123boeken-close {
    color: var(--color-fg-muted);
    font-size: 1.2rem;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-loader {
    color: var(--color-fg-muted);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft));
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-back {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.layer__booking[data-booking-engine="widget"] .widget-123boeken-back:hover {
    text-decoration: underline;
}

/* ── /zoek-en-boek resultaten-toolbar: Filters + Sorteren netjes naast elkaar ─
   Op 390px werd "Sorteren op" + de select tegen de Filters-knop geperst. Laat
   de toolbar wrappen en de sort-groep z'n eigen volle regel pakken, met de
   select die de resterende breedte vult. */
@media (max-width: 600px) {
    .search-results__toolbar {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .search-results__sort-label {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
    .search-results__sort-select {
        flex: 0 1 auto;
        min-width: 0;
    }
}

/* ── Mobiel: tegels & usps compacter (Ronny, 2026-06-06) ────────────────── */
@media (max-width: 600px) {
    /* Locatie-band "Handig om te weten": 3 mini-tegels naast elkaar. */
    .layer__region[data-view="stacked"] .layer__region-usps {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .layer__region[data-view="stacked"] {
        --usp-icon-size: 32px;
    }
    .layer__region[data-view="stacked"] .usp {
        padding: 14px 6px 12px;
        gap: 8px;
    }
    .layer__region[data-view="stacked"] .usp__title { font-size: 16px; }
    .layer__region[data-view="stacked"] .usp__text  { font-size: 10.5px; }

    /* Welkom-usps (badge-tiles): kleiner en met z'n tweeën naast elkaar.
       0,4,0 + inline-variant; de icoonmaat op de LIJST — de sectie draagt
       'm als inline style (advanced_scale) en die wint anders altijd. */
    .layer-section.layer__usps .layer__usps-list,
    .layer-section.layer__usps[data-view="inline"] .layer__usps-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        --usp-icon-size: 96px;
    }
    .layer__usps .usp { gap: 10px; }
    .layer__usps .usp__title { font-size: 17px; }
    .layer__usps .usp__text  { font-size: 13px; }
}

/* ── Mobiel: tweede ronde (Ronny, 2026-06-06) ───────────────────────────── */
@media (max-width: 600px) {
    /* Olijf-band-usps (/omgeving + home): 4 onder elkaar — 2 naast elkaar
       oogde gedrongen met die brede pill-kaartjes. */
    .layer__region[data-view="columns"] .layer__region-usps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Locatie-band "Handig om te weten": de band en het grid pakken de
       volle breedte; iconen krijgen weer lucht. */
    .layer__region[data-view="stacked"] {
        padding-left: 10px;
        padding-right: 10px;
        --usp-icon-size: 38px;
    }
    /* 0,4,0: theme-regel (width:90%) verslaan — zelfde gevecht als de cards. */
    .layer-section.layer__region[data-view="stacked"] > .layer__sc > .layer__inner {
        width: 100%;
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Reviews: volle breedte (geen peek meer). Inner óók vrij van de
       theme-90% en de gutter. */
    .layer-section.layer__reviews > .layer__sc > .layer__inner {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .layer__reviews .carousel__container[data-layout-cols] .carousel__slide {
        flex-basis: 100%;
    }

    /* Hero-zoekwidget: velden gestapeld (aankomst → vertrek → samenstelling),
       0,3,0 zodat de per-laag-CSS (laadt ná site.css) niet kan winnen. */
    .layer-section.layer__search-and-book .sab__form {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .layer-section.layer__search-and-book .sab__field {
        padding-block: 10px;
    }
    /* Aankomst + vertrek elk op een eigen regel: ze delen één
       .date-trigger-row die niet meekantelt met het formulier. */
    .layer-section.layer__search-and-book .date-trigger-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .layer-section.layer__search-and-book .date-trigger {
        width: 100%;
        text-align: left;
    }
    .layer-section.layer__search-and-book .date-trigger + .date-trigger {
        border-top: 0;               /* geen lijntje boven vertrek op mobiel — wens Age 2026-07-07 */
        padding-top: 0;
    }
    .layer-section.layer__search-and-book .sab__submit {
        width: 100%;
    }
}

/* ── Contact: terra-kaart + foto als één blok (design .contact-info) ─────── */
/* De tekst-kolom is een terra-vlak dat strak tegen de foto aanligt; samen
   vormen ze één kaart met de band-radius op de buitenhoeken. Kop (wit) en
   eyebrow (sand) komen uit de CMS-design-velden van de laag. */
.layer__text--filling .layer__text-layout {
    gap: 0;
    align-items: stretch;
}
.layer__text--filling .layer__text-media {
    height: 100%;
    margin: 0;
    border-radius: 0 var(--bl-band-radius) var(--bl-band-radius) 0;
    overflow: hidden;
}
/* Tel/mail-links in de terra-kaart = light-knoppen (design .btn-light),
   met de design-iconen als mask in de tekstkleur. */
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="tel:"],
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg);
    color: var(--bl-brown);
    text-decoration: none;
    font-weight: 400; /* Open Sans regular — 600 werd faux-bold (alleen 400 geladen) */
    font-size: 14px;
    padding: 13px 22px;
    border-radius: 40px;
    margin: 6px 10px 0 0;
    transition: transform var(--dur-fast, .15s) var(--ease-out, ease);
}
/* contact-838-knoppen-1regel: op smallere kolommen (o.a. accommodatie-detail)
   wrapten telefoon + e-mail naar 2 regels. De knoppen-<p> als flex-rij met
   kleine gap + iets krappere pill-padding → passen naast elkaar; op smal
   scherm wrapt de flex alsnog netjes. (Wens Age 2026-07-07) */
.layer__text :is(.layer__text-col--1, .layer__text-tagline) .general__text p:has(a[href^="tel:"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.layer__text :is(.layer__text-col--1, .layer__text-tagline) .general__text p:has(a[href^="tel:"]) a[href^="tel:"],
.layer__text :is(.layer__text-col--1, .layer__text-tagline) .general__text p:has(a[href^="tel:"]) a[href^="mailto:"] {
    margin: 0;
    padding: 12px 16px;
    white-space: nowrap;
}
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="tel:"]:hover,
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="mailto:"]:hover {
    transform: translateY(-2px);
}
/* CSS-mask-icoon alleen voor PLATTE tel/mail-tekstlinks. Een echte knop
   (`.button`, bv. "Mail ons") heeft z'n eigen `.button__icon`-media → die zou
   anders een dubbel icoon krijgen; daarom `:not(.button)`. */
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="tel:"]:not(.button)::before,
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="mailto:"]:not(.button)::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: url('cta-telefoon-bruin-01.svg') center / contain no-repeat;
    -webkit-mask: url('cta-telefoon-bruin-01.svg') center / contain no-repeat;
}
.layer__text :is(.layer__text-col--1, .layer__text-tagline) a[href^="mailto:"]:not(.button)::before {
    mask-image: url('cta-mail-bruin-01.svg');
    -webkit-mask-image: url('cta-mail-bruin-01.svg');
}
/* Knop-icoon (`.button__icon`, media) had nergens een breedte → klapte dicht
   (0×0) waardoor de img onzichtbaar was. Geef 'm een maat; `aspect-ratio` (inline
   20/24) bepaalt de hoogte. (De media-bleed die de SVG afsneed is sinds
   framework 1.58.430 alleen nog actief mét hover-laag.) */
.button .button__icon {
    width: 1.1em;
    flex: 0 0 auto;
}
.layer__text--filling .layer__text-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;              /* de wrapper rondt al af */
}
@media (max-width: 600px) {
    /* Gestapeld: terra boven (ronde bovenhoeken), foto onder (ronde onder). */
    .layer__text--filling .layer__text-col--1 {
        border-radius: var(--bl-band-radius) var(--bl-band-radius) 0 0;
    }
    .layer__text--filling .layer__text-media {
        border-radius: 0 0 var(--bl-band-radius) var(--bl-band-radius);
    }
}

/* ── Mobiel: compactere zijruimte voor alle content-lagen ────────────────── */
/* Detailpagina's (en de rest) hielden links/rechts te veel over: gutter 24px
   bóven op de theme-90%-inner. Op smal: inner vol breed met ~1em gutter.
   (0,3,1 — wint van de injected theme-regel 0,3,0; full-bleed-lagen en de
   specifiekere band-inners (0,4,0) behouden hun eigen maat.) */
@media (max-width: 600px) {
    main .layer-section > .layer__sc > .layer__inner {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Menubuilder-zijmenu (drawer) — vervangt op mobiel de #site-nav-drawer.
   Open via de verborgen checkbox .sidemenu-toggle (body:has(...:checked)) — geen JS.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .site-header[data-has-sidemenu="1"] #site-nav { display: none; }
}
/* Drawer-trigger: verborgen maar focusbaar (toetsenbord); de hamburger is een <label for>. */
.sidemenu-toggle {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.sidemenu-backdrop {
    position: fixed; inset: 0; z-index: 200;   /* boven de sticky nav-header (100) → die wordt gedimd */
    background: rgba(29, 29, 27, .45);
    background: color-mix(in srgb, var(--bl-brown) 55%, transparent);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-out, ease), visibility 0s linear .35s;
}
body:has(.sidemenu-toggle:checked) .sidemenu-backdrop {
    opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out, ease);
}
.sidemenu-drawer {
    position: fixed; top: 0; right: 0; z-index: 210;   /* boven backdrop (200) en nav-header (100) */
    width: min(86vw, 360px); height: 100%;
    background: var(--color-bg-elev); color: var(--color-fg);
    box-shadow: var(--bl-shadow);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
body:has(.sidemenu-toggle:checked) .sidemenu-drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .sidemenu-drawer { transition-duration: .01ms; } }
.sidemenu-drawer__head { display: flex; justify-content: flex-end; padding: 14px 12px 2px; }
.sidemenu-drawer__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; background: transparent;
    color: inherit; cursor: pointer; border-radius: 50%;
}
.sidemenu-drawer__close:hover { background: var(--color-bg-soft); }
.sidemenu__list, .sidemenu__sublist { list-style: none; margin: 0; padding: 0; }
.sidemenu__item { position: relative; border-bottom: 1px solid var(--color-border); }
.sidemenu__link {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 22px; text-decoration: none; color: inherit;
    font-family: var(--font-display, inherit); font-size: 1.08rem; font-weight: 400; /* Playfair 400 = enige geladen gewicht */
}
.sidemenu__link--no-route { cursor: default; }
.sidemenu__icon { display: inline-flex; width: 24px; height: 24px; flex: none; }
.sidemenu__icon img { width: 100%; height: 100%; object-fit: contain; }
.sidemenu__label { flex: 1 1 auto; }
/* Klikbaar label van een uitklap-ouder (mét eigen route): vult de summary op zodat
   het hele label-vlak navigeert; de chevron ernaast blijft de open/dicht-toggle. */
.sidemenu__summary-link { flex: 1 1 auto; color: inherit; text-decoration: none; }
.sidemenu__item--active > .sidemenu__link { color: var(--color-primary); }
/* Subtiele hover op de zijmenu-items (wens Age 2026-07-06): lichte terracotta-
   wash. Als translucent overlay leesbaar op zowel de witte items als de beige
   submenu-items (--color-bg-soft). */
.sidemenu__link { transition: background-color .18s ease; }
.sidemenu__link:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
@media (hover: none) { .sidemenu__link:hover { background: transparent; } }
/* <details>/<summary>-accordion: summary = uitklap-rij (geen marker), chevron in-flow. */
.sidemenu__summary { cursor: pointer; list-style: none; }
.sidemenu__summary::-webkit-details-marker { display: none; }
.sidemenu__chevron { flex: none; width: 22px; height: 22px; transition: transform var(--dur-med, .3s) var(--ease-out, ease); }
.sidemenu__disclosure[open] > .sidemenu__summary .sidemenu__chevron { transform: rotate(180deg); }
.sidemenu__sublist { background: var(--color-bg-soft); }

/* Submenu (Verblijven): subtiele slide-open met ease-in bij openen van de
   <details>-disclosure. Sluiten is instant (native details-gedrag). */
@keyframes bl-sub-open {
    from { opacity: 0; transform: translateY(-6px); max-height: 0; }
    60%  { opacity: .4; }
    to   { opacity: 1; transform: translateY(0); max-height: 240px; }
}
.sidemenu__disclosure[open] .sidemenu__sublist {
    overflow: hidden;
    animation: bl-sub-open .34s ease-in both;
}
.sidemenu__chevron {
    transition: transform .28s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .sidemenu__disclosure[open] .sidemenu__sublist { animation: none; }
    .sidemenu__chevron { transition: none; }
}
.sidemenu__item--sub > .sidemenu__link { padding-left: 44px; font-size: .98rem; font-weight: 400; }
.sidemenu__ctas { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; margin-top: auto; }
.sidemenu__cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 22px; border-radius: 40px;
    background: var(--color-primary); color: var(--color-primary-fg);
    text-decoration: none; font-weight: 400;
    transition: background var(--dur-fast, .2s) var(--ease-out, ease), transform var(--dur-fast, .2s) var(--ease-out, ease);
}
.sidemenu__cta:hover { background: var(--color-primary-dk, var(--color-primary)); transform: translateY(-2px); }
@media (min-width: 761px) {
    .site-header[data-has-sidemenu="1"]:not([data-sidemenu-desktop="1"]) .site-header__menu-toggle { display: none; }
    /* show_on_desktop=1: de hamburger/sidemenu komt NAAST het normale menu op desktop —
       #site-nav blijft bewust staan (niet meer verbergen). */
    /* De framework-site-header.js zet bij een klik op de (gedeelde) hamburger ook
       body[data-menu-open]; bij een sidemenu mag dat de horizontale balk NIET in een
       dropdown veranderen (anders verdwijnt het normale menu zodra de drawer opent).
       Houd #site-nav dus in de balk staan, ongeacht data-menu-open. */
    body[data-menu-open="true"] .site-header[data-has-sidemenu="1"] .site-header__nav {
        display: flex; position: static; inset: auto; min-width: 0;
        background: none; box-shadow: none; padding: 0; border-radius: 0;
    }
    /* Óók de lijst-eigenschappen terug naar de gesloten-staat, anders verspringt het
       menu bij openen (regel 195 zet gap:12px + align-items:flex-start). */
    body[data-menu-open="true"] .site-header[data-has-sidemenu="1"] .site-header__nav .site-nav__list {
        flex-direction: row; gap: 0; align-items: normal;
    }
}

/* Elke design-radius + achtergrond: de .layer__bg (op sectie- én inner-niveau)
   erft de radius van z'n parent, zodat de band/terra-kaart zichtbaar ronde hoeken
   krijgt (generiek, geen laag-id, geen overflow nodig). */
.layer-section .layer__bg { border-radius: inherit; }

/* Welkom-laag 8 ("The perfect place..."): leeskolom max 1080px i.p.v. de standaard 1280 */

/* USP-titels (home + faciliteiten) in de themakleur van hun eigen tegel-icoon.
   Home: 645/646/648 — Faciliteiten: 810/807/809. Privé terrassen houdt terra
   (--color-primary). Per-item design_title-slot rendert (nog) niet op usp-items
   — zie issue #4; dan kan dit blok weg. */
/* USP-titelkleur staat nu per usp-item in het CMS: het USP-type heeft een
   design_title-slot (onder de Opmaak-tab), en elk item krijgt z'n eigen kleur
   via items/<id>/styles/design_title (645 olijf, 646 blauw, 648 ink; 647 geen).
   Id-vrij; de vroegere per-item id-selectors (645/646/648) zijn vervallen. */

/* USP-tegels: hover-lift + lichte draai, 1-op-1 uit het referentie-design
   (.feature:hover .badge-tile — age.playground/banuslodge). Transform op de
   hele .usp__icon-wrapper, niet op de img in de viewport (die zou clippen). */
.layer__usps .usp .usp__icon {
    transition: transform .3s ease;
}

@media (max-width: 767px) {
    /* USP-icoon vierkant op mobiel: de box-hoogte (--usp-icon-size-h, 9rem) was
       hoger dan de cirkel (6rem) -> 48px dode ruimte onder het icoon. Hoogte
       gelijk aan de breedte zetten haalt die weg, titel komt dichter bij het
       icoon. Wens Age 2026-07-07. */
    .layer__usps .usp__icon { height: var(--usp-icon-size, 3rem); }
}
.layer__usps .usp:hover .usp__icon {
    transform: translateY(-4px) rotate(-3deg);
}

/* Regio-banden: de gekleurde achtergrond tot de browserranden laten lopen.
   body is gemaxt op 1760px (frame-idee), waardoor band-achtergronden op brede
   schermen eerder stopten. De bg breekt hier met een viewport-bleed uit het
   body-kader; de content blijft gewoon in het 1280-grid. De 50vw-rekensom
   telt de scrollbalk mee — overflow-x:clip op html voorkomt een horizontale
   scrollbalk (clip maakt géén scroll-container, sticky blijft werken). */
html { overflow-x: clip; }
.layer__region.layer-section > .layer__bg {
    inset-inline: calc(50% - 50vw);
}

/* Verblijf-kaarten: 40px tussenruimte (was globale --space-3). Geen CMS-veld
   voor de grid-gap; de mozaïek-view houdt z'n eigen 18px (attribuut-selector
   wint op specificiteit). */
.layer__cards .layer__cards-grid {
    gap: 40px;
}

/* Terra kaartenband op home (laag 650): het blok zweeft in het design en mag
   nooit tegen de browserrand plakken. Het body-frame (max 1760px) geeft vanaf
   1920px vanzelf >=80px lucht per kant; daaronder vult deze marge het verschil
   aan tot altijd 80px per kant. Op klein formaat (<900px) volstaat de site-
   gutter, anders blijft er te weinig kaartbreedte over. */
@media (max-width: 899px) {
}

/* Contact-CTA checklist: richtext-bullets vervangen door het check-icoon uit
   de huisstijl (gedeelde map: check-zwart-bg-wit-32x32-01.svg), 1-op-1 het
   design (.checklist: 28px icoon, 14px gap, 16px tussen regels). Geldt voor
   de CTA-lagen: 801 (contact) en bibliotheeklaag 838 (home/omgeving). */
.layer__text--filling .layer__text-text ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -24px; /* lijst iets omhoog, weg van de knoppen — wens Age 2026-07-06 */
}
.layer__text--filling .layer__text-text ul li {
    display: flex;
    align-items: flex-start;   /* icoon op de eerste regel i.p.v. gecentreerd */
    gap: 14px;
}
.layer__text--filling .layer__text-text ul li::before { margin-top: 1px; }
.layer__text--filling .layer__text-text ul li::before {
    content: "";
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    background: url('banus-check.svg') center / contain no-repeat;
}

/* ═══ Accommodatie-detail in Vlindertuin-model (wens Age 2026-07-03) ═════════
   Puur layout — content blijft 100% uit EH/renderer komen.
   Doel-layout (desktop):
     head (naar-overzicht + titel + subtitel)  ← volle breedte
     intro-tekst                               ← volle breedte
     album (VT-stijl: hero + thumb-strip) │ boekpaneel (sticky, slidet mee)
     specs-opsomming                      │
     tekst                                │
     voorzieningen                        │
     prijzenmatrix                        │
   Vlindertuin meet 1280px (--maxw) — deze laag dus ook (was 1216). */
.layer__accommodation-detail {
    max-width: 1280px;
}
/* Extra klasse voor specificiteit (0,4,0): de globale 90%/1280-inner-regel
   wordt ná dit bestand ge-inject (#layer-design) en won anders op volgorde. */
.layer__accommodation-detail.layer-section > .layer__sc > .layer__inner {
    width: 100%;
    max-width: none;
}

/* Intro onder titel/subtitel loopt over de volle paginabreedte door. */
.accommodation-detail__intro {
    max-width: none;
}

/* Album in VT-vorm: grote 3:2-hero met strip van 4 thumbs eronder (was
   airbnb-grid 1+4). De +N-badge van de renderer zit al op tegel 5 = de
   laatste zichtbare thumb; tegels 6+ blijven in DOM voor de lightbox. */
@media (min-width: 48rem) {
    .accommodation-detail__gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        aspect-ratio: auto;
        gap: .85rem .6rem;
    }
    .accommodation-detail__gallery-item {
        border-radius: 11px;
    }
    .accommodation-detail__gallery-item:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 3 / 2;
        border-radius: 16px;
    }
    .accommodation-detail__gallery-item:not(:first-child) {
        aspect-ratio: 4 / 3;
    }
}

/* Twee-koloms paginagrid: linkerkolom album → specs → content; rechts het
   boekpaneel naast het album, dat meeslidet (sticky + max-height bestonden
   al in layer-accommodation.css). display:contents tilt main/aside uit
   __layout naar dit grid. Onder 64rem: bestaande gestapelde volgorde. */
@media (min-width: 64rem) {
    .layer__accommodation-detail.layer-section > .layer__sc > .layer__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        /* space-5 i.p.v. space-6: album breder, minder lucht naast zoek&boek. */
        column-gap: var(--space-5);
        align-items: start;
    }
    /* Head (knop/titel/subtitel/intro) alleen boven het album (kolom 1);
       kolom 2 van rij 1 blijft leeg — daar hangt de Delen-knop (absolute). */
    .accommodation-detail__head { grid-column: 1; }
    .accommodation-detail__gallery-wrap,
    .accommodation-detail__specs,
    .accommodation-detail__content,
    .accommodation-detail__properties {
        grid-column: 1;
        min-width: 0;
    }
    /* main óók oplossen: zo kan de prijzenmatrix de volle breedte pakken. */
    .accommodation-detail__layout,
    .accommodation-detail__main { display: contents; }
    .acc-matrix {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .accommodation-detail__aside {
        grid-column: 2;
        /* naast: galerij, specs, tekst, voorzieningen (matrix ligt eronder) */
        grid-row: 2 / span 4;
        align-self: start;
    }
    .accommodation-detail__cta { grid-column: 1 / -1; }
}

/* Voorzieningen-lijst: max 2 kolommen (layer-accommodation.css ging vanaf
   50rem naar 3 — wens Age: rustiger, 2 kolommen). */
@container (min-width: 50rem) {
    .accommodation-detail__properties-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* Acco-detail verfijning (wensen Age 2026-07-03): tekst vol breed, specs met
   huisstijl-iconen (zelfde vorm als de home-pill-visuals: terra cirkel + cream
   glyph), waarde inline achter het label, checkbox-vinkjes uit de specs-band. */
.accommodation-detail__content {
    max-width: none;
}

/* Specs: icoon boven, label + waarde op één regel. */
.accommodation-detail__spec {
    display: block;
    position: relative;
    padding-top: 58px;
    text-align: center; /* icoon + label + waarde per bullet gecentreerd */
}
.accommodation-detail__spec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    background: center / contain no-repeat;
}
.accommodation-detail__spec dt { display: inline; }
.accommodation-detail__spec dd {
    display: inline;
    margin: 0 0 0 .4em;
    font-size: 0.8rem; /* gelijk aan het label; kleur/gewicht blijven eigen */
}

/* Checkbox-specs ("Incl. …"): het ✓ uit de renderer verbergen. LET OP: dit is
   een per-route nth-child-mapping op de huidige popular_properties-volgorde in
   het CMS — wijzigt die set, dan dit blok bijwerken. Structurele oplossing
   (data-type-attribuut op de spec) gevraagd in issue #11. */
body[data-route="/verblijven/bungalow"] .accommodation-detail__spec:nth-child(n+3) dd,
body[data-route="/verblijven/cottage"]  .accommodation-detail__spec:nth-child(n+3) dd,
body[data-route="/verblijven/studio"]   .accommodation-detail__spec:nth-child(n+2) dd {
    display: none;
}

/* Spec-iconen per pagina/positie (volgorde = popular_properties in het CMS). */
body[data-route="/verblijven/bungalow"] .accommodation-detail__spec:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='26' cy='25' r='5.2'/%3E%3Cpath d='M16 45.5a10 10 0 0 1 20 0'/%3E%3Ccircle cx='41' cy='27' r='4.2'/%3E%3Cpath d='M37.5 45.5a8.5 8.5 0 0 1 12.5-7.4'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/bungalow"] .accommodation-detail__spec:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 22v22'/%3E%3Cpath d='M47 44v-6'/%3E%3Cpath d='M17 38h30'/%3E%3Cpath d='M21 32h19a7 7 0 0 1 7 7'/%3E%3Ccircle cx='26.5' cy='28' r='2.8'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/bungalow"] .accommodation-detail__spec:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 17c8.3 0 15 6.2 15 13.8H17c0-7.6 6.7-13.8 15-13.8z'/%3E%3Cpath d='M32 30.8V46'/%3E%3Cpath d='M23 46h18'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/bungalow"] .accommodation-detail__spec:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18.5' y='21' width='27' height='22' rx='1.5'/%3E%3Cpath d='M30.5 21v22'/%3E%3Cpath d='M30.5 29h15'/%3E%3Cpath d='M38 29v14'/%3E%3Cpath d='M26.5 25.5v5'/%3E%3Cpath d='M36 25h4'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/cottage"] .accommodation-detail__spec:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='26' cy='25' r='5.2'/%3E%3Cpath d='M16 45.5a10 10 0 0 1 20 0'/%3E%3Ccircle cx='41' cy='27' r='4.2'/%3E%3Cpath d='M37.5 45.5a8.5 8.5 0 0 1 12.5-7.4'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/cottage"] .accommodation-detail__spec:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 22v22'/%3E%3Cpath d='M47 44v-6'/%3E%3Cpath d='M17 38h30'/%3E%3Cpath d='M21 32h19a7 7 0 0 1 7 7'/%3E%3Ccircle cx='26.5' cy='28' r='2.8'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/cottage"] .accommodation-detail__spec:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 17c8.3 0 15 6.2 15 13.8H17c0-7.6 6.7-13.8 15-13.8z'/%3E%3Cpath d='M32 30.8V46'/%3E%3Cpath d='M23 46h18'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/cottage"] .accommodation-detail__spec:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 26.5q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3Cpath d='M18 35q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3Cpath d='M18 43.5q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/studio"] .accommodation-detail__spec:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='26' cy='25' r='5.2'/%3E%3Cpath d='M16 45.5a10 10 0 0 1 20 0'/%3E%3Ccircle cx='41' cy='27' r='4.2'/%3E%3Cpath d='M37.5 45.5a8.5 8.5 0 0 1 12.5-7.4'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/studio"] .accommodation-detail__spec:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18.5' y='21' width='27' height='22' rx='1.5'/%3E%3Cpath d='M30.5 21v22'/%3E%3Cpath d='M30.5 29h15'/%3E%3Cpath d='M38 29v14'/%3E%3Cpath d='M26.5 25.5v5'/%3E%3Cpath d='M36 25h4'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/studio"] .accommodation-detail__spec:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 17c8.3 0 15 6.2 15 13.8H17c0-7.6 6.7-13.8 15-13.8z'/%3E%3Cpath d='M32 30.8V46'/%3E%3Cpath d='M23 46h18'/%3E%3C/g%3E%3C/svg%3E"); }
body[data-route="/verblijven/studio"] .accommodation-detail__spec:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%239f643f'/%3E%3Cg fill='none' stroke='%23f4efeb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 26.5q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3Cpath d='M18 35q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3Cpath d='M18 43.5q4.7-4.2 9.4 0t9.3 0 9.3 0'/%3E%3C/g%3E%3C/svg%3E"); }

/* Boekpaneel-stop boven de prijzenmatrix — de ECHTE fix. position:sticky
   begrenst op de content-box van de dichtstbijzijnde échte ouder, NIET op de
   grid-area van het item (daarom gleed het paneel in élke browser door tot
   onderaan de pagina-grid). Oplossing: de aside wordt een onzichtbare,
   statische begrenzer die zijn grid-area (t/m einde voorzieningen) vult; de
   kaart-opmaak verhuist naar de twee kinderen en de boek-kaart is sticky
   BINNEN de aside → stopt gegarandeerd boven de matrix. */
@media (min-width: 64rem) {
    .accommodation-detail__aside {
        /* relative: anker voor de absolute Delen-knop erboven (geen sticky).
           top:auto is essentieel — de sticky-top uit layer-accommodation.css
           zou bij relative een permanente 99px-verschuiving worden. */
        position: relative;
        top: auto;
        align-self: stretch;
        max-height: none;
        overflow-y: visible;
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .accommodation-detail__aside .acc-aside-preview,
    .accommodation-detail__aside .accommodation-detail__availability {
        background: var(--color-bg-elev);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg, 12px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
                    0 8px 24px rgba(0, 0, 0, .06);
    }
    .accommodation-detail__aside .acc-aside-preview {
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }
    .accommodation-detail__aside .accommodation-detail__availability {
        margin: 0;
        padding: var(--space-4) var(--space-4) var(--space-5);
        border-top: 3px solid var(--color-primary);
        position: sticky;
        top: calc(var(--site-header-height, 64px) + var(--space-3));
    }
}

/* ── Delen-knop + overlay-menu (markup door Ronny, issue #12) ──────────────
   Banus-stijl: witte pill met terra tekst/icoon; menu = witte kaart met
   schaduw, rechts uitgelijnd onder de knop. Desktop hangt de knop boven de
   aside (rij van de intro, rechts uitgelijnd op de boek-kolom) — absolute,
   dus de prijs-/boek-kaart start weer gelijk met de album-bovenkant. */
.accommodation-detail__share {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.accommodation-detail__share-btn {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .5em 1.1em;
    border: 1px solid transparent;   /* terracotta outline weg (wens Age); maat blijft gelijk */
    border-radius: 999px;
    background: var(--color-bg-elev);
    color: var(--color-primary);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.accommodation-detail__share-btn::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='17.5' cy='5.5' r='2.6'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.6'/%3E%3Cpath d='M8.4 10.9l6.7-4M8.4 13.1l6.7 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='17.5' cy='5.5' r='2.6'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.6'/%3E%3Cpath d='M8.4 10.9l6.7-4M8.4 13.1l6.7 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.accommodation-detail__share-btn:hover,
.accommodation-detail__share-btn[aria-expanded="true"] {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}
.accommodation-detail__share-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .12);
}
.accommodation-detail__share-menu[hidden] { display: none; }
.accommodation-detail__share-link {
    display: block;
    width: 100%;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-fg);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.accommodation-detail__share-link:hover {
    background: var(--color-bg-soft);
    color: var(--color-primary);
}
@media (min-width: 64rem) {
    .accommodation-detail__share {
        position: absolute;
        bottom: 100%;
        right: 0;
        margin-bottom: var(--space-3);
    }
    /* Menu opent binnen de absolute wrapper: onder de knop, rechts uitgelijnd. */
    .accommodation-detail__share .accommodation-detail__share-menu {
        top: calc(100% + 8px);
    }
}
@media (max-width: 63.99rem) {
    /* Mobiel: knop bovenin de aside-kaart, rechts uitgelijnd, met wat lucht. */
    .accommodation-detail__share {
        margin-bottom: var(--space-3);
    }
}


/* ── Contact: kaart-look voor Gegevens + formulier (2026-07-03) ─────────────
   Model: contactpagina vlindertuin (witte kaarten + icoon-cirkels + rijen),
   uitgevoerd in Banus-tokens. Scoped op het text_form-subtype (uniek voor contact-kaarten) i.p.v. een id — geldt id-vrij voor alle contact-kaarten in alle talen. */
.layer__text[data-subtype="text_form"] .layer__text-layout {
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}
.layer__text[data-subtype="text_form"] .layer__text-col > .layer__text-content {
    height: 100%;
    background: var(--color-bg-elev);
    border-radius: var(--bl-band-radius);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .08);
}
/* Gegevens-rijen: klein kapitaal-label met icoon-cirkel, subtiele scheidslijn */
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4) {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 2.6rem;
    margin: 1.35rem 0 .4rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--color-bg-soft);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bl-olive-dark);
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4):first-of-type {
    margin-top: .25rem;
    padding-top: 0;
    border-top: 0;
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4)::before {
    content: "";
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--bl-contact-circle, var(--bl-sand));
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4)::after {
    content: "";
    position: absolute;
    left: .65rem;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--color-bg-elev);
    -webkit-mask: var(--bl-contact-icon) center / contain no-repeat;
    mask: var(--bl-contact-icon) center / contain no-repeat;
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4):nth-of-type(1) {
    --bl-contact-circle: var(--theme-color-4, var(--bl-olive));
    --bl-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-7.1-7-12a7 7 0 0 1 14 0c0 4.9-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4):nth-of-type(2) {
    --bl-contact-circle: var(--theme-color-3, var(--bl-olive-dark));
    --bl-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.2l1.6 4-2.1 1.6a12.5 12.5 0 0 0 6.1 6.1l1.6-2.1 4 1.6V19a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4):nth-of-type(3) {
    --bl-contact-circle: var(--theme-color-5, var(--color-primary));
    --bl-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7.5l9 6 9-6'/%3E%3C/svg%3E");
}
.layer__text[data-subtype="text_form"] .layer__text-text :is(h3, h4):nth-of-type(4) {
    --bl-contact-circle: var(--theme-color-1, var(--color-fg));
    --bl-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3.2 1.9'/%3E%3C/svg%3E");
}
/* Tekstrijen inspringen tot naast de cirkel; links in terra */
.layer__text[data-subtype="text_form"] .layer__text-text p {
    margin: 0 0 .35rem 3.5rem;
}
.layer__text[data-subtype="text_form"] .layer__text-text a {
    color: var(--color-primary);
    font-weight: 600;
}
@media (max-width: 47.99rem) {
    .layer__text[data-subtype="text_form"] .layer__text-col > .layer__text-content {
        border-radius: var(--bl-radius);
    }
}

/* Specs-raster spiegelt het thumb-raster erboven: 4 gelijke kolommen met
   dezelfde kolom-gap (.6rem) en zonder zijpadding op het beige vlak — zo valt
   het middelpunt van elk icoon exact op het midden van de foto erboven. */
@media (min-width: 48rem) {
    .accommodation-detail__specs {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3) .6rem;
        padding-inline: 0;
    }
}


/* ── Contact: formulier met placeholders-in-het-veld en zachte inputs (2026-07-03) ──
   Model: vlindertuin-formulier (sc01) — labels visueel verborgen (placeholder + a11y),
   velden als zachte afgeronde vlakken, verstuurknop als volle pill met pijl. */
.layer__text[data-subtype="text_form"] .layer__text-form {
    background: transparent;
    border: 0;
    padding: 0;
}
.layer__text[data-subtype="text_form"] .form-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.layer__text[data-subtype="text_form"] .form-field {
    margin-bottom: .9rem;
}
.layer__text[data-subtype="text_form"] .form-field__control {
    width: 100%;
    background: var(--color-bg-soft);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: .9rem 1.15rem;
    color: var(--color-fg);
    font: inherit;
}
.layer__text[data-subtype="text_form"] .form-field__control::placeholder {
    color: var(--bl-olive-dark);
    opacity: .75;
}
.layer__text[data-subtype="text_form"] .form-field__control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-elev);
}
.layer__text[data-subtype="text_form"] .form-field__control--textarea {
    min-height: 9rem;
    resize: vertical;
}
.layer__text[data-subtype="text_form"] .form-actions {
    display: flex;
    justify-content: flex-end;
}
.layer__text[data-subtype="text_form"] .form-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    width: auto;
    border-radius: 999px;
    padding: .95rem 1.75rem;
    font-weight: 600;
}
.layer__text[data-subtype="text_form"] .form-actions .btn::after {
    content: "\2192";
}

/* Extra content (bibliotheeklagen, sinds #14) op de acco-detail: dit zijn
   volwaardige .layer-secties BINNEN het paginagrid — volle breedte geven,
   anders klemmen ze in kolom 1 (smalle weergave). */
@media (min-width: 64rem) {
    .layer__accommodation-detail.layer-section > .layer__sc > .layer__inner > .layer {
        grid-column: 1 / -1;
        min-width: 0;
    }
}
/* Onderste Boeken/Naar overzicht-rij + scheidingslijn zijn overbodig geworden
   (boekpaneel is sticky aanwezig, Naar overzicht staat bovenaan; de
   contactlaag sluit de pagina nu af) — weg op alle formaten. */
.accommodation-detail__cta {
    display: none;
}

/* Media-album-mozaïek (layer_media_albums): de tegels openen de lightbox, dus
   een zoom-cursor + subtiele hover-hint (dezelfde `zoom-in` als de product-
   gallery). #90 */
.layer__cards-lightbox {
    cursor: zoom-in;
}
.layer__cards-lightbox .card__media {
    transition: filter 0.3s ease;
}
.layer__cards-lightbox:hover .card__media,
.layer__cards-lightbox:focus-visible .card__media {
    filter: brightness(0.92);
}

/* Contact 50/50-kaarten (text_form-subtype) recht uitlijnen op de content-breedte
   (104→1336, gelijk aan intro-tekst + kaart). De framework-regel bouwt de
   kolommen als `calc(50% ..) calc(50% ..)` en trekt de grid-gap NIET af →
   samen 100% + 32px, waardoor de rechterkaart 32px voorbij de rand puilt
   (tot 1368 i.p.v. 1336). `1fr 1fr` verdeelt ná de gap, dus beide kaarten
   passen precies. Framework-brede bug gemeld (issue #16). Binnen dezelfde
   container-query als de framework-regel (48rem). */
@container (min-width: 48rem) {
    .layer__text.layer__text[data-subtype="text_form"] .layer__text-layout[data-media-only="0"] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Scroll-reveal: de 'ignite'-gloedpuls (filter: drop-shadow op de hele laag,
   motion.css) flitst een amber-schaduw onder de laag — op foto's subtiel, maar
   onder de subtiteltekst een lelijke slagschaduw (melding Age). De drop-shadow
   kan niet los van de tekst binnen één laag-filter → de gloedpuls helemaal uit;
   de fade-up-reveal (opacity/transform via transition) blijft gewoon werken. */
.layer[data-revealed="true"]:not(.layer__header) {
    animation: none;
}


/* De "Goed om te weten"-kaart (olijf-kader + witte gecentreerde tekst) staat nu
   CMS-native op de laag zelf via de design-slots `design_layer_ic` (achtergrond
   $theme-color-4 + 34px radius + padding, op de inner) en `design_text` (witte
   tekst). Id-vrij en op alle taal-/pagina-kopieën gelijk; de vroegere
   `[data-layer-id="1123"]`-CSS is vervallen. */

/* Reviews: rating-indicator van kaars-vlammetjes → sterretjes in olijf (wens
   Age 2026-07-06, zie screenshot). Alleen de mask + kleur wijzigen; het
   fill-width-mechanisme (rating%) blijft werken. Site-breed (home + /reviews). */
.reviews__item-stars {
    --flame-color: var(--theme-color-4);
    --flame-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
}

/* Plattegrond-tekstblok (1141): foto links + tekst rechts loopt nu via het CMS-veld
   `rtl` ("rtl" = tekst rechts/media links → renderer zet data-rtl="1", generieke
   swap in layers.css). Kolombreedte via `column_text_width`. Geen id-CSS meer nodig. */


/* Reviews in rastermodus: CMS-veld `display=grid` op de reviews-laag zet de
   modifier `.layer__reviews--grid` (id-vrij, vervangt de vroegere laag-1145-CSS,
   stijl à la aanhetwater.nl, wens Age 2026-07-06). De renderer laat in gridmodus
   de carousel + pijlen/dots weg en zet geen inline transform/flex, dus geen
   `!important` nodig. Home-reviews (683) staan op carousel en blijven ongemoeid.
   De laag-kop verberg je door de titel/subtitel op de laag leeg te laten (de
   intro-tekstlaag levert de kop). */
.layer__reviews--grid .reviews__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.layer__reviews--grid .reviews__slide { width: auto; }
@media (max-width: 767px) {
    .layer__reviews--grid .reviews__grid { grid-template-columns: 1fr; }
}

/* /reviews-intro (laag 1084): in lijn met de andere pagina-intro's — het type
   kan niet naar `text_centered` via de API, dus we spiegelen `data-align=center`
   (1 kolom, gecentreerd, grote titel). Plus de 'ondertekening'-italic/muted op
   de intro-alinea terug naar normaal (die stijl hoort alleen op text-subtype). */
.layer__text[data-layer-id="1084"] .layer__text-layout {
    grid-template-columns: 1fr;
    max-width: 50rem;
    margin-inline: auto;
    text-align: center;
}
.layer__text[data-layer-id="1084"] .layer__text-tagline { text-align: center; }
.layer__text[data-layer-id="1084"] .layer__text-title {
    font-size: clamp(2rem, calc(1rem + 3vw), 3rem);
    line-height: var(--line-tight);
}
.layer__text[data-layer-id="1084"] .general__text p:last-child {
    font-style: normal;
    color: var(--color-fg-muted);
}

/* Verblijven-kaartenband (85): de terracotta band zit nu op de .layer__inner via
   de CMS-slot `design_layer_ic` (bg + 34px radius + padding). De inner is al
   content-breed (90%/max 1280) én gecentreerd, dus de band is vanzelf contained
   en de ronde hoeken vallen binnen beeld — géén id-selector/breedte-hack meer nodig. */

/* Opsommingstekens (bullets) overal terracotta (wens Age 2026-07-06). ::marker
   kleurt alleen zichtbare bullets; lijsten met list-style:none (nav/footer/
   reviews/sidemenu) hebben geen marker en blijven dus ongemoeid. */
li::marker { color: var(--theme-color-5); }

/* Artikel-kaarten (omgeving-overzicht, .card--article): de nieuwe variant mist
   media-hoogte → de foto klapte dicht (0px). Geef de media een 3:2-verhouding
   + ronde bovenhoeken, en de titel een kaart-passend formaat i.p.v. h1-groot. */
.card--article .card__media {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
    overflow: hidden;
}
.card--article .card__title {
    font-size: var(--fs-h3, 1.35rem);
    line-height: 1.2;
}

/* Artikel-detailpagina (layer__article-detail, #17): hero-afbeelding miste
   hoogte → klapte dicht; 16:9 + ronding. Leesbare tekstbreedte + nette terug-
   link (was default-blauw onderstreept). */
.article-detail__hero-image {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}
.article-detail__intro { max-width: 70ch; }
.article-detail__text { max-width: 70ch; }
.article-detail__back {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.article-detail__back:hover { text-decoration: underline; }

/* Detailpagina omgeving/artikel: FOTO LINKS, TEKST RECHTS op desktop (wens Age
   2026-07-06; ref = Vlindertuin-evenement-detail). Geen DOM-wijziging: de
   layer__inner-children (hero | head | address | text | back) in een 2-koloms
   grid -- hero in kolom 1 (rekt mee met de teksthoogte), de rest in kolom 2.
   Onder 56rem valt het terug op gestapeld (foto boven, tekst eronder). */
@media (min-width: 56rem) {
  .layer__article-detail .layer__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .layer__article-detail .article-detail__hero {
    grid-column: 1;
    grid-row: 1 / span 8;   /* overspant alle tekstrijen zodat de foto NIET
                               een enkele rij oprekt (geen gat onder de intro);
                               align-self:start houdt de natuurlijke ratio. */
    align-self: start;
    margin: 0;
  }
  /* Foto op NATUURLIJKE verhouding tonen (niet bijsnijden/uitrekken): de
     framework-media__viewport is absoluut gepositioneerd binnen een aspect-box;
     zet 'm statisch zodat de <img> z'n eigen intrinsieke hoogte bepaalt. */
  .layer__article-detail .article-detail__hero-image { aspect-ratio: auto; height: auto; }
  .layer__article-detail .article-detail__hero-image .media__viewport {
    position: static; inset: auto; height: auto;
  }
  .layer__article-detail .article-detail__hero-image img {
    position: static; width: 100%; height: auto; object-fit: initial;
  }
  .layer__article-detail .article-detail__head,
  .layer__article-detail .article-detail__address,
  .layer__article-detail .article-detail__text,
  .layer__article-detail .article-detail__back { grid-column: 2; }
  .layer__article-detail .article-detail__head { margin-top: 0; }
  /* Terug-link dichter op de tekst (was te ver onderaan). */
  .layer__article-detail .article-detail__back { margin-top: var(--space-3, 1rem); }
  /* Route-knop niet gewenst op de omgeving-detailpagina (wens Age). */
  .layer__article-detail .article-detail__route { display: none; }
}
/* Meer lucht boven de detail-content (stond bijna tegen de nav aan). */
.layer__article-detail .layer__sc { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Impressie 2e media-album (1107 "Comfortabel en compleet"): groen (olijf) rond
   kader, net als de terra-banden maar groen (wens Age 2026-07-06). bg erft de
   34px-radius + contained op contentbreedte + wat extra marge boven/onder. */
/* Kop + tagline cream op het groene kader (design_title-slot pakt niet op
   media-albums; .layer__cards-title heeft eigen ink-kleur). */
/* Media-album-band 1107 titel wit op de olijf-band. TIJDELIJK id-selector: de
   media_albums-renderer laadt de design_title-slot (nog) niet (framework #216),
   dus nog niet CMS-first mogelijk. 1107 is een shared item -> geldt voor alle talen. */
[data-layer-id="1107"] .layer__cards-title { color: var(--theme-color-9); }

/* Media-album-band (1107): olijf-band + cream-tekst nu op de .layer__inner via
   de CMS-slot design_layer_ic (bg/radius/padding), titelkleur via design_title.
   Tagline erft de cream basiskleur van de inner. Geen id-selector/breedte-hack meer. */


/* Album/card-foto's: witte baseline-lijn onder de <img> weg (inline→block) */
.layer__cards-grid .card__media img,
.layer__cards-grid .media__viewport img { display: block; }

/* Zoek & boek-band (171): het olijf-kader achter de zoekbalk zit nu op de
   .layer__inner via de CMS-slot design_layer_ic (bg/radius/padding). De inner is
   al content-breed, dus geen id-selector/breedte-hack meer nodig. */

/* Zoekresultaat-kaarten (laag 213) in de home-kaartstijl: witte afgeronde
   kaart + scallop-rand onder de foto + terra personen-icoon bij de subtitel
   + Playfair-titel (wens Age 2026-07-06). */
.search-results__card {
    background: var(--color-bg-elev, #fff);
    border: 0;
    border-radius: var(--bl-radius, 20px);
    box-shadow: var(--bl-shadow-sm, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06));
    overflow: hidden;
}
.search-results__card-image {
    position: relative;
    aspect-ratio: 3 / 2;
}
.search-results__card-image::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 23px;
    background: url('banus-scallop.svg') bottom center / 100% 23px no-repeat;
}
.search-results__card-body { padding: 26px 28px 28px; }
.search-results__card-title {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.15;
    margin: 0;
}
.search-results__card-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 13.5px;
}
.search-results__card-subtitle::before {
    content: "";
    width: 18px; height: 18px;
    flex: 0 0 auto;
    background-color: var(--color-primary);
    -webkit-mask: url('banus-personen.svg') center / contain no-repeat;
            mask: url('banus-personen.svg') center / contain no-repeat;
}
.search-results__card-meta { color: var(--color-fg-muted); font-size: .85rem; }


/* De "Bereken je route"-knop onder de kaart is nu opt-in via het CMS-veld
   `route_button` op de kaart-laag (default verborgen) i.p.v. een id-CSS-hack. */

/* Zoek & boek-balk: brand-icoon vooraan (icoon-zoek-boek-01.svg, gedeelde map)
   + vergrootglas in de ZOEKEN-knop, zoals het prototype (wens Age 2026-07-06). */
.sab__form { position: relative; }
.sab__form::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 58px; height: 58px;      /* gelijk aan de ZOEKEN-knop */
    margin-right: 10px;
    background: url('icoon-zoek-boek-01.svg') center / contain no-repeat;
}
@media (min-width: 768px) {
    .sab__form::before { transform: translateX(4px); } /* icoon 4px naar rechts (desktop) — wens Age 2026-07-06 */
}
.sab__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}
.sab__submit::before {
    content: "";
    width: 1.05em; height: 1.05em;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* "Boeken" blijft uitgeschakeld tot er een geldige, beschikbare periode met
   prijs is gekozen — booking-preview-bar.js zet submit.disabled o.b.v. de
   preview-staat (data-visible). */
.sab__submit:disabled,
.sab__submit[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.4);
}


/* Meer lucht tussen de prijzen-matrix (.layer__accommodation-detail) en het
   contactblok 838 — alleen op de accommodatie-detailpagina (adjacent sibling),
   zodat 838 op andere pagina's ongemoeid blijft. matrix ↔ contact-838 spacing.
   Wens Age 2026-07-07. */
.layer__accommodation-detail + .layer__text { margin-top: 5.5em; }


/* boek-widget-icoon-rechtsboven: op de accommodatie-detailpagina staat het
   merk-icoon (::before op .sab__form) gecentreerd bovenaan de boek-widget.
   Verplaatst naar rechtsboven, naast de "Boeken"-titel (wens Age 2026-07-07).
   Alleen deze widget — de zoekbalk (/zoek-en-boek) blijft ongemoeid. */
.accommodation-detail__availability .sab__form::before { display: none; }
/* Extra ruimte boven het eerste veld (Aankomst) — het icoon dat hier stond is
   weg, dus de velden schoven omhoog. (Wens Age 2026-07-07) */
.accommodation-detail__availability .sab__form { margin-top: 2rem; }
.accommodation-detail__availability-title { position: relative; }
.accommodation-detail__availability-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    background: url('icoon-zoek-boek-01.svg') center / contain no-repeat;
}


/* ── "Kleinschalig en sfeervol" media-album (laag 1079) op mobiel ──────────
   1 grote foto full-width + daarna 2 rijen van 2 (i.p.v. alles 1-koloms).
   Banner-cards hebben een aspect-ratio, dus de thumbs schalen vanzelf mee.
   Wens Age 2026-07-07. */
@media (max-width: 599px) {
    /* specificity moet .layer__cards[data-view="mosaic"] .layer__cards-grid (0,3,0)
       verslaan -> extra [data-layer-id] erbij (0,4,0). Breakpoint 599 = de
       eigen phone-breakpoint van de mosaic. */
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .layer__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .layer__cards-grid > .card:first-child {
        grid-column: 1 / -1;
    }
    /* eventuele mosaic row/col-spans op de overige cards resetten */
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .layer__cards-grid > .card {
        grid-row: auto;
    }
    /* Alle foto's dezelfde beeldverhouding als de grote foto (~16:9): mosaic
       forceert normaal height:100% + vaste rijhoogte, waardoor de smalle
       thumbs vierkant/portret oogden. Rij- en card-hoogte los + aspect-ratio
       op de media. Wens Age 2026-07-07. */
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .layer__cards-grid {
        grid-auto-rows: auto;
    }
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .card,
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .card__content,
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .card__link {
        height: auto;
    }
    .layer__cards[data-view="mosaic"][data-layer-id="1079"] .card__media {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}


/* Contact-CTA knoppen (telefoon/e-mail) op mobiel iets meer ruimte ertussen
   (flex-gap 8px -> 14px) — lagen 801 (home) + 838 (contact). Wens Age 2026-07-07. */
@media (max-width: 767px) {
    /* zelfde hoge-specificity-selector als de bestaande 8px-regel (0,5,2),
       later in de bron -> wint binnen deze media-query */
    .layer__text .layer__text-col--1 .general__text p:has(a[href^="tel:"]) {
        gap: 14px;
    }
}


/* Acc-detail gallery op mobiel: zelfde beeldverhoudingen als desktop.
   Framework zet mobiel een container-aspect-ratio 4/3 + rijen 2fr/1fr (geen
   per-item ratio) -> beelden werden ~2:1. Container losmaken en per item de
   desktop-ratio's geven: grote foto 3/2, thumbs 4/3. Wens Age 2026-07-07. */
@media (max-width: 48rem) {
    .accommodation-detail__gallery {
        grid-template-rows: auto;
        aspect-ratio: auto;
    }
    .accommodation-detail__gallery-item:first-child {
        aspect-ratio: 3 / 2;
    }
    .accommodation-detail__gallery-item:not(:first-child) {
        aspect-ratio: 4 / 3;
    }
}


/* Acc-detail specs op mobiel compacter: icoon links, label + waarde ernaast op
   één regel (i.p.v. icoon boven, tekst eronder). Wens Age 2026-07-07. */
@media (max-width: 48rem) {
    .accommodation-detail__specs {
        grid-template-columns: 1fr;
    }
    .accommodation-detail__spec {
        position: relative;         /* expliciet containing block voor het absolute icoon */
        display: flex;
        flex-direction: row;        /* label + waarde naast elkaar (niet de framework-column) */
        align-items: center;        /* verticaal gecentreerd */
        justify-content: flex-start;
        gap: .4em;                  /* kleine ruimte tussen label en waarde */
        text-align: left;
        padding: 0 0 0 62px;        /* ruimte links voor het 46px-icoon + tussenruimte */
        min-height: 46px;
    }
    /* Icoon absoluut T.O.V. de spec (niet als ::before-flex-item): in Safari
       iPhone viel het icoon anders naast de kaart. left:0 = binnen de kaart. */
    .accommodation-detail__spec::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
}


/* Contact-bibliotheeklaag (838) op de detailpagina: die staat genest in de
   acc-detail-laag (padding 24+16px) en werd daardoor smaller dan op home.
   Op mobiel full-bleed laten breken zodat de terra-kaart weer even breed is
   als op home (358px). Wens Age 2026-07-07. */
/* Op alle breedtes full-bleed (was mobiel-only): op desktop pakt de inner
   dan z'n eigen max-width 1280 -> even breed als home (1280, gecentreerd).
   overflow-x: clip op html voorkomt horizontale scroll van de 100vw. */
.layer__accommodation-detail .layer__text {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}


/* Footer-logo naar 75% (240px -> 180px). Wens Age 2026-07-07. */
.site-footer__logo {
    width: 180px;
    max-width: 180px;
}


/* Sticky "Boek direct voor een perfect holiday"-balk (globale thema-feature
   #bookBar) verbergen op de verblijven-overzichtspagina + alle verblijf-
   detailpagina's (bungalow/cottage/studio): daar navigeer je via de cards /
   staat al een boekpaneel. Elders blijft de balk staan. Wens Age 2026-07-07. */
body[data-route^="/verblijven"] #bookBar {
    display: none;
}


/* ── Acc-detail: mobiele prijs-teaser boven het album + "Direct boeken"
   (issue #27) ──────────────────────────────────────────────────────────
   De DOM-verplaatsing (teaser boven de galerij op mobiel) kan niet met pure
   CSS — .acc-aside-preview en .accommodation-detail__gallery-wrap zitten in
   verschillende containers/niveaus (zie layer__accommodation-detail-DOM).
   /js/acc-aside-preview.js verplaatst de bestaande node (geen kloon) naar
   direct ná .accommodation-detail__intro zodra de viewport ≤767px is, en
   zet 'm terug bij terug-resizen naar desktop. Hooks voor Age's eigen
   opmaak-vervolg: het blok blijft gewoon .acc-aside-preview (ongeacht
   positie); de knop is .acc-aside-preview__cta; het scroll-doel is
   .accommodation-detail__availability (scroll-margin-top hieronder zorgt al
   voor de juiste sticky-header-offset bij scrollIntoView). */
.acc-aside-preview {
    position: relative;
    padding-right: 148px;
}
/* Mobiel: buiten de desktop-aside verliest de teaser de witte kaart-look (die
   is gescoped op `.accommodation-detail__aside .acc-aside-preview`). De JS zet
   op mobiel de `--mobile`-modifier (zie acc-aside-preview.js); die geeft 'm
   dezelfde kaart als op desktop, met ruimte rechts voor de absolute CTA. */
.acc-aside-preview--mobile {
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
                0 8px 24px rgba(0, 0, 0, .06);
    padding: var(--space-4);
    padding-right: 148px;
    margin: 0 -16px 16px -16px;
    padding-bottom: 16px;
}
.acc-aside-preview__cta {
    position: absolute;
    right: var(--space-4, 16px);
    bottom: var(--space-4, 16px);
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    transition: transform var(--dur-fast, .18s) var(--ease-out, ease),
                background var(--dur-fast, .18s) var(--ease-out, ease);
}
.acc-aside-preview__cta:hover,
.acc-aside-preview__cta:focus-visible {
    background: var(--color-primary-dk);
    transform: translateY(-2px);
}
/* Zeer smalle schermen: knop onder i.p.v. naast prijs/sub (te weinig breedte). */
@media (max-width: 359px) {
    .acc-aside-preview {
        padding-right: 0;
        padding-bottom: 56px;
    }
}
.accommodation-detail__availability {
    scroll-margin-top: calc(var(--site-header-height, 64px) + var(--space-3, 16px));
}

/* ── Zijmenu (Rechter menu) CTA's: "Zoek & boek" als knop, met daaronder een
   subtiele klikbare telefoon-CTA met telefoon-icoon (issue #28, wens Age).
   Nummer + tel-link blijven CMS-gedreven (cta-item 382, positie "Rechter menu");
   dit is enkel opmaak. De framework-renderer hernoemde .sidemenu__ctas →
   .site-nav__ctas--right (basis = horizontale rij), waardoor de oude kolom-opmaak
   wegviel; hier hersteld (kolom, knop onder knop) + telefoon-icoon toegevoegd via
   dezelfde mask-techniek/asset als de contact-knoppen. Tokens-only, geen !important. */
.site-nav__ctas--right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 20px 22px;
    margin-top: auto;
}
.site-nav__ctas--right .site-nav__cta {
    justify-content: center;
    padding: 13px 22px;
    border-radius: 40px;
    font-weight: 500;
}
/* De telefoon-CTA onder de knop: subtiel (leest als link), met telefoon-icoon ervoor. */
.site-nav__ctas--right .site-nav__cta[href^="tel:"] {
    background: transparent;
    color: var(--color-primary);
    padding: 4px 22px;
    border-radius: 0;
    gap: 8px;
}
.site-nav__ctas--right .site-nav__cta[href^="tel:"]:hover {
    background: transparent;
    color: var(--color-primary-dk, var(--color-primary));
    transform: none;
}
.site-nav__ctas--right .site-nav__cta[href^="tel:"]::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    mask: url('cta-telefoon-bruin-01.svg') center / contain no-repeat;
    -webkit-mask: url('cta-telefoon-bruin-01.svg') center / contain no-repeat;
}

/* Dev-only "geen renderer"-waarschuwing (editmode) — voorheen inline-styled in Renderer.php */
.layer-debug-missing {
    margin: 2rem auto;
    max-width: 60rem;
    padding: 1rem 1.25rem;
    border: 2px dashed #d97706;
    border-radius: .5rem;
    background: #fffbeb;
    color: #92400e;
    font: 14px/1.55 ui-monospace, monospace;
}
.layer-debug-missing__hint { opacity: .8; }
.layer-debug-missing__link { color: #b45309; font-weight: bold; }


/* Acc-detail mobiel: VANAF-prijs + Direct boeken-teaser boven de intro-tekst,
   en het lijntje eronder weg. De teaser is een sibling van .head; de intro
   zit ín .head -> head platmaken (display:contents) en de directe kinderen
   van .layer__inner herordenen: back/titel/subtitel -> teaser -> intro ->
   album -> specs -> layout -> contact. Wens Age 2026-07-07. */
@media (max-width: 767px) {
    .layer__accommodation-detail > .layer__sc > .layer__inner {
        display: flex;
        flex-direction: column;
    }
    .layer__accommodation-detail .accommodation-detail__head {
        display: contents;
    }
    .accommodation-detail__intro { order: 1; margin-bottom: 22px; } /* iets meer lucht tussen tekst en foto-album */
    .accommodation-detail__gallery-wrap { order: 2; }
    .accommodation-detail__specs { order: 3; }
    .accommodation-detail__layout { order: 4; }
    .layer__accommodation-detail .layer__text { order: 5; }
    /* lijntje onder de teaser weg + wat lucht boven/onder */
    .acc-aside-preview--mobile {
        border-bottom: 0;
        margin-top: 6px;
        padding-bottom: 0;
    }
    /* Prijs-teaser als grid: tekst (label/prijs/sub) in kolom 1, Direct-boeken-
       knop in kolom 2, uitgelijnd op de ONDERKANT van "voor 5 nachten".
       Betrouwbaarder dan de flex-kolom-wrap. Age 2026-07-07 */
    .acc-aside-preview--mobile {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: start;
        column-gap: 16px;
    }
    .acc-aside-preview--mobile .acc-aside-preview__label { grid-column: 1; grid-row: 1; }
    .acc-aside-preview--mobile .acc-aside-preview__price { grid-column: 1; grid-row: 2; }
    .acc-aside-preview--mobile .acc-aside-preview__sub   { grid-column: 1; grid-row: 3; }
    .acc-aside-preview--mobile .acc-aside-preview__cta {
        grid-column: 2;
        grid-row: 1 / -1;     /* spant alle 3 tekstrijen */
        align-self: end;
        margin: 0;
        /* fijn-uitlijnen: knop-onderkant exact op de tekstonderkant van
           "voor 5 nachten" (grid-end laat door line-height/marge ~12px over) */
        transform: translateY(12px);
    }
}


.layer__booking[data-booking-engine="widget"] .widget-123boeken-row select {
    padding-left: 0.85rem !important;
}

.layer__booking[data-booking-engine="widget"] .widget-123boeken-row .select-display .select-label {
    min-width: 0;
}

.layer__booking[data-booking-engine="widget"] .widget-123boeken-row .select-display .select-arrow {
    margin-left: auto;
    flex-shrink: 0;
}