/* Luzrosa — navigation redesign */

:root{
	--lzm-accent:#D1567E;
	--lzm-accent-deep:#A83A5C;
	--lzm-ink:#3B2432;
	--lzm-ink-2:#7D5B69;
	--lzm-border:#E9D3DA;
	--lzm-surface-alt:#F5E6EB;
	--lzm-sage-bg:#E9EFE4;
	--lzm-sage-deep:#42553C;
}

/* header: subtle lift once the page has scrolled */
#masthead{transition:box-shadow .25s ease}
#masthead.lzm-scrolled{box-shadow:0 6px 18px rgba(59,36,48,.08)}

/* top-level items: animated underline instead of the flat colour swap */
#site-navigation ul.menu > li.menu-item > a{
	position:relative;
	transition:color .2s ease;
}
#site-navigation ul.menu > li.menu-item > a::after{
	content:"";
	position:absolute;
	left:1em;right:1em;bottom:.95em;
	height:2px;
	background:var(--lzm-accent);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .25s ease;
}
#site-navigation ul.menu > li.menu-item:hover > a::after,
#site-navigation ul.menu > li.menu-item.current-menu-item > a::after{
	transform:scaleX(1);
}

/* base dropdown mechanics: replace the theme's off-screen "left:-9999px" trick
   with an opacity/translate fade so it can actually be animated */
#site-navigation ul.menu ul.sub-menu{
	left:0 !important;
	top:100% !important;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateY(10px);
	transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
	margin-top:0;
}
#site-navigation ul.menu > li.menu-item-has-children:hover > ul.sub-menu,
#site-navigation ul.menu > li.menu-item-has-children.focus > ul.sub-menu{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateY(0);
	transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s;
}

/* generic dropdown panel look (used by "Catálogo de productos" and any other simple flyout) */
#site-navigation ul.menu ul.sub-menu{
	background:#fff;
	border:1px solid var(--lzm-border);
	border-radius:14px;
	box-shadow:0 18px 40px rgba(59,36,48,.14);
	padding:10px;
}
#site-navigation ul.menu ul.sub-menu li a{
	border-radius:9px;
	color:var(--lzm-ink) !important;
	font-weight:500;
}
#site-navigation ul.menu ul.sub-menu li a:hover,
#site-navigation ul.menu ul.sub-menu li.focus > a{
	background:var(--lzm-surface-alt) !important;
	color:var(--lzm-accent-deep) !important;
}

/* mega-menu: "Productos personalizados" becomes a photo grid instead of a plain list.
   Matched by href (not by li#menu-item-ID) because WordPress assigns nav-menu-item
   IDs independently per site — the same menu looks identical but the IDs differ
   between this local copy and the live site, so ID selectors silently stop matching
   on production even though everything works locally. Hrefs (built from the
   product/category slug) stay stable across environments. */
#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu{
	display:grid;
	grid-template-columns:repeat(3,208px);
	gap:6px;
	width:auto;
	padding:14px;
}
#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu > li{
	display:block;
}
#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu > li > a{
	display:flex !important;
	align-items:center;
	gap:12px;
	width:100% !important;
	padding:8px !important;
	font-size:.85em !important;
	line-height:1.25;
}
#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu > li > a::before{
	content:"";
	display:block !important;
	width:44px;height:44px;
	flex:none;
	border-radius:10px;
	background:var(--lzm-sage-bg) center/cover no-repeat;
}
#site-navigation ul.menu .sub-menu li > a[href*="cambiador-personalizado"]::before{background-image:url("/wp-content/uploads/2023/10/ARCHIVOS-FOTOS-CAMBIA_Mesa-de-trabajo-1-copia-4-768x768.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="neceser-de-aseo-personalizado-para-bebe"]::before{background-image:url("/wp-content/uploads/2024/11/pedro-22-768x768.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="/producto/bolsas-organizadoras"]::before{background-image:url("/wp-content/uploads/2025/03/bolsas-clinica-768x768.png")!important}
#site-navigation ul.menu .sub-menu li > a[href*="portadocumentos-para-bebe-personalizado"]::before{background-image:url("/wp-content/uploads/2023/12/antonlla-1-1024x1024.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="bolso-mini-panalera"]::before{background-image:url("/wp-content/uploads/2024/03/WhatsApp-Image-2024-03-19-at-9.27.37-AM-3-1024x1024.jpeg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="album-personalizado-para-bebe"]::before{background-image:url("/wp-content/uploads/2025/08/PORTADAS-DISENOS-libro-MI-PRIMER-CAPITULO_Mesa-de-trabajo-1-copia-11-1024x777.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="categoria-producto/bebes/cobijas"]::before{background-image:url("/wp-content/uploads/2020/11/WhatsApp-Image-2024-06-18-at-6.07.19-PM-1024x1024.jpeg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="cojin-de-lactancia-bebes"]::before{background-image:url("/wp-content/uploads/2024/07/cojin-de-lactancia-768x768.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="toalla-bebe-personalizada"]::before{background-image:url("/wp-content/uploads/2021/06/toallaagustMesa-de-trabajo-1.png")!important}
#site-navigation ul.menu .sub-menu li > a[href*="manta-para-fotos-mes-a-mes-de-crecimiento"]::before{background-image:url("/wp-content/uploads/2020/06/lila-mariposa.jpg")!important}
#site-navigation ul.menu .sub-menu li > a[href*="termos-para-bebes"]::before{background-image:url("/wp-content/uploads/2020/09/IMG_20240517_192952-300x300.jpg")!important}

@media(max-width:960px){
	#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu{
		grid-template-columns:1fr;
		width:100%;
	}
}

/* mobile handheld menu: tidy typography, but this must NOT force submenus
   permanently visible — the theme's own navigation.js adds/removes a
   `.toggled-on` class on tap (see storefront/style.css:
   `.handheld-navigation ul.menu .sub-menu{opacity:0;visibility:hidden;
   max-height:0}` / `.sub-menu.toggled-on{opacity:1;visibility:visible;
   max-height:9999px}`). An earlier version of this rule set
   opacity:1/visibility:visible unconditionally here, which made every
   submenu — including the "Productos personalizados" mega-menu — show its
   items even while collapsed. This ties visibility to that same
   `.toggled-on` class instead, at higher specificity than our own desktop
   hover rules above so it isn't stuck hidden either. */
@media(max-width:960px){
	#site-navigation ul.menu > li.menu-item > a::after{display:none}
	.main-navigation ul.menu > li > a{padding:1em 1em}
	#site-navigation ul.menu ul.sub-menu{
		box-shadow:none;border:0;border-radius:0;
		opacity:0;visibility:hidden;pointer-events:none;transform:none;
		max-height:0;overflow:hidden;
		transition:max-height .3s ease;
	}
	#site-navigation ul.menu ul.sub-menu.toggled-on{
		opacity:1;visibility:visible;pointer-events:auto;
		max-height:9999px;overflow:visible;
	}
	/* The mega-menu grid carries its own padding:14px (line ~89, needed for
	   the open/expanded look). Padding on the SAME element whose max-height
	   collapses to 0 doesn't shrink away with it — same bug as the product
	   description accordion — so while collapsed this left a visible sliver.
	   Zero it here and restore it only once actually toggled open. */
	#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu{
		padding:0;
	}
	#site-navigation ul.menu li.lzm-mega-menu > ul.sub-menu.toggled-on{
		padding:14px;
	}
}