/* =========================================================================
   PX Zoom — herbruikbare hover-zoom binnen kader (#084630 / #085714).
   Het kader (.px-zoom) klipt de overhang; de afbeelding schaalt 10% zodra je
   met de muis over de kaart (.px-zoom-host) of over het kader zelf gaat.
   Eén systeem zodat dit overal identiek werkt (productkaarten, blog, cases).
   Geen effect op touch-apparaten (geen echte hover).
   ========================================================================= */

.px-zoom {
    overflow: hidden;
}

.px-zoom > img,
.px-zoom .px-zoom__img,
.px-zoom > picture > img {
    display: block;
    transition: transform 0.5s var(--px-ease-out);
    transform-origin: center;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .px-zoom-host:hover .px-zoom > img,
    .px-zoom-host:hover .px-zoom .px-zoom__img,
    .px-zoom-host:hover .px-zoom > picture > img,
    .px-zoom:hover > img,
    .px-zoom:hover .px-zoom__img,
    .px-zoom:hover > picture > img {
        transform: scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .px-zoom > img,
    .px-zoom .px-zoom__img,
    .px-zoom > picture > img {
        transition: none;
    }
}