/**
 * HDM Mega Menu — desktop panel styles.
 *
 * All selectors prefixed with .hdm-mm- to avoid clashing with the legacy
 * tab-main-menu-custom / hdm-menu-product-card styles in functions.php.
 *
 * Hover behaviour is CSS-driven via [data-hdm-mm-open="true"] on the
 * trigger li; mega-menu.js only toggles that attribute. No layout
 * thrashing, no JS-driven transitions.
 */

/* ─── Tokens ──────────────────────────────────────────────────────── */
:root {
	--hdm-mm-green:        #2cba0b;
	--hdm-mm-green-soft:   #e8f5e9;
	--hdm-mm-green-deep:   #1f8e08;
	--hdm-mm-blue:         #1d4ed8;
	--hdm-mm-navy:         #1a2332;
	--hdm-mm-text:         #1f2937;
	--hdm-mm-muted:        #6b7280;
	--hdm-mm-line:         #e5e7eb;
	--hdm-mm-line-soft:    #f3f4f6;
	--hdm-mm-bg:           #ffffff;
	--hdm-mm-bg-soft:      #f9fafb;
	--hdm-mm-shadow:       0 16px 40px rgba(15, 23, 42, .12);
	--hdm-mm-radius:       12px;
	--hdm-mm-radius-sm:    8px;
	--hdm-mm-pill-bg:      #ecfdf5;
	--hdm-mm-pill-text:    #047857;
	--hdm-mm-star:         #f59e0b;
	--hdm-mm-strike:       #9ca3af;
}

/* ─── Suppress the legacy panel for our 3 triggers ────────────────── */
@media (min-width: 993px) {
	.primary-navigation li.hdm-mm-trigger > .sub-menu-wrapper,
	.main-navigation ul li.hdm-mm-trigger > .sub-menu-wrapper {
		display: none !important;
	}
}

/* ─── Trigger li (carries the panel) ─────────────────────────────── */
@media (min-width: 993px) {
	.main-navigation .hdm-mm-trigger {
		position: static; /* panel is positioned against the nav, not the li */
	}

	/* Trigger link — relative for the underline pseudo-element. Chevron is
	 * supplied by Shoptimizer's existing CSS via `li.menu-item-has-children >
	 * a:after`; we don't add our own to avoid stacking two chevrons. */
	.main-navigation .hdm-mm-trigger > .hdm-mm-trigger-link {
		position: relative;
		padding-right: 4px;
	}

	/* Underline under active trigger — anchored to the label only, not the
	 * link itself, so the underline stops before Shoptimizer's `:after`
	 * chevron and doesn't visually crash through it. */
	.main-navigation .hdm-mm-trigger .hdm-mm-trigger-label {
		position: relative;
	}

	.main-navigation .hdm-mm-trigger .hdm-mm-trigger-label::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 3px;
		background: var(--hdm-mm-green);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform .18s ease;
		pointer-events: none;
	}

	.main-navigation .hdm-mm-trigger[data-hdm-mm-open="true"] .hdm-mm-trigger-label::after {
		transform: scaleX(1);
	}
}

/* ─── Panel ───────────────────────────────────────────────────────── */
.hdm-mm-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 999;
	background: var(--hdm-mm-bg);
	border-radius: var(--hdm-mm-radius);
	box-shadow: var(--hdm-mm-shadow);
	overflow: hidden;
	font-family: inherit;
	color: var(--hdm-mm-text);
	max-width: 1320px;
	margin: 8px auto 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	pointer-events: none;
}

.main-navigation .hdm-mm-trigger[data-hdm-mm-open="true"] .hdm-mm-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}

.hdm-mm-panel-inner {
	display: grid;
	grid-template-columns: 320px 1fr;
	grid-template-rows: 1fr auto;
}

/* ─── Sidebar ─────────────────────────────────────────────────────── */
.hdm-mm-sidebar {
	grid-column: 1;
	grid-row: 1;
	background: var(--hdm-mm-bg);
	border-right: 1px solid var(--hdm-mm-line);
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
}

.hdm-mm-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.hdm-mm-sidebar-item + .hdm-mm-sidebar-item {
	border-top: 1px solid var(--hdm-mm-line-soft);
}

