/* ── Swiper layout: only on mobile/tablet ───────────────────────────────── */
@media (max-width: 1024px) {

    .e-con--swiper-mobile.swiper {
        overflow: hidden !important;
        position: relative !important;
        /* Width intentionally NOT overridden — Elementor controls it */
    }

    /* The inner wrapper becomes the Swiper track.
       Width is NOT forced — Swiper sets it via JS to (slideWidth × numSlides)
       so the overflow clips correctly and peek works. */
    .e-con--swiper-mobile .swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        height: auto !important;
        box-sizing: content-box;
        transition-property: transform;
        will-change: transform;
        /* Kill Elementor's gap/padding on the track itself */
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .e-con--swiper-mobile .swiper-slide {
        flex-shrink: 0 !important;
        width: 100% !important;
        height: auto !important;
        position: relative;
    }

    /* ── Arrows ─────────────────────────────────────────────────────── */
    .e-con--swiper-mobile .swiper-button-prev,
    .e-con--swiper-mobile .swiper-button-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.7);
        border-radius: 50%;
    }

    .e-con--swiper-mobile .swiper-button-prev { left: 8px; }
    .e-con--swiper-mobile .swiper-button-next { right: 8px; }

    /* Try swiper-icons font first; fall back to CSS chevron */
    .e-con--swiper-mobile .swiper-button-prev::after,
    .e-con--swiper-mobile .swiper-button-next::after {
        font-family: swiper-icons, sans-serif;
        font-size: 18px;
        text-transform: none !important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
        color: inherit;
    }

    .e-con--swiper-mobile .swiper-button-prev::after { content: 'prev'; }
    .e-con--swiper-mobile .swiper-button-next::after { content: 'next'; }

    /* CSS chevron fallback when font is missing */
    @supports not (font-family: swiper-icons) {
        .e-con--swiper-mobile .swiper-button-prev::after,
        .e-con--swiper-mobile .swiper-button-next::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-top:   2px solid currentColor;
            border-right: 2px solid currentColor;
            font-family: unset;
            font-size: unset;
        }
        .e-con--swiper-mobile .swiper-button-prev::after {
            transform: rotate(-135deg) translate(-2px, 2px);
        }
        .e-con--swiper-mobile .swiper-button-next::after {
            transform: rotate(45deg) translate(-2px, 2px);
        }
    }

    /* Disabled state */
    .e-con--swiper-mobile .swiper-button-disabled {
        opacity: 0.35;
        pointer-events: none;
    }

    /* ── Pagination dots ─────────────────────────────────────────────── */
    .e-con--swiper-mobile .swiper-pagination {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 10;
    }

    .e-con--swiper-mobile .swiper-pagination-bullet {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 0.3;
        margin: 0 4px;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .e-con--swiper-mobile .swiper-pagination-bullet-active {
        opacity: 1;
    }
}

/* ── Hide nav elements on desktop in case they were server-side rendered ── */
@media (min-width: 1025px) {
    .e-con--swiper-mobile .swiper-button-prev,
    .e-con--swiper-mobile .swiper-button-next,
    .e-con--swiper-mobile .swiper-pagination {
        display: none !important;
    }
}