/**
 * Card Sections — Frontend CSS v5.1.0
 * Apple-style — 100% responsive: mobile / tablet / desktop
 * Compatible: Divi, Elementor, Gutenberg, all themes
 *
 * v5.1.0 — Visual polish pass:
 *  - Refined shadows with layered depth (Apple-style diffusion)
 *  - Smoother cubic-bezier transitions throughout
 *  - Enhanced hover effects with spring-like micro-animations
 *  - Improved modal entrance animation curve
 *  - Better dot/arrow navigation refinement
 *  - Polished S1/S2/S3/S4 card hover states
 *  - Enhanced plus button rotation with shadow bloom
 *  - Section header typography refinement (optimizeLegibility)
 */

/* ── Box sizing + font smoothing reset ── */
.cs-section, .cs-section *,
.cs-modal,   .cs-modal * {
    box-sizing: border-box !important;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Prevent horizontal scrollbar ── */
html:has(.cs-section),
body:has(.cs-section) {
    overflow-x: clip;
}

/* ════════════════════════════════════════
   SECTION
════════════════════════════════════════ */
.cs-section {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 60px 0 52px !important;
    background: #f5f5f7;
    /* overflow: visible so peek-effect works, clip prevents h-scroll */
    overflow: visible !important;
    overflow-x: clip !important;
    margin: 0 !important;
    float: none !important;
    clear: both;
}

@media (min-width:768px) and (max-width:1023px) {
    .cs-section { padding: 52px 0 44px !important; }
}

@media (max-width:767px) {
    .cs-section { padding: 44px 0 40px !important; overflow: visible !important; overflow-x: clip !important; }
}

/* Divi / WP full-width breakout */
.cs-section.cs-fullwidth {
    position: relative !important;
    left:  50% !important;
    right: 50% !important;
    margin-left:  -50vw !important;
    margin-right: -50vw !important;
    width:     100vw !important;
    max-width: 100vw !important;
}

/* ── Inner container — gecentreerd zoals Apple, met max-width ── */
.cs-section__inner {
    display: block !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

@media (max-width:767px) {
    .cs-section__inner { padding-left: 20px !important; padding-right: 0 !important; }
}

@media (min-width:768px) and (max-width:1023px) {
    .cs-section__inner { padding: 0 28px !important; }
}

/* ════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════ */
.cs-section__header {
    display: block !important;
    margin-bottom: 24px !important;
}

@media (max-width:767px) {
    .cs-section__header { margin-bottom: 16px !important; padding-right: 20px !important; }
}

.cs-section__title-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width:767px) {
    .cs-section__title-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
}

.cs-section__title {
    display: block !important;
    font-size: clamp(24px, 3.2vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: #1d1d1f !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-transform: none !important;
    border: none !important;
    background: none !important;
    text-rendering: optimizeLegibility !important;
}

@media (max-width:767px) {
    .cs-section__title { font-size: clamp(20px, 6vw, 28px) !important; }
}

.cs-section__sub {
    display: block !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #6e6e73 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-rendering: optimizeLegibility !important;
}

/* Header link  "Shop Mac ›" */
.cs-section__header-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #0071e3 !important;
    transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) !important;
    flex-shrink: 0 !important;
    padding: 0 0 3px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.cs-section__header-link:hover,
.cs-section__header-link:focus { opacity: .72 !important; transform: translateX(2px) !important; }

.cs-section__header-link-arrow { font-size: 1.2em !important; display: inline-block !important; transition: transform .25s cubic-bezier(.4,0,.2,1) !important; }

.cs-section__header-link--desktop { display: inline-flex !important; }
.cs-section__header-link--mobile  { display: none !important; }

@media (max-width:767px) {
    .cs-section__header-link--desktop { display: none !important; }
    .cs-section__header-link--mobile  { display: inline-flex !important; margin-top: 2px !important; }
}

/* ════════════════════════════════════════
   SLIDER
════════════════════════════════════════ */
.cs-slider-wrap {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.cs-slider {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    position: relative !important;
}

/* Standaard: clip horizontale scroll op section niveau */
.cs-section {
    overflow-x: clip !important;
}

/* S5 met vaste breedte: slider mag buiten sectie komen voor peek effect */
.cs-slider.cs-s5-fixed-w,
.cs-slider-wrap.cs-s5-fixed-w {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Mobile: visible overflow for peek effect */
@media (max-width:767px) {
    .cs-slider { overflow: visible !important; overflow-x: visible !important; }
}

.cs-slider__track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: var(--cs-gap, 12px) !important;
    will-change: transform !important;
    cursor: grab !important;
    touch-action: pan-y !important;
    /* user-select: none only during active drag (JS adds .cs-dragging class) */
    -webkit-user-select: none !important;
    user-select: none !important;
    backface-visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Default transition — JS overrides inline */
    transition: transform 460ms cubic-bezier(.22,.68,0,1) !important;
}

/* ── Text selection on card content — override parent user-select:none ── */
.cs-card__title,
.cs-card__content,
.cs-card__label,
.cs-card__text-overlay,
.cs-card__s3-title,
.cs-card__s3-content,
.cs-card__s3-price,
.cs-card__s3-badge,
/* S4: branches card titel en tekst ook selecteerbaar */
.cs-card__s4-title,
.cs-card__s4-text,
.cs-card__s4-text--top {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Prevent text selection during active drag */
.cs-dragging .cs-card__title,
.cs-dragging .cs-card__content,
.cs-dragging .cs-card__label,
.cs-dragging .cs-card__text-overlay,
.cs-dragging .cs-card__s3-title,
.cs-dragging .cs-card__s3-content,
.cs-dragging .cs-card__s3-price,
.cs-dragging .cs-card__s3-badge,
.cs-dragging .cs-card__s4-title,
.cs-dragging .cs-card__s4-text,
.cs-dragging .cs-card__s4-text--top {
    -webkit-user-select: none !important;
    user-select: none !important;
}

.cs-slider__track:active { cursor: grabbing !important; }

.cs-slide {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    width: var(--cs-card-fixed-w, auto) !important;
    min-width: var(--cs-card-fixed-w, 0) !important;
    max-width: var(--cs-card-fixed-w, none) !important;
}

/* ════════════════════════════════════════
   NAVIGATION — dots + arrows
════════════════════════════════════════ */
.cs-slider-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 18px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

@media (max-width:767px) {
    .cs-slider-nav { margin-top: 14px !important; padding-right: 20px !important; }
}

/* Dots */
.cs-dots {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Desktop: dots hidden (Apple style) */
@media (min-width:1024px) {
    .cs-dots { visibility: hidden !important; pointer-events: none !important; }
}

.cs-dot {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #c7c7cc !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .25s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.34,1.56,.64,1), border-radius .3s cubic-bezier(.34,1.56,.64,1) !important;
    flex-shrink: 0 !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.cs-dot.is-active {
    background: #1d1d1f !important;
    width: 20px !important;
    border-radius: 3px !important;
}

/* Arrows group */
.cs-arrows-group {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Arrow button */
.cs-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d1d1d6 !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 0 rgba(0,0,0,0) !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .2s cubic-bezier(.4,0,.2,1), background .2s cubic-bezier(.4,0,.2,1), opacity .2s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    /* IMPORTANT: pointer-events must be auto */
    pointer-events: auto !important;
}

.cs-arrow svg { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; transition: transform .18s cubic-bezier(.4,0,.2,1) !important; }
.cs-arrow:hover  { border-color: #86868b !important; background: #f5f5f7 !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.cs-arrow:active { transform: scale(.92) !important; background: #e8e8ea !important; }
.cs-arrow:focus-visible { outline: 3px solid #0071e3 !important; outline-offset: 2px !important; }

/* Hidden when at start/end */
.cs-arrow.is-hidden {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: default !important;
    transition: opacity .3s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), background .2s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
}

/* ════════════════════════════════════════
   CARD BASE
════════════════════════════════════════ */
.cs-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    width: 100% !important;
    cursor: pointer !important;
    outline: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: pan-y !important;
    color: inherit !important;
    /* translateZ(0) verwijderd: veroorzaakte GPU flicker tijdens slider drag */
}

.cs-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 0 transparent !important;
    transition: box-shadow .28s cubic-bezier(.4,0,.2,1) !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

.cs-card:hover::after { box-shadow: inset 0 0 0 2.5px rgba(0,113,227,.35) !important; }
.cs-card:focus-visible { box-shadow: 0 0 0 3px #0071e3, 0 0 0 5px rgba(0,113,227,.2) !important; }

/* ════════════════════════════════════════
   S1 CARD — white / text
════════════════════════════════════════ */
.cs-card--s1 {
    background: #ffffff;
    min-height: var(--cs-s1-card-h, 380px) !important;
    transition: box-shadow .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.34,1.2,.64,1) !important;
}

@media (min-width:768px) and (max-width:1023px) { .cs-card--s1 { min-height: var(--cs-s1-card-h, 320px) !important; } }
@media (max-width:767px) { .cs-card--s1 { min-height: var(--cs-s1-card-h, 300px) !important; } }

.cs-card--s1:hover {
    box-shadow:
        0 2px 4px rgba(0,0,0,.04),
        0 8px 16px rgba(0,0,0,.06),
        0 16px 40px rgba(0,0,0,.08) !important;
    transform: translateY(-4px) translateZ(0) !important;
}

.cs-card--s1 .cs-card__body {
    padding: 28px 26px 72px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

@media (max-width:767px) { .cs-card--s1 .cs-card__body { padding: 22px 20px 64px !important; } }

.cs-card__icon { display: block !important; margin: 0 0 16px !important; line-height: 1 !important; }
.cs-card__emoji { display: block !important; font-size: 34px !important; line-height: 1 !important; }
.cs-card__icon svg { display: block !important; width: 38px !important; height: 38px !important; }
.cs-card__icon-img { display: block !important; width: 52px !important; height: 52px !important; object-fit: contain !important; border-radius: 10px !important; }

.cs-card__title {
    display: block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    background: none !important;
    border: none !important;
    text-rendering: optimizeLegibility !important;
}

.cs-card__content {
    display: block !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #3d3d3f !important;
    flex: 1 !important;
    text-align: left !important;
}

.cs-card__content p { margin: 0 0 8px !important; color: inherit !important; font-size: inherit !important; }
.cs-card__content p:last-child { margin-bottom: 0 !important; }
.cs-card__content strong { color: #1d1d1f !important; font-weight: 700 !important; }
.cs-card__content ul, .cs-card__content ol { padding-left: 18px !important; margin: 0 0 8px !important; }

/* ════════════════════════════════════════
   S2 CARD — photo / dark
════════════════════════════════════════ */
.cs-card--s2 {
    background: #1c1c1e !important;
    border-radius: 18px !important;
}

@media (min-width:1024px) {
    .cs-card--s2 { aspect-ratio: 9 / 14.7 !important; min-height: 360px !important; max-height: 580px !important; }
}

@media (min-width:768px) and (max-width:1023px) {
    .cs-card--s2 { aspect-ratio: 9 / 13 !important; min-height: 300px !important; max-height: 480px !important; }
}

@media (max-width:767px) {
    .cs-card--s2 { aspect-ratio: 9 / 14 !important; min-height: 320px !important; border-radius: 16px !important; }
}

.cs-card__bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform .6s cubic-bezier(.22,.68,0,1) !important;
    z-index: 0 !important;
    will-change: transform !important;
    transform: translateZ(0) !important;
}

.cs-card__bg--empty { background: linear-gradient(135deg,#1c1c1e 0%,#2c2c2e 100%) !important; }
.cs-card--s2:hover .cs-card__bg { transform: scale(1.05) translateZ(0) !important; }

.cs-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.18) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    /* FIX: eigen GPU-laag → Safari compositeert overlay altijd samen met bg-laag */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

.cs-card__text-overlay {
    position: relative !important;
    z-index: 2 !important;
    padding: 20px 20px 0 !important;
    pointer-events: none !important;
    text-align: left !important;
    display: block !important;
    /* FIX: eigen GPU-laag → tekst blijft altijd zichtbaar tijdens slider-drag */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

.cs-card__label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: rgba(255,255,255,.82) !important;
    letter-spacing: .01em !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-transform: none !important;
}

.cs-card__title--white {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.35), 0 0 20px rgba(0,0,0,.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    background: none !important;
    border: none !important;
    text-rendering: optimizeLegibility !important;
}

@media (min-width:1024px) { .cs-card__title--white { font-size: 24px !important; } }

/* ════════════════════════════════════════
   PLUS BUTTON
════════════════════════════════════════ */
.cs-card__plus {
    position: absolute !important;
    bottom: 16px !important;
    right:  16px !important;
    width:  38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    padding: 0 !important;
    font-size: 0 !important;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1) !important;
    will-change: transform !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.cs-card__plus svg { display: block !important; flex-shrink: 0 !important; transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important; }
.cs-card:hover .cs-card__plus { transform: rotate(90deg) scale(1.12) translateZ(0) !important; box-shadow: 0 4px 12px rgba(0,0,0,.2) !important; }
.cs-card__plus--dark  { background: #1d1d1f !important; color: #ffffff !important; }
.cs-card__plus--light {
    background: rgba(255,255,255,.20) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.cs-card.has-no-popup .cs-card__plus { display: none !important; }

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.cs-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width:  100% !important;
    height: 100% !important;
    max-width:  none !important;
    max-height: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.cs-modal.is-open { pointer-events: all !important; visibility: visible !important; }

.cs-modal__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    opacity: 0 !important;
    transition: opacity .4s cubic-bezier(.4,0,.2,1) !important;
    cursor: pointer !important;
}

.cs-modal.is-open .cs-modal__overlay {
    opacity: 1 !important;
}

/* Mobile: bottom sheet (default voor s2-s8) */
.cs-modal__box {
    position: absolute !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    will-change: transform !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.08), 0 -16px 56px rgba(0,0,0,.12) !important;
    z-index: 2 !important;
    top: auto !important;
    left:  0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width:      100% !important;
    max-width:  100% !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    transform: translate3d(0,100%,0) !important;
    transition: transform .5s cubic-bezier(.32,.72,0,1) !important;
    margin:  0 !important;
    padding: 0 !important;
    border: none !important;
    touch-action: pan-y !important;
}

.cs-modal.is-open .cs-modal__box { transform: translate3d(0,0,0) !important; }

/* Mobile: gecentreerd — alleen voor s1 */
.cs-modal.cs-modal--s1 .cs-modal__box {
    top:    50% !important;
    left:   50% !important;
    right:  auto !important;
    bottom: auto !important;
    width:  min(92vw,860px) !important;
    max-width: 860px !important;
    border-radius: 22px !important;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,.06),
        0 4px 12px rgba(0,0,0,.06),
        0 24px 60px rgba(0,0,0,.15),
        0 48px 100px rgba(0,0,0,.1) !important;
    transform: translate3d(-50%,-46%,0) scale(.96) !important;
    opacity: 0 !important;
    transition: transform .5s cubic-bezier(.22,.68,0,1), opacity .35s cubic-bezier(.4,0,.2,1) !important;
}

.cs-modal.cs-modal--s1.is-open .cs-modal__box { transform: translate3d(-50%,-50%,0) scale(1) !important; opacity: 1 !important; }

/* Desktop: centered popup */
@media (min-width:768px) {
    .cs-modal__box {
        top:    50% !important;
        left:   50% !important;
        right:  auto !important;
        bottom: auto !important;
        width:  min(90vw,860px) !important;
        max-width: 860px !important;
        max-height: 84vh !important;
        max-height: 84dvh !important;
        border-radius: 26px !important;
        box-shadow:
            0 0 0 0.5px rgba(0,0,0,.06),
            0 4px 12px rgba(0,0,0,.06),
            0 24px 60px rgba(0,0,0,.15),
            0 48px 100px rgba(0,0,0,.1) !important;
        transform: translate3d(-50%,-46%,0) scale(.96) !important;
        opacity: 0 !important;
        transition: transform .5s cubic-bezier(.22,.68,0,1), opacity .35s cubic-bezier(.4,0,.2,1) !important;
    }
    .cs-modal.is-open .cs-modal__box { transform: translate3d(-50%,-50%,0) scale(1) !important; opacity: 1 !important; }
    .cs-modal__close-wrap::before { display: none !important; }
}

@media (min-width:1024px) { .cs-modal__box { max-height: 82vh !important; max-height: 82dvh !important; } }

.cs-modal__box::-webkit-scrollbar       { width: 6px; }
.cs-modal__box::-webkit-scrollbar-track { background: transparent; }
.cs-modal__box::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }
.cs-modal__box::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }

/* Close wrap — sticky inside scrollable box */
.cs-modal__close-wrap {
    position: sticky !important;
    top:   0 !important;
    left:  0 !important;
    right: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 14px 16px 0 !important;
    pointer-events: none !important;
    /* Fade-out gradient so it doesn't block content below */
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,1)  0%,
        rgba(255,255,255,.96) 60%,
        rgba(255,255,255,0)  100%
    ) !important;
    /* Makes the gradient area non-blocking for scroll */
    margin-bottom: -24px !important;
    height: 60px !important;
}

/* Mobile drag handle — inside scrollable box at top */
.cs-modal__close-wrap::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width:  36px !important;
    height: 5px !important;
    background: rgba(0,0,0,.12) !important;
    border-radius: 3px !important;
    display: block !important;
    pointer-events: none !important;
}

.cs-modal__close {
    pointer-events: all !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:  34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(235,235,237,.92) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    color: #3d3d3f !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-size: 0 !important;
    transition: background .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
}

.cs-modal__close svg { display: block !important; flex-shrink: 0 !important; }
.cs-modal__close:hover  { background: #e5e5e7 !important; transform: scale(1.08) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }
.cs-modal__close:active { transform: scale(.94) !important; }
.cs-modal__close:focus-visible { outline: 3px solid #0071e3 !important; outline-offset: 2px !important; }

/* Modal inner content */
.cs-modal__inner {
    display: block !important;
    padding: 20px 28px 40px !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom,0px)) !important;
    text-align: left !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media (min-width:768px) {
    .cs-modal__inner { padding: 16px 52px 48px !important; padding-bottom: calc(48px + env(safe-area-inset-bottom,0px)) !important; }
}

@media (min-width:1024px) {
    .cs-modal__inner { padding: 16px 72px 60px !important; padding-bottom: calc(60px + env(safe-area-inset-bottom,0px)) !important; }
}

.cs-modal__label {
    display: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #6e6e73 !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.cs-modal__label.has-label { display: block !important; }

.cs-modal__title {
    display: block !important;
    font-size: clamp(22px, 5vw, 44px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.022em !important;
    color: #1d1d1f !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    background: none !important;
    border: none !important;
    text-rendering: optimizeLegibility !important;
}

@media (max-width:767px) { .cs-modal__title { margin-bottom: 20px !important; } }

.cs-modal__sections { display: flex !important; flex-direction: column !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; }

.cs-modal__section-box {
    display: block !important;
    background: #f5f5f7 !important;
    border-radius: 16px !important;
    padding: 26px !important;
    text-align: left !important;
}

@media (max-width:767px) { .cs-modal__section-box { padding: 18px 16px !important; border-radius: 12px !important; } }

.cs-modal__body {
    display: block !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.78 !important;
    color: #3d3d3f !important;
}

.cs-modal__body p              { margin: 0 0 14px !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.cs-modal__body p:last-child   { margin-bottom: 0 !important; }
.cs-modal__body strong         { color: #1d1d1f !important; font-weight: 700 !important; }
.cs-modal__body em             { font-style: italic !important; }
.cs-modal__body h2, .cs-modal__body h3 { color: #1d1d1f !important; margin: 20px 0 8px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; }
.cs-modal__body ul, .cs-modal__body ol { padding-left: 22px !important; margin: 0 0 14px !important; }
.cs-modal__body li             { margin-bottom: 6px !important; }
.cs-modal__body a              { color: #0071e3 !important; text-decoration: none !important; transition: color .15s !important; }
.cs-modal__body a:hover        { text-decoration: underline !important; }
.cs-modal__body img            { display: block !important; max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 12px 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}
.cs-modal__body blockquote     { border-left: 4px solid #0071e3 !important; padding-left: 16px !important; margin: 16px 0 !important; color: #555 !important; font-style: italic !important; }
.cs-modal__body hr             { border: none !important; border-top: 1px solid #e0e0e0 !important; margin: 20px 0 !important; }

.cs-section-img-wrap           { display: block !important; margin-top: 16px !important; }
.cs-section-img-wrap img       { display: block !important; max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 0 auto !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* Body lock — inline styles van JS regelen dit (geen race condition mogelijk) */
body.cs-modal-open {
    /* position:fixed / top / overflow worden INLINE via JS gezet
       zodat er nooit een single frame is waarbij de positie verkeerd staat.
       Deze class is alleen voor externe stijl-hooks beschikbaar. */
}

/* SEO popup data — uses HTML `hidden` attribute; browsers hide it, Google crawls it */
.cs-popup-data[hidden] {
    display: none !important;
}

/* ============================================================
   S3 — Apple-stijl productkaart
   - Alleen afbeelding heeft grijze achtergrond
   - Tekst links uitgelijnd zoals Apple
   - Knoppen altijd naast elkaar (flex-row)
   - Bij 1 knop: blijft links staan, niet gecentreerd
   ============================================================ */

.cs-card--s3 {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    cursor: default !important;
    transition: transform .28s cubic-bezier(.34,1.2,.64,1), box-shadow .28s cubic-bezier(.4,0,.2,1) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ── Afbeelding wrapper — basis ── */
.cs-card__s3-img-wrap {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f5f5f7 !important;
    flex-shrink: 0 !important;
}

/* MODUS: contain — transparante afbeelding zwevend op grijze achtergrond (zoals Apple) */
.cs-card--s3-img-contain .cs-card__s3-img-wrap {
    height: 220px !important;
    padding: 28px 24px !important;
}

.cs-card--s3-img-contain .cs-card__s3-img {
    display: block !important;
    max-width: 100% !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transition: transform .4s cubic-bezier(.22,.68,0,1) !important;
}

/* MODUS: cover — foto vult het VOLLEDIGE grijze vlak, geen witte randen */
.cs-card--s3-img-cover .cs-card__s3-img-wrap {
    height: 220px !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.cs-card--s3-img-cover .cs-card__s3-img-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;
}

.cs-card--s3-img-cover .cs-card__s3-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    transition: transform .5s cubic-bezier(.22,.68,0,1) !important;
}

/* Afbeelding klikbaar — contain modus */
.cs-card--s3-img-contain .cs-card__s3-img-wrap a {
    display: block !important;
    line-height: 0 !important;
}

.cs-card__s3-img-wrap a:hover .cs-card__s3-img {
    opacity: 0.9 !important;
    transform: scale(1.03) !important;
}

/* Kleurstipjes — gecentreerd onder afbeelding */
.cs-card__s3-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 16px 0 !important;
}

.cs-card__s3-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Tekstblok — GECENTREERD met Apple-spacing */
.cs-card__s3-body {
    padding: 20px 24px 12px !important;
    text-align: center !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Badge */
.cs-card__s3-badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
}

/* Titel */
.cs-card__s3-title {
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: block !important;
    text-rendering: optimizeLegibility !important;
}

/* Beschrijving */
.cs-card__s3-content {
    line-height: 1.55 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.cs-card__s3-content p {
    margin: 0 0 6px !important;
    text-align: center !important;
}

.cs-card__s3-content p:last-child {
    margin-bottom: 0 !important;
}

/* Prijs — met ruimte boven zoals Apple */
.cs-card__s3-price {
    text-align: center !important;
    margin-top: 16px !important;
    line-height: 1.3 !important;
}

.cs-card__s3-price-prefix {
    opacity: 0.75 !important;
}

/* Afbeelding klikbaar */
.cs-card__s3-img-wrap a {
    display: block !important;
    line-height: 0 !important;
}

.cs-card__s3-img-wrap a:hover .cs-card__s3-img {
    opacity: 0.92 !important;
}

/* ── KNOPPEN — altijd naast elkaar, gecentreerd ── */
.cs-card__s3-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 16px 20px 24px !important;
    flex-wrap: nowrap !important;
    margin-top: auto !important;
}

/* Primaire knop (gevuld pill) */
.cs-card__s3-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    transition: filter .2s cubic-bezier(.4,0,.2,1), opacity .2s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.34,1.56,.64,1) !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    flex-shrink: 0 !important;
}

.cs-card__s3-btn--primary {
    color: #fff !important;
    border-radius: 980px !important;
}

.cs-card__s3-btn--primary:hover {
    filter: brightness(1.1) !important;
    color: #fff !important;
    transform: scale(1.02) !important;
}

.cs-card__s3-btn--primary:active {
    transform: scale(.97) !important;
}

/* Secundaire knop (link-stijl) */
.cs-card__s3-btn--secondary {
    background: transparent !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

.cs-card__s3-btn--secondary:hover {
    opacity: 0.75 !important;
}

/* Admin style picker preview */
.cs-style-s3-preview {
    background: #f5f5f7 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
}

.cs-sp-s3-img {
    font-size: 18px !important;
    line-height: 1 !important;
}

.cs-sp-s3-dots {
    display: flex !important;
    gap: 3px !important;
}

.cs-sp-s3-dots span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #999 !important;
    display: inline-block !important;
}

.cs-sp-s3-btns {
    display: flex !important;
    gap: 4px !important;
    margin-top: 2px !important;
}

.cs-sp-s3-btns span:first-child {
    background: #0071e3 !important;
    color: #fff !important;
    font-size: 7px !important;
    padding: 2px 5px !important;
    border-radius: 10px !important;
}

.cs-sp-s3-btns span:last-child {
    color: #0071e3 !important;
    font-size: 7px !important;
    padding: 2px 0 !important;
}

/* ============================================================
   Tegel-titels zijn span/p/div — geen H-tags (SEO).
   display:block zorgt dat ze als blok-element werken.
   ============================================================ */
.cs-card__title,
.cs-card__s3-title {
    display: block !important;
}

/* ════════════════════════════════════════
   ZOOM FIX — systeem-zoom 100% / 125% / 150%
   Zorgt dat de slider altijd de juiste breedte
   gebruikt via getBoundingClientRect (JS-kant)
   en dat Divi's overflow:hidden geen knipt.
════════════════════════════════════════ */

/* Divi parent containers mogen de slider niet afknippen */
.et_pb_section:has(.cs-section),
.et_pb_row:has(.cs-section),
.et_pb_column:has(.cs-section),
.et_pb_module:has(.cs-section) {
    overflow: visible !important;
    overflow-x: clip !important;
    height: auto !important;
    max-height: none !important;
}

/* Zorgt dat fullwidth sectie altijd 100vw breed is — ook bij zoom */
.cs-section.cs-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Herberekend via JS op elke resize/zoom */
}

/* Slider track mag nooit afgekneden worden */
.cs-slider-wrap,
.cs-slider {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cards behouden hun hoogte bij zoom */
.cs-card--s3 {
    height: 100% !important;
    min-height: 0 !important;
}

/* Padding aanpassing voor grotere schermen */
@media (min-width: 1200px) {
    .cs-section__inner {
        padding: 0 40px !important;
    }
}

@media (min-width: 1600px) {
    .cs-section__inner {
        padding: 0 60px !important;
    }
}
/* ════════════════════════════════════════════════════════
   S4 — BRANCHES / HOVER-REVEAL SLIDER
   Volledig slider-compatible: zelfde gedrag als S1/S2/S3
   Elke .cs-slide is even hoog via align-items:stretch op track
════════════════════════════════════════════════════════ */

/* ── Zorgt dat alle S4 slides even hoog zijn ──
   De track heeft al align-items:stretch globaal.
   De slide zelf moet flex+column zijn zodat de card zich uitstrekt.
   Alle S4 cards (bg EN top) krijgen dezelfde min-height.
── */
.cs-slider--s4 .cs-slide {
    display: block !important;
    align-self: auto !important;
    height: auto !important;
}

/* ── Base card: vult volledige slide hoogte ── */
.cs-card--s4 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: box-shadow .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.34,1.2,.64,1) !important;
    box-sizing: border-box !important;
}

.cs-slider--s4 .cs-card--s4 {
    min-height: var(--cs-s4-card-h-d, 0px) !important;
}

/* Lange tekst mag de card laten meegroeien (geen clipping) */
.cs-card--s4-nohover { height: auto !important; min-height: 0 !important; }

.cs-card--s4-nohover .cs-card__s4-body,
.cs-card--s4-nohover .cs-card__s4-body--top {
    justify-content: flex-start !important;
    overflow: visible !important;
}

.cs-card--s4-hover:hover {
    height: auto !important;
    min-height: 0 !important;
}

.cs-card--s4-hover:hover .cs-card__s4-body,
.cs-card--s4-hover:hover .cs-card__s4-body--top {
    justify-content: flex-start !important;
    overflow: visible !important;
}
@media (min-width: 768px) {
    .cs-card--s4 { min-height: 0 !important; }
}
.cs-card--s4:hover {
    text-decoration: none !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,.06),
        0 8px 16px rgba(0,0,0,.08),
        0 20px 48px rgba(0,0,0,.12) !important;
    transform: translateY(-4px) translateZ(0) !important;
}
@media (max-width: 767px) {
    .cs-card--s4:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .cs-card--s4 {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* ══════════════════════════════════
   BG MODUS — volledige achtergrond
══════════════════════════════════ */
/* BG modus — min-height is nu op .cs-card--s4 (de base) gezet */
.cs-card--s4-bg {
    /* geen aparte min-height nodig — base class regelt dit */
}

.cs-card__s4-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    transition: transform .6s cubic-bezier(.22,.68,0,1) !important;
    will-change: transform !important;
}
.cs-card--s4-bg:hover .cs-card__s4-bg {
    transform: scale(1.06) translateZ(0) !important;
}

.cs-card__s4-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    /* FIX: eigen GPU-laag → overlay blijft altijd gerenderd samen met bg */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* Body (bg modus) — tekst staat onderaan */
.cs-card__s4-body {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    padding: 24px 22px !important;
    /* FIX: eigen GPU-laag → tekst altijd zichtbaar, nooit wegflikkerend */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ══════════════════════════════════
   TOP MODUS — afbeelding bovenaan
══════════════════════════════════ */
.cs-card--s4-top {
    background: #ffffff !important;
}

.cs-card__s4-img-wrap {
    width: 100% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    aspect-ratio: 16 / 10 !important;
    background: #f5f5f7 !important;
}
.cs-card__s4-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .6s cubic-bezier(.22,.68,0,1) !important;
}
.cs-card--s4-top:hover .cs-card__s4-img {
    transform: scale(1.05) translateZ(0) !important;
}

/* Body (top modus) — tekst staat bovenaan */
.cs-card__s4-body--top {
    position: relative !important;
    z-index: 1 !important;
    justify-content: flex-start !important;
    padding: 18px 20px 22px !important;
    flex: 1 1 auto !important;
}

/* ══════════════════════════════════
   TITEL — altijd zichtbaar
══════════════════════════════════ */
.cs-card__s4-title {
    margin: 0 0 16px !important;
    line-height: 1.25 !important;
    transition: transform .35s cubic-bezier(.34,1.2,.64,1), margin-bottom .35s cubic-bezier(.4,0,.2,1) !important;
    text-rendering: optimizeLegibility !important;
}

/* BG: titel schuift iets omhoog bij hover om ruimte te maken */
.cs-card--s4-bg.cs-card--s4-hover:hover .cs-card__s4-title {
    transform: translateY(-6px) translateZ(0) !important;
    margin-bottom: 6px !important;
}
.cs-card__s4-title--top {
    margin-bottom: 0 !important;
    transition: margin-bottom .35s cubic-bezier(.4,0,.2,1) !important;
}
.cs-card--s4-top.cs-card--s4-hover:hover .cs-card__s4-title--top {
    margin-bottom: 4px !important;
}

/* ══════════════════════════════════
   TEKST — hover aan = verborgen → zichtbaar bij hover
          hover uit = altijd zichtbaar
══════════════════════════════════ */
.cs-card__s4-text,
.cs-card__s4-text--top {
    overflow: hidden !important;
    line-height: 1.55 !important;
    margin-top: 0 !important;
    transition: max-height .4s cubic-bezier(.22,.68,0,1),
                opacity .3s cubic-bezier(.4,0,.2,1) .04s,
                margin-top .3s cubic-bezier(.4,0,.2,1) !important;
}

/* HOVER AAN: verborgen standaard */
.cs-card--s4-hover .cs-card__s4-text,
.cs-card--s4-hover .cs-card__s4-text--top {
    max-height: 0 !important;
    opacity: 0 !important;
}
/* HOVER AAN: zichtbaar bij hover */
.cs-card--s4-hover:hover .cs-card__s4-text,
.cs-card--s4-hover:hover .cs-card__s4-text--top {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    overflow: visible !important;
}
/* HOVER UIT: altijd zichtbaar */
.cs-card--s4-nohover .cs-card__s4-text,
.cs-card--s4-nohover .cs-card__s4-text--top {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    overflow: visible !important;
}

/* ══════════════════════════════════
   PIJL — kleur via inline style per card
          hover aan = verborgen → zichtbaar bij hover
          hover uit = altijd zichtbaar
══════════════════════════════════ */
.cs-card__s4-arrow,
.cs-card__s4-arrow--top {
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: max-height .35s cubic-bezier(.22,.68,0,1) .08s,
                opacity .25s cubic-bezier(.4,0,.2,1) .12s,
                margin-top .3s cubic-bezier(.4,0,.2,1) !important;
}
/* HOVER AAN: verborgen */
.cs-card--s4-hover .cs-card__s4-arrow,
.cs-card--s4-hover .cs-card__s4-arrow--top {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}
/* HOVER AAN: zichtbaar bij hover */
.cs-card--s4-hover:hover .cs-card__s4-arrow,
.cs-card--s4-hover:hover .cs-card__s4-arrow--top {
    max-height: 36px !important;
    opacity: 1 !important;
    margin-top: 12px !important;
}
/* HOVER UIT: altijd zichtbaar */
.cs-card--s4-nohover .cs-card__s4-arrow,
.cs-card--s4-nohover .cs-card__s4-arrow--top {
    max-height: 36px !important;
    opacity: 1 !important;
    margin-top: 12px !important;
}

/* mobiel S4 tekst zichtbaar — zie touch fix blok hierboven */

/* ════════════════════════════════════════
   DRAG + HOVER FIX
   Geen flicker/glitch bij slepen of hover op touch
════════════════════════════════════════ */

/*
 * AANPAK:
 * 1. cs-dragging op SECTION gezet door JS bij touchstart
 * 2. pointer-events:none op cards → browser triggert GEEN :hover meer
 * 3. Alle animaties bevroren
 * 4. Overlay/tekst geforceerd zichtbaar
 */
.cs-dragging .cs-card {
    pointer-events: none !important;
}
.cs-dragging .cs-card,
.cs-dragging .cs-card * {
    transition: none !important;
    animation: none !important;
}

/* Overlay altijd zichtbaar tijdens slepen */
.cs-dragging .cs-card__s4-overlay  { opacity: 1 !important; visibility: visible !important; display: block !important; }
.cs-dragging .cs-card__s4-body     { opacity: 1 !important; visibility: visible !important; }
.cs-dragging .cs-card__overlay     { opacity: 1 !important; visibility: visible !important; }
.cs-dragging .cs-card__text-overlay{ opacity: 1 !important; visibility: visible !important; }

/* Geen zoom op achtergrond/foto */
.cs-dragging .cs-card__s4-bg  { transform: none !important; }
/* FIX: transform:none ipv translateZ(0) — overlay heeft nu eigen GPU-laag */
.cs-dragging .cs-card__bg     { transform: none !important; }
.cs-dragging .cs-card__s4-img { transform: none !important; }

/* S4 tekst + pijl geforceerd zichtbaar */
.cs-dragging .cs-card--s4-hover .cs-card__s4-text,
.cs-dragging .cs-card--s4-hover .cs-card__s4-text--top {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    overflow: visible !important;
}
.cs-dragging .cs-card--s4-hover .cs-card__s4-arrow,
.cs-dragging .cs-card--s4-hover .cs-card__s4-arrow--top {
    max-height: 36px !important;
    opacity: 1 !important;
    margin-top: 12px !important;
}

/* S1: geen lift */
.cs-dragging .cs-card--s1 { transform: none !important; box-shadow: none !important; }

/* ════════════════════════════════════════
   IMAGE QUALITY — scherpere afbeeldingen
════════════════════════════════════════ */
.cs-card__bg,
.cs-card__s4-bg,
.cs-card__s3-img,
.cs-card__s4-img,
.cs-card__icon-img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* S2: foto card — betere kleur/contrast */
.cs-card__bg {
    filter: brightness(1.02) saturate(1.05) !important;
}
.cs-card--s2:hover .cs-card__bg {
    filter: brightness(1.02) saturate(1.05) scale(1.05) !important;
}

/* S4: achtergrond afbeelding — scherper contrast */
.cs-card__s4-bg {
    filter: brightness(1.05) saturate(1.08) !important;
}

/* S3: productafbeelding — helderder */
.cs-card__s3-img {
    filter: brightness(1.04) contrast(1.02) !important;
}

/* S1: icon afbeelding — scherper met shadow */
.cs-card__icon-img {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.08)) !important;
}

/* ════════════════════════════════════════
   MOBILE/TABLET (≤1023px): volledig flicker-vrij
   
   OORZAAK FLICKER: iOS herberekent :hover tijdens swipe.
   cs-card--s4-hover verbergt tekst by default (max-height:0).
   Tijdens swipe triggert :hover → tekst flash.
   
   OPLOSSING: 
   1. Alle transitions op S4 cards UITZETTEN op mobile
   2. Tekst/arrow GEFORCEERD zichtbaar, geen animatie
   3. Alle hover-transforms uitzetten
═══════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* Geen transitions op S4 cards — voorkomt elke flash */
    .cs-card--s4,
    .cs-card--s4 * {
        transition: none !important;
        animation: none !important;
    }

    /* S4 tekst + pijl: ALTIJD zichtbaar, GEEN animatie */
    .cs-card--s4-hover .cs-card__s4-text,
    .cs-card--s4-hover .cs-card__s4-text--top,
    .cs-card--s4-nohover .cs-card__s4-text,
    .cs-card--s4-nohover .cs-card__s4-text--top {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 8px !important;
        transition: none !important;
        overflow: visible !important;
    }
    .cs-card--s4-hover .cs-card__s4-arrow,
    .cs-card--s4-hover .cs-card__s4-arrow--top,
    .cs-card--s4-nohover .cs-card__s4-arrow,
    .cs-card--s4-nohover .cs-card__s4-arrow--top {
        max-height: 36px !important;
        opacity: 1 !important;
        margin-top: 12px !important;
        transition: none !important;
    }

    /* Hover-state overrides: geen enkele transform/shadow */
    .cs-card--s1:hover               { box-shadow: none !important; transform: none !important; }
    .cs-card--s2:hover .cs-card__bg  { transform: translateZ(0) !important; }
    .cs-card--s3:hover               { transform: none !important; box-shadow: none !important; }
    .cs-card--s4:hover               { transform: none !important; box-shadow: none !important; }
    .cs-card--s4-bg:hover .cs-card__s4-bg   { transform: none !important; }
    .cs-card--s4-top:hover .cs-card__s4-img { transform: none !important; }
    .cs-card:hover::after            { box-shadow: none !important; }
    .cs-card--s4-bg.cs-card--s4-hover:hover .cs-card__s4-title {
        transform: none !important;
        margin-bottom: 0 !important;
    }

    /* FIX: Op touch-apparaten geen will-change op bg nodig (hover-zoom uitgeschakeld).
       will-change:transform hield bg op aparte GPU-laag → overlay/tekst flashten
       bij slider-drag omdat Safari die lagen apart compositeert. */
    .cs-card__bg {
        will-change: auto !important;
        transition: none !important;
    }

    /* FIX NUCLEAR — S4 BG kaarten op mobile:
       Overlay + body altijd zichtbaar, geen will-change op bg.
       Dit lost de "zwarte overlay + tekst verdwijnt tijdens swipe" bug op
       die veroorzaakt wordt door iOS Safari GPU compositing layer splits. */
    .cs-card__s4-bg {
        will-change: auto !important;
        transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .cs-card__s4-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        /* Zorg dat overlay ALTIJD zichtbaar is, ook vóór eerste paint */
        display: block !important;
    }
    .cs-card__s4-body,
    .cs-card__s4-body--top {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .cs-card__s4-title,
    .cs-card__s4-title--top {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Hover: tekst blijft zichtbaar, geen verandering */
    .cs-card--s4-hover:hover .cs-card__s4-text,
    .cs-card--s4-hover:hover .cs-card__s4-text--top {
        max-height: none !important;
        opacity: 1 !important;
    }
    .cs-card--s4-hover:hover .cs-card__s4-arrow,
    .cs-card--s4-hover:hover .cs-card__s4-arrow--top {
        max-height: 36px !important;
        opacity: 1 !important;
    }
}

/* ════════════════════════════════════════
   S4 — SLIDER NAV
════════════════════════════════════════ */

/* Desktop (>1024px): dots verbergen, alleen > rechts */
@media (min-width: 1024px) {
    .cs-slider-nav--s4 .cs-dots {
        display: none !important;
    }
    .cs-slider-nav--s4 {
        justify-content: flex-end !important;
    }
    .cs-arrows-group--s4-only .cs-arrow--prev {
        display: none !important;
    }
}

/* Mobile/tablet (<1024px): dots links + < > pijlen rechts */
@media (max-width: 1023px) {
    .cs-slider-nav--s4 {
        justify-content: space-between !important;
    }
    .cs-slider-nav--s4 .cs-dots {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .cs-arrows-group--s4-only .cs-arrow--prev {
        display: flex !important;
    }
}

/* ════════════════════════════════════════
   S4 — PIJL OP CARD (zoals S1 plus knop)
   position:absolute rechtsonder op elke card
   Alleen zichtbaar als card een link heeft
════════════════════════════════════════ */
.cs-card__s4-corner-arrow {
    position: absolute !important;
    bottom: 14px !important;
    right:  14px !important;
    width:  32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    padding: 0 !important;
    font-size: 0 !important;
    /* Strak wit met lage opacity — zoals Apple frosted glass */
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    color: #ffffff !important;
    transition: background .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.18) !important;
}
@media (hover: hover) {
    .cs-card--s4:hover .cs-card__s4-corner-arrow {
        background: rgba(255,255,255,.32) !important;
        transform: scale(1.08) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
    }
}
.cs-card__s4-corner-arrow svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: 0.92 !important;
}

/* ════════════════════════════════════════
   S4 — GRID MODUS: meerdere rijen op desktop
════════════════════════════════════════ */
@media (min-width: 1024px) {

    .cs-slider--grid-mode,
    .cs-slider-wrap--grid-mode {
        overflow: visible !important;
    }

    .cs-slider__track--grid {
        display: grid !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-items: unset !important;
        will-change: unset !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        cursor: default !important;
        grid-template-columns: repeat(var(--s4-grid-cols, 3), 1fr) !important;
        grid-auto-rows: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .cs-slider__track--grid > .cs-slide {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-shrink: unset !important;
        flex-grow: unset !important;
    }

    .cs-slider__track--grid > .cs-slide > .cs-card {
        width: 100% !important;
        height: auto !important;
    }
}

/* ════════════════════════════════════════
   S5 / S6 — Apple Editorial & Screenshot
════════════════════════════════════════ */
.cs-card--s5,
.cs-card--s6 {
    background: var(--cs-s56-bg, #ffffff) !important;
    border-radius: var(--cs-s56-r, 18px) !important;
    min-height: var(--cs-s56-h, 300px) !important;
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1) !important;
}

.cs-card--s5:hover,
.cs-card--s6:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.05) !important;
}

.cs-card__s56-media {
    width: 100% !important;
    height: calc(var(--cs-s56-h, 300px) * .74) !important;
    min-height: 230px !important;
    overflow: hidden !important;
    border-radius: var(--cs-s56-r, 18px) !important;
    background: rgba(0,0,0,.03) !important;
    flex-shrink: 0 !important;
}

.cs-card__s56-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: var(--cs-s56-fit, cover) !important;
}

.cs-card__s56-body {
    padding: 18px 18px 20px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cs-card--s5 .cs-card__title,
.cs-card--s6 .cs-card__title {
    font-size: var(--cs-s56-td, 40px) !important;
    margin: 0 !important;
}

.cs-card--s5 .cs-card__content,
.cs-card--s6 .cs-card__content {
    font-size: var(--cs-s56-bd, 17px) !important;
    line-height: 1.5 !important;
}

/* S6 screenshot: net wat meer ruimte zoals Apple cards */
.cs-card--s6 .cs-card__s56-media {
    background: #f5f5f7 !important;
    padding: 16px !important;
}

.cs-card--s6 .cs-card__s56-img {
    border-radius: calc(var(--cs-s56-r, 18px) - 6px) !important;
}

/* S5: eigen afbeeldinghoogte, door admin instelbaar */
.cs-card--s5 .cs-card__s56-media {
    height: var(--cs-s5-media-h, 300px) !important;
    min-height: 140px !important;
}

/* S6: Apple support-card look (tekst boven, beeld onder) */
.cs-card--s6 {
    background: #f5f5f7 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.cs-card--s6 .cs-card__s56-body {
    padding: 20px 20px 10px !important;
}

.cs-card--s6 .cs-card__s56-media {
    height: clamp(170px, 38vw, 260px) !important;
    min-height: 160px !important;
    margin-top: 6px !important;
}

@media (max-width:767px) {
    .cs-card--s5,
    .cs-card--s6 {
        min-height: auto !important;
    }
    .cs-card__s56-media {
        height: min(66vw, 360px) !important;
        min-height: 220px !important;
    }
    .cs-card--s5 .cs-card__s56-media {
        height: min(var(--cs-s5-media-h, 260px), 70vw) !important;
        min-height: 140px !important;
    }
    .cs-card--s6 .cs-card__s56-media {
        height: min(52vw, 220px) !important;
        min-height: 150px !important;
    }
}

/* ════════════════════════════════════════
   S7 — Apple Feature Split / Features Grid
════════════════════════════════════════ */
.cs-card--s7 {
    background: var(--cs-s7-bg, #f5f5f7) !important;
    border-radius: var(--cs-s7-r, 18px) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.cs-card--s7 .cs-card__s7-title {
    font-size: var(--cs-s7-td, var(--cs-s7-title-size, 40px)) !important;
    font-weight: var(--cs-s7-title-weight, 400) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #1d1d1f !important;
    margin: 0 0 10px !important;
}

.cs-card__s7-accent { color: var(--cs-s7-accent, #0071e3) !important; }

.cs-card__s7-subtext {
    margin: 0 0 12px !important;
    color: #3d3d3f !important;
    font-size: var(--cs-s7-bd, 17px) !important;
    line-height: 1.45 !important;
}

.cs-card__s7-body,
.cs-card__s7-body p {
    color: #3d3d3f !important;
    font-size: var(--cs-s7-bd, 17px) !important;
    line-height: 1.6 !important;
}

.cs-card__s7-split {
    display: grid !important;
    grid-template-columns: 60% 40%;
    min-height: 320px !important;
}

.cs-card__s7-media {
    background: rgba(0,0,0,.04) !important;
    min-height: var(--cs-s7-img-h, 260px) !important;
    height: var(--cs-s7-img-h, auto) !important;
}

.cs-card__s7-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--cs-s7-fit, cover) !important;
    display: block !important;
}

.cs-card__s7-content {
    padding: 30px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.cs-card__s7-cta {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: #0071e3 !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

.cs-card__s7-cta:hover { opacity: .78 !important; }

.cs-card__s7-features-wrap { padding: 28px 26px !important; }

.cs-card__s7-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
    margin-top: 8px !important;
}

.cs-card__s7-feature { text-align: left !important; }
.cs-card__s7-feature-icon { font-size: 20px !important; margin-bottom: 6px !important; }
.cs-card__s7-feature-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin: 0 0 4px !important;
}
.cs-card__s7-feature-text {
    font-size: 13px !important;
    color: #3d3d3f !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

@media (max-width:1023px) {
    .cs-card__s7-split { grid-template-columns: 1fr !important; }
    .cs-card__s7-content { padding: 22px 18px !important; }
    .cs-card--s7 .cs-card__s7-title { font-size: var(--cs-s7-tt, 34px) !important; }
    .cs-card--s5 .cs-card__title,
    .cs-card--s6 .cs-card__title { font-size: var(--cs-s56-tt, 32px) !important; }
    .cs-card--s5 .cs-card__content,
    .cs-card--s6 .cs-card__content { font-size: var(--cs-s56-bt, 16px) !important; }
    .cs-card__s7-subtext,
    .cs-card__s7-body,
    .cs-card__s7-body p { font-size: var(--cs-s7-bt, 16px) !important; }
    .cs-card__s7-features { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width:767px) {
    .cs-card--s5 .cs-card__title,
    .cs-card--s6 .cs-card__title { font-size: var(--cs-s56-tm, 27px) !important; }
    .cs-card--s5 .cs-card__content,
    .cs-card--s6 .cs-card__content { font-size: var(--cs-s56-bm, 15px) !important; }
    .cs-card--s7 .cs-card__s7-title { font-size: var(--cs-s7-tm, 28px) !important; }
    .cs-card__s7-subtext { font-size: var(--cs-s7-bm, 15px) !important; }
    .cs-card__s7-body, .cs-card__s7-body p { font-size: var(--cs-s7-bm, 15px) !important; }
    .cs-card__s7-features-wrap { padding: 20px 16px !important; }
    .cs-card__s7-features { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ════════════════════════════════════════
   S4 MOBILE — één definitief blok
   - alle kaarten zelfde hoogte (stretch)
   - volledige achtergrond afbeelding
   - tekst NOOIT afgeknipt (scrollbaar)
   - hover-reveal uitgeschakeld op touch
════════════════════════════════════════ */
@media (max-width:767px) {

    /* Track: stretch zodat alle slides gelijke hoogte krijgen */
    .cs-slider--s4 .cs-slider__track {
        align-items: stretch !important;
        overflow: visible !important;
    }

    /* Slide: vult volledige trackhoogte */
    .cs-slider--s4 .cs-slide {
        display: flex !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: var(--cs-s4-card-h-m, var(--cs-s4-card-h-d, 480px)) !important;
        overflow: visible !important;
    }

    /* Card: vult de slide volledig */
    .cs-slider--s4 .cs-slide > .cs-card--s4 {
        width: 100% !important;
        height: auto !important;
        min-height: var(--cs-s4-card-h-m, var(--cs-s4-card-h-d, 480px)) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        background: #1d1d1f !important;
    }

    /* Achtergrond afbeelding: dekt de volledige kaart */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        will-change: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Overlay: altijd zichtbaar */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Body: in normale flow zodat JS hoogte correct kan meten */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-body,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-body--top {
        position: relative !important;
        z-index: 2 !important;
        padding: 20px 18px 56px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Titel: altijd wit, geen clipping */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-title,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-title--top {
        color: #ffffff !important;
        margin: 0 0 10px !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Tekst: ALTIJD volledig zichtbaar, geen max-height limiet */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-text--top,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-text--top,
    .cs-slider--s4 .cs-card--s4-nohover .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4-nohover .cs-card__s4-text--top {
        display: block !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        color: rgba(255,255,255,.95) !important;
        line-height: 1.52 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
    }

    /* Pijl/arrow: naar rechtsonder */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-corner-arrow {
        bottom: 14px !important;
        right: 14px !important;
        background: rgba(255,255,255,.2) !important;
        border-color: rgba(255,255,255,.28) !important;
        color: #ffffff !important;
    }

    /* Hover-arrow verbergen op touch (geen hover op mobiel) */
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-arrow,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-arrow--top {
        display: none !important;
    }
}
/* ════════════════════════════════════════
   S4 TABLET FIX (768px – 1023px)
   - Slider cards correct hoogte en layout
   - Titel op 1 lijn (branche naam)
   - Tekst altijd zichtbaar, geen hover-reveal
════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1023px) {

    /* Track: stretch zodat alle slides gelijke hoogte krijgen */
    .cs-slider--s4 .cs-slider__track {
        align-items: stretch !important;
        overflow: visible !important;
    }

    /* Slide: vult volledige trackhoogte */
    .cs-slider--s4 .cs-slide {
        display: flex !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: var(--cs-s4-card-h-t, var(--cs-s4-card-h-d, 520px)) !important;
        overflow: visible !important;
    }

    /* Card: vult de slide volledig */
    .cs-slider--s4 .cs-slide > .cs-card--s4 {
        width: 100% !important;
        height: auto !important;
        min-height: var(--cs-s4-card-h-t, var(--cs-s4-card-h-d, 520px)) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    /* Achtergrond afbeelding: dekt de volledige kaart */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        will-change: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Overlay: altijd zichtbaar */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Body: in normale flow */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-body,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-body--top {
        position: relative !important;
        z-index: 2 !important;
        padding: 22px 20px 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Titel: altijd wit, op eigen lijn, extra ruimte eronder */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-title,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-title--top {
        color: #ffffff !important;
        margin: 0 0 18px !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Tekst: ALTIJD volledig zichtbaar op tablet */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-text--top,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-text--top,
    .cs-slider--s4 .cs-card--s4-nohover .cs-card__s4-text,
    .cs-slider--s4 .cs-card--s4-nohover .cs-card__s4-text--top {
        display: block !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        color: rgba(255,255,255,.95) !important;
        line-height: 1.52 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
    }

    /* Pijl/arrow: naar rechtsonder */
    .cs-slider--s4 .cs-card--s4 .cs-card__s4-corner-arrow {
        bottom: 16px !important;
        right: 16px !important;
        background: rgba(255,255,255,.2) !important;
        border-color: rgba(255,255,255,.28) !important;
        color: #ffffff !important;
    }

    /* Hover-arrow verbergen op tablet (geen hover op touch) */
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-arrow,
    .cs-slider--s4 .cs-card--s4-hover .cs-card__s4-arrow--top {
        display: none !important;
    }
}

/* ════════════════════════════════════════
   S1 — GRID MODUS (desktop only)
   Op tablet/mobiel altijd slider via JS
════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* Wrap: geen overflow clip, anders snijdt het grid af */
    .cs-slider-wrap--s1-grid {
        overflow: visible !important;
        overflow-x: visible !important;
    }
    .cs-slider--s1-grid {
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
    }

    /* Section + inner: geen overflow clip zodat grid niet wordt afgeknipt */
    .cs-section--s1-grid,
    .cs-section--s1-grid .cs-section__inner {
        overflow: visible !important;
        overflow-x: visible !important;
    }

    /* Track: echte CSS grid, volledig binnen de container */
    .cs-slider__track--s1-grid {
        display: grid !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-items: stretch !important;
        will-change: unset !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        cursor: default !important;
        grid-template-columns: repeat(var(--cs-s1-cols, 3), 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        /* Links uitlijnen standaard */
        justify-content: start !important;
        justify-items: stretch !important;
    }

    /* Gecentreerde variant via data-align attribuut */
    .cs-slider__track--s1-grid[data-align="center"] {
        justify-content: center !important;
        /* Vaste kolombreedte zodat laatste rij ook centreert */
        grid-template-columns: repeat(var(--cs-s1-cols, 3), minmax(0, 1fr)) !important;
    }

    /* Slides: alle slider-specifieke breedte props verwijderen */
    .cs-slider__track--s1-grid > .cs-slide {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-shrink: unset !important;
        flex-grow: unset !important;
        box-sizing: border-box !important;
    }

    /* Cards: volledige cel breedte/hoogte */
    .cs-slider__track--s1-grid > .cs-slide > .cs-card--s1 {
        width: 100% !important;
        height: 100% !important;
        min-height: var(--cs-s1-card-h, 0) !important;
        box-sizing: border-box !important;
    }

    /* Nav volledig verbergen in grid modus */
    .cs-slider-wrap--s1-grid ~ .cs-slider-nav {
        display: none !important;
    }
}

/* S1 vaste hoogte via CSS variabele (slider én grid) */
@media (min-width: 768px) and (max-width: 1023px) {
    .cs-slider .cs-card--s1 { min-height: var(--cs-s1-card-h, 320px) !important; }
}
@media (max-width: 767px) {
    .cs-slider .cs-card--s1 { min-height: var(--cs-s1-card-h, 300px) !important; }
}

/* ════════════════════════════════════════
   S1 — ICON / IMAGE CONSISTENTE GROOTTE
   Vaste container zodat alle icons gelijk zijn
════════════════════════════════════════ */
.cs-card--s1 .cs-card__icon {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 16px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
.cs-card--s1 .cs-card__icon svg {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.cs-card--s1 .cs-card__icon-img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: left center !important;
    flex-shrink: 0 !important;
    display: block !important;
    border-radius: 0 !important;
}
.cs-card--s1 .cs-card__emoji {
    font-size: 34px !important;
    line-height: 1 !important;
    display: block !important;
}

/* ════════════════════════════════════════
   S8 — 2 S5-kaarten naast elkaar als 1 slide
════════════════════════════════════════ */

/* De slider-wrap mag NIET clippen voor S8 */
.cs-slider--s8 {
    overflow: visible !important;
}
.cs-slider--s8 .cs-slider__track {
    overflow: visible !important;
}

/* Elke S8-slide = volledige breedte, geen margin/padding */
.cs-slide--s8-pair {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Het grid: 2 gelijke kolommen, kleine gap */
.cs-s8-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

/* De S5-kaarten binnen S8 grid: reset min-height zodat grid werkt */
.cs-s8-grid > .cs-card--s5 {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Mobiel: onder elkaar */
@media (max-width: 767px) {
    .cs-s8-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   S5 Apple-modus: grote gelijke afbeeldingen op desktop (≥1024px)
   Geïnspireerd op apple.com/nl/macbook-air/
   ───────────────────────────────────────────────────────────────── */

/* Wrapper */
.cs-slider-wrap--s5-apple {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Slider */
.cs-slider--s5-apple {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Track: align top zodat kortere cards niet uitrekken */
.cs-slider--s5-apple .cs-slider__track {
    align-items: flex-start !important;
}

/* Slide */
.cs-slider--s5-apple .cs-slide {
    display: flex !important;
    flex-direction: column !important;
}

/* De card: geen flex-stretch, hoogte bepaald door inhoud */
.cs-slider--s5-apple .cs-card--s5 {
    display: flex !important;
    flex-direction: column !important;
    flex: unset !important;
    width: 100% !important;
    border-radius: var(--cs-s56-r, 18px) !important;
    overflow: hidden !important;
}

/* Desktop + tablet: instelbare afbeelding hoogte via CSS variabelen */
@media (min-width: 768px) {
    .cs-slider--s5-apple .cs-card--s5 .cs-card__s56-media {
        height: var(--cs-s5-apple-h, 420px) !important;
        width: var(--cs-s5-apple-w, 100%) !important;
        padding-bottom: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .cs-slider--s5-apple .cs-card--s5 .cs-card__s56-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    .cs-slider--s5-apple .cs-card--s5 .cs-card__s56-body {
        padding: 20px 24px 24px !important;
        flex: unset !important;
    }
}

/* Mobiel (≤767px): volledig ongewijzigd — geen apple-modus regels */