@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Cursor reset: voorkom Flatsome live-search/gallery cursor op de configurator-pagina.
   Alleen van toepassing op pagina's met de body class 'sc-configurator-page',
   zodat we geen invloed hebben op de rest van de site. */
body.sc-configurator-page { cursor: default !important; }
body.sc-configurator-page html { cursor: default !important; }

/* ============================================================
   DEFINITIEVE ZOOM/GALLERY BLOKKADE
   Flatsome initialiseert WC product gallery op elke pagina
   met een product_id in de context. Dit zet een lens-effect
   (regenboog overlay) op de pagina via background/gradient.
   ============================================================ */

/* Blokkeer het lens/zoom overlay element dat Flatsome maakt */
.zoomContainer,
.zoomWindow,
.zoomLens,
.zoomOverlay,
.zoom-overlay,
img.zoomImg {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Blokkeer WC gallery on the configurator */
.sc-wrap ~ .woocommerce-product-gallery,
body:has(.sc-wrap) .woocommerce-product-gallery {
    display: none !important;
}

/* ── Flatsome container overrides voor configurator pagina ── */
body:has(.sc-wrap) #main,
body:has(.sc-wrap) .main-container,
body:has(.sc-wrap) #content,
body:has(.sc-wrap) .row-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Verberg Flatsome sidebar/row padding */
body:has(.sc-wrap) .row {
    max-width: 100% !important;
}
/* sc-wrap zelf krijgt de beperkte breedte */
body:has(.sc-wrap) .sc-wrap {
    max-width: var(--sc-wrap-max, 1100px) !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 600px) {
    body:has(.sc-wrap) .sc-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Blokkeer inline background-image die jQuery.zoom zet op body/div */
body.sc-wrap-active .zoomContainer { display: none !important; }
body:has(.sc-wrap) { cursor: default !important; }
html:has(.sc-wrap) { cursor: default !important; }
.sc-wrap,
.sc-wrap * { cursor: default !important; }
.sc-wrap .sc-row,
.sc-wrap .sc-row * { cursor: pointer !important; }
.sc-wrap .sc-row__img,
.sc-wrap .sc-row__img * { cursor: default !important; }
.sc-wrap .sc-btn,
.sc-wrap a,
.sc-wrap button { cursor: pointer !important; }

/* =============================================================
   SCOOTERCENTER KERS – Configurator CSS (accordion stijl)
   ============================================================= */

:root {
    --sc-yellow:      #f9b90f;
    --sc-yellow-dark: #e6a800;
    --sc-black:       #0b0b0b;
    --sc-white:       #ffffff;
    --sc-bg:          #f7f6f3;
    --sc-border:      #e8e4dc;
    --sc-text:        #1a1a1a;
    --sc-muted:       #888;
    --sc-radius:      10px;
    --sc-font:        'Inter', 'Montserrat', sans-serif;
}

/* ── Pagina hero ── */
.sc-page-hero {
    background: linear-gradient(135deg, var(--sc-yellow) 0%, var(--sc-yellow-dark) 100%);
    padding: 32px 20px 28px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.sc-page-hero__inner {
    max-width: 80%;
    margin: 0 auto;
}

.sc-page-hero__sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(0,0,0,.6);
    margin: 0 0 6px;
}

.sc-page-hero__title {
    font-size: 28px;
    font-weight: 900;
    color: var(--sc-black);
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.15;
}

@media (max-width: 900px) {
    .sc-page-hero__title { font-size: 22px; }
    .sc-page-hero__inner { max-width: 100%; }
}

@media (max-width: 600px) {
    .sc-page-hero { padding: 20px 5px 18px; }
    .sc-page-hero__title { font-size: 18px; }
    .sc-page-hero__sub { font-size: 10px; }
}

/* ── Wrap ── */
.sc-wrap {
    padding: 24px 16px 160px;
    max-width: 80%;
    margin: 0 auto;
    font-family: var(--sc-font);
}

@media (max-width: 600px) {
    .sc-wrap {
        max-width: 100%;
        padding: 16px 5px 160px;
    }
}

/* ── Layout ── */
.sc-layout {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 40px;
    align-items: start;
}

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.sc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sc-page-header__step {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sc-muted);
}

.sc-back-link {
    font-size: 12px;
    color: var(--sc-muted);
    text-decoration: none;
    font-weight: 600;
}
.sc-back-link:hover { color: var(--sc-black); }

/* ═══════════════════════════════════════
   ACCORDION
═══════════════════════════════════════ */
.sc-accordion {
    border-top: 1px solid var(--sc-border);
}

.sc-accordion-item {
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-white);
}

/* Header */
.sc-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

.sc-accordion-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sc-accordion-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--sc-muted);
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}

.sc-accordion-item.is-open .sc-accordion-num {
    background: var(--sc-yellow);
    border-color: var(--sc-yellow);
    color: var(--sc-black);
}

.sc-accordion-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--sc-black);
    letter-spacing: -.01em;
}

.sc-accordion-item.is-closed .sc-accordion-title {
    color: var(--sc-muted);
    font-weight: 600;
}

/* Gekozen label naast titel */
.sc-accordion-chosen {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-yellow-dark);
    background: rgba(249,185,15,.12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.sc-accordion-arrow {
    font-size: 20px;
    color: var(--sc-muted);
    transform: rotate(90deg);
    transition: transform .2s;
    flex-shrink: 0;
    line-height: 1;
}

.sc-accordion-item.is-open .sc-accordion-arrow {
    transform: rotate(-90deg);
    color: var(--sc-black);
}

/* Body */
.sc-accordion-body {
    display: none;
    padding-bottom: 8px;
}

.sc-accordion-item.is-open .sc-accordion-body {
    display: block;
}

/* ═══════════════════════════════════════
   OPTIE-RIJEN
═══════════════════════════════════════ */
.sc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--sc-border);
    cursor: pointer;
    transition: background .15s;
    border-radius: 4px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
}

.sc-row:hover {
    background: var(--sc-bg);
}

.sc-row.is-selected {
    background: #fffbee;
}

/* Indicator: radio cirkel of checkbox */
.sc-row__indicator {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
}

.sc-row--checkbox .sc-row__indicator {
    border-radius: 5px;
}

.sc-row.is-selected .sc-row__indicator {
    border-color: var(--sc-yellow);
    background: var(--sc-yellow);
}

.sc-row__dot {
    display: none;
}

/* Radio: gevulde binnenste cirkel */
.sc-row--radio.is-selected .sc-row__dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc-black);
}

/* Checkbox: vinkje */
.sc-row--checkbox.is-selected .sc-row__dot {
    display: block;
    width: 6px;
    height: 11px;
    border: 2.5px solid var(--sc-black);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    border-radius: 1px;
}

/* Body: naam + prijs */
.sc-row__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.sc-row__label {
    font-size: 14px;
    color: var(--sc-black);
    line-height: 1.3;
}

.sc-row.is-selected .sc-row__label {
    font-weight: 700;
}

.sc-row__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--sc-black);
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-row__price del {
    font-weight: 400;
    color: #bbb;
    font-size: 12px;
    margin-right: 3px;
}

/* Afbeelding */
.sc-row__img {
    flex-shrink: 0;
    width: 48px;
}

.sc-row__img img {
    width: 48px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}

/* ═══════════════════════════════════════
   NAV KNOPPEN
═══════════════════════════════════════ */
.sc-step-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 0 8px;
}

.sc-btn {
    padding: 6px 14px;
    border-radius: var(--sc-radius);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-family: var(--sc-font);
}

.sc-btn--primary {
    background: linear-gradient(135deg, var(--sc-yellow), var(--sc-yellow-dark));
    color: var(--sc-black);
    box-shadow: 0 4px 14px rgba(249,185,15,.3);
}

.sc-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249,185,15,.4);
}

.sc-btn--outline {
    background: transparent;
    color: var(--sc-muted);
    border-color: var(--sc-border);
}

.sc-btn--outline:hover {
    border-color: #aaa;
    color: var(--sc-black);
}

/* ═══════════════════════════════════════
   SIDEBAR (desktop)
═══════════════════════════════════════ */
.sc-sidebar {
    position: sticky;
    top: 100px;
}

.sc-sidebar-inner {
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

.sc-sidebar-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sc-muted);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sc-border);
}

