/* ==========================================================================
   LYCHE · Segunda imagen al pasar el cursor
   --------------------------------------------------------------------------
   Dos imágenes apiladas y un fundido. Sin salto de maquetación, porque la
   segunda va en posición absoluta sobre la primera y no ocupa espacio.
   ========================================================================== */

.lyc-thumb{
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 14px;
  background: #F9D9D1;
}

.lyc-thumb img{
  display: block;
  width: 100%;
  margin: 0 !important;
}

.lyc-thumb .lyc-thumb__hover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

/* Solo con cursor real. En táctil no existe el hover: mostrarla ahí sería
   un cambio de imagen que la clienta no pidió. */
@media (hover: hover) and (pointer: fine){
  .woocommerce ul.products li.product:hover .lyc-thumb.has-hover .lyc-thumb__hover,
  .lyc-thumb.has-hover:hover .lyc-thumb__hover{
    opacity: 1;
  }
}

/* Si la clienta eligió un color con los swatches, esa foto manda:
   el hover deja de pisarla. */
.woocommerce ul.products li.product.lyc-no-hover .lyc-thumb__hover{
  opacity: 0 !important;
}

/* Camino B: el tema pinta su propia miniatura y el JS cambia el src.
   Ahí el fundido lo hace el propio JS sobre la imagen existente. */
.woocommerce ul.products li.product img{
  transition: opacity .3s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}

.lyc-hover-data{ display: none !important; }

@media (prefers-reduced-motion: reduce){
  .lyc-thumb .lyc-thumb__hover,
  .woocommerce ul.products li.product img{ transition: none !important; }
}