/**
 * NB Theme — front-end styles.
 *
 * Rule: no literal colour, size or radius in this file. Everything reads a
 * variable that the panel writes. If you need a value that has no variable,
 * add the field to the schema instead of hard-coding it here.
 */

/* ------------------------------------------------------------------ layout */

.nb-container {
	width: 100%;
	max-width: var( --nb-container-px );
	margin-inline: auto;
	padding-inline: var( --nb-gutter );
}

.nb-main {
	min-height: 50vh;
}

/*
 * minmax( 0, 1fr ) و نه 1fr.
 *
 * آیتمِ گرید به‌طور پیش‌فرض min-width: auto دارد، یعنی زیرِ عرضِ
 * کمینه‌ی محتوایش کوچک نمی‌شود. روی صفحه‌ی تسویه یک عنصر عریض داخل
 * .nb-content بود و کلِ ستون را از قابِ صفحه بیرون می‌برد: اندازه‌گیری
 * روی ۳۹۰ پیکسل، .nb-content را ۳۸۴ پیکسل در x=-۱۴ نشان می‌داد و صفحه
 * ۱۴ پیکسل افقی اسکرول می‌خورد. با minmax(0,…) ستون اجازه دارد کوچک
 * شود و سرریز داخلِ خودِ عنصر می‌ماند.
 */
.nb-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: calc( var( --nb-gutter ) * 1.5 );
	padding-block: calc( var( --nb-gutter ) * 2 );
}

@media ( min-width: 900px ) {

	.nb-layout:has( .nb-sidebar ) {
		grid-template-columns: minmax( 0, 1fr ) 300px;
	}
}

/* ------------------------------------------------------------------ a11y */

/*
 * پنهان با clip، نه با بردن به ‎-۹۹۹۹.
 *
 * در راست‌به‌چپ آن ‎-۹۹۹۹ لینک را به x=۱۰۳۷۴ می‌برد و سندِ صفحه را همان‌قدر
 * پهن می‌کند — روی گوشی اندازه‌گیری شد. clip همان پنهانیِ دسترس‌پذیر را
 * می‌دهد بدونِ اینکه جایی اشغال کند.
 */
.nb-skip {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	z-index: 999;

	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;

	padding: 10px 18px;
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	border-radius: 0 0 var( --nb-radius-sm ) var( --nb-radius-sm );
}

.nb-skip:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ------------------------------------------------------------------ header */

.nb-header {
	background: var( --nb-header-bg );
	border-bottom: 1px solid var( --nb-border );
}

.nb-sticky-header .nb-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.nb-header__inner {
	display: flex;
	align-items: center;
	gap: var( --nb-gutter );
	min-height: 72px;
}

.nb-header__tools {
	margin-inline-start: auto;
}

.nb-logo {
	font-size: var( --nb-h4 );
	font-weight: var( --nb-heading-weight );
	color: var( --nb-text );
	text-decoration: none;
}

.nb-menu {
	display: flex;
	gap: calc( var( --nb-gutter ) * 0.9 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-menu a {
	color: var( --nb-text );
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
}

.nb-menu a:hover,
.nb-menu .current-menu-item > a {
	color: var( --nb-accent );
	border-bottom-color: var( --nb-accent );
}

/* ------------------------------------------------------------------ search */

.nb-search {
	display: flex;
	gap: 6px;
}

.nb-search__input {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-text );
	padding: 9px 12px;
	min-width: 0;
}

.nb-search__input::placeholder {
	color: var( --nb-text-muted );
}

.nb-search__submit,
.nb-btn {
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	border: 0;
	border-radius: var( --nb-radius-sm );
	padding: 9px 18px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.18s ease;
}

.nb-search__submit:hover,
.nb-btn:hover {
	background: var( --nb-accent-hover );
}

/* ------------------------------------------------------------------ entries */

.nb-entry {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius );
	padding: calc( var( --nb-gutter ) * 1.2 );
	margin-bottom: var( --nb-gutter );
}

/*
 * صفحه‌ای که خودش با المنتور طراحی شده، کارت نمی‌خواهد.
 *
 * زمینه و کادر و فاصله‌ی .nb-entry برای محتوای کلاسیک است. روی یک
 * طرحِ المنتوری همان‌ها به‌شکل یک جعبه‌ی اضافه دیده می‌شوند.
 */
.nb-entry--bare {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}

.nb-entry--bare .nb-entry__body {
	color: inherit;
}

.nb-entry__title {
	font-size: var( --nb-h2 );
	margin-block: 0 12px;
}

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

.nb-entry__title a:hover {
	color: var( --nb-accent );
}

.nb-entry__thumb img {
	border-radius: var( --nb-radius-sm );
	margin-bottom: 14px;
}

.nb-entry__body {
	color: var( --nb-text-muted );
}

.nb-archive-title {
	font-size: var( --nb-h1 );
	margin-block: 0 8px;
}

.nb-archive-desc,
.nb-empty {
	color: var( --nb-text-muted );
}

/* ------------------------------------------------------------------ sidebar */

.nb-widget {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius );
	padding: 16px;
	margin-bottom: var( --nb-gutter );
}

.nb-widget__title {
	font-size: var( --nb-h4 );
	margin-block: 0 10px;
}

/* ------------------------------------------------------------------ woo */

.nb-badge,
.woocommerce span.onsale {
	background: var( --nb-sale );
	color: var( --nb-acc-fg );
	border-radius: var( --nb-radius-sm );
	padding: 3px 9px;
	font-weight: 600;
	line-height: 1.6;
}

