/*
 * "Produtos" — apenas o enquadramento da página.
 *
 * O catálogo inteiro (filtros, toolbar, grid, cards, swatches, estados de vazio e loading) vem do
 * CSS do plugin `plugin-catalogo` (StellaCatalog), já alinhado à marca. Não duplicar nada dele
 * aqui: correções de miolo vão em blocks/catalog-page/style.css do plugin.
 */

.inloft-produtos {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* O catálogo já tem o próprio container (.stella-catalog__inner). Só damos um respiro vertical,
   que antes vinha do contêiner do Elementor. */
.inloft-produtos > .stella-catalog {
	display: block;
	padding-block: clamp(16px, 3vw, 32px);
}

/* ── Cabeçalho das páginas de categoria ───────────────────────────────────────
 *
 * Só existe em `taxonomy-product_cat.php`: a página "Produtos" não tem título, e continua sem.
 * Aqui o nome da categoria é o que orienta o visitante, já que a sidebar não traz o filtro de
 * categoria. Alinhado ao mesmo eixo do catálogo, que respeita o container do plugin.
 */
.inloft-produtos__cabecalho {
	padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 32px) 0;
}

/* Cor declarada no elemento, nunca herdada: o Kadence declara cor nos próprios h1–h6 e uma
   declaração no elemento vence a herança (ver "Armadilhas de CSS" no README). */
.inloft-produtos__titulo {
	margin: 0;
	font-family: var(--inloft-font-display, "Poppins", "Helvetica Neue", Arial, sans-serif);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #223829;
}

.inloft-produtos__descricao {
	max-width: 68ch;
	margin-top: 10px;
	font-family: var(--inloft-font-body, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(34, 56, 41, .78);
}

.inloft-produtos__descricao p {
	margin: 0 0 8px;
	color: rgba(34, 56, 41, .78);
}

/* Com o título acima, o catálogo não precisa do respiro cheio no topo. */
.inloft-produtos--categoria > .stella-catalog {
	padding-block: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 32px);
}