.sc-summary-product {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 14px;
}

.sc-summary-product img {
    width: 64px;
    height: 46px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--sc-bg);
    padding: 4px;
}

.sc-summary-product__info strong {
    font-size: 12px;
    font-weight: 800;
    display: block;
    margin-bottom: 3px;
    color: var(--sc-black);
    line-height: 1.3;
}

.sc-summary-product__price {
    font-size: 14px;
    font-weight: 800;
    color: var(--sc-black);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sc-rijklaar-label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
}

.sc-rijklaar-info {
    font-size: 10px;
    color: #aaa;
    line-height: 1.4;
    margin-top: 4px;
}

.sc-summary-product__price del {
    font-weight: 400;
    color: #bbb;
    font-size: 11px;
    margin-right: 3px;
}

/* Summary lijnen */
.sc-summary-lines {
    margin-bottom: 14px;
    min-height: 20px;
}

.sc-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}

.sc-summary-line:last-child { border-bottom: none; }
.sc-summary-line__label { color: var(--sc-muted); flex: 1; }
.sc-summary-line__price { font-weight: 800; color: var(--sc-black); white-space: nowrap; }

/* Sub-header per groep in het overzicht */
.sc-summary-group {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sc-muted);
    padding: 10px 0 4px;
    border-bottom: none;
}
.sc-summary-group:first-child {
    padding-top: 0;
}

/* Totaalrij */
.sc-summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;
    font-weight: 900;
    color: var(--sc-black);
    padding: 10px 0 2px;
    border-top: 2px solid var(--sc-border);
}

.sc-summary-vat {
    font-size: 11px;
    color: var(--sc-muted);
    margin-bottom: 14px;
}

/* Betaalrijen */
.sc-pay-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sc-text);
    padding: 6px 0;
    border-top: 1px dashed #eee;
}

.sc-pay-row img {
    height: 14px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sc-pay-row strong {
    color: var(--sc-black);
    font-weight: 800;
}

/* Sidebar actieknop */
.sc-sidebar-action {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
}

.sc-back-to-product {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: var(--sc-muted);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sc-back-to-product:hover { color: var(--sc-black); }

/* ═══════════════════════════════════════
   MOBIELE BALK (fixed onderaan)
═══════════════════════════════════════ */
.sc-mobile-bar {
    display: none;
}

@media (max-width: 900px) {

    .sc-layout {
        grid-template-columns: 1fr;
    }

    .sc-sidebar {
        display: none !important;
    }

    .sc-wrap {
        padding-bottom: 80px;
    }

    .sc-mobile-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--sc-white);
        border-top: 3px solid var(--sc-yellow);
        box-shadow: 0 -4px 20px rgba(0,0,0,.18);
    }

    /* Overzicht bovenste deel */
    .sc-mobile-bar__overview {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .sc-mobile-bar__product {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .sc-mobile-bar__product img {
        width: 44px;
        height: 34px;
        object-fit: contain;
        border-radius: 4px;
        background: var(--sc-bg);
        padding: 2px;
        flex-shrink: 0;
    }

    .sc-mobile-bar__name {
        font-size: 11px;
        font-weight: 700;
        color: var(--sc-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }

    .sc-mobile-bar__total {
        font-size: 20px;
        font-weight: 900;
        color: var(--sc-black);
        letter-spacing: -.02em;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Betaal info rechts */
    .sc-mobile-bar__payments {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex-shrink: 0;
    }

    .sc-mobile-bar__in3,
    .sc-mobile-bar__spraypay {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: var(--sc-muted);
        white-space: nowrap;
    }

    .sc-mobile-bar__in3 img,
    .sc-mobile-bar__spraypay img {
        height: 10px;
        width: auto;
        object-fit: contain;
    }

    .sc-mobile-bar__in3 strong,
    .sc-mobile-bar__spraypay strong {
        color: var(--sc-black);
        font-weight: 800;
    }

    /* Actieknop */
    .sc-mobile-bar__btn {
        display: block;
        width: 100%;
        padding: 10px 16px;
        background: linear-gradient(135deg, var(--sc-yellow), var(--sc-yellow-dark));
        color: var(--sc-black);
        font-family: var(--sc-font);
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
        border: none;
        cursor: pointer;
        transition: opacity .15s;
    }

    .sc-mobile-bar__btn:active {
        opacity: .85;
    }

    /* Compact accordion op mobiel */
    .sc-accordion-title { font-size: 14px; }
    .sc-row__label { font-size: 13px; }
    .sc-row__price { font-size: 13px; }
    .sc-row__img { width: 40px; }
    .sc-row__img img { width: 40px; height: 30px; }
}

/* ═══════════════════════════════════════
   GROEPEN BINNEN EEN STAP
═══════════════════════════════════════ */
.sc-step-page { animation: scFadeIn .2s ease; }
@keyframes scFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.sc-step-header { margin-bottom: 20px; }
.sc-step-header__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sc-step-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sc-muted);
}
.sc-step-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--sc-black);
    margin: 0 0 8px;
    letter-spacing: -.02em;
}
.sc-step-intro {
    font-size: 13px;
    color: var(--sc-muted);
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Groep – lijst stijl */
.sc-group { margin-bottom: 24px; }

.sc-group__list-header {
    padding: 14px 0 10px;
    border-bottom: 2px solid var(--sc-border);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sc-group__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sc-black);
    text-transform: none;
}
.sc-group--list .sc-group__desc,
.sc-group--cards .sc-group__desc,
.sc-group--grid .sc-group__desc {
    font-size: 13px;
    color: var(--sc-muted);
    line-height: 1.55;
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
}

.sc-group__header-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.sc-group__header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.sc-group__body--open { display: block; }