/*
 * WooCommerce still ships a float-era clearfix on the product list:
 * ul.products::before / ::after with content " " and display: table.
 *
 * Harmless while the list is a float or flex layout. The moment it becomes a
 * grid — which is what nb-core's loop CSS does — those two pseudo-elements
 * become real grid items and each eats a whole cell, so the first card starts
 * in column 2 and a 345x440 hole sits at the top of every archive.
 *
 * Only the pseudo-elements are touched. Forcing display:grid on the list here
 * would also hit the lists nb-core renders inside its sliders, which are not
 * grids and must not become one.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/*
 * کارتِ آرشیو = کارتِ اسلایدرِ صفحه‌ی اصلی.
 *
 * مارک‌آپشان از قبل یکی بود (nb-ps__*) ولی ظاهرشان نه: آنجا زمینه‌ی
 * سرمه‌ای با گوشه‌ی ۱۶ و سایه، اینجا زمینه‌ی روشن‌تر با یک خطِ حاشیه.
 *
 * مقادیر اینجا تکرار شده‌اند و از جای مشترکی نمی‌آیند، چون آن ظاهر
 * تنظیماتِ *ویجتِ* اسلایدر در المنتور است و به‌شکل CSSِ درون‌خطیِ همان
 * ویجت چاپ می‌شود؛ قاعده‌ای در فایل‌های قالب ندارد که بشود به آن وصل
 * شد. اگر روزی رنگِ اسلایدر در المنتور عوض شد، اینجا هم باید عوض شود.
 */
.woocommerce ul.products {
	/*
	 * padding از راهِ متغیر داده می‌شود، نه مستقیم.
	 *
	 * loop.css بعد از این فایل بار می‌شود و روی همین انتخابگر
	 * `padding: var( --nb-loop-pad, 0 )` می‌نویسد — یعنی هر padding که
	 * اینجا بگذاریم صفر می‌شود. دادنِ خودِ متغیر از آن قاعده رد می‌شود.
	 */
	--nb-loop-pad: 10px;
}

.woocommerce ul.products li.product {
	background: #031327;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.5 );
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/*
 * این دو باید از قاعده‌های هم‌وزنِ loop.css که بعد از این فایل می‌آیند
 * سنگین‌تر باشند. وزن با *تکرارِ کلاس* بالا می‌رود، نه با پیشوندِ body:
 * کلاسِ `woocommerce` روی خودِ <body> است، پس `body .woocommerce …`
 * دنبالِ یک نواده‌ی .woocommerce می‌گردد که وجود ندارد و هرگز مطابقت
 * نمی‌کند. (همین اشتباه یک بار اینجا و یک بار در صفحه‌بندی تکرار شد.)
 */
.woocommerce ul.products li.product .nb-ps__media.nb-ps__media {
	border-radius: 12px;
}

.woocommerce ul.products li.product .nb-ps__title.nb-ps__title {
	font-size: 14px;
}

/* بلندشدنِ کارت فقط با اشاره‌گرِ واقعی — روی لمسی، ضربه‌ی اول را
   می‌خورد و کاربر فکر می‌کند لینک کار نکرده. */
@media ( hover: hover ) and ( pointer: fine ) {

	.woocommerce ul.products li.product:hover {
		transform: translateY( -3px );
		box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.55 );
	}
}

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

	.woocommerce ul.products li.product {
		transition: none;
	}
}

.woocommerce ul.products li.product .price {
	color: var( --nb-text );
}

.woocommerce .stock.in-stock {
	color: var( --nb-success );
}

.woocommerce .stock.out-of-stock {
	color: var( --nb-danger );
}

/*
 * WooCommerce's own form colours are built for a light theme and are unreadable
 * on this one. Measured on /my-account/: the required asterisk came out at
 * 2.28:1 and the "forgot your password" link at 2.51:1, both far under AA.
 * The theme owns the palette, so it owns these too.
 */
/* WooCommerce ships `.woocommerce form .form-row .required` (0,3,1). A shorter
   selector loses to it silently — the asterisk stayed at 2.28:1. Match its
   specificity rather than reaching for !important. */
.woocommerce form .form-row .required,
.woocommerce form .required,
.woocommerce .required {
	color: var( --nb-danger );
	text-decoration: none;
}

.woocommerce form .lost_password a,
.woocommerce-LostPassword a,
.woocommerce form label,
.woocommerce-form__label {
	color: var( --nb-text );
}

.woocommerce form .lost_password a,
.woocommerce-LostPassword a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce form .lost_password a:hover,
.woocommerce-LostPassword a:hover {
	color: var( --nb-accent-hover );
}

/* WooCommerce's breadcrumb ships #767676, which is 4.23:1 here — just under AA. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	color: var( --nb-text-muted );
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
	color: var( --nb-text-muted );
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
	color: var( --nb-link );
}

/* Inputs inherit the light theme too — they render white-on-white otherwise. */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form textarea,
.woocommerce form select {
	background: var( --nb-surface-alt );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-text );
	padding: 10px 12px;
}

.woocommerce form ::placeholder {
	color: var( --nb-text-muted );
}

/* ------------------------------------------------------------------ footer */

.nb-footer {
	background: var( --nb-footer-bg );
	border-top: 1px solid var( --nb-border );
	padding-block: calc( var( --nb-gutter ) * 1.6 );
	margin-top: calc( var( --nb-gutter ) * 2 );
}

.nb-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.nb-footer__menu a {
	color: var( --nb-text-muted );
	text-decoration: none;
}

.nb-footer__menu a:hover {
	color: var( --nb-accent );
}

.nb-footer__copy {
	margin: 0;
	color: var( --nb-text-muted );
}

/* ------------------------------------------------------------------ to top */

.nb-totop {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 90;
	width: 44px;
	height: 44px;
	border: 1px solid var( --nb-border );
	border-radius: 50%;
	background: var( --nb-surface );
	color: var( --nb-text );
	font-size: 18px;
	display: grid;
	place-items: center;
}

