/*
Theme Name: Brro Booking Theme
Author: Ronald Postma (Brro) & Cursor AI
Description: Shared Brro theme for client sites using the brro-booking plugin
Version: 1.0.06
Text Domain: brro-booking-theme
License: GPLv2 or later
License URI: https://github.com/ronaldpostma/brro-booking-theme/blob/main/LICENSE
*/

/*
 * CSS lives in this file only (framework default).
 * Banners below are the section map — add rules under the matching banner; keep related selectors together.
 * Media queries sit immediately after the desktop rule they override.
 * Do not create assets/css/{page}.css unless the developer explicitly asks for split stylesheets.
 */

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* CSS Custom Properties (CSS Variables) — map project colors/fonts here (see 03-css-variables.mdc). */
:root {
    --content-max-desk: min(100vw,1600px);
    --content-max-tab: min(100vw,1179px);
    --content-max-mob: min(100vw,767px);
    --gutter-desktop: 0px;
    --gutter-tablet: 0px;
    --gutter-mobile: 0px;
    --def-mob: clamp(309px, calc(28.26vw + 218.28px), 435px) /*320px @ 360 : 435px @ 767*/;
    --small-mob: clamp(290px, calc(19.66vw + 209.24px), 360px);
    --wide-mob: clamp(300px, calc(63.88vw + 90.02px), 580px);
    /* Keuze klant — defaults; overridable in Appearance → Thema instellingen. */
    --primair-1: #ffd400;
    --primair-2: #33d1a4;
    --secundair-1: #a6daff;
    --secundair-2: #ffffff;
    --achtergrond: #f5f2eb;
    --link: #9925f2;
    --neutraal-licht: #dde2e4;
    --neutraal-donker: #828a8a;
    --tekst: #000000;
    /* Standaard — availability tokens, not settings-driven. */
    --beschikbaar: #43b021;
    --bezet: #eb406d;
    /* Brro Booking — override plugin tokens (frontend.css loads at 15, theme at 20).
     * Values below are plugin defaults; mark 'changed' when a value is restyled. */
    --brro-booking-color-primary: var(--beschikbaar); /* changed */
    --brro-booking-color-primary-hover: var(--neutraal-donker); /* changed */
    --brro-booking-color-danger: var(--bezet); /* changed */
    --brro-booking-color-muted: var(--neutraal-licht); /* changed */
    --brro-booking-color-text: var(--tekst); /* changed */
    --brro-booking-color-on-primary: var(--secundair-2); /* changed */
    --brro-booking-color-surface: transparent;
    --brro-booking-color-msg-success: var(--beschikbaar); /* changed */
    --brro-booking-color-msg-error: var(--bezet); /* changed */
    --brro-booking-qty-bg: var(--beschikbaar); /* changed */
    --brro-booking-qty-fg: var(--secundair-2); /* changed */
    --brro-booking-qty-bg-hover: var(--neutraal-donker); /* changed */
    --brro-booking-qty-fg-hover: var(--secundair-2); /* changed */
    --brro-booking-color-field-error: var(--bezet); /* changed */
    --brro-booking-first-step-option-width: clamp(69px, 5.83vw, 93px) /*84px @ 1440*/;
    --brro-booking-first-step-option-height: clamp(34px, 2.85vw, 46px) /*41px @ 1440*/;
}

/* ========================================
   CUSTOM ANIMATIONS
   ======================================== */


/* ========================================
   WORDPRESS ADMIN BAR
   ======================================== */

/* Hide all admin bar items by default */
body:not(.webadmin) #wpadminbar li:not(#wp-admin-bar-site-name, #wp-admin-bar-my-account, #wp-admin-bar-logout) {
    display: none !important;
}

/* ========================================
   HTML & BODY STYLES
   ======================================== */

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden !important;
    margin: 0 !important;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* ========================================
   TEXT & LINK STYLES
   ======================================== */

h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
}
#tekst_sectie p,
#aanbod_content p,
#aanbod_content ul,
#aanbod_content ol {
    margin-bottom: clamp(22px, 1.81vw, 29px) /*26px @ 1440*/;
}
#aanbod_content p:has(+ ul),
#aanbod_content p:has(+ ol),
#aanbod_content ul:has(+ p),
#aanbod_content ol:has(+ p) {
    margin-bottom: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
}

a {
    text-underline-offset: clamp(2px, 0.14vw, 3px) /*2px @ 1440*/;
}
a:not(.underline) {
    text-decoration: none;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Remove default search input styling in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}

select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    padding: 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    border-radius: clamp(23px, 1.94vw, 32px) /*28px @ 1440*/;
    border-color: transparent;
    box-shadow: 0 0 clamp(10px, 0.69vw, 12px) /*10px @ 1440*/ rgba(0, 0, 0, 0.1);
}
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
    height: clamp(46px, 3.89vw, 63px) /*56px @ 1440*/;
}
textarea {
    height: clamp(140px, 11.81vw, 189px) /*170px @ 1440*/;
    padding-top: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    padding-bottom: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ top 50%;
    background-size: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/ auto;
}

form label {
    padding-left: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    margin-bottom: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
@media (max-width: 767px) {
    form label:not(.brro-checkout-radio-label) {
        padding-left: 4px;
    }
}
form .brro-extra-fieldgroup-edit .brro-extra-field--number label {
    padding-left: 0;
}

input[type="checkbox"],
input[type="radio"] {
    width: clamp(5px, 0.35vw, 6px) /*5px @ 1440*/;
}
input[type="checkbox"]:before,
input[type="radio"]:before {
    width: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    height: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    border: clamp(3px, 0.21vw, 4px) /*3px @ 1440*/ solid var(--primair-2);
    background-color: transparent;
    box-sizing: border-box;
}
div:not(.brro-aanbod-filter__option) input[type="checkbox"]:before,
div:not(.brro-aanbod-filter__option) input[type="radio"]:before {
    top: 0;
    transform: translateY(0);
}
input[type='checkbox']:checked:before,
input[type='radio']:checked:before,
input[type='checkbox']:hover:before, 
input[type='radio']:hover:before {
    background-color: var(--primair-2);
    border-color: var(--primair-2);
}
input[type='checkbox']:checked:hover:before, 
input[type='radio']:checked:hover:before {
    border-color: var(--bezet);
    background-color: var(--bezet);
}

/* ========================================
   FONT STYLES
   ======================================== */
/* Named classes from Figma Typo frame (node 249:2862). No color on these classes.
 * Keuze klant — hardcoded for V1; later lifted into theme settings.
 * Standaard — fixed defaults, not settings-driven.
 * Line-height is percentage of font-size (from Figma px / px). */

/* --- Keuze klant --- */

.kop-klein,
.month-grid .day-name,
#aanbod_content h2,
#aanbod_content h3,
#aanbod_content h4,
#aanbod_content h5,
#aanbod_content h6,
#aanbod_content strong,
#aanbod_content b,
#page_content .page-body h3,
#page_content .page-body h4,
#page_content .page-body h5,
#page_content .page-body h6 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(16px, 1.11vw, 18px) /*16px @ 1440*/;
    line-height: 143.75%;
    font-weight: 700;
    font-style: normal;
}

.filter-kop {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(20px, 1.53vw, 25px) /*22px @ 1440*/;
    line-height: 150%;
    font-weight: 700;
    font-style: normal;
}

.intro,
#opties.brro-flex-booking-section h3,
#opties.brro-flex-booking-section .brro-booking-reserveren-heading,
.brro-account-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(22px, 1.74vw, 28px) /*25px @ 1440*/;
    line-height: 128%;
    font-weight: 300;
    font-style: normal;
}

.kop-tussen {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(23px, 1.94vw, 32px) /*28px @ 1440*/;
    line-height: 115%;
    font-weight: 700;
    font-style: normal;
}

.kop-midden,
#page_content .page-body h2,
body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-site-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(25px, 2.08vw, 34px) /*30px @ 1440*/;
    line-height: 116.667%;
    font-weight: 700;
    font-style: normal;
}

.kop-groot {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
    line-height: 113.889%;
    font-weight: 700;
    font-style: normal;
}

.header {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(38px, 3.19vw, 52px) /*46px @ 1440*/;
    line-height: 108.696%;
    font-weight: 300;
    font-style: normal;
}
@media (max-width: 767px) {
    .header {
        font-size: clamp(30px, calc(1.97vw + 22.92px), 38px) /*30px @ 360 : 38px @ 767*/;
    }
}

