/* ================================================================
   BISCOITERIA SABOR & MASSA — cardapio digital
   Linguagem visual herdada do deck da proposta: papel e tinta,
   serifa editorial nos titulos, mono nos rotulos, fios finos,
   canto de 4px. Cores e tipografia vieram de la.

   A restricao que manda no layout continua sendo o publico da casa:
   a terceira idade. Onde o deck e denso (17px, cinza claro), aqui o
   corpo sobe para 18px e o contraste sobe junto. Elegancia nao pode
   custar legibilidade.
   ================================================================ */

/* As @font-face vem por <link> proprio no HTML, nao por @import: um
   @import so e descoberto depois que este arquivo baixa, atrasando a
   fonte em uma viagem de rede inteira. */

:root {
  /* papel e tinta — fundos e texto */
  --papel: #f6f1e8;
  --papel-2: #fffcf6;
  --papel-3: #efe6d7;
  --tinta: #241c15;
  --tinta-2: #4a3e33;

  /* O granito do deck (#7C736A) da 4,1:1 no papel e reprova em AA
     para corpo de texto. Escurecido ate passar. */
  --granito: #6b625a;
  --granito-2: #b8aea1;

  /* crosta de pao e brasa — os acentos da marca */
  --crosta: #8b5e34;
  --crosta-clara: #c08a4e;
  --brasa: #b23a2e;
  --folha: #3f6b52;
  --folha-escura: #2f5340;

  --linha: #ded2c0;
  --linha-forte: #c8b9a3;

  --sombra: 0 1px 2px rgba(36, 28, 21, .05), 0 8px 24px -12px rgba(36, 28, 21, .18);
  --sombra-alta: 0 2px 4px rgba(36, 28, 21, .06), 0 24px 48px -20px rgba(36, 28, 21, .28);

  --disp: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo: "Karla", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* Vidro, na gramatica que o portal ja usa em glass.css: creme quente,
     blur 20px com saturate, brilho diagonal. Adaptado a paleta do deck. */
  --vidro: rgba(255, 252, 246, .56);
  --vidro-forte: rgba(255, 252, 246, .8);
  /* .82 e nao .72: medido em 11/09/2026, o vidro a 72% clareava a barra
     para rgb(89,83,76) e derrubava o rotulo secundario para 3,47:1 --
     reprovado em AA. Vidro bonito que apaga texto nao serve a esta casa. */
  --vidro-escuro: rgba(28, 21, 16, .82);
  --vidro-borda: rgba(255, 255, 255, .58);
  --vidro-borda-escura: rgba(255, 255, 255, .18);
  --vidro-brilho: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05));
  --vidro-blur: 20px;
  --vidro-sombra: 0 20px 56px rgba(36, 28, 21, .16);

  --r: 4px;
  --largura: 940px;
}

/* ---------------- Vidro ----------------
   REGRA: fundo SOLIDO por padrao; vidro so quando o navegador comprova
   suporte a backdrop-filter. Sem isso, um fundo 56% translucido fica
   sobre conteudo arbitrario e o texto some — que e exatamente o defeito
   do glass.css do portal, que nao tem @supports.

   Vidro so onde ha algo atras para desfocar (topo, barra, painel, Hero
   sobre foto). Sobre fundo chapado, vidro custa GPU e nao muda nada. */

.vidro { background: var(--papel-2); border: 1px solid var(--linha); }
.vidro--escuro { background: var(--tinta); border: 1px solid var(--vidro-borda-escura); }

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .vidro {
    background: var(--vidro);
    border-color: var(--vidro-borda);
    -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(160%);
    backdrop-filter: blur(var(--vidro-blur)) saturate(160%);
  }
  .vidro--forte { background: var(--vidro-forte); }
  .vidro--escuro {
    background: var(--vidro-escuro);
    border-color: var(--vidro-borda-escura);
    -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(150%);
    backdrop-filter: blur(var(--vidro-blur)) saturate(150%);
  }
}

/* Fio de luz na borda superior: e o que faz a superficie parecer vidro
   de verdade em vez de retangulo translucido. */
