/* ---------------------------------------------------------------------------
 * Widget [CSI] Categorías de producto (cascada)
 *
 * Los colores de texto usan solo los grises de la paleta del tema: en este
 * sitio --global-palette-highlight es casi blanco, así que el acento no es
 * confiable para texto y se usa únicamente como marcador decorativo.
 * Los !important neutralizan las reglas genéricas del tema sobre widgets
 * (subrayado de enlaces, márgenes de li).
 * ------------------------------------------------------------------------- */

.csi-cat-cascade {
	--csi-accent: var(--global-palette1, #2b6cb0);
	--csi-ink: var(--global-palette3, #2d3748);
	--csi-text: var(--global-palette5, #4a5568);
	--csi-muted: var(--global-gray-500, #a0aec0);
	--csi-line: var(--global-gray-400, #ebebeb);
	--csi-soft: var(--global-palette7, #f1f4f8);

	position: relative;
	font-size: 0.875em;
	line-height: 1.35;
}

/* --- Contenedor con scroll (modo "scroll") -------------------------------- */

.csi-cat-cascade[data-scroll='1'] {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--csi-line) transparent;
}

.csi-cat-cascade[data-scroll='1']::-webkit-scrollbar {
	width: 7px;
}

.csi-cat-cascade[data-scroll='1']::-webkit-scrollbar-track {
	background: transparent;
}

.csi-cat-cascade[data-scroll='1']::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 8px;
}

.csi-cat-cascade[data-scroll='1']:hover::-webkit-scrollbar-thumb {
	background: var(--csi-line);
}

/* --- Estructura de listas -------------------------------------------------- */

.widget-area .widget .csi-cat-cascade ul,
.widget .csi-cat-cascade ul,
.csi-cat-cascade ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Cascada: cada nivel hijo se indenta a la derecha con una línea guía. */
.widget-area .widget .csi-cat-cascade ul ul,
.widget .csi-cat-cascade ul ul,
.csi-cat-cascade ul ul {
	margin: 2px 0 4px 12px !important;
	padding: 0 0 0 10px !important;
	border-left: 1px solid var(--csi-line);
}

.widget-area .widget .csi-cat-cascade li,
.widget .csi-cat-cascade li,
.csi-cat-cascade li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* --- Enlaces ---------------------------------------------------------------- */

.widget-area .widget .csi-cat-cascade a,
.widget .csi-cat-cascade a,
.csi-cat-cascade a {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--csi-text) !important;
	font-weight: 400;
	text-decoration: none !important;
	transition:
		color 0.15s ease,
		background-color 0.15s ease;
}

.widget-area .widget .csi-cat-cascade a:hover,
.widget .csi-cat-cascade a:hover,
.csi-cat-cascade a:hover {
	color: var(--csi-ink) !important;
	background: var(--csi-soft);
}

/* Rama activa: los ancestros marcan el camino, la actual queda resaltada
 * con texto oscuro (legible siempre) y una barra de acento a la izquierda. */
.csi-cat-cascade li.current-cat-ancestor > a {
	color: var(--csi-ink) !important;
	font-weight: 500;
}

.widget-area .widget .csi-cat-cascade li.current-cat > a,
.widget .csi-cat-cascade li.current-cat > a,
.csi-cat-cascade li.current-cat > a {
	color: var(--csi-ink) !important;
	font-weight: 600;
	background: var(--csi-soft);
	box-shadow: inset 3px 0 0 0 var(--csi-accent);
}

/* --- Contador de productos -------------------------------------------------- */

.csi-cat-cascade__count {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--csi-muted);
	font-size: 0.73em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* --- Enlace de retorno (modo "branch") -------------------------------------- */

.widget-area .widget .csi-cat-cascade__back,
.widget .csi-cat-cascade__back,
.csi-cat-cascade__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	color: var(--csi-muted) !important;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
}

.widget-area .widget .csi-cat-cascade__back:hover,
.widget .csi-cat-cascade__back:hover,
.csi-cat-cascade__back:hover {
	color: var(--csi-ink) !important;
}