/* =====================================================================
   LOJA PUBLICA — folha de estilo
   ---------------------------------------------------------------------
   Todo valor vem de tokens.css. Se um numero literal aparecer aqui, ou e
   um detalhe optico (1px de traco, 50% de raio) ou e um bug.

   Ordem:
     1. base            5. carrinho
     2. cabecalho       6. modais e formularios
     3. hero            7. sobre, informacoes, rodape
     4. cardapio        8. breakpoints
   ===================================================================== */

/* Apelidos dos tokens antigos: os modais herdados ainda os usam em estilo
   inline. Apontar para o sistema novo evita reescrever 76 trechos e
   garante que nenhuma tela fique com a paleta anterior. */
:root {
  --bg: var(--surface-sunken);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --brand: var(--brand-accent);
  --brand-dark: var(--warning);
  --green: var(--brand-primary);
  --green-dark: var(--brand-primary-strong);
  --surface-2: var(--surface-elevated);
  --surface-secondary: var(--surface-elevated);
  --brand-primary: var(--brand-primary);
  /* --radius-md/sm/lg NAO sao redeclarados aqui: eles ja vem de
     tokens.css. Apontar a variavel para ela mesma cria um ciclo, o
     navegador descarta as tres e todo border-radius vira zero. */
  --radius: var(--radius-lg);
  --shadow: var(--shadow-lg);
  --error: var(--danger);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* A ancora nao pode parar atras do cabecalho + trilha grudentos. */
  scroll-padding-top: calc(var(--header-h) + var(--rail-h) + var(--space-md));
}

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.2; }
[hidden] { display: none !important; }

.page-width {
  width: min(var(--container), calc(100% - var(--container-gutter) * 2));
  margin: 0 auto;
}

/* Acessibilidade: o foco precisa ser visto por quem navega no teclado. */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.site-header :focus-visible { outline-color: var(--brand-accent-strong); }

/* Atalho para quem usa leitor de tela ou teclado. */
.pular-para-conteudo {
  position: absolute; left: var(--space-xs); top: -100px; z-index: 200;
  padding: var(--space-xs) var(--space-md);
  background: var(--brand-accent); color: var(--text-on-accent);
  border-radius: var(--radius-sm); font-weight: var(--weight-black);
  transition: top var(--fast);
}
.pular-para-conteudo:focus { top: var(--space-xs); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===================================================================
   2. CABECALHO
   =================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-dark); color: var(--text-on-dark);
  border-bottom: 1px solid var(--border-dark);
}
/* Folhagem discreta nas pontas: brasilidade sem virar bandeira. */
.site-header::before, .site-header::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 190px;
  background: radial-gradient(120px 90px at 10% 40%, rgba(242,182,50,.10), transparent 70%);
  pointer-events: none;
}
.site-header::after { right: 0; transform: scaleX(-1); }

.header-inner {
  position: relative; z-index: 1;
  width: min(var(--container), calc(100% - var(--container-gutter) * 2));
  margin: 0 auto; height: var(--header-h);
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: var(--space-lg);
}

.brand { display: inline-flex; flex-direction: column; width: max-content; line-height: 1; }
.brand-linha { display: flex; align-items: center; gap: var(--space-2xs); }
.brand strong {
  font-family: var(--font-marca); font-weight: 400;
  font-size: 28px; color: var(--brand-accent);
  letter-spacing: 0; white-space: nowrap;
  /* A Pacifico tem descidas longas; sem isto o "ç" encosta na tagline. */
  line-height: 1.18;
}
.brand-icone { width: 22px; height: 22px; border-radius: var(--radius-xs); object-fit: cover; flex: 0 0 auto; }
.brand span {
  font-size: 9px; letter-spacing: 3.4px; color: var(--text-on-dark-soft);
  white-space: nowrap; font-weight: var(--weight-bold);
}

.desktop-nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-base); }
.desktop-nav a {
  position: relative; padding: 4px 0;
  color: var(--text-on-dark-soft); transition: color var(--fast);
}
.desktop-nav a:hover { color: var(--brand-accent-strong); }
/* Item ativo sublinhado em dourado, como no print. */
.desktop-nav a.ativo { color: #fff; font-weight: var(--weight-bold); }
.desktop-nav a.ativo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; border-radius: 3px; background: var(--brand-accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }

/* "Entregar em ..." — abre o mesmo passo de endereco do checkout. */
.endereco-chip {
  height: 46px; display: flex; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-sm); border-radius: var(--radius-md);
  border: 1px solid var(--border-dark); background: rgba(255,255,255,.06);
  color: var(--text-on-dark); max-width: 260px;
}
.endereco-chip:hover { border-color: var(--brand-accent); }
.endereco-chip svg { flex: 0 0 auto; color: var(--brand-accent); }
.endereco-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.endereco-txt small { font-size: 10px; color: var(--text-on-dark-soft); line-height: 1.2; }
.endereco-txt b {
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.25;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.search-box {
  height: 46px; display: flex; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-sm); border-radius: var(--radius-md);
  border: 1px solid var(--border-dark); background: rgba(255,255,255,.06);
  color: var(--text-on-dark-soft);
}
.search-box:focus-within { border-color: var(--brand-accent); }
.search-box input {
  width: 180px; border: 0; outline: none; background: transparent;
  color: var(--text-on-dark); font-size: var(--text-base);
}
.search-box input::placeholder { color: rgba(244,241,232,.55); }

.conta-btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: var(--radius-md); border: 1px solid var(--border-dark);
  background: rgba(255,255,255,.06); color: var(--text-on-dark);
  display: grid; place-items: center;
}
.conta-btn:hover { border-color: var(--brand-accent); }

/* Carrinho: pilula dourada com contador e valor. */
.cart-chip {
  height: 46px; display: flex; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-md) 0 var(--space-xs); border: 0;
  border-radius: var(--radius-md);
  background: var(--brand-accent); color: var(--text-on-accent);
  font-weight: var(--weight-black); font-size: var(--text-md);
}
.cart-chip:hover { background: var(--brand-accent-strong); }
.cart-icon-wrap {
  position: relative; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.12); display: grid; place-items: center;
}
.cart-icon-wrap b {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--brand-primary); color: #fff; font-size: 10px;
  display: grid; place-items: center; border: 2px solid var(--brand-accent);
}

.menu-button {
  display: none; width: 44px; height: 44px;
  border-radius: var(--radius-md); border: 1px solid var(--border-dark);
  background: rgba(255,255,255,.06); color: var(--text-on-dark); place-items: center;
}
.mobile-search-wrap, .mobile-menu { display: none; }

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-black);
  background: var(--brand-primary); color: #fff; white-space: nowrap;
}
.status-pill.fechado { background: var(--danger); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ===================================================================
   3. HERO — foto sangrando a direita, texto sobre veu escuro
   =================================================================== */

.hero { position: relative; overflow: hidden; background: #08251A; color: var(--text-on-dark); }

.hero-backdrop { position: absolute; inset: 0; }
.hero-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo, none);
  background-size: cover; background-position: center right;
}
.hero-backdrop::after {
  /* O texto vem primeiro: veu forte a esquerda, foto limpa a direita. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6,34,24,.97) 0%, rgba(6,34,24,.93) 38%,
    rgba(6,34,24,.6) 62%, rgba(6,34,24,.14) 100%);
}

.hero-content {
  position: relative; z-index: 1;
  width: min(var(--container), calc(100% - var(--container-gutter) * 2));
  margin: 0 auto; padding: var(--space-lg) 0 var(--space-xl);
  min-height: 300px; display: flex; align-items: center;
}
.hero-copy { max-width: 760px; }

.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-black);
  letter-spacing: 3px; color: var(--text-on-dark-soft); margin-bottom: 2px;
}
.eyebrow.dark { color: var(--brand-primary); letter-spacing: 2.2px; }

.hero h1 {
  margin: 0; font-family: var(--font-marca); font-weight: 400;
  font-size: clamp(44px, 5vw, 72px); letter-spacing: 0;
  color: var(--brand-accent-strong); line-height: 1.12;
  text-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.hero-sub { display: none; }
.hero-copy > p {
  margin: 2px 0 var(--space-sm); max-width: 560px;
  font-size: var(--text-lg); color: var(--text-on-dark);
}

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-md);
  color: var(--text-on-dark-soft); font-size: var(--text-sm);
}
.hero-meta > span { display: flex; align-items: center; gap: var(--space-2xs); }
.hero-meta svg { flex: 0 0 auto; color: var(--brand-accent); }
.hero-meta b { color: #fff; font-weight: var(--weight-bold); }

.hero-acoes { margin-top: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.primary-cta, .ghost-cta {
  height: 52px; padding: 0 var(--space-lg); border: 0;
  border-radius: var(--radius-md); font-weight: var(--weight-black);
  font-size: var(--text-md); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-xs); transition: background var(--fast);
}
.primary-cta { background: var(--brand-accent); color: var(--text-on-accent); box-shadow: 0 10px 26px rgba(242,182,50,.22); }
.primary-cta:hover { background: var(--brand-accent-strong); }
.ghost-cta { background: rgba(9,34,24,.72); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.ghost-cta:hover { background: rgba(9,34,24,.92); border-color: var(--brand-accent); }

/* Recado escrito a mao sobre a foto. */
.hero-assinatura {
  position: absolute; z-index: 2; right: 5%; bottom: 14%;
  font-family: var(--font-mao); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1;
  color: var(--brand-accent-strong); text-align: center;
  text-shadow: 0 3px 16px rgba(0,0,0,.6); transform: rotate(-6deg);
  pointer-events: none;
}
.hero-photo-card { display: none; }

/* ===================================================================
   4. CATEGORIAS E CARDAPIO
   =================================================================== */

.category-sticky {
  position: sticky; top: var(--header-h); z-index: 45;
  background: rgba(247, 243, 234, .95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.category-rail {
  display: flex; gap: var(--space-2xs); overflow-x: auto;
  height: var(--rail-h); align-items: center;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.category-rail::-webkit-scrollbar { display: none; }
.category-rail button {
  flex: 0 0 auto; height: 38px; padding: 0 var(--space-sm);
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-primary);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  display: flex; align-items: center; gap: var(--space-2xs);
  scroll-snap-align: start; transition: background var(--fast), border-color var(--fast);
}
.category-rail button:hover { border-color: var(--brand-primary); background: #FBF8F1; }
.category-rail button.active {
  background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(6, 63, 45, .22);
}

/* ---- tres banners editoriais ----------------------------------
   Vem das primeiras categorias com produto; clicar rola ate a secao.
   Nao sao texto fixo no codigo. */
.banners-editoriais {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm); margin-bottom: var(--space-md);
}
.banner-ed {
  position: relative; min-height: 116px; overflow: hidden;
  border-radius: var(--radius-md); padding: var(--space-md);
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; text-align: left; border: 0; background: #12241C;
}
.banner-ed::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--foto); background-size: cover; background-position: center;
  transition: transform .3s var(--ease);
}
.banner-ed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,26,18,.95) 0%, rgba(8,26,18,.82) 42%, rgba(8,26,18,.15) 100%);
}
.banner-ed:hover::before { transform: scale(1.05); }
.banner-ed > * { position: relative; z-index: 1; }
.banner-ed-titulo { display: flex; flex-direction: column; line-height: 1.05; }
.banner-ed-titulo b { font-size: var(--text-lg); font-weight: var(--weight-black); letter-spacing: .3px; }
.banner-ed-titulo span { font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--brand-accent); letter-spacing: .3px; }
.banner-ed-sub { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--text-on-dark-soft); max-width: 62%; }
.banner-ed-seta {
  position: absolute; left: var(--space-md); bottom: var(--space-md);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-accent); color: var(--text-on-accent);
  display: grid; place-items: center; opacity: 0; transform: translateY(6px);
  transition: opacity var(--fast), transform var(--fast);
}
.banner-ed:hover .banner-ed-seta, .banner-ed:focus-visible .banner-ed-seta { opacity: 1; transform: none; }

.storefront-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--cart-w);
  gap: var(--space-lg); align-items: start;
  padding-top: var(--space-lg); padding-bottom: var(--space-2xl);
}
.menu-column { min-width: 0; }

.search-result-banner {
  margin-bottom: var(--space-md); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap;
  font-size: var(--text-base);
}
.search-result-banner span { color: var(--text-secondary); }
.search-result-banner button {
  margin-left: auto; border: 0; background: transparent;
  color: var(--brand-primary); font-weight: var(--weight-black);
}

.section-heading { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.section-heading > div { flex: 1 1 auto; min-width: 0; }
.ver-todos {
  flex: 0 0 auto; border: 0; background: transparent;
  color: var(--brand-primary); font-weight: var(--weight-black);
  font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 5px;
}
.ver-todos:hover { color: var(--brand-primary-strong); }
.section-heading h2 { margin: 0; font-size: var(--text-2xl); letter-spacing: -.5px; }
.section-heading p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.section-icon {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  border-radius: 50%; background: #F6EDD8; font-size: var(--text-xl);
  border: 1px solid #EADFC4;
}

.featured-section { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border); }
.menu-section { padding: var(--space-lg) 0; border-bottom: 1px solid var(--border); }
.menu-section:last-child { border-bottom: 0; }

