/**
 * YITH Wishlist - Estilos Personalizados JOMA
 * Posiciona el corazón a la derecha superior
 */

/* ============================================
   POSICIÓN DEL CORAZÓN - DERECHA SUPERIOR
   ============================================ */

/* Contenedor del botón de wishlist - versión clásica */
.yith-wcwl-add-to-wishlist-button-over-image {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
}

/* Quitar la clase que lo pone a la izquierda */
.yith-wcwl-add-to-wishlist-button-over-image--top-left,
.yith-wcwl-add-to-wishlist-button-over-image--top-right {
    left: auto !important;
    right: 10px !important;
}

/* ============================================
   NUEVA VERSIÓN YITH - BLOQUE EN ELEMENTOR LOOP
   ============================================ */

/* Contenedor del wishlist en Elementor loop/slider */
.yith-add-to-wishlist-button-block {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 999 !important;
}

/* El enlace/botón dentro del bloque */
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Icono del corazón - versión nueva */
.yith-add-to-wishlist-button-block .yith-wcwl-icon,
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button-icon {
    width: 24px !important;
    height: 24px !important;
    color: #000000 !important;
    stroke: #000000 !important;
    fill: transparent !important;
    transition: all 0.2s ease !important;
}

/* Ocultar el texto del botón ("Añadir a la lista de deseos") */
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button__label {
    display: none !important;
}

/* ============================================
   VERSIÓN CLÁSICA - BOTÓN ICONO
   ============================================ */

/* Botón del corazón - versión clásica */
.yith-wcwl-add-to-wishlist-button--icon-button {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icono del corazón - versión clásica */
.yith-wcwl-add-to-wishlist-button-icon {
    width: 24px !important;
    height: 24px !important;
    color: #000000 !important;
    stroke: #000000 !important;
    fill: transparent !important;
    transition: all 0.2s ease !important;
}

/* Corazón cuando está en hover */
.yith-wcwl-add-to-wishlist-button:hover .yith-wcwl-add-to-wishlist-button-icon,
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button:hover .yith-wcwl-icon {
    transform: scale(1.1) !important;
}

/* Corazón cuando el producto está en wishlist (relleno) */
.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button[data-state="added"] .yith-wcwl-add-to-wishlist-button-icon,
.yith-wcwl-add-to-wishlist-button.added .yith-wcwl-add-to-wishlist-button-icon,
.yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon,
.yith-add-to-wishlist-button-block[data-state="added"] .yith-wcwl-icon {
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* ============================================
   CONTENEDOR DEL PRODUCTO (para posicionamiento relativo)
   ============================================ */

/* Asegurar que el contenedor del producto tenga posición relativa */
.product,
li.product,
.type-product,
.e-loop-item,
.swiper-slide,
.elementor-widget-loop-grid .elementor-loop-container > div,
.elementor-widget-woocommerce-products .product {
    position: relative !important;
}

/* Contenedor del shortcode de Elementor - posicionamiento */
.elementor-shortcode:has(.yith-add-to-wishlist-button-block) {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 999 !important;
    width: auto !important;
    height: auto !important;
}

/* Si el contenedor padre no es relativo, forzarlo */
.e-con-inner:has(.yith-add-to-wishlist-button-block),
.e-con:has(.yith-add-to-wishlist-button-block) {
    position: relative !important;
}

/* ============================================
   SLIDER/CARRUSEL DE ELEMENTOR
   ============================================ */

/* En sliders de Elementor (swiper) */
.swiper-slide .yith-add-to-wishlist-button-block {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

/* En loop items de Elementor */
.e-loop-item .yith-add-to-wishlist-button-block {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

/* ============================================
   HOME Y ARCHIVOS DE PRODUCTOS
   ============================================ */

/* Productos en el home */
.home .yith-add-to-wishlist-button-block,
.home .yith-wcwl-add-to-wishlist-button-over-image {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

/* En productos del loop de Elementor */
.elementor-widget-shortcode:has(.yith-add-to-wishlist-button-block) {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 999 !important;
    width: auto !important;
}

/* Contenedor padre para el loop */
.elementor-element:has(> .elementor-widget-shortcode .yith-add-to-wishlist-button-block) {
    position: relative !important;
}

/* ============================================
   AJUSTES PARA ELEMENTOR
   ============================================ */

/* En productos de Elementor */
.elementor-widget-woocommerce-products .product {
    position: relative !important;
}

.elementor-widget-woocommerce-products .yith-wcwl-add-to-wishlist-button-over-image,
.elementor-widget-woocommerce-products .yith-add-to-wishlist-button-block {
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
}

/* En widgets de shortcode de Elementor */
.elementor-widget-shortcode {
    position: relative !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .yith-wcwl-add-to-wishlist-button-over-image,
    .yith-add-to-wishlist-button-block {
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
    }
    
    .yith-wcwl-add-to-wishlist-button-icon,
    .yith-add-to-wishlist-button-block .yith-wcwl-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .yith-wcwl-add-to-wishlist-button--icon-button,
    .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button {
        width: 28px !important;
        height: 28px !important;
    }
}