/**
 * «اغلب با هم خریده می‌شوند» — چیدمان فروشگاهی
 *
 * چرا این فایل ساخته شد
 * ---------------------
 * تا پیش از ۶٫۱۶ کل این بخش استایل درون خطی داشت و هیچ شیوه نامه ای نداشت. هر
 * کارت width:120px ثابت بود داخل یک flex بدون توزیع، پس روی سفارش دو قلمی
 * ۲۵۴ پیکسل به لبه راست می چسبید و بقیه عرض — حدود ۱۵۰۰ پیکسل — خالی می ماند.
 * فروشنده این را «به هم ریختگی فاصله ها» دید و حق داشت.
 *
 * قاعده ای که این فایل رعایت می کند
 * ---------------------------------
 * این بخش را افزونه به صفحه محصول یک قالب دلخواه تزریق می کند. پس باید
 * خنثی باشد و خودش را با قالب وفق دهد، نه اینکه اندازه و رنگ خودش را تحمیل
 * کند. برای همین:
 *   - اندازه قلم و رنگ متن از قالب ارث می رسد (font-size دستی نداریم مگر
 *     برای ریزه کاری ها، آن هم نسبی با em).
 *   - رنگ ها به متغیر رفته اند تا فروشنده یا قالب بتواند بدون !important
 *     بازنویسی کند. مقدار پیش فرض همان بنفش پیشین است تا فروشگاه های موجود
 *     تغییری نبینند.
 *   - هیچ !important در کل فایل نیست.
 *
 * راست به چپ
 * ----------
 * هیچ ویژگی فیزیکی (left/right/margin-left/...) به کار نرفته. همه چیز منطقی
 * است، پس چیدمان در هر دو جهت درست می افتد بدون شیوه نامه دوم.
 */

.wooplus-fbt {
	--wpfbt-accent: #6d28d9;
	--wpfbt-line: #e6e8ef;
	--wpfbt-soft: #eef0f5;
	--wpfbt-muted: #6b7280;
	--wpfbt-card: #fff;
	--wpfbt-gap: clamp(12px, 2vw, 20px);
	/* کف کارت. کمتر از این، نام محصول به سه چهار خط می شکند. */
	--wpfbt-col: 150px;

	margin-block: 34px;
	padding: 18px;
	border: 1px solid var(--wpfbt-line);
	border-radius: 14px;
	background: var(--wpfbt-card);
	box-sizing: border-box;
}

.wooplus-fbt *,
.wooplus-fbt *::before,
.wooplus-fbt *::after {
	box-sizing: inherit;
}

.wooplus-fbt__title {
	margin: 0 0 14px;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * شبکه اقلام — همان چیزی که تیکت درباره اش بود.
 *
 * auto-fill به جای auto-fit عمدی است. با auto-fit ستون های خالی جمع می شوند و
 * دو کارت کش می آیند تا کل عرض را پر کنند، یعنی روی یک صفحه پهن دو تصویر
 * غول پیکر. auto-fill ستون های خالی را نگه می دارد، پس کارت ها اندازه طبیعی
 * خود را دارند و از ابتدای سطر می چینند — همان رفتاری که بقیه بخش های صفحه
 * دارند.
 * ------------------------------------------------------------------------ */
.wooplus-fbt__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--wpfbt-col), 1fr));
	gap: var(--wpfbt-gap);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* روی نمایشگر پهن، کارت بیش از این کش نیاید. سقف بر خود ستون نشسته نه بر
   کارت، تا فاصله ها یکنواخت بمانند و کارت آخر ناگهان جا نیفتد. */
@media (min-width: 900px) {
	.wooplus-fbt__grid {
		grid-template-columns: repeat(auto-fill, minmax(var(--wpfbt-col), 200px));
		justify-content: start;
	}
}

/* موبایل: دو ستونه تا کارت تمام عرض را نگیرد و اسکرول بی جهت بلند نشود. */
@media (max-width: 480px) {
	.wooplus-fbt {
		--wpfbt-col: 130px;
	}
}

.wooplus-fbt__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: border-color .15s ease, background-color .15s ease;
}

.wooplus-fbt__item:hover {
	border-color: var(--wpfbt-soft);
	background: color-mix(in srgb, var(--wpfbt-accent) 4%, transparent);
}

/* حلقه تمرکز روی خود کارت می نشیند نه روی چک باکس ۱۸ پیکسلی، چون سطح کلیک
   واقعی همین کارت است. کاربر صفحه کلید باید ببیند کجاست. */
.wooplus-fbt__item:focus-within {
	border-color: var(--wpfbt-accent);
	outline: 2px solid var(--wpfbt-accent);
	outline-offset: 2px;
}

.wooplus-fbt__cb {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--wpfbt-accent);
	z-index: 1;
}

/* تصویر: نسبت ثابت تا جابه جایی چیدمان (CLS) رخ ندهد، و contain تا بسته بندی
   محصول بریده نشود — این کالاها اغلب قوطی و تیوب بلندند. */
.wooplus-fbt__item img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 8px;
}

/* نام محصول: به جای بریدن با سه نقطه در سرور، دو خط نمایش می دهیم. متن کامل
   در title باقی می ماند، پس چیزی از دست نمی رود. */
.wooplus-fbt__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9em;
	line-height: 1.7;
	min-block-size: calc(2 * 1.7em);
}

.wooplus-fbt__price {
	font-size: .9em;
	font-weight: 700;
	color: var(--wpfbt-accent);
	margin-block-start: auto;
}

.wooplus-fbt__self {
	font-size: .78em;
	color: var(--wpfbt-muted);
}

/* ---------------------------------------------------------------------------
 * پاورقی — جمع و دکمه
 * ------------------------------------------------------------------------ */
.wooplus-fbt__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-block-start: 16px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--wpfbt-soft);
}

.wooplus-fbt__sum {
	font-size: .95em;
}

.wooplus-fbt__total {
	color: var(--wpfbt-accent);
	font-weight: 700;
}

/* دکمه از قالب رنگ می گیرد. فقط کف لمسی را تضمین می کنیم — دکمه بلندترین
   عنصر پاورقی است و روی موبایل نباید زیر ۴۴ پیکسل بیفتد. */
.wooplus-fbt__submit {
	margin-inline-start: auto;
	min-block-size: 44px;
}

@media (max-width: 480px) {
	.wooplus-fbt__submit {
		inline-size: 100%;
		margin-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wooplus-fbt__item {
		transition: none;
	}
}

@media (forced-colors: active) {
	.wooplus-fbt__item:focus-within {
		outline: 2px solid CanvasText;
	}
}