/* =========================================================
   nav-cats.css — Dropdown sidebar + flyout estilo Aslan/B&H
   Reemplaza al drawer slide-out en desktop (≥1024px).
   En mobile (<1024px), el drawer existente toma over.
   Light-first; dark theme override al final.
   ========================================================= */

/* ──── Scroll-lock: cuando el dropdown está abierto, fijar tanto html
   como body para que la rueda del mouse scrollee SOLO dentro del sidebar
   y NO la página. Compensamos el scrollbar via padding-right para evitar
   layout shift. Setear ambos asegura que ningún browser hereda overflow
   del root al viewport. */
html.has-cats-open,
body.has-cats-open {
  overflow: hidden !important;
  touch-action: none;
}
html.has-cats-open {
  padding-right: var(--scrollbar-w, 0px);
}

/* CAUSA RAÍZ del bucle open/close al hover Categorías:
   `overflow: hidden` en <html> elimina el ancestor scrollable del
   header sticky → el header colapsa a su posición natural en el
   documento → trigger se mueve → mouseleave → closeCats → loop.
   Solución: forzamos position:fixed con `top` igual a la posición
   visual del header en el momento de abrir (capturado por JS en
   --header-cats-top). Esto resuelve AMBOS casos:
   · scrollY=0 con promo bar: headerRect.top≈36px → top:36px (no salta)
   · scrollY>80 ya compacto: headerRect.top=0px → top:0px (igual que antes)
   `right` compensa el scrollbar oculto para no ganar ancho. */
body.has-cats-open .shop-header {
  position: fixed;
  top: var(--header-cats-top, 0px);
  left: 0;
  right: var(--scrollbar-w, 0px);
}

/* ──── Backdrop sutil sobre el resto (sin tapar el dropdown ni el header)
   z 49 = debajo del header sticky (z 50) y debajo del dropdown (z 95).
   Resultado: header y dropdown quedan limpios, solo el contenido BEHIND
   se dimmea sutilmente. ──── */
body.has-cats-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 27, 110, 0.20);
  z-index: calc(var(--z-sticky) - 1);
  pointer-events: none;
  animation: ncats-backdrop-in 220ms linear;
}
[data-theme="dark"] body.has-cats-open::before {
  background: rgba(0, 0, 0, 0.55);
}
@keyframes ncats-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ──── Dropdown root — fixed, anchor por JS ──── */
.nav-cats-dropdown {
  position: fixed;
  /* top y left se setean por JS al abrir: top = edge inferior del
     header, left = edge izquierdo del trigger "Categorías". */
  width: min(1040px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 120px));
  z-index: calc(var(--z-dropdown) - 5);

  display: grid;
  grid-template-columns: 280px 1fr;

  background: var(--bg-deep);
  /* Color explícito del root → todo descendiente hereda fg correcto.
     Defensa contra cualquier override que pueda colarse por ser fixed
     y appendado a body. */
  color: var(--fg);
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: var(--shadow-xl);

  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  /* Slide-up + fade-in: empieza 6px POR DEBAJO de su posición final.
     Así el dropdown nunca ocupa área del header durante la animación
     (evita que sobrepase el trigger y dispare mouseleave falso).
     240ms ease físico, mismo que spring back. */
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease-out;
  /* overflow visible para que los panels L3 cascada puedan salirse
     hacia los costados sin ser recortados. */
  overflow: visible;
}
.nav-cats-dropdown[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-cats-dropdown[hidden] { display: none; }

/* Servicios — sección al final del sidebar, separada de cats de
   productos. Border-top para diferenciar visualmente. */
.nav-cats-sidebar__group--services {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
}
.nav-cats-sidebar__group--services .nav-cats-sidebar__group-label {
  color: var(--accent-text);
}
.nav-cats-item--service {
  font-size: 13px !important;
  color: var(--fg-mute);
}
.nav-cats-item--service .nav-cats-item__icon {
  font-size: 14px;
  color: var(--accent-text);
}
.nav-cats-item--service:hover { background: var(--accent-tint); }

/* ──── Featured (Reboot + Ofertas) — sección destacada arriba
   del listado de categorías. Outline cards con icon + título + sub. */
.nav-cats-sidebar__featured {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-cats-sidebar__featured .nav-cats-sidebar__group-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.nav-cats-featured {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid currentColor;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav-cats-featured__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  font-weight: 800;
  background: currentColor;
  color: var(--bg-deep);
}
.nav-cats-featured__icon::before {
  content: '';
  position: absolute;
}
.nav-cats-featured__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-cats-featured__title {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.nav-cats-featured__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.nav-cats-featured--reboot { color: var(--c-mag-500); }
.nav-cats-featured--reboot:hover { background: var(--c-mag-500); color: var(--c-white); }
.nav-cats-featured--ofertas { color: var(--accent-text); }
.nav-cats-featured--ofertas:hover { background: var(--accent-text); color: var(--c-white); }

/* ──── Sidebar (280px) ──── */
.nav-cats-sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nav-cats-sidebar__header {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.nav-cats-sidebar__title {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.nav-cats-sidebar__meta {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 4px 0 0;
  text-transform: uppercase;
}
.nav-cats-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.nav-cats-sidebar__list::-webkit-scrollbar { width: 6px; }
.nav-cats-sidebar__list::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 3px;
}
.nav-cats-sidebar__group { }
.nav-cats-sidebar__group + .nav-cats-sidebar__group {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
}
.nav-cats-sidebar__group-label {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.nav-cats-sidebar__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item */
.nav-cats-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr 12px;
  align-items: center;
  gap: 12px;
  padding: 9px var(--sp-5);
  min-height: 36px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-mute);
  text-decoration: none;
  transition:
    background var(--t-fast) linear,
    color var(--t-fast) linear;
}
.nav-cats-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent-text);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease-snap);
}
.nav-cats-item:hover,
.nav-cats-item[data-active="true"],
.nav-cats-item[aria-current="true"] {
  background: var(--accent-tint);
  color: var(--fg);
}
.nav-cats-item[data-active="true"] {
  background: color-mix(in srgb, var(--accent-text) 8%, transparent);
}
.nav-cats-item:hover::before,
.nav-cats-item[data-active="true"]::before {
  transform: scaleY(1);
}
.nav-cats-item:hover .nav-cats-item__icon,
.nav-cats-item[data-active="true"] .nav-cats-item__icon,
.nav-cats-item:hover .nav-cats-item__chevron,
.nav-cats-item[data-active="true"] .nav-cats-item__chevron {
  color: var(--accent-text);
}
.nav-cats-item:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}
.nav-cats-item__icon {
  color: var(--fg-dim);
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
}
.nav-cats-item__icon svg {
  width: 18px; height: 18px;
  stroke-width: 1.6;
}
.nav-cats-item__chevron {
  color: var(--fg-dim);
  display: grid; place-items: center;
}