/* ---- grade adaptativa -------------------------------------------
   auto-fill com minimo de 218px entrega 3 colunas a 1366 na coluna do
   cardapio, 4 em telas largas, e nunca espreme. align-items: start faz
   um item simples ("Agua, R$ 5,00") ficar curto em vez de esticar ate
   a altura do vizinho com foto. */
.menu-grid, .featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: var(--space-sm);
  /* stretch: todos os cards da linha com a MESMA altura. Com "start"
     cada um encolhia ate o proprio texto e a linha de preco ficava em
     alturas diferentes -- um card com descricao de duas linhas empurrava
     o botao para baixo e o vizinho nao acompanhava. */
  align-items: stretch;
}

/* Dentro do card, os blocos tem altura reservada: foto 4:3 fixa, nome em
   duas linhas, descricao em duas linhas. Assim nome alinha com nome,
   descricao com descricao e o rodape encosta no pe do card. */
.menu-grid .produto-nome {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.25em);
}
.menu-grid .produto-desc { min-height: calc(2 * 1.4 * var(--text-sm)); }

/* ---- componente unico de produto --------------------------------
   No notebook e um card vertical; no celular o MESMO markup vira uma
   linha horizontal compacta. Um componente, dois formatos. */
.produto {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  text-align: left; padding: 0; width: 100%;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.produto:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.produto:disabled, .produto.esgotado { opacity: .55; cursor: default; }
.produto.esgotado:hover { transform: none; box-shadow: none; border-color: var(--border); }

/* ---- lista compacta: itens sem foto ---------------------------
   Duas colunas de linhas baixas, como um cardapio de bar impresso.
   Fica logo abaixo da grade de cards da mesma secao. */
.menu-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-sm);
}
.menu-lista .produto {
  flex-direction: row; align-items: center;
  border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent;
  padding: var(--space-2xs) 0;
}
.menu-lista .produto:hover { box-shadow: none; transform: none; background: rgba(255,255,255,.5); }
/* Nome e descricao a esquerda; preco e botao a direita, na MESMA linha --
   e assim que se le um cardapio de bar. */
.menu-lista .produto-corpo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--space-sm);
  padding: var(--space-xs) 0; gap: 0 var(--space-sm);
}
.menu-lista .produto-nome, .menu-lista .produto-desc { grid-column: 1; }
.menu-lista .produto-desc { -webkit-line-clamp: 1; font-size: var(--text-xs); margin-top: 2px; }
.menu-lista .produto-rodape {
  grid-column: 2; grid-row: 1 / -1; margin: 0; padding: 0;
  gap: var(--space-sm); justify-content: flex-end;
}
.menu-lista .produto-preco { text-align: right; }
.menu-lista .produto-de { text-align: right; }
.menu-lista .btn-favorito { position: static; order: 3; background: transparent; box-shadow: none; width: 26px; height: 26px; }

/* Item sem foto na GRADE (quando a secao nao tem nenhuma foto e ele cai
   no bloco de cards): fundo creme e filete dourado marcam a intencao. */
/* O card sem foto NAO leva listra lateral. A borda de 3px deixava o
   conteudo 2px mais estreito que o do vizinho, e a foto, o nome e o
   preco desciam junto -- era a origem do desalinhamento nas linhas
   mistas. Quem sinaliza a ausencia de foto agora e o marcador. */
.menu-grid .produto.sem-foto {
  background: linear-gradient(180deg, #FCFAF4 0%, var(--surface) 100%);
}
.produto.sem-foto .produto-corpo { padding: var(--space-sm) var(--space-md); gap: 3px; }

.produto-foto {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #EEE8DA; overflow: hidden; flex: 0 0 auto;
}
.produto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease); }
.produto:hover .produto-foto img { transform: scale(1.03); }

/* Favorito: guardado no navegador de quem visita. Nao existe conta de
   cliente no sistema, entao nao finjo que existe -- e uma conveniencia
   local, e some se a pessoa limpar os dados do site. */
.btn-favorito {
  position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--text-secondary);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: color var(--fast), transform var(--fast);
}
.btn-favorito:hover { transform: scale(1.08); }
.btn-favorito[aria-pressed="true"] { color: var(--danger); }
.btn-favorito[aria-pressed="true"] svg { fill: currentColor; }

.produto-selo {
  position: absolute; top: var(--space-xs); left: var(--space-xs);
  padding: 4px 7px; background: var(--brand-primary); color: #fff;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--weight-black);
}

.produto-corpo {
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-sm);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.produto-nome { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }

/* O nome e um botao de verdade: entra na tabulacao, anuncia-se ao leitor
   de tela e recebe o foco de volta quando o modal fecha. O ::after
   estende a area clicavel por todo o card sem aninhar interativos. */
.produto-abrir {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.produto-abrir::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.produto-abrir:disabled { cursor: default; }
.produto-abrir:disabled::after { display: none; }
.produto { position: relative; }
/* O botao de adicionar fica acima da area clicavel do card. */
.btn-add, .esgotado-tag { position: relative; z-index: 1; }
.produto:focus-within { border-color: var(--brand-primary); }
.produto-desc {
  margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.produto-rodape {
  margin-top: auto; padding-top: var(--space-2xs);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
}
/* O rotulo "a partir de" fica acima do numero e so existe em alguns
   itens. Sem altura reservada, o preco de quem tem rotulo subia 7px e a
   linha ficava torta. Reservando o espaco e encostando o numero no pe,
   todos os precos da linha caem na mesma altura. */
.produto-preco {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 34px;
  font-size: var(--text-md); font-weight: var(--weight-black); white-space: nowrap;
  /* Alturas inteiras: com line-height herdado (1.5 de 15px = 22,5px) a
     caixa media 34,5 num card e 34 no outro, e o preco saia 1px torto. */
  line-height: 22px;
}
.menu-lista .produto-preco { min-height: 0; }
.produto-preco s { color: var(--text-muted); font-weight: var(--weight-normal); margin-right: 5px; font-size: var(--text-sm); }
.produto-de { display: block; height: 12px; line-height: 12px; font-size: 10px; color: var(--text-muted); font-weight: var(--weight-medium); }

.btn-add {
  flex: 0 0 auto; height: 38px; min-width: 38px; padding: 0 var(--space-sm);
  border: 0; border-radius: var(--radius-sm);
  background: var(--brand-accent); color: var(--text-on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--text-sm); font-weight: var(--weight-black);
  transition: background var(--fast);
}
.btn-add:hover { background: var(--brand-accent-strong); }
.btn-add .rotulo { display: inline; }

.esgotado-tag { font-size: var(--text-xs); font-weight: var(--weight-black); color: var(--danger); }

/* ---- azulejo "Ver todos" -------------------------------------
   Ocupa a vaga que sobraria na ultima linha. Nao imita um produto: e
   uma porta para o resto da categoria, e se anuncia assim. */
.azulejo-todos {
  /* Acompanha a altura dos cards vizinhos em vez de ficar um degrau
     mais baixo -- a grade usa align-items:start por causa dos itens
     sem foto, entao o azulejo pede estica para si. */
  align-self: stretch; min-height: 200px;
  align-items: center; justify-content: center;
  gap: var(--space-2xs); text-align: center;
  background: linear-gradient(180deg, #FBF7EE 0%, var(--surface) 100%);
  border: 1px dashed var(--border-strong); color: var(--text-primary);
}
.azulejo-todos:hover { border-color: var(--brand-primary); border-style: solid; }
.azulejo-mais {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-accent); color: var(--text-on-accent);
  font-weight: var(--weight-black); font-size: var(--text-md);
}
.azulejo-txt { font-weight: var(--weight-black); font-size: var(--text-base); }
.azulejo-todos small { color: var(--text-secondary); font-size: var(--text-xs); }
/* "Ver menos" e um retorno, nao uma porta: sem o circulo dourado. */
.azulejo-menos { background: transparent; border-style: dashed; }
.azulejo-menos .azulejo-txt { color: var(--brand-primary); }
@media (max-width: 900px) {
  .azulejo-todos { min-height: 92px; flex-direction: row; justify-content: flex-start; padding: var(--space-sm) var(--space-md); text-align: left; gap: var(--space-sm); }
  .azulejo-mais { width: 38px; height: 38px; flex: 0 0 38px; }
}

.no-results { padding: var(--space-2xl) var(--space-md); text-align: center; }
.no-results h2 { margin-bottom: var(--space-2xs); }
.no-results p { color: var(--text-secondary); }
.no-results .primary-button { display: inline-flex; padding: 0 var(--space-md); margin-top: var(--space-xs); }

/* ---- banner de promocao ---- */
.promo-banner {
  margin-bottom: var(--space-md); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-columns: 210px minmax(0, 1fr);
}
.promo-photo { min-height: 150px; background: #EEE8DA; }
.promo-photo img { width: 100%; height: 100%; object-fit: cover; }
.promo-copy { padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; justify-content: center; }
.promo-copy h2 { margin: 3px 0 5px; font-size: var(--text-xl); }
.promo-copy p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.promo-foot { margin-top: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.promo-foot > strong { font-size: var(--text-lg); }
.promo-foot .primary-button { padding: 0 var(--space-md); min-height: 38px; }

/* ===================================================================
   5. CARRINHO
   ------------------------------------------------------------------
   Tres areas: cabecalho fixo, lista que rola, resumo fixo. A coluna usa
   MAX-height, nunca height: com o carrinho vazio ela encolhe em vez de
   deixar uma faixa branca de 600px.
   =================================================================== */

/* A coluna e fluxo normal: vantagens e cartao da fachada rolam com a
   pagina. Quem gruda e o BLOCO DO PEDIDO, que tem altura limitada -- so a
   lista de itens rola por dentro, e o resumo com o botao nunca sai da
   tela, nem com 30 itens. Fazer a coluna inteira rolar achatava a lista
   ate zero. */
.desktop-cart { display: flex; flex-direction: column; gap: var(--space-sm); }
.cart-shell {
  position: sticky;
  top: calc(var(--header-h) + var(--rail-h) + var(--space-md));
  max-height: calc(100dvh - var(--header-h) - var(--rail-h) - var(--space-xl));
  width: 100%; min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; overflow: hidden;
}

.cart-head {
  flex: 0 0 auto; padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center;
}
.cart-head h2 { margin: 0; font-size: var(--text-xl); }
.cart-head h2 span { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cart-head > div:first-child span { color: var(--text-secondary); font-size: var(--text-xs); }
.cart-head-actions { display: flex; align-items: center; gap: var(--space-2xs); }
.cart-head-actions > button:not(.icon-button) {
  border: 0; background: transparent; color: var(--text-secondary);
  display: flex; align-items: center; gap: 4px; font-size: var(--text-xs);
}
.cart-head-actions > button:hover { color: var(--danger); }

.cart-items {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 var(--space-md); overscroll-behavior: contain;
}
.cart-items::-webkit-scrollbar { width: 6px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

/* Vazio: ocupa o que precisa, nada mais. */
.empty-cart {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-lg) var(--space-md);
}
.empty-cart > span {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #F2EDE1; border-radius: 50%; color: var(--warning);
}
.empty-cart h3 { margin: var(--space-sm) 0 3px; font-size: var(--text-base); }
.empty-cart p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); max-width: 200px; }

.cart-item {
  padding: var(--space-sm) 0; display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--space-sm); border-bottom: 1px solid var(--border); align-items: start;
}
.cart-item:last-child { border-bottom: 0; }
/* Sem miniatura a linha perde a primeira coluna, nao a ultima: a
   lixeira continua no canto direito. */
.cart-item.sem-foto { grid-template-columns: minmax(0, 1fr) auto; }
.cart-thumb {
  width: 58px; height: 58px; border-radius: var(--radius-sm);
  overflow: hidden; background: #F2EDE1; display: grid; place-items: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-main { min-width: 0; }
.cart-item-top { display: flex; justify-content: space-between; gap: var(--space-2xs); }
.cart-item h3 { margin: 0; font-size: var(--text-base); line-height: 1.3; font-weight: var(--weight-bold); }
.cart-item small { color: var(--text-secondary); font-size: var(--text-xs); }
.remove-button { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); padding: 2px; }
.remove-button:hover { color: var(--danger); }
.cart-note {
  margin: 3px 0 0; color: var(--text-secondary); font-size: var(--text-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-bottom { margin-top: var(--space-2xs); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.cart-item-bottom > strong { font-size: var(--text-sm); }

.quantity-picker {
  height: 26px; display: inline-grid; grid-template-columns: 26px 26px 26px;
  align-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); overflow: hidden; background: #FBFAF6;
}
.quantity-picker button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-secondary); display: grid; place-items: center; }
.quantity-picker button:hover { background: var(--border); }
.quantity-picker strong { text-align: center; font-size: var(--text-xs); }
.quantity-picker.large { grid-template-columns: 38px 34px 38px; height: 42px; border-radius: var(--radius-sm); }
.quantity-picker.large button { width: 38px; height: 42px; }
.quantity-picker.large strong { font-size: var(--text-base); }

.cart-warning {
  flex: 0 0 auto; margin: 0 var(--space-md) var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  background: #FDF3E2; border: 1px solid #EBD4A2; color: #7A5812;
  font-size: var(--text-xs); line-height: 1.45;
}

.cart-coupon { flex: 0 0 auto; padding: 0 var(--space-md) var(--space-xs); }
.cart-coupon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); }
.cart-coupon-row input {
  height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 0 var(--space-xs); outline: none; background: var(--surface); font-size: var(--text-sm);
}
.cart-coupon-row input:focus { border-color: var(--brand-primary); }
.cart-coupon-row button {
  height: 42px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-sm);
  background: var(--brand-accent); color: var(--text-on-accent);
  font-size: var(--text-base); font-weight: var(--weight-black);
}
.cart-coupon-row input { height: 42px; border-radius: var(--radius-sm); font-size: var(--text-base); }
.cart-coupon-label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-base); font-weight: var(--weight-bold); }

