/**
 * پایه‌ی ریسپانسیو - Mobile-first.
 * بریک‌پوینت‌های تست‌شده: 360 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
 *
 * قانون پروژه: موبایل نسخه‌ی کوچک‌شده‌ی دسکتاپ نیست.
 * بخش‌های اختصاصی موبایل (ناوبری پایین چسبان، بات‌شیت فیلتر و ...) در فاز ۱۳ اضافه می‌شوند؛
 * این فایل فقط پایه‌ی گرید/تایپوگرافی/کانتینر را تنظیم می‌کند.
 */

/* ---------- پایه: موبایل کوچک (360px به بالا) ---------- */
:root {
	--ghaza-container-padding: 16px;
}

.ghaza-grid--products {
	grid-template-columns: repeat( 2, 1fr );
}

.ghaza-grid--categories {
	grid-template-columns: repeat( 3, 1fr );
}

.ghaza-hide-mobile {
	display: none !important;
}

/* ---------- 768px: تبلت ---------- */
@media ( min-width: 768px ) {
	:root {
		--ghaza-container-padding: 24px;
	}

	.ghaza-grid--products {
		grid-template-columns: repeat( 3, 1fr );
	}

	.ghaza-grid--categories {
		grid-template-columns: repeat( 4, 1fr );
	}

	.ghaza-hide-mobile {
		display: revert !important;
	}

	.ghaza-hide-tablet-up {
		display: none !important;
	}
}

/* ---------- 1024px: لپ‌تاپ / دسکتاپ کوچک ---------- */
@media ( min-width: 1024px ) {
	:root {
		--ghaza-font-size-display: 3rem;
	}

	.ghaza-grid--products {
		grid-template-columns: repeat( 4, 1fr );
	}

	.ghaza-grid--categories {
		grid-template-columns: repeat( 6, 1fr );
	}

	.ghaza-hide-desktop {
		display: none !important;
	}
}

/* ---------- 1280px: دسکتاپ استاندارد ---------- */
@media ( min-width: 1280px ) {
	:root {
		--ghaza-container-padding: 32px;
	}

	.ghaza-grid--products {
		grid-template-columns: repeat( 5, 1fr );
	}
}

/* ---------- 1440px و بالاتر: دسکتاپ بزرگ ---------- */
@media ( min-width: 1440px ) {
	.ghaza-grid--categories {
		grid-template-columns: repeat( 7, 1fr );
	}
}

/* ---------- زیر 480px: خیلی کوچک (390/414 و کوچک‌تر) ---------- */
@media ( max-width: 480px ) {
	.ghaza-text-display {
		font-size: 2rem;
	}

	.ghaza-text-h1 {
		font-size: 1.75rem;
	}

	.ghaza-section {
		padding-block: var( --ghaza-space-6 );
	}
}