/*
Theme Name: Nuba
Theme URI: https://nuba.com.bo
Description: Child theme de Divi para nuba.com.bo. Existe por dos razones concretas y
  nada más: que una actualización de Divi no pueda borrar nada propio, y alojar las
  plantillas y los CORREOS de WooCommerce, que es el único sitio donde WooCommerce los
  busca sin un filtro de por medio. TODO el código de la tienda vive en el plugin
  nuba-tienda, no aquí.
Author: ATI
Template: Divi
Version: 1.0.0
Text Domain: nuba
*/

/* ── cabecera y pie del tema en las páginas de tienda ───────────────────────
 * Nada de esto decide qué header y qué pie lleva la tienda: esa decisión sigue
 * abierta y es del cliente (Fase A). Lo que hace es que la cabecera y el pie
 * PROVISIONALES no rompan la página ni enseñen cosas ajenas mientras se decide.
 *
 * Todo va acotado a `.ecom-page`, que es la clase que el plugin pone solo en las
 * páginas de tienda: las editoriales de nuba.com.bo pintan su propia cabecera
 * dentro del contenido y no se tocan desde aquí. */

/* 0. La cabecera del tema, fuera.
 *
 * Desde el 2026-09-16 la tienda tiene la suya (src/Cabecera.php): logotipo,
 * buscador y carrito. La de Divi se esconde en las páginas de tienda —no se puede
 * quitar por PHP sin reescribir las plantillas del tema— y con ella se va el
 * problema del logotipo, el del relleno calculado y el del menú móvil desplegado.
 * Las reglas de abajo se quedan porque el checkout y /mi-cuenta/ siguen usándola. */
body:has(.ecom-hd) #main-header,
body:has(.ecom-hd) #top-header,
/* El checkout no lleva la cabecera de tienda sino la suya, con los pasos y sin
   salidas (`.ecom-ck-hd`). También sustituye a la de Divi. */
body:has(.ecom-ck-hd) #main-header,
body:has(.ecom-ck-hd) #top-header {
  display: none;
}

/* 0a. Que la página pueda encogerse en móvil.
 *
 * Divi pone `body { display: grid }`, así que `#page-container` es un ítem de
 * grid — y un ítem de grid tiene `min-width: auto`, o sea que NO puede encogerse
 * por debajo del ancho mínimo de su contenido. Cualquier fila ancha empuja la
 * página entera: los nueve chips de fórmula de la ficha piden ~1000 px y el
 * documento pasaba a medir 1280 en una pantalla de 390.
 *
 * No es culpa de los chips, que envuelven bien; es que nunca se les dijo cuánto
 * espacio hay. `min-width: 0` devuelve el control al viewport y a partir de ahí
 * el `flex-wrap` de siempre hace su trabajo.
 *
 * OJO: esto tardó en verse porque la suite de la ficha prueba el rubor de
 * Palladio, que varía por tono y pinta swatches pequeños. El desborde solo
 * aparece con contenido ancho, y nada lo probaba. */
.ecom-page #page-container,
.ecom-page #et-main-area {
  min-width: 0;
}

/* 0b. Y el pie del tema, fuera tambien.
 *
 * Mismo caso que la cabecera, y del mismo dia: la tienda tiene su pie propio
 * (src/Pie.php). El de Divi seguia saliendo DEBAJO del nuestro en toda la tienda
 * -PLP, ficha, carrito y ahora la Home- con sus widgets vacios: «Archives - No
 * hay archivos que mostrar», «Categories - No hay categorias» y el credito
 * «Disenado Por Elegant Themes». Es justo lo que el docblock de Pie.php daba por
 * resuelto para las paginas de ayuda, pero la regla no existia.
 *
 * Va por `.ecom-ft` y no por `.ecom-page` a proposito: si nuestro pie no se
 * pinta -y no se pinta en el checkout, que no lleva salidas- el del tema se
 * queda, y no una pagina sin ningun pie. */
body:has(.ecom-ft) #main-footer {
  display: none;
}