.vidro--brilho { position: relative; }
.vidro--brilho::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--vidro-brilho);
  opacity: .5; mix-blend-mode: overlay;
}
.vidro--brilho > * { position: relative; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  overflow-wrap: break-word;
}

/* Textura de papel: ruido de baixa opacidade, fixo, atras de tudo.
   E o que tira o ar de "documento branco" sem custar requisicao. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

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

:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; border-radius: 2px; }

h1, h2 { font-family: var(--disp); font-weight: 700; margin: 0; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-family: var(--corpo); font-weight: 700; margin: 0; }

.limite { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 18px; }

/* Rotulo de secao: mono, versalete, com um fio que corre ate a margem.
   E a assinatura grafica do deck. */
.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--crosta);
  display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--linha); max-width: 140px; }

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: 12px 18px; z-index: 200;
}
.pular:focus { left: 0; top: 0; }

/* ---------------- Cabecalho ---------------- */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topo {
    background: var(--vidro-forte);
    border-bottom-color: var(--vidro-borda);
    -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(160%);
    backdrop-filter: blur(var(--vidro-blur)) saturate(160%);
  }
}
.topo__interno { display: flex; align-items: center; gap: 12px; min-height: 62px; padding-block: 7px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.marca__logo { width: 44px; height: 44px; flex: none; object-fit: contain; }
.marca__nome { font-family: var(--disp); font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; min-width: 0; }
.marca__nome span {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--granito); margin-top: 2px;
}

@media (max-width: 430px) {
  .topo__interno { gap: 8px; }
  .marca__nome { font-size: 17px; }
  .marca__nome span { display: none; }
  .marca__logo { width: 38px; height: 38px; }
  .topo .botao { padding-inline: 14px; font-size: 15px; min-height: 48px; }
}

/* ---------------- Botoes ---------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px;
  font-family: var(--corpo); font-weight: 700; font-size: 16.5px;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform .12s ease, background-color .16s ease, border-color .16s ease;
}
.botao:active { transform: translateY(1px); }
.botao--whats { background: var(--folha); color: #fff; }
.botao--whats:hover { background: var(--folha-escura); }
.botao--ouro { background: var(--crosta); color: var(--papel-2); }
.botao--ouro:hover { background: #734c29; }
.botao--vazio { background: var(--papel-2); color: var(--tinta-2); border-color: var(--linha-forte); }
.botao--vazio:hover { border-color: var(--crosta); color: var(--crosta); }
.botao--perigo { background: var(--papel-2); color: var(--brasa); border-color: #e0c3bf; }
.botao--perigo:hover { background: #fbf0ef; }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: .42; cursor: not-allowed; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  background-color: var(--papel);
  background-image:
    linear-gradient(180deg, rgba(36, 28, 21, .58), rgba(36, 28, 21, .74)),
    url("../assets/hero-fundo-mobile.jpg?v=cdf8808d31d2");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--linha);
  padding-block: 26px 34px;
  color: var(--papel);
}
@media (min-width: 700px) {
  .hero {
    background-image:
      linear-gradient(110deg, rgba(36, 28, 21, .8) 38%, rgba(36, 28, 21, .5)),
      url("../assets/hero-fundo.jpg?v=cdf8808d31d2");
    padding-block: 40px 46px;
  }
}

/* O texto da Hero vive numa placa de vidro: sobre fotografia, texto solto
   perde contraste conforme a imagem muda de tom. */
