/*
 * Navegacao por categorias — visual A.R Personalizados.
 *
 * Herda as cores da pagina por variaveis: catalogo, campanha e loja aplicam a sua
 * paleta sem tocar neste arquivo. Sem valores de marca fixos aqui.
 */

.nav-categorias {
  /* Dentro de um pai flex ou grid o componente se dimensionaria pelo conteudo e
     empurraria a pagina. Ele sempre ocupa a largura disponivel e rola por dentro. */
  width: 100%;
  min-width: 0;

  --nav-tinta: var(--tinta, #382723);
  --nav-tinta-suave: var(--tinta-suave, #6b5048);
  --nav-marca: var(--marca, #c47c8c);
  --nav-marca-forte: var(--marca-forte, #a15b6c);
  --nav-marca-clara: var(--marca-clara, #f3dfe4);
  --nav-linha: var(--linha, rgba(107, 80, 72, .13));
  --nav-fundo: var(--papel, #fff);
  --nav-fundo-alt: var(--fundo-alt, #f7ede6);
}

.nav-barra {
  position: relative;
  border-bottom: 1px solid var(--nav-linha);
  background: var(--nav-fundo);
}
.nav-secundaria { background: var(--nav-fundo-alt); }

/* a rolagem lateral e da barra, nunca da pagina */
.nav-trilho {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 16px;
  max-width: var(--max, 1180px);
  margin: 0 auto;
}
.nav-trilho::-webkit-scrollbar { display: none; }

/* esfuma as pontas para sinalizar que ha mais itens de lado */
.nav-barra::before,
.nav-barra::after {
  content: "";
  position: absolute; top: 0; bottom: 1px; width: 26px;
  pointer-events: none; z-index: 1;
}
.nav-barra::before { left: 0; background: linear-gradient(90deg, var(--nav-fundo), transparent); }
.nav-barra::after { right: 0; background: linear-gradient(270deg, var(--nav-fundo), transparent); }
.nav-secundaria::before { background: linear-gradient(90deg, var(--nav-fundo-alt), transparent); }
.nav-secundaria::after { background: linear-gradient(270deg, var(--nav-fundo-alt), transparent); }

.nav-item {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .8rem; font-weight: 500; line-height: 1;
  color: var(--nav-tinta-suave);
  white-space: nowrap;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav-item:hover { color: var(--nav-marca-forte); }
.nav-item:focus-visible { outline: 2px solid var(--nav-marca-forte); outline-offset: 2px; }

.nav-item.ativo {
  color: var(--nav-marca-forte);
  background: var(--nav-marca-clara);
  border-color: color-mix(in srgb, var(--nav-marca) 34%, transparent);
  font-weight: 600;
}

/* a segunda barra e apoio: tipografia menor e ativo sublinhado, nao preenchido,
   para nao competir com a categoria principal */
.nav-secundaria .nav-item {
  min-height: 36px; padding: 0 13px;
  font-size: .76rem;
}
.nav-secundaria .nav-item.ativo {
  background: transparent;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--nav-marca-forte);
  border-radius: 4px;
}

@media (min-width: 760px) {
  .nav-trilho { padding: 10px 26px; justify-content: center; flex-wrap: nowrap; }
  .nav-item { font-size: .82rem; padding: 0 18px; }
  .nav-secundaria .nav-item { font-size: .78rem; }
  /* em tela larga cabe tudo: as bordas esfumadas so atrapalhariam */
  .nav-barra::before, .nav-barra::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-trilho { scroll-behavior: auto; }
  .nav-item { transition: none; }
}