/*
Theme Name: Brazil Protein Child
Theme URI: https://brazilprotein.com.ve
Description: Tema hijo de Hello Elementor para Brazil Protein Venezuela. Aloja el header y footer globales del sitio.
Author: Brazil Protein
Template: hello-elementor
Version: 1.1.6
Text Domain: brazil-protein-child
*/

/* ==========================================================
   Eliminar el menu movil VIEJO/DUPLICADO (button + overlay)
   que quedo suelto y aparecia como barras feas arriba y
   sobre el footer. El menu real del sitio es #bp-header.
   ========================================================== */
#mobileMenuOverlay,
#mobileMenuOverlay.open,
#mobileMenuOverlay.active,
#mobileMenuOverlay.is-open,
.mobile-menu-overlay,
.mobile-menu-overlay.active,
#mobileMenuBtn,
.mobile-menu-toggle,
.mobile-menu-toggle.active {
	display: none !important;
}

/* Los estilos del header y footer globales se agregaran en la siguiente fase. */

/* ═══════════════════════════════════════════════════════════════
   v1.0.7 — Arreglos finales
   ═══════════════════════════════════════════════════════════════ */

/* 1. Footer viejo del tema padre — apagado */
#site-footer { display: none !important; }

/* 2. Banner "Tienda" duplicado en /tienda/ — apagado */
.post-type-archive-product .woocommerce-products-header,
.woocommerce-shop .woocommerce-products-header,
.post-type-archive-product .entry-header,
.woocommerce-shop .entry-header { display: none !important; }

/* 3. Sin espacio extra debajo del header en el home */
body.home .elementor-section:first-of-type,
body.home .e-con:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. Boton hamburguesa — eliminar fondo rosa */
#bp-header .bp-ham-btn:focus,
#bp-header .bp-ham-btn:hover,
#bp-header .bp-ham-btn:active,
#bp-header .bp-ham-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.8 — Fixes móvil: tarjetas parejas + carrito responsive + carrito flotante
   ═══════════════════════════════════════════════════════════════ */

/* ---- 1. TARJETAS DE PRODUCTO: precio y botón siempre alineados abajo ---- */
#page ul.products li.product .price,
body.archive ul.products li.product .price,
body.woocommerce ul.products li.product .price {
    margin-top: auto !important;
}

/* ---- 2. CARRITO RESPONSIVE: evitar que se desborde en móvil ---- */
@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce {
        padding: 24px 14px 60px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-cart .wc-block-cart {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.woocommerce-cart .wc-block-cart__main,
    body.woocommerce-cart .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    body.woocommerce-cart .wc-block-cart__sidebar { margin-top: 18px !important; }
    body.woocommerce-cart .wc-block-cart-items,
    body.woocommerce-cart table.wc-block-cart-items {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 14px !important;
    }
    body.woocommerce-cart .wc-block-components-product-name {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
}

/* ---- 3. BOTÓN FLOTANTE DEL CARRITO (móvil) ---- */
.bp-cart-float {
    display: none;
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0A0A0A;
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
    align-items: center;
    justify-content: center;
    z-index: 9998;
    text-decoration: none;
    transition: transform .25s ease;
}
.bp-cart-float svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; }
.bp-cart-float:hover { transform: scale(1.08); }
.bp-cart-float .bp-cart-float-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #A2CA39;
    color: #0A0A0A;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    padding: 0 4px;
    box-sizing: border-box;
}
.bp-cart-float.has-items { display: flex; }

