/* Lokale lettertypen, geen Google Fonts meer, dus geen externe afhankelijkheid
   en geen data die naar Google gaat. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../vendor/fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
    --vk-red: #F02021;
    --vk-yellow: #FFC017;
    --vk-sea: #0B4F6C;
    --vk-sea-light: #12729c;
    --vk-cream: #FFFBF2;
    --vk-ink: #1A1A1A;
    --vk-ink-soft: #4A4A4A;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* ---------------------------------------------------------------
       Meeschalende maatvoering.

       In plaats van vaste maten met een handvol breekpunten schalen
       lettergroottes en witruimte vloeiend mee met de schermbreedte.
       clamp() werkt met drie waarden: het minimum, de meeschalende
       waarde en het maximum. Zo blijft de site leesbaar op een kleine
       telefoon en oogt hij niet verloren op een groot scherm.
       --------------------------------------------------------------- */

    /* Tekstgroottes */
    --tekst-klein:  clamp(12.5px, 0.75vw + 10px, 14px);
    --tekst-basis:  clamp(15px,   0.35vw + 14px, 18px);
    --tekst-groot:  clamp(16px,   0.6vw + 14px,  21px);
    --kop-klein:    clamp(17px,   0.7vw + 15px,  23px);
    --kop-midden:   clamp(22px,   1.6vw + 17px,  34px);
    --kop-groot:    clamp(27px,   2.6vw + 18px,  48px);
    --kop-hero:     clamp(32px,   4.2vw + 16px,  76px);

    /* Witruimte */
    --ruimte-xs: clamp(6px,  0.4vw,  10px);
    --ruimte-s:  clamp(10px, 0.8vw,  18px);
    --ruimte-m:  clamp(16px, 1.4vw,  28px);
    --ruimte-l:  clamp(24px, 2.4vw,  48px);
    --ruimte-xl: clamp(44px, 5vw,   110px);

    /* Breedtes: op grote schermen mag de inhoud meegroeien, maar niet
       zo breed worden dat regels onleesbaar lang worden. */
    --breedte-pagina: min(94vw, 1440px);
    --breedte-tekst:  min(92vw, 820px);
    --hoek: clamp(10px, 0.8vw, 18px);
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    margin: 0;
    color: var(--vk-ink);
    background: var(--vk-cream);
    line-height: 1.6;
    font-size: var(--tekst-basis);

    /* De footer moet onderaan het scherm blijven staan als een pagina weinig
       inhoud heeft, en gewoon meeschuiven als er veel op staat. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Voorkomt dat secties met een vaste hoogte (hero, vastgepinde sectie) worden
   samengedrukt doordat de body nu een flex-container is. */
body > * { flex-shrink: 0; }

footer.vk-footer { margin-top: auto; }

h1, h2, h3, .vk-btn { font-family: var(--font-display); }

a { color: inherit; }

/* ===== Header ===== */
header.vk-header {
    background: transparent;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
}
header.vk-header nav { display: flex; align-items: center; }
header.vk-header nav a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    margin-left: 26px;
    transition: color .2s ease;
}
header.vk-header nav a:hover { color: var(--vk-yellow); }

/* Meegescrolde/gele staat: iets compacter, met schaduw */
body.vk-scrolled header.vk-header,
body:not(.vk-has-hero) header.vk-header {
    background: var(--vk-yellow);
    box-shadow: 0 2px 14px rgba(0,0,0,0.1);
    padding: 12px 32px;
}
body.vk-scrolled header.vk-header nav a,
body:not(.vk-has-hero) header.vk-header nav a { color: var(--vk-ink); }
body.vk-scrolled header.vk-header nav a:hover,
body:not(.vk-has-hero) header.vk-header nav a:hover { color: var(--vk-red); }

/* Pagina's zonder hero-video: ruimte vrijhouden onder de vaste header */
body:not(.vk-has-hero) { padding-top: 78px; }

.vk-music-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color .2s ease, transform .15s ease;
}
.vk-music-btn i { line-height: 1; }
.vk-music-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.06); }
body.vk-scrolled .vk-music-btn,
body:not(.vk-has-hero) .vk-music-btn { background: rgba(0,0,0,0.08); color: var(--vk-ink); }

.vk-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    margin-left: 20px;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}
.vk-cart-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.06); }
body.vk-scrolled .vk-cart-btn,
body:not(.vk-has-hero) .vk-cart-btn { background: rgba(0,0,0,0.08); color: var(--vk-ink); }
.vk-cart-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--vk-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

/* ===== Desktop nav vs mobiel hamburgermenu ===== */
.vk-nav-desktop { display: flex; align-items: center; }
.vk-nav-mobile-controls { display: none; align-items: center; gap: 10px; }

.vk-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(11,25,33,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 90;
}
.vk-mobile-overlay-open { opacity: 1; pointer-events: auto; }

.vk-mobile-panel {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(86vw, 340px);
    background: rgba(255, 251, 242, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-left: 1px solid rgba(255,255,255,0.5);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22,.61,.36,1);
    box-shadow: -12px 0 40px rgba(0,0,0,0.22);
}
.vk-mobile-panel-open { transform: translateX(0); }

.vk-mobile-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.vk-mobile-logo { max-height: 38px; width: auto; }
.vk-mobile-close {
    background: rgba(0,0,0,0.06);
    border: none;
    font-size: 18px;
    color: var(--vk-ink);
    cursor: pointer;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Scrollbaar middendeel, zodat alles bereikbaar blijft op kleine schermen */
.vk-mobile-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 20px;
}
.vk-mobile-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vk-ink-soft);
    margin: 20px 0 6px;
}
.vk-mobile-link {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--vk-ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    padding: 13px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}
.vk-mobile-link:hover,
.vk-mobile-link:active { background: rgba(240,32,33,0.07); color: var(--vk-red); }
.vk-mobile-link i { width: 20px; text-align: center; color: var(--vk-ink-soft); font-size: 15px; }
.vk-mobile-link:hover i { color: var(--vk-red); }
.vk-mobile-link span { flex: 1; }
.vk-mobile-count {
    background: var(--vk-red);
    color: #fff;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.vk-mobile-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255,192,23,0.18);
    border-radius: 10px;
    font-size: 14px;
    margin: 6px 0 12px;
}
.vk-mobile-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: rgba(11,79,108,0.08);
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}
.vk-mobile-user i { color: var(--vk-sea); }

.vk-mobile-panel-bottom {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.vk-mobile-panel-bottom .vk-music-btn {
    background: rgba(0,0,0,0.06);
    color: var(--vk-ink);
    margin-left: 0;
}
.vk-mobile-panel-bottom .vk-music-btn:hover { background: rgba(240,32,33,0.12); color: var(--vk-red); }

@media (max-width: 860px) {
    /* Specifieke selector nodig: 'header.vk-header nav' hierboven is specifieker
       dan '.vk-nav-desktop', en media queries verhogen de specificiteit niet.
       Zonder deze extra specificiteit blijft de desktop-nav op mobiel staan. */
    header.vk-header nav.vk-nav-desktop { display: none; }
    .vk-nav-mobile-controls { display: flex; }
}

/* ===== Layout basics ===== */
/* LET OP: 'width: 100%' is hier nodig. De body is een flex-kolom (zodat de
   footer onderaan blijft), en in flexbox zorgt 'margin: 0 auto' ervoor dat een
   element krimpt tot de inhoud in plaats van uit te rekken. Zonder deze regel
   wordt elke sectie een smalle kolom. */
.vk-container {
    width: 100%;
    max-width: var(--breedte-pagina);
    margin: 0 auto;
    padding: var(--ruimte-xl) clamp(16px, 3vw, 40px);
}
.vk-container h2 {
    font-size: var(--kop-groot);
    font-weight: 800;
    margin: 0 0 var(--ruimte-xs);
    color: var(--vk-ink);
    line-height: 1.15;
}
.vk-section-eyebrow {
    display: inline-block;
    font-size: var(--tekst-klein);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vk-red);
    margin-bottom: 8px;
}
.vk-section-intro { color: var(--vk-ink-soft); font-size: var(--tekst-groot); margin-bottom: var(--ruimte-l); max-width: 62ch; }

