/*
 * Responsividade — Produtos (page-produtos.php, page-produtos-categoria.php).
 * Seletores próprios: .mer-produtos-grid, .mer-families-grid, .mer-family-card*, .mer-back-link.
 * Carregado depois de main.css. Breakpoints: xl 1200 · lg 1024 · md 768 · sm 480.
 * NÃO tocar em seletores da Foundation (_base.css).
 */

/* bp-sm */
@media (max-width: 480px) {
	/* Força coluna única e remove o mínimo de 240px das faixas auto-fit,
	   garantindo zero scroll horizontal a 320px (container ~288px). */
	.mer-produtos-grid,
	.mer-families-grid {
		grid-template-columns: 1fr;
		gap: var(--mer-space-6);
	}

	/* Card de família: thumb mais baixa e corpo menos folgado no telemóvel. */
	.mer-family-card__thumb {
		height: 140px;
	}
	.mer-family-card__body {
		padding: var(--mer-space-5);
	}
	.mer-family-card__title {
		font-size: var(--mer-fs-lg);
	}
}