/* ===== Identidade visual (ver CLAUDE.md) ===== */
:root {
  --vermelho: #960001;
  --vermelho-escuro: #6E0001;
  --vermelho-claro: #F9E6E6;
  --creme: #FFF8F0;
  --branco: #FFFFFF;
  --texto: #2B1A17;
  --texto-suave: #6B5B57;
  --borda: #EADFD6;
  --whatsapp: #25D366;

  --fonte-titulo: "Poppins", system-ui, sans-serif;
  --fonte-texto: "Inter", system-ui, sans-serif;

  --altura-topo: 64px;
  --altura-abas: 52px;
  --raio-card: 12px;
  --raio-botao: 10px;
  --sombra: 0 1px 3px rgba(43, 26, 23, .08), 0 2px 8px rgba(43, 26, 23, .05);
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.25; margin: 0; }

/* ===== Cabeçalho fixo ===== */
.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: var(--vermelho);
  color: var(--branco);
}

.topo-logo img { height: 34px; width: auto; }

.topo-carrinho {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px 4px 8px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  cursor: pointer;
}
.topo-carrinho:hover, .topo-carrinho:active { background: var(--vermelho-escuro); }

.topo-carrinho-icone { position: relative; display: flex; }

.topo-carrinho-qtd {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--vermelho);
  font-family: var(--fonte-titulo);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.topo-carrinho-total {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* ===== Faixa de aviso ===== */
.faixa {
  margin: 0;
  padding: 10px 16px;
  background: var(--vermelho-claro);
  color: var(--vermelho-escuro);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

/* ===== Abas de categorias ===== */
.abas {
  position: sticky;
  top: var(--altura-topo);
  z-index: 20;
  height: var(--altura-abas);
  display: flex;
  gap: 4px;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-suave);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.aba.ativa { color: var(--vermelho); border-bottom-color: var(--vermelho); }

/* ===== Catálogo ===== */
.catalogo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

.carregando, .erro { padding: 40px 0; text-align: center; color: var(--texto-suave); }

.categoria {
  padding-top: 20px;
  scroll-margin-top: calc(var(--altura-topo) + var(--altura-abas));
}

.categoria-titulo { font-size: 22px; font-weight: 700; }

.categoria-regra {
  margin: 4px 0 14px;
  font-size: 14px;
  color: var(--texto-suave);
}

.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade { grid-template-columns: repeat(3, 1fr); } }

/* ===== Card de produto ===== */
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}

.card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.card-nome { font-size: 17px; font-weight: 600; }

.card-codigo { flex: 0 0 auto; font-size: 14px; color: var(--texto-suave); }

.card-desc { margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); }

.card-linha-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  margin-top: 4px;
}

.card-preco {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  color: var(--vermelho);
}
.card-preco small { font-size: 14px; font-weight: 600; }

.card-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.card-subtotal { margin: 0; font-size: 14px; color: var(--texto-suave); }
.card-subtotal strong { color: var(--texto); font-weight: 500; }

/* Seletor de quantidade */
.seletor {
  display: flex;
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  background: var(--creme);
}
.seletor button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--vermelho);
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.seletor button:disabled { color: var(--borda); cursor: default; }
.seletor-valor {
  min-width: 64px;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
}

/* Botões */
.btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--raio-botao);
  background: var(--vermelho);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.btn:hover, .btn:active { background: var(--vermelho-escuro); }
.btn-largo { width: 100%; }

