/*
 * Layout primitives: containers, sections, grid. Consumes tokens.css.
 */

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

/* Vertical rhythm between page sections — generous, editorial. */
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }
.section--hero { padding-block: 0; }

@media (min-width: 768px) {
	.section { padding-block: var(--sp-9); }
}

/* Responsive auto-grid used by product listings and feature blocks. */
.grid {
	display: grid;
	gap: var(--sp-5) var(--sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
}
@media (min-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }

.center { text-align: center; }
.measure { max-width: var(--container-text); margin-inline: auto; }