/* ==========================================================================
   Stadslijn Map Configurator — Editor Styles
   ========================================================================== */

/* Box-sizing reset for all stadslijn elements */
.stadslijn-configurator *,
.stadslijn-configurator *::before,
.stadslijn-configurator *::after {
    box-sizing: border-box;
}

/* Full-width section wrapper */
.stadslijn-configurator-wrap {
    clear: both;
    margin: 40px 0 0;
    width: 100%;
    scroll-margin-top: 80px;
}

.stadslijn-configurator-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    padding: 0;
    border: none;
}

/* Wrapper — full-width side-by-side: map left (60%), controls right (40%) */
.stadslijn-configurator {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin: 0;
    font-family: inherit;
    width: 100%;
    min-height: 440px;
    border: 1px solid #e0dbd4;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* Map container — left 60%, full height */
.stadslijn-map-container {
    position: relative;
    flex: 1 1 60%;
    min-height: 440px;
    border-right: 1px solid #e0dbd4;
    border-radius: 0;
    overflow: hidden;
    background: #e8e0d8;
    border-top: none;
    border-bottom: none;
    border-left: none;
}

#stadslijn-map {
    width: 100%;
    height: 100%;
}

.stadslijn-map-container .maplibregl-map {
    width: 100%;
    height: 100%;
}

/*
 * Cirkel-vorm: vierkante container (480×480) geclipped naar cirkel.
 * clip-path: circle() is betrouwbaarder dan overflow:hidden + border-radius
 * voor WebGL/canvas content (MapLibre); border-radius blijft voor fallback.
 */
.stadslijn-map-container.is-cirkel {
    flex: 0 0 480px;
    width: 480px;
    height: 480px;          /* MUST be equal to width for a true circle */
    min-height: unset;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    align-self: center;
    margin: 0 auto;
    border: none;           /* verwijder rechthoekige border-right */
    /* Magenta cut-contour ring voor printuitsnede */
    box-shadow: 0 0 0 2px #FF00FF, 0 0 0 5px rgba(255,0,255,0.15);
}

.stadslijn-map-container.is-cirkel #stadslijn-map {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Controls panel — right 40%, scrollable */
.stadslijn-controls {
    flex: 0 0 380px;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fafaf8;
    overflow-y: auto;
    overflow-x: hidden;
}

.stadslijn-controls label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.stadslijn-controls select,
.stadslijn-controls input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fafafa;
    transition: border-color 0.15s ease;
}

.stadslijn-controls select:focus,
.stadslijn-controls input[type="text"]:focus {
    outline: none;
    border-color: #0073aa;
    background: #fff;
}

/* ── Step wizard nav pills (no data-step attr) ───────────────────────────── */
.stadslijn-steps {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e5e5;
}

/* Step content panels (have data-step attr) — only show active one */
.stadslijn-step[data-step] {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    color: #333;
}

.stadslijn-step[data-step].is-active {
    display: flex;
}

/* Step nav tab buttons (inside .stadslijn-steps, no data-step) */
.stadslijn-step-tab {
    flex: 1;
    padding: 10px 4px;
    background: #f8f8f8;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    text-transform: uppercase;
}
.stadslijn-step-tab:hover { color: #555; background: #f0f0f0; }
.stadslijn-step-tab.is-active { color: #8b7355; border-bottom-color: #8b7355; background: #fff; }

/* Step panels */
.stadslijn-step-panel {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.stadslijn-step-panel.is-active {
    display: block;
}

/* Preview mockup */
.stadslijn-preview-mockup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f7f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
}

.stadslijn-preview-mockup__frame {
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.stadslijn-preview-mockup__frame canvas,
.stadslijn-preview-mockup__frame img {
    display: block;
    width: 100%;
    height: auto;
}

.stadslijn-preview-mockup__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    text-align: center;
    pointer-events: none;
}

.stadslijn-preview-mockup__city-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1;
}

.stadslijn-preview-mockup__subtitle {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
    margin-top: 4px;
}

/* Theme colour swatches */
.stadslijn-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stadslijn-theme-swatch {
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.stadslijn-theme-swatch:hover {
    transform: scale(1.03);
}

.stadslijn-theme-swatch.is-selected {
    border-color: #0073aa;
}

.stadslijn-theme-swatch__preview {
    height: 56px;
    width: 100%;
}

.stadslijn-theme-swatch__label {
    display: block;
    padding: 4px 6px;
    font-size: 11px;
    text-align: center;
    background: #fff;
    color: #333;
}

/* Shape selector */
.stadslijn-shape-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stadslijn-shape-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    border: 2px solid #ddd;
    transition: border-color 0.15s ease;
    min-width: 64px;
}

.stadslijn-shape-option svg {
    width: 40px;
    height: 40px;
    fill: #aaa;
    transition: fill 0.15s ease;
}

.stadslijn-shape-option span {
    font-size: 11px;
    color: #666;
}

.stadslijn-shape-option:hover {
    border-color: #aaa;
}

.stadslijn-shape-option.is-selected {
    border-color: #0073aa;
}

.stadslijn-shape-option.is-selected svg {
    fill: #0073aa;
}

/* Hidden config input */
#stadslijn_config {
    display: none;
}

