:root {
  --app-primary: #221934;
  --app-primary-deep: #0E0B19;
  --app-accent: #C7D630;
  --app-bg: #0E0B19;
  --app-surface: #171323;
  --app-surface-2: #201A30;
  --app-text: #FAF8FC;
  --app-muted: #A7A0B2;
  --app-border: rgba(255,255,255,.10);
  --app-danger: #FF6D8B;
  --app-success: #7ED7A8;
  --app-warning: #F2C96D;
  --header-height: 92px;
  --nav-height: 82px;
  --content-max: 1180px;
  --shadow-soft: 0 18px 45px rgba(0,0,0,.24);
  --shadow-strong: 0 28px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--app-bg); }
body { min-height: 100%; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 70% -10%, rgba(199,214,48,.06), transparent 30%), var(--app-bg); color: var(--app-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.modal-aberto { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.biblioteca-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { min-height: 100dvh; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }

.topo-app {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--app-primary-deep) 94%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.topo-conteudo {
  width: min(var(--content-max), 100%);
  height: var(--header-height);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca-loja { min-width: 0; display: flex; align-items: center; gap: 13px; }
.marca-loja img {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: var(--app-primary);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
.marca-loja strong {
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.025em;
}

.topo-acoes { display: flex; align-items: center; gap: 10px; }
.status-loja-topo {
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,109,139,.25);
  border-radius: 999px;
  background: rgba(255,109,139,.08);
  color: #ff8aa2;
  font-size: 11px;
  font-weight: 850;
}
.status-loja-topo i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(255,109,139,.08); }
.status-loja-topo.aberto { border-color: rgba(126,215,168,.26); background: rgba(126,215,168,.08); color: var(--app-success); }
.status-loja-topo.aberto i { box-shadow: 0 0 0 5px rgba(126,215,168,.08); }
.status-loja-topo.carregando { border-color: rgba(242,201,109,.24); background: rgba(242,201,109,.08); color: var(--app-warning); }
.status-loja-topo.carregando i { animation: pulsar 1.2s infinite; }

.botao-icone, .botao-perfil-topo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #fff;
}
.botao-perfil-topo { border-color: color-mix(in srgb, var(--app-accent) 42%, transparent); color: var(--app-accent); }
.botao-perfil-topo svg { width: 25px; height: 25px; }
.botao-icone svg { width: 20px; height: 20px; }

.conteudo-app { width: min(var(--content-max), 100%); margin: 0 auto; padding-top: calc(var(--header-height) + env(safe-area-inset-top)); }
.pagina-app { display: none; min-height: calc(100dvh - var(--header-height) - var(--nav-height)); }
.pagina-app.ativa { display: block; }

.banner-promocoes {
  position: relative;
  margin: 22px 20px 0;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 30px;
  background: var(--app-surface);
  box-shadow: var(--shadow-strong);
}
.trilho-promocoes { display: flex; min-height: 420px; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.slide-promocao {
  position: relative;
  min-width: 100%;
  min-height: 420px;
  padding: 44px 46px 58px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-align: left;
  color: #fff;
  background: #08070d;
}
.slide-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); }
.slide-promocao::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,12,.97) 0%, rgba(10,8,16,.88) 38%, rgba(10,8,16,.28) 72%, rgba(10,8,16,.10) 100%); }
.slide-promocao-conteudo { position: relative; z-index: 2; max-width: 510px; }
.slide-promocao .selo-banner { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--app-accent); color: #202600; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.slide-promocao h2 { margin: 15px 0 0; max-width: 480px; font-size: clamp(36px, 6vw, 66px); line-height: .94; letter-spacing: -.055em; text-transform: uppercase; }
.slide-promocao p { max-width: 420px; margin: 15px 0 0; color: rgba(255,255,255,.80); font-size: 13px; line-height: 1.55; }
.slide-preco { margin-top: 18px; display: flex; align-items: end; gap: 10px; }
.slide-preco small { padding-bottom: 4px; color: var(--app-accent); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.slide-preco strong { font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; }
.slide-acao { margin-top: 20px; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--app-accent); color: #202600; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.marca-banner { position: absolute; top: 20px; right: 22px; z-index: 2; width: 70px; height: 70px; opacity: .78; filter: drop-shadow(0 8px 25px rgba(0,0,0,.25)); }
.marca-banner img { width: 100%; height: 100%; object-fit: contain; }
.banner-carregando { width: 100%; min-height: 420px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--app-muted); }
.controle-slider {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(10,8,16,.58);
  color: #fff;
  opacity: 0;
  transform: translateY(-50%);
  transition: .2s;
  backdrop-filter: blur(10px);
}
.banner-promocoes:hover .controle-slider, .controle-slider:focus-visible { opacity: 1; }
.controle-slider.anterior { left: 16px; }
.controle-slider.proxima { right: 16px; }
.controle-slider svg { width: 20px; height: 20px; }
.indicadores-promocoes { position: absolute; left: 50%; bottom: 18px; z-index: 5; display: flex; gap: 8px; transform: translateX(-50%); }
.indicadores-promocoes button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.34); transition: .2s; }
.indicadores-promocoes button.ativo { width: 28px; background: var(--app-accent); }