.header-groot {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
    line-height: 115%;
    font-weight: 400;
    font-style: normal;
}
@media (max-width: 767px) {
    .header-groot {
        font-size: clamp(35px, calc(3.44vw + 23.62px), 50px) /*36px @ 360 : 50px @ 767*/;
    }
}

/* --- Standaard --- */

.tag,
.legend-text,
.weekblocks .brro-booking-value-display b + span {
    font-family: "Inter", sans-serif;
    font-size: clamp(13px, 0.9vw, 15px) /*13px @ 1440*/;
    line-height: 146.154%;
    font-weight: 500;
    font-style: normal;
}

.tag-datum {
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.04vw, 17px) /*15px @ 1440*/;
    line-height: 120%;
    font-weight: 600;
    font-style: normal;
}

.body,
.body-bold,
.option-subtitle,
.selection-step-descr,
#brro_booking_addtocart_options label.selectable-option:not(.timeslot),
.brro-booking-child-loop-item p,
.brro-dynamic-duration-label,
.brro-toggle-link,
#brro-selection-price-summary,
select,
#brro_booked_options_display,
form,
input,
textarea,
.brro-price-overview,
.brro-message,
.brro-booking-quantity,
.brro-checkout-radio-label-text,
.brro-extra-field-descr,
#aanbod_title .brro-aanbod-breadcrumbs_item a,
#aanbod_title .brro-aanbod-breadcrumbs_sep::after,
#aanbod_title .summary-list li,
.knop,
.brro-button,
.brro-logout-countdown,
#page_content .page-body p,
#page_content .page-body li {
    font-family: "Inter", sans-serif;
    font-size: clamp(16px, 1.11vw, 18px) /*16px @ 1440*/;
    line-height: 143.75%;
    font-weight: 400;
    font-style: normal;
}
#brro_booking_addtocart_options label.selectable-option:not(.timeslot) {
    line-height: 120%;
}
.body-bold,
b,
strong,
.brro-checkout-radio-label-text,
#aanbod_title .brro-aanbod-breadcrumbs_item-active a {
    font-weight: 700;
}
.brro-booking-quantity,
.brro-extra-fieldgroup-edit label {
    font-weight: 500;
}
.knop,
.brro-button {
    line-height: 206.25%;
    font-weight: 500;
}
.brro-extra-field-descr {
    font-size: clamp(14px, 1.04vw, 16px) /*15px @ 1440*/!important;
}

.dropdown {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 161.111%;
    font-weight: 500;
    font-style: normal;
}

.short-copy,
.tag-groot,
.brro-button.tag-groot,
.brro-button.sm.tag-groot,
a.button.tag-groot,
#brro-checkout-submit,
.brro-booking-qty-btn,
.filters,
.nummer,
.short-copy-bold,
.brro-logout-button,
#brro_aanbod_filters .brro-aanbod-filter__legend,
#brro_aanbod_filters .brro-aanbod-filter__label {
    font-family: "Inter", sans-serif;
    font-size: clamp(18px, 1.39vw, 23px) /*20px @ 1440*/;
    line-height: 145%;
    font-weight: 400;
    font-style: normal;
}
.tag-groot,
.brro-button.tag-groot,
.brro-button.sm.tag-groot,
a.button.tag-groot,
#brro-checkout-submit {
    line-height: 165%;
}
.filters,
#brro_aanbod_filters .brro-aanbod-filter__legend,
#brro_aanbod_filters .brro-aanbod-filter__label {
    font-weight: 500;
}
.nummer {
    line-height: 160%;
    font-weight: 600;
}
.short-copy-bold {
    font-weight: 700;
}

.uitgelicht {
    font-family: "Inter", sans-serif;
    font-size: clamp(24px, 2.01vw, 33px) /*29px @ 1440*/;
    line-height: 117.241%;
    font-weight: 400;
    font-style: normal;
}


/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */
/* Two lines per color — combine selectors when the declaration is the same (see 03-css-variables.mdc). */

.primair-1, .primair-1-hover:hover { color: var(--primair-1); }
.primair-1-bg, .primair-1-bg-hover:hover,
.brro-button { background-color: var(--primair-1); }
.primair-2, .primair-2-hover:hover { color: var(--primair-2); }
.primair-2-bg, .primair-2-bg-hover:hover { background-color: var(--primair-2); }
.secundair-1, .secundair-1-hover:hover { color: var(--secundair-1); }
.secundair-1-bg, .secundair-1-bg-hover:hover,
.brro-button:hover { background-color: var(--secundair-1); }
.secundair-2, .secundair-2-hover:hover { color: var(--secundair-2); }
.secundair-2-bg, .secundair-2-bg-hover:hover { background-color: var(--secundair-2); }
.achtergrond, .achtergrond-hover:hover { color: var(--achtergrond); }
.achtergrond-bg, .achtergrond-bg-hover:hover { background-color: var(--achtergrond); }
.link, .link-hover:hover,
.brro-aanbod-breadcrumbs_item a,
.brro-logout-button:hover, .brro-logout-cancel:hover,
#page_content .page-body a { color: var(--link); }
.link-bg, .link-bg-hover:hover { background-color: var(--link); }
.neutraal-licht, .neutraal-licht-hover:hover { color: var(--neutraal-licht); }
.neutraal-licht-bg, .neutraal-licht-bg-hover:hover { background-color: var(--neutraal-licht); }
.neutraal-donker, .neutraal-donker-hover:hover,
.brro-logout-button, .brro-logout-cancel,
#opties.brro-flex-booking-section .brro-booking-reserveren-heading { color: var(--neutraal-donker); }
.neutraal-donker-bg, .neutraal-donker-bg-hover:hover { background-color: var(--neutraal-donker); }
.tekst, .tekst-hover:hover,
.brro-button,
a.button,
#aanbod_title .brro-aanbod-breadcrumbs_sep::after,
.brro-aanbod-filter-active__remove { color: var(--tekst); }
.tekst-bg, .tekst-bg-hover:hover { background-color: var(--tekst); }
.beschikbaar, .beschikbaar-hover:hover { color: var(--beschikbaar); }
.beschikbaar-bg, .beschikbaar-bg-hover:hover { background-color: var(--beschikbaar); }
.bezet, .bezet-hover:hover { color: var(--bezet); }
.bezet-bg, .bezet-bg-hover:hover { background-color: var(--bezet); }
.transparent { color: transparent; }
.transparent-bg, .transparent-bg-hover:hover { background-color: transparent; }

/* ========================================
   (STICKY) HEADER
   ======================================== */
   /* header offset */
main {
    margin-top: clamp(125px, 10.56vw, 169px) /*152px @ 1440*/;
    flex-grow: 1;
}
/* Homepage hero sits under the transparent header (Figma 300:5046). */
.home main,
.front-page main {
    margin-top: 0;
}

/* Sticky behaviour: brro-fx on <header class="brro-fx--header"> — see brro-fx Skill.
 * Header is shifted off-screen; inner chrome is shifted back so there is no header plate. */