/* ── Display: cards ── */
/* Iedere optie krijgt meer ademruimte, eigen kaart-vorm */
.sc-group--cards .sc-group__body--open {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-group--cards .sc-row {
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0;
    transition: border-color .15s, box-shadow .15s;
}
.sc-group--cards .sc-row:hover {
    border-color: var(--sc-primary);
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.sc-group--cards .sc-row.is-selected {
    border-color: var(--sc-primary);
    background: var(--sc-bg-soft, #fff8f3);
}

/* ── Display: grid ── */
/* Opties naast elkaar in een raster, ideaal voor visuele keuze met afbeelding */
.sc-group--grid .sc-group__body--open {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.sc-group--grid .sc-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 14px;
    margin: 0;
    cursor: pointer;
}
.sc-group--grid .sc-row:hover {
    border-color: var(--sc-primary);
}
.sc-group--grid .sc-row.is-selected {
    border-color: var(--sc-primary);
    background: var(--sc-bg-soft, #fff8f3);
}
.sc-group--grid .sc-row__img {
    order: 0;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 120px;
    height: auto;
    aspect-ratio: 1;
}
.sc-group--grid .sc-row__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sc-group--grid .sc-row__indicator {
    position: absolute;
    top: 8px;
    right: 8px;
}
.sc-group--grid .sc-row__body {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sc-group--grid .sc-row__title-line {
    justify-content: center;
}
.sc-group--grid .sc-row {
    position: relative;
}

/* ── Algemeen: groep-titel altijd duidelijk zichtbaar ── */
.sc-group__list-header,
.sc-group--cards > .sc-group__list-header,
.sc-group--grid > .sc-group__list-header {
    margin-bottom: 12px;
}

/* Groep – accordion stijl */
.sc-group--accordion {
    /* Geen border om de hele groep — gebruik dezelfde stijl als list-header */
    margin-bottom: 24px;
    overflow: hidden;
}

.sc-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Zelfde padding-links als sc-group__list-header (0) zodat titels uitlijnen */
    padding: 14px 0 10px;
    cursor: pointer;
    background: transparent;
    user-select: none;
    gap: 8px;
    border-bottom: 2px solid var(--sc-border);
}

.sc-group__header .sc-group__name {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--sc-black);
}

.sc-group__header:hover {
    background: transparent;
    /* Subtiele hint dat het klikbaar is via cursor + arrow rotation */
}
.sc-group__header:hover .sc-group__arrow {
    color: var(--sc-primary);
}

.sc-group--accordion.is-open .sc-group__header {
    /* In open staat: dezelfde border-bottom blijft staan */
    border-bottom: 2px solid var(--sc-border);
}

.sc-group__chosen-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-yellow-dark);
    background: rgba(249,185,15,.12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.sc-group__arrow {
    font-size: 20px;
    color: var(--sc-muted);
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .2s;
}
.sc-group--accordion.is-open .sc-group__arrow { transform: rotate(90deg); }

/* Accordion body: verborgen tenzij open */
.sc-group--accordion .sc-group__body { display: none; padding: 4px 0; }
.sc-group--accordion.is-open .sc-group__body { display: block; }

/* Accordion + cards: uitgeklapte body krijgt cards styling */
.sc-group--accordion-cards.is-open .sc-group__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}
.sc-group--accordion-cards .sc-row {
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    transition: border-color .15s, box-shadow .15s;
}
.sc-group--accordion-cards .sc-row:hover {
    border-color: var(--sc-primary);
}
.sc-group--accordion-cards .sc-row.is-selected {
    border-color: var(--sc-primary);
    background: var(--sc-bg-soft, #fff8f3);
}

/* Accordion + grid: uitgeklapte body krijgt grid styling */
.sc-group--accordion-grid.is-open .sc-group__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 12px 0;
}
.sc-group--accordion-grid .sc-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 14px;
    margin: 0;
    cursor: pointer;
    position: relative;
}
.sc-group--accordion-grid .sc-row:hover {
    border-color: var(--sc-primary);
}
.sc-group--accordion-grid .sc-row.is-selected {
    border-color: var(--sc-primary);
    background: var(--sc-bg-soft, #fff8f3);
}
.sc-group--accordion-grid .sc-row__img {
    order: 0;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 120px;
    aspect-ratio: 1;
}
.sc-group--accordion-grid .sc-row__indicator {
    position: absolute;
    top: 8px;
    right: 8px;
}
.sc-group--accordion-grid .sc-row__body {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sc-group--accordion-grid .sc-row__title-line {
    justify-content: center;
}

/* Beschrijving */
.sc-group__desc {
    font-size: 13px;
    color: var(--sc-muted);
    line-height: 1.5;
    padding: 10px 16px;
    background: var(--sc-bg);
    border-bottom: 1px solid var(--sc-border);
}
.sc-group--list .sc-group__desc {
    padding: 6px 0 10px;
    background: none;
    border: none;
}

/* Opties in accordion: zelfde inspringing als list */
.sc-group--accordion .sc-row {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    margin: 0;
    border-top: 1px solid var(--sc-border);
    border-bottom: none;
}
.sc-group--accordion .sc-row:first-of-type { border-top-color: transparent; }

/* ── Optie tekst + bullets ── */
.sc-row__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.sc-row__body {
    align-items: flex-start; /* override zodat bullets goed uitlijnen */
}

.sc-row__bullets {
    margin: 2px 0 0 0;
    padding-left: 14px;
    list-style: disc;
    font-size: 12px;
    color: var(--sc-muted);
    line-height: 1.5;
}

.sc-row__bullets li {
    margin-bottom: 1px;
}

/* Als er bullets zijn, prijs rechts-boven uitlijnen */
.sc-row:has(.sc-row__bullets) .sc-row__price {
    align-self: flex-start;
    padding-top: 1px;
}

/* ── Optie afbeelding: hover + lightbox ── */
.sc-row__img {
    cursor: default;
    position: relative;
}

.sc-row__img img {
    transition: transform .2s, box-shadow .2s;
    border-radius: 4px;
}

.sc-row__img:hover img {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 2;
}


/* ── Conditionele groepen: verborgen tenzij conditie voldaan ── */
.sc-group--conditional {
    display: none;
}
.sc-group--conditional.sc-cond-visible {
    display: block !important;
}

/* ── Uitvoering badges (snor/brom) ── */
.sc-uitvoering-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: lowercase;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.sc-uitvoering-badge--snor {
    background: #1a56db;
    color: #fff;
    border-color: #1a56db;
}

.sc-uitvoering-badge--brom {
    background: #f9e000;
    color: #000;
    border-color: #d4bc00;
}

.sc-row__badge {
    flex-shrink: 0;
    margin-left: 8px;
}

/* Vergroot badge iets bij geselecteerde rij */
.sc-row.is-selected .sc-uitvoering-badge {
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ── Aanrader badge ── */
.sc-row__title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.sc-row__aanrader {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #ff6b35;
    color: #fff;
    margin-left: 7px;
    flex-shrink: 0;
    vertical-align: middle;
    white-space: nowrap;
}


/* ── Direct afrekenen knop ── */
.sc-btn--direct-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 7px 20px !important;
    background: #1a1a1a;
    color: #fff;
    border: 1.5px solid #1a1a1a;
    border-radius: 12px;
    font-size: 12px !important;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: center;
    letter-spacing: .01em;
}
.sc-btn--direct-checkout:hover {
    background: #333;
    border-color: #333;
}

/* ═══════════════════════════════════════
   MOBIELE NAV-KNOPPEN
═══════════════════════════════════════ */
@media (max-width: 600px) {
    .sc-step-nav {
        flex-direction: column-reverse;
        gap: 6px;
    }
    .sc-step-nav .sc-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 14px;
        font-size: 11px;
    }
    .sc-btn--outline {
        order: 2;
    }
    .sc-btn--primary {
        order: 1;
    }
}

/* Optie-afbeelding klikbaar */
.sc-row__img img { cursor: zoom-in; }

/* =============================================================
   PAKKETTEN (display: packages) – sinds 1.12.0
   Grote kaarten met voordelen, pakketinhoud, prijsopbouw en foto's.
   Werkt voor handmatige groepen en variatie-groepen (snor/brom).
   ============================================================= */
/* Groepsbeschrijving boven pakketten: geen kader */
.sc-group--packages .sc-group__desc {
    font-size: 13px;
    color: var(--sc-muted);
    line-height: 1.55;
    margin: 0 0 2px;
    padding: 0;
    background: none;
    border: none;
}

.sc-group--packages .sc-group__body--open,
.sc-group--packages .sc-variation-rows--packages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sc-group--accordion.sc-group--packages.is-open .sc-group__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.sc-wrap .sc-row.sc-pkg {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--sc-white);
    border: 2px solid var(--sc-border);
    border-top: 2px solid var(--sc-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    outline: none;
}
.sc-wrap .sc-row.sc-pkg:first-of-type { border-top-color: var(--sc-border); }
.sc-wrap .sc-row.sc-pkg:hover {
    background: var(--sc-white);
    border-color: var(--sc-yellow);
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
}
.sc-wrap .sc-row.sc-pkg:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
.sc-wrap .sc-row.sc-pkg.is-selected {
    background: var(--sc-white);
    border-color: var(--sc-yellow);
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.sc-wrap .sc-row.sc-pkg.sc-pkg--recommended:not(.is-selected) {
    border-color: var(--sc-yellow-dark);
    border-style: dashed;
}

/* Kop */
.sc-pkg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    transition: background .18s;
}
.sc-pkg.is-selected .sc-pkg__head {
    background: linear-gradient(135deg, var(--sc-yellow) 0%, var(--sc-yellow-dark) 100%);
}
.sc-pkg__head-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}
.sc-pkg__title {
    font-family: var(--sc-font);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--sc-black);
}
.sc-pkg__badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.sc-pkg__badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sc-pkg__badge small {
    font-size: 11px;
    font-weight: 600;
    opacity: .75;
}
.sc-pkg__badge del {
    font-weight: 500;
    opacity: .6;
}
.sc-pkg__badge--rec {
    background: var(--sc-black);
    color: var(--sc-white);
}
.sc-pkg__badge--price {
    background: #eaf7ee;
    border-color: #cbe9d4;
    color: #17703a;
}
.sc-pkg__badge--included {
    background: var(--sc-bg);
    border-color: var(--sc-border);
    color: #555;
}
.sc-pkg.is-selected .sc-pkg__badge--price,
.sc-pkg.is-selected .sc-pkg__badge--included {
    background: rgba(255,255,255,.85);
    border-color: transparent;
    color: var(--sc-black);
}

