/* Change the look here. */
:root {
	--imm-width: 860px;       /* width of the two main columns */
	--imm-flyout: 320px;      /* maximum width of a third-level list */
	--imm-bg: #18212b;
	--imm-text: #ffffff;
	--imm-accent: #f7941d;
	--imm-active-text: #18212b;
	--imm-line: rgba(255, 255, 255, .18);
}

/* Mobile: your theme's normal mobile menu stays in charge. */
.imm-img { display: none; }

/* Must match the width at which your theme switches to its mobile menu.
   If you change 992px, change it in mega-menu.js too. */
@media (min-width: 992px) {
	.imm-mega { position: relative !important; }

	/* The panel (Products > ...) */
	.imm-mega > .sub-menu {
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--imm-rows, 8), auto);
		align-content: start;
		overflow: visible !important;
		column-gap: 24px;
		position: absolute !important;
		top: 100% !important;
		right: auto !important;
		box-sizing: border-box;
		width: min(var(--imm-width), calc(100vw - 32px - var(--imm-flyout))) !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 16px !important;
		list-style: none;
		background: var(--imm-bg) !important;
		border: 1px solid var(--imm-accent);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
		transform: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none;
		transition: opacity .15s ease, visibility .15s !important;
		z-index: 9999;
	}

	.imm-mega.imm-open > .sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
		transition: opacity .15s ease !important; /* Reachable by keyboard straight away. */
	}

	/* Short screens only (set by mega-menu.js). */
	.imm-mega > .sub-menu.imm-scroll {
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	/* Left and middle columns */
	.imm-mega .imm-l1 {
		position: static !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid var(--imm-line);
	}

	.imm-mega .imm-l1 > a {
		display: flex !important;
		align-items: center;
		gap: 16px;
		min-height: 60px;
		width: 100% !important;
		height: 100%;
		box-sizing: border-box;
		padding: 0px 0px !important;
		color: var(--imm-text) !important;
		background: transparent !important;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.35;
		text-transform: capitalize;
		text-decoration: none;
		white-space: normal;
	}

	.imm-mega .imm-l1.imm-active > a,
	.imm-mega .imm-l1 > a:focus-visible {
		color: var(--imm-active-text) !important;
		background: var(--imm-accent) !important;
	}

	/* Remove arrows added by the theme; the plugin draws its own. */
	.imm-mega .imm-l1 > a::before,
	.imm-mega .imm-l2 > a::before,
	.imm-mega .imm-l2 > a::after {
		content: none !important;
		display: none !important;
	}

	/* Arrow on items that have a third-level list */
	.imm-mega .imm-l1.menu-item-has-children > a::after {
		content: "" !important;
		flex: none;
		display: block;
		width: 7px;
		height: 7px;
		margin: 0 0 0 4px;
		border: solid currentColor;
		border-width: 2px 2px 0 0;
		background: none;
		transform: rotate(45deg);
	}

	/* Third-level list: mega-menu.js places it right beside the hovered item. */
	.imm-mega .imm-l1 > .sub-menu {
		display: none !important;
		position: absolute !important;
		top: 0;
		right: auto !important;
		bottom: auto !important;
		box-sizing: border-box;
		width: max-content !important;
		min-width: 200px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-y: auto;
		list-style: none;
		background: var(--imm-bg) !important;
		border: 1px solid var(--imm-line) !important;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .4) !important;
		z-index: 2;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		border: 1px solid #ff9800 !important;
	}

	.imm-mega .imm-l1.imm-active > .sub-menu { display: block !important; }

	.imm-mega .imm-l2 {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid var(--imm-line);
	}

	.imm-mega .imm-l2:last-child { border-bottom: 0; }

	.imm-mega .imm-l2 > a {
		display: flex !important;
		width: 100% !important;
		max-width: none !important;
		align-items: center;
		gap: 14px;
		min-height: 58px;
		box-sizing: border-box;
		padding: 2px 10px 2px 10px !important;
		color: var(--imm-text) !important;
		background: transparent !important;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		text-transform: capitalize;
		text-decoration: none;
		white-space: normal;
	}

	.imm-mega .imm-l2 > a:hover,
	.imm-mega .imm-l2 > a:focus-visible,
	.imm-mega .imm-l2.current-menu-item > a { color: var(--imm-accent) !important; }

	/* Images */
	.imm-mega .imm-img {
		display: block;
		flex: none;
		width: 60px;
		height: 60px;
		max-width: none;
		margin: 0;
		object-fit: contain;
		padding: 10px;
	}

	.imm-mega .imm-l2 .imm-img {
		width: 50px;
		height: 50px;
		padding: 5px;
	}

	.imm-text { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.imm-mega > .sub-menu,
	.imm-mega.imm-open > .sub-menu { transition: none !important; }
}