/* Estilo da loja: variáveis, layout de 360 a 1.920 px, foco visível e contraste de 4,5:1. Sem build, fonte do sistema. */

:root {
  --cor-fundo: #ffffff;
  --cor-texto: #1d1d1f;
  --cor-texto-suave: #4b4b52;
  --cor-marca: #0b5d7e;
  --cor-marca-texto: #ffffff;
  --cor-faixa: #1d1d1f;
  --cor-faixa-texto: #ffffff;
  --cor-rodape: #f3f3f4;
  --cor-borda: #d4d4d8;
  --cor-foco: #0b5d7e;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largura-maxima: 75rem;
  --margem-lateral: 16px;
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 1rem;
  --espaco-4: 1.5rem;
  --espaco-5: 2.5rem;
  --raio: 6px;
  --alvo-minimo: 44px;
  --cor-erro: #9b1c1c;
  --cor-erro-fundo: #fdecec;
  --cor-sucesso: #1f5c2e;
  --cor-sucesso-fundo: #eaf3ea;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-wrap: anywhere;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: var(--cor-marca);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Foco visível em tudo o que recebe foco. */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Pular para o conteúdo": fora da tela até receber o foco. */
.pular {
  position: absolute;
  top: var(--espaco-2);
  left: var(--margem-lateral);
  z-index: 30;
  padding: var(--espaco-2) var(--espaco-3);
  color: var(--cor-marca-texto);
  background: var(--cor-marca);
  border-radius: var(--raio);
  transform: translateY(-200%);
}

.pular:focus {
  transform: none;
}

.icone {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cabeçalho */

.topo {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--espaco-3) var(--espaco-4);
  max-width: var(--largura-maxima);
  min-height: 4.5rem;
  margin: 0 auto;
  padding: var(--espaco-2) var(--margem-lateral);
}

.logo {
  flex: none;
  color: var(--cor-texto);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.menu {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-itens {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espaco-4);
}

.menu-itens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  color: var(--cor-texto);
  font-weight: 600;
  text-decoration: none;
}

.menu-itens a:hover {
  color: var(--cor-marca);
  text-decoration: underline;
}

.busca {
  display: flex;
  flex: 0 1 16rem;
  min-width: 0;
}

.busca input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-3);
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  border-right: 0;
  border-radius: var(--raio) 0 0 var(--raio);
}

.busca input::placeholder {
  color: var(--cor-texto-suave);
  opacity: 1;
}

.busca button,
.menu-botao,
.menu-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  cursor: pointer;
}

.busca button {
  border-radius: 0 var(--raio) var(--raio) 0;
}

.conta,
.carrinho {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espaco-2);
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  color: var(--cor-texto);
  text-decoration: none;
}

.conta:hover,
.carrinho:hover {
  color: var(--cor-marca);
}

.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--espaco-1);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cor-marca-texto);
  background: var(--cor-marca);
  border-radius: 999px;
}

/* Faixa de benefícios */

.faixa {
  color: var(--cor-faixa-texto);
  background: var(--cor-faixa);
}

.faixa ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-1) var(--espaco-5);
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--espaco-2) var(--margem-lateral);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* Conteúdo */

main {
  display: block;
  max-width: var(--largura-maxima);
  min-height: 50vh;
  margin: 0 auto;
  padding: var(--espaco-5) var(--margem-lateral);
}

.vitrine h1,
.aviso-pagina h1 {
  margin: 0 0 var(--espaco-3);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.15;
}

.vitrine p,
.aviso-pagina p {
  color: var(--cor-texto-suave);
  font-size: 1.125rem;
}

.aviso-pagina .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.botao {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-4);
  font-weight: 600;
  color: var(--cor-marca-texto);
  background: var(--cor-marca);
  border-radius: var(--raio);
  text-decoration: none;
}

/* Mensagens (sair, conta salva…) no topo do conteúdo */

.mensagens .erro,
.mensagens .aviso {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio);
}

.mensagens .erro {
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border: 1px solid var(--cor-erro);
}

.mensagens .aviso {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
  border: 1px solid var(--cor-sucesso);
}

/* Botão "Sair" do cabeçalho, para o cliente logado (POST para /conta/sair/) */

.sair {
  display: flex;
  flex: none;
}

.sair button {
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font: inherit;
  color: var(--cor-texto);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Rodapé em colunas */

.rodape {
  color: var(--cor-texto);
  background: var(--cor-rodape);
  border-top: 1px solid var(--cor-borda);
}

/* Com o espaço de --espaco-4 entre as colunas, as cinco cabem numa linha a partir de 1.200 px (F13). */
.rodape-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espaco-4);
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--espaco-5) var(--margem-lateral) var(--espaco-4);
}

.rodape h2 {
  margin: 0 0 var(--espaco-2);
  font-size: 1rem;
}

.rodape p {
  margin: 0 0 var(--espaco-1);
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

.rodape li a,
.rodape p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  color: var(--cor-marca);
}

.rodape-base {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: var(--espaco-3) var(--margem-lateral) var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}

.rodape-base img {
  display: block;
}

/* Computador: o ☰ e o "Fechar menu" não existem. */
@media (min-width: 900px) {
  .so-celular {
    display: none;
  }
}

/* Celular: os itens do menu vão para um painel lateral aberto pelo ☰ (menu.js). */
@media (max-width: 899.98px) {
  .topo-interno {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas:
      "botao logo conta sair carrinho"
      "busca busca busca busca busca";
    gap: var(--espaco-2) var(--espaco-2);
  }

  .menu-botao {
    grid-area: botao;
    font-size: 1.375rem;
    border-radius: var(--raio);
  }

  .logo {
    grid-area: logo;
    font-size: 1.25rem;
  }

  .conta {
    grid-area: conta;
    justify-content: center;
  }

  .conta-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .sair {
    grid-area: sair;
  }

  .carrinho {
    grid-area: carrinho;
    justify-content: center;
  }

  .busca {
    grid-area: busca;
  }

  .menu {
    display: none;
  }

  .menu.aberto {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    display: block;
    width: min(20rem, 85vw);
    padding: var(--espaco-3);
    overflow-y: auto;
    background: var(--cor-fundo);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 45%);
  }

  .menu-fechar {
    margin-bottom: var(--espaco-3);
    border-radius: var(--raio);
  }

  .menu.aberto .menu-itens {
    flex-direction: column;
  }

  .menu.aberto .menu-itens a {
    display: flex;
    padding: var(--espaco-2) 0;
    border-bottom: 1px solid var(--cor-borda);
  }
}