/* Container, 12 kolon grid, full-bleed, ürün kart gridi. */
.container {
	width: min(100% - 2 * var(--gutter), var(--container-max));
	margin-inline: auto;
}
.container--narrow {
	width: min(100% - 2 * var(--gutter), var(--container-narrow));
	margin-inline: auto;
}

/* 12 kolon. Çocuklar kolon genişliğini --span-* değişkenleriyle belirler (mobile-first). */
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
}
.grid > * { grid-column: span var(--span, 12); }
@media (min-width: 768px)  { .grid > * { grid-column: span var(--span-md, var(--span, 12)); } }
@media (min-width: 1024px) { .grid > * { grid-column: span var(--span-lg, var(--span-md, var(--span, 12))); } }
@media (min-width: 1600px) { .grid > * { grid-column: span var(--span-xl, var(--span-lg, var(--span-md, var(--span, 12)))); } }

/* Ürün kartları: mobil 1, tablet 2, desktop 2, geniş desktop en fazla 3. Asla 5. */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7) var(--grid-gap);
}
@media (min-width: 768px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

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

.site-main { min-height: 50vh; }