/* تب «اشتراک من» در حساب کاربری — کارت سفید پشت کل محتوا (هم‌راستا با بقیه‌ی
   تب‌های حساب کاربری)، هدر برجسته با دکمه‌ی خرید/ارتقا، بنر هشدار، دو گروه آمار
   (رایگان/اشتراکی)، اطلاعات دوره، و تاریخچه‌ی خرید. */
.sndk-gd-my-subscription {
	direction: rtl;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	padding: 24px;
}

/* هدر: سطح فعلی + دکمه‌ی برجسته‌ی خرید/ارتقا — اولین چیزی که دیده می‌شود */
.sndk-gd-sub-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.sndk-gd-sub-header-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sndk-gd-sub-header-label {
	color: #888;
	font-size: 0.82em;
}

.sndk-gd-sub-header-tier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.4em;
	font-weight: 800;
	color: #1f2937;
}

.sndk-gd-sub-header-tier .dashicons {
	color: #d4a017;
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.sndk-gd-sub-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #3a86d6, #2e75b6);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 1em;
	padding: 13px 26px;
	border-radius: 30px;
	box-shadow: 0 3px 10px rgba(46, 117, 182, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.sndk-gd-sub-cta-btn:hover {
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(46, 117, 182, 0.4);
}

.sndk-gd-sub-cta-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* بنر هشدار پایان نزدیک اشتراک */
.sndk-gd-sub-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff8e8;
	border: 1px solid #ffe4ab;
	border-inline-start: 4px solid #d4a017;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	color: #6b4c00;
	font-size: 0.92em;
	line-height: 1.9;
}

.sndk-gd-sub-warning .dashicons {
	color: #d4a017;
	flex-shrink: 0;
	margin-top: 2px;
}

.sndk-gd-sub-warning a {
	color: #a3670a;
	font-weight: 700;
	text-decoration: underline;
}

/* دو گروه آمار: رایگان / اشتراکی، هرکدام با پس‌زمینه‌ی ملایم مخصوص خودش */
.sndk-gd-sub-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 18px;
}

.sndk-gd-sub-group {
	flex: 1 1 320px;
	background: #f9fafb;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 16px;
}

.sndk-gd-sub-group--accent {
	background: #fffaf0;
	border-color: #f5e3b3;
}

.sndk-gd-sub-group-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 0.95em;
	font-weight: 700;
	color: #444;
}

.sndk-gd-sub-group-title .dashicons {
	color: #2e75b6;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.sndk-gd-sub-group--accent .sndk-gd-sub-group-title .dashicons {
	color: #d4a017;
}

.sndk-gd-sub-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sndk-gd-sub-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 150px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 10px 12px;
}

.sndk-gd-sub-stat-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eef4fb;
	color: #2e75b6;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sndk-gd-sub-group--accent .sndk-gd-sub-stat-icon {
	background: #fbf1d8;
	color: #b8860b;
}

.sndk-gd-sub-stat-body {
	display: flex;
	flex-direction: column;
}

.sndk-gd-sub-stat-label {
	color: #888;
	font-size: 0.76em;
	margin-bottom: 2px;
}

.sndk-gd-sub-stat-value {
	font-weight: 700;
	font-size: 1em;
	color: #222;
}

/* ردیف کوچک اطلاعات دوره (تاریخ شروع/پایان) — طبق درخواست کارفرما، این بخش دیگر
   پایین صفحه نیست؛ دقیقاً زیر نام سطح فعلی در هدر بالای صفحه قرار گرفته (کلاس
   sndk-gd-sub-header-period در .sndk-gd-sub-header-info). */
.sndk-gd-sub-header-period {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: #666;
	font-size: 0.8em;
	margin-top: 2px;
}

.sndk-gd-sub-header-period .dashicons {
	color: #999;
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

/* تاریخچه‌ی خرید اشتراک */
.sndk-gd-sub-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88em;
}

.sndk-gd-sub-history-table th,
.sndk-gd-sub-history-table td {
	text-align: right;
	padding: 9px 10px;
	border-bottom: 1px solid #f0f0f0;
}

.sndk-gd-sub-history-table th {
	color: #888;
	font-weight: 600;
	font-size: 0.85em;
}

.sndk-gd-sub-history-table tr:last-child td {
	border-bottom: none;
}

/* صفحه/شورت‌کد «خرید اشتراک» — بازطراحی کامل طبق طرح مرجع کارفرما (تیر ۱۴۰۵):
   بالای صفحه انتخابگر «دوره‌ی پرداخت» (۱/۳/۶ ماهه و ...، ساخته‌شده از دیتای
   واقعی بسته‌ها، نه عدد ثابت)، پایینش کارت‌های سطح با هدر رنگی مجزا برای هر
   سطح (--sndk-gd-tier-*، در class-sndk-gd-subscription-pricing.php محاسبه
   می‌شود؛ پالت چندهویتی، نه یک طیف تک‌رنگ مثل قبل) و یک اتصال‌دهنده‌ی مثلثی
   بین هدر و بدنه (دقیقاً مثل طرح مرجع). همه‌چیز با کد/CSS ساخته می‌شود (بدون
   هیچ تصویر پس‌زمینه‌ای) تا سرعت بارگذاری این صفحه تحت‌تأثیر قرار نگیرد. */
.sndk-gd-pricing-wrap {
	direction: rtl;
	margin: 24px 0;
}

.sndk-gd-pricing-cycle-heading {
	text-align: center;
	font-weight: 700;
	font-size: 1.05em;
	color: #333;
	margin-bottom: 14px;
}

/* انتخابگر دوره‌ی پرداخت — یک قرص (pill) بیرونی خاکستری روشن با زاویه‌ی کاملاً
   گرد، و یک قرص داخلی متحرک (با کلاس is-active) که رنگش می‌گیرد؛ جابه‌جایی
   بین حالت‌ها با transition نرم css انجام می‌شود، نه جامپ ناگهانی. */
.sndk-gd-pricing-cycle-switch {
	display: inline-flex;
	gap: 4px;
	background: #eef0f2;
	border-radius: 999px;
	padding: 5px;
	margin: 0 auto 32px;
	max-width: 100%;
	overflow-x: auto;
}

.sndk-gd-pricing-wrap {
	text-align: center;
}

/* نکته‌ی مهم (باگ رفع‌شده): این دکمه یک عنصر واقعی <button> است، و قالب
   وودمارت یک قاعده‌ی سراسری روی خودِ تگ button/کلاس‌های دکمه دارد که
   border-radius را صفر می‌کند و روی مقدار ما (بدون !important) غالب
   می‌شود؛ با اندازه‌گیری زنده (getComputedStyle) تأیید شد border-radius
   واقعی رندرشده «0px» بود، نه 999px که در این فایل نوشته بودیم — دقیقاً
   همان «گوشه‌های تیز به‌جای هلالی» که کارفرما گزارش داد. برای همیشه غالب
   ماندن روی آن قاعده‌ی قالب، border-radius اینجا با !important می‌آید. */
.sndk-gd-pricing-cycle-tab {
	appearance: none;
	border: none;
	background: transparent;
	color: #555;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	padding: 9px 22px;
	border-radius: 999px !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sndk-gd-pricing-cycle-tab:hover {
	color: #222;
}

.sndk-gd-pricing-cycle-tab.is-active {
	background: #ff9800;
	color: #fff;
	box-shadow: 0 3px 10px rgba(255, 152, 0, 0.35);
}

/* طبق درخواست صریح کارفرما: رنگ تب فعال «دوره‌ی پرداخت» دیگر ثابت/نارنجی
   نباشد، بلکه با رنگ سطح هم‌ردیفش هماهنگ شود — تب اول (کوتاه‌ترین دوره،
   معمولاً «۱ ماهه») هم‌رنگ سطح۱، تب دوم («۳ ماهه») هم‌رنگ سطح۲، تب سوم
   («۶ ماهه») هم‌رنگ سطح۳. چون این دکمه‌ها از cycles ساخته می‌شوند که همیشه
   صعودی مرتب‌اند (دقیقاً همان ترتیبی که کارت‌های سطح هم با آن مرتب می‌شوند)،
   انتخاب با nth-child امن است. اگر روزی دوره‌ی چهارمی اضافه شود، همان رنگ
   نارنجی پیش‌فرض بالا برایش باقی می‌ماند (بدون شکستن چیزی). */
.sndk-gd-pricing-cycle-tab:nth-child(1).is-active {
	background: #ef395a;
	box-shadow: 0 3px 10px rgba(239, 57, 90, 0.35);
}

.sndk-gd-pricing-cycle-tab:nth-child(2).is-active {
	background: #2cbaae;
	box-shadow: 0 3px 10px rgba(44, 186, 174, 0.35);
}

.sndk-gd-pricing-cycle-tab:nth-child(3).is-active {
	background: #f68128;
	box-shadow: 0 3px 10px rgba(246, 129, 40, 0.35);
}

.sndk-gd-pricing-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: center;
	align-items: stretch;
}

