/* ═══════════════════════════════════════════════════════════
   BEOWULF BURGER — cardápio online
   Mesma paleta e tipografia do site. Registro de produto:
   o cardápio some, o pedido aparece.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* paleta herdada do site */
  --coal:        #0C0A08;
  --coal-2:      #12100C;
  --graphite:    #1A1712;
  --leather:     #241E16;
  --line:        rgba(201, 162, 75, .16);
  --line-strong: rgba(201, 162, 75, .38);
  --gold:        #C9A24B;
  --gold-hi:     #E6C36C;
  --fire:        #E85D1F;
  --cream:       #F3EAD9;
  --muted:       #A99C85;

  /* fogo escurecido: contraste AA com texto branco (4.8:1+) */
  --fire-cta:    #C44A11;
  --fire-cta-2:  #A93C0C;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius: 10px;
  --radius-sm: 7px;
  --ease: cubic-bezier(.22, .8, .3, 1);

  /* escala z semântica */
  --z-barra:   30;
  --z-topo:    40;
  --z-folha:   60;

  --alt-topo: 7.5rem;
}

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

/* nenhum display de layout pode vencer o hidden */
[hidden] { display: none !important; }

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

body {
  font-family: var(--font-body);
  background: var(--coal);
  color: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* espaço para a barra fixa do carrinho */
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-hi); }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--fire); color: #fff; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--gold); color: var(--coal);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 600; transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: .75rem; }

:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── topo ────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  background: rgba(12, 10, 8, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.topo__linha {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 1rem .6rem;
  width: min(calc(100% - 2rem), 720px); margin: 0 auto;
}

.topo__voltar {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -.35rem;
  color: var(--cream); border-radius: 50%;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.topo__voltar:hover { background: var(--graphite); color: var(--gold-hi); }
.topo__voltar .ico { width: 20px; height: 20px; }

.topo__marca { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.topo__logo { width: 28px; height: 40px; object-fit: contain; }

.topo__titulo {
  font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1; letter-spacing: .015em;
  color: var(--cream);
}

.topo__sub {
  font-size: .76rem; color: var(--muted); margin-top: .15rem;
}

.operacao {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: 0 1rem .7rem; color: var(--muted); font-size: .72rem;
  width: min(calc(100% - 2rem), 720px); margin: 0 auto;
}
.operacao__horario, .operacao__entrega { display: inline-flex; align-items: center; gap: .35rem; }
.operacao__horario i {
  width: .45rem; height: .45rem; border-radius: 50%; background: #78C8A0;
  box-shadow: 0 0 0 .2rem rgba(120, 200, 160, .12);
}
.operacao__entrega { color: var(--gold-hi); font-weight: 600; }
.operacao__entrega::before { content: "·"; color: var(--muted); margin-right: .05rem; }
.operacao__entrega[data-atraso="sim"] { color: #E4B35E; }

/* ── filtros ─────────────────────────────────────────────── */
.filtros { width: min(calc(100% - 2rem), 720px); margin: 0 auto; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.filtros::-webkit-scrollbar { display: none; }

.filtros__lista {
  display: flex; gap: .45rem;
  padding: 0 1rem .7rem;
  width: max-content; min-width: 100%;
}

.chip {
  padding: .5rem 1rem; min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .87rem; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.chip:hover { color: var(--cream); border-color: var(--line-strong); }
.chip.is-ativo {
  background: var(--gold); border-color: var(--gold);
  color: var(--coal); font-weight: 600;
}
.chip--promo { color: var(--gold-hi); border-color: var(--line-strong); }

/* ── aviso ───────────────────────────────────────────────── */
.aviso {
  width: min(calc(100% - 2rem), 720px); margin: 1rem auto 0;
  padding: .8rem .95rem;
  background: var(--leather);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--cream);
}
.aviso strong { color: var(--gold-hi); font-weight: 600; }

/* ── lista ───────────────────────────────────────────────── */
.conteudo { width: min(calc(100% - 2rem), 720px); margin: 0 auto; padding: 1rem 0 2rem; }
#lista, #promocoes { scroll-margin-top: 9rem; }

.lista { display: flex; flex-direction: column; gap: .7rem; }
.lista__secao {
  list-style: none; margin-top: 1.25rem; padding: .2rem .1rem .75rem;
  border-bottom: 1px solid var(--line);
}
.lista__secao:first-child { margin-top: .2rem; }
.lista__secao-kicker {
  color: var(--gold-hi); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.lista__secao h2 {
  margin-top: .18rem; font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.25rem);
  line-height: .98; color: var(--cream);
}
.lista__secao > p:last-child { margin-top: .3rem; color: var(--muted); font-size: .76rem; }

/* ── promoções em carrossel ─────────────────────────────── */
.promocoes { margin-bottom: 1.8rem; }
.promocoes__cabecalho {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  padding: .6rem 0 1rem; border-bottom: 1px solid var(--line);
}
.secao-kicker {
  color: var(--gold-hi); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.promocoes__cabecalho h2 {
  margin-top: .15rem; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: .94; letter-spacing: .01em;
}
.promocoes__cabecalho p:last-child { max-width: 42rem; margin-top: .4rem; color: var(--muted); font-size: .82rem; }
.promocoes__selo {
  flex: none; padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: 100px;
  color: var(--gold-hi); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.promocoes__carrossel { position: relative; }
.promocoes__lista {
  display: flex; gap: .8rem; padding: .8rem 2.25rem .65rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--graphite);
}
.promocoes__seta {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(20, 16, 12, .94); color: var(--gold-hi);
  font-size: 2rem; line-height: 1; box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  transition: border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.promocoes__seta:hover:not(:disabled) { border-color: var(--gold); color: var(--cream); }
.promocoes__seta:disabled { opacity: .28; cursor: default; }
.promocoes__seta--anterior { left: .1rem; }
.promocoes__seta--proxima { right: .1rem; }
.promocoes__lista::-webkit-scrollbar { height: 7px; }
.promocoes__lista::-webkit-scrollbar-track { background: var(--graphite); border-radius: 100px; }
.promocoes__lista::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 100px; }
.promo-card {
  flex: 0 0 min(42vw, 165px); display: flex; flex-direction: column; min-height: 0;
  scroll-snap-align: start;
  overflow: hidden; background: linear-gradient(120deg, var(--coal-2), #1c1711);
  border: 1px solid var(--line-strong); border-radius: var(--radius); transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.promo-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.promo-card.is-esgotado { opacity: .58; }
.promo-card__mosaico { aspect-ratio: 4 / 3; background: var(--graphite); overflow: hidden; }
.promo-card__mosaico img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); }
.promo-card__corpo { display: flex; flex-direction: column; min-width: 0; padding: .62rem; }
.promo-card__topline { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.promo-card__tag, .promo-card__no-pedido {
  display: inline-flex; align-items: center; min-height: 24px; padding: .22rem .45rem; border-radius: 4px;
  font-size: .52rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.promo-card__tag { background: rgba(232, 184, 106, .13); color: var(--gold-hi); }
.promo-card__no-pedido { color: #78C8A0; border: 1px solid rgba(120, 200, 160, .35); letter-spacing: .02em; text-transform: none; }
.promo-card__nome { margin-top: .55rem; font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: .98; }
.promo-card__serve {
  display: inline-flex; align-self: flex-start; margin-top: .48rem; padding: .28rem .36rem;
  border-radius: 5px; background: var(--gold); color: var(--coal);
  font-size: .55rem; font-weight: 800; letter-spacing: .05em; line-height: 1.1;
  text-transform: uppercase; box-shadow: 0 0 0 1px rgba(230, 195, 108, .35), 0 5px 16px rgba(0, 0, 0, .18);
}
.promo-card__desc { margin-top: .35rem; color: var(--muted); font-size: .64rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.promo-card__rodape { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin-top: .75rem; }
.promo-card__precos { display: flex; align-items: baseline; flex-wrap: wrap; gap: .38rem; }
.promo-card__precos strong { color: var(--gold-hi); font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.promo-card__preco-antigo { color: var(--muted); font-size: .7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.promo-card__preco-novo { display: inline-flex; align-items: baseline; gap: .2rem; color: var(--cream); font-size: .72rem; font-weight: 600; }
.promo-card__acao { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: .42rem .45rem; background: var(--gold); color: var(--coal); border-radius: var(--radius-sm); font-size: .58rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; transition: background .18s var(--ease); }
.promo-card__acao:hover { background: var(--gold-hi); }
.promo-card__acao--ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--gold-hi); }
.promo-card__acao--ghost:hover { background: var(--leather); }
.promo-card__acao:disabled { background: var(--graphite); color: var(--muted); cursor: not-allowed; }
.promo-card__config { margin-top: .8rem; padding: .75rem; background: rgba(36, 30, 22, .82); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.promo-card__config-title { color: var(--cream); font-size: .78rem; font-weight: 700; line-height: 1.25; }
.promo-card__config-help { margin-top: .22rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.promo-card__slot { margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.promo-card__slot-name { display: block; color: var(--cream); font-size: .74rem; font-weight: 700; }
.promo-card__slot-name small { color: var(--gold-hi); font-size: .68rem; }
.promo-card__slot-name em { color: var(--gold-hi); font-style: normal; font-weight: 500; }
.promo-card__queijos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.promo-card__queijos label { cursor: pointer; }
.promo-card__queijos input { position: absolute; opacity: 0; pointer-events: none; }
.promo-card__queijos span { display: block; padding: .32rem .5rem; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--muted); font-size: .68rem; }
.promo-card__queijos input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--coal); font-weight: 700; }
.promo-card__config .promo-card__acao { width: 100%; margin-top: .8rem; }

/* ── ficha rápida: segunda tela no celular ───────────────── */
.produto-modal {
  width: min(calc(100% - 1rem), 34rem); max-height: min(92dvh, 46rem); margin: auto;
  padding: 0; overflow: hidden; color: var(--cream);
  background: var(--coal-2); border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.produto-modal::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(8px); }
.produto-modal__fechar-form { position: absolute; top: .65rem; right: .65rem; z-index: 2; }
.produto-modal__fechar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(12, 10, 8, .78); border: 1px solid var(--line-strong); color: var(--cream);
}
.produto-modal__fechar:hover { color: var(--gold-hi); border-color: var(--gold); }
.produto-modal__corpo { max-height: min(92dvh, 46rem); overflow-y: auto; padding-bottom: 1rem; }
.produto-modal__hero { aspect-ratio: 16 / 9; background: var(--graphite); }
.produto-modal__hero img { width: 100%; height: 100%; object-fit: cover; }
.produto-modal__info { padding: 1.1rem 1rem 0; }
.produto-modal__kicker { color: var(--gold-hi); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.produto-modal__titulo { margin-top: .22rem; padding-right: 2.5rem; font-family: var(--font-display); font-size: 2.35rem; line-height: .94; }
.produto-modal__serve { display: inline-flex; margin-top: .65rem; padding: .38rem .55rem; border-radius: 5px; background: var(--gold); color: var(--coal); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.produto-modal__desc { margin-top: .5rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.produto-modal__preco { display: flex; align-items: baseline; gap: .5rem; margin-top: .7rem; color: var(--gold-hi); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.produto-modal__preco s { color: var(--muted); font-size: .85rem; font-weight: 500; }
.produto-modal__preco span { display: inline-flex; align-items: baseline; gap: .25rem; }
.produto-modal__preco span:first-child { color: var(--muted); font-size: .85rem; font-weight: 500; }
.produto-modal__escolhas { margin-top: 1rem; }
.produto-modal__escolhas .grupo { padding-top: .75rem; border-top: 1px solid var(--line); }
.produto-modal__escolhas .grupo:first-child { padding-top: 0; border-top: 0; }
.produto-modal__slots { display: grid; gap: .6rem; }
.produto-modal__slot { padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(36, 30, 22, .55); }
.produto-modal__slot-title { color: var(--cream); font-size: .78rem; font-weight: 700; }
.produto-modal__slot-title em { color: var(--gold-hi); font-style: normal; font-weight: 500; }
.produto-modal__slots .promo-card__queijos { margin-top: .45rem; }
.produto-modal__observacao { margin-top: .8rem; }
.produto-modal__acoes { display: flex; gap: .55rem; margin-top: 1.1rem; }
.produto-modal__acoes .confirmar { flex: 1; }
.produto-modal__voltar { flex: 0 0 auto; min-height: 44px; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--cream); font-size: .74rem; font-weight: 700; }
.produto-modal__voltar:hover { border-color: var(--gold); color: var(--gold-hi); }
.produto-modal .bebidas__opcoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.produto-modal .bebidas__grupo { margin-top: .65rem; }
.produto-modal .bebidas__grupo:first-child { margin-top: 0; }
.produto-modal .bebida span { font-size: .72rem; }

@media (max-width: 34rem) {
  .produto-modal { width: 100%; max-height: 94dvh; margin: auto auto 0; border-radius: 18px 18px 0 0; }
  .produto-modal__corpo { max-height: 94dvh; }
  .produto-modal__titulo { font-size: 2.1rem; }
  .produto-modal__info { padding-left: .85rem; padding-right: .85rem; }
}

.item {
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.item.is-aberto { border-color: var(--line-strong); }
.item--promo { border-color: rgba(232, 184, 106, .3); }
.item--promo .item__cabeca { cursor: pointer; }
.item--promo .item__serve {
  display: inline-flex; align-self: flex-start; margin-top: .35rem; padding: .22rem .38rem;
  border-radius: 4px; background: var(--gold); color: var(--coal);
  font-size: .57rem; font-weight: 800; letter-spacing: .05em; line-height: 1.1; text-transform: uppercase;
}

.item__cabeca {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: .85rem; align-items: center;
  width: 100%; padding: .7rem;
  text-align: left;
}

.item__foto {
  grid-column: 1; grid-row: 1; width: 104px; height: 104px; object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--graphite);
}

/* sem foto ainda: marca gráfica no lugar de um vazio */
.item__marca {
  grid-column: 1; grid-row: 1; width: 104px; height: 104px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--graphite);
  border: 1px solid var(--line);
  color: var(--gold);
}
.item__marca svg { width: 38px; height: 38px; opacity: .85; }

.item__info { grid-column: 2; grid-row: 1; min-width: 0; }

.item__nome {
  font-family: var(--font-display);
  font-size: 1.32rem; line-height: 1.1; letter-spacing: .015em;
  color: var(--cream);
}

.item__tag {
  display: inline-block; vertical-align: middle;
  margin-left: .4rem; padding: .1rem .42rem;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-family: var(--font-body);
  font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-hi);
}

.item__desc {
  font-size: .8rem; color: var(--muted);
  margin-top: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* aberto = o cliente está decidindo: mostra a ficha inteira */
.item.is-aberto .item__desc { -webkit-line-clamp: 99; }

.item__preco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  font-size: .87rem; font-weight: 600; color: var(--gold-hi);
  margin-top: .3rem;
}
.item__preco small { font-weight: 400; color: var(--muted); font-size: .76rem; }
.item__preco-variante { white-space: nowrap; }
.item__preco-sep { color: var(--muted); font-weight: 400; }
.item__preco-antigo { color: var(--muted); font-size: .76rem; font-weight: 400; white-space: nowrap; }
.item__preco-novo { color: var(--cream); white-space: nowrap; }
.item__preco-novo strong { color: var(--gold-hi); font-size: .95rem; }

.item__mais {
  grid-column: 3; grid-row: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--gold-hi);
  transition: transform .22s var(--ease), background .18s var(--ease);
}
.item.is-aberto .item__mais { transform: rotate(45deg); background: var(--graphite); }
.item__mais .ico { width: 17px; height: 17px; }

/* selo de quantidade já no carrinho */
.item__selo {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 .4rem;
  border-radius: 100px; background: var(--gold);
  color: var(--coal); font-size: .82rem; font-weight: 700;
}

/* ── esgotado ────────────────────────────────────────────── */
/* continua visível: o cliente precisa saber que o item existe */
.item.is-esgotado { opacity: .58; }
.item.is-esgotado .item__foto,
.item.is-esgotado .item__marca { filter: grayscale(1); }

.item__esgotado {
  display: inline-block; margin-top: .35rem;
  padding: .18rem .5rem;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gold-hi);
}

/* opção esgotada dentro do formulário */
.bebida.is-off { cursor: not-allowed; }
.bebida.is-off input { cursor: not-allowed; }
.bebida.is-off span {
  color: var(--muted);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-color: rgba(169, 156, 133, .5);
}
.bebida.is-off em {
  font-style: normal; margin-left: .35rem;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
}

/* ── formulário do item (expansão inline) ────────────────── */
.item__form {
  padding: 0 .7rem .85rem;
  border-top: 1px solid var(--line);
  margin-top: .1rem;
  padding-top: .85rem;
}

.grupo { margin-bottom: .85rem; }
.grupo__label {
  display: block;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .45rem;
}

.variantes { display: flex; gap: .5rem; flex-wrap: wrap; }

.variante {
  flex: 1 1 auto; min-width: 10rem;
  display: block; position: relative;
  cursor: pointer;
}
.variante input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.variante__caixa {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem;
  padding: .8rem .95rem; min-height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--graphite);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.variante input:checked + .variante__caixa {
  border-color: var(--gold);
  background: var(--leather);
}
.variante input:focus-visible + .variante__caixa {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}
.variante.is-off { cursor: not-allowed; opacity: .55; }
.variante input:disabled { cursor: not-allowed; }
.variante input:disabled + .variante__caixa { text-decoration: line-through; }
.variante__nome { font-size: .94rem; line-height: 1.25; font-weight: 600; }
.variante input:checked + .variante__caixa .variante__nome { color: var(--gold-hi); }
.variante__preco { font-size: .94rem; font-weight: 700; white-space: nowrap; }

/* ── bebidas do combo ────────────────────────────────────── */
.bebidas__aviso {
  font-size: .76rem; color: var(--muted);
  margin: -.15rem 0 .8rem; text-wrap: pretty;
}

.bebidas__grupo + .bebidas__grupo { margin-top: .9rem; }

.bebidas__titulo {
  display: block;
  font-size: .76rem; font-weight: 600; color: var(--cream);
  margin-bottom: .4rem;
}
.bebidas__titulo em {
  font-style: normal; font-weight: 700; color: var(--gold-hi);
}

.bebidas__nota {
  font-size: .76rem; color: var(--gold-hi);
  margin: -.2rem 0 .45rem; text-wrap: pretty;
}

.bebidas__opcoes { display: flex; flex-wrap: wrap; gap: .4rem; }

.bebida { position: relative; cursor: pointer; }
.bebida input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.bebida span {
  display: flex; align-items: center;
  min-height: 42px; padding: .5rem .85rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--graphite);
  font-size: .85rem; font-weight: 500; color: var(--cream);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.bebida input:hover + span { border-color: var(--line-strong); }
.bebida input:checked + span {
  background: var(--gold); border-color: var(--gold);
  color: var(--coal); font-weight: 600;
}
.bebida input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* faltou escolher a bebida */
.bebidas.is-erro .bebidas__opcoes { border-radius: var(--radius-sm); }
.bebidas.is-erro .bebida span { border-color: #B4635A; }

/* stepper de quantidade */
.linha-qtd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .85rem;
}

.stepper {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--graphite);
}
.stepper__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--gold-hi); border-radius: 50%;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.stepper__btn:hover:not(:disabled) { background: var(--leather); }
.stepper__btn:disabled { color: rgba(169, 156, 133, .4); cursor: not-allowed; }
.stepper__btn .ico { width: 16px; height: 16px; }
.stepper__valor {
  min-width: 2.2rem; text-align: center;
  font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.entrada {
  display: block; width: 100%;
  padding: .7rem .8rem;
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--cream);
  transition: border-color .18s var(--ease);
}
.entrada::placeholder { color: var(--muted); opacity: 1; }
.entrada:hover { border-color: var(--line-strong); }
.entrada:focus { outline: none; border-color: var(--gold); }
.entrada:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.entrada--area { resize: vertical; min-height: 3.2rem; }

.confirmar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 48px;
  padding: .8rem 1.2rem;
  background: var(--gold); color: var(--coal);
  border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 700;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.confirmar__total { font-variant-numeric: tabular-nums; }
.confirmar:hover { background: var(--gold-hi); }
.confirmar:disabled { filter: grayscale(.65) brightness(.72); cursor: not-allowed; }
.confirmar:active { transform: scale(.985); }

.rodape-nota {
  margin-top: 1.6rem;
  font-size: .78rem; color: var(--muted);
  text-align: center; text-wrap: pretty;
}

/* ── barra do carrinho ───────────────────────────────────── */
.barra {
  position: fixed; z-index: var(--z-barra);
  left: 0; right: 0; bottom: 0;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--coal) 62%, rgba(12, 10, 8, 0));
}

.barra__btn {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; min-height: 54px;
  padding: .75rem 1rem;
  background: linear-gradient(160deg, var(--fire-cta), var(--fire-cta-2));
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font-weight: 600;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.barra__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, .6); }
.barra__btn:active { transform: translateY(0); }

.barra__contagem {
  display: grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 .4rem;
  background: rgba(255, 255, 255, .22);
  border-radius: 100px;
  font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.barra__label { flex: 1; text-align: left; font-size: .95rem; }
.barra__total { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── folha do carrinho ───────────────────────────────────── */
.folha {
  width: 100%; max-width: 32rem;
  max-height: 92dvh; height: auto;
  margin: auto auto 0;
  padding: 0;
  background: var(--coal-2);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  overflow: visible;
}
.folha::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }

.folha[open] { display: flex; flex-direction: column; }

@media (min-width: 34rem) {
  .folha { margin: auto; border-radius: 14px; max-height: 88dvh; }
}

@media (min-width: 58rem) {
  .topo__linha { max-width: 1120px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .filtros__lista { justify-content: center; padding-left: 0; padding-right: 0; }
  .aviso { max-width: 980px; margin-left: auto; margin-right: auto; }
  .promocoes__lista { gap: 1rem; }
}

@media (max-width: 42rem) {
  .promocoes__cabecalho { align-items: start; flex-direction: column; }
  .promocoes__selo { margin-top: -.35rem; }
  .promocoes__lista { gap: .7rem; }
}

@media (max-width: 25rem) {
  .topo__linha { padding-left: .7rem; padding-right: .7rem; }
  .topo__sub { font-size: .68rem; }
  .operacao { padding-left: .7rem; padding-right: .7rem; }
  .conteudo { width: min(100% - 1.4rem, 980px); }
  .item__cabeca { grid-template-columns: 82px minmax(0, 1fr) auto; gap: .55rem; padding: .6rem; }
  .item__foto, .item__marca { width: 82px; height: 82px; }
  .item__nome { font-size: 1.18rem; }
  .promo-card__corpo { padding: .8rem; }
  .promo-card__mosaico { aspect-ratio: 16 / 9; }
  .promo-card__rodape { align-items: stretch; flex-direction: column; }
  .promo-card__acao { width: 100%; }
}

.folha__fechar-form { position: absolute; top: .6rem; right: .6rem; z-index: 1; }
.folha__fechar {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--graphite);
  border: 1px solid var(--line);
  color: var(--cream);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.folha__fechar:hover { color: var(--gold-hi); border-color: var(--line-strong); }
.folha__fechar .ico { width: 18px; height: 18px; }

.folha__corpo {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.15rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.folha__titulo {
  font-family: var(--font-display);
  font-size: 1.75rem; line-height: 1; letter-spacing: .015em;
  margin-bottom: 1rem; padding-right: 3rem;
}

/* itens do carrinho */
.itens { display: flex; flex-direction: column; }

.linha-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem; align-items: start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.linha-item:first-child { padding-top: 0; }

.linha-item__nome { font-size: .95rem; font-weight: 600; }
.linha-item__variante { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.linha-item__bebida {
  font-size: .78rem; color: var(--cream);
  margin-top: .25rem;
}
.linha-item__bebida em { font-style: normal; color: var(--gold-hi); font-weight: 600; }

.linha-item__obs {
  font-size: .78rem; color: var(--gold-hi);
  margin-top: .3rem; text-wrap: pretty;
}
.linha-item__preco {
  font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

.linha-item__acoes {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.remover {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: 0 .2rem;
  font-size: .8rem; color: var(--muted);
  transition: color .18s var(--ease);
}
.remover:hover { color: #E08878; }
.remover .ico { width: 15px; height: 15px; }

.vazio {
  padding: 2rem 1rem; text-align: center;
  font-size: .9rem; color: var(--muted); text-wrap: pretty;
}

/* resumo */
.resumo { margin: 1rem 0 1.35rem; }
.resumo__linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .3rem 0;
}
.resumo__linha dt { font-size: 1rem; font-weight: 600; }
.resumo__linha dd { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.resumo__linha--nota dt,
.resumo__linha--nota dd { font-size: .8rem; font-weight: 400; color: var(--muted); }

/* campos do checkout */
.campo { margin-bottom: 1.05rem; border: 0; }
.campo__label {
  display: block; padding: 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .45rem;
}
.campo__opc { text-transform: none; letter-spacing: 0; font-weight: 400; }
.campo__dica { font-size: .76rem; color: var(--muted); margin-top: .4rem; text-wrap: pretty; }
.campo__dica--solta { margin: -.4rem 0 1.05rem; }
.campo__dica strong { color: var(--cream); font-weight: 600; }

.opcoes { display: flex; gap: .5rem; flex-wrap: wrap; }

.opcao { flex: 1 1 6rem; position: relative; cursor: pointer; }
.opcao input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.opcao span {
  display: grid; place-items: center;
  min-height: 46px; padding: .6rem .5rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--graphite);
  font-size: .88rem; font-weight: 500;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.opcao input:checked + span {
  border-color: var(--gold); background: var(--leather); color: var(--gold-hi); font-weight: 600;
}
.opcao input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* enviar */
.enviar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 54px;
  margin-top: .5rem; padding: .9rem 1.2rem;
  background: linear-gradient(160deg, var(--fire-cta), var(--fire-cta-2));
  color: #fff;
  border-radius: var(--radius);
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.enviar:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.enviar:active { transform: translateY(0); }
.enviar:disabled { filter: grayscale(.6) brightness(.75); cursor: not-allowed; transform: none; box-shadow: none; }
.enviar .ico { width: 20px; height: 20px; }

.enviar__nota {
  margin-top: .7rem;
  font-size: .76rem; color: var(--muted);
  text-align: center; text-wrap: pretty;
}

/* ── motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .item__form { animation: abrir .22s var(--ease); }
  .folha[open] { animation: subir .26s var(--ease); }
  .folha[open]::backdrop { animation: surgir .26s var(--ease); }
}

@keyframes abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes surgir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}