/* =============================================================================
   LOBATO MACHADO — página de favoritos
   Complementa style.css. Só o que é exclusivo desta tela.

   01. Topo
   02. Barra (contagem + limpar)
   03. Estado vazio
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 01. TOPO */
.pagina-favoritos { background: var(--surface); }
.favoritos { padding-top: var(--header-h); }

.favoritos__topo {
  background: var(--bordo);
  color: var(--ink);
  padding-block: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}
.favoritos__topo .migalhas { color: var(--ink-50); margin-bottom: 1.25rem; }
.favoritos__topo .migalhas a { color: var(--vinho-detalhe); }
.favoritos__titulo { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); }

/* ──────────────────────────────────────────── 02. BARRA (CONTAGEM + LIMPAR) */
.favoritos__conteudo { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

.favoritos__barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.favoritos__contagem { font-size: .95rem; color: var(--ink-70); }
.favoritos__contagem strong { color: var(--ink); font-weight: 800; }

/* ─────────────────────────────────────────────────────── 03. ESTADO VAZIO
   Mesmo padrão do "sem resultados" da busca. */
.favoritos .vazio {
  display: grid; justify-items: center; gap: .75rem; text-align: center;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.favoritos .vazio svg { font-size: 2.75rem; color: var(--ink-30); }
.favoritos .vazio h2 { font-size: var(--fs-h3); }
.favoritos .vazio p { color: var(--ink-50); max-width: 46ch; }
.favoritos .vazio__acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .75rem; }

@media (max-width: 700px) {
  .favoritos__barra { flex-direction: column; align-items: stretch; }
  .favoritos__barra .btn { width: 100%; }
}