/* ==========================================================
   Mega Menu Styles — matches black top bar / white flyout card
   ========================================================== */

:root {
	--mega-accent: #1e73f5;
	--mega-bg-dark: #0b0b0f;
	--mega-text-light: #ffffff;
	--mega-panel-bg: #ffffff;
	--mega-panel-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
	--mega-radius: 18px;
}

/* ---------- Top level bar ---------- */
.mega-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 32px;
	background: var(--mega-bg-dark);
	position: relative;
	overflow: visible; /* required so the flyout isn't clipped */
}

/* If your header/nav wrapper markup adds its own container around
   .mega-menu (a <nav>, <header>, or theme wrapper div), that wrapper
   must also NOT have overflow:hidden — this is the #1 cause of a
   mega menu that "doesn't show" even though hover is firing.
   Uncomment and adjust the selector below to your theme's markup: */
/*
.site-header,
.main-navigation {
	overflow: visible !important;
}
*/

.mega-menu-item {
	/*position: relative;*/
}

.mega-top-link {
	display: inline-block;
	padding: 24px 4px;
	color: var(--mega-text-light);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-menu-item:hover > .mega-top-link,
.mega-menu-item.mega-open > .mega-top-link {
	color: var(--mega-accent);
	border-bottom-color: var(--mega-accent);
}

/* ---------- Flyout panel ---------- */
/* IMPORTANT: this element uses PADDING (not margin) for the visual
   gap below the top bar. Padding stays inside the element's box, so
   moving the mouse straight down from "PRODUCTS" into that padding
   area still counts as hovering .mega-menu-item — the panel stays
   open. If you ever change this to margin-top, hover will break
   again because margin is empty space outside the hoverable box. */
.mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 18px; /* was margin-top: 18px — do not change back */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s;
	z-index: 100;
	min-width: 900px;
}

.mega-menu-item.mega-open .mega-menu-panel {
	opacity: 1;
	visibility: visible;
}

/* Safety-net: panel still opens on hover even if the JS file
   fails to load for any reason. Remove this block only if you
   are relying purely on click-to-open on desktop. */
.mega-menu-item.has-mega-panel:hover .mega-menu-panel,
.mega-menu-item.has-mega-panel:focus-within .mega-menu-panel {
	opacity: 1;
	visibility: visible;
}

/* If the JS didn't run, still show the first "has-grid" item's
   grid by default so the panel isn't empty. */
.mega-menu-level-2-item.has-grid:first-of-type .mega-menu-level-3-wrap {
	display: block;
}
.mega-menu-level-2-item.has-grid:hover .mega-menu-level-3-wrap {
	display: block;
}

/* This is the actual visible white card. It carries the background,
   shadow, and rounded corners — the padding-top gap above lives on
   its transparent parent (.mega-menu-panel) so hover isn't broken. */
.mega-menu-inner {
	display: flex;
	position: relative;
	padding: 10px;
	background: var(--mega-panel-bg);
	border-radius: 4px;
	box-shadow: var(--mega-panel-shadow);
}
.product-mega-menu .mega-menu-inner {		display: flex;
	position: relative;
	padding: 28px;
	background: var(--mega-panel-bg);
	border-radius: var(--mega-radius);
	box-shadow: var(--mega-panel-shadow);border:1px solid #ccc; }

@media screen and (min-width:992px) {
.mega-menu-level-2 {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 280px;
	flex-shrink: 0;

}
}
/* ---------- Left list (Slurry Hose, Dewatering Hose...) ---------- */


.product-mega-menu .mega-menu-level-2 {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 280px;
	flex-shrink: 0;
	border-right: 1px solid #ececec;
	padding-right: 24px;
}

.mega-menu-level-2-item + .mega-menu-level-2-item {
	border-top: 1px solid #f1f1f1;
}

.mega-l2-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	padding: 14px 10px;
	border-radius: 10px;
	transition: background 0.15s ease;
}

