.mmb-menu-wrap,
.mmb-menu-wrap * {
	box-sizing: border-box;
	/* رنگ فلاش پیش‌فرض مرورگر هنگام لمس (که در موبایل معمولاً صورتی/آبی دیده می‌شود) کاملاً غیرفعال می‌شود.
	   رنگ واقعی حالت لمس/باز شدن از تنظیمات المنتور (رنگ متن هاور) کنترل می‌شود. */
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}
.mmb-menu-wrap {
	position: relative;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
}
.mmb-menu-wrap .mmb-mobile-toggle {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	-webkit-appearance: none;
	appearance: none;
}
.mmb-width-custom {
	/* عرض این پنل کاملاً با استایل inline (اندازه دلخواهی که در Appearance > Menus وارد کرده‌اید) کنترل می‌شود */
}
.mmb-menu-wrap .mmb-menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
/* عمداً به‌صورت یک کلاس تکی (نه ترکیبی) نوشته شده: اگر این مقدار به شکل
   ".mmb-menu-wrap .mmb-menu" (دو کلاس) می‌بود، اختصاصیت آن دقیقاً برابر با
   سلکتور تولیدشده توسط المنتور برای «فاصله بین آیتم‌ها» می‌شد و بسته به ترتیب
   بارگذاری فایل‌های CSS، گاهی مقدار المنتور اعمال می‌شد و گاهی نه. با تک‌کلاس
   کردنش، مقدار المنتور همیشه و بدون استثنا برنده است. */
.mmb-menu {
	gap: 6px;
}
.mmb-top-item {
	position: relative;
}
.mmb-top-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 12px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
}
.mmb-caret {
	width: 7px;
	height: 7px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	flex: 0 0 auto;
}

/* Mega panel */
.mmb-mega-panel {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 999;
	display: none;
	padding: 28px;
	border-radius: 10px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
	border: 1px solid rgba(0, 0, 0, 0.06);
}
.mmb-width-full {
	inset-inline-start: 0;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
}
.mmb-width-container {
	min-width: 600px;
	max-width: 1100px;
}
/* این قانون «باز شدن با هاور» فقط مخصوص دسکتاپ است (min-width: 992px).
   قبلاً بدون این محدودیت نوشته شده بود؛ چون اختصاصیت‌اش از قانون
   display:none داخل مدیاکوئری موبایل بالاتر بود، در برخی مرورگرهای موبایل
   با همان اولین لمس (که مرورگر آن را hover موقت حساب می‌کند) پنل یک لحظه
   با استایل نسخه دسکتاپ (و رنگ هاور دسکتاپ) فلاش می‌زد. حالا کاملاً از موبایل جدا شده. */
@media (min-width: 992px) {
	.mmb-top-item.mmb-has-mega:hover > .mmb-mega-panel,
	.mmb-top-item.mmb-has-mega:focus-within > .mmb-mega-panel {
		display: block;
	}
}
.mmb-mega-columns {
	display: flex;
	align-items: flex-start;
	gap: var(--mmb-panel-gap, 30px);
}
.mmb-column {
	flex: 1 1 0;
	min-width: 150px;
}
.mmb-column-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin: 0 0 14px;
}
.mmb-column-title a {
	text-decoration: none;
	color: inherit;
}
.mmb-column-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mmb-column-list li {
	margin: 0 0 9px;
}
.mmb-column-list a {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: #444;
	font-size: 13px;
	transition: opacity 0.15s;
}
.mmb-column-list a:hover {
	opacity: 0.65;
}
.mmb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.mmb-badge {
	font-size: 10px;
	background: #e02b20;
	color: #fff;
	padding: 1px 6px;
	border-radius: 10px;
	margin-inline-start: 4px;
}
.mmb-item-thumb {
	width: 22px;
	height: 22px;
	object-fit: cover;
	border-radius: 4px;
	flex: 0 0 auto;
}
.mmb-banner {
	flex: 0 0 200px;
}
.mmb-banner img {
	width: 100%;
	border-radius: 8px;
	display: block;
}
.mmb-banner-text {
	display: block;
	font-size: 12px;
	margin-top: 8px;
	color: #666;
}

