/*!
 * Produktbild Hover-Zoom (Amazon-Stil), Version 1.3.2
 * module-prestashop.de
 */

.js-zoom-enabled {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

/* Natives Bild-Drag verhindern (führt sonst zu ruckelndem/hängendem Zoom) */
.js-zoom-enabled img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Classic: Der Klick-Layer bleibt klickbar (öffnet das Popup), zeigt aber
   nicht mehr sein weißes Lupen-Overlay, damit der Zoom sichtbar bleibt. */
.product-cover.js-zoom-enabled .layer {
    opacity: 0 !important;
    background: transparent !important;
}

/* Das Overlay, das die vergrößerte Bildausschnitt-Ansicht zeigt */
.js-zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.12s ease;
    z-index: 1;
}

.js-zoom-enabled.js-zoom-active .js-zoom-overlay {
    opacity: 1;
}

/* Original-Bild ausblenden, solange gezoomt wird - sonst schimmert es
   hinter dem vergrößerten Ausschnitt durch ("doppeltes Bild"). */
.js-zoom-enabled.js-zoom-active img.js-zoom-source {
    opacity: 0;
}

/* Kein Hover-Zoom auf Touch-Geräten (dort Pinch-Zoom nutzen). */
@media (pointer: coarse) {
    .js-zoom-overlay {
        display: none !important;
    }
}