/* ==========================================================================
   NiloKala Theme - Main Stylesheet (Phase 1)
   پالت رنگی: گزینه ۳ - کوارال گرم + سبز تیل برای موجودی/تایید
   ========================================================================== */

:root {
	/* این‌ها Alias هستند و به توکن‌های معنایی در tokens.css اشاره می‌کنند
	   منبع اصلی رنگ فقط tokens.css است؛ این‌جا صرفاً برای عدم نیاز به بازنویسی کدهای قبلی نگه داشته شده */
	--nk-primary: var(--color-primary);
	--nk-primary-hover: var(--color-primary-hover);
	--nk-primary-light: var(--color-secondary);
	--nk-primary-bg: var(--color-secondary-hover);

	--nk-success: var(--color-success);
	--nk-success-bg: var(--color-success-bg);

	--nk-accent-soft: var(--color-warning-bg);
	--nk-accent-soft-strong: var(--color-secondary-hover);

	--nk-danger: var(--color-error);
	--nk-danger-bg: var(--color-error-bg);

	--nk-amber: var(--color-warning);

	--nk-text: var(--color-text-primary);
	--nk-text-secondary: var(--color-text-secondary);
	--nk-text-muted: var(--color-text-secondary);
	--nk-border: var(--color-border);
	--nk-bg: var(--color-background);
	--nk-surface: var(--color-surface);

	--nk-radius: var(--radius-md);
	--nk-radius-sm: var(--radius-sm);
	--nk-shadow-sm: var(--shadow-sm);
	--nk-shadow-md: var(--shadow-md);

	--nk-container: var(--container-max);
	--nk-font: var(--font-family-base);
}

/* ==========================================================================
   ریست پایه + راست‌به‌چپ
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	direction: rtl;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	max-width: 100%;
}

body {
	direction: rtl;
	text-align: right;
	font-family: var(--nk-font);
	font-weight: 400;
	color: var(--nk-text);
	background: var(--nk-bg);
	line-height: 1.8;
	font-size: 15px;
	margin: 0;
	overflow-x: hidden;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nk-font);
	font-weight: 700;
	color: var(--nk-text);
	line-height: 1.4;
	margin: 0 0 0.6em;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

/* ==========================================================================
   بردکرامب (مسیر ناوبری) - سراسری، در همه‌ی صفحات (فروشگاه، محصول، وبلاگ و...)
   عمداً این‌جا در main.css است نه shop.css، چون shop.css فقط در صفحات ووکامرس بارگذاری
   می‌شود اما بردکرامب باید در وبلاگ هم کار کند.
   ========================================================================== */
.nk-breadcrumb { padding: 14px 0; font-size: 13px; color: var(--color-text-secondary); }
.nk-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nk-breadcrumb li:not(:last-child)::after { content: "/"; margin-right: 6px; color: var(--color-border); }
.nk-breadcrumb a { color: var(--color-text-secondary); }
.nk-breadcrumb a:hover { color: var(--color-primary); }
.nk-breadcrumb [aria-current] { color: var(--color-text-primary); }

/* هم‌رنگ/هم‌فاصله‌کردنِ خروجیِ بردکرامبِ RankMath (وقتی از تنظیمات قالب فعال شود) با
   بردکرامبِ داخلیِ قالب - چون RankMath ساختار HTML و کلاس‌های خودش را دارد
   (rank-math-breadcrumb به‌جای ol/li قالب)، این‌ها جداگانه نیاز به استایل دارند. */
.nk-breadcrumb--rankmath .rank-math-breadcrumb {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-secondary);
}
.nk-breadcrumb--rankmath .rank-math-breadcrumb a { color: var(--color-text-secondary); }
.nk-breadcrumb--rankmath .rank-math-breadcrumb a:hover { color: var(--color-primary); }
.nk-breadcrumb--rankmath .rank-math-breadcrumb .separator { margin: 0 6px; color: var(--color-border); }
.nk-breadcrumb--rankmath .rank-math-breadcrumb .last { color: var(--color-text-primary); }

/* ---------- دکمه‌ی نمایش/مخفی‌کردن گذرواژه (سراسری) ----------
   خودِ ووکامرس/وردپرس این دکمه را کاملاً خالی (بدون متن) می‌سازد و برای شکل‌ظاهری‌اش
   به یک آیکون‌فونت (Dashicons) تکیه می‌کند که در فرانت‌اند لود نیست - رفع باگ («سه
   خط کوچک»/دکمه‌ی بی‌شکل): به‌جای وابستگی به یک فونت آیکون بیرونی (که با اصل «بدون
   کد/فونت خارجی» منشور فنی هم در تعارض است)، یک برچسبِ متنیِ ساده و خوانا.
   رفع باگ مورد ۲۲: این بلوک قبلاً فقط در my-account.css بود (که فقط در صفحات
   حساب‌کاربری لود می‌شود)؛ چون همین ساختارِ .password-input در تسویه‌حساب (بخش
   «ایجاد حساب کاربری») هم استفاده می‌شود اما آن‌جا my-account.css اصلاً لود
   نیست، دکمه‌ی نمایش/مخفی بدون فاصله‌ی رزروشده روی متنِ گذرواژه می‌افتاد و یک
   خطِ نامفهوم به‌نظر می‌رسید؛ انتقال به main.css (که در همه‌جای سایت لود می‌شود)
   این را برای همیشه رفع می‌کند. */
.password-input { position: relative; }
.password-input input.input-text { padding-inline-end: 68px; }
.show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 10px;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary);
}
.show-password-input::after { content: "نمایش"; }
.show-password-input.display-password::after { content: "مخفی"; }

/* صفحه‌بندی وبلاگ (the_posts_pagination) - همان استایل صفحه‌بندی فروشگاه، اما این‌جا چون
   کلاس‌های استاندارد خودِ وردپرس (نه ووکامرس) استفاده می‌شود، این فایل (main.css که در
   همه‌جای سایت بارگذاری می‌شود) محل درستی برایش است. */
.nk-pagination nav,
.nk-pagination .nav-links,
.nk-pagination .pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}
.nk-pagination a.page-numbers,
.nk-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--nk-radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-text-primary);
	font-size: 13px;
	text-decoration: none;
}
.nk-pagination span.page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.nk-pagination a.page-numbers:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

p { margin: 0 0 1em; }

a {
	color: var(--nk-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--nk-primary-hover); }

img { max-width: 100%; height: auto; display: block; }

/* کلاس‌های استاندارد ترازبندی تصویر خودِ وردپرس (خروجی ادیتور، از جمله توضیحات محصول) -
   تا امروز قالب هیچ‌کدام را تعریف نکرده بود، پس بی‌اثر بودند و در RTL هر تصویرِ این‌لاین
   پیش‌فرض به راست می‌چسبید، مستقل از تنظیم واقعی کاربر در ادیتور (رفع باگ) */
.aligncenter { display: block; margin-inline: auto; margin-block: 1em; float: none; }
.alignleft { float: left; margin: 0.4em 1em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1em; }
.alignnone { display: block; margin: 1em 0; float: none; }
figure.aligncenter, figure.alignnone { display: table; }

