.kordit-section--slider {
    .slider-editor {
        width: 100%;

        &__slides {
            width: 100%;
            // Editor mimics the frontend Swiper: one horizontal row with
            // overflow scroll, so users can pan through all slides and
            // the add-card appender is always reachable at the end.
            overflow-x: auto !important;
            overflow-y: visible !important;

            // InnerBlocks wrapper - flex NOWRAP layout.
            // Scoped to DIRECT descendants only (>) so the rule does not
            // cascade into nested .block-editor-block-list__layout
            // elements inside child blocks like kordit/opinia, which
            // have their own InnerBlocks and must keep their default
            // vertical block flow.
            > .block-editor-inner-blocks > .block-editor-block-list__layout {
                display: flex !important;
                flex-wrap: nowrap !important;
                gap: var(--slider-gap, 1rem) !important;
                align-items: stretch;
                // Let the row extend past the viewport horizontally.
                width: max-content;
                min-width: 100%;
            }

            // Every direct slide child — any block type (opinia, slide,
            // image, whatever) plus the appender — gets constrained to
            // --slide-width so slides line up side by side exactly like
            // the frontend Swiper slides.
            > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
                flex: 0 0 var(--slide-width, 100%);
                max-width: var(--slide-width, 100%);
                min-height: 300px;
            }
        }
    }

    // "Dodaj slajd" toolbar lives OUTSIDE the horizontally-scrolling
    // slidesWrap, so it's always visible regardless of how wide the
    // slides are. Previous design (renderAppender card inline with
    // slides) broke on single-slide-per-view carousels because each
    // slide was 1300+px wide and the appender ended up far past the
    // right edge of the scroll viewport.
    .slider-editor__toolbar {
        display: flex;
        justify-content: center;
        padding: 1rem 0 0;
        margin-top: 1rem;
        border-top: 1px dashed rgba(0, 0, 0, 0.12);
    }

    .kordit-slider-add-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: transparent;
        border: 1px dashed rgba(0, 0, 0, 0.25);
        border-radius: 999px;
        color: rgba(0, 0, 0, 0.55);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

        &:hover,
        &:focus-visible {
            background: var(--wp--preset--color--accent, #0066ff);
            border-color: var(--wp--preset--color--accent, #0066ff);
            color: #fff;
            outline: none;
        }

        &__plus {
            font-size: 20px;
            line-height: 1;
            font-weight: 300;
        }
    }
}