.vk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 22vw, 340px), 1fr));
    gap: var(--ruimte-m);
}

/* ===== Product cards ===== */
.vk-card {
    background: #fff;
    border-radius: var(--hoek);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.vk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); }
.vk-card .vk-card-accent { height: 5px; }
.vk-card.cat-accomodatie .vk-card-accent { background: var(--vk-red); }
.vk-card.cat-scooter .vk-card-accent { background: var(--vk-yellow); }
.vk-card.cat-auto .vk-card-accent { background: var(--vk-sea); }
.vk-card img {
    width: 100%;
    aspect-ratio: 4 / 3;      /* schaalt mee in plaats van een vaste hoogte */
    height: auto;
    object-fit: cover;
    display: block;
}
.vk-card .vk-card-body { padding: var(--ruimte-s) var(--ruimte-m) var(--ruimte-m); }
.vk-card .vk-card-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    display: inline-block; margin-bottom: 8px;
}
.vk-card.cat-accomodatie .vk-card-tag { color: var(--vk-red); }
.vk-card.cat-scooter .vk-card-tag { color: #b8860b; }
.vk-card.cat-auto .vk-card-tag { color: var(--vk-sea); }
.vk-card h3 { margin: 0 0 var(--ruimte-xs); font-size: var(--kop-klein); font-weight: 700; line-height: 1.3; }
.vk-card .price { font-family: var(--font-body); font-weight: 700; font-size: var(--tekst-basis); color: var(--vk-ink); }
.vk-card .price small { font-weight: 500; color: var(--vk-ink-soft); }

/* ===== Buttons ===== */
.vk-btn {
    display: inline-block;
    background: var(--vk-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: clamp(12px, 1vw, 17px) clamp(20px, 2vw, 32px);
    font-weight: 700;
    font-size: var(--tekst-basis);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, transform .1s ease;
}
.vk-btn:hover { background: #c6191a; }
.vk-btn:active { transform: scale(0.98); }

/* ===== Forms ===== */
.vk-field { margin-bottom: 18px; }
.vk-field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14px; }
.vk-field input, .vk-field select {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    border: 2px solid #EAE3D3;
    background: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-body);
    transition: border-color .15s ease;
}
.vk-field input:focus, .vk-field select:focus { outline: none; border-color: var(--vk-sea); }

/* ===== Productpagina ===== */
.vk-product-layout {
    display: grid;
    /* De fotokolom mag krimpen en groeien, het boekingsblok houdt een
       werkbare breedte. minmax(0, ...) voorkomt dat brede foto's de kolom
       oprekken. */
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 400px);
    gap: var(--ruimte-l);
    align-items: start;
    padding-top: var(--ruimte-l);
}
.vk-product-layout > div:first-child { min-width: 0; }
.vk-product-layout h1 {
    font-size: var(--kop-groot);
    line-height: 1.15;
    margin: 0 0 var(--ruimte-m);
}

.vk-price-box {
    background: #fff;
    border-radius: var(--hoek);
    padding: clamp(18px, 1.6vw, 30px);
    position: sticky;
    top: clamp(84px, 8vh, 110px);   /* onder de vaste header blijven */
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.vk-calendar-day { position: relative; }
.vk-day-price { display:block; font-size:9px; line-height:1; margin-top:2px; font-weight:700; }

/* Flatpickr aanpassen zodat de prijs onder elke dag past (SunExpress-stijl) */
.flatpickr-calendar { width: auto !important; font-family: var(--font-body); }
.flatpickr-day {
    height: auto !important;
    line-height: 1.2 !important;
    padding: 6px 0 4px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--vk-red) !important;
    border-color: var(--vk-red) !important;
}
.flatpickr-day.inRange {
    background: #FFF3D6 !important;
    border-color: #FFF3D6 !important;
    box-shadow: -5px 0 0 #FFF3D6, 5px 0 0 #FFF3D6 !important;
}
.flatpickr-day.selected .vk-day-price,
.flatpickr-day.startRange .vk-day-price,
.flatpickr-day.endRange .vk-day-price { color: #fff !important; }
.flatpickr-day.flatpickr-disabled .vk-day-price { opacity: 0.35; }
.flatpickr-months .flatpickr-month { background: var(--vk-yellow); color: var(--vk-ink); }
.flatpickr-current-month { color: var(--vk-ink); font-family: var(--font-display); font-weight: 700; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--vk-ink); }
.flatpickr-weekday { color: var(--vk-ink-soft) !important; font-weight: 600 !important; }

table.vk-summary { width: 100%; border-collapse: collapse; margin: 24px 0; }
table.vk-summary td { padding: 12px 6px; border-bottom: 1px solid #EAE3D3; }
table.vk-summary tr.total td { font-weight: 800; font-size: 18px; border-top: 2px solid var(--vk-ink); border-bottom: none; }

.vk-error { background: #FDEDED; border: 1px solid #F5B8B8; color: #9c1f1f; padding: 14px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }

/* ===== Video hero ===== */
.vk-hero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    color: #fff;
    padding: 0 clamp(24px, 7vw, 96px);
}
.vk-hero video {
    position: absolute;
    top: 50%; left: 50%;
    /* Vult het beeld ook zolang de video nog laadt of niet wil afspelen */
    background: #0B1921 center/cover no-repeat;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}
.vk-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(11,25,33,0.82) 0%, rgba(11,25,33,0.55) 38%, rgba(11,25,33,0.12) 68%, rgba(11,25,33,0.3) 100%);
    z-index: 1;
}
.vk-hero-content { position: relative; z-index: 2; padding: 0; max-width: min(90vw, 40ch); }
.vk-hero-content .vk-section-eyebrow { color: var(--vk-yellow); }
.vk-hero-content h1 {
    font-size: var(--kop-hero);
    font-weight: 800;
    margin: var(--ruimte-xs) 0 var(--ruimte-s);
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
    letter-spacing: -0.01em;
}
.vk-hero-content p {
    font-family: var(--font-body);
    font-size: var(--tekst-groot);
    margin: 0 0 var(--ruimte-l);
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    color: #f2f2f2;
}
.vk-hero-scroll {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 22px;
    animation: vk-bounce 1.8s infinite;
    opacity: 0.85;
}
@keyframes vk-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 10px); }
}

