/* ==========================================================================
   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;
}

/* --- Frecce laterali dello strip miniature (create da mpscrollgallery.js) --- */
.product__thumbnails.mp-thumbs-has-arrows {
    position: relative;
}

/* Spazio ai lati perche' le frecce non coprano la prima/ultima miniatura */
.product__thumbnails.mp-thumbs-has-arrows.mp-thumbs-scrollable .product__thumbnails-list {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.mp-thumbs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d8e2ee;
    border-radius: 50%;
    background: #fff;
    color: #084c95;
    box-shadow: 0 2px 8px rgba(16, 42, 74, 0.14);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Compaiono solo se lo strip e' davvero scorrevole */
.mp-thumbs-has-arrows.mp-thumbs-scrollable .mp-thumbs-arrow {
    display: flex;
}

.mp-thumbs-arrow--prev { left: 0; }
.mp-thumbs-arrow--next { right: 0; }

.mp-thumbs-arrow .material-icons {
    font-size: 22px;
    line-height: 1;
}

.mp-thumbs-arrow:hover:not(:disabled) {
    background: #084c95;
    border-color: #084c95;
    color: #fff;
}

.mp-thumbs-arrow:disabled {
    opacity: .35;
    cursor: default;
    box-shadow: none;
}

/* 29/07 — Le frecce restano anche su TOUCH (richiesta utente): lo swipe da solo
   non segnala che ci sono altre miniature, e su telefono lo strip scorre quasi
   sempre (gia' con 3 immagini: ~568px di contenuto in ~366px di spazio).
   Prima c'era qui un `@media (hover: none) { display: none }` che le spegneva:
   e' il motivo per cui sembrava che le frecce non fossero mai state aggiunte.
   Su schermo piccolo si rimpiccioliscono, cosi' rubano poco spazio alle
   miniature; il padding dello strip si riduce di conseguenza. */
@media (max-width: 575.98px) {
    .mp-thumbs-arrow {
        width: 28px;
        height: 28px;
    }
    .mp-thumbs-arrow .material-icons {
        font-size: 18px;
    }
    .product__thumbnails.mp-thumbs-has-arrows.mp-thumbs-scrollable .product__thumbnails-list {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/* Su touch non esiste l'hover: senza questo il :hover resta "appiccicato"
   sull'ultima freccia toccata (blu pieno) finche' non si tocca altrove. */
@media (hover: none) {
    .mp-thumbs-arrow:hover:not(:disabled) {
        background: #fff;
        border-color: #d8e2ee;
        color: #084c95;
    }
    .mp-thumbs-arrow:active:not(:disabled) {
        background: #084c95;
        border-color: #084c95;
        color: #fff;
    }
}

/* --- 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;
}

/* --- Zoom lente + riquadro di ingrandimento (creati da mpscrollgallery.js) ---
   Replica della funzione di magiczoomplus della produzione. Il riquadro e la
   lente sono in `fixed`: la geometria viene calcolata dal JS a ogni movimento,
   cosi' non dipendiamo dal contesto di posizionamento della colonna prodotto.
   z-index 1040: sopra l'aside sticky (1020) e il menu (1030), sotto il modale
   immagini di Bootstrap (1055). */
.mp-zoom-panel {
    position: fixed;
    z-index: 1040;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(16, 42, 74, 0.18);
    /* Non deve rubare gli eventi: il puntatore resta sull'immagine sotto. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.mp-zoom-panel.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Finestra stretta: il riquadro non ci sta a destra e va sopra l'immagine */
.mp-zoom-panel.mp-zoom-panel--inner {
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.mp-zoom-panel__img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    -webkit-user-drag: none;
    user-select: none;
}

.mp-zoom-lens {
    position: fixed;
    z-index: 1041;
    border: 1px solid rgba(8, 76, 149, 0.8);
    background: rgba(8, 76, 149, 0.12);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}

.mp-zoom-lens.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Mentre si ingrandisce il cursore "grab" dello swipe non ha piu' senso.
   Il trascinamento resta possibile: .mp-grabbing ha specificita' maggiore. */
.product__carousel.mp-zoom-active {
    cursor: crosshair;
}

/* Suggerimento mostrato una sola volta, come `hint: once` di produzione.
   In ALTO e non in fondo: le immagini prodotto sono quadrate e alte ~800px,
   quindi il bordo inferiore dell'immagine finisce quasi sempre sotto la piega
   e il suggerimento non si vedrebbe mai. Le flag prodotto (che occupano
   l'angolo in alto a sinistra) sulla scheda sono nascoste dal tema child. */
.mp-zoom-hint {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 3;
    max-width: calc(100% - 1.5rem);
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(8, 76, 149, 0.88);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* --- Zoom da touch nella galleria ingrandita (setupTouchZoom) ---
   `touch-action: none` sull'immagine: senza, al primo movimento il browser si
   prende il gesto per scorrere/ingrandire la pagina e i pointermove smettono
   di arrivare a meta' pizzico. Lo swipe di Bootstrap usa i pointer event,
   quindi continua a funzionare (anzi, diventa piu' affidabile). */
.product-images-modal__carousel .carousel-item img {
    touch-action: none;
    transform-origin: 50% 50%;
}

/* Transizione SOLO per il doppio tocco: durante il pizzico l'animazione
   renderebbe il gesto in ritardo di un fotogramma. */
.product-images-modal__carousel .carousel-item img.mp-tz-anim {
    transition: transform .2s ease-out;
}

/* Mentre si e' ingranditi le frecce coprirebbero l'immagine e i tocchi ai
   bordi finirebbero su di loro invece che sul trascinamento. */
.product-images-modal__carousel.mp-touch-zoomed .carousel-control-prev,
.product-images-modal__carousel.mp-touch-zoomed .carousel-control-next {
    opacity: 0;
    pointer-events: none;
}

/* L'immagine ingrandita deve poter uscire dai bordi della slide */
.product-images-modal__carousel.mp-touch-zoomed .carousel-inner,
.product-images-modal__carousel.mp-touch-zoomed .carousel-item {
    overflow: visible;
}

/* --- 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;
}