/* FatBoySexy basisstijl. Het design zelf staat inline in de pagina's. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; font-family: 'Big Shoulders Text', 'Arial Narrow', sans-serif; background: #FDF0D5; color: #000; overflow-x: hidden; overflow-x: clip; }
a { color: #000; }
a:hover { color: #5C5348; }
img { max-width: 100%; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
input[aria-invalid="true"] { outline: 3px solid #FF6F59; outline-offset: 1px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #000; color: #FFD711; padding: 12px 18px; font-weight: 700; }
.skip:focus { left: 12px; top: 12px; }

/* desktop en mobiel: het design wordt exact geschaald naar de schermbreedte */
.fbs-root { margin: 0 auto; overflow-x: clip; }
.v-d { zoom: var(--zd, 1); }
.v-m { display: none; zoom: var(--zm, 1); }
@media (max-width: 1079px) {
  .v-d { display: none; }
  .v-m { display: block; }
}

/* menubalk blijft bovenin staan; overflow-x: clip hierboven houdt sticky werkend */
.fbs-head { position: sticky !important; top: 0; z-index: 50 !important; }

/* mobiel menu */
.menu-ov { display: none; position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: #000; }
.menu-ov.open, .menu-ov:target { display: block; }
.v-menu { zoom: var(--zm, 1); }
.v-menu .fbs-root { min-height: 100vh; }

.fbs-note { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

[hidden] { display: none !important; }
details > summary { list-style-position: outside; }
details > summary::marker { color: #000; }

/* uitklapmenu bovenin: hover op desktop, tikken op touch */
@media (hover: hover) { [data-dd]:hover > [data-dd-panel] { display: flex !important; } [data-dd]:hover > [data-dd-toggle] svg { transform: rotate(180deg); } }
[data-dd].open > [data-dd-panel], [data-dd]:has(:focus-visible) > [data-dd-panel] { display: flex !important; }
/* onzichtbare brug zodat het menu open blijft als je met de muis naar beneden gaat */
[data-dd-panel]::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
[data-dd].open > [data-dd-toggle] svg { transform: rotate(180deg); }
[data-dd-toggle] svg { transition: transform .15s ease; }
[data-dd-panel] a:hover { background: #FFD711; color: #000; }
/* mobiel menu: groepen uitklappen */
.v-menu summary::-webkit-details-marker { display: none; }
.v-menu details[open] > summary span[aria-hidden] { transform: rotate(45deg); }
.v-menu summary span[aria-hidden] { transition: transform .15s ease; display: inline-block; }

/* welkomstbalk bij een partnerlink */
.fbs-ref { background: #000; color: #FFD711; font-family: 'Big Shoulders Text', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-align: center; padding: 10px 16px; }

/* ---------------------------------------------------------------------------------------------
   VOORBEELDMODUS "ROND": zet ?vorm=rond achter een adres om dezelfde pagina met ronde, speelse
   vormen te zien (?vorm=eckig zet het terug). Verandert niets aan de echte site.
   --------------------------------------------------------------------------------------------- */
html[data-vorm="rond"] { --rond: 26px; }
/* kaarten, vakken, kaders met een zwarte rand */
html[data-vorm="rond"] [style*="border: 2px solid"] { border-radius: var(--rond); overflow: hidden; }
html[data-vorm="rond"] [style*="border: 1px solid #D8CBAF"] { border-radius: 14px; }
/* knoppen en labels: pillen */
html[data-vorm="rond"] a[style*="text-transform: uppercase"][style*="padding"],
html[data-vorm="rond"] button[style*="text-transform: uppercase"],
html[data-vorm="rond"] a[data-form-submit], html[data-vorm="rond"] button[data-form-submit] { border-radius: 999px !important; transition: transform .15s ease, box-shadow .15s ease; }
html[data-vorm="rond"] a[style*="text-transform: uppercase"][style*="padding"]:hover,
html[data-vorm="rond"] button[style*="text-transform: uppercase"]:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 5px 0 #000; }
/* invoervelden, taalknop, uitklapmenu */
html[data-vorm="rond"] input, html[data-vorm="rond"] select, html[data-vorm="rond"] textarea { border-radius: 16px !important; }
html[data-vorm="rond"] [aria-label="Taal"] { border-radius: 999px !important; }
html[data-vorm="rond"] [aria-label="Taal"] a { border-radius: 999px; margin: 2px; padding: 5px 9px !important; }
html[data-vorm="rond"] [data-dd-panel] { border-radius: 22px !important; box-shadow: 0 8px 0 #000 !important; padding: 10px !important; }
html[data-vorm="rond"] [data-dd-panel] a { border-radius: 999px; padding: 9px 16px !important; }
/* de menubalk wordt een zwevende pil */
html[data-vorm="rond"] .fbs-head { border: 2px solid #000 !important; border-radius: 999px; margin: 14px 22px 0; background: #FDF0D5 !important; box-shadow: 0 5px 0 #000; }
/* nummers en bolletjes */
html[data-vorm="rond"] [style*="width: 34px; height: 34px"], html[data-vorm="rond"] [style*="width: 36px; height: 36px"] { border-radius: 50% !important; }
/* brede banden worden zwevende afgeronde vlakken */
html[data-vorm="rond"] [style*="border-top: 2px solid #000000"][style*="border-bottom: 2px solid #000000"] {
  border: 2px solid #000 !important; border-radius: 44px; margin: 28px 24px; overflow: hidden; }
html[data-vorm="rond"] [style*="background: #000000; color: #FDF0D5; padding: 52px"], html[data-vorm="rond"] [style*="background: #000000; color: #FDF0D5; padding: 34px"] { border-radius: 44px; margin: 8px 24px 24px; }
html[data-vorm="rond"] [style*="flex-grow: 1; background: #000000; color: #CFC6B4"] { border-radius: 52px 52px 0 0; }
/* foto's en illustraties */
html[data-vorm="rond"] img[style*="border: 2px solid"], html[data-vorm="rond"] [data-hero-photo] { border-radius: var(--rond); }
/* kleine speelse details */
html[data-vorm="rond"] [style*="border: 2px solid"][style*="background: #FFFFFF"]:hover { transform: translateY(-3px); transition: transform .15s ease; }
html[data-vorm="rond"] .fbs-root { overflow-x: clip; }
html[data-vorm="rond"] .v-m { --rond: 20px; }
html[data-vorm="rond"] .v-m .fbs-head { margin: 10px 12px 0; }
html[data-vorm="rond"] .v-m [style*="border-top: 2px solid #000000"][style*="border-bottom: 2px solid #000000"] { margin: 20px 12px; border-radius: 32px; }
html[data-vorm="rond"] .v-m [style*="background: #000000; color: #FDF0D5; padding: 34px"] { margin: 8px 12px 20px; border-radius: 32px; }

/* ronde vorm: kleurvlakken, stapkaarten en gestippelde fotovakken */
html[data-vorm="rond"] [style*="min-height: 240px"][style*="padding: 28px 26px"] { border-radius: 32px; }
html[data-vorm="rond"] [style*="border: 2px dashed"], html[data-vorm="rond"] [style*="border: 1px dashed"] { border-radius: var(--rond); }
html[data-vorm="rond"] .v-d .fbs-root > div[style*="flex-shrink: 0; background: #"]:not(.fbs-head):not(:first-child) { margin: 20px 24px; border-radius: 48px; overflow: hidden; }
html[data-vorm="rond"] .v-m .fbs-root > div[style*="flex-shrink: 0; background: #"]:not(.fbs-head):not(:first-child) { margin: 14px 10px; border-radius: 32px; overflow: hidden; }
html[data-vorm="rond"] .v-d .fbs-root > div[style*="flex-shrink: 0; background: #000000; color: #FDF0D5; padding: 18px"] { border-radius: 999px; }

/* ronde vorm: alle overige gekleurde vlakken en labels */
html[data-vorm="rond"] [style*="padding: "][style*="background: #"]:not(.fbs-head):not(.menu-ov) { border-radius: 18px; }
html[data-vorm="rond"] .fbs-root > div:first-child { border-radius: 0 !important; }
html[data-vorm="rond"] span[style*="padding: "][style*="background: #"], html[data-vorm="rond"] div[style*="display: inline"][style*="background: #"] { border-radius: 999px; }
html[data-vorm="rond"] [style*="flex-grow: 1; background: #000000; color: #CFC6B4"] { border-radius: 52px 52px 0 0 !important; }
html[data-vorm="rond"] .v-m [style*="flex-grow: 1; background: #000000; color: #CFC6B4"] { border-radius: 36px 36px 0 0 !important; }
html[data-vorm="rond"] .v-menu [style*="background: #"] { border-radius: 0; }

/* ---------------------------------------------------------------------------------------------
   Ronde vorm, huisstijlvariant: het FBS-letterpatroon uit het brandbook als achtergrond (geen beige),
   de secties zijn afgeronde kaarten, alleen wit, beige en felgroen als kleuren (plus zwart voor tekst).
   --------------------------------------------------------------------------------------------- */
html[data-vorm="rond"], html[data-vorm="rond"] body { background: #D2FF28 url(/assets/patroon-fbs.svg) 0 0 / 190px 190px !important; }
html[data-vorm="rond"] .fbs-root { background: transparent !important; }
html[data-vorm="rond"] .fbs-root > div[style*="flex-shrink: 0"]:not(.fbs-head):not(:first-child) {
  border: 2px solid #000 !important; margin: 22px 24px !important; border-radius: 48px; overflow: hidden; background-color: #FDF0D5 !important; }
html[data-vorm="rond"] .fbs-root > div[style*="flex-shrink: 0"][style*="background: #D2FF28"]:not(.fbs-head):not(:first-child) { background-color: #FFFFFF !important; }
html[data-vorm="rond"] .fbs-root > div[style*="flex-shrink: 0"][style*="background: #FFD711"]:not(.fbs-head):not(:first-child) { background-color: #D2FF28 !important; }
html[data-vorm="rond"] .fbs-root > div[style*="flex-shrink: 0"][style*="background: #000000"]:not(.fbs-head):not(:first-child) { background-color: #000 !important; }
html[data-vorm="rond"] .v-m .fbs-root > div[style*="flex-shrink: 0"]:not(.fbs-head):not(:first-child) { margin: 14px 10px !important; border-radius: 32px; }
/* kleuren binnen de kaarten: geel wordt felgroen, koraal wordt beige of wit */
html[data-vorm="rond"] [style*="background: #FFD711"] { background-color: #D2FF28 !important; }
html[data-vorm="rond"] div[style*="background: #FF6F59"] { background-color: #FFFFFF !important; }
html[data-vorm="rond"] span[style*="background: #FF6F59"], html[data-vorm="rond"] a[style*="background: #FF6F59"] { background-color: #FFFFFF !important; }
html[data-vorm="rond"] [style*="color: #FFD711"] { color: #D2FF28 !important; }
html[data-vorm="rond"] [style*="border: 2px solid #D2FF28"] { border-color: #000 !important; }
html[data-vorm="rond"] [data-dd-panel] a:hover { background: #D2FF28; }
html[data-vorm="rond"] .fbs-head { background: #FFFFFF !important; }

/* ronde vorm, fijnslijpen: koppen op witte kaarten zwart, oud tekstpatroon weg, gekleurde blokken met rand */
html[data-vorm="rond"] .fbs-root > div[style*="background: #D2FF28"] h1[style*="color: #FFFFFF"],
html[data-vorm="rond"] .fbs-root > div[style*="background: #D2FF28"] h2[style*="color: #FFFFFF"] { color: #000 !important; }
html[data-vorm="rond"] [aria-hidden="true"][style*="font-family: Modak"][style*="opacity: 0.2"] { display: none !important; }
html[data-vorm="rond"] div[style*="padding: "][style*="background: #FFD711"], html[data-vorm="rond"] div[style*="padding: "][style*="background: #FF6F59"] { border: 2px solid #000; }
html[data-vorm="rond"] div[style*="padding: "][style*="background: #D2FF28"]:not(.fbs-root > div) { border: 2px solid #000; }
html[data-vorm="rond"] [style*="border-bottom: 3px solid #FFD711"], html[data-vorm="rond"] [style*="solid #FFD711"][style*="text-decoration"] { border-color: #000 !important; }

/* ---------------------------------------------------------------------------------------------
   Voorlopig: witte achtergrond in plaats van beige (#FDF0D5, #F6E9CB, #FFF8E4).
   Terug naar beige? Haal dit blok weg. Tekstkleuren en de ronde voorbeeldmodus blijven ongemoeid.
   --------------------------------------------------------------------------------------------- */
html:not([data-vorm="rond"]) body,
html:not([data-vorm="rond"]) [style*="background: #FDF0D5"]:not([data-dd-panel] a),
html:not([data-vorm="rond"]) [style*="background-color: #FDF0D5"],
html:not([data-vorm="rond"]) [style*="background: #F6E9CB"],
html:not([data-vorm="rond"]) [style*="background-color: #F6E9CB"],
html:not([data-vorm="rond"]) [style*="background: #FFF8E4"],
html:not([data-vorm="rond"]) [style*="background: rgba(255, 248, 228"] { background-color: #FFFFFF !important; }
html:not([data-vorm="rond"]) [style*="linear-gradient(180deg, #FDF0D5"] { background-image: none !important; }

/* ---------------------------------------------------------------------------------------------
   Kleurverhoudingen (60-30-10):
   - basis: wit, afgewisseld met lichtgrijs #F4F2EC voor rustige secties
   - structuur: zwart (tekst, randen, knoppen, balken, footer)
   - accent: geel #FFD711, het merkmoment (knoppen, nummers, prijzen, reviews)
   - felgroen en koraal alleen klein (labels, bespaar-blokjes), niet als hele sectie
   --------------------------------------------------------------------------------------------- */
html:not([data-vorm="rond"]) .fbs-root > div[style*="background: #D2FF28"],
html:not([data-vorm="rond"]) .fbs-root > div[style*="background: #FF6F59"] { background-color: #F4F2EC !important; }
html:not([data-vorm="rond"]) .fbs-root > div[style*="background: #D2FF28"] :is(h1, h2, h3)[style*="color: #FFFFFF"],
html:not([data-vorm="rond"]) .fbs-root > div[style*="background: #FF6F59"] :is(h1, h2, h3)[style*="color: #FFFFFF"] { color: #000000 !important; }
/* grote kaarten in koraal of felgroen worden wit met zwarte rand; kleine labels en blokjes houden hun kleur */
html:not([data-vorm="rond"]) div[style*="background: #FF6F59"]:is([style*="padding: 2"], [style*="padding: 3"]),
html:not([data-vorm="rond"]) div[style*="background: #D2FF28"]:is([style*="padding: 2"], [style*="padding: 3"]) { background-color: #FFFFFF !important; border: 2px solid #000000; }

/* Cookiebanner (tracking pas na toestemming, zie site.js) */
#fbs-cookies { position: fixed; z-index: 9999; left: 20px; bottom: 20px; max-width: 460px; box-sizing: border-box; background: #FDF0D5; color: #000000; border: 2px solid #000000; box-shadow: 6px 6px 0 #000000; padding: 18px 20px; font-family: "Big Shoulders Text", "Arial Narrow", Arial, sans-serif; }
#fbs-cookies .fbs-ck-t { margin: 0 0 14px; font-size: 16px; line-height: 1.45; font-weight: 500; }
#fbs-cookies a { color: #000000; font-weight: 700; }
#fbs-cookies .fbs-ck-b { display: flex; gap: 10px; }
#fbs-cookies button { flex: 1; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; padding: 12px 16px; border: 2px solid #000000; background: #FDF0D5; color: #000000; }
#fbs-cookies button.fbs-ck-ja { background: #000000; color: #FFFFFF; }
#fbs-cookies button:focus-visible { outline: 3px solid #FFD711; outline-offset: 2px; }
@media (max-width: 560px) { #fbs-cookies { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* hero-carrousel */
.fbs-sl { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.fbs-sl-t { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fbs-sl-t::-webkit-scrollbar { display: none; }
.fbs-sl-t img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; user-select: none; }
.fbs-sl-d { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.fbs-sl-d button { pointer-events: auto; width: 12px; height: 12px; padding: 0; border: 2px solid #000000; background: #FFFFFF; cursor: pointer; }
.fbs-sl-d button[aria-current="true"] { background: #FFD711; }
.fbs-sl-d button:focus-visible { outline: 3px solid #000000; outline-offset: 2px; }
[data-slider] > img:not(.fbs-sl-t img) { z-index: 2; }