/* ===== Parallax content secties ===== */
.vk-parallax-section {
    position: relative;
    padding: var(--ruimte-xl) clamp(16px, 3vw, 40px);
    overflow: hidden;
    background-position: center;
    background-size: cover;
}
/* Aparte achtergrondlaag die verder reikt dan de sectie, zodat hij kan bewegen
   zonder randen te tonen. Echte parallax dus, in plaats van background-attachment:fixed,
   dat op mobiel en in Safari onbetrouwbaar/schokkerig is. */
.vk-parallax-bg {
    position: absolute;
    top: -25%; left: 0;
    width: 100%;
    height: 150%;
    background-position: center;
    background-size: cover;
    will-change: transform;
}
.vk-parallax-section::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,25,33,0.5), rgba(11,25,33,0.68));
    z-index: 1;
}
.vk-parallax-inner { position: relative; z-index: 2; width: 100%; max-width: var(--breedte-tekst); margin: 0 auto; text-align: center; color: #fff; }
.vk-parallax-inner .vk-section-eyebrow { color: var(--vk-yellow); }
.vk-parallax-inner h2 { font-size: var(--kop-groot); font-weight: 800; margin: var(--ruimte-xs) 0 var(--ruimte-s); color: #fff; line-height: 1.15; }
.vk-parallax-inner p { font-family: var(--font-body); font-size: var(--tekst-groot); line-height: 1.7; color: #f0f0f0; }

/* De ruimte in parallax-secties schaalt al mee via de variabelen, dus hier is
   geen apart breekpunt meer nodig. */

/* De juiste videobron wordt door JavaScript gekozen op basis van de
   schermbreedte, dus hier is geen wisseling meer nodig. */

/* ===== Scroll-reveal (fade/slide in zodra een element in beeld scrollt) ===== */
.vk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.vk-reveal.vk-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
.vk-reveal.vk-reveal-visible { transition-delay: var(--vk-reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
    .vk-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Scroll-voortgangsbalk ===== */
.vk-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    background: var(--vk-yellow);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 50;
    transition: transform .1s linear;
}

/* ===== Statistiekenbalk ===== */
.vk-stats {
    background: var(--vk-sea);
    color: #fff;
    padding: var(--ruimte-l) clamp(16px, 3vw, 40px);
}
.vk-stats-inner {
    width: 100%;
    max-width: min(92vw, 1100px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 15vw, 220px), 1fr));
    gap: var(--ruimte-m);
    text-align: center;
}
.vk-stat-number {
    font-family: var(--font-display);
    font-size: var(--kop-groot);
    font-weight: 800;
    line-height: 1;
    color: var(--vk-yellow);
}
.vk-stat-label {
    font-size: 14px;
    margin-top: 8px;
    color: #d8e4ea;
    letter-spacing: .02em;
}

/* ===== "Waarom ons" blokken ===== */
.vk-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(210px, 18vw, 300px), 1fr));
    gap: var(--ruimte-m);
    margin-top: var(--ruimte-l);
}
.vk-feature {
    background: #fff;
    border-radius: var(--hoek);
    padding: var(--ruimte-m);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.vk-feature:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.1); }
.vk-feature-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: #FFF3D6;
    color: var(--vk-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 16px;
}
.vk-feature h3 { font-size: var(--kop-klein); margin: 0 0 var(--ruimte-xs); }
.vk-feature p { color: var(--vk-ink-soft); font-size: var(--tekst-basis); line-height: 1.65; margin: 0; }

