/**
 * ShopTop Design System — Utilitários
 * ------------------------------------------------------------------
 * Classes utilitárias pequenas e de responsabilidade única, para
 * evitar CSS inline e reduzir a necessidade de estilos ad-hoc no
 * Elementor/editor de blocos... (não usado neste projeto) — aqui,
 * no editor de blocos nativo do WordPress e nos templates PHP.
 *
 * Convenção de nomes: shoptop-{propriedade}-{valor}
 * A escala de espaçamento (1 a 8) é a mesma de tokens.css.
 *
 * Depende de: tokens.css
 */

/* Ícone SVG inline (shoptop_child_icone_svg(), inc/footer-helpers.php)
 * — WhatsApp (patterns/home/contact.php) e redes sociais do rodapé
 * (patterns/footer-shoptop.php). ~20px, nunca encolhe num flex row com
 * texto ao lado (botão/link com gap já definido pelo próprio
 * componente — .shoptop-btn/.shoptop-footer__social a). Cor sempre
 * currentColor, nunca fixada aqui — acompanha o link/botão ao redor,
 * inclusive em :hover/:focus-visible, sem precisar de regra própria. */
.shoptop-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Container central com largura máxima de leitura confortável.
 *
 * box-sizing: border-box (Sprint G.9.1) — sem isso, o padrão do
 * navegador (content-box) soma padding-inline por fora de width:100%,
 * fazendo esta classe renderizar 32px mais larga que o pai (2x
 * --shoptop-space-3) em QUALQUER largura de tela — causa raiz do
 * overflow horizontal medido em mobile (Hero, Rodapé e qualquer outra
 * seção que usa .shoptop-container, já que é a mesma classe
 * compartilhada por todas). Corrigido aqui, uma única vez, em vez de
 * em cada seção individualmente. Ver docs/STATUS-PROJETO.md, Sprint
 * G.9.1. */
.shoptop-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--shoptop-space-3);
}

/* Layout flex básico */
.shoptop-flex {
	display: flex;
}

.shoptop-flex--column {
	display: flex;
	flex-direction: column;
}

.shoptop-flex--center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.shoptop-flex--between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.shoptop-flex--wrap {
	flex-wrap: wrap;
}

/* Grid de cards (colunas ajustadas via responsive.css) */
.shoptop-grid {
	display: grid;
	gap: var(--shoptop-space-3);
}

/* Espaçamento entre itens de um flex/grid */
.shoptop-gap-1 { gap: var(--shoptop-space-1); }
.shoptop-gap-2 { gap: var(--shoptop-space-2); }
.shoptop-gap-3 { gap: var(--shoptop-space-3); }
.shoptop-gap-4 { gap: var(--shoptop-space-4); }

/* Margem/preenchimento (apenas os passos mais usados) */
.shoptop-mt-1 { margin-top: var(--shoptop-space-1); }
.shoptop-mt-2 { margin-top: var(--shoptop-space-2); }
.shoptop-mt-3 { margin-top: var(--shoptop-space-3); }
.shoptop-mt-4 { margin-top: var(--shoptop-space-4); }

.shoptop-mb-1 { margin-bottom: var(--shoptop-space-1); }
.shoptop-mb-2 { margin-bottom: var(--shoptop-space-2); }
.shoptop-mb-3 { margin-bottom: var(--shoptop-space-3); }
.shoptop-mb-4 { margin-bottom: var(--shoptop-space-4); }

.shoptop-p-2 { padding: var(--shoptop-space-2); }
.shoptop-p-3 { padding: var(--shoptop-space-3); }
.shoptop-p-4 { padding: var(--shoptop-space-4); }

/* Fundo de seção (Sprint E) — alterna branco/cinza-lilás/azul suave entre
 * seções da Home para dar ritmo à rolagem sem perder leveza. Aplicado
 * direto na tag <section> de cada pattern. */
.shoptop-bg-alt { background-color: var(--shoptop-color-bg-alt); }
.shoptop-bg-alt-blue { background-color: var(--shoptop-color-bg-alt-blue); }

/* Texto */
.shoptop-text-center { text-align: center; }
.shoptop-text-left { text-align: left; }
.shoptop-text-right { text-align: right; }

/* Esconde visualmente mas mantém acessível a leitores de tela
 * (ex.: rótulo de campo de busca só para o WooCommerce/ARIA) */
.shoptop-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}