/**
 * Custom WC Categories Menu — estilos base del frontend.
 * Los valores se personalizan vía variables CSS (generadas desde los ajustes).
 * Las reglas se anclan a .em2a-wcm para vencer los estilos por defecto del tema.
 */

.em2a-wcm {
	/* Colores — categorías */
	--em2a-color-text: #7A7A7A;
	--em2a-color-text-hover: #000000;
	--em2a-color-bg-hover: #f0f0f0;
	--em2a-color-text-active: #000000;
	--em2a-color-bg-active: #f0f0f0;
	--em2a-color-count: #9aa0a6;
	--em2a-count-hover-color: #000000;
	--em2a-count-active-color: #000000;
	/* Colores — subcategorías */
	--em2a-child-color-text: #7A7A7A;
	--em2a-child-color-text-hover: #000000;
	--em2a-child-color-bg-hover: #f7f7f7;
	--em2a-child-color-text-active: #000000;
	--em2a-child-color-bg-active: #f0f0f0;
	--em2a-child-color-count: #9aa0a6;
	--em2a-child-count-hover-color: #000000;
	--em2a-child-count-active-color: #000000;
	/* Tipografía — categorías */
	--em2a-font-size: 14px;
	--em2a-font-weight: 600;
	--em2a-text-transform: none;
	--em2a-line-height: 1.5;
	/* Tipografía — subcategorías */
	--em2a-child-font-size: inherit;
	--em2a-child-font-weight: inherit;
	--em2a-child-text-transform: inherit;
	--em2a-child-line-height: inherit;
	/* Espaciado — categorías */
	--em2a-pad-v: 8px;
	--em2a-pad-h: 10px;
	--em2a-gap: 0px;
	--em2a-sub-indent: 16px;
	/* Espaciado — subcategorías */
	--em2a-child-pad-v: 8px;
	--em2a-child-pad-h: 10px;
	--em2a-child-gap: 0px;
	/* Bordes y forma */
	--em2a-color-border: #ececec;
	--em2a-border-w: 1px;
	--em2a-radius: 8px;
	--em2a-child-radius: 8px;
	/* Viñeta de subcategorías */
	--em2a-bullet-color: #cccccc;
	--em2a-bullet-size: 6px;
}

.em2a-wcm,
.em2a-wcm *,
.em2a-wcm *::before,
.em2a-wcm *::after {
	box-sizing: border-box;
}

.em2a-wcm .em2a-wcm-menu,
.em2a-wcm .em2a-wcm-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.em2a-wcm .em2a-wcm-item {
	margin: 0;
	padding: 0;
}

.em2a-wcm .em2a-wcm-item + .em2a-wcm-item {
	margin-top: var(--em2a-gap);
}

.em2a-wcm .em2a-wcm-row {
	display: flex;
	align-items: center;
}

.em2a-wcm .em2a-wcm-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: var(--em2a-pad-v) var(--em2a-pad-h);
	text-decoration: none;
	color: var(--em2a-color-text);
	font-size: var(--em2a-font-size);
	font-weight: var(--em2a-font-weight);
	line-height: var(--em2a-line-height);
	text-transform: var(--em2a-text-transform);
	border-radius: var(--em2a-radius);
	transition: background-color .18s ease, color .18s ease;
}

.em2a-wcm .em2a-wcm-label {
	flex: 1 1 auto;
	text-align: left;
}

/* --- Categorías (padres) --- */
.em2a-wcm .em2a-wcm-link:hover,
.em2a-wcm .em2a-wcm-link:focus {
	color: var(--em2a-color-text-hover);
	background-color: var(--em2a-color-bg-hover);
}

.em2a-wcm .em2a-wcm-item.is-current > .em2a-wcm-row .em2a-wcm-link {
	color: var(--em2a-color-text-active);
	background-color: var(--em2a-color-bg-active);
}

.em2a-wcm .em2a-wcm-count {
	font-size: .82em;
	font-weight: 400;
	color: var(--em2a-color-count);
}

.em2a-wcm .em2a-wcm-link:hover .em2a-wcm-count,
.em2a-wcm .em2a-wcm-link:focus .em2a-wcm-count {
	color: var(--em2a-count-hover-color);
}

