/**
 * layout-fixes.css
 * Correcciones de layout para páginas de categoría de WooCommerce.
 *
 * Problema identificado:
 * woocommerce-smallscreen.css aplica clear:both + width:48% a todos los li.product
 * con la clase "columns-*", sin restricción de media query, lo que rompe el grid
 * en pantallas grandes dentro del contenedor .catproducts.
 *
 * Este archivo sobreescribe esas reglas para restaurar el layout de columnas
 * en las páginas de categoría del tema.
 */

/* =============================================
   FIX 1: Restaurar el grid de productos en páginas de categoría
   Neutralizar el clear:both que fuerza 1 producto por fila
   ============================================= */

/* WooCommerce smallscreen fuerza clear:both en todos los li con columns-*
   Lo neutralizamos exclusivamente dentro de .catproducts */
.catproducts .woocommerce ul.products[class*="columns-"] li.product,
.catproducts .woocommerce-page ul.products[class*="columns-"] li.product {
    clear: none !important;
    width: 100% !important;  /* 1 columna dentro del col-lg-4 */
}

/* El primer item de WooCommerce recibe clear:both - también lo neutralizamos */
.catproducts .woocommerce ul.products li.first,
.catproducts .woocommerce-page ul.products li.first {
    clear: none !important;
}

/* =============================================
   FIX 2: Adaptar el layout cuando se usan múltiples columnas
   Clases .multipro / .threeprod / .twoprod ya existentes en el tema
   ============================================= */

/* =============================================
   FIX 2.1: Adaptar el layout cuando se usan múltiples columnas
   Hacer que el grid de productos sea responsivo
   ============================================= */

/* --- Desktop (≥980px): 4 columnas --- */
@media (min-width: 980px) {
    .catproducts .woocommerce ul.products[class*="columns-"] li.product,
    .catproducts .woocommerce-page ul.products[class*="columns-"] li.product {
        clear: none !important;
        width: 23% !important; /* Aproximadamente calc(25% - gap) */
        margin-left: 1% !important;
        margin-right: 1% !important;
    }
}

/* --- Tablet (<980px y ≥768px): Forzar 2 columnas --- */
@media (min-width: 768px) and (max-width: 979px) {
    .catproducts .woocommerce ul.products[class*="columns-"] li.product,
    .catproducts .woocommerce-page ul.products[class*="columns-"] li.product {
        clear: none !important;
        width: 46% !important;
        margin-left: 2% !important;
        margin-right: 2% !important;
    }
}