.hero__cartao { border-radius: var(--r); padding: 20px 18px; box-shadow: var(--vidro-sombra); }
@media (min-width: 800px) { .hero__cartao { padding: 26px 24px; } }
.hero__interno { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
@media (min-width: 800px) { .hero__interno { grid-template-columns: 1.15fr .85fr; gap: 40px; } }

/* No desktop o logotipo fica na coluna da direita; no celular a grade
   vira uma coluna so e ele precisa subir para o topo — marca embaixo
   do botao nao e reconhecida na primeira dobra. */
.hero__logo {
  width: 122px; height: 122px; object-fit: contain;
  order: -1; margin: 0 0 14px;
  filter: drop-shadow(0 12px 24px rgba(36, 28, 21, .2));
}
@media (min-width: 800px) {
  .hero__logo { width: 210px; height: 210px; order: 0; margin: 0 auto; }
}

.hero h1 { font-size: clamp(2.05rem, 6.4vw, 3.4rem); margin-bottom: 10px; }
/* Sobre o cartao de vidro escuro, a crosta fechada some. O tom claro da
   mesma familia mantem a identidade e o contraste. */
.hero__assinatura {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.32rem); color: var(--crosta-clara); margin: 0 0 14px;
}
.hero__texto { margin: 0 0 22px; font-size: 17.5px; line-height: 1.58; color: rgba(246, 241, 232, .88); max-width: 54ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__acoes .botao { flex: 1 1 200px; }

.estado {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta);
}
.estado__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--granito-2); flex: none; }
.estado--aberto .estado__ponto { background: var(--folha); box-shadow: 0 0 0 3px color-mix(in srgb, var(--folha) 22%, transparent); }
.estado--fechado .estado__ponto { background: var(--brasa); }

/* ---------------- Faixa de confianca ---------------- */

.faixa { background: var(--papel-3); border-bottom: 1px solid var(--linha); padding-block: 24px; }
.faixa__grade { display: grid; gap: 18px; }
@media (min-width: 760px) { .faixa__grade { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.faixa__item { border-left: 2px solid var(--crosta-clara); padding-left: 14px; }

/* ---------------- Blocos institucionais ---------------- */

.bloco { padding-block: 40px; }
.bloco__titulo { font-size: clamp(1.55rem, 4.4vw, 2.25rem); margin-bottom: 10px; }
.bloco__texto { font-size: 17px; line-height: 1.6; color: var(--tinta-2); max-width: 54ch; margin: 0 0 20px; }

.bloco--escuro { background: var(--tinta); color: var(--papel); border-block: 1px solid var(--linha); }
.bloco--escuro .bloco__titulo { color: var(--papel); }
.eyebrow--claro { color: var(--crosta-clara); }
.eyebrow--claro::after { background: rgba(246, 241, 232, .22); }

.cartao__titulo { font-size: 17px; font-weight: 700; margin: 0 0 5px; color: var(--crosta); line-height: 1.3; }
.cartao__texto { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); }

/* Passos numerados: a contagem vem do CSS, entao a ordem no HTML e a
   unica fonte de verdade — nao ha numero escrito a mao para
   dessincronizar. */
.passos { list-style: none; counter-reset: passo; margin: 22px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.passo-item { counter-increment: passo; position: relative; padding-top: 42px; }
.passo-item::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--disp); font-size: 2rem; font-weight: 700;
  color: var(--crosta-clara); line-height: 1; font-variant-numeric: tabular-nums;
}
.bloco--escuro .cartao__titulo { color: var(--crosta-clara); }
.bloco--escuro .cartao__texto { color: rgba(246, 241, 232, .78); }

.cartoes { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 760px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }
.cartao {
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 16px 17px; box-shadow: var(--sombra);
}

/* ---------------- Para a estrada ---------------- */

.estrada { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .estrada { grid-template-columns: 1.1fr .9fr; gap: 34px; } }
.estrada__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
}
.estrada .botao { align-self: start; }

/* ---------------- Selo de disponibilidade ---------------- */

/* Diz o MODO (pegar pronto x encomendar), nunca o estoque de hoje —
   isso so o WhatsApp confirma, e a pagina inteira se apoia nisso. */
.selo {
  display: inline-flex; align-items: center; margin-top: 6px;
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; color: var(--folha);
}
.selo--encomenda { color: var(--crosta); }

/* ---------------- Prova social ---------------- */

.prova { padding-block: 34px; border-bottom: 1px solid var(--linha); }
.prova__grade { display: grid; gap: 12px; }
@media (min-width: 760px) { .prova__grade { grid-template-columns: repeat(3, 1fr); } }

