/* ================================================================
   MAFE — categoria.css
   CSS específico de las páginas de categoría (categoria-*.html).
   NO se toca css/styles.css desde acá — pero como styles.css ya
   adoptó la misma línea de diseño de punta a punta (píldoras, sombra
   en vez de borde, --radius-pill, acento rojo unificado), la mayoría
   de lo que este archivo hacía como "override acotado a esta página"
   ya es redundante y se sacó. Lo que queda es lo genuinamente único
   de esta página: el banner de prueba, el hero de categoría, y el
   menú lateral con su acordeón de subcategorías (styles.css no sabe
   nada de subcategorías).
   ================================================================ */

/* ── Layout general: sidebar + contenido ─────────────────────────── */
.categoria-layout__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 0 64px;
  position: relative;
}
/* Nota: no hace falta flex-direction:column a mobile acá — el sidebar
   (#cat-menu-sidebar) vuelve a ser display:none puro a mobile (regla
   original de styles.css, sin overrides), así que .catalogo-main queda
   como único hijo en flujo y ocupa el 100% del ancho solo. La navegación
   mobile (chips) vive afuera de este contenedor, en .cat-mobile-nav. */

/* ── Menú de categorías madre: estado "próximamente" (disabled) ───── */
.cat-btn--proximamente {
  cursor: default;
  opacity: .55;
}
.cat-btn--proximamente:hover { background: transparent; color: var(--gris-80); }
.cat-btn--proximamente .cat-count {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  /* Es texto ("Próximamente"), no un número — el ancho fijo de
     .cat-btn .cat-count (pensado para 1-3 dígitos) lo apretaría. */
  width: auto;
  padding: 2px 8px;
}

/* ── Navegación mobile: chips horizontales (reemplaza el dropdown) ──
   Estilo Mercado Libre: categorías madre siempre visibles en una fila
   scrolleable, subcategorías de la categoría activa en una segunda fila
   (si tiene 2+ con productos), y los filtros secundarios (ofertas +
   orden) agrupados en un botón "Filtros" con panel chico. Oculto en
   desktop — ahí sigue el sidebar de siempre, sin cambios. Rediseño
   2026-08-06, reemplaza el drawer/dropdown de rondas anteriores. */
.cat-mobile-nav { display: none; }

@media (max-width: 899px) {
  .cat-mobile-nav {
    display: block;
    padding: 12px 0 4px;
  }

  .cat-chips-row,
  .cat-subchips-row {
    display: flex; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 20px 10px;
    scrollbar-width: none;
  }
  .cat-chips-row::-webkit-scrollbar,
  .cat-subchips-row::-webkit-scrollbar { display: none; }

  .cat-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px; min-height: 40px;
    border: 2px solid var(--gris-20); border-radius: var(--radius-pill);
    background: var(--blanco); color: var(--gris-80);
    font-size: .85rem; font-weight: 600; white-space: nowrap;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
  }
  .cat-chip.active {
    background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
  }

  /* Subchips: mismo componente, un escalón más chico — son un nivel
     secundario de la jerarquía (subcategoría de la categoría activa). */
  .cat-chip--sub {
    min-height: 34px; padding: 0 13px; font-size: .78rem;
    border-color: var(--gris-10); background: var(--gris-05);
  }
  .cat-chip--sub.active { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

  .cat-chip__count {
    font-size: .68rem; font-weight: 700;
    background: var(--gris-10); color: var(--gris-60);
    padding: 1px 6px; border-radius: var(--radius-pill);
  }
  .cat-chip.active .cat-chip__count,
  .cat-chip--sub.active .cat-chip__count { background: rgba(255,255,255,.25); color: var(--blanco); }

  /* Botón "Filtros" + panel chico (ofertas + orden + limpiar) — misma
     técnica de max-height que ya usa .cat-submenu, sin inventar un
     patrón nuevo. Sin overlay: el panel empuja el contenido de abajo
     (igual que el dropdown de categorías que reemplazamos), y un click
     afuera lo cierra vía listener en JS, no vía una capa visual. */
  .btn-filtros-toggle {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 20px 0;
    background: var(--blanco); border: 2px solid var(--gris-20);
    color: var(--gris-80); font-weight: 600; font-size: .85rem;
    padding: 9px 18px; min-height: 44px; border-radius: var(--radius-pill);
  }
  .btn-filtros-toggle:hover { border-color: var(--rojo); color: var(--rojo); }
  .btn-filtros-toggle[aria-expanded="true"] { border-color: var(--rojo); background: var(--rojo-lt); color: var(--rojo-dk); }

  .filtros-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
    margin: 0 20px;
  }
  .filtros-panel.open {
    max-height: 260px;
    margin-top: 14px;
  }
  .filtros-panel .filterbar-check { font-size: .85rem; margin-bottom: 16px; }
  .filtros-panel .sort-wrap { flex-direction: column; align-items: stretch; gap: 7px; margin-bottom: 16px; }
  .filtros-panel .sort-dropdown { width: 100%; }
  .filtros-panel .btn-limpiar-fb { width: 100%; justify-content: center; height: 38px; font-size: .8rem; }

  /* En catalogo.html el .cat-banner (margin-top:var(--nav-h) + su propia
     altura) empuja .cat-filterbar bien por debajo del umbral en el que
     "sticky" lo clava (top:var(--nav-h)), así que nunca llega a pegarse
     en la carga inicial. Las páginas de categoría no tienen ese banner:
     el header colapsa a 0 (navbar y mobile-drawer son fixed), así que
     .cat-filterbar arranca en flujo casi en y=0 y sticky lo clava de
     entrada en var(--nav-h) — pero .cat-mobile-nav sigue reservando su
     lugar en el flujo NATURAL (no el "pegado") de .cat-filterbar, que
     es más arriba. Resultado: .cat-mobile-nav queda tapado debajo de
     .cat-filterbar. margin-top:var(--nav-h) lo baja exactamente al
     borde inferior real (pegado) del filterbar. Mismo bug que ya
     resolvimos una vez para el botón "Categorías" del dropdown viejo. */
  body[data-categoria-id] .cat-mobile-nav {
    margin-top: var(--nav-h);
  }
}
@media (min-width: 900px) {
  .cat-mobile-nav { display: none !important; }
}