/* حلقه‌ی تمرکز (Focus Ring) هنگام پیمایش با صفحه‌کلید - به‌جای رنگ آبی پیش‌فرض مرورگر،
   از رنگ اصلی برند استفاده می‌شود تا با هویت بصری قالب هماهنگ باشد. عمداً از
   :focus-visible استفاده شده (نه :focus ساده) که فقط برای پیمایش با کیبورد (Tab) نشان
   داده شود، نه با کلیک ماوس - این حلقه هرگز کاملاً حذف نمی‌شود چون طبق WCAG، مسیر
   فوکوس کیبورد باید همیشه قابل‌مشاهده بماند. */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   اعلان‌های استاندارد ووکامرس (افزوده‌شدن به سبد، خطای کوپن، سبد خالی و...) -
   تا امروز هیچ استایلی نداشتند (مارک‌آپ کاملاً خام) که باعث می‌شد دکمه‌ی
   «ادامه‌ی خرید»/«بازگشت به فروشگاه» مستقیم به متن پیام بچسبد.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	font-size: var(--nk-msg-font-size, 14px);
	background: var(--color-success-bg, var(--color-background));
	color: var(--color-text-primary);
	border-inline-start: var(--nk-msg-border-width, 3px) solid var(--color-success, var(--color-primary));
}
.woocommerce-error { border-inline-start-color: var(--color-error); background: var(--color-error-bg, var(--color-background)); }
/* رفع باگ «بوردر قرمز اضافه»: خودِ ووکامرس روی این باکس‌ها tabindex="-1" و role="alert"
   می‌گذارد و برای اطلاع‌رسانی به صفحه‌خوان‌ها .focus() صدا می‌زند (رفتار استاندارد
   دسترس‌پذیری خودِ ووکامرس، نه باگ قالب) - و همین باعث می‌شد حلقه‌ی فوکوس سراسری‌مان
   (:focus-visible، به رنگ نارنجی/قرمزِ برند) دور همین باکس هم بیفتد و مثل یک بوردر
   اضافه دیده شود. چون این یک توقف‌گاه واقعیِ کیبورد (Tab) نیست، حذفِ حلقه فقط همین‌جا
   امن است و به دسترس‌پذیریِ واقعی (پیمایش با کیبورد در بقیه‌ی سایت) آسیبی نمی‌زند. */
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
	outline: none;
}

