/*
 * HorecaDepot product-card image behavior - Phase 2.
 * The primary image stays visible unless a real .hover-img exists.
 */

.product-grid-item .wd-product-thumb a > img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transform-origin: center !important;
    transition: opacity var(--hd-motion-complex) var(--hd-ease-standard),
                transform var(--hd-motion-complex) var(--hd-ease-standard) !important;
}

.product-grid-item .wd-product-thumb .hover-img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transform-origin: center !important;
    transition: opacity var(--hd-motion-complex) var(--hd-ease-standard),
                visibility 0s linear var(--hd-motion-complex),
                transform var(--hd-motion-complex) var(--hd-ease-standard) !important;
}

/* Fine-pointer cards may zoom or swap images from wide mobile upward. */
@media (min-width: 577px) and (hover: hover) and (pointer: fine) {
    .product-grid-item .wd-product-thumb:not(:has(.hover-img)):hover a > img {
        transform: scale(1.04) !important;
    }

    .product-grid-item .wd-product-thumb:has(.hover-img):hover a > img {
        opacity: 0 !important;
    }

    .product-grid-item .wd-product-thumb:has(.hover-img):hover .hover-img {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1.04) !important;
        transition-delay: 0s !important;
    }
}

/* Phone and touch input always keep the primary image static. */
@media (max-width: 576px), (hover: none), (pointer: coarse) {
    .product-grid-item .wd-product-thumb a > img,
    .product-grid-item .wd-product-thumb:hover a > img {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .product-grid-item .wd-product-thumb .hover-img {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }
}

/* Fix-forward 2026-07-16: cover WoodMart product widgets/related cards. */
.wd-product .wd-product-thumb a > img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transform-origin: center !important;
}

.wd-product .wd-product-thumb .hover-img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transform-origin: center !important;
}

@media (min-width: 577px) and (hover: hover) and (pointer: fine) {
    .wd-product .wd-product-thumb:not(:has(.hover-img)):hover a > img {
        transform: scale(1.04) !important;
    }

    .wd-product .wd-product-thumb:has(.hover-img):hover a > img {
        opacity: 0 !important;
    }

    .wd-product .wd-product-thumb:has(.hover-img):hover .hover-img {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1.04) !important;
        transition-delay: 0s !important;
    }
}

@media (max-width: 576px), (hover: none), (pointer: coarse) {
    .wd-product .wd-product-thumb a > img,
    .wd-product .wd-product-thumb:hover a > img {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .wd-product .wd-product-thumb .hover-img {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }
}