/* ── Miga de pan ──────────────────────────────────────────────────── */
.breadcrumb {
  font-size: .8rem; color: var(--gris-60);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.breadcrumb a:hover { color: var(--rojo); }
.breadcrumb span[aria-current] { color: var(--texto); font-weight: 600; }

/* ── Encabezado de categoría ──────────────────────────────────────── */
.categoria-hero { margin-bottom: 44px; }
.categoria-hero__eyebrow {
  display: inline-flex; align-items: center;
  background: var(--rojo-lt); color: var(--rojo);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 5px 14px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.categoria-hero h1 {
  font-size: 2.75rem; font-weight: 800; color: var(--texto);
  line-height: 1.08; letter-spacing: -.5px;
  margin-bottom: 14px;
}
.categoria-hero__desc {
  font-size: 1.05rem; color: var(--texto-sec); max-width: 640px; line-height: 1.7;
}

@media (max-width: 899px) {
  .categoria-hero h1 { font-size: 2.1rem; }
}
@media (max-width: 767px) {
  .categoria-hero { margin-bottom: 32px; }
  .categoria-hero h1 { font-size: 1.7rem; letter-spacing: -.3px; }
  .categoria-hero__desc { font-size: .95rem; }
}

/* ── Acordeón de subcategorías (hover desktop / click mobile) ──────
   styles.css no sabe nada de subcategorías — todo esto es propio de
   esta página. Se expande "en línea" dentro del sidebar (no como
   flyout flotante) porque .cat-sidebar tiene overflow-y:auto, y un
   hijo position:absolute que se saliera del ancho quedaría recortado
   por ese mismo scroll. */
.cat-menu-item { position: relative; }
.cat-menu-item__chevron {
  margin-left: auto; font-size: .7rem; color: var(--gris-40);
  transition: transform var(--trans);
  flex-shrink: 0;
}
.cat-menu-item.open .cat-menu-item__chevron { transform: rotate(90deg); }
/* En catalogo.html las filas de categoría madre traen badge de cantidad
   ANTES de la flecha — con los dos usando margin-left:auto competían por
   el mismo espacio libre y quedaban descuadrados. El badge (ancho fijo,
   ver .cat-btn .cat-count en styles.css) ya empuja todo a la derecha; acá
   la flecha solo necesita un margen chico y fijo después de él. */
.cat-count + .cat-menu-item__chevron { margin-left: 8px; }

/* Sin padding acá a propósito: con max-height:0 + overflow:hidden, un
   padding en este mismo elemento no se comprime a 0 (limitación conocida
   de CSS en acordeones animados por max-height) y deja un resquicio
   visible aunque el contenido esté "cerrado". El espaciado de cada ítem
   ya lo da su propio margin (.cat-submenu__item), así que no hace falta
   acá. Fondo levemente distinto al del sidebar para que el panel
   desplegado se lea como una unidad propia, sin necesidad de una línea. */
.cat-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
  background: var(--gris-05);
}
.cat-menu-item.has-submenu:hover .cat-submenu,
.cat-menu-item.has-submenu.open .cat-submenu {
  max-height: 700px; /* generoso: cubre las 17 subcategorías de Quesos */
}

.cat-submenu__item {
  display: flex; align-items: center;
  margin: 2px 10px 2px 30px;
  width: calc(100% - 40px);
  text-align: left; padding: 9px 14px;
  font-size: .8rem; color: var(--gris-80);
  border-radius: var(--radius);
  transition: background var(--trans), color var(--trans);
}
.cat-submenu__item:hover { background: var(--rojo-lt); color: var(--rojo); }
.cat-submenu__item.active {
  background: var(--rojo); color: var(--blanco); font-weight: 700;
}

.cat-submenu__count {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  background: var(--gris-10); color: var(--gris-60);
  padding: 1px 4px; border-radius: var(--radius-pill);
  width: 26px; text-align: center; flex-shrink: 0;
}
.cat-submenu__item.active .cat-submenu__count { background: var(--blanco); color: var(--rojo-dk); }

/* ── Filtros adicionales (ofertas + orden) dentro de la columna del
   sidebar, debajo del menú de categorías. Reutiliza los componentes que
   ya existen (.filterbar-check, .sort-select) sin redefinirlos — esto
   solo los apila prolijamente en la columna angosta en vez del layout
   horizontal que tenían en la barra de filtros. Usado en catalogo.html. */
.cat-sidebar__filtros {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cat-sidebar__filtros-title {
  font-size: .7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gris-40);
}
.cat-sidebar__filtros .filterbar-check {
  font-size: .85rem;
}
.cat-sidebar__filtros .sort-wrap {
  flex-direction: column; align-items: stretch; gap: 7px;
}
.cat-sidebar__filtros .sort-select,
.cat-sidebar__filtros .sort-dropdown {
  width: 100%;
}
.cat-sidebar__filtros .btn-limpiar-fb {
  width: 100%;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  font-size: .8rem;
}