/**
* Theme Name: Besa Child
* Description: This is a child theme for Besa
* Author: Thembay
* Author URI: https://thembay.com/
* Version: 1.0
* Template: besa
*/


/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */

/* =====================================================
   Fix: WooCommerce Product Image Flipper + Besa Theme
   El plugin usa a.woocommerce-loop-product__link pero
   Besa usa a.product-image. Este CSS corrige el conflicto
   para que la imagen secundaria quede oculta por defecto
   y solo aparezca al hacer hover, sin duplicarse.
   ===================================================== */

/* Ocultar imagen secundaria del plugin en contexto del tema Besa */
a.product-image .wp-post-image--secondary {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
}

/* Transicion en imagen principal */
a.product-image .wp-post-image {
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
}

/* Hover: ocultar principal, mostrar secundaria */
a.product-image:hover .wp-post-image {
    opacity: 0 !important;
}
a.product-image:hover .wp-post-image--secondary {
    opacity: 1 !important;
}

/* Position relative en el figure para que el absolute funcione */
figure.image {
    position: relative;
    overflow: hidden;
}