/* Główny wrapper na zdjęcia w loopie (kontener w Elementorze) */
.luminess-image-wrapper {
  width: 250px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

/* Główne zdjęcie (widget "Obraz produktu") */
.luminess-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* CAŁY widget shortcode ustawiamy jako warstwę nad obrazkiem */
.luminess-image-wrapper .elementor-widget-shortcode {
  position: absolute;
  inset: 0;
  z-index: 9999; /* nad obrazkiem */
  pointer-events: none; /* żeby klik w obraz dalej działał */
}

/* Warstwa hover wewnątrz shortcode */
.luminess-hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease-out 0.03s;
}

/* Obrazek hover – dopasowany do kontenera */
.luminess-hover-layer img.luminess-hover-image {
  width: 250px;
  height: 250px;
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0 auto;
}

/* Po najechaniu na wrapper ze zdjęciem pokazujemy hover image */
.luminess-image-wrapper:hover .luminess-hover-layer {
  opacity: 1;
}