header.brro-fx--header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    height: clamp(95px, 7.99vw, 128px) /*115px @ 1440*/;
    transform: translateY(clamp(-1111px, -69.44vw, -819px) /*-1000px @ 1440*/);
}
header.brro-fx--header .header-logo-title-link,
header.brro-fx--header .header-nav > a.button,
header.brro-fx--header .menu-btn {
    transform: translateY(clamp(820px, 69.44vw, 1112px) /*1000px @ 1440*/);
}
header.brro-sticky-effects .header-logo-title-link,
header.brro-sticky-effects .header-nav > a.button {
    transform: translateY(clamp(-1111px, -69.44vw, -819px) /*-1000px @ 1440*/);
}
header.brro-sticky-effects .menu-btn {
    transform: translateY(clamp(820px, 69.44vw, 1112px) /*1000px @ 1440*/);
}
header.brro-fx--header .outer-flex-wrapper,
header.brro-fx--header .inner-flex-wrapper {
    height: 100%;
}
header.brro-fx--header .content-wrapper {
    height: 100%;
    margin-left: clamp(118px, 10vw, 160px) /*144px @ 1440*/;
    margin-right: clamp(114px, 9.58vw, 154px) /*138px @ 1440*/;
}
@media (min-width:1180px) and (max-width: 1439px) {
    header.brro-fx--header .content-wrapper {
        margin-left: clamp(48px, calc(26.92vw - 269.69px), 118px) /*48px @ 1180 : 118px @ 1440*/;
        margin-right: clamp(48px, calc(25.38vw - 251.54px), 114px) /*48px @ 1180 : 114px @ 1440*/;
    }
}
@media (max-width: 1179px) {
    header.brro-fx--header .content-wrapper {
        margin-left: clamp(32px, calc(3.89vw + 2.1px), 48px) /*32px @ 768 : 48px @ 1179*/;
        margin-right: clamp(32px, calc(3.89vw + 2.1px), 48px) /*32px @ 768 : 48px @ 1179*/;
    }
}
@media (max-width: 767px) {
    header.brro-fx--header .content-wrapper {
        margin-left: clamp(19px, calc(2.95vw + 9.39px), 32px) /*20px @ 360 : 32px @ 767*/;
        margin-right: clamp(19px, calc(2.95vw + 9.39px), 32px) /*20px @ 360 : 32px @ 767*/;
    }
}
.header-logo-title-link {
    gap: clamp(7px, 0.49vw, 8px) /*7px @ 1440*/;
    margin-top: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/;
}
.header-logo-fallback {
    display: block;
    width: clamp(55px, 4.58vw, 74px) /*66px @ 1440*/;
    height: clamp(56px, 4.72vw, 76px) /*68px @ 1440*/;
    border-radius: 50%;
    flex-shrink: 0;
}
.header-logo {
    display: block;
    height: clamp(56px, 4.72vw, 76px) /*68px @ 1440*/;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.header-site-title {
    /* will be replaced by site setting later */
    max-width: clamp(89px, 7.5vw, 120px) /*108px @ 1440*/;
}
/* Title-only: no mark beside the name, so do not force the wrap width. */
.header-logo-title-link:not(:has(.header-logo, .header-logo-fallback)) .header-site-title {
    max-width: none;
}
/* White title over the home hero; black again when the knockout is open. */
body.home:not(.menu-open) .header-site-title,
body.front-page:not(.menu-open) .header-site-title {
    color: var(--secundair-2);
}

/* Larger logo + title on home at the top — Figma 300:5046 (196px mark, Kop-midden, 16px gap, top 27). */
@media (min-width: 1180px) {
    body:is(.home, .front-page):not(.menu-open) header .header-logo,
    body:is(.home, .front-page):not(.menu-open) header .header-logo-fallback {
        transition: height 300ms ease, width 300ms ease;
    }
    body:is(.home, .front-page):not(.menu-open) header .header-site-title {
        transition: max-width 300ms ease;
    }
    body:is(.home, .front-page):not(.menu-open) header.brro-fx--header:not(.brro-sticky-effects) .header-logo-title-link {
        align-self: flex-start;
        gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
        transform: translateY(clamp(820px, 69.44vw, 1112px) /*1000px @ 1440*/);
    }
    body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-logo,
    body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-logo-fallback {
        height: clamp(161px, 13.61vw, 218px) /*196px @ 1440*/;
    }
    body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-logo-fallback {
        width: clamp(161px, 13.61vw, 218px) /*196px @ 1440*/;
    }
    body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-site-title {
        max-width: clamp(167px, 14.1vw, 226px) /*203px @ 1440*/;
    }
    body:is(.home, .front-page):not(.menu-open) header:not(.brro-sticky-effects) .header-logo-title-link:not(:has(.header-logo, .header-logo-fallback)) .header-site-title {
        max-width: none;
    }
}

.header-nav {
    gap: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    padding-top: clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
}
/* Knockout open: keep Menu/Sluit, hide the other header pills. */
body.menu-open .header-nav > a.button {
    display: none;
}
@media (max-width: 1023px) {
    .header-nav > a.button {
        display: none;
    }
}
/* Logo + title stay in view even when sticky has slid them off. */
body.menu-open header.brro-fx--header .header-logo-title-link {
    transform: translateY(clamp(820px, 69.44vw, 1112px) /*1000px @ 1440*/);
}

/* Menu — Figma 16 pt blauw + live Menu/Sluit burger. */
header .menu-btn-link {
    flex-direction: row;
    justify-content: center;
    gap: clamp(5px, 0.35vw, 6px) /*5px @ 1440*/;
    min-width: clamp(79px, 6.67vw, 107px) /*96px @ 1440*/;
}
.button.menu-btn-link .menu-btn-label-open {
    display: none;
}
.button.menu-btn-link.open .menu-btn-label-closed {
    display: none;
}
.button.menu-btn-link.open .menu-btn-label-open {
    display: inline;
}
.menu-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
    height: clamp(10px, 0.69vw, 12px) /*10px @ 1440*/;
    flex-shrink: 0;
}
.menu-burger .bar {
    width: 100%;
    height: clamp(2px, 0.14vw, 3px) /*2px @ 1440*/;
    border-radius: clamp(1px, 0.07vw, 2px) /*1px @ 1440*/;
    transition: transform 300ms var(--cubix, ease), opacity 300ms var(--cubix, ease);
}
.button.menu-btn-link.open .menu-burger .bar.two {
    transform: rotate(45deg);
}
.button.menu-btn-link.open .menu-burger .bar.one {
    transform: translateY(clamp(4px, 0.28vw, 5px) /*4px @ 1440*/) rotate(-45deg);
}
.button.menu-btn-link.open .menu-burger .bar.three {
    opacity: 0;
}


/* ========================================
   NAV POPUP STYLES
   ======================================== */
#nav-popup {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 998;
    opacity: 0;
    transform: translateY(-200vh);
    transition: opacity 300ms ease, transform 0s ease 300ms;
}
/* Tint must be translucent — a solid -bg class paints over backdrop-filter. */
#nav-popup .nav-popup-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--primair-1) 90%, transparent);
}
#nav-popup.open {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 0s ease 0s;
}
.blur-8 {
    backdrop-filter: blur(clamp(8px, 0.56vw, 9px) /*8px @ 1440*/);
    -webkit-backdrop-filter: blur(clamp(8px, 0.56vw, 9px) /*8px @ 1440*/);
}
#nav-popup .content-wrapper {
    padding-top: clamp(124px, 10.49vw, 168px) /*151px @ 1440*/;
    margin-left: clamp(286px, 24.17vw, 387px) /*348px @ 1440*/;
    gap: clamp(164px, 13.89vw, 223px) /*200px @ 1440*/;
}
@media (max-width: 1179px) {
    #nav-popup .outer-flex-wrapper,
    #nav-popup .inner-flex-wrapper {
        height: 100%;
    }
    #nav-popup .content-wrapper {
        padding-top: 0px;
        margin-left: clamp(32px, calc(61.8vw - 442.63px), 286px) /*32px @ 768 : 286px @ 1179*/;
    }
}
@media (min-width:768px) and (max-width: 1179px) {
    #nav-popup .content-wrapper {
        transform: translateY(-50%);
    }
}
@media (max-width: 767px) {
    #nav-popup .content-wrapper {
        margin-left: 0;
        gap: 40px;
        box-sizing: border-box;
        padding-bottom: clamp(19px, calc(2.95vw + 9.39px), 32px) /*20px @ 360 : 32px @ 767*/;
    }
}
#nav-popup .nav-popup-buttons,
#nav-popup .nav-popup-contact {
    width: clamp(263px, 22.22vw, 356px) /*320px @ 1440*/;
    flex-shrink: 0;
}
#nav-popup .nav-popup-buttons {
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#nav-popup .nav-popup-contact {
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#nav-popup .nav-popup-contact .footer-links {
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
#nav-popup .nav-popup-contact .footer-links a {
    text-decoration: none;
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
#nav-popup .nav-popup-contact .footer-links a:hover span {
    text-decoration: underline;
}
#nav-popup .nav-popup-contact .footer-links svg {
    flex-shrink: 0;
}


/* ========================================
   FOOTER STYLES
   ======================================== */
