/* ===== Inline-Bildzoom für Produktbilder (Amazon-Stil) ===== */

.product-cover {
    position: relative;
    overflow: hidden;
}

.product-cover.js-zoom-enabled {
    cursor: zoom-in;
}

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

/* Der bestehende Klick-Layer fürs "Alle Bilder"-Modal wird nicht mehr
   gebraucht -> ausblenden. Der Miniaturbild-Wechsel unter dem Hauptbild
   ist davon unabhängig und funktioniert weiterhin normal. */
.product-cover .layer {
    display: none !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: 5;
}

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

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

/* Auf kleinen Bildschirmen kein Hover-Zoom (dort Pinch-Zoom nutzen) */
@media (max-width: 991px) {
    .js-zoom-overlay {
        display: none !important;
    }
}