/**
 * El menú, vestido con MDB.
 *
 * Se viste el bloque de navegación de WordPress; no se sustituye. `core/navigation`
 * usa la Interactivity API y ya resuelve abrir y cerrar, el teclado, la trampa de
 * foco y el panel de móvil. Montar una barra de MDB a mano sería tirar todo eso.
 *
 * Todas las reglas cuelgan de `.owari-cabecera`, que es la parte de plantilla del
 * encabezado. Así el estilo llega al menú de arriba y no al del pie, que casi
 * nunca quiere el mismo aspecto.
 *
 * 1 · Base y comportamiento (fijo, sombra, colores)
 * 2 · Los seis estilos
 * 3 · Submenús, incluidos los de tercer nivel
 * 4 · El panel lateral
 */

/* ──────────────────── 1 · Base y comportamiento ── */

.owari-cabecera {
	/* Sin color propio: el menú sigue a la página, clara u oscura, salvo que el
	   Personalizador diga otra cosa escribiendo estos tokens. */
	/* El fondo por defecto vive aqui, no en el grupo de la plantilla: alli lo
	   pintaba `.has-fondo-background-color`, que WordPress emite con !important
	   y tapaba el ajuste del Personalizador con el menu entero. */
	background-color: var(--owari-menu-fondo, var(--wp--preset--color--fondo));
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/*
 * El color de los enlaces se pone en el CONTENEDOR, no en el enlace.
 *
 * El nucleo fuerza el color de cada enlace con la clase repetida
 * —`.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content`,
 * que es (0,3,0)— para que hereden del bloque. Pintar el enlace desde fuera
 * obliga a superar ese peldano en cada regla; pintar el contenedor deja que ese
 * `inherit` haga el trabajo, que es justo para lo que esta.
 */
.owari-cabecera .wp-block-navigation {
	color: var(--owari-menu-texto, var(--mdb-body-color));
}

.owari-cabecera .wp-block-navigation-item__content {
	transition: color 0.2s ease, background-color 0.2s ease;
}

/*
 * El titulo del sitio sobre el fondo del menu.
 *
 * No sigue al color de los enlaces —no es uno—, pero si alguien elige un fondo
 * oscuro y el titulo se queda en el gris de la pagina, deja de leerse. PHP
 * calcula el token con el mismo motor de contraste de los botones, y solo lo
 * escribe si hay fondo propio: sin el, esto no cambia nada.
 */
.owari-cabecera .wp-block-site-title,
.owari-cabecera .wp-block-site-title a,
.owari-cabecera .wp-block-site-tagline {
	color: var(--owari-menu-sobre-fondo, inherit);
}

/*
 * Los bloques de WooCommerce que viven en la cabecera.
 *
 * WooCommerce cuelga la cuenta y el carrito DETRAS del bloque de navegacion,
 * no dentro, asi que no les llega el color que el menu reparte por herencia. Y
 * sus iconos son SVG sin `fill`, que en SVG no significa «el color del texto»
 * sino negro. Son dos cosas distintas y hacen falta las dos: dar color al
 * enlace, y decirle al icono que siga a ese color.
 */
.owari-cabecera .wc-block-customer-account__link,
.owari-cabecera .wc-block-mini-cart__button {
	color: var(--owari-menu-texto, var(--mdb-body-color));
	transition: color 0.2s ease;
}

.owari-cabecera .wc-block-customer-account__link:hover,
.owari-cabecera .wc-block-customer-account__link:focus-visible,
.owari-cabecera .wc-block-mini-cart__button:hover,
.owari-cabecera .wc-block-mini-cart__button:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
}

/*
 * Fuera el SVG de WooCommerce, dentro el icono de MDB.
 *
 * Se hace desde CSS y no reemplazando el marcado porque el minicarrito lo
 * repinta el cliente: si le cambiaramos el HTML, lo repondria en cuanto
 * cambiase el carrito. Es la misma regla que con el pago de React: donde pinta
 * el cliente, se pinta encima, no se pisa.
 *
 * Al ser un glifo y no un dibujo, hereda `color` como cualquier texto, asi que
 * sigue al menu y a su hover sin una sola regla mas.
 */