/* Scaffold — column widths and spacing; finetune after. */
#site_footer {
    margin-top: clamp(132px, 11.11vw, 178px) /*160px @ 1440*/;
}
#site_footer .content-wrapper {
    margin-left: clamp(118px, 10vw, 160px) /*144px @ 1440*/;
    margin-right: clamp(114px, 9.58vw, 154px) /*138px @ 1440*/;
    padding: clamp(79px, 6.67vw, 107px) /*96px @ 1440*/ 0 16px 0;
    gap: 0px clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
}
@media (min-width:1180px) and (max-width: 1439px) {
    #site_footer .content-wrapper {
        margin-left: clamp(48px, calc(26.92vw - 269.69px), 118px) /*48px @ 1180 : 118px @ 1440*/;
        margin-right: clamp(48px, calc(25.38vw - 251.54px), 114px) /*48px @ 1180 : 114px @ 1440*/;
    }
}
@media (max-width: 1179px) {
    #site_footer .content-wrapper {
        margin-left: clamp(32px, calc(3.89vw + 2.1px), 48px) /*32px @ 768 : 48px @ 1179*/;
        margin-right: clamp(32px, calc(3.89vw + 2.1px), 48px) /*32px @ 768 : 48px @ 1179*/;
    }
}
@media (max-width: 767px) {
    #site_footer .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 40px;
    }
}
#site_footer .footer-col {
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#site_footer .footer-col h2,
#site_footer .footer-col p,
#site_footer .footer-col .intro,
#site_footer .footer-col .body {
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    max-width: clamp(394px, 33.33vw, 534px) /*480px @ 1440*/;
}
#site_footer .footer-col:last-child {
    max-width: clamp(263px, 22.22vw, 356px) /*320px @ 1440*/;
}
#site_footer .footer-legal {
    margin-top: auto;
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
@media (min-width: 768px) {
    #site_footer .footer-legal {
        transform: translateY(-100%);
    }
}
#site_footer .footer-links {
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/!important;
}
#site_footer .footer-legal a,
#site_footer .footer-links a {
    text-decoration: none;
}
#site_footer .footer-legal a:hover,
#site_footer .footer-links a:hover span {
    text-decoration: underline;
}
#site_footer .footer-links a {
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
#site_footer .footer-links svg {
    flex-shrink: 0;
}

/* ========================================
   BEDANKT (virtual /bedankt)
   ======================================== */
/* body.brro-booking-bedankt-screen — layout/styles in a later pass. */


/* ========================================
   ACCOUNT (virtual /account/…)
   ======================================== */
/* body.brro-account — hub, login, aanvragen, beheren, boekingen. Styles later. */


/* ========================================
   BORDERS, RADIUS, ETC
   ======================================== */


/* ========================================
   BUTTONS
   ======================================== */
/* Knop 16 pt — shape only. Fill comes from -bg / -bg-hover on the element. */
.brro-button,
.brro-button.sm,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: clamp(32px, 2.64vw, 43px) /*38px @ 1440*/;
    padding: clamp(3px, 0.21vw, 4px) /*3px @ 1440*/ clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    margin-bottom: 0 !important;
    border: none;
    border-radius: clamp(39px, 3.26vw, 53px) /*47px @ 1440*/;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 400ms var(--cubix, ease);
}


/* ========================================
   SWIPER SLIDER GLOBAL STYLES
   ======================================== */
/* Shared Swiper UI. Per-slider design stays with that section (.brro-swiper--modifier or #id). */
.swiper {
    position: relative;
    overflow: hidden;
}
.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
.swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
.swiper-pagination-bullet {
    width: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
    height: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
    border-radius: 50%;
    background-color: var(--neutraal-donker);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 200ms var(--cubix, ease);
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--primair-1);
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-next {
    right: 0;
}

/* ========================================
   SITE WIDE SECTIONS AND COMPONENTS
   ======================================== */
/* Reusable blocks used on more than one template (cards, page-title-section, reviews, etc.). */

/* Temporary lock below desktop — remove when tablet/mobile are designed. */
#mobile-wip-overlay {
    display: none;
}
@media (max-width: 1179px) {
    #mobile-wip-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        padding: 32px;
        text-align: center;
    }
    html,
    body {
        overflow: hidden !important;
    }
}

.content-section {
    margin-bottom: clamp(53px, 4.44vw, 72px) /*64px @ 1440*/;
}

/* Aanbod archive card — Figma 249:3806. Hover: image scale, overflow clipped. */
.aanbod-card {
    position: relative;
    width: clamp(276px, 23.33vw, 374px) /*336px @ 1440*/;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 0 0 clamp(19px, 1.6vw, 26px) /*23px @ 1440*/ clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
    /* Keep box-shadow hover; include opacity/transform so brro-fx--fade-in-up can run. */
    transition: box-shadow 200ms var(--cubix, ease), opacity 0.65s ease, transform 0.65s ease;
    /* Stagger only the entrance; hover shadow stays instant. */
    transition-delay: 0s, var(--aanbod-fx-delay, 0ms), var(--aanbod-fx-delay, 0ms);
}
/* Loop items are siblings; stagger each row of 3 (0 / 100 / 200ms). */
.brro-aanbod-archive-loop__item:nth-child(3n+2) .aanbod-card {
    --aanbod-fx-delay: 100ms;
}
.brro-aanbod-archive-loop__item:nth-child(3n+3) .aanbod-card {
    --aanbod-fx-delay: 200ms;
}
.aanbod-card:hover {
    box-shadow: 0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ 0 rgba(0, 0, 0, 0.25);
}
.aanbod-card-link,
.aanbod-card-link:hover {
    text-decoration: none;
    color: inherit;
}
.aanbod-card-link:hover h3 {
    text-decoration: underline;
    text-underline-offset: clamp(3px, 0.21vw, 4px) /*3px @ 1440*/;
    text-decoration-thickness: clamp(2px, 0.14vw, 3px) /*2px @ 1440*/;
}
.aanbod-card-image {
    overflow: hidden;
    line-height: 0;
    height: clamp(171px, 14.44vw, 232px) /*208px @ 1440*/;
}
.aanbod-card-image img {
    width: 100%;
    height: clamp(171px, 14.44vw, 232px) /*208px @ 1440*/;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--cubix, ease);
    will-change: transform;
}
.aanbod-card:hover .aanbod-card-image img {
    transform: scale(1.05);
}
.aanbod-card-tags {
    gap: clamp(12px, 0.9vw, 15px) /*13px @ 1440*/;
    padding-left: clamp(35px, 2.92vw, 47px) /*42px @ 1440*/;
}
.aanbod-card.has-image .aanbod-card-tags {
    position: absolute;
    top: clamp(158px, 13.33vw, 214px) /*192px @ 1440*/;
    left: clamp(35px, 2.92vw, 47px) /*42px @ 1440*/;
    z-index: 1;
    padding-left: 0;
}
.aanbod-card-body {
    padding: clamp(40px, 3.33vw, 54px) /*48px @ 1440*/ clamp(35px, 2.92vw, 47px) /*42px @ 1440*/ clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    gap: clamp(9px, 0.63vw, 10px) /*9px @ 1440*/;
    box-sizing: border-box;
}
.aanbod-card-body h3,
.aanbod-card-body h4 {
    margin: 0;
}
.aanbod-card.has-image .aanbod-card-body {
    padding-top: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
}

/* Page title — Item pagina (Figma 316:6026). Visible h1; skip redundant soort heading. */
.title-section .content-wrapper {
    max-width: clamp(449px, 37.99vw, 608px) /*547px @ 1440*/;
    margin-left: clamp(286px, 24.17vw, 387px) /*348px @ 1440*/;
}
@media (max-width: 1179px) {
    .title-section .content-wrapper {
        margin-left: clamp(60px, calc(54.99vw - 362.31px), 286px) /*60px @ 768 : 286px @ 1179*/;
        max-width: clamp(400px, calc(11.92vw + 308.44px), 449px) /*400px @ 768 : 449px @ 1179*/;
    }
}
@media (max-width: 767px) {
    .title-section .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
.title-section h1 {
    max-width: clamp(390px, 32.99vw, 528px) /*475px @ 1440*/;
    margin-bottom: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
}
.brro-booking-aanbod-reserveren #aanbod_title,
.brro-booking-aanbod-bevestigen #aanbod_title {
    margin-bottom: 0;
}

/* Single aanbod related sections */
#aanbod_title .brro-aanbod-breadcrumbs {
    gap: clamp(4px, 0.28vw, 5px) /*4px @ 1440*/;
    margin-bottom: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