/* Selectie-indicator: cirkel met vinkje */
.sc-pkg__check {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #cfcac0;
    background: var(--sc-white);
    transition: border-color .18s, background .18s, transform .18s;
}
.sc-row--checkbox .sc-pkg__check { border-radius: 8px; }
.sc-pkg:hover .sc-pkg__check { border-color: var(--sc-black); }
.sc-pkg.is-selected .sc-pkg__check {
    border-color: var(--sc-black);
    background: var(--sc-black);
    transform: scale(1.04);
}
.sc-pkg.is-selected .sc-pkg__check::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 7px;
    height: 13px;
    border: solid var(--sc-yellow);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Body */
.sc-pkg__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 4px 18px 18px;
    border-top: 1px solid var(--sc-border);
    padding-top: 16px;
}
.sc-pkg.is-selected .sc-pkg__body { border-top-color: transparent; }
.sc-pkg--has-media .sc-pkg__body {
    grid-template-columns: minmax(0, 1fr) 210px;
}
.sc-pkg__content { min-width: 0; }

.sc-pkg__subtitle {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sc-black);
}

/* Voordelen / nadelen */
.sc-pkg__points {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.sc-pkg__points li {
    position: relative;
    margin: 0 0 7px;
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sc-text);
}
.sc-pkg__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
}
.sc-pkg__points li.is-pro::before { background: #eaf7ee; }
.sc-pkg__points li.is-pro::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #17903f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sc-pkg__points li.is-con { color: var(--sc-muted); }
.sc-pkg__points li.is-con::before {
    background:
        linear-gradient(45deg, transparent 44%, #b9b3a8 44%, #b9b3a8 56%, transparent 56%) center / 9px 9px no-repeat,
        linear-gradient(-45deg, transparent 44%, #b9b3a8 44%, #b9b3a8 56%, transparent 56%) center / 9px 9px no-repeat,
        #f2f0ec;
}

/* Pakketinhoud */
.sc-pkg__items {
    margin-top: 4px;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    overflow: hidden;
}
.sc-pkg__items-title {
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-muted);
    background: var(--sc-bg);
    border-bottom: 1px solid var(--sc-border);
}
.sc-pkg__item-list {
    list-style: none;
    margin: 0;
    padding: 4px 12px;
}
.sc-pkg__item-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed #eee9df;
}
.sc-pkg__item-list li:last-child { border-bottom: 0; }
.sc-pkg__item-label {
    flex: 1;
    min-width: 0;
    color: var(--sc-text);
}
.sc-pkg__item-list li.is-montage .sc-pkg__item-label { font-weight: 700; }
.sc-pkg__item-price {
    white-space: nowrap;
    color: var(--sc-muted);
    font-variant-numeric: tabular-nums;
}
.sc-pkg__pricing {
    padding: 10px 12px 12px;
    background: var(--sc-bg);
    border-top: 1px solid var(--sc-border);
}
.sc-pkg__pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    color: var(--sc-muted);
    padding: 2px 0;
}
.sc-pkg__pricing-row del { font-variant-numeric: tabular-nums; }
.sc-pkg__pricing-row--total {
    color: var(--sc-black);
    font-weight: 700;
    font-size: 14px;
}
.sc-pkg__pricing-row--total strong {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.sc-pkg__saving {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #17903f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

/* Uitgelicht */
.sc-pkg__highlight {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 8px 13px;
    border-radius: 8px;
    background: #fff6d9;
    background: color-mix(in srgb, var(--sc-yellow) 18%, #fff);
    color: var(--sc-black);
    font-size: 13px;
    font-weight: 700;
}
.sc-pkg__star { color: var(--sc-yellow-dark); flex-shrink: 0; }

/* Foto's */
.sc-pkg__media {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-wrap .sc-pkg button.sc-pkg__img,
.sc-wrap .sc-pkg button.sc-pkg__thumb {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 0;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    box-shadow: none;
    text-transform: none;
    overflow: hidden;
}
.sc-wrap .sc-row.sc-pkg .sc-pkg__img,
.sc-wrap .sc-row.sc-pkg .sc-pkg__img *,
.sc-wrap .sc-row.sc-pkg .sc-pkg__thumb,
.sc-wrap .sc-row.sc-pkg .sc-pkg__thumb * { cursor: zoom-in !important; }
.sc-wrap .sc-row.sc-pkg .sc-pkg__thumb,
.sc-wrap .sc-row.sc-pkg .sc-pkg__thumb * { cursor: pointer !important; }
.sc-pkg__img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    transition: transform .25s;
}
.sc-pkg__img:hover img { transform: scale(1.04); }
.sc-pkg__img-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
.sc-pkg__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.sc-wrap .sc-pkg button.sc-pkg__thumb {
    border-radius: 6px;
    opacity: .7;
    transition: opacity .15s, border-color .15s;
}
.sc-wrap .sc-pkg button.sc-pkg__thumb.is-active,
.sc-wrap .sc-pkg button.sc-pkg__thumb:hover {
    opacity: 1;
    border-color: var(--sc-black);
}
.sc-pkg__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Snor/brom badge in pakketkop iets groter */
.sc-pkg .sc-uitvoering-badge { padding: 4px 11px; font-size: 12px; }

/* Sidebar: pakketinhoud als sub-regels */
.sc-summary-line--sub {
    padding: 3px 0 3px 10px;
    font-size: 11px;
    border-bottom: 0;
}
.sc-summary-line--sub .sc-summary-line__label { color: #999; }
.sc-summary-line__tag {
    padding: 1px 6px;
    border-radius: 4px;
    background: #8a8a8a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .sc-pkg__head { padding: 13px 14px; gap: 10px; }
    .sc-pkg__title { font-size: 16px; }
    .sc-pkg__check { width: 26px; height: 26px; }
    .sc-pkg__body,
    .sc-pkg--has-media .sc-pkg__body {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        gap: 14px;
    }
    .sc-pkg--has-media .sc-pkg__media { order: -1; }
    .sc-pkg__img img { aspect-ratio: 2 / 1; }
    .sc-pkg__thumbs { grid-template-columns: repeat(6, 1fr); }
    .sc-pkg__points li { font-size: 13px; }
}


/* =============================================================
   1.13.0 – MODERNE LIJSTWEERGAVE (display: list, niet inklapbaar)
   Losse, afgeronde optierijen met duidelijke selectiestatus.
   Inklapbare groepen (accordeon) houden hun bestaande stijl.
   ============================================================= */

/* Fix: lege teller in accordeon-kop gaf een beige streepje */
.sc-group__chosen-count:empty { display: none !important; }
.sc-group__chosen-count { margin-left: auto; }

.sc-wrap {
    --sc-tint:   #fffaeb;
    --sc-tint:   color-mix(in srgb, var(--sc-yellow) 9%, #fff);
    --sc-ring:   #fdeaa8;
    --sc-ring:   color-mix(in srgb, var(--sc-yellow) 35%, #fff);
}

.sc-wrap .sc-group--list { margin-bottom: 28px; }

.sc-wrap .sc-group--list > .sc-group__list-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 0;
}
.sc-wrap .sc-group--list > .sc-group__list-header .sc-group__name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.sc-group__hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--sc-muted);
    white-space: nowrap;
}

.sc-wrap .sc-group--list .sc-group__body--open,
.sc-wrap .sc-group--list .sc-variation-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-wrap .sc-group--list .sc-group__desc { margin: 0 0 4px; }

/* Rij */
.sc-wrap .sc-group--list .sc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    min-height: 56px;
    box-sizing: border-box;
    background: var(--sc-white);
    border: 1.5px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,16,16,.04);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.sc-wrap .sc-group--list .sc-row:first-of-type { border-top-color: var(--sc-border); }
.sc-wrap .sc-group--list .sc-row:hover {
    background: var(--sc-white);
    border-color: #cfc8ba;
    box-shadow: 0 4px 14px rgba(16,16,16,.06);
}
.sc-wrap .sc-group--list .sc-row:focus-visible {
    box-shadow: 0 0 0 3px var(--sc-ring);
}
.sc-wrap .sc-group--list .sc-row.is-selected,
.sc-wrap .sc-group--list .sc-row.is-selected:hover {
    background: var(--sc-tint);
    border-color: var(--sc-yellow);
    box-shadow: 0 0 0 1px var(--sc-yellow), 0 6px 18px rgba(16,16,16,.06);
}
.sc-wrap .sc-group--list .sc-row:active { transform: scale(.995); }

/* Indicator */
.sc-wrap .sc-group--list .sc-row__indicator {
    width: 20px;
    height: 20px;
    border: 2px solid #c9c3b8;
    background: var(--sc-white);
    box-sizing: border-box;
    transition: border-color .15s, background-color .15s;
}
.sc-wrap .sc-group--list .sc-row--checkbox .sc-row__indicator { border-radius: 6px; }
.sc-wrap .sc-group--list .sc-row:hover .sc-row__indicator { border-color: #8f897f; }
.sc-wrap .sc-group--list .sc-row.is-selected .sc-row__indicator {
    border-color: var(--sc-black);
    background: var(--sc-black);
}
.sc-wrap .sc-group--list .sc-row--radio.is-selected .sc-row__dot {
    width: 8px;
    height: 8px;
    background: var(--sc-yellow);
    animation: scDotPop .22s ease;
}
.sc-wrap .sc-group--list .sc-row--checkbox.is-selected .sc-row__dot {
    width: 5px;
    height: 10px;
    border-color: var(--sc-yellow);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
    animation: scDotPop .22s ease;
}
@keyframes scDotPop { 0% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }

/* Tekst */
.sc-wrap .sc-group--list .sc-row__body { align-items: center; gap: 12px; }
.sc-wrap .sc-group--list .sc-row__label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sc-black);
}
.sc-wrap .sc-group--list .sc-row.is-selected .sc-row__label { font-weight: 700; }
.sc-wrap .sc-group--list .sc-row__bullets {
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--sc-muted);
}
.sc-wrap .sc-group--list .sc-row__bullets li { position: relative; padding-left: 12px; margin: 0 0 1px; }
.sc-wrap .sc-group--list .sc-row__bullets li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c9c3b8;
}
.sc-wrap .sc-group--list .sc-row:has(.sc-row__bullets) { align-items: flex-start; }
.sc-wrap .sc-group--list .sc-row:has(.sc-row__bullets) .sc-row__indicator { margin-top: 1px; }

