/**
 * Icono de cesta en el menú de navegación.
 */

.mimaloo-cart-menu-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* El icono debe quedar en la MISMA línea del menú de cabecera:
   el <ul> del bloque de navegación trae flex-wrap:wrap de serie y el item
   inyectado caía a una segunda línea (feedback Felipe 5-sep-26). */
nav[aria-label="Menú header"] .wp-block-navigation__container,
.wp-block-navigation__container.is-responsive.items-justified-right {
	flex-wrap: nowrap;
}

/* La columna del nav en la cabecera queda constreñida (~285px) y no caben
   los 4 items + cesta: que el nav crezca ocupando el hueco del grupo. */
nav[aria-label="Menú header"] {
	flex-grow: 1;
}

/* Evitar que "Mi cuenta" se parta en dos líneas al comprimirse la fila. */
nav[aria-label="Menú header"] .wp-block-navigation-item__content {
	white-space: nowrap;
}

.mimaloo-cart-menu-item--empty {
	display: none !important;
}

.mimaloo-cart-menu-item > a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.35em;
	padding: 0.5em 0.75em;
}

.mimaloo-cart-icon {
	display: inline-flex;
	line-height: 1;
}

.mimaloo-cart-icon svg {
	width: 1.15em;
	height: 1.15em;
	vertical-align: middle;
}

.mimaloo-cart-count {
	font-size: 0.85em;
	font-weight: 600;
	min-width: 1.3em;
	text-align: center;
	background: var(--wp--preset--color--contrast, #111);
	color: var(--wp--preset--color--base, #fff);
	border-radius: 999px;
	padding: 0.1em 0.35em;
}

/* Overlay responsive del menú (móvil): icono más grande y legible.
   OJO: el <ul> de cabecera vive DENTRO de .wp-block-navigation__responsive-container
   también en escritorio (el modal queda estático), así que estas reglas deben
   limitarse al breakpoint móvil o ensanchan la fila de escritorio (bug 5-sep-26). */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container .mimaloo-cart-menu-item {
		width: 100%;
	}

	.wp-block-navigation__responsive-container .mimaloo-cart-menu-item > a {
		padding: 0.75em 1em;
		width: 100%;
	}

	.wp-block-navigation__responsive-container .mimaloo-cart-icon svg {
		width: 1.5em;
		height: 1.5em;
	}

	.wp-block-navigation__responsive-container .mimaloo-cart-count {
		font-size: 1em;
	}
}