/* --- Móvil (<768px): Forzar 1 columna --- */
@media (max-width: 767px) {
    .catproducts .woocommerce ul.products[class*="columns-"] li.product,
    .catproducts .woocommerce-page ul.products[class*="columns-"] li.product {
        clear: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =============================================
   FIX 3: Asegurar que ul.products tenga ancho completo del contenedor
   ============================================= */
.catproducts ul.products,
.catproducts .woocommerce,
.catproducts .centbtn {
    width: 100% !important;
    max-width: 100% !important;
}

/* =============================================
   FIX 4: Consistencia del layout .row en post-page
   Asegurar que las columnas Bootstrap se alineen como flexbox
   ============================================= */

/* =============================================
   FIX 2: Grid de layout principal (Productos vs Texto)
   Layout Vertical: Texto arriba (100%), Productos abajo (100%) en todos los dispositivos.
   ============================================= */

/* Contenedor principal flex para poder alterar el orden */
.post-page > .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Columna de texto (pasa arriba en todos lados) */
.post-page .col-lg-8 {
    order: 1 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-bottom: 40px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* Columna de productos (pasa abajo en todos lados) */
.post-page .col-lg-4 {
    order: 2 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =============================================
   FIX 5: Popular Products — grid responsivo
   Desktop (≥1024px): 4 columnas
   Tablet  (768–1023px): 2 columnas
   Móvil   (<768px): 1 columna
   
   El ul tiene padding: 30px a cada lado.
   Con box-sizing: border-box el espacio interior = (ancho_ul - 60px).
   Las % en flex-basis se calculan sobre ese espacio interior.
   gap: 12px  →  cada gap consume 12px entre items.
   ============================================= */

.ppro-div ul.Popular-Products {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 20px 30px !important;
    margin-bottom: 40px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* --- Base compartida para todos los li --- */
.ppro-div ul.Popular-Products li {
    margin: 0 !important;
    border: 4px solid #8ABD11 !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important; /* evita que el contenido infle el item */
}

/* --- Desktop: 4 columnas (≥1024px) ---
   4 items + 3 gaps de 12px:
   (100% - 3×12px) / 4 = calc(25% - 9px) */
@media (min-width: 1024px) {
    .ppro-div ul.Popular-Products li {
        flex: 0 0 calc(25% - 9px) !important;
        max-width: calc(25% - 9px) !important;
    }
}

/* --- Tablet: 2 columnas (768px–1023px) ---
   2 items + 1 gap de 12px:
   (100% - 1×12px) / 2 = calc(50% - 6px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .ppro-div ul.Popular-Products li {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
}

/* --- Móvil: 1 columna (<768px) --- */
@media (max-width: 767px) {
    .ppro-div ul.Popular-Products li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Imagen del producto */
.ppro-div ul.Popular-Products li .ppimg {
    width: 100% !important;
    display: block !important;
    line-height: 0 !important;
}

.ppro-div ul.Popular-Products li .ppimg img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Detalles del producto */
.ppro-div ul.Popular-Products li .ppdetails {
    flex: 1 !important;
    height: auto !important;
    padding: 10px !important;
}

.ppro-div ul.Popular-Products li .ppdetails h3 {
    height: auto !important;
    min-height: 50px !important;
}

/* Botón al fondo */
.ppro-div ul.Popular-Products li .psbtn {
    margin-top: 0 !important;
    padding: 0 10px 14px !important;
    text-align: center !important;
}

/* =============================================
   FIX 6: Restaurar Footer en Páginas Específicas
   Neutraliza display:none inyectado por inline <style> y reglas en style.css
   ============================================= */

/* Forzar col-lg-4 a 1/3 — neutraliza el width:100% del inline style */
.woocommerce-shop .footer .col-lg-4, 
.page-id-12 .footer .col-lg-4, 
.page-id-11909 .footer .col-lg-4, 
.page-id-11911 .footer .col-lg-4 {
    max-width: 33.333333% !important;
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    text-align: left !important;
    float: left !important;
}

/* Forzar col-lg-8 visible — neutraliza el display:none del inline style */
.woocommerce-shop .footer .col-lg-8, 
.page-id-12 .footer .col-lg-8, 
.page-id-11909 .footer .col-lg-8, 
.page-id-11911 .footer .col-lg-8 {
    display: block !important;
    max-width: 66.666667% !important;
    flex: 0 0 66.666667% !important;
    width: 66.666667% !important;
    float: left !important;
}

/* Distribuir los footerlink correctamente dentro del col-lg-8 */
.woocommerce-shop .footer .col-lg-8 .footerlink,
.page-id-12 .footer .col-lg-8 .footerlink,
.page-id-11909 .footer .col-lg-8 .footerlink,
.page-id-11911 .footer .col-lg-8 .footerlink {
    display: inline-block !important;
    width: 31% !important;
    vertical-align: top !important;
    text-align: center !important;
    min-width: 120px !important;
}

/* Forzar li dentro de footerlink a ancho completo — neutraliza WC smallscreen */
.footer .footerlink ul li,
.page-id-11909 .footer .footerlink ul li,
.page-id-12 .footer .footerlink ul li,
.woocommerce-shop .footer .footerlink ul li {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    clear: none !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Neutraliza .products-part ul { padding: 20px 50px } que se filtra al footer */
.footer .footerlink ul {
    padding: 0 !important;
}
.footer .footnum ul {
    padding: 0 !important;
}

/* Mostrar .lastlink en paginas que comparten footer con home
   style.css: .footer .lastlink { display:none } solo lo muestra en .home */
.page-id-11909 .footer .lastlink,
.page-id-12 .footer .lastlink,
.page-id-11911 .footer .lastlink,
.woocommerce-shop .footer .lastlink {
    display: inline-block !important;
    width: 100% !important;
    vertical-align: top !important;
    margin-top: 20px !important;
}

/* Neutraliza padding de .products-part que comprime el footer-text */
.footer .footer-text {
    padding: 0 !important;
}
.footer .footaddress ul,
.footer .footnum ul {
    padding: 0 !important;
    margin: 0 !important;
}

/* Forzar que la direccion no se rompa innecesariamente */
.footer .footaddress ul li {
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.woocommerce-shop .footer .row, 
.page-id-12 .footer .row, 
.page-id-11909 .footer .row, 
.page-id-11911 .footer .row {
    justify-content: flex-start !important;
    text-align: left !important;
}

@media (max-width: 991px) {
    .woocommerce-shop .footer .col-lg-4, 
    .page-id-12 .footer .col-lg-4, 
    .page-id-11909 .footer .col-lg-4, 
    .page-id-11911 .footer .col-lg-4,
    .woocommerce-shop .footer .col-lg-8, 
    .page-id-12 .footer .col-lg-8, 
    .page-id-11909 .footer .col-lg-8, 
    .page-id-11911 .footer .col-lg-8 {
        display: block !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        float: none !important;
        text-align: center !important;
    }
}



/* =============================================
   FIX 8: Botón Return to Shop en el Carrito (ID: 1830)
   Centrar el texto verticalmente porque estaba pegado arriba
   ============================================= */
.page-id-1830 .return-to-shop .button,
.page-id-1830 .wc-backward {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    height: auto !important;
    min-height: 40px !important;
    line-height: normal !important;
}

/* =============================================
   FIX 9: Botón Proceed to Checkout en el Carrito (ID: 1830)
   Mover a la izquierda, separar de PayPal y ajustar el hover
   ============================================= */
body.page-id-1830 div.cart_totals div.wc-proceed-to-checkout,
body.page-id-1830 div.wc-proceed-to-checkout {
    float: none !important;
    clear: both !important;
    display: block !important;
    text-align: right !important; /* Changed to right to match the floated right button */
    margin-bottom: 30px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
}

body.page-id-1830 div.cart_totals div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward,
body.page-id-1830 div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
    float: right !important; /* Changed to right as user requested */
    clear: both !important;
    display: inline-flex !important;
    margin-bottom: 30px !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

body.page-id-1830 div.cart_totals div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover,
body.page-id-1830 div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover,
body.page-id-1830 div.cart_totals div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover *,
body.page-id-1830 div.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover * {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #ff1100 !important; 
    border-color: #ff1100 !important;
}


/* =============================================
   FIX 6: Evitar salto en botones al hacer hover
   ============================================= */
.ppro-div .woocommerce ul.products li.product .button,
.ppro-div .psbtn a,
.ppro-div .add_to_cart_button {
    border: 1px solid transparent !important;
}

/* =============================================
   FIX 7: Layout especial para la pagina de Chipotle (page-id-3566)
   Texto abajo, Productos arriba (en 3 columnas)
   ============================================= */
.page-id-3566 .post-page .col-lg-8 {
    order: 2 !important;
}
.page-id-3566 .post-page .col-lg-4 {
    order: 1 !important;
}

@media (min-width: 980px) {
    .page-id-3566 .catproducts .woocommerce ul.products[class*="columns-"] li.product,
    .page-id-3566 .catproducts .woocommerce-page ul.products[class*="columns-"] li.product,
    .page-id-3581 .catproducts .woocommerce ul.products[class*="columns-"] li.product,
    .page-id-3581 .catproducts .woocommerce-page ul.products[class*="columns-"] li.product {
        clear: none !important;
        float: left !important;
        width: 31.33% !important; /* 3 columnas */
        margin-left: 1% !important;
        margin-right: 1% !important;
    }
}

/* =============================================
   FIX 10: Restaurar estilo de Popular Products en Flakes (page-id-3535)
   Alinear a la izquierda con barra blanca de ancho completo
   ============================================= */
.page-id-3535 .ppro-div {
    display: inline-block;
    width: 100%;
    /* Restauramos el fondo oscuro */
    background: url('images/probg.webp') 0 0 repeat;
    padding-top: 30px;
    padding-bottom: 30px;
}

.page-id-3535 .ppro-div .ptitle {
    text-align: left;
    background: #fff;
    width: 100%;
    margin-bottom: 30px;
    padding: 12px 20px;
}

.page-id-3535 .ppro-div .ptitle h2 {
    background: transparent;
    color: #a30303 !important;
    padding: 0;
    text-transform: uppercase !important;
    text-align: left;
    font-size: 28px !important;
    line-height: 36px;
    font-family: 'Montserrat';
    display: block;
    width: 100% !important;
    margin: 0;
}