.cart-summary {
  flex: 0 0 auto; padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--border); background: var(--surface-elevated);
}
.summary-line { display: flex; justify-content: space-between; gap: var(--space-xs); margin-bottom: 5px; font-size: var(--text-sm); color: var(--text-secondary); }
.summary-line strong { color: var(--text-primary); }
.summary-line.desconto, .summary-line.desconto strong { color: var(--brand-primary); font-weight: var(--weight-black); }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--space-xs); margin-top: var(--space-xs);
  border-top: 1px solid var(--border); font-size: var(--text-base);
}
.summary-total { align-items: center; }
.summary-total > span { font-size: var(--text-xl); font-weight: var(--weight-black); }
.summary-total strong { font-size: var(--text-3xl); color: var(--brand-primary); }

.checkout-button, .primary-button {
  min-height: 48px; border: 0; border-radius: var(--radius-md);
  background: var(--brand-accent); color: var(--text-on-accent);
  font-weight: var(--weight-black); font-size: var(--text-md);
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  transition: background var(--fast);
}
.checkout-button { margin-top: var(--space-sm); width: 100%; }
.checkout-button:hover, .primary-button:hover { background: var(--brand-accent-strong); }
.checkout-button.disabled, .checkout-button:disabled { pointer-events: none; opacity: .45; }
.cart-help { display: block; margin-top: var(--space-2xs); text-align: center; color: var(--text-muted); font-size: 10px; }

/* ---- vantagens: vem de website.features (icone, titulo, descricao) ---- */
.cart-perks {
  flex: 0 0 auto; margin: 0; padding: var(--space-xs); list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); display: grid; gap: 2px;
}
.cart-perks li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--space-xs); align-items: center; padding: var(--space-2xs); }
.cart-perk-ico {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: #F6EDD8;
}
.cart-perks li:nth-child(2) .cart-perk-ico { background: #E7F3ED; }
.cart-perks li:nth-child(3) .cart-perk-ico { background: #E8EEF6; }
.cart-perks li:nth-child(4) .cart-perk-ico { background: #F7EBE7; }
.cart-perk-txt { min-width: 0; display: flex; flex-direction: column; }
.cart-perk-txt b { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.cart-perk-txt span { font-size: var(--text-xs); color: var(--text-secondary); }

/* ---- cartao da fachada, no pe do carrinho ---- */
.cart-promo {
  flex: 0 0 auto; position: relative; min-height: 150px; overflow: hidden;
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  justify-content: flex-end; padding: var(--space-md); color: #fff;
}
.cart-promo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--foto); background-size: cover; background-position: center;
}
.cart-promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,18,.25) 0%, rgba(8,26,18,.88) 100%);
}
.cart-promo > * { position: relative; z-index: 1; }
.cart-promo strong { font-family: var(--font-marca); font-weight: 400; font-size: var(--text-2xl); color: var(--brand-accent-strong); line-height: 1.2; }
.cart-promo span { font-size: var(--text-sm); color: var(--text-on-dark-soft); margin-top: 2px; }

.mobile-cart-backdrop, .mobile-cart-bar { display: none; }

/* ===================================================================
   6. MODAIS E FORMULARIOS
   =================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 13, 9, .68); display: none; place-items: center;
  padding: var(--space-md); backdrop-filter: blur(3px);
}
.modal-backdrop.active { display: grid; }

.modal-content, .product-modal {
  position: relative; width: min(560px, 100%);
  max-height: min(760px, calc(100dvh - var(--space-xl)));
  overflow-y: auto; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-dark);
}
.modal-content::-webkit-scrollbar { width: 7px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

.icon-button {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-secondary); display: grid; place-items: center;
}
.modal-close, .modal-close-btn-simple {
  position: absolute; right: var(--space-sm); top: var(--space-sm); z-index: 2;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(16, 21, 17, .78); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}

/* Proporcao, nao altura fixa. Com 220px a foto virava uma tarja de
   2,55:1 num modal de 560px, enquanto o card da mesma comida usa 4:3 --
   o prato aparecia achatado ao abrir. 16:10 acompanha a largura do
   modal e fica perto do card. */
.product-modal-image, .modal-image {
  width: 100%; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; background: #EEE8DA;
}
.product-modal-header, .modal-body { padding: var(--space-md) var(--space-lg); }
.modal-kicker { color: var(--warning); font-size: 10px; font-weight: var(--weight-black); letter-spacing: 1px; text-transform: uppercase; }
.pm-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.product-modal-title { margin: 4px 0 5px; font-size: var(--text-2xl); }
.product-modal-price { font-size: var(--text-lg); font-weight: var(--weight-black); white-space: nowrap; }
.product-modal-desc { margin: 0; color: var(--text-secondary); font-size: var(--text-base); }

.pm-qty-block {
  margin: 0 var(--space-lg); padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.pm-qty-label { font-weight: var(--weight-black); font-size: var(--text-sm); }
.quantity-controls {
  height: 42px; display: inline-grid; grid-template-columns: 38px 34px 38px;
  align-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden; background: #FBFAF6;
}
.qty-btn { width: 38px; height: 42px; border: 0; background: transparent; color: var(--text-secondary); display: grid; place-items: center; font-size: var(--text-lg); }
.qty-btn:hover { background: var(--border); }
.qty-value { text-align: center; font-size: var(--text-base); font-weight: var(--weight-black); }

#modal-modifiers-container { padding: 0 var(--space-lg); }
.modifiers-group { margin-top: 2px; border-top: 1px solid var(--border); padding: var(--space-sm) 0; }
.modifiers-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-black); }
.modifiers-title span, .option-title span { color: var(--brand-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.option-block { margin-top: var(--space-md); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-sm) 0; }
.option-title { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-2xs); font-size: var(--text-sm); }
.modifier-row, .radio-row {
  min-height: 40px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-xs); font-size: var(--text-base); cursor: pointer;
}
.modifier-row.com-foto { grid-template-columns: 20px 38px minmax(0, 1fr) auto; }
.modifier-row input, .radio-row input { accent-color: var(--brand-primary); width: 17px; height: 17px; }
.modifier-thumb { width: 38px; height: 38px; border-radius: var(--radius-xs); object-fit: cover; background: #F0EBE1; }
.modifier-name { min-width: 0; }
.modifier-price { font-weight: var(--weight-bold); font-size: var(--text-sm); white-space: nowrap; }
.modifier-row.esgotado { opacity: .45; cursor: not-allowed; }

.pm-obs, .notes-field { display: block; margin: 0 var(--space-lg) var(--space-md); position: relative; }
.form-label, .notes-field > span { display: block; margin-bottom: var(--space-2xs); font-weight: var(--weight-black); font-size: var(--text-sm); }
.pm-opcional { color: var(--text-secondary); font-weight: var(--weight-medium); }
.form-textarea, .notes-field textarea {
  width: 100%; min-height: 72px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-lg); outline: none; background: var(--surface);
}
.form-textarea:focus, .notes-field textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(6, 63, 45, .09); }
.pm-contador, .notes-field small { position: absolute; right: var(--space-xs); bottom: 6px; color: var(--text-muted); font-size: 10px; }

/* O rodape gruda no pe do modal em qualquer tamanho. Com a foto em
   16:10 o botao de adicionar caia abaixo da area visivel no notebook, e
   so aparecia depois de rolar dentro do modal -- a acao principal nao
   pode se esconder. */
.modal-action-footer-wrap, .modal-footer {
  position: sticky; bottom: 0; z-index: 3;
  margin: 0; padding: var(--space-sm) var(--space-lg) var(--space-lg);
  display: grid; gap: var(--space-xs);
  background: var(--surface);
  box-shadow: 0 -10px 22px rgba(20, 24, 15, .07);
}
.modal-add { padding: 0 var(--space-md); justify-content: space-between; }
.pm-sep { opacity: .6; }

.btn {
  min-height: 42px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-sm);
  font-weight: var(--weight-black); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-xs); transition: background var(--fast);
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-strong); }
.btn-primary:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-secondary { background: #F2EFE7; color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-outline { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-outline:hover { border-color: var(--brand-primary); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: var(--text-md); }
.btn-sm { min-height: 36px; font-size: var(--text-base); font-weight: var(--weight-bold); }

.form-group { margin-bottom: var(--space-sm); }
.form-input, .form-select {
  width: 100%; height: 42px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); padding: 0 var(--space-sm); outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(6, 63, 45, .09); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.form-grid label { display: flex; flex-direction: column; gap: 4px; }
.form-grid label.full { grid-column: 1 / -1; }

.ct-header { padding: var(--space-md) var(--space-lg) var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-bottom: 1px solid var(--border); }
.ct-title { margin: 0; font-size: var(--text-lg); }
.ct-clear { border: 0; background: transparent; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.ct-items { padding: 0 var(--space-lg); max-height: 40dvh; overflow-y: auto; }
.ct-empty { padding: var(--space-2xl) var(--space-md); text-align: center; color: var(--text-secondary); font-size: var(--text-base); }
.ct-item { padding: var(--space-sm) 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-xs); border-bottom: 1px solid var(--border); }
.ct-item-img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; background: #F2EDE1; }
.ct-item-body { min-width: 0; }
.ct-item-name { margin: 0; font-size: var(--text-sm); line-height: 1.3; font-weight: var(--weight-bold); }
.ct-item-extra { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.ct-item-actions { margin-top: var(--space-2xs); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ct-item-price { font-size: var(--text-sm); font-weight: var(--weight-black); }
.ct-qty { height: 26px; display: inline-grid; grid-template-columns: 26px 26px 26px; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden; background: #FBFAF6; }
.ct-qty button, .cart-qty-btn { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-secondary); display: grid; place-items: center; }
.ct-qty span { text-align: center; font-size: var(--text-xs); font-weight: var(--weight-black); }
.ct-remove { border: 0; background: transparent; color: var(--text-muted); padding: 2px; }
.ct-remove:hover { color: var(--danger); }
.ct-coupon-block { padding: var(--space-sm) var(--space-lg) 0; }
.ct-coupon-label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-black); }
.ct-coupon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.ct-totals { padding: var(--space-sm) var(--space-lg) 0; }
.ct-row { display: flex; justify-content: space-between; gap: var(--space-xs); margin-bottom: 5px; font-size: var(--text-sm); color: var(--text-secondary); }
.ct-row.ct-desc { color: var(--brand-primary); font-weight: var(--weight-black); }
.ct-row.ct-total { padding-top: var(--space-xs); margin-top: var(--space-xs); border-top: 1px solid var(--border); font-size: var(--text-base); color: var(--text-primary); font-weight: var(--weight-black); }
.ct-row.ct-total span:last-child { font-size: var(--text-xl); }
.ct-footer { padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-xs); }

.checkout-card, .co-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); margin: 0 var(--space-lg) var(--space-sm); }
.checkout-step { position: absolute; left: var(--space-lg); top: var(--space-lg); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary); color: #fff; font-weight: var(--weight-black); font-size: var(--text-sm); }
.choice-grid { display: grid; gap: var(--space-xs); }
.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { min-height: 64px; text-align: left; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); }
.choice.active { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); background: #F1F7F3; }
.choice span { display: flex; flex-direction: column; }
.choice strong { font-size: var(--text-sm); }
.choice small { color: var(--text-secondary); font-size: var(--text-xs); margin-top: 2px; }

.checkout-items { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-xs) 0; }
.checkout-item { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; font-size: var(--text-xs); }
.checkout-item b { color: var(--brand-primary); margin-right: 4px; }

#confirmed-location-card, #pickup-info-card { background: #F1F7F3; border: 1px solid #C4DDD0; border-radius: var(--radius-sm); padding: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--text-sm); }

.switch { position: relative; display: inline-block; width: 44px; height: 25px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: background var(--fast); }
.slider::before { content: ""; position: absolute; height: 19px; width: 19px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--fast); box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--brand-primary); }
.switch input:checked + .slider::before { transform: translateX(19px); }



