/* sp-menu.css — menú principal SP nativo (2026-07-23). Desktop hover+click, movil acordeon. */

.sp-nav { display:flex; }
.sp-menu, .sp-submenu { list-style:none; margin:0; padding:0; }
.sp-menu { display:flex; align-items:center; gap:2px; }
.sp-item { position:relative; }
.sp-link {
	display:inline-flex; align-items:center; gap:4px;
	padding:8px 8px; font-weight:600; font-size:15px; line-height:1;
	color:#1b2430; text-decoration:none; cursor:pointer; background:none; border:0;
	white-space:nowrap;
}
.sp-link:hover, .sp-link:focus-visible { color:#0a6; }
.sp-nolink { cursor:default; }
.sp-sub-toggle {
	display:inline-flex; align-items:center; justify-content:center;
	width:18px; height:28px; padding:0; margin-left:-5px;
	background:none; border:0; color:#1b2430; cursor:pointer;
}
.sp-sub-toggle svg { transition:transform .18s ease; }

/* Submenu (desktop) */
.sp-submenu {
	position:absolute; top:100%; left:0; min-width:248px; z-index:1200;
	background:#fff; border:1px solid #e6e9ee; border-radius:10px;
	box-shadow:0 12px 34px rgba(20,30,48,.14);
	padding:6px; opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .16s ease, transform .16s ease, visibility .16s;
	max-height:min(70vh,560px); overflow-y:auto;
}
.sp-submenu .sp-link { display:block; padding:9px 12px; font-weight:500; border-radius:7px; }
.sp-submenu .sp-link:hover, .sp-submenu .sp-link:focus-visible { background:#f2f7f4; color:#0a6; }

/* Desktop: abrir por hover y por foco de teclado */
@media (min-width:981px){
	/* 2026-07-28: menú principal a UNA LÍNEA (antes envolvía a 2 con las etiquetas largas).
	   Se aprieta tipografía/padding/interletrado y el ancho del caret. Se MANTIENE
	   flex-wrap:wrap a propósito: es la red de seguridad — si por debajo de ~1280 el
	   contenido no cupiera, envuelve con elegancia en vez de solaparse con la cesta (nunca
	   overflow/overlap). Con estos valores el contenido (~818px) entra en una línea a 1440
	   (hueco a cesta 74px) Y a 1280 (hueco 26px). Ojo: el #page-container mete 64px de gutter
	   a cada lado por debajo de 1328px de viewport, así que el ancho útil del nav baja de
	   864px (1440) a 816px (1280). Medido con Playwright a 1440 y 1280 (gapToCart>0, 1 línea).
	   Estas reglas ganan a `.sp-nav a` de sp-home.css por especificidad (child + 3 clases). */
	.sp-nav { flex-wrap:wrap; }
	.sp-menu { flex-wrap:wrap; gap:0; }
	.sp-menu > .sp-item { display:flex; align-items:center; }
	.sp-menu > .sp-item > .sp-link { font-size:13px; padding:7px 5px; letter-spacing:-0.01em; }
	.sp-menu > .sp-item > .sp-sub-toggle { width:10px; height:26px; margin-left:-3px; }
	.sp-menu > .sp-item > .sp-sub-toggle svg { width:10px; height:10px; }
	/* MEGA-MENÚ (familias con >=6 hijos): panel ancho a 3 columnas.
	   El primer hijo es «Ver todo <familia>»: cabecera a todo lo ancho con flecha. */
	.sp-item.sp-mega > .sp-submenu {
		display:grid; grid-template-columns:repeat(3,minmax(190px,1fr));
		gap:2px 14px; width:min(640px,calc(100vw - 48px)); padding:10px 12px;
		max-height:none; overflow:visible;
	}
	/* los hijos largos en nowrap invaden la columna vecina del grid */
	.sp-item.sp-mega > .sp-submenu .sp-link { white-space:normal; }
	.sp-item.sp-mega > .sp-submenu > li:first-child {
		grid-column:1/-1; border-bottom:1px solid #e6e9ee; margin-bottom:6px; padding-bottom:4px;
	}
	.sp-item.sp-mega > .sp-submenu > li:first-child > .sp-link {
		font-weight:700; color:#0f5f9e;
	}
	.sp-item.sp-mega > .sp-submenu > li:first-child > .sp-link::after { content:" →"; }
	/* que el panel no se salga por la derecha en los ítems del centro */
	.sp-item.sp-mega:nth-child(n+4) > .sp-submenu { left:auto; right:min(0px,calc(100vw - 640px)); }
	/* desktop estrecho: con las familias envueltas a 2 filas, anclar por la derecha
	   sacaría el panel por la izquierda del viewport */
	@media (max-width:1049px){
		.sp-item.sp-mega:nth-child(n+4) > .sp-submenu { left:0; right:auto; }
	}
	.sp-has-children:hover > .sp-submenu,
	.sp-has-children:focus-within > .sp-submenu,
	.sp-has-children.sp-open > .sp-submenu { opacity:1; visibility:visible; transform:translateY(0); }
	.sp-has-children:hover > .sp-link .sp-sub-toggle svg,
	.sp-has-children.sp-open > * .sp-sub-toggle svg { transform:rotate(180deg); }
	.sp-menu-toggle { display:none; }
}

/* Hamburguesa / acordeon (<=980px) */
.sp-menu-toggle {
	display:none; align-items:center; justify-content:center;
	width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer; color:#1b2430;
}
@media (max-width:980px){
	.sp-menu-toggle { display:inline-flex; }
	.sp-nav { position:fixed; inset:0 0 0 auto; width:min(86vw,380px);
		background:#fff; box-shadow:-8px 0 40px rgba(0,0,0,.18);
		transform:translateX(100%); transition:transform .22s ease;
		z-index:100010; overflow-y:auto; padding:64px 0 32px; /* por encima del overlay movil de FiboSearch */
		overscroll-behavior:contain; }
	.sp-nav.sp-open { transform:translateX(0); }
	body.sp-nav-lock { overflow:hidden; }
	/* con el panel abierto, el overlay tactil de FiboSearch (z-index altisimo) no debe
	   robar los taps del menu */
	body.sp-nav-lock .js-dgwt-wcas-enable-mobile-form,
	body.sp-nav-lock .dgwt-wcas-search-wrapp { pointer-events:none; }
	.sp-menu { flex-direction:column; align-items:stretch; gap:0; }
	.sp-item { border-bottom:1px solid #eef1f4; }
	.sp-item-top > .sp-link { flex:1; min-width:0; padding:14px 20px; min-height:44px; font-size:16px; }
	/* fila padre: enlace/label a la izquierda, boton toggle 44px a la derecha.
	   flex-wrap es imprescindible: sin él el ul.sp-submenu (static, width:100%) se coloca
	   EN LA MISMA FILA que el enlace y saca el li a 557px, fuera del panel de 310 */
	.sp-has-children.sp-item-top { display:flex; flex-wrap:wrap; align-items:center; }
	.sp-sub-toggle { width:44px; height:44px; margin:0; }
	.sp-submenu {
		position:static; opacity:1; visibility:visible; transform:none;
		box-shadow:none; border:0; border-radius:0; padding:0;
		max-height:0; overflow:hidden; transition:max-height .24s ease;
		background:#f7f9fb; width:100%;
	}
	.sp-item.sp-open > .sp-submenu { max-height:1400px; }
	.sp-submenu .sp-link { padding:13px 28px; min-height:44px; }
	/* nowrap fuerza el min-content del panel por encima de sus 310px a 360 de viewport */
	.sp-item-top > .sp-link, .sp-submenu .sp-link { white-space:normal; }
	.sp-open > * .sp-sub-toggle svg, .sp-item.sp-open > .sp-sub-toggle svg { transform:rotate(180deg); }
}

/* backdrop del panel movil */
.sp-nav-backdrop { display:none; position:fixed; inset:0; background:rgba(15,22,34,.44); z-index:100000; }
.sp-nav-backdrop.sp-open { display:block; }
@media (min-width:981px){ .sp-nav-backdrop { display:none !important; } }