/* Prijs als rustig label */
.sc-wrap .sc-group--list .sc-row__price {
    padding: 4px 9px;
    border-radius: 7px;
    background: #f4f2ee;
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-black);
    font-variant-numeric: tabular-nums;
    transition: background-color .15s;
}
.sc-wrap .sc-group--list .sc-row.is-selected .sc-row__price { background: var(--sc-white); }
.sc-wrap .sc-group--list .sc-row__price del { color: #a8a39a; }

/* Snor/brom badge: kentekenplaat-look, compacter */
.sc-wrap .sc-group--list .sc-row__badge { margin-left: 0; }
.sc-wrap .sc-group--list .sc-uitvoering-badge {
    min-width: 46px;
    padding: 4px 9px;
    border-radius: 6px;
    border-width: 1px;
    font-size: 10.5px;
    letter-spacing: .07em;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.sc-wrap .sc-group--list .sc-uitvoering-badge--brom { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.08); }
.sc-wrap .sc-group--list .sc-row.is-selected .sc-uitvoering-badge { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* Afbeelding in rij: klikbaar om te vergroten */
.sc-wrap .sc-group--list .sc-row__img {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    overflow: hidden;
    background: #f6f5f2;
    border: 1px solid var(--sc-border);
}
.sc-wrap .sc-group--list .sc-row__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}
.sc-wrap .sc-group--list .sc-row__img:hover img { transform: scale(1.08); box-shadow: none; }

/* Afbeeldingen die de lightbox openen: juiste cursor (overschrijft de oude cursor-reset) */
.sc-wrap .sc-row .sc-row__img img,
.sc-wrap .sc-row .sc-pkg__img,
.sc-wrap .sc-row .sc-pkg__img *,
.sc-wrap .sc-row .sc-pkg__thumb,
.sc-wrap .sc-row .sc-pkg__thumb * { cursor: zoom-in !important; }

@media (max-width: 600px) {
    .sc-wrap .sc-group--list .sc-row { padding: 12px 14px; gap: 12px; min-height: 52px; }
    .sc-wrap .sc-group--list .sc-row__label { font-size: 14px; }
    .sc-wrap .sc-group--list .sc-row__img { width: 42px; height: 42px; }
    .sc-wrap .sc-group--list .sc-row__img img { width: 100%; height: 100%; }
    .sc-group__hint { font-size: 11px; }
}

/* Lightbox-stijlen worden sinds 1.13.2 door configurator.js zelf in de pagina gezet,
   zodat CSS-optimalisatie (bijv. LiteSpeed Remove Unused CSS) ze niet kan weghalen. */

/* Iets meer lucht tussen staptitel en eerste lijstgroep */
.sc-wrap .sc-step-header + .sc-group--list { margin-top: 26px; }


/* 1.13.0 – Prijs in pakketkop: één rustig label rechts, zelfde stijl als de lijstweergave */
.sc-pkg__head .sc-pkg__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.sc-pkg__head .sc-pkg__price del {
    font-size: 12px;
    font-weight: 500;
    color: #a8a39a;
}
.sc-pkg__price-val {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 7px;
    background: #f4f2ee;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sc-black);
    font-variant-numeric: tabular-nums;
    transition: background-color .15s;
}
.sc-pkg__price-val.is-included { font-size: 12.5px; font-weight: 600; color: #6f6a62; }
.sc-pkg__price-val.is-discount { color: #17703a; }
.sc-pkg.is-selected .sc-pkg__price-val { background: rgba(255,255,255,.9); }
.sc-pkg.is-selected .sc-pkg__head .sc-pkg__price del { color: rgba(0,0,0,.45); }
.sc-pkg__head { gap: 12px; }
.sc-pkg__head-main { flex: 1; }

@media (max-width: 600px) {
    .sc-pkg__price-val { font-size: 13px; padding: 4px 8px; }
    .sc-pkg__head .sc-pkg__price del { display: none; }
}

/* =============================================================
   1.14.0 – PAKKETKOLOM
   Groepen met weergave "Pakketten" staan links in hun stap.
   Desktop (>= 1240px): pakketten | stap-inhoud | overzicht
   Kleiner: pakketten compact bovenaan de stap.
   ============================================================= */

.sc-step-aside {
    container: scaside / inline-size;
    margin-bottom: 26px;
}
.sc-step-aside .sc-group { margin-bottom: 18px; }
.sc-step-aside .sc-group:last-child { margin-bottom: 0; }
.sc-step-aside .sc-group__list-header {
    display: block;
    padding: 0;
    margin: 0 0 10px;
    border-bottom: 0;
}
.sc-step-aside .sc-group__name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.sc-step-aside .sc-group__desc {
    margin: -4px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sc-muted);
    background: none;
    border: 0;
    padding: 0;
}
.sc-step-aside .sc-group__body--open {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 1320px) {
    /* Met een pakketkolom links is er meer breedte nodig */
    body:has(.sc-wrap) .sc-wrap.sc-wrap--wide {
        max-width: max(var(--sc-wrap-max, 1100px), 1450px) !important;
        width: 94% !important;
    }
    .sc-wrap--wide .sc-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 26px;
    }
    .sc-step-cols {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 0;
        align-items: start;
    }
    .sc-step-aside {
        position: sticky;
        top: 100px;
        margin: 0;
        padding: 14px 16px 16px;
        border-radius: 14px;
        background: #efece5;
    }
    /* Past het blok niet op het scherm, dan scrollt het gewoon mee
       (geen scrollbalk in het blok zelf). Zie syncAsideSticky() in de JS. */
    .sc-step-aside.is-tall {
        position: static;
        top: auto;
    }
    /* Foto iets minder hoog nu de kolom breder is */
    .sc-step-aside .sc-pkgv__media img { aspect-ratio: 16 / 10; }
    .sc-step-aside .sc-pkgv__items li { margin-bottom: 7px; }
    /* Scheiding tussen pakket en losse accessoires */
    .sc-step-center {
        border-left: 1px solid var(--sc-border);
        margin-left: 22px;
        padding-left: 26px;
        min-height: 260px;
    }
}

/* Scheiding als de kolommen onder elkaar staan (tablet en mobiel) */
.sc-step-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--sc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sc-step-or::before,
.sc-step-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sc-border);
}