/* Citacao com fio na brasa — o componente do deck. */
.depoimento {
  border-left: 3px solid var(--brasa);
  padding: 2px 0 2px 16px;
}
.depoimento__texto {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: 1.06rem; line-height: 1.4; color: var(--tinta); margin: 0 0 8px;
  letter-spacing: -.01em;
}
.depoimento__autor {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--granito); margin: 0;
}
.prova__vazio {
  grid-column: 1 / -1;
  border: 1px dashed var(--linha-forte); border-radius: var(--r);
  background: var(--papel-2); padding: 18px 20px;
  font-size: 16px; color: var(--tinta-2);
}
.prova__vazio strong { color: var(--tinta); }

/* ---------------- Instagram ---------------- */

.insta { padding-block: 30px; border-bottom: 1px solid var(--linha); }
.insta__cartao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sombra);
}
.insta__foto { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; flex: none; border: 1px solid var(--linha); background: var(--papel); }
.insta__texto { flex: 1 1 240px; min-width: 0; }
.insta__arroba { font-family: var(--disp); font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em; margin: 0 0 2px; }
.insta__frase { margin: 0; font-size: 15.5px; color: var(--tinta-2); }
.insta__cartao .botao { flex: 0 0 auto; }

/* ---------------- Busca e categorias ---------------- */

.controles { padding-block: 26px 8px; }

.busca { position: relative; margin-bottom: 16px; }
.busca input {
  width: 100%; min-height: 56px; padding: 12px 48px 12px 15px;
  font-family: var(--corpo); font-size: 17.5px; color: var(--tinta);
  background: var(--papel-2); border: 1px solid var(--linha-forte); border-radius: var(--r);
}
.busca input::placeholder { color: var(--granito); }
.busca input:focus { border-color: var(--crosta); }
.busca__limpar {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 21px; color: var(--granito); cursor: pointer; border-radius: var(--r);
}
.busca__limpar:hover { background: var(--papel-3); color: var(--tinta); }

/* Grade em vez de barra rolavel: rolagem horizontal esconde opcoes e e
   o padrao que mais falha com o publico da casa. */
.categorias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .categorias { grid-template-columns: repeat(4, 1fr); } }

.categoria {
  min-height: 58px; padding: 9px 12px;
  font-family: var(--corpo); font-size: 15.5px; font-weight: 700; line-height: 1.25;
  color: var(--tinta-2); background: var(--papel-2);
  border: 1px solid var(--linha-forte); border-radius: var(--r); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: border-color .16s, background-color .16s;
}
.categoria:hover { border-color: var(--crosta); }
.categoria small {
  font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--granito);
  font-variant-numeric: tabular-nums;
}
.categoria[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.categoria[aria-pressed="true"] small { color: var(--crosta-clara); }

/* ---------------- Secoes e itens ---------------- */

/* NAO usar content-visibility: auto aqui. Testado em 11/09/2026: dentro
   de um container com content-visibility, as imagens com loading="lazy"
   nunca chegam a ser requisitadas — a pagina fica sem foto nenhuma. */
.secao { padding-block: 28px 4px; }

.secao__cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.secao__imagem {
  width: 66px; height: 66px; flex: none; border-radius: var(--r);
  object-fit: cover; border: 1px solid var(--linha-forte);
}
.secao__titulo { font-size: clamp(1.62rem, 4.6vw, 2.3rem); margin-bottom: 4px; }
.secao__resumo { margin: 0; font-size: 16px; color: var(--granito); max-width: 58ch; line-height: 1.5; }

.itens { display: grid; gap: 9px; }
@media (min-width: 700px) { .itens { grid-template-columns: repeat(2, 1fr); } }

.item {
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .16s, box-shadow .16s;
}
.item:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.item__topo { display: flex; gap: 12px; align-items: flex-start; }

/* Preco unico cabe numa linha so. Com 21 salgados na tela, empilhar
   nome e preco dobra a rolagem sem acrescentar informacao. */
.item--simples { flex-direction: row; align-items: center; gap: 11px; }
.item--simples .item__topo { flex: 1 1 auto; min-width: 0; align-items: center; }
.item--simples .variantes { flex: 0 0 auto; }
@media (max-width: 340px) { .item--simples { flex-direction: column; align-items: stretch; } }

.item__foto {
  width: 62px; height: 62px; flex: none; border-radius: var(--r);
  background: var(--papel-3); color: var(--granito);
  display: grid; place-items: center; font-size: 24px;
  border: 1px solid var(--linha); overflow: hidden;
}
.item__foto img { width: 100%; height: 100%; object-fit: cover; }
.item__nome { font-size: 17.5px; font-weight: 700; line-height: 1.28; letter-spacing: -.005em; }
.item__detalhe { margin: 3px 0 0; font-size: 14.5px; color: var(--granito); line-height: 1.4; }

.variantes { display: flex; flex-wrap: wrap; gap: 7px; }
.variante {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 14px;
  font-family: var(--corpo); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--r); cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.variante:hover { border-color: var(--crosta); background: var(--papel-3); }
.variante__rotulo {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--granito);
}
.variante__mais { font-size: 19px; line-height: 1; color: var(--folha); font-weight: 700; }