/* ===== Grote call-to-action strook ===== */
.vk-cta-band {
    position: relative;
    padding: var(--ruimte-xl) clamp(16px, 3vw, 40px);
    overflow: hidden;
    text-align: center;
}
.vk-cta-band .vk-parallax-bg { z-index: 0; }
.vk-cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(240,32,33,0.82), rgba(11,79,108,0.86));
    z-index: 1;
}
.vk-cta-inner { position: relative; z-index: 2; width: 100%; max-width: var(--breedte-tekst); margin: 0 auto; color: #fff; }
.vk-cta-inner h2 { font-size: var(--kop-groot); font-weight: 800; margin: var(--ruimte-xs) 0 var(--ruimte-s); color: #fff; line-height: 1.15; }
.vk-cta-inner p { font-size: var(--tekst-groot); line-height: 1.7; margin-bottom: var(--ruimte-m); color: #f4f4f4; }
.vk-cta-inner .vk-btn { background: var(--vk-yellow); color: var(--vk-ink); }
.vk-cta-inner .vk-btn:hover { background: #fff; }

/* ===== Product foto-slider ===== */
.vk-slider {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #EAE3D3;
    margin-bottom: 24px;
}
/* Vaste verhouding, zodat elke foto altijd even groot is ongeacht het origineel */
.vk-slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
}
.vk-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    cursor: zoom-in;
}
.vk-slide.vk-slide-active { opacity: 1; }
.vk-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vk-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    color: var(--vk-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color .2s ease;
}
.vk-slider-btn:hover { background: #fff; }
.vk-slider-prev { left: 14px; }
.vk-slider-next { right: 14px; }
.vk-slider-dots {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.vk-slider-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.vk-slider-dot.active { background: #fff; transform: scale(1.3); }

/* Thumbnails onder de slider */
.vk-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 30px;
}
.vk-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color .2s ease, transform .15s ease;
}
.vk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-thumb:hover { transform: translateY(-2px); }
.vk-thumb.active { border-color: var(--vk-red); }

/* ===== Lightbox ===== */
.vk-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(11,25,33,0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.vk-lightbox.open { opacity: 1; pointer-events: auto; }
.vk-lightbox-img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform .3s ease;
}
.vk-lightbox.open .vk-lightbox-img { transform: scale(1); }
.vk-lightbox-close,
.vk-lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}
.vk-lightbox-close:hover,
.vk-lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.vk-lightbox-close { top: 24px; right: 24px; }
.vk-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.vk-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.vk-lightbox-counter {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0,0,0,0.4);
    padding: 6px 14px;
    border-radius: 20px;
}

@media (max-width: 640px) {
    .vk-lightbox-prev { left: 10px; }
    .vk-lightbox-next { right: 10px; }
    .vk-lightbox-close { top: 14px; right: 14px; }
}

/* ===== Woord-voor-woord tekstreveal ===== */
.vk-text-reveal .vk-word {
    display: inline-block;
    opacity: 0.15;
    transition: opacity .35s ease;
    margin-right: .28em;
}
.vk-text-reveal .vk-word.lit { opacity: 1; }

/* ===== Vastgepinde verhaal-sectie ===== */
.vk-pin-section {
    position: relative;
    /* Ongeveer één scherm scrollen per stap, plus wat marge zodat de laatste
       stap ook rustig in beeld blijft voordat de volgende sectie begint. */
    height: 240vh;
}
.vk-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vk-pin-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .8s ease, transform 6s linear;
    transform: scale(1.05);
}
.vk-pin-bg.active { opacity: 1; transform: scale(1.14); }
.vk-pin-sticky::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,25,33,0.45), rgba(11,25,33,0.72));
    z-index: 1;
}
.vk-pin-steps {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--breedte-tekst);
    padding: 0 clamp(16px, 3vw, 40px);
    text-align: center;
    color: #fff;
}
.vk-pin-step {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}
.vk-pin-step.active { opacity: 1; transform: translateY(0); }
.vk-pin-step h2 { font-size: var(--kop-groot); font-weight: 800; margin: var(--ruimte-xs) 0 var(--ruimte-s); color: #fff; width: 100%; line-height: 1.15; }
.vk-pin-step p { font-size: var(--tekst-groot); line-height: 1.7; color: #eee; max-width: 60ch; width: 100%; }
.vk-pin-step .vk-section-eyebrow { white-space: nowrap; }
.vk-pin-step .vk-feature-icon { background: rgba(255,255,255,0.14); color: var(--vk-yellow); }
.vk-pin-progress {
    position: absolute;
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}
.vk-pin-dot {
    width: 34px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    transition: background-color .3s ease;
}
.vk-pin-dot.active { background: var(--vk-yellow); }

/* Op mobiel geen pinning: gewoon onder elkaar tonen (voorkomt schokkerig scrollen) */
@media (max-width: 768px) {
    .vk-pin-section { height: auto; }
    .vk-pin-sticky { position: relative; height: auto; padding: 70px 0; }
    .vk-pin-steps { min-height: 0; }
    .vk-pin-step { position: relative; opacity: 1; transform: none; padding: 26px 0; }
    .vk-pin-bg:first-of-type { opacity: 1; }
    .vk-pin-progress { display: none; }
}

/* ===== Sectie-navigator (stipjes rechts) ===== */
.vk-section-nav {
    position: fixed;
    right: 22px; top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vk-section-nav button {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.vk-section-nav button.active { background: var(--vk-yellow); border-color: var(--vk-yellow); transform: scale(1.35); }
body.vk-nav-dark .vk-section-nav button { border-color: rgba(0,0,0,0.35); }
body.vk-nav-dark .vk-section-nav button.active { background: var(--vk-red); border-color: var(--vk-red); }

@media (max-width: 900px) { .vk-section-nav { display: none; } }

/* ===== 3D kaart-kanteling bij scrollen ===== */
.vk-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ===== Winkelwagen-flyout ===== */
.vk-cart-wrap { position: relative; display: inline-flex; }
.vk-cart-flyout {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 330px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 60;
    overflow: hidden;
    color: var(--vk-ink);
    text-align: left;
}
/* Onzichtbare brug zodat de muis van knop naar paneel kan zonder dat het sluit */
.vk-cart-flyout::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
}
.vk-cart-wrap:hover .vk-cart-flyout,
.vk-cart-wrap:focus-within .vk-cart-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.vk-cart-flyout-head {
    padding: 14px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    background: var(--vk-yellow);
    color: var(--vk-ink);
}
.vk-cart-flyout-items { max-height: 300px; overflow-y: auto; }
.vk-cart-flyout-item {
    padding: 13px 18px;
    border-bottom: 1px solid #F0EBE0;
}
.vk-cart-flyout-name { font-weight: 700; font-size: 14px; line-height: 1.35; }
.vk-cart-flyout-meta { font-size: 12px; color: var(--vk-ink-soft); margin-top: 3px; }
.vk-cart-flyout-price { font-weight: 700; font-size: 14px; margin-top: 5px; }
.vk-cart-flyout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    background: #FDFAF3;
    font-size: 14px;
}
.vk-cart-flyout-total strong { font-size: 16px; }
.vk-cart-flyout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 18px 18px;
}
.vk-cart-flyout-actions .vk-btn { text-align: center; padding: 10px 8px; font-size: 13px; }
.vk-btn.small { padding: 9px 16px; font-size: 13px; }
.vk-btn.secondary { background: #EFE8DA; color: var(--vk-ink); }
.vk-btn.secondary:hover { background: #E2D9C6; }
.vk-cart-empty { padding: 26px 18px; text-align: center; }
.vk-cart-empty i { font-size: 28px; color: #D8CEBB; }
.vk-cart-empty p { color: var(--vk-ink-soft); font-size: 14px; margin: 12px 0 16px; }

@media (max-width: 860px) { .vk-cart-flyout { display: none; } }

/* ===== Account-flyout ===== */
.vk-account-wrap { position: relative; display: inline-flex; }
.vk-account-flyout {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-width: 210px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 60;
    overflow: hidden;
    text-align: left;
}
.vk-account-flyout::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
}
.vk-account-wrap:hover .vk-account-flyout,
.vk-account-wrap:focus-within .vk-account-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.vk-account-flyout-head {
    padding: 13px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    background: var(--vk-yellow);
    color: var(--vk-ink);
}
.vk-account-flyout a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: var(--vk-ink) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #F5F1E8;
    transition: background-color .15s ease;
}
.vk-account-flyout a:last-child { border-bottom: none; }
.vk-account-flyout a:hover { background: #FDFAF3; color: var(--vk-red) !important; }
.vk-account-flyout a i { width: 16px; color: var(--vk-ink-soft); }

@media (max-width: 860px) { .vk-account-flyout { display: none; } }

/* ===== Aanpassingen per schermformaat =====
   De maatvoering schaalt al vloeiend mee via de variabelen bovenaan. Hieronder
   staan alleen de dingen die echt van indeling moeten veranderen, niet van
   formaat. Vaste pixelmaten zijn hier bewust vermeden: die zouden de
   meeschalende waarden juist weer overschrijven. */

@media (max-width: 1000px) {
    /* Boekingsblok onder de foto's in plaats van ernaast */
    .vk-product-layout {
        grid-template-columns: 1fr;
    }
    .vk-price-box {
        position: static;
        max-width: 560px;
    }
}

@media (max-width: 860px) {
    /* Samenvatting bij het afrekenen boven het formulier */
    .vk-checkout-layout { grid-template-columns: 1fr; }
    .vk-checkout-summary { position: static; order: -1; }
}

@media (max-width: 768px) {
    .vk-hero { min-height: 88svh; }
    .vk-hero-content h1 { line-height: 1.12; }

    /* Op een smal scherm staat het logo midden in de video. De tekst schuift
       daarom naar de onderkant, zodat die er niet doorheen loopt. */
    .vk-hero {
        align-items: flex-end;
        padding-bottom: clamp(48px, 12vh, 96px);
    }
    /* De donkere laag onderaan zwaarder maken, zodat de tekst leesbaar blijft */
    .vk-hero::after {
        background: linear-gradient(180deg,
            rgba(11,25,33,0.25) 0%,
            rgba(11,25,33,0.10) 35%,
            rgba(11,25,33,0.55) 70%,
            rgba(11,25,33,0.85) 100%);
    }

    /* Het scrollpijltje staat onderaan en zou nu tegen de tekst aan komen */
    .vk-hero-scroll { display: none; }

    /* De kanteling van kaarten kost op mobiel prestaties en voegt weinig toe */
    .vk-tilt { transform: none !important; }

    /* Tekst naast video onder elkaar */
    .vk-text-video { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    /* Eén kolom, zodat foto's en teksten groot genoeg blijven */
    .vk-grid { grid-template-columns: 1fr; }
    .vk-features { grid-template-columns: 1fr; }

    /* Knoppen over de volle breedte zijn op een telefoon prettiger te raken */
    .vk-btn { width: 100%; text-align: center; }
    .vk-hero-content .vk-btn { width: auto; }

    /* Invoervelden op 16px houden, anders zoomt iOS automatisch in */
    .vk-field input, .vk-field select, .vk-field textarea { font-size: 16px; }

    /* Tabellen stapelen in plaats van naast elkaar persen */
    table.vk-summary tr { display: block; border-bottom: 1px solid #EAE3D3; padding: var(--ruimte-xs) 0; }
    table.vk-summary td { display: block; width: 100%; text-align: left !important; border: none; padding: 4px 0; }

    /* Twee velden naast elkaar wordt onder elkaar */
    .vk-field-row { grid-template-columns: 1fr; gap: 0; }
    .vk-field-row-street { grid-template-columns: 2fr 1fr; gap: var(--ruimte-s); }
}

/* Zeer brede schermen: iets ruimere kaarten, zodat er geen eindeloze rij
   smalle kolommen ontstaat */
@media (min-width: 1800px) {
    .vk-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .vk-thumbs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Schermvullende scènes zijn 100vw breed. Zodra er een verticale schuifbalk is,
   is 100vw iets breder dan de zichtbare pagina en ontstaat er een horizontale
   schuifbalk. Met 'clip' snijden we dat overschot weg.
   Let op: bewust 'clip' en niet 'hidden'. Hidden maakt van dit element een
   scrollgebied, waardoor 'position: sticky' niet meer werkt; dat brak eerder
   de vastgepinde sectie op de homepage. */
html { overflow-x: clip; }

/* Voorkomt horizontaal scrollen door brede elementen.
   LET OP: bewust NIET 'overflow-x: hidden' op html/body, want dat breekt
   'position: sticky' (de vastgepinde sectie op de homepage blijft dan niet
   plakken en je krijgt een grote lege ruimte). Daarom alleen op de wrapper. */
body { max-width: 100%; }
img, video { max-width: 100%; }

/* ===== Reviews ===== */
.vk-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.vk-review {
    background: #fff;
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    position: relative;
}
.vk-review::before {
    content: "\201C";
    position: absolute;
    top: 6px; right: 20px;
    font-family: Georgia, serif;
    font-size: 62px;
    line-height: 1;
    color: #F2EADA;
}
.vk-review-stars { color: var(--vk-yellow); font-size: 14px; margin-bottom: 12px; letter-spacing: 1px; }
.vk-review-body {
    color: var(--vk-ink);
    font-size: 15px;
    line-height: 1.7;
    flex: 1;
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
}
.vk-review-author { display: flex; align-items: center; gap: 12px; }
.vk-review-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--vk-sea);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.vk-review-name { font-weight: 700; font-size: 14px; }
.vk-review-meta { font-size: 12px; color: var(--vk-ink-soft); margin-top: 2px; }

.vk-reviews-summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-top: 14px;
}
.vk-reviews-summary strong { font-family: var(--font-display); font-size: 20px; }
.vk-reviews-summary .vk-review-stars { margin: 0; }

/* ===== Footer ===== */
footer.vk-footer {
    background: var(--vk-ink);
    color: #ccc;
    padding: 48px 24px;
    text-align: center;
    font-size: 14px;
}
footer.vk-footer strong { color: #fff; }

/* ===== Beheer: uploaden en mediabibliotheek ===== */
.vk-dropzone {
    border: 2px dashed #D8CEBB;
    border-radius: 12px;
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    background: #FDFAF3;
    transition: border-color .2s ease, background-color .2s ease;
}
.vk-dropzone:hover { border-color: var(--vk-yellow); background: #FFFBF0; }
.vk-dropzone.dragover {
    border-color: var(--vk-red);
    background: #FFF4F4;
}
.vk-dropzone i { font-size: 30px; color: #C9BFA9; }
.vk-dropzone p { margin: 12px 0 6px; font-size: 15px; color: var(--vk-ink); }
.vk-dropzone small { color: #999; font-size: 12.5px; }

.vk-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.vk-media-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: relative;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.vk-media-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.vk-media-thumb { aspect-ratio: 4 / 3; background: #EAE3D3; }
.vk-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-media-info { padding: 9px 11px; }
.vk-media-name {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vk-media-meta { font-size: 11.5px; color: #999; margin-top: 2px; }
.vk-media-delete {
    position: absolute;
    top: 7px; right: 7px;
    opacity: 0;
    transition: opacity .15s ease;
}
.vk-media-item:hover .vk-media-delete { opacity: 1; }
.vk-media-delete button {
    background: rgba(192,57,43,0.92);
    color: #fff;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
}
.vk-media-delete button:hover { background: #A5301F; }
.vk-media-copied {
    position: absolute;
    inset: 0;
    background: rgba(39,103,73,0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

/* Kiezen uit de bibliotheek */
.vk-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.vk-library-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color .15s ease;
    display: block;
}
.vk-library-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-library-item input { position: absolute; opacity: 0; pointer-events: none; }
.vk-library-check {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background-color .15s ease, color .15s ease;
}
.vk-library-item:has(input:checked) { border-color: var(--vk-red); }
.vk-library-item:has(input:checked) .vk-library-check {
    background: var(--vk-red);
    color: #fff;
}

/* ===== Checkout ===== */
.vk-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 28px;
    align-items: start;
}

.vk-checkout-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #FFF8E8;
    border: 1px solid #F2D999;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.vk-checkout-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.vk-checkout-card h2 {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vk-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--vk-red);
    color: #fff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vk-checkout-hint {
    color: var(--vk-ink-soft);
    font-size: 13.5px;
    margin: 0 0 18px 36px;
}

.vk-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.vk-field-row-street { grid-template-columns: 3fr 1fr; }
.vk-field-row .vk-field input { max-width: 100%; }
.vk-checkout-card .vk-field input,
.vk-checkout-card .vk-field select,
.vk-checkout-card .vk-field textarea {
    max-width: 100%;
    width: 100%;
}
.vk-checkout-card .vk-field textarea {
    padding: 12px 14px;
    border: 2px solid #EAE3D3;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
}
.vk-checkout-card .vk-field small {
    display: block;
    color: #999;
    font-size: 12.5px;
    margin-top: 5px;
}
.vk-req { color: var(--vk-red); }

.vk-checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    font-size: 14.5px;
}
.vk-checkbox-line input { width: auto; }

.vk-checkout-submit {
    width: 100%;
    font-size: 16px;
    padding: 16px;
}
.vk-checkout-secure {
    text-align: center;
    color: var(--vk-ink-soft);
    font-size: 12.5px;
    margin: 12px 0 0;
}

/* Samenvatting rechts */
.vk-checkout-summary {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: sticky;
    top: 96px;
}
.vk-checkout-summary h2 {
    font-family: var(--font-display);
    font-size: 16px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0EBE0;
}
.vk-summary-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 12px 0;
    border-bottom: 1px solid #F0EBE0;
}
.vk-summary-name { font-weight: 700; font-size: 14px; }
.vk-summary-meta { font-size: 12.5px; color: var(--vk-ink-soft); line-height: 1.6; grid-column: 1; }
.vk-summary-price { font-weight: 700; font-size: 14px; white-space: nowrap; grid-row: 1; grid-column: 2; }
.vk-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    font-size: 15px;
}
.vk-summary-total strong { font-family: var(--font-display); font-size: 21px; }
.vk-summary-edit {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--vk-ink-soft);
}

/* De indeling van de checkout op smallere schermen staat bij de algemene
   aanpassingen per schermformaat, hierboven. Alleen dit is specifiek genoeg
   om hier te blijven staan. */
@media (max-width: 560px) {
    .vk-checkout-hint { margin-left: 0; }
}

/* ===== Taalwisselaar ===== */
.vk-lang-wrap { position: relative; display: inline-flex; }
.vk-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    height: 40px;
    padding: 0 12px;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 20px;
    transition: background-color .2s ease;
}
.vk-lang-btn:hover { background: rgba(255,255,255,0.3); }
body.vk-scrolled .vk-lang-btn,
body:not(.vk-has-hero) .vk-lang-btn { background: rgba(0,0,0,0.08); color: var(--vk-ink); }

/* Vlaggen zijn afbeeldingen, geen emoji: die zien er per apparaat anders uit
   en ontbreken op Windows. Een dun randje geeft witte vlakken (zoals bij de
   Nederlandse vlag) een duidelijke begrenzing op een lichte achtergrond. */
.vk-flag {
    width: 20px;
    height: 15px;
    display: inline-block;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    vertical-align: middle;
}
.vk-lang-btn .vk-flag { width: 22px; height: 16px; }

.vk-lang-flyout {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 60;
    overflow: hidden;
}
.vk-lang-flyout::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0;
    height: 14px;
}
.vk-lang-wrap:hover .vk-lang-flyout,
.vk-lang-wrap:focus-within .vk-lang-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.vk-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 11px 16px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--vk-ink);
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #F5F1E8;
    transition: background-color .15s ease;
}
.vk-lang-option:last-child { border-bottom: none; }
.vk-lang-option:hover { background: #FDFAF3; color: var(--vk-red); }

/* Mobiele variant: platte lijst in het menu */
.vk-lang-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vk-lang-mobile .vk-lang-option {
    border: 1px solid #EAE3D3;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13.5px;
}

/* De vertaalbalk van Google verbergen: die duwt de vaste header omlaag */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

@media (max-width: 860px) { .vk-lang-wrap { display: none; } }

/* ===== Inhoud van bewerkbare pagina's ===== */
.vk-page-content { font-size: 16px; line-height: 1.75; color: var(--vk-ink-soft); }
.vk-page-content h2 {
    font-family: var(--font-display);
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 800;
    color: var(--vk-ink);
    margin: 34px 0 12px;
}
.vk-page-content h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vk-ink);
    margin: 26px 0 10px;
}
.vk-page-content p { margin: 0 0 18px; }
.vk-page-content ul, .vk-page-content ol { margin: 0 0 18px; padding-left: 22px; }
.vk-page-content li { margin-bottom: 8px; }
.vk-page-content a { color: var(--vk-red); font-weight: 600; }
.vk-page-content img { max-width: 100%; height: auto; border-radius: 12px; }
.vk-page-content em { color: var(--vk-ink-soft); }

/* ===== Ingesloten video's in pagina-inhoud ===== */
.vk-video-embed {
    position: relative;
    padding-bottom: 56.25%;   /* 16:9 verhouding */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #14181C;
    margin: 22px 0;
}
.vk-video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vk-text-video {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    margin: 28px 0;
}
.vk-text-video .vk-video-embed { margin: 0; }
.vk-text-video h2 { margin-top: 0; }

@media (max-width: 760px) {
    .vk-text-video { grid-template-columns: 1fr; gap: 18px; }
}

/* ===== Melding bovenop de pagina ===== */
.vk-notice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,25,33,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.vk-notice-overlay.open { opacity: 1; pointer-events: auto; }

.vk-notice {
    background: #fff;
    border-radius: 16px;
    padding: 38px 34px 32px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    position: relative;
    transform: translateY(16px) scale(0.97);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.vk-notice-overlay.open .vk-notice { transform: translateY(0) scale(1); }

.vk-notice-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #FFF3D6;
    color: var(--vk-red);
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.vk-notice h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--vk-ink);
}
.vk-notice p {
    color: var(--vk-ink-soft);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 24px;
}
.vk-notice-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.vk-notice-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.05);
    color: var(--vk-ink-soft);
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}
.vk-notice-close:hover { background: rgba(0,0,0,0.1); color: var(--vk-ink); }

