/**
 * نشان تومان و قیمتِ «از …».
 *
 * خودِ شکلِ نشان در includes/class-nb-price.php است — یک SVG که روی
 * فیلترِ واحد پول می‌نشیند، همان روشِ استاندارد. اینجا فقط اندازه و
 * فاصله‌اش تنظیم می‌شود.
 *
 * فایل جداست و نه داخل CSS کارت محصول یا اجزای دیگر: قیمت همه‌جای
 * سایت هست — کارت، صفحه‌ی محصول، سبد، تسویه، دکمه‌ی خرید و حساب
 * کاربری — پس یک فایلِ کوچکِ سراسری درست‌ترین جای آن است.
 *
 * یک هشدارِ لوکال: روی کلونِ لوکال افزونه‌ی persian-woocommerce فعال
 * است و ارقامِ داخل viewBox و path را هم فارسی می‌کند، پس آنجا نشان
 * ۰×۰ می‌شود. روی nebolar.com آن افزونه نیست و اندازه‌گیری شد که
 * «بستۀ وردپرس پارسی» داخل SVG دست نمی‌زند.
 */

/**
 * اندازه به em بسته است تا با قلمِ هر جایی که قیمت دارد جلو برود:
 * کارت محصول، صفحه‌ی محصول، سبد، تسویه و دکمه‌ی خرید.
 *
 * حاشیه‌ی افقی عمداً صفر است. ووکامرس خودش بین عدد و نشان یک  
 * می‌گذارد؛ حاشیه‌ی اضافه روی یکی از دو طرف می‌نشست و در جاهایی که
 * جهتِ ظرف فرق داشت (مثل داخلِ bdi یا دکمه‌ی خرید) سمتش برعکس
 * می‌افتاد — همان چیزی که در سایت دیده می‌شد.
 */
/**
 * جهتِ قیمت — دلیلِ «بعضی جاها برعکس است».
 *
 * جای نشان را مرورگر از روی جهتِ ظرف تصمیم می‌گیرد، نه از روی CSS ما.
 * اندازه‌گیری روی همین سایت:
 *
 *     صفحه‌ی فروشگاه   dir=ltr  → نشان سمتِ راستِ عدد
 *     صفحه‌ی خانه      dir=rtl  → نشان سمتِ چپِ عدد
 *     دکمه‌ی خرید      dir=ltr  → نشان سمتِ راستِ عدد
 *
 * یعنی قالب روی بعضی ظرف‌های قیمت جهت را لاتین گذاشته و همان‌جاها
 * نشان می‌پرد آن‌طرف. اینجا جهتِ خودِ مبلغ صریحاً راست‌به‌چپ می‌شود تا
 * همه‌جا یکسان باشد: عدد راست، نشان چپ — همان «۱۰٬۰۰۰ تومان».
 *
 * isolate لازم است تا این جهت به متنِ اطرافش سرایت نکند.
 *
 * bdi جداگانه هدف گرفته شده و این مهم‌ترین تکه است: ووکامرس مبلغ را
 * داخل <bdi> می‌گذارد و bdi به‌طور پیش‌فرض dir="auto" است. محتوا با
 * رقم شروع می‌شود و رقم حرفِ «قوی» نیست، پس auto به لاتین می‌افتد و
 * نشان می‌رود سمت راست. بدون این خط، حبابِ قیمتِ روی دکمه‌ی خرید
 * برعکسِ بقیه‌ی سایت می‌ماند — دیده‌شده، نه فرضی.
 */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.nb-atc__price,
.nb-atc__price bdi {
	direction: rtl;
	unicode-bidi: isolate;
}

/**
 * اندازه و فاصله.
 *
 * فاصله با margin-inline-start است نه فقط &nbsp;: حالا که جهتِ مبلغ
 * بالاتر صریحاً راست‌به‌چپ شده، «inline-start» همیشه همان لبه‌ای است
 * که رو به رقم‌هاست — پس فاصله در همه‌ی صفحه‌ها یک‌جور می‌افتد. قبل از
 * پین‌کردنِ جهت، همین حاشیه در بعضی جاها آن‌طرف می‌نشست.
 *
 * اندازه کمی بزرگ‌تر از قلمِ کنارش است: طرح دوخطی است و در ۱em دو
 * سطرش به هم می‌چسبد.
 */
.nb-toman {
	display: inline-block;
	/* نسبتِ خودِ طرح ۱۳×۱۲ است */
	width: 1.24em;
	height: 1.14em;
	flex: none;
	vertical-align: -.16em;
	margin-inline-start: .26em;
}

/* fill روی خودِ تگ currentColor است؛ این فقط تضمین می‌کند مسیرها هم
   همان رنگ را بگیرند اگر جایی fill را بازنویسی کرده باشد. */
.nb-toman path {
	fill: currentColor;
}

/* پیشوندِ اختیاریِ پیش از قیمت (پیش‌فرض خالی است) */
.nb-price-from {
	font-size: .82em;
	font-weight: 400;
	opacity: .7;
	margin-inline-end: .15em;
}

/**
 * قیمتِ تخفیف‌دار: قیمتِ قدیم ریز و بالای قیمتِ جدید.
 *
 * ووکامرس قیمت قدیم را در <del> و جدید را در <ins> می‌گذارد و هر دو
 * inline اند. اینجا ستونی می‌شوند و del با order:-1 می‌رود بالا.
 *
 * یک‌خطی‌کردنشان امتحان شد و صاحبِ فروشگاه همین طرح را ترجیح داد:
 * رقمِ اصلی این‌طور بزرگ‌تر دیده می‌شود و چشم اول سراغ آن می‌رود، در
 * حالی که در یک ردیف دو مبلغ هم‌وزن به نظر می‌رسند.
 *
 * ارتفاعِ کارت‌ها با این هم یکسان می‌ماند: شبکه ردیف را می‌کشد و
 * .nb-ps__foot با margin-top:auto ته کارت می‌چسبد، پس خطِ دومِ قیمت
 * از بالا جا باز می‌کند نه از پایین.
 */
.price {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.6;
	white-space: nowrap;
}

.price del {
	order: -1;
	font-size: .8em;
	opacity: .5;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.price ins {
	text-decoration: none;
	background: none;
}

/* در ستون‌های خیلی باریک، به‌جای سرریز کمی کوچک‌تر شود */
@media (max-width: 420px) {

	.price {
		font-size: .92em;
	}
}