/* 3. CAMBIAR TODO AL POSICIONAR EL MOUSE (HOVER) */
/* Asegura que nada se ponga verde o rojo al tocarlo */
a:hover, 
button:hover, 
.button:hover, 
[class*="title"]:hover,
i:hover {
    color: #0052cc !important; /* Azul vibrante al pasar el mouse */
    background-color: transparent !important;
}

/* 4. PRECIOS EN AZUL Y MÁS GRANDES */
.price, 
.amount, 
.woocommerce-Price-amount {
    color: #003366 !important;
    font-size: 26px !important;
    font-weight: bold !important;
}

/* 5. FONDO BLANCO Y TEXTO NEGRO (image_6.png) */
html, body, #wrapper, #main {
    background-color: #ffffff !important;
}

p, li, h1, h2, h3, h4 {
    color: #000000 !important;
}

/* 6. ICONOS DE CABECERA Y REDES */
.site-header i, .social-icons a {
    color: #003366 !important;
}
/* 1. OCULTAR BOTÓN 'AÑADIR AL CARRITO' POR DEFECTO */
.products .product .add_to_cart_button, 
.products .product .button {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out !important;
    position: absolute !important;
    bottom: 10% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #003366 !important; /* Azul Quasar */
    color: #ffffff !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* 2. MOSTRAR BOTÓN SOLO AL POSICIONAR EL MOUSE (HOVER) */
.products .product:hover .add_to_cart_button, 
.products .product:hover .button {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: 15% !important;
}

/* 3. CORREGIR EL TAMAÑO DE LA IMAGEN */
/* Evita que el botón verde gigante de la imagen 8 tape la foto */
.products .product .image-none, 
.products .product img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 4. ELIMINAR CUALQUIER FONDO VERDE RESTANTE (image_8.png) */
.products .product .add_to_cart_button,
.products .product .price,
.products .product .label-new {
    background-color: transparent;
/* CENTRAR LA GRILLA DE PRODUCTOS */
.products, 
ul.products {
    justify-content: center !important; /* Mueve todo el bloque al centro */
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    max-width: 1200px !important; /* Limita el ancho para que no se estire de más */
}

/* ASEGURAR QUE CADA PRODUCTO ESTÉ ALINEADO */
.products .product, 
ul.products .product {
    text-align: center !important; /* Centra el título y precio bajo la foto */
    float: none !important;
    display: inline-block !important;
}