.owari-cabecera .wc-block-customer-account__link svg,
.owari-cabecera .wc-block-mini-cart__button svg {
	display: none;
}

.owari-cabecera .wc-block-customer-account__link::before,
.owari-cabecera .wc-block-mini-cart__quantity-badge::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 1.15rem;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* fa-user */
.owari-cabecera .wc-block-customer-account__link::before {
	content: "\f007";
}

/*
 * fa-cart-shopping. El glifo va en el contador y no en el boton porque el
 * numerito se coloca respecto a ese contenedor: si el icono saliera de el, se
 * quedaria flotando.
 */
.owari-cabecera .wc-block-mini-cart__quantity-badge::before {
	content: "\f07a";
}

/* El importe que el carrito muestra junto al icono. */
.owari-cabecera .wc-block-mini-cart__amount {
	color: inherit;
}

/* Con la clase repetida, (0,4,0): el `inherit` del nucleo es (0,3,0). */
.owari-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.owari-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
}

/*
 * Fijo arriba. `sticky` y no `fixed` a propósito: `fixed` saca la cabecera del
 * flujo y el contenido se le mete debajo, y habría que compensarlo con un
 * relleno que hay que mantener a mano cada vez que cambie la altura del menú.
 */
.owari-menu-pos--fijo {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Con la barra de administración puesta, «arriba» no es 0. */
.admin-bar .owari-menu-pos--fijo {
	top: var(--owari-desplazamiento, 0px);
}

/* La sombra, siempre o solo al bajar. La clase `--desplazada` la pone
   owari-menu.js al pasar el umbral. */
.owari-menu-sombra--siempre,
.owari-menu-sombra--scroll.owari-cabecera--desplazada {
	box-shadow: var(--owari-menu-sombra-hecha, var(--wp--preset--shadow--nivel-1));
}

/* ────────────────────────── 2 · Los seis estilos ── */

/*
 * 2.1 · Barra clásica. El punto de partida: sin relieve y sin fondo propio.
 * No necesita nada porque es lo que ya hace el tema; queda declarada para que
 * exista la clase y para poder anular lo que herede de otro estilo.
 */
.owari-menu--clasica .wp-block-navigation-item__content,
.is-style-clasica .wp-block-navigation-item__content {
	padding-block: 0.4rem;
}

/*
 * 2.2 · Elevada. Fondo de superficie y la sombra de MDB, para separar la
 * cabecera del contenido sin tener que dibujar una línea.
 */
.owari-menu--elevada,
.is-style-elevada {
	background-color: var(--owari-menu-fondo, var(--mdb-tertiary-bg));
	box-shadow: var(--owari-menu-sombra-hecha, var(--wp--preset--shadow--nivel-1));
}

/*
 * 2.3 · Píldoras. Cada enlace en una cápsula; la página actual va rellena con el
 * primario y su texto calculado, que es lo que evita que se pierda con un color
 * claro.
 */
.owari-menu--pildoras .wp-block-navigation-item__content,
.is-style-pildoras .wp-block-navigation-item__content {
	padding: 0.4rem 0.9rem;
	border-radius: var(--mdb-border-radius-pill);
}

.owari-menu--pildoras .wp-block-navigation-item__content:hover,
.is-style-pildoras .wp-block-navigation-item__content:hover,
.owari-menu--pildoras .wp-block-navigation-item__content:focus-visible,
.is-style-pildoras .wp-block-navigation-item__content:focus-visible {
	/* La pildora sigue al color de hover elegido. `color-mix` y no `rgba()`
	   porque el ajuste llega como hexadecimal y rgba() necesita los canales
	   sueltos; asi el mismo token sirve para el texto y para el fondo. */
	background-color: color-mix(in srgb, var(--owari-menu-hover, var(--mdb-primary)) 12%, transparent);
}

.owari-menu--pildoras .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.is-style-pildoras .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.owari-menu--pildoras .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.is-style-pildoras .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background-color: var(--mdb-primary);
	color: var(--owari-sobre-primary, #fff);
}

/*
 * 2.4 · Subrayado que crece. El gesto de Material: una línea que se despliega
 * desde el centro. Se hace con un pseudoelemento y `transform`, no animando el
 * ancho: el navegador puede componer una transformación sin volver a calcular
 * el diseño de la página en cada fotograma.
 */
.owari-menu--subrayado .wp-block-navigation-item__content,
.is-style-subrayado .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.45rem;
}