.nb-totop:hover {
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	border-color: var( --nb-accent );
}

/* ------------------------------------------------------------------ 404 */

.nb-404 {
	padding-block: calc( var( --nb-gutter ) * 4 );
	text-align: center;
}

.nb-404 h1 {
	font-size: var( --nb-h1 );
}

.nb-404 p {
	color: var( --nb-text-muted );
}

.nb-404 .nb-search {
	justify-content: center;
	margin-block: 20px;
}

/* ------------------------------------------------ آرشیو و تک‌نوشته */

.nb-archive-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --nb-gutter );
}

.nb-entry--card {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nb-entry--card .nb-entry__title {
	font-size: var( --nb-h4 );
}

.nb-entry__meta {
	margin: 0;
	color: var( --nb-text-muted );
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.nb-entry__meta a {
	color: var( --nb-text-muted );
}

.nb-entry__meta a:hover {
	color: var( --nb-link );
}

.nb-entry__head {
	margin-bottom: 18px;
}

.nb-entry--single .nb-entry__title {
	font-size: var( --nb-h1 );
	margin-bottom: 10px;
}

.nb-entry__tags {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var( --nb-border );
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nb-entry__tags a {
	background: var( --nb-surface-alt );
	border: 1px solid var( --nb-border );
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12.5px;
	text-decoration: none;
	color: var( --nb-text-muted );
}

.nb-postnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-block: var( --nb-gutter );
	font-size: 14px;
}

.nb-postnav a {
	text-decoration: none;
}

/* --------------------------------------------------------- دیدگاه‌ها */

.nb-comments {
	margin-top: calc( var( --nb-gutter ) * 2 );
}

.nb-comments__title {
	font-size: var( --nb-h3 );
	margin-bottom: 18px;
}

.nb-comments__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.nb-comments__list .comment-body {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius );
	padding: 16px;
	margin-bottom: 14px;
}

.nb-comments__list .children {
	list-style: none;
	margin: 0;
	padding-inline-start: 22px;
}

.nb-comments__closed {
	color: var( --nb-text-muted );
}

.nb-comment-form textarea,
.nb-comment-form input[type="text"],
.nb-comment-form input[type="email"],
.nb-comment-form input[type="url"] {
	inline-size: 100%;
	background: var( --nb-surface-alt );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius-sm );
	color: var( --nb-text );
	padding: 10px 12px;
}

.nb-comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	color: var( --nb-text-muted );
}

.nb-comment-form .submit {
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	border: 0;
	border-radius: var( --nb-radius-sm );
	padding: 10px 22px;
	font-weight: 600;
}

/* ============================================================
 * زوم خودکار روی موبایل — پیشگیری در سطح کل سایت
 * ============================================================
 *
 * سافاری آی‌اواس هر ورودی‌ای را که قلمش زیر ۱۶ پیکسل باشد موقع فوکوس
 * زوم می‌کند و صفحه زوم‌شده می‌ماند؛ کاربر می‌گوید «سایت به‌هم ریخت».
 * اندازه‌گیری روی همین سایت: کادر شماره‌ی ورود ۱۳٫۶ و کد تخفیفِ سبد ۱۵.
 *
 * ۱۶ پیکسل تنها عددی است که سافاری زوم نمی‌کند. این را به‌جای قفل‌کردنِ
 * زوم صفحه انتخاب کردیم چون قفلِ زوم برای کسی که چشمش ضعیف است هم
 * درشت‌نمایی را می‌بندد.
 */
@media ( max-width: 767px ) {

	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}
}

/*
 * ...و همان قاعده، این بار با important.
 *
 * دلیلش خاص است و ارزش نوشتن دارد: تایپوگرافیِ هر ویجت المنتور به‌صورت
 * قاعده‌ای مثل
 * `.elementor-15 .elementor-element.elementor-element-0e6b890 .coupon .input-text`
 * چاپ می‌شود — چهار کلاس. کادر «کد تخفیف» سبد از همین راه ۱۵ پیکسل شده
 * بود و قاعده‌ی بالا هرگز به آن نمی‌رسید. اینجا بحثِ ظاهر نیست؛ زیر ۱۶
 * پیکسل یعنی صفحه هنگام تایپ می‌پرد، پس باید برنده شود.
 *
 * فقط روی موبایل و فقط روی کادرهای فرم. اندازه‌ی دلخواهِ مالک روی
 * دسکتاپ دست‌نخورده می‌ماند.
 */