/* حالت «بوردر کامل دور تا دور» - از تنظیمات Customizer (بخش «پیام‌های ووکامرس») */
body.nk-msg-border-full .woocommerce-message,
body.nk-msg-border-full .woocommerce-info,
body.nk-msg-border-full .woocommerce-error {
	border: var(--nk-msg-border-width, 3px) solid var(--color-success, var(--color-primary));
}
body.nk-msg-border-full .woocommerce-error { border-color: var(--color-error); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-error .button.wc-forward,
.woocommerce-message .button.wc-backward,
.woocommerce-message a.restore-item {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	background: var(--btn-primary-bg, var(--color-primary));
	color: var(--btn-primary-text, #fff);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-message .button.wc-forward:hover,
.woocommerce-error .button.wc-forward:hover,
.woocommerce-message .button.wc-backward:hover,
.woocommerce-message a.restore-item:hover {
	background: var(--btn-primary-bg-hover, var(--color-primary-hover));
}
/* لینک‌های ساده‌ی داخل پیام - این‌ها دکمه نیستند، پس فقط فاصله و رنگ برند می‌گیرند
   تا از متن جدا دیده شوند، بدون این‌که شکل دکمه بگیرند. «بازگردانی؟» (restore-item)
   جدا از این قانون است چون طبق مورد ۹ باید ظاهر دکمه بگیرد (بالا استایل شده) */
.woocommerce-message a:not(.button):not(.restore-item),
.woocommerce-info a:not(.button):not(.restore-item),
.woocommerce-error a:not(.button):not(.restore-item) {
	margin-inline-start: 6px;
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* دکمه‌های +/- تعداد (جای‌گزین فلش بومی input[type=number] که روی مرورگرهای موبایل نمایش
   داده نمی‌شود) - این‌جا نگه‌داشته شده نه در shop.css، چون آیکون سبد خرید و دراورش (که هر
   کدام از قلم‌هایش همین دکمه‌ها را دارد) در همه‌ی صفحات سایت است، نه فقط صفحات فروشگاهی. */
.quantity.nk-qty-enhanced {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.quantity.nk-qty-enhanced input.qty {
	width: 32px;
	border: none;
	border-inline: 1px solid var(--color-border);
	border-radius: 0;
	padding: 6px 0;
	text-align: center;
	/* حذف فلش بومی افزایش/کاهش در همه‌ی مرورگرها - چون دکمه‌ی اختصاصی جای‌گزین آن است */
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity.nk-qty-enhanced input.qty::-webkit-outer-spin-button,
.quantity.nk-qty-enhanced input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* حالت پیش از فعال‌شدن جاوااسکریپت (یا اگر به هر دلیلی فعال نشود) - این‌طوری حتی در
   بدترین حالت (JS دیر اجرا شود یا اصلاً اجرا نشود) کاربر باکس خامِ نامرتبِ مرورگر
   (با فلش‌های پیش‌فرض بزرگ) نمی‌بیند، فقط یک ورودی ساده و تمیز، بدون دکمه‌ی +/- */
.quantity:not(.nk-qty-enhanced) input.qty {
	width: 44px;
	padding: 6px 4px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity:not(.nk-qty-enhanced) input.qty::-webkit-outer-spin-button,
.quantity:not(.nk-qty-enhanced) input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.nk-qty-btn {
	width: 26px;
	border: none;
	background: var(--color-background);
	color: var(--color-text-primary);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.nk-qty-btn:hover { background: var(--color-border); }

/* ==========================================================================
   مهار اجباری محتوای قدیمی/دستی (توضیحات محصول، مقالات وبلاگ، نظرات)
   علت: برخی محصولات/نوشته‌ها از قبل عکس‌هایی با ابعاد پیکسلی ثابت (width/height یا
   style اینلاین) دارند که از چهارچوب صفحه بیرون می‌زنند و روی موبایل باعث بهم‌ریختن
   کل متن اطراف هم می‌شوند. قالب فلتسام قبلی این را با یک قانون CSS اجباری مهار می‌کرد؛
   این‌جا هم همان راهکار با !important تکرار شده تا حتی style اینلاین صفحات قدیمی را خنثی کند.
   (گزارش تست: عکس‌های بزرگ داخل توضیحات محصول/مقالات، ریسپانسیو را می‌شکنند) */
/* ==========================================================================
   لایه‌ی محافظ جامع ریسپانسیو محتوا (معادل رفتار فلتسام)
   هدف: هر HTML که داخل توضیحات محصول/تب‌ها/مقالات/نظرات قرار می‌گیرد - فارغ از این‌که
   تصویر با ابعاد ثابت باشد، جدول عریض، iframe (ویدیوی آپارات/یوتیوب)، <pre>/کد قدیمی،
   div با width ثابت (مثل style="width:900px")، یا کلمه/لینک/شماره‌سریال خیلی بلند بدون
   فاصله - هرگز نتواند عرض صفحه را بشکند. اگر لازم شد فقط همان عنصر خاص (مثل جدول) اسکرول
   افقی مستقل بگیرد، نه کل صفحه.
   ========================================================================== */

/* فهرست مشترک تمام نواحی محتوایی که باید در برابر HTML/تصویر با ابعاد ثابت مصون بمانند.
   به‌جای تکرار این فهرست در هر قانون (که نگهداری را سخت می‌کند)، همه‌جا از همین گروه
   با :is() استفاده می‌شود؛ برای اضافه‌کردن ناحیه‌ی جدید در آینده فقط همین یک خط کافی است.
   نکته‌ی مهم: .woocommerce-variation-description (باکس توضیحات مخصوص هر متغیر محصول که
   با انتخاب متغیر به‌صورت پویا نمایش داده می‌شود) این‌جا اضافه شده - این دقیقاً همان
   حفره‌ای بود که قبلاً پوشش داده نشده بود (گزارش تست: عکس/متن داخل توضیحات متغیر از
   ریسپانسیو خارج می‌شد چون این ناحیه اصلاً در فهرست محافظت‌شده نبود). */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .comment-content, .nk-blog-main, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) img {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
}

/* قاب‌بندی عکس با کپشن (شورت‌کد قدیمی [caption] وردپرس) - تأییدشده با پیج‌سورس واقعی:
   این شورت‌کد خروجی‌اش <figure class="wp-caption" style="width: 1900px"> است که یک عرض
   پیکسلی ثابتِ مستقل از خودِ عکس دارد؛ حتی اگر عکس داخلش درست مهار شده باشد، بازهم خودِ
   قاب (figure) با آن عرض ثابت از صفحه بیرون می‌زند. این قانون مستقیماً همان قاب را هدف
   می‌گیرد - نه یک حدس، بلکه تأییدشده از DOM واقعی سایت. */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .comment-content, .nk-blog-main, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) :is(.wp-caption, .wp-block-image),
:is(.entry-content, .woocommerce-Tabs-panel) figure[id^="attachment_"] {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
}
.wp-caption img,
.wp-block-image img { max-width: 100%; height: auto; }
.wp-caption-text { max-width: 100%; box-sizing: border-box; text-align: center; font-size: 13px; color: var(--color-text-secondary); }

/* گالریِ کلاسیکِ وردپرس (شورت‌کد [gallery] - همان چیزی که از «افزودن رسانه ← ایجاد
   گالری» ساخته می‌شود). چون قالب add_theme_support('html5', ['gallery']) را فعال
   کرده، وردپرس دیگر CSS قدیمیِ ستون‌بندیِ خودش را چاپ نمی‌کند و این وظیفه‌ی خودِ
   قالب است - که تا امروز اصلاً اضافه نشده بود، برای همین همه‌ی عکس‌ها زیر هم
   (فقط عمودی) نمایش داده می‌شدند. کلاس gallery-columns-N را وردپرس بر اساس تعداد
   ستونی که هنگام ساختِ گالری انتخاب شده چاپ می‌کند. */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 24px 0;
}
.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-item { margin: 0; min-width: 0; }
.gallery-item img {
	width: 100%;
	display: block;
	border-radius: var(--radius-sm);
}
.gallery-caption {
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
	text-align: center;
}
@media (max-width: 768px) {
	/* در موبایل، صرف‌نظر از تعداد ستونی که هنگام ساختِ گالری انتخاب شده، حداکثر
	   ۲ ستون نشان داده می‌شود - وگرنه با گالری‌های ۵/۶/۷ ستونه، عکس‌ها آن‌قدر
	   ریز می‌شوند که عملاً دیده نمی‌شوند. */
	.gallery,
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* آیفریم/ویدیوی جاسازی‌شده (یوتیوب/آپارات) - نسبت تصویر پیش‌فرض ۱۶:۹ تا هم عرض کنترل شود
   و هم ارتفاع به‌طور نامتناسب صفر/فشرده نشود (روش استاندارد جای‌گزین‌شده به‌جای اتکا به
   width/height ثابت قدیمی HTML) */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) :is(iframe, embed, object) {
	max-width: 100% !important;
	width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
}

/* ویدیوهای جاسازی‌شده‌ی آپارات/یوتیوب داخل توضیحات محصول/مطلب - عرض کامل (قانون بالا)
   روی مانیتورهای بزرگ باعث می‌شد ارتفاع ویدیو (به‌نسبت ۱۶:۹) از ارتفاع دید لپ‌تاپ
   بیرون بزند؛ این‌جا عرض این دو سرویس مشخصاً محدودتر و وسط‌چین می‌شود. کد از تست
   واقعی کارفرما گرفته شده - محل درج: main.css (اگر سرویس دیگری اضافه شد، همین
   سلکتور src*="..." را به لیست زیر اضافه کنید). */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="aparat.com"],
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="youtube.com"],
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="youtu.be"] {
	width: 70% !important;
	max-width: 70% !important;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px) {
	:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="aparat.com"],
	:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="youtube.com"],
	:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) iframe[src*="youtu.be"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* عناصر خاص (فهرست محتوا/فرم‌های SCF) که در فهرست نواحی محافظت‌شده بالا نبودند و
   می‌توانستند با عرض ثابت از قاب بیرون بزنند - همان محدودسازی عرض/وسط‌چینی. */
.nilo-toc,
.scf-form-wrapper {
	width: 70% !important;
	max-width: 70% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.nilo-toc,
	.scf-form-wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* جدول‌های عریض قدیمی: به‌جای شکستن صفحه یا فشرده‌شدن ستون‌ها، خودشان مستقل اسکرول افقی
   می‌گیرند - دقیقاً رفتار فلتسام - و از قانون کلی max-width پایین معاف هستند */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) :is(table td, table th) {
	white-space: normal;
}

/* کدهای قدیمی/بلوک‌های <pre> - به‌جای اسکرول‌دادن کل صفحه، متن داخلشان می‌شکند */
:is(.entry-content, .woocommerce-Tabs-panel, .comment-content, .woocommerce-variation-description) pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	box-sizing: border-box;
}

/* لایه‌ی نهایی و قطعی: هر عنصر دیگری داخل این نواحی محتوایی (div با width ثابت اینلاین،
   span، کد قدیمی HTML و...) مجبور می‌شود در چهارچوب بماند - همان تضمین مطلقی که فلتسام
   ارائه می‌داد. جدول و سلول‌هایش عمداً از این قانون معاف‌اند چون رفتار اختصاصی خودشان
   (اسکرول افقی به‌جای فشرده‌شدن) بالاتر تعریف شده است. */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .comment-content, .nk-blog-main, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) *:not(table):not(tr):not(td):not(th):not(thead):not(tbody):not(tfoot) {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* کلمات/لینک‌ها/شماره‌سریال‌های خیلی بلند بدون فاصله - مجبور به شکستن می‌شوند تا خودشان
   به‌تنهایی عرض صفحه را نکشند */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description, .comment-content, .nk-blog-main, .woocommerce-variation-description, .nk-shop-sidebar, .nk-blog-sidebar) {
	overflow-x: hidden;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	word-break: break-word;
}

ul, ol { padding-right: 1.4em; padding-left: 0; margin: 0 0 1em; }

button, input, select, textarea {
	font-family: var(--nk-font);
	font-size: 15px;
}