/* 1. El tamaño del logotipo.
 *
 * El archivo es de 834x142 y Divi lo escala con `max-height: 54%` del alto de la
 * cabecera... que a su vez depende del logotipo. El resultado en escritorio era un
 * logotipo de 618x105 y una cabecera de 195 px de alto, con el menú debajo del
 * logo. Se le pone un tope en píxeles, el mismo que ya daba bien en móvil (43 px),
 * y `width:auto` para no deformarlo.
 *
 * OJO: NO vale `height: auto` a secas —fue mi primer intento— porque anula el
 * `max-height` de Divi y el logotipo sale a su altura natural. */
.ecom-page #logo {
  max-height: 44px;
  width: auto;
  max-width: 100%;
}

/* 2. El relleno que Divi calcula a partir del logotipo.
 *
 * Divi escribe `padding-left` INLINE en la barra de navegación con el ancho del
 * logotipo. En móvil ese relleno no reserva nada —el menú es el hamburguesa y va a
 * la derecha— y dejaba la cabecera en 420 px sobre una pantalla de 390: toda la
 * tienda desbordaba a lo ancho. `!important` porque el valor es inline. */
@media (max-width: 980px) {
  .ecom-page #et-top-navigation {
    padding-left: 0 !important;
  }
}

/* 3. El título duplicado.
 *
 * El carrito y el checkout son páginas normales, así que el tema imprime su
 * `.entry-title` con el nombre de la página ANTES de nuestro contenido, que ya
 * trae su propio encabezado: salían dos títulos, «Carrito» y «Mi carrito».
 *
 * Se oculta SOLO en el carrito, y `:has()` es necesario para eso: la clase
 * `.ecom-page` está también en /mi-cuenta/, que es de WooCommerce.
 *
 * En el CHECKOUT no se oculta, aunque también sea página nuestra: nuestro checkout
 * no emite ningún `h1` —su encabezado es la cabecera de pasos— así que el del tema
 * es el único que tiene la página, y quitarlo la deja sin título para quien navega
 * con lector de pantalla. */
body:has([data-ec="carrito"]) .entry-title {
  display: none;
}

/* 4. El pie por defecto de Divi.
 *
 * Las áreas de widgets del pie están vacías, así que Divi rellena con LOS SUYOS:
 * «Archives» y «Categories». En una tienda eso es ruido, y el crédito «Diseñado
 * Por Elegant Themes» no debería aparecer en un release candidate que se le enseña
 * al cliente. Se ocultan los dos mientras no haya pie de verdad. */
.ecom-page #footer-widgets,
.ecom-page #footer-bottom {
  display: none;
}


/* ── barras fijas de móvil: que no tapen nada ────────────────────────────────
 *
 * Medido a 390 px: la barra inferior mide 67 px, va en `z-index: 55` y NO reserva
 * espacio, así que tapaba el final del contenido —el pie quedaba debajo y no se
 * podía tocar—. Y el botón flotante de WhatsApp vive en `bottom: 20px` con
 * `z-index: 9999`, o sea encima del CTA de la barra: en el carrito y en el
 * checkout tapaba justo el botón de continuar.
 *
 * El mu-plugin `nuba-barra-compra.php` ya resolvía lo mismo para la ficha VIEJA
 * (`body.single-product`), con su propia barra. Esto hace lo mismo para las
 * nuestras, sin tocar ese archivo, que es compartido con el sitio vivo. */

/* 1. Espacio al final. El carrito y el checkout no reservan nada. */
body:has(.ecom-barra) {
  padding-bottom: 88px;
}
/* La ficha sí reserva dentro del contenido (`.ecom-sticky-hueco`, que emite el
   propio componente), pero el pie va DESPUÉS de ese hueco y quedaba debajo. Se le
   añade a él, para no dejar un vacío en mitad de la página. */
body:has(.ecom-sticky) .ecom-ft {
  padding-bottom: 88px;
}

/* 2. El flotante de WhatsApp, por encima de la barra y no encima del botón.
   `!important` porque el del mu-plugin también lo lleva; en la ficha solo se
   levanta cuando la barra está visible (`data-on="1"`), para no dejarlo flotando
   alto sin motivo mientras se lee el producto. */
body:has(.ecom-barra) .nuba-wa-float,
body:has(.ecom-sticky[data-on="1"]) .nuba-wa-float {
  bottom: 96px !important;
}