/* Marca o que ja esta na sacola: sem esse retorno a pessoa nao sabe se
   o toque pegou e adiciona de novo. */
.variante[data-na-sacola] { background: color-mix(in srgb, var(--folha) 10%, var(--papel-2)); border-color: var(--folha); }
.variante[data-na-sacola] .variante__mais { color: var(--folha-escura); }

.item__vazio {
  grid-column: 1 / -1; text-align: center; padding: 38px 16px;
  color: var(--granito); font-size: 16.5px;
}

/* ---------------- Barra da sacola ---------------- */

.sacola-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  color: var(--papel);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(36, 28, 21, .34);
  border-top: 1px solid var(--vidro-borda-escura);
  transform: translateY(115%); transition: transform .22s ease;
}
.sacola-barra[data-visivel="1"] { transform: translateY(0); }
.sacola-barra__interno { display: flex; align-items: center; gap: 9px; max-width: var(--largura); margin-inline: auto; }
.sacola-barra__resumo {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3; margin-right: auto; min-width: 0; color: rgba(246, 241, 232, .82);
}
.sacola-barra__resumo strong {
  display: block; font-family: var(--corpo); font-size: 19px; letter-spacing: 0;
  text-transform: none; color: var(--papel); font-variant-numeric: tabular-nums;
}

/* Tirar 1 fica na barra, sempre a vista: corrigir um toque errado nao
   pode exigir abrir o painel e procurar a linha certa. */
.barra-desfazer {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 8px 13px; flex: none;
  font-family: var(--corpo); font-size: 15px; font-weight: 700;
  color: var(--papel); background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r); cursor: pointer;
}
.barra-desfazer:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 400px) {
  .barra-desfazer__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra-desfazer { padding-inline: 13px; }
}

/* ---------------- Painel da sacola ---------------- */

.painel[hidden] { display: none !important; }
.painel {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 19, 13, .62);
  display: flex; align-items: flex-end; justify-content: center;
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .painel {
    background: rgba(26, 19, 13, .46);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }
}
@media (min-width: 700px) { .painel { align-items: center; } }

.painel__caixa {
  background: var(--papel); width: 100%; max-width: 560px;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--sombra-alta);
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 700px) { .painel__caixa { border-radius: var(--r); max-height: 88vh; } }

.painel__topo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  position: sticky; top: -16px; background: var(--papel);
  padding-block: 10px; z-index: 2; border-bottom: 1px solid var(--linha);
}
.painel__titulo { font-family: var(--disp); font-size: 1.55rem; font-weight: 700; margin: 0 auto 0 0; letter-spacing: -.02em; }
.painel__fechar {
  width: 48px; height: 48px; flex: none; border: 1px solid var(--linha-forte);
  background: var(--papel-2); border-radius: var(--r); font-size: 20px;
  color: var(--tinta-2); cursor: pointer;
}
.painel__fechar:hover { background: var(--papel-3); }

.linha {
  display: flex; align-items: center; gap: 11px;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 10px 11px; margin-bottom: 8px;
}
.linha__info { margin-right: auto; min-width: 0; }
.linha__nome { font-weight: 700; font-size: 16px; line-height: 1.28; }
.linha__preco {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--granito); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.passo { display: flex; align-items: center; gap: 4px; flex: none; }
.passo button {
  width: 44px; height: 44px; font-size: 20px; font-weight: 700; line-height: 1;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--r); cursor: pointer;
}
.passo button:hover { border-color: var(--crosta); }
.passo output { min-width: 32px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }

