/**
 * چیدمان پایه: کانتینر، گرید، فلکس و کلاس‌های کمکی فاصله‌گذاری.
 */

.ghaza-container {
	width: 100%;
	max-width: var( --ghaza-container-max );
	margin-inline: auto;
	padding-inline: var( --ghaza-container-padding );
}

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

.ghaza-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ghaza-space-3 );
	margin-bottom: var( --ghaza-space-5 );
}

.ghaza-section-header__title {
	margin: 0;
}

.ghaza-grid {
	display: grid;
	gap: var( --ghaza-space-4 );
}

/* گرید کارت محصول - تعداد ستون در responsive.css بر اساس breakpoint تنظیم می‌شود */
.ghaza-grid--products {
	grid-template-columns: repeat( 2, 1fr );
}

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

.ghaza-flex {
	display: flex;
}

.ghaza-flex--center {
	align-items: center;
	justify-content: center;
}

.ghaza-flex--between {
	align-items: center;
	justify-content: space-between;
}

.ghaza-flex--wrap {
	flex-wrap: wrap;
}

.ghaza-flex--column {
	flex-direction: column;
}

/* اسکرول افقی برای کاروسل‌های موبایل (بخش‌های محصولات) */
.ghaza-scroll-row {
	display: flex;
	gap: var( --ghaza-space-4 );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var( --ghaza-space-2 );
}

.ghaza-scroll-row::-webkit-scrollbar {
	display: none;
}

.ghaza-scroll-row > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.ghaza-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* کلاس‌های کمکی فاصله‌گذاری (فقط رایج‌ترین‌ها، برای جلوگیری از CSS متورم) */
.ghaza-mt-0 { margin-top: 0; }
.ghaza-mb-0 { margin-bottom: 0; }
.ghaza-gap-2 { gap: var( --ghaza-space-2 ); }
.ghaza-gap-4 { gap: var( --ghaza-space-4 ); }