/* ═══════════════════════════════════════════════════════════════════════════
   Cabecera y pie únicos de nuba.com.bo (DEC-28, 2026-10-14).

   La cabecera y el pie de la tienda pasan a ser los de TODO el sitio. Esta hoja
   lleva solo lo que eso añade —logotipo dibujado, menú de secciones, cuenta— y,
   en las páginas de marketing (`body.ecom-cromo`), esconde la cabecera y el pie
   que cada una traía pintados dentro de su contenido. El contenido de esas
   páginas no se toca: ni colores, ni fuentes, ni secciones.

   Va aparte de ecom-styles.css a propósito: se puede quitar entera para volver
   atrás, y no pisa los cambios que otras tareas hacen a la hoja grande.
   Lo encola Cabecera::encolar(); la decisión de a quién se le muestra la toma
   Cabecera::es_global() con la opción `nuba_cabecera_unica`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logotipo ─────────────────────────────────────────────────────────────
   El de la marca, en imagen: blanco en la barra y en el pie, morado en el cajón. */
.ecom-hd-logo { display: inline-flex; align-items: center; }
.ecom-hd-logo img { display: block; height: 22px; width: auto; max-width: none; }
.ecom-ft .ecom-hd-logo { display: block; }
.ecom-ft .ecom-hd-logo img { height: 24px; }
.ecom-navdrawer-hd .ecom-hd-logo img { height: 20px; }

/* ── Menú de secciones ────────────────────────────────────────────────────
   Siete enlaces caben holgados desde 1024 px: no hace falta el tipo compacto
   que ecom-styles.css aplica entre 1024 y 1279 px para las ocho categorías del
   esqueleto. */
.ecom-hd .ecom-hd-nav { gap: 2px; }
.ecom-hd .ecom-hd-nav a { font-size: 14px; padding: 8px 12px; }
.ecom-hd .ecom-hd-nav a[aria-current="page"] {
  background: rgba(255,255,255,.18);
}

/* El cajón del menú vive fuera de `.ecom-hd`: sin esto, la X sale blanca sobre
   el panel blanco. */
.ecom-navdrawer-hd .ecom-hd-ico { color: var(--ec-texto); }
.ecom-navdrawer-hd .ecom-hd-ico:hover { background: var(--ec-pink-pale); }
.ecom-navdrawer nav a { color: var(--ec-texto); }
/* Con sesión iniciada, la barra de WordPress (z-index 99999) tapaba la X del
   cajón: el cajón empieza debajo de ella. */
body.admin-bar .ecom-navdrawer { top: 46px; }
@media (min-width: 783px) { body.admin-bar .ecom-navdrawer { top: 32px; } }
.ecom-navdrawer nav a[aria-current="page"] { color: var(--ec-primary); font-weight: 700; }

/* ── Páginas de marketing ─────────────────────────────────────────────────
   Los envoltorios `.ecom-page` existen para que la cabecera y el pie tengan las
   bases de la tienda (caja, fuente, enlaces) sin dárselas al resto de la página,
   y para que ecom-app.js encuentre su raíz. `display: contents` deja que la
   cabecera siga siendo `sticky` respecto de la página entera y no de su caja. */
.ecom-cromo-hd, .ecom-cromo-ft { display: contents; }

/* La cabecera y el pie viejos: la sección `nuba-header` de las páginas
   internas, la fila del logotipo y el menú dentro del hero del inicio, y la
   sección `nuba-footer`. Lo de Divi (#main-header, #main-footer) por si alguna
   página no usa la plantilla en blanco. */
body.ecom-cromo .nuba-header,
body.ecom-cromo .nuba-footer,
body.ecom-cromo .et_pb_row:has(.nuba-nav),
body.ecom-cromo .nuba-logo-img,
body.ecom-cromo .nuba-nav,
body.ecom-cromo #top-header,
body.ecom-cromo #main-header,
body.ecom-cromo #main-footer { display: none !important; }
body.ecom-cromo #page-container { padding-top: 0 !important; margin-top: 0 !important; }
/* NUB-242: el visitante sin sesión ve la cabecera de Divi pero ya el pie de la
   tienda; se esconde solo el pie viejo. */
body.ecom-cromo-pie .nuba-footer,
body.ecom-cromo-pie #main-footer { display: none !important; }

/* En la tienda el pie se separa del contenido; en marketing la última banda de
   color ya llega hasta el pie y el hueco blanco quedaba como un corte. */
.ecom-cromo-ft .ecom-ft { margin-top: 0; }

