/* -------------------------------------------------------------------------
 * Header mega menu ([hec_mega_menu])
 *
 * Elementor's global widget styles (Site Settings → Buttons, and its
 * element-level resets on button/a/ul/li) are loaded after this file and
 * often win on specificity for bare tags. Every rule below is scoped under
 * .hec-mega-menu and carries !important so this component's look never
 * depends on load order against Elementor/theme defaults.
 * ---------------------------------------------------------------------- */

.hec-mega-menu {
	position: relative !important;
	display: inline-flex !important;
	box-sizing: border-box !important;
}
.hec-mega-menu *,
.hec-mega-menu *::before,
.hec-mega-menu *::after {
	box-sizing: border-box !important;
}

/* Reset element-level Elementor/theme defaults for every button in here. */
.hec-mega-menu button {
	margin: 0 !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.hec-mega-menu ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hec-mega-menu a {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* ---- Shop / Brands tabs (sibling, one level) --------------------------- */

.hec-mega-menu__tabs {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.hec-mega-menu__tab {
	display: inline-flex !important;
	align-items: center !important;
	padding: 12px 14px !important;
	color: #1c1c1b !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
.hec-mega-menu__tab:hover,
.hec-mega-menu__tab.is-active {
	color: #215630 !important;
}
.hec-mega-menu__tab.is-active {
	box-shadow: inset 0 -2px 0 #215630 !important;
}

/* ---- Dropdown shell (one per tab, only one visible at a time) ---------- */

.hec-mega-menu__dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	display: flex !important;
	width: min(880px, 90vw) !important;
	max-height: 70vh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #e6e9e6 !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 44px rgba(20, 40, 28, 0.16) !important;
	z-index: 200 !important;
	overflow: hidden !important;
}
.hec-mega-menu__dropdown[hidden] {
	display: none !important;
}
.hec-mega-menu__dropdown--brands {
	flex-direction: column !important;
	padding: 24px 28px !important;
}

.hec-mega-menu__rail {
	flex: 0 0 220px !important;
	padding: 12px 0 !important;
	overflow-y: auto !important;
	border-right: 1px solid #e6e9e6 !important;
	background: #fbfaf7 !important;
}

.hec-mega-menu__rail-link {
	display: block !important;
	width: 100% !important;
	padding: 11px 20px !important;
	color: #1c1c1b !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
}
.hec-mega-menu__rail-item--plain .hec-mega-menu__rail-link {
	font-weight: 700 !important;
}
.hec-mega-menu__rail-item:hover .hec-mega-menu__rail-link,
.hec-mega-menu__rail-item.is-active .hec-mega-menu__rail-link {
	color: #215630 !important;
	background: #f0ece1 !important;
}

.hec-mega-menu__panels {
	position: relative !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 24px 28px !important;
	overflow-y: auto !important;
}

.hec-mega-menu__panel {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 32px !important;
}
.hec-mega-menu__panel[hidden] {
	display: none !important;
}

.hec-mega-menu__col-title {
	margin: 0 0 12px !important;
	color: #1c1c1b !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.hec-mega-menu__col--links {
	flex: 1 1 160px !important;
}
.hec-mega-menu__col--colors {
	flex: 1 1 220px !important;
}
.hec-mega-menu__col--featured {
	flex: 1 1 160px !important;
}

.hec-mega-menu__link-list {
	margin: 0 !important;
	padding: 0 !important;
}
.hec-mega-menu__link {
	display: block !important;
	padding: 6px 0 !important;
	color: #4a4a46 !important;
	font-size: 14px !important;
}
.hec-mega-menu__link:hover {
	color: #215630 !important;
}
.hec-mega-menu__link--all {
	color: #1c1c1b !important;
	font-weight: 600 !important;
}

.hec-mega-menu__color-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 4px 20px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hec-mega-menu__color-link {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 0 !important;
	color: #4a4a46 !important;
	font-size: 14px !important;
}
.hec-mega-menu__color-link:hover {
	color: #215630 !important;
}
.hec-mega-menu__color-dot {
	flex: none !important;
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	background-size: cover !important;
}

.hec-mega-menu__brand-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 32px !important;
	margin-bottom: 16px !important;
}
.hec-mega-menu__brand-col {
	flex: 1 1 200px !important;
}
.hec-mega-menu__brand {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 7px 0 !important;
	color: #1c1c1b !important;
	font-size: 14px !important;
}
.hec-mega-menu__brand:hover {
	color: #215630 !important;
}
.hec-mega-menu__brand-icon {
	display: flex !important;
	flex: none !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	overflow: hidden !important;
	color: #6b6b66 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	background: #f0ece1 !important;
	border-radius: 6px !important;
}
.hec-mega-menu__brand-icon img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
}
.hec-mega-menu__view-all {
	display: inline-block !important;
	color: #215630 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}
.hec-mega-menu__view-all:hover {
	text-decoration: underline !important;
}

@media (max-width: 900px) {
	.hec-mega-menu__dropdown {
		width: 92vw !important;
	}
	.hec-mega-menu__rail {
		flex-basis: 170px !important;
	}
}

@media (max-width: 781px) {
	.hec-mega-menu {
		display: flex !important;
		width: 100% !important;
	}

	.hec-mega-menu__tabs {
		width: 100% !important;
		gap: 0 !important;
	}
	.hec-mega-menu__tab {
		flex: 1 1 0 !important;
		justify-content: center !important;
		padding: 14px 10px !important;
	}

	.hec-mega-menu__dropdown {
		position: static !important;
		flex-direction: column !important;
		width: 100% !important;
		max-height: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
	.hec-mega-menu__dropdown--brands {
		padding: 16px 20px !important;
	}
	.hec-mega-menu__rail {
		flex-basis: auto !important;
		border-right: none !important;
		border-bottom: 1px solid #e6e9e6 !important;
	}
	.hec-mega-menu__rail-link {
		padding: 13px 20px !important;
	}
	.hec-mega-menu__panels {
		padding: 16px 20px !important;
	}
	.hec-mega-menu__panel {
		flex-direction: column !important;
		gap: 20px !important;
	}
}

@media (max-width: 480px) {
	.hec-mega-menu__color-list {
		grid-template-columns: 1fr !important;
	}
	.hec-mega-menu__brand-grid {
		flex-direction: column !important;
		gap: 0 !important;
	}
	.hec-mega-menu__color-dot {
		width: 11px !important;
		height: 11px !important;
	}
}