/* Aestora hover-image plugin styles */

/* Győződj meg róla, hogy az <a> blokkok és a termék lista jelölései a kívánt struktúrában vannak */
.woocommerce ul.products li.product a {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Az alap termékkép viselkedése (ne nyomja le a hover képet) */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover kép — overlayként fedi az alapképet */
.woocommerce ul.products li.product a img.aestora-hover-image,
.woocommerce ul.products li.product a img.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* biztosítja, hogy jól töltse ki a helyet */
  opacity: 0;
  pointer-events: none; /* ne fogja meg az egeret */
  transition: opacity 0.25s ease-in-out;
  z-index: 5;
}

/* Hoverkor előtérbe hozza */
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover a img.aestora-hover-image,
  .woocommerce ul.products li.product:hover a img.hover-image {
    opacity: 1;
  }
}

/* Mobilon alapértelmezésben ne váltson (opcionális) 
@media (max-width: 768px) {
  .woocommerce ul.products li.product a img.aestora-hover-image,
  .woocommerce ul.products li.product a img.hover-image {
    display: none;
  }
}
*/