.btn:focus-visible, .seletor button:focus-visible, .aba:focus-visible, .topo-carrinho:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 2px;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn[aria-disabled="true"] { background: #B9A9A4; }
.btn-contorno { background: var(--branco); color: var(--vermelho); border: 1.5px solid var(--vermelho); }
.btn-contorno:hover, .btn-contorno:active { background: var(--vermelho-claro); }

/* ===== Telas (carrinho) ===== */
body[data-tela="carrinho"] .faixa,
body[data-tela="carrinho"] .abas,
body[data-tela="finalizar"] .faixa,
body[data-tela="finalizar"] .abas,
body[data-tela="enviado"] .faixa,
body[data-tela="enviado"] .abas { display: none; }

/* ===== Pedido enviado ===== */
.enviado-texto { margin: 0 0 16px; }
.enviado-subtitulo { margin-top: 24px; }
.enviado-voltar { justify-self: center; padding: 10px; }
.aviso-config {
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: var(--raio-botao);
  background: var(--vermelho-claro);
  color: var(--vermelho-escuro);
  font-size: 15px;
}
.mensagem {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }

.tela {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.tela-titulo { font-size: 24px; font-weight: 700; margin-bottom: 16px; outline: none; }

.vazio { padding: 32px 0; text-align: center; color: var(--texto-suave); }
.vazio p { margin: 0 0 16px; }

.lista-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.item {
  padding: 14px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}
.item-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.item-nome { font-size: 16px; font-weight: 600; }
.item-detalhe { margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); }
.item-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.item-preco { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; color: var(--vermelho); }
.item-remover {
  min-height: 44px;
  margin: 4px 0 -10px -4px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.item-remover:hover { color: var(--vermelho); }

.resumo { display: grid; gap: 10px; margin-top: 20px; }
.resumo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 600;
}
.resumo-total strong { font-size: 22px; color: var(--vermelho); }
.resumo-nota { margin: 0 0 6px; font-size: 14px; color: var(--texto-suave); text-align: center; }

/* ===== Finalização ===== */
.formulario { display: grid; gap: 16px; }

.bloco {
  padding: 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bloco-titulo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.bloco-nota { margin: -2px 0 8px; font-size: 14px; color: var(--texto-suave); }
.prazo-destaque {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: var(--raio-botao);
  background: var(--vermelho-claro);
  color: var(--vermelho-escuro);
  font-size: 15px;
}
.opcional { font-family: var(--fonte-texto); font-size: 13px; font-weight: 400; color: var(--texto-suave); }

.campo { margin-top: 12px; }
.campo label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 15px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #CDBDB2;
  border-radius: var(--raio-botao);
  background: var(--branco);
  color: var(--texto);
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automático do iPhone */
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo select:disabled { background: var(--creme); color: var(--texto-suave); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--vermelho);
  box-shadow: 0 0 0 3px var(--vermelho-claro);
}
.campo [aria-invalid="true"] { border-color: var(--vermelho); background: #FFF5F5; }
.campo-dica { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }
.campo-erro { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--vermelho); }
.campo-dica:empty, .campo-erro:empty { display: none; }

.link { color: var(--vermelho); font-weight: 500; font-size: 15px; }

.resumo-lista { list-style: none; margin: 0; padding: 0; }
.resumo-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 15px;
}
.resumo-lista strong { font-weight: 500; white-space: nowrap; }
.bloco .resumo-total { border-top: 0; padding-bottom: 4px; }

.btn-whatsapp { min-height: 52px; background: var(--whatsapp); color: #0B3B1E; font-size: 16px; }
.btn-whatsapp:hover, .btn-whatsapp:active { background: #1EBE5A; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Painel de escolha (bottom sheet) ===== */
html.sem-rolagem { overflow: hidden; }

.painel {
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--branco);
  color: var(--texto);
}
.painel::backdrop { background: rgba(43, 26, 23, .5); }
.painel[open] { display: flex; animation: subir .22s ease-out; }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

@media (min-width: 640px) {
  .painel { max-width: 480px; margin: auto; border-radius: 16px; max-height: 85vh; }
}

.painel-caixa { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 8px 12px 16px;
  border-bottom: 1px solid var(--borda);
}
.painel-titulo { font-size: 18px; font-weight: 600; }
.painel-fechar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
}
.painel-fechar:hover { background: var(--creme); }

.painel-corpo { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }

.painel-resumo { margin: 12px 0 0; font-size: 14px; color: var(--texto-suave); }

.painel-grupo { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.painel-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 600;
}
.obrigatorio {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--vermelho-claro);
  color: var(--vermelho-escuro);
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 500;
}
.painel-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.painel-dica { margin: 0 0 8px; font-size: 14px; color: var(--texto-suave); }
.painel-linha .painel-dica { margin: 0; }

.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  cursor: pointer;
}
.opcao input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--vermelho); }
.opcao small { color: var(--texto-suave); font-size: 14px; white-space: nowrap; }
.opcao:has(input:checked) { border-color: var(--vermelho); background: var(--vermelho-claro); }
.opcao-check { margin-top: 16px; }

.sabor-kit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 12px;
  margin-top: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
}
.sabor-kit.selecionado { border-color: var(--vermelho); background: var(--vermelho-claro); }
.sabor-kit-nome { font-size: 15px; }
.seletor-pequeno { background: var(--branco); }
.seletor-pequeno .seletor-valor { min-width: 36px; }

.painel-rodape {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: var(--branco);
}
.painel-aviso { margin: 0 0 8px; font-size: 14px; color: var(--vermelho); text-align: center; min-height: 0; }
.painel-aviso:empty { display: none; }
.painel-aviso.piscar { animation: piscar .5s ease 2; }
@keyframes piscar { 50% { opacity: .2; } }
.painel-confirmar { justify-content: space-between; }

/* ===== Rodapé ===== */
.rodape {
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  background: var(--vermelho);
  color: var(--branco);
  text-align: center;
}
.rodape-logo { height: 40px; width: auto; margin: 0 auto 16px; }
.rodape-info p { margin: 4px 0; font-size: 14px; }
.rodape-info a { color: var(--branco); font-weight: 500; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--raio-botao);
  background: var(--texto);
  color: var(--branco);
  font-weight: 500;
  font-size: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  transform: translate(-50%, 150%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.toast.visivel { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toast { transition: none; }
}