/*
Theme Name: Buny Child
Theme URI: http://www.wpbingosite.com/buny
Author: wpbingo
Description: This is a child theme for Buny
Version: 1.0.0
Author URI: http://wpbingosite.com
Template: buny
Text Domain: buny-child
*/
/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Doctor Baby - eliminar hueco del Page Title vacío */
.page-id-8242 .page-title.bwp-title.no-pagetitle {
    display: none !important;
}

/* =========================================
   DOCTOR BABY - Logo exclusivo página 8242
   ========================================= */

/* =========================================
   DOCTOR BABY - Página 8242
   ========================================= */

/* Ocultar cabecera Buny completa */
.page-id-8242 #bwp-header {
    display: none !important;
}

/* Eliminar hueco del Page Title */
.page-id-8242 .page-title.bwp-title.no-pagetitle {
    display: none !important;
}

/* Tablet */
@media (max-width: 991px) {
    .page-id-8242 .wpbingoLogo img {
        width: 140px !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .page-id-8242 .wpbingoLogo img {
        width: 120px !important;
    }
}

/* =========================================
   FICHA DE PRODUCTO - Envíos y entrega
   Buny (template.css) usa flex-wrap + texto centrado: un texto largo baja
   debajo del icono. Icono fijo a la izquierda y texto al lado.
   ========================================= */
.single-product .bwp-single-info .product-shipping-delivers li .content-info,
.quickview-container .bwp-single-info .product-shipping-delivers li .content-info {
    flex-wrap: nowrap;
    text-align: left;
}

.single-product .bwp-single-info .product-shipping-delivers li .content-info svg,
.quickview-container .bwp-single-info .product-shipping-delivers li .content-info svg {
    flex: 0 0 auto;
}

.single-product .bwp-single-info .product-shipping-delivers li .content-info .content,
.quickview-container .bwp-single-info .product-shipping-delivers li .content-info .content {
    flex: 1 1 auto;
}

/* =========================================
   FICHA DE PRODUCTO - Botón Express de Stripe (Google Pay / Apple Pay)
   Payment Plugins for Stripe lo inserta dentro de la fila flexible de cantidad + "Añadir al carrito"
   (woocommerce_after_add_to_cart_button) y aplasta el botón. Se lleva a su propia fila, a todo lo ancho.
   Solo posición: no cambia el funcionamiento del pago.
   ========================================= */
.single-product .bwp-single-info form.cart .wc-stripe-product-checkout-container,
.quickview-container .bwp-single-info form.cart .wc-stripe-product-checkout-container {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 10px;
}

/* =========================================
   FICHA DE PRODUCTO - Selector de atributos globales (p. ej. Color)
   Buny pone la clase "select" a la fila de los atributos globales de tipo select, y coincide con las
   reglas genéricas .select / .select select de template.css (caja de 180 px con borde, desplegable de
   200 px con arrow.png). Se deja igual que el selector de los atributos propios del producto (Talla).
   Valores copiados de template.css:13020-13032 y 24757-24769.
   ========================================= */
.single-product .variations_form table.variations tr.select,
.quickview-container .variations_form table.variations tr.select {
    width: 100%;
    border: 0;
    overflow: visible;
}

.single-product .variations_form table.variations tr.select select,
.quickview-container .variations_form table.variations tr.select select {
    width: 100%;
    border: 1px solid #ccc;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0), linear-gradient(90deg, #ccc, #ccc);
    background-position: calc(100% - 18px) calc(1em + 3px), calc(100% - 13px) calc(1em + 3px), calc(100% - 2.5em) .5em;
    background-size: 6px 5px, 6px 5px, 0 1.5em;
    background-repeat: no-repeat;
}

.single-product .variations_form table.variations tr.select select:focus,
.quickview-container .variations_form table.variations tr.select select:focus {
    background-image: linear-gradient(45deg, var(--gray-dark, #222) 50%, transparent 0), linear-gradient(135deg, transparent 50%, var(--gray-dark, #222) 0), linear-gradient(90deg, #ccc, #ccc);
    background-position: calc(100% - 14px) calc(1em + 3px), calc(100% - 20px) calc(1em + 3px), calc(100% - 2.5em) .5em;
    background-size: 6px 5px, 5px 5px, 0 1.5em;
    border-color: var(--gray-dark, #222);
}
/* =========================================
   LISTADOS DE PRODUCTOS (tienda, categorías, bloques de Buny en la home)
   Buny (template.css) deja la foto (inline-block, 300 px) a la izquierda de su columna y el texto centrado
   en todo el ancho: en columnas anchas no quedan alineados. Se centra la foto en su columna.
   Mismo selector que Buny para igualar la especificidad (el child carga después y gana).
   ========================================= */
.products-list.grid .product-wapper .products-thumb {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   CARRITO - Foto del producto
   Buny (template.css) pone foto y nombre en la misma celda flexible
   (td.product-thumbnail { display:flex }) sin limitar la foto: una miniatura de 600 px ocupa la celda y
   aplasta nombre, precio y cantidad. Foto fija y nombre con el resto del ancho.
   ========================================= */
table.shop_table.cart > tbody > tr > td.product-thumbnail > img {
    width: 100px;
    max-width: 100px;
    height: auto;
    flex: 0 0 100px;
}

table.shop_table.cart > tbody > tr > td.product-thumbnail > .product-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 20px;
}

@media (max-width: 767px) {
    table.shop_table.cart > tbody > tr > td.product-thumbnail > img {
        width: 70px;
        max-width: 70px;
        flex-basis: 70px;
    }

    table.shop_table.cart > tbody > tr > td.product-thumbnail > .product-name {
        margin-left: 12px;
    }
}

/* =========================================
   MINI-CARRITO (panel lateral) - Productos "vendidos individualmente"
   Buny (woocommerce/cart/mini-cart.php:104-105) no muestra selector de cantidad para esos productos: escribe
   un "1" pegado al subtotal y se lee "149,99 €". Se muestra "1 × 49,99 €". Los productos con selector
   (input.qty) no cambian.
   ========================================= */
.cart-popup .product-flex .product-quantity:not(:has(input.qty))::after {
    content: "\00a0×";
}

.cart-popup .product-flex .product-quantity:not(:has(input.qty)) {
    margin-right: 6px;
}

/* =========================================
   CABECERA (header 2 de Buny) - Nube blanca y sin línea inferior
   - Imagen: Buny pone en línea bg-header.png (nube gris) en .header-wrapper
     (templates/headers/header-2.php:76-77). Se usa bg-header2.png (nube blanca, la del header 4);
     hace falta !important para ganar al style="" en línea.
   - Línea: #bwp-header tiene border-bottom 1px #e9e9e9.
   - Home, solo escritorio (>= 1200 px, cuando Buny muestra .header-desktop): la cabecera sube 74 px
     (su padding-bottom, template.css:2069-2070) para que las ondas queden sobre el slider y no haya franja blanca.
   ========================================= */
.bwp-header.header-v2 {
    border-bottom: 0 !important;
}

.bwp-header.header-v2 .header-wrapper {
    background-image: url("../buny/images/bg-header2.png") !important;
}

@media (min-width: 1200px) {
    .home .bwp-header.header-v2 {
        margin-bottom: -74px;
        z-index: 20;
    }
}

/* =========================================
   PÁGINAS DE TEXTO - Columna de lectura de 820 px
   Cookies (2), Privacidad (325), T&C (329), Quiénes somos (350) y Envíos y devoluciones (2550) usan la
   plantilla por defecto a todo el ancho (1.291 px a 1366) y cuesta leerlas. Se limitan por ID para no
   tocar carrito, pago ni Mi cuenta, que usan la misma plantilla.
   - Privacidad y T&C traen restos de HTML de la tienda antigua con .container (Bootstrap): sin ancho ni relleno propios.
   - Móvil: titulares a 24 px (32 px en el tema).
   ========================================= */
.page-id-2 .entry-content,
.page-id-325 .entry-content,
.page-id-329 .entry-content,
.page-id-350 .entry-content,
.page-id-2550 .entry-content {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.page-id-325 .entry-content .container,
.page-id-329 .entry-content .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767px) {
    .page-id-2 .entry-content h3,
    .page-id-325 .entry-content h3,
    .page-id-329 .entry-content h3,
    .page-id-350 .entry-content h3,
    .page-id-2550 .entry-content h3 {
        font-size: 24px;
        line-height: 1.25;
        margin-top: 32px;
    }
}

/* =========================================
   BOTÓN DE WHATSAPP (plugin Social Chat) frente a los fijos de Buny
   - La burbuja (60 px, a 24 px del borde inferior) y el botón «Arriba» de Buny (.back-top, 80 px a 50 px,
     template.css:12420) comparten la esquina inferior derecha: «Arriba» sube por encima de la burbuja.
   - Por debajo de 1200 px Buny muestra la barra fija inferior (.header-mobile-fixed, 61 px): la burbuja sube
     encima de ella. Hace falta «body» para ganar a .qlwapp__container.qlwapp__container--bottom-right del plugin.
   ========================================= */
.back-top {
    bottom: 100px;
}

@media (max-width: 1199px) {
    body .qlwapp__container.qlwapp__container--bottom-right {
        bottom: 61px;
    }

    .back-top {
        bottom: 165px;
    }
}

/* =========================================
   POPUP DE SUSCRIPCIÓN (el de Buny, #newsletterpopup, con el formulario de MC4WP)
   - Buny lo oculta con !important fuera de la plantilla «homepage» (template.css:3474) y lo abre nada más
     cargar: solo se ve con body.mtb-nl-on, que pone js/newsletter-popup.js a los 15 s.
   - Aspecto del popup de producción (Zeen): fondo verde agua con confeti (ID 492), texto #0a0a0a,
     título en Patrick Hand SC. El confeti del fondo (esquina inferior derecha) queda bajo el botón: tamaño fijo
     de 360 px y 112 px de relleno inferior.
   ========================================= */
body .newsletterpopup,
body .newsletterpopup_overlay {
    display: none !important;
}

body.mtb-nl-on .newsletterpopup.show {
    display: flex !important;
}

body.mtb-nl-on .newsletterpopup.show .newsletterpopup_overlay {
    display: block !important;
}

.newsletterpopup .wp-newsletter {
    max-width: 520px;
}

.newsletterpopup .newsletter-content {
    position: relative;
    width: 100%;
    padding: 56px 44px 112px;
    background: #7ec3c5 url("../../uploads/2020/04/Captura-de-pantalla-2020-04-21-a-las-10.29.25.png") no-repeat right bottom / 360px auto;
    border-radius: 12px;
    color: #0a0a0a;
    text-align: center;
}

.newsletterpopup .close-popup {
    top: 12px;
    right: 12px;
}

.newsletterpopup .mtb-nl .mtb-nl__title {
    margin: 0 0 8px;
    font-family: "Patrick Hand SC", cursive;
    font-size: 44px;
    line-height: 1.1;
    color: #0a0a0a;
}

.newsletterpopup .mtb-nl .mtb-nl__sub,
.newsletterpopup .mtb-nl .mtb-nl__offer {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.5;
    color: #0a0a0a;
}

.newsletterpopup .mtb-nl .mc4wp-form-fields p {
    margin: 0 0 12px;
}

.newsletterpopup .mtb-nl .mc4wp-form input[type="email"] {
    font-family: "Lato", sans-serif;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #0a0a0a;
    border-radius: 6px;
    background: #fff;
    color: #0a0a0a;
    font-size: 16px;
}

.newsletterpopup .mtb-nl .mc4wp-form input[type="submit"] {
    font-family: "Lato", sans-serif;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 6px;
    background: #0a0a0a;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.newsletterpopup .mtb-nl .mtb-nl__check {
    font-family: "Lato", sans-serif;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    color: #0a0a0a;
}

.newsletterpopup .mtb-nl .mtb-nl__check input {
    margin-top: 2px;
    flex: none;
}

.newsletterpopup .mtb-nl .mtb-nl__check a {
    color: #0a0a0a;
    text-decoration: underline;
}

.newsletterpopup .mtb-nl .mc4wp-response {
    font-size: 15px;
}

@media (max-width: 480px) {
    .newsletterpopup .newsletter-content {
        padding: 52px 24px 104px;
    }

    .newsletterpopup .mtb-nl .mtb-nl__title {
        font-size: 36px;
    }
}

/* =========================================
   FRANJA «SUSCRÍBETE!» encima del pie (footer.php + zona de widgets «Suscríbete (encima del pie)»)
   Mismo formulario de MC4WP que el popup (451: email, casilla de privacidad, «Enviar»). Escritorio: texto a la
   izquierda; email y botón en una fila y la casilla debajo. Móvil (< 768 px): todo apilado y centrado.
   ========================================= */
.mtb-subscribe {
    padding: 48px 20px;
    background: #7ec3c5 url("../../uploads/2020/04/Captura-de-pantalla-2020-04-21-a-las-10.29.25.png") no-repeat right bottom / 360px auto;
    color: #0a0a0a;
}

.mtb-subscribe__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.mtb-subscribe .widget {
    margin: 0;
}

.mtb-sub {
    display: flex;
    align-items: center;
    gap: 40px;
}

.mtb-sub__text {
    flex: 1 1 0;
}

.mtb-sub__form {
    flex: 1.2 1 0;
    max-width: 560px;
}

.mtb-subscribe .mtb-sub__title {
    margin: 0 0 6px;
    font-family: "Patrick Hand SC", cursive;
    font-size: 44px;
    line-height: 1.1;
    color: #0a0a0a;
}

.mtb-subscribe .mtb-sub__text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #0a0a0a;
}

.mtb-subscribe .mc4wp-form-fields {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.mtb-subscribe .mc4wp-form-fields p {
    margin: 0;
}

.mtb-subscribe .mc4wp-form-fields p:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.mtb-subscribe .mc4wp-form-fields p:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
}

.mtb-subscribe .mc4wp-form-fields p:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
}

.mtb-subscribe .mc4wp-form input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #0a0a0a;
    border-radius: 6px;
    background: #fff;
    color: #0a0a0a;
    font-family: "Lato", sans-serif;
    font-size: 16px;
}

.mtb-subscribe .mc4wp-form input[type="submit"] {
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 6px;
    background: #0a0a0a;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.mtb-subscribe .mtb-nl__check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #0a0a0a;
}

.mtb-subscribe .mtb-nl__check input {
    margin-top: 2px;
    flex: none;
}

.mtb-subscribe .mtb-nl__check a {
    color: #0a0a0a;
    text-decoration: underline;
}

.mtb-subscribe .mc4wp-response {
    margin-top: 10px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .mtb-subscribe {
        padding: 40px 16px 96px;
    }

    .mtb-sub {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .mtb-sub__form {
        width: 100%;
    }

    .mtb-subscribe .mtb-sub__title {
        font-size: 36px;
    }

    .mtb-subscribe .mc4wp-form-fields {
        grid-template-columns: 1fr;
    }

    .mtb-subscribe .mc4wp-form-fields p:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .mtb-subscribe .mc4wp-form input[type="submit"] {
        width: 100%;
    }

    .mtb-subscribe .mtb-nl__check {
        text-align: left;
    }
}

/* =========================================
   FRANJA «SÍGUENOS EN INSTAGRAM» encima de «Suscríbete!» (footer.php, feed 1 de Smash Balloon)
   Mismas páginas que la franja de suscripción (todas salvo carrito y pago). El número de columnas lo pone el
   feed (6 en escritorio, 3 en tablet y móvil); aquí solo el contenedor, el título y el enlace a la cuenta.
   ========================================= */
.mtb-instagram {
    padding: 48px 20px 40px;
    background: #fff;
    text-align: center;
}

.mtb-instagram__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.mtb-instagram .mtb-instagram__title {
    margin: 0 0 4px;
    font-family: "Patrick Hand SC", cursive;
    font-size: 40px;
    line-height: 1.1;
    color: #0a0a0a;
}

.mtb-instagram .mtb-instagram__user {
    margin: 0 0 20px;
    font-size: 17px;
}

.mtb-instagram .mtb-instagram__user a {
    color: #2bad97;
    font-weight: 700;
    text-decoration: none;
}

.mtb-instagram .mtb-instagram__user a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .mtb-instagram {
        padding: 36px 12px 28px;
    }

    .mtb-instagram .mtb-instagram__title {
        font-size: 32px;
    }
}

/* =========================================
   MENÚ DE MÓVIL (panel lateral de Buny, < 1200 px) - Confeti y sin la burbuja de WhatsApp encima
   - Confeti dibujado en SVG con los colores del logo y del popup, en el hueco blanco de la parte baja. Va en
     .mm-menu porque Buny le pone fondo blanco (template.css: .content-mobile-menu .bwp-canvas-navigation .mm-menu);
     los paneles de mmenu heredan el fondo y lo repetirían con su propia altura: transparentes.
   - La burbuja del plugin Social Chat (z-index 9999999) quedaba encima del menú abierto (999999).
   ========================================= */
body .content-mobile-menu .bwp-canvas-navigation .mm-menu {
    background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 260'><path d='M22 28l20 5-15 14z' fill='%236fd3d6'/><circle cx='74' cy='62' r='9' fill='%2312a07f'/><circle cx='118' cy='26' r='5' fill='%23f6d330'/><path d='M150 70c6-10 13 10 19 0s13 10 19 0' stroke='%23111' stroke-width='5' fill='none' stroke-linecap='round'/><path d='M58 118l-5 19 16-7z' fill='%23f2a7d8'/><circle cx='196' cy='128' r='6' fill='%23bdbdbd'/><circle cx='134' cy='152' r='11' fill='%2312a07f'/><path d='M24 192c6-10 13 10 19 0s13 10 19 0' stroke='%23111' stroke-width='5' fill='none' stroke-linecap='round'/><circle cx='104' cy='204' r='5' fill='%23f6d330'/><path d='M206 196l-17 5 13 12z' fill='%236fd3d6'/><path d='M152 228l15 10-17 6z' fill='%23f2a7d8'/><circle cx='62' cy='244' r='5' fill='%23bdbdbd'/></svg>") no-repeat right 28px bottom 110px / 200px auto;
}

body .content-mobile-menu .bwp-canvas-navigation .mm-panels,
body .content-mobile-menu .bwp-canvas-navigation .mm-panel {
    background: transparent;
}

body:has(.content-mobile-menu.active) .qlwapp__container {
    display: none;
}