.hdm-mm-sidebar-link {
	display: grid;
	grid-template-columns: 28px 1fr 16px;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--hdm-mm-radius-sm);
	color: var(--hdm-mm-text);
	text-decoration: none;
	transition: background-color .14s ease, color .14s ease;
}

.hdm-mm-sidebar-link:hover,
.hdm-mm-sidebar-link:focus-visible {
	background: var(--hdm-mm-green-soft);
	color: var(--hdm-mm-green-deep);
	outline: none;
}

.hdm-mm-sidebar-item.is-active .hdm-mm-sidebar-link {
	background: var(--hdm-mm-green-soft);
	color: var(--hdm-mm-green-deep);
}

.hdm-mm-sidebar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hdm-mm-green-deep);
}

.hdm-mm-sidebar-icon svg {
	width: 22px;
	height: 22px;
}

.hdm-mm-sidebar-label {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hdm-mm-sidebar-chev {
	display: inline-flex;
	align-items: center;
	color: var(--hdm-mm-muted);
	transition: transform .14s ease, color .14s ease;
}

.hdm-mm-sidebar-chev svg {
	width: 14px;
	height: 14px;
}

.hdm-mm-sidebar-link:hover .hdm-mm-sidebar-chev,
.hdm-mm-sidebar-item.is-active .hdm-mm-sidebar-chev {
	color: var(--hdm-mm-green-deep);
	transform: translateX(2px);
}

/* Expert Advice card — pinned to bottom of sidebar */
.hdm-mm-expert-card {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 10px;
	margin-top: 14px;
	padding: 14px;
	border-radius: var(--hdm-mm-radius-sm);
	background: var(--hdm-mm-green-soft);
	color: var(--hdm-mm-text);
}

.hdm-mm-expert-icon {
	color: var(--hdm-mm-green-deep);
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 2px;
}

.hdm-mm-expert-icon svg {
	width: 26px;
	height: 26px;
}

.hdm-mm-expert-title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hdm-mm-text);
	line-height: 1.25;
}

.hdm-mm-expert-lead {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--hdm-mm-muted);
	line-height: 1.35;
}

.hdm-mm-expert-phone {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--hdm-mm-green-deep);
	text-decoration: none;
}

.hdm-mm-expert-phone:hover {
	text-decoration: underline;
}

/* ─── Content area (right side, holds tabbed panes) ──────────────── */
.hdm-mm-content {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Each pane fills the same area; only .is-active is shown.
 * Pane is a 2-col grid: feature card on left, products container on right.
 * Products container is a flex row that adapts to product count (1, 2, or 3+). */
.hdm-mm-pane {
	display: none;
	padding: 14px 14px 12px;
	flex: 1;
}

.hdm-mm-pane.is-active {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 14px;
}

/* ─── Featured card (lifestyle image + body) ─────────────────────── */
.hdm-mm-feature {
	display: flex;
	flex-direction: column;
	background: var(--hdm-mm-bg-soft);
	border-radius: var(--hdm-mm-radius);
	overflow: hidden;
	min-width: 0;
}

.hdm-mm-feature-image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.hdm-mm-feature-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Logo mode (Top Brands, Lifts & Trailers) — show full logo, no crop */
.hdm-mm-feature.is-logo .hdm-mm-feature-image {
	background: #ffffff;
	aspect-ratio: 5 / 3;
}

.hdm-mm-feature.is-logo .hdm-mm-feature-img {
	object-fit: contain;
	padding: 18px 24px;
}

/* Badge sits ABOVE the title in the body — never covers anything in the
 * lifestyle photo. Inline pill style with brand-blue accent. */
.hdm-mm-feature-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 4px 10px;
	background: #eef2ff;
	color: var(--hdm-mm-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	border-radius: 6px;
}

.hdm-mm-feature-badge-icon svg {
	width: 14px;
	height: 14px;
}

.hdm-mm-feature-body {
	padding: 12px 14px 14px;
}

.hdm-mm-feature-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--hdm-mm-navy);
}

.hdm-mm-feature-desc {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--hdm-mm-muted);
}

.hdm-mm-feature-cta {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--hdm-mm-blue);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .14s ease;
}

.hdm-mm-feature-cta:hover,
.hdm-mm-feature-cta:focus-visible {
	background: #1e40af;
	color: #ffffff;
}