/* ──── Flyout (resto del ancho) ──── */
.nav-cats-flyout {
  background: var(--bg-deep);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  transition: opacity 140ms ease-out;
}
/* Fade swap: cuando cambia de cat, fade out brevemente, swap content,
   fade in. JS toggla .is-swapping ~100ms. */
.nav-cats-flyout.is-swapping { opacity: 0.3; }
.nav-cats-flyout__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      ellipse at top left,
      color-mix(in srgb, var(--accent-text) 5%, transparent) 0%,
      transparent 60%
    );
}
.nav-cats-flyout__hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-cats-flyout__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0;
  line-height: 1.1;
}
.nav-cats-flyout__tagline {
  font-size: 0.88rem;
  color: var(--fg-dim);
  margin: 0;
  line-height: 1.4;
  max-width: 520px;
}
.nav-cats-flyout__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__cta:hover {
  color: var(--bg-deep);
  border-color: var(--accent-text);
  background: var(--accent-text);
}

.nav-cats-flyout__grid {
  display: grid;
  grid-template-columns: 280px 160px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
/* Layout 2-col adaptado para cats sin brands */
.nav-cats-flyout[data-layout="2col"] .nav-cats-flyout__grid {
  grid-template-columns: 1fr 320px;
}
.nav-cats-flyout[data-layout="2col"] .nav-cats-flyout__col--brands { display: none; }

/* ──── Columnas ──── */
.nav-cats-flyout__col-label {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

/* Subcategorías */
.nav-cats-flyout__col--subs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-cats-flyout__col--subs li + li { margin-top: 2px; }
.nav-cats-flyout__sub {
  display: block;
  padding: 7px 8px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
  transition:
    background var(--t-fast) linear,
    border-color var(--t-fast) linear;
}
.nav-cats-flyout__sub:hover {
  background: var(--accent-tint);
  border-color: var(--line);
}
.nav-cats-flyout__sub-children {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}

/* L2 sub: layout name + chevron al lado derecho cuando hay children.
   position relative para anclar el panel L3 que se despliega a la
   derecha como cascada. */
.nav-cats-flyout__sub-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.nav-cats-flyout__sub-wrap.has-children .nav-cats-flyout__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-cats-flyout__sub-name {
  display: block;
  flex: 1;
  min-width: 0;
}
.nav-cats-flyout__sub-chev {
  flex-shrink: 0;
  color: var(--fg-dim);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__sub-chev {
  transform: rotate(0);
  color: var(--accent-text);
}

/* L3 cascada lateral: aparece como panel A LA DERECHA del L2 cuando
   se hace hover. Patrón Aslan/Windows/Mac native menus. Position
   absolute anclado al sub-wrap, slide-in desde -8px. */
/* ═══════════════════════════════════════════════════════════════
   L3 CASCADE — patrón pulido, fluido, integrado al flow de la tienda.
   Cross-listings fluyen como subs normales (sin separator, sin italic).
   Solo se distinguen por un micro-↗ a la derecha (gris claro).
   ═══════════════════════════════════════════════════════════════ */
.nav-cats-flyout__l3-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  left: calc(100% + 6px);
  top: -4px;
  width: 240px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
  box-shadow: var(--shadow-lg, 0 24px 56px rgba(0,0,0,0.35));
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.nav-cats-flyout__l3-list::-webkit-scrollbar { width: 5px; }
.nav-cats-flyout__l3-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list,
.nav-cats-flyout__sub-wrap.has-children:focus-within .nav-cats-flyout__l3-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Stagger fade-in de los items al abrir el cascade (delay incremental) */
.nav-cats-flyout__l3-list > li {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li,
.nav-cats-flyout__sub-wrap.has-children:focus-within .nav-cats-flyout__l3-list > li {
  opacity: 1;
  transform: translateY(0);
}
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(1)  { transition-delay: 20ms; }
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(2)  { transition-delay: 35ms; }
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(3)  { transition-delay: 50ms; }
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(4)  { transition-delay: 65ms; }
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(5)  { transition-delay: 80ms; }
.nav-cats-flyout__sub-wrap.has-children:hover .nav-cats-flyout__l3-list > li:nth-child(n+6){ transition-delay: 95ms; }

/* ─── Item base del L3 ─── */
.nav-cats-flyout__l3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mute);
  border-radius: var(--rad-sm);
  position: relative;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
/* Indicador izquierdo: línea accent que aparece al hover */
.nav-cats-flyout__l3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent-text);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-cats-flyout__l3:hover {
  color: var(--accent-text);
  background: var(--accent-tint);
}
.nav-cats-flyout__l3:hover::before { height: 60%; }
.nav-cats-flyout__l3:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

/* ─── Pure view ("✦ Ver todos") — destacado, integrado al flow ─── */
.nav-cats-flyout__l3--pure {
  margin-bottom: 4px;
  padding-block: 8px;
  font-weight: 700;
  color: var(--accent-text);
  background: linear-gradient(90deg, var(--accent-tint) 0%, transparent 100%);
}
.nav-cats-flyout__l3--pure:hover {
  background: linear-gradient(90deg, var(--accent-tint) 0%, var(--accent-tint) 60%, transparent 100%);
}
.nav-cats-flyout__l3--pure::before { height: 60%; }

/* ─── Filter view: sutil pero LEGIBLE (no más punto medio) ─── */
.nav-cats-flyout__l3--filter {
  font-weight: 400;
  color: var(--fg-dim);
}
.nav-cats-flyout__l3--filter:hover { color: var(--accent-text); }

/* ─── Brand-as-cat: tipografía sutil distintiva ─── */
.nav-cats-flyout__l3--brand .nav-cats-flyout__l3-cross-mark,
.nav-cats-flyout__l3--brand {
  /* Sin distinción visual fuerte — solo es L3 normal */
}

/* ─── Cross-listing: FLUYE como sub normal, solo micro-↗ a la derecha ─── */
.nav-cats-flyout__l3--cross {
  /* Sin italic, sin color magenta, sin display flex distinto */
  /* Hereda todo del .nav-cats-flyout__l3 base */
}
/* El primer span (texto) toma el espacio, el ↗ va al final */
.nav-cats-flyout__l3--cross > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Micro-badge ↗ — visible pero discreto, gris claro. Al hover del link cambia
   suavemente a accent. */
.nav-cats-flyout__l3-cross-mark {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  opacity: 0.55;
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__l3--cross:hover .nav-cats-flyout__l3-cross-mark {
  color: var(--accent-text);
  opacity: 1;
  transform: translateX(2px);
}

/* ─── Arrow del pure-view (✦) ─── */
.nav-cats-flyout__l3-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.nav-cats-flyout__l3--pure .nav-cats-flyout__l3-arrow { color: var(--accent-text); }

/* ═══════════════════════════════════════════════════════════════
   CROSS CHIPS DEL HERO (cross-listings agregados del top)
   Estilo pill suave coherente con la tienda. El ↗ al final.
   ═══════════════════════════════════════════════════════════════ */
.nav-cats-flyout__cross-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.nav-cats-flyout__cross-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-mute);
  background: var(--bg-elev, var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__cross-chip:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: var(--accent-tint);
  transform: translateY(-1px);
}
.nav-cats-flyout__cross-chip-mark {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  opacity: 0.6;
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__cross-chip:hover .nav-cats-flyout__cross-chip-mark {
  color: var(--accent-text);
  opacity: 1;
  transform: translateX(2px);
}

/* Asegurar que el panel L3 no quede recortado por overflow del flyout */
.nav-cats-flyout, .nav-cats-flyout__col--subs { overflow: visible; }

/* Brands */
.nav-cats-flyout__col--brands ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-cats-flyout__brand {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mute);
  position: relative;
  padding-left: 16px;
  transition: color var(--t-fast) linear;
}
.nav-cats-flyout__brand::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  background: var(--accent-text);
  transform: translateY(-50%);
  opacity: 0.4;
  transition: opacity var(--t-fast) linear;
}
.nav-cats-flyout__brand:hover {
  color: var(--accent-text);
}
.nav-cats-flyout__brand:hover::before { opacity: 1; }

/* Card variant del sub — usada en el mega-panel del menubar para
   darle más peso visual a cada cat hija (icono + título + preview). */
.nav-cats-flyout__sub--card {
  display: grid !important;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  background: var(--bg-subtle);
  border: 1px solid var(--line) !important;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__sub--card:hover {
  border-color: var(--accent-text) !important;
  background: var(--bg-deep);
  transform: translateX(2px);
}
/* Cross-page active state: la cat actual del URL queda destacada
   con border accent + bg tint. Resuelve "no sé dónde estoy". */
.nav-cats-flyout__sub--card.is-current {
  border-color: var(--accent-text) !important;
  background: var(--accent-tint);
}
.nav-cats-flyout__sub--card.is-current .nav-cats-flyout__sub-icon {
  background: var(--accent-text);
  color: var(--bg-deep);
  border-color: var(--accent-text);
}
.nav-cats-flyout__sub--card.is-current .nav-cats-flyout__sub-title {
  color: var(--accent-text);
  font-weight: 700;
}
.nav-cats-flyout__sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--accent-text);
  flex-shrink: 0;
}
.nav-cats-flyout__sub-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}
.nav-cats-flyout__sub--card:hover .nav-cats-flyout__sub-icon {
  background: var(--accent-tint);
  border-color: var(--accent-text);
}
.nav-cats-flyout__sub-text { min-width: 0; }
.nav-cats-flyout__sub-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.nav-cats-flyout__sub-arrow {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__sub--card:hover .nav-cats-flyout__sub-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent-text);
}