@media ( max-width: 767px ) {

	.woocommerce input.input-text,
	.woocommerce textarea,
	.woocommerce select,
	.elementor input[type="text"],
	.elementor input[type="tel"],
	.elementor input[type="email"],
	.elementor input[type="number"],
	.elementor input[type="password"],
	.elementor select,
	.elementor textarea {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   موبایل — پدینگِ روی‌هم‌انباشته
   ==========================================================================
   اندازه‌گیری روی صفحه‌ی سبد با عرض ۳۹۰ پیکسل: از بالا به پایین
   .nb-container ۲۰ + article.nb-entry ۲۴ و بعد سه لایه‌ی کانتینرِ
   المنتور ۱۰+۱۰+۱۰ — یعنی جدولِ سبد فقط **۲۶۰ پیکسل** جا داشت و
   یک‌سومِ صفحه پیش از شروعِ محتوا حاشیه بود. نامِ محصول در ۵۶ پیکسل
   می‌شکست.

   پدینگِ المنتور طراحیِ خودِ مالک است و دست نمی‌خورد؛ این دو تا مالِ
   قالب‌اند و روی صفحه‌ی کوچک باید جمع شوند.
   ========================================================================== */


/*
 * سبد، تسویه و حساب کاربری قابِ مقاله نمی‌خواهند — در هیچ عرضی.
 *
 * محتوای این سه صفحه را المنتور و ووکامرس می‌سازند و خودشان کارت
 * دارند. قابِ .nb-entry دورشان یک سطحِ دوم بود که هیچ چیزی را از هم جدا
 * نمی‌کرد و فقط حاشیه می‌خورد. سطح فقط جایی می‌ماند که کارش جدا کردن
 * یک بلوکِ مشخص باشد.
 */
.woocommerce-cart .nb-entry,
.woocommerce-checkout .nb-entry,
.woocommerce-account .nb-entry {
	padding: 0;
	border: 0;
	background: transparent;
}

@media ( max-width: 768px ) {

	.nb-container {
		padding-inline: 12px;
	}

	.nb-entry {
		padding: 16px;
	}
}

/* ==========================================================================
   پیام‌های ووکامرس
   ==========================================================================
   ووکامرس این‌ها را برای قالبِ روشن ساخته: زمینه‌ی سفید، متنِ تیره و یک
   نوار رنگی بالای کادر. روی این قالب یک مستطیلِ سفیدِ درشت وسط صفحه‌ی
   تیره می‌شد و دکمه‌ی «مشاهده سبد خرید» داخلش خاکستری روی خاکستری.
   این‌ها روی سبد، تسویه و حساب کاربری ظاهر می‌شوند، پس اینجا (نه در
   cart.css) جایشان است.
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce ul.woocommerce-error,
.woocommerce div.woocommerce-message,
.woocommerce div.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var( --nb-border );
	border-inline-start: 3px solid var( --nb-accent );
	border-radius: var( --nb-radius-sm );
	background: var( --nb-surface-alt, var( --nb-surface ) );
	color: var( --nb-text );
	font-size: 13.5px;
	line-height: 1.9;
	list-style: none;
}

/* نوارِ رنگیِ بالای کادر و آیکنِ ::before مالِ خودِ ووکامرس‌اند. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	display: none;
}

/* رنگِ نوارِ کناری، به تفکیک نوع. سه کلاس تا قاعده‌ی پایه‌ی بالا —
   که روی همه‌ی انواع رنگِ برند می‌گذارد — شکست بخورد. */
.woocommerce .nb-notice.nb-notice--error,
.nb-notice.nb-notice--error,
.woocommerce ul.woocommerce-error {
	border-inline-start-color: var( --nb-danger );
}

.woocommerce .nb-notice.nb-notice--success,
.nb-notice.nb-notice--success,
.woocommerce div.woocommerce-message {
	border-inline-start-color: var( --nb-success );
}

.woocommerce .nb-notice.nb-notice--info,
.nb-notice.nb-notice--info {
	border-inline-start-color: var( --nb-link, var( --nb-accent ) );
}

.woocommerce ul.woocommerce-error li {
	list-style: none;
	margin: 0;
	width: 100%;
}

/* دکمه‌ی داخل پیام — «مشاهده سبد خرید» و مانند آن. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward {
	margin-inline-start: auto;
	padding: 8px 16px;
	border-radius: var( --nb-radius-sm );
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
	background: var( --nb-accent-hover );
	color: var( --nb-acc-fg );
}

@media ( max-width: 768px ) {

	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce ul.woocommerce-error {
		font-size: 12.5px;
		padding: 12px 14px;
	}

	/* روی صفحه‌ی باریک دکمه زیر متن، تمام‌عرض — کنارِ متن فقط دو کلمه
	   جا می‌شود و هر دو بد می‌شکنند. */
	.woocommerce-message .button,
	.woocommerce-error .button,
	.woocommerce-info .button {
		margin-inline-start: 0;
		width: 100%;
		text-align: center;
	}
}

/* ---- ساختار پیام: آیکن + متن ---------------------------------------
   مارک‌آپش از woocommerce/notices/*.php می‌آید. */

.nb-notice {
	align-items: flex-start;
}

.nb-notice li {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px 12px;
	width: 100%;
}

.nb-notice__icon {
	flex: 0 0 auto;
	display: block;
	margin-block-start: 2px;
}

/* آیکن با mask کشیده می‌شود، نه با تگ svg — ووکامرس خروجی قالبِ پیام را
   از kses رد می‌کند و svg/circle را حذف می‌کند. با mask رنگ از
   currentColor می‌آید، پس هر سه نوع پیام رنگ خودشان را می‌گیرند. */
.nb-notice__icon::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.nb-notice--error .nb-notice__icon::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.4' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.4' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E" );
}

.nb-notice--success .nb-notice__icon::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E" );
}

.nb-notice--info .nb-notice__icon::before {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.8' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.8' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E" );
}

.nb-notice--error .nb-notice__icon {
	color: var( --nb-danger );
}

.nb-notice--success .nb-notice__icon {
	color: var( --nb-success );
}

.nb-notice--info .nb-notice__icon {
	color: var( --nb-link, var( --nb-accent ) );
}

.nb-notice__text {
	flex: 1 1 220px;
	min-width: 0;
}

/*
 * دکمه‌ی داخل پیام.
 *
 * چهار کلاس لازم است: این لینک کلاسِ `button` ووکامرس را دارد و
 * قاعده‌های آن (و استایلِ دکمه‌های المنتور) زمینه‌ی روشنِ خودشان را
 * می‌گذارند — دکمه‌ی «مشاهده سبد خرید» داخل یک پیامِ تیره، سفید
 * درمی‌آمد.
 */