.hdm-mm-feature-cta svg {
	width: 16px;
	height: 16px;
}

/* ─── Product cards ──────────────────────────────────────────────── */
/* Each card is a fixed third of the products container regardless of how
 * many cards exist. With 1 product → 1 card on left, blank space right.
 * With 2 → 2 cards on left, blank space right. With 3 → fills the row.
 * (User requested: card width should not change based on count.)
 * --hdm-mm-product-gap controls the gap; value mirrored in the calc below. */
.hdm-mm-products {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	min-width: 0;
	--hdm-mm-product-gap: 14px;
}

.hdm-mm-product {
	flex: 0 0 calc((100% - (var(--hdm-mm-product-gap) * 2)) / 3);
	max-width: calc((100% - (var(--hdm-mm-product-gap) * 2)) / 3);
	display: flex;
	flex-direction: column;
	background: var(--hdm-mm-bg);
	border: 1px solid var(--hdm-mm-line);
	border-radius: var(--hdm-mm-radius);
	overflow: hidden;
	min-width: 0;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.hdm-mm-product:hover {
	border-color: var(--hdm-mm-line);
	box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

.hdm-mm-product-link {
	display: block;
	padding: 12px 12px 0;
	color: inherit;
	text-decoration: none;
	flex: 1;
}

.hdm-mm-product-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	margin-bottom: 8px;
}

.hdm-mm-product-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hdm-mm-product-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hdm-mm-navy);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hdm-mm-product-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--hdm-mm-muted);
}

.hdm-mm-stars {
	display: inline-flex;
	color: var(--hdm-mm-star);
}

.hdm-mm-stars svg {
	width: 14px;
	height: 14px;
}

.hdm-mm-product-rating-count {
	color: var(--hdm-mm-muted);
}

.hdm-mm-product-price {
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--hdm-mm-navy);
}

.hdm-mm-product-price del {
	color: var(--hdm-mm-strike);
	font-weight: 500;
	margin-right: 6px;
}

.hdm-mm-product-price ins,
.hdm-mm-product-price .amount {
	font-weight: 800;
	text-decoration: none;
}

.hdm-mm-product-cta {
	display: block;
	margin: 0 12px 12px;
	padding: 9px;
	background: var(--hdm-mm-green);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color .14s ease;
}

.hdm-mm-product-cta:hover,
.hdm-mm-product-cta:focus-visible {
	background: var(--hdm-mm-green-deep);
	color: #ffffff;
}

/* ─── Trust strip ────────────────────────────────────────────────── */
.hdm-mm-trust {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	padding: 10px 14px;
	background: var(--hdm-mm-bg-soft);
	border-top: 1px solid var(--hdm-mm-line);
}

.hdm-mm-trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.hdm-mm-trust-icon {
	display: inline-flex;
	color: var(--hdm-mm-green-deep);
}

.hdm-mm-trust-icon svg {
	width: 22px;
	height: 22px;
}

/* Trust subtitle hides cleanly when empty (e.g. Free Shipping) */
.hdm-mm-trust-sub:empty {
	display: none;
}

.hdm-mm-trust-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hdm-mm-trust-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--hdm-mm-text);
	line-height: 1.2;
}

.hdm-mm-trust-sub {
	font-size: 12px;
	color: var(--hdm-mm-muted);
	line-height: 1.2;
}

/* ─── Non-mega dropdowns (Help & Info etc.) ──────────────────────── */
/* Force single-line items + auto width so labels like "Why Buy Online" and
 * "Returns & Warranty" don't wrap into 2 lines. Targets non-mega dropdowns
 * only — our mega menu items use .hdm-mm-trigger and have their own panel. */
@media (min-width: 993px) {
	.main-navigation li.menu-item-has-children:not(.hdm-mm-trigger):not(.tab-main-menu-custom) > .sub-menu-wrapper > .container > ul.sub-menu {
		min-width: max-content;
	}
	.main-navigation li.menu-item-has-children:not(.hdm-mm-trigger):not(.tab-main-menu-custom) > .sub-menu-wrapper > .container > ul.sub-menu > li > a {
		white-space: nowrap;
	}
}

/* ─── Mobile guard ───────────────────────────────────────────────── */
@media (max-width: 992px) {
	.hdm-mm-panel {
		display: none;
	}
}