/* ============================================================
   catalogo.css  ·  /tienda-de-electronica/ con el catálogo del buscador
   Se carga DESPUÉS de resultados.min.css y mecha-barra.css, y solo retoca lo que
   cambia de una búsqueda a un catálogo. Todo lo que esconde algo cuelga de
   `html.mecha-cat-js` (la pone un script del head) y se desactiva con
   `html.mecha-cat-fallo` (el servicio no respondió): sin esas condiciones la página
   es exactamente la grilla de siempre.
   ============================================================ */

/* El bloque nuevo solo se ve cuando el JS corre; sin JS queda la grilla nativa. */
.mecha-cat-bloque{display:none}
html.mecha-cat-js:not(.mecha-cat-fallo) .mecha-cat-bloque{display:block}

/* La grilla nativa y el título morado de Flatsome ("Tienda de Electronica" + "Sort by
   stock status") salen de la vista mientras el catálogo nuevo está en pie. */
html.mecha-cat-js:not(.mecha-cat-fallo) #mecha-cat-nativo,
html.mecha-cat-js:not(.mecha-cat-fallo) body.mecha-catalogo .shop-page-title{display:none}

/* Mientras llega la primera tanda: el título ya puesto y alto suficiente para que el
   pie de la tienda no suba y baje (CLS). Medido el 27-oct-2026: con 70vh el pie de
   página quedaba DENTRO de la primera pantalla del teléfono y la llegada de las tarjetas
   lo empujaba afuera (0,10 de CLS él solo). Con 100vh nace fuera de la vista. La primera
   tanda real mide bastante más. */
html.mecha-cat-js:not(.mecha-cat-fallo) #mb-resultados:not(.mb-nueva){min-height:100vh}
/* El gris de la mesa desde el primer pintado (mecha-barra lo pone recién cuando el JS
   termina: era un parpadeo de blanco a gris). */
html.mecha-cat-js:not(.mecha-cat-fallo) body.mecha-catalogo #content.mecha-cat-bloque{background:#f6f5f8}
/* Mismo tamaño, peso y color que el h1 que pinta el componente (`.mb-cab h1`): si no, el
   título salta de 28 a 22 px cuando llega la primera tanda. */