/* طبق بازخورد صریح کارفرما («این کارت‌ها مرده/بی‌روح به‌نظر می‌رسن»)، علاوه بر
   سایه‌ی خنثای همیشگی (که عمق/بلندشدگی کارت را از پس‌زمینه می‌سازد)، یک سایه‌ی
   دوم و هم‌رنگ خودِ سطح هم اضافه شده (با color-mix رنگ --sndk-gd-tier-accent را
   به‌صورت نیمه‌شفاف می‌سازد؛ یعنی نیازی به متغیر rgb جداگانه نیست و اگر روزی رنگ
   پالت عوض شود، این سایه هم خودکار هماهنگ می‌ماند) تا هر کارت حس زنده/رنگی و
   کمی «شناور» روی صفحه داشته باشد، نه یک جعبه‌ی تخت خاکستری. */
.sndk-gd-pricing-card {
	flex: 1 1 280px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: visible;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), 0 16px 30px -18px color-mix(in srgb, var(--sndk-gd-tier-accent, #2196f3) 70%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* طبق درخواست صریح کارفرما: هاور روی هر کارت باید «حس نرم/زیبا» بدهد —
   بلندشدن سبک + سایه‌ی عمیق‌تر + کمی بزرگ‌نمایی هدر رنگی، همه با transition. */
.sndk-gd-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14), 0 22px 34px -14px color-mix(in srgb, var(--sndk-gd-tier-accent, #2196f3) 65%, transparent);
}

.sndk-gd-pricing-card:hover .sndk-gd-pricing-head {
	transform: scale(1.03);
}

/* رفع باگ (بازخورد کارفرما): سایه‌ی رنگی این بخش قبل از هاور اصلاً دیده
   نمی‌شد و فقط با بردن موس روی کارت «درست» می‌شد. علتش این بود که
   .sndk-gd-pricing-body (سیبلینگ بعدی، هم‌سطح از نظر چیدمان، با پس‌زمینه‌ی
   سفید تخت) در حالت عادی — چون هیچ‌کدام position/z-index نداشتند — بعد از
   این هدر در جریان رسم صفحه می‌آید و دقیقاً همان ناحیه‌ای را که سایه به آن
   سرریز می‌کند می‌پوشاند؛ فقط در حالت :hover چون transform روی هدر یک
   stacking context تازه می‌ساخت، هدر (و سایه‌اش) موقتاً بالاتر از بدنه‌ی
   سفید رسم می‌شد. رفع: خودِ هدر همیشه (نه فقط هنگام هاور) با
   position:relative + z-index:1 بالاتر از بدنه قرار می‌گیرد تا سایه‌اش از
   همان ابتدا، بدون نیاز به هاور، کامل دیده شود. */
.sndk-gd-pricing-head {
	background: linear-gradient(135deg, var(--sndk-gd-tier-accent, #2196f3), var(--sndk-gd-tier-accent-dark, #0d6fb8));
	border-radius: 16px 16px 0 0;
	padding: 28px 20px 34px;
	text-align: center;
	position: relative;
	z-index: 1;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sndk-gd-tier-accent-dark, #0d6fb8) 75%, transparent);
}

/* طبق بازخورد کارفرما، فونت عنوان هر سطح («سطح یک/دو/سه») بزرگ‌تر و
   واضح‌تر شد (قبلاً 1.2em بود). */
.sndk-gd-pricing-title {
	margin: 0;
	font-size: 1.55em;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: #fff;
}

/* مثلث کوچک هم‌رنگ کارت، دقیقاً زیر کادر رنگی هدر — طبق بازخورد صریح
   کارفرما: «هیچ دایره‌ی سفیدی درخواست نشده بود؛ فقط یک مثلث با همون رنگ،
   دقیقاً زیر کادر رنگی که بالاش چسبیده به کادر باشه و خودِ مثلث در بخش
   سفید کارت واقع باشه». تلاش قبلی (نشان دایره‌ای با آیکون) و تلاش قبل‌تر
   از آن (مثلثی که با margin منفی به داخل هدر کشیده می‌شد) هر دو کنار
   گذاشته شدند. حالا: هیچ margin منفی/مثبتی ندارد (margin:0)، یعنی درست در
   جریان عادی صفحه — بی‌فاصله — بعد از هدر رنگی می‌آید، پس لبه‌ی بالای
   مثلث دقیقاً به کف کادر رنگی چسبیده و کل بدنه‌ی مثلث در ناحیه‌ی سفید
   کارت قرار می‌گیرد؛ نه ذره‌ای همپوشانی با هدر، نه فاصله از آن. رنگش هم
   از همان متغیر اختصاصی کارت (--sndk-gd-tier-accent) می‌آید. */
.sndk-gd-pricing-connector {
	width: 0;
	height: 0;
	margin: 0 auto;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 14px solid var(--sndk-gd-tier-accent, #2196f3);
}

.sndk-gd-pricing-body {
	background: #fff;
	border-radius: 0 0 16px 16px;
	padding: 22px 20px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
}

/* رفع باگ گزارش‌شده: وقتی متن ویژگی‌ها/توضیحات یک سطح بلندتر از سطح‌های دیگر
   باشد، قیمت و دکمه‌ی «خرید و فعال‌سازی» باید همیشه پایین باکس همان کارت
   بمانند (نه بالاتر/پایین‌تر بسته به ارتفاع محتوای بالای آن)، تا ردیف کارت‌ها
   مرتب/هم‌تراز به‌نظر برسد. علت واقعی: `margin-top:auto` از قبل روی
   `.sndk-gd-pricing-cycle-block` تنظیم شده بود (پایین‌تر در همین فایل)، اما آن
   عنصر فرزند *مستقیم* کانتینر فلکس (`.sndk-gd-pricing-body`) نیست — یک لایه‌ی
   واسط دیگر (`.sndk-gd-pricing-cycle-prices`، برای نگه‌داشتن بلوک‌های هر
   دوره‌ی پرداخت ۱/۳/۶ ماهه) بینشان است؛ margin آتوماتیک فلکس فقط روی
   فرزندان *مستقیم* کانتینر فلکس اثر دارد، پس آن قاعده عملاً بی‌اثر می‌ماند
   (تأیید زنده: computed margin-top همیشه 0px بود، نه auto). رفع: همین
   خاصیت روی خودِ `.sndk-gd-pricing-cycle-prices` (که واقعاً فرزند مستقیم
   `.sndk-gd-pricing-body` است) تنظیم شد — چون این کانتینر همیشه فقط یک
   بلوک دوره‌ی فعال را نمایش می‌دهد (بقیه display:none دارند)، ارتفاعش
   دقیقاً همان بلوک قیمت+دکمه است و با margin-top:auto به کف کارت چسبیده
   می‌ماند، مستقل از این‌که بالای کارت (ویژگی‌ها/توضیحات) چقدر بلند باشد. */
.sndk-gd-pricing-cycle-prices {
	margin-top: auto;
}

.sndk-gd-pricing-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	text-align: right;
}

/* توضیحات دلخواه ادمین برای همین سطح (تب «سطوح اشتراک» → ویرایش سطح، فیلد
   «توضیحات این سطح»)؛ اختیاری است، اگر ادمین چیزی ننویسد این عنصر اصلاً در
   HTML چاپ نمی‌شود (نه این‌که خالی و بی‌ارتفاع بماند). پس‌زمینه‌ی ملایم از
   همان رنگ سطح (bg_soft) گرفته می‌شود تا هم‌رنگ خودِ کارت بماند، نه یک خاکستری
   بی‌ربط. */
.sndk-gd-pricing-desc {
	background: var(--sndk-gd-tier-bg-soft, #f5f5f5);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 18px;
	text-align: right;
	color: #555;
	font-size: 0.85em;
	line-height: 1.9;
}

.sndk-gd-pricing-feature-box {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3a3a3a;
	font-size: 0.92em;
}

/* طبق بازخواست کارفرما: تیک‌های ویژگی هر کارت هم‌رنگ خودِ همان سطح باشند
   (قبلاً سبز ثابت برای هر سه کارت بود، مستقل از رنگ کارت). */
.sndk-gd-pricing-feature-box .dashicons {
	color: var(--sndk-gd-tier-accent, #4caf50);
	vertical-align: middle;
	flex-shrink: 0;
}

/* حالت «قفل» یک کارت سطح — وقتی خرید این سطح برای کاربر دان‌گرید محسوب می‌شود */
.sndk-gd-pricing-card--locked {
	opacity: 0.85;
	filter: saturate(0.6);
}

.sndk-gd-pricing-locked-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-align: right;
	background: #fff8e8;
	border: 1px solid #ffe4ab;
	border-radius: 8px;
	padding: 10px 12px;
	color: #6b4c00;
	font-size: 0.85em;
	line-height: 1.8;
	margin-top: auto;
}

.sndk-gd-pricing-locked-notice .dashicons {
	color: #d4a017;
	flex-shrink: 0;
	margin-top: 2px;
}

/* بلوک قیمت/دکمه‌ی هر «دوره‌ی پرداخت» — فقط دوره‌ی is-active نمایش داده
   می‌شود؛ بقیه با display:none از جریان صفحه خارج‌اند (جابه‌جایی توسط
   pricing-cycle-tabs.js، بدون هیچ درخواست شبکه‌ای).
   نکته: قبلاً «margin-top: auto» اینجا بود تا این بلوک به کف کارت بچسبد،
   اما چون این عنصر فرزند مستقیم کانتینر فلکس نیست (والدش
   `.sndk-gd-pricing-cycle-prices` است، نه خودِ `.sndk-gd-pricing-body`)،
   آن margin آتوماتیک هیچ‌وقت واقعاً اثر نمی‌کرد؛ حالا این خاصیت روی
   `.sndk-gd-pricing-cycle-prices` (بالاتر در همین فایل) تنظیم شده — رفع
   باگ «قیمت/دکمه هم‌تراز نیستند وقتی محتوای سطح‌ها طول متفاوت دارد». */
.sndk-gd-pricing-cycle-block {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	animation: sndk-gd-pricing-fade 0.25s ease;
}

.sndk-gd-pricing-cycle-block.is-active {
	display: flex;
}

@keyframes sndk-gd-pricing-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* بازطراحی کامل بلوک قیمت طبق بازخورد کارفرما:
   - قیمت اصلی (خط‌خورده) باید بالا، قیمت فعلی پایین بیاید — قبلاً این چینش
     فقط به‌طور اتفاقی و ناخواسته از کوچک‌بودن عرض کارت (word-wrap طبیعی)
     پیش می‌آمد؛ حالا با flex-direction:column صریح و قطعی تضمین می‌شود.
   - قبلاً چون قیمت+واحد گاهی به دو خط می‌شکست، خط روی «تومان» (که تگ
     <del> مرورگر به‌طور پیش‌فرض روی محتوایش می‌کشد) در واقع یک قطعه‌ی
     مجزا و کمی جابه‌جا از خط روی عدد می‌شد. با white-space:nowrap روی
     خودِ del/ins، کل «عدد + تومان» همیشه یک خط واحد می‌ماند و همان یک خط
     زیرین مرورگر روی هر دو (عدد و تومان) هم‌راستا کشیده می‌شود.
   - اندازه‌ی فونت «تومان» بزرگ‌تر شد (0.5em → 0.64em). فونت خودِ عدد در
     del و ins کاملاً با هم برابر ماند (هیچ‌کدام override نشده، هر دو از
     همان 1.7em پایه می‌آیند)، طبق درخواست صریح کارفرما. */
/* نکته‌ی مهم (کشف‌شده حین رفع باگ چیدمان): get_price_html() ووکامرس برای
   این محصولات هیچ <span class="price"> دورِ del/ins نمی‌گذارد (آن پوششی
   است که فقط تمپلیت‌های لوپ ووکامرس اضافه می‌کنند، نه خودِ این متد) —
   یعنی خودِ .sndk-gd-pricing-price والد مستقیم del/ins است. اگر flex را
   روی یک ".price" فرضی می‌گذاشتیم (که وجود نداشت)، هیچ‌وقت اعمال نمی‌شد؛
   دقیقاً همین باگ باعث شده بود فاصله‌ی فلش تا قیمت زیرش صفر/نامتقارن شود.
   برای همین flex مستقیماً روی خودِ این عنصر تنظیم شده. اسپن‌های
   .screen-reader-text کنار del/ins همیشه position:absolute‌اند (خروجی
   استاندارد وردپرس)، یعنی از چیدمان flex کاملاً خارج‌اند و روی gap اثری
   ندارند. */
.sndk-gd-pricing-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* فاصله‌ی «فلش تا قیمت فعلیِ زیرش» — عمداً برابر با margin-top
	             فلش (پایین‌تر، روی del::after) تا فاصله‌ی بالا/پایین فلش
	             دقیقاً یکسان شود، طبق درخواست صریح کارفرما. */
	font-size: 1.7em;
	font-weight: 800;
	color: var(--sndk-gd-tier-accent-dark, #0d6fb8);
}

/* شبکه‌ی ایمنی: اگر در حالتی دیگر (مثلاً نوع محصول دیگر) get_price_html()
   واقعاً درون یک <span class="price"> برگردانده شود، همان چیدمان ستونی
   روی آن هم اعمال شود. */
.sndk-gd-pricing-price .price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* رفع باگ ناهماهنگی مرورگرها: قبلاً خط روی قیمت اصلی با خاصیت بومی مرورگر
   (text-decoration-line روی <del> که شامل یک <span> با فونت کوچک‌تر برای
   «تومان» هم می‌شد) کشیده می‌شد؛ کروم و فایرفاکس محل دقیق این خط را برای
   محتوای با فونت‌های مخلوط (عدد بزرگ + واحد کوچک‌تر) متفاوت محاسبه می‌کنند
   — در فایرفاکس هم‌راستا بود، در کروم نه (باگ گزارش‌شده). برای اینکه در
   همه‌ی مرورگرها دقیقاً یکسان و از قبل قابل پیش‌بینی باشد، دیگر به
   text-decoration بومی مرورگر تکیه نمی‌کنیم؛ به‌جایش خودمان یک خط افقی با
   ::before (موقعیت مطلق، دقیقاً وسط ارتفاع del) رسم می‌کنیم که مستقل از
   فونت داخلی‌اش، همیشه از یک لبه تا لبه‌ی دیگر همان کادر (شامل «تومان»)
   کشیده می‌شود — این تکنیک در کروم/فایرفاکس/سافاری یکسان رندر می‌شود چون
   دیگر به الگوریتم داخلی مرورگر برای متن‌های چندفونتی وابسته نیست. */
.sndk-gd-pricing-price del {
	order: 1;
	display: block;
	position: relative;
	color: #9b9b9b;
	opacity: 0.85;
	text-decoration: none;
	white-space: nowrap;
	padding: 0 2px;
}

.sndk-gd-pricing-price del::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: 50%;
	height: 2px;
	background: #c0392b;
	transform: translateY(-50%);
	pointer-events: none;
}

/* رفع باگ «خط زیر متن به‌جای روی متن»: این فلش قبلاً ::after خودِ <del> بود،
   یعنی داخل جعبه‌ی del قرار می‌گرفت و ارتفاع del را اضافه می‌کرد؛ چون خط
   ::before (بالاتر) با top:50% نسبت به کل ارتفاع del (متن + فاصله + فلش)
   محاسبه می‌شود، آن ارتفاع اضافه باعث می‌شد وسط محاسبه‌شده دیگر وسط خودِ
   متن نباشد و خط پایین‌تر از متن (شبیه زیرخط) بیفتد. رفع: این فلش دیگر
   ::after خودِ del نیست؛ حالا ::after خودِ کانتینر بیرونی (.sndk-gd-pricing-price)
   است و با order در همان محل قبلی (بین del و ins) در چیدمان فلکس قرار
   می‌گیرد — یعنی جعبه‌ی del فقط شامل خودِ متن قیمت می‌ماند و خط دقیقاً
   وسط آن می‌افتد، در همه‌ی مرورگرها یکسان. */
/* این فلش فقط وقتی محصول واقعاً تخفیف/قیمت‌قبلی دارد رندر می‌شود — کلاس
   «has-discount» را PHP فقط در آن حالت اضافه می‌کند (به‌جای گزینش‌گر
   :has()، برای سازگاری بیشتر با مرورگرهای قدیمی‌تر).
   طبق درخواست تازه‌ی کارفرما: اندازه به حالت قبل (کوچک) برگشت، و به‌جای
   شکل «V» با خط border (که باعث خطای دید نامتقارن می‌شد)، حالا یک آیکون
   واقعی دشیکان (فلش رو-به-پایین، سفید) داخل یک دایره‌ی آبی ثابت است —
   این‌بار رنگ دایره عمداً یک آبی ثابت است (نه متغیر رنگ اختصاصی کارت)،
   دقیقاً طبق درخواست؛ چون آیکون داخل یک جعبه‌ی دایره‌ای با flex
   center/center قرار می‌گیرد (نه یک شکل کج‌شده‌ی نامتقارن با border)،
   دیگر نیازی به جابه‌جایی جبرانی (translateY) هم نیست. */
.sndk-gd-pricing-price--has-discount::after {
	content: "\f347"; /* گلیف دشیکان arrow-down-alt2 (fontTable خودِ وردپرس) */
	font-family: dashicons;
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #2196f3;
	color: #fff;
	font-size: 13px;
	line-height: 1;
}

.sndk-gd-pricing-price ins {
	order: 3;
	display: block;
	text-decoration: none;
	white-space: nowrap;
}

.sndk-gd-pricing-price .woocommerce-Price-currencySymbol {
	font-size: 0.64em;
	font-weight: 600;
	margin-inline-start: 4px;
}

.sndk-gd-pricing-buy-btn {
	display: inline-block;
	width: 100%;
	background: var(--sndk-gd-tier-accent, #2196f3);
	color: #fff;
	padding: 12px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--sndk-gd-tier-accent, #2196f3) 70%, transparent);
}

.sndk-gd-pricing-buy-btn:hover {
	background: var(--sndk-gd-tier-accent-dark, #0d6fb8);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--sndk-gd-tier-accent-dark, #0d6fb8) 75%, transparent);
}

.sndk-gd-pricing-empty-note {
	color: #b32d2e;
	font-size: 0.85em;
}

/* رفع باگ (بازخورد کارفرما، موبایل): این قاعده قبلاً display را از inline-flex
   به flex تغییر می‌داد؛ چون flex یک باکس «بلاک» است (برخلاف inline-flex که
   مثل inline-block فقط هم‌اندازه‌ی محتوایش می‌شود)، عرضش خودکار کل عرض
   کانتینر را می‌گرفت و پس‌زمینه‌ی خاکستری «قرص» به‌جای این‌که فقط پشت سه
   دکمه‌ی ۱/۳/۶ ماهه بماند، سرتاسر صفحه کشیده می‌شد. حالا با width:fit-content
   (و margin-inline:auto برای وسط‌چین ماندن، چون در حالت flex دیگر
   text-align:center روی والد اثری روی عرضش ندارد) دقیقاً هم‌اندازه‌ی محتوا
   می‌ماند، درست مثل دسکتاپ. */
@media (max-width: 782px) {
	.sndk-gd-pricing-cycle-switch {
		display: flex;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}
}

/* جدول «جزئیات طرح» — راست‌چین، ریسپانسیو، مینیمال، مستقل از استایل قالب.
   عمداً با <div> ساخته می‌شود، نه عناصر واقعی جدول (<table>/<tr>/<td>) — رفع
   باگ گزارش‌شده (ظاهر کاملاً بدشکل در موبایل واقعی): با عناصر جدولی واقعی،
   استایل‌شیت‌های واکنش‌گرای ووکامرس/وودمارت/المنتور که روی انتخابگرهای عمومی
   `table`/`tr`/`td` (نه فقط کلاس‌های اختصاصی ما) در برش موبایل فعال می‌شوند،
   می‌توانستند این بخش را ناخواسته بازنویسی کنند. با تغییر به div و کلاس‌های
   اختصاصی + !important روی خواص چیدمانی کلیدی، این ریسک کاملاً حذف شد: هیچ
   قاعده‌ی عمومی/غیرمرتبطی دیگر نمی‌تواند این بخش را لمس کند. */

.sndk-gd-details-box {
	max-width: 380px;
	margin: 14px 0;
	font-family: inherit;
	direction: rtl;
	font-size: 0.86em;
}

.sndk-gd-details-title {
	text-align: right;
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 6px;
	color: #222;
}

.sndk-gd-details-table {
	width: 100% !important;
	display: block !important;
}

.sndk-gd-details-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	background: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.sndk-gd-details-row:last-child {
	border-bottom: none !important;
}

.sndk-gd-details-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px;
	font-weight: 600;
	color: #444;
	white-space: nowrap;
	border: none !important;
	padding: 0 !important;
	background: none !important;
	text-align: right !important;
}

.sndk-gd-details-label .dashicons {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 19px;
	line-height: 20px;
	color: #9aa0a8;
}

.sndk-gd-details-label-text::after {
	content: " :";
}

.sndk-gd-details-value {
	color: #333;
	font-weight: 400;
	text-align: left !important;
	word-break: break-word;
	padding-inline-start: 6px !important;
	padding-inline-end: 0 !important;
	border: none !important;
	background: none !important;
}

.sndk-gd-details-value a {
	color: #2e75b6;
	text-decoration: none;
}

.sndk-gd-details-value a:hover {
	text-decoration: underline;
}

/* آیکون‌های امتیاز و علاقه‌مندی — برای جای‌گذاری کنار عنوان «توضیحات محصول»، کوچک و مینیمال */
.sndk-gd-inline-rating,
.sndk-gd-inline-wishlist {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.sndk-gd-inline-rating .star-rating {
	font-size: 0.8em;
}

.sndk-gd-inline-wishlist .wd-wishlist-btn.wd-style-icon .wd-action-btn,
.sndk-gd-inline-wishlist .wd-action-icon {
	width: 30px;
	height: 30px;
	font-size: 15px;
}

/* زیرتب‌های صفحه‌ی «دانلودها» در حساب کاربری — تفکیک فایل‌های گرافیکی از سایر دانلودها */
/* شبکه‌ی ایمنی برای پس‌زمینه‌ی سفید تب دانلودها: کلاس white_card قالب (که در
   خودِ تمپلیت هم اضافه شده) معمولاً همین را می‌دهد؛ این قانون فقط برای وقتی
   است که به هر دلیل (مثلاً تغییر آینده‌ی قالب) آن کلاس در دسترس نبود، ظاهر
   بازهم با بقیه‌ی تب‌های پروفایل یکسان بماند. */
.sndk-gd-downloads-card {
	background: #fff;
	border-radius: 6px;
	padding: 20px;
	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
}

.sndk-gd-downloads-tabs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sndk-gd-downloads-tabs li {
	margin: 0;
}

.sndk-gd-downloads-tabs a {
	display: inline-block;
	padding: 10px 16px;
	color: #666;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	font-weight: 600;
}

.sndk-gd-downloads-tabs li.is-active a {
	color: #2e75b6;
	border-bottom-color: #2e75b6;
}

.sndk-gd-downloads-tabs .count {
	color: #9aa0a8;
	font-weight: 400;
}

/* بج «طلایی» روی تصویر محصول — هرجا محصولات کنار هم لیست شوند (آرشیو/شاپ/مرتبط).
   مثل بج «حراج» خود ووکامرس، نسبت به کانتینر محصول (li.product که position:relative
   دارد) به‌صورت مطلق روی گوشه‌ی تصویر قرار می‌گیرد. */
.sndk-gd-gold-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 9;
	background: linear-gradient(135deg, #f6c453, #b8860b);
	color: #3a2a00;
	font-size: 0.75em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	/* کلیک‌پذیر است (به آرشیو «طلایی» می‌رود، با assets/tier-badge-click.js چون
	   داخل لینک کل کارت محصول است و <a> واقعی اینجا نامعتبر می‌بود). */
	cursor: pointer;
	transition: filter 0.15s ease;
}

.sndk-gd-gold-badge:hover {
	filter: brightness(1.08);
}

/* موبایل و صفحه‌های خیلی کوچک — بازطراحی کامل بعد از بازخورد کارفرما با
   اسکرین‌شات موبایل واقعی («هنوز همونه»، حتی بعد از رفع قبلی):
   رفع قبلی (تبدیل table به div) درست بود اما مشکل واقعی چیز دیگری بود که آن
   رفع لمسش نکرده بود — همین‌جا، قاعده‌ی قدیمی `flex:1 1 100%` روی مقدار هر
   ردیف، که از قبل این تغییرات وجود داشت: این قاعده مقدار هر ردیف را همیشه
   مجبور به رفتن به خط بعدی می‌کرد (حتی وقتی برچسب و مقدار راحت در یک خط جا
   می‌شدند)، یعنی هر ردیف همیشه ۲ خط می‌گرفت و کل جدول در موبایل خیلی
   کشیده/بزرگ به‌نظر می‌رسید — دقیقاً همان چیزی که در اسکرین‌شات کارفرما دیده
   شد. حالا این اجبار حذف شد: برچسب و مقدار در یک خط می‌مانند مگر واقعاً جا
   نشوند (رفتار طبیعی flex-wrap، نه یک قاعده‌ی اجباری) — دقیقاً هم‌سو با ظاهر
   فشرده‌ی دسکتاپ که از قبل درست بود. علاوه بر این، برای این‌که این بخش به‌جای
   یک لیست متن ساده، مثل یک «کارت» طراحی‌شده به‌نظر برسد (مطابق قانون کلی
   پروژه برای ظاهر عناصر تعاملی/نمایشی)، پس‌زمینه‌ی سفید + سایه‌ی نرم + گوشه‌ی
   گرد به خودِ جعبه اضافه شد (فقط در موبایل، چون دسکتاپ از قبل داخل یک کارت
   بزرگ‌تر از قالب قرار دارد و نیازی به کارت مضاعف نداشت). */
@media (max-width: 767px) {
	.sndk-gd-details-box {
		max-width: 100% !important;
		background: #fff !important;
		border-radius: 10px !important;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
		padding: 14px 16px !important;
		box-sizing: border-box !important;
	}

	.sndk-gd-details-row {
		flex-wrap: wrap !important;
		column-gap: 10px !important;
	}

	.sndk-gd-details-label {
		flex: 0 0 auto !important;
	}

	.sndk-gd-details-value {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		text-align: left !important;
		padding-inline-start: 6px !important;
		margin-top: 0 !important;
	}
}

/* ============================================================
 * گرید «فایل‌های گرافیکی» در تب «دانلودها»ی حساب کاربری — کارت تصویر + بج نوع
 * فایل + دکمه‌ی دانلود مجدد (رایگان/اشتراکی/طلایی، همه یکجا).
 * ============================================================ */

.sndk-gd-dl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
}

.sndk-gd-dl-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease;
}

.sndk-gd-dl-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.sndk-gd-dl-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: #f4f4f4;
}

.sndk-gd-dl-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sndk-gd-dl-card-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5em;
	color: #c7c7c7;
}

/* بج نوع فایل — طبق درخواست صریح، بالای تصویر و سمت «چپ» فیزیکی (نه سمت شروع
   متن RTL که سمت راست می‌شود)، تا با بج «طلایی» سمت راست آرشیو فروشگاه اشتباه
   گرفته نشود و همیشه در یک گوشه‌ی ثابت (چپ) دیده شود. */
.sndk-gd-dl-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-size: 0.72em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* از این پس بج‌های نوع فایل (این‌جا و sndk-gd-tier-label) وقتی آدرس آرشیو همان
   سطح پیدا شود، به‌جای <span>، یک <a> واقعی رندر می‌شوند (کلیک‌پذیر، بدون نیاز
   به جاوااسکریپت)؛ این قانون فقط استایل پیش‌فرض مرورگر برای لینک (رنگ آبی/خط
   زیر متن) را خنثی می‌کند تا ظاهر بج دقیقاً مثل قبل (زمانی که span بود) بماند،
   و یک نشانه‌ی ظریف هاور (کمی روشن‌تر) اضافه می‌کند تا کلیک‌پذیر بودنش حس شود. */
a.sndk-gd-dl-badge,
a.sndk-gd-tier-label {
	text-decoration: none !important;
	cursor: pointer;
	transition: filter 0.15s ease;
}

a.sndk-gd-dl-badge:hover,
a.sndk-gd-tier-label:hover {
	filter: brightness(1.08);
}

/* رفع/پیشگیری از باگ مشابهِ «هاور دکمه‌ی دانلود» (توضیح کامل در single-product.css):
   ویجت اکانت قالب یک قانون عمومی دارد که با تخصص برابرِ قانون هاور خودمان، رنگ
   پس‌زمینه/متن را روی هاور به‌طور کامل بی‌اثر (unset) می‌کند. چون رنگ بج «رایگان»
   یک background-color ساده است (نه گرادیان مثل بج‌های «اشتراکی»/«طلایی» که با
   background-image ساخته شده‌اند و از آن قانون در امان می‌مانند)، بدون این
   !important کاملاً روی هاور محو می‌شد؛ برای «اشتراکی»/«طلایی» هم پیشگیرانه
   همین قفل اعمال شده تا اگر روزی رنگشان به یک background-color ساده تغییر کرد،
   همین باگ برایشان رخ ندهد. */
.sndk-gd-dl-badge--free {
	background: #e3f2fd !important;
	color: #0d5c9e !important;
}

.sndk-gd-dl-badge--subscription {
	background: linear-gradient(135deg, #00c2c2, #007a7a) !important;
	color: #fff !important;
}

.sndk-gd-dl-badge--gold {
	background: linear-gradient(135deg, #f6c453, #b8860b) !important;
	color: #3a2a00 !important;
}

/* آیکون تاج طلایی داخل بج «طلایی» (تب دانلودها + بج صفحه‌ی محصول) — سمت راست
   کلمه‌ی «طلایی» قرار می‌گیرد چون در HTML قبل از متن چاپ می‌شود و صفحه راست‌چین
   است (اولین عنصر داخل والد راست‌چین، در سمت راست دیده می‌شود). */
.sndk-gd-dl-badge .sndk-gd-crown-icon {
	vertical-align: -1px;
	margin-left: 3px;
}

/* بج نوع محصول وقتی داخل کانتینر بج‌های خودِ قالب وودمارت (.product-labels،
   صفحه‌ی تک‌محصول) تزریق می‌شود — بدون position:absolute چون آن کانتینر
   خودش را موقعیت‌دهی می‌کند؛ این یعنی با بج «جدید»/حراج قالب هرگز روی هم
   نمی‌افتند (رفع باگ تداخل کشف‌شده در بازبینی). رنگ از کلاس‌های
   sndk-gd-dl-badge--{tier} (فقط background/color) گرفته می‌شود.
   اندازه/گردی گوشه عمداً با بج‌های خودِ قالب (product-label.wd-shape-round-sm:
   padding 5px 10px، min-width 50px، font-size 12px، line-height 1.2،
   border-radius 12px) هماهنگ شده تا از نظر بصری یک‌مجموعه به‌نظر برسند. */
.sndk-gd-tier-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	padding: 5px 10px;
	min-width: 50px;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

/* پیش‌فرض کانتینر بج‌های قالب flex-direction:column است (بج‌ها زیر هم)؛ طبق
   درخواست صریح کارفرما، وقتی بج نوع محصول ما داخلش هست، به‌جای زیر هم، بج
   «جدید»/حراج و بج ما کنار هم (ردیفی) نمایش داده شوند. این انتخابگر با
   :has() فقط زمانی فعال می‌شود که بج ما واقعاً داخل این کانتینر باشد. از
   وقتی inject_product_page_tier_badge() به لوپ آرشیو/فروشگاه/آرشیو
   سطح‌بندی هم گسترش یافت، این قاعده آنجا هم فعال می‌شود (که خودش درست است،
   همان چیدمان ردیفی یکدست). */
.product-labels:has(.sndk-gd-tier-label) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* موقعیت پیش‌فرض قالب برای بج‌های لوپ (فروشگاه/دسته‌بندی/آرشیو سطح‌بندی)
   inset-inline-start است که در راست‌چین فیزیکی «راست» می‌شود
   (woo-mod-product-labels.css: `.product-labels{inset-inline-start:7px}`).
   طبق درخواست کارفرما («بج‌ها بجای چپ، راست هستن»)، در صفحات آرشیو/دسته‌بندی
   واقعی فروشگاه (فقط همان‌جا) به فیزیکی «چپ» سوییچ می‌شود تا با موقعیت بج در
   صفحه‌ی تک‌محصول (که از قاعده‌ی مجزای
   `.woocommerce-product-gallery .product-labels{inset-inline-end:15px}`
   می‌آید) یکدست باشد.
   محدودسازی به کلاس‌های body صفحات آرشیو/دسته‌بندی واقعی (woocommerce-shop،
   post-type-archive-product، tax-product_cat، tax-product_tag — همین آخری
   چون صفحات سه‌گانه‌ی «آرشیو نوع فایل» هم یک آرشیو تگ محصول واقعی‌اند) عمداً
   اضافه شد و انتخابگر عمومی/قبلی `.products .product-labels` (بدون قید
   body) حذف شد: آن نسخه‌ی عمومی هر جای سایت که کلاس `products` روی لیست
   محصول باشد را می‌گرفت — از جمله ویجت‌های محصول وودمارت داخل صفحه‌ی اصلی/
   سایر صفحات (مثل «کتاب‌های پیشنهادی»)، که چون آیکون قلب علاقه‌مندی‌ها در
   آن‌ها سمت چپ است، سوییچ بج به چپ باعث افتادن بج زیر همان آیکون قلب می‌شد
   (باگ گزارش‌شده‌ی کارفرما). با این محدودسازی، آن صفحات به موقعیت پیش‌فرض
   قالب (راست، دور از آیکون قلب) برمی‌گردند و صفحات آرشیو/دسته‌بندی واقعی
   دقیقاً همان چپِ تأییدشده‌ی قبلی را حفظ می‌کنند. */
body.woocommerce-shop .products .product-labels,
body.post-type-archive-product .products .product-labels,
body.tax-product_cat .products .product-labels,
body.tax-product_tag .products .product-labels {
	inset-inline-start: auto;
	inset-inline-end: 7px;
}

/* توضیح تاریخی (این قوانین دیگر در کد فعال نیستند): صفحه‌ی «مرور بر اساس
   سطح» قبلاً یک شورت‌کد (sndk_gd_products_by_tier) داخل یک صفحه‌ی عادی
   وردپرس بود؛ چون آن صفحه یک آرشیو واقعی ووکامرس نبود، قالب وودمارت هیچ‌کدام
   از استایل‌شیت/چیدمان واقعی فروشگاه/دسته‌بندی را رویش بارگذاری نمی‌کرد و
   قوانین دستی زیادی اینجا لازم بود (موقعیت‌دهی بج، مخفی‌کردن آیکون‌های هاور/
   عنوان، گرید دستی). رفع نهایی و ریشه‌ای: هر محصول حالا خودکار به یک تگ
   محصول اختصاصی سطح خودش (رایگان/اشتراکی/طلایی) وصل می‌شود
   (Sndk_GD_Custom_Template::sync_product_tier_tag) و صفحه‌ی «مرور بر اساس
   سطح» به آدرس آرشیو همان تگ منتقل شد — یعنی الان یک آرشیو *واقعی* ووکامرس
   است و قالب وودمارت دقیقاً همان چیدمان/ظاهر کامل فروشگاه/دسته‌بندی
   (کادر سفید، سایه، عنوان، دکمه، بج، نوار فیلتر/مرتب‌سازی، سایدبار) را
   خودکار رویش اعمال می‌کند؛ پس هیچ‌کدام از قوانین دستی بالا دیگر لازم
   نیستند و حذف شدند. */

.sndk-gd-tier-label .sndk-gd-crown-icon {
	vertical-align: -1px;
}

.sndk-gd-dl-card-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.sndk-gd-dl-card-title {
	font-weight: 600;
	color: #222;
	text-decoration: none;
	font-size: 0.92em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sndk-gd-dl-card-title:hover {
	color: #2e75b6;
}

.sndk-gd-dl-card-meta {
	font-size: 0.75em;
	color: #888;
	margin: 0;
}

/* رفع باگ: قالب/تم فعال (Woodmart) روی «هاور» بعضی لینک‌ها یک قانون CSS عمومی با
   همان تخصص (specificity) دارد که پس‌زمینه را به‌صورت شفاف (transparent) درمی‌آورد؛
   چون آن قانون در فایل CSS تم *بعد از* استایل این افزونه بارگذاری می‌شود، در تساوی
   تخصص، آن قانون برنده می‌شد — نتیجه: با هاور کردن روی دکمه‌ی «دانلود مجدد»، پس‌زمینه‌ی
   سبز آن ناگهان شفاف می‌شد و چون رنگ متن سفید است، روی پس‌زمینه‌ی سفید کارت کاملاً
   نامرئی/غیب به‌نظر می‌رسید (نه این‌که واقعاً از DOM حذف شود). رفع شد با افزودن
   `!important` به‌رنگ پس‌زمینه در همه‌ی حالت‌ها (عادی/هاور/غیرفعال) تا هیچ قانون
   دیگری (با همین یا حتی کمی بیشتر تخصص) نتواند آن را بی‌اثر کند. */
.sndk-gd-dl-card-btn {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #2e7d32 !important;
	color: #fff !important;
	padding: 8px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.82em;
	text-decoration: none !important;
}

.sndk-gd-dl-card-btn:hover {
	background: #266b2a !important;
	color: #fff !important;
}

.sndk-gd-dl-card-btn--disabled {
	background: #bdbdbd !important;
	cursor: default;
}

/* نوار فیلتر «جزئیات طرح» — بالای صفحات فروشگاه/دسته‌بندی/آرشیو سطح. راست‌چین،
   یک ردیف select که با تغییر هرکدام (اگر جاوااسکریپت فعال باشد) بلافاصله فرم را
   ارسال می‌کند؛ بدون جاوااسکریپت هم با دکمه‌ی «اعمال فیلتر» کار می‌کند.
   پس‌زمینه/سایه/چیدمان (justify-content) عمداً اینجا تعریف نشده‌اند: چون از تنظیمات
   قابل‌شخصی‌سازی پنل ادمین (Sndk_GD_Design_Details::get_filter_bar_style) می‌آیند،
   همیشه به‌صورت inline style توسط Sndk_GD_Product_Filters::render_filter_bar روی
   خودِ تگ چاپ می‌شوند (build_style_attribute). */
.sndk-gd-filter-bar {
	direction: rtl;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
}

/* گزارش کارفرما: فونت گزینه‌ها/زیرگزینه‌های نوار فیلتر (دکمه‌ی محرک هر فیلتر و
   ردیف‌های داخل پنل popover) خیلی کوچک بود. ریشه: این قاعده و دو قاعده‌ی زیر
   (button.sndk-gd-filter-trigger و button.sndk-gd-filter-option) هرکدام یک‌بار
   دیگر با em کوچک‌تر شده بودند (0.85em × 0.875em/0.88em) — یعنی روی فونت پایه‌ی
   ۱۳px قالب، متن نهایی به حدود ۹.۷px می‌رسید. اینجا به 1em بازگردانده شد (بدون هیچ
   کوچک‌سازی اضافه) تا فونت دقیقاً هم‌اندازه‌ی select مرتب‌سازی خودِ وودمارت شود. */
.sndk-gd-filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 1em;
	position: relative;
}

.sndk-gd-filter-native-label {
	color: #555;
	font-weight: 600;
}

.sndk-gd-filter-native-select {
	min-width: 140px;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid #d5d5d5;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sndk-gd-filter-native-select:focus-visible {
	border-color: var(--sndk-gd-tier-accent, #2196f3);
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
	outline: none;
}

.sndk-gd-filter-clear {
	align-self: center;
	font-size: 0.82em;
	color: #b32d2e;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.sndk-gd-filter-clear:hover {
	text-decoration: underline;
}

/* لایه‌ی ۲ (دکمه + پنل popover) — پیش‌فرض کاملاً مخفی؛ فقط وقتی اسکریپت
   assets/filter-bar-enhance.js پشتیبانی مرورگر از Popover API را تأیید کند و
   کلاس sndk-gd-js-enhanced را به خودِ فرم اضافه کند نمایان می‌شود (و در همان
   لحظه select استاندارد لایه‌ی ۱، نه حذف بلکه فقط بصری مخفی می‌شود — همچنان در
   DOM و کاملاً کاربردی می‌ماند). توضیح کامل معماری در docblock تابع
   Sndk_GD_Product_Filters::render_filter_field(). */
.sndk-gd-filter-enhanced {
	display: none;
}

.sndk-gd-filter-bar.sndk-gd-js-enhanced .sndk-gd-filter-enhanced {
	display: block;
}

.sndk-gd-filter-bar.sndk-gd-js-enhanced .sndk-gd-filter-native-label,
.sndk-gd-filter-bar.sndk-gd-js-enhanced .sndk-gd-filter-native-select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* مخفی‌سازی بصری (نه از دسترس‌پذیری) — همان تکنیک بالا، برای هر عنصری که فقط
   باید در accessible name/DOM بماند ولی روی صفحه دیده نشود. */
.sndk-gd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* دکمه‌ی محرک هر فیلتر — عمداً هم‌سبک select های خودِ قالب وودمارت (رنگ حاشیه،
   گردی گوشه، فونت) طراحی شده تا کنار «مرتب‌سازی پیش‌فرض» یک خانواده‌ی بصری
   واحد دیده شود، نه یک دکمه‌ی جدا/بیگانه. فقط برچسب فیلد نشان داده می‌شود
   (نه «برچسب + مقدار») — مقدار فعلی با هایلایت داخل پنل و نقطه‌ی رنگی کوچک
   روی خودِ دکمه (وقتی فیلتر فعال است) مشخص می‌شود.
   نکته‌ی مهم/فنی: چون این عنصر یک <button> واقعی است، قاعده‌ی سراسری خودِ
   وودمارت (`:is(.btn, .button, button, [type="submit"], [type="button"])` در
   base-rtl.css) با specificity برابر کلاس ما (هر دو 0-1-0، چون این قاعده شامل
   `[type="button"]` هم هست) روی آن اعمال می‌شد و با ترتیب بارگذاری، ظاهر
   کاملاً متفاوتی (پس‌زمینه‌ی خاکستری، بدون حاشیه، bold، اندازه/پدینگ دیگر)
   تحمیل می‌کرد. رفع: انتخابگر با `button` جلو، specificity را (0-1-1) بالاتر
   از قاعده‌ی قالب می‌برد؛ همه‌ی خاصیت‌های آن قاعده هم اینجا صریحاً بازنشانی
   شده‌اند تا هیچ باقیمانده‌ای از اسکین دکمه‌ی عمومی قالب نمانَد. */
button.sndk-gd-filter-trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 0 12px;
	height: 38px;
	min-height: 0;
	border-radius: 5px;
	border: 1px solid #bababa;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	text-align: right;
	text-transform: none;
	text-shadow: none;
	vertical-align: middle;
	color: #5c5c5c;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

button.sndk-gd-filter-trigger:hover {
	border-color: var(--sndk-gd-tier-accent, #2196f3);
	color: #2a2f36;
}

button.sndk-gd-filter-trigger:focus-visible {
	outline: none;
	border-color: var(--sndk-gd-tier-accent, #2196f3);
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

button.sndk-gd-filter-trigger[aria-expanded="true"] {
	border-color: var(--sndk-gd-tier-accent, #2196f3);
	color: #2a2f36;
}

button.sndk-gd-filter-trigger.is-active {
	color: #2a2f36;
	font-weight: 600;
}

.sndk-gd-filter-trigger-label {
	white-space: nowrap;
}

.sndk-gd-filter-trigger-dot {
	display: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sndk-gd-tier-accent, #2196f3);
	flex-shrink: 0;
}

.sndk-gd-filter-trigger.is-active .sndk-gd-filter-trigger-dot {
	display: block;
}

.sndk-gd-filter-chevron {
	width: 13px;
	height: 13px;
	margin-inline-start: 2px;
	color: #9aa2ad;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.sndk-gd-filter-trigger[aria-expanded="true"] .sndk-gd-filter-chevron {
	transform: rotate(180deg);
	color: var(--sndk-gd-tier-accent, #2196f3);
}

/* راهنمای کوتاه/غیرتعاملی (role="tooltip") — فقط روی هاور/فوکوس دکمه، با
   یک محو/جابه‌جایی نرم؛ هیچ‌وقت خودش کلیک‌پذیر یا فوکوس‌پذیر نیست. */
.sndk-gd-filter-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: #1f2937;
	color: #fff;
	font-size: 0.78em;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 5;
}

.sndk-gd-filter-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 14px;
	border: 5px solid transparent;
	border-top-color: #1f2937;
}

.sndk-gd-filter-trigger:hover + .sndk-gd-filter-tooltip,
.sndk-gd-filter-trigger:focus-visible + .sndk-gd-filter-tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* پنل popover — عنصر [popover] به‌طور پیش‌فرض استایل خام مرورگر (حاشیه/پس‌زمینه)
   دارد؛ همه‌شان اینجا بازنشانی و با ظاهر خودِ افزونه جایگزین می‌شوند. موقعیت
   (top/right) توسط جاوااسکریپت هنگام باز شدن، دقیقاً زیر دکمه‌ی محرک، تنظیم
   می‌شود (چون عناصر popover در لایه‌ی بالا/top layer رندر می‌شوند و از جریان
   عادی سند مستقل‌اند). */
/* نکته‌ی فنی مهم: [popover] به‌طور پیش‌فرض UA-stylesheet مرورگر
   `inset:0; width:fit-content; height:fit-content; margin:auto` دارد. جاوااسکریپت
   (positionPopover در filter-bar-enhance.js) فقط top/left/right را ست می‌کند؛
   اگر عرض را صریحاً خودمان تعیین نکنیم، وقتی گزینه‌های داخل پنل width:100%
   داشته باشند، مرورگر نمی‌تواند عرض «متناسب با محتوا» را درست محاسبه کند (چون
   درصد در محاسبه‌ی intrinsic/shrink-to-fit نادیده گرفته می‌شود) و پنل تا لبه‌ی
   مقابل صفحه کشیده می‌شود — باگی که با عکس کارفرما گزارش شد. رفع: عرض صریح
   max-content + سقف max-width اینجا، و حذف width:100% از گزینه‌ها (پایین‌تر). */
.sndk-gd-filter-menu {
	margin: 0;
	padding: 6px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
	width: max-content;
	min-width: 130px;
	max-width: min(240px, 90vw);
	max-height: 280px;
	overflow-y: auto;
	direction: rtl;
}

/* انیمیشن نرم و سریع باز/بسته‌شدن با @starting-style (اگر مرورگر پشتیبانی نکند،
   به‌سادگی بدون انیمیشن نمایان/پنهان می‌شود — بدون هیچ خطا یا شکستگی ظاهری). */
.sndk-gd-filter-menu {
	transition: opacity 0.1s cubic-bezier(0.2, 0, 0.2, 1), transform 0.1s cubic-bezier(0.2, 0, 0.2, 1), display 0.1s allow-discrete, overlay 0.1s allow-discrete;
	opacity: 1;
	transform: translateY(0) scale(1);
}

.sndk-gd-filter-menu:popover-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@starting-style {
	.sndk-gd-filter-menu:popover-open {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
}

/* نکته‌ی مهم/فنی: همان مشکل specificity دکمه‌ی محرک (بالا) اینجا هم هست — چون
   این عنصر هم <button type="button"> است، بدون انتخابگر با تگ جلو، قاعده‌ی
   سراسری دکمه‌ی وودمارت display را به inline-flex تغییر می‌داد (نتیجه: گزینه‌ها
   به‌جای یک ستون زیر هم، کنار هم و چندستونی/UPPERCASE دیده می‌شدند — باگ
   گزارش‌شده‌ی «گزینه‌های خیلی پهن/نامرتب»). رفع با همان تکنیک: انتخابگر
   `button.sndk-gd-filter-option` (specificity 0-1-1) + بازنشانی صریح همه‌ی
   خاصیت‌های آن قاعده. */
button.sndk-gd-filter-option {
	display: block;
	width: 100%;
	text-align: right;
	padding: 7px 12px;
	min-height: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	text-transform: none;
	text-shadow: none;
	vertical-align: middle;
	color: #374151;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.1s ease, color 0.1s ease;
}

button.sndk-gd-filter-option:hover,
button.sndk-gd-filter-option:focus-visible {
	background: #f3f4f6;
	outline: none;
}

button.sndk-gd-filter-option.is-selected {
	background: var(--sndk-gd-tier-accent, #2196f3);
	color: #fff;
	font-weight: 600;
}

button.sndk-gd-filter-option.is-selected:hover,
button.sndk-gd-filter-option.is-selected:focus-visible {
	background: var(--sndk-gd-tier-accent-dark, #0d6fb8);
}

/* ادغام بصری با نوار مرتب‌سازی/تعویض‌نمای وودمارت — توضیح کامل و شرط اجرا
   (فقط وقتی چیدمان واقعاً چنین نواری دارد) در assets/filter-bar-enhance.js.
   نکته‌ی مهم: background/box-shadow نوار فیلتر هم به‌صورت inline style از پنل
   ادمین چاپ می‌شوند (Sndk_GD_Product_Filters::build_style_attribute) — و
   inline style همیشه با هر قاعده‌ی CSS خارجی (صرف‌نظر از specificity) رقابت را
   می‌برد. بدون !important اینجا، حالت «ادغام‌شده» هرگز واقعاً بی‌رنگ/بی‌سایه
   نمی‌شد و یک جعبه‌ی سفید/سایه‌دار جدا داخل جعبه‌ی سفید/سایه‌دار وودمارت باقی
   می‌ماند (باگ گزارش‌شده‌ی «باکس تودرتو»).
   نکته‌ی ارتفاع ردیف: چون این نوار (با دکمه‌های ۳۸px‌ی خودش) داخل ستون المنتور
   بلندترین محتوای کل ردیف است (نسبت به شمارنده‌ی تعداد/تعویض‌نما و select
   مرتب‌سازی وودمارت که کوتاه‌ترند)، padding عمودی همین‌جا مستقیماً ارتفاع کل
   ردیف مشترک را تعیین می‌کند — از ۱۶px به ۸px کم شد تا ردیف جمع‌وجورتر دیده
   شود (گزارش کارفرما). اگر باز هم نیاز به کوتاه‌تر شدن بود، همین عدد (نه
   جای دیگری) باید تغییر کند. */
.sndk-gd-filter-bar.sndk-gd-toolbar-merged {
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0;
	padding: 8px 0;
	margin: 0;
	/* بزرگ‌شدن فونت گزینه‌ها (درخواست کارفرما) باعث شد سه دکمه‌ی فیلتر داخل
	   ستون باریک المنتور (این ردیف مشترک، حدود ۲۹۰-۳۰۰px عرض) از یک ردیف به دو
	   ردیف بشکنند و ارتفاعی که همین امروز کم شده بود دوباره زیاد شود. چون این
	   تنگی فقط مخصوص همین حالت «ادغام‌شده» است (نوار مستقل روی /shop/ عرض کامل
	   دارد و مشکلی ندارد)، gap اینجا و padding دکمه (پایین‌تر) فقط برای همین
	   کلاس کاهش یافت — نه در قاعده‌ی پایه — تا نوار مستقل هیچ تغییری نکند. */
	gap: 8px;
}

.sndk-gd-toolbar-merged button.sndk-gd-filter-trigger {
	padding: 0 9px;
}

/* بلوک شفاف «قیمت اصلی/درصد تخفیف/مبلغ نهایی» زیر ردیف قیمت هر آیتم طلایی در
   سبد خرید و صفحه‌ی تسویه‌حساب (ستون «جمع») — به‌جای جایگزینی بی‌توضیح قیمت
   با تخفیف مشترکین. جزئیات محاسبه در Sndk_GD_Gold_Files::filter_cart_item_subtotal. */
.sndk-gd-cart-price-breakdown {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}

.sndk-gd-cart-price-row {
	font-weight: 700;
}

.sndk-gd-cart-price-note {
	font-size: 0.78em;
	color: #777;
	line-height: 1.7;
}

.sndk-gd-cart-price-note del {
	text-decoration-color: #c0392b;
}

/* تخفیف اضافه‌ی مشترکین روی قیمت محصولات طلایی در کارت‌های لیست محصول
   (فروشگاه/دسته‌بندی/آرشیو سطح‌بندی/محصولات مرتبط) — طبق تأیید کارفرما
   («طرح ب»): قیمت اصلی خط‌خورده ‹ قیمت فروش‌ویژه‌ی عمومی خط‌خورده (اگر باشد) ‹
   قیمت نهایی بنفش پررنگ، به‌همراه یک خط کوچک بنفش زیرش با درصد تخفیف. جزئیات
   محاسبه در Sndk_GD_Gold_Files::filter_loop_price_html(). این کلاس‌ها جایگزین
   کامل خروجی get_price_html() ووکامرس می‌شوند، فقط برای مشترکین فعالی که
   واقعاً تخفیف اضافه می‌گیرند — برای همه‌ی کاربران دیگر price_html بومی
   ووکامرس دست‌نخورده می‌ماند. */
.sndk-gd-loop-price-tiers {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
}

.sndk-gd-loop-price-tier-regular,
.sndk-gd-loop-price-tier-sale {
	font-size: 0.82em;
	color: #999;
	text-decoration: line-through;
	text-decoration-color: #c0392b;
}

.sndk-gd-loop-price-tier-sep {
	font-size: 0.8em;
	color: #bbb;
}

.sndk-gd-loop-price-final {
	font-weight: 700;
	color: #6b46c1;
}

.sndk-gd-loop-price-perk {
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	color: #6b46c1;
	margin-top: 2px;
}

/* چیدمان «آجری/پینترستی» (Masonry) با اندازه‌های متفاوت تصویر، فقط برای سه
   صفحه‌ی آرشیو نوع فایل (رایگان/اشتراکی/طلایی) — طبق درخواست کارفرما با مرجع
   ظاهری سایت tarh.ir. دلیل اینکه این‌جا (CSS افزونه) پیاده شده، نه از تنظیمات
   خودِ وودمارت: ویجت المنتوری «آرشیو محصولات» (که برای این سه صفحه به‌عنوان
   آرشیو *واقعی* ووکامرس استفاده می‌شود، نه شورت‌کد با کوئری دستی) هیچ کنترل
   Masonry‌ای ندارد — این کنترل فقط روی ویجت عمومی‌تر «Products» (با کوئری
   مستقل از خودِ آرشیو) وجود دارد که تعویض به آن ریسک از کار افتادن نوار فیلتر
   را داشت (نوار فیلتر روی کوئری اصلیِ آرشیو کار می‌کند، نه کوئری آن ویجت).
   پس معماری آرشیوِ واقعی/نوار فیلتر دقیقاً دست‌نخورده ماند و فقط چیدمان
   بصری‌اش (از حالت شبکه‌ی هم‌اندازه به چندستونیِ آجری) این‌جا عوض شده.

   دامنه‌ی اعمال: کلاس‌های body.term-{اسلاگ} که خودِ هسته‌ی وردپرس روی صفحات
   آرشیو تگ محصول اضافه می‌کند (Sndk_GD_Custom_Template::TIER_TAG_SLUGS) — نه
   یک کلاس دستی تازه. یعنی هیچ تغییر PHP لازم نبود و فروشگاه/دسته‌بندی‌های
   دیگر کاملاً دست‌نخورده می‌مانند.

   پیش‌نیاز مکمل (در پنل ادمین انجام شد، نه این‌جا): «تفکیک‌پذیری تصویر» ویجت
   از سایز مربعیِ اجباری «Thumbnail - 150x150» به «Medium Large - 768x0» (که
   وردپرس هرگز کراپ مربعی نمی‌کند) تغییر کرد — بدون آن تغییر، تصاویر هنوز از
   قبل مربعِ یک‌اندازه می‌آمدند و چیدمان چندستونی زیر عملاً بی‌اثر می‌ماند. */
body.term-sndk-tier-free .products.wd-grid-g,
body.term-sndk-tier-subscription .products.wd-grid-g,
body.term-sndk-tier-gold .products.wd-grid-g {
	display: block;
	column-count: 5;
	column-gap: 20px;
}

body.term-sndk-tier-free .products.wd-grid-g > .wd-product,
body.term-sndk-tier-subscription .products.wd-grid-g > .wd-product,
body.term-sndk-tier-gold .products.wd-grid-g > .wd-product {
	/* «inline-block» اولیه یک باگ کلاسیک CSS داشت: چون این نوع نمایش «درون‌خطی»
	   حساب می‌شود، مرورگر طبق ارتفاع خط (line-height) والدش کمی فاصله‌ی نامرئی
	   اضافه (اینجا حدود ۱۳px) زیر هر آیتم اضافه می‌کرد — دقیقاً همان فاصله‌ی
	   عمودی بیشتر از حد که کارفرما گزارش داد. «block» این مشکل را کامل حذف
	   می‌کند و فاصله‌ی عمودی را دقیقاً به همان مقدار margin (۲۰px، برابر با
	   فاصله‌ی افقی column-gap) می‌رساند. */
	display: block;
	width: 100%;
	margin: 0 0 20px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	/* طبق درخواست صریح: هیچ کادر/سایه‌ای دور تصویر نباشد. */
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* بدون این خط، تصویر می‌تواند از عرض واقعی ستون بزرگ‌تر رندر شود (چون سایز
   انتخابی در ادمین ۷۶۸px است، فراتر از عرض هر ستون در این چیدمان). */
body.term-sndk-tier-free .products.wd-grid-g .wd-product-img-link img,
body.term-sndk-tier-subscription .products.wd-grid-g .wd-product-img-link img,
body.term-sndk-tier-gold .products.wd-grid-g .wd-product-img-link img {
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	body.term-sndk-tier-free .products.wd-grid-g,
	body.term-sndk-tier-subscription .products.wd-grid-g,
	body.term-sndk-tier-gold .products.wd-grid-g {
		column-count: 3;
		column-gap: 12px;
	}

	body.term-sndk-tier-free .products.wd-grid-g > .wd-product,
	body.term-sndk-tier-subscription .products.wd-grid-g > .wd-product,
	body.term-sndk-tier-gold .products.wd-grid-g > .wd-product {
		margin-bottom: 12px;
	}
}

@media (max-width: 767px) {
	body.term-sndk-tier-free .products.wd-grid-g,
	body.term-sndk-tier-subscription .products.wd-grid-g,
	body.term-sndk-tier-gold .products.wd-grid-g {
		column-count: 2;
		column-gap: 10px;
	}

	body.term-sndk-tier-free .products.wd-grid-g > .wd-product,
	body.term-sndk-tier-subscription .products.wd-grid-g > .wd-product,
	body.term-sndk-tier-gold .products.wd-grid-g > .wd-product {
		margin-bottom: 10px;
	}
}

/* رفع «کادر سفید» گزارش‌شده توسط کارفرما بعد از فعال‌شدن چیدمان بالا: با اینکه
   خودِ کارت (li.wd-product) و همه‌ی لایه‌های تصویر واقعاً هیچ border/box-shadow/
   background ندارند (بازبینی زنده‌ی DevTools این را رد کرد)، لوپ‌آیتم اختصاصی
   ساخته‌شده در کار قبلی #74 (برای حذف آیکون سبد/مقایسه/علاقه‌مندی + عنوان) یک
   کانتینر فلکس با padding: 20px (بالا/پایین/چپ/راست) به‌همراه gap بین عناصر
   مخفی‌شده دارد — این فاصله‌ی خالی (نه رنگی) دقیقاً همان چیزی بود که کارفرما
   با اسکرین‌شات به‌عنوان «کادر» گزارش داد: فضای سفید یکنواخت دور هر تصویر، از
   جایی که قبلاً عنوان/آیکون‌ها بودند و حالا فقط پنهانند نه حذف. فقط برای این سه
   صفحه (نه فروشگاه/بقیه) این padding و gap صفر می‌شوند تا تصویر واقعاً لبه‌به‌لبه
   با مرز کارت شود. سلکتور با ساختار (نه کلاس هش‌شده‌ی تولیدی المنتور مثل
   wd-f6a33c40 که ممکن است با هر ذخیره‌ی دوباره‌ی آن لوپ‌آیتم عوض شود) نوشته شده
   تا با تغییرات آینده‌ی آن قالب هم پایدار بماند. */
body.term-sndk-tier-free .products.wd-grid-g .wd-product-wrapper > .wp-block-wd-container,
body.term-sndk-tier-subscription .products.wd-grid-g .wd-product-wrapper > .wp-block-wd-container,
body.term-sndk-tier-gold .products.wd-grid-g .wd-product-wrapper > .wp-block-wd-container {
	padding: 0 !important;
	gap: 0 !important;
}