#aanbod_title .brro-aanbod-breadcrumbs_item-active a {
    pointer-events: none;
}
#aanbod_title .brro-aanbod-breadcrumbs_sep img {
    display: none;
}
#aanbod_title .brro-aanbod-breadcrumbs_sep::after {
    content: ">";
}
#aanbod_title .brro_booking_aanbod_when {
    margin-bottom: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}
/* Reserveer-infopaneel (Figma 358:2947) — absolute on the title inner. */
#aanbod_title .sticky-summary-list {
    position: absolute;
    top: 0;
    right: clamp(114px, 9.58vw, 154px) /*138px @ 1440*/;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: clamp(290px, 21.25vw, 340px) /*306px @ 1440*/;
    padding: clamp(23px, 1.94vw, 32px) /*28px @ 1440*/ clamp(10px, 0.69vw, 12px) /*10px @ 1440*/ clamp(11px, 0.76vw, 13px) /*11px @ 1440*/;
    border-radius: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
    box-shadow: 0 0 clamp(25px, 2.08vw, 34px) /*30px @ 1440*/ rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(clamp(8px, 0.56vw, 9px) /*8px @ 1440*/);
}
@media (min-width: 1180px) and (max-width: 1439px) {
    #aanbod_title .sticky-summary-list {
        right: clamp(48px, calc(25.38vw - 251.54px), 114px) /*48px @ 1180 : 114px @ 1440*/;
    }
}
@media (max-width: 1179px) {
    #aanbod_title .summary-list {
        right: clamp(20px, calc(6.81vw - 32.32px), 48px) /*20px @ 768 : 48px @ 1179*/;
    }
}
/* JS sets top so the knop sits 32px below the viewport top; tags/list sit above. */
#aanbod_title .summary-list.is-stuck {
    position: fixed;
    right: auto;
}
body.menu-open #aanbod_title .summary-list.is-stuck {
    z-index: 997;
}
#aanbod_title .summary-list.is-stuck .summary-list-tags,
#aanbod_title .summary-list.is-stuck h2,
#aanbod_title .summary-list.is-stuck ul {
    opacity: 0;
}
#aanbod_title .summary-list-tags,
#aanbod_title .summary-list h2,
#aanbod_title .summary-list ul {
    transition: opacity 300ms var(--cubix, ease);
    margin-left: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    margin-right: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#aanbod_title .summary-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 0.9vw, 15px) /*13px @ 1440*/ clamp(13px, 1.04vw, 17px) /*15px @ 1440*/;
    margin-bottom: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/;
}
#aanbod_title .summary-list-tags .tag,
.aanbod-card-tags .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(28px, 2.29vw, 37px) /*33px @ 1440*/;
    padding: 0 clamp(13px, 1.04vw, 17px) /*15px @ 1440*/;
    border-radius: clamp(14px, 1.18vw, 19px) /*17px @ 1440*/;
    box-sizing: border-box;
}
#aanbod_title .summary-list ul {
    margin-top: 0;
    margin-bottom: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    padding-left: 1.2em;
}
#aanbod_title .summary-list .price-info .brro-booking-price-info p {
    margin: 0;
}
#aanbod_title .summary-list-knop,
#brro-checkout-submit {
    display: flex;
    align-items: center;
    width: clamp(235px, 19.86vw, 318px) /*286px @ 1440*/;
    height: clamp(45px, 3.75vw, 60px) /*54px @ 1440*/;
    min-height: clamp(45px, 3.75vw, 60px) /*54px @ 1440*/;
    text-align: left;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}
#aanbod_title .summary-list-knop {
    justify-content: flex-start;
    padding: 0 0 0 clamp(31px, 2.57vw, 42px) /*37px @ 1440*/;
}


/* Aanbod gallery — Item slider (Figma 354:681). One image per slide, height 422px, width auto. */
#aanbod_gallery .inner-flex-wrapper {
    max-width: none;
}

@media (max-width: 767px) {
    #aanbod_gallery .aanbod-gallery-single {
        width: var(--wide-mob) !important;
        max-width: var(--wide-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0;
    }
}
#aanbod_gallery .aanbod-gallery-single img {
    height: clamp(346px, 29.31vw, 469px) /*422px @ 1440*/;
    width: clamp(902px, 76.39vw, 1223px) /*1100px @ 1440*/;
    display: block;
    border-radius: 0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    margin: auto;
    object-fit: cover;
}
#aanbod_gallery .brro-swiper--gallery {
    overflow: visible;
    padding-left: clamp(165px, 13.96vw, 224px) /*201px @ 1440*/;
    padding-bottom: clamp(61px, 5.14vw, 83px) /*74px @ 1440*/;
}
@media (max-width: 1179px) {
    #aanbod_gallery .brro-swiper--gallery {
        padding-left: clamp(60px, calc(25.55vw - 136.2px), 165px) /*60px @ 768 : 165px @ 1179*/;
    }
}
@media (max-width: 767px) {
    #aanbod_gallery .brro-swiper--gallery {
        width: var(--wide-mob) !important;
        max-width: var(--wide-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0;
    }
}
#aanbod_gallery .brro-swiper--gallery .swiper-slide {
    width: auto !important;
    height: clamp(346px, 29.31vw, 469px) /*422px @ 1440*/;
    border-radius: 0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    overflow: hidden;
}
#aanbod_gallery .brro-swiper--gallery .swiper-slide img {
    height: clamp(346px, 29.31vw, 469px) /*422px @ 1440*/;
    width: auto;
    display: block;
}
#aanbod_gallery .brro-swiper--gallery .swiper-pagination {
    bottom: 0;
}
#aanbod_gallery .brro-swiper--gallery .swiper-pagination-bullet {
    width: clamp(11px, 0.76vw, 13px) /*11px @ 1440*/;
    height: clamp(11px, 0.76vw, 13px) /*11px @ 1440*/;
    background-color: var(--neutraal-donker);
    opacity: 0.45;
}
#aanbod_gallery .brro-swiper--gallery .swiper-pagination-bullet-active {
    background-color: var(--link);
    opacity: 1;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-prev,
#aanbod_gallery .brro-swiper--gallery .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/;
    height: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    top: clamp(173px, 14.65vw, 235px) /*211px @ 1440*/;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: clamp(14px, 1.18vw, 19px) /*17px @ 1440*/;
    opacity: 0.85;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-prev {
    left: clamp(10px, 0.69vw, 12px) /*10px @ 1440*/;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-next {
    right: clamp(10px, 0.69vw, 12px) /*10px @ 1440*/;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-prev::after,
#aanbod_gallery .brro-swiper--gallery .swiper-button-next::after {
    content: none;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-prev img,
#aanbod_gallery .brro-swiper--gallery .swiper-button-next img {
    display: block;
    width: clamp(12px, 0.97vw, 16px) /*14px @ 1440*/;
    height: clamp(82px, 6.88vw, 110px) /*99px @ 1440*/;
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-next img {
    transform: scaleX(-1);
}
#aanbod_gallery .brro-swiper--gallery .swiper-button-disabled {
    opacity: 0.35;
}

/* Aanbod editor copy — Item pagina body (Figma 316:6030). Same column as title. */
#aanbod_content .content-wrapper {
    max-width: clamp(341px, 28.82vw, 462px) /*415px @ 1440*/;
    margin-left: clamp(431px, 36.46vw, 584px) /*525px @ 1440*/;
}
@media (max-width: 1179px) {
    #aanbod_content .content-wrapper {
        /* margin-left: NEED CALC — desktop min 431px (525px @ 1440) */
        /* max-width: NEED CALC — desktop min 341px (415px @ 1440) */
    }
}
@media (max-width: 767px) {
    #aanbod_content .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ========================================
   FRONT PAGE ONLY
   ======================================== */
/* Hero — Figma 300:5046 / 507:1132. Ticker skipped. Larger home logo is in (STICKY) HEADER. */
#hero {
    height: clamp(509px, 43.06vw, 689px) /*620px @ 1440*/;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#hero.has-image::before,
#hero.has-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(287px, 24.31vw, 389px) /*350px @ 1440*/;
    mix-blend-mode: multiply;
    pointer-events: none;
}
#hero.has-image::before {
    top: 0;
    background: linear-gradient(to top, #ffffff, #585858);
}
#hero.has-image::after {
    bottom: 0;
    background: linear-gradient(to bottom, #ffffff, #585858);
}
/* Shadow so white type stays readable on a hero photo. */
body:is(.home, .front-page):not(.menu-open):has(#hero.has-image) .header-site-title,
#hero.has-image .header-groot {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#hero .inner-flex-wrapper,
#hero .content-wrapper {
    height: 100%;
    z-index: 1;
}
#hero .content-wrapper {
    margin-left: clamp(289px, 24.44vw, 392px) /*352px @ 1440*/;
    padding-top: clamp(250px, 21.11vw, 338px) /*304px @ 1440*/;
    width:clamp(406px, 34.38vw, 550px) /*495px @ 1440*/;
    box-sizing: border-box;
}
@media (max-width: 1179px) {
    #hero .content-wrapper {
        /* margin-left: NEED CALC — desktop min 289px (352px @ 1440) */
        /* width: NEED CALC — desktop min 406px (495px @ 1440) */
    }
}
@media (max-width: 767px) {
    #hero .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Etalage slider — Figma 358:2268. Image / text / image / text / image. */
#etalage {
    margin-top: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
}
#etalage .brro-swiper--etalage {
    overflow: visible;
    padding-left: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
    padding-bottom: clamp(41px, 3.47vw, 56px) /*50px @ 1440*/;
}