/* استایل پایه‌ی سراسری دکمه‌های فرم (نه دکمه‌های آیکونی مثل همبرگر/شب-روز/پلکان تعداد که
   کلاس اختصاصی و ظاهر متفاوت خودشان را دارند) - تضمین می‌کند هر دکمه‌ی «ارسال فرم» در هر
   جای سایت (فرم دیدگاه، فرم ورود، یا هر فرم دیگری که بعداً اضافه شود) به‌طور پیش‌فرض از رنگ
   برند قالب پیروی کند، نه ظاهر خام مرورگر. */
input[type="submit"],
.woocommerce .button,
.woocommerce input.button {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border: none;
	border-radius: var(--nk-radius-sm);
	padding: 11px 24px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease;
}
input[type="submit"]:hover,
.woocommerce .button:hover,
.woocommerce input.button:hover {
	background: var(--btn-primary-bg-hover);
	color: var(--btn-primary-text);
}

/* ==========================================================================
   لایه‌بندی کلی
   ========================================================================== */

.nk-container {
	max-width: var(--nk-container);
	margin: 0 auto;
	padding: 0 20px;
}

.site-main { min-height: 40vh; }

/* ==========================================================================
   دکمه‌ها
   ========================================================================== */

.nk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: var(--radius-sm);
	border: none;
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.nk-btn:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }
.nk-btn:active { background: var(--btn-primary-bg-active); transform: scale(0.98); }

.nk-btn--outline {
	background: var(--btn-secondary-bg);
	border: 1.5px solid var(--btn-secondary-border);
	color: var(--btn-secondary-text);
}
.nk-btn--outline:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text-hover); border-color: var(--btn-secondary-bg-hover); }

.nk-btn--sm { padding: 7px 16px; font-size: 13px; }

/* ==========================================================================
   هدر
   ========================================================================== */

.nk-header-top {
	background: var(--nk-primary);
	color: #fff;
	font-size: 13px;
	padding: 6px 0;
}
.nk-header-top .nk-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nk-header-top a { color: #fff; opacity: 0.9; }
.nk-header-top a:hover { opacity: 1; }

.nk-header-main {
	background: var(--nk-header-bg, var(--nk-surface));
	border-bottom: 1px solid var(--nk-border);
	padding: 16px 0;
	position: sticky;
	top: 0;
	/* رفع باگ (مورد ۲، سومین تلاش - این‌بار درست): دو تلاش قبلی (z-index روی کل هدر،
	   یا فقط روی دکمه) هر دو غلط بودند - یا لوگو/جستجو روی منوی باز می‌افتاد، یا
	   اصلاً کار نمی‌کرد (چون position:sticky+z-index این عنصر یک Stacking Context
	   می‌سازد که فرزندان نمی‌توانند از سقفش بیرون بزنند). راه‌حل درستِ استاندارد که
	   کشوی سبد خرید هم از اول همین را داشت: هدر اصلاً لازم نیست بالاتر از منوی باز
	   برود - یک دکمه‌ی بستن مستقل داخل خودِ کشوی منو (nk-header-nav-close) اضافه شد
	   که در Stacking Context خودِ کشو (z-index:999) است، نه هدر. z-index هدر به
	   مقدار اصلی برگشت. */
	z-index: 100;
}
.nk-header-main .nk-container {
	display: flex;
	align-items: center;
	gap: 24px;
}
/* ترتیب صریح چون دکمه‌ی حالت شب/روز دیگر داخل .nk-header-actions نیست (برای رفع
   باگ چیدمان موبایل - پایین‌تر را ببینید)؛ این‌جا فقط همان ترتیب قبلی دسکتاپ را
   با order صریح نگه می‌داریم تا آن تغییرِ ساختاری روی دسکتاپ اثر نبیند. */
.nk-logo { order: 1; }
.nk-search-wrap { order: 2; }
#nk-dark-mode-header-slot { order: 3; }
.nk-header-actions { order: 4; }
.nk-mobile-toggle { order: 5; }

.nk-logo img { max-height: 48px; width: auto; }
.nk-logo { flex-shrink: 0; }

.nk-search-wrap {
	position: relative;
	flex: 1;
	max-width: 600px;
}
.nk-search-form {
	display: flex;
	align-items: stretch;
	height: 44px;
	border: 1.5px solid var(--nk-border);
	border-radius: 22px;
	background: var(--nk-surface);
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.nk-search-form:focus-within { border-color: var(--nk-primary); }
.nk-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--nk-text);
	padding: 0 6px 0 16px;
	outline: none;
	appearance: none;
}
.nk-search-form input[type="search"]::-webkit-search-decoration,
.nk-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.nk-search-form button {
	flex-shrink: 0;
	width: 44px;
	border: none;
	background: var(--nk-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.nk-search-form button:hover { background: var(--nk-primary-hover); }
.nk-search-form button .nk-icon { width: 18px; height: 18px; }

.nk-search-results {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	background: var(--nk-surface);
	border: 1px solid var(--nk-border);
	border-radius: var(--nk-radius);
	box-shadow: var(--nk-shadow-md);
	max-height: 400px;
	overflow-y: auto;
	z-index: 200;
}
.nk-search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: var(--nk-text);
	border-bottom: 1px solid var(--nk-border);
}
.nk-search-item:last-child { border-bottom: none; }
.nk-search-item:hover { background: var(--nk-primary-bg); }
.nk-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--nk-radius-sm); flex-shrink: 0; }
.nk-search-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nk-search-item-title {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nk-search-item-price { font-size: 12px; color: var(--nk-primary); font-weight: 700; }
.nk-search-empty { padding: 16px; text-align: center; color: var(--nk-text-muted); font-size: 13px; }

.nk-header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: auto;
}
.nk-header-actions a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--nk-text);
	font-size: 12px;
	position: relative;
}
.nk-header-actions a:hover { color: var(--nk-primary); }

#nk-dark-mode-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	padding: 4px;
}
#nk-dark-mode-toggle .nk-icon-moon { display: block; }
#nk-dark-mode-toggle .nk-icon-sun { display: none; }
[data-theme="dark"] #nk-dark-mode-toggle .nk-icon-moon { display: none; }
[data-theme="dark"] #nk-dark-mode-toggle .nk-icon-sun { display: block; }
/* برچسب متنی فقط وقتی دکمه داخل منوی موبایل است دیده می‌شود (نه در ردیف هدر دسکتاپ
   که همان tooltip کافی است) - نمایش/مخفی‌شدنش دقیقاً مثل دو آیکون بالا، بر اساس حالت روشن/تاریک */
.nk-dark-mode-label { display: none; }
.nk-mobile-quicklinks #nk-dark-mode-toggle .nk-dark-mode-label-off { display: inline; }
.nk-mobile-quicklinks #nk-dark-mode-toggle .nk-dark-mode-label-on { display: none; }
[data-theme="dark"] .nk-mobile-quicklinks #nk-dark-mode-toggle .nk-dark-mode-label-off { display: none; }
[data-theme="dark"] .nk-mobile-quicklinks #nk-dark-mode-toggle .nk-dark-mode-label-on { display: inline; }
.nk-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.nk-header-actions a .nk-icon { width: 22px; height: 22px; }