@media (min-width: 1320px) {
    .sc-step-cols .sc-step-or { display: none; }

    /* Kop van de pakketkolom als klein label boven het vlak */
    .sc-step-aside .sc-group__name {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #6f6a62;
    }
    /* De kaart hoort bij het vlak, dus geen dubbele omlijning */
    .sc-step-aside .sc-wrap .sc-row.sc-pkgv,
    .sc-wrap .sc-step-aside .sc-row.sc-pkgv {
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(16,16,16,.05), 0 6px 18px rgba(16,16,16,.06);
    }
    .sc-wrap .sc-step-aside .sc-row.sc-pkgv:hover {
        border-color: #ded7c8;
        box-shadow: 0 10px 26px rgba(16,16,16,.1);
    }
    .sc-wrap .sc-step-aside .sc-row.sc-pkgv.is-selected,
    .sc-wrap .sc-step-aside .sc-row.sc-pkgv.is-selected:hover {
        border-color: var(--sc-yellow);
    }
    .sc-step-aside .sc-pkgv__media img { background: #fff; }
}

/* Vanaf 1440px is er ruimte voor een bredere pakketkolom */
@media (min-width: 1560px) {
    .sc-wrap--wide .sc-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 32px;
    }
    .sc-step-cols { grid-template-columns: 360px minmax(0, 1fr); }
    .sc-step-center {
        margin-left: 30px;
        padding-left: 34px;
    }
}

/* Weinig schermhoogte (laptops): compactere kaart, zodat de inhoud open kan
   blijven staan en de kolom toch blijft meelopen tijdens het scrollen. */
@media (min-width: 1320px) and (max-height: 900px) {
    .sc-step-aside { padding: 12px 14px 14px; }
    .sc-step-aside .sc-pkgv__media img { aspect-ratio: 16 / 9; }
    .sc-step-aside .sc-pkgv__thumbs { padding: 6px 6px 0; gap: 5px; }
    .sc-wrap .sc-row.sc-pkgv button.sc-pkg__thumb img { height: 52px; }
    .sc-step-aside .sc-pkgv__body { padding: 12px 14px 14px; }
    .sc-step-aside .sc-pkgv__now strong { font-size: 21px; }
    .sc-step-aside .sc-pkgv__price { margin-top: 9px; }
    .sc-step-aside .sc-pkgv__item-time { display: none; }
    .sc-step-aside .sc-pkgv__items li { margin-bottom: 5px; font-size: 12.5px; }
    .sc-step-aside .sc-pkgv__details { margin-top: 8px; padding-top: 8px; }
    .sc-step-aside .sc-pkgv__cta { margin-top: 11px; padding: 10px 14px; }
    /* Staat de inhoud open, dan is de samenvatting dubbelop */
    .sc-step-aside .sc-pkgv.is-open .sc-pkgv__summary { display: none; }
}

/* ── Kaart ── */
.sc-wrap .sc-row.sc-pkgv {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--sc-white);
    border: 1.5px solid var(--sc-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,16,16,.04), 0 4px 16px rgba(16,16,16,.05);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.sc-wrap .sc-row.sc-pkgv:first-of-type { border-top-color: var(--sc-border); }
.sc-wrap .sc-row.sc-pkgv:hover {
    background: var(--sc-white);
    border-color: #cfc8ba;
    box-shadow: 0 8px 24px rgba(16,16,16,.08);
}
.sc-wrap .sc-row.sc-pkgv:focus-visible { box-shadow: 0 0 0 3px #fdeaa8; }
.sc-wrap .sc-row.sc-pkgv.is-featured { border-color: #f3d27a; }
.sc-wrap .sc-row.sc-pkgv.is-selected,
.sc-wrap .sc-row.sc-pkgv.is-selected:hover {
    background: var(--sc-white);
    border-color: var(--sc-yellow);
    box-shadow: 0 0 0 1.5px var(--sc-yellow), 0 8px 24px rgba(16,16,16,.08);
}

.sc-pkgv__ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--sc-yellow);
    color: var(--sc-black);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    pointer-events: none;
}
.sc-pkgv__ribbon .sc-pkg__star { color: var(--sc-black); }
.sc-pkgv:not(.has-media) .sc-pkgv__ribbon { position: static; margin: 12px 0 0 14px; }

/* Foto */
.sc-pkgv__media { position: relative; }
.sc-wrap .sc-row.sc-pkgv button.sc-pkg__img {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 0;
    border: 0;
    border-radius: 0;
    background: #f6f5f2;
    box-shadow: none;
    text-transform: none;
    overflow: hidden;
}
.sc-pkgv__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}
.sc-pkgv:hover .sc-pkgv__media img { transform: scale(1.03); }
.sc-pkgv .sc-pkg__img-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
.sc-wrap .sc-row.sc-pkgv .sc-pkg__img,
.sc-wrap .sc-row.sc-pkgv .sc-pkg__img * { cursor: zoom-in !important; }

/* Miniaturen onder de hoofdfoto (dan is het "x foto's" label overbodig) */
.sc-pkgv__media:has(.sc-pkgv__thumbs) .sc-pkg__img-count { display: none; }
.sc-pkgv__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 8px 0;
    background: var(--sc-white);
}
.sc-wrap .sc-row.sc-pkgv button.sc-pkg__thumb {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 0;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: #f6f5f2;
    box-shadow: none;
    text-transform: none;
    overflow: hidden;
    cursor: zoom-in !important;
    transition: border-color .15s;
}
.sc-wrap .sc-row.sc-pkgv button.sc-pkg__thumb img {
    display: block;
    width: 100%;
    height: 68px;
    object-fit: cover;
}
.sc-wrap .sc-row.sc-pkgv button.sc-pkg__thumb:hover { border-color: #b9b2a5; }
.sc-wrap .sc-row.sc-pkgv button.sc-pkg__thumb.is-active { border-color: var(--sc-black); }

/* Body */
.sc-pkgv__body { padding: 14px 16px 16px; }
.sc-pkgv__title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--sc-black);
}
.sc-pkgv__subtitle {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sc-muted);
}

.sc-pkgv__price { margin-top: 12px; }
.sc-pkgv__was { font-size: 12.5px; color: var(--sc-muted); }
.sc-pkgv__was del { color: #a8a39a; }
.sc-pkgv__now {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 1px;
}
.sc-pkgv__now strong {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--sc-black);
    font-variant-numeric: tabular-nums;
}
.sc-pkgv__save {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ecf8f0;
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.sc-pkgv__summary {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--sc-muted);
}

/* Uitklappen */
.sc-wrap .sc-row.sc-pkgv button.sc-pkgv__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sc-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer !important;
}
.sc-wrap .sc-row.sc-pkgv button.sc-pkgv__toggle::after {
    content: '';
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
}
.sc-pkgv.is-open button.sc-pkgv__toggle::after { transform: translateY(1px) rotate(-135deg); }

.sc-pkgv__details {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e6e1d7;
}
.sc-pkgv.is-open .sc-pkgv__details { display: block; animation: scFadeIn .2s ease; }

.sc-pkgv__items,
.sc-pkgv__points {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sc-pkgv__items li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sc-text);
}
.sc-pkgv__items .sc-ico-check { flex-shrink: 0; position: relative; top: 2px; color: #15803d; }
.sc-pkgv__item-label { flex: 1; min-width: 0; }
.sc-pkgv__items li.is-montage .sc-pkgv__item-label { font-weight: 700; }
.sc-pkgv__item-value {
    flex-shrink: 0;
    font-size: 12px;
    color: #a09a90;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sc-pkgv__points { margin-top: 8px; }
.sc-pkgv__points li {
    position: relative;
    margin: 0 0 4px;
    padding-left: 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sc-muted);
}
.sc-pkgv__points li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #15803d;
}
.sc-pkgv__points li.is-con::before { background: #c9c3b8; }

/* Knop */
.sc-pkgv__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--sc-yellow);
    color: var(--sc-black);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    transition: background-color .15s, color .15s, filter .15s;
}
.sc-pkgv:hover .sc-pkgv__cta { filter: brightness(.96); }
.sc-pkgv__cta-on { display: none; align-items: center; gap: 6px; }
.sc-pkgv.is-selected .sc-pkgv__cta { background: var(--sc-black); color: var(--sc-white); filter: none; }
.sc-pkgv.is-selected .sc-pkgv__cta-off { display: none; }
.sc-pkgv.is-selected .sc-pkgv__cta-on { display: inline-flex; }
.sc-pkgv.is-selected .sc-pkgv__cta .sc-ico-check { color: var(--sc-yellow); }

