.oxea-category-menu {
	--oxea-menu-accent: #10851a;
	--oxea-menu-radius: 16px;
	/* Mismo verde que "Publicar Gratis" -- ese botón vive en `.ct-header-cta`
	 * (Header Builder de Blocksy), que redefine esta variable a mano en el
	 * Customizer; acá vivimos en `.ct-header-text` y heredamos el default del
	 * tema en vez de ese valor puntual, así que se fija explícito (confirmado
	 * en vivo con DevTools, 2026-09-08). El hover ya coincide sin tocar nada
	 * -- Blocksy nunca lo personalizó para "Publicar Gratis". */
	--theme-button-background-initial-color: #10851a;
	position: relative;
	display: inline-flex;
	align-items: center;

	/* Neutraliza el margin-block-end que WP le mete a todo hijo directo de
	 * .is-layout-flow/.is-layout-constrained (regla global de bloques, ver
	 * :is(.is-layout-flow,.is-layout-constrained)>*:where(...) en el CSS
	 * inline de global-styles) -- pasa acá porque el ítem "texto" del header
	 * de Blocksy envuelve el shortcode en un .entry-content.is-layout-flow.
	 * !important porque no controlamos el orden/capa de esa regla de WP
	 * (2026-08-05, reportado en vivo con DevTools).
	 */
	margin: 0 !important;
}

/* `.ct-button` (misma clase que usa el botón "Publicar Gratis" del header
 * de Blocksy) le da fondo, padding y tipografía -- el radio de Blocksy sale
 * más rectangular que "Publicar Gratis" (esa clase no vive en ningún repo
 * de Oxea, no hay de dónde copiarle el modificador exacto), así que acá se
 * fuerza el mismo criterio "píldora" que ya usa el resto del proyecto para
 * pills (ver `.oxea-card-featured-badge` en
 * product-card.css), además del gap para el ícono. Confirmado con captura
 * real, 2026-09-08. */
.oxea-category-menu__trigger.ct-button {
	gap: 8px;
	border-radius: 999px;
}

.oxea-category-menu__trigger-icon {
	display: inline-flex;
}

.oxea-category-menu__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(20, 22, 25, 0.45);
}

.oxea-category-menu.is-open .oxea-category-menu__backdrop {
	display: block;
}

.oxea-category-menu__panel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 100;
	gap: 12px;
	max-width: calc(100vw - 32px);
}

.oxea-category-menu.is-open .oxea-category-menu__panel {
	display: flex;
}

.oxea-category-menu__sidebar-wrap {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--oxea-menu-radius);
	box-shadow: 0 16px 40px rgba(20, 22, 25, 0.18);
	max-height: 70vh;
	overflow: hidden;
}

.oxea-category-menu__sidebar {
	list-style: none;
	margin: 0;
	padding: 10px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.oxea-category-menu__sidebar-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding: 14px 20px;
	border-top: 1px solid #edeef0;
	color: #52575c;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.oxea-category-menu__sidebar-footer:hover {
	color: var(--oxea-menu-accent);
}

.oxea-category-menu__sidebar-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 10px;
	color: #23262b;
	text-decoration: none;
	font-size: 14.5px;
}

.oxea-category-menu__sidebar-item.is-active,
.oxea-category-menu__sidebar-item:hover {
	background: rgba(16, 133, 26, 0.08);
	border-radius: 8px;
}

.oxea-category-menu__sidebar-item.is-active > a {
	color: var(--oxea-menu-accent);
	font-weight: 600;
}

.oxea-category-menu__chevron {
	flex-shrink: 0;
	color: #9aa0a6;
}

.oxea-category-menu__sidebar-item.is-active .oxea-category-menu__chevron {
	color: var(--oxea-menu-accent);
}

.oxea-category-menu__content-wrap {
	flex: 1;
	background: #fff;
	border-radius: var(--oxea-menu-radius);
	box-shadow: 0 16px 40px rgba(20, 22, 25, 0.18);
	min-width: 0;
	overflow: hidden;
}

.oxea-category-menu__content {
	max-height: 70vh;
	overflow-y: auto;
}

.oxea-category-menu__content::-webkit-scrollbar,
.oxea-category-menu__sidebar::-webkit-scrollbar {
	width: 8px;
}

.oxea-category-menu__content::-webkit-scrollbar-thumb,
.oxea-category-menu__sidebar::-webkit-scrollbar-thumb {
	background: #d7dade;
	border-radius: 8px;
}

.oxea-category-menu__columns {
	display: none;
	padding: 22px 28px 28px;
}

.oxea-category-menu__columns.is-active {
	display: block;
}

.oxea-category-menu__columns-header {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid #edeef0;
}

.oxea-category-menu__columns-header > span {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 20px;
	font-weight: 700;
	color: #16181b;
}