.order-tracker-card { padding: var(--space-lg); text-align: center; }
.tracker-success-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: #E7F3ED; color: var(--brand-primary); margin: 0 auto var(--space-md); font-size: 30px; }
.tracker-title { margin: 0; font-size: var(--text-2xl); }
.tracker-order-num { font-size: var(--text-md); font-weight: var(--weight-black); color: var(--brand-primary); }
.tracker-subtitle { color: var(--text-secondary); font-size: var(--text-base); }
.timeline { margin: var(--space-lg) 0 0; display: grid; text-align: left; }
.timeline-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; position: relative; padding-bottom: var(--space-md); }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.timeline-step:last-child::before { display: none; }
.timeline-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; font-size: var(--text-xs); color: var(--text-muted); z-index: 1; }
.timeline-step.completed .timeline-dot { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.timeline-step.completed::before { background: var(--brand-primary); }
.timeline-label { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-secondary); padding-top: 2px; }
.timeline-step.completed .timeline-label { color: var(--text-primary); font-weight: var(--weight-black); }
#client-live-tracker-box { margin-top: var(--space-md); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--surface-elevated); border: 1px solid var(--border); text-align: left; font-size: var(--text-sm); }

.toast-container {
  position: fixed; left: 50%; bottom: var(--space-lg); transform: translateX(-50%);
  z-index: 300; display: grid; gap: var(--space-xs); width: min(400px, calc(100% - var(--space-lg)));
}
.toast { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--brand-secondary); color: #fff; font-size: var(--text-base); box-shadow: var(--shadow-lg); animation: toast-in .2s var(--ease); }
.toast.success { background: var(--brand-primary); }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   7. SOBRE, INFORMACOES, RODAPE
   =================================================================== */

.about-section {
  margin-top: var(--space-lg); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-columns: 38% minmax(0, 1fr);
}
.about-photo { min-height: 240px; background: #EEE8DA; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
.about-copy h2 { margin: 0 0 var(--space-xs); font-size: var(--text-3xl); }
.about-copy > p, .about-text { margin: 0; color: var(--text-secondary); }
.about-text p { margin: 0 0 var(--space-xs); }
.about-text p:last-child { margin-bottom: 0; }
.benefit-list { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.benefit-list span { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-base); font-weight: var(--weight-bold); }
.benefit-list svg { color: var(--brand-primary); flex: 0 0 auto; }

.info-grid { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); }
.info-card h3 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.bhour-row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 5px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.bhour-row:last-child { border-bottom: 0; }
.bhour-row.bhour-hoje { font-weight: var(--weight-black); color: var(--brand-primary); }
.bhour-day { color: var(--text-secondary); }
.bhour-row.bhour-hoje .bhour-day { color: var(--brand-primary); }
#restaurant-leaflet-map { height: 220px; border-radius: var(--radius-sm); overflow: hidden; background: #E8E3D7; }

