/* =============================================================================
 * Invictus Style — mobile menu, styled IDENTICALLY to the custom filters.
 *
 * Reuses the exact tokens + visual treatments from filters.css so the mobile
 * menu drawer looks like the filter drawer: white surface, red accent-bar
 * heading, rotate-on-hover close, .inv-check-style rows, .inv-group-style
 * collapsible parents.
 *
 * mobile-menu.js clones the desktop nav into this panel (Woodmart's own
 * hamburger has no menu attached).
 * ========================================================================= */

.inv-mmenu-panel {
	/* Same token bridge as .inv-filters in filters.css */
	--inv-primary:  var(--wd-primary-color, #ff0000);
	--inv-accent:   var(--wd-alternative-color, #fbbc34);
	--inv-title:    var(--wd-title-color, #242424);
	--inv-text:     var(--wd-text-color, #767676);
	--inv-bg:       var(--wd-main-bgcolor, #fff);
	--inv-surface:  var(--color-gray-100, #f7f7f7);
	--inv-surface-2:var(--bgcolor-gray-200, #f1f1f1);
	--inv-border:   var(--wd-form-brd-color, rgba(0,0,0,0.1));
	--inv-border-2: var(--brdcolor-gray-500, rgba(0,0,0,0.2));
	--inv-radius:   var(--wd-brd-radius, 0px);
	--inv-radius-form: var(--wd-form-brd-radius, 0px);
	--inv-title-font: var(--wd-title-font, "Poppins", Arial, Helvetica, sans-serif);
	--inv-text-font:  var(--wd-text-font, "Lato", Arial, Helvetica, sans-serif);
	--inv-ease:     cubic-bezier(.2,.7,.2,1);
	--inv-shadow:   0 24px 60px -12px rgba(0,0,0,.22), 0 8px 20px -8px rgba(0,0,0,.12);
	--inv-primary-soft: color-mix(in srgb, var(--inv-primary) 10%, transparent);
}

/* --- Scrim: identical to .inv-drawer__scrim --- */
.inv-mmenu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--inv-ease), visibility .2s var(--inv-ease);
	z-index: 99998;
}

/* --- Panel: slide-in from the LEFT, mirroring the filter drawer (which
 *     slides in from the right). Same width/shadow/background treatment. --- */
.inv-mmenu-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--wd-side-hidden-w, 380px);
	max-width: 92vw;
	background: var(--inv-bg);
	color: var(--inv-title);
	font-family: var(--inv-text-font);
	box-shadow: var(--inv-shadow);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .38s var(--inv-ease);
	will-change: transform;
	z-index: 99999;
	overflow: hidden;
}

body.inv-mmenu-active .inv-mmenu-overlay {
	opacity: 1;
	visibility: visible;
}
body.inv-mmenu-active .inv-mmenu-panel {
	transform: translateX(0);
}
/* Body lock — identical to body.inv-drawer-open */
body.inv-mmenu-active {
	overflow: hidden;
	touch-action: none;
}

/* --- Header: identical to .inv-drawer__head + h2 (red accent bar) --- */
.inv-mmenu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--inv-border);
	flex: 0 0 auto;
	background: linear-gradient(180deg, var(--inv-bg) 0%, var(--inv-surface) 100%);
}
.inv-mmenu-title {
	margin: 0;
	font-family: var(--inv-title-font);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--inv-title);
	display: flex;
	align-items: center;
	gap: 10px;
}
.inv-mmenu-title::before {
	content: '';
	width: 4px;
	height: 20px;
	background: var(--inv-primary);
	border-radius: 2px;
}
/* Close button: identical to .inv-drawer__close (rotate-on-hover) */
.inv-mmenu-close {
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--inv-text);
	border-radius: var(--inv-radius);
	transition: color .15s, transform .2s var(--inv-ease), background .15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
}
.inv-mmenu-close:hover {
	color: var(--inv-primary);
	transform: rotate(90deg);
	background: var(--inv-surface);
}

/* --- Scrollable body: identical to .inv-drawer__body --- */
.inv-mmenu-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px 24px 20px;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--inv-border-2) transparent;
	list-style: none;
	margin: 0;
}
.inv-mmenu-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inv-mmenu-list::-webkit-scrollbar { width: 6px; }
.inv-mmenu-list::-webkit-scrollbar-track { background: transparent; }
.inv-mmenu-list::-webkit-scrollbar-thumb { background: var(--inv-border-2); border-radius: 3px; }
.inv-mmenu-list::-webkit-scrollbar-thumb:hover { background: var(--inv-primary); }

