:root {
  --creme: #F5ECD9;
  --creme-claro: #FBF6EA;
  --marrom: #3B2A1A;
  --dourado: #C9A24B;
  --erro: #b3261e;
  --sombra: 0 2px 8px rgba(59, 42, 26, .15);
  --raio: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--creme);
  color: var(--marrom);
  padding-bottom: 88px;
}
.estado-carregando, .estado-erro { text-align: center; padding: 40px 16px; }
.estado-erro { color: var(--erro); }
.estado-erro button { margin-top: 12px; padding: 10px 18px; border: none; border-radius: 8px;
  background: var(--marrom); color: #fff; cursor: pointer; }

/* Cabeçalho */
.topo { text-align: center; padding: 16px; background: var(--creme-claro); box-shadow: var(--sombra); }
.topo__logo { max-height: 90px; }
.aviso { margin-top: 8px; background: var(--dourado); color: var(--marrom); padding: 8px;
  border-radius: var(--raio); font-weight: 600; }

/* Navegação de categorias */
.nav-categorias { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 12px; background: var(--creme); border-bottom: 1px solid rgba(59,42,26,.1); }
.chip-categoria { flex: 0 0 auto; text-decoration: none; color: var(--marrom);
  background: var(--creme-claro); border: 1px solid var(--dourado); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; white-space: nowrap; }

/* Itens */
.categoria { padding: 16px 12px 4px; }
.categoria__titulo { font-size: 20px; border-bottom: 2px solid var(--dourado); padding-bottom: 6px;
  margin-bottom: 12px; }
.item { display: flex; gap: 12px; align-items: center; background: var(--creme-claro);
  border-radius: var(--raio); padding: 12px; margin-bottom: 10px; box-shadow: var(--sombra); }
.item__foto { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.item__info { flex: 1; min-width: 0; }
.item__nome { font-size: 16px; }
.item__desc { font-size: 13px; opacity: .8; margin: 2px 0; }
.item__preco { font-weight: 700; color: var(--marrom); margin-top: 4px; }
.item__add { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--dourado); color: #fff; font-size: 24px; cursor: pointer; }

/* Botão flutuante do carrinho */
.btn-carrinho { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; border: none;
  border-radius: var(--raio); background: var(--marrom); color: #fff; padding: 16px; font-size: 16px;
  font-weight: 700; box-shadow: var(--sombra); cursor: pointer; max-width: 456px; margin: 0 auto; }

/* Modais */
.modal-overlay, .checkout-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--creme-claro); width: 100%; max-width: 480px; border-radius: 16px 16px 0 0;
  padding: 20px; max-height: 90vh; overflow-y: auto; }
.modal__fechar { float: right; border: none; background: none; font-size: 26px; cursor: pointer;
  color: var(--marrom); line-height: 1; }
.modal__titulo { padding-right: 30px; }
.modal__desc { font-size: 13px; opacity: .8; margin-top: 4px; }
.modal__grupo { margin: 14px 0; }
.modal__label { font-weight: 600; margin-bottom: 6px; }
.modal__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.opcao-btn { margin: 4px 6px 4px 0; padding: 8px 12px; border: 1px solid var(--dourado);
  background: #fff; border-radius: 8px; cursor: pointer; }
.opcao-btn--ativa { background: var(--dourado); color: #fff; }
.modal__select, .checkout__form input, .checkout__form select, .checkout__form textarea {
  width: 100%; padding: 12px; border: 1px solid rgba(59,42,26,.3); border-radius: 8px;
  font-size: 15px; background: #fff; font-family: inherit; }
.modal__rodape { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.modal__qtd { display: flex; align-items: center; gap: 10px; }
.modal__qtd button { width: 36px; height: 36px; border: 1px solid var(--dourado); background: #fff;
  border-radius: 8px; font-size: 18px; cursor: pointer; }
.modal__confirmar { flex: 1; padding: 14px; border: none; border-radius: 8px; background: var(--marrom);
  color: #fff; font-weight: 700; cursor: pointer; }

/* Checkout */
.checkout { background: var(--creme); width: 100%; max-width: 480px; height: 100%; overflow-y: auto; }
.checkout__topo { display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--creme-claro); position: sticky; top: 0; z-index: 2; }
.checkout__voltar { border: none; background: none; font-size: 22px; cursor: pointer; }
.checkout__itens { list-style: none; padding: 12px; }
.linha { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(59,42,26,.1); }
.linha__qtd { display: inline-flex; align-items: center; gap: 8px; }
.linha__qtd button { width: 30px; height: 30px; border: 1px solid var(--dourado); background: #fff;
  border-radius: 6px; cursor: pointer; }
.checkout__form { display: grid; gap: 10px; padding: 12px; }
.checkout__resumo { background: var(--creme-claro); border-radius: var(--raio); padding: 12px;
  display: grid; gap: 4px; }
.checkout__total { font-size: 18px; border-top: 1px solid var(--dourado); padding-top: 6px; margin-top: 4px; }
.checkout__enviar { padding: 16px; border: none; border-radius: var(--raio); background: #25D366;
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }

/* Promoções */
.selo-promo { display: inline-block; background: #d33; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; vertical-align: middle; letter-spacing: .3px; }
.preco-antigo { color: #999; font-weight: 400; margin-right: 4px; }

/* Tipo do pedido: Entrega / Retirada */
.checkout__tipo { display: flex; gap: 8px; }
.tipo-btn { flex: 1; padding: 12px 8px; border: 1px solid var(--dourado); background: var(--creme-claro);
  color: var(--marrom); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tipo-btn--ativa { background: var(--marrom); color: #fff; border-color: var(--marrom); }
.checkout__endereco { display: grid; gap: 10px; }
.checkout__endereco[hidden] { display: none; }

/* Cupom */
.checkout__cupom { display: flex; gap: 8px; }
.checkout__cupom input { flex: 1; text-transform: uppercase; }
.checkout__aplicar-cupom { flex: 0 0 auto; padding: 0 16px; border: 1px solid var(--dourado);
  background: var(--creme-claro); color: var(--marrom); border-radius: 8px; font-weight: 600; cursor: pointer; }
.checkout__cupom-msg { font-size: 13px; margin-top: -4px; }
.checkout__cupom-msg--ok { color: #1a7f37; }
.checkout__cupom-msg--erro { color: var(--erro); }
.checkout__desconto { color: #1a7f37; }