.site-footer { background: var(--brand-secondary-soft); color: var(--text-on-dark); margin-top: var(--space-lg); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-2xl); align-content: center; padding: var(--space-xl) 0; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-brand strong { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); color: var(--brand-accent); }
.footer-brand > span { font-size: 8px; letter-spacing: 3px; margin-top: 4px; color: var(--text-on-dark-soft); }
.footer-brand p { color: var(--text-on-dark-soft); font-size: var(--text-sm); margin-top: var(--space-md); }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--text-on-dark-soft); }
.footer-grid > div:not(.footer-brand) strong { color: #fff; margin-bottom: 3px; }
.footer-grid a:hover { color: var(--brand-accent-strong); }
.ft-social { display: flex; gap: var(--space-sm); }
.footer-legal { border-top: 1px solid var(--border-dark); padding: var(--space-sm) 0; color: var(--text-muted); font-size: var(--text-xs); text-align: center; }

/* ===================================================================
   8. BREAKPOINTS
   ------------------------------------------------------------------
   1180  o carrinho estreita, o hero encolhe a foto
   1024  tablet deitado: a foto do hero sai
    900  celular/tablet em pe: carrinho vira folha, cardapio 1 coluna
    640  ajustes finos de tipografia e modal em folha inferior
   =================================================================== */

/* 1440 e menos: o cabecalho perde folga. O endereco encolhe antes de
   sumir, porque e ele que diz para onde o pedido vai. */
@media (max-width: 1460px) {
  .header-inner { gap: var(--space-md); }
  .desktop-nav { gap: var(--space-md); }
  .search-box input { width: 130px; }
  .endereco-chip { max-width: 200px; }
  .endereco-txt b { max-width: 120px; }
}

@media (max-width: 1280px) {
  :root { --cart-w: 316px; }
  .desktop-nav { font-size: var(--text-sm); gap: var(--space-sm); }
  .endereco-txt { display: none; }
  .endereco-chip { width: 46px; padding: 0; justify-content: center; }
  .search-box input { width: 110px; }
  .banner-ed-sub { max-width: 100%; font-size: var(--text-xs); }
}

@media (max-width: 1180px) {
  .about-section { grid-template-columns: 34% minmax(0, 1fr); }
  .hero-assinatura { font-size: 22px; right: 3%; }
}

@media (max-width: 1024px) {
  .desktop-search { display: none; }
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: auto 1fr; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .banners-editoriais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banners-editoriais > :last-child { grid-column: 1 / -1; min-height: 96px; }
  .hero-assinatura { display: none; }
}

@media (max-width: 900px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
  .brand strong { font-size: 21px; }
  .brand span { letter-spacing: 2.6px; font-size: 7px; }
  .brand-icone { width: 18px; height: 18px; }
  /* A conta CONTINUA no cabecalho do celular. Ela estava aqui nesta
     lista de escondidos, e o resultado foi que a area do cliente so
     existia dentro do menu hamburguer -- ninguem achava. O cabecalho
     vira [MENU][MARCA][CONTA][CARRINHO]: o icone da conta e estreito e
     sem rotulo, entao a marca nao perde espaco util. */
  .desktop-nav, .desktop-search, .endereco-chip { display: none; }
  .conta-btn { width: 40px; height: 40px; }
  .cart-chip { height: 40px; padding: 0 var(--space-sm) 0 4px; font-size: var(--text-sm); }
  .cart-icon-wrap { width: 30px; height: 30px; }
  .menu-button { display: grid; }
  .banners-editoriais { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .banners-editoriais > :last-child { grid-column: auto; }
  .banner-ed { min-height: 92px; }
  .hero-content { min-height: 0; padding: var(--space-md) 0 var(--space-lg); }
  .hero h1 { font-size: clamp(38px, 11vw, 54px); }

  .mobile-search-wrap { display: block; padding: 0 var(--container-gutter) var(--space-xs); }
  .mobile-search-wrap .search-box { width: 100%; background: #1A201A; }
  .mobile-search-wrap input { width: 100%; }

  .mobile-menu {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: #151A14; border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark); padding: var(--space-xs) var(--container-gutter) var(--space-sm);
  }
  .mobile-menu a { padding: var(--space-xs) 2px; color: var(--text-on-dark); font-size: var(--text-base); border-bottom: 1px solid var(--border-dark); }
  .mobile-menu a:last-of-type { border-bottom: 0; }
  .mobile-menu .status-pill { margin-top: var(--space-xs); }

  /* A faixa de busca soma altura ao cabecalho grudento. */
  .category-sticky { top: calc(var(--header-h) + 48px); }

  .hero-content { padding: var(--space-md) 0; }
  .hero h1 { font-size: clamp(30px, 8vw, 42px); letter-spacing: -1.2px; }
  .hero-copy > p { font-size: var(--text-base); margin: var(--space-xs) 0; }
  .hero-sub { font-size: 10px; letter-spacing: 2.8px; }
  .hero-acoes { margin-top: var(--space-sm); }
  /* O endereco saiu da linha de informacoes; o selo de aberto/fechado
     fica, porque e a informacao que decide se da para pedir agora. */
  .hero-meta { gap: 5px var(--space-sm); }

  .storefront-layout { display: block; padding-bottom: 90px; }
  .desktop-cart { display: none; }

  /* Um produto por linha, em cartao horizontal compacto:
     foto pequena | informacoes | adicionar. */
  .menu-grid, .featured-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .menu-lista { grid-template-columns: minmax(0, 1fr); }
  .produto { flex-direction: row; align-items: stretch; }
  .produto-foto { width: 92px; flex: 0 0 92px; aspect-ratio: 1; }
  .produto-corpo { padding: var(--space-sm); }
  .produto-desc { -webkit-line-clamp: 2; }
  .btn-add { height: 34px; }

  .mobile-cart-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(10, 13, 9, .64); backdrop-filter: blur(3px); }
  .mobile-cart-bar {
    display: flex; position: fixed; left: var(--container-gutter); right: var(--container-gutter);
    bottom: var(--space-sm); z-index: 90; min-height: 54px; border: 0;
    border-radius: var(--radius-md); background: var(--brand-primary); color: #fff;
    box-shadow: 0 12px 30px rgba(6, 63, 45, .34);
    align-items: center; justify-content: space-between; padding: 0 var(--space-md);
  }
  .mobile-cart-bar span { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); }
  .mobile-cart-bar b { width: 19px; height: 19px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); border-radius: 50%; font-size: 10px; }
  .mobile-cart-bar strong { font-size: var(--text-sm); }

  .toast-container { bottom: 78px; }
  .about-section { grid-template-columns: minmax(0, 1fr); }
  .about-photo { min-height: 180px; }
  .about-copy { padding: var(--space-lg); }
  .about-copy h2 { font-size: var(--text-2xl); }
  .promo-banner { grid-template-columns: 120px minmax(0, 1fr); }
  .promo-copy { padding: var(--space-sm) var(--space-md); }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .hero-acoes { display: grid; }
  .hero-meta { display: grid; gap: 6px; font-size: var(--text-sm); }
  .fulfillment-switch { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .fulfillment-switch button { justify-content: center; padding: 0 var(--space-xs); font-size: var(--text-sm); }
  .hero-actions { display: grid; }
  .primary-cta { width: 100%; }
  .category-rail { margin-right: calc(var(--container-gutter) * -1); }
  .section-heading h2 { font-size: var(--text-xl); }
  .footer-grid { padding: var(--space-lg) 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .footer-brand { grid-column: 1 / -1; }

  /* Modais viram folha inferior. */
  .modal-backdrop { align-items: end; padding: 0; }
  .modal-content, .product-modal { width: 100%; max-height: 90dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  /* no celular a proporcao ja resolve; so limita para o conteudo caber */
  .product-modal-image, .modal-image { max-height: 38dvh; }
  .product-modal-header, .modal-body { padding: var(--space-md); }
  .pm-qty-block, #modal-modifiers-container, .pm-obs, .notes-field { margin-left: var(--space-md); margin-right: var(--space-md); }
  .modal-action-footer-wrap, .modal-footer { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .checkout-card, .co-card { margin: 0 var(--space-md) var(--space-sm); padding: var(--space-md); }
  .checkout-step { position: static; margin-bottom: var(--space-xs); }
  .choice-grid.two, .choice-grid.three, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid label.full { grid-column: auto; }
  .ct-header, .ct-items, .ct-coupon-block, .ct-totals, .ct-footer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .map-confirm-modal-content { width: 100%; height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .promo-banner { grid-template-columns: minmax(0, 1fr); }
  .promo-photo { min-height: 130px; }
}

/* Telas muito estreitas (360px): o botao ganha rotulo curto e a foto
   encolhe para o texto nao virar uma coluna de uma palavra. */
@media (max-width: 380px) {
  .produto-foto { width: 78px; flex-basis: 78px; }
  .produto-corpo { padding: var(--space-xs) var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================================
   9. CELULAR — experiencia propria, nao o desktop espremido
   ---------------------------------------------------------------------
   Ordem: cabecalho, hero, busca, trilha, destaques em carrossel,
   linha de produto, alvos de toque, folhas inferiores, safe area.
   ===================================================================== */

@media (max-width: 900px) {

  /* ---- cabecalho: [menu] [marca] [carrinho], 60px ---- */
  .site-header { padding-top: var(--sat); }
  .header-inner {
    grid-template-columns: var(--toque) minmax(0, 1fr) auto;
    align-items: center; gap: var(--space-sm);
    padding-left: var(--sal); padding-right: var(--sar);
  }
  .menu-button { display: grid; width: var(--toque); height: var(--toque); }
  .brand {
    justify-self: center; align-items: center; text-align: center;
    min-width: 0; max-width: 100%;
  }
  .brand strong, .brand span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .brand strong { font-size: 22px; }
  .brand span { font-size: 8px; letter-spacing: 2.8px; }
  .brand-icone { width: 16px; height: 16px; }
  .header-actions { gap: var(--space-2xs); }
  .cart-chip { height: var(--toque); min-width: var(--toque); padding: 0 var(--space-xs); }
  .cart-icon-wrap { width: 30px; height: 30px; background: transparent; }
  #nav-cart { display: none; }          /* no celular vale o numero, nao o valor */
  .cart-icon-wrap b { top: -4px; right: -6px; }

  /* A faixa de busca sai do cabecalho: ela custava 55px grudados o tempo
     todo. Vai para o topo do cardapio, onde rola junto com o conteudo. */
  .mobile-search-wrap { display: none; }

  /* ---- hero compacto ---- */
  .hero-content { padding: var(--space-sm) 0 var(--space-md); min-height: 0; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 42px); }
  .hero-copy > p { font-size: var(--text-md); margin: var(--space-2xs) 0 var(--space-xs); }
  .hero-eyebrow, #hero-eyebrow { display: none; }   /* a marca ja diz isso */
  .hero-meta { gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); flex-wrap: wrap; }
  /* Taxa e pedido minimo saem da primeira tela: aparecem no carrinho, no
     momento em que importam. Ficam o horario e o estado da loja, que sao
     o que decide se da para pedir agora. */
  .hero-meta > span:nth-of-type(n+2):not(.status-pill) { display: none; }
  .hero-acoes { margin-top: var(--space-sm); display: grid; gap: var(--space-xs); }
  .primary-cta, .ghost-cta { width: 100%; height: 48px; }

  /* ---- busca, agora no corpo do cardapio ---- */
  .busca-mobile { display: block; margin-bottom: var(--space-sm); }
  /* (o padrao "none" fica fora da media query, logo abaixo) */
  .busca-mobile .search-box {
    height: 50px; width: 100%; border-radius: var(--radius-md);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .busca-mobile .search-box input { width: 100%; color: var(--text-primary); font-size: var(--text-md); }
  .busca-mobile .search-box input::placeholder { color: var(--text-muted); }

  /* ---- trilha de categorias ---- */
  .category-sticky { top: calc(var(--header-h) + var(--sat)); }
  .category-rail { height: var(--rail-h); scroll-snap-type: x mandatory; }
  .category-rail button { height: var(--toque); font-size: var(--text-sm); padding: 0 var(--space-sm); }

  /* ---- destaques em carrossel ---- */
  #featured-products-container .menu-grid {
    display: grid;
    /* Sem isto a regra base (minmax de coluna) continua valendo e
       esmaga o primeiro card a 2px -- o auto-flow column so governa as
       colunas IMPLICITAS. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--space-sm);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* sangra ate a borda para o proximo card "espiar" na lateral */
    margin: 0 calc(var(--container-gutter) * -1);
    padding: 2px var(--container-gutter);
  }
  #featured-products-container .menu-grid::-webkit-scrollbar { display: none; }
  #featured-products-container .produto { scroll-snap-align: start; flex-direction: column; }
  #featured-products-container .produto-foto { width: 100%; flex-basis: auto; aspect-ratio: 16 / 10; }
  #featured-products-container .produto-corpo { padding: var(--space-sm) var(--space-md) var(--space-md); }
  #featured-products-container .produto-nome { font-size: var(--text-lg); }

  /* ---- linha de produto: foto | texto | adicionar ---- */
  .produto-foto { width: 104px; flex-basis: 104px; }
  .produto-nome { font-size: var(--text-md); }
  .produto-desc { font-size: var(--text-sm); }
  .produto-preco { font-size: var(--text-md); min-height: 0; }
  .menu-grid .produto-nome, .menu-grid .produto-desc { min-height: 0; }
  .produto-corpo { padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); }

  /* ---- alvos de toque ---- */
  .btn-add { height: var(--toque); min-width: var(--toque); padding: 0 var(--space-sm); font-size: var(--text-sm); }
  .btn-favorito { width: var(--toque); height: var(--toque); }
  .quantity-picker { height: var(--toque); grid-template-columns: var(--toque) 40px var(--toque); }
  .quantity-picker button { width: var(--toque); height: var(--toque); }
  .remove-button, .ct-remove { width: var(--toque); height: var(--toque); display: grid; place-items: center; }
  .ver-todos { min-height: var(--toque); padding: 0 var(--space-2xs); }
  .btn, .checkout-button, .primary-button { min-height: 48px; }

  /* ---- barra do carrinho, acima da safe area ---- */
  .mobile-cart-bar {
    bottom: calc(var(--space-sm) + var(--sab));
    left: calc(var(--container-gutter) + var(--sal));
    right: calc(var(--container-gutter) + var(--sar));
    min-height: 56px; font-size: var(--text-md);
  }
  .mobile-cart-bar span { font-size: var(--text-sm); }
  .mobile-cart-bar strong { font-size: var(--text-md); }
  .storefront-layout { padding-bottom: calc(80px + var(--sab)); }
  .toast-container { bottom: calc(86px + var(--sab)); }

  /* ---- menu lateral ---- */
  .mobile-menu a { min-height: var(--toque); display: flex; align-items: center; font-size: var(--text-md); }
}

/* ---- folhas inferiores: ocupam ate 92% da tela e rolam por dentro ---- */
@media (max-width: 640px) {
  .modal-backdrop { align-items: end; padding: 0; }
  .modal-content, .product-modal {
    width: 100%; max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: var(--sab);
    display: flex; flex-direction: column;
  }
  /* Puxador: diz que a folha se fecha arrastando/tocando fora. */
  .modal-content::before {
    content: ""; position: sticky; top: 0; z-index: 4;
    display: block; width: 38px; height: 4px; margin: 8px auto 0;
    border-radius: 999px; background: rgba(20,24,15,.18); flex: 0 0 auto;
  }
  .product-modal-image, .modal-image { max-height: 32dvh; }
  .modal-action-footer-wrap, .modal-footer {
    padding: var(--space-sm) var(--space-md) calc(var(--space-md) + var(--sab));
  }
  .ct-items { max-height: none; flex: 1 1 auto; min-height: 0; }
  .ct-footer { padding-bottom: calc(var(--space-lg) + var(--sab)); }
}

/* Com o teclado aberto, a folha encolhe em vez de esconder o botao. */
@media (max-width: 640px) and (max-height: 520px) {
  .modal-content, .product-modal { max-height: 96dvh; }
  .product-modal-image, .modal-image { display: none; }
}

/* ---- tablet: duas colunas, carrinho como gaveta ---- */
@media (min-width: 720px) and (max-width: 900px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #featured-products-container .menu-grid { grid-auto-columns: 46%; }
  .hero-acoes { display: flex; }
  .primary-cta, .ghost-cta { width: auto; min-width: 200px; }
}

/* A gaveta do carrinho no celular: cabecalho fixo, lista rolando,
   resumo e acao sempre visiveis. Ela usa o mesmo item da barra lateral. */
#cart-drawer .modal-content { display: flex; flex-direction: column; }
.ct-header { flex: 0 0 auto; align-items: flex-start; }
.ct-sub { color: var(--text-secondary); font-size: var(--text-sm); }
#cart-items-list.cart-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; }
#cart-drawer .ct-coupon-block, #cart-drawer .ct-totals, #cart-drawer .ct-footer { flex: 0 0 auto; }
#cart-drawer .empty-cart { padding: var(--space-2xl) var(--space-md); }

/* Com uma folha aberta o aviso sobe para o topo: no pe da tela ele
   cobria justamente o botao de continuar do carrinho. */
body.folha-aberta .toast-container {
  bottom: auto;
  top: calc(var(--sat, 0px) + var(--space-sm));
}

/* =====================================================================
   10. AJUSTES PARA O MOCKUP DO CLIENTE
   ===================================================================== */

/* ---- hero: a frase e o heroi, nao a marca ----
   A marca ja aparece no cabecalho; repeti-la em script gigante custava
   meia tela e nao dizia nada novo. */
@media (max-width: 900px) {
  /* A marca em script ja esta no cabecalho: repeti-la custava meia tela.
     No celular quem faz papel de titulo e a frase. */
  .hero h1 { display: none; }
  .hero-sub { display: none; }
  .hero-copy > p#hero-subtitle {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-body);
    font-weight: 800; font-size: clamp(24px, 6.6vw, 32px);
    line-height: 1.18; letter-spacing: -.5px;
    color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55);
  }
  /* A foto respira: veu forte so no pe, onde o texto senta. */
  .hero-backdrop::after {
    background:
      linear-gradient(180deg, rgba(7,20,15,.55) 0%, rgba(7,20,15,.30) 34%, rgba(7,20,15,.92) 100%);
  }
  .hero-meta { margin-top: var(--space-sm); }
  .hero-meta .status-pill { order: -1; }
}

/* ---- categorias em quadradinhos, num painel branco ---- */
@media (max-width: 900px) {
  .category-sticky { background: var(--surface-sunken); border-bottom: 0; }
  .category-rail {
    height: auto; padding: var(--space-sm) 0;
    gap: var(--space-xs); align-items: stretch;
  }
  .category-rail button {
    flex-direction: column; justify-content: flex-start; gap: 3px;
    height: auto; min-height: 78px; width: 104px; flex: 0 0 104px;
    padding: var(--space-xs) 8px;
    border-radius: var(--radius-md); background: var(--surface);
    border-color: var(--border); overflow: hidden;
  }
  .cat-ico { font-size: 22px; line-height: 1; }
  .cat-nome {
    width: 100%; font-size: 11px; line-height: 1.2; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    /* Sem hifenizacao: "Hambúrgue-res" e "Acompanha-mentos" ficavam
       piores que o nome cortado. Quebra so entre palavras. */
    word-break: normal; overflow-wrap: normal; hyphens: none;
  }
  .category-rail button.active { background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary); }
  .category-rail button.active .cat-nome { color: #fff; }
}

/* ---- linha do cardapio no formato do mockup ----
   foto pequena quadrada | nome, descricao, preco | coracao em cima,
   [+] dourado pequeno embaixo. */
@media (max-width: 900px) {
  .menu-grid .produto { position: relative; align-items: stretch; }
  .produto-foto {
    width: 88px; flex-basis: 88px; aspect-ratio: 1;
    border-radius: var(--radius-sm); margin: var(--space-sm) 0 var(--space-sm) var(--space-sm);
    overflow: hidden; flex-shrink: 0;
  }
  .produto-corpo { padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); }
  .produto-rodape { justify-content: flex-start; }
  /* O coracao sai da foto e vai para o canto do card. */
  .menu-grid .produto .btn-favorito,
  .menu-lista .produto .btn-favorito {
    position: absolute; top: 4px; right: 4px;
    width: 36px; height: 36px; background: transparent; box-shadow: none;
  }
  /* [+] compacto, dourado, no canto inferior direito. */
  .menu-grid .btn-add, .menu-lista .btn-add {
    position: absolute; right: var(--space-sm); bottom: var(--space-sm);
    width: var(--toque); height: var(--toque); min-width: var(--toque);
    padding: 0; border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(242, 182, 50, .35);
  }
  .btn-add .rotulo { display: none; }
  .produto-preco { padding-right: 56px; }
}

/* Marcador onde nao ha foto: nunca uma imagem emprestada de outro
   produto, so um quadro discreto com o icone da categoria. */
/* MESMO modo de exibicao do quadro com imagem: com display:grid a caixa
   fechava 2px menor e o card sem foto ficava mais baixo que o vizinho. */
/* Sem foto: o placeholder oficial, discreto, sobre fundo creme. Mesmo
   tipo de elemento do card com foto, entao a caixa mede igual. */
.produto-foto.vazia { background: linear-gradient(180deg, #F6F1E5 0%, #EFE8D9 100%); }
.produto-foto.vazia > img { object-fit: contain; padding: 22%; opacity: .32; }
.produto-marcador { font-size: 28px; opacity: .45; }

/* No NOTEBOOK a lista compacta continua sem foto: um cardapio de bar se
   le em coluna de texto, e ali o quadro vazio so ocuparia espaco. */
@media (min-width: 901px) {
  .menu-lista .produto-foto { display: none; }
}

/* No CELULAR todas as linhas tem a mesma forma: quadro, texto, [+].
   Misturar card com foto e linha compacta na mesma categoria era o que
   deixava a secao desalinhada. */
@media (max-width: 900px) {
  .menu-lista { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-top: var(--space-xs); }
  .menu-lista .produto {
    position: relative; flex-direction: row; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 0;
  }
  .menu-lista .produto-corpo {
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-start; text-align: left;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  }
  .menu-lista .produto-nome, .menu-lista .produto-desc { grid-column: auto; text-align: left; }
  .menu-lista .produto-desc { -webkit-line-clamp: 2; }
  .menu-lista .produto-rodape {
    grid-column: auto; grid-row: auto; margin-top: auto;
    justify-content: flex-start; padding-top: var(--space-2xs);
  }
  .menu-lista .produto-preco { text-align: left; padding-right: 0; }

  /* O [+] fica flutuando no canto: o texto precisa parar antes dele,
     senao a descricao passa por baixo do botao. */
  .menu-grid .produto-corpo, .menu-lista .produto-corpo { padding-right: 60px; }
  .produto-preco { padding-right: 0; }
}

/* O espaco reservado para o [+] precisa vencer a regra de atalho
   "padding:" da lista do notebook, que tem a mesma especificidade e
   aparece antes. Um nivel a mais resolve sem !important. */
@media (max-width: 900px) {
  .menu-column .menu-grid .produto-corpo,
  .menu-column .menu-lista .produto-corpo {
    padding-right: 60px;
  }
  /* Altura reservada para duas linhas de descricao: sem isto uma linha
     de texto deixa o card 4px mais baixo que o vizinho. */
  /* Inteiros: o calc com line-height fracionario devolvia 39,2px num
     item e 40px no outro, e a linha saia 1px torta. */
  .menu-column .produto-desc { min-height: 40px; line-height: 20px; }
}

/* "a partir de" em linha com o preco no celular. Como bloco proprio ele
   somava 20px e deixava a linha mais alta que a vizinha sem rotulo. */
@media (max-width: 900px) {
  .menu-column .produto-de {
    display: inline; height: auto; line-height: inherit;
    margin-right: 5px; font-size: var(--text-xs);
  }
  .menu-column .produto-preco { display: block; min-height: 0; }
}

/* Nome com duas linhas reservadas no celular. "Smash Duplo Clássico"
   quebra em duas e deixava a linha 20px mais alta que a vizinha; com a
   altura reservada, toda linha da secao mede o mesmo. */
@media (max-width: 900px) {
  .menu-column .produto-nome {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 38px; line-height: 19px;
  }
}

/* =====================================================================
   11. ARREDONDAMENTO — pilulas onde o mockup mostra pilulas
   ===================================================================== */

/* Trilha de categorias no notebook: pilula inteira, como no mockup. */
@media (min-width: 901px) {
  .category-rail button { border-radius: var(--radius-pill); padding: 0 var(--space-md); height: 42px; }
  .search-box, .cart-chip, .endereco-chip, .conta-btn { border-radius: var(--radius-pill); }
  .search-box { padding: 0 var(--space-md); }
  .cart-chip { padding: 0 var(--space-md) 0 6px; }
  .cart-icon-wrap { border-radius: var(--radius-pill); }
}

/* Botoes de acao com canto mais macio em qualquer tamanho. */
.btn, .checkout-button, .primary-button, .primary-cta, .ghost-cta,
.btn-add, .add-button, .cart-coupon-row button, .ct-coupon-row button {
  border-radius: var(--radius-md);
}
.quantity-picker, .quantity-controls, .ct-qty { border-radius: var(--radius-md); }
.form-input, .form-select, .form-textarea, .cart-coupon-row input, .ct-coupon-row input {
  border-radius: var(--radius-sm);
}

/* Ladrilhos de icone: quadrado macio, nao caixa. */
.cart-perk-ico, .section-icon, .modifier-thumb { border-radius: var(--radius-md); }
.section-icon { border-radius: 50%; }

/* Miniaturas e fotos acompanham o cartao. */
.cart-thumb, .ct-item-img, .produto-foto { border-radius: var(--radius-sm); }
.produto, .featured-card, .info-card, .promo-banner, .banner-ed, .about-section,
.cart-shell, .cart-perks, .cart-promo, .checkout-card, .modal-content, .product-modal {
  border-radius: var(--radius-lg);
}
.menu-lista .produto { border-radius: var(--radius-md); }

/* No celular a foto da linha e um quadrado macio dentro do cartao. */
@media (max-width: 900px) {
  .produto-foto { border-radius: var(--radius-md); }
  .category-rail button { border-radius: var(--radius-lg); }
  .menu-grid .btn-add, .menu-lista .btn-add { border-radius: var(--radius-md); }
}

/* Folha inferior: so os cantos de cima arredondam. */
@media (max-width: 640px) {
  .modal-content, .product-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .map-confirm-modal-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* =====================================================================
   12. BANNERS EDITORIAIS COMO NO MOCKUP
   ===================================================================== */

.banner-ed {
  min-height: 132px;
  padding: var(--space-md) var(--space-lg);
  justify-content: center;
}
/* A seta dourada e permanente: ela e o convite. Escondida ate o hover,
   quem usa toque nunca a via. */
.banner-ed-seta {
  position: static; margin-top: var(--space-sm);
  width: 32px; height: 32px;
  opacity: 1; transform: none;
  box-shadow: 0 6px 16px rgba(242, 182, 50, .3);
}
.banner-ed:hover .banner-ed-seta { transform: translateX(3px); }
.banner-ed-titulo b { font-size: var(--text-xl); letter-spacing: .2px; }
.banner-ed-titulo span { font-size: var(--text-xl); letter-spacing: .2px; }
.banner-ed-sub {
  margin-top: var(--space-2xs); max-width: 58%;
  font-size: var(--text-sm); line-height: 1.35; color: var(--text-on-dark-soft);
}
/* O veu escurece mais a esquerda, onde o texto senta. */
.banner-ed::after {
  background: linear-gradient(90deg, rgba(8,26,18,.96) 0%, rgba(8,26,18,.86) 46%, rgba(8,26,18,.18) 100%);
}

@media (max-width: 900px) {
  .banner-ed { min-height: 112px; padding: var(--space-sm) var(--space-md); }
  .banner-ed-titulo b, .banner-ed-titulo span { font-size: var(--text-lg); }
  .banner-ed-sub { max-width: 68%; }
  .banner-ed-seta { width: 30px; height: 30px; margin-top: var(--space-xs); }
}


/* A busca do corpo existe SO no celular: no notebook ela ja esta no
   cabecalho, e as duas juntas viravam dois campos de busca na tela. */
.busca-mobile { display: none; }
@media (max-width: 900px) { .busca-mobile { display: block; } }

/* O quadro da foto mede o mesmo com ou sem imagem. Com <img> dentro ele
   dava 169px e com o marcador 167px: 2px de diferenca deixavam o card
   sem foto mais baixo que o vizinho na mesma linha. */
/* A imagem sai do fluxo: quem define a altura da caixa e so o
   aspect-ratio. Com a <img> no fluxo a caixa fechava 2px maior que a do
   marcador, e um card com foto ficava mais alto que o vizinho sem. */
.produto-foto > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.produto-foto { position: relative; }
.produto-foto.vazia { position: relative; }
.produto-marcador {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

/* O bloco do pedido gruda, e vantagens/fachada vem DEPOIS dele no DOM --
   entao passavam por cima ao rolar. Uma camada acima resolve. */
.cart-shell { z-index: 2; }
.cart-perks, .cart-promo { z-index: 1; }

/* =====================================================================
   13. LOCAL DE ENTREGA
   ---------------------------------------------------------------------
   A tela inteira e uma coluna: cabecalho, busca, mapa que ESTICA, dica,
   campos e acao. O mapa antigo tinha altura fixa de 360px dentro de um
   modal de 620px -- sobravam 260px de nada embaixo dele.
   ===================================================================== */

.map-confirm-modal-content {
  position: relative;
  width: min(560px, 100%);
  height: min(760px, calc(100dvh - var(--space-lg)));
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.local-topo {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
}
.local-topo h2 { margin: 0; font-size: var(--text-lg); }
.local-topo p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.local-voltar {
  flex: 0 0 auto; width: var(--toque, 44px); height: var(--toque, 44px);
  border: 0; background: transparent; color: var(--text-primary);
  display: grid; place-items: center; border-radius: var(--radius-sm);
  margin-left: calc(var(--space-xs) * -1);
}
.local-voltar:hover { background: var(--surface-sunken); }

/* ---- busca ---- */
.local-busca { flex: 0 0 auto; position: relative; padding: var(--space-sm) var(--space-md); }
.local-busca .search-box {
  width: 100%; height: 48px; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.local-busca .search-box input { width: 100%; color: var(--text-primary); font-size: var(--text-base); }
.local-busca .search-box input::placeholder { color: var(--text-muted); }

.local-sugestoes {
  position: absolute; left: var(--space-md); right: var(--space-md); top: calc(100% - var(--space-2xs));
  z-index: 600; margin: 0; padding: var(--space-2xs); list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: 46dvh; overflow-y: auto;
}
.local-sugestoes li { margin: 0; }
.local-sugestoes button {
  width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-sm);
  border: 0; background: transparent; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
}
.local-sugestoes button:hover { background: var(--surface-sunken); }
.local-sugestoes b { font-size: var(--text-base); font-weight: var(--weight-bold); }
.local-sugestoes span { font-size: var(--text-sm); color: var(--text-secondary); }
.local-sugestoes .vazio { padding: var(--space-sm); font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- mapa: ele e quem estica ---- */
.map-interactive-container {
  /* O mapa e o elemento principal da tela: ele fica com a folga e os
     campos abaixo e que rolam. Antes o flex o espremia a 200px. */
  flex: 1 1 auto; position: relative; min-height: 300px;
  margin: 0 var(--space-md); border-radius: var(--radius-md);
  overflow: hidden; background: #E8E3D7;
}
#confirm-leaflet-map { width: 100%; height: 100%; }

/* Pino fixo no centro. O ponto do mapa que vale e o centro, entao o pino
   aponta exatamente para ele: a ponta fica na coordenada. */
.fixed-center-pin {
  position: absolute; left: 50%; top: 50%; z-index: 520;
  transform: translate(-50%, -100%);
  pointer-events: none; display: flex; flex-direction: column; align-items: center;
}
.pin-rotulo {
  margin-bottom: 5px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--brand-primary); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-black); white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.pin-head {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  background: var(--danger); border: 2px solid #fff;
  transform: rotate(-45deg); box-shadow: var(--shadow-md);
}
.pin-shadow { width: 14px; height: 5px; margin: 3px auto 0; border-radius: 50%; background: rgba(0,0,0,.28); }

.mapa-botao {
  position: absolute; z-index: 530; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255,255,255,.96); color: var(--brand-primary);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.mapa-recentrar { right: var(--space-sm); bottom: var(--space-sm); }

/* O aviso fica ABAIXO do mapa, no fluxo. Flutuando por cima ele tapava
   a rua e os botoes de zoom -- justo quando o cliente precisa enxergar
   para ajustar o pino. */
.mapa-aviso {
  flex: 0 0 auto; margin: var(--space-xs) var(--space-md) 0;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  font-size: var(--text-sm); text-align: center; line-height: 1.35;
  background: var(--surface-sunken); color: var(--text-primary);
  border: 1px solid var(--border);
}
.mapa-aviso.ok { background: #E7F3ED; border-color: #C4DDD0; color: var(--brand-primary); font-weight: var(--weight-bold); }
.mapa-aviso.erro { background: #FDECEA; border-color: #F0C4C0; color: var(--danger); }

.local-dica {
  flex: 0 0 auto; margin: var(--space-xs) var(--space-md) 0;
  font-size: var(--text-sm); color: var(--text-secondary);
}

/* ---- corpo: endereco e campos ---- */
.local-corpo {
  flex: 0 1 auto; min-height: 0; max-height: 38dvh; overflow-y: auto;
  padding: var(--space-sm) var(--space-md) 0;
  display: grid; gap: var(--space-sm);
}

.local-endereco {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-xs);
  padding: var(--space-sm); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-sunken);
}
.local-endereco svg { color: var(--danger); margin-top: 2px; }
.local-endereco > span { display: flex; flex-direction: column; min-width: 0; }
.local-endereco small { font-size: var(--text-xs); color: var(--text-secondary); }
.local-endereco b { font-size: var(--text-base); line-height: 1.3; }
.local-endereco > span > span { font-size: var(--text-sm); color: var(--text-secondary); }
.local-endereco.carregando { opacity: .6; }

.local-campos { gap: var(--space-sm); }
.local-campos label { gap: 5px; }
.local-campos label span { font-size: var(--text-sm); font-weight: var(--weight-bold); }

.local-rodape {
  flex: 0 0 auto; padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--border); background: var(--surface);
}

@media (max-width: 640px) {
  .map-confirm-modal-content {
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0;
    padding-top: var(--sat, 0px);
  }
  .local-rodape { padding-bottom: calc(var(--space-md) + var(--sab, 0px)); }
  .map-interactive-container { min-height: 280px; }
}

/* =====================================================================
   14. MEUS PEDIDOS
   ===================================================================== */

.meus-pedidos-lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--space-xs) var(--space-lg);
  display: grid; gap: var(--space-xs);
}

.pedido-item {
  width: 100%; text-align: left; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); display: grid; gap: 4px;
  transition: border-color var(--fast);
}
.pedido-item:hover { border-color: var(--brand-primary); }

.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.pedido-topo b { font-size: var(--text-md); }

.pedido-status {
  flex: 0 0 auto; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-black);
  background: var(--surface-sunken); color: var(--text-secondary);
}
.pedido-status.andamento { background: #FDF3E2; color: var(--warning); }
.pedido-status.encerrado { background: #E7F3ED; color: var(--brand-primary); }

.pedido-meta { font-size: var(--text-sm); color: var(--text-secondary); }

@media (max-width: 640px) {
  .meus-pedidos-lista { padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* =====================================================================
   15. AREA DO CLIENTE
   ---------------------------------------------------------------------
   NO CELULAR ISTO NAO E UM MODAL.
   E uma pagina de tela cheia, opaca, com cabecalho proprio e barra de
   abas embaixo. A versao anterior era uma folha de baixo com
   max-height: 92dvh -- o conteudo cortava, as telas comecavam no meio
   da tela e a loja ficava borrada atras sem motivo.

   A altura usa 100dvh (nao 100vh): no celular a barra do navegador
   aparece e some, e vh conta a tela toda, escondendo o rodape debaixo
   dela. As safe areas do iPhone entram como padding, nunca como
   margem -- o fundo precisa ir ate a borda.

   No computador continua sendo um cartao centrado: la o espaco sobra e
   cobrir a tela inteira seria desperdicio.
   ===================================================================== */

.conta-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: var(--surface-sunken);
}
.conta-backdrop.aberta { display: block; }

/* Enquanto a conta esta aberta, a loja atras nao rola. */
body.conta-aberta { overflow: hidden; }

.conta-folha {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  /* min-height junto com inset:0 garante altura cheia mesmo quando o
     conteudo e curto -- sem isso o fundo creme parava no meio. */
  min-height: 100dvh;
}

/* ---------- cabecalho ---------- */
.conta-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: var(--space-xs);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-xs) var(--space-sm);
  padding-top: calc(var(--space-xs) + env(safe-area-inset-top));
}

.conta-titulo {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conta-voltar, .conta-fechar {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  display: grid; place-items: center;
}
.conta-voltar:hover, .conta-fechar:hover { background: var(--surface-sunken); }
.conta-fechar { grid-column: 3; display: none; }   /* so no computador */

/* ---------- corpo ---------- */
.conta-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-md) var(--space-md) 0;
  /* Espaco para a barra de abas MAIS a faixa de gestos do iPhone. Sem
     isto o ultimo botao da lista fica debaixo da barra do Safari. */
  padding-bottom: calc(var(--space-2xl) + 62px + env(safe-area-inset-bottom));
}

.conta-tela[hidden] { display: none; }

/* ---------- barra de abas ---------- */
.conta-abas-baixo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.conta-abas-baixo button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 58px;
  border: 0; background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.conta-abas-baixo button.ativa { color: var(--brand-primary); font-weight: var(--weight-bold); }
.conta-abas-baixo svg { display: block; }

/* ---------- perfil ---------- */
.conta-perfil {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.conta-avatar {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-on-dark);
  display: grid; place-items: center;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}
.conta-perfil-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conta-perfil-texto b { font-size: var(--text-xl); color: var(--text-primary); }
.conta-perfil-texto span { font-size: var(--text-base); color: var(--text-secondary); }
.conta-perfil-texto .conta-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 2px; text-decoration: none;
}

