/* ==========================================================================
   MP Scroll Gallery
   Thumbnails: da griglia a carosello orizzontale scrollabile touch.
   Immagine principale: cursori per indicare il drag/swipe.
   ========================================================================== */

/* --- Lista miniature: riga unica scrollabile orizzontalmente --- */
.product__thumbnails .product__thumbnails-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Nessuno scroll-snap: lo snap (mandatory) "incollava" lo strip e lo
       riportava sempre alla stessa posizione al rilascio. Scorrimento libero. */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    /* Su touch lasciamo lo scroll nativo: pan-x scorre lo strip orizzontale
       (fluido, con inerzia), pan-y lascia scorrere la pagina in verticale.
       Il drag con mouse/pen (desktop) e' gestito via JS. */
    touch-action: pan-x pan-y;
    padding-bottom: 4px;
    margin: 0;
    list-style: none;
    /* Drag: nessuna selezione testo durante il trascinamento */
    cursor: grab;
}

.product__thumbnails .product__thumbnails-list.mp-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Ogni miniatura mantiene la sua dimensione e non si restringe */
.product__thumbnails .product__thumbnails-list .product__thumbnail,
.product__thumbnails .product__thumbnails-list > li {
    flex: 0 0 auto;
    margin: 0;
}

/* Evita che l'immagine venga "afferrata" come ghost-drag nativo */
.product__thumbnails .product__thumbnails-list img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- Scrollbar nascosta: si scorre solo con swipe touch / drag mouse --- */
.product__thumbnails .product__thumbnails-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Firefox */
.product__thumbnails .product__thumbnails-list {
    scrollbar-width: none;
}

/* IE / Edge legacy */
.product__thumbnails .product__thumbnails-list {
    -ms-overflow-style: none;
}

/* --- Immagine principale e modale: feedback visivo di swipe --- */
.product__carousel.mp-swipe-ready,
.product-images-modal__carousel.mp-swipe-ready {
    touch-action: pan-y;
    cursor: grab;
}
.product__carousel.mp-swipe-ready.mp-grabbing,
.product-images-modal__carousel.mp-swipe-ready.mp-grabbing {
    cursor: grabbing;
}

/* Durante lo swipe evita che le immagini vengano trascinate come ghost */
.product__carousel.mp-swipe-ready .carousel-item img,
.product-images-modal__carousel.mp-swipe-ready .carousel-item img {
    -webkit-user-drag: none;
    user-select: none;
}

/* --- Modale zoom: corpo scrollabile con momentum touch --- */
.product-images-modal__body.modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* --- Modale immagini: sfondo semi-trasparente "stile cinema" --- */
/* Il tema apre il modale SENZA backdrop, quindi lo sfondo resta trasparente e
   si vede la pagina dietro. L'elemento .modal e' fixed a tutta viewport: gli
   diamo uno sfondo scuro semi-trasparente per l'effetto cinema/ombra. */
.product-images-modal.modal {
    background-color: rgba(0, 0, 0, 0.8);
}

/* --- Modale immagini: adatta il contenuto alla pagina --- */
/* L'immagine originale e' molto grande (es. 1440px) e rendeva il modale piu'
   alto dello schermo, costringendo a scorrere. La facciamo rientrare nella
   viewport mantenendo le proporzioni (3.5rem ~ margini dialog, 9rem lascia
   spazio anche all'header del modale). */
.product-images-modal .modal-content {
    max-height: calc(100vh - 3.5rem);
}
.product-images-modal__carousel .carousel-item img {
    max-height: calc(100vh - 9rem);
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}