.nk-cart-count {
	position: absolute;
	top: -6px;
	left: -8px;
	background: var(--nk-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* مورد ۱۲: کارفرما فقط در موبایل مشکلِ همپوشانی با دسته‌ی آیکون سبد را گزارش داد؛
   دسکتاپ (-6px) از قبل درست بود، پس فقط برای موبایل جداگانه بالاتر می‌رود. */
@media (max-width: 768px) {
	.nk-cart-count { top: -10px; }
}

.nk-mobile-quicklinks { display: none; }

.nk-header-nav {
	background: var(--nk-menu-bg, var(--nk-primary-bg));
	border-bottom: 1px solid var(--nk-border);
}
.nk-header-nav-close-row { display: none; }
/* از این پس هدر هم منوی دسکتاپ («primary») و هم منوی اختصاصی موبایل («mobile», اگر تنظیم
   شده باشد) را در HTML دارد؛ فقط یکی از این دو بسته به اندازه‌ی صفحه نمایش داده می‌شود -
   رفع باگ #۳ (منوی موبایل قبلاً اصلاً استفاده نمی‌شد و همیشه منوی هدر عادی نشان داده می‌شد) */
.nk-nav-mobile { display: none; }
@media (max-width: 768px) {
	.nk-nav-desktop { display: none; }
	.nk-nav-mobile { display: block; }
}
.nk-header-nav ul {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* این قاعده دوباره اختصاصیت عادی خودش را دارد (نه :where) - چون خودِ متن آیتم‌های
   سطح اول منو (مثل «مهندسی») باید همین رنگ را بگیرد. برای این‌که استایل‌های داخلی
   مگامنو (عنوان ستون، لینک‌های زیرمجموعه) با این قاعده تداخل نکنند، آن‌ها را در
   mega-menu.css با یک کلاس والد اضافه (`.nk-mm-panel ...`) اختصاصی‌تر کرده‌ایم -
   نه با ضعیف‌کردن این قاعده‌ی عمومی (تجربه‌ی قبلی نشان داد ضعیف‌کردن این قاعده
   خودش باعث برنده‌شدن یک قاعده‌ی نامرتبطِ سوم - `a { color: var(--nk-primary) }` -
   می‌شود که عوارض جانبی غیرمنتظره دارد). */
.nk-header-nav li a {
	display: block;
	padding: 12px 16px;
	color: var(--nk-mm-header-color, var(--nk-text));
	font-weight: 700;
	font-size: var(--nk-mm-header-size, 14px);
}
.nk-header-nav li a:hover { color: var(--nk-primary); }
.nk-header-nav li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-right: 6px;
}

/* ==========================================================================
   فوتر
   ========================================================================== */

.nk-footer {
	background: var(--nk-footer-bg, #2C2C2A);
	color: var(--nk-footer-text, #D3D1C7);
	margin-top: 36px;
	padding: 50px 0 0;
	font-size: 14px;
}
.nk-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-widget-title {
	color: var(--nk-footer-text, #D3D1C7);
	font-size: 16px;
	margin-bottom: 16px;
}
.nk-footer a { color: var(--nk-footer-text, #D3D1C7); }
.nk-footer a:hover { color: var(--nk-primary-light); }
.nk-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* آیتم سطح اول: وزن بصری واضح‌تر از زیرمنو - تا سلسله‌مراتب حتی بدون تعامل (هاور/کلیک)
   در نگاه اول خوانده شود، نه یک لیست تخت و بی‌تفاوت */
.nk-footer-menu > li > a {
	font-weight: 700;
	font-size: 14px;
	opacity: 0.95;
	letter-spacing: 0.01em;
}
.nk-footer-menu a { color: var(--nk-footer-text, #D3D1C7); transition: opacity 0.15s ease, color 0.15s ease; }
.nk-footer-menu a:hover { opacity: 1; color: var(--nk-primary-light); }
/* فوتر عمداً از سیستم تعاملی مگامنو/آکاردئون استفاده نمی‌کند (آن فقط داخل نوار اصلی منوست)؛
   زیرمنو در فوتر همیشه یک لیست ساده و تورفته می‌ماند - دقیقاً مثل الگوی معمول «لینک‌های
   مفید» در اکثر قالب‌های فروشگاهی حرفه‌ای. برای این‌که این تورفتگی، به‌جای شبیه‌بودن به
   حالت باز موبایل، واضحاً «زیرمجموعه» بودن را نشان دهد، یک خط راهنمای عمودی کم‌رنگ در
   سمت شروع (inline-start) هر گروه اضافه شده - نشانه‌ی بصری رایج برای گروه‌بندی لینک‌ها. */
.nk-footer-menu .sub-menu {
	list-style: none;
	margin: 8px 0 0;
	padding-inline-start: 14px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.nk-footer-menu .sub-menu a { font-size: 12.5px; font-weight: 400; opacity: 0.7; }

/* ردیف آیکون‌های شبکه‌های اجتماعی (فوتر) */
.nk-social-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nk-social-links-title { color: var(--nk-footer-text, #D3D1C7); font-size: 14px; font-weight: 700; }
.nk-social-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nk-social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: var(--nk-footer-text, #D3D1C7);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nk-social-icons a:hover { background: var(--nk-primary); color: #fff; transform: translateY(-2px); }
.nk-social-icons .nk-icon { width: 18px; height: 18px; }

/* آیکون‌های شبکه‌های اجتماعی که به‌صورت لوگوی PNG رسمی (mask-image) هستند - روبیکا/ایتا/بله؛
   با currentColor هم‌رنگ بقیه‌ی آیکون‌ها می‌مانند و در حالت هاور/دارک مود خودکار رنگ عوض می‌کنند. */
.nk-icon-mask {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-image: var(--nk-icon-mask-src);
	mask-image: var(--nk-icon-mask-src);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ==========================================================================
   راهنمای هاور سبک (فقط دسکتاپ - روی موبایل/تاچ اصلاً نمایش داده نمی‌شود)
   کاربرد: class="nk-tooltip" + data-tooltip="متن راهنما"
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
	.nk-tooltip { position: relative; }
	.nk-tooltip::after {
		content: attr(data-tooltip);
		position: absolute;
		bottom: calc(100% + 8px);
		right: 50%;
		transform: translateX(50%) translateY(4px);
		/* رنگ تولتیپ عمداً ثابت است و به توکن‌های حالت شب/روز وابسته نیست (باگ قبلی: در حالت
		   تاریک، پس‌زمینه‌ی تولتیپ با متغیر --nk-text روشن می‌شد و متن سفید رویش دیده نمی‌شد) */
		background: #1a1a1a;
		color: #ffffff;
		font-size: 12px;
		white-space: nowrap;
		padding: 4px 10px;
		border-radius: var(--nk-radius-sm, 6px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.15s ease, transform 0.15s ease;
		z-index: 50;
	}
	.nk-tooltip:hover::after,
	.nk-tooltip:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateX(50%) translateY(0);
	}
}

.nk-footer-credits {
	text-align: center;
	padding-top: 16px;
	font-size: 12px;
	color: var(--nk-footer-text, #D3D1C7);
	opacity: 0.65;
}
.nk-footer-bottom {
	text-align: center;
	padding: 20px 0;
	font-size: 13px;
	color: var(--nk-footer-text, #D3D1C7);
	opacity: 0.65;
}

/* ==========================================================================
   کارت محصول - همیشه بارگذاری می‌شود (نه فقط shop.css) چون در صفحه اصلی
   و هر شورت‌کد محصول در هر صفحه‌ای ممکن است استفاده شود
   ========================================================================== */

.nk-product-card {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
}
.nk-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.nk-product-media { position: relative; background: var(--color-background); aspect-ratio: 1; overflow: hidden; }
.nk-product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.nk-product-card:hover .nk-product-media img { transform: scale(1.05); }

.nk-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	z-index: 2;
	color: #fff;
}
.nk-badge--sale { background: var(--color-error); }
.nk-badge--outofstock { background: var(--color-text-secondary); }

.nk-product-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nk-product-title-link { color: inherit; }
.nk-product-title {
	font-size: 13px;
	font-weight: 400;
	margin: 0;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.nk-product-price { font-size: 15px; font-weight: 700; color: var(--color-text-primary); margin-top: auto; }
.nk-product-price del { display: block; color: var(--color-text-secondary); font-weight: 400; font-size: 12px; text-decoration: line-through; margin-bottom: 2px; }
.nk-product-price ins { display: block; text-decoration: none; }
.nk-product-cta { margin-top: 6px; }
.nk-product-cta .nk-btn { width: 100%; background: var(--color-primary); }
.nk-product-cta .nk-btn:hover { background: var(--color-primary-hover); }
.nk-product-cta .added_to_cart { display: block; text-align: center; font-size: 12px; margin-top: 6px; }

/* ستاره‌های امتیاز - هر ستاره جدا رسم می‌شود؛ درصد پرشدن هرکدام از PHP می‌آید (نه اندازه‌گیری عرض متن) */
.star-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 2px 0;
}
.star-rating .nk-star {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
}
.star-rating .nk-star::before {
	content: "★";
	position: absolute;
	inset: 0;
	color: var(--color-border);
}
.star-rating .nk-star::after {
	content: "★";
	position: absolute;
	inset: 0;
	color: var(--color-warning);
	width: var(--nk-star-fill, 0%);
	overflow: hidden;
	white-space: nowrap;
}

/* گرید عمومی محصولات - هرجا ووکامرس ul.products رندر کند (صفحه اصلی، آرشیو، شورت‌کد، مرتبط) */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product { margin: 0; }

@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* دکمه‌های کارت محصول (افزودن به سبد/انتخاب گزینه‌ها) در موبایل کوچک‌تر و متناسب */
	.nk-product-info { padding: 10px 12px; }
	.nk-product-cta .nk-btn {
		padding: 8px 6px;
		font-size: 11.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.nk-product-title { font-size: 12.5px; }
}

/* ==========================================================================
   بخش‌های صفحه اصلی
   ========================================================================== */

.nk-hero {
	background: var(--nk-accent-soft);
	border-radius: var(--nk-radius);
	padding: 50px 40px;
	margin: 24px 0;
	text-align: center;
}
.nk-hero h1 { color: var(--nk-primary-hover); }

.nk-section { padding: 24px 0; }
.nk-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.nk-section-title h2 { margin: 0; }
.nk-section-title a { font-size: 14px; font-weight: 700; }

.nk-grid {
	display: grid;
	/* auto-fill (نه auto-fit): وقتی صفحه‌ی آخر فقط ۱ یا ۲ آیتم دارد، آن‌ها به‌جای کش‌آمدن
	   و پر کردن کل عرض ردیف، همان عرض ستون عادی را حفظ می‌کنند - رفع باگ #۳ (مقاله‌ی تمام‌عرض
	   در صفحه‌ی آخر وبلاگ) */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

/* حالت «تک‌ستونه» (Customizer ← وبلاگ ← چیدمان کارت‌های وبلاگ) - مثل نمونه‌های فلتسام/وودمارت،
   مقالات تمام‌عرض و زیر هم، با عرض محدود برای خوانایی بهتر */
body.nk-blog-layout-list .nk-grid {
	grid-template-columns: 1fr;
	max-width: 760px;
	margin-inline: auto;
	gap: 28px;
}

/* ==========================================================================
   واکنش‌گرا
   ========================================================================== */

/* ==========================================================================
   Overlay مشترک (منوی موبایل + فیلتر فروشگاه) - همیشه fixed/مخفی، در هیچ گریدی جا نمی‌گیرد
   ========================================================================== */
.nk-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 998;
}
.nk-nav-overlay.is-open { display: block; }

/* ==========================================================================
   دکمه همبرگری موبایل
   ========================================================================== */

.nk-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.nk-mobile-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--nk-text);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nk-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nk-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nk-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   بازگشت به بالا
   ========================================================================== */

.nk-back-to-top {
	position: fixed;
	bottom: 24px;
	left: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--nk-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--nk-shadow-md);
	z-index: 300;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.nk-back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.nk-back-to-top:hover { background: var(--nk-primary-hover); }
.nk-back-to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   واکنش‌گرا (Mobile-First از این‌جا به بعد در فازهای بعدی)
   ========================================================================== */

@media (max-width: 1024px) {
	.nk-header-main .nk-container { flex-wrap: wrap; gap: 12px 16px; }
	.nk-search-wrap { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 768px) {

	/* رفع باگ (مورد ۳): قبلاً این نوار در کل موبایل مخفی بود؛ طبق درخواست کارفرما فقط
	   در صفحات سبد خرید/تسویه‌حساب مخفی می‌ماند (کلاس‌های استاندارد بادی ووکامرس) و در
	   بقیه‌ی صفحات (صفحه اصلی، فروشگاه، تک‌محصول و...) در موبایل هم دیده می‌شود. */
	body.woocommerce-cart .nk-header-top,
	body.woocommerce-checkout .nk-header-top { display: none; }

	/* رفع باگ (مورد ۳ جدید): لینک «ورود/عضویت» در نوار بالا روی موبایل با لینک
	   «حساب من» داخل خودِ منوی همبرگری (nk-mobile-quicklinks) تکراری است - فقط
	   متن اعلان می‌ماند، این لینک در موبایل مخفی می‌شود. */
	.nk-header-top .nk-container span:last-child { display: none; }

	/* درخواست کارفرما: متن اعلان بالای سایت در موبایل وسط‌چین باشد (دسکتاپ همچنان
	   راست‌چین/space-between می‌ماند چون این قانون فقط داخل مدیای ۷۶۸px است).
	   نکته‌ی فنی: چون متن در موبایل به چند خط می‌شکند، صرفِ وسط‌چین‌کردنِ جعبه‌ی
	   span با justify-content کافی نیست (جعبه از قبل تقریباً کل عرض را پر می‌کند)؛
	   باید متن داخل خودِ span هم text-align:center بگیرد تا هر خط جداگانه وسط
	   بیفتد - این رفع باگ (نسخه‌ی قبلی وسط‌چین نمی‌شد چون فقط جعبه هدف قرار گرفته بود). */
	.nk-header-top .nk-container { justify-content: center; }
	.nk-header-top .nk-container span:first-child { text-align: center; }

	/* چیدمان تازه‌ی موبایل (طبق درخواست کارفرما): همبرگری راست، لوگو دقیقاً وسط
	   (هم افقی هم عمودی)، سبد چپ، جستجو در ردیف دوم. رفع باگ: نسخه‌ی قبلی با
	   position:absolute روی لوگو کار می‌کرد، اما چون کانتینر با flex-wrap دو ردیفه
	   می‌شد (ردیف اول: همبرگری/لوگو/سبد، ردیف دوم: جستجو)، «موقعیت ایستای» لوگوی
	   absolute نسبت به کل کانتینر دو ردیفه حساب می‌شد نه فقط ردیف خودش - نتیجه:
	   لوگو از نظر عمودی پایین‌تر از حد انتظار می‌افتاد و پشت جستجو می‌رفت. حالا با
	   CSS Grid و دو ردیف/سه ستون مشخص، هر عنصر دقیقاً در سلول خودش می‌ماند - بدون
	   حدس یا وابستگی به عرض/ارتفاع اجزای کناری. */
	.nk-header-main .nk-container {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 12px 14px !important;
	}
	.nk-mobile-toggle { grid-column: 1; grid-row: 1; display: flex; flex-shrink: 0; }
	.nk-logo { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; }
	/* جای دکمه‌ی شب/روز موبایل حالا داخل منوی همبرگری است (main.js آن را منتقل
	   می‌کند)؛ این جای‌خالی در ردیف هدر دیگر محتوایی ندارد. */
	#nk-dark-mode-header-slot { display: none; }
	.nk-header-actions { grid-column: 3; grid-row: 1; justify-self: end; min-width: 0; flex-shrink: 1; }
	.nk-search-wrap { grid-column: 1 / -1; grid-row: 2; }

	/* لوگو نباید فضای بیش از حد بگیرد تا آیکون سبد خرید و همبرگری مجبور به رفتن به خط دوم نشوند
	   (گزارش تست: در مرورگر فایرفاکس موبایل، منوی همبرگری به خط دوم می‌رفت) */
	.nk-logo img { max-height: 40px; }
	.nk-header-actions { gap: 10px; margin-right: 0; }
	/* رفع باگ: قبلاً span:last-child بود که در «.nk-cart-link» واقعاً به بج شمارنده
	   می‌خورد (چون آخرین span همان بج است، نه برچسب متنی) - نتیجه: بج تعداد در موبایل
	   مخفی می‌شد ولی متن «سبد خرید» جا می‌ماند، دقیقاً برعکس هدف. حالا کلاس اختصاصی
	   برچسب را هدف می‌گیریم تا مستقل از ترتیب/تعداد span های داخل لینک باشد. */
	.nk-header-actions a .nk-action-label { display: none; } /* فقط آیکون، بدون برچسب متنی روی موبایل */
	/* در موبایل فقط آیکون سبد خرید در نوار بالا می‌ماند (حساب/علاقه‌مندی از داخل منوی همبرگری در دسترس است) تا فضا برای همبرگری کافی باشد */
	.nk-header-actions a:not(.nk-cart-link) { display: none; }

	.nk-mobile-quicklinks {
		/* رفع باگ: آخرین آیتم فهرست منو (.nk-header-nav li a) از قبل border-bottom
		   دارد؛ این border-top اضافه، دقیقاً همان‌جا یک خط دوم و چسبیده ایجاد می‌کرد.
		   فاصله‌ی بصری صرفاً با margin-top حفظ می‌شود، بدون خط تکراری. */
		display: flex;
		flex-direction: column;
		margin-top: 8px;
	}
	.nk-mobile-quicklinks a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 20px;
		border-bottom: 1px solid var(--nk-border);
		color: var(--nk-text);
	}
	.nk-mobile-quicklinks .nk-icon { width: 18px; height: 18px; }
	.nk-mobile-quicklinks #nk-dark-mode-toggle {
		width: 100%;
		padding: 14px 20px;
		border-bottom: 1px solid var(--nk-border);
		color: var(--nk-text);
		font-size: 14px;
		gap: 10px;
	}

	.nk-header-nav {
		position: fixed;
		top: 0;
		right: -280px;
		width: 280px;
		height: 100%;
		background: var(--nk-surface);
		box-shadow: var(--nk-shadow-md);
		transition: right 0.25s ease;
		overflow-y: auto;
		z-index: 999;
	}
	.nk-header-nav.is-open { right: 0; }
	.nk-header-nav .nk-container { padding: 20px 0; }
	.nk-header-nav ul { flex-direction: column; gap: 0; }
	.nk-header-nav li a { padding: 14px 20px; border-bottom: 1px solid var(--nk-border); }

	/* دکمه‌ی بستنِ مستقلِ داخلِ کشوی منو (مورد ۲) - همان سایز/استایلِ دکمه‌ی بستنِ
	   سبد خرید (۴۰×۴۰) تا هر دو دکمه یک ظاهر یکسان و قابل‌لمس داشته باشند. چون خودِ
	   دکمه در Stacking Context کشو (z-index:999) قرار دارد، هیچ‌وقت زیرِ Overlay یا
	   پشتِ لوگوی هدر گم نمی‌شود - محدودیتِ راه‌حل‌های قبلی این‌جا اصلاً وجود ندارد. */
	.nk-header-nav-close-row {
		display: flex;
		justify-content: flex-end;
		padding: 12px 12px 0;
	}
	.nk-header-nav-close {
		background: none;
		border: none;
		line-height: 1;
		cursor: pointer;
		color: var(--nk-text-secondary, var(--nk-text));
		width: 40px;
		height: 40px;
		border-radius: var(--nk-radius-sm, 8px);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.nk-header-nav-close .nk-icon { width: 20px; height: 20px; }
	.nk-header-nav-close:hover { background: var(--nk-background, var(--nk-primary-bg)); }

	.nk-hero { padding: 30px 20px; }
	.nk-hero h1 { font-size: 22px; }

	.nk-grid { grid-template-columns: 1fr; gap: 16px; }

	.nk-back-to-top { bottom: 20px; left: 12px; width: 40px; height: 40px; }

	/* روی صفحه‌ی تک‌محصول در موبایل، نوار ثابت «افزودن به سبد» پایین صفحه را اشغال می‌کند؛
	   دکمه‌ی بازگشت به بالا باید بالاتر از آن باشد تا رویش نیفتد (طبق گزارش تست - عکس ۶۱ و ۷۰).
	   ارتفاع --nk-sticky-cart-h به‌صورت پویا با جاوااسکریپت اندازه‌گیری می‌شود چون در محصولاتی
	   که قیمت آن‌ها به‌صورت «بازه» (دو خطی) نمایش داده می‌شود، نوار بلندتر می‌شود. */
	body.single-product .nk-back-to-top { bottom: calc(var(--nk-sticky-cart-h, 64px) + 20px); }

	/* وقتی نوار ثابت خرید فعال است، پایین صفحه (شامل فوتر و ردیف شبکه‌های اجتماعی) به همان اندازه
	   جا باز می‌کند تا نوار هیچ‌وقت رویش نیفتد - فارغ از اینکه قیمت تک‌خطی باشد یا بازه‌ای/دوخطی. */
	body.nk-sticky-cart-active { padding-bottom: var(--nk-sticky-cart-h, 64px); }
}

@media (max-width: 480px) {
	.nk-container { padding: 0 16px; }
	.nk-grid { grid-template-columns: 1fr; gap: 10px; }
	h1 { font-size: 22px; }
	h2 { font-size: 19px; }
}

/* ==========================================================================
   سایدبار وبلاگ (آرشیو + تک‌نوشته)
   ========================================================================== */
.nk-blog-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: start;
}
.nk-blog-layout.nk-blog-layout--no-sidebar { grid-template-columns: 1fr; }
/* سایدبار وبلاگ باید سمت راست باشد (هماهنگ با سایدبار فروشگاه)؛ چون در HTML به‌درستی بعد
   از محتوای اصلی می‌آید (برای ترتیب منطقی صفحه‌خوان‌ها/سئو)، این‌جا با order آن را بدون
   دست‌زدن به ترتیب واقعی سند، به ستون اول (راست در راست‌به‌چپ) منتقل می‌کنیم. */
/* لایه‌ی محافظِ نهایی (مورد ۳۳): حتی اگر یکی از قوانینِ بالا به هر دلیلی (کلاسِ ناشناخته‌ی
   یک ابزارکِ جدید/بلوکی، اسکریپتِ شخصِ ثالث و...) چیزی را نپوشاند، این backstop تضمین
   می‌کند خودِ کانتینرِ سایدبار هرگز از عرضِ تعریف‌شده‌اش عریض‌تر دیده نشود - دقیقاً همان
   فلسفه‌ی «هیچ‌چیز نباید عرض صفحه را بشکند» که روی html/body (بالای همین فایل) هم
   پیاده شده. */
.nk-shop-sidebar,
.nk-blog-sidebar {
	overflow-x: hidden;
	max-width: 100%;
	min-width: 0;
}
.nk-blog-sidebar { order: -1; }
.nk-blog-widget { background: var(--nk-surface); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 18px; margin-bottom: 20px; }
.nk-blog-widget-title { font-size: 15px; margin: 0 0 12px; }

/* ==========================================================================
   استایل ابزارک‌های استاندارد خودِ وردپرس (نوشته‌های اخیر، دیدگاه‌های اخیر، دسته‌بندی‌ها،
   بایگانی، ابر برچسب، جست‌وجو) - تا امروز هیچ استایلی نداشتند و با ظاهر خام و پیش‌فرض
   مرورگر (فهرست تودرتو با اسکرول ناخواسته) نمایش داده می‌شدند.
   ========================================================================== */
.nk-blog-widget ul { list-style: none; margin: 0; padding: 0; }
.nk-blog-widget ul ul { padding-inline-start: 16px; margin-top: 6px; }
.nk-blog-widget li { padding: 8px 0; border-bottom: 1px solid var(--nk-border); font-size: 13.5px; line-height: 1.6; }
.nk-blog-widget li:last-child { border-bottom: none; }
.nk-blog-widget li a { color: var(--nk-text); }
.nk-blog-widget li a:hover { color: var(--nk-primary); }
.nk-blog-widget .wp-block-comment-content,
.nk-blog-widget .comment-author-link { display: inline; }
.nk-blog-widget select { width: 100%; padding: 8px 10px; border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); background: var(--nk-bg); color: var(--nk-text); }
.nk-blog-widget .search-form { display: flex; gap: 6px; }
.nk-blog-widget .search-form input[type="search"] { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); }
.nk-blog-widget .tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.nk-blog-widget .tagcloud a {
	font-size: 12px !important;
	padding: 4px 10px;
	border: 1px solid var(--nk-border);
	border-radius: var(--nk-radius-pill, 999px);
	color: var(--nk-text);
}
.nk-blog-widget .tagcloud a:hover { background: var(--nk-primary); color: #fff; border-color: var(--nk-primary); }
.nk-blog-widget .rss-date { display: block; font-size: 11px; color: var(--nk-text-muted); }

/* جمع‌وجورکردن محتوای ابزارک‌های رایج (نظرات اخیر، نوشته‌های اخیر با تصویر بندانگشتی) که
   بدون این محدودیت‌ها می‌توانند بیش‌ازحد بزرگ/دارای اسکرول داخلی به‌نظر برسند */
.nk-blog-widget img { max-width: 100%; height: auto; border-radius: var(--nk-radius-sm); }
.nk-blog-widget .avatar { width: 32px; height: 32px; border-radius: 50%; float: right; margin-inline-start: 8px; }
.nk-blog-widget li { overflow: hidden; overflow-wrap: break-word; }
/* اگر ابزارک نظرات اخیر متن طولانی نمایش دهد، فقط ۲ خط نشان داده شود */
.nk-blog-widget .wp-block-comment-content,
.nk-blog-widget .comment-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	color: var(--nk-text-muted);
	margin-top: 4px;
}

@media (max-width: 900px) {
	.nk-blog-layout { grid-template-columns: 1fr; }
	.nk-blog-sidebar { order: 2; }
}

/* ==========================================================================
   فرم دیدگاه/نظر - مشترک بین وبلاگ (comment_form پیش‌فرض وردپرس) و نظرات
   محصول ووکامرس (که هر دو با همان #respond هسته‌ی وردپرس رندر می‌شوند).
   عمداً این‌جا (main.css که در همه‌ی صفحات لود می‌شود) نگه‌داشته شده، نه در
   shop.css (که فقط در صفحات فروشگاهی لود می‌شود) - چون فرم دیدگاه وبلاگ باید
   بدون بارگذاری هیچ فایل اضافی، همین ظاهر یکدست را داشته باشد (رفع مغایرت
   بین ظاهر فرم نظر محصول و فرم دیدگاه وبلاگ).
   ========================================================================== */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--nk-border);
	border-radius: var(--nk-radius-sm);
	background: var(--nk-surface);
	color: var(--nk-text);
	font: inherit;
}
#respond textarea { min-height: 120px; resize: vertical; }

/* لیبل همیشه بالای فیلد - قبلاً به‌صورت اتفاقی (و شکننده) فقط با سرریزشدنِ
   عرض ۱۰۰٪ اینپوت به خط بعد می‌رفت؛ این‌جا صریحاً و پایدار همین رفتار را
   تضمین می‌کنیم، مستقل از طول متن ترجمه یا عرض کانتینر */
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--nk-text);
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
	margin-bottom: 16px;
}
#respond .required { color: var(--nk-danger); }

/* لینک «پاسخ» زیر هر دیدگاه - عمداً به سمت چپ (انتهای خط در RTL) منتقل شده، چون هنگام
   اسکرول با انگشت در محتوای فارسی/راست‌چین دست کاربر معمولاً نزدیک سمت راست صفحه حرکت
   می‌کند و برخورد تصادفی با این لینک محتمل است. اینجا (main.css که در همه‌جا از جمله
   پست‌های وبلاگ لود می‌شود) گذاشته شده، نه shop.css که فقط در صفحات فروشگاهی لود می‌شود.
   .reply یک ظرف block با تنها یک لینک اینلاین داخلش است، پس فقط با text-align روی خودِ
   ظرف، لینک بدون نیاز به float جابه‌جا می‌شود. */
.comment .reply { text-align: end; margin-top: 4px; }