/* Loading state */
.stadslijn-configurator.is-loading .stadslijn-map-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="%230073aa" stroke-width="2" stroke-dasharray="31.4" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/></circle></svg>') center / 40px no-repeat;
}

/* ==========================================================================
   Responsive — stack vertically on narrow screens
   ========================================================================== */
@media (max-width: 768px) {
    .stadslijn-configurator {
        flex-direction: column;
        min-height: auto;
    }

    .stadslijn-map-container {
        flex: none;
        width: 100%;
        min-height: 260px;
        height: 260px;
        border-right: none;
        border-bottom: 1px solid #e0dbd4;
    }

    .stadslijn-controls {
        flex: none;
        width: 100%;
        max-width: 100%;
        overflow-y: visible;
    }

    #stadslijn-map {
        height: 260px;
    }

    .stadslijn-theme-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stadslijn-font-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stadslijn-material-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stadslijn-preview-mockup__city-name {
        font-size: 16px;
    }
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.stadslijn-search {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stadslijn-search__input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
.stadslijn-search__input:focus {
    outline: none;
    border-color: #8b7355;
    box-shadow: 0 0 0 2px rgba(139,115,85,0.2);
}
.stadslijn-search__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 9999;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.stadslijn-search__result {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid #f0f0f0;
    color: #1c1c1c !important;
    background: #fff !important;
}
.stadslijn-search__result:last-child { border-bottom: none; }
.stadslijn-search__result:hover      { background: #f5f0e8 !important; color: #1c1c1c !important; }
.stadslijn-search__result--empty     { color: #999 !important; cursor: default; }
.stadslijn-hint { font-size: 12px; color: #888; margin: 0 0 16px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.stadslijn-btn {
    padding: 8px 16px;
    background: #8b7355;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
}
.stadslijn-btn:hover     { background: #7a6348; }
.stadslijn-btn:disabled  { opacity: 0.6; cursor: not-allowed; }
.stadslijn-btn--next     { margin-top: 16px; width: 100%; padding: 10px; }

/* ── In winkelmandje knop (stap 4 onderaan configurator) ─────────────────── */
.stadslijn-btn--cart {
    margin-top: 20px;
    width: 100%;
    padding: 14px 10px;
    font-size: 16px;
    font-weight: 700;
    background: #4a7c59;   /* groen — onderscheidt zich van de navigatie-knoppen */
    letter-spacing: 0.5px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.stadslijn-btn--cart:hover  { background: #3d6b4a; }
.stadslijn-btn--cart:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Verberg de standaard WooCommerce add-to-cart sectie op kaartpagina's ── */
.stadslijn-map-product .cart,
.stadslijn-map-product .quantity,
.stadslijn-map-product form.cart {
    display: none !important;
}

/* ── Winkelmandje-icoon in navigatiemenu ─────────────────────────────────── */
.stadslijn-cart-menu-item > a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    padding: 0 8px !important;
    line-height: 1;
}
.stadslijn-cart-menu-item svg {
    display: block;
}
.stadslijn-cart-count {
    position: absolute;
    top: -6px;
    right: -4px;
    background: #8b7355;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 99px;
    min-width: 16px;
    text-align: center;
}

/* ── Step title ──────────────────────────────────────────────────────────── */
.stadslijn-step__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* ── Theme swatches ───────────────────────────────────────────────────────── */
.stadslijn-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.stadslijn-theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.stadslijn-theme-swatch {
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 10px 6px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s;
    min-height: 60px;
    position: relative;
}
.stadslijn-theme-swatch.is-active,
.stadslijn-theme-swatch:hover { border-color: #8b7355; }
.stadslijn-theme-swatch__line {
    display: block;
    width: 80%;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 4px;
}
.stadslijn-theme-swatch__label {
    font-size: 10px;
    color: #333;
    background: rgba(255,255,255,0.8);
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* ── Color pickers ────────────────────────────────────────────────────────── */
.stadslijn-color-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.stadslijn-color-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}
.stadslijn-color-input {
    width: 40px;
    height: 32px;
    border: 1.5px solid #222 !important;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    outline: none;
}

/* ── Layer toggles — horizontal row ──────────────────────────────────────── */
.stadslijn-toggle-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 8px;
}

/*
 * Override .stadslijn-controls label { display: block } which has higher
 * specificity (0,1,1) than plain .stadslijn-toggle (0,1,0).
 * Using .stadslijn-controls label.stadslijn-toggle gives us (0,2,1) — wins.
 */
.stadslijn-controls label.stadslijn-toggle,
label.stadslijn-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    margin-bottom: 0;
}
.stadslijn-toggle__input { display: none; }
.stadslijn-toggle__track {
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.stadslijn-toggle__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.stadslijn-toggle__input:checked + .stadslijn-toggle__track { background: #8b7355; }
.stadslijn-toggle__input:checked + .stadslijn-toggle__track::after { transform: translateX(16px); }
.stadslijn-toggle__label { font-size: 14px; color: #333; line-height: 1.3; }

/* ── Shape selector ───────────────────────────────────────────────────────── */
.stadslijn-shape-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.stadslijn-shape-btn {
    flex: 1;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 12px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    transition: border-color 0.15s;
}
.stadslijn-shape-btn.is-active,
.stadslijn-shape-btn:hover { border-color: #8b7355; color: #333; }
.stadslijn-shape-icon {
    display: block;
    width: 28px;
    height: 28px;
    background: #8b7355;
}
.stadslijn-shape-icon--rechthoek { border-radius: 2px; }
.stadslijn-shape-icon--cirkel    { border-radius: 50%; }
.stadslijn-shape-icon--hart {
    clip-path: path('M14,24 C4,18 0,12 0,7 C0,3 3,0 7,0 C10,0 13,2 14,5 C15,2 18,0 21,0 C25,0 28,3 28,7 C28,12 24,18 14,24 Z');
}

/* ── Font selector ────────────────────────────────────────────────────────── */
.stadslijn-font-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}
.stadslijn-font-btn {
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 10px 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    text-align: center;
    transition: border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
}
.stadslijn-font-btn.is-active,
.stadslijn-font-btn:hover { border-color: #8b7355; }

/* ── Text inputs ──────────────────────────────────────────────────────────── */
.stadslijn-text-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 6px;
    box-sizing: border-box;
}
.stadslijn-text-input:focus {
    outline: none;
    border-color: #8b7355;
    box-shadow: 0 0 0 2px rgba(139,115,85,0.2);
}

/* ── Subtitle type toggle ─────────────────────────────────────────────────── */
.stadslijn-subtitel-type {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.stadslijn-subtitel-type__btn {
    flex: 1;
    padding: 5px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stadslijn-subtitel-type__btn.is-active {
    background: #8b7355;
    color: #fff;
    border-color: #8b7355;
}
.stadslijn-coord-land {
    padding: 6px 12px;
    background: #f5f0e8;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    color: #8b7355;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px dotted #ccc;
}
.stadslijn-coord-display {
    padding: 6px 12px 8px;
    background: #f5f0e8;
    border-radius: 0 0 4px 4px;
    font-size: 12px;
    color: #555;
    font-family: monospace;
}

/* ── Control group ────────────────────────────────────────────────────────── */
.stadslijn-control-group { margin-bottom: 16px; }
.stadslijn-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Text overlay on map ──────────────────────────────────────────────────── */
/*
 * --stadslijn-overlay-color is set by JS to an rgba() value based on the
 * active theme's background colour, so the fade blends with the map on both
 * light and dark themes.
 *
 * The overlay covers the bottom ~35% of the map and fades smoothly upward,
 * giving the text a clear readable band without a hard edge.
 */
.stadslijn-map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Zelfde fadegebied als het exportbestand: 45% van de kaarthoogte.
       De tekst blijft onderaan staan (flex + justify-content: flex-end). */
    height: 45%;
    padding: 0 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    /* Smoothstep-verloop, identiek aan de fade in captureMapSnapshot():
       alpha 0 bovenaan -> 0,70 onderaan, zonder vlakke band. */
    background: linear-gradient(
        to top,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.700) 0%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.680) 10%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.627) 20%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.549) 30%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.454) 40%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.350) 50%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.246) 60%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.151) 70%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.073) 80%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.020) 90%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.000) 100%
    );
}

