/* Baby Bloom — Cabecera y navegación. Port del mockup + menú móvil accesible. */
.bb-header { background: var(--bb-bg-page); position: sticky; top: 0; z-index: 100; }
.bb-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .9rem 1.4rem; max-width: var(--bb-container); margin: 0 auto;
}
.bb-nav__logo { display: inline-flex; align-items: center; }
.bb-nav__logo img { height: 52px; width: auto; }
.bb-nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.bb-nav__list { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.bb-nav__link {
	font-weight: 500; color: var(--bb-text-link); text-decoration: none; padding: .4rem 0;
	min-height: 44px; display: inline-flex; align-items: center;
}
.bb-nav__link:hover { color: var(--bb-text-accent); }
.bb-nav__cta { padding: .6rem 1.3rem; font-size: .92rem; }

/* ---- Submenú desplegable (Tienda) ---- */
.bb-nav__item.menu-item-has-children { position: relative; }
.menu-item-has-children > .bb-nav__link::after {
	content: ""; width: .5em; height: .5em; margin-left: .45rem; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.menu-item-has-children.is-open > .bb-nav__link::after { transform: rotate(-135deg) translateY(2px); }
.bb-sub-menu {
	list-style: none; margin: 0; padding: .4rem; display: grid; gap: .1rem;
	position: absolute; top: calc(100% + .4rem); left: 0; min-width: 220px;
	background: var(--bb-blanco); border: 1px solid var(--bb-border-subtle);
	border-radius: var(--bb-radius-md); box-shadow: var(--bb-shadow-md); z-index: 110;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu-item-has-children.is-open > .bb-sub-menu,
.menu-item-has-children:hover > .bb-sub-menu,
.menu-item-has-children:focus-within > .bb-sub-menu {
	opacity: 1; visibility: visible; transform: none;
}
.bb-sub-menu .bb-nav__link {
	width: 100%; min-height: 44px; padding: .55rem .8rem;
	border-radius: var(--bb-radius-sm); font-size: .95rem; color: var(--bb-ink);
}
.bb-sub-menu .bb-nav__link:hover,
.bb-sub-menu .bb-nav__link:focus-visible { background: var(--bb-confianza-100); color: var(--bb-confianza-700); }
/* Estado activo del padre (Tienda) en tienda / cursos / carrito / etc. */
.bb-nav__item.current-menu-parent > .bb-nav__link,
.bb-nav__item.bb-current-parent > .bb-nav__link { color: var(--bb-text-accent); }

/* Botón hamburguesa (móvil) */
.bb-nav-toggle {
	display: none; align-items: center; justify-content: center; width: 48px; height: 48px;
	background: transparent; border: 1.5px solid var(--bb-border-default); border-radius: var(--bb-radius-sm); cursor: pointer;
	/* Reset del <button>: Storefront aplica padding a todos los button y, con
	   box-sizing:border-box global, colapsa el área de contenido y descentra las
	   barras. Forzamos padding 0, sin appearance nativa y line-height 0. */
	padding: 0; min-width: 0; line-height: 0; -webkit-appearance: none; appearance: none;
}
.bb-nav-toggle__bars, .bb-nav-toggle__bars::before, .bb-nav-toggle__bars::after {
	content: ""; display: block; width: 22px; height: 2px; background: var(--bb-ink); position: relative;
}
.bb-nav-toggle__bars::before { position: absolute; top: -7px; }
.bb-nav-toggle__bars::after { position: absolute; top: 7px; }

/* ---- Móvil (≤860) ---- */
@media (max-width: 860px) {
	.bb-nav-toggle { display: inline-flex; }
	.bb-nav__menu {
		position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: .4rem;
		background: var(--bb-bg-page); border-bottom: 1px solid var(--bb-border-default);
		box-shadow: var(--bb-shadow-md); padding: 1rem 1.4rem 1.4rem;
		transform: translateY(-12px); opacity: 0; visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}
	.bb-nav__menu[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
	.bb-nav__list { flex-direction: column; gap: .2rem; }
	.bb-nav__link { padding: .6rem .2rem; }
	.bb-nav__cta { width: 100%; justify-content: center; margin-top: .4rem; }
	/* Bloqueo de scroll cuando el menú está abierto */
	body.bb-nav-open { overflow: hidden; }

	/* Submenú en móvil: estático, indentado, colapsable */
	.bb-sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0; min-width: 0;
		padding: .1rem 0 .3rem .9rem; display: none;
	}
	.menu-item-has-children.is-open > .bb-sub-menu { display: grid; }
	.menu-item-has-children:hover > .bb-sub-menu { opacity: 1; visibility: visible; }
	.menu-item-has-children:not(.is-open):hover > .bb-sub-menu { display: none; }
	.bb-sub-menu .bb-nav__link { padding: .5rem .2rem; min-height: 40px; }
}

/* ---- Utilidades del header: cuenta y carrito ---- */
.bb-nav__utils { display: flex; align-items: center; gap: .15rem; }
.bb-nav__util { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--bb-text-link); border-radius: var(--bb-radius-full); text-decoration: none; }
.bb-nav__util:hover { color: var(--bb-text-accent); background: var(--bb-confianza-100); }
.bb-nav__util:focus-visible { outline: 2px solid var(--bb-focus-ring); outline-offset: 2px; }
.bb-cart-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--bb-amor-700); color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; display: none; align-items: center; justify-content: center; }
.bb-cart-count.is-filled { display: inline-flex; }
@media (max-width: 860px) { .bb-nav__utils { justify-content: center; margin-top: .5rem; order: 1; } }

/* ---- Carrito siempre visible en la barra móvil ---- */
/* Por defecto (escritorio) el carrito de la barra se oculta: el del menú ya está
   visible en la fila superior. Debe ir DESPUÉS de .bb-nav__util para ganar la cascada. */
.bb-nav__cart-mobile { display: none; }
@media (max-width: 860px) {
	/* En la barra: empujado a la derecha, pegado al botón hamburguesa. */
	.bb-nav__cart-mobile { display: inline-flex; margin-left: auto; }
	/* Evita el carrito duplicado dentro del desplegable (Mi cuenta permanece). */
	.bb-nav__menu .bb-nav__util--cart { display: none; }
}