@media (max-width: 480px) {
    .vk-notice { padding: 32px 22px 26px; }
    .vk-notice-actions .vk-btn { width: 100%; text-align: center; }
}

/* ===== Productfoto's beheren met slepen ===== */
.vk-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.vk-photo-item {
    cursor: grab;
    position: relative;
    transition: transform .15s ease, opacity .15s ease;
}
.vk-photo-item:active { cursor: grabbing; }
.vk-photo-item.dragging {
    opacity: 0.45;
    transform: scale(0.96);
}
.vk-photo-item.drop-before .vk-photo-thumb { box-shadow: -3px 0 0 0 var(--vk-red); }
.vk-photo-item.drop-after .vk-photo-thumb { box-shadow: 3px 0 0 0 var(--vk-red); }

.vk-photo-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #EAE3D3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow .15s ease;
}
.vk-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;   /* zodat het slepen op de kaart zelf blijft werken */
}

.vk-photo-badge {
    position: absolute;
    bottom: 7px; left: 7px;
    background: rgba(20,24,28,0.82);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
}
.vk-photo-item:first-child .vk-photo-badge { background: var(--vk-red); }

.vk-photo-delete {
    position: absolute;
    top: 7px; right: 7px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(192,57,43,0.92);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}
.vk-photo-item:hover .vk-photo-delete { opacity: 1; }
.vk-photo-delete:hover { background: #A5301F; }

.vk-photo-handle {
    position: absolute;
    top: 7px; left: 7px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(20,24,28,0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.vk-photo-item:hover .vk-photo-handle { opacity: 1; }

/* ===== Voortgangsbalk bij uploaden ===== */
.vk-upload-progress {
    margin-top: 14px;
    display: none;
}
.vk-upload-progress.active { display: block; }

.vk-upload-bar {
    height: 8px;
    background: #EAE3D3;
    border-radius: 20px;
    overflow: hidden;
}
.vk-upload-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--vk-yellow), var(--vk-red));
    border-radius: 20px;
    transition: width .2s ease;
}
.vk-upload-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--vk-ink-soft);
    margin-bottom: 6px;
}
.vk-upload-label strong { color: var(--vk-ink); }

