/*
 Theme Name:   GeneratePress Child
 Theme URI:   
 Description:  Default GeneratePress child theme
 Author:       Alba Digital Development
 Author URI:   https://albadigitaldevelopment.com
 Template:     generatepress
 Version:      0.1
*/

/*
 * =========================================================================
 * 1. DISEÑO DE CUADRÍCULA DE PRODUCTOS (Categorías)
 * =========================================================================
 */

/* Forzar 2 columnas en móvil */
@media (max-width: 768px) {
    .woocommerce ul.products {
        /* Usamos !important para asegurarnos de ganar a GeneratePress */
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }
}

/* Forzar 3 columnas en PC */
@media (min-width: 769px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 20px;
    }
}

/*
 * =========================================================================
 * 2. ESTILOS DEL BOTÓN "COMPRAR AHORA"
 * =========================================================================
 */

.woocommerce ul.products li.product .buy-now-button {
    /* * Le damos un estilo "secundario" o diferente.
     * Por ejemplo, un fondo de color y texto blanco.
     */
    background-color: #3d3d3d;
    color: #fff;
    
    /* Espacio para separarlo del botón de "Añadir al carrito" */
    margin-top: 8px;
    
    /* Asegurarnos de que tenga el mismo ancho */
    display: block;
    text-align: center;
}

.woocommerce ul.products li.product .buy-now-button:hover {
    background-color: #000;
    color: #fff;
}

/*
 * =========================================================================
 * 3. ESTILOS PERSONALIZADOS PARA EL CHECKOUT
 * =========================================================================
 */

/* * Forzar un diseño de 1 columna para un flujo más limpio.
 * Desactiva las columnas flotantes de WooCommerce.
 */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none; /* Desactiva el float */
    width: 100% !important; /* Fuerza el ancho completo */
    margin-bottom: 30px;
}

/* * Darle un estilo más prominente a la caja "Tu Pedido"
 */
#order_review {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 24px;
    border-radius: 8px;
}

/* Darle estilo al título "Tu Pedido" */
#order_review h3#order_review_heading {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.5rem;
}

/* * Limpiar el área de métodos de pago
 */
.woocommerce-checkout #payment {
    background-color: #fdfdfd;
    border-radius: 8px;
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 20px;
    border-bottom: 0;
}

/* * Estilo del botón principal "Realizar el pedido"
 */
.woocommerce-checkout .button.alt {
    background-color: #000;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    width: 100%;
    border-radius: 5px;
}

.woocommerce-checkout .button.alt:hover {
    background-color: #333;
}

/*
 * =========================================================================
 * 4. ESTILOS PERSONALIZADOS PARA EL CARRITO (WC Cart)
 * =========================================================================
 */

/* * Forzar un diseño de 1 columna en móviles
 */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        float: none;
        width: 100% !important;
    }
}

/* * Estilo del botón principal "Ir al Checkout"
 */
.woocommerce-cart .wc-proceed-to-checkout .button.checkout-button {
    background-color: #000;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px; /* Espacio extra */
}

.woocommerce-cart .wc-proceed-to-checkout .button.checkout-button:hover {
    background-color: #333;
}

/* * Limpiar la tabla de productos del carrito
 */
.woocommerce-cart table.cart {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Mantiene las esquinas redondeadas */
}

.woocommerce-cart table.cart thead {
    background-color: #f9f9f9;
}

.woocommerce-cart table.cart thead th {
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}

/* * Estilo de la caja "Totales del Carrito"
 */
.woocommerce-cart .cart-collaterals .cart_totals {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 24px;
    border-radius: 8px;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.5rem;
}
/*
 * =========================================================================
 * 5. ESTILOS DEL BOTÓN FLOTANTE DE WHATSAPP
 * =========================================================================
 */

.whatsapp-floating-button {
    /* Posicionamiento */
    position: fixed;
    bottom: 25px;
    right: 25px; /* Cambia a left: 25px; para ponerlo a la izquierda */
    z-index: 999; /* Asegura que esté por encima de todo */

    /* Apariencia */
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: #FFF;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Círculo perfecto */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Centrar el icono SVG */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animación */
    transition: transform 0.2s ease-in-out;
}