/* ── Brede kolom (tablet / mobiel landscape): horizontale compacte kaart ── */
@container scaside (min-width: 520px) {
    .sc-wrap .sc-row.sc-pkgv.has-media {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
    }
    .sc-pkgv.has-media .sc-pkgv__media,
    .sc-pkgv.has-media .sc-pkgv__media button.sc-pkg__img { height: 100%; }
    .sc-pkgv.has-media .sc-pkgv__media img { height: 100%; aspect-ratio: auto; min-height: 170px; }
    .sc-pkgv__body { padding: 16px 18px; }
    .sc-pkgv__cta {
        display: inline-flex;
        margin-top: 14px;
        padding: 11px 22px;
        white-space: nowrap;
    }
    .sc-pkgv__thumbs { display: none; }
    .sc-pkgv__media:has(.sc-pkgv__thumbs) .sc-pkg__img-count { display: inline-block; }
    .sc-pkgv__items { columns: 2; column-gap: 24px; }
    .sc-pkgv__items li { break-inside: avoid; }
}

/* ── Smalle kolom op mobiel: foto minder hoog ── */
@media (max-width: 900px) {
    .sc-pkgv__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
    .sc-pkgv__now strong { font-size: 22px; }
    .sc-pkgv__body { padding: 12px 14px 14px; }
}

/* =============================================================
   1.15.0 – MONTAGE, KOPPELING PAKKET/LOSSE ARTIKELEN, PAKKET-TIP
   ============================================================= */

