/**
 * هدرِ دسکتاپ — طرحِ «نوارِ دسته‌ها» (۰.۷۷.۰).
 *
 * دو نیمه، مثلِ product-ui.css:
 *
 *   ۱. چیدمانِ ویجت‌ها (لوگو، پیوندِ پشتیبانی، نوارِ دسته‌ها و منوی بزرگش).
 *      بی‌زمینه — جز خودِ منوی بازشده که روی محتوای صفحه می‌نشیند و بی‌زمینه
 *      خوانا نیست؛ رنگش از `--nb-cn-panel` می‌آید و در المنتور قابلِ تغییر است.
 *
 *   ۲. پوسته‌ی هدر، فقط زیرِ کلاس‌های `nb-hd…` که NB_T_Header روی کانتینرهای
 *      قالبش می‌گذارد: ردیفِ اصلی، کارتِ نوار، و حالتِ جمع‌شده‌ی چسبان.
 *
 * زیرِ ۹۹۲ پیکسل قالبِ هدرِ المنتور پنهان است (mobile-header.css) و هدرِ گوشی
 * جایش می‌آید؛ این فایل آن‌جا کاری ندارد.
 */

/* ==========================================================================
   ۱. چیدمانِ ویجت‌ها
   ========================================================================== */

/* ---------------------------------------------------------------- لوگو */