/* --- Top-level items: styled as .inv-group collapsible sections --- */
.inv-mmenu-list > li {
	border-bottom: 1px solid var(--inv-border);
	padding: 4px 0;
	position: relative;
}
.inv-mmenu-list > li:last-child { border-bottom: 0; }

/* --- Menu links: styled as .inv-check rows --- */
.inv-mmenu-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	margin: 0 -8px;
	cursor: pointer;
	border-radius: var(--inv-radius);
	color: var(--inv-title);
	text-decoration: none;
	font-family: var(--inv-text-font);
	font-size: 14px;
	transition: background .18s var(--inv-ease), color .12s, padding-left .15s var(--inv-ease);
	position: relative;
}
.inv-mmenu-list a:hover,
.inv-mmenu-list a:active {
	background: var(--inv-surface);
	color: var(--inv-primary);
}

/* Icons/badges Woodmart injects — keep inline & small (like filter labels). */
.inv-mmenu-list a img,
.inv-mmenu-list a svg {
	max-height: 18px;
	width: auto;
	vertical-align: middle;
}

/* --- Parent header row: uppercase like .inv-group__title --- */
.inv-mmenu-list > li.menu-item-has-children > a {
	font-family: var(--inv-title-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--inv-title);
	padding-right: 34px;
}
.inv-mmenu-list > li.menu-item-has-children > a:hover { color: var(--inv-primary); }

/* Chevron identical in spirit to .inv-group__chev (rotates on open). */
.inv-mmenu-list li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--inv-text);
	border-bottom: 2px solid var(--inv-text);
	transform: rotate(45deg);
	transition: transform .25s var(--inv-ease), border-color .15s;
	pointer-events: none;
}
.inv-mmenu-list li.menu-item-has-children > a:hover::after { border-color: var(--inv-primary); }
.inv-mmenu-list li.menu-item-has-children.inv-mmenu-open > a::after {
	transform: rotate(-135deg);
	margin-top: -2px;
	border-color: var(--inv-primary);
}

/* --- Submenus: collapse/expand like .inv-group__body.
 *     Neutralise all of Woodmart's desktop mega-menu positioning. --- */
.inv-mmenu-list .sub-menu,
.inv-mmenu-list ul.sub-menu,
.inv-mmenu-list .wd-dropdown-menu,
.inv-mmenu-list li > ul {
	display: none;
	overflow: hidden;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-shadow: none !important;
	border: 0 !important;
	background: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 0 6px !important;
	pointer-events: auto !important;
}
.inv-mmenu-list li.inv-mmenu-open > .sub-menu,
.inv-mmenu-list li.inv-mmenu-open > ul,
.inv-mmenu-list li.inv-mmenu-open > .wd-dropdown-menu {
	display: block;
}

/* Child rows: styled as nested .inv-check rows (indented, lighter). */
.inv-mmenu-list .sub-menu li,
.inv-mmenu-list li > ul li {
	border: 0;
	padding: 0;
}
.inv-mmenu-list .sub-menu a,
.inv-mmenu-list li > ul a {
	padding: 9px 8px 9px 24px;
	margin: 0 -8px;
	font-family: var(--inv-text-font);
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--inv-title);
}
.inv-mmenu-list .sub-menu a:hover,
.inv-mmenu-list li > ul a:hover {
	background: var(--inv-surface);
	color: var(--inv-primary);
}
/* Third level indents further. */
.inv-mmenu-list .sub-menu .sub-menu a,
.inv-mmenu-list li > ul li > ul a { padding-left: 40px; }

/* Flatten any Woodmart mega-menu inner layout into a plain stacked list. */
.inv-mmenu-list .wd-dropdown-menu * {
	position: static !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	transform: none !important;
}
.inv-mmenu-list .wd-dropdown-menu img { display: none; }

/* --- Reduced motion (mirrors filters.css) --- */
@media (prefers-reduced-motion: reduce) {
	.inv-mmenu-panel,
	.inv-mmenu-panel *,
	.inv-mmenu-panel *::before,
	.inv-mmenu-panel *::after,
	.inv-mmenu-overlay {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Never show this scaffolding on wide desktop. */
@media (min-width: 1025px) {
	.inv-mmenu-panel,
	.inv-mmenu-overlay {
		display: none !important;
	}
}