/* Brand chips — pills clickeables en lugar de lista plana */
.nav-cats-flyout__brand-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nav-cats-flyout__brand-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__brand-chip:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: var(--bg-deep);
}

/* Lista de productos top — 2 cards compactos */
.nav-cats-flyout__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Banner + shortcuts */
.nav-cats-flyout__col--media { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Teaser de producto top (solo aparece en el mega-panel hover de
   la barra horizontal — el dropdown grande usa banner ilustrativo).
   Comparte el lenguaje visual del flyout: outline card, sin shadow,
   tipografía display + mono, brutalist border-radius 0. */
.nav-cats-flyout__teaser {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  align-items: center;
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav-cats-flyout__teaser:hover {
  border-color: var(--accent-text);
  background: var(--bg-deep);
}
.nav-cats-flyout__teaser-thumb {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.nav-cats-flyout__teaser-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.nav-cats-flyout__teaser-thumb svg { width: 80%; height: 80%; color: var(--accent-text); }
.nav-cats-flyout__teaser-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-cats-flyout__teaser-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mag-500);
}
.nav-cats-flyout__teaser-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-cats-flyout__teaser-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--price);
  margin-top: 1px;
}

.nav-cats-flyout__banner {
  position: relative;
  display: block;
  aspect-ratio: 7 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 12%, var(--bg-subtle)) 0%,
      color-mix(in srgb, var(--accent-text) 8%, var(--bg-subtle)) 100%);
  text-decoration: none;
  color: var(--fg);
}
.nav-cats-flyout__banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nav-cats-flyout__banner-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--brand);
  opacity: 0.32;
}
[data-theme="dark"] .nav-cats-flyout__banner-fallback { opacity: 0.18; }
.nav-cats-flyout__banner-fallback svg {
  width: 80px; height: 80px;
  stroke-width: 1;
}
.nav-cats-flyout__banner-cta {
  position: absolute;
  bottom: 12px; left: 12px;
  padding: 5px 10px;
  background: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg-deep);
}

