/* Este es el contenedor padre que sirve como "ventana" para el efecto */
.wishlist-container-wrapper {
  /* Establece la posición relativa para que los elementos internos se muevan con respecto a él. */
  position: relative; 
  /* Es crucial para esconder el contenido que está fuera del área. */
  overflow: hidden; 
  /* Define una altura fija que coincida con la altura del div interno. */
  height: 50px; /* Ajusta este valor si tu div es más alto. */
  /* Opcional: Define un ancho si es necesario. */
  width: 50px; 
}

/* Esta es la regla para el div que se va a mover. */
.item .item-wrap .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button, .item .item-wrap2 .item-detail .item-content .item-bottom .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button {
  /* Al igual que antes, definimos la posición inicial. */
  transform: translateY(100%); 
  /* Hacemos que el movimiento sea suave. */
  transition: transform 0.3s ease-in-out;
}

/* Esta es la regla clave: cuando el cursor está sobre el contenedor principal... */

.item .item-wrap:hover .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button, .item .item-wrap2:hover .item-detail .item-content .item-bottom .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button{
	  transform: translateY(0); 

}

#top_selling_products_home .yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button) svg.yith-wcwl-add-to-wishlist-button-icon{
	color:#fff;
}