@media (max-width: 767px) {
    #etalage .brro-swiper--etalage {
        /* Match header mobile inset so the first slide is not flush left. */
        padding-left: clamp(19px, calc(2.95vw + 9.39px), 32px) /*20px @ 360 : 32px @ 767*/;
    }
}
#etalage .etalage-slide {
    height: clamp(411px, 34.79vw, 557px) /*501px @ 1440*/;
    border-radius: 0 0 clamp(19px, 1.6vw, 26px) /*23px @ 1440*/ clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
    overflow: hidden;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    #etalage .etalage-slide {
        max-width: calc(100vw - 40px);
    }
}
#etalage .etalage-slide--image {
    width: clamp(617px, 52.22vw, 836px) /*752px @ 1440*/;
    position: relative;
    background-color: var(--neutraal-donker);
}

#etalage .etalage-slide--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#etalage .etalage-slide--image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(171px, 14.44vw, 232px) /*208px @ 1440*/;
    background: linear-gradient(to top, #595959 0%, rgba(138, 138, 138, 0) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
#etalage .etalage-slide--image .etalage-slide-copy {
    position: absolute;
    left: clamp(130px, 10.97vw, 176px) /*158px @ 1440*/;
    right: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
    bottom: clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
    z-index: 1;
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    align-items: flex-start;
}
@media (max-width: 1179px) {
    #etalage .etalage-slide--image .etalage-slide-copy {
        left: clamp(80px, calc(12.17vw - 13.43px), 130px) /*80px @ 768 : 130px @ 1179*/;
    }
}
@media (max-width: 767px) {
    #etalage .etalage-slide--image .etalage-slide-copy {
        left: clamp(32px, calc(10.81vw - 2.92px), 80px) /*36px @ 360 : 80px @ 767*/;
        right: clamp(34px, calc(7.37vw + 9.46px), 66px) /*36px @ 360 : 66px @ 767*/;
    }
}
#etalage .etalage-slide--image .kop-groot {
    text-shadow: 0 0 clamp(13px, 1.04vw, 17px) /*15px @ 1440*/ rgba(0, 0, 0, 0.4);
}
#etalage .etalage-slide--text {
    width: clamp(385px, 32.57vw, 522px) /*469px @ 1440*/;
    padding: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/ clamp(51px, 4.31vw, 69px) /*62px @ 1440*/ clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#etalage .etalage-slide--text .etalage-slide-copy {
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#etalage .brro-swiper--etalage .swiper-pagination {
    bottom: 0;
}
#etalage .brro-swiper--etalage .swiper-pagination-bullet {
    width: clamp(11px, 0.76vw, 13px) /*11px @ 1440*/;
    height: clamp(11px, 0.76vw, 13px) /*11px @ 1440*/;
    background-color: var(--neutraal-donker);
    opacity: 0.45;
}
#etalage .brro-swiper--etalage .swiper-pagination-bullet-active {
    background-color: var(--link);
    opacity: 1;
}
#etalage .brro-swiper--etalage .swiper-button-prev,
#etalage .brro-swiper--etalage .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/;
    height: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    top: clamp(205px, 17.36vw, 278px) /*250px @ 1440*/;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: clamp(14px, 1.18vw, 19px) /*17px @ 1440*/;
    opacity: 0.85;
    transform: none;
}
#etalage .brro-swiper--etalage .swiper-button-prev {
    left: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
}
#etalage .brro-swiper--etalage .swiper-button-next {
    right: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
}
#etalage .brro-swiper--etalage .swiper-button-prev::after,
#etalage .brro-swiper--etalage .swiper-button-next::after {
    content: none;
}
#etalage .brro-swiper--etalage .swiper-button-prev img,
#etalage .brro-swiper--etalage .swiper-button-next img {
    display: block;
    width: clamp(12px, 0.97vw, 16px) /*14px @ 1440*/;
    height: clamp(82px, 6.88vw, 110px) /*99px @ 1440*/;
}
#etalage .brro-swiper--etalage .swiper-button-next img {
    transform: scaleX(-1);
}
#etalage .brro-swiper--etalage .swiper-button-disabled {
    opacity: 0.35;
}

/* Soort columns — Figma 520:1522. Public archive + ?soort=. */
#aanbod_types {
    margin-top: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
}
#aanbod_types .content-wrapper {
    gap: clamp(40px, 3.33vw, 54px) /*48px @ 1440*/;
}
#aanbod_types .aanbod-types-row {
    gap: clamp(41px, 3.47vw, 56px) /*50px @ 1440*/;
}
#aanbod_types .aanbod-types-col {
    width: clamp(246px, 20.83vw, 334px) /*300px @ 1440*/;
    gap: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    text-align: center;
}
#aanbod_types .aanbod-types-image {
    width: clamp(246px, 20.83vw, 334px) /*300px @ 1440*/;
    height: clamp(153px, 12.92vw, 207px) /*186px @ 1440*/;
    border-radius: 0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    overflow: hidden;
}
@media (max-width: 1179px) {
    #aanbod_types .aanbod-types-col,
    #aanbod_types .aanbod-types-image {
        /* width: NEED CALC — desktop min 246px (300px @ 1440) */
    }
}
@media (max-width: 767px) {
    #aanbod_types .aanbod-types-col,
    #aanbod_types .aanbod-types-image {
        width: var(--def-mob);
        max-width: var(--def-mob);
    }
}
#aanbod_types .aanbod-types-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#aanbod_types .aanbod-types-col .intro {
    max-width: clamp(238px, 20.14vw, 323px) /*290px @ 1440*/;
}

/* Yellow steps — Figma 520:1523. Column numbers omitted. */
#stappen {
    margin-top: clamp(107px, 9.03vw, 145px) /*130px @ 1440*/;
}
#stappen .content-wrapper {
    padding-top: clamp(64px, 5.35vw, 86px) /*77px @ 1440*/;
    padding-bottom: clamp(115px, 9.72vw, 156px) /*140px @ 1440*/;
    gap: clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
}
#stappen .content-wrapper > .kop-groot {
    max-width: clamp(278px, 23.54vw, 377px) /*339px @ 1440*/;
    text-align: center;
}
#stappen .stappen-row {
    gap: clamp(54px, 4.51vw, 73px) /*65px @ 1440*/;
}
#stappen .stappen-col {
    width: clamp(189px, 15.97vw, 256px) /*230px @ 1440*/;
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    text-align: left;
}
@media (max-width: 1179px) {
    #stappen .stappen-col {
        /* width: NEED CALC — desktop min 189px (230px @ 1440) */
    }
}
@media (max-width: 767px) {
    #stappen .stappen-col {
        width: var(--def-mob);
        max-width: var(--def-mob);
    }
}
#stappen .stappen-col img {
    width: auto;
    height: clamp(87px, 7.36vw, 118px) /*106px @ 1440*/;
    display: block;
}

