/**
 * Product nav megamenu — site-wide (header Product hover panel).
 * Kept separate from qng-wp-theme-product-news.css so PRM/news pages can dequeue
 * page layout CSS without losing the desktop Product submenu size/effects.
 */

@media screen and (min-width: 992px) {
	.main-menu li.qng-product-cat-dropdown {
		position: relative;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-wc-cats-submenu {
		width: max-content !important;
		min-width: 240px;
		max-width: min(480px, 92vw);
		max-height: min(70vh, 520px);
		overflow: visible !important;
		left: 0 !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 6px 0 !important;
		background: #fff !important;
		box-shadow: 0 10px 30px rgba(17, 22, 38, 0.12) !important;
		-webkit-transform: none !important;
		transform: none !important;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu {
		display: block;
		list-style: none;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col {
		float: none;
		width: 100%;
		max-width: none;
		padding: 0;
		margin: 0;
		border: none;
		border-bottom: 1px solid #f0f2f5;
		box-sizing: border-box;
		position: relative;
		overflow: visible;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col:last-child {
		border-bottom: none;
	}

	.main-menu li.qng-product-cat-dropdown a.qng-megamenu-cat-thumb {
		display: none !important;
	}

	.main-menu li.qng-product-cat-dropdown h2 {
		margin: 0;
		padding: 0;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
	}

	.main-menu li.qng-product-cat-dropdown h2 .title {
		display: block;
		margin: 0;
		padding: 11px 16px;
		font-size: 14px;
		line-height: 1.35;
		color: #333;
		border: none;
		text-transform: none;
		font-family: inherit;
		white-space: nowrap;
	}

	.main-menu li.qng-product-cat-dropdown h2 .title:hover {
		color: var(--main-color, #009d50) !important;
		background: var(--qng-surface-hover, #eef6ff) !important;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col > .menu-toggle {
		display: none !important;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col > ul.qng-megamenu-sub {
		display: block !important;
		height: auto !important;
		position: absolute !important;
		top: 0 !important;
		left: 100% !important;
		right: auto !important;
		bottom: auto !important;
		min-width: 200px;
		max-width: min(420px, 92vw);
		margin: 0 0 0 2px !important;
		padding: 6px 0 !important;
		background: #fff !important;
		border: 1px solid #dce1e8 !important;
		border-radius: 6px;
		box-shadow: 0 10px 28px rgba(17, 22, 38, 0.14) !important;
		z-index: 210;
		visibility: hidden !important;
		opacity: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
		clip: auto !important;
		pointer-events: none;
		transition: opacity 0.18s ease, visibility 0.18s ease;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col.qng-megamenu-col--has-children > h2 .title {
		padding-right: 28px;
		position: relative;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col.qng-megamenu-col--has-children > h2 .title::after {
		content: "\f105";
		font-family: "FontAwesome";
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: #999;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col:hover > ul.qng-megamenu-sub,
	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col.is-sub-open > ul.qng-megamenu-sub,
	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col:focus-within > ul.qng-megamenu-sub {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col > ul.qng-megamenu-sub > li > a {
		padding: 9px 14px !important;
		white-space: nowrap;
		color: #555 !important;
		background: transparent !important;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col > ul.qng-megamenu-sub > li > a:hover {
		background: var(--qng-surface-hover, #eef6ff) !important;
		color: var(--main-color, #009d50) !important;
	}
}

@media screen and (max-width: 991px) {
	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col > ul.qng-megamenu-sub {
		display: none;
		margin-top: 4px;
		padding-left: 12px !important;
	}

	.main-menu li.qng-product-cat-dropdown > .sub-menu.qng-product-cat-megamenu > li.qng-megamenu-col.is-sub-open > ul.qng-megamenu-sub {
		display: block;
	}
}