/* ===== Cookiemelding ===== */
.vk-cookie {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 250;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.22);
    padding: 22px 24px;
    max-width: 780px;
    margin: 0 auto;
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.vk-cookie.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.vk-cookie-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.vk-cookie-text { flex: 1; min-width: 260px; }
.vk-cookie-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    margin-bottom: 6px;
}
.vk-cookie-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--vk-ink-soft);
}
.vk-cookie-text a { color: var(--vk-red); font-weight: 600; }
.vk-cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.vk-cookie-actions .vk-btn { white-space: nowrap; }

/* Klein knopje om de keuze later te wijzigen */
.vk-cookie-reopen {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 240;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--vk-ink-soft);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    transition: color .2s ease, transform .15s ease;
}
.vk-cookie-reopen:hover { color: var(--vk-red); transform: scale(1.06); }

@media (max-width: 640px) {
    .vk-cookie { padding: 18px; left: 10px; right: 10px; bottom: 10px; }
    .vk-cookie-inner { gap: 16px; }
    .vk-cookie-actions { width: 100%; }
    .vk-cookie-actions .vk-btn { flex: 1; text-align: center; }
    .vk-cookie-reopen { width: 38px; height: 38px; font-size: 14px; }
}

/* ===== Melding bij herstelde checkoutgegevens ===== */
.vk-restore-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #EAF4EE;
    border: 1px solid #BCDCC8;
    color: #276749;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    margin-bottom: 18px;
}
.vk-restore-notice button {
    background: none;
    border: 1px solid #BCDCC8;
    color: #276749;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background-color .15s ease;
}
.vk-restore-notice button:hover { background: rgba(39,103,73,0.1); }