/* ── Menú único: «Tienda ˅» y «Marcas ˅» (NUB-204) ────────────────────────
   Escritorio: los dos paneles cuelgan del encabezado (que es `sticky`, o sea
   contenedor de su posición) y ocupan todo el ancho. Se abren con el mouse
   (:hover), con clic y con el teclado (data-open, lo pone ecom-app.js).
   La fila de enlaces deja de recortar (en ecom-styles.css hace scroll bajo
   1200 px): siete enlaces caben desde 1024 px y un panel dentro de una caja con
   scroll se cortaría. */
.ecom-hd .ecom-hd-nav { overflow: visible; }
.ecom-mn-i { display: flex; }
.ecom-mn-t {
  display: inline-flex; align-items: center; gap: 5px; font: 600 14px/1 var(--ec-fuente);
  padding: 8px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; color: #fff;
}
.ecom-mn-t svg { transition: transform .15s; }
.ecom-mn-i[data-open="1"] > .ecom-mn-t svg, .ecom-mn-i:not([data-off]):hover > .ecom-mn-t svg { transform: rotate(180deg); }
.ecom-mn-i[data-open="1"] > .ecom-mn-t, .ecom-mn-i:not([data-off]):hover > .ecom-mn-t { background: rgba(255,255,255,.16); }
.ecom-mn-t[aria-current] { background: rgba(255,255,255,.18); }
.ecom-mn-t:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ecom-mn-p {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
  background: #fff; color: var(--ec-texto); padding: 16px 0 20px;
  border-top: 1px solid var(--ec-borde-suave); box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.ecom-mn-i[data-open="1"] > .ecom-mn-p { display: block; }
@media (hover: hover) { .ecom-mn-i:not([data-off]):hover > .ecom-mn-p { display: block; } }
.ecom-hd .ecom-mn-p a {
  display: block; color: var(--ec-texto); font: 500 14px/1.25 var(--ec-fuente); padding: 5px 10px;
  border-radius: 8px; text-decoration: none;
}
.ecom-hd .ecom-mn-p a:hover, .ecom-hd .ecom-mn-p a:focus-visible { background: var(--ec-pink-pale); color: var(--ec-primary); }
.ecom-hd .ecom-mn-p a[aria-current] { color: var(--ec-primary); font-weight: 700; }
.ecom-hd .ecom-mn-p a.ecom-mn-todo { display: inline-block; font-weight: 700; color: var(--ec-primary); margin-bottom: 12px; }
.ecom-hd .ecom-mn-p a.ecom-mn-todo--pie { margin: 14px 0 0; }
.ecom-mn-cols { column-count: 4; column-gap: 24px; }
.ecom-mn-col { break-inside: avoid; margin: 0 0 14px; }
.ecom-hd .ecom-mn-p a.ecom-mn-cat { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.ecom-mn-marcas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 24px; }

/* Cajón del celular: «Tienda ˅» y «Marcas ˅» despliegan; dentro, cada categoría
   con subcategorías se despliega a su vez. Sin flecha = va a una página. */
.ecom-catdet--top > summary { font-weight: 500; }
.ecom-catdet-in { padding: 0 0 4px 12px; }
.ecom-navdrawer .ecom-catdet-in > a, .ecom-navdrawer .ecom-catdet-in .ecom-catdet > a { font-size: 14px; }
.ecom-navdrawer .ecom-catdet-in > a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--ec-borde-suave); color: var(--ec-texto); }
.ecom-navdrawer .ecom-catdet-in > a:last-child { border-bottom: 0; }

.ecom-catdet > summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  padding: 11px 4px; font: 500 15px/1 var(--ec-fuente); color: var(--ec-texto);
  border-bottom: 1px solid var(--ec-borde-suave); min-height: 44px;
}
.ecom-catdet > summary::-webkit-details-marker { display: none; }
.ecom-catdet[open] > summary svg { transform: rotate(180deg); }
.ecom-catdet > summary[aria-current] { color: var(--ec-primary); font-weight: 700; }
.ecom-navdrawer .ecom-catdet > a { padding-left: 16px; font-size: 14px; }
.ecom-navdrawer .ecom-catdet > a[aria-current] { color: var(--ec-primary); font-weight: 700; }

/* Página de categoría: la fila 1 (principales) y, debajo, las subcategorías. */
.ecom-catrow { margin: 0 0 12px; }
.ecom-catrow .ecom-chip[aria-current] { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); font-weight: 700; }