.nb-logo {
	--nb-logo-mark: 42px;

	display: inline-flex;
	align-items: center;
	gap: 11px;
	/* inline-flex روی خطِ کرسی می‌نشیند و ظرفش به‌اندازه‌ی پایین‌زدگیِ خط بلندتر می‌شود. */
	vertical-align: top;
	color: var( --nb-text, #ededed );
	text-decoration: none;
	white-space: nowrap;
}

.nb-logo__mark {
	flex: none;
	display: block;
	width: var( --nb-logo-mark );
	height: var( --nb-logo-mark );
	filter: drop-shadow( 0 8px 14px rgba( 114, 14, 236, .35 ) );
}

.nb-logo__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nb-logo__tx {
	display: grid;
	gap: 1px;
	line-height: 1.4;
}

.nb-logo__t {
	font-size: 18px;
	font-weight: 800;
	color: var( --nb-text, #ededed );
}

.nb-logo__s {
	font-size: 10.5px;
	font-weight: 400;
	color: var( --nb-text-muted, #98a2b3 );
}

/* ------------------------------------------------------ پیوندِ پشتیبانی */

.nb-sup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	vertical-align: top;
	color: var( --nb-text, #ededed );
	text-decoration: none;
	white-space: nowrap;
}

.nb-sup__ic {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var( --nb-accent, #720eec );
	color: #fff;
}

.nb-sup--tg .nb-sup__ic {
	background: linear-gradient( 135deg, #2aabee, #229ed9 );
}

.nb-sup--wa .nb-sup__ic {
	background: #25d366;
}

.nb-sup__tx {
	display: grid;
	line-height: 1.4;
}

.nb-sup__tx small {
	font-size: 11px;
	color: var( --nb-text-muted, #98a2b3 );
}

.nb-sup__tx b {
	font-size: 12.5px;
	font-weight: 400;
}

/* -------------------------------------------------------- نوارِ دسته‌ها */

.nb-cn {
	--nb-cn-panel: #04172f;
	--nb-cn-muted: var( --nb-text-muted, #98a2b3 );

	position: relative;
	color: var( --nb-text, #ededed );
}

.nb-cn a {
	color: inherit;
	text-decoration: none;
}

.nb-cn__rail {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.nb-cn__item {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding-inline: 8px var( --nb-cn-pe, 12px );
	border-radius: 13px;
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .16s ease;
}

.nb-cn__ic {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var( --c, #5b5bf6 );
	color: #fff;
	box-shadow: 0 8px 14px -8px var( --c, #5b5bf6 );
}

.nb-cn__cv {
	display: inline-flex;
	color: var( --nb-cn-muted );
	transition: transform .2s ease;
}

.nb-cn__item:hover,
.nb-cn__item.is-on {
	background: color-mix( in srgb, var( --c ) 16%, transparent );
}

.nb-cn__item.is-on .nb-cn__cv {
	transform: rotate( 180deg );
}

.nb-cn__sep {
	flex: none;
	width: 1px;
	height: 26px;
	margin-inline: 6px auto;
	background: rgba( 255, 255, 255, .08 );
}

.nb-cn__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 11px;
	border-radius: 12px;
	font-size: 13.5px;
	color: #aeb8c8 !important;
	white-space: nowrap;
	transition: color .16s ease;
}

.nb-cn__link:hover {
	color: #fff !important;
}

.nb-cn__deal {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin-inline-start: 4px;
	padding: 0 14px;
	border-radius: 13px;
	background: rgba( 245, 158, 11, .16 );
	font-size: 13.5px;
	color: #fcd34d !important;
	white-space: nowrap;
	transition: background-color .16s ease;
}

.nb-cn__deal:hover {
	background: rgba( 245, 158, 11, .26 );
}

/* دکمه‌ی «دسته‌ها» (هدرِ جمع‌شده) */
.nb-cn-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 14px;
	vertical-align: top;
	background: linear-gradient( 135deg, var( --nb-accent, #720eec ) 0%, #5b5bf6 55%, #3b82f6 100% );
	box-shadow: 0 14px 28px -14px #5b5bf6;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
}

.nb-cn-btn[aria-expanded="true"] svg:last-child {
	transform: rotate( 180deg );
}

/* ----------------------------------------------------------- منوی بزرگ */

/*
 * لایه‌ی بیرونی شفاف است و ۱۰ پیکسل پدینگِ بالا دارد: فاصله‌ی بینِ نوار و منو
 * جزوِ خودِ منوست، پس نشانگر وقتی از نوار به منو می‌رود از روی «هیچ» رد
 * نمی‌شود و منو بسته نمی‌شود.
 */
.nb-cn__panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 20;
	display: none;
	padding-top: 10px;
}

.nb-cn.is-open .nb-cn__panel,
.nb-cn:not( .is-js ):hover .nb-cn__panel,
.nb-cn:not( .is-js ):focus-within .nb-cn__panel {
	display: block;
}

.nb-cn__box {
	display: grid;
	grid-template-columns: 270px minmax( 0, 1fr );
	gap: 16px;
	padding: 16px;
	border-radius: 22px;
	background: var( --nb-cn-panel );
	box-shadow: 0 40px 80px -30px #000;
	animation: nb-cn-in .18s ease both;
}

@keyframes nb-cn-in {

	from {
		opacity: 0;
		transform: translateY( -6px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.nb-cn__cats {
	display: grid;
	gap: 4px;
	align-content: start;
}

.nb-cn__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	transition: background-color .14s ease;
}

.nb-cn__cat .nb-cn__ic {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: color-mix( in srgb, var( --c ) 18%, transparent );
	color: color-mix( in srgb, var( --c ) 70%, #fff );
	box-shadow: none;
}

.nb-cn__cat em {
	margin-inline-start: auto;
	font-size: 12px;
	font-style: normal;
	color: var( --nb-cn-muted );
	white-space: nowrap;
}

.nb-cn__cat:hover,
.nb-cn__cat.is-on {
	background: rgba( 255, 255, 255, .06 );
}

.nb-cn__pane {
	display: none;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	gap: 16px;
	height: 100%;
}

.nb-cn__pane.is-on {
	display: grid;
}

.nb-cn__pane.is-solo {
	grid-template-columns: minmax( 0, 1fr );
}

.nb-cn__mid {
	min-width: 0;
}

.nb-cn__mid h4 {
	margin: 4px 4px 10px;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var( --nb-cn-muted );
}

.nb-cn__tiles {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 8px;
	margin-bottom: 16px;
}

.nb-cn__tile {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	min-height: 54px;
	padding: 8px 12px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .045 );
	font-size: 13px;
	line-height: 1.6;
	transition: background-color .14s ease;
}

.nb-cn__tile:hover,
.nb-cn__pr:hover {
	background: rgba( 255, 255, 255, .09 );
}

/*
 * سه عکسِ منو با دو کلاس. المنتور `.elementor img { height: auto; max-width: 100%;
 * border-radius: 0; box-shadow: none }` دارد — یک کلاس و یک برچسب، سنگین‌تر از یک
 * کلاسِ تنها — و تا ۰.۷۷.۳ هر سه بی‌گوشه و بی‌سایه چاپ می‌شدند: تصویرِ محصول با
 * گوشه‌های تیزش وسطِ کارتِ معرفی «خراب» دیده می‌شد.
 */
.nb-cn .nb-cn__timg {
	flex: none;
	display: block;
	width: 32px;
	max-width: none;
	height: 32px;
	border-radius: 9px;
	object-fit: cover;
	background: rgba( 255, 255, 255, .08 );
}

.nb-cn__best {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
}

.nb-cn__pr {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 7px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .04 );
	transition: background-color .14s ease;
}

.nb-cn .nb-cn__pimg {
	flex: none;
	display: block;
	width: 46px;
	max-width: none;
	height: 46px;
	border-radius: 12px;
	object-fit: cover;
	background: rgba( 255, 255, 255, .08 );
}

.nb-cn__pr > span {
	min-width: 0;
	display: grid;
	gap: 1px;
}

.nb-cn__pr b {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.7;
}

.nb-cn__pr small {
	font-size: 12px;
	color: var( --nb-cn-muted );
}

/* قیمت HTMLِ ووکامرس است (مبلغ + نشانِ تومان)؛ رنگ و اندازه از همین‌جا. */
.nb-cn__pr small i,
.nb-cn__promo small i {
	font-style: normal;
}

.nb-cn__panel small .woocommerce-Price-amount,
.nb-cn__panel small .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.nb-cn__panel small svg {
	display: inline-block;
	vertical-align: -1px;
}

.nb-cn__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 14px 4px 2px;
	font-size: 13px;
	color: #c4b5fd !important;
}

/* کارتِ معرفی: پرفروش‌ترین محصولِ همان دسته */
.nb-cn__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 250px;
	padding: 16px;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient( 260px 190px at 78% 0, color-mix( in srgb, var( --c, #f59e0b ) 58%, transparent ), transparent 70% ),
		linear-gradient( 135deg, #3b1d6e, #1b2a63 );
}

.nb-cn .nb-cn__pbg {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	display: block;
	width: 104px;
	max-width: none;
	height: 104px;
	border-radius: 24px;
	object-fit: cover;
	background: rgba( 255, 255, 255, .1 );
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, .1 ), 0 22px 34px -18px #000;
}

.nb-cn__ptag {
	font-size: 12px;
	color: #d6dcf0;
}

.nb-cn__promo b {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.7;
	color: #fff;
}

.nb-cn__promo small {
	font-size: 13px;
	color: #d6dcf0;
}

.nb-cn__pbtn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	margin-top: 8px;
	padding: 0 16px;
	border-radius: 13px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: #1b1340;
}

/* تاریکیِ پشتِ منوی باز */
.nb-hd-dim {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba( 2, 5, 12, .6 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.nb-hd-dim.is-on {
	opacity: 1;
}


/* ==========================================================================
   ۲. پوسته‌ی هدر (فقط زیرِ nb-hd)
   ==========================================================================
   ۰.۷۷.۲ — هر دو ردیف روی *یک* کارت (`nb-hd-card`)، و جمع‌شدن با حرکت.

   ۰.۷۷.۴ — شبکه‌ی دقیق. مالک: «تراز نیستن… آیکونِ اشتراک با آیکونِ سایت توی یک
   خط نیستن… آیکونِ تلگرام وقتی جمع می‌شه اندازه‌ی بقیه نیست». اندازه‌گیریِ لایو:
   نشانِ لوگو ۱۴ پیکسل از اولین آیکونِ نوار جلوتر بود و دکمه‌ی سبد ۶ پیکسل از
   «تخفیف‌ها»؛ لوگو ۴٫۴ پیکسل بالاتر از وسطِ ردیف؛ قدِ کنترل‌ها ۴۲/۵۰/۴۸/۴۶/۵۰ و
   گوشه‌ها ۱۴/۱۶/۱۵/۱۴/۱۵. حالا:

     • یک ستون برای هر دو ردیف. کارت پدینگ ندارد؛ ردیفِ اصلی و نوارِ دسته‌ها هر
       دو `--nb-hd-pad` می‌گیرند، پس نشانِ لوگو و اولین آیکونِ نوار یک لبه دارند
       و دکمه‌ی سبد و «تخفیف‌ها» هم. نوار دیگر سینیِ تورفته نیست؛ نیمه‌ی پایینِ
       خودِ کارت است.
     • یک قد (`--nb-hd-h`) و یک گوشه (`--nb-hd-r`) برای همه‌ی کنترل‌ها؛ حالتِ
       جمع‌شده فقط همان متغیر را عوض می‌کند.
     • همه دقیقاً وسطِ ردیف: ظرفِ هر ویجت flex است (inline-flex داخلِ بلوک به
       اندازه‌ی پایین‌زدگیِ خط بالا می‌نشست).
   ========================================================================== */

/*
 * چسبان. قابِ بیرونی قدِ کاملِ هدر را نگه می‌دارد (header-ui.js همان را روی
 * style می‌نویسد) تا وقتی کارت جمع می‌شود محتوای صفحه بالا نپرد؛ خودش
 * کلیک‌پذیر نیست تا جای خالیِ زیرِ کارتِ جمع‌شده جلوی صفحه را نگیرد.
 */
.elementor-location-header:has( .nb-hd ) {
	position: sticky;
	top: 0;
	z-index: 99;
	pointer-events: none;
}

.admin-bar .elementor-location-header:has( .nb-hd ) {
	top: 32px;
}

@media ( min-width: 992px ) {

	/*
	 * هر چیزِ چسبانِ دیگرِ صفحه (ستونِ کناریِ محصول، فیلترهای فروشگاه، ستونِ
	 * مقاله) باید زیرِ ردیفِ جمع‌شده‌ی هدر بنشیند، نه پشتش: ۸ پیکسل فاصله‌ی کارت
	 * از بالا + ۶۰ پیکسل قدش. بی‌این هدر متغیر صفر است.
	 */
	:root:has( .nb-hd ) {
		--nb-sticky-top: 68px;
	}

	/*
	 * مقصدِ پرش‌های لنگری زیرِ هدر نرود — با `scroll-margin` روی خودِ مقصد، نه
	 * `scroll-padding` روی صفحه. ۰.۷۷.۰ دومی را داشت و کرومیوم با هر حرفی که در
	 * کادرِ جست‌وجوی هدرِ چسبان تایپ می‌شد صفحه را ۶۱ پیکسل بالا می‌بُرد: کادر
	 * داخلِ همان ۸۴ پیکسلِ «کنارگذاشته» است، مرورگر می‌خواهد مکان‌نما را از آن
	 * بیرون بیاورد، و چون کادر با صفحه حرکت نمی‌کند هیچ‌وقت موفق نمی‌شود.
	 */
	:root:has( .nb-hd ) :target,
	:root:has( .nb-hd ) :is( h1, h2, h3, h4, h5, h6 )[id],
	:root:has( .nb-hd ) :is( [data-nb-tabs], .nb-shop__side, .nb-sf ) {
		scroll-margin-top: 88px;
	}
}

.elementor .e-con.nb-hd {
	--nb-hd-card: #031327;
	--nb-hd-soft: rgba( 255, 255, 255, .06 );
	--nb-hd-t: .36s;
	--nb-hd-ease: cubic-bezier( .22, .72, .2, 1 );

	/* قد و گوشه‌ی همه‌ی کنترل‌های ردیف، و فاصله‌ی بینشان */
	--nb-hd-h: 48px;
	--nb-hd-r: 14px;
	--nb-hd-gap: 12px;

	/*
	 * ستونِ محتوا. لبه‌ی کارت = لبه‌ی ظرفِ سایت (هیروی صفحه‌ی اصلی و فوتر — برگه‌های
	 * المنتوری — تا همان‌جا می‌آیند) و محتوای کارت = ستونِ برگه‌های خودِ قالب
	 * (فروشگاه، محصول، وبلاگ: ظرف منهای دو حاشیه). وقتی صفحه از ظرف باریک‌تر است
	 * کارت ۸ پیکسل از لبه‌ی صفحه فاصله می‌گیرد و پدینگ همان‌قدر کم می‌شود.
	 *
	 * درصد، نه `100vw`: vw نوارِ پیمایش را هم می‌شمارد و ۰.۷۷.۳ درست در پهنای
	 * خودِ مالک (۱۴۴۰ + نوار) ستون را ۵ تا ۷ پیکسل جابه‌جا می‌کرد. این عبارت فقط
	 * جایی به کار می‌رود که مرجعِ درصدش پهنای کارت است: پدینگِ ردیفِ اصلی و
	 * پدینگِ نوارِ دسته‌ها.
	 */
	--nb-hd-side: 8px;
	--nb-hd-pad: max(
		calc( var( --nb-gutter, 20px ) - var( --nb-hd-side ) ),
		calc( ( 100% - var( --nb-container-px, 1320px ) ) / 2 + var( --nb-gutter, 20px ) )
	);

	position: relative;
	display: block;
	padding: 0 var( --nb-hd-side ) 10px;
	pointer-events: none;
}

/* اندازه‌گیریِ قدِ هدر (header-ui.js) نباید وسطِ یک حرکت باشد. */
.nb-hd.nb-hd--measuring,
.nb-hd.nb-hd--measuring * {
	transition: none !important;
}

.elementor .e-con.nb-hd-card {
	display: block;
	width: 100%;
	max-width: var( --nb-container-px, 1320px );
	margin: 12px auto 0;
	padding: 0;
	border-radius: 24px;
	background: var( --nb-hd-card );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	box-shadow: 0 24px 48px -34px #000;
	pointer-events: auto;
	transition:
		margin-top var( --nb-hd-t ) var( --nb-hd-ease ),
		border-radius var( --nb-hd-t ) var( --nb-hd-ease ),
		background-color var( --nb-hd-t ) ease,
		box-shadow var( --nb-hd-t ) ease;
}

/* ------------------------------------------------------------ ردیفِ اصلی */

.elementor .e-con.nb-hd-main {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --nb-hd-gap );
	height: 72px;
	padding: 0 var( --nb-hd-pad );
	transition: height var( --nb-hd-t ) var( --nb-hd-ease );
}

.elementor .e-con.nb-hd-main > .elementor-element {
	flex: none;
	width: auto;
}

/*
 * لوگو، پشتیبانی و سبد inline-flex‌اند و داخلِ ظرفِ بلوکیِ ویجت روی خطِ کرسی
 * می‌نشینند: ظرف به‌اندازه‌ی پایین‌زدگیِ خط بلندتر می‌شد و خودِ کنترل ۴٫۴ (لوگو)
 * و ۰٫۳ پیکسل (سبد) از وسطِ ردیف بالاتر می‌افتاد. ظرفِ flex خطی ندارد.
 */
.elementor .nb-hd-main > .elementor-element > .elementor-widget-container {
	display: flex;
	align-items: center;
}

.elementor .e-con.nb-hd-rail {
	display: block;
	padding: 0;
}

/* لوگو: زیرنویس و اندازه‌ی نشان با همان حرکت جمع می‌شوند */
.elementor .nb-hd .nb-logo {
	/* نشان هم‌قدِ کنترل‌های ردیف: لبه‌ی بالا و پایینِ همه روی دو خط می‌افتد. */
	--nb-logo-mark: var( --nb-hd-h );

	display: flex;
}

.elementor .nb-hd .nb-logo__mark {
	transition: width var( --nb-hd-t ) var( --nb-hd-ease ), height var( --nb-hd-t ) var( --nb-hd-ease );
}

.elementor .nb-hd .nb-logo__s {
	max-height: 18px;
	overflow: hidden;
	transition: max-height var( --nb-hd-t ) var( --nb-hd-ease ), opacity .2s ease;
}

/*
 * کادرِ جست‌وجو وسط، تا ۶۲۰ پیکسل. دو بار `.e-con`: المنتور خودش
 * `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` دارد، هم‌وزنِ
 * نسخه‌ی یک‌کلاسه‌ی این قاعده؛ در فایلِ ترکیبیِ لایت‌اسپید (مهمان) بعد از این
 * فایل می‌آمد و کادر ۷۸۹ پیکسل می‌شد، در حالی که برای کاربرِ واردشده ۶۲۰ بود.
 */
.elementor .e-con.nb-hd .e-con.nb-hd-main > .nb-hd-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 620px;
	margin-inline: auto;
	transition: max-width var( --nb-hd-t ) var( --nb-hd-ease );
}

.elementor-location-header .nb-hd .nb-hs {
	position: relative;
	width: 100%;
	height: var( --nb-hd-h );
	min-height: 0;
	padding: 0 14px;
	border: 0;
	background: var( --nb-hd-soft );
	transition: height var( --nb-hd-t ) var( --nb-hd-ease ), background-color .18s ease, box-shadow .18s ease;
}

/*
 * گوشه را خودِ ویجت هم در CSSِ برگه‌اش می‌نویسد (چهار کلاس)؛ این‌جا پنج تا، تا
 * با دکمه‌های کنارش یکی بماند — در هر ترتیبی که لایت‌اسپید فایل‌ها را بچیند.
 */
.elementor-location-header .nb-hd .nb-hd-search .nb-hs.nb-hs {
	border-radius: var( --nb-hd-r );
}

.elementor-location-header .nb-hd .nb-hs:focus-within {
	background: rgba( 255, 255, 255, .09 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --nb-accent, #720eec ) 32%, transparent );
}

.elementor-location-header .nb-hd .nb-hs__input {
	height: 100%;
	font-size: 14px;
}

/* ذره‌بین اولِ کادر، راهنمای میان‌بُر آخرش */
.elementor-location-header .nb-hd .nb-hs__go {
	order: -1;
	color: var( --nb-text-muted, #98a2b3 );
}

.elementor-location-header .nb-hd .nb-hs::after {
	content: "Ctrl K";
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 7px;
	background: rgba( 255, 255, 255, .08 );
	font-size: 11px;
	line-height: 1;
	color: var( --nb-text-muted, #98a2b3 );
	direction: ltr;
	transition: opacity .16s ease;
}

.elementor-location-header .nb-hd .nb-hs:focus-within::after {
	opacity: 0;
}

/*
 * پشتیبانی. کاشیِ آیکون ۳۲ است و از سه طرف ۸ پیکسل تا لبه‌ی دکمه دارد. در حالتِ
 * جمع‌شده متن می‌رود و کاشی کلِ دکمه را پر می‌کند — وگرنه یک مربعِ ۳۲ پیکسلی
 * کنارِ مربعِ ۴۴ پیکسلیِ «حساب» می‌ماند (حرفِ مالک، ۰.۷۷.۳).
 */
.elementor .nb-hd .nb-sup {
	display: flex;
	height: var( --nb-hd-h );
	padding-inline: 8px 14px;
	border-radius: var( --nb-hd-r );
	background: var( --nb-hd-soft );
	transition:
		height var( --nb-hd-t ) var( --nb-hd-ease ),
		padding var( --nb-hd-t ) var( --nb-hd-ease ),
		gap var( --nb-hd-t ) var( --nb-hd-ease ),
		background-color .16s ease;
}

.elementor .nb-hd .nb-sup:hover {
	background: rgba( 255, 255, 255, .1 );
}

.elementor .nb-hd .nb-sup__ic {
	transition:
		width var( --nb-hd-t ) var( --nb-hd-ease ),
		height var( --nb-hd-t ) var( --nb-hd-ease ),
		border-radius var( --nb-hd-t ) var( --nb-hd-ease );
}

.elementor .nb-hd .nb-sup__ic svg {
	display: block;
	width: 20px;
	height: 20px;
}

.elementor .nb-hd .nb-sup__tx {
	max-width: 150px;
	overflow: hidden;
	transition: max-width var( --nb-hd-t ) var( --nb-hd-ease ), opacity .2s ease;
}

/*
 * حساب و سبد. theme.css برای هر دو در هدر قاعده‌ی important دارد (مربعِ ۴۲
 * پیکسلیِ گرادیانی)؛ این‌جا یک کلاس بیشتر و همان important.
 */
.elementor .nb-hd .nb-accbtn-wrap {
	display: flex;
}

.elementor-location-header .nb-hd .nb-accbtn {
	inline-size: var( --nb-hd-h );
	min-inline-size: 0;
	block-size: var( --nb-hd-h );
	min-block-size: 0 !important;
	padding-inline: 0 !important;
	border-radius: var( --nb-hd-r ) !important;
	background: var( --nb-hd-soft ) !important;
	box-shadow: none;
	color: #dfe5ee !important;
	transition: inline-size var( --nb-hd-t ) var( --nb-hd-ease ), block-size var( --nb-hd-t ) var( --nb-hd-ease ), background-color .16s ease;
}

.elementor-location-header .nb-hd .nb-accbtn:hover {
	background: rgba( 255, 255, 255, .11 ) !important;
	transform: none;
}

.elementor-location-header .nb-hd .nb-sc__btn {
	gap: 10px;
	/* theme.css این دکمه را در هدر مربعِ ۴۲ پیکسلی می‌کند؛ این‌جا متن هم دارد. */
	width: auto;
	block-size: var( --nb-hd-h );
	min-block-size: 0 !important;
	/* کاشیِ آیکون از سه طرف ۶ پیکسل تا لبه‌ی دکمه دارد. */
	padding-inline: 16px 6px !important;
	border-radius: var( --nb-hd-r ) !important;
	transition: block-size var( --nb-hd-t ) var( --nb-hd-ease ), transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/*
 * هاور فقط روشن‌تر می‌شود. theme.css دکمه را ۲ پیکسل بالا می‌بَرد؛ در ردیفی که
 * همه‌چیز روی دو خط نشسته همان ۲ پیکسل «تکان» است (دکمه‌ی حساب هم ندارد).
 */
.elementor-location-header .nb-hd .nb-sc__btn:hover {
	transform: none;
}

.elementor-location-header .nb-hd .nb-sc__btn:active {
	transform: scale( .97 );
}

.nb-sc__sum {
	display: grid;
	gap: 1px;
	/* مبلغ دیرتر از صفحه می‌رسد (فرگمنت)؛ جایش از اول نگه داشته می‌شود تا هدر نلرزد. */
	min-inline-size: 104px;
	line-height: 1.4;
	text-align: start;
	white-space: nowrap;
}

.nb-sc__sum small {
	font-size: 11px;
	font-weight: 400;
	opacity: .85;
}

/*
 * `nb-sc__amt`، نه `nb-sc__total`: آن نام مالِ ردیفِ «مجموع» در خودِ کشوی سبد
 * است (mini-cart.php). ۰.۷۷.۰ همان نام را به مبلغِ دکمه‌ی هدر داد و دو طرف
 * قاعده‌های هم را گرفتند — مبلغِ دکمه ۱۶ پیکسلی شد و مجموعِ کشو ریزتر.
 */
.nb-sc__amt {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}

/* قیمتِ ووکامرس در این قالب قدِ سطرِ خودش را دارد؛ این‌جا باید یک سطرِ ۱۹ پیکسلی بماند. */
.nb-sc__amt .woocommerce-Price-amount,
.nb-sc__amt .woocommerce-Price-currencySymbol,
.nb-sc__amt bdi {
	display: inline;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/*
 * نشانِ تومان داخلِ مبلغ هم یک SVG است و theme.css به هر SVGِ این دکمه
 * `display: block` و ۲۰ پیکسل می‌دهد: نشان زیرِ عدد می‌افتاد، دکمه سه‌سطری
 * می‌شد و «سبد خرید» از بالایش بیرون می‌زد (۰.۷۷.۱، با سبدِ پر).
 */
.elementor-location-header .nb-hd .nb-sc__btn .nb-sc__amt svg {
	display: inline-block;
	inline-size: 13px !important;
	block-size: 12px !important;
	width: 13px;
	height: 12px;
	vertical-align: -1px;
}

.elementor-location-header .nb-hd .nb-sc__btn .nb-sc__icon {
	/*
	 * static، تا عددِ سبد نسبت به خودِ دکمه جا بگیرد — همان‌جا که تیکِ دکمه‌ی
	 * حساب: ۶ پیکسل بیرون از گوشه. با relative عدد روی گوشه‌ی کاشی می‌نشست،
	 * یعنی درست *داخلِ* گوشه‌ی دکمه، و دو نشانِ کنارِ هم دو جور بودند.
	 */
	position: static;
	display: grid;
	place-items: center;
	width: calc( var( --nb-hd-h ) - 12px );
	height: calc( var( --nb-hd-h ) - 12px );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .18 );
	transition: width var( --nb-hd-t ) var( --nb-hd-ease ), height var( --nb-hd-t ) var( --nb-hd-ease );
}

/* حلقه‌ی دورِ نشان‌ها هم‌رنگِ کارتِ هدر (theme.css رنگِ هدرِ قبلی را دارد) */
.elementor-location-header .nb-hd .nb-sc__count,
.elementor-location-header .nb-hd .nb-accbtn__badge.nb-accbtn__badge {
	box-shadow: 0 0 0 2.5px var( --nb-hd-card );
}

.elementor-location-header .nb-hd .nb-sc__count {
	inset-block-start: -6px;
	inset-inline-end: -6px;
}

/* --------------------------------------------------------- نوارِ دسته‌ها */

/*
 * نیمه‌ی پایینِ کارت: هم‌عرضِ کارت، با همان پدینگِ ردیفِ اصلی. خودِ نوار جمع
 * می‌شود (نه ظرفش) تا منوی بزرگ — که برادرِ نوار است، نه فرزندش — بریده نشود و
 * همیشه درست زیرِ کارت باز شود.
 *
 * چیپ‌ها ۴۰ پیکسل‌اند و آیکونِ ۳۰ پیکسلی از سه طرف ۵ پیکسل تا لبه‌ی چیپ دارد؛
 * اولین چیپ همان ۵ پیکسل بیرون می‌زند تا *آیکونش* — نه لبه‌ی زمینه‌ی هاورش — با
 * نشانِ لوگو هم‌خط شود. «تخفیف‌ها» آخرین فرزند است و لبه‌اش لبه‌ی دکمه‌ی سبد.
 */
.elementor .nb-hd .nb-cn__rail {
	height: 52px;
	margin: 0;
	padding: 0 var( --nb-hd-pad );
	border-radius: 0 0 24px 24px;
	background: rgba( 255, 255, 255, .035 );
	overflow: hidden;
	transition:
		height var( --nb-hd-t ) var( --nb-hd-ease ),
		opacity .22s ease,
		transform var( --nb-hd-t ) var( --nb-hd-ease );
}

/*
 * محتوای منوی بزرگ هم روی همان ستون: زمینه‌ی دسته‌ی فعال زیرِ نشانِ لوگو شروع
 * می‌شود و کارتِ معرفی زیرِ دکمه‌ی سبد تمام. مرجعِ درصدِ این پدینگ پهنای منوست
 * که `inset-inline: 0` دارد، یعنی باز پهنای کارت.
 */
.elementor .nb-hd .nb-cn__box {
	padding-inline: var( --nb-hd-pad );
}

.elementor .nb-hd .nb-cn__item {
	height: 40px;
	padding-inline: 5px var( --nb-cn-pe, 11px );
	border-radius: 12px;
}

.elementor .nb-hd .nb-cn__item:first-child {
	margin-inline-start: -5px;
}

.elementor .nb-hd .nb-cn__link {
	height: 40px;
}

.elementor .nb-hd .nb-cn__deal {
	height: 40px;
	border-radius: 12px;
}

/*
 * دکمه‌ی «دسته‌ها» فقط در هدرِ جمع‌شده. پهنایش صفر است، نه `display: none`، تا
 * با همان حرکت باز شود؛ حاشیه‌ی منفی فاصله‌ی فلکسِ کنارش را برمی‌دارد.
 */
.elementor .e-con.nb-hd .e-con.nb-hd-main > .nb-hd-catbtn {
	max-width: 0;
	margin-inline-end: calc( -1 * var( --nb-hd-gap ) );
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: max-width var( --nb-hd-t ) var( --nb-hd-ease ), margin var( --nb-hd-t ) var( --nb-hd-ease ), opacity .22s ease;
}

.elementor .nb-hd .nb-cn-btn {
	height: var( --nb-hd-h );
	border-radius: var( --nb-hd-r );
	box-shadow: none;
	transition: height var( --nb-hd-t ) var( --nb-hd-ease );
}

/* ---------------------------------------------------- جمع‌شده و چسبان */

/*
 * کارتِ جمع‌شده شناور می‌ماند: ۸ پیکسل از بالا و با گوشه‌ی کامل، نه چسبیده به
 * لبه‌ی صفحه (خواستِ مالک، ۰.۷۷.۳). `--nb-sticky-top` بالاتر همین ۸ + ۶۰ است.
 */
.elementor .e-con.nb-hd.is-stuck {
	--nb-hd-h: 44px;
}

.elementor .e-con.nb-hd.is-stuck .nb-hd-card {
	margin-top: 8px;
	border-radius: 18px;
	background: rgba( 3, 19, 39, .92 );
	box-shadow: 0 18px 40px -22px #000;
}

.elementor .e-con.nb-hd.is-stuck .nb-hd-main {
	height: 60px;
}

.elementor .e-con.nb-hd.is-stuck .e-con.nb-hd-main > .nb-hd-catbtn {
	max-width: 160px;
	margin-inline-end: 0;
	opacity: 1;
	pointer-events: auto;
}

.elementor .nb-hd.is-stuck .nb-logo__s {
	max-height: 0;
	opacity: 0;
}

.elementor .e-con.nb-hd.is-stuck .e-con.nb-hd-main > .nb-hd-search {
	max-width: 1100px;
}

.elementor .nb-hd.is-stuck .nb-sup {
	padding-inline: 0;
	gap: 0;
}

.elementor .nb-hd.is-stuck .nb-sup__ic {
	width: var( --nb-hd-h );
	height: var( --nb-hd-h );
	border-radius: var( --nb-hd-r );
}

.elementor .nb-hd.is-stuck .nb-sup__tx {
	max-width: 0;
	opacity: 0;
}

.elementor .nb-hd.is-stuck .nb-cn__rail {
	height: 0;
	opacity: 0;
	transform: translateY( -8px );
	pointer-events: none;
}

/* ------------------------------------------------- پهنای کمتر از طرح */

/*
 * نوار با پهنای *خودش* جمع می‌شود، نه با پهنای صفحه: ظرفِ سایت روی هر نصب یک
 * عدد است (این‌جا ۱۲۰۰، روی لایو پهن‌تر) و همان نوار در هر دو باید جا شود.
 * اول فلش‌ها می‌روند، بعد پیوندهای فرعی، بعد آیکون‌ها کوچک می‌شوند.
 *
 * `container-type` روی خودِ `.nb-cn` است که در چیدمانِ بلوکی نشسته؛ روی آیتمِ
 * فلکسِ المنتور همین ویژگی قدِ ویجت را خراب می‌کرد (کارتِ اسلایدر، ۰.۶۷). در
 * هدر `.nb-cn` هم‌عرضِ کارت است (پدینگ روی خودِ نوار است، ۰.۷۷.۴)، پس عددها
 * پهنای کارت‌اند.
 */
.nb-cn {
	container-type: inline-size;
	container-name: nbcn;
}

@container nbcn ( max-width: 1280px ) {

	.nb-cn__cv {
		display: none;
	}

	.nb-cn__item {
		--nb-cn-pe: 10px;
	}
}

@container nbcn ( max-width: 1150px ) {

	.nb-cn__link {
		display: none;
	}

	.nb-cn__sep {
		visibility: hidden;
	}

	.nb-cn__box {
		grid-template-columns: 230px minmax( 0, 1fr );
	}

	.nb-cn__pane {
		grid-template-columns: minmax( 0, 1fr ) 250px;
	}

	.nb-cn__tiles {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@container nbcn ( max-width: 930px ) {

	.nb-cn__item {
		--nb-cn-pe: 9px;

		gap: 7px;
		font-size: 13px;
	}

	.nb-cn__ic {
		width: 26px;
		height: 26px;
		border-radius: 8px;
	}

	.nb-cn__pane {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nb-cn__promo {
		display: none;
	}
}

@media ( max-width: 1240px ) {

	.elementor .nb-hd .nb-sup__tx small {
		display: none;
	}
}

/* جا کم است: پشتیبانی همان مربعِ حالتِ جمع‌شده می‌شود، سبد بی «سبد خرید». */
@media ( max-width: 1100px ) {

	.elementor .nb-hd .nb-sup {
		padding-inline: 0;
		gap: 0;
	}

	.elementor .nb-hd .nb-sup__ic {
		width: var( --nb-hd-h );
		height: var( --nb-hd-h );
		border-radius: var( --nb-hd-r );
	}

	.elementor .nb-hd .nb-sup__tx {
		display: none;
	}

	.nb-sc__sum small {
		display: none;
	}
}

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

	.nb-cn__box {
		animation: none;
	}

	.nb-hd,
	.nb-hd * {
		transition: none !important;
	}
}