/* Public styles voor de pagina-builder (secties + widgets).
   Gebruikt de merk-tokens die base.html zet (--brand, --brand-rgb) en de
   gedeelde tokens uit tokens.css. */

.hb-section {
    position: relative;
    width: 100%;
}

.hb-container {
    margin-inline: auto;
    padding-inline: var(--sp-4);
    width: 100%;
}

.hb-w-normal { max-width: 960px; }
.hb-w-wide   { max-width: 1200px; }
.hb-w-full   { max-width: none; }

/* ── Padding-varianten ── */
.hb-pad-none { padding-block: 0; }
.hb-pad-sm   { padding-block: var(--sp-6); }
.hb-pad-md   { padding-block: var(--sp-10); }
.hb-pad-lg   { padding-block: var(--sp-12); }

/* ── Achtergrond ── */
.hb-has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Tekstkleur ── */
.hb-text-dark  { color: #1a1a1a; }
.hb-text-light { color: #fff; }
.hb-text-light .hb-heading,
.hb-text-light .hb-text { color: #fff; }

/* ── Uitlijning ── */
.hb-align-left   { text-align: left; }
.hb-align-center { text-align: center; }
.hb-align-right  { text-align: right; }

.hb-align-center .hb-buttons { justify-content: center; }
.hb-align-right .hb-buttons  { justify-content: flex-end; }

/* ── Kolommen (widget) ──
   De Kolommen-widget zet zijn kind-widgets naast elkaar: 2 → 50/50,
   3 → 33/33/33, enz. De flex-basis van 200px is geen vaste breedte maar een
   ondergrens: past het niet meer, dan valt een kolom naar de volgende regel
   i.p.v. geplet te worden — zo blijft het leesbaar op een telefoon. De
   verticale uitlijning (hb-valign-*) zet korte en hoge onderdelen netjes
   naast elkaar. */
.hb-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}
.hb-columns > .hb-widget {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
}
/* De tussenruimte van gestapelde widgets hoort niet in een rij: daar zorgt de
   gap voor, en een marge boven het tweede item zou het t.o.v. het eerste
   verschuiven. */
.hb-columns > .hb-widget + .hb-widget { margin-top: 0; }

/* In kolommen kan een kaart niet van rand tot rand breken: de negatieve marge
   van .hb-map-h-lg zou de kaart over de andere kolommen schuiven. Daar volgt de
   kaart gewoon haar eigen kolom — met de gewone afgeronde hoeken, want ze raakt
   de schermrand niet meer. */
.hb-columns .hb-map-h-lg {
    width: auto;
    max-width: 100%;
    margin-inline: 0;
}
.hb-columns .hb-map-h-lg .hb-map-canvas { border-radius: var(--radius-md, 10px); }

.hb-valign-start  { align-items: flex-start; }
.hb-valign-center { align-items: center; }
.hb-valign-end    { align-items: flex-end; }

/* ── Hero ── */
.hb-hero {
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hb-height-md   { min-height: 45vh; }
.hb-height-lg   { min-height: 65vh; }
.hb-height-full { min-height: 100vh; }

/* A page with a single content section (a hero) should not leave a strip of
   page background between the hero and the footer. Grow the hero to fill the
   remaining height in both site-mode and shop layouts. */
.site-body.hb-single-hero > .hb-hero {
    flex: 1 0 auto;
}
body.has-single-hero > main {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
body.has-single-hero > main > .hb-hero {
    flex: 1 0 auto;
}

.hb-hero-overlay,
.hb-section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hb-hero-inner {
    position: relative;
    z-index: 1;
    margin-inline: auto;
}
/* De band-inhoud moet boven de donkere laag (hb-section-overlay) blijven. */
.hb-band > .hb-container {
    position: relative;
    z-index: 1;
}
.hb-hero-logo {
    max-height: 96px;
    width: auto;
    margin: 0 auto var(--sp-4);
    display: block;
}

/* ── Footer ── */
.hb-site-footer a { color: inherit; }

/* ── Widgets ── */
.hb-widget + .hb-widget { margin-top: var(--sp-4); }

/* Widget dat de beheerder op mobiel verbergt (optie 'niet tonen op mobiel')
   of op desktop verbergt (alleen op mobiel tonen).
   Zelfde breekpunt als het mobiele menu, zodat 'mobiel' overal hetzelfde is. */
@media (max-width: 991.98px) {
    .hb-hide-mobile { display: none !important; }
}
@media (min-width: 992px) {
    .hb-hide-desktop { display: none !important; }
}

/* ── Taalwidget ── */
.hb-language-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.hb-language-link {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    color: var(--hb-btn-bg, var(--bs-primary));
    border: 1px solid transparent;
}
.hb-language-link:hover {
    border-color: currentColor;
}
.hb-language-link.active {
    background: var(--hb-btn-bg, var(--bs-primary));
    color: var(--hb-btn-fg, #fff);
}
.hb-language-flag { font-size: 1.35em; line-height: 1; }

.hb-heading {
    margin: 0 0 var(--sp-2);
    line-height: 1.2;
    /* Koppen kunnen een eigen lettertype krijgen (bv. Playfair Display naast
       een Inter-body). Standaard erft het de body-font, dus ongewijzigd gedrag;
       de klant zet --font-heading via Eigen CSS-variabelen (/admin/layout). */
    font-family: var(--font-heading, inherit);
}
h1.hb-heading { font-size: clamp(2rem, 5vw, 3.25rem); }
h2.hb-heading { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3.hb-heading { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }

/* Onderlijn onder een kop (zoals .section-title::after in de originele site:
   een accentstreepje). De breedte stelt de klant zelf in, in px, via de
   CSS-variabele --hb-underline-w op de wikkel. De lijn volgt de uitlijning van
   de kop. Kleur = merkaccent (--brand), anders de tekstkleur. */
.hb-heading-underline::after {
    content: '';
    display: block;
    height: 2px;
    width: var(--hb-underline-w, 60px);
    max-width: 100%;
    margin-top: var(--sp-3);
    background: var(--brand, currentColor);
}
.hb-align-center.hb-heading-underline::after { margin-inline: auto; }
.hb-align-right.hb-heading-underline::after  { margin-left: auto; }

.hb-text { line-height: 1.6; }
.hb-text > :last-child { margin-bottom: 0; }

.hb-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
.hb-image.hb-img-small  { max-width: 360px; }
.hb-image.hb-img-medium { max-width: 640px; }
.hb-image.hb-img-full   { max-width: 100%; }
.hb-align-center .hb-image img { margin-inline: auto; }
/* De breedte-varianten kappen ook het widget-kader (max-width), dus het kader
   zelf moet mee uitlijnen — anders staat een 'small'/'medium' afbeelding wel
   gecentreerd binnen een kader dat zelf links kleeft. */
.hb-align-center .hb-image { margin-inline: auto; }
.hb-align-right  .hb-image { margin-left: auto; }
.hb-rounded { border-radius: var(--shape-md); }

.hb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.hb-buttons .hb-btn {
    height: var(--hb-btn-height, 48px);
    padding-top: 0;
    padding-bottom: 0;
}

.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--hb-radius, var(--shape-full));
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--duration-short) var(--motion-standard),
                background-color var(--duration-short) var(--motion-standard),
                color var(--duration-short) var(--motion-standard);
}
.hb-btn:hover { transform: translateY(-1px); }
.hb-btn-icon { margin-right: var(--sp-2); }

.hb-btn-primary {
    background: var(--hb-btn-bg, var(--brand));
    color: var(--hb-btn-fg, #fff);
}
.hb-btn-primary:hover { color: var(--hb-btn-fg, #fff); filter: brightness(1.05); }

.hb-btn-outline {
    background: var(--hb-btn-bg, transparent);
    color: var(--hb-btn-fg, var(--brand));
    border-color: var(--hb-btn-fg, var(--brand));
}
.hb-btn-outline:hover {
    color: var(--hb-btn-fg, var(--brand));
    background: var(--hb-btn-bg, rgba(var(--brand-rgb), 0.08));
    filter: brightness(1.05);
}

.hb-btn-whatsapp {
    background: var(--hb-btn-bg, #25d366);
    color: var(--hb-btn-fg, #fff);
}
.hb-btn-whatsapp:hover { color: var(--hb-btn-fg, #fff); filter: brightness(1.05); }

.hb-btn-link {
    background: var(--hb-btn-bg, transparent);
    color: var(--hb-btn-fg, var(--brand));
    padding-inline: 0;
}
.hb-btn-link:hover { color: var(--hb-btn-fg, var(--brand)); text-decoration: underline; }

.hb-text-light .hb-btn-outline { color: var(--hb-btn-fg, #fff); border-color: var(--hb-btn-fg, #fff); }
.hb-text-light .hb-btn-outline:hover { background: var(--hb-btn-bg, rgba(255, 255, 255, 0.15)); color: var(--hb-btn-fg, #fff); }
.hb-text-light .hb-btn-link { color: var(--hb-btn-fg, #fff); }

/* Vorm en rand van knoppen: staan op de widget-wikkel (Knop/Knoppenrij), zodat
   één instelling de hele rij dekt. 'sharp' = scherpe hoeken, 'line' = een rand
   in de tekstkleur (bij een gevulde knop dus een contrasterende rand). Kleuren
   zijn per knop te overrulen met --hb-btn-bg/--hb-btn-fg. */
.hb-btncorner-sharp .hb-btn { border-radius: 0; }
.hb-btnborder-line .hb-btn { border-color: var(--hb-btn-border, currentColor); }
.hb-btnborder-none .hb-btn { border-color: transparent; }

/* ── Overige ── */
.hb-divider-width-full { width: 100%; }
.hb-divider-width-small { width: min(30%, 280px); margin-inline: auto; }
.hb-divider-line {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.hb-text-light .hb-divider-line { border-color: rgba(255, 255, 255, 0.25); }

.hb-divider-dotted {
    border-top: 2px dotted rgba(0, 0, 0, 0.2);
}
.hb-text-light .hb-divider-dotted { border-color: rgba(255, 255, 255, 0.35); }

.hb-divider-space { height: var(--sp-6); }

.hb-spacer-sm { height: var(--sp-4); }
.hb-spacer-md { height: var(--sp-8); }
.hb-spacer-lg { height: var(--sp-12); }
.hb-spacer-xl { height: calc(var(--sp-12) * 1.75); }

@media (max-width: 576px) {
    .hb-height-full { min-height: 80vh; }
}

/* ── Navbar-sectie ── */
.hb-nav {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hb-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.hb-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 64px;
    flex-wrap: wrap;
}
.hb-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    font-size: 1.15rem;
    color: inherit;
    text-decoration: none;
}
.hb-nav-logo { height: 36px; width: auto; }
/* 'logo_auto': het logo in de balk is standaard onzichtbaar en komt pas tevoorschijn
   zodra het logo op de pagina zelf (meestal in de hero) uit beeld is — precies
   zoals de originele site, waar het navbar-logo pas bij .scrolled verschijnt.
   nav-toggle.js zet daarvoor hb-nav-brand-visible; staat er geen paginalogo, dan
   zet het script die klasse meteen. Zonder JavaScript blijft het logo dus
   verborgen, net als in de bron-site. */
.hb-nav-brand-auto .hb-nav-logo,
.hb-nav-brand-auto .hb-site-menu-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.hb-nav-brand-auto.hb-nav-brand-visible .hb-nav-logo,
.hb-nav-brand-auto.hb-nav-brand-visible .hb-site-menu-logo { opacity: 1; visibility: visible; }

/* Kleuraanpassing van het logo op de menubalk. Een zwart logo op een donkere
   balk valt weg (en een wit op een lichte); de klant kan het logo dan laten
   omkeren. 'light' maakt élk logo wit, 'dark' élk logo zwart — exact wat de
   bron-site doet met `filter: brightness(0) invert(1)` op .navbar-logo.
   'auto' zet dezezelfde klassen vanuit nav-toggle.js, nadat de echte kleur van
   het logobestand met de achtergrond van de balk is vergeleken. */
.hb-nav-logo.hb-logo-force-light,
.hb-site-menu-logo.hb-logo-force-light { filter: brightness(0) invert(1); }
.hb-nav-logo.hb-logo-force-dark,
.hb-site-menu-logo.hb-logo-force-dark { filter: brightness(0); }
.hb-nav-slot { display: flex; align-items: center; }
.hb-text-dark .hb-nav-brand { color: #1a1a1a; }
.hb-text-light .hb-nav-brand { color: #fff; }

/* ── Hangdecoratie (alleen navbar) ──
   De widget wordt buiten .hb-nav-inner gerenderd en hangt als overlay over de
   volledige breedte van de menubalk. pointer-events:none houdt de navigatie
   klikbaar; de decoratie zelf is puur visueel (aria-hidden in de template). */
.hb-nav { position: relative; }
.hb-nav-inner { position: relative; z-index: 2; }
.hb-hanging-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--decor-height, 56px);
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    line-height: 0;
}
.hb-decor-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 0 4%;
    gap: 0;
}
.hb-decor-item { display: block; position: relative; flex: 0 0 auto; }

/* Kerstverlichting: een draad bovenin met lampjes die op verschillende
   hoogtes hangen. */
.hb-decor-lights .hb-decor-track {
    height: calc(100% - 2px);
    border-top: 2px solid var(--decor-color);
}
.hb-decor-lights .hb-decor-item {
    width: 11px;
    height: 16px;
    margin-top: calc(var(--decor-height) * var(--drop) + 4px);
    border-radius: 48% 48% 52% 52%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.85) 0 12%, transparent 13%),
        linear-gradient(180deg, var(--decor-accent), color-mix(in srgb, var(--decor-accent) 68%, #7c2d12));
    box-shadow:
        0 0 7px var(--decor-accent),
        0 0 16px color-mix(in srgb, var(--decor-accent) 55%, transparent),
        inset 0 -2px 3px rgba(0,0,0,.18);
}
.hb-decor-lights .hb-decor-item::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: calc(var(--decor-height) * var(--drop));
    transform: translateX(-50%);
    background: var(--decor-color);
    opacity: .55;
}

/* Sneeuw: witte ijspegels van verschillende lengtes. */
.hb-decor-snow .hb-decor-track {
    height: calc(100% - 3px);
    border-top: 3px solid #bfdbfe;
}
.hb-decor-snow .hb-decor-item {
    width: 11px;
    height: calc(var(--decor-height) * var(--drop));
    background: linear-gradient(180deg, #fff 0%, #dbeafe 48%, #93c5fd 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 1px 2px rgba(37, 99, 235, .35));
    box-shadow: inset 2px 0 0 rgba(255,255,255,.5);
    transform-origin: top center;
}

/* Luifel/canopy: effen band met geschulpte onderrand. */
.hb-decor-canopy .hb-decor-track {
    align-items: flex-end;
    height: calc(var(--decor-height) * .62);
    padding: 0;
    background: var(--decor-color);
    border-radius: 0;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .16);
}
.hb-decor-canopy .hb-decor-item {
    flex: 1 1 0;
    height: 50%;
    margin: 0 -1px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.06)),
        var(--decor-accent);
    border-radius: 0 0 100% 100% / 0 0 100% 100%;
    box-shadow: inset 0 -3px 5px rgba(0,0,0,.12);
}

/* Vlaggenlijn: afwisselend gekleurde driehoekjes. */
.hb-decor-bunting .hb-decor-track {
    height: calc(100% - 2px);
    padding-top: 2px;
    border-top: 2px solid var(--decor-color);
}
.hb-decor-bunting .hb-decor-item {
    width: calc(var(--decor-height) * .32);
    height: calc(var(--decor-height) * .4);
    margin-top: calc(var(--decor-height) * var(--drop));
    background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.08)),
        var(--decor-accent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .16));
    transform-origin: top center;
}
.hb-decor-bunting .hb-decor-item:nth-child(even) { background: var(--decor-color); }

/* Feestelijke animaties; de vertraging per item voorkomt dat alles synchroon
   beweegt. Bij prefers-reduced-motion staat alles stil. */
.hb-decor-animated .hb-decor-track {
    animation: hb-decor-track-sway 7s ease-in-out infinite;
    transform-origin: top center;
}
.hb-decor-animated.hb-decor-lights .hb-decor-item {
    transform-origin: top center;
    animation:
        hb-decor-twinkle 2.2s ease-in-out infinite,
        hb-decor-swing 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.17s), calc(var(--i) * -0.23s);
}
.hb-decor-animated.hb-decor-snow .hb-decor-item {
    transform-origin: top center;
    animation:
        hb-decor-shimmer 2.8s ease-in-out infinite,
        hb-decor-dangle 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.21s), calc(var(--i) * -0.29s);
}
.hb-decor-animated.hb-decor-bunting .hb-decor-item {
    transform-origin: top center;
    animation:
        hb-decor-flutter 3.2s ease-in-out infinite,
        hb-decor-dangle 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.19s), calc(var(--i) * -0.31s);
}
.hb-decor-bunting .hb-decor-item:nth-child(3n) {
    filter: brightness(1.12) saturate(1.15)
            drop-shadow(0 2px 2px rgba(15, 23, 42, .16));
}
@keyframes hb-decor-twinkle {
    0%, 100% { opacity: .58; box-shadow: 0 0 5px var(--decor-accent); }
    45% { opacity: 1; box-shadow: 0 0 13px var(--decor-accent),
                                    0 0 22px color-mix(in srgb, var(--decor-accent) 55%, transparent); }
}
@keyframes hb-decor-swing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}
@keyframes hb-decor-shimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 1px 2px rgba(37, 99, 235, .3)); }
    50% { filter: brightness(1.28) drop-shadow(0 1px 7px rgba(219, 234, 254, .9)); }
}
@keyframes hb-decor-flutter {
    0%, 100% { transform: skewX(-3deg) rotate(-2deg); }
    50% { transform: skewX(4deg) rotate(2deg); }
}
@keyframes hb-decor-dangle {
    0%, 100% { transform: rotate(-3.5deg); }
    50% { transform: rotate(3.5deg); }
}
@keyframes hb-decor-track-sway {
    0%, 100% { transform: rotate(-0.5deg); }
    50% { transform: rotate(0.5deg); }
}
@media (max-width: 575.98px) {
    .hb-hanging-decor { height: calc(var(--decor-height) * .8); }
    .hb-decor-item:nth-child(n + 11) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-hanging-decor .hb-decor-item { animation: none !important; }
}

/* ── Hamburger (mobiel / klein scherm) ──
   Onder de lg-breakpoint klapt de navbar uit in een verticaal paneel onder de
   merkbalk, in plaats van dat de menu-items ernaast gaan passen. De knop en
   het paneel komen uit de navbar-sectie (navbar.html); de losse site-menu-balk
   (site_base.html) gebruikt dezelfde klassen. */
.hb-nav-toggle {
    display: none;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: var(--radius-sm, 8px);
    color: inherit;
    cursor: pointer;
}
.hb-nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-nav-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
}
.hb-nav-bars > span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.hb-nav-toggle[aria-expanded="true"] .hb-nav-bars > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hb-nav-toggle[aria-expanded="true"] .hb-nav-bars > span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hb-nav-toggle[aria-expanded="true"] .hb-nav-bars > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menu-widget ── */
.hb-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.hb-menu.hb-align-center {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.hb-menu.hb-align-right {
    justify-content: flex-end;
    margin-left: auto;
}
.hb-menu-width-full { width: 100%; }
.hb-menu-width-wide { width: 100%; max-width: 75%; }
.hb-menu-width-small { width: 100%; max-width: 50%; }
.hb-menu a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    opacity: 0.85;
}
.hb-menu a:hover { opacity: 1; color: var(--brand); }
/* Submenu's in het site-brede navigatiemenu (navbar-sectie): klappen open bij
   hover/focus, net als de losse .site-menu-balk. */
.hb-menu-item { position: relative; }
.hb-menu-label { opacity: 0.85; font-weight: 500; }
.hb-menu-caret { font-size: 0.7em; }
.hb-menu-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1040;
    min-width: 12rem;
    margin: 0;
    padding: var(--sp-1) 0;
    list-style: none;
    text-align: left;
    background: var(--nav-bg, #111);
    border-radius: var(--shape-sm, 6px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .25);
}
.hb-menu-sub a { display: block; padding: var(--sp-2) var(--sp-4); opacity: 0.9; }
.hb-menu-sub a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.hb-menu-item:hover > .hb-menu-sub,
.hb-menu-item:focus-within > .hb-menu-sub { display: block; }

/* ── Mobiel: uitklapbaar menu (hamburger) ──
   Alleen binnen een navbar-paneel (.hb-nav-slot) of de losse site-menu-balk:
   een losse menu-widget in een band blijft een rij. Onder de lg-breakpoint
   klapt de navbar uit in een verticaal paneel onder de merkbalk, in plaats van
   dat de menu-items ernaast gaan passen. */
@media (max-width: 991.98px) {
    .hb-nav-toggle { display: inline-flex; }
    .hb-nav-inner { flex-wrap: wrap; }
    .hb-nav-slot {
        display: none;
        flex: 0 0 100%;
        width: 100%;
        order: 3;
        align-items: stretch;
        padding: var(--sp-3) 0 var(--sp-4);
        border-top: 1px solid rgba(127, 127, 127, .18);
    }
    .hb-nav-slot.is-open { display: block; }
    .hb-nav-slot .hb-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .hb-nav-slot .hb-menu.hb-align-center,
    .hb-nav-slot .hb-menu.hb-align-right { justify-content: flex-start; }
    .hb-nav-slot .hb-menu-item > a,
    .hb-nav-slot .hb-menu-label {
        display: block;
        padding: var(--sp-3) 0;
        border-bottom: 1px solid rgba(127, 127, 127, .12);
    }
    .hb-nav-slot .hb-menu-caret { float: right; }
    /* Sub-items: op touch is er geen hover, dus we tonen ze direct (ingesprongen)
       onder hun ouder in het uitgeklapte paneel. */
    .hb-nav-slot .hb-menu-sub {
        position: static;
        display: block;
        min-width: 0;
        z-index: auto;
        margin: 0;
        padding: 0 0 0 var(--sp-4);
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    .hb-nav-slot .hb-menu-sub a { padding: var(--sp-2) 0; }
    .hb-nav-slot .hb-menu-item:hover > .hb-menu-sub,
    .hb-nav-slot .hb-menu-item:focus-within > .hb-menu-sub { display: block; }
}

/* ── Galerij-widget ── */
.hb-gallery {
    display: grid;
    gap: var(--sp-3);
}
.hb-gallery-hidden { display: none; }
.hb-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hb-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hb-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hb-gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
.hb-gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }
.hb-gallery-cols-7 { grid-template-columns: repeat(7, 1fr); }
/* Vorm van de tegels: rechthoek (4:3) of vierkant (1:1). De afronding is een
   slider in px (--hb-gallery-radius); hoog genoeg om een cirkel te maken. */
.hb-gallery-shape-square .hb-gallery-item img { aspect-ratio: 1 / 1; }
.hb-gallery-item {
    margin: 0 auto;
    width: var(--hb-gallery-img-size, 100%);
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--hb-gallery-radius, 10px);
    position: relative;
}
.hb-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.hb-gallery[data-lightbox="1"] .hb-gallery-item img { cursor: zoom-in; }
.hb-gallery-item:hover img { transform: scale(1.04); }
.hb-gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .hb-gallery-cols-3,
    .hb-gallery-cols-4,
    .hb-gallery-cols-5,
    .hb-gallery-cols-6,
    .hb-gallery-cols-7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .hb-gallery-cols-2,
    .hb-gallery-cols-3,
    .hb-gallery-cols-4,
    .hb-gallery-cols-5,
    .hb-gallery-cols-6,
    .hb-gallery-cols-7 { grid-template-columns: 1fr; }
}