.sacola-acoes { display: flex; gap: 8px; margin: 12px 0 4px; }
.sacola-acoes .botao { flex: 1; min-height: 48px; font-size: 15px; padding-inline: 10px; }

.total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--linha-forte);
}
.total span:first-child {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--granito);
}
.total span:last-child {
  font-family: var(--disp); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}

fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
legend {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--granito);
  padding: 0; margin-bottom: 9px;
}
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Tres modos de recebimento (local, retirada, entrega): em tela
   estreita empilham, senao o rotulo quebra no meio da palavra. */
.escolhas--tres { grid-template-columns: 1fr; }
@media (min-width: 420px) { .escolhas--tres { grid-template-columns: repeat(3, 1fr); } }
.escolha {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 8px 10px; text-align: center;
  background: var(--papel-2); border: 1px solid var(--linha-forte); border-radius: var(--r);
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.escolha:hover { border-color: var(--crosta); }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha:has(input:checked) { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.escolha:has(input:focus-visible) { outline: 3px solid var(--brasa); outline-offset: 2px; }

.campo { margin-top: 14px; }
.campo label {
  display: block; font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--granito); margin-bottom: 6px;
}
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 13px;
  font-family: var(--corpo); font-size: 17px; color: var(--tinta);
  background: var(--papel-2); border: 1px solid var(--linha-forte); border-radius: var(--r);
}
.campo input:focus, .campo textarea:focus { border-color: var(--crosta); }
.campo textarea { min-height: 78px; resize: vertical; }
.campo__ajuda { font-size: 14.5px; color: var(--granito); margin-top: 5px; line-height: 1.45; }

/* ---------------- PIX ---------------- */

.pix {
  background: var(--papel-3); border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--crosta);
  border-radius: var(--r); padding: 15px; margin-top: 14px;
}
.pix__titulo {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--crosta); margin: 0 0 6px;
}
.pix__valor {
  font-family: var(--disp); font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums;
}
.pix__rotulo {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--granito); margin: 14px 0 4px;
}
.pix__chave {
  font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--tinta);
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 10px 12px; margin: 0; word-break: break-all;
}
.pix__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.pix__acoes .botao { flex: 1 1 150px; min-height: 48px; font-size: 15px; }
.pix__nota { font-size: 14.5px; color: var(--tinta-2); margin: 11px 0 0; line-height: 1.5; }
.pix__aviso {
  background: var(--papel-2); border: 1px solid #e0c3bf; border-left: 3px solid var(--brasa);
  border-radius: var(--r); padding: 11px 13px; margin-top: 11px;
  font-size: 15.5px; color: var(--tinta-2); line-height: 1.5;
}

.painel__rodape { margin-top: 20px; }
.aviso-envio { font-size: 14.5px; color: var(--granito); text-align: center; margin-top: 10px; line-height: 1.5; }

.regiao-viva { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Rodape ---------------- */

.rodape { background: var(--tinta); color: var(--papel); padding-block: 34px; margin-top: 0; }
.rodape a {
  color: var(--crosta-clara);
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px;
}
.rodape__legal a { min-height: 0; padding-block: 0; }
.rodape h2 {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--crosta-clara);
  margin: 0 0 10px; letter-spacing: .18em;
}
.rodape__grade { display: grid; gap: 26px; }
@media (min-width: 700px) { .rodape__grade { grid-template-columns: repeat(3, 1fr); } }
.rodape p { margin: 0 0 .6em; font-size: 15.5px; line-height: 1.55; color: rgba(246, 241, 232, .82); }
.horarios { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.horarios li {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid rgba(246, 241, 232, .14); color: rgba(246, 241, 232, .82);
}
.horarios li span:last-child { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.rodape__legal {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(246, 241, 232, .18);
  font-size: 14px; color: rgba(246, 241, 232, .55); line-height: 1.55;
}

.espaco-sacola { height: 84px; }