.mecha-cat-h1{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.4px;color:#3a1262}
@media (max-width:600px){.mecha-cat-h1{font-size:18px}}

/* "¿No estaba lo que buscabas? Prueba con el número de parte": es la despedida de una
   búsqueda y aquí no hay nada que no haya estado. */
body.mecha-catalogo .mb-alt{display:none}

/* SIN LA FILA DE CATEGORÍAS (27-oct-2026). Pablo preguntó si servía de algo y se midió en
   GA4: en /busqueda/, del 28-ago al 26-oct, menos del 0,7% de las vistas siguió un chip de
   categoría (~165 vistas, menos de 3 al día) contra el 47% que fue a una ficha. Aquí además
   son siempre las mismas 8 categorías grandes, que ya están en el menú CATEGORÍAS del
   encabezado, y llevan fuera del catálogo. Sin ellas los productos suben dos filas. */
body.mecha-catalogo #mb-resultados .mb-main>nav.mb-cat{display:none}

/* "Más vendidos" mide 92 px contra los 70 de "Relevancia": en 390 px la barra (tres
   pestañas, contador y embudo) se pasaba 34 px y la pestaña "Nuevo" quedaba cortada. En
   teléfono el contador muestra solo el número ("2.112"); la palabra "productos" se queda
   en escritorio. */
@media (max-width:480px){
  .mb-nueva .mb-bar>.mb-cnt[data-n]{font-size:0}
  .mb-nueva .mb-bar>.mb-cnt[data-n]:before{content:attr(data-n);font-size:11.5px}
}
/* Medido el 27-oct-2026 en 360 px, el ancho más común en Android: aun así "Nuevo" quedaba
   3 px detrás del contador ("Nuevc"). Las pestañas se juntan 8 px. Y en 320 px (teléfonos
   chicos o letra al 200%) no cabe el contador: se va, "Nuevo" no. */
@media (max-width:400px){
  body.mecha-catalogo .mb-nueva .mb-ord{gap:16px}
}
@media (max-width:359px){
  body.mecha-catalogo .mb-nueva .mb-bar>.mb-cnt{display:none}
}

/* Si el servicio falla, la grilla nativa vuelve con su paginación de siempre (Flatsome la
   esconde con `.archive .woocommerce-pagination{display:none}` porque cuenta con su scroll
   infinito, que en esta página no se carga). */
html.mecha-cat-fallo #mecha-cat-nativo .woocommerce-pagination{display:block}

/* ============================================================
   ESCRITORIO (901 px o más): pestañas arriba de los filtros
   Pablo, 27-oct-2026: la fila de "Más vendidos, Ofertas, Nuevo ... 2.112 productos"
   cruzaba todo el ancho y dejaba vacío el espacio sobre las categorías, y al bajar los
   filtros quedaban pegados a 96 px del borde (`top:96px` de resultados.css, pensado para
   un encabezado fijo que esta tienda no tiene): un hueco vacío arriba de la columna
   izquierda mientras los productos ocupaban todo el alto a la derecha.
   Ahora la columna izquierda es [pestañas + filtros] y queda fija al bajar, sin hueco; la
   derecha [productos, sin la fila de categorías desde la tarde del 27-oct] arranca a la altura de las pestañas, y el contador va
   junto al título.
   Sin mover nodos: `.mb-cpo` pasa a `display:contents`, así la barra, el panel y la
   grilla son celdas de UNA sola grilla en #mb-resultados. El componente repinta todo su
   HTML en cada filtro u orden y esto se aplica solo, sin JavaScript.
   La barra y el panel comparten la MISMA celda (fila 2, columna 1) a propósito: un
   elemento sticky solo se mueve dentro de su celda, y la fila 2 mide lo que mide la
   grilla de productos. El panel baja 55 px (los 45 de la barra más 10 de aire) con
   margin-top y se pega a esos mismos 55 px.
   ============================================================ */
@media (min-width:901px){
  body.mecha-catalogo #mb-resultados.mb-nueva{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;align-items:start}
  body.mecha-catalogo #mb-resultados.mb-nueva>.mb-cab{grid-column:1/-1;grid-row:1}
  body.mecha-catalogo #mb-resultados.mb-nueva>.mb-cpo{display:contents}
  body.mecha-catalogo #mb-resultados.mb-nueva>.mb-bar{grid-column:1;grid-row:2;position:sticky;top:0;z-index:3;margin:0;background:var(--mb-f)}
  body.mecha-catalogo #mb-resultados.mb-nueva .mb-side{grid-column:1;grid-row:2;margin-top:55px;top:55px;max-height:calc(100vh - 71px)}
  /* Con mecha-barra.js el panel no scrollea por dentro: baja con la página hasta mostrar
     su final y ahí se queda (Pablo, 27-oct-2026: "se queda recortado y no puedo bajar
     más"). El `max-height` de arriba queda solo para cuando ese JS no corre. */
  body.mecha-catalogo #mb-resultados.mb-nueva.mb-dos .mb-side{max-height:none;overflow:visible}
  body.mecha-catalogo #mb-resultados.mb-nueva .mb-main{grid-column:2;grid-row:2}
  /* las tres pestañas a lo ancho de la columna, alineadas con los bordes del panel */
  body.mecha-catalogo #mb-resultados.mb-nueva .mb-ord{justify-content:space-between;gap:12px}
  /* el contador vive junto al título (lo agrega catalogo.js) */
  body.mecha-catalogo #mb-resultados.mb-nueva .mb-bar>.mb-cnt{display:none}
  body.mecha-catalogo .mecha-cat-total{align-self:baseline;color:var(--mb-m);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
}
@media (max-width:900px){
  body.mecha-catalogo .mecha-cat-total{display:none}
}

/* Entre 901 y 1024 px el tema hijo pone `html, body {overflow-x:hidden}` (custom-styles.css)
   y eso convierte al <body> en un contenedor de scroll que nunca scrollea: todo lo que es
   sticky deja de pegarse (medido el 27-oct-2026: en 901 y 1000 px la barra y los filtros se
   iban con la página). `clip` recorta igual hacia los lados y no crea ese contenedor. */
@media (min-width:901px) and (max-width:1024px){
  body.mecha-catalogo{overflow-x:clip}
  /* Con lo sticky vivo, la franja morada "Envío gratis" (sticky en el tema bajo 1024 px,
     z-index 80) se quedaba pegada arriba y tapaba las pestañas (captura de iPad horizontal,
     27-oct-2026). En el resto del sitio esa franja nunca se pega, por la misma regla del
     tema que rompe lo sticky: aquí se deja igual que en el resto. */
  body.mecha-catalogo .banner-container-fixed{position:relative}
}

/* El banner y la grilla de una campaña (mecha-campana) van arriba del catálogo, fuera del gris:
   mismo ancho que el contenido y un respiro antes del título. */
body.mecha-catalogo .mecha-cat-campana{padding-top:12px}