.owari-menu--subrayado .wp-block-navigation-item__content::after,
.is-style-subrayado .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--owari-menu-hover, var(--mdb-primary));
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.owari-menu--subrayado .wp-block-navigation-item__content:hover::after,
.is-style-subrayado .wp-block-navigation-item__content:hover::after,
.owari-menu--subrayado .wp-block-navigation-item__content:focus-visible::after,
.is-style-subrayado .wp-block-navigation-item__content:focus-visible::after,
.owari-menu--subrayado .current-menu-item > .wp-block-navigation-item__content::after,
.is-style-subrayado .current-menu-item > .wp-block-navigation-item__content::after,
.owari-menu--subrayado .current_page_item > .wp-block-navigation-item__content::after,
.is-style-subrayado .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/*
 * Píldoras y subrayado, en REPOSO.
 *
 * Los dos tenían su seña solo al pasar el cursor, así que quietos eran idénticos
 * a la barra clásica: en el selector de diseños del editor salían tres
 * miniaturas iguales, y elegir entre ellas era adivinar.
 *
 * No es solo cosa del editor. En una barra de verdad, un menú de píldoras que no
 * enseña ninguna hasta que pasas por encima no se lee como un menú de píldoras;
 * y un subrayado que crece necesita algo que crecer.
 */
.owari-menu--pildoras .wp-block-navigation-item__content,
.is-style-pildoras .wp-block-navigation-item__content {
	background-color: color-mix(in srgb, currentColor 7%, transparent);
}

/*
 * La línea en reposo es un BORDE del enlace, no el pseudoelemento.
 *
 * Poner el pseudoelemento a `scaleX(1)` en reposo lo dejaba visible, sí, pero se
 * llevaba por delante el gesto: si ya está entero, no le queda nada que crecer.
 * Con un borde tenue debajo hay algo sobre lo que crecer, y la línea de color
 * sigue desplegándose encima desde el centro.
 */
.owari-menu--subrayado .wp-block-navigation-item__content,
.is-style-subrayado .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 20%, transparent);
}

/*
 * 2.5 · Centrado partido. El logotipo en medio y los enlaces repartidos.
 *
 * La cabecera ya es una fila flex con dos grupos —marca y navegación—. Aquí se
 * reordenan: la navegación se estira y el título se coloca en el centro con
 * `order`, sin tocar el marcado de la plantilla.
 */
.owari-menu--centrado .wp-block-group.is-layout-flex,
.is-style-centrado .wp-block-group.is-layout-flex {
	justify-content: center;
}

.owari-menu--centrado .wp-block-navigation__container,
.is-style-centrado .wp-block-navigation__container {
	justify-content: center;
	flex: 1;
}

@media (min-width: 782px) {
	.owari-menu--centrado .wp-block-site-title,
	.owari-menu--centrado .wp-block-site-logo {
		order: 2;
		margin-inline: 1.5rem;
	}

	.owari-menu--centrado .wp-block-navigation__container > :nth-child(-n + 2) {
		order: 1;
	}

	.owari-menu--centrado .wp-block-navigation__container > :nth-child(n + 3) {
		order: 3;
	}
}

