/**
 * ShopTop — Home (seções institucionais)
 * ------------------------------------------------------------------
 * Benefícios, título de seção compartilhado, Faixa de confiança e
 * Contato. O Hero agora vive em hero.css (Sprint D — o redesenho em 2
 * colunas justificou um arquivo próprio). As grades de produto/
 * categoria usam home-products.css. Carregado só na página inicial
 * (is_front_page()).
 *
 * Todas as seções usam a classe "alignfull" (no HTML do pattern) para
 * que o fundo ocupe a largura total dentro do <main class="wp-block-
 * group" style="layout:constrained"> de templates/front-page.html —
 * sem isso, o layout "constrained" do bloco pai cortaria qualquer
 * fundo colorido na largura do conteúdo. ".shoptop-container" dentro
 * de cada seção é só para limitar a LEITURA do texto, nunca o fundo.
 *
 * Depende de: tokens.css, variables.css, typography.css, buttons.css,
 * cards.css, utilities.css
 */

.shoptop-section-title {
	margin-bottom: var(--shoptop-space-4);
}

/* CORREÇÃO (Sprint de acabamento — "reduzir espaços vazios excessivos"):
 * era --shoptop-space-6 (48px) nos dois lados; como as 6 seções de
 * produto/categoria da Home (Achadinhos, Produtos próprios, Categorias,
 * Marketplace, Afiliados, Promoção) usam TODAS esta mesma classe, cada
 * fronteira entre 2 delas somava 48+48=96px de vazio — o dobro do
 * necessário. Reduzido para --shoptop-space-5 (32px), mesma proporção
 * de redução (33%, 96px→64px) já aplicada à fronteira Confiança/Contato
 * (ver comentário "Sprint F" mais abaixo, mesma lógica). */
.shoptop-home-section {
	padding-block: var(--shoptop-space-5);
}

/* Benefícios -------------------------------------------------------- */

.shoptop-benefits {
	padding-block: var(--shoptop-space-6);
}

.shoptop-benefits__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--shoptop-space-3);
}

@media (min-width: 480px) {
	.shoptop-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.shoptop-benefits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.shoptop-benefits__item {
	text-align: center;
}

/* Card com destino real (patterns/home/benefits.php) é um <a>, não um
 * <div> — reset do estilo nativo de link (cor/sublinhado herdados do
 * card, nunca azul/sublinhado de navegador) e foco visível explícito
 * (mesmo token de outline já usado em cards.css,
 * li.product .shoptop-btn-parceiro:focus-visible). Card sem destino
 * continua <div>, sem nenhuma destas regras (não é focável nem
 * clicável). */
a.shoptop-benefits__item {
	display: block;
	color: inherit;
	text-decoration: none;
}

a.shoptop-benefits__item:focus-visible {
	outline: 2px solid var(--shoptop-color-primary-500);
	outline-offset: 2px;
}

/* Sprint E: ícone ganha um "chip" circular de fundo em vez de emoji
 * solto — mais contraste/hierarquia sem trocar o conteúdo (continua
 * texto/emoji, sem baixar ícone externo). */
.shoptop-benefits__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--shoptop-space-2);
	border-radius: var(--shoptop-radius-full);
	background-color: var(--shoptop-color-primary-50);
	font-size: var(--shoptop-font-size-xl);
}

.shoptop-benefits__title {
	font-size: var(--shoptop-font-size-md);
	margin-bottom: var(--shoptop-space-1);
}

.shoptop-benefits__text {
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}

/* Faixa de confiança -------------------------------------------------- */

/* Sprint F: padding-bottom reduzido (era --shoptop-space-6, igual ao
 * padding-top) — o espaço vazio entre "Confiança em cada compra" e
 * "Fique por dentro das novidades" somava 2x 48px = 96px; agora soma
 * 32+32=64px (~33% a menos, ver .shoptop-contact abaixo), sem mexer no
 * respiro ANTES do Trust (padding-top continua --shoptop-space-6). */
.shoptop-trust {
	padding-top: var(--shoptop-space-6);
	padding-bottom: var(--shoptop-space-5);
	background-color: var(--shoptop-color-bg-alt);
}

.shoptop-trust__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--shoptop-space-3);
}

@media (min-width: 768px) {
	.shoptop-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.shoptop-trust__item {
	display: flex;
	gap: var(--shoptop-space-2);
	align-items: flex-start;
}

.shoptop-trust__icon {
	font-size: var(--shoptop-font-size-lg);
	flex-shrink: 0;
}

.shoptop-trust__text {
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}

/* Formas de pagamento (#shoptop-pagamento) ---------------------------
 * Seção PRÓPRIA (patterns/home/payment-methods.php) — CORREÇÃO: antes
 * era um item a mais dentro de .shoptop-trust__grid (bullet pequeno,
 * sem destaque). Fundo branco (padrão, sem .shoptop-bg-alt) para se
 * distinguir claramente da seção "Confiança" logo antes dela, que usa
 * --shoptop-color-bg-alt — nunca as duas com a mesma cor de fundo, para
 * não parecerem a mesma seção. */
.shoptop-payment-methods__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--shoptop-space-3);
}

@media (min-width: 480px) {
	.shoptop-payment-methods__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.shoptop-payment-methods__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.shoptop-payment-methods__item {
	text-align: left;
}

.shoptop-payment-methods__titulo {
	font-weight: var(--shoptop-font-weight-semibold);
	margin: 0 0 var(--shoptop-space-1);
}

.shoptop-payment-methods__descricao {
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}

.shoptop-payment-methods__descricao p {
	margin: 0;
}

.shoptop-payment-methods__aviso {
	margin-top: var(--shoptop-space-4);
	color: var(--shoptop-color-text-muted);
	font-size: var(--shoptop-font-size-xs);
}

.shoptop-payment-methods__vazio {
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}

/* Contato -------------------------------------------------------- */

/* Sprint F: padding-top reduzido — ver comentário em .shoptop-trust
 * acima (padding-bottom do Contact continua --shoptop-space-6). */
.shoptop-contact {
	padding-top: var(--shoptop-space-5);
	padding-bottom: var(--shoptop-space-6);
	text-align: center;
}

/* Bloco de newsletter (Sprint F) removido do HTML nesta rodada (Sprint
 * de acabamento pré-publicação, ver docblock de patterns/home/
 * contact.php) — nenhum endpoint real existia por trás dele. Regras
 * .shoptop-newsletter* removidas junto (nenhum outro arquivo as usa;
 * conferido antes de remover). */

.shoptop-contact__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--shoptop-space-3);
	margin-top: var(--shoptop-space-3);
}

/* Aviso não interativo ("em breve") — nunca um link/botão/formulário
 * fingindo ser funcional sem integração real por trás. */
.shoptop-contact__em-breve {
	margin-top: var(--shoptop-space-3);
	color: var(--shoptop-color-text-secondary);
	font-size: var(--shoptop-font-size-sm);
}

/* Menos espaço vazio em telas pequenas (Sprint D). */
@media (max-width: 767px) {
	.shoptop-home-section,
	.shoptop-benefits,
	.shoptop-trust,
	.shoptop-contact {
		padding-block: var(--shoptop-space-5);
	}
}