.oxea-category-menu__view-all {
	display: inline-flex;
	max-width: 50%;
	align-items: center;
	gap: 4px;
	font-size: 13.5px;
	color: var(--oxea-menu-accent);
	text-decoration: none;
	font-weight: 600;
}

.oxea-category-menu__view-all:hover {
	text-decoration: underline;
}

.oxea-category-menu__columns-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.oxea-category-menu__column-title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	height: 100%;
	padding: 8px 16px;
	border: 1px solid #cfe1ce;
	border: 1px solid color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 25%, #fff );
	border-radius: 40px;
	background: #eef5ed;
	background: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 9%, #fff );
	font-weight: 600;
	color: #3d4540;
	text-decoration: none;
	font-size: 12.5px;
	line-height: 1.25;
}

.oxea-category-menu__column-title > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-width: 0;
	overflow-wrap: anywhere;
}

.oxea-category-menu__icon {
	flex: 0 0 40.6px;
	width: 40.6px;
	height: 29.4px;
	object-fit: contain;
}

/* Mismo criterio de color que las cajas de subcategorías de la categoría
   (category-landing.css): normal = verde claro con ícono suave; hover y foco
   de teclado = verde más intenso en fondo, borde e ícono. Cada color lleva
   primero un valor sólido por si el navegador no soporta color-mix. */
.oxea-category-menu__column-title:hover,
.oxea-category-menu__column-title:focus-visible,
.oxea-category-menu__column-title:active {
	background: #d4e5d3;
	background: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 20%, #fff );
	border-color: var( --oxea-color-primary, #2e7d32 );
	color: #235e26;
	color: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 75%, #000 );
	text-decoration: none;
}

.oxea-category-menu__column-title:focus-visible {
	outline: 3px solid var( --oxea-color-primary, #2e7d32 );
	outline-offset: 2px;
}

/* Íconos predeterminados (monocromáticos): se recolorean con máscara. Un
   ícono propio del usuario sigue siendo un <img> y se ve como se cargó. */
.oxea-category-menu__icon--mask {
	display: block;
	background-color: #6aa56e;
	background-color: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 70%, #fff );
	-webkit-mask-image: var( --oxea-icon-url );
	mask-image: var( --oxea-icon-url );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.oxea-category-menu__column-title:hover .oxea-category-menu__icon--mask,
.oxea-category-menu__column-title:focus-visible .oxea-category-menu__icon--mask,
.oxea-category-menu__column-title:active .oxea-category-menu__icon--mask {
	background-color: var( --oxea-color-primary, #2e7d32 );
}

.oxea-category-menu__mobile-header {
	display: none;
}

@media (max-width: 991px) {
	.oxea-category-menu__panel {
		position: fixed;
		inset: 12px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		z-index: 100000;
		flex-direction: column;
		gap: 0;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 16px 40px rgba(20, 22, 25, 0.18);
	}

	.oxea-category-menu__mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		padding: 8px 12px;
		border-bottom: 1px solid #edeef0;
	}

	.oxea-category-menu__mobile-title {
		padding-left: 8px;
		font-weight: 600;
	}

	.oxea-category-menu__mobile-header button {
		min-height: 44px;
		min-width: 44px;
		padding: 8px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #23262b;
		font: inherit;
		cursor: pointer;
	}

	.oxea-category-menu__mobile-header .oxea-category-menu__close {
		font-size: 28px;
		line-height: 1;
	}

	.oxea-category-menu__back,
	.oxea-category-menu.is-subcategory .oxea-category-menu__mobile-title {
		display: none;
	}

	.oxea-category-menu.is-subcategory .oxea-category-menu__back {
		display: inline-flex;
	}

	.oxea-category-menu__sidebar-wrap,
	.oxea-category-menu__content-wrap {
		width: 100%;
		min-width: 0;
		box-shadow: none;
		max-height: none;
		min-height: 0;
		flex: 1;
		border-radius: 0;
	}

	.oxea-category-menu__content-wrap,
	.oxea-category-menu.is-subcategory .oxea-category-menu__sidebar-wrap {
		display: none;
	}

	.oxea-category-menu.is-subcategory .oxea-category-menu__content-wrap {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.oxea-category-menu__sidebar {
		overscroll-behavior: contain;
	}

	.oxea-category-menu__content {
		max-height: none;
		overflow: visible;
	}

	.oxea-category-menu__backdrop {
		z-index: 99999;
	}

	.oxea-category-menu__columns {
		padding: 16px;
	}

	.oxea-category-menu__columns-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 16px;
	}

	.oxea-category-menu__columns-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.oxea-category-menu__column-title {
		gap: 12px;
		padding: 8px 16px;
		font-size: 0.8125rem;
	}

	.oxea-category-menu__icon {
		flex-basis: 30.8px;
		width: 30.8px;
		height: 25.2px;
	}

	.oxea-category-menu__columns-header > span {
		flex: none;
		width: 100%;
	}

	.oxea-category-menu__view-all {
		max-width: 100%;
	}
}