/*
 * 2.7 · Logotipo a la izquierda y el resto a la derecha. El reparto de toda la
 * vida, y el compañero de 2.5: los dos ordenan la fila en vez de vestirla.
 *
 * Hace falta como estilo porque la cabecera reparte con `space-between`, que
 * con DOS hijos hace justo esto —marca a un lado, menú al otro—. Pero
 * WooCommerce cuelga la cuenta y el carrito detrás del <nav>, y entonces son
 * tres o cuatro: `space-between` los separa por igual y el menú se queda
 * flotando en mitad de la barra, con 262 px de hueco a cada lado.
 *
 * Se arregla con un margen automático en el primer hijo y no cambiando el
 * `justify-content`: así la marca se queda con todo el hueco sobrante y lo que
 * venga detrás se agrupa a la derecha, sean dos elementos o cinco. No hay que
 * saber cuántos hay, que es precisamente lo que aquí no se puede saber: los
 * pone un plugin.
 *
 * La fila se localiza por lo que contiene —`:has(> .wp-block-navigation)`— y no
 * por su clase de justificación ni por su profundidad: si alguien edita la
 * cabecera en el editor del sitio, esas dos cambian y el menú no.
 */
.owari-menu--derecha .wp-block-group.is-layout-flex:has(> .wp-block-navigation) > :first-child:not(.wp-block-navigation),
.is-style-derecha .wp-block-group.is-layout-flex:has(> .wp-block-navigation) > :first-child:not(.wp-block-navigation) {
	margin-inline-end: auto;
}

/*
 * 2.6 · Transparente en la portada. La barra va sobre lo que haya detrás y se
 * vuelve sólida al bajar.
 *
 * Solo en la portada: en el resto de páginas no hay nada debajo y la barra se
 * quedaría flotando sobre el vacío. Esa condición la pone PHP con la clase
 * `owari-es-portada`, porque el CSS no sabe en qué página está.
 */
.owari-menu--transparente.owari-es-portada,
.is-style-transparente.owari-es-portada {
	position: absolute;
	inset-inline: 0;
	z-index: 100;
	background-color: transparent;
	box-shadow: none;
	border-bottom-color: transparent;
}

.owari-menu--transparente.owari-es-portada.owari-cabecera--desplazada,
.is-style-transparente.owari-es-portada.owari-cabecera--desplazada {
	position: fixed;
	background-color: var(--owari-menu-fondo, var(--mdb-body-bg));
	box-shadow: var(--owari-menu-sombra-hecha, var(--wp--preset--shadow--nivel-1));
}

/*
 * La franja de arriba de `cabecera-barra`.
 *
 * Va en superficie y no en el color de acento —al revés que la del pie— porque
 * aquí es lo PRIMERO que se ve de la página: una banda de color saturada sobre
 * el menú compite con él y con la portada. Lo que suele ir aquí es un horario o
 * un aviso de envío, y eso se lee mejor en voz baja.
 *
 * Quien la quiera con color la cambia en el editor del sitio, que para eso es
 * una composición y no una regla fija.
 */
.owari-cabecera-franja {
	background-color: var(--mdb-tertiary-bg);
	color: var(--mdb-secondary-color);
	border-bottom: 1px solid var(--mdb-border-color);
}

.owari-cabecera-franja p {
	margin: 0;
}

/*
 * La cabecera centrada, con WooCommerce activo.
 *
 * WooCommerce cuelga la cuenta y el carrito DETRÁS del <nav>, fuera de él. En
 * las cabeceras de una sola fila eso pasa desapercibido; aquí los hijos van
 * apilados, así que los iconos caían solos y pegados al margen izquierdo, que
 * es lo único que no encaja en una cabecera centrada.
 *
 * `width: fit-content` hace falta además del margen: son <div> de bloque y
 * ocupan todo el ancho, así que el margen automático no tendría sobrante que
 * repartir.
 */
/*
 * Los iconos van EN LÍNEA, no en bloque.
 *
 * Centrarlos con margen automático los dejaba centrados, sí, pero cada uno en su
 * renglón: en bloque ocupan el ancho entero aunque midan 32 px. Puestos en línea
 * comparten renglón, y quien los centra es el `text-align` del contenedor.
 *
 * El `text-align` no descoloca nada más: el título y el menú son contenedores
 * flex con su propia justificación y no lo miran.
 */
.owari-cabecera-centrada {
	text-align: center;
}

