/* BW3D — mega menu de la barra negra del header (menu "Principal BW3D").
 *
 * El HTML lo inyecta novamira-sandbox/bw3d-mega-menu.php dentro del <li> de
 * Impresoras 3D, Insumos y Repuestos, con datos tomados de la tienda en vivo.
 * Abre con :hover y :focus-within (no depende del JS de SmartMenus, que en este
 * sitio no arranca; ver nav-dropdown.css). Solo escritorio: en el hamburguesa
 * el PHP no imprime el panel.
 *
 * Mismo lenguaje que el dropdown del widget: fondo #242021, hover rojo de marca,
 * Space Grotesk, fillet abajo de 16px.
 */

@media (min-width: 1025px) {

	.bw-nav-2 .elementor-nav-menu--main li.bw3d-has-mega {
		position: relative;
	}

	/* Flechita que avisa que el item despliega. */
	.bw-nav-2 .elementor-nav-menu--main li.bw3d-has-mega > a.elementor-item::after {
		content: "";
		display: inline-block;
		position: static;
		width: 6px;
		height: 6px;
		margin-left: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		background: none;
		/* widget-nav-menu.css pone opacity:0 con un selector de 4 :not() (0,5,1). */
		opacity: 0.7 !important;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.bw-nav-2 .elementor-nav-menu--main li.bw3d-has-mega:hover > a.elementor-item::after,
	.bw-nav-2 .elementor-nav-menu--main li.bw3d-has-mega:focus-within > a.elementor-item::after {
		transform: translateY(1px) rotate(225deg);
	}

	.bw3d-mega {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		z-index: 1000;
		width: max-content;
		min-width: 240px;
		max-width: min(820px, calc(100vw - 48px));
		padding: 26px 28px 0;
		background: #242021;
		color: #fff;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
		font-family: "Space Grotesk", sans-serif;
		text-align: left;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	/* Puente invisible para cruzar el hueco entre la barra y el panel. */
	.bw3d-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	li.bw3d-has-mega:hover > .bw3d-mega,
	li.bw3d-has-mega:focus-within > .bw3d-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.bw3d-mega__grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(180px, 220px);
		gap: 0 36px;
	}

	.bw3d-mega__col + .bw3d-mega__col {
		padding-left: 36px;
		margin-left: -36px;
		border-left: 1px solid rgba(255, 255, 255, 0.08);
	}

	.bw3d-mega__title {
		margin: 0 0 12px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #F14F44;
	}

	.bw-nav-2 .elementor-nav-menu .bw3d-mega ul.bw3d-mega__list {
		/* widget-nav-menu.css esconde todo ul anidado (.elementor-nav-menu ul {display:none}). */
		/* ...y los posiciona como submenu (absolute, 12em, fondo/sombra del widget). */
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		background: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bw3d-mega__list li {
		margin: 0;
		padding: 0;
	}

	.bw-nav-2 .bw3d-mega a.bw3d-mega__link {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 7px 0;
		color: #fff;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
		text-transform: none;
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.bw-nav-2 .bw3d-mega a.bw3d-mega__link:hover,
	.bw-nav-2 .bw3d-mega a.bw3d-mega__link:focus-visible {
		color: #F14F44;
		transform: translateX(3px);
	}

	.bw3d-mega__count {
		font-size: 11px;
		font-variant-numeric: tabular-nums;
		color: rgba(255, 255, 255, 0.4);
	}

	.bw-nav-2 .bw3d-mega a.bw3d-mega__all {
		display: block;
		margin: 20px -28px 0;
		padding: 14px 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 0 0 16px 16px;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bw-nav-2 .bw3d-mega a.bw3d-mega__all:hover,
	.bw-nav-2 .bw3d-mega a.bw3d-mega__all:focus-visible {
		background: #332F30;
		color: #F14F44;
	}
}

/* Por las dudas: nunca dentro del hamburguesa. */
@media (max-width: 1024px) {
	.bw3d-mega {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bw3d-mega,
	.bw-nav-2 .bw3d-mega a.bw3d-mega__link {
		transition: none;
	}
}

/* bw3d-nowrap: la flechita de los items con panel suma ~14px y a 1280px empujaba
   "Marcas" a una segunda linea. En escritorio la barra va siempre en una fila. */
@media (min-width: 1025px) {
	.bw-nav-2 .elementor-nav-menu--main > ul.elementor-nav-menu {
		flex-wrap: nowrap;
	}
}