/* ── Kaart-widget ── */
.hb-map { position: relative; }
.hb-map-canvas {
    width: 100%;
    border-radius: var(--radius-md, 10px);
    background: #e9ecef;
}
.hb-map-h-sm .hb-map-canvas { height: 240px; }
.hb-map-h-md .hb-map-canvas { height: 360px; }
.hb-map-h-lg .hb-map-canvas { height: 480px; }

/* Kaart "groot" = volledige breedte: de widget breekt uit de container, zodat
   de kaart van rand tot rand loopt (zoals de bron-site, waar de kaart buiten
   de .container staat). "Midden" en "Klein" blijven binnen de container. */
.hb-map-h-lg {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}
.hb-map-h-lg .hb-map-canvas { border-radius: 0; }
/* 100vw is zodra er een verticale scrollbar is een paar px breder dan het
   scherm: knip die rest af op de sectie (die tov het scherm vol staat), zodat
   er geen horizontale schuifbalk komt. `clip` (niet `hidden`) laat
   `position: sticky` en verticaal zichtbare kinderen ongemoeid. */
.hb-section:has(.hb-map-h-lg) { overflow-x: clip; }
.hb-map-address {
    margin-top: var(--sp-2);
    font-size: 0.9rem;
    opacity: 0.8;
}
.hb-map-route { margin-top: 0; }
/* De routeknop staat in een eigen wikkel zodat de klant de uitlijning kiest
   (links/midden/rechts). De knop is inline-flex, dus text-align op de wikkel
   volstaat; de tussenruimte komt van .hb-widget + .hb-widget. */
