/*
 * Enercol — Menú de productos vertical (solo escritorio)
 *
 * Woodmart carga su CSS después que este archivo y estiliza cualquier <button>
 * del menú (fondo gris, padding, alto). Por eso las propiedades de maquetación
 * del botón van con !important y con selector de alta especificidad.
 */

@media (min-width: 1025px) {

	/* Panel: más ancho y con scroll cuando una rama larga queda abierta. */
	.wd-nav-main > li > .wd-dropdown-menu {
		width: 330px !important;
		max-height: 78vh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	.wd-nav-main > li > .wd-dropdown-menu > .container {
		width: 100% !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * Puente invisible sobre el hueco (~15px) entre el ítem y el panel.
	 * Sin esto el cursor sale del <li> al bajar y el menú se cierra.
	 * Solo existe en :hover, así que no intercepta clics el resto del tiempo.
	 */
	.wd-nav-main > li.menu-item-has-children:hover::after {
		content: "" !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		height: 26px !important;
		background: transparent !important;
		z-index: 1 !important;
	}

	/* Submenús anidados: del flyout absoluto al flujo vertical, colapsados. */
	.wd-nav-main ul.sub-sub-menu {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		display: none;
	}

	.wd-nav-main li.enercol-mv-open > ul.sub-sub-menu {
		display: block;
	}

	/* Sangría por nivel. */
	.wd-nav-main .wd-dropdown-menu .item-level-1 > a { padding-left: 12px !important; }
	.wd-nav-main .wd-dropdown-menu .item-level-2 > a { padding-left: 28px !important; }
	.wd-nav-main .wd-dropdown-menu .item-level-3 > a { padding-left: 44px !important; }
	.wd-nav-main .wd-dropdown-menu .item-level-4 > a { padding-left: 60px !important; }

	/* Hueco a la derecha para el botón, que no se solape con títulos largos. */
	.wd-nav-main .wd-dropdown-menu a {
		padding-right: 42px !important;
	}

	/* La flecha nativa de Woodmart sobra: la reemplaza el botón. */
	.wd-nav-main .wd-dropdown-menu .menu-item-has-children > a::after {
		content: none !important;
		display: none !important;
	}

	.wd-nav-main .wd-dropdown-menu li.menu-item-has-children {
		position: relative !important;
	}

	/* Botón alineado a la derecha, a la altura de la fila (34px). */
	.wd-nav-main .wd-dropdown-menu button.enercol-mv-opener {
		position: absolute !important;
		top: 0 !important;
		right: 4px !important;
		left: auto !important;
		bottom: auto !important;
		z-index: 5 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		width: 34px !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 34px !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: inherit !important;
		font-size: 0 !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		transform: none !important;
		cursor: pointer !important;
		opacity: 0.55 !important;
	}

	.wd-nav-main .wd-dropdown-menu button.enercol-mv-opener:hover,
	.wd-nav-main .wd-dropdown-menu button.enercol-mv-opener:focus-visible {
		opacity: 1 !important;
	}

	.wd-nav-main .wd-dropdown-menu button.enercol-mv-opener::before {
		content: "" !important;
		display: block !important;
		box-sizing: border-box !important;
		width: 7px !important;
		height: 7px !important;
		margin: -2px 0 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-right: 1.5px solid currentColor !important;
		border-bottom: 1.5px solid currentColor !important;
		background: none !important;
		transform: rotate(-45deg) !important;
		transition: transform 0.18s ease !important;
	}

	.wd-nav-main .wd-dropdown-menu li.enercol-mv-open > button.enercol-mv-opener::before {
		margin-top: -5px !important;
		transform: rotate(45deg) !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.wd-nav-main .wd-dropdown-menu button.enercol-mv-opener::before {
			transition: none !important;
		}
	}
}