/*
Theme Name: Hello Elementor Child
Description: Child theme for Hello Elementor
Template: hello-elementor
Version: 1.0
*/



/* ==========================================================
   CLASE: btn-full-width

   Uso:
   Añadir la clase CSS:

   btn-full-width

   al widget de productos WooCommerce en Elementor.

   Objetivo:
   - Mantener la estructura nativa de WooCommerce.
   - Mantener el botón debajo del precio.
   - Hacer que el botón ocupe el 100% del ancho.
   - Mejorar la consistencia visual entre productos.

   Ejemplo de uso:

   btn-full-width

========================================================== */


/* ==========================================================
   BOTÓN "AÑADIR AL CARRITO"

   El botón conserva su posición original
   debajo del precio.

   Únicamente se amplía para ocupar todo
   el ancho disponible de la tarjeta.
========================================================== */

.btn-full-width .woocommerce-loop-product__buttons .button{

    /* Ancho completo */
    display:block !important;
    width:100% !important;

    /* Mantener cálculo correcto del ancho */
    box-sizing:border-box;

    /* Centrar texto */
    text-align:center;
}




/* ==========================================================
   CLASE: hover-product-image
   ==========================================================

   Uso:
   Añadir la clase CSS:

   hover-product-image

   al widget de productos WooCommerce en Elementor.

   Objetivo:
   - Aplicar un ligero zoom a la imagen del producto.
   - Reforzar la sensación premium.
   - Mantener una animación elegante y discreta.

   Ejemplo de uso:

   hover-product-image

========================================================== */


/* ==========================================================
   CONTENEDOR DE PRODUCTO
========================================================== */

.hover-product-image li.product{
    overflow:hidden;
}


/* ==========================================================
   IMAGEN DEL PRODUCTO
========================================================== */

.hover-product-image li.product img{

    /* Animación suave */
    transition:transform .6s ease;
}


/* ==========================================================
   EFECTO HOVER
========================================================== */

.hover-product-image li.product:hover img{

    /* Escalado suave del 3% */
    transform:scale(1.03);
}




/* ==========================================
   OCULTAR ENLACE "VER CARRITO"
   ==========================================

   WooCommerce crea automáticamente un enlace
   "Ver carrito" después de pulsar en
   "Añadir al carrito".

   Lo ocultamos para mantener una experiencia
   más limpia y premium en el ecommerce.
*/

.added_to_cart{
    display:none !important;
}




/* ==========================================================
   HOVER PREMIUM CARD
   ==========================================================

   Clase reutilizable para contenedores Elementor.

   Uso:
   Añadir la siguiente clase CSS al contenedor:

   hover-premium-card

   Efectos:
   - Zoom suave de la imagen.
   - Línea dorada inferior animada.
   - Estética premium y minimalista.
*/


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ==========================================================

   Necesario para posicionar correctamente la línea
   decorativa y evitar que el zoom sobresalga del bloque.
*/

.hover-premium-card{
    position:relative;
    overflow:hidden;
}


/* ==========================================================
   EFECTO ZOOM DE IMAGEN
   ==========================================================

   Escalado suave de la imagen al pasar el cursor.

   Valor actual:
   1.03 = aumento del 3%
*/

.hover-premium-card .elementor-background-slideshow__slide__image{
    transition:transform .6s ease;
}

.hover-premium-card:hover .elementor-background-slideshow__slide__image{
    transform:scale(1.03);
}


/* ==========================================================
   LÍNEA DECORATIVA INFERIOR
   ==========================================================

   Línea dorada corporativa situada en el borde
   inferior real de la tarjeta.

   Color corporativo:
   #B8935A
*/

.hover-premium-card::after{

    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:4px;

    background:#B8935A;

    transition:width .45s ease;
}


/* ==========================================================
   ANIMACIÓN DE LA LÍNEA
   ==========================================================

   La línea se dibuja de izquierda a derecha
   al pasar el cursor sobre la tarjeta.
*/

.hover-premium-card:hover::after{

    width:100%;

}



/* ==========================================================
   AJUSTE DEL TEXTO "IVA INCLUIDO"
   ==========================================================

   WooCommerce muestra el texto adicional del precio
   (por ejemplo: "IVA incluido") mediante la clase
   .woocommerce-price-suffix.

   Se aumenta el tamaño de fuente para mejorar la
   legibilidad y mantener una jerarquía visual coherente
   con el precio principal del producto.

   Valor actual:
   16px = tamaño optimizado para desktop y móvil
*/

small.woocommerce-price-suffix {
    font-size: 16px;
}