.whatsapp-floating-button svg {
    width: 28px;
    height: 28px;
    fill: #FFF;
}

/* Efecto al pasar el mouse */
.whatsapp-floating-button:hover {
    transform: scale(1.1);
    color: #FFF;
}
/*
 * =========================================================================
 * 6. ESTILOS DE LA PÁGINA DE TIENDA (Shop)
 * =========================================================================
 */

/* * 1. Estilo de la barra de Ordenación y Contador
 * Los pone en una barra limpia por encima de los productos.
 */
.woocommerce .woocommerce-before-shop-loop {
    display: flex;
    justify-content: space-between; /* Contador a la izq, Ordenación a la der */
    align-items: center;
    padding: 12px 16px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 25px;
}

/* * 2. Estilo del menú desplegable de Ordenación
 */
.woocommerce .woocommerce-ordering select {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 5px;
    background-color: #fff;
    font-size: 0.9rem;
}

/* * 3. Estilo de la Paginación (botones 1, 2, 3...)
 * Los hace ver como botones modernos.
 */
.woocommerce nav.woocommerce-pagination {
    margin-top: 40px;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    display: inline-block;
    border: none;
    margin: 0 4px; /* Espacio entre botones */
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    color: #333;
    text-decoration: none;
    border-radius: 8px; /* Esquinas redondeadas, como tus botones */
    transition: all 0.2s ease;
    font-weight: bold;
}

/* Estilo al pasar el mouse */
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
}

/* Estilo de la página actual (activa) */
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* * 4. Adaptación móvil para la barra de Ordenación
 * Apila el contador y la ordenación verticalmente.
 */
@media (max-width: 768px) {
    .woocommerce .woocommerce-before-shop-loop {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .woocommerce .woocommerce-ordering {
        width: 100%;
    }

    .woocommerce .woocommerce-ordering select {
        width: 100%;
    }
}
/*
 * =========================================================================
 * 7. ESTILOS DE LA PÁGINA "MI CUENTA"
 * =========================================================================
 */

/* * 1. Estilo del menú de navegación lateral
 * Lo convierte en botones claros.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 8px; /* Espacio entre cada botón */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 18px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Esquinas redondeadas, como tus botones */
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Estado hover (al pasar el mouse) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #000;
}

/* Estado activo (la pestaña actual) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* * 2. Estilo del panel de contenido principal
 * Le da el mismo fondo gris que el checkout.
 */
.woocommerce-account .woocommerce-MyAccount-content {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 24px;
    border-radius: 8px;
}

/* * 3. Estilo de los botones (Guardar, etc.)
 */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
    background-color: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
    background-color: #333;
    color: #fff;
}

/* * 4. Adaptación móvil
 * Apila la navegación encima del contenido.
 */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none;
        width: 100% !important;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }
}

/*
 * =========================================================================
 * 8. ESTILOS DEL MENÚ DESPLEGABLE MÓVIL (VERSIÓN CORREGIDA FINAL)
 * =========================================================================
 */

/* 1. El contenedor principal (el panel desplegable) */
/* Apuntamos a la clase que GP usa en modo "dropdown" */
.main-navigation.is-menu-open.nav-open {
    background-color: #fdfdfd !important; /* Fondo blanco-hueso */
    box-shadow: none !important; /* ¡Sin sombra! */
    border-top: 1px solid #eee !important;
    
    /* Forzamos que ocupe el ancho y no sea "flotante" */
    position: static !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* 2. Estilo de los elementos <li> */
.main-navigation.is-menu-open .main-nav > ul > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eee !important;
    background-color: transparent !important; /* Quitar fondo de GP */
}

/* 3. Estilo de los enlaces <a> */
.main-navigation.is-menu-open .main-nav > ul > li > a {
    padding: 18px 20px !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: #222 !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: background-color 0.2s ease !important;
}

/* 4. Efecto Hover */
.main-navigation.is-menu-open .main-nav > ul > li > a:hover {
    background-color: #f0f0f0 !important;
    color: #000 !important;
}

/* 5. Último elemento */
.main-navigation.is-menu-open .main-nav > ul > li:last-child {
    border-bottom: none !important;
}