.owari-cabecera-centrada > .wp-block-woocommerce-customer-account,
.owari-cabecera-centrada > .wp-block-woocommerce-mini-cart,
.owari-cabecera-centrada > .wc-block-mini-cart {
	display: inline-block;
	vertical-align: middle;
	width: auto;

	/* Relleno y no margen: la disposición «constrained» de WordPress pone
	   `margin-left/right: auto` sobre sus hijos CON !important, así que un margen
	   propio aquí no llega a aplicarse. Medido: quedaban los 4 px del espacio en
	   blanco del HTML y nada más. El relleno no se lo disputa nadie. */
	padding-inline: 0.5rem;
}

/* ─────────── 3 · Submenús, hasta donde llegue el menú ── */

/*
 * WordPress ya abre y cierra el submenú, y lo hace con teclado además de con el
 * ratón. Aquí solo se le da el aspecto de tarjeta de MDB.
 */
/*
 * (0,4,0) a proposito: el nucleo pinta esta tarjeta con
 * `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`,
 * y `:not()` cuenta lo que lleva dentro, asi que son (0,3,0). Con menos, el
 * submenu sale blanco con borde gris y en modo oscuro canta.
 */
.owari-cabecera .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	min-width: 12rem;
	color: var(--owari-menu-texto, var(--mdb-body-color));
	padding-block: 0.4rem;
	border: 1px solid var(--mdb-border-color);
	border-radius: var(--mdb-border-radius);
	box-shadow: var(--wp--preset--shadow--nivel-2);
	background-color: var(--mdb-body-bg);
}

.owari-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	width: 100%;
	border-radius: 0;
}

.owari-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.owari-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: rgba(var(--mdb-primary-rgb), 0.08);
}

/* En el submenú, píldoras y subrayado sobran: son gestos de una barra
   horizontal y dentro de una tarjeta solo estorban. */
.owari-menu--subrayado .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
.is-style-subrayado .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Tarjeta oscura. Los tokens son los de MDB para su `.dropdown-menu-dark`, así
   que en modo oscuro no hace falta nada más. */
.owari-submenu--oscuro .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: #292929;
	border-color: rgba(255, 255, 255, 0.12);
}

.owari-submenu--oscuro .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.87);
}

.owari-submenu--oscuro .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

/*
 * Tercer nivel y más: `ul li ul li`. MDB no trae multinivel —no tiene
 * `.dropdown-submenu` ni megamenú—, así que esto es del tema.
 *
 * A partir del segundo submenú la tarjeta sale al COSTADO en vez de hacia
 * abajo, que es lo único que cabe cuando ya estás dentro de una tarjeta.
 *
 * Hacia QUÉ lado no se decide aquí: lo decide WordPress, que ya mira si el menú
 * está alineado a la derecha y en ese caso abre hacia la izquierda para no
 * salirse de la pantalla. Forzarlo a la derecha —que fue el primer intento—
 * dejaba la tarjeta fuera del viewport en un menú alineado a la derecha, que es
 * justo el caso de la cabecera de este tema.
 *
 * Aquí solo se sube un poco para que el borde de arriba case con el del padre.
 */
.owari-cabecera .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	inset-block-start: -0.4rem;
}

/* La flecha del padre apunta al lado, no hacia abajo, cuando el submenú se abre
   en horizontal. */
.owari-cabecera .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	transform: rotate(-90deg);
	margin-inline-start: auto;
}

/* ───────────────────────── 4 · El panel lateral ── */

/*
 * El panel que WordPress ya abre en móvil, con el aspecto del Sidenav de MDB:
 * entra deslizándose por un lado en vez de aparecer a pantalla completa.
 *
 * No se toca su JavaScript. WordPress sigue mandando cuándo se abre, dónde va el
 * foco y qué lee un lector de pantalla; lo de aquí es solo la piel.
 */
.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open {
	width: min(20rem, 85vw);
	inset-inline-end: auto;
	padding: 1.5rem 1rem;
	background-color: var(--mdb-body-bg);
	box-shadow: var(--wp--preset--shadow--nivel-3);
	animation: owari-lateral-entra 0.25s ease-out;
}

.owari-lateral--derecha .wp-block-navigation__responsive-container.is-menu-open {
	inset-inline-start: auto;
	inset-inline-end: 0;
	animation-name: owari-lateral-entra-derecha;
}

