/**
 * هدرِ موبایل، کشوی منو، پوششِ جست‌وجو.
 *
 * همه‌چیز پشتِ یک مدیا-کوئری است. HTML روی دسکتاپ هم چاپ می‌شود (تا کش
 * یک نسخه بیشتر نگه ندارد) ولی هیچ‌کدام دیده نمی‌شوند.
 */

.nb-mh,
.nb-mh__scrim,
.nb-mh__drawer,
.nb-mh__search {
	display: none;
}

@media (max-width: 991px) {

	/*
	 * هدرِ المنتور روی موبایل کنار می‌رود.
	 *
	 * حذف نمی‌شود — فقط پنهان. طرحِ دسکتاپ دست‌نخورده می‌ماند و
	 * خاموش‌کردنِ این ماژول همه‌چیز را برمی‌گرداند.
	 */
	body.nb-has-mh .elementor-location-header {
		display: none;
	}

	/* ---------- نوارِ بالا ---------- */

	/*
	 * فرمش از هدرِ سایتی که مالک نشان داد گرفته شده: کارت به بالای صفحه
	 * چسبیده و فقط گوشه‌های *پایینش* گرد است — انگار از لبه‌ی بالا آویزان
	 * شده. کارتِ کاملاً گرد با فاصله از بالا، ارتفاع بیشتری می‌خورد و روی
	 * گوشی هر پیکسلِ عمودی ارزش دارد.
	 */
	.nb-mh {
		position: sticky;
		z-index: 850;
		top: 0;

		display: block;
		/* نفَسی زیرِ هدر. بدون این، عنوانِ صفحه و اولین بلوک درست به
		   لبه‌ی نوار می‌چسبند و همه‌چیز به بالا فشرده دیده می‌شود.
		   مقدارش از پنل می‌آید (تنظیمات ← هدر موبایل ← فاصله‌ی زیر هدر). */
		padding: 0 0 var( --nb-mh-gap, 5px );
		background: transparent;
	}

	/* از پنل: هدر بچسبد یا با صفحه بالا برود. */
	.nb-mh.is-static {
		position: relative;
	}

	.nb-mh__bar {
		display: flex;
		align-items: center;
		gap: 10px;

		margin: 0 var( --nb-mh-side, 8px );
		padding: var( --nb-mh-pad, 9px ) 10px;

		background: var( --nb-surface, #0d1424 );
		border-bottom: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );

		/* فقط پایین گرد، چون هدر به لبه‌ی بالای صفحه چسبیده. */
		border-radius: 0 0 var( --nb-mh-radius, 16px ) var( --nb-mh-radius, 16px );
	}

	/*
	 * حالت شیشه‌ای.
	 *
	 * مثل کشو، مشروط به پشتیبانیِ مرورگر: بدونِ تاری، پس‌زمینه‌ی
	 * نیمه‌شفاف یعنی متنِ صفحه از پشتِ هدر خوانده می‌شود و نوار ناخوانا
	 * می‌شود.
	 */
	@supports ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) {

		.nb-mh.is-glass .nb-mh__bar {
			background: color-mix( in srgb, var( --nb-surface, #0d1424 ) var( --nb-mh-fill, 68% ), transparent );
			backdrop-filter: blur( var( --nb-mh-blur, 18px ) ) saturate( 150% );
			-webkit-backdrop-filter: blur( var( --nb-mh-blur, 18px ) ) saturate( 150% );
		}
	}

	.nb-mh__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex: 0 0 auto;

		/* ۴۴ پیکسل کمینه‌ی هدفِ لمسی است؛ کمتر از این انگشت خطا می‌زند. */
		width: 42px;
		height: 42px;
		padding: 0;

		background: var( --nb-surface-2, rgba( 255, 255, 255, .04 ) );
		border: 0;
		border-radius: var( --nb-radius, 12px );
		color: var( --nb-text, #e7ebf3 );

		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background .15s ease;
	}

	.nb-mh__btn:hover,
	.nb-mh__btn:focus-visible {
		background: var( --nb-surface-3, rgba( 255, 255, 255, .08 ) );
	}

	.nb-mh__btn svg {
		width: 22px;
		height: 22px;
	}

	/*
	 * برند کنارِ دکمه‌ی منو، نه وسطِ مطلق.
	 *
	 * وسط‌چین وقتی درست است که دو طرف هم‌وزن باشند. اینجا سمتِ راست یک
	 * دکمه است و سمتِ چپ دو تا، پس مرکزِ ریاضی به چشم کج می‌آید و لوگو
	 * از دکمه‌ی منو دور می‌افتد. چسبیده به راست، ردیف مرتب‌تر خوانده
	 * می‌شود.
	 */
	.nb-mh__brand {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 0;

		/* کمی نفس بین دکمه‌ی منو و لوگو. */
		margin-inline-start: auto;
		padding-inline-end: 2px;

		color: var( --nb-text, #e7ebf3 );
		text-align: right;
		text-decoration: none;
	}

	.nb-mh__logo {
		align-self: flex-start;
		max-width: 100%;
		max-height: 34px;
		width: auto;
		height: auto;
	}

	.nb-mh__name {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.nb-mh__tagline {
		font-size: 10px;
		font-weight: 400;
		line-height: 1.2;
		color: var( --nb-text-dim, #8b93a7 );
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.nb-mh__tools {
		display: flex;
		flex: 0 0 auto;
		gap: 8px;
	}

	.nb-mh__badge {
		position: absolute;
		top: 2px;
		left: 2px;

		min-width: 16px;
		height: 16px;
		padding: 0 4px;

		border-radius: 8px;
		background: var( --nb-accent, #7c3aed );
		color: #fff;

		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	.nb-mh__badge.is-empty {
		display: none;
	}

	/* ---------- پرده‌ی پشت ---------- */

	.nb-mh__scrim {
		position: fixed;
		z-index: 940;
		inset: 0;

		display: block;
		background: rgba( 0, 0, 0, .55 );

		opacity: 0;
		transition: opacity .2s ease;
	}

	.nb-mh__scrim.is-open {
		opacity: 1;
	}

	.nb-mh__scrim[hidden] {
		display: none;
	}

	/* ---------- کشوی منو ---------- */

	.nb-mh__drawer {
		position: fixed;
		z-index: 950;
		top: 0;
		bottom: 0;

		/* راست‌به‌چپ: کشو از سمت راست می‌آید، همان‌جا که دکمه‌اش هست. */
		right: 0;

		display: flex;
		flex-direction: column;

		/* درصدِ پنل، با سقفِ ۳۶۰ تا روی گوشیِ بزرگ بی‌قواره نشود. */
		width: min( var( --nb-mh-width, 84% ), 360px );
		padding: 12px;

		background: var( --nb-surface, #0d1424 );
		border-left: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );

		overflow-y: auto;
		overscroll-behavior: contain;

		transform: translateX( 100% );
		transition: transform .24s ease;
	}

	.nb-mh__drawer.is-open {
		transform: translateX( 0 );
	}

	.nb-mh__drawer[hidden] {
		display: none;
	}

	.nb-mh__drawer-head {
		display: flex;
		align-items: center;
		gap: 10px;

		padding-bottom: 12px;
		margin-bottom: 8px;
		border-bottom: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );
	}

	.nb-mh__drawer-head .nb-mh__brand {
		align-items: flex-start;
		text-align: right;
	}

	.nb-mh__menu,
	.nb-mh__menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nb-mh__menu a {
		display: block;
		padding: 13px 8px;

		color: var( --nb-text, #e7ebf3 );
		font-size: 15px;
		text-decoration: none;

		border-radius: var( --nb-radius, 10px );
	}

	.nb-mh__menu a:hover,
	.nb-mh__menu a:focus-visible {
		background: var( --nb-surface-2, rgba( 255, 255, 255, .05 ) );
	}

	.nb-mh__menu .current-menu-item > a {
		color: var( --nb-link, #a78bfa );
	}

	/* زیرمنو تورفته، تا سلسله‌مراتب دیده شود. */
	.nb-mh__menu .sub-menu a {
		padding-right: 22px;
		font-size: 14px;
		color: var( --nb-text-dim, #8b93a7 );
	}

	.nb-mh__account {
		display: block;
		margin-top: auto;
		padding: 13px;

		background: var( --nb-accent, #7c3aed );
		border-radius: var( --nb-radius, 12px );
		color: #fff;

		font-size: 15px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}

	/* ---------- پوششِ جست‌وجو ---------- */

	/*
	 * از بالا باز می‌شود، و این عمدی است.
	 *
	 * نسخه‌ی اول کشویی پایینی بود و کیبوردِ گوشی رویش می‌نشست — کاربر
	 * می‌نوشت و کادر را نمی‌دید. کیبورد از پایین می‌آید و هرگز به بالای
	 * صفحه نمی‌رسد، پس این‌طور مسئله از ریشه حذف می‌شود.
	 */
	.nb-mh__search {
		position: fixed;
		z-index: 950;
		top: 0;
		right: 0;
		left: 0;

		display: block;
		padding: 12px;

		background: var( --nb-surface, #0d1424 );
		border-bottom: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );

		transform: translateY( -100% );
		transition: transform .22s ease;
	}

	.nb-mh__search.is-open {
		transform: translateY( 0 );
	}

	.nb-mh__search[hidden] {
		display: none;
	}

	.nb-mh__search-head {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.nb-mh__search .nb-search {
		display: flex;
		flex: 1 1 auto;
		gap: 8px;
		margin: 0;
		min-width: 0;
	}

	.nb-mh__search .nb-search__input {
		flex: 1 1 auto;
		min-width: 0;

		/* ۱۶ پیکسل عمدی: کمتر از این، iOS هنگام فوکوس زوم می‌کند. */
		font-size: 16px;
	}

	.nb-mh__search .nb-search__submit {
		flex: 0 0 auto;
	}

	/* وقتی چیزی باز است، صفحه‌ی پشت اسکرول نشود. */
	body.nb-mh-locked {
		overflow: hidden;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nb-mh__drawer,
	.nb-mh__search,
	.nb-mh__scrim,
	.nb-mh__btn {
		transition: none;
	}
}

/* ---------- فاصله از لبه‌های گوشی ---------- */

/*
 * محتوا نباید به لبه‌ی صفحه بچسبد.
 *
 * این یک *کف* است نه یک مقدار ثابت، و همین نکته‌ی اصلی‌اش است. المنتور
 * پدینگِ هر کانتینر را با متغیر می‌دهد (`--padding-inline-start`)، پس
 * max() آن مقدار را با کفِ ما مقایسه می‌کند: بخشی که مالک خودش فاصله‌ی
 * بیشتری برایش گذاشته دست‌نخورده می‌ماند، و بخشی که صفر است کف را
 * می‌گیرد.
 *
 * راهِ ساده‌تر — نوشتنِ padding با !important — همه‌ی فاصله‌های عمدی را
 * هم‌اندازه می‌کرد و طرح را خراب.
 *
 * فقط کانتینرهای سطح‌اول (`.e-parent`). اگر به تودرتوها هم می‌دادیم،
 * فاصله‌ها روی هم جمع می‌شدند.
 *
 * `nb-bleed` راهِ فرار است: کلاسش را در المنتور به هر بخشی بدهید که
 * عمداً باید تا لبه برود.
 */
@media (max-width: 767px) {

	.e-con.e-parent:not( .nb-bleed ) {
		padding-inline-start: max( var( --nb-mgutter, 0px ), var( --padding-inline-start, 0px ) );
		padding-inline-end: max( var( --nb-mgutter, 0px ), var( --padding-inline-end, 0px ) );
	}

	/* قالب‌های کلاسیکِ المنتور، برای وقتی بخشی هنوز با section ساخته شده. */
	.elementor-section.elementor-top-section:not( .nb-bleed ) > .elementor-container {
		padding-inline-start: var( --nb-mgutter, 0px );
		padding-inline-end: var( --nb-mgutter, 0px );
	}
}

/* ---------- کشوی شیشه‌ای، آیکن‌ها، بخش تماس ---------- */

@media (max-width: 991px) {

	/*
	 * حالت شیشه‌ای.
	 *
	 * @supports شرط است نه تزئین: مرورگری که backdrop-filter ندارد
	 * پس‌زمینه‌ی نیمه‌شفاف را می‌گیرد ولی تارش نمی‌کند، و آن‌وقت متنِ
	 * پشتِ کشو از لای منو خوانده می‌شود. پس فقط جایی نیمه‌شفاف می‌شویم
	 * که بتوانیم تارش هم بکنیم.
	 */
	@supports ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) {

		.nb-mh__drawer.is-glass {
			background: color-mix( in srgb, var( --nb-surface, #0d1424 ) var( --nb-mh-fill, 68% ), transparent );
			backdrop-filter: blur( var( --nb-mh-blur, 18px ) ) saturate( 140% );
			-webkit-backdrop-filter: blur( var( --nb-mh-blur, 18px ) ) saturate( 140% );
		}
	}

	/* ---------- آیکنِ آیتم‌های منو ---------- */

	.nb-mh__menu a {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.nb-mh__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;

		width: 32px;
		height: 32px;

		background: var( --nb-surface-2, rgba( 255, 255, 255, .05 ) );
		border-radius: 9px;
		color: var( --nb-text-dim, #8b93a7 );
	}

	.nb-mh__icon svg {
		width: 17px;
		height: 17px;
	}

	.nb-mh__menu a:hover .nb-mh__icon,
	.nb-mh__menu .current-menu-item > a .nb-mh__icon {
		color: var( --nb-link, #a78bfa );
	}

	/* زیرمنو آیکن ندارد؛ تورفتگی خودش سلسله‌مراتب را نشان می‌دهد. */
	.nb-mh__menu .sub-menu .nb-mh__icon {
		display: none;
	}

	/* ---------- تماس و شبکه‌ها ---------- */

	.nb-mh__extras {
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );
	}

	/* ---------- شماره تماس ---------- */

	.nb-mh__call {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		padding: 11px;
		margin-bottom: 10px;

		background: var( --nb-surface-2, rgba( 255, 255, 255, .05 ) );
		border: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );
		border-radius: var( --nb-radius, 12px );

		color: var( --nb-text, #e7ebf3 );
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}

	.nb-mh__call:hover,
	.nb-mh__call:focus-visible {
		border-color: var( --nb-link, #a78bfa );
		color: var( --nb-link, #a78bfa );
	}

	.nb-mh__call svg {
		width: 18px;
		height: 18px;
		flex: 0 0 auto;
	}

	/* شماره همیشه از راست خوانده شود، حتی با ارقام لاتین. */
	.nb-mh__call span {
		direction: rtl;
		unicode-bidi: plaintext;
		font-variant-numeric: tabular-nums;
	}

	/* ---------- شبکه‌های اجتماعی ---------- */

	/*
	 * یک ردیفِ آیکن، نه فهرستِ عمودی.
	 *
	 * چهار-پنج شبکه در یک ردیف جا می‌شوند و ته کشو را شلوغ نمی‌کنند؛
	 * فهرستِ عمودی همان‌قدر جا می‌گرفت که خودِ منو.
	 */
	.nb-mh__social {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	/*
	 * هر شبکه رنگِ خودش را دارد، همیشه — نه فقط هنگام لمس.
	 *
	 * رنگ اینجا تزئین نیست، نشانه است: کاربر تلگرام را از آبی‌اش
	 * می‌شناسد نه از شکلِ آیکن. با ردیفِ خاکستری باید هر پنج آیکن را
	 * بخواند تا آن یکی را پیدا کند.
	 *
	 * پس‌زمینه رقیقِ همان رنگ است تا ردیف جیغ نشود و با تیرگیِ کشو
	 * بخواند.
	 */
	.nb-mh__soc {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		/* کوچک‌تر از دکمه‌های منو: اینها میان‌برِ فرعی‌اند، نه ناوبریِ اصلی. */
		width: 38px;
		height: 38px;

		border: 1px solid transparent;
		border-radius: 11px;

		text-decoration: none;
		transition: background .15s ease, border-color .15s ease, transform .12s ease;
	}

	.nb-mh__soc svg {
		width: 18px;
		height: 18px;
	}

	.nb-mh__soc:hover,
	.nb-mh__soc:focus-visible {
		transform: translateY( -1px );
	}

	/*
	 * color-mix رنگِ برند را با پس‌زمینه‌ی کشو رقیق می‌کند، پس اگر روزی
	 * تمِ روشن بیاید همین‌ها هم با آن می‌خوانند — برخلافِ rgba ثابت.
	 */
	.nb-mh__soc--tg {
		color: #29a9eb;
		background: color-mix( in srgb, #29a9eb 14%, transparent );
	}

	.nb-mh__soc--tg:hover {
		background: color-mix( in srgb, #29a9eb 26%, transparent );
		border-color: color-mix( in srgb, #29a9eb 55%, transparent );
	}

	.nb-mh__soc--ig {
		color: #e1467c;
		background: color-mix( in srgb, #e1467c 14%, transparent );
	}

	.nb-mh__soc--ig:hover {
		background: color-mix( in srgb, #e1467c 26%, transparent );
		border-color: color-mix( in srgb, #e1467c 55%, transparent );
	}

	.nb-mh__soc--wa {
		color: #25d366;
		background: color-mix( in srgb, #25d366 14%, transparent );
	}

	.nb-mh__soc--wa:hover {
		background: color-mix( in srgb, #25d366 26%, transparent );
		border-color: color-mix( in srgb, #25d366 55%, transparent );
	}

	.nb-mh__soc--yt {
		color: #ff4d4d;
		background: color-mix( in srgb, #ff4d4d 14%, transparent );
	}

	.nb-mh__soc--yt:hover {
		background: color-mix( in srgb, #ff4d4d 26%, transparent );
		border-color: color-mix( in srgb, #ff4d4d 55%, transparent );
	}

	.nb-mh__soc--ml {
		color: var( --nb-link, #a78bfa );
		background: color-mix( in srgb, var( --nb-link, #a78bfa ) 14%, transparent );
	}

	.nb-mh__soc--ml:hover {
		background: color-mix( in srgb, var( --nb-link, #a78bfa ) 26%, transparent );
		border-color: color-mix( in srgb, var( --nb-link, #a78bfa ) 55%, transparent );
	}

	/*
	 * مرورگری که color-mix ندارد پس‌زمینه‌ی خنثی می‌گیرد — رنگِ آیکن
	 * همچنان درست است و فقط پس‌زمینه‌اش ساده می‌شود.
	 */
	@supports not ( background: color-mix( in srgb, red 10%, transparent ) ) {

		.nb-mh__soc {
			background: var( --nb-surface-2, rgba( 255, 255, 255, .05 ) );
		}
	}

	/* ---------- فوتر روی موبایل ---------- */

	body.nb-no-mobile-footer .elementor-location-footer,
	body.nb-no-mobile-footer .nb-footer {
		display: none;
	}
}


/* ==========================================================================
   تب‌های کشوی منو
   ==========================================================================
   دو حالت دارد و از پنل انتخاب می‌شود: تک‌تبی (فقط منو) یا دوتبی
   (منو + دسته‌بندی). در حالتِ تک‌تبی هیچ‌کدام از این قاعده‌ها چیزی پیدا
   نمی‌کنند و چیدمانِ قبلی دست‌نخورده می‌ماند.
   ========================================================================== */

.nb-mh__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;

	margin: 0 0 4px;
	border-bottom: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );
}

.nb-mh__tab {
	position: relative;

	padding: 12px 8px;
	border: 0;
	background: none;

	color: var( --nb-text-muted, #98a2b3 );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;

	transition: color 0.16s ease;
}

/*
 * خطِ زیرِ تبِ فعال روی خودِ مرزِ ظرف می‌نشیند، نه زیرِ آن — وگرنه یک
 * پیکسل پایین‌تر می‌افتد و دو خطِ موازی دیده می‌شود.
 */
.nb-mh__tab::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	bottom: -1px;
	height: 2px;

	border-radius: 2px;
	background: var( --nb-accent, #720eec );

	opacity: 0;
	transition: opacity 0.16s ease;
}

.nb-mh__tab.is-on {
	color: var( --nb-text, #ededed );
}

.nb-mh__tab.is-on::after {
	opacity: 1;
}

.nb-mh__pane[hidden] {
	display: none;
}

/*
 * درختِ دسته‌بندی همان چیزی است که در پنلِ فیلترها می‌آید، ولی آنجا
 * داخلِ یک کارتِ خط‌دار است. اینجا کشو خودش قاب است، پس قاب دوم فقط
 * فضا می‌خورد.
 */
.nb-mh__pane--cats .nb-sf__box {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.nb-mh__pane--cats .nb-sf__label {
	display: none;
}

/*
 * در ستونِ فروشگاه، فهرستِ دسته‌ها سقفِ ۲۶۰ پیکسل و اسکرولِ داخلی دارد
 * تا بقیه‌ی فیلترها زیرِ خطِ دید نیفتند. داخلِ کشو هیچ‌چیزِ دیگری زیرش
 * نیست، پس آن سقف فقط فهرست را وسطِ راه می‌بُرد و زیرش فضای مرده
 * می‌گذاشت. اینجا فهرست کامل باز می‌شود و خودِ کشو اسکرول می‌خورد.
 */
.nb-mh__pane--cats .nb-sf__list {
	max-height: none;
	overflow: visible;
}