.em2a-wcm .em2a-wcm-item.is-current > .em2a-wcm-row .em2a-wcm-link .em2a-wcm-count {
	color: var(--em2a-count-active-color);
}

/* Icono desplegable (dentro del nombre) */
.em2a-wcm .em2a-wcm-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .18s ease;
}

.em2a-wcm .em2a-wcm-toggle:hover {
	background-color: var(--em2a-color-bg-hover);
}

.em2a-wcm .em2a-wcm-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Submenú: fondo a todo el ancho (la sangría va en el texto del enlace) */
.em2a-wcm .em2a-wcm-menu .em2a-wcm-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: var(--em2a-border-w) solid var(--em2a-color-border);
	overflow: hidden;
	transition: max-height .3s ease, opacity .3s ease;
}

/* Sin animación */
.em2a-wcm .em2a-wcm-menu.em2a-wcm-anim-none .em2a-wcm-submenu {
	transition: none;
}

.em2a-wcm .em2a-wcm-menu .em2a-wcm-submenu[hidden] {
	display: none;
}

/* --- Subcategorías (hijas) --- */
.em2a-wcm .em2a-wcm-submenu .em2a-wcm-item + .em2a-wcm-item {
	margin-top: var(--em2a-child-gap);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-link {
	color: var(--em2a-child-color-text);
	font-size: var(--em2a-child-font-size);
	font-weight: var(--em2a-child-font-weight);
	line-height: var(--em2a-child-line-height);
	text-transform: var(--em2a-child-text-transform);
	padding: var(--em2a-child-pad-v) var(--em2a-child-pad-h);
	/* La sangría solo mueve el texto; el fondo queda a todo el ancho. */
	padding-left: calc(var(--em2a-child-pad-h) + var(--em2a-sub-indent));
	border-radius: var(--em2a-child-radius);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-link:hover,
.em2a-wcm .em2a-wcm-submenu .em2a-wcm-link:focus {
	color: var(--em2a-child-color-text-hover);
	background-color: var(--em2a-child-color-bg-hover);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-item.is-current > .em2a-wcm-row .em2a-wcm-link {
	color: var(--em2a-child-color-text-active);
	background-color: var(--em2a-child-color-bg-active);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-count {
	color: var(--em2a-child-color-count);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-link:hover .em2a-wcm-count,
.em2a-wcm .em2a-wcm-submenu .em2a-wcm-link:focus .em2a-wcm-count {
	color: var(--em2a-child-count-hover-color);
}

.em2a-wcm .em2a-wcm-submenu .em2a-wcm-item.is-current > .em2a-wcm-row .em2a-wcm-link .em2a-wcm-count {
	color: var(--em2a-child-count-active-color);
}

/* --- Viñeta de subcategorías --- */
.em2a-wcm .em2a-wcm-submenu .em2a-wcm-label::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

.em2a-wcm-bullet-dash .em2a-wcm-submenu .em2a-wcm-label::before {
	width: calc(var(--em2a-bullet-size) * 3);
	height: 2px;
	margin-right: 8px;
	background: var(--em2a-bullet-color);
}

.em2a-wcm-bullet-dot .em2a-wcm-submenu .em2a-wcm-label::before {
	width: var(--em2a-bullet-size);
	height: var(--em2a-bullet-size);
	margin-right: 8px;
	border-radius: 50%;
	background: var(--em2a-bullet-color);
}

.em2a-wcm-bullet-arrow .em2a-wcm-submenu .em2a-wcm-label::before {
	content: "›";
	margin-right: 6px;
	color: var(--em2a-bullet-color);
}

/* Icono */
.em2a-wcm .em2a-wcm-icon {
	display: block;
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.em2a-wcm .em2a-wcm-icontype-chevron .em2a-wcm-toggle[aria-expanded="true"] .em2a-wcm-icon,
.em2a-wcm .em2a-wcm-icontype-caret .em2a-wcm-toggle[aria-expanded="true"] .em2a-wcm-icon {
	transform: rotate(180deg);
}

.em2a-wcm .em2a-wcm-icontype-plus .em2a-wcm-toggle[aria-expanded="true"] .em2a-wcm-icon {
	transform: rotate(135deg);
}

.em2a-wcm a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}