@keyframes owari-lateral-entra {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

@keyframes owari-lateral-entra-derecha {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

/* Panel oscuro. */
.owari-lateral-tema--oscuro .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #262626;
}

.owari-lateral-tema--oscuro .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.87);
}

/* Dentro del panel los enlaces van en columna y ocupan todo el ancho: es una
   lista vertical, no una barra. */
/*
 * Ojo al marcado: entre el contenedor y los <li> hay OTRO <ul>, el del bloque
 * `page-list`. Si la columna solo se le pide al de fuera, el de dentro sigue
 * siendo una fila y los enlaces salen apilados de dos en dos. Hay que decírselo
 * a los dos.
 *
 * Y `justify-content` vuelve al principio: la cabecera trae
 * `items-justified-right`, que en una columna empuja los enlaces hacia abajo.
 */
.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.15rem;
	width: 100%;
}

.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.6rem 0.9rem;
	border-radius: var(--mdb-border-radius);
}

/* Dentro del panel un submenú no puede flotar: no hay sitio a los lados. Se
   queda en el flujo, indentado, como el Sidenav colapsable de MDB. */
.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	border: 0;
	box-shadow: none;
	background: none;
	padding-inline-start: 0.9rem;
	min-width: 0;
}

.owari-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-inline-start: 0;
}

/*
 * Lateral también en escritorio: el menú deja de ser una barra y pasa a ser una
 * columna pegada al lado, con el contenido corrido para dejarle sitio.
 */
@media (min-width: 992px) {
	.owari-lateral-siempre {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		width: var(--owari-lateral-ancho, 15rem);
		z-index: 100;
		overflow-y: auto;
		padding: 1.5rem 1rem;
		background-color: var(--owari-menu-fondo, var(--mdb-tertiary-bg));
		box-shadow: var(--wp--preset--shadow--nivel-1);
	}

	.owari-lateral-siempre.owari-lateral--derecha {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	/* El contenido se aparta lo que ocupa el panel. Va en el <body> y no en el
	   contenedor del tema porque un tema de bloques no garantiza que exista un
	   envoltorio único donde apoyarse. */
	body:has(.owari-lateral-siempre:not(.owari-lateral--derecha)) {
		padding-inline-start: var(--owari-lateral-ancho, 15rem);
	}

	body:has(.owari-lateral-siempre.owari-lateral--derecha) {
		padding-inline-end: var(--owari-lateral-ancho, 15rem);
	}

	/* En columna, la cabecera se apila: marca arriba y enlaces debajo. */
	.owari-lateral-siempre .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
	}

	/* Los dos <ul>, por lo mismo que en el panel de móvil. */
	.owari-lateral-siempre .wp-block-navigation__container,
	.owari-lateral-siempre .wp-block-page-list,
	.owari-lateral-siempre .wp-block-navigation__submenu-container {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.15rem;
		width: 100%;
	}

	.owari-lateral-siempre .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.6rem 0.9rem;
		border-radius: var(--mdb-border-radius);
	}

	/*
	 * Los submenús, siempre desplegados y con sangría.
	 *
	 * Es lo mismo que hace WordPress en su panel de móvil, copiado a propósito:
	 * pone `position: static; visibility: visible` y los deja abiertos. Y aquí
	 * hace más falta todavía, porque el panel lleva `overflow-y: auto` y eso
	 * también recorta a lo ancho: una tarjeta flotante saldría cortada.
	 *
	 * Hay que reponer visibilidad y medidas, no solo la posición: WordPress los
	 * esconde con `visibility`, `opacity` y una altura de cero, así que con
	 * cambiar `position` se quedarían ocupando sitio sin verse.
	 */
	body .owari-lateral-siempre .has-child .wp-block-navigation__submenu-container {
		position: static;
		visibility: visible;
		opacity: 1;
		height: auto;
		width: auto;
		min-width: 0;
		overflow: initial;
		border: 0;
		box-shadow: none;
		background: none;
		padding: 0 0 0 0.9rem;
	}

	/*
	 * Y el <li> que tiene hijos, en columna.
	 *
	 * Es una fila flex, así que en cuanto el submenú deja de flotar se coloca AL
	 * LADO del enlace en vez de debajo, y el elemento crece a lo ancho hasta
	 * salirse del panel: 351 px medidos dentro de uno de 240.
	 */
	body .owari-lateral-siempre .wp-block-navigation-item.has-child {
		flex-direction: column;
		align-items: stretch;
	}

	/* La flecha vuelve a apuntar hacia abajo: al lado solo tiene sentido cuando
	   el submenú sale flotando, y aquí no sale. */
	body .owari-lateral-siempre .wp-block-navigation__submenu-icon {
		transform: none;
	}

	.owari-lateral-siempre .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		margin-inline-start: 0;
	}

	/* Estrecho: solo caben los iconos, y el texto se lee al pasar por encima.
	   Sin iconos en el menú no tiene sentido, así que se avisa en el control. */
	.owari-lateral-siempre.owari-lateral-tema--slim {
		--owari-lateral-ancho: 4.5rem;
		text-align: center;
	}

	.owari-lateral-siempre.owari-lateral-tema--slim .wp-block-navigation-item__content {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.75rem;
		padding-inline: 0.35rem;
	}

	.owari-lateral-siempre.owari-lateral-tema--oscuro {
		background-color: #262626;
	}

	.owari-lateral-siempre.owari-lateral-tema--oscuro .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: rgba(255, 255, 255, 0.87);
	}
}

