/* Menú "Todas las categorías" — compartido por las DOS marcas.
 * Se arma solo desde las categorías de WooCommerce (ver includes/okdock-menu.php).
 * Los colores salen de variables para que cada marca ponga los suyos:
 *   --mcat-bg / --mcat-fg      panel de familias
 *   --mcat-hover               resaltado de la familia bajo el cursor
 *   --mcat-btn / --mcat-btn-bg botones de desplazamiento
 *   --mcat-accent              acento de los globos (Ver todo, hover de subcategorías)
 * Los valores por defecto son los de OK Dock (panel azul de marca). */
:root{
	--mcat-bg:var(--okd-blue,#066CFF);
	--mcat-fg:#fff;
	--mcat-hover:rgba(255,255,255,.16);
	--mcat-btn-bg:var(--okd-blue-dark,#0553cc);
	--mcat-btn-bg-hover:#0447a8;
	--mcat-btn:#fff;
	--mcat-accent:var(--okd-blue,#066CFF);
}

/* Compustar: mismo menú en rojo de marca. Va aquí y no como estilo en línea porque el
   Remove Unused CSS de WP Rocket borraba el inline del HTML cacheado (el panel salía sin
   fondo para el público). La clase la pone body_class en compu-brand.php. */
body.compu-marca-compustar{
	--mcat-bg:#CC0000;
	--mcat-fg:#fff;
	--mcat-hover:rgba(255,255,255,.18);
	--mcat-btn-bg:#a30000;
	--mcat-btn-bg-hover:#8a0000;
	--mcat-btn:#fff;
	--mcat-accent:#CC0000;
}

/* Menú "Todas las categorías" (se arma solo desde las categorías de WooCommerce).
   position:fixed a propósito: el <nav> tiene overflow-x:auto y recortaría un panel
   absolute; además fixed permite acotar la altura al viewport (el JS calcula
   top/left/max-height, así el panel NUNCA rebasa lo que el usuario alcanza a ver). */
.okd-nav__cats{position:relative;display:flex}
/* Panel de familias en azul de marca: se lee como una extensión del header. */
.okd-cats{position:fixed;z-index:9999;background:var(--mcat-bg);color:var(--mcat-fg);border-radius:14px;
	box-shadow:0 12px 44px rgba(10,26,55,.28);overflow:hidden;display:flex;flex-direction:column}
.okd-cats[hidden]{display:none}
.okd-cats__parents{margin:0;padding:6px;list-style:none;overflow-y:auto;min-height:0;
	flex:1 1 auto;width:100%;
	/* La barra nativa se sustituye por los botones de arriba y abajo (el scroll sigue vivo). */
	scrollbar-width:none;-ms-overflow-style:none}
.okd-cats__parents::-webkit-scrollbar{width:0;height:0}
.okd-cats__parent a{display:grid;grid-template-columns:18px 1fr 16px;align-items:center;gap:10px;
	padding:8px 10px;border-radius:8px;color:var(--mcat-fg);text-decoration:none;font-size:14px;line-height:1.3}
.okd-cats__parent a:hover,.okd-cats__parent.is-active>a{background:var(--mcat-hover);color:var(--mcat-fg)}
.okd-cats__ico{flex:none;opacity:.85}
.okd-cats__parent a:hover .okd-cats__ico,.okd-cats__parent.is-active>a .okd-cats__ico{opacity:1}
.okd-cats__parent a>svg:last-child{opacity:.6}

/* Botones de desplazamiento: mismo azul, flecha blanca. Solo aparecen si hay a dónde ir
   (el JS los muestra/oculta según la posición del scroll). */
.okd-cats__scroll{flex:none;display:flex;align-items:center;justify-content:center;
	width:100%;height:24px;border:0;cursor:pointer;padding:0;
	background:var(--mcat-btn-bg);color:var(--mcat-btn)}
.okd-cats__scroll[hidden]{display:none}
.okd-cats__scroll:hover{background:var(--mcat-btn-bg-hover)}
.okd-cats__scroll:focus-visible{outline:2px solid #fff;outline-offset:-3px}
/* Globo de subcategorías: flota junto a la categoría sobre la que está el mouse.
   Es hermano del panel (no hijo) para que no lo recorte, y el JS le da posición y alto. */
.okd-cats__pop{position:fixed;z-index:10000;background:#fff;color:#0E1726;border-radius:14px;
	box-shadow:0 12px 44px rgba(10,26,55,.20);padding:16px 18px;overflow-y:auto;
	display:flex;flex-direction:column}
.okd-cats__pop[hidden]{display:none}
.okd-cats__all{display:inline-block;font-weight:600;color:var(--mcat-accent);font-size:13px;
	margin-bottom:12px;text-decoration:none;flex:none}
.okd-cats__all:hover{text-decoration:underline}
.okd-cats__pop ul{margin:0;padding:0;list-style:none;columns:2;column-gap:28px}
.okd-cats__pop li{break-inside:avoid;margin-bottom:7px}
.okd-cats__pop li a{display:flex;align-items:center;gap:8px;color:#2b3648;text-decoration:none;
	font-size:13.5px;line-height:1.35}
.okd-cats__pop li a .okd-cats__ico{width:16px;height:16px;opacity:.5}
.okd-cats__pop li a:hover{color:var(--mcat-accent)}
.okd-cats__pop li a:hover span{text-decoration:underline}
.okd-cats__pop li a:hover .okd-cats__ico{opacity:1}
/* Pocas hijas: una sola columna se lee mejor que dos muy cortas. */
.okd-cats__pop--slim ul{columns:1}
/* En móvil el nav es una tira con scroll horizontal: el disparador se queda como liga
   directa a la tienda (las categorías se navegan desde el sidebar de filtros). */
@media (max-width:900px){ .okd-cats,.okd-cats__pop{display:none !important} }