/*
 * "Em alta" da home de vendas (12/10/2026). Só o que é desta seção (prefixo hm-ea-);
 * cabeçalho, trilho, setas e card vêm de /css/home-vendas.css.
 * Celular primeiro. Ao mudar, suba o ?v= de onde este arquivo é carregado.
 */

/* Cabeçalho: link e setas lado a lado (setas só a partir de 1024 px, no CSS comum) */
.hm-ea-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
/* As setas somem no início e no fim do trilho (o JS comum as desliga ali) */
.hm-ea .hm-seta[disabled] { visibility: hidden; }

/* Trilho como lista ordenada: sem marcador nem recuo do navegador */
.hm-ea-trilho { list-style: none; margin: 0; }
.hm-ea-item { position: relative; min-width: 0; }

/* Selos por cima da foto, no canto de baixo (o de cima já é do card e do coração).
   A camada tem a mesma largura da foto e é quadrada como ela; não pega clique. */
.hm-ea-selos { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; z-index: 1; pointer-events: none;
               display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; gap: 4px; padding: 8px; border-radius: 16px; }
.hm-ea-selos--um { box-shadow: inset 0 0 0 2px var(--hm-ouro); }
.hm-ea-selo { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 11px; font-weight: 700; line-height: 1;
              padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--hm-noite);
              box-shadow: 0 1px 4px rgba(0, 0, 0, .1); white-space: nowrap; }
.hm-ea-selo i { font-size: 10px; color: var(--hm-verde); }
.hm-ea-selo--alta { background: var(--hm-noite); color: #fff; }
.hm-ea-selo--alta i { color: var(--hm-ouro); }

/* Cartão final "Ver mais peças": do tamanho da foto, para fechar o trilho */
.hm-ea-mais { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1;
              padding: 12px; border-radius: 16px; background: var(--hm-bege); border: 1.5px dashed rgba(31, 94, 0, .28);
              text-align: center; color: var(--hm-noite); transition: background-color .15s ease, border-color .15s ease; }
.hm-ea-mais:hover { background: #fdf0d9; border-color: var(--hm-verde); }
.hm .hm-ea-mais:focus-visible { border-radius: 16px; }
.hm-ea-mais-ico { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--hm-verde); color: #fff; font-size: 16px;
                  transition: transform .15s ease; }
.hm-ea-mais:hover .hm-ea-mais-ico { transform: translateX(3px); }
.hm-ea-mais-txt { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.15; }
.hm-ea-mais-sub { display: none; font-size: 12px; color: var(--hm-suave); line-height: 1.3; }

@media (min-width: 640px) {
    .hm-ea-mais-txt { font-size: 17px; }
    .hm-ea-mais-sub { display: block; }
}
@media (min-width: 1024px) {
    .hm-ea-acoes { gap: 16px; }
    .hm-ea-selos { padding: 10px; }
    .hm-ea-selo { font-size: 11.5px; padding: 6px 9px; }
    .hm-ea-mais-ico { width: 48px; height: 48px; }
}
@media (min-width: 1280px) {
    .hm-ea-mais-txt { font-size: 18px; }
}
@media (min-width: 1800px) {
    .hm-ea-selo { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-ea-mais, .hm-ea-mais-ico { transition: none; }
    .hm-ea-mais:hover .hm-ea-mais-ico { transform: none; }
}