/* =====================================================
   PROMO SLIDER MOBILE — Frontend
   Visibile SOLO su schermi ≤ 768px
   ===================================================== */

.promo-slider-wrapper {
    display: none; /* nascosto su desktop */
}

@media (max-width: 768px) {

    .promo-slider-wrapper {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        margin: 0 0 20px 0;
    }

    /* ── TRACK: scorre orizzontalmente ── */
    .promo-slider-track {
        display: flex;
        gap: 12px;
        /* Nessun padding CSS: il margine sinistro della prima slide
           e l'ultimo margine destro vengono impostati via JS
           in base alla larghezza reale del wrapper → cross-browser e responsive. */
        padding: 0;
        scroll-padding-left: 0;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        cursor: grab;
        box-sizing: border-box;
    }

    .promo-slider-track::-webkit-scrollbar {
        display: none;
    }

    .promo-slider-track.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    /* ── SINGOLA SLIDE ── */
    .promo-slide {
        /* La larghezza viene impostata via JS: wrapper.offsetWidth - PEEK_PX
           Così è sempre esatta indipendentemente dal browser e dalla dimensione schermo. */
        flex: 0 0 auto; /* il width viene forzato da JS */
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        display: block;
        text-decoration: none;
        background: #f0f0f0;
        box-shadow: 0 2px 12px rgba(0,0,0,.15);
        transition: transform .2s ease, box-shadow .2s ease;
        user-select: none;
        -webkit-user-drag: none;
    }

    /* Leggero scale-down per le slide non attive → effetto profondità */
    .promo-slide:not(.active-slide) {
        transform: scale(0.97);
        box-shadow: 0 1px 6px rgba(0,0,0,.10);
    }

    .promo-slide.active-slide {
        transform: scale(1);
        box-shadow: 0 4px 18px rgba(0,0,0,.20);
    }

    /* ── IMMAGINE ── */
    .promo-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 9 / 16;
        pointer-events: none;
        -webkit-user-drag: none;
        user-select: none;
    }

    /* ── DOTS INDICATOR ── */
    .promo-slider-dots {
        display: none;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding-bottom: 4px;
    }

    .promo-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        border: none;
        background: #ccc;
        padding: 0;
        cursor: pointer;
        transition: background .25s ease, transform .25s ease, width .25s ease;
        outline: none;
    }

    .promo-dot.active {
        background: #e47911;
        width: 20px;
        border-radius: 4px;
        transform: scale(1);
    }

} /* end @media */