/* ── Montage bij losse opties ── */
.sc-row__montage-info {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sc-muted);
}
.sc-wrap .sc-row button.sc-row__montage-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 8px 0 0;
    padding: 5px 10px 5px 7px;
    min-height: 0;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: #fbfaf7;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-black);
    cursor: pointer !important;
    transition: border-color .15s, background-color .15s;
}
.sc-wrap .sc-row button.sc-row__montage-toggle * { cursor: pointer !important; }
.sc-wrap .sc-row button.sc-row__montage-toggle:hover { border-color: #cfc8ba; background: #fff; }
.sc-row__montage-box {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #c9c3b8;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.sc-row__montage-meta { font-weight: 500; color: var(--sc-muted); margin-left: 4px; }
.sc-wrap .sc-row button.sc-row__montage-toggle[aria-pressed="true"] {
    border-color: var(--sc-black);
    background: #fff;
}
.sc-row__montage-toggle[aria-pressed="true"] .sc-row__montage-box {
    border-color: var(--sc-black);
    background: var(--sc-black);
}
.sc-row__montage-toggle[aria-pressed="true"] .sc-row__montage-box::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 0.5px;
    width: 4px;
    height: 8px;
    border: solid var(--sc-yellow);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Losse optie zit in gekozen pakket ── */
.sc-wrap .sc-row.is-in-package,
.sc-wrap .sc-row.is-in-package * { cursor: default !important; }
.sc-row.is-in-package .sc-row__label,
.sc-row.is-in-package .sc-row__price,
.sc-row.is-in-package .sc-row__img,
.sc-row.is-in-package .sc-row__bullets,
.sc-row.is-in-package .sc-row__montage-info { opacity: .5; }
.sc-row.is-in-package .sc-row__indicator { border-style: dashed; }
.sc-row.is-in-package .sc-row__montage-toggle { display: none !important; }
.sc-row__inpkg {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 5px;
    background: #ecf8f0;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.sc-row__inpkg.is-flash { animation: scFlash .6s ease; }
@keyframes scFlash { 0%,100% { transform: none; } 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }

/* ── Pakketkaart: tijd per artikel, gratis montage, al gekozen ── */
.sc-pkgv__item-time {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: #a09a90;
}
.sc-pkgv__free { font-style: normal; font-weight: 700; color: #15803d; }
.sc-pkgv__item-value del { color: #b8b2a8; margin-right: 2px; }
.sc-pkgv__items li.is-discount .sc-pkgv__item-value { color: #15803d; font-weight: 700; }
.sc-pkgv__items li.is-owned .sc-pkgv__item-label { font-weight: 700; }
.sc-pkgv__items li.is-owned .sc-ico-check {
    color: var(--sc-black);
    background: var(--sc-yellow);
    border-radius: 50%;
    padding: 1px;
    box-sizing: content-box;
}
.sc-pkgv__perks { margin-top: 8px; }
.sc-pkgv__perk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: #ecf8f0;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
}
.sc-pkgv__perk .sc-ico-check { color: #15803d; }
.sc-pkgv__owned {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff6d9;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sc-black);
}
.sc-pkgv__owned[hidden] { display: none; }

/* ── Overzicht ── */
.sc-summary-line__tag.is-free { background: #15803d; color: #fff; }
.sc-summary-montage {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f6f5f2;
    font-size: 12px;
    color: var(--sc-muted);
}
.sc-summary-montage strong { color: var(--sc-black); }

/* ── Pakket-tip (sidebar op desktop, onder de stap op tablet/mobiel) ── */
.sc-pkg-tip {
    position: relative;
    margin: 10px 0 14px;
    padding: 12px 14px 13px;
    border-radius: 12px;
    background: #fffaeb;
    border: 1px solid #f3d27a;
    animation: scFadeIn .25s ease;
}
.sc-pkg-tip__title {
    padding-right: 22px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sc-black);
}
.sc-pkg-tip__text {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sc-text);
}
.sc-pkg-tip__text strong { font-weight: 700; color: var(--sc-black); }
.sc-wrap button.sc-pkg-tip__switch {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 9px 12px;
    min-height: 0;
    border: 0;
    border-radius: 9px;
    background: var(--sc-black);
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    cursor: pointer;
}
.sc-wrap button.sc-pkg-tip__switch:hover { filter: brightness(1.2); }
.sc-wrap button.sc-pkg-tip__close {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    cursor: pointer;
}
.sc-wrap button.sc-pkg-tip__close::before,
.sc-wrap button.sc-pkg-tip__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: #8a847a;
}
.sc-wrap button.sc-pkg-tip__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sc-wrap button.sc-pkg-tip__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sc-wrap button.sc-pkg-tip__close:hover { background: rgba(0,0,0,.06); }
.sc-pkg-tip-slot--inline { display: none; }

.sc-row.is-pulse { animation: scPulse 1.4s ease; }
@keyframes scPulse {
    0% { box-shadow: 0 0 0 0 rgba(249,185,15,.75); }
    100% { box-shadow: 0 0 0 16px rgba(249,185,15,0); }
}
.sc-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2147482000;
    transform: translate(-50%, 20px);
    opacity: 0;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.sc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
    .sc-pkg-tip-slot--inline { display: block; }
    .sc-toast { bottom: 100px; }
}

/* Montageknop: links uitgelijnd, tijd en bedrag blijven bij elkaar */
.sc-wrap .sc-row button.sc-row__montage-toggle { text-align: left; }
.sc-row__montage-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.sc-row__montage-meta { margin-left: 0; white-space: nowrap; }

/* =============================================================
   1.16.0 – OFFERTE ALS PDF
   ============================================================= */
.sc-quote { margin-top: 12px; }
.sc-quote--inline { display: none; }

.sc-wrap button.sc-quote__create {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    min-height: 0;
    border: 1.5px dashed #d6d0c4;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--sc-black);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.sc-wrap button.sc-quote__create:hover { border-color: var(--sc-black); border-style: solid; background: #fcfbf8; }
.sc-wrap button.sc-quote__create:disabled { opacity: .7; cursor: progress; }
.sc-quote__create svg { flex-shrink: 0; color: var(--sc-black); }
.sc-quote__create-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-quote__create-text strong { font-size: 13px; font-weight: 700; }
.sc-quote__create-text small { font-size: 11.5px; color: var(--sc-muted); }

.sc-quote__ready {
    padding: 10px 12px 12px;
    border: 1px solid #cfe7d7;
    border-radius: 10px;
    background: #f3faf5;
    animation: scFadeIn .2s ease;
}
.sc-quote__ready[hidden] { display: none; }
.sc-quote__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #15803d;
}
.sc-wrap button.sc-quote__reset {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sc-muted);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.sc-quote__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sc-wrap .sc-quote__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 8px 4px;
    min-height: 0;
    border: 1px solid #d9e9de;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: var(--sc-black);
    text-decoration: none !important;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.sc-wrap .sc-quote__btn:hover { border-color: var(--sc-black); background: #fff; color: var(--sc-black); }
.sc-wrap .sc-quote__btn--wa svg { color: #1fa855; }
.sc-quote__error {
    margin-top: 6px;
    font-size: 12px;
    color: #b32d2e;
}
.sc-quote__error[hidden] { display: none; }

@media (max-width: 900px) {
    .sc-quote--inline { display: block; margin: 4px 0 18px; }
    .sc-wrap .sc-quote__btn { padding: 10px 4px; font-size: 13px; }
}

/* =============================================================
   1.16.1 – MOBIEL: grotere raakvlakken en ruimte onder de pagina
   ============================================================= */
@media (max-width: 900px) {
    /* De vaste balk met de totaalprijs is hoger dan 80px zodra er
       betaalopties in staan, dus meer ruimte onderaan de pagina. */
    .sc-wrap { padding-bottom: 150px; }

    /* Montageknop over de volle breedte met een fatsoenlijk tapvlak,
       zodat je er niet naast tikt en het artikel uitzet. */
    .sc-wrap .sc-row button.sc-row__montage-toggle {
        display: flex;
        width: 100%;
        min-height: 44px;
        padding: 8px 12px 8px 10px;
        gap: 10px;
    }
    .sc-row__montage-box { width: 18px; height: 18px; }
    .sc-row__montage-toggle[aria-pressed="true"] .sc-row__montage-box::after {
        left: 4.5px;
        top: 1px;
        width: 4px;
        height: 9px;
    }
    .sc-row__montage-text { font-size: 13px; }

    /* Offerteblok: los van de knoppen eronder */
    .sc-quote--inline { margin: 6px 0 20px; }
    .sc-quote--inline .sc-quote__create { min-height: 52px; }
    .sc-wrap .sc-quote__btn { min-height: 52px; }
}

/* =============================================================
   1.17.0 – PAKKETTEN IN DE STAP ZELF (in plaats van de linkerkolom)
   Instelbaar aantal naast elkaar; smaller scherm = automatisch minder.
   ============================================================= */
.sc-group__body.sc-pkgrow {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    align-items: stretch;
}
.sc-pkgcell { container: scaside / inline-size; min-width: 0; }

@media (min-width: 640px) {
    .sc-group__body.sc-pkgrow--2,
    .sc-group__body.sc-pkgrow--3,
    .sc-group__body.sc-pkgrow--4,
    .sc-group__body.sc-pkgrow--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .sc-group__body.sc-pkgrow--3,
    .sc-group__body.sc-pkgrow--4,
    .sc-group__body.sc-pkgrow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .sc-group__body.sc-pkgrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sc-group__body.sc-pkgrow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Eén pakket over de volle breedte: dan is de liggende kaart mooier,
   dat regelt de container query van de kaart zelf. */
.sc-pkgrow--1 .sc-pkgcell { width: 100%; }

/* Pakketten naast elkaar: gelijke hoogte en knoppen op één lijn */
.sc-pkgcell { display: flex; }
@container scaside (max-width: 519px) {
    .sc-wrap .sc-pkgcell .sc-row.sc-pkgv {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .sc-pkgcell .sc-pkgv__body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    .sc-pkgcell .sc-pkgv__cta { margin-top: auto; }
    .sc-pkgcell .sc-pkgv__details { margin-bottom: 4px; }
}

/* Totale korting onderaan het overzicht */
.sc-summary-line--discount {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--sc-border);
    font-weight: 700;
}
.sc-summary-line--discount .sc-summary-line__label { color: #15803d; }
.sc-summary-line--discount .sc-summary-line__price { color: #15803d; }

/* Eenmalige notitie boven het overzicht */
.sc-summary-note {
    margin: 0 0 8px;
    padding: 6px 9px;
    border-radius: 7px;
    background: #f6f5f2;
    font-size: 11.5px;
    color: var(--sc-muted);
}

/* Subtotaal boven de kortingregel */
.sc-summary-line--subtotal {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--sc-border);
    font-weight: 700;
}
.sc-summary-line--discount {
    margin-top: 0;
    padding-top: 2px;
    border-top: 0;
}

/* Prijskaart-blok: alleen zichtbaar voor beheerders */
.sc-card-box {
    margin-top: 10px;
    padding: 10px 12px 12px;
    border: 1px dashed #c9c3b8;
    border-radius: 10px;
    background: #fbfaf7;
}
.sc-card-box__title {
    font-size: 12px;
    font-weight: 800;
    color: var(--sc-black);
    margin-bottom: 7px;
}
.sc-card-box__title span {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--sc-muted);
}
.sc-wrap textarea.sc-card-box__note {
    width: 100%;
    margin: 0 0 7px;
    padding: 7px 9px;
    border: 1px solid var(--sc-border);
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sc-black);
    resize: vertical;
}
.sc-card-box__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-wrap button.sc-card-box__btn {
    margin: 0;
    padding: 8px 6px;
    min-height: 0;
    border: 1px solid var(--sc-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-black);
    cursor: pointer;
}
.sc-wrap button.sc-card-box__btn:hover { border-color: var(--sc-black); }
.sc-wrap button.sc-card-box__btn:disabled { opacity: .6; cursor: progress; }

/* =============================================================
   1.22.0 – KEUZESTAP: blokken naast elkaar, zonder overzicht
   ============================================================= */

/* Op een keuzestap geen zijkolom en geen mobiele balk */
.sc-layout--route .sc-sidebar { display: none !important; }
.sc-layout--route { grid-template-columns: 1fr !important; }
.sc-mobile-bar--hidden { display: none !important; }
@media (max-width: 900px) {
    .sc-wrap--route { padding-bottom: 24px; }
}
.sc-step-page--route .sc-group__list-header { display: none; }
/* Staan de blokken onder andere keuzes, dan wel een kopje en wat lucht */
.sc-step-page:not(.sc-step-page--route) .sc-group--router { margin-top: 26px; }
.sc-step-page:not(.sc-step-page--route) .sc-group--router .sc-group__body { margin: 0; max-width: none; }
.sc-step-page--route .sc-group { margin-bottom: 0; }
.sc-step-nav--route { justify-content: flex-start; margin-top: 26px; }

/* De blokken zelf */
.sc-group--router .sc-group__body {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    max-width: 1020px;
    margin: 0 auto;
    align-items: stretch;
}
@media (min-width: 760px) {
    .sc-group--router .sc-group__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-group--router .sc-group__body:has(> .sc-route:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-group--router .sc-group__body:has(> .sc-route:last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sc-wrap button.sc-route {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 24px 22px 20px;
    min-height: 0;
    border: 1.5px solid var(--sc-border);
    border-radius: 16px;
    background: var(--sc-white);
    box-shadow: 0 1px 2px rgba(16,16,16,.04), 0 6px 18px rgba(16,16,16,.05);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    color: var(--sc-black);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sc-wrap button.sc-route:hover {
    border-color: var(--sc-black);
    box-shadow: 0 12px 28px rgba(16,16,16,.11);
    transform: translateY(-2px);
}
.sc-wrap button.sc-route:active { transform: translateY(0); }
.sc-wrap button.sc-route.is-featured {
    border-color: var(--sc-yellow);
    box-shadow: 0 0 0 1.5px var(--sc-yellow), 0 10px 24px rgba(16,16,16,.09);
}
.sc-route__badge {
    position: absolute;
    top: -11px;
    left: 20px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--sc-yellow);
    color: var(--sc-black);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}
.sc-route__img {
    width: 100%;
    height: 120px;
    border-radius: 11px;
    overflow: hidden;
    background: #f6f5f2;
    margin-bottom: 4px;
}
.sc-route__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-route__label { font-size: 17px; font-weight: 800; line-height: 1.25; }
.sc-route__desc { font-size: 13.5px; line-height: 1.5; color: var(--sc-muted); font-weight: 500; }
.sc-route__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--sc-black);
}
.sc-route__arrow {
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: transform .15s;
}
.sc-wrap button.sc-route:hover .sc-route__arrow { transform: rotate(-45deg) translate(2px, 2px); }