/*
 * Menú de categorías. Colores: variables globales de GeneratePress
 * (Personalizar → Colores → Colores globales). Tipografía: la del tema.
 *   --accent      enlace al pasar el ratón y categoría actual
 *   --contrast    texto
 *   --base-3      fondo de los desplegables
 *   --base-2      fondo al pasar el ratón
 *   --base        bordes
 * Los valores después de la coma son los colores por defecto de GeneratePress (si no hay tema).
 */
.mcat {
	--mcat-barra: #0000FF;      /* color de la barra (cámbialo aquí) */
	--mcat-barra-texto: #ffffff;
	position: relative;
}
/* Primer nivel: mayúsculas, negrita y 2 pt más pequeño */
.mcat__nivel-1 > .mcat__item > a { text-transform: uppercase; font-weight: 700; font-size: calc(1em - 2pt); }
/* Mientras se cargan los productos sin recargar */
.mcat-cargando { opacity: .45; pointer-events: none; transition: opacity .15s; }
.mcat ul { list-style: none; margin: 0; padding: 0; }
.mcat a {
	display: block;
	padding: 10px 14px;
	color: var(--contrast, #222222);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, background-color .15s;
}
.mcat a:hover, .mcat a:focus-visible { color: var(--accent, #1e73be); background: var(--base-2, #f7f8f9); }
.mcat a[aria-current="page"] { color: var(--accent, #1e73be); font-weight: 600; }
.mcat__n { color: var(--contrast-3, #b2b2be); font-size: .85em; }
.mcat__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.mcat__item > a { flex: 1; }
.mcat__abrir {
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0;
	background: transparent; color: var(--contrast, #222222); cursor: pointer;
}
.mcat__abrir:hover, .mcat__abrir:focus { background: transparent; color: var(--accent, #1e73be); }
.mcat__abrir::before {
	content: ""; display: block; width: 7px; height: 7px; margin: auto;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .15s;
}
.mcat__abrir[aria-expanded="true"]::before { transform: rotate(-135deg); }
.mcat__movil { display: none; }

/* Escritorio: barra horizontal con desplegables (769px = punto de corte de GeneratePress) */
@media (min-width: 769px) {
	.mcat__nivel-1 { display: flex; flex-wrap: wrap; background: var(--mcat-barra); }
	.mcat__nivel-1 > .mcat__item > .mcat__abrir { width: 24px; margin-left: -10px; }
	/* Barra azul: textos del primer nivel en blanco */
	.mcat__nivel-1 > .mcat__item > a,
	.mcat__nivel-1 > .mcat__item > .mcat__abrir,
	.mcat__nivel-1 > .mcat__item > .mcat__abrir:hover,
	.mcat__nivel-1 > .mcat__item > .mcat__abrir:focus { color: var(--mcat-barra-texto); }
	.mcat__nivel-1 > .mcat__item > a .mcat__n { color: var(--mcat-barra-texto); opacity: .75; }
	.mcat__nivel-1 > .mcat__item:hover > a,
	.mcat__nivel-1 > .mcat__item > a:hover,
	.mcat__nivel-1 > .mcat__item > a:focus-visible { color: var(--mcat-barra-texto); background: rgba(255, 255, 255, .15); }
	.mcat__nivel-1 > .mcat__item > a[aria-current="page"] { color: var(--mcat-barra-texto); box-shadow: inset 0 -3px 0 var(--mcat-barra-texto); }
	/* Recién elegida una categoría: los desplegables se cierran hasta que el ratón sale del menú */
	.mcat--elegido .mcat__nivel-2, .mcat--elegido .mcat__nivel-3 { visibility: hidden !important; opacity: 0 !important; }
	.mcat__nivel-2, .mcat__nivel-3 {
		position: absolute; z-index: 1000; min-width: 220px; padding: 6px 0;
		background: var(--base-3, #ffffff);
		border: 1px solid var(--base, #f0f0f0);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
		visibility: hidden; opacity: 0; transition: opacity .12s, visibility .12s;
	}
	.mcat__nivel-2 { top: 100%; left: 0; border-top: 2px solid var(--accent, #1e73be); }
	.mcat__nivel-3 { top: -7px; left: 100%; }
	.mcat__nivel-2 .mcat__abrir::before { transform: rotate(-45deg); }
	.mcat__item:hover > ul,
	.mcat__item:focus-within > ul,
	.mcat__abrir[aria-expanded="true"] + ul { visibility: visible; opacity: 1; }
	.mcat__nivel-2 .mcat__item, .mcat__nivel-3 .mcat__item { flex-wrap: nowrap; }
}

/* Móvil: botón "Categorías" y acordeón */
@media (max-width: 768px) {
	.mcat__movil {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		padding: 12px 14px; border: 0; border-radius: 0;
		background: var(--mcat-barra); color: var(--mcat-barra-texto);
		font: inherit; font-weight: 600; cursor: pointer;
	}
	.mcat__movil::after { content: "☰"; }
	.mcat__movil[aria-expanded="true"]::after { content: "✕"; }
	.mcat__nivel-1 { display: none; background: var(--base-3, #ffffff); border: 1px solid var(--base, #f0f0f0); border-top: 0; }
	.mcat__movil[aria-expanded="true"] + .mcat__nivel-1 { display: block; }
	.mcat__item { border-top: 1px solid var(--base, #f0f0f0); }
	.mcat__nivel-1 > .mcat__item:first-child { border-top: 0; }
	.mcat__item > ul { display: none; width: 100%; background: var(--base-2, #f7f8f9); }
	.mcat__abrir { width: 44px; height: 44px; }
	.mcat__abrir[aria-expanded="true"] + ul { display: block; }
	.mcat__nivel-2 a { padding-left: 28px; }
	.mcat__nivel-3 a { padding-left: 42px; }
	.mcat a { white-space: normal; }
}