/*
 * Sobre la portada, el menú va en claro.
 *
 * Transparente significa que detrás hay una foto, y una foto no es un fondo
 * conocido: el gris de los enlaces —pensado para leerse sobre el blanco de la
 * página— se pierde en cuanto la imagen es oscura, que es lo que hace cualquier
 * portada con velo. Blanco es la apuesta segura, y además es lo que ya usa el
 * texto de dentro de la portada, así que el conjunto se lee como una pieza.
 *
 * Se cede ante el color elegido en el Personalizador, si lo hay: quien decide
 * pintar su menú de un color concreto sabe sobre qué lo va a poner.
 *
 * Solo mientras flota. En cuanto el menú se pega arriba recupera su fondo
 * sólido, y con él sus colores de siempre: por eso la regla se desactiva con
 * `--desplazada`.
 */
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wp-block-navigation,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wp-block-site-title,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wp-block-site-title a,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wp-block-site-tagline,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-customer-account__link,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-mini-cart__button,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .owari-favs__boton {
	color: var(--owari-menu-texto, #fff);
}

/*
 * Transparente no lleva línea abajo.
 *
 * El borde lo escribe la composición en el atributo `style` del propio
 * `<header>`, y la regla de transparente iba al envoltorio, un nivel más
 * afuera: se veía un filo blanco cruzando la foto. Sobre una portada no hay
 * nada que separar —la barra flota— así que se quita del todo. La sombra no
 * se toca aquí: la pinta el envoltorio, y es la que sale al bajar, cuando la
 * barra recupera su fondo y vuelve a haber algo de lo que despegarse.
 */
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) header,
.owari-cabecera.is-style-transparente.owari-es-portada:not(.owari-cabecera--desplazada) header {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
}

/*
 * Y los iconos acusan el cursor también aquí.
 *
 * La regla de arriba, que los pone blancos, gana por especificidad a los hover
 * de siempre y los dejaba mudos: hay que repetirlos dentro. Con el mismo color
 * que los enlaces, el del Personalizador: los enlaces sí lo conservaban —a
 * ellos la regla blanca les llega heredada, y una regla directa le gana— y no
 * tiene sentido que el icono de al lado responda de otra manera.
 *
 * El corazón se queda con su rojo, que es el color de lo que hace.
 */
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-customer-account__link:hover,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-customer-account__link:focus-visible,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-mini-cart__button:hover,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .wc-block-mini-cart__button:focus-visible {
	color: var(--owari-menu-hover, var(--owari-primario-texto, var(--mdb-primary)));
}

.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .owari-favs__boton:hover,
.owari-cabecera.owari-menu--transparente.owari-es-portada:not(.owari-cabecera--desplazada) .owari-favs__boton:focus-visible {
	color: var(--mdb-danger);
}