/* ============================================================
   Mobile Category Nav — Frontend
   ============================================================ */

/* Variables — sobreescribibles desde el tema o CSS personalizado */
.mcn-nav {
	--mcn-bg:           #ffffff;
	--mcn-bg-header:    #f7f7f7;
	--mcn-text:         #1a1a1a;
	--mcn-text-muted:   #777777;
	--mcn-accent:       #e53935;      /* color de acento (flechas, ver-todos) */
	--mcn-border:       #ebebeb;
	--mcn-item-height:  50px;
	--mcn-font-size:    15px;
	--mcn-font-family:  inherit;
	--mcn-duration:     0.32s;
	--mcn-easing:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Contenedor ────────────────────────────────────────────── */
.mcn-nav {
	display: none;           /* visible solo vía media query inyectado por PHP */
	position: relative;
	overflow: hidden;
	background: var(--mcn-bg);
	transition: height var(--mcn-duration) var(--mcn-easing);
	font-family: var(--mcn-font-family);
	font-size: var(--mcn-font-size);
	-webkit-font-smoothing: antialiased;
}

/* ── Panels ────────────────────────────────────────────────── */
.mcn-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--mcn-bg);
	transform: translateX(100%);
	transition: transform var(--mcn-duration) var(--mcn-easing);
	will-change: transform;
}

/* Panel principal: visible desde el inicio (sin JS) */
.mcn-panel--main {
	transform: translateX(0);
	position: relative;  /* define la altura inicial del nav */
}

/* Panel activo (controlado por JS) */
.mcn-panel--active {
	transform: translateX(0) !important;
	z-index: 2;
}

/* Panel saliente: se mueve hacia la izquierda (efecto paralaje) */
.mcn-panel--exit {
	transform: translateX(-30%) !important;
	z-index: 1;
}

/* ── Lista ─────────────────────────────────────────────────── */
.mcn-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcn-item {
	border-bottom: 1px solid var(--mcn-border);
}

.mcn-item:last-child {
	border-bottom: none;
}

/* ── Links y botones ───────────────────────────────────────── */
.mcn-link,
button.mcn-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--mcn-item-height);
	padding: 12px 18px;
	color: var(--mcn-text);
	text-decoration: none;
	font-size: var(--mcn-font-size);
	font-family: var(--mcn-font-family);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
	line-height: 1.3;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcn-link:hover,
button.mcn-link:hover,
.mcn-link:focus-visible,
button.mcn-link:focus-visible {
	background: rgba(0, 0, 0, 0.04);
	color: var(--mcn-text);
	outline: none;
}

.mcn-link__label {
	flex: 1;
}

/* ── Flecha ────────────────────────────────────────────────── */
.mcn-arrow {
	color: var(--mcn-text-muted);
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.mcn-arrow--back {
	margin-left: 0;
	margin-right: 8px;
}

/* ── Item: botón "Volver" (encabezado del panel hijo) ──────── */
.mcn-item--back .mcn-link--back {
	background: var(--mcn-bg-header);
	font-weight: 600;
	justify-content: flex-start;
	border-bottom: 2px solid var(--mcn-border);
}

.mcn-item--back .mcn-link--back:hover {
	background: #efefef;
}

/* ── Item: Ver todos ───────────────────────────────────────── */
.mcn-item--view-all {
	border-bottom: 2px solid var(--mcn-border);
}

.mcn-link--view-all {
	color: var(--mcn-accent) !important;
	font-weight: 600;
}

.mcn-link--view-all .mcn-arrow {
	color: var(--mcn-accent);
}

/* ── Links estáticos: separador visual sutil ────────────────── */
.mcn-item--static {
	background: var(--mcn-bg);
}

/* ── Categoría hija ─────────────────────────────────────────── */
.mcn-item--child .mcn-link {
	padding-left: 24px;
}