.hb-map-route-wrap { display: block; }
.hb-map-fallback {
    display: block;
    padding: var(--sp-3);
    background: #e9ecef;
    border-radius: var(--radius-md, 10px);
}

/* ── Social-widget ── */
.hb-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.hb-social.hb-align-center { justify-content: center; }
.hb-social.hb-align-right { justify-content: flex-end; }
.hb-social-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 1.25rem;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}
.hb-social-item:hover { color: var(--brand); }
.hb-social-count { font-size: 0.85rem; font-weight: 600; }

/* ── Lightbox (galerij) ── */
.hb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    padding: var(--sp-4);
}
.hb-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
}
.hb-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: var(--sp-4);
    transform: translateX(-50%);
    max-width: 90vw;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--shape-sm, 6px);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
}
.hb-lightbox-close,
.hb-lightbox-prev,
.hb-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hb-lightbox-close { top: var(--sp-4); right: var(--sp-4); }
.hb-lightbox-prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.hb-lightbox-next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.hb-lightbox-close:hover,
.hb-lightbox-prev:hover,
.hb-lightbox-next:hover { background: rgba(255, 255, 255, 0.3); }

/* ── Mobiele balk onderaan ──
   Vaste actiebalk die enkel op kleine schermen verschijnt; op desktop blijft de
   menubalk bovenaan staan. Zoals .mobile-bottom-bar in de bron-site: vervaging,
   bovenrand, ruimte voor de veilige zone onderaan, en knoppen met icoon boven
   het label. Staat de balk er, dan krijgt de laatste sectie op de pagina
   onderaan extra ruimte zodat hij niets afdekt (de bron-site doet dat met
   .site-footer{padding-bottom: 9rem}). */