/*
 * =========================================================================
 * 6. PERSONALIZAR CAMPOS DEL CHECKOUT DE WOOCOMMERCE (Paso 2: Ocultar)
 * =========================================================================
 * Oculta de forma segura los campos que hicimos opcionales con PHP.
 */
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #billing_postcode_field {
    display: none !important;
}

/*
 * =========================================================================
 * 6. PERSONALIZAR CAMPOS DEL CHECKOUT DE WOOCOMMERCE (Paso 2: Ocultar)
 * =========================================================================
 * Oculta de forma segura los campos que dejamos como opcionales.
 * Mostramos País, Estado y C. Postal, ya que son obligatorios.
 */
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_city_field {
    display: none !important;
}

/* =========================================
   ESTILOS MODERNOS PARA TARJETAS WOOCOMMERCE
   ========================================= */

/* --- 1. El Contenedor Principal (La Rejilla) --- */
/* Aseguramos que la lista de productos se comporte como una cuadrícula moderna */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas iguales */
    gap: 30px; /* Espacio entre las tarjetas */
    margin-bottom: 50px !important; /* Espacio debajo de toda la sección */
}

/* En móviles, que sea 1 sola columna para que no se vea apretado */
@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* --- 2. La Tarjeta de Producto (El "Li") --- */
/* Este es el estilo de la "caja" de cada producto */
.woocommerce ul.products li.product {
    background-color: #ffffff; /* Fondo blanco para la tarjeta */
    border-radius: 16px; /* Bordes MUY redondeados para la tarjeta */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra suave y moderna */
    padding: 20px; /* Espacio interno dentro de la tarjeta */
    text-align: center; /* Centrar todo el contenido */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave */
    border: none !important; /* Quitamos bordes por defecto si los hubiera */
    overflow: hidden; /* Asegura que nada se salga de los bordes redondeados */
    float: none !important; /* Reseteo importante para Woo */
    width: 100% !important; /* Reseteo importante para Woo */
    margin: 0 !important; /* Usamos 'gap' en el contenedor en su lugar */
}

/* Efecto al pasar el mouse por encima de la tarjeta */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px); /* La tarjeta se eleva ligeramente */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* La sombra se intensifica */
}


/* --- 3. La Imagen del Producto --- */
.woocommerce ul.products li.product a img {
    border-radius: 12px; /* Bordes redondeados también para la imagen */
    margin-bottom: 15px !important; /* Espacio debajo de la imagen */
    width: 100%; /* Que ocupe todo el ancho disponible */
    height: auto;
    object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
}


/* --- 4. El Título del Producto --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important; /* Tamaño de fuente */
    font-weight: 700; /* Negrita */
    color: #333; /* Color oscuro */
    margin-bottom: 10px;
    padding: 0;
    line-height: 1.3;
}


/* --- 5. El Precio --- */
.woocommerce ul.products li.product .price {
    display: block;
    font-size: 1.2rem !important;
    color: #2ecc71 !important; /* Color verde moderno para el precio (cámbialo si quieres) */
    font-weight: bold;
    margin-bottom: 20px !important; /* Espacio importante antes del botón */
}
/* Color para el precio tachado (ofertas) */
.woocommerce ul.products li.product .price del {
     color: #aaa !important;
     font-size: 0.9em;
}


/* --- 6. El Botón "Añadir al carrito" (Moderno) --- */
/* Usamos selectores largos para ganar la "guerra de especificidad" a WooCommerce */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .button.product_type_variable {
    display: block !important; /* Botón de ancho completo */
    width: 100%;
    background-color: #3498db !important; /* COLOR DEL BOTÓN (Cámbialo aquí: azul) */
    color: #ffffff !important; /* Texto blanco */
    border: none !important;
    border-radius: 50px !important; /* Botón tipo "píldora" (muy redondeado) */
    padding: 12px 20px !important; /* Botón más alto y cómodo */
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem !important;
    transition: all 0.3s ease;
    margin-top: auto; /* Empuja el botón al final si las tarjetas tienen distinta altura */
}

/* Estado Hover del Botón (al pasar el mouse) */
.woocommerce ul.products li.product .button:hover {
    background-color: #2980b9 !important; /* Color un poco más oscuro al pasar el mouse */
    transform: scale(1.02); /* Crece un poquito */
    color: #fff !important;
}