/* Two-column text — Figma 520:1524. Static until ACF. */
#tekst_sectie {
    margin-top: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
}
#tekst_sectie .content-wrapper {
    margin-left: clamp(258px, 21.81vw, 349px) /*314px @ 1440*/;
    gap: clamp(46px, 3.82vw, 62px) /*55px @ 1440*/;
    padding-top: clamp(91px, 7.64vw, 123px) /*110px @ 1440*/;
    padding-bottom: clamp(91px, 7.64vw, 123px) /*110px @ 1440*/;
}
@media (max-width: 1179px) {
    #tekst_sectie .content-wrapper {
        /* margin-left: NEED CALC — desktop min 258px (314px @ 1440) */
    }
}
@media (max-width: 767px) {
    #tekst_sectie .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
#tekst_sectie .header {
    width: clamp(299px, 25.28vw, 405px) /*364px @ 1440*/;
    flex-shrink: 0;
}
@media (max-width: 1179px) {
    #tekst_sectie .header {
        /* width: NEED CALC — desktop min 299px (364px @ 1440) */
    }
}
@media (max-width: 767px) {
    #tekst_sectie .header {
        width: 100%;
    }
}
#tekst_sectie .tekst-sectie-copy {
    width: clamp(341px, 28.82vw, 462px) /*415px @ 1440*/;
    gap: clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
}
@media (max-width: 1179px) {
    #tekst_sectie .tekst-sectie-copy {
        /* width: NEED CALC — desktop min 341px (415px @ 1440) */
    }
}
@media (max-width: 767px) {
    #tekst_sectie .tekst-sectie-copy {
        width: 100%;
    }
}


/* ========================================
   DEFAULT PAGE TEMPLATE
   ======================================== */
/* page.php — reading column for default Pages (privacy policy included). */
#page_content .content-wrapper {
    width: 720px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 32px;
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (max-width: 767px) {
    #page_content .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 48px;
        padding-bottom: 48px;
    }
}
#page_content .page-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
#page_content .page-body h2:not(:first-child),
#page_content .page-body h3:not(:first-child) {
    margin-top: 16px;
}
#page_content .page-body ul,
#page_content .page-body ol {
    padding-left: 1.2em;
    margin: 0;
}
#page_content .page-body a {
    text-decoration: underline;
}


/* ========================================
   ACCOUNT TEMPLATES
   ======================================== */
/* Virtual /account/ screens — hub, login, aanvragen, beheren, boekingen.
 * Shared column: .account-section on each template's outer-flex-wrapper. */
.account-section .content-wrapper {
    max-width: clamp(524px, 44.44vw, 711px) /*640px @ 1440*/;
    margin: 0 auto;
    gap: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 1179px) {
    .account-section .content-wrapper {
        /* max-width: NEED CALC — desktop min 524px (640px @ 1440) — often OK as-is */
    }
}
@media (max-width: 767px) {
    .account-section .content-wrapper {
        width: var(--def-mob) !important;
        max-width: var(--def-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
#account_login .content-wrapper {
    max-width: clamp(344px, 29.17vw, 467px) /*420px @ 1440*/;
}
.account-section .account-content {
    gap: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    width: 100%;
}
.account-section .brro-my-account-nav {
    width: 100%;
}
.account-section .brro-my-account-nav .brro-button {
    margin-bottom: 0 !important;
}

/* Login / aanvragen: theme H1 replaces the plugin form title. */
#account_login .brro-login-step-email .brro-account-title,
#account_aanvragen .brro-account-title {
    display: none;
}
#account_login .content-wrapper > h2 {
    margin-top: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}

.brro-account-title {
    margin: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/ 0 clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#brro-registration-form .brro-account-title {
    margin-bottom: 0px;
}
#brro-registration-form .brro-account-title + p {
    margin-bottom: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}


.brro-order-item {
    box-shadow: 0 0 clamp(10px, 0.69vw, 12px) /*10px @ 1440*/ rgba(0, 0, 0, 0.25);
    border-radius: 0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
}

/* ========================================
   SINGLE POST TYPE TEMPLATE
   ======================================== */
/* Aanbod chrome (title, gallery, content) is in SITE WIDE.
 * Plugin booking UI lives here — same split as VMZ: flow/#opties first,
 * then checkout/form when that pass starts. */

/* reserveren and bevestigen section */
.brro-booking-aanbod-loaded #opties.brro-flex-booking-section {
    max-width: clamp(341px, 28.82vw, 462px) /*415px @ 1440*/;
    margin-left: clamp(431px, 36.46vw, 584px) /*525px @ 1440*/;
}
.brro-booking-aanbod-reserveren #opties.brro-flex-booking-section,
.brro-booking-aanbod-bevestigen #opties.brro-flex-booking-section {
    max-width: clamp(546px, 46.25vw, 740px) /*666px @ 1440*/;
    margin-left: clamp(286px, 24.17vw, 387px) /*348px @ 1440*/;
    margin-right: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 1179px) {
    #opties.brro-flex-booking-section {
        /* margin-left: NEED CALC — desktop min 286px (348px @ 1440) */
        /* max-width: NEED CALC — desktop min 546px (666px @ 1440) */
    }
}
@media (max-width: 767px) {
    #opties.brro-flex-booking-section {
        width: var(--wide-mob) !important;
        max-width: var(--wide-mob) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
#brro-booking-reserveren {
    scroll-margin-top: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
    display: flex;
    flex-flow: column wrap;
    align-items: start;
}
#brro-booking-reserveren .brro-booking-reserveren-heading {
    width: 100%;
    margin-bottom: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
}

.option-subtitle {
    margin-top: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/;
}

/* Legend beside the month row — same offset as VMZ so it does not wrap under. */
@media (min-width: 860px) {
    .availability-legend {
        margin-left: clamp(41px, 3.47vw, 56px) /*50px @ 1440*/;
        margin-top: clamp(-22px, -1.39vw, -16px) /*-20px @ 1440*/;
    }
}

/* Legend icons — Figma 644:2002. Text is .tag. */
.availability-legend .legend-icon {
    width: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/;
    height: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/;
    border-radius: 50%;
}
.availability-legend #available .legend-icon {
    border-width: clamp(4px, 0.28vw, 5px) /*4px @ 1440*/;
}

/* Month / day / week pills — Figma 548:1257, 548:1475, 644:1778. Shape only. */
#brro_booking_addtocart_options label.selectable-option.month,
#brro_booking_addtocart_options label.selectable-option.day,
#brro_booking_addtocart_options label.selectable-option.week {
    padding-bottom: 0;
    border-width: clamp(4px, 0.28vw, 5px) /*4px @ 1440*/;
    box-sizing: border-box;
}
#brro_booking_addtocart_options .first-step .months-selection label.selectable-option,
#brro_booking_addtocart_options label.selectable-option.month {
    width: clamp(67px, 5.63vw, 90px) /*81px @ 1440*/;
    height: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
    border-radius: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/;
}
#brro_booking_addtocart_options .selectable-options-wrapper.month-grid {
    max-width: clamp(323px, 27.29vw, 437px) /*393px @ 1440*/;
    gap: clamp(12px, 0.9vw, 15px) /*13px @ 1440*/;
}
#brro_booking_addtocart_options .selectable-options-wrapper.month-grid label.selectable-option {
    width: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
    height: clamp(37px, 3.13vw, 50px) /*45px @ 1440*/;
    border-radius: clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
    margin: auto;
}
#brro_booking_addtocart_options label.selectable-option.week {
    width: clamp(117px, 9.86vw, 158px) /*142px @ 1440*/;
    height: clamp(60px, 5.07vw, 82px) /*73px @ 1440*/;
    border-radius: clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
    padding: clamp(10px, 0.69vw, 12px) /*10px @ 1440*/;
}
#brro_booking_addtocart_options label.selectable-option.week .brro-booking-value-display b {
    font-weight: 400 !important;
    margin-bottom: 0;
}

/* quantity — plugin markup; unique size/border only (fill is on .secundair-2-bg). */
.brro-booking-qty-controls .brro-booking-quantity-input {
    min-width: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    height: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    border: none;
}


/* checkout radio description */
.brro-checkout-radio-label span.brro-checkout-radio-description {
    padding-left: clamp(16px, 1.32vw, 22px) /*19px @ 1440*/;
}
p.brro-booking-quantity,
.brro-extra-fieldgroup-edit .brro-extra-field--number > label{
	margin-top: clamp(6px, 0.42vw, 7px) /*6px @ 1440*/!important;
}


/* ========================================
   ARCHIVE POST TYPE TEMPLATE
   ======================================== */
