/* Cores tiradas da logo: rosa, dourado e marrom. Mobile primeiro. */
:root {
  --rosa: #d1005e;
  --rosa-escuro: #a80049;
  --dourado: #ffc030;
  --marrom: #4a1d0c;
  --creme: #fff8ec;
  --branco: #ffffff;
  --verde-agua: #3fa7a0;
  --cinza: #6b5a52;
  --linha: #ead9c4;
  --erro-fundo: #fde8ee;
  --raio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }
a { color: var(--rosa-escuro); }
h1 { font-size: 1.75rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 3px solid var(--dourado); }

:focus-visible { outline: 3px solid var(--verde-agua); outline-offset: 2px; }

.pular {
  position: absolute;
  left: -999px;
  background: var(--branco);
  padding: 0.5rem 1rem;
}
.pular:focus { left: 0.5rem; top: 0.5rem; z-index: 10; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--branco);
  border-bottom: 4px solid var(--rosa);
  position: sticky;
  top: 0;
  z-index: 5;
}
.marca { display: inline-flex; }

.botao-carrinho {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--branco);
  font-weight: 700;
  text-decoration: none;
}
.contador {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 0.4rem;
  text-align: center;
  border-radius: 999px;
  background: var(--dourado);
  color: var(--marrom);
}

.pagina { max-width: 40rem; margin: 0 auto; padding: 1rem; }

.rodape { text-align: center; color: var(--cinza); font-size: 0.9rem; padding: 1.5rem 1rem 2rem; }
.rodape p { margin: 0.2rem 0; }

.aviso { padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.aviso-aberto { border-color: var(--verde-agua); }
.aviso-fechado { background: var(--erro-fundo); border-color: var(--rosa); }
.erro { padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--erro-fundo); border: 1px solid var(--rosa); }

.categorias { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.categorias a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--branco);
  border: 2px solid var(--linha);
  text-decoration: none;
  font-weight: 600;
}

.lista-produtos, .lista-carrinho { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.produto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  align-items: center;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border-radius: var(--raio);
  background: var(--branco);
  border: 1px solid var(--linha);
  color: inherit;
  text-decoration: none;
}
.produto:hover { border-color: var(--rosa); }
.produto-nome { font-weight: 700; }
.produto-preco { font-weight: 700; color: var(--rosa-escuro); grid-row: 1; grid-column: 2; }
.produto-descricao { grid-column: 1; color: var(--cinza); font-size: 0.95rem; }

.preco-grande { font-size: 1.5rem; font-weight: 800; color: var(--rosa-escuro); margin: 0.25rem 0 1rem; }

.formulario { display: grid; gap: 1rem; margin-top: 1rem; }
.campo { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.campo label, .campo legend { font-weight: 700; padding: 0; }
select, input[type="number"], input[type="text"], input[type="tel"], textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--marrom);
  background: var(--branco);
  border: 2px solid var(--linha);
  border-radius: 10px;
}
.opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  background: var(--branco);
  border: 2px solid var(--linha);
  font-weight: 400 !important;
}
.opcao input { width: 1.4rem; height: 1.4rem; accent-color: var(--rosa); }
.opcao-preco { margin-left: auto; color: var(--cinza); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  font: inherit;
  font-weight: 700;
  color: var(--marrom);
  background: var(--branco);
  border: 2px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.botao-principal { background: var(--rosa); border-color: var(--rosa); color: var(--branco); }
.botao-principal:hover { background: var(--rosa-escuro); }
.botao-ativo { background: var(--dourado); border-color: var(--dourado); }
.botao-discreto { min-height: 44px; font-weight: 600; }

.alternar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }

.linha-carrinho { padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.linha-carrinho p { margin: 0 0 0.25rem; }
.linha-titulo { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.linha-total { color: var(--rosa-escuro); }
.linha-detalhe { color: var(--cinza); font-size: 0.95rem; }

.totais { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.totais div { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.totais dt, .totais dd { margin: 0; }
.totais .total { font-size: 1.25rem; font-weight: 800; border-top: 2px solid var(--dourado); margin-top: 0.4rem; padding-top: 0.5rem; }

@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
  .pagina { padding: 1.5rem; }
}

input[type="text"], input[type="tel"], textarea { width: 100%; }
textarea { font: inherit; resize: vertical; }
.erro-campo { color: var(--rosa-escuro); font-weight: 600; }
.nota { color: var(--cinza); font-size: 0.95rem; }
.botao-largo { width: 100%; }
.status-grande { font-size: 1.25rem; font-weight: 700; padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--branco); border: 2px solid var(--dourado); }
.caixa { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); }
.caixa h2 { margin-top: 0.25rem; }
.qr { display: flex; justify-content: center; margin: 0.75rem 0; }
.qr svg { width: 12rem; height: 12rem; }
.lista-resumo { margin: 0 0 0.5rem; padding-left: 1.2rem; }