/* ── Bovenfade: 8% hoogte, 12% dekking, in de themakleur (gelijk aan de export) ── */
.stadslijn-map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8%;
    background: linear-gradient(
        to bottom,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.120) 0%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.117) 10%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.108) 20%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.094) 30%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.078) 40%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.060) 50%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.042) 60%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.026) 70%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.012) 80%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.003) 90%,
        rgba(var(--stadslijn-overlay-rgb, 0, 0, 0), 0.000) 100%
    );
    pointer-events: none;
    z-index: 9;
}
.stadslijn-map-overlay__titel {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.2;
}
/* Scheidingslijntje tussen titel en ondertitel — NU een echt element.
   Voorheen stond dit als ::after op de titel; een pseudo-element komt niet in het
gerenderde canvasbeeld (controlebeeld stap 5 en het printbestand) terecht, waardoor
het streepje daar ontbrak of afweek. Met een echt element leest de renderer dezelfde
maten als het voorbeeld. */
.stadslijn-map-overlay__scheiding {
    display: block;
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    margin: 6px auto 0;
    flex: 0 0 auto;
}
.stadslijn-map-overlay__scheiding[hidden] { display: none; }
/* oude regel uit, zodat het streepje niet dubbel komt */
.stadslijn-map-overlay__titel.has-subtitle::after { content: none; }
.stadslijn-map-overlay__subtitel {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 2px;
    opacity: 0.85;
}
.stadslijn-map-overlay__land {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.9;
}

