/* Products mega menu – use on li.products or li.has-mega */
.main-nav > li.products,
.main-nav > li.has-mega,
.elementor-nav-menu > li.products,
.elementor-nav-menu > li.has-mega {
	position: relative;
}

.main-nav > li.products::before,
.main-nav > li.has-mega::before,
.elementor-nav-menu > li.products::before,
.elementor-nav-menu > li.has-mega::before {
	content: "";
	position: absolute;
	left: -20px;
	right: -20px;
	top: 100%;
	height: 24px;
	display: none;
	z-index: 199;
}

.main-nav > li.products.is-open::before,
.main-nav > li.products:hover::before,
.main-nav > li.has-mega.is-open::before,
.main-nav > li.has-mega:hover::before,
.elementor-nav-menu > li.products.is-open::before,
.elementor-nav-menu > li.products:hover::before,
.elementor-nav-menu > li.has-mega.is-open::before,
.elementor-nav-menu > li.has-mega:hover::before {
	display: block;
}

.mega-menu {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	padding-top: 12px;
	width: min(900px, calc(100vw - 32px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 200;
}

.mega-menu__panel {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
	padding: 30px 40px 36px;
}

.main-nav > li.products:hover .mega-menu,
.main-nav > li.products.is-open .mega-menu,
.main-nav > li.has-mega:hover .mega-menu,
.main-nav > li.has-mega.is-open .mega-menu,
.elementor-nav-menu > li.products:hover .mega-menu,
.elementor-nav-menu > li.products.is-open .mega-menu,
.elementor-nav-menu > li.has-mega:hover .mega-menu,
.elementor-nav-menu > li.has-mega.is-open .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Products dropdown: last category (left) + View All (right) on the same row */
.navbar .products .mega-menu,
.products .mega-menu {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 8px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.navbar .products .mega-menu .menu-title,
.products .mega-menu .menu-title {
	grid-column: 1 / -1;
}

.navbar .products .mega-menu .menu-grid,
.products .mega-menu .menu-grid {
	display: contents;
	max-width: none;
	margin: 0;
	padding: 0;
}

.navbar .products .mega-menu .menu-item:nth-child(1),
.products .mega-menu .menu-item:nth-child(1) {
	grid-column: 1;
	grid-row: 2;
}

.navbar .products .mega-menu .menu-item:nth-child(2),
.products .mega-menu .menu-item:nth-child(2) {
	grid-column: 2;
	grid-row: 2;
}

.navbar .products .mega-menu .menu-item:nth-child(3),
.products .mega-menu .menu-item:nth-child(3) {
	grid-column: 3;
	grid-row: 2;
}

.navbar .products .mega-menu .menu-item:nth-child(4),
.products .mega-menu .menu-item:nth-child(4) {
	grid-column: 1;
	grid-row: 3;
}

.navbar .products .mega-menu .menu-item:nth-child(5),
.products .mega-menu .menu-item:nth-child(5) {
	grid-column: 2;
	grid-row: 3;
}

.navbar .products .mega-menu .menu-item:nth-child(6),
.products .mega-menu .menu-item:nth-child(6) {
	grid-column: 1;
	grid-row: 4;
	align-self: center;
}

.navbar .products .mega-menu .mega-menu-footer,
.products .mega-menu .mega-menu-footer {
	grid-column: 3;
	grid-row: 4;
	align-self: center;
	justify-self: end;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.navbar .products .mega-menu .mega-menu-footer .ele-button,
.products .mega-menu .mega-menu-footer .ele-button {
	opacity: 1;
}