/* ---- 2b. CARRITO RESPONSIVE REFORZADO: contención total del desborde ---- */
@media (max-width: 768px) {
    html, body.woocommerce-cart {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    body.woocommerce-cart .entry-content,
    body.woocommerce-cart article.page,
    body.woocommerce-cart .woocommerce,
    body.woocommerce-cart .wp-block-woocommerce-cart,
    body.woocommerce-cart .wc-block-cart,
    body.woocommerce-cart .wc-block-cart__main,
    body.woocommerce-cart .wc-block-cart__sidebar,
    body.woocommerce-cart .wc-block-cart-items,
    body.woocommerce-cart table.wc-block-cart-items {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v1.1.0 — Botones de pago a verde lima + responsive página de pago
   ═══════════════════════════════════════════════════════════════ */

/* ---- Botón "Realizar pedido" / "Pagar" (checkout) a verde lima ---- */
#place_order,
.woocommerce #place_order,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button {
    background: #A2CA39 !important;
    background-color: #A2CA39 !important;
    color: #0A0A0A !important;
    border: none !important;
    font-weight: 700 !important;
}
#place_order:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout-actions-block button:hover {
    background: #8AAD2C !important;
    background-color: #8AAD2C !important;
    color: #0A0A0A !important;
}

/* ---- Botón "Enviar" del formulario de pago (Pagos Offline) a verde lima ---- */
body.woocommerce-order-pay button[type="submit"],
body.woocommerce-order-pay input[type="submit"] {
    background: #A2CA39 !important;
    background-color: #A2CA39 !important;
    color: #0A0A0A !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
    padding: 12px 28px !important;
}
body.woocommerce-order-pay button[type="submit"]:hover,
body.woocommerce-order-pay input[type="submit"]:hover {
    background: #8AAD2C !important;
    color: #0A0A0A !important;
}

/* ---- Responsive página "Pagar por el pedido" (order-pay) ---- */
@media (max-width: 768px) {
    body.woocommerce-order-pay .woocommerce {
        padding: 20px 14px 50px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-order-pay table.shop_table,
    body.woocommerce-order-pay table.shop_table th,
    body.woocommerce-order-pay table.shop_table td {
        font-size: 14px !important;
        word-break: break-word !important;
    }
    body.woocommerce-order-pay form,
    body.woocommerce-order-pay .input-text,
    body.woocommerce-order-pay input,
    body.woocommerce-order-pay select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v1.1.2 — Carrito flotante (no estirarse) + responsive tienda
   ═══════════════════════════════════════════════════════════════ */

/* ---- Carrito flotante: forzar circulo de 60px (en el home se estiraba) ---- */
a.bp-cart-float,
.bp-cart-float,
.bp-cart-float.has-items {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ---- Hero de la tienda en movil: menos espacio, contador apilado y mas chico ---- */
@media (max-width: 768px) {
    .shop-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 26px 20px 20px !important;
        gap: 4px !important;
    }
    .shop-hero-title .line1,
    .shop-hero-title .line2 {
        font-size: 38px !important;
    }
    .shop-hero-sub {
        margin-top: 8px !important;
        font-size: 11px !important;
    }
    .shop-hero-count {
        text-align: left !important;
        margin-top: 4px !important;
    }
    .shop-hero-count .num {
        font-size: 32px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v1.1.3 — Rediseño de la página "Pagar por el pedido" (order-pay)
   ═══════════════════════════════════════════════════════════════ */

/* ---- Contenedor centrado con respiro ---- */
body.woocommerce-order-pay .woocommerce {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 30px 22px 64px !important;
    box-sizing: border-box !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ---- Título (recuadro beige) más compacto y de marca ---- */
body.woocommerce-order-pay .entry-header,
body.woocommerce-order-pay .page-header {
    padding: 40px 24px !important;
}
body.woocommerce-order-pay h1,
body.woocommerce-order-pay .entry-title {
    font-family: 'Fraunces', serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: clamp(34px, 7vw, 52px) !important;
    color: #0A0A0A !important;
    line-height: 1.05 !important;
}

/* ---- Resumen del pedido (numero / total / fecha / metodo) como tarjeta ---- */
body.woocommerce-order-pay ul.order_details,
body.woocommerce-order-pay table.shop_table,
body.woocommerce-order-pay .woocommerce-order-overview {
    background: #FFFFFF !important;
    border: 1px solid #E8E1D4 !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    margin: 0 0 26px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.05) !important;
}

/* ---- Texto general ---- */
body.woocommerce-order-pay p,
body.woocommerce-order-pay li {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #2a2a2a !important;
}

/* ---- Enlaces (telefono / WhatsApp) en verde de marca, NO rosado ---- */
body.woocommerce-order-pay a {
    color: #6E8C1F !important;
    text-decoration-color: #A2CA39 !important;
    font-weight: 600 !important;
}

/* ---- Quitar el rojo/morado de textos en negrita (ej "Total a pagar") ---- */
body.woocommerce-order-pay strong,
body.woocommerce-order-pay b {
    color: #0A0A0A !important;
}

/* ---- Etiquetas de los campos ---- */
body.woocommerce-order-pay label {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    color: #0A0A0A !important;
    display: block !important;
    margin: 20px 0 7px !important;
    line-height: 1.4 !important;
}

/* ---- Campos de texto limpios y de marca (cualquier input que no sea boton/archivo) ---- */
body.woocommerce-order-pay input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.woocommerce-order-pay select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 15px !important;
    border: 1.5px solid #E0DACE !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
    background: #FFFFFF !important;
    color: #0A0A0A !important;
    transition: border-color .2s ease !important;
}
body.woocommerce-order-pay input:focus,
body.woocommerce-order-pay select:focus {
    border-color: #A2CA39 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(162,202,57,.15) !important;
}

/* ---- Boton "Seleccionar archivo" ---- */
body.woocommerce-order-pay input[type="file"] {
    margin-top: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ---- Separacion del boton Enviar ---- */
body.woocommerce-order-pay button[type="submit"],
body.woocommerce-order-pay input[type="submit"] {
    margin: 26px 0 12px !important;
}

/* ---- Boton secundario "Cancelar pedido" mas discreto ---- */
body.woocommerce-order-pay a.cancel,
body.woocommerce-order-pay .button.cancel,
body.woocommerce-order-pay a[href*="cancel_order"] {
    display: inline-block !important;
    background: transparent !important;
    color: #777 !important;
    border: 1.5px solid #ddd !important;
    border-radius: 100px !important;
    padding: 11px 22px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    body.woocommerce-order-pay .woocommerce {
        padding: 22px 16px 50px !important;
    }
    body.woocommerce-order-pay .entry-header,
    body.woocommerce-order-pay .page-header {
        padding: 30px 18px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v1.1.5 — Franja de título BEIGE COMPACTA (carrito, pago, páginas)
   ═══════════════════════════════════════════════════════════════ */
html body.page .entry-header,
html body.page .page-header {
    background: #E0DACE !important;
    padding: 34px 24px 30px !important;
    border: none !important;
}
html body.page .entry-header h1,
html body.page .page-header h1,
html body.page h1.entry-title,
body.woocommerce-order-pay h1,
body.woocommerce-order-pay .entry-title {
    color: #0A0A0A !important;
    font-size: clamp(30px, 5vw, 46px) !important;
    margin: 0 auto !important;
}
/* Texto intro (si existe) en beige compacto */
html body.page .entry-content > p:first-of-type {
    background: #E0DACE !important;
    color: #3a3a34 !important;
    padding: 0 24px 26px !important;
}
@media (max-width: 768px) {
    html body.page .entry-header,
    html body.page .page-header {
        padding: 26px 18px 22px !important;
    }
}