/* بلوکِ فیچرهای زمینه‌دار روی صفحهٔ تک‌محصول — dm-smart-cart-modal */

/* ⚠ ویژگیِ hidden وزنِ 0-1-0 دارد و از هر کلاسی که display بدهد می‌بازد؛ بدونِ این
   خط، عنصری که جاوااسکریپت پنهانش می‌کند کاملاً دیده می‌ماند. */
.dm-scm-pf [hidden],
.dm-scm-pf-lightbox[hidden] {
	display: none !important;
}

.dm-scm-pf {
	--dm-scm-pf-cols: 1;
	direction: rtl;
	text-align: start;
	margin: var(--dm-scm-pf-mar, 0 0 20px 0);
	padding: var(--dm-scm-pf-pad, 16px);
	border: 1px solid var(--dm-scm-pf-border, #e7e8f2);
	border-radius: var(--dm-scm-pf-rad, 14px);
	background: var(--dm-scm-pf-bg, #ffffff);
	color: var(--dm-scm-pf-text, #131327);
	font-family: var(--dm-scm-font, inherit);
}

/* قابِ خاموش: خودِ کارت‌ها می‌مانند، فقط ظرفِ بیرونی نامرئی می‌شود. حاشیهٔ پایین
   عمداً می‌ماند تا بلوک به دکمهٔ افزودن نچسبد. */
.dm-scm-pf.is-frameless {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.dm-scm-pf-group {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
	min-width: 0;
}

.dm-scm-pf-group:last-of-type {
	margin-bottom: 0;
}

.dm-scm-pf-legend {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
}

/* ⚠ کلاسِ screen-reader-text را قالب تعریف می‌کند، نه هستهٔ وردپرس در فرانت. روی
   قالبی که آن را ندارد، «عنوانِ پنهان» کاملاً دیده می‌شد. تعریفِ خودمان، محدود به
   همین بلوک. */
.dm-scm-pf .dm-scm-pf-legend.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dm-scm-pf-required {
	font-size: 11px;
	font-weight: 400;
	color: #ef3e63;
}

.dm-scm-pf-desc {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.9;
	opacity: 0.75;
}

/* ⚠ عرضِ این بلوک را ستونِ خلاصهٔ محصول تعیین می‌کند، نه پنجره (روی نمایشگرِ ۱۲۸۰
   پیکسلی همین ستون ۴۵۰ پیکسل اندازه گرفته شد)، پس شبکه ظرف‌محور بسته می‌شود و هیچ
   مدیاکوئریِ عرضِ پنجره‌ای این‌جا معنا ندارد.
   ⚠ تعدادِ ستونی که ادمین انتخاب می‌کند یک «سقف» است نه یک دستورِ مطلق: روی ستونِ
   باریکِ موبایل، دو کارتِ افقیِ کنارِ هم به عرضِ ۱۵۰ پیکسل می‌رسند و عنوان
   حرف‌به‌حرف می‌شکند (دیده شد). پس هر ستون یک حداقلِ عرض دارد و اگر جا نشد،
   شبکه خودش کمتر ستون می‌بندد. */
.dm-scm-pf-options {
	--dm-scm-pf-gap: 10px;
	--dm-scm-pf-min: 120px;
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var(--dm-scm-pf-min),
				calc((100% - (var(--dm-scm-pf-cols, 1) - 1) * var(--dm-scm-pf-gap)) / var(--dm-scm-pf-cols, 1))
			),
			1fr
		)
	);
	gap: var(--dm-scm-pf-gap);
	align-items: stretch;
}

.dm-scm-pf-options.is-horizontal {
	--dm-scm-pf-min: 240px;
}

.dm-scm-pf-options.is-vertical {
	--dm-scm-pf-min: 118px;
}

/* کارت و کنترلِ تعداد روی هم نمی‌افتند: تعداد ردیفِ خودش را زیرِ کارت دارد و
   کارت‌هایی که تعداد ندارند همان ارتفاع را رزرو می‌کنند تا شبکه هم‌تراز بماند. */
.dm-scm-pf-option {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dm-scm-pf-options.group-has-qty .dm-scm-pf-option:not(.has-qty)::after {
	content: "";
	display: block;
	height: 40px;
}

/* ورودیِ واقعی دیده نمی‌شود ولی از دسترسِ کیبورد خارج نمی‌شود — مربعِ تیک حذف
   شده، حالتِ انتخاب را خودِ کارت نشان می‌دهد. */
.dm-scm-pf-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.dm-scm-pf-card {
	position: relative;
	display: flex;
	gap: 10px;
	width: 100%;
	/* شبکه ظرفِ کارت را می‌کشد؛ خودِ کارت باید همان ارتفاع را پر کند تا کارت‌های
	   یک ردیف هم‌قد بمانند حتی وقتی متنشان هم‌اندازه نیست. */
	flex: 1 1 auto;
	margin: 0;
	padding: 7px;
	border: 1.5px solid var(--dm-scm-pf-card-border, #e7e8f2);
	border-radius: var(--dm-scm-pf-card-radius, 12px);
	background: var(--dm-scm-pf-card-bg, #ffffff);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.dm-scm-pf-card:hover {
	border-color: color-mix(in srgb, var(--dm-scm-pf-card-active, #3e68ff) 45%, #ffffff);
}

/* حالتِ انتخاب: رنگ + تیک، هرگز فقط رنگ. */
.dm-scm-pf-input:checked + .dm-scm-pf-card {
	border-color: var(--dm-scm-pf-card-active, #3e68ff);
	background: color-mix(in srgb, var(--dm-scm-pf-card-active, #3e68ff) 6%, #ffffff);
	box-shadow: 0 2px 10px rgba(62, 104, 255, 0.12);
}

.dm-scm-pf-input:focus-visible + .dm-scm-pf-card {
	outline: 2px solid var(--dm-scm-pf-card-active, #3e68ff);
	outline-offset: 2px;
}

/* --- نشانِ تیک: زبانهٔ گوشهٔ بالا-راست، هم‌شکلِ بجِ بلیت ---
   ⚠ با ویژگی‌های منطقی نوشته شده، نه left/right: این بلوک RTL است و
   inline-start همان سمتِ راست است. گوشهٔ داخلی (پایین-چپ در RTL) گرد می‌شود. */
.dm-scm-pf-check {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	/* ⚠ ارتفاع ثابت نوشته نمی‌شود: همان محاسبهٔ بجِ کناری تکرار می‌شود (پدینگِ ۳ و ۴
	   به‌علاوهٔ یک خطِ ۱۰ پیکسلی با ارتفاعِ خطِ ۱٫۶ = ۲۳ پیکسل) تا اگر روزی متریکِ بج
	   عوض شد، این زبانه خودبه‌خود با آن هم‌قد بماند و دوباره یک پیکسل اختلاف نیفتد. */
	padding-block: 3px 4px;
	font-size: 10px;
	line-height: 1.6;
	border-start-start-radius: inherit;
	border-end-end-radius: 10px;
	color: #ffffff;
	background: var(--dm-scm-pf-card-active, #3e68ff);
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

/* آیکون دقیقاً به‌اندازهٔ خطِ متنِ بج، تا جمعِ ارتفاع همان ۲۳ پیکسل دربیاید. */
.dm-scm-pf-check svg {
	width: 1.6em;
	height: 1.6em;
	display: block;
}

.dm-scm-pf-input:checked + .dm-scm-pf-card .dm-scm-pf-check {
	opacity: 1;
	transform: translateY(0);
}

/* ⚠ وقتی گروه اصلاً تصویر ندارد، نشانِ تیک روی عنوانِ وسط‌چینِ کارتِ عمودی
   می‌افتاد (روی موبایل دیده شد). همان‌جا فضای گوشه رزرو می‌شود. */
.dm-scm-pf-options.is-vertical:not(.has-media) .dm-scm-pf-card {
	padding-block-start: 30px;
}

/* --- بج پیشنهادی، حالتِ برچسبِ بلیت روی گوشهٔ کارت --- */
.dm-scm-pf-badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 1;
	padding: 3px 10px 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--dm-scm-pf-badge-text, #ffffff);
	background: var(--dm-scm-pf-badge-bg, #ef3e63);
	border-start-end-radius: inherit;
	border-end-start-radius: 10px;
}

/* --- تصویر --- */
/* ⚠ بریدن روی خودِ تصویر انجام می‌شود نه روی این ظرف: تا وقتی ظرف overflow:hidden
   داشت، برچسبِ «بزرگ‌نمایی» که با هاور باز می‌شود داخلِ قابِ ۶۵ پیکسلی بریده
   می‌شد و اصلاً دیده نمی‌شد (اندازه‌گیری‌شده: عرضِ برچسب صفر می‌ماند). */
.dm-scm-pf-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 10px;
	background: color-mix(in srgb, var(--dm-scm-pf-card-active, #3e68ff) 5%, #ffffff);
}

.dm-scm-pf-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.dm-scm-pf-icon {
	font-size: 22px;
	line-height: 1;
}

/* --- متن --- */
.dm-scm-pf-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	flex: 1 1 auto;
}

.dm-scm-pf-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.dm-scm-pf-note {
	font-size: 11px;
	line-height: 1.8;
	opacity: 0.7;
}

.dm-scm-pf-prices {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: auto;
	padding-top: 4px;
}

.dm-scm-pf-price-old {
	font-size: 11px;
	line-height: 1.6;
	color: #9a9db3;
	text-decoration: line-through;
}

.dm-scm-pf-price-now {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--dm-scm-pf-price-color, #3e68ff);
}

/* ⚠ قالب‌های فروشگاهی تقریباً همیشه مبلغ را درشت و پررنگ می‌کنند و آن قاعده روی
   خروجیِ wc_price ما هم می‌نشیند؛ اندازه با دامنهٔ خودمان دوباره تثبیت می‌شود.
   ⚠ نمادِ واحدِ پول جداگانه هم استایل می‌گیرد (چه <span> باشد چه <svg>): بدونِ این،
   «تومان» داخلِ قیمتِ خط‌خورده هم‌اندازهٔ قیمتِ نهایی می‌ماند و با عددِ ریزِ کنارش
   ناهماهنگ می‌شود — همان چیزی که روی سایت دیده شد. */
.dm-scm-pf .dm-scm-pf-prices .woocommerce-Price-amount,
.dm-scm-pf .dm-scm-pf-prices bdi,
.dm-scm-pf .dm-scm-pf-prices .woocommerce-Price-currencySymbol,
/* ⚠ اندازه‌گیری‌شده روی سایت: یک شیوه‌نامهٔ دیگر
   «.woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol» را با
   وزنِ ۰-۳-۰ و font-size ثابت دارد و چون دیرتر چاپ می‌شود، در تساویِ وزن برنده
   می‌شد — نمادِ «تومان» داخلِ قیمتِ خط‌خورده هم‌اندازهٔ قیمتِ نهایی می‌ماند.
   کلاسِ amount این‌جا فقط برای بالا بردنِ وزن به ۰-۴-۰ آمده، نه برای سلکت‌کردنِ
   چیزِ تازه‌ای؛ راهِ درستِ بردنِ این تساوی است، نه important. */
.dm-scm-pf .dm-scm-pf-prices .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-decoration: inherit;
}

/* نمادِ تصویری هم با عددِ کنارش هم‌اندازه می‌ماند. */
.dm-scm-pf .dm-scm-pf-prices svg,
.dm-scm-pf-total-value svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
}

/* ============================ چیدمان افقی ============================ */
/* ⚠ کارت‌ها کشیده می‌شوند (شبکه هم‌ارتفاعشان می‌کند) و متن تمامِ ارتفاع را می‌گیرد،
   پس قیمت با margin-top:auto ته‌نشین می‌شود و ردیفِ قیمتِ همهٔ کارت‌ها روی یک خط
   می‌نشیند — حتی وقتی عنوانِ یکی دو خطی شده باشد. */
.dm-scm-pf-options.is-horizontal .dm-scm-pf-card {
	flex-direction: row;
	align-items: stretch;
	min-height: 76px;
}

.dm-scm-pf-options.is-horizontal .dm-scm-pf-media {
	align-self: center;
	width: var(--dm-scm-pf-img-size, 65px);
	height: var(--dm-scm-pf-img-size, 65px);
}


/* ============================ چیدمان عمودی ============================ */
.dm-scm-pf-options.is-vertical .dm-scm-pf-card {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding-block-start: 9px;
}

.dm-scm-pf-options.is-vertical .dm-scm-pf-media {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-width: 140px;
}

.dm-scm-pf-options.is-vertical .dm-scm-pf-body {
	align-items: center;
	width: 100%;
	flex: 1 1 auto;
}

.dm-scm-pf-options.is-vertical .dm-scm-pf-prices {
	align-items: center;
}

/* --- بزرگ‌نماییِ تصویر ---
   ⚠ داخلِ خودِ قابِ تصویر لنگر می‌اندازد، پس در هر دو چیدمان روی همان گوشهٔ عکس
   می‌نشیند بی‌آنکه مختصاتش به کارت بند باشد.
   ⚠ عمداً گوشهٔ پایینِ لبهٔ راست، نه بالا: زبانهٔ تیک بالا-راستِ کارت است و در
   چیدمانِ افقی که تصویر به همان گوشه چسبیده، این دو دقیقاً روی هم می‌افتادند. */
.dm-scm-pf-zoom {
	position: absolute;
	inset-block-end: 5px;
	inset-inline-start: 5px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0;
	height: 24px;
	padding: 0 5px;
	border-radius: 999px;
	color: #ffffff;
	background: rgba(6, 6, 28, 0.6);
	backdrop-filter: blur(2px);
	text-decoration: none;
	overflow: hidden;
	transition: background-color 0.16s ease, gap 0.16s ease;
}

.dm-scm-pf-zoom:hover,
.dm-scm-pf-zoom:focus-visible {
	background: rgba(6, 6, 28, 0.85);
	color: #ffffff;
	gap: 4px;
}

.dm-scm-pf-zoom svg {
	flex: 0 0 auto;
}

/* برچسبِ متنی که فقط با هاور/فوکوس باز می‌شود.
   ⚠ با max-width باز و بسته می‌شود نه با display، تا حرکتش نرم باشد؛ و چون همیشه
   در DOM هست، صفحه‌خوان و فرمانِ صوتی همیشه آن را دارند. */
.dm-scm-pf-zoom-label {
	display: block;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1.8;
	transition: max-width 0.2s ease;
}

.dm-scm-pf-zoom:hover .dm-scm-pf-zoom-label,
.dm-scm-pf-zoom:focus-visible .dm-scm-pf-zoom-label {
	max-width: 90px;
}

/* --- تعداد ---
   ⚠ روی کارت شناور است، پس خودِ کارت باید جا برایش باز کند؛ وگرنه دقیقاً روی
   ردیفِ قیمت می‌افتد (دیده شد، نه حدس). فضا فقط برای کارتی رزرو می‌شود که واقعاً
   کنترلِ تعداد دارد تا بقیه بی‌دلیل بلند نشوند. */
.dm-scm-pf-qty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	margin: 6px 0 0;
	padding: 0 8px;
	box-sizing: border-box;
	border-radius: 9px;
	border: 1px solid var(--dm-scm-pf-card-border, #e7e8f2);
	background: var(--dm-scm-pf-card-bg, #ffffff);
	font-size: 11px;
}

/* یک خط برای قیمتِ خط‌خورده در همهٔ کارت‌های گروه رزرو می‌شود تا قیمتِ نهایی
   همه روی یک خط بنشیند، چه حراج داشته باشند چه نه. */
.dm-scm-pf-options.group-has-sale .dm-scm-pf-price-old {
	min-height: 1.6em;
}

.dm-scm-pf-options.group-has-sale .dm-scm-pf-prices::before {
	content: "";
	display: block;
	min-height: 1.6em;
}

.dm-scm-pf-options.group-has-sale .dm-scm-pf-prices:has(.dm-scm-pf-price-old)::before {
	display: none;
}

.dm-scm-pf-qty-label {
	opacity: 0.7;
}

.dm-scm-pf-qty-input {
	width: 46px;
	min-height: 28px;
	padding: 0 4px;
	text-align: center;
	font-size: 12px;
}

/* --- خطا و جمع --- */
.dm-scm-pf-error {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.8;
	color: #ef3e63;
	background: rgba(239, 62, 99, 0.08);
}

.dm-scm-pf-group.has-error .dm-scm-pf-card {
	border-color: #ef3e63;
}

.dm-scm-pf-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--dm-scm-pf-border, #e7e8f2);
	font-size: 13px;
}

.dm-scm-pf-total-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--dm-scm-pf-price-color, #3e68ff);
}

/* --- لایت‌باکس تصویر --- */
.dm-scm-pf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: rgba(6, 6, 28, 0.86);
}

.dm-scm-pf-lightbox-img {
	max-width: min(92vw, 900px);
	max-height: 78vh;
	object-fit: contain;
	border-radius: 12px;
	background: #ffffff;
}

.dm-scm-pf-lightbox-caption {
	max-width: 92vw;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.8;
	text-align: center;
}

.dm-scm-pf-lightbox-close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
}

.dm-scm-pf-lightbox-close:hover,
.dm-scm-pf-lightbox-close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}