.product-mega-menu .mega-menu-level-2-item.active .mega-l2-link,
.product-mega-menu .mega-l2-link:hover {
	background: #f4f7ff;
}

.l2-text {
	display: flex;
	flex-direction: column;
}

.l2-title {
	font-size: 15px;
	font-weight: 700;
	color: #101114;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mega-menu-level-2-item.active .l2-title,
.mega-l2-link:hover .l2-title {
	color: var(--mega-accent);
}

.l2-desc {
	font-size: 12.5px;
	color: #7b7f87;
	margin-top: 3px;
	font-weight: 400;
	text-transform: none;
}

.l2-arrow {
	color: var(--mega-accent);
	font-size: 15px;
	flex-shrink: 0;
	background: #eaf1ff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Right grid (Mining Hose, Dredge Hose...) ---------- */
.mega-menu-level-3-wrap {
	display: none;
	padding-left: 32px;
	flex: 1;
}

.mega-menu-level-2-item.active .mega-menu-level-3-wrap {
	display: block;    border-radius: 4px;
}

.mega-menu-grid-heading {
	display: block;
	color: var(--mega-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	align-items: start;
}

.mega-menu-grid-item {
	text-align: center;
	position: relative;
}

.mega-menu-grid-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 0;
	width: 1px;
	background: #ececec;
}

.mega-menu-grid-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	padding: 8px 22px;
}

.grid-icon {
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.grid-icon--placeholder {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f1f3f7;
	border: 1px dashed #d4d8e0;
}

.grid-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #101114;
}

.mega-menu-grid-item a:hover .grid-label {
	color: var(--mega-accent);
}

/* ---------- Full-width CTA banner (e.g. Abrasor) ---------- */
.mega-menu-grid-item.mega-menu-cta {
	grid-column: 1 / -1;
	margin-top: 40px; /* gap between icon row and banner, per Figma */
	text-align: left;
}

.mega-menu-grid-item.mega-menu-cta::after {
	display: none; /* no divider line on the banner */
}

.mega-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--mega-accent);
	border-radius: 12px;
	padding: 26px 32px;
	text-decoration: none;
}

.mega-cta-logo {
	max-height: 30px;
	width: auto;
	display: block;
}

.mega-cta-logo-text {
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mega-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	color: #101114;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	padding: 6px 6px 6px 24px;
	border-radius: 999px;
	transition: transform 0.15s ease;
}

.mega-cta-inner:hover .mega-cta-button {
	transform: translateY(-1px);
}

.mega-cta-arrow {
	width: 34px;
	height: 34px;
	background: var(--mega-accent);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

/* Left menu */
.product-mega-menu .mega-menu-level-2-item.active > .mega-l2-link{
    background:#f5f5f5;
    color:#000;
}

/* Right panels */
.mega-menu-level-3-wrap{
    display:none;
}

.mega-menu-level-3-wrap.active{
    display:block;
}



/* ---------- Mobile ---------- */
@media (max-width: 991px) {
.main_menu .mega-menu {
		flex-direction: column;
		align-items: stretch;
	}
/*.main_menu .mega-menu-panel {
		position: static;
		min-width: 0;
		box-shadow: none;
		transform: none;
		display: none;
		margin-top: 0;
	}*/

.main_menu .mega-menu-item.mega-open .mega-menu-panel {
		display: block;
		opacity: 1;
		visibility: visible;
	}

.main_menu .mega-menu-inner {
		flex-direction: column;
		padding: 12px;
	}

/*.main_menu .mega-menu-level-2 {*/
/*		width: 100%;*/
/*		border-right: none;*/
/*		padding-right: 0;*/
/*	}*/

.main_menu .mega-menu-level-3-wrap {
		padding-left: 0;
	}

.main_menu .mega-menu-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

.main_menu .mega-menu-grid-item::after {
		display: none;
	}
}