/* Simple dropdown (non-mega items) */
.mmb-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	min-width: 200px;
	background: #fff;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	display: none;
	z-index: 999;
}
/* همین موضوع برای دراپ‌داون ساده هم صدق می‌کند؛ فقط دسکتاپ. */
@media (min-width: 992px) {
	.mmb-top-item.mmb-has-dropdown:hover > .mmb-dropdown,
	.mmb-top-item.mmb-has-dropdown:focus-within > .mmb-dropdown {
		display: block;
	}
}
.mmb-dropdown a {
	display: block;
	padding: 9px 18px;
	text-decoration: none;
	color: #333;
}
.mmb-dropdown a:hover {
	background: #f7f7f7;
}

.mmb-mobile-toggle,
.mmb-drawer-overlay,
.mmb-drawer-close {
	display: none !important;
}
.mmb-menu-panel {
	display: contents; /* روی دسکتاپ کاملاً از چیدمان صفحه حذف می‌شود و هیچ تأثیری ندارد */
}

@media (max-width: 991px) {
	.mmb-menu-panel {
		display: block;
	}
	.mmb-menu-wrap .mmb-mobile-toggle {
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		background: transparent !important; /* جلوگیری از leak رنگ پیش‌فرض قالب/کیت روی تگ button */
		border: 0;
		cursor: pointer;
		padding: 10px;
		z-index: 10001;
		position: relative;
	}
	.mmb-mobile-toggle span {
		width: 22px;
		height: 2px;
		background: #333;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	.mmb-menu-wrap.mmb-open .mmb-mobile-toggle span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.mmb-menu-wrap.mmb-open .mmb-mobile-toggle span:nth-child(2) {
		opacity: 0;
	}
	.mmb-menu-wrap.mmb-open .mmb-mobile-toggle span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.mmb-mega-panel,
	.mmb-dropdown {
		position: static;
		display: none;
		box-shadow: none;
		border: 0;
		width: auto;
		margin: 0;
	}
	.mmb-top-item.mmb-open > .mmb-mega-panel,
	.mmb-top-item.mmb-open > .mmb-dropdown {
		display: block;
	}
	.mmb-mega-columns {
		flex-direction: column;
		gap: 18px !important;
	}
	.mmb-width-full,
	.mmb-width-container {
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
	}
	.mmb-banner {
		flex: none;
	}

	/* ===== حالت کرکره‌ای (Accordion) - پیش‌فرض ===== */
	.mmb-mobile-accordion .mmb-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.mmb-mobile-accordion.mmb-open .mmb-menu {
		display: flex;
	}

	/* ===== حالت کشویی (Drawer / Off-canvas) ===== */
	.mmb-mobile-drawer .mmb-menu-panel {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 300px;
		max-width: 85vw;
		background: #ffffff;
		z-index: 10000;
		overflow-y: auto;
		padding: 60px 20px 30px;
		transition: transform 0.32s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
	}
	.mmb-mobile-drawer[data-mmb-drawer-side="right"] .mmb-menu-panel {
		right: 0;
		transform: translateX(100%);
	}
	.mmb-mobile-drawer[data-mmb-drawer-side="left"] .mmb-menu-panel {
		left: 0;
		transform: translateX(-100%);
	}
	.mmb-mobile-drawer.mmb-open .mmb-menu-panel {
		transform: translateX(0);
	}
	.mmb-mobile-drawer .mmb-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.mmb-mobile-drawer .mmb-drawer-close {
		display: block !important;
		position: absolute;
		top: 14px;
		inset-inline-end: 14px;
		width: 34px;
		height: 34px;
		border: 0;
		border-radius: 50%;
		background: #f3f3f3;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}
	.mmb-mobile-drawer .mmb-drawer-overlay {
		display: block !important;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
	}
	.mmb-mobile-drawer.mmb-open .mmb-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}
	.mmb-mobile-drawer .mmb-top-link {
		padding: 12px 4px;
	}
}

body.mmb-drawer-lock {
	overflow: hidden;
}