/*
 * Hart-vorm: schuif het tekstoverlay omhoog zodat het in het brede midden van
 * het hart zit en niet in de smal toelopende punt onderaan (y ≈ 0.92).
 * bottom: 24% = overlay zit op ~76% van de hoogte = brede buik van het hart.
 */
.stadslijn-map-container.is-hart .stadslijn-map-overlay {
    bottom: 24%;
    padding-top: 48px;
}

/*
 * Cirkel-vorm: extra padding-bottom zodat de tekst hoger staat en niet
 * tegen de magenta snijcontour plakt. De canvas-snapshot (Probo output)
 * plaatst tekst op ~44 px van de onderrand — de CSS benadert dit met
 * bottom: 0 + padding-bottom: 32 px (tekst baseline ~32 px, visueel ~44 px).
 */
.stadslijn-map-container.is-cirkel .stadslijn-map-overlay {
    bottom: 0;
    padding-top: 120px;
    padding-bottom: 32px;
}

/* ── OSM attributie ───────────────────────────────────────────────────────── */
.stadslijn-osm-attributie {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 8px;
    line-height: 1;
    color: rgba(0,0,0,0.45);
    background: rgba(255,255,255,0.55);
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 11;
    letter-spacing: 0;
    font-family: sans-serif;
}

/* ── Material selector ────────────────────────────────────────────────────── */
.stadslijn-material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.stadslijn-material-btn {
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 12px 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: border-color 0.15s;
}
.stadslijn-material-btn.is-active,
.stadslijn-material-btn:hover { border-color: #8b7355; }
.stadslijn-material-btn__icon  { font-size: 20px; }
.stadslijn-material-btn__label { font-size: 12px; font-weight: 600; color: #333; }
.stadslijn-material-btn__sub   { font-size: 10px; color: #888; }

/* Materiaalbeschrijving — subtiele tekst onder de materiaalknoppen */
.stadslijn-material-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    margin: 10px 0 4px;
    padding: 0;
}

/* ── Size grid ────────────────────────────────────────────────────────────── */
.stadslijn-size-grid,
#stadslijn-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}
.stadslijn-size-btn {
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: border-color 0.15s;
    min-width: 70px;
}
.stadslijn-size-btn.is-active,
.stadslijn-size-btn:hover      { border-color: #8b7355; }
.stadslijn-size-btn__formaat   { font-size: 13px; font-weight: 600; color: #333; }
.stadslijn-size-btn__prijs     { font-size: 11px; color: #666; }

/* ── Price display ────────────────────────────────────────────────────────── */
.stadslijn-price-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #f5f0e8;
    border-radius: 6px;
}
.stadslijn-price-display__label { font-size: 14px; color: #666; }
.stadslijn-price-display__value { font-size: 22px; font-weight: 700; color: #333; }

/* ── Upsell ───────────────────────────────────────────────────────────────── */
.stadslijn-upsell { padding: 12px; background: #fdf8f0; border-radius: 6px; border: 1px solid #e8dcc8; }
.stadslijn-upsell__price { font-size: 12px; color: #888; margin-left: 4px; }

/* ── Validation ───────────────────────────────────────────────────────────── */
.stadslijn-validation-msg {
    color: #c0392b;
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fde8e8;
    border-radius: 4px;
    border-left: 3px solid #c0392b;
}

/* ── City landing page ────────────────────────────────────────────────────── */
.stadslijn-city-hero {
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.stadslijn-city-hero__text { flex: 1; }
.stadslijn-city-hero__title { font-size: 36px; font-weight: 700; margin-bottom: 16px; color: #222; }
.stadslijn-city-hero__sub   { font-size: 18px; color: #555; margin-bottom: 24px; line-height: 1.6; }
.stadslijn-btn--hero        { font-size: 16px; padding: 14px 28px; text-decoration: none; display: inline-block; }
.stadslijn-city-hero__map   { flex: 1; height: 350px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.stadslijn-city-content  { max-width: 800px; margin: 0 auto; padding: 40px; line-height: 1.8; }
.stadslijn-city-products { max-width: 1200px; margin: 0 auto; padding: 40px; }
.stadslijn-city-products h2 { font-size: 24px; margin-bottom: 24px; }
.stadslijn-product-teasers  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; }
.stadslijn-product-teaser   { border: 1px solid #eee; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.stadslijn-product-teaser:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.stadslijn-product-teaser__img img { width: 100%; display: block; }
.stadslijn-product-teaser__body    { padding: 12px; }
.stadslijn-product-teaser__body h3 { font-size: 14px; margin-bottom: 4px; }
.stadslijn-product-teaser__price   { font-size: 16px; font-weight: 600; color: #8b7355; }

.stadslijn-city-faq      { max-width: 800px; margin: 0 auto; padding: 40px; }
.stadslijn-city-faq h2   { font-size: 24px; margin-bottom: 24px; }
.stadslijn-faq-item      { border-bottom: 1px solid #eee; padding: 20px 0; }
.stadslijn-faq-item__q   { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; }
.stadslijn-faq-item__a p { font-size: 15px; color: #555; line-height: 1.7; margin: 0; }

@media (max-width: 768px) {
    .stadslijn-city-hero { flex-direction: column; padding: 30px 20px; }
    .stadslijn-city-hero__map { width: 100%; }
}

/* ── Orientation: Landscape ───────────────────────────────────────────────── */
/*
 * Landscape: the map container gets a fixed 4:3 aspect ratio.
 * We constrain the height so portrait (default, fills full height) vs
 * landscape (shorter, wider ratio) are both clearly visible.
 */
.stadslijn-map-container.is-landscape {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    width: 60%;
    min-height: unset;
    align-self: center;
}

.stadslijn-map-container.is-portrait {
    /* Default — fills available height of configurator (no extra rules needed) */
}

.stadslijn-map-container.is-square {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    width: 60%;
    min-height: unset;
    align-self: center;
}

/* Custom ratio (dimensions driven by selected product formaat) */
.stadslijn-map-container.is-custom-ratio {
    flex: 0 0 auto;
    min-height: unset;
    align-self: center;
}

/* Hart-vorm: vierkante container geclipped naar hartvorm via SVG clip-path (JS injecteert dit). */
.stadslijn-map-container.is-hart {
    flex: 0 0 480px;
    width: 480px;
    height: 480px;          /* vierkant als basis voor het hart */
    min-height: unset;
    align-self: center;
    margin: 0 auto;
    border: none;           /* verwijder rechthoekige border-right */
}

/* ── Orientation toggle buttons ───────────────────────────────────────────── */
.stadslijn-orientation-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.stadslijn-orientation-btn {
    flex: 1;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 12px 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    transition: border-color 0.15s, color 0.15s;
}
.stadslijn-orientation-btn.is-active,
.stadslijn-orientation-btn:hover {
    border-color: #8b7355;
    color: #333;
}
.stadslijn-orientation-icon {
    width: 28px;
    height: 28px;
    color: currentColor;
}
.stadslijn-orientation-btn.is-active .stadslijn-orientation-icon,
.stadslijn-orientation-btn:hover    .stadslijn-orientation-icon {
    color: #8b7355;
}

/* ── Font size sliders ────────────────────────────────────────────────────── */
.stadslijn-fontsize-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.stadslijn-fontsize-row {
    display: grid;
    grid-template-columns: 72px 1fr 44px;
    align-items: center;
    gap: 8px;
}
.stadslijn-fontsize-label {
    font-size: 12px;
    color: #555;
    font-weight: 600;
}
.stadslijn-size-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    outline: none;
    cursor: pointer;
}
.stadslijn-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8b7355;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.stadslijn-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8b7355;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.stadslijn-size-value {
    font-size: 11px;
    color: #888;
    text-align: right;
    white-space: nowrap;
    min-width: 36px;
}

/* ── Homepage city showcase ───────────────────────────────────────────────── */
.stadslijn-home-hero {
    background: linear-gradient(135deg, #0b0a09 0%, #1b2a4a 100%);
    color: #fff;
    padding: 100px 40px;
    text-align: center;
}
.stadslijn-home-hero__title {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 16px;
    line-height: 1.1;
}
.stadslijn-home-hero__sub {
    font-size: 20px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 36px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.stadslijn-home-hero__cta {
    display: inline-block;
    background: #d4af37;
    color: #0b0a09;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}
.stadslijn-home-hero__cta:hover { background: #c49b2a; }

.stadslijn-city-grid-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
}
.stadslijn-city-grid-section__title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.stadslijn-city-grid-section__sub {
    font-size: 16px;
    color: #666;
    margin: 0 0 36px;
}
.stadslijn-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.stadslijn-city-card {
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    background: #1b2a4a;
    aspect-ratio: 3 / 4;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stadslijn-city-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.stadslijn-city-card__map {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.stadslijn-city-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.stadslijn-city-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.stadslijn-city-card__cta {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Live MapLibre mini-maps inside city cards */
.stadslijn-city-card .stadslijn-city-card__map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.stadslijn-themes-section {
    background: #fafaf8;
    padding: 60px 40px;
}
.stadslijn-themes-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.stadslijn-themes-section__title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.stadslijn-themes-section__sub {
    font-size: 16px;
    color: #666;
    margin: 0 0 36px;
}
.stadslijn-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.stadslijn-theme-card {
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
}
.stadslijn-theme-card:hover {
    border-color: #8b7355;
    transform: translateY(-2px);
}
.stadslijn-theme-card__preview {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.stadslijn-theme-card__preview img {
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.stadslijn-theme-card__name {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .stadslijn-home-hero { padding: 60px 20px; }
    .stadslijn-home-hero__title { font-size: 32px; }
    .stadslijn-city-grid-section { padding: 40px 20px; }
    .stadslijn-city-grid { grid-template-columns: repeat(2, 1fr); }
    .stadslijn-themes-section { padding: 40px 20px; }
    .stadslijn-themes-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stap 5: Review & bestellen ─────────────────────────────────── */
.stadslijn-review-snapshot {
  margin-bottom: 20px;
  min-height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stadslijn-review-snapshot img {
  display: block;
  max-width: 100%;
}
.stadslijn-review-snapshot p {
  color: #888;
  font-style: italic;
  padding: 30px;
}
.stadslijn-review-details {
  margin-bottom: 24px;
}
.stadslijn-review-details h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.stadslijn-review-table {
  width: 100%;
  border-collapse: collapse;
}
.stadslijn-review-table td {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.stadslijn-review-table td:first-child {
  color: #666;
  width: 40%;
}
.stadslijn-review-table td:last-child {
  text-align: right;
  color: #222;
}
.stadslijn-review-total td {
  border-bottom: none;
  padding-top: 12px;
  font-size: 16px;
}

/* ── Snijlijn in review stap ─────────────────────────────────── */
.stadslijn-map-container.is-review-step {
  position: relative;
}
.stadslijn-map-container.is-review-step::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed #e00;
  border-radius: inherit;
  pointer-events: none;
  z-index: 999;
  box-shadow: inset 0 0 0 1px rgba(255,0,0,0.15), 0 0 0 4px rgba(255,255,255,0.8);
}



/* ==========================================================================
   MOBIEL (≤ 768 px) — kaart t_27a77569 (vraag 30, optie a)
   Voorbeeld groter én meescrollend, zoekveld naar 16 px (geen iOS-zoom),
   alle tikdoelen ≥ 44 px, schuifbalken en vinkje groter, instructie per
   apparaat. Alles hieronder is additief binnen deze media query: op een groot
   scherm verandert er niets. De twee JS-regels die erbij horen staan in
   stadslijn-editor.js (_voorbeeldKolomBreedte / slTitelGroottePx).
   ========================================================================== */
@media (max-width: 768px) {

    /* 1 ── Het voorbeeld ------------------------------------------------
       De container is op mobiel een gewone flex-kolom; zonder deze regels
       scrollt het voorbeeld uit beeld (gemeten: op scrollY 1346 alleen nog
       een strook van 14 px) en blijft het 211 x 260 px. */
    .stadslijn-configurator {
        /* Nodig voor position: sticky op het voorbeeld: een voorouder met
           overflow: hidden maakt van zichzelf een scrollcontainer en dan doet
           sticky niets. De afronding van de kaart gaat naar de twee kinderen. */
        overflow: visible;
    }

    /* Alles hieronder hangt aan .stadslijn-configurator: de print-export
       verhuist het kaartvlak tijdelijk naar <body> en zet daar zelf maat,
       positie en laag op (slTegelSnapshot). Buiten de configurator mag deze
       opmaak dus niet meetellen — anders klemmen de tegels van 4096 px. */
    .stadslijn-configurator .stadslijn-map-container {
        position: sticky;
        /* Blijft onder de plakkende sitekop staan (hoogte meet de JS). */
        top: var(--sl-kop-hoogte, 0px);
        z-index: 30;
        height: auto;
        min-height: 0;
        border-radius: 9px 9px 0 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
    }

    .stadslijn-configurator .stadslijn-map-container.is-cirkel,
    .stadslijn-configurator .stadslijn-map-container.is-hart {
        /* Vaste 480 px past niet op een telefoon (gemeten: cirkel 480 px breed
           in een kolom van 351 px, afgesneden tegen de rand). Vierkant houden,
           maar binnen de kolom en binnen de hoogtegrens. */
        flex: 0 0 auto;
        width: min(100%, 58vh);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .stadslijn-configurator #stadslijn-map {
        /* De oude mobiele regel zette hier 260 px vast. */
        height: 100%;
    }

    .stadslijn-controls,
    .stadslijn-step[data-step] {
        border-radius: 0 0 9px 9px;
    }

    /* De bediening mag GEEN eigen scrollvak zijn. De basisregel zet
       overflow-x: hidden, waardoor de berekende overflow-y 'auto' wordt (spec:
       een 'visible' as naast een 'hidden' as wordt 'auto'). Daardoor was dit
       een scrollport en plakte de stappenbalk aan het paneel in plaats van aan
       het scherm — gemeten stond hij 443 px onder de paneeltop. */
    .stadslijn-configurator .stadslijn-controls {
        overflow: visible;
    }

    /* De pagina schuift bij het laden naar de configurator (JS, block 'start').
       Zonder deze marge verdwijnt de bovenkant achter de plakkende sitekop en
       mist de klant de eerste 65 px van het voorbeeld. */
    .stadslijn-configurator-wrap {
        scroll-margin-top: var(--sl-kop-hoogte, 0px);
    }

    /* De stappenbalk blijft onder het voorbeeld staan; zonder deze regel
       schuift hij achter het plakkende voorbeeld en moet de klant
       terugscrollen om van stap te wisselen. */
    .stadslijn-steps {
        position: sticky;
        top: calc(var(--sl-kop-hoogte, 0px) + var(--sl-voorbeeld-hoogte, 0px));
        z-index: 29;
        background: #fff;
    }

    /* De balk houdt zijn plakplek nu ook aan het EINDE van de pagina vast
       (kaart t_707fb113, besluit A 04-10-2026).
       Een sticky element kan zijn containing block niet verlaten. Het
       containing block van de balk is het bedieningspaneel, en dat paneel eindigt
       even hoog als het voorbeeld zelf: zodra de onderrand van het paneel in
       beeld komt wordt de balk omhoog geduwd en verdwijnt hij achter het
       voorbeeld (gemeten op 393x852: laatste 110 px scroll, max 45 px overlap;
       op 320x568: laatste 305 px, max 54 px).
       Het paneel LANGER maken werkt niet: aan het einde van de pagina staat zijn
       onderrand op een vaste plek (het aantal pixels onder de configurator ligt
       vast), dus een `min-height` schuift de klem alleen maar mee met de scroll
       (read-only nagemeten: met `min-height: 900px` op het paneel begon de
       overlap pas op y=1900 en bleef 45 px).
       Wat wel werkt: het klemvlak van de KAART eerder laten eindigen dan dat van
       de balk. De kaart is zelf het sticky element en voor sticky geldt de
       marge-box, dus met een `margin-bottom` laat de kaart dat aantal pixels
       eerder los. De negatieve `margin-top` op het paneel houdt de opbouw exact
       gelijk (de marge-boxen schuiven tegen elkaar weg; de marge-box van het
       paneel is het referentiekader van sticky, dus het klemvlak van de balk
       blijft waar het was), zodat er niets aan de zichtbare lay-out verandert:
       gemeten pagina- en configuratorhoogte blijven gelijk.
       De marge moet GROTER zijn dan de hoogte van de stappenbalk (gemeten 45 px
       op 393x852 en 54 px op 320x568) — dat verschil is de gegarandeerde ruimte
       tussen kaart en balk aan het einde van de pagina. */
    .stadslijn-configurator .stadslijn-map-container {
        margin-bottom: 72px;
    }
    .stadslijn-configurator .stadslijn-controls {
        margin-top: -72px;
    }

    /* 2 ── Geen iOS-zoom: elk tekstveld ≥ 16 px -------------------------- */
    .stadslijn-search__input,
    .stadslijn-controls select,
    .stadslijn-controls input[type="text"],
    .stadslijn-controls input[type="email"],
    .stadslijn-text-input,
    #sl-bewaar-email {
        font-size: 16px !important;
    }

    /* 3 ── Tikdoelen ≥ 44 px (duimnorm) --------------------------------- */
    .stadslijn-search__input,
    .stadslijn-search .stadslijn-btn,
    .stadslijn-step-tab,
    .stadslijn-font-btn,
    .stadslijn-size-btn,
    .stadslijn-subtitel-type__btn,
    .stadslijn-color-label,
    label.stadslijn-toggle {
        min-height: 44px;
    }

    .stadslijn-step-tab {
        padding: 14px 4px;
    }

    .stadslijn-subtitel-type__btn {
        padding: 12px 8px;
    }

    .stadslijn-color-label {
        justify-content: center;
    }

    /* Hogere specificiteit nodig: het thema zet op input[type="color"] zelf
       width: 100% / height: 30px (gemeten 100 x 30). */
    .stadslijn-controls .stadslijn-color-label .stadslijn-color-input {
        width: 44px;
        height: 44px;
    }

    .stadslijn-btn--next,
    .stadslijn-btn--cart {
        min-height: 48px;
    }

    /* Eigen keuzelijsten/invoervelden van het bewaarblok (JS zet inline
       opmaak, vandaar !important). */
    #sl-bewaar-knop {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }

    /* Het vinkje zelf is klein van vorm (24 px), maar het raakvlak is het hele
       label eromheen: dat moet de duimnorm halen. Gemeten was het vakje 13 x 13
       en het label ~40 px hoog. (De inline align-items:flex-start van de JS
       blijft staan; die wint van deze regel en dat is ook goed.) */
    #sl-bewaar-blok label {
        min-height: 44px;
        padding: 6px 0;
    }

    #sl-bewaar-toestemming {
        flex: 0 0 auto;   /* het vinkje kromp mee met de tekst ernaast (13 i.p.v. 24 px) */
        width: 24px;
        height: 24px;
    }

    #sl-bewaar-email {
        min-height: 44px !important;
    }

    /* Winkelwagen-icoon in de kop van de site. */
    .stadslijn-cart-menu-item > a {
        min-height: 44px;
        min-width: 44px;
    }

    /* 4 ── Schuifbalken: baan 8 px, kneepje 28 px, raakvlak 44 px --------- */
    .stadslijn-size-slider {
        height: 44px;
        border-radius: 0;
        background: linear-gradient(#ddd, #ddd) center / 100% 8px no-repeat;
    }

    .stadslijn-size-slider::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 4px;
        background: transparent;
    }

    .stadslijn-size-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -10px;
    }

    .stadslijn-size-slider::-moz-range-track {
        height: 8px;
        border-radius: 4px;
        background: #ddd;
    }

    .stadslijn-size-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    /* 5 ── Zoomknoppen van de kaart -------------------------------------
       Die knoppen zitten ín het kaartvlak, dat met factor S wordt vergroot en
       met scale(1/S) teruggezet (preview-detail). Daardoor zijn ze op een
       telefoon 7 x 7 px. De tegenschaal zet ze terug op hun eigen maat
       (--sl-preview-schaal zet de JS), daarna brengt de regel eronder ze op
       de duimnorm. */
    .stadslijn-map-container .maplibregl-ctrl-top-left,
    .stadslijn-map-container .maplibregl-ctrl-top-right,
    .stadslijn-map-container .maplibregl-ctrl-bottom-left,
    .stadslijn-map-container .maplibregl-ctrl-bottom-right {
        transform: scale(var(--sl-preview-schaal, 1));
    }

    .stadslijn-map-container .maplibregl-ctrl-top-right    { transform-origin: top right; }
    .stadslijn-map-container .maplibregl-ctrl-top-left     { transform-origin: top left; }
    .stadslijn-map-container .maplibregl-ctrl-bottom-right { transform-origin: bottom right; }
    .stadslijn-map-container .maplibregl-ctrl-bottom-left  { transform-origin: bottom left; }

    .stadslijn-map-container .maplibregl-ctrl-group button {
        width: 44px;
        height: 44px;
    }
}

/* 6 ── Instructie per apparaat -----------------------------------------
   Beide zinnen staan in de HTML (server/cache-veilig); de CSS kiest.
   Op een aanwijsapparaat met een echte cursor blijft de oude zin staan. */
.stadslijn-hint--vinger {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .stadslijn-hint--muis  { display: none; }
    .stadslijn-hint--vinger { display: inline; }
}