.bloco-cardapio { padding: 28px 20px 54px; }
.linha-busca {
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top));
  z-index: 50;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-bg) 98%, transparent) 70%, transparent);
  backdrop-filter: blur(18px);
}
.campo-busca {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border: 1px solid var(--app-border);
  border-radius: 23px;
  background: color-mix(in srgb, var(--app-surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}
.campo-busca > svg { width: 25px; height: 25px; flex: 0 0 auto; color: #fff; }
.campo-busca input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--app-text); font-size: 14px; }
.campo-busca input::placeholder { color: #898291; }
.campo-busca button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--app-text); }
.campo-busca button svg { width: 17px; height: 17px; }

.abas-categorias { display: flex; gap: 10px; overflow-x: auto; padding: 9px 0 21px; scrollbar-width: none; }
.abas-categorias::-webkit-scrollbar { display: none; }
.abas-categorias button {
  min-width: max-content;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--app-border);
  border-radius: 19px;
  background: var(--app-surface);
  color: #ddd8e2;
  font-size: 11px;
  font-weight: 850;
}
.abas-categorias button svg { width: 19px; height: 19px; }
.abas-categorias button b { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--app-muted); font-size: 8px; }
.abas-categorias button.ativo { border-color: var(--app-accent); background: linear-gradient(135deg, rgba(199,214,48,.13), rgba(255,255,255,.03)); color: #fff; box-shadow: inset 0 0 0 1px rgba(199,214,48,.12); }
.abas-categorias button.ativo svg, .abas-categorias button.ativo b { color: var(--app-accent); }

.secao-produtos { margin-top: 24px; }
.cabecalho-secao { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.cabecalho-secao span { color: #d45a82; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.cabecalho-secao h2 { margin: 7px 0 0; color: #fff; font-size: 30px; letter-spacing: -.04em; }
.cabecalho-secao > small { color: var(--app-muted); font-size: 10px; font-weight: 800; }
.cabecalho-secao.destaque { align-items: center; }
.titulo-com-icone { display: flex; align-items: center; gap: 10px; }
.titulo-com-icone svg { width: 25px; height: 25px; color: var(--app-accent); }
.titulo-com-icone h2 { margin: 0; font-size: 25px; }
.cabecalho-secao.destaque > button { display: flex; align-items: center; gap: 5px; background: transparent; color: var(--app-accent); font-size: 10px; font-weight: 850; }
.cabecalho-secao.destaque > button svg { width: 17px; height: 17px; }

.lista-destaques { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(286px, 38%); gap: 15px; overflow-x: auto; padding: 2px 2px 16px; scrollbar-width: none; }
.lista-destaques::-webkit-scrollbar { display: none; }
.lista-produtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }

.cartao-produto, .cartao-destaque {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 25px;
  background: linear-gradient(180deg, var(--app-surface), #12101c);
  box-shadow: var(--shadow-soft);
}
.cartao-produto.impossivel { opacity: .6; }
.imagem-produto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #201b2b; }
.imagem-produto img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s; }
.cartao-produto:hover .imagem-produto img { transform: scale(1.035); }
.selo-produto { position: absolute; top: 12px; left: 12px; min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--app-accent); color: #202600; font-size: 8px; font-weight: 950; }
.botao-favorito { position: absolute; top: 11px; right: 11px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(8,7,13,.58); color: #fff; backdrop-filter: blur(8px); }
.botao-favorito svg { width: 19px; height: 19px; }
.corpo-produto { padding: 17px; }
.corpo-produto h3 { margin: 0; color: #fff; font-size: 16px; line-height: 1.25; }
.corpo-produto p { min-height: 42px; margin: 8px 0 0; color: var(--app-muted); font-size: 10px; line-height: 1.55; }
.rodape-produto { margin-top: 16px; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.preco-produto strong, .preco-produto del { display: block; }
.preco-produto strong { color: var(--app-accent); font-size: 18px; }
.preco-produto del { margin-bottom: 3px; color: #746e7c; font-size: 9px; }
.botao-adicionar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--app-accent); color: #202600; }
.botao-adicionar svg { width: 23px; height: 23px; }
.botao-adicionar:disabled { cursor: not-allowed; background: #3b3545; color: #81798a; }

.cartao-destaque { width: 100%; position: relative; text-align: left; color: inherit; }
.cartao-destaque .imagem-produto { aspect-ratio: 16 / 10; }
.cartao-destaque .corpo-produto p { min-height: 33px; }

.estado-carregando, .estado-vazio { grid-column: 1 / -1; padding: 54px 22px; border: 1px dashed rgba(255,255,255,.14); border-radius: 25px; background: var(--app-surface); text-align: center; }
.estado-carregando strong, .estado-carregando small, .estado-vazio h2, .estado-vazio p { display: block; }
.estado-carregando small, .estado-vazio p { max-width: 400px; margin: 8px auto 0; color: var(--app-muted); font-size: 10px; line-height: 1.6; }
.estado-vazio > div { width: 66px; height: 66px; margin: 0 auto; display: grid; place-items: center; border-radius: 21px; background: rgba(255,255,255,.05); color: var(--app-accent); }
.estado-vazio > div svg { width: 30px; height: 30px; }
.estado-vazio h2 { margin: 16px 0 0; color: #fff; font-size: 21px; }
.estado-vazio button { margin-top: 18px; min-height: 46px; padding: 10px 18px; border-radius: 15px; background: var(--app-accent); color: #202600; font-size: 10px; font-weight: 900; }
.spinner { width: 32px; height: 32px; display: block; margin: 0 auto 14px; border: 3px solid rgba(255,255,255,.10); border-top-color: var(--app-accent); border-radius: 50%; animation: girar .75s linear infinite; }

.cabecalho-pagina { padding: 34px 22px 19px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.cabecalho-pagina span { color: #d45a82; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.cabecalho-pagina h1 { margin: 7px 0 0; color: #fff; font-size: 36px; letter-spacing: -.045em; }
.cabecalho-pagina p { margin: 8px 0 0; color: var(--app-muted); font-size: 11px; line-height: 1.55; }
.cabecalho-pagina > b { padding: 10px 13px; border-radius: 999px; background: var(--app-surface); color: var(--app-accent); font-size: 10px; box-shadow: var(--shadow-soft); }

.lista-carrinho-pagina, .lista-pedidos-cliente { display: grid; gap: 13px; padding: 0 22px 18px; }
.item-carrinho { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 15px; padding: 14px; border: 1px solid var(--app-border); border-radius: 23px; background: var(--app-surface); box-shadow: var(--shadow-soft); }
.item-carrinho img { width: 96px; height: 96px; object-fit: cover; border-radius: 18px; background: #201b2b; }
.item-carrinho-topo { display: flex; justify-content: space-between; gap: 10px; }
.item-carrinho h3 { margin: 0; color: #fff; font-size: 14px; }
.item-carrinho p { margin: 6px 0 0; color: var(--app-muted); font-size: 9px; line-height: 1.5; }
.remover-item { color: #ff8aa2; background: transparent; font-size: 9px; font-weight: 850; }
.item-carrinho-rodape { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.controle-qtd { display: grid; grid-template-columns: 36px 38px 36px; align-items: center; gap: 4px; }
.controle-qtd button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--app-accent); }
.controle-qtd button svg { width: 16px; height: 16px; }
.controle-qtd b { text-align: center; }
.subtotal-item { color: #fff; font-size: 12px; font-weight: 900; }

.resumo-carrinho, .checkout-carrinho { margin: 0 22px 20px; padding: 19px; border: 1px solid var(--app-border); border-radius: 23px; background: var(--app-surface); box-shadow: var(--shadow-soft); }
.linha-resumo { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: var(--app-muted); font-size: 10px; }
.linha-resumo:first-child { margin-top: 0; }
.linha-resumo.total { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--app-border); color: #fff; font-size: 14px; font-weight: 900; }
.botao-checkout { width: 100%; min-height: 54px; margin-top: 17px; border-radius: 17px; background: var(--app-accent); color: #202600; font-size: 11px; font-weight: 950; }
.botao-checkout:disabled { background: #393441; color: #89818f; }

.checkout-carrinho { margin-bottom: 40px; }
.checkout-carrinho h2 { margin: 0; color: #fff; font-size: 23px; }
.checkout-carrinho > p { margin: 7px 0 0; color: var(--app-muted); font-size: 10px; line-height: 1.55; }
.grupo-checkout { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--app-border); }
.grupo-checkout h3 { margin: 0 0 11px; color: #fff; font-size: 12px; }
.opcoes-modalidade, .opcoes-pagamento { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.opcoes-modalidade button, .opcoes-pagamento button { min-height: 56px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--app-border); border-radius: 16px; background: rgba(255,255,255,.035); color: var(--app-muted); text-align: left; }
.opcoes-modalidade button svg, .opcoes-pagamento button svg { width: 21px; height: 21px; flex: 0 0 auto; }
.opcoes-modalidade button.ativo, .opcoes-pagamento button.ativo { border-color: var(--app-accent); color: #fff; background: rgba(199,214,48,.08); }
.grade-formulario { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.grade-formulario label { display: grid; gap: 6px; color: #dcd7e1; font-size: 9px; font-weight: 800; }
.grade-formulario label.largo { grid-column: 1 / -1; }
.grade-formulario input, .grade-formulario textarea { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid var(--app-border); border-radius: 14px; outline: 0; background: rgba(255,255,255,.04); color: #fff; }
.grade-formulario textarea { min-height: 78px; padding-top: 12px; resize: vertical; }
.grade-formulario input:focus, .grade-formulario textarea:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(199,214,48,.08); }

.cartao-acesso { margin: 0 22px 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--app-border); border-radius: 21px; background: var(--app-surface); box-shadow: var(--shadow-soft); }
.cartao-acesso strong, .cartao-acesso small { display: block; }
.cartao-acesso strong { color: #fff; font-size: 12px; }
.cartao-acesso small { margin-top: 4px; color: var(--app-muted); font-size: 9px; }
.cartao-acesso button { min-height: 42px; padding: 10px 14px; border-radius: 14px; background: var(--app-accent); color: #202600; font-size: 9px; font-weight: 900; }
.cartao-pedido { padding: 17px; border: 1px solid var(--app-border); border-radius: 22px; background: var(--app-surface); box-shadow: var(--shadow-soft); }
.cartao-pedido-topo { display: flex; justify-content: space-between; gap: 10px; }
.cartao-pedido h3 { margin: 0; color: #fff; font-size: 14px; }
.cartao-pedido p { margin: 5px 0 0; color: var(--app-muted); font-size: 9px; }
.status-pedido { padding: 7px 9px; border-radius: 999px; background: rgba(242,201,109,.10); color: var(--app-warning); font-size: 8px; font-weight: 900; }
.status-pedido.concluido { background: rgba(126,215,168,.10); color: var(--app-success); }
.timeline-pedido { margin-top: 17px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.etapa-pedido { position: relative; padding-top: 24px; color: #6f6877; font-size: 7px; font-weight: 800; text-align: center; }
.etapa-pedido::before { content: ''; position: absolute; top: 5px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #3a3442; transform: translateX(-50%); }
.etapa-pedido::after { content: ''; position: absolute; top: 10px; left: calc(50% + 8px); width: calc(100% - 16px); height: 2px; background: #3a3442; }
.etapa-pedido:last-child::after { display: none; }
.etapa-pedido.ativa { color: #fff; }
.etapa-pedido.ativa::before, .etapa-pedido.ativa::after { background: var(--app-accent); }
.acoes-pedido { margin-top: 15px; display: flex; justify-content: flex-end; }
.acoes-pedido button { min-height: 40px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border-radius: 13px; background: rgba(255,255,255,.05); color: var(--app-accent); font-size: 9px; font-weight: 850; }
.acoes-pedido button svg { width: 16px; height: 16px; }

.grade-informacoes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; padding: 0 22px 40px; }
.cartao-info { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; padding: 18px; border: 1px solid var(--app-border); border-radius: 22px; background: var(--app-surface); box-shadow: var(--shadow-soft); }
.cartao-info.largo { grid-column: 1 / -1; }
.icone-info { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: rgba(199,214,48,.08); color: var(--app-accent); }
.icone-info svg { width: 22px; height: 22px; }
.cartao-info span { color: #d45a82; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.cartao-info h3 { margin: 5px 0 0; color: #fff; font-size: 14px; }
.cartao-info p { margin: 7px 0 0; color: var(--app-muted); font-size: 9px; line-height: 1.65; white-space: pre-line; }
.cartao-info a { display: inline-flex; margin-top: 9px; color: var(--app-accent); font-size: 9px; font-weight: 850; }

.barra-inferior {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 1000;
  width: min(720px, calc(100% - 20px));
  min-height: var(--nav-height);
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border: 1px solid var(--app-border);
  border-radius: 27px;
  background: color-mix(in srgb, var(--app-surface) 94%, transparent);
  box-shadow: 0 -4px 30px rgba(0,0,0,.24), var(--shadow-soft);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}
.item-nav { position: relative; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 20px; background: transparent; color: #9a929f; }
.item-nav svg { width: 24px; height: 24px; }
.item-nav small { font-size: 9px; font-weight: 800; }
.item-nav.ativo { color: var(--app-accent); background: rgba(199,214,48,.05); }
.item-nav.ativo::after { content: ''; position: absolute; bottom: 4px; width: 26px; height: 3px; border-radius: 999px; background: var(--app-accent); }
.item-nav b { position: absolute; top: 7px; right: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--app-accent); color: #202600; font-size: 7px; }

.carrinho-flutuante { position: fixed; left: 50%; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px); z-index: 900; width: min(520px, calc(100% - 28px)); min-height: 58px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 19px; background: var(--app-accent); color: #202600; box-shadow: var(--shadow-strong); transform: translateX(-50%); }
.carrinho-flutuante span { display: flex; align-items: center; gap: 9px; }
.carrinho-flutuante b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 11px; background: #202600; color: var(--app-accent); }
.carrinho-flutuante em { font-style: normal; font-size: 10px; font-weight: 900; }
.carrinho-flutuante strong { font-size: 12px; }

.sobreposicao { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; padding-top: max(20px, env(safe-area-inset-top)); background: rgba(7,5,11,.70); backdrop-filter: blur(9px); }
.folha-modal { width: min(720px, 100%); max-height: calc(100dvh - max(20px, env(safe-area-inset-top))); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--app-border); border-radius: 29px 29px 0 0; background: var(--app-surface); box-shadow: 0 -24px 70px rgba(0,0,0,.48); }
.cabecalho-modal { flex: 0 0 auto; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--app-border); background: var(--app-surface); }
.cabecalho-modal h2 { margin: 0; color: #fff; font-size: 20px; }
.cabecalho-modal p { margin: 5px 0 0; color: var(--app-muted); font-size: 9px; }
.fechar-modal { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--app-text); }
.fechar-modal svg { width: 20px; height: 20px; }
.corpo-modal { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 22px; }
.rodape-modal { flex: 0 0 auto; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--app-border); background: var(--app-surface); box-shadow: 0 -10px 24px rgba(0,0,0,.18); }
.imagem-produto-modal { width: calc(100% + 36px); max-height: 330px; margin-left: -18px; object-fit: cover; display: block; background: #201b2b; }
.detalhes-produto-modal { padding-top: 18px; }
.detalhes-produto-modal h3 { margin: 0; color: #fff; font-size: 22px; }
.detalhes-produto-modal > p { margin: 8px 0 0; color: var(--app-muted); font-size: 10px; line-height: 1.6; }
.preco-modal { margin-top: 12px; color: var(--app-accent); font-size: 18px; font-weight: 900; }
.grupo-opcoes { margin-top: 15px; padding: 14px; border: 1px solid var(--app-border); border-radius: 18px; background: rgba(255,255,255,.03); }
.grupo-opcoes header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grupo-opcoes h4 { margin: 0; color: #fff; font-size: 11px; }
.grupo-opcoes small { color: var(--app-muted); font-size: 8px; }
.grupo-opcoes label { margin-top: 10px; min-height: 42px; padding: 10px; display: flex; align-items: center; gap: 10px; border-radius: 13px; background: var(--app-surface-2); color: #ddd8e2; font-size: 10px; font-weight: 750; }
.grupo-opcoes input { accent-color: var(--app-accent); }
.observacao-item { width: 100%; min-height: 90px; margin-top: 15px; padding: 13px; border: 1px solid var(--app-border); border-radius: 15px; outline: 0; resize: vertical; background: rgba(255,255,255,.04); color: #fff; font-size: 11px; }
.rodape-adicionar { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px; }
.quantidade-modal { display: grid; grid-template-columns: 36px 40px 36px; align-items: center; gap: 3px; }
.quantidade-modal button { width: 36px; height: 42px; display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--app-accent); }
.quantidade-modal button svg { width: 16px; height: 16px; }
.quantidade-modal b { text-align: center; }
.botao-confirmar-produto { min-height: 48px; border-radius: 15px; background: var(--app-accent); color: #202600; font-size: 10px; font-weight: 950; }

.sobreposicao-lateral { align-items: stretch; justify-content: flex-end; padding: 0; }
.painel-lateral { width: min(440px, 92vw); min-height: 100dvh; overflow-y: auto; border-left: 1px solid var(--app-border); background: var(--app-surface); box-shadow: -28px 0 80px rgba(0,0,0,.44); animation: entrarLateral .24s ease-out; }
.cabecalho-painel { position: sticky; top: 0; z-index: 4; min-height: 84px; padding: max(14px, env(safe-area-inset-top)) 17px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-surface) 94%, transparent); backdrop-filter: blur(16px); }
.cabecalho-painel button { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.05); color: #fff; }
.cabecalho-painel button svg { width: 21px; height: 21px; }
.cabecalho-painel h2 { margin: 0; color: #fff; font-size: 19px; }
.cabecalho-painel p { margin: 4px 0 0; color: var(--app-muted); font-size: 9px; }
.conteudo-painel { padding: 18px 17px 34px; }
.cartao-perfil { padding: 19px; border: 1px solid var(--app-border); border-radius: 24px; background: linear-gradient(145deg, rgba(199,214,48,.08), rgba(255,255,255,.025)); }
.perfil-topo { display: flex; align-items: center; gap: 14px; }
.avatar-grande { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: var(--app-accent); color: #202600; font-size: 25px; font-weight: 950; }
.avatar-grande svg { width: 29px; height: 29px; }
.perfil-topo h3 { margin: 0; color: #fff; font-size: 19px; }
.perfil-topo p { margin: 5px 0 0; color: var(--app-muted); font-size: 9px; }
.acoes-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.acoes-perfil button { min-height: 46px; border-radius: 14px; background: var(--app-accent); color: #202600; font-size: 9px; font-weight: 900; }
.acoes-perfil button.secundario { border: 1px solid var(--app-border); background: rgba(255,255,255,.04); color: #fff; }
.lista-opcoes-conta { display: grid; gap: 10px; margin-top: 14px; }
.opcao-conta { width: 100%; min-height: 64px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--app-border); border-radius: 18px; background: rgba(255,255,255,.03); color: var(--app-text); text-align: left; }
.opcao-conta > i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: rgba(199,214,48,.08); color: var(--app-accent); font-style: normal; }
.opcao-conta > i svg { width: 20px; height: 20px; }
.opcao-conta > span { min-width: 0; flex: 1; }
.opcao-conta span strong, .opcao-conta span small { display: block; }
.opcao-conta span strong { color: #fff; font-size: 11px; }
.opcao-conta span small { margin-top: 4px; color: var(--app-muted); font-size: 8px; }
.opcao-conta > svg { width: 17px; height: 17px; color: var(--app-muted); }
.form-conta { display: grid; gap: 11px; margin-top: 16px; }
.form-conta label { display: grid; gap: 6px; color: #ddd8e2; font-size: 9px; font-weight: 800; }
.form-conta input { height: 48px; padding: 0 13px; border: 1px solid var(--app-border); border-radius: 14px; outline: 0; background: rgba(255,255,255,.04); color: #fff; }
.form-conta input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(199,214,48,.08); }
.acoes-modal-conta { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; margin-top: 5px; }
.acoes-modal-conta button { min-height: 48px; border-radius: 14px; background: var(--app-accent); color: #202600; font-size: 9px; font-weight: 900; }
.acoes-modal-conta button.secundario { border: 1px solid var(--app-border); background: rgba(255,255,255,.04); color: #fff; }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 22px); z-index: 5000; max-width: calc(100% - 28px); padding: 13px 16px; border-radius: 15px; background: #211b2b; color: #fff; font-size: 10px; font-weight: 800; box-shadow: var(--shadow-strong); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: .2s; }
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: #9f2944; }
.toast.sucesso { background: #356719; }
.toast.aviso { background: #805900; }
.aviso-offline { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px); z-index: 1800; padding: 11px 13px; border-radius: 14px; background: #80600f; color: #fff7dc; font-size: 9px; font-weight: 750; text-align: center; box-shadow: var(--shadow-soft); }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar { 50% { opacity: .35; } }
@keyframes entrarLateral { from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (max-width: 900px) {
  .lista-produtos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lista-destaques { grid-auto-columns: minmax(270px, 62%); }
  .slide-promocao { padding-left: 34px; padding-right: 34px; }
}

@media (max-width: 640px) {
  :root { --header-height: 82px; --nav-height: 76px; }
  .topo-conteudo { padding: 10px 12px; gap: 8px; }
  .marca-loja { gap: 10px; }
  .marca-loja img { width: 54px; height: 54px; border-radius: 17px; }
  .marca-loja strong { max-width: 45vw; font-size: 15px; }
  .topo-acoes { gap: 6px; }
  .status-loja-topo { min-height: 40px; padding: 0 11px; font-size: 9px; }
  .botao-icone, .botao-perfil-topo { width: 43px; height: 43px; }
  .banner-promocoes { margin: 14px 10px 0; border-radius: 24px; }
  .trilho-promocoes, .slide-promocao, .banner-carregando { min-height: 360px; }
  .slide-promocao { padding: 32px 24px 48px; align-items: flex-end; }
  .slide-promocao::after { background: linear-gradient(180deg, rgba(8,7,13,.12) 0%, rgba(8,7,13,.62) 43%, rgba(8,7,13,.98) 100%); }
  .slide-promocao h2 { max-width: 90%; font-size: clamp(34px, 11vw, 52px); }
  .slide-promocao p { max-width: 95%; font-size: 11px; }
  .marca-banner { width: 53px; height: 53px; top: 16px; right: 16px; }
  .controle-slider { display: none; }
  .bloco-cardapio { padding: 19px 12px 38px; }
  .campo-busca { height: 58px; border-radius: 20px; }
  .campo-busca input { font-size: 12px; }
  .abas-categorias button { min-height: 50px; padding: 0 15px; }
  .lista-produtos { grid-template-columns: 1fr; gap: 13px; }
  .lista-destaques { grid-auto-columns: 84%; }
  .cartao-produto { display: grid; grid-template-columns: 128px minmax(0,1fr); border-radius: 21px; }
  .cartao-produto .imagem-produto { aspect-ratio: auto; min-height: 165px; }
  .cartao-produto .corpo-produto { padding: 14px; }
  .cartao-produto .corpo-produto p { min-height: 0; }
  .cartao-produto .rodape-produto { align-items: end; }
  .cartao-destaque { display: block; }
  .cartao-destaque .imagem-produto { aspect-ratio: 16 / 10; min-height: 0; }
  .cabecalho-secao h2 { font-size: 25px; }
  .titulo-com-icone h2 { font-size: 21px; }
  .cabecalho-pagina { padding: 25px 15px 16px; }
  .cabecalho-pagina h1 { font-size: 30px; }
  .lista-carrinho-pagina, .lista-pedidos-cliente { padding-left: 14px; padding-right: 14px; }
  .resumo-carrinho, .checkout-carrinho, .cartao-acesso { margin-left: 14px; margin-right: 14px; }
  .grade-informacoes { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; }
  .cartao-info.largo { grid-column: auto; }
  .barra-inferior { width: calc(100% - 12px); bottom: max(5px, env(safe-area-inset-bottom)); border-radius: 24px; }
  .item-nav { min-height: 61px; border-radius: 18px; }
  .item-nav svg { width: 22px; height: 22px; }
  .item-nav small { font-size: 8px; }
  .rodape-adicionar { grid-template-columns: 112px minmax(0,1fr); }
}

@media (max-width: 420px) {
  .marca-loja strong { max-width: 38vw; font-size: 14px; }
  .status-loja-topo b { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .botao-instalar { display: none; }
  .slide-promocao h2 { font-size: 38px; }
  .cartao-produto { grid-template-columns: 112px minmax(0,1fr); }
  .cartao-produto .imagem-produto { min-height: 155px; }
  .corpo-produto h3 { font-size: 14px; }
  .preco-produto strong { font-size: 16px; }
  .botao-adicionar { width: 42px; height: 42px; }
  .item-carrinho { grid-template-columns: 74px minmax(0,1fr); }
  .item-carrinho img { width: 74px; height: 74px; }
  .grade-formulario { grid-template-columns: 1fr; }
  .grade-formulario label.largo { grid-column: auto; }
  .opcoes-pagamento { grid-template-columns: 1fr 1fr; }
}

/* D6.1 — endereço inteligente, taxa e checkout operacional */
.titulo-checkout-linha { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.titulo-checkout-linha h3 { margin:0; }
.usar-localizacao { min-height:36px; padding:0 11px; display:flex; align-items:center; gap:7px; border:1px solid var(--app-border); border-radius:12px; background:rgba(255,255,255,.04); color:var(--app-accent); font-size:8px; font-weight:900; }
.usar-localizacao svg { width:15px; height:15px; }
.campo-sugestao { position:relative; }
.sugestoes-endereco { position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:80; max-height:250px; overflow-y:auto; padding:6px; border:1px solid var(--app-border); border-radius:15px; background:#21192f; box-shadow:0 22px 55px rgba(0,0,0,.45); }
.sugestoes-endereco button { width:100%; min-height:54px; padding:10px 11px; display:block; border-radius:11px; background:transparent; color:#fff; text-align:left; }
.sugestoes-endereco button:hover,.sugestoes-endereco button:focus { background:rgba(199,214,48,.09); outline:none; }
.sugestoes-endereco strong,.sugestoes-endereco small { display:block; }
.sugestoes-endereco strong { font-size:10px; }
.sugestoes-endereco small { margin-top:4px; color:var(--app-muted); font-size:8px; }
.checkout-taxa { margin-top:13px; min-height:64px; padding:12px 13px; display:flex; align-items:center; gap:11px; border:1px solid var(--app-border); border-radius:16px; background:rgba(255,255,255,.035); }
.checkout-taxa.disponivel { border-color:rgba(199,214,48,.38); background:rgba(199,214,48,.07); }
.checkout-taxa.indisponivel { border-color:rgba(196,72,122,.42); background:rgba(196,72,122,.08); }
.checkout-taxa .icone-taxa { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:rgba(255,255,255,.05); color:var(--app-accent); }
.checkout-taxa .icone-taxa svg { width:20px; height:20px; }
.checkout-taxa strong,.checkout-taxa small { display:block; }
.checkout-taxa strong { color:#fff; font-size:11px; }
.checkout-taxa small { margin-top:4px; color:var(--app-muted); font-size:8px; }
.spinner.pequeno { width:25px; height:25px; margin:0; flex:0 0 auto; }
.espacamento-topo { margin-top:12px; }
.check-sem-troco { display:flex!important; grid-auto-flow:column; align-items:center; justify-content:start; gap:9px!important; min-height:47px; padding:0 10px; border:1px solid var(--app-border); border-radius:14px; background:rgba(255,255,255,.03); }
.check-sem-troco input { width:18px!important; min-height:18px!important; padding:0!important; accent-color:var(--app-accent); }
.resumo-checkout-final { margin-top:18px; padding:15px; border:1px solid var(--app-border); border-radius:17px; background:rgba(255,255,255,.025); }
.resumo-checkout-final > div { display:flex; justify-content:space-between; gap:12px; margin-top:8px; color:var(--app-muted); font-size:10px; }
.resumo-checkout-final > div:first-child { margin-top:0; }
.resumo-checkout-final .total { margin-top:13px; padding-top:13px; border-top:1px solid var(--app-border); color:#fff; font-size:14px; }

@media (max-width:640px) {
  .titulo-checkout-linha { align-items:flex-start; }
  .usar-localizacao { max-width:155px; }
}


/* D9.6.6 — Opções opcionais e preço base no App Delivery */
.grupo-opcoes label.opcao-produto {
  justify-content: flex-start;
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.grupo-opcoes label.opcao-produto:has(input:checked) {
  border-color: var(--app-accent);
  background: rgba(199,214,48,.12);
  transform: translateY(-1px);
}

.opcao-produto-texto {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.opcao-produto-texto strong {
  color: #f8f4fa;
  font-size: 10px;
  line-height: 1.3;
}

.opcao-produto-texto b {
  flex: 0 0 auto;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 950;
}

.preco-modal[data-configured-price] {
  min-height: 24px;
}


/* D5.1 — checkout por CEP validado */
.checkout-endereco-inteligente { position:relative; }
.cep-primeiro-passo { display:grid; gap:13px; padding:17px; border:1px solid rgba(199,214,48,.26); border-radius:19px; background:linear-gradient(145deg,rgba(199,214,48,.08),rgba(255,255,255,.025)); }
.cep-primeiro-passo > div strong,.cep-primeiro-passo > div small { display:block; }
.cep-primeiro-passo > div strong { color:#fff; font-size:15px; }
.cep-primeiro-passo > div small { margin-top:5px; color:var(--app-muted); font-size:10px; line-height:1.5; }
.cep-primeiro-icone { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:rgba(199,214,48,.14); color:var(--app-accent); }
.cep-primeiro-icone svg { width:23px; height:23px; }
.cep-primeiro-passo label { display:grid; gap:7px; color:#fff; font-size:10px; font-weight:850; }
.cep-primeiro-passo input { width:100%; min-height:56px; padding:0 16px; border:1px solid var(--app-border); border-radius:16px; background:rgba(255,255,255,.045); color:#fff; font-size:17px; font-weight:850; letter-spacing:.08em; outline:0; }
.cep-primeiro-passo input:focus { border-color:var(--app-accent); box-shadow:0 0 0 3px rgba(199,214,48,.08); }
.botao-validar-cep { min-height:52px; border-radius:16px; background:var(--app-accent); color:#222800; font-weight:950; }
.trocar-cep { border:1px solid rgba(199,214,48,.35); border-radius:12px; padding:9px 12px; background:rgba(199,214,48,.08); color:var(--app-accent); font-size:9px; font-weight:900; }
.endereco-validado-cabecalho { display:flex; align-items:center; gap:11px; margin-bottom:14px; padding:12px 13px; border:1px solid rgba(111,205,145,.3); border-radius:16px; background:rgba(111,205,145,.08); }
.endereco-validado-cabecalho > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(111,205,145,.15); color:#6fcd91; }
.endereco-validado-cabecalho strong,.endereco-validado-cabecalho small { display:block; }
.endereco-validado-cabecalho strong { color:#fff; font-size:11px; }
.endereco-validado-cabecalho small { margin-top:3px; color:var(--app-muted); font-size:8px; }
.endereco-validado-campos input[readonly] { color:#c9c4cd; background:rgba(255,255,255,.025); cursor:not-allowed; }
.cep-busca-overlay { position:fixed; inset:0; z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px; background:rgba(12,8,20,.92); backdrop-filter:blur(16px); text-align:center; }
.cep-busca-overlay[hidden] { display:none!important; }
.cep-busca-overlay .spinner { width:46px; height:46px; border-width:4px; }
.cep-busca-overlay strong { color:#fff; font-size:20px; }
.cep-busca-overlay small { max-width:280px; color:var(--app-muted); font-size:11px; line-height:1.5; }
.cep-busca-fechar { position:absolute; top:max(22px,env(safe-area-inset-top)); right:20px; width:48px; height:48px; border:1px solid var(--app-border); border-radius:16px; background:rgba(255,255,255,.07); color:#fff; font-size:29px; }