.hb-mobilebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
/* Positie van de balk is een instelling van de sectie: onderaan (zoals de
   bron-site) of bovenaan. Bij 'bovenaan' kantelt ook de rand naar de onderkant
   en komt er ruimte voor de veilige zone vanboven. */
.hb-mobilebar-top {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: var(--sp-3);
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
}
.hb-mobilebar-inner {
    display: flex;
    align-items: stretch;
    gap: var(--sp-3);
}
/* Widgets vullen de balk gelijkmatig; de ruimte ertussen komt van de balk. */
.hb-mobilebar .hb-widget { flex: 1; margin: 0; }
.hb-mobilebar .hb-buttons { flex-wrap: nowrap; }
.hb-mobilebar .hb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
}
.hb-mobilebar .hb-btn-icon { margin-right: 0; font-size: 1.3rem; }
.hb-mobilebar .hb-btn:active { transform: scale(0.97); }

@media (max-width: 991.98px) {
    .hb-mobilebar { display: block; }
    /* Onderruimte zodat de vaste balk de laatste inhoud niet afdekt. */
    body:has(.hb-mobilebar-bottom) > section.hb-section:last-of-type { padding-bottom: 9rem; }
    /* Staat de balk bovenaan, dan schuiven de eerste sectie én de plakkerige
       navigatiebalk eronder door (hoogte bij benadering: de balk is ~5,2rem). */
    body:has(.hb-mobilebar-top) > section.hb-section:first-of-type { padding-top: 7rem; }
    body:has(.hb-mobilebar-top) .hb-nav-sticky { top: 6rem; }
}


.hb-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* Shop-widgets in de builder. */
.hb-shop-category-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.hb-shop-category-list a { display: block; padding: .45rem .65rem; border-radius: var(--shape-sm, 8px); text-decoration: none; color: inherit; background: rgba(127,127,127,.08); }
.hb-shop-category-list a:hover { background: rgba(127,127,127,.16); }
.hb-shop-catalog-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: var(--sp-5); align-items: start; }
.hb-shop-catalog-right { grid-template-columns: 1fr minmax(180px, 240px); }
.hb-shop-catalog-right .hb-shop-catalog-categories { order: 2; }
.hb-shop-catalog-right .hb-shop-catalog-products { order: 1; }
@media (max-width: 767.98px) {
    .hb-shop-catalog-grid, .hb-shop-catalog-right { grid-template-columns: 1fr; }
    .hb-shop-catalog-right .hb-shop-catalog-categories,
    .hb-shop-catalog-right .hb-shop-catalog-products { order: initial; }
}