.woocommerce .nb-notice .button,
.woocommerce .nb-notice a.button,
.nb-notice .button,
.nb-notice a.button,
.nb-notice a.wc-forward,
.nb-notice .restore-item {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 9px 18px;
	border: 0;
	border-radius: var( --nb-radius-sm );
	background: var( --nb-accent );
	color: var( --nb-acc-fg );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce .nb-notice .button:hover,
.woocommerce .nb-notice a.button:hover,
.nb-notice .button:hover,
.nb-notice a.wc-forward:hover {
	background: var( --nb-accent-hover );
	color: var( --nb-acc-fg );
}

@media ( max-width: 768px ) {

	.woocommerce .nb-notice .button,
	.woocommerce .nb-notice a.button,
	.nb-notice .button,
	.nb-notice a.wc-forward {
		margin-inline-start: 0;
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   پرشِ صفحه هنگام باز شدن کشوها
   ==========================================================================
   سبد کشویی، منوی حساب و پاپ‌آپ سفارش هر سه موقع باز شدن اسکرول را قفل
   می‌کنند (overflow: hidden روی html). با این کار نوار اسکرول ناپدید
   می‌شود و صفحه به اندازه‌ی عرضِ همان نوار — روی ویندوز حدود ۱۵ پیکسل —
   پهن‌تر می‌شود؛ یعنی کلِ محتوا یک تکان می‌خورد. مالک همین را دید.

   scrollbar-gutter جا را همیشه رزرو می‌کند، چه نوار باشد چه نباشد. پس
   قفل‌کردنِ اسکرول دیگر عرض را عوض نمی‌کند.

   سودِ دومش: رفتن از صفحه‌ی بلند به صفحه‌ی کوتاه هم دیگر تکان ندارد،
   چون آنجا هم همین اتفاق می‌افتاد.
   ========================================================================== */

html {
	scrollbar-gutter: stable;
}

/*
 * پیام‌ها هم‌عرضِ محتوای سایت، نه تمام‌عرضِ صفحه.
 *
 * ووکامرس نگه‌دارنده‌ی پیام‌ها را بیرون از هر کانتینری چاپ می‌کند. روی
 * فروشگاه و صفحه‌ی محصول — که کانتینرشان تمام‌عرض است — پیام از لبه تا
 * لبه کشیده می‌شد: اندازه‌گیری‌شده ۱۴۲۵ پیکسل، در حالی که متنِ خودِ
 * صفحه ۱۲۰۰ است.
 *
 * عدد از همان متغیری می‌آید که «عرض سایت» در پنل می‌نویسد، منهای دو
 * طرفِ حاشیه — یعنی دقیقاً هم‌تراز با بقیه‌ی محتوا می‌نشیند و با تغییر
 * آن تنظیم خودش دنبالش می‌آید.
 *
 * جایی که نگه‌دارنده از قبل داخل کانتینر است (سبد، تسویه) این قاعده
 * بی‌اثر است، چون عرضش همین حالا کمتر از این سقف است.
 */
.woocommerce-notices-wrapper {
	width: 100%;
	max-width: calc( var( --nb-container-px, 1240px ) - ( var( --nb-gutter, 20px ) * 2 ) );
	margin-inline: auto;
	box-sizing: border-box;
}


/* ---------------------------------------- هشدار: متن، و دکمه‌اش */

/*
 * ووکامرس دکمه و متنِ پیام را در یک رشته‌ی HTML می‌دهد و دکمه را float
 * می‌کند. تا وقتی دکمه *داخل* اسپنِ متن بود، ارتفاعِ اسپن را همان شناور
 * تعیین می‌کرد و متن به بالای آن می‌چسبید — اندازه‌گیری‌شده: ۱۸ پیکسل از
 * بالا، ۳۳ از پایین.
 *
 * یک بار سعی کردم با flex‌کردنِ همان اسپن درستش کنم؛ بدتر شد، چون
 * شناوری روی آیتمِ flex اثر ندارد و دکمه از گوشه کنده شد و وسطِ جمله
 * نشست. حالا جداسازی در PHP انجام می‌شود (NB_Theme_Shop::split_notice)
 * و اینجا فقط دو خواهر کنار هم چیده می‌شوند.
 */
.nb-notice__text {
	flex: 1 1 auto;
	min-width: 0;
}

.nb-notice__action {
	flex: 0 0 auto;
}

/* شناوری دیگر لازم نیست و اگر بماند دکمه از جریانِ flex بیرون می‌افتد. */
.nb-notice__action .button {
	float: none;
	margin: 0;
}

/*
 * وقتی پیام دکمه دارد، ارتفاع را دکمه تعیین می‌کند و ترازِ پیش‌فرضِ
 * flex-start متن را بالانشین می‌گذارد. فقط در همین حالت وسط‌چین
 * می‌شود؛ پیام‌های چندخطیِ بدونِ دکمه باید آیکنشان بالا بماند.
 */
.nb-notice:has( .nb-notice__action ) {
	align-items: center;
}


/* ==========================================================================
   جست‌وجوی هدر (ویجتِ nb-search-box)
   ==========================================================================
   کادر و آیکن و دکمه در یک قابِ واحد می‌نشینند، نه سه عنصرِ کنارِ هم.
   استایل اینجاست نه در یک فایلِ جدا، چون هدر روی همه‌ی صفحه‌ها هست و
   یک درخواستِ CSS بیشتر برای چند خط قاعده صرف نمی‌کند.
   ========================================================================== */

.nb-hs {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;

	max-width: 100%;
	padding: 0 12px;

	border: 1px solid var( --nb-border, #242c42 );
	border-radius: var( --nb-radius-sm, 10px );
	background: var( --nb-surface, #131829 );

	transition: border-color 0.18s ease, background 0.18s ease, width 0.22s ease;
}

.nb-hs:focus-within {
	border-color: var( --nb-accent, #720eec );
}

/* ذره‌بین. ماسک است تا رنگش از متنِ همان فرم بیاید. */
.nb-hs__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: var( --nb-text-muted, #98a2b3 );

	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E" );
}

.nb-hs__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0;

	border: 0;
	background: none;
	color: var( --nb-text, #ededed );

	/*
	 * ۱۶ پیکسل عمدی است و کوچک‌تر نمی‌شود: سافاری آی‌اواس روی هر کادرِ
	 * زیرِ ۱۶ پیکسل هنگام فوکوس صفحه را زوم می‌کند.
	 */
	font-size: 16px;
	font-family: inherit;
}

.nb-hs__input:focus {
	outline: none;
}

.nb-hs__input::placeholder {
	color: var( --nb-text-muted, #98a2b3 );
	opacity: 1;
}

/* ضربدرِ پاک‌کردنِ کروم روی زمینه‌ی تیره یک لکه‌ی سفید است. */
.nb-hs__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.nb-hs__go {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;

	border: 0;
	border-radius: var( --nb-radius-sm, 8px );
	background: var( --nb-accent, #720eec );
	color: var( --nb-acc-fg, #fff );
	cursor: pointer;

	-webkit-mask: none;
	mask: none;
}

/* پیکانِ داخلِ دکمه — همان ذره‌بین، سفید. */
.nb-hs__go::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	background: currentColor;

	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E" );
}

.nb-hs__go:hover {
	filter: brightness( 1.12 );
}

/* ---------------------------------------------- حالتِ «فقط آیکن» ---- */

/*
 * کادر جمع می‌شود تا فقط ذره‌بین بماند و با فوکوس باز می‌شود.
 *
 * جاوااسکریپت ندارد: کلیک روی فرم، فوکوس را به input می‌دهد و
 * :focus-within همان لحظه عرض را باز می‌کند. پس بدونِ JS هم — و در
 * لحظه‌ی قبل از اجرای JS — کار می‌کند.
 */
.nb-hs--icon {
	width: 42px;
	padding: 0;
	justify-content: center;
	cursor: text;
}

.nb-hs--icon .nb-hs__input,
.nb-hs--icon .nb-hs__go {
	width: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.nb-hs--icon:focus-within {
	width: min( 320px, 60vw );
	padding: 0 12px;
	justify-content: flex-start;
}

.nb-hs--icon:focus-within .nb-hs__input {
	width: auto;
	opacity: 1;
	pointer-events: auto;
}

.nb-hs--icon:focus-within .nb-hs__go {
	width: 30px;
	opacity: 1;
	pointer-events: auto;
}

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

	.nb-hs {
		transition: none;
	}
}

/* انتخابِ ریسپانسیوِ ویجت. */
@media ( max-width: 1024px ) {

	.nb-hs--tablet-icon {
		width: 42px;
		padding: 0;
		justify-content: center;
	}

	.nb-hs--tablet-icon:not( :focus-within ) .nb-hs__input,
	.nb-hs--tablet-icon:not( :focus-within ) .nb-hs__go {
		width: 0;
		opacity: 0;
		pointer-events: none;
	}
}

@media ( max-width: 767px ) {

	.nb-hs--mobile-icon {
		width: 42px;
		padding: 0;
		justify-content: center;
	}

	.nb-hs--mobile-icon:not( :focus-within ) .nb-hs__input,
	.nb-hs--mobile-icon:not( :focus-within ) .nb-hs__go {
		width: 0;
		opacity: 0;
		pointer-events: none;
	}

	.nb-hs--mobile-icon:focus-within {
		width: min( 320px, 70vw );
		padding: 0 12px;
		justify-content: flex-start;
	}
}


/* ==========================================================================
   نوارِ اسکرول — کلِ سایت
   ==========================================================================
   پیش‌فرضِ ویندوز یک نوارِ خاکستریِ پهن با دو دکمه‌ی فلش است که روی
   صفحه‌ی تیره مثل وصله می‌ماند. اینجا باریک و گرد و هم‌رنگِ قالب
   می‌شود.

   هر دو استاندارد نوشته شده: scrollbar-* برای فایرفاکس، و
   ::-webkit-scrollbar برای کروم و سافاری. هیچ‌کدام جای دیگری را
   نمی‌گیرد.
   ========================================================================== */

html {
	scrollbar-width: thin;
	scrollbar-color: var( --nb-accent, #720eec ) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

/*
 * حاشیه‌ی شفاف + background-clip یعنی دستگیره باریک‌تر از شیار دیده
 * می‌شود و دو طرفش فاصله دارد — بدون آن، یک میله‌ی چسبیده به لبه است.
 */
::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background: var( --nb-border, #242c42 );
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var( --nb-accent, #720eec );
	background-clip: padding-box;
}

/* دکمه‌های فلشِ بالا و پایین. روی وب هیچ‌کس از آن‌ها استفاده نمی‌کند. */
::-webkit-scrollbar-button {
	display: none;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/*
 * فهرستِ دسته‌ها اسکرولِ داخلی دارد و آنجا نوار باید نازک‌تر باشد،
 * وگرنه در ستونِ ۲۸۰ پیکسلی خودش را به رخ می‌کشد.
 */
.nb-sf__list::-webkit-scrollbar {
	width: 6px;
}

.nb-sf__list::-webkit-scrollbar-thumb {
	border-width: 1px;
	background: var( --nb-border, #242c42 );
	background-clip: padding-box;
}

.nb-sf__list::-webkit-scrollbar-thumb:hover {
	background: var( --nb-accent, #720eec );
	background-clip: padding-box;
}

.nb-sf__list {
	scrollbar-color: var( --nb-border, #242c42 ) transparent;
}

/* ==========================================================================
   صفحه‌بندی: خط‌های جداکننده
   ==========================================================================
   ووکامرس بینِ آیتم‌ها یک خط می‌کشد (در نسخه‌ی راست‌چین border-left).
   با قرص‌شدنِ دکمه‌ها آن خط‌ها وسطِ فاصله‌ها معلق می‌ماندند.

   وزن از راهِ `ul.page-numbers` بالا می‌رود، نه پیشوندِ body — دلیلش
   بالاتر کنارِ کارت توضیح داده شده.
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	border: 0;
}

/*
 * نسخه‌ی هدرِ کادرِ جست‌وجو.
 *
 * ویجتِ سبد داخل یک ظرفِ flex نشسته و این فرم خواهرِ آن می‌شود، پس
 * نباید کش بیاید و کلِ نوار را هل بدهد.
 */
.nb-hs--header {
	width: min( 280px, 26vw );
	flex: 0 0 auto;
	margin-inline-end: 10px;
}

@media ( max-width: 1024px ) {

	/* روی صفحه‌ی باریک‌تر جمع می‌شود تا فقط ذره‌بین بماند؛ با فوکوس
	   باز می‌شود (همان الگوی nb-hs--icon). */
	.nb-hs--header {
		width: 42px;
		padding: 0;
		justify-content: center;
	}

	.nb-hs--header:not( :focus-within ) .nb-hs__input,
	.nb-hs--header:not( :focus-within ) .nb-hs__go {
		width: 0;
		opacity: 0;
		pointer-events: none;
	}

	.nb-hs--header:focus-within {
		width: min( 320px, 60vw );
		padding: 0 12px;
		justify-content: flex-start;
	}
}

/* روی گوشی، هدرِ اختصاصیِ موبایل ذره‌بینِ خودش را دارد. */
@media ( max-width: 991px ) {

	.nb-hs--header {
		display: none;
	}
}

/*
 * ظرفِ ویجتِ سبد باید ردیفی شود.
 *
 * فرم به خروجیِ همان ویجت اضافه می‌شود، پس هم‌خانه‌ی دکمه‌ی سبد است؛
 * ولی `.elementor-widget-container` بلوکی است و آن دو زیرِ هم می‌افتادند
 * و ارتفاعِ هدر را می‌شکستند.
 *
 * :has() لازم است چون کلاسِ آن ویجت مخصوصِ همان نمونه است
 * (elementor-element-8d9203f) و نمی‌شود به آن تکیه کرد. مرورگری که
 * :has ندارد چیدمانِ قبلی را می‌بیند — زشت ولی سالم.
 */
.elementor-widget-container:has( > .nb-hs--header ) {
	display: flex;
	align-items: center;
	gap: 10px;
}


/* ==========================================================================
   کنترل‌های هدر: یک اندازه، رنگِ خودشان
   ==========================================================================
   سه کنترلِ هدر قدها و لبه‌های متفاوتی داشتند و کنار هم ناهموار
   می‌نشستند. اینجا فقط *اندازه و شکل* یکی می‌شود — قد، گردیِ گوشه،
   و ترازِ عمودی.

   رنگ عمداً اینجا نیست: زمینه‌ی دکمه‌ی سبد و حساب از تنظیماتِ همان
   ویجت‌ها در المنتور می‌آید و مالک خودش انتخابشان کرده. اگر اینجا
   رنگ می‌گذاشتیم، یا انتخابِ او را می‌برد یا (چون CSSِ درون‌خطیِ
   المنتور سنگین‌تر است) قاعده‌ی مرده‌ای می‌شد که کسی نمی‌فهمد چرا اثر
   ندارد.

   انتخابگرها با `.elementor-location-header` شروع می‌شوند چون
   side-cart.css بعد از این فایل بار می‌شود و با وزنِ برابر اندازه را
   پس می‌گرفت. کادرِ جست‌وجو هم ویجتِ واقعی است و کلاسش
   `nb-hs--field` است، پس نشانی‌دادن به خودِ `.nb-hs` داخلِ هدر تنها
   راهِ درست است.
   ========================================================================== */

.elementor-location-header .nb-accbtn,
.elementor-location-header .nb-sc__btn,
.elementor-location-header .nb-hs {
	height: 42px;
	min-height: 42px;
	box-sizing: border-box;
	border-radius: var( --nb-radius-sm, 8px );
}

/* ---- دو دکمه‌ی آیکنی: آیکن دقیقاً وسط ---- */

.elementor-location-header .nb-accbtn,
.elementor-location-header .nb-sc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 11px;
	min-width: 42px;
}

.elementor-location-header .nb-accbtn__icon svg,
.elementor-location-header .nb-sc__btn svg {
	width: 19px;
	height: 19px;
}

/* آواتار داخلِ قاب می‌نشیند، نه اینکه پُرش کند. */
.elementor-location-header .nb-accbtn__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* ---- کادرِ جست‌وجو ---- */

.elementor-location-header .nb-hs__input {
	height: 40px;
}

.elementor-location-header .nb-hs__go {
	width: 28px;
	height: 28px;
	border-radius: 6px;
}

/* ---- آیکن‌ها: دقیقاً وسط، دقیقاً هم‌اندازه ---- */

/*
 * دو دکمه‌ی آیکنیِ هدر مربعِ کامل می‌شوند.
 *
 * پیش از این عرضشان را محتوا تعیین می‌کرد و ۴۴ در برابر ۴۳ درمی‌آمد —
 * یک پیکسل، ولی کنار هم دیده می‌شد. حالا عدد ثابت است و padding صفر،
 * پس هر آیکنی داخلشان بیفتد باز هم مربع می‌مانند.
 */
.elementor-location-header .nb-accbtn,
.elementor-location-header .nb-sc__btn {
	position: relative;
	width: 42px;
	min-width: 42px;
	padding: 0;
}

/*
 * ظرفِ آیکنِ حساب، آیکنش را وسط می‌گذارد.
 *
 * این ظرف ۲۴×۲۴ بود ولی فرزندش را نمی‌چید، پس آیکنِ ۱۹ پیکسلی
 * بالا-راستِ آن می‌چسبید: مرکزِ آیکن (۲۹۰، ۹۰) در برابر مرکزِ دکمه
 * (۲۸۷، ۹۲). خودِ ظرف وسط بود و برای همین اندازه‌گیریِ اولم آن را
 * «وسط» گزارش کرد — معیار غلط بود، نه نتیجه.
 */
.elementor-location-header .nb-accbtn__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 22px;
	height: 22px;
}

/* هر دو آیکن یک اندازه، مستقل از اینکه SVG باشند یا تصویر. */
.elementor-location-header .nb-accbtn__icon,
.elementor-location-header .nb-accbtn__icon svg,
.elementor-location-header .nb-accbtn__icon img,
.elementor-location-header .nb-sc__btn svg,
.elementor-location-header .nb-sc__btn img {
	display: block;
	width: 20px;
	height: 20px;
}

/*
 * نشان‌ها روی گوشه می‌نشینند، نه شناور کنارِ آیکن.
 *
 * قبلاً نشانِ سبد ۱۶ پیکسل بود روی دکمه‌ی ۴۲ پیکسلی — تقریباً
 * یک‌چهارمِ دکمه، و از لبه بیرون می‌زد. حلقه‌ی تیره دورش، جدایش
 * می‌کند بدون اینکه به رنگِ زمینه‌ی دکمه وابسته باشد (آن رنگ از
 * تنظیماتِ المنتور می‌آید و ممکن است عوض شود).
 */
.elementor-location-header .nb-sc__count {
	min-width: 15px;
	height: 15px;
	line-height: 15px;
	padding: 0 4px;
	font-size: 9.5px;
	box-shadow: 0 0 0 1.5px rgba( 0, 0, 0, 0.28 );
}

.elementor-location-header .nb-accbtn__badge {
	box-shadow: 0 0 0 1.5px rgba( 0, 0, 0, 0.28 );
}

.elementor-location-header .nb-accbtn__badge--tick {
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   متنِ توضیحاتِ محصول — سبکِ خانگی
   ==========================================================================
   محصولاتِ قدیمی این ظاهر را به‌صورت استایلِ *درون‌خطی* روی تک‌تکِ
   تگ‌ها دارند (نوارِ قرمز کنارِ تیتر، متنِ ۱۵ پیکسلیِ آبی‌خاکستری و
   مانند آن). محصولِ تازه‌ای که متنش بدون آن استایل‌ها چسبانده شود، با
   پیش‌فرضِ قالب رندر می‌شود و کاملاً فرق می‌کند — روی «اشتراک کلود»
   دیده شد: تیترِ ۳۱٫۳ پیکسلی بدون فاصله‌ی بالا، در برابر ۲۰ پیکسل با
   ۳۴ پیکسل فاصله در بقیه.

   این قاعده‌ها همان مقادیر را به‌شکلِ سراسری می‌دهند. محصولاتی که
   استایلِ درون‌خطی دارند دست‌نخورده می‌مانند (درون‌خطی همیشه برنده
   است)، و از این به بعد هر محصولِ تازه بدون کارِ دستی همین شکل را
   می‌گیرد.

   رنگ‌ها عمداً همان عددهای موجود در محتوای فعلی‌اند تا دو نسل از
   محصولات دقیقاً یکی به نظر برسند.
   ========================================================================== */

.elementor-widget-woocommerce-product-content h2 {
	margin: 34px 0 14px;
	padding-inline-start: 12px;
	border-inline-start: 4px solid #ee273a;
	font-size: 20px;
	line-height: 1.6;
}

/*
 * h4 هم مثل h3 دیده می‌شود.
 *
 * هیچ محصولِ دیگری این سطح را ندارد؛ اگر رهایش کنیم روی صفحه از متنِ
 * معمولی هم کوچک‌تر درمی‌آید و ساختار به‌هم می‌ریزد.
 */
.elementor-widget-woocommerce-product-content h3,
.elementor-widget-woocommerce-product-content h4 {
	margin: 22px 0 8px;
	padding-inline-start: 10px;
	border-inline-start: 2px solid #17395e;
	color: #ffffff;
	font-size: 16px;
}

.elementor-widget-woocommerce-product-content p {
	margin: 0 0 22px;
	color: #aebcce;
	font-size: 15px;
	line-height: 2.1;
}

.elementor-widget-woocommerce-product-content li {
	margin-bottom: 10px;
	font-size: 15px;
	color: #aebcce;
}

.elementor-widget-woocommerce-product-content ol {
	margin: 0 0 20px;
	padding-inline-start: 20px;
	color: #aebcce;
	font-size: 15px;
	line-height: 2.1;
}

.elementor-widget-woocommerce-product-content strong {
	color: #ffffff;
}

.elementor-widget-woocommerce-product-content a {
	color: #ffffff;
	font-size: 15px;
	text-decoration: none;
}

.elementor-widget-woocommerce-product-content a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ==========================================================================
   جلوگیری از کشیده‌شدنِ افقیِ صفحه
   ==========================================================================
   اندازه‌گیری‌شده روی گوشیِ ۳۷۵ پیکسلی: سندِ سایت ۵۲۲ پیکسل پهنا داشت،
   یعنی ۱۴۷ پیکسل می‌شد صفحه را به پهلو کشید. مقصر کشوی سبد است؛ پنلش با
   ترنسفورم بیرونِ کادر پارک می‌شود و همان بیرون‌ماندگی سطحِ اسکرولِ سند
   را بزرگ می‌کند.

   `clip` و نه `hidden`: hidden یک ظرفِ اسکرول می‌سازد و هرچه داخلش
   position:sticky است می‌شکند — از جمله هدرِ موبایل. clip فقط می‌بُرد.
   ========================================================================== */

html {
	overflow-x: clip;
}