/* ---------- pedido atual ---------- */
.conta-atual {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: var(--text-on-dark);
}
.conta-atual-tag {
  font-size: var(--text-xs); letter-spacing: .09em; text-transform: uppercase;
  font-weight: var(--weight-bold); color: var(--brand-accent);
}
.conta-atual-linha {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-2xl); font-weight: var(--weight-black);
}
.conta-atual-sub { font-size: var(--text-base); color: var(--text-on-dark-soft); line-height: 1.45; }
.conta-atual .btn { margin-top: var(--space-xs); }

.btn-destaque {
  background: var(--brand-accent);
  color: var(--text-on-accent);
  border: 1px solid var(--brand-accent);
  font-weight: var(--weight-bold);
}
.btn-destaque:hover:not(:disabled) { background: var(--brand-accent-strong); }

/* ---------- menu da conta ----------
   Uma lista unica com divisorias, nao cinco cartoes empilhados. Cinco
   cartoes com sombra transformavam um menu de cinco linhas em duas
   telas de rolagem. */
.conta-menu {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.conta-menu-item {
  display: grid;
  grid-template-columns: 30px 1fr 17px;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 56px;
  padding: var(--space-xs) var(--space-md);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.conta-menu-item:last-child { border-bottom: 0; }
.conta-menu-item:hover { background: var(--surface-elevated); }
.conta-menu-icone { color: var(--brand-primary); display: grid; place-items: center; }
.conta-menu-icone svg { width: 21px; height: 21px; }
.conta-menu-texto { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.conta-menu-texto b { font-size: var(--text-md); font-weight: var(--weight-bold); }
.conta-menu-texto small { font-size: var(--text-sm); color: var(--text-secondary); }
.conta-chevron { color: var(--text-muted); }

.conta-sair {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-md);
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--danger);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.conta-sair:hover { border-color: var(--danger); }

/* ---------- acompanhamento ---------- */
.rastreio-capa {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--text-on-dark);
  margin-bottom: var(--space-md);
}
.rastreio-capa b { font-size: var(--text-xl); font-weight: var(--weight-black); }
.rastreio-capa span { font-size: var(--text-base); color: var(--text-on-dark-soft); line-height: 1.45; }
.rastreio-capa .rastreio-eta,
.rastreio-capa .rastreio-hora { color: var(--brand-accent); font-weight: var(--weight-bold); }

.rastreio-capa.entregue { background: rgba(27, 122, 82, .1); color: var(--text-primary); }
.rastreio-capa.entregue span { color: var(--text-secondary); }
.rastreio-capa.entregue b { color: var(--success); }
.rastreio-check {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--success); color: #fff;
  display: grid; place-items: center; font-size: var(--text-lg); font-weight: var(--weight-black);
  margin-bottom: var(--space-2xs);
}
.rastreio-capa.cancelado { background: rgba(179, 59, 53, .1); color: var(--text-primary); }
.rastreio-capa.cancelado b { color: var(--danger); }
.rastreio-capa.cancelado span { color: var(--text-secondary); }