/* ===== Alt-tekst bij productfoto's ===== */
.vk-photo-alt {
    display: block;
    margin-top: 7px;
}
.vk-photo-alt span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 3px;
}
.vk-photo-alt input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #E5DFD2;
    border-radius: 7px;
    font-size: 12.5px;
    font-family: var(--font-body);
    background: #fff;
    transition: border-color .15s ease, background-color .3s ease;
}
.vk-photo-alt input:focus {
    outline: none;
    border-color: var(--vk-sea);
}
.vk-photo-alt input.bezig { border-color: var(--vk-yellow); }
.vk-photo-alt input.opgeslagen {
    border-color: #9c9;
    background: #F1F9F3;
}

/* ===== Bezette dagen in de kalender ===== */
.flatpickr-day.vk-day-bezet {
    background: #FDEDED !important;
    border-color: #FDEDED !important;
    color: #c33 !important;
    text-decoration: line-through;
    opacity: 1 !important;   /* niet vervagen: 'bezet' moet leesbaar blijven */
}
.flatpickr-day.vk-day-bezet .vk-day-price {
    font-size: 8px;
    letter-spacing: .02em;
    text-decoration: none;
}

/* ===== Specificaties bij een product ===== */
.vk-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ruimte-s);
    margin: 0 0 var(--ruimte-l);
    padding: var(--ruimte-m);
    background: #fff;
    border: 1px solid #EFE8DA;
    border-radius: var(--hoek);
}
.vk-spec {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vk-spec-icoon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FFF3D6;
    color: var(--vk-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.vk-spec-tekst { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.vk-spec-tekst strong { font-size: 14.5px; font-weight: 700; color: var(--vk-ink); }
.vk-spec-tekst em {
    font-style: normal;
    font-size: 12px;
    color: var(--vk-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vk-product-tekst { line-height: 1.75; color: var(--vk-ink-soft); }

/* ===== Eigen videospeler ===== */
.vk-speler {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--hoek);
    overflow: hidden;
    background: #14181C;
    cursor: pointer;
}
.vk-speler video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vk-speler-knop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(11,25,33,0.25);
    cursor: pointer;
    transition: background-color .2s ease;
    padding: 0;
}
.vk-speler-knop:hover { background: rgba(11,25,33,0.1); }
.vk-speler-knop span {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--vk-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding-left: 4px;   /* het driehoekje optisch centreren */
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    transition: transform .2s ease;
}
.vk-speler-knop:hover span { transform: scale(1.08); }
.vk-speler.speelt .vk-speler-knop { display: none; }

/* Tekst naast video: op smalle schermen onder elkaar */
.vk-tekst-video {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-l);
    align-items: center;
    margin: var(--ruimte-l) 0;
}
.vk-tekst-video h2 { margin-top: 0; }
.vk-tekst-video-omgekeerd .vk-tekst-video-media { order: -1; }

/* Een afbeelding in plaats van een video naast de tekst */
.vk-tekst-video-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--hoek);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

/* Twee video's naast elkaar binnen één sectie */
.vk-video-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-s);
}

@media (max-width: 760px) {
    .vk-tekst-video { grid-template-columns: 1fr; }
    .vk-tekst-video-omgekeerd .vk-tekst-video-media { order: 0; }
    .vk-video-duo { grid-template-columns: 1fr; }
    .vk-speler-knop span { width: 56px; height: 56px; font-size: 18px; }
}

/* ===== Schermvullende scènes op inhoudspagina's =====
   Bedoeld voor pagina's als Must-see: elk onderdeel krijgt een eigen beeld dat
   het hele scherm vult, met de tekst eroverheen. */

.vk-scene {
    position: relative;
    /* De inhoud staat in een container met een maximale breedte. Met deze twee
       regels breekt een scène daaruit en loopt hij van rand tot rand. */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px, 10vh, 120px) var(--vk-page-x, 24px);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

/* De achtergrond zit in een eigen laag die groter is dan de scène, zodat hij
   kan bewegen zonder dat er randen zichtbaar worden. */
.vk-scene > .vk-parallax-bg {
    position: absolute;
    top: -20%; left: 0;
    width: 100%;
    height: 140%;
    background-position: center;
    background-size: cover;
    will-change: transform;
    z-index: -2;
}
.vk-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,25,33,0.72), rgba(11,25,33,0.58) 45%, rgba(11,25,33,0.80));
    z-index: -1;
}

.vk-scene-inner {
    width: 100%;
    max-width: 980px;
    text-align: center;
}
.vk-scene-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.6vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    margin: 8px 0 16px;
    color: #fff;
}
.vk-scene-inner h3 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 24px);
    color: #fff;
    margin: 26px 0 10px;
}
.vk-scene-inner p {
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.75;
    color: #e9eef1;
    max-width: 72ch;
    margin: 0 auto 16px;
}
.vk-scene-inner ul {
    max-width: 60ch;
    margin: 0 auto 18px;
    text-align: left;
    color: #e9eef1;
    padding-left: 20px;
}
.vk-scene-inner li { margin-bottom: 8px; }
.vk-scene-inner a { color: var(--vk-yellow); font-weight: 600; }
.vk-scene-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vk-yellow);
}

/* De speler binnen een scène */
.vk-scene .vk-speler {
    margin: 26px auto 0;
    max-width: 860px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.vk-scene .vk-video-duo {
    margin: 26px auto 0;
    max-width: 980px;
}
.vk-scene .vk-video-duo .vk-speler { margin: 0; max-width: none; }

/* Twee foto's naast elkaar binnen een scène */
.vk-scene-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-s, 14px);
    margin: 26px auto 0;
    max-width: 980px;
}
.vk-scene-fotos img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hoek, 12px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

/* Een rustige scène zonder foto, voor tekstonderdelen */
.vk-scene-rustig { color: var(--vk-ink); min-height: auto; }
.vk-scene-rustig::before { background: none; }
.vk-scene-rustig .vk-scene-inner h2,
.vk-scene-rustig .vk-scene-inner h3 { color: var(--vk-ink); }
.vk-scene-rustig .vk-scene-inner p { color: var(--vk-ink-soft); }
.vk-scene-rustig .vk-scene-inner a { color: var(--vk-red); }

@media (max-width: 760px) {
    .vk-scene { min-height: auto; padding: clamp(56px, 9vh, 90px) 20px; }
    .vk-scene-fotos { grid-template-columns: 1fr; }
}

/* ===== Kopsectie van een inhoudspagina =====
   Vult het hele scherm, zodat een foto als het panorama van Kusadasi met de
   blauwe zee volledig tot zijn recht komt. */
.vk-pagina-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(80px, 12vh, 140px) var(--vk-page-x, 24px);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.vk-pagina-hero > .vk-parallax-bg {
    position: absolute;
    top: -20%; left: 0;
    width: 100%;
    height: 140%;
    background-position: center;
    background-size: cover;
    will-change: transform;
    z-index: -2;
}
/* Lichtere laag dan bij de scènes: de foto mag hier het beeld bepalen, met
   onderaan iets meer donker zodat de overgang naar de pagina rustig verloopt. */
