/*
 * Acabou de chegar (#produtos): grade com o card completo da vitrine.
 * 24 peças por vez fecham a fileira em 2, 3, 4, 6 e 8 colunas (nunca 5 nem 7).
 * Sem content-visibility aqui: a seção é a âncora do atalho Novidades do hero.
 */
.hm-nov { scroll-margin-top: 172px; } /* topo fixo do celular: marca, busca e categorias */
.hm-nov [hidden] { display: none !important; }

.hm-nov-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-nov-item { display: flex; min-width: 0; }
.hm-nov-item > * { flex: 1 1 auto; min-width: 0; }
.hm-nov-novo { animation: hm-nov-entra .35s ease both; }
@keyframes hm-nov-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* O card da vitrine traz as cores do Tailwind nos links; a regra geral ".hm a { color: inherit }"
   tinha mais peso e apagava o branco do Comprar e o cinza do nome da loja. */
.hm-nov-item a.text-white { color: #fff; }
.hm-nov-item a.text-stone-500 { color: #78716c; }
.hm-nov-item a.text-stone-600 { color: #57534e; }
.hm-nov-item a.hover\:text-brasi-600:hover { color: var(--hm-verde); }

.hm-nov-rodape { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.hm-nov-erro { margin: 0; font-size: 13.5px; font-weight: 600; color: #b91c1c; text-align: center; }
.hm-nov-aviso { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hm-nov .hm-btn[aria-busy="true"] { cursor: progress; }

@media (min-width: 640px) {
    .hm-nov-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .hm-nov-rodape .hm-btn { min-width: 260px; }
}
@media (min-width: 1024px) {
    .hm-nov { scroll-margin-top: 124px; } /* no computador a busca fica na mesma linha da marca */
    .hm-nov-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .hm-nov-rodape { margin-top: 28px; }
}
@media (min-width: 1280px) {
    .hm-nov-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
    .hm-nov-grade { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .hm-nov-novo { animation: none; }
}