/* Linha do tempo: um trilho vertical com pontos. */
.rastreio-linha {
  list-style: none; margin: 0 0 var(--space-lg); padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.rastreio-linha li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
}
.rastreio-linha li:last-child { padding-bottom: 0; }
/* O trilho e um pseudo-elemento do proprio item, entao ele acompanha a
   altura real do texto em vez de depender de uma altura fixa. */
.rastreio-linha li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 12px; top: 18px; bottom: 2px;
  width: 2px;
  background: var(--border-strong);
}
.rastreio-linha li.feito:not(:last-child)::before { background: var(--brand-primary); }

.rastreio-ponto {
  width: 14px; height: 14px; margin: 3px 0 0 6px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  background: var(--surface);
}
.rastreio-linha li.feito .rastreio-ponto {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.rastreio-linha li.agora .rastreio-ponto {
  box-shadow: 0 0 0 4px rgba(6, 63, 45, .14);
}
.rastreio-texto { display: flex; flex-direction: column; gap: 1px; }
.rastreio-texto b { font-size: var(--text-md); color: var(--text-muted); font-weight: var(--weight-medium); }
.rastreio-texto small { font-size: var(--text-sm); color: var(--text-muted); }
.rastreio-linha li.feito .rastreio-texto b { color: var(--text-primary); font-weight: var(--weight-bold); }
.rastreio-linha li.feito .rastreio-texto small { color: var(--text-secondary); }

/* ---------- listas ---------- */
.conta-lista { display: flex; flex-direction: column; gap: var(--space-sm); }

.conta-carregando {
  padding: var(--space-xl) var(--space-md);
  text-align: center; color: var(--text-muted); font-size: var(--text-base);
}

.conta-vazio {
  padding: var(--space-xl) var(--space-md);
  text-align: center; color: var(--text-secondary);
}
.conta-vazio-icone { display: inline-grid; place-items: center; color: var(--text-muted); }
.conta-vazio-icone svg { width: 36px; height: 36px; }
.conta-vazio h3 { margin: var(--space-xs) 0 var(--space-2xs); font-size: var(--text-lg); color: var(--text-primary); }
.conta-vazio p { margin: 0 0 var(--space-md); font-size: var(--text-base); line-height: 1.5; }

.conta-filtros {
  display: flex; gap: var(--space-2xs);
  overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--space-md); padding-bottom: 2px;
}
.conta-filtros::-webkit-scrollbar { display: none; }
.conta-filtros button {
  flex: 0 0 auto;
  min-height: 36px; padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap;
}
.conta-filtros button.ativa {
  background: var(--brand-primary); border-color: var(--brand-primary);
  color: var(--text-on-dark); font-weight: var(--weight-bold);
}

/* ---------- cartao de pedido ---------- */
.conta-pedido {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.conta-pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.conta-pedido-topo b { font-size: var(--text-md); font-weight: var(--weight-black); }
.conta-pedido-resumo { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: 1.45; }
.conta-pedido-rodape {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-sm); color: var(--text-muted);
}
.conta-pedido-rodape b { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-black); }
.conta-pedido-acoes {
  display: flex; gap: var(--space-xs);
  margin-top: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
/* Dois botoes lado a lado num 390px: sem reduzir o texto, "Pedir
   novamente" quebra em duas linhas e os cartoes ficam de alturas
   diferentes. */
.conta-pedido-acoes .btn {
  flex: 1 1 0; min-height: 42px;
  font-size: var(--text-sm);
  white-space: nowrap;
  padding-left: var(--space-xs); padding-right: var(--space-xs);
}

.conta-badge {
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap;
}
.conta-badge.andamento { background: rgba(242, 182, 50, .2); color: var(--warning); }
.conta-badge.entregue  { background: rgba(27, 122, 82, .12); color: var(--success); }
.conta-badge.cancelado { background: rgba(179, 59, 53, .1);  color: var(--danger); }
.conta-atual .conta-badge.andamento { background: rgba(255, 200, 61, .22); color: var(--brand-accent-strong); }

/* ---------- detalhe do pedido ---------- */
.conta-detalhe-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}
.conta-detalhe-topo b { display: block; font-size: var(--text-xl); font-weight: var(--weight-black); }
.conta-detalhe-topo small { font-size: var(--text-sm); color: var(--text-secondary); }

.conta-secao-titulo {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: var(--text-sm); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--weight-bold);
}

.conta-itens { list-style: none; margin: 0; padding: 0; }
.conta-item {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: var(--space-xs); align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}
.conta-item:last-child { border-bottom: 0; }
.conta-item-qtd { font-weight: var(--weight-bold); color: var(--brand-primary); }
.conta-item-nome { font-size: var(--text-base); color: var(--text-primary); }
.conta-item-nome small { display: block; font-size: var(--text-sm); color: var(--text-secondary); }
.conta-item-nome small.obs { font-style: italic; }
.conta-item-valor { font-weight: var(--weight-bold); white-space: nowrap; }

.conta-valores { margin: 0; }
.conta-valores div {
  display: flex; justify-content: space-between; gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  font-size: var(--text-base); color: var(--text-secondary);
}
.conta-valores dt, .conta-valores dd { margin: 0; }
.conta-valores .total {
  margin-top: var(--space-2xs); padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
  font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--text-primary);
}

.conta-endereco-texto { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-primary); }
.conta-endereco-texto small { display: block; font-size: var(--text-sm); color: var(--text-secondary); }

.conta-acoes-fim {
  display: flex; flex-direction: column; gap: var(--space-xs);
  margin-top: var(--space-lg);
}
.conta-acoes-fim .conta-ajuda { text-align: center; margin: 0; }

