/**
 * تعدادِ ستون‌های شبکه‌ی محصولات، در هر اندازه‌ی صفحه.
 *
 * چرا فایلِ جداست و داخلِ loop.css نیست:
 *
 * قاعده‌ی «زیر ۴۰۰ پیکسل دو ستون» را در loop.css نوشتم و روی سرور
 * اعمال نشد. فایلِ منبع روی سرور درست بود (با ?cb=random خوانده شد و
 * دو ستون داشت) ولی CSSِ ترکیب‌شده‌ی لایت‌اسپید همچنان نسخه‌ی قدیمیِ آن
 * قاعده را داشت — یعنی بهینه‌ساز یک کپیِ کهنه از loop.css نگه داشته
 * بود. هیچ‌کدام از پاکسازی‌ها آزادش نکرد: نه «پاکسازی همه»، نه کشِ
 * CSS/JS، نه UCSS؛ فایلِ ترکیبی بازتولید شد (هشِ ver عوض شد) ولی از
 * همان منبعِ کهنه.
 *
 * یک نشانیِ تازه تنها چیزی بود که بهینه‌ساز را مجبور کرد فایل را از نو
 * بخواند. اینکه ستون‌ها جدا از استایلِ کارت باشند هم فی‌نفسه بد نیست:
 * این فایل فقط چیدمان است.
 */

@media (max-width: 1024px) {

	.woocommerce ul.products {
		--nb-loop-cols: 3;
	}
}

@media (max-width: 767px) {

	.woocommerce ul.products {
		--nb-loop-cols: 2;
	}
}

/*
 * زیر ۴۰۰ پیکسل هم دو ستون می‌ماند.
 *
 * قبلاً یک ستون می‌شد و مالک گزارش داد روی گوشی‌اش هر ردیف فقط یک
 * محصول دارد — گوشی‌های رایج (۳۹۰ پیکسل) دقیقاً زیر همین حد می‌افتند و
 * تک‌ستونی یعنی برای دیدنِ ۲۰ محصول ۲۰ بار اسکرول. به‌جای کم‌کردنِ
 * ستون، فاصله کم می‌شود تا دو کارت جا شوند.
 */
@media (max-width: 400px) {

	.woocommerce ul.products {
		--nb-loop-cols: 2;
		gap: 10px;
	}
}