/* Cabecalho fixo: marca, busca e contato. */

.topo {
  position: sticky; top: 0; z-index: 80;
  /* Opaco, nao mais vidro fosco.

     Com 82% de opacidade o cabecalho deixava passar o que rolava atras —
     e o saturate ainda intensificava a cor —, entao ele mudava de tom
     conforme o video escuro ou o conteudo cinza passavam por baixo. A
     barra de departamentos, acrescentada depois, e opaca: as duas faixas
     discordavam na mesma rolagem, e o cabecalho aparecia partido em
     duas cores. Loja quer topo estavel e legivel, nao efeito. */
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.topo[data-rolado="true"] {
  border-bottom-color: var(--linha);
  box-shadow: var(--sombra-baixa);
}

.topo-in {
  display: flex; align-items: center; gap: 18px;
  height: var(--topo-altura);
}
.topo-marca img { height: 40px; width: auto; }

.topo-busca {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 460px; min-width: 0; height: 38px;
  padding: 0 14px;
  background: var(--nuvem);
  border: 1px solid transparent;
  border-radius: 0;
  transition: background .18s, border-color .18s;
}
.topo-busca:focus-within { background: #fff; border-color: var(--linha-forte); }
.topo-busca svg { width: 17px; height: 17px; flex: none; stroke: var(--texto-fraco); fill: none; stroke-width: 2; }
.topo-busca input {
  width: 100%; border: 0; outline: 0; background: none;
  /* 16px evita o zoom automatico do Safari no iOS */
  font-size: 16px; color: var(--texto);
}
.topo-busca input::placeholder { color: var(--texto-fraco); }

.topo-zap {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: none; color: var(--texto);
  border-radius: 0;
  transition: color .18s;
}
.topo-zap:hover { color: #25D366; }
.topo-zap svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 820px) {
  .topo-in { flex-wrap: wrap; height: auto; padding-block: 12px; gap: 12px; }
  .topo-busca { order: 3; flex: 1 1 100%; margin-left: 0; }
  .topo-zap { margin-left: auto; }
}