/* Shortcuts (chips) */
.nav-cats-flyout__shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.nav-cats-flyout__shortcut-group { }
.nav-cats-flyout__shortcut-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.nav-cats-flyout__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-cats-flyout__chip {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  text-decoration: none;
  transition:
    color var(--t-fast) linear,
    border-color var(--t-fast) linear,
    background var(--t-fast) linear;
}
.nav-cats-flyout__chip:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: var(--accent-tint);
}

/* ──── Live region (visually hidden) ──── */
.nav-cats-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ──── Trigger button connection visual ──── */
/* (.mega-nav__all eliminado — el dropdown ya no se ancla al mega-nav,
   ahora vive en el header como .cats-trigger) */

/* ──── Reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
  .nav-cats-dropdown,
  .nav-cats-item,
  .nav-cats-item::before,
  .nav-cats-flyout__sub,
  .nav-cats-flyout__chip {
    transition: opacity 100ms linear !important;
    transform: none !important;
  }
  .nav-cats-dropdown[data-open="true"] { transform: none; }
  body.has-cats-open::before { animation: none; opacity: 1; }
}

/* ──── Mobile fallback: <1024px desactiva dropdown,
   el drawer existente (cats-drawer) toma over ──── */
@media (max-width: 1024px) {
  /* matchea la especificidad de [data-open="true"] — sin !important */
  .nav-cats-dropdown,
  .nav-cats-dropdown[data-open="true"] { display: none; }
  body.has-cats-open::before { display: none; }
}

