/* ==========================================================
   CATÁLOGO — usa a base de css/home.css (cabeçalho, botões, rodapé,
   .produto). Aqui ficam só as partes próprias da página de linha.
   ========================================================== */

.pagina-topo {
  background: var(--soft);
  padding: calc(64px + clamp(36px, 5vw, 72px)) 0 clamp(36px, 5vw, 72px);
}
.pagina-topo-grade { display: grid; gap: 32px; align-items: center; }

.migalhas {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.migalhas a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.migalhas [aria-current] { color: var(--ink); }

.pagina-topo h1 {
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.03;
}
.pagina-topo .lede { margin-top: 16px; font-size: 17px; }

.trocar-linha { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.trocar-linha a {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.trocar-linha a:hover { color: var(--ink); }
.trocar-linha a[aria-current] { color: var(--ink); border-color: var(--ink); }

.pagina-topo .banner { aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.pagina-topo .banner img { width: 100%; height: 100%; object-fit: cover; }

/* filtros */
.filtros {
  position: sticky; top: 64px; z-index: 30;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.filtros-lista { display: flex; gap: clamp(20px, 3vw, 40px); overflow-x: auto; scrollbar-width: none; }
.filtros-lista::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; background: none; border: 0; cursor: pointer; padding: 18px 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .3s ease, border-color .3s ease;
}
.filtro:hover { color: var(--ink); }
.filtro[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.filtro small { font-weight: 500; letter-spacing: 0; margin-left: 4px; color: var(--muted); }

/* grade */
.catalogo { padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); }
.catalogo-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.produto .sem-foto {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.produto .quadro img { width: 86%; height: 86%; }
.produto h3 { margin-top: 2px; }
.produto[hidden] { display: none; }
.catalogo-vazio { color: var(--muted); padding: 40px 0; }

@media (min-width: 700px) {
  .catalogo-grade { grid-template-columns: repeat(3, 1fr); gap: 40px 22px; }
}
@media (min-width: 960px) {
  .pagina-topo-grade { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (min-width: 1180px) {
  .catalogo-grade { grid-template-columns: repeat(4, 1fr); }
}