/* ============================================================
   1) Neutralisation du CSS du thème
   ============================================================ */

.dd-product-image img.ddproduct-img1 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transition: none !important;
}

.dd-product-image {
    position: relative !important;
    overflow: hidden !important;
}

/* ============================================================
   2) Image secondaire (drugi_image)
   ============================================================ */

.dd-product-image img.drugi_image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0;
    z-index: 2 !important;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    transform-origin: center center;
}

/* ============================================================
   3) Effet FADE
   ============================================================ */

.dd-product-image:hover img.drugi_image.hover-effect-fade {
    opacity: 1 !important;
}

/* ============================================================
   4) Effet ZOOM
   ============================================================ */

.dd-product-image:hover img.drugi_image.hover-effect-zoom {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

/* ============================================================
   5) Effets SLIDE
   ============================================================ */

img.drugi_image.hover-effect-slide-top {
    transform: translateY(100%);
}
.dd-product-image:hover img.drugi_image.hover-effect-slide-top {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

img.drugi_image.hover-effect-slide-bottom {
    transform: translateY(-100%);
}
.dd-product-image:hover img.drugi_image.hover-effect-slide-bottom {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

img.drugi_image.hover-effect-slide-left {
    transform: translateX(100%);
}
.dd-product-image:hover img.drugi_image.hover-effect-slide-left {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

img.drugi_image.hover-effect-slide-right {
    transform: translateX(-100%);
}
.dd-product-image:hover img.drugi_image.hover-effect-slide-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* ============================================================
   6) Effet BLUR
   ============================================================ */

img.drugi_image.hover-effect-blur {
    filter: blur(4px);
}
.dd-product-image:hover img.drugi_image.hover-effect-blur {
    filter: blur(0) !important;
    opacity: 1 !important;
}

/* ============================================================
   7) Effet ROTATE
   ============================================================ */

img.drugi_image.hover-effect-rotate {
    transform: rotate(-10deg) scale(1);
}
.dd-product-image:hover img.drugi_image.hover-effect-rotate {
    transform: rotate(0deg) scale(1.05) !important;
    opacity: 1 !important;
}

/* ============================================================
   8) Effet PREMIUM : Slide + Fade
   ============================================================ */

img.drugi_image.hover-effect-slidefade {
    transform: translateY(20px);
    opacity: 0;
}
.dd-product-image:hover img.drugi_image.hover-effect-slidefade {
    transform: translateY(0);
    opacity: 1 !important;
}

/* ============================================================
   9) Effet PREMIUM : Zoom-out + Fade-in
   ============================================================ */

img.drugi_image.hover-effect-zoomoutfade {
    transform: scale(1.15);
    opacity: 0;
}
.dd-product-image:hover img.drugi_image.hover-effect-zoomoutfade {
    transform: scale(1);
    opacity: 1 !important;
}

/* ============================================================
   10) Effet PREMIUM : Micro-Parallax
   ============================================================ */

img.drugi_image.hover-effect-parallax {
    transform: translateY(5px) scale(1.03);
    opacity: 0;
}
.dd-product-image:hover img.drugi_image.hover-effect-parallax {
    transform: translateY(0) scale(1);
    opacity: 1 !important;
}