/* ============================================
   catalogo.css — Estilos dos filtros, pílulas e grade do catálogo
   Bravus Agro © 2026
   Depende de: css/base.css e css/home.css (carregar ANTES)
   ============================================ */

/* ── HERO DO CATÁLOGO ──────────────────────────────────────── */
.cat-hero {
  padding: 7rem 0 3rem;
  background: linear-gradient(180deg, var(--cor-preto-suave) 0%, var(--cor-fundo) 100%);
  border-bottom: 1px solid var(--cor-cinza-linha);
}

.cat-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--cor-dourado);
  margin-bottom: 0.5rem;
}

.cat-subtitulo {
  color: var(--cor-texto-secundario);
  font-size: var(--fs-md);
}

/* ── BARRA DE FILTROS ──────────────────────────────────────── */
.cat-filtros-wrapper {
  background: var(--cor-preto-suave);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--cor-cinza-linha);
  position: sticky;
  top: 64px;
  z-index: 50;
}

.cat-filtros {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.cat-filtros input[type="search"],
.cat-filtros select {
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-cinza-linha);
  border-radius: var(--raio-md);
  color: var(--cor-texto-primario);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-sm);
  padding: 0.6rem 1rem;
  transition: border-color var(--transicao-rapida);
}

.cat-filtros input[type="search"] {
  flex: 1;
  min-width: 220px;
}

.cat-filtros input[type="search"]:focus,
.cat-filtros select:focus {
  outline: none;
  border-color: var(--cor-dourado);
}

.cat-filtros select {
  cursor: pointer;
}

.contador-resultados {
  font-size: var(--fs-sm);
  color: var(--cor-texto-muted);
  margin-top: 0.5rem;
}

/* ── PÍLULAS DE SUBCATEGORIA ───────────────────────────────── */
.cat-subcategorias-wrapper {
  background: var(--cor-fundo);
  padding: 1.5rem 0 0.5rem;
  border-bottom: 1px solid var(--cor-cinza-linha);
}

.pilulas-subcategoria {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pilula {
  padding: 8px 16px;
  border-radius: 999px;
  background: #2a2a2a;
  color: #d4d4d4;
  border: 1px solid #444;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  white-space: nowrap;
}

.pilula.ativa {
  background: var(--cor-dourado);
  color: var(--cor-preto);
  font-weight: 500;
  border-color: var(--cor-dourado);
}

.pilula:hover:not(.ativa) {
  border-color: var(--cor-dourado);
  color: #f5f5f5;
}

.pilula .contador {
  opacity: 0.7;
  margin-left: 4px;
}

/* ── RESPONSIVIDADE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .pilulas-subcategoria {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px; /* espaço para barra de rolagem se visível */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Esconde a scrollbar para visual limpo (opcional mas recomendado no mobile) */
  .pilulas-subcategoria::-webkit-scrollbar {
    display: none;
  }
  .cat-filtros input[type="search"] {
    min-width: unset;
    width: 100%;
  }
  .cat-filtros-wrapper {
    position: static;
  }
}