/* Variante "+ N subcategorías más →" — usa accent-text con
   tipografía mono. Antes era inline style en el JS, lo cual
   no era theme-aware. Como clase, hereda los tokens del tema. */
.nav-cats-flyout__sub--more {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 800;
}

/* ──── Light theme: overrides ULTRA-DEFENSIVOS con ────
   El dropdown se appendea a <body> via JS. En light theme los items
   estaban invisibles. Forzamos color con + background
   explícito para garantizar contraste pase lo que pase con specificity.
   `!important` justificado: estos son los estilos canónicos del
   componente en light theme, no hacks. */
[data-theme="light"] .nav-cats-dropdown {
  background: var(--bg-deep);
  color: var(--fg);
}
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout { background: var(--bg-deep); }
[data-theme="light"] .nav-cats-dropdown .nav-cats-sidebar { background: var(--bg-subtle); }
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__sub,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__title,
[data-theme="light"] .nav-cats-dropdown .nav-cats-sidebar__title { color: var(--fg); }
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__col-label,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__shortcut-label,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__tagline,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__sub-children,
[data-theme="light"] .nav-cats-dropdown .nav-cats-sidebar__meta,
[data-theme="light"] .nav-cats-dropdown .nav-cats-sidebar__group-label { color: var(--fg-dim); }
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__brand,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__chip,
[data-theme="light"] .nav-cats-dropdown .nav-cats-item { color: var(--fg-mute); }
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__cta,
[data-theme="light"] .nav-cats-dropdown .nav-cats-flyout__sub--more { color: var(--accent-text); }

/* ──── Dark theme override (cuando usuario togglea a dark) ──── */
[data-theme="dark"] .nav-cats-dropdown {
  background: var(--bg-deep);
  border-color: var(--line);
}
[data-theme="dark"] .nav-cats-flyout__banner-cta {
  background: rgba(0,0,0,0.85);
  color: var(--c-white);
}
[data-theme="dark"] .nav-cats-flyout__banner {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 35%, var(--bg-elevated)) 0%,
      color-mix(in srgb, var(--accent-text) 25%, var(--bg-elevated)) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   MEGA-PANEL DEPARTAMENTOS — eliminado. Panel removido del nav.
   ═══════════════════════════════════════════════════════════════ */