/* CPT /aanbod/ and dual toegang archives (same template). */
#brro_aanbod_filters {
    z-index: 4;
    margin-bottom: clamp(58px, 4.86vw, 78px) /*70px @ 1440*/;
}
#brro_aanbod_filters .content-wrapper {
    margin: 0 clamp(73px, 6.18vw, 99px) /*89px @ 1440*/ 0 clamp(50px, 4.24vw, 68px) /*61px @ 1440*/;
    max-width: calc(100% - clamp(100px, 8.47vw, 136px) /*122px @ 1440*/);
}
/* Full-width positioning context so the open panel stays column-wide when the pill shrinks. */
#brro_aanbod_filters .aanbod-filter-shell {
    --aanbod-filter-scoop: clamp(12px, 0.83vw, 14px) /*12px @ 1440*/;
    --aanbod-filter-panel-top: clamp(53px, 4.44vw, 72px) /*64px @ 1440*/;
    --aanbod-filter-bar-min: clamp(656px, 55.56vw, 889px) /*800px @ 1440*/;
    position: relative;
}
#brro_aanbod_filters .aanbod-filter-bar {
    /* Shrink-to-content (designer feedback) — keep for later:
    width: fit-content;
    min-width: min(100%, var(--aanbod-filter-bar-min));
    */
    width: 100%;
    max-width: 100%;
    min-height: clamp(70px, 5.9vw, 95px) /*85px @ 1440*/;
    padding: 0 clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
    gap: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    box-sizing: border-box;
    background-color: var(--primair-2);
    border-radius: clamp(819px, 69.38vw, 1110px) /*999px @ 1440*/;
    overflow: visible;
}
.aanbod-filter-bar-title {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}
/* Packed tab group on the right; leftover space sits after "Filter op:". */
#brro_aanbod_filters .aanbod-filter-bar-title + .brro-aanbod-filter {
    margin-left: auto;
}
#brro_aanbod_filters .brro-aanbod-filter {
    position: static;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: auto;
    min-width: auto;
}
#brro_aanbod_filters .brro-aanbod-filter__legend {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: clamp(8px, 0.56vw, 9px) /*8px @ 1440*/ clamp(19px, 1.53vw, 25px) /*22px @ 1440*/;
    float: none;
    width: auto;
    cursor: pointer;
    white-space: nowrap;
}
#brro_aanbod_filters .brro-aanbod-filter__count {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    height: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    padding: 0 clamp(4px, 0.28vw, 5px) /*4px @ 1440*/;
    box-sizing: border-box;
    border-radius: clamp(819px, 69.38vw, 1110px) /*999px @ 1440*/;
    background-color: var(--secundair-1);
    color: var(--tekst);
    pointer-events: none;
}
#brro_aanbod_filters .brro-aanbod-filter:not(.brro-aanbod-filter--inactive) .brro-aanbod-filter__legend:hover {
    text-decoration: underline;
    text-underline-offset: clamp(4px, 0.28vw, 5px) /*4px @ 1440*/;
}
/* Open tab: white bump + concave corners. Shadow only on the panel so it does not
   draw a seam under the legend; the legend sits above and covers the join. */
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__options {
    z-index: 1;
    filter: drop-shadow(0 0 clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ rgba(0, 0, 0, 0.25));
}
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__legend {
    z-index: 4;
    background-color: var(--secundair-2);
    border-radius:clamp(21px, 1.74vw, 28px) /*25px @ 1440*/ clamp(21px, 1.74vw, 28px) /*25px @ 1440*/ 0 0;
}
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__legend::before,
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__legend::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--aanbod-filter-scoop);
    height: var(--aanbod-filter-scoop);
    pointer-events: none;
}
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__legend::before {
    left: calc(-1 * var(--aanbod-filter-scoop));
    background: radial-gradient(
        circle at 0 0,
        transparent var(--aanbod-filter-scoop),
        var(--secundair-2) calc(var(--aanbod-filter-scoop) + clamp(0.5px, 0.03vw, 1px) /*0.5px @ 1440*/)
    );
}
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__legend::after {
    right: calc(-1 * var(--aanbod-filter-scoop));
    background: radial-gradient(
        circle at 100% 0,
        transparent var(--aanbod-filter-scoop),
        var(--secundair-2) calc(var(--aanbod-filter-scoop) + clamp(0.5px, 0.03vw, 1px) /*0.5px @ 1440*/)
    );
}
#brro_aanbod_filters .brro-aanbod-filter--inactive {
    pointer-events: none;
}
#brro_aanbod_filters .brro-aanbod-filter--inactive .brro-aanbod-filter__legend {
    cursor: default;
}
#brro_aanbod_filters .brro-aanbod-filter__options {
    display: none;
    position: absolute;
    margin-left: clamp(159px, 13.47vw, 216px) /*194px @ 1440*/;
    left: 0;
    right: 0;
    top: var(--aanbod-filter-panel-top);
    z-index: 2;
    padding: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/ clamp(37px, 3.06vw, 49px) /*44px @ 1440*/;
    box-sizing: border-box;
    background-color: var(--secundair-2);
    border-radius: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    flex-flow: row wrap;
    gap: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/ clamp(74px, 6.25vw, 100px) /*90px @ 1440*/;
}
#brro_aanbod_filters .brro-aanbod-filter.is-open .brro-aanbod-filter__options {
    display: flex;
}
#brro_aanbod_filters .brro-aanbod-filter__option {
    gap: clamp(10px, 0.69vw, 12px) /*10px @ 1440*/;
}
.brro-aanbod-filter__option input[type="checkbox"]:before,
.brro-aanbod-filter__option input[type="radio"]:before {
    top: 50%;
    transform: translateY(-50%);
}
#brro_aanbod_filters .brro-aanbod-filter__label {
    cursor: pointer;
    padding-left: clamp(6px, 0.42vw, 7px) /*6px @ 1440*/;
}
#brro_aanbod_filters .brro-aanbod-filter__input {
    appearance: none;
    width: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    height: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    flex-shrink: 0;
    margin: 0;
    border: clamp(2px, 0.14vw, 3px) /*2px @ 1440*/ solid var(--secundair-1);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
}
#brro_aanbod_filters .brro-aanbod-filter__input:checked {
    background-color: var(--secundair-1);
    box-shadow: inset 0 0 0 clamp(3px, 0.21vw, 4px) /*3px @ 1440*/ var(--secundair-2);
}
#brro_aanbod_filter_active .content-wrapper {
    max-width: clamp(918px, 77.78vw, 1245px) /*1120px @ 1440*/;
    margin-left: auto;
    margin-right: clamp(114px, 9.58vw, 154px) /*138px @ 1440*/;
    min-height: clamp(32px, 2.71vw, 44px) /*39px @ 1440*/;
    gap: clamp(17px, 1.39vw, 23px) /*20px @ 1440*/;
    margin-bottom: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
}
#brro_aanbod_filter_active .brro-aanbod-filter-active__tag {
    height: clamp(32px, 2.71vw, 44px) /*39px @ 1440*/;
    padding: 0 clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    gap: clamp(12px, 0.97vw, 16px) /*14px @ 1440*/;
    border-radius: clamp(16px, 1.32vw, 22px) /*19px @ 1440*/;
    box-sizing: border-box;
    transition: background-color 400ms var(--cubix, ease), color 400ms var(--cubix, ease);
}
#brro_aanbod_filter_active .brro-aanbod-filter-active__remove {
    width: clamp(12px, 0.97vw, 16px) /*14px @ 1440*/;
    height: clamp(12px, 0.97vw, 16px) /*14px @ 1440*/;
}
#booking_aanbod_archive .content-wrapper {
    /* Max 1250 so 3×374px cards + 2×62px gap still fit after ~1600 (1245 wrapped to 2). */
    width: 100%;
    max-width: clamp(922px, 77.78vw, 1250px) /*1120px @ 1440*/;
    margin-left: auto;
    margin-right: auto;
    gap: clamp(46px, 3.82vw, 62px) /*55px @ 1440*/;
}
@media (max-width: 1179px) {
    #booking_aanbod_archive .content-wrapper {
        max-width: 100%;
        padding: 0 16px;
        gap: clamp(32px, calc(3.41vw + 5.84px), 46px) /*32px @ 768 : 46px @ 1179*/;
    }
}
@media (max-width: 767px) {
    #booking_aanbod_archive .content-wrapper {
        gap: clamp(24px, calc(1.97vw + 16.92px), 32px) /*24px @ 360 : 32px @ 767*/;
    }
}