/* ─── /assets/modules/lightbox.css ─── */
/* lightbox — full-screen image-viewer module
   Native <dialog> + backdrop. Klik op backdrop / X / Esc sluit.
   Pan/zoom: scroll-wheel en pinch tot 4×. */

.lightbox {
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    color: #fff;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
    --loader-color: #fff;
    --loader-track: rgba(255, 255, 255, .18);
}
.lightbox.is-open {
    opacity: 1;
    transform: scale(1);
}
.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
}
.lightbox.is-open::backdrop {
    opacity: 1;
}
.lightbox__viewport {
    position: absolute;
    inset: 0 0 7rem;
    overflow: hidden;
}
.lightbox__stage {
    display: flex;
    height: 100%;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}
.lightbox__nav[disabled] {
    opacity: 0.25;
    pointer-events: none;
}
.lightbox__slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 4.5rem;
    box-sizing: border-box;
    overflow: hidden;
}
.lightbox__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
    cursor: zoom-in;
    touch-action: none;
}
.lightbox__zoom.is-zoomed  { cursor: grab; }
.lightbox__zoom.is-panning { cursor: grabbing; }
.lightbox__slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox__close,
.lightbox__nav {
    position: absolute;
    z-index: 10;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__close       { top: 1.25rem;   right: 1.25rem; }
.lightbox__nav--prev   { top: 50%;       left:  1.25rem; transform: translateY(-50%); font-size: 2rem; }
.lightbox__nav--next   { top: 50%;       right: 1.25rem; transform: translateY(-50%); font-size: 2rem; }
.lightbox__counter {
    position: absolute;
    bottom: 0.6rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.lightbox__thumbs {
    position: absolute;
    bottom: 1.75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 4.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    background: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.lightbox__thumb:hover   { opacity: 0.75; }
.lightbox__thumb.is-active {
    opacity: 1;
    border-color: #fff;
}
.lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── /assets/modules/loader.css ─── */
/* loader — generieke ring-spinner.
 *
 * Themable via CSS custom properties (op parent of ancestor):
 *   --loader-size    default: 2.75rem
 *   --loader-color   default: #fff        (draaiende boog)
 *   --loader-track   default: rgba wit .2 (achtergrond-ring)
 *   --loader-speed   default: 0.65s
 *
 * Activeer via `data-loading` op het parent-element (doet loader.js).
 */

.loader {
    position: absolute;
    inset: 0;
    width:  var(--loader-size, 2.75rem);
    height: var(--loader-size, 2.75rem);
    margin: auto;
    border-radius: 50%;
    border: 3px solid var(--loader-track, rgba(255, 255, 255, .2));
    border-top-color: var(--loader-color, #fff);
    /* paused by default: animatie start vers bij activate, geen CPU-waste idle */
    animation: spin var(--loader-speed, 0.65s) linear infinite;
    animation-play-state: paused;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast, 0.15s) ease-out;
    z-index: 1;
}

[data-loading] > .loader {
    animation-play-state: running;
    opacity: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Spinner draait door — loading is functioneel afhankelijk van herhaling.
       Langzamer (0.65s → 1.5s) zodat het minder intens aanvoelt. */
    .loader { animation-duration: 1.5s; }
}

/* ─── /assets/modules/media.css ─── */
/* media.css — base-styles voor `Framework\Media\Renderer`-output.
 *
 * De *toggle*-logica voor multi-variant zit in een scoped <style>-block dat
 * de Renderer per item inline genereert (`[data-id="m-xxxx"]`-selectors).
 * Dit bestand bevat alleen wat in alle items hetzelfde is: aspect-ratio
 * gedrag, object-fit per display-mode, play-button en overlay-images.
 *
 * Single-variant items hebben enkel de outer `.media`-class — geen
 * `.media-stack`-wrapper, geen scoped style.
 */

.media,
.media-stack > .media {
    position: relative;
    overflow: hidden;
}

.media-stack {
    position: relative;
}

/* #23: de viewport is de ENIGE clipper en omsluit alleen de schaalbare foto-lagen
   (basis-img/video/iframe + .media-hover). Decoraties (overlay/play/poster) staan
   op de buitenste .media → niet onderhevig aan zoom/clip. Moderne strakke clipping. */
.media__viewport {
    position: absolute;
    inset: 0;
    overflow: clip;
    overflow-clip-margin: 0;
}

.media__viewport > img,
.media__viewport > video,
.media__viewport > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Alleen mét hover-laag (#23): de basis-laag over-dekt de viewport net 1px zodat
   subpixel-jitter bij de geschaalde hover-laag nooit een naad/gat toont. Zonder
   hover-laag is de bleed onnodig — en op mini-media (icoontjes van ~20px door de
   component) sneed die vaste 1px juist zichtbaar randen af (banus Bel/Mail-knoppen). */
.media__viewport:has(> .media-hover) > img,
.media__viewport:has(> .media-hover) > video,
.media__viewport:has(> .media-hover) > iframe {
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
}
.media[data-display="cover"] .media__viewport > img,
.media[data-display="cover"] .media__viewport > video {
    object-fit: cover;
}
.media[data-display="fit"] .media__viewport > img,
.media[data-display="fit"] .media__viewport > video {
    object-fit: contain;
}

/* #38: natuurlijke ratio (geen aspect-ratio, geen cover/fit). Zonder dit zijn alle
   viewport-kinderen absoluut → .media hoogte 0 → onzichtbaar. De viewport wordt
   relative en de BASIS-laag (eerste kind: img/video/iframe) bepaalt in-flow de hoogte;
   de .media-hover (geen first-child) blijft absoluut binnen die hoogte → overlap/clip
   blijft werken.

   Twee selectors, bewust defensief:
   - `[data-display="natural"]`: de expliciete marker die de Renderer (≥1.44.8) zet.
   - `:not([data-display]):not([style*="aspect-ratio"])`: dezelfde natuurlijke-ratio-case
     afgeleid uit afwezigheid — vangt een site die nog op een oudere Renderer draait
     (geen marker) zodat een losse media.css-deploy óók daar fixt. Cover/fit hebben
     data-display, vaste ratio heeft inline aspect-ratio → die matchen geen van beide. */
.media[data-display="natural"] > .media__viewport,
.media:not([data-display]):not([style*="aspect-ratio"]) > .media__viewport {
    position: relative;
    inset: auto;
}
.media[data-display="natural"] > .media__viewport > :first-child,
.media:not([data-display]):not([style*="aspect-ratio"]) > .media__viewport > :first-child {
    position: relative;
    inset: 0;
    width: 100%;
    height: auto;
}

/* Play-button overlay — gecentreerd, klikbaar boven poster/video.
   Voor self-hosted video bepaalt `[data-paused]` op de wrapper de visibility:
   media.js togglet die op pause/play. Themakleur via `--color-primary`. */
.media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary, rgba(0, 0, 0, .55));
    color: var(--color-primary-fg, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s, opacity .2s;
    z-index: 2;
}
.media-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    filter: brightness(1.08);
}
.media-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

/* Self-hosted video: button volgt de paused-state van de wrapper. */
.media[data-paused="0"] > .media-play {
    opacity: 0;
    pointer-events: none;
}
.media[data-paused] .media__viewport > video {
    cursor: pointer;
}

/* Overlay-image (badge/logo) */
.media-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Met overlay_position (≠ full): badge op natuurlijke grootte in een hoek,
   geplaatst via object-position binnen de full-bleed box. */
.media-overlay[data-position] { object-fit: none; }
.media-overlay[data-position="left_top"]      { object-position: left top;      }
.media-overlay[data-position="center_top"]    { object-position: center top;    }
.media-overlay[data-position="right_top"]     { object-position: right top;     }
.media-overlay[data-position="left_center"]   { object-position: left center;   }
.media-overlay[data-position="center_center"] { object-position: center;        }
.media-overlay[data-position="right_center"]  { object-position: right center;  }
.media-overlay[data-position="left_bottom"]   { object-position: left bottom;   }
.media-overlay[data-position="center_bottom"] { object-position: center bottom; }
.media-overlay[data-position="right_bottom"]  { object-position: right bottom;  }

/* Hover-image (alleen voor image-types) */
.media-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.media:hover .media-hover {
    opacity: 1;
}

/* YouTube/Vimeo poster — getoond als overlay-image boven de iframe maar
   onder de play-button. media.js handelt klik af: poster + play-button
   verbergen + iframe.src herladen met `autoplay=1`. */
.media-iframe-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
}

/* ─── /assets/modules/date-picker.css ─── */
/* date-picker — donkere card-stijl met indigo-accent.
 * Geïnspireerd op legacy/components/AvailabilityCalendar.js: dimmed surface,
 * pill-buttons, overlay-panels voor maand/jaar quick-picks.
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd, ongeacht laadvolgorde.
 *
 * Trigger-vars: --date-trigger-*
 * Popover-vars: --date-* */

@layer mm {
    .date-button,
    .date-trigger {
        --date-trigger-bg:     var(--color-bg-elev, #fff);
        --date-trigger-border: var(--color-border-strong, #b8b8b8);
        --date-trigger-fg:     var(--color-fg, #1a1a1a);
        --date-trigger-muted:  var(--color-fg-muted, #666);
        --date-trigger-focus:  var(--color-primary, #1e2a3a);
    }

    .date-popover {
        --date-bg:             var(--color-bg-elev, #fff);
        --date-surface:        var(--color-bg-soft, #f7f7f8);
        --date-surface-strong: var(--color-border, #d9d9d9);
        --date-border:         var(--color-border, #d9d9d9);
        --date-fg:             var(--color-fg, #1a1a1a);
        --date-muted:          var(--color-fg-muted, #666);
        --date-muted-strong:   var(--color-fg, #1a1a1a);
        --date-accent:         var(--color-primary, #1e2a3a);
        --date-accent-text:    var(--color-primary-fg, #fff);
        --date-accent-hover:   color-mix(in srgb, var(--color-primary, #1e2a3a) 15%, transparent);
        --date-accent-active:  color-mix(in srgb, var(--color-primary, #1e2a3a) 25%, transparent);
        --date-accent-subtle:  color-mix(in srgb, var(--color-primary, #1e2a3a) 10%, transparent);
        --date-overlay-bg:     light-dark(rgba(255, 255, 255, .72), rgba(7, 10, 18, .72));
        --date-radius:         var(--radius-lg, 14px);
        --date-radius-md:      var(--radius-md, 8px);
        --date-radius-pill:    999px;
        --date-shadow:         var(--shadow-2, 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08));
        --date-available-bg:   transparent;
    }
}

/* Trigger-oppervlak in @layer mm — dit is de in-page control die een site herstylet, dus de
   framework-look is een DEFAULT die de site-CSS moet kunnen verslaan (module-CSS laadt ná de
   site-CSS; gelaagd verliest van ongelaagd, ongeacht specificiteit). Zie guests.css voor
   dezelfde keuze en de toelichting. De popover-mechaniek hieronder blijft BEWUST ongelaagd:
   daar wil je juist niet dat een toevallige site-regel de kalender-opbouw overschrijft. */
@layer mm {
[data-date] {
  position: relative;
  display: inline-block;
}

/* ── Trigger (single button) ────────────────────────────────────────────── */

.date-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 12rem;
  padding: .5rem .75rem;
  background: var(--date-trigger-bg);
  border: 1px solid var(--date-trigger-border);
  border-radius: 6px;
  color: var(--date-trigger-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.date-button:focus-visible { outline: 2px solid var(--date-trigger-focus); outline-offset: 2px; }
.date-button[data-empty="1"] { color: var(--date-trigger-muted); }
.date-button .date-from,
.date-button .date-till { display: inline-block; min-width: 6rem; }
.date-button .date-arrow { flex: 0 0 auto; opacity: .6; }

/* ── Trigger row (range — two buttons side-by-side) ─────────────────────── */

.date-trigger-row {
  /* Default = naast elkaar: de datumkiezer zit meestal in een horizontale zoek-pill.
     Wil je ze onder elkaar (sidebar/smalle kolom), gebruik dan de split-presentatie
     hieronder — die is daarvoor bedoeld; buig deze default er niet voor om. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  min-width: 22rem;
}
.date-trigger {
  display: grid;
  gap: .15rem;
  min-height: 58px;
  padding: .55rem .85rem;
  background: var(--date-trigger-bg);
  border: 1px solid var(--date-trigger-border);
  border-radius: 12px;
  color: var(--date-trigger-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.date-trigger:focus-visible,
.date-trigger.is-active {
  outline: none;
  border-color: var(--date-trigger-focus);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .15);
}
.date-trigger small {
  color: var(--date-trigger-muted);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.date-trigger span { display: block; font: 700 .92rem/1.2 system-ui; }
.date-trigger[data-empty="1"] span { color: var(--date-trigger-muted); font-weight: 500; }

@media (max-width: 600px) {
  .date-trigger-row { min-width: 0; }
}

/* ── Split-presentatie (date--split) ─────────────────────────────────────────
   Aankomst en Vertrek als twee volwaardige, losse velden: elk een bold
   veld-label bovenop een input-achtig control-vak, matchend met de overige
   sidebar-velden (.search-results__field-label + .form-field__control). Bouwt
   voort op .date-trigger; overschrijft ALLEEN binnen .date--split. */
.date--split { display: block; }
/* Onder elkaar i.p.v. naast elkaar: in een sidebar is er geen ruimte voor twee kolommen,
   en elk veld draagt hier z'n eigen label. `min-width` terug naar 0 zodat 'ie meekrimpt. */
.date--split .date-trigger-row {
  grid-template-columns: 1fr;
  gap: 1.1rem;
  min-width: 0;
}
.date--split .date-trigger {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.date--split .date-trigger small {
  color: var(--ink, #1e2a3a);
  font-size: .82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.date--split .date-trigger .form-field__value {
  padding: .55rem .85rem;
  background: var(--date-trigger-bg);
  border: 1px solid var(--date-trigger-border);
  border-radius: 12px;
  min-height: 1.25rem;
  /* Ingevulde waarde uniform met de overige sidebar-velden (gasten/select):
     normaal gewicht + dezelfde lettergrootte/-familie + donkere tekst.
     Overschrijft de compacte `.date-trigger span { font: 700 .92rem system-ui }`. */
  font: inherit;
  font-weight: 400;
  color: var(--color-fg, #1a1a1a);
}
/* Leeg/placeholder: muted en even zwaar als de gevulde waarde (niet 500),
   consistent met de select- en gasten-placeholder. */
.date--split .date-trigger[data-empty="1"] .form-field__value {
  color: var(--color-fg-muted, #666);
  font-weight: 400;
}
.date--split .date-trigger:focus-visible,
.date--split .date-trigger.is-active {
  border: 0;
  box-shadow: none;
}
.date--split .date-trigger:focus-visible .form-field__value,
.date--split .date-trigger.is-active .form-field__value {
  border-color: var(--date-trigger-focus);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .15);
}
} /* /@layer mm — einde trigger-oppervlak */

/* ── Popover (donker card) ──────────────────────────────────────────────── */

.date-popover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background: var(--date-bg);
  color: var(--date-fg);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius);
  box-shadow: var(--date-shadow);
  z-index: 1000;
  min-width: 18rem;
  padding: .75rem;
  font: inherit;
  overflow: hidden;
}
.date-popover[data-mobile="1"] {
  max-height: 85dvh;
  /* Alleen de maanden-lijst scrolt; head (titel/Vandaag/nav) en footer
     (Wissen/Annuleren/Toepassen) blijven staan — anders is Toepassen na
     12 maanden scrollen onvindbaar. */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.date-popover[data-mobile="1"] .date-months {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.date-popover[data-mobile="1"] .date-head,
.date-popover[data-mobile="1"] .date-patterns,
.date-popover[data-mobile="1"] .date-times,
.date-popover[data-mobile="1"] .date-footer {
  flex-shrink: 0;
}

/* ── Head (title + Today + nav) ─────────────────────────────────────────── */

.date-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: 0 .15rem;
}
.date-head-title {
  font: 700 .9rem/1.2 system-ui;
  color: var(--date-muted-strong);
}
.date-head-actions {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}
.date-head-today {
  padding: .35rem .85rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  color: var(--date-fg);
  font: 600 .78rem/1 system-ui;
  cursor: pointer;
}
.date-head-today:hover { background: var(--date-accent-hover); }
.date-head-nav { display: inline-flex; gap: .25rem; }
.date-head-nav button {
  width: 2rem;
  height: 2rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  color: var(--date-fg);
  font: 1.1rem/1 system-ui;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-head-nav button:hover { background: var(--date-accent-hover); }
.date-head-nav button:disabled { opacity: .35; cursor: default; }
.date-head-nav button:disabled:hover { background: var(--date-surface); }

/* ── Patterns bar ───────────────────────────────────────────────────────── */

.date-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .15rem;
}
.date-pattern {
  padding: .3rem .8rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  color: var(--date-fg);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.date-pattern:hover { background: var(--date-accent-hover); }
.date-pattern[data-active="1"] {
  background: var(--date-accent);
  border-color: transparent;
  color: var(--date-accent-text);
}
.date-pattern-group {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-left: .5rem;
  border-left: 1px solid var(--date-border);
}
.date-pattern-group-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--date-muted);
}

/* ── Months grid ────────────────────────────────────────────────────────── */

.date-months {
  display: grid;
  gap: .85rem;
  position: relative;
  /* loader theming: donkere calendar-achtergrond → witte spinner */
  --loader-color: rgba(255, 255, 255, .9);
  --loader-track: rgba(255, 255, 255, .18);
  --loader-size: 2rem;
}
.date-months[data-layout="sideBySide"] {
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  max-width: 60rem;
}
.date-popover[data-mobile="1"] .date-months {
  grid-auto-flow: row;
  grid-template-columns: 1fr;
}

.date-month {
  padding: .4rem;
  background: var(--date-surface);
  border-radius: var(--date-radius-md);
}
.date-month-head {
  display: flex;
  justify-content: center;
  gap: .35rem;
  padding: .25rem 0 .65rem;
}
.date-month-head button {
  background: transparent;
  border: 0;
  color: var(--date-fg);
  font: 600 .95rem/1 system-ui;
  padding: .2rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  text-transform: capitalize;
}
.date-month-head button:hover { background: var(--date-accent-hover); }
.date-month-year { color: var(--date-muted-strong); }

.date-day-head,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-day-head {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--date-muted);
  padding-bottom: .35rem;
}
.date-day-head span { text-align: center; }

.date-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--date-radius-md);
  color: inherit;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: background-color 80ms, color 80ms;
}
.date-cell:hover:not([data-disabled="1"]) { background: var(--date-accent-hover); }
.date-cell[data-outside="1"] { color: var(--date-muted); opacity: .55; }
.date-cell[data-today="1"] { font-weight: 700; outline: 1px dashed currentColor; outline-offset: -2px; }
.date-cell[data-disabled="1"] { opacity: .3; cursor: not-allowed; pointer-events: none; }
.date-cell[data-selected="from"],
.date-cell[data-selected="till"] {
  background: var(--date-accent);
  color: var(--date-accent-text);
}
.date-cell[data-in-range="1"] {
  background: var(--date-accent-active);
  border-radius: 0;
}
.date-cell[data-tentative="1"] { background: var(--date-accent-subtle); }
.date-cell:not([data-disabled="1"]):not([data-outside="1"]):not([data-selected]):not([data-in-range="1"]):not([data-tentative="1"]) {
  background: var(--date-available-bg);
}

/* ── Times row (chip-stijl — klik HH of MM → clock-overlay) ─────────────── */

.date-times {
  display: flex;
  gap: 1rem;
  padding: .5rem 0 0;
  border-top: 1px solid var(--date-border);
  flex-wrap: wrap;
}
.date-time {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.date-time-label {
  font-size: .8rem;
  color: var(--date-muted);
}
.date-time-display {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  padding: .2rem .45rem;
}
.date-time-part {
  min-width: 1.9rem;
  padding: .15rem .35rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--date-fg);
  font: 700 .85rem/1 system-ui;
  text-align: center;
  cursor: pointer;
  transition: background .15s;
}
.date-time-part:hover { background: var(--date-accent-hover); }
.date-time-part.is-active {
  background: var(--date-accent-active);
  box-shadow: inset 0 0 0 1px var(--date-accent-subtle);
}
.date-time-sep {
  color: var(--date-muted-strong);
  font-weight: 800;
  opacity: .9;
}
.date-time-range-sep {
  color: var(--date-muted-strong);
  font-weight: 800;
  opacity: .9;
  margin: 0 .35rem;
}

/* ── Clock face (in time-overlay) ───────────────────────────────────────── */

.date-clock {
  display: grid;
  place-items: center;
  padding: .25rem 0;
  width: 100%;
}
.date-clock-face {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255, 255, 255, .12),
      rgba(255, 255, 255, .07) 56%,
      rgba(255, 255, 255, .05) 57%,
      rgba(255, 255, 255, .05) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.date-clock-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 28%;
  background: linear-gradient(to bottom, var(--date-accent), rgba(129, 140, 248, .55));
  transform-origin: 50% 100%;
  border-radius: var(--date-radius-pill);
  pointer-events: none;
  /* Geen transition — hand volgt hover instant. Bij snel slepen zou
     elke transition zichtbaar achter de muis aan lopen. */
}
.date-clock-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--date-accent);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .14);
  pointer-events: none;
}
.date-clock-option {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f5f3ff;
  font: 700 .78rem/1 system-ui;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.date-clock-option:hover {
  background: rgba(129, 140, 248, .18);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1);
  transform: translate(-50%, -50%) scale(1.05);
}
.date-clock-option.is-inner {
  font-size: .7rem;
  color: rgba(245, 243, 255, .85);
}
.date-clock-option.is-tick {
  width: .34rem;
  height: .34rem;
  font-size: 0;
  border-radius: var(--date-radius-pill);
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.date-clock-option.is-active {
  background: var(--date-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, .14);
  transform: translate(-50%, -50%) scale(1.06);
}
.date-clock-option.is-tick.is-active {
  background: rgba(129, 140, 248, .88);
  box-shadow: 0 0 0 4px rgba(129, 140, 248, .14);
}
.date-clock-caption {
  margin-top: .25rem;
  color: var(--date-muted);
  font: 700 .78rem/1 system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Time-overlay header (HH:MM display) */
.date-overlay-time {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: wrap;
}

/* ── Footer (apply / clear / cancel) ────────────────────────────────────── */

.date-footer {
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--date-border);
}
.date-action {
  padding: .45rem 1rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  color: inherit;
  font: 600 .82rem/1 system-ui;
  cursor: pointer;
}
.date-action:hover { background: var(--date-accent-hover); }
.date-action--primary {
  background: var(--date-accent);
  border-color: transparent;
  color: var(--date-accent-text);
}
.date-action--primary:hover { background: var(--date-accent); filter: brightness(1.1); }

/* ── Overlay (month / year quick-pick) ──────────────────────────────────── */

.date-overlay {
  position: absolute;
  inset: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--date-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  z-index: 10;
  padding: .25rem;
}
.date-overlay-panel {
  width: min(100%, 360px);
  max-height: calc(100% - .5rem);
  display: grid;
  gap: .5rem;
  padding: .65rem;
  background: rgba(17, 24, 39, .98);
  border: 1px solid var(--date-border);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
  overflow: auto;
}
.date-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  color: var(--date-fg);
}
.date-overlay-title {
  font: 700 .72rem/1 system-ui;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--date-muted);
}
.date-overlay-nav { display: inline-flex; gap: .25rem; }
.date-overlay-nav button {
  width: 1.8rem;
  height: 1.8rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-pill);
  color: var(--date-fg);
  font: 1rem/1 system-ui;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.date-overlay-nav button:hover { background: var(--date-accent-hover); }
.date-overlay-grid {
  display: grid;
  gap: .4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.date-overlay-pill {
  min-height: 38px;
  padding: .45rem .55rem;
  background: var(--date-surface);
  border: 1px solid var(--date-border);
  border-radius: var(--date-radius-md);
  color: var(--date-fg);
  font: 600 .82rem/1 system-ui;
  cursor: pointer;
  text-transform: capitalize;
}
.date-overlay-pill:hover { background: var(--date-accent-hover); }
.date-overlay-pill[data-active="1"] {
  background: var(--date-accent);
  border-color: transparent;
  color: var(--date-accent-text);
}

/* ─── /assets/modules/dropdown-date.css ─── */
/* ── Wrapper ─────────────────────────────────────────────────────────────── */

[data-dropdown-date] {
    position: relative;
    display: block;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */

.dropdown-date-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    background: var(--form-input-bg, var(--color-bg, #fff));
    border: 1.5px solid var(--form-input-border, var(--color-border, #d9d9d9));
    border-radius: var(--form-radius, var(--radius-sm, 4px));
    color: var(--color-fg, #1a1a1a);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dropdown-date-trigger:focus-visible,
.dropdown-date-trigger.is-active {
    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, #1e2a3a) 18%, transparent);
}

.dropdown-date-trigger[data-empty="1"] .dropdown-date-value {
    opacity: 0.45;
}

.dropdown-date-value {
    display: block;
    font-weight: 500;
}

/* ── Inline modus (data-inline) ─────────────────────────────────────────── */

/* :not(.select) — custom-select.js voegt .select toe na upgrade en
   zet border:0 + opacity:0. Zonder :not() wint onze hogere specificiteit
   en worden de verborgen 1px-selects zichtbaar als streepje linksboven.      */
[data-dropdown-date][data-inline] .dropdown-date__select:not(.select) {
    appearance: none;
    background: var(--form-input-bg, var(--color-bg, #fff));
    border: 1.5px solid var(--form-input-border, var(--color-border, #d9d9d9));
    border-radius: var(--form-radius, var(--radius-sm, 4px));
    color: var(--color-fg, #1a1a1a);
    /* Alleen horizontale padding overriden — top/bottom komt van de context
       (.booking-form select: 0.7rem) zodat de hoogte gelijk blijft.          */
    padding-left: 0.55rem;
    padding-right: 0.35rem;
}

[data-dropdown-date][data-inline] .dropdown-date__select:not(.select)[data-empty="1"] {
    opacity: 0.5;
}

/* Inline: dag placeholder "Dag" (3 tekens) + pijl, maand 3-letter afkorting,
   jaar 4-cijferig getal — jaar iets breder.                                  */
[data-dropdown-date][data-inline] .dropdown-date-selects {
    grid-template-columns: 2.5fr 3.3fr 3fr;
}

/* Maand-select gebruikt custom-select (select-display) in inline modus:
   compacte padding zodat het past in het datum-grid. Hoogte/border via
   .booking-form .select-display in layers.css.                            */
[data-dropdown-date][data-inline] .select-display {
    padding-left: 0.55rem;
    padding-right: 0.4rem;
    min-width: 0;
    /* Zeker stellen dat border overeenkomt met andere form-inputs —
       custom-select.css kan anders met lagere specificiteit winnen.           */
    border: 1.5px solid var(--form-input-border, var(--color-border, #d9d9d9));
    border-radius: var(--form-radius, var(--radius-sm, 4px));
}

/* Placeholder-tekst trunceert met ellipsis als de kolom krap is.             */
[data-dropdown-date][data-inline] .select-display .select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* font-size kleiner voor placeholder, maar line-height in rem vastzetten
   zodat de flex-item hoogte gelijk blijft aan niet-lege staat.
   calc(var(--line-base, 1.6) * 1rem) = 1.6rem ongeacht font-size.           */
[data-dropdown-date][data-inline] .select-display[data-empty="1"] {
    opacity: 0.5;
    font-size: 0.8em;
    line-height: calc(var(--line-base, 1.6) * 1rem);
}

[data-dropdown-date][data-inline] .dropdown-date-part-label {
    color: var(--color-fg-muted, #64748b);
}

/* ── Panel (overlay) ─────────────────────────────────────────────────────── */

/* .date-popover heeft display:flex; dat wint van het UA-stylesheet hidden.
   Expliciete override zorgt dat het panel verborgen blijft tot overlay.js het toont. */
.dropdown-date-panel[hidden] {
    display: none;
}

.dropdown-date-panel {
    padding: 0.65rem;
    min-width: 15rem;
}

/* ── Selects-grid ────────────────────────────────────────────────────────── */

.dropdown-date-selects {
    display: grid;
    grid-template-columns: 2fr 4fr 3fr;
    gap: 0.2rem 0.5rem;
}

.dropdown-date-part-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--date-muted);
    padding-left: 0.15rem;
    align-self: end;
}

.dropdown-date__select {
    background: var(--date-surface);
    border: 1px solid var(--date-border);
    border-radius: var(--date-radius-md);
    color: var(--date-fg);
    padding: 0.35rem 0.35rem;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: auto;
}

.dropdown-date__select:focus-visible {
    outline: 2px solid var(--date-accent);
    outline-offset: 1px;
}

/* ─── /assets/modules/custom-select.css ─── */
/* custom-select.js — visuele laag bovenop native <select>. */

select.select {
  /* Native onzichtbaar maar blijft form-source-of-truth */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

.select-display {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  padding: .5rem .75rem;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: var(--form-radius, var(--radius-sm, 4px));
  color: var(--color-fg, #1a1a1a);
  font: inherit;
  cursor: pointer;
  user-select: none;
}

.select-display:focus-visible {
  outline: 2px solid var(--color-primary, #1e2a3a);
  outline-offset: 2px;
}

.select-display[aria-expanded="true"] {
  border-color: var(--color-primary, #1e2a3a);
}

.select-display[data-empty="1"] .select-label {
  color: var(--color-fg-muted, #666);
}

.select-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .6;
  transition: transform 120ms;
}

.select-display[aria-expanded="true"] .select-arrow {
  transform: scaleY(-1);
}

/* Dropdown */
.select-dropdown {
  background: var(--color-bg-elev, #fff);
  color: var(--color-fg, #1a1a1a);
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  z-index: 1000;
  min-width: 12rem;
  max-width: min(100vw - 16px, 480px);
  max-height: min(60vh, 24rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.select-search {
  padding: .35rem;
  border-bottom: 1px solid var(--color-border, #d9d9d9);
}

.select-search input {
  width: 100%;
  padding: .35rem .55rem;
  background: transparent;
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: var(--radius-sm, 4px);
  color: inherit;
  font: inherit;
  outline: none;
}

.select-search input:focus {
  border-color: var(--color-primary, #1e2a3a);
}

.select-options {
  overflow-y: auto;
  scrollbar-width: thin;
}

.select-group {
  padding: .35rem .75rem;
  font-size: .8em;
  font-weight: 600;
  color: var(--color-fg-muted, #666);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.select-option {
  padding: .4rem .75rem;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  user-select: none;
  transition: background-color 80ms, color 80ms;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Icoon vóór de option-tekst — gebruikt voor country-vlaggen (zie
   `data-flag` op `<option>` + `data-flags-base` op `<select>`). */
.select-flag {
  width: 1.25rem;
  height: .9rem;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.select-label { display: inline-flex; align-items: center; gap: .5rem; }

.select-option--in-group {
  padding-left: 1.25rem;
}

/* Opt-in modifier: opties op één regel + horizontale scroll bij overflow.
   Geactiveerd door `data-dropdown-class="select-dropdown--nowrap"`
   op de native <select> (zie custom-select.js::buildDropdown). */
.select-dropdown--nowrap .select-option {
  white-space: nowrap;
  overflow-wrap: normal;
}

.select-option:hover,
.select-option[data-highlighted="1"] {
  background: var(--color-primary, #1e2a3a);
  color: var(--color-primary-fg, #fff);
}

.select-option[data-selected="1"] {
  font-weight: 600;
}

.select-option[data-disabled="1"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── /assets/modules/dialog.css ─── */
/* ── Modale dialog (dialog.js) ─────────────────────────────────────────
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd, ongeacht laadvolgorde.
 * Dark/material varianten staan in themes.css onder `[data-theme="..."] .dialog`.
 *
 * Z-index:   12000+ (dialog.js zet per-instance) */

@layer mm {
    .dialog-backdrop {
        --dialog-backdrop: rgba(0, 0, 0, .35);
    }

    .dialog {
        --dialog-bg:           var(--color-bg-elev, #fff);
        --dialog-fg:           var(--color-fg, #1a1a1a);
        --dialog-border:       var(--color-border, #d9d9d9);
        --dialog-border-soft:  var(--color-border, #d9d9d9);
        --dialog-header-bg:    var(--color-bg-soft, #f7f7f8);
        --dialog-footer-bg:    var(--color-bg-soft, #f7f7f8);
        --dialog-btn-bg:       var(--color-bg-soft, #f7f7f8);
        --dialog-btn-hover:    var(--color-border, #d9d9d9);
        --dialog-input-bg:     var(--color-bg, #fff);
        --dialog-input-border: var(--color-border, #d9d9d9);
        --dialog-input-focus:  var(--color-primary, #1e2a3a);
        --dialog-accent:       var(--color-primary, #1e2a3a);
        --dialog-accent-hover: var(--color-primary-dk, #16202c);
        --dialog-danger:       var(--color-danger, #c0392b);
        --dialog-danger-hover: color-mix(in srgb, var(--color-danger, #c0392b) 85%, black);
    }
}

.dialog-backdrop {
    position: fixed; inset: 0;
    /* z-index wordt door dialog.js per-instance gezet */
    background: var(--dialog-backdrop);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: dialog-fade .12s ease-out;
}
@keyframes dialog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dialog {
    background:    var(--dialog-bg);
    color:         var(--dialog-fg);
    border:        1px solid var(--dialog-border);
    border-radius: 8px;
    box-shadow:    0 20px 50px rgba(15, 23, 42, .25);
    min-width:     320px;
    max-width:     500px;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    animation:     dialog-pop .15s ease-out;
}
@keyframes dialog-pop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.dialog-header {
    padding: 11px 16px;
    border-bottom: 1px solid var(--dialog-border-soft);
    background:    var(--dialog-header-bg);
    border-radius: 8px 8px 0 0;
}
.dialog-header strong {
    color:           var(--dialog-accent);
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    font-weight:     600;
}

.dialog-body {
    padding: 16px;
}
.dialog-message {
    margin: 0 0 12px 0;
    color:        var(--dialog-fg);
    font-size:    14px;
    line-height:  1.55;
    white-space:  pre-wrap;
}
.dialog-message:last-child {
    margin-bottom: 0;
}

.dialog-input {
    display:       block;
    width:         100%;
    padding:       8px 10px;
    background:    var(--dialog-input-bg);
    color:         var(--dialog-fg);
    border:        1px solid var(--dialog-input-border);
    border-radius: 4px;
    font-size:     14px;
    font-family:   inherit;
    outline:       none;
    box-sizing:    border-box;
}
.dialog-input:focus {
    border-color: var(--dialog-input-focus);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--dialog-input-focus) 20%, transparent);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--dialog-border-soft);
    background:  var(--dialog-footer-bg);
    border-radius: 0 0 8px 8px;
}

.dialog-btn {
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--dialog-border);
    background:        var(--dialog-btn-bg);
    color:             var(--dialog-fg);
    font: inherit; line-height: 1;
    cursor: pointer;
    user-select: none;
}
.dialog-btn:hover {
    background: var(--dialog-btn-hover);
}
.dialog-btn:focus-visible {
    outline: 2px solid var(--dialog-accent);
    outline-offset: 1px;
}
.dialog-btn--ghost {
    background: transparent;
    border-color: transparent;
}
.dialog-btn--ghost:hover {
    background: var(--dialog-btn-hover);
}
.dialog-btn--primary {
    background:    var(--dialog-accent);
    border-color:  var(--dialog-accent);
    color:         #fff;
}
.dialog-btn--primary:hover {
    background:    var(--dialog-accent-hover);
    border-color:  var(--dialog-accent-hover);
}
.dialog-btn--danger,
.dialog-btn--primary.dialog-btn--danger {
    background:    var(--dialog-danger);
    border-color:  var(--dialog-danger);
    color:         #fff;
}
.dialog-btn--danger:hover {
    background:    var(--dialog-danger-hover);
    border-color:  var(--dialog-danger-hover);
}

/* ─── /assets/modules/guests.css ─── */
/* guests — personen-/gastenkiezer.
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd, ongeacht laadvolgorde.
 */

@layer mm {
    .guests-popup {
        --guests-bg:             var(--color-bg-elev, #fff);
        --guests-border:         var(--color-border, #d9d9d9);
        --guests-fg:             var(--color-fg, #1a1a1a);
        --guests-muted:          var(--color-fg-muted, #666);
        --guests-accent:         var(--color-primary, #1e2a3a);
        --guests-accent-text:    var(--color-primary-fg, #fff);
        --guests-accent-hover:   color-mix(in srgb, var(--color-primary, #1e2a3a) 15%, transparent);
        --guests-btn-bg:         var(--color-bg-soft, #f7f7f8);
        --guests-btn-border:     var(--color-border, #d9d9d9);
        --guests-radius:         var(--radius-lg, 14px);
        --guests-shadow:         var(--shadow-2, 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08));
    }
}

/* ── Trigger-knop ───────────────────────────────────────────────────────────
 * De trigger deelt de klasse `.guests-btn` met de ronde ±-knoppen in de popup,
 * maar draagt `[data-guests]`. Die attribuut-selector (0,2,0) wint van de
 * ronde-knop-regel (0,1,0) en stylet de trigger als een normaal formulierveld,
 * in lijn met `.select-display` / `.form-field__control`.
 *
 * In @layer mm — net als de rest van de defaults. Dat is hier geen detail: dit
 * is een DEFAULT-look, en een site die z'n trigger anders wil (bv. kaal in een
 * zoek-pill) hoort 'm te kunnen overschrijven. Ongelaagd deed 'ie dat niet:
 * module-CSS laadt ná de site-CSS, dus bij gelijke specificiteit (`.searchbar
 * .guests-btn` is óók 0,2,0) won het framework en kreeg de zoek-pill een kader.
 *
 * De ±-knopregel hieronder moet in DEZELFDE layer blijven staan: gelaagde CSS
 * verliest van élke ongelaagde regel, ongeacht specificiteit. Stond de trigger
 * in de layer en de ±-knop erbuiten, dan won de ±-knop en werd de trigger weer
 * een rond knopje. Ze horen dus bij elkaar. Veilig kan dat omdat de popup met
 * de ±-knoppen aan `document.body` hangt ({@see overlay.js} `appendTo`): een
 * site-selector als `.searchbar .guests-btn` raakt alleen de trigger. */
@layer mm {
.guests-btn[data-guests] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: .5rem .75rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--form-radius, var(--radius-sm, 4px));
    color: var(--color-fg, #1a1a1a);
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.guests-btn[data-guests]:focus-visible {
    outline: 2px solid var(--color-primary, #1e2a3a);
    outline-offset: 2px;
}
.guests-btn[data-guests][data-empty="1"] .form-field__value {
    color: var(--color-fg-muted, #666);
}
}

.guests-popup {
    min-width: 18rem;
    background: var(--guests-bg);
    border: 1px solid var(--guests-border);
    border-radius: var(--guests-radius);
    box-shadow: var(--guests-shadow);
    color: var(--guests-fg);
    font: inherit;
    overflow: hidden;
}

/* ── Rows ───────────────────────────────────────────────────────────────── */

.guests-rows {
    padding: .375rem 0;
}

.guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
}

.guests-row + .guests-row {
    border-top: 1px solid var(--guests-border);
}

.guests-row__label {
    flex: 1;
    min-width: 0;
}

.guests-row__name {
    display: block;
    font-size: .9rem;
    font-weight: 600;
}

.guests-row__sub {
    display: block;
    font-size: .78rem;
    color: var(--guests-muted);
    margin-top: .1rem;
}

.guests-row__ctrls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── ± knoppen ──────────────────────────────────────────────────────────────
 * In @layer mm, samen met de trigger-regel hierboven — zie de toelichting daar:
 * splits je die twee over wel/niet gelaagd, dan wint deze regel van de trigger. */
@layer mm {
.guests-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--guests-btn-border);
    border-radius: 50%;
    background: var(--guests-btn-bg);
    color: var(--guests-fg);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s;
}

.guests-btn:hover:not(:disabled) {
    background: var(--guests-accent-hover);
    border-color: var(--guests-accent);
}

.guests-btn:focus-visible {
    outline: 2px solid var(--guests-accent);
    outline-offset: 2px;
}

.guests-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}
}

.guests-count {
    min-width: 1.5rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
}

/* ── Footer (optioneel — data-guests-footer="1") ─────────────────────── */

.guests-footer {
    display: flex;
    gap: .5rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--guests-border);
}

.guests-footer__btn {
    flex: 1;
    padding: .45rem .75rem;
    border-radius: calc(var(--guests-radius) - 4px);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s;
}

.guests-footer__btn:hover { opacity: .85; }

.guests-footer__btn:focus-visible {
    outline: 2px solid var(--guests-accent);
    outline-offset: 2px;
}

.guests-footer__btn--secondary {
    background: transparent;
    border: 1px solid var(--guests-btn-border);
    color: var(--guests-muted);
}

.guests-footer__btn--primary {
    background: var(--guests-accent);
    border: 1px solid transparent;
    color: var(--guests-accent-text);
}

/* ─── /css/forms.css ─── */
/*
 * forms.css — site-styling voor Framework FormRenderer output.
 *
 * Mapped op onze tokens (website.css) i.p.v. framework's --text/--border/etc.
 * Geporteerd uit framework/style.css form-sectie + waar passend bijgewerkt
 * naar de duinrell-look (groen accent, ruimte, focus-ring).
 *
 * FormRenderer emit-classes:
 *   .form-element[data-type]       — wrapper per veld
 *   .form-row                      — side-by-side fields (CSS-grid)
 *   .form-field                    — kolom-wrapper voor label+input+error
 *   .form-label / .form-label__required
 *   .form-input                    — base input
 *   .form-input--textarea / --select
 *   .form-field--error             — error-state op de wrapper
 *   .form-field__error / __hint
 *   .form-checkbox / .form-radio
 *   .btn / .btn--primary           — submit-knop
 */

/* ── Form-container ─────────────────────────────────────────────────── */
form[data-component="form"] {
    --form-gap: var(--space-3);
    --form-radius: var(--radius-md);
    --form-input-bg: var(--color-bg);
    --form-input-border: var(--color-border);
    --form-input-border-active: var(--color-primary);
    --form-error: #c0392b;

    display: block;
    max-width: 38rem;
    margin: 0;
}

/* ── Rows: side-by-side fields via CSS Grid ──────────────────────────── */
form[data-component="form"] .form-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
form[data-component="form"] .form-row > * {
    min-width: 0;
}
@container form-col (max-width: 480px) {
    form[data-component="form"] .form-row {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 48rem) {
    form[data-component="form"] .form-row {
        grid-template-columns: 1fr !important;
    }
}
form[data-component="form"] .form-row > .form-field {
    margin-bottom: 0;
}

/* ── Field-wrappers ─────────────────────────────────────────────────── */
form[data-component="form"] .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.4rem;
}
form[data-component="form"] .form-field[hidden] {
    display: none;
}

/* ── Labels ─────────────────────────────────────────────────────────── */
form[data-component="form"] .form-label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-fg-muted);
}
form[data-component="form"] .form-label__required {
    color: var(--form-error);
    margin-left: 0.15rem;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
form[data-component="form"] .form-input {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--form-input-border);
    border-radius: var(--form-radius);
    font: inherit;
    font-size: 1rem;
    background: var(--form-input-bg);
    color: var(--color-fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
form[data-component="form"] .form-input:focus {
    outline: none;
    border-color: var(--form-input-border-active);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
form[data-component="form"] .form-input--textarea {
    resize: vertical;
    min-height: 7rem;
}
form[data-component="form"] .form-input--select {
    cursor: pointer;
}
/* Custom-select (data-select) verbergt de native <select> en toont een
   .select-display-trigger. Die was lager dan .form-input (.5rem vs .7rem
   padding, 1px vs 1.5px border) → selects oogden "smal qua hoogte". Lijn 'm uit
   met de tekstinputs. Scope `.form-field >` laat composite-selects (eigen,
   compacte hoogte in composite.css) bewust ongemoeid. */
form[data-component="form"] .form-field > .select-display {
    padding: 0.7rem 0.9rem;
    border-width: 1.5px;
    border-color: var(--form-input-border);
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
}

/* ── Composite-velden (telefoon, postcode, …) ───────────────────────────
   De framework-`composite.css` wordt hier niet site-breed geladen; we stylen
   de composite-rij + sub-inputs zó dat ze één geheel vormen met `.form-input`
   (zelfde hoogte, rand en focus-ring). Layout = flex (postcode/afstand,
   landcode/nummer naast elkaar). */
form[data-component="form"] .composite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}
form[data-component="form"] .composite-input {
    flex: 1 1 6rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--form-input-border);
    border-radius: var(--form-radius);
    font: inherit;
    font-size: 1rem;
    background: var(--form-input-bg);
    color: var(--color-fg);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
form[data-component="form"] .composite-input:focus {
    outline: none;
    border-color: var(--form-input-border-active);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
form[data-component="form"] .composite-input--narrow  { flex: 0 1 7rem; }
form[data-component="form"] .composite-input--compact { flex: 0 0 auto; width: auto; }
/* custom-select binnen een composite-rij: zelfde hoogte + flex-gedrag als de inputs. */
form[data-component="form"] .composite-row .select-display {
    flex: 1 1 6rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border-width: 1.5px;
    border-color: var(--form-input-border);
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
}
form[data-component="form"] .composite-row .select-display.composite-input--compact {
    flex: 0 0 auto;
    width: auto;
}

/* ── Error state ────────────────────────────────────────────────────── */
form[data-component="form"] .form-field--error .form-input {
    border-color: var(--form-error);
}
form[data-component="form"] .form-field__error {
    color: var(--form-error);
    font-size: 0.875rem;
}
form[data-component="form"] .form-field__hint {
    color: var(--color-fg-muted);
    font-size: 0.85rem;
}

/* ── Checkbox / Radio ───────────────────────────────────────────────── */
form[data-component="form"] .form-checkbox,
form[data-component="form"] .form-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
form[data-component="form"] .form-radio__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
form[data-component="form"] .form-radio__icon {
    height: 1.5rem;
    width: auto;
    max-width: 3rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}
form[data-component="form"] .form-checkbox__input,
form[data-component="form"] .form-radio__input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}
form[data-component="form"] .form-radio-group {
    border: none;
    padding: 0;
    margin: 0 0 1.1rem;
}
form[data-component="form"] .form-radio-group legend {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
form[data-component="form"] .form-radio {
    margin-bottom: 0.4rem;
}

/* ── Submit ─────────────────────────────────────────────────────────── */
form[data-component="form"] .form-actions {
    margin-top: 1.5rem;
}
form[data-component="form"] .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    border-radius: var(--form-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.05s;
}
form[data-component="form"] .btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg, #fff);
}
form[data-component="form"] .btn--primary:hover {
    background: color-mix(in srgb, var(--color-primary) 90%, #000);
}
form[data-component="form"] .btn--primary:active {
    transform: translateY(1px);
}

/* ── Success-flash (na ?sent=1) ────────────────────────────────────── */
.layer__text-form .form-success {
    padding: 1rem 1.2rem;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-fg);
}
.layer__text-form .form-success p {
    margin: 0;
}

/* ── Date-picker light theme override ────────────────────────────────
 *
 * Framework date-picker.css is donker-default (#1e293b card + indigo accent).
 * Voor onze sites willen we een light skin die past bij de rest van de form.
 * Trigger-vars remappen naar site-tokens; popover-vars hieronder.
 */

.date-button,
.date-trigger {
    --date-trigger-bg:     var(--color-bg);
    --date-trigger-border: var(--color-border);
    --date-trigger-fg:     var(--color-fg);
    --date-trigger-muted:  var(--color-fg-muted);
    --date-trigger-focus:  var(--color-primary);
}

/* Site-specifieke afwijkingen van de framework-defaults */
.date-trigger {
    border-width: 1.5px;
    border-radius: var(--radius-md);
}
.date-trigger:focus-visible,
.date-trigger.is-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.date-button {
    border-width: 1.5px;
    border-radius: var(--radius-md);
}

/* Guests picker — site tokens override dark framework defaults */
.guests-popup {
    --guests-bg:           var(--color-bg);
    --guests-border:       var(--color-border);
    --guests-fg:           var(--color-fg);
    --guests-muted:        var(--color-fg-muted);
    --guests-accent:       var(--color-primary);
    --guests-accent-text:  var(--color-primary-fg, #fff);
    --guests-accent-hover: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --guests-btn-bg:       var(--color-bg-soft);
    --guests-btn-border:   var(--color-border);
    --guests-radius:       var(--radius-md);
    --guests-shadow:       0 8px 24px rgba(0, 0, 0, .18);
}

/* Popover — light surface, primary accent */
.date-popover {
    --date-bg:             var(--color-bg);
    --date-surface:        var(--color-bg-soft);
    --date-surface-strong: color-mix(in srgb, var(--color-fg) 6%, transparent);
    --date-border:         var(--color-border);
    --date-fg:             var(--color-fg);
    --date-muted:          var(--color-fg-muted);
    --date-muted-strong:   var(--color-fg);
    --date-accent:         var(--color-primary);
    --date-accent-text:    var(--color-primary-fg, #fff);
    --date-accent-hover:   color-mix(in srgb, var(--color-primary) 18%, transparent);
    --date-accent-active:  color-mix(in srgb, var(--color-primary) 32%, transparent);
    --date-accent-subtle:  color-mix(in srgb, var(--color-primary) 10%, transparent);
    --date-available-bg:   color-mix(in srgb, var(--bl-sand, #e1cc95) 72%, transparent);
    --date-overlay-bg:     rgba(20, 30, 40, .42);
    --date-radius:         var(--radius-lg);
    --date-radius-md:      var(--radius-md);
    --date-shadow:         0 16px 40px rgba(0, 0, 0, .18);
    border: 1px solid var(--color-border);
}

/* ─── /css/motion.css ─── */
/*
 * Micro-animations — globaal motion-laagje. Alle animations respecteren
 * `prefers-reduced-motion` via de website.css-override (duration → 0ms).
 *
 *  - smooth-scroll: globaal
 *  - reveal-on-scroll: `.layer` fade-up bij intersecting
 *  - sticky-header shrink: site-header krimpt bij scroll
 *  - card-hover lift + soft shadow
 *  - focus-visible ring (a11y)
 *  - link onderstreping animation
 */

html {
    scroll-behavior: smooth;
}

/* Reveal-on-scroll. JS zet `data-revealed="true"` zodra een .layer in viewport
   komt. Initial state = onzichtbaar + iets omhoog. */
.layer {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}
.layer[data-revealed="true"] {
    opacity: 1;
    transform: none;
}
/* JS niet beschikbaar → geen reveal-flow blokkade. Class wordt door JS gezet
   op <html> tijdens initialization; afwezig = no-js → forceer revealed. */
html:not(.has-motion) .layer {
    opacity: 1;
    transform: none;
}
/* Header sla 't reveal-effect over — die moet direct staan. */
.layer__header[data-revealed="false"],
.layer__header {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Ignite-reveal: zodra een sectie in beeld komt "ontvlamt" 'ie kort — een
   warme gloed-puls bovenop de fade-up, alsof 'ie wordt aangestoken. Kleur via
   `--ignite-glow` (themable: neutrale lijn = kaarsgoud-default, kleurrijke lijn
   kan 'm bv. naar roze/oranje zetten in website.css). Header uitgezonderd. */
.layer[data-revealed="true"]:not(.layer__header) {
    animation: ignite var(--dur-slow) var(--ease-out);
}
@keyframes ignite {
    0%   { filter: drop-shadow(0 0 0 transparent); }
    35%  { filter: drop-shadow(0 10px 30px var(--ignite-glow, rgba(200, 144, 42, .42))); }
    100% { filter: drop-shadow(0 0 0 transparent); }
}

/* `.site-header` transition zit in layers.css (transform-based hide/show
   via `data-header-hidden`). De `data-scrolled`-rules zijn weg — die werden
   nergens gezet. Voor logo-height-transition: blijft, wordt door andere
   features mogelijk nog ingezet. */
.site-logo img {
    transition: height var(--dur-fast) var(--ease-out);
}

/* Card / banner-card lift on hover. */
.card,
.inspiration-tile,
.suggestion-card,
.postcard {
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out);
}
.card:hover,
.inspiration-tile:hover,
.suggestion-card:hover,
.postcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

/* Focus-visible ring — a11y. Subtiel, gebruikt de primary-kleur. */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Link underline grow on hover. */
.layer__text-text a,
.layer__text-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.layer__text-text a:hover,
.layer__text-content a:hover {
    text-decoration-thickness: 2px;
}

/* Buttons — lift + soft press */
.button {
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}
.button:active {
    transform: translateY(0);
}

/* Reduced-motion: keyframe-animaties (vaste duur) expliciet uit — de globale
   token-versoepeling in variables.css raakt `animation` niet. */
@media (prefers-reduced-motion: reduce) {
    .layer[data-revealed="true"]:not(.layer__header) { animation: none; }
}

/* ─── /css/custom/opening-hours.css ─── */
/* Custom — Duinrell opening-hours layer. Class-conventie matched dev26
   (`.opening-hours__*`) zodat copy-paste tussen sites makkelijk blijft. */

.layer__openinghours {
    --oh-attractions: var(--color-primary, #e30613);
    --oh-tikibath:    #2c84d0;
    --oh-arcade:      #8b4ae6;
    --oh-border:      var(--color-border, #e2e8f0);
    --oh-muted:       var(--color-text-muted, #64748b);
    padding-block: var(--space-lg, 2rem);
}

/* ─── Week-table view (type=week) ─────────────────────────────────── */

.opening-hours__week {
    width: 100%;
    max-width: 32rem;
    border-collapse: collapse;
    font-size: .9rem;
}
.opening-hours__week thead th {
    text-align: left;
    padding: .5rem .75rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--oh-border);
}
.opening-hours__week thead th[data-type="attractions"] { color: var(--oh-attractions); }
.opening-hours__week thead th[data-type="tikibath"]    { color: var(--oh-tikibath); }
.opening-hours__week thead th[data-type="arcade"]      { color: var(--oh-arcade); }
.opening-hours__week tbody td {
    padding: .35rem .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--oh-border) 50%, transparent);
}
.opening-hours__week tbody tr:last-child td { border-bottom: 0; }
.opening-hours__week-day { font-weight: 500; }
.opening-hours__week tbody td:not(.opening-hours__week-day):empty::before { content: "—"; color: var(--oh-muted); }

/* ─── Calendar view (type=calendar) ──────────────────────────────── */

.opening-hours__wrapper {
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: var(--space-md, 1rem);
    align-items: start;
}
@media (max-width: 64rem) {
    .opening-hours__wrapper { grid-template-columns: 1fr; }
}

.opening-hours__navigation {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.opening-hours__navigation-button {
    background: transparent;
    border: 1px solid var(--oh-border);
    border-radius: var(--radius-sm, 4px);
    width: 2rem; height: 2rem;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}
.opening-hours__navigation-button:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.opening-hours__navigation-label { font-weight: 600; font-size: 1.05rem; }

.opening-hours__weekdays {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: .75rem;
    color: var(--oh-muted);
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.opening-hours__weekday { padding: .25rem .5rem; }

.opening-hours__body {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.opening-hours__day {
    min-height: 5rem;
    padding: .25rem .3rem;
    background: var(--color-bg-elev, #f8fafc);
    border-radius: var(--radius-sm, 4px);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    cursor: default;
    user-select: none;
}
.opening-hours__day--filler  { background: transparent; }
.opening-hours__day--past    { opacity: .4; }
.opening-hours__day--closed  { color: var(--oh-muted); }
.opening-hours__day--open    { cursor: pointer; }
.opening-hours__day--open:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-elev)); }
.opening-hours__day--today {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-elev));
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.opening-hours__day.selected {
    background: var(--color-primary);
    color: #fff;
}
.opening-hours__day-number { font-weight: 500; font-size: .85rem; }
.opening-hours__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.opening-hours__line {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .65rem;
    line-height: 1.2;
    color: #fff;
    padding: 1px .25rem;
    border-radius: 2px;
    background: var(--oh-muted);
    min-height: .9rem;
}
.opening-hours__line-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.opening-hours__line--attractions { background: var(--oh-attractions); }
.opening-hours__line--tikibath    { background: var(--oh-tikibath); }
.opening-hours__line--arcade      { background: var(--oh-arcade); }
/* Gesloten = lichte grijze pill zonder text, behoudt height voor uitlijning. */
.opening-hours__line--closed {
    background: color-mix(in srgb, var(--oh-muted) 25%, transparent);
    min-height: .65rem;
}

/* ─── Legend ─────────────────────────────────────────────────────── */

.opening-hours__legend {
    grid-column: 1;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    font-size: .85rem;
}
.opening-hours__legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.opening-hours__legend-dot {
    width: .6rem; height: .6rem;
    border-radius: 50%;
    background: var(--oh-muted);
}
.opening-hours__legend-dot.opening-hours--attractions { background: var(--oh-attractions); }
.opening-hours__legend-dot.opening-hours--tikibath    { background: var(--oh-tikibath); }
.opening-hours__legend-dot.opening-hours--arcade      { background: var(--oh-arcade); }

/* ─── Details-panel (calendar side-panel) ────────────────────────── */

.opening-hours__details {
    grid-column: 2;
    grid-row: 1 / span 4;
    padding: 1rem;
    background: var(--color-bg-elev, #f8fafc);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--oh-border);
    position: relative;
    min-height: 8rem;
}
@media (max-width: 64rem) {
    .opening-hours__details { grid-column: 1; grid-row: auto; }
}
.opening-hours__details-content { font-size: .9rem; }
.opening-hours__day-header { font-weight: 600; margin-bottom: .5rem; }
.opening-hours__details .opening-hours__line {
    height: auto;
    background: transparent;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem 0;
    border-left: 3px solid var(--oh-muted);
    padding-left: .5rem;
    margin-bottom: .25rem;
    border-radius: 0;
}
.opening-hours__details .opening-hours__line--attractions { border-left-color: var(--oh-attractions); }
.opening-hours__details .opening-hours__line--tikibath    { border-left-color: var(--oh-tikibath); }
.opening-hours__details .opening-hours__line--arcade      { border-left-color: var(--oh-arcade); }
.opening-hours__line-label { color: var(--oh-muted); min-width: 5rem; }
.opening-hours__line-hours { font-weight: 500; }

/* Loader-spinner inside details-panel (toggled by JS via .is-loading) */
.opening-hours__details-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-bg-elev) 70%, transparent);
}
.opening-hours__details.is-loading .opening-hours__details-loader { display: flex; }
.opening-hours__details-loader::after {
    content: "";
    width: 1.5rem; height: 1.5rem;
    border: 2px solid var(--oh-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: oh-spin .8s linear infinite;
}
@keyframes oh-spin { to { transform: rotate(360deg); } }

/* ─── Tickets-CTA ────────────────────────────────────────────────── */

.opening-hours__tickets { margin-top: 1rem; }
.opening-hours__tickets-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ─── Error-state ────────────────────────────────────────────────── */

.opening-hours__error {
    padding: 1rem;
    background: color-mix(in srgb, var(--oh-muted) 10%, transparent);
    border-radius: var(--radius-sm);
    color: var(--oh-muted);
}

/* ─── /css/custom/site.css ─── */
/* 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('/css/custom/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('/css/custom/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('/css/custom/banus-personen.svg') center / contain no-repeat;
            mask: url('/css/custom/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('/css/custom/banus-arrow.svg') center / contain no-repeat;
            mask: url('/css/custom/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('/css/custom/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('/css/custom/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('/css/custom/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('/css/custom/cta-telefoon-bruin-01.svg') center / contain no-repeat;
    -webkit-mask: url('/css/custom/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('/css/custom/cta-mail-bruin-01.svg');
    -webkit-mask-image: url('/css/custom/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('/css/custom/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('/css/custom/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('/css/custom/banus-personen.svg') center / contain no-repeat;
            mask: url('/css/custom/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('/css/custom/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('/css/custom/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('/css/custom/cta-telefoon-bruin-01.svg') center / contain no-repeat;
    -webkit-mask: url('/css/custom/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;
}