/*!
 * CzarCommerce Container — FASE 12.3
 * -----------------------------------------------------------------------------
 * Container responsivo próprio. Centraliza conteúdo e aplica max-width
 * conforme o tipo:
 *
 *   .czar-container          1200px (default — alinha com layoutsize comum WC)
 *   .czar-container--sm        720px (texto longo, artigos)
 *   .czar-container--md        960px (formulários, paineis)
 *   .czar-container--lg       1440px (galerias amplas)
 *   .czar-container--fluid    100% (full-bleed com padding lateral)
 *
 * Padding lateral responsivo via clamp:
 *   - mobile: 16px
 *   - desktop: 32px
 *
 * Não toca em .alignfull do Gutenberg — esses continuam edge-to-edge.
 */

.czar-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(var(--czar-space-4), 3vw, var(--czar-space-8));
	padding-right: clamp(var(--czar-space-4), 3vw, var(--czar-space-8));
	box-sizing: border-box;
}

.czar-container--sm {
	max-width: 720px;
}

.czar-container--md {
	max-width: 960px;
}

.czar-container--lg {
	max-width: 1440px;
}

.czar-container--fluid {
	max-width: none;
}

/* ---- Section: bloco vertical com padding consistente ---- */

.czar-section {
	padding-top: var(--czar-space-16);
	padding-bottom: var(--czar-space-16);
}

.czar-section--sm {
	padding-top: var(--czar-space-8);
	padding-bottom: var(--czar-space-8);
}

.czar-section--lg {
	padding-top: var(--czar-space-24);
	padding-bottom: var(--czar-space-24);
}

.czar-section--surface {
	background-color: var(--czar-color-surface, #fff);
}

.czar-section--muted {
	background-color: color-mix(in srgb, var(--czar-color-text) 4%, var(--czar-color-bg, #fff));
}

@media (max-width: 640px) {
	.czar-section,
	.czar-section--lg {
		padding-top: var(--czar-space-12);
		padding-bottom: var(--czar-space-12);
	}
	.czar-section--sm {
		padding-top: var(--czar-space-6);
		padding-bottom: var(--czar-space-6);
	}
}