/* ---------- enderecos ---------- */
.conta-endereco {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.conta-endereco.padrao { border-color: var(--brand-primary); }
.conta-endereco-cabeca { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.conta-endereco-cabeca b { font-size: var(--text-md); font-weight: var(--weight-bold); }
.conta-tag-padrao {
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--brand-accent); color: var(--text-on-accent);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.conta-endereco-linha { margin: 0; font-size: var(--text-base); color: var(--text-primary); }
.conta-endereco small { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.conta-pin-ok { color: var(--success) !important; }
.conta-pin-falta { color: var(--warning) !important; }
.conta-endereco-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-sm); padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
.conta-endereco-acoes .btn { min-height: 38px; }

.conta-link {
  border: 0; background: transparent; padding: 6px 0;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px;
  min-height: 32px;
}
.conta-link:hover { color: var(--brand-primary-strong); }
.conta-link.perigo { color: var(--danger); }

/* ---------- favoritos: os cartoes do cardapio, sem invencao ---------- */
/* O cartao do cardapio no celular e uma LINHA de largura cheia (foto a
   esquerda, texto a direita). Colocar dois por linha espremia o nome e
   o preco para debaixo do botao. Aqui ele fica como no cardapio: um por
   linha no celular, varios por linha so quando ha largura. */
.conta-tela[data-tela="favoritos"] .menu-grid {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 900px) {
  .conta-tela[data-tela="favoritos"] .menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}
/* O aviso de lista vazia e filho da grade: sem isto ele ocupa uma
   coluna de 150px e o texto desce numa tira estreita no canto. */
.menu-grid > .conta-vazio,
.menu-grid > .conta-carregando { grid-column: 1 / -1; }

/* ---------- cupons ---------- */
.conta-cupom {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.conta-cupom-codigo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.conta-cupom-codigo b {
  font-size: var(--text-lg); letter-spacing: .08em;
  color: var(--brand-primary); font-weight: var(--weight-black);
}
.conta-cupom p { margin: var(--space-2xs) 0 0; font-size: var(--text-base); color: var(--text-primary); }
.conta-cupom small { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }

/* ---------- formularios ---------- */
.conta-abas {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.conta-abas button {
  border: 0; background: transparent; border-radius: var(--radius-pill);
  padding: 10px var(--space-sm);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--text-secondary); min-height: 40px;
}
.conta-abas button.ativa {
  background: var(--brand-primary); color: var(--text-on-dark); font-weight: var(--weight-bold);
}

.conta-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
/* "Meus dados" nao leva cartao: a propria pagina ja e o container.
   Um cartao branco dentro de uma pagina branca so desenha uma borda a
   mais em volta do mesmo conteudo. */
.conta-form.solta {
  background: transparent; border: 0; padding: 0;
}
.conta-form .form-label { margin-top: var(--space-xs); }
.conta-form .form-label:first-of-type { margin-top: 0; }
.conta-form .btn { margin-top: var(--space-md); }
.conta-form .opcional { color: var(--text-muted); font-weight: var(--weight-normal); }
.conta-form input:disabled { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }

.conta-ajuda { margin: 0 0 var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.conta-form .conta-ajuda { margin-top: var(--space-xs); }

.conta-erro {
  margin: var(--space-xs) 0 0;
  padding: 10px var(--space-sm);
  border-radius: var(--radius-xs);
  background: rgba(179, 59, 53, .08);
  border: 1px solid rgba(179, 59, 53, .28);
  color: var(--danger);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.conta-erro[hidden] { display: none; }

.conta-rodape-nota {
  margin: var(--space-md) 0 0; text-align: center;
  font-size: var(--text-sm); color: var(--text-muted);
}

/* ---------- confirmacao de exclusao ---------- */
.conta-confirmar {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  padding: var(--space-md);
  background: rgba(10, 13, 9, .58);
}
.conta-confirmar-cartao {
  width: min(360px, 100%);
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.conta-confirmar-cartao h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
.conta-confirmar-cartao p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); }
.conta-confirmar-acoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs);
  margin-top: var(--space-md);
}
.btn-perigo { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-perigo:hover:not(:disabled) { background: #9A322D; }

/* ---------- nome no botao do cabecalho ---------- */
.conta-btn-texto { display: none; }
.conta-btn.logado {
  width: auto; min-width: 46px; padding: 0 var(--space-sm);
  gap: var(--space-2xs); grid-auto-flow: column; align-items: center;
  border-color: var(--brand-accent);
}
.conta-btn.logado .conta-btn-texto {
  display: inline; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-base); font-weight: var(--weight-bold);
}
.mobile-nav-item.conta { color: var(--brand-accent); font-weight: var(--weight-bold); }

/* =====================================================================
   TELAS ESTREITAS — 360px e abaixo
   Em 320x568 (iPhone SE antigo) cada pixel conta: o avatar encolhe, os
   titulos descem um degrau e as acoes do pedido empilham em vez de
   espremer dois botoes de 40px lado a lado.
   ===================================================================== */
@media (max-width: 360px) {
  .conta-corpo { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .conta-avatar { width: 44px; height: 44px; font-size: var(--text-lg); }
  .conta-perfil-texto b { font-size: var(--text-lg); }
  .conta-atual-linha { font-size: var(--text-xl); }
  .conta-atual { padding: var(--space-sm); }
  .conta-pedido-acoes { flex-direction: column; }
  .conta-abas-baixo button { font-size: 10px; }

  /* A legenda de cada item quebra em duas linhas num 320px e faz o
     menu de cinco opcoes virar duas telas de rolagem. O titulo sozinho
     ja diz o que a opcao faz. */
  .conta-menu-texto small { display: none; }
  .conta-menu-item { min-height: 50px; padding: var(--space-xs) var(--space-sm); }
  .conta-menu-item { grid-template-columns: 26px 1fr 15px; gap: var(--space-xs); }
  .conta-menu-icone svg { width: 19px; height: 19px; }
  .conta-menu-texto b { font-size: var(--text-base); }
}

/* =====================================================================
   COMPUTADOR — a partir de 900px
   Volta a ser um cartao centrado sobre a loja: aqui o espaco sobra, e
   ocupar 1366px com uma lista de cinco linhas seria desperdicio.
   ===================================================================== */
@media (min-width: 900px) {
  .conta-backdrop {
    background: rgba(10, 13, 9, .68);
    backdrop-filter: blur(3px);
    padding: var(--space-lg);
  }
  .conta-backdrop.aberta { display: grid; place-items: center; }

  .conta-folha {
    position: relative;
    inset: auto;
    width: min(560px, 100%);
    min-height: 0;
    max-height: min(760px, calc(100dvh - var(--space-xl)));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dark);
    overflow: hidden;
  }

  .conta-header { padding-top: var(--space-xs); }
  .conta-fechar { display: grid; }
  .conta-corpo { padding-bottom: var(--space-lg); }
  /* A barra de abas e coisa de celular: no computador o cabecalho da
     loja continua visivel atras e ja cumpre esse papel. */
  .conta-abas-baixo { display: none; }

  body.conta-aberta { overflow: hidden; }
}


/* Convite para criar conta, na tela de pedido recebido.
   Fica entre a linha do tempo e os botoes: e onde o olho para depois de
   ler "Pedido recebido". */
.tracker-conta {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.tracker-conta[hidden] { display: none; }
.tracker-conta b { font-size: var(--text-md); color: var(--text-primary); }
.tracker-conta span { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.tracker-conta .btn { margin-top: var(--space-xs); }

/* Criar conta durante a compra.
   Fica logo abaixo do WhatsApp porque reaproveita o nome e o telefone
   que a pessoa acabou de digitar -- pedir os mesmos dados de novo numa
   tela separada era o que fazia ninguem criar conta. */
.checkout-conta {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.checkout-conta-topo {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  cursor: pointer;
}
.checkout-conta-topo input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px;
  accent-color: var(--brand-primary);
}
.checkout-conta-topo b { display: block; font-size: var(--text-md); color: var(--text-primary); }
.checkout-conta-topo small { font-size: var(--text-sm); color: var(--text-secondary); }

.checkout-conta-campos {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.checkout-conta-campos[hidden] { display: none; }
.checkout-conta-campos .opcional { color: var(--text-muted); font-weight: var(--weight-normal); }
.checkout-conta-nota {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45;
}
.checkout-conta-logado {
  margin: 0; font-size: var(--text-base); color: var(--success); font-weight: var(--weight-medium);
}
.checkout-conta-logado[hidden] { display: none; }

/* Conta obrigatoria: o bloco deixa de ser convite e vira requisito. */
.checkout-conta-exigida {
  display: flex; flex-direction: column; gap: 2px;
}
.checkout-conta-exigida[hidden] { display: none; }
.checkout-conta-exigida b { font-size: var(--text-md); color: var(--text-primary); }
.checkout-conta-exigida small { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.checkout-conta-exigida .conta-link { align-self: flex-start; margin-top: var(--space-2xs); }

/* "Esqueci minha senha" e os links centrados dos formulários da conta. */
.conta-link.centralizado {
  display: block; width: 100%; text-align: center;
  margin-top: var(--space-sm);
}
#form-esqueci .form-label:first-of-type { margin-top: var(--space-xs); }

/* ===================================================================
   FUNDO DA PAGINA — opcional por loja (website.pageBackground)
   ---------------------------------------------------------------------
   So vale com body.com-fundo, que o client.js liga quando a loja tem
   imagem cadastrada. Sem ela, nada aqui se aplica.

   A imagem fica numa camada fixa propria e nao em
   background-attachment: fixed, que o Safari do iPhone ignora e que
   trava a rolagem em Android fraco.
   =================================================================== */

body.com-fundo { background: #062A14; }
body.com-fundo::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-image: var(--page-bg, none);
  background-size: cover; background-position: center;
  pointer-events: none;
}

/* A trilha de categorias deixa de ser faixa creme e flutua no verde. */
body.com-fundo .category-sticky {
  background: rgba(6, 30, 18, .72);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Texto que antes ficava sobre o creme agora fica sobre o verde. */
/* A sombra segura a leitura quando o titulo passa sobre uma folha clara. */
body.com-fundo .section-heading h2 { color: var(--text-on-dark); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
body.com-fundo .section-heading p { color: var(--text-on-dark); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
body.com-fundo .ver-todos { color: var(--brand-accent); }
body.com-fundo .ver-todos:hover { color: var(--brand-accent-strong); }
body.com-fundo .featured-section,
body.com-fundo .menu-section { border-bottom-color: rgba(255, 255, 255, .12); }
body.com-fundo .no-results h2 { color: var(--text-on-dark); }
body.com-fundo .no-results p { color: var(--text-on-dark-soft); }

/* Cabecalho translucido com blur para as folhas aparecerem nos cantos superiores */
body.com-fundo .site-header {
  background: rgba(6, 26, 16, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.com-fundo .hero {
  background: transparent;
}

body.com-fundo .hero-content {
  min-height: 200px;
  padding: var(--space-sm) 0 var(--space-md);
}

body.com-fundo .hero-backdrop::before {
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

body.com-fundo .hero-backdrop::after {
  background: linear-gradient(90deg,
    rgba(6, 30, 20, 0.98) 0%,
    rgba(6, 30, 20, 0.92) 34%,
    rgba(6, 30, 20, 0.35) 54%,
    rgba(6, 30, 20, 0.0) 70%);
}

body.com-fundo .hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
}

body.com-fundo .hero-copy > p {
  font-size: 14px;
  margin: 3px 0 8px;
  max-width: 500px;
}

body.com-fundo .hero-meta {
  gap: 6px 14px;
  font-size: 12.5px;
}

body.com-fundo .hero-acoes {
  margin-top: 10px;
  gap: 8px;
}

body.com-fundo .primary-cta,
body.com-fundo .ghost-cta {
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
}

/* A imagem hero-mockup-banner ja traz a assinatura caligrafica embutida */
body.com-fundo .hero-assinatura {
  display: none;
}

/* Oculta o cartao de fachada duplicado embaixo do carrinho para a folhagem respirar */
body.com-fundo .cart-promo {
  display: none !important;
}

/* Oculta o eyebrow redundante quando a tag BRASIL esta ativa */
body.com-fundo .hero-copy .eyebrow {
  display: none;
}

/* Celular: a foto larga cortada em pe perderia as folhas das laterais.
   Ancorada no topo e mais estreita, as folhas de cima emolduram a tela
   e o resto fica no verde liso, sem brigar com o cardapio. */
@media (max-width: 900px) {
  body.com-fundo::before {
    background-size: 185% auto;
    background-position: center top;
    background-repeat: no-repeat;
    /* A foto acaba em ~96vw de altura; sem o degrade fica um corte reto. */
    -webkit-mask-image: linear-gradient(to bottom, #000 50vw, transparent 96vw);
    mask-image: linear-gradient(to bottom, #000 50vw, transparent 96vw);
  }
}

/* ---------- senha provisoria: "Crie sua nova senha" ----------
   Bloqueia a vitrine inteira ate o cliente criar a propria senha (a loja
   gerou uma provisoria de 6 numeros). Sem fechar: so salvar ou sair. */
.troca-senha {
  position: fixed; inset: 0; z-index: 700;
  display: grid; place-items: center;
  padding: var(--space-md);
  background: rgba(10, 13, 9, .72);
  overflow-y: auto;
}
.troca-senha-cartao {
  width: min(400px, 100%);
  box-shadow: var(--shadow-lg);
}
.troca-senha-cartao h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
.troca-senha-acoes {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-xs);
}
body.troca-senha-aberta { overflow: hidden; }

/* ---------- e-mail da conta (ADR-0017) ----------
   Convite no topo da conta ("adicione / confirme seu e-mail"). A folha do
   codigo reaproveita .troca-senha (conta-email.js). */
.conta-aviso-email {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap;
  margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-elevated);
  font-size: var(--text-base); color: var(--text-primary);
}
.conta-aviso-email[hidden] { display: none; }

/* ===================================================================
   CHECKOUT PELO PAYLOAD PUBLICO (Fase 3, ADR-0013)
   Metodos do canal, instrucoes da loja e mensagem da entrega.
   =================================================================== */
.pagamento-lista { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.pagamento-opcao {
  display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-secondary);
}
.pagamento-opcao.ativa { border: 1.5px solid var(--brand-primary); }
.pagamento-opcao:focus-within { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.pagamento-aviso { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--danger, #B42318); font-weight: 600; }
.pagamento-instrucoes,
.checkout-mensagem-entrega {
  margin: 0 0 var(--space-md); padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-secondary); border-left: 3px solid var(--brand-primary);
  font-size: var(--text-sm); color: var(--text-secondary); white-space: pre-line;
}

/* Loja de vitrine (estado EM_BREVE): aviso no topo, sem "Adicionar" e sem carrinho. */
.aviso-em-breve {
  display: flex; flex-direction: column; gap: 4px; margin: 16px 0; padding: 14px 16px;
  border-radius: 12px; border: 1px solid #F2C14E; background: #FFF1CC; color: #4D3200;
}
.aviso-em-breve strong { font-size: 1.05rem; }
.status-pill.em-breve { background: #F2A100; color: #2B1C00; }
body.loja-em-breve [data-quick-add],
body.loja-em-breve #hero-pickup-cta,
body.loja-em-breve #modal-add-btn { display: none !important; }