.vk-pagina-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,25,33,0.42) 0%, rgba(11,25,33,0.22) 45%, rgba(11,25,33,0.62) 100%);
    z-index: -1;
}
.vk-pagina-hero-inner { max-width: 860px; }
.vk-pagina-hero-inner h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.08;
    margin: 10px 0 18px;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.vk-pagina-hero-inner p {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.7;
    color: #eef2f4;
    max-width: 62ch;
    margin: 0 auto;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.vk-pagina-hero-pijl {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 20px;
    opacity: .8;
    animation: vk-bounce 1.8s infinite;
}

@media (max-width: 760px) {
    .vk-pagina-hero { min-height: 78svh; }
    .vk-pagina-hero-pijl { display: none; }
}

/* ===== Must-see: rustige, redactionele opmaak =====
   Geen zware fotolagen achter elke tekst, want die botsten met de inhoud.
   In plaats daarvan afwisselend licht en donker, met de film als blikvanger. */

.vk-verhaal {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(56px, 8vw, 110px) var(--vk-page-x, 24px);
    /* Spring je via een link naar deze sectie, dan houdt dit ruimte vrij voor
       de menubalk die bovenaan blijft staan */
    scroll-margin-top: 84px;
}
.vk-verhaal-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
/* Beeld links, tekst rechts bij de even blokken */
.vk-verhaal-gedraaid .vk-verhaal-media { order: -1; }

.vk-verhaal-nummer {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vk-red);
    margin-bottom: 10px;
}
.vk-verhaal h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 16px;
    color: var(--vk-ink);
}
.vk-verhaal p {
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.8;
    color: var(--vk-ink-soft);
    margin: 0 0 16px;
    max-width: 58ch;
}
.vk-verhaal h3 {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 22px 0 8px;
    color: var(--vk-ink);
}
.vk-verhaal ul { color: var(--vk-ink-soft); padding-left: 20px; margin: 0 0 16px; line-height: 1.8; }
.vk-verhaal a { color: var(--vk-red); font-weight: 600; }

/* Donkere variant voor afwisseling */
.vk-verhaal-donker { background: #14181C; }
.vk-verhaal-donker h2, .vk-verhaal-donker h3 { color: #fff; }
.vk-verhaal-donker p, .vk-verhaal-donker ul { color: #b9c2c9; }
.vk-verhaal-donker .vk-verhaal-nummer { color: var(--vk-yellow); }
.vk-verhaal-donker a { color: var(--vk-yellow); }

/* Zandkleurige variant, rustiger dan puur wit */
.vk-verhaal-zand { background: #F7F2E7; }

/* De speler binnen een verhaalblok */
.vk-verhaal-media .vk-speler {
    margin: 0;
    max-width: none;
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}
/* Staande films niet uitrekken: hoger kader, beeld volledig in zicht */
.vk-speler-staand { aspect-ratio: 9 / 14; max-width: 420px; margin-inline: auto; }
.vk-speler-staand video { object-fit: contain; background: #0e1216; }

.vk-verhaal-media .vk-video-duo { gap: 14px; }
.vk-verhaal-media img {
    width: 100%;
    border-radius: var(--hoek, 12px);
    display: block;
    box-shadow: 0 14px 36px rgba(0,0,0,0.18);
}
.vk-verhaal-fotos { display: grid; gap: 14px; }

@media (max-width: 860px) {
    .vk-verhaal-inner { grid-template-columns: 1fr; }
    .vk-verhaal-gedraaid .vk-verhaal-media { order: 0; }
    .vk-speler-staand { max-width: 320px; }
}

/* ===== Parallaxband tussen de verhaalblokken =====
   Een schermbrede foto die trager meebeweegt dan de pagina, met de titel
   eroverheen. Zorgt voor rust en ritme tussen de tekstblokken. */
.vk-band {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: clamp(340px, 62vh, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(50px, 8vh, 90px) var(--vk-page-x, 24px);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.vk-band > .vk-parallax-bg {
    position: absolute;
    top: -22%; left: 0;
    width: 100%;
    height: 144%;
    background-position: center;
    background-size: cover;
    will-change: transform;
    z-index: -2;
}
.vk-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,25,33,0.30), rgba(11,25,33,0.55));
    z-index: -1;
}
.vk-band-inner { max-width: 820px; }
.vk-band-inner span {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vk-yellow);
    margin-bottom: 10px;
}
.vk-band-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.vk-band-inner p {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: #eef2f4;
    max-width: 62ch;
    margin: 0 auto;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

@media (max-width: 760px) {
    .vk-band { min-height: 300px; }
}

/* ===== 2.5D parallaxfoto (Three.js) =====
   Een fotokader waarin de foto meekantelt met de muis en meedrijft tijdens het
   scrollen. De foto staat gewoon als <img> in de HTML; het script legt daar een
   canvas overheen zodra alles geladen is. Werkt dat niet, dan blijft de foto
   staan en ziet de bezoeker een normale afbeelding. */
.vk-parallax3d {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--hoek, 12px);
    background: #0e1216;
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}
.vk-parallax3d img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    box-shadow: none;
    transition: opacity .4s ease;
}
/* Zodra het canvas tekent, de platte foto's laten wegvallen */
.vk-parallax3d-actief img { opacity: 0; }
.vk-parallax3d canvas { position: absolute; inset: 0; z-index: 2; }

/* Twee kaders naast elkaar, met een bijschrift eronder */
.vk-parallax3d-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.6vw, 32px);
    /* De introtekst erboven heeft zelf al ruimte eronder, dus hier weinig extra */
    margin-top: var(--ruimte-s, 14px);
}
.vk-parallax3d-kaart { margin: 0; }

/* De hele kaart is een link naar de bijbehorende sectie op Must-see */
.vk-parallax3d-kaart > a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.vk-parallax3d-kaart > a .vk-parallax3d {
    transition: transform .3s ease, box-shadow .3s ease;
}
.vk-parallax3d-kaart > a:hover .vk-parallax3d,
.vk-parallax3d-kaart > a:focus-visible .vk-parallax3d {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(0,0,0,0.28);
}
.vk-parallax3d-kaart > a:focus-visible {
    outline: 2px solid var(--vk-red);
    outline-offset: 6px;
    border-radius: var(--hoek, 12px);
}
/* Pijltje dat aangeeft dat je kunt doorklikken */
.vk-kaart-pijl {
    font-size: 12px;
    margin-left: 8px;
    color: var(--vk-red);
    display: inline-block;
    transition: transform .25s ease;
}
.vk-parallax3d-kaart > a:hover .vk-kaart-pijl {
    transform: translateX(4px);
}
.vk-parallax3d-kaart figcaption {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vk-ink);
}
.vk-parallax3d-kaart figcaption span {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--vk-ink-soft);
    margin-top: 3px;
}
@media (max-width: 860px) {
    .vk-parallax3d-duo { grid-template-columns: 1fr; }
}

/* Binnen een verhaalblok op Must-see: zelfde breedte als de staande film */
.vk-verhaal-media .vk-parallax3d { max-width: 420px; margin: 0 auto 14px; }
.vk-verhaal-donker .vk-parallax3d-kaart figcaption { color: #fff; }
.vk-verhaal-donker .vk-parallax3d-kaart figcaption span { color: #b9c2c9; }