:root {
  --primary: #ea1d2c;
  --primary-dark: #c91523;
  --primary-soft: #fff0f1;
  --text: #18181b;
  --muted: #71717a;
  --border: #ececef;
  --surface: #ffffff;
  --background: #fafafa;
  --shadow: 0 18px 55px rgba(var(--shadow-rgb), .08);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;

  /* Altura do cabecalho fixo. A barra de busca gruda logo abaixo
     dela, e o valor muda no mesmo ponto em que o topo encolhe. */
  --altura-cabecalho: 88px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* SEM ZOOM NO APP (02/10/2026, pedido do Johnny). O viewport tem
   maximum-scale=1 (o iPhone deixa de dar zoom ao tocar num campo);
   aqui, o duplo toque em qualquer area para de ampliar. */
html, body { touch-action: manipulation; }

body {
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.page-container {
  width: min(100%, 1540px);
  padding-inline: 28px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid rgba(236,236,239,.9);
  backdrop-filter: blur(18px);
}

.header-grid {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -1px;
  white-space: nowrap;
}

.brand > span:nth-child(2) > span { color: var(--primary); }

.brand small {
  display: block;
  margin-left: -4px;
  align-self: flex-end;
  padding-bottom: 4px;
  font-size: .48rem;
  letter-spacing: 2px;
}

.brand-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  color: white;
  background: var(--primary);
  font-size: 1.2rem;
}

/* As regras de `.location-button` sairam junto com o botao "Entregar
   em", que deixou o cabecalho em 02/09/2026. Nao ha mais nenhum
   elemento com essa classe. */

/* A barra do desktop passou a levar tambem os itens da conta, e com
   cinco deles o vao de 42px estourava a largura numa tela de 1366.

   Caixa alta por CSS, e nao no PHP: mudar o texto na origem mudaria
   junto o menu de tres barras, onde o nome escrito por extenso e o
   certo. */
.main-nav {
  justify-content: center;
  gap: 26px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a { position: relative; padding: 32px 0; }

/* ENTRAR E ACAO, E NAO SECAO

   Os outros itens da barra levam a lugares do site; este comeca uma
   tarefa. Como pilula contornada ele se separa da fileira sem gritar —
   e sem a barrinha embaixo, que ali significa "voce esta aqui".

   `align-self: center` porque os vizinhos tem 32px de padding vertical
   para empurrar a barrinha ate o pe do cabecalho; a pilula nao tem, e
   sem isto ela esticaria a altura toda. */
.main-nav a.nav-entrar {
  align-self: center;
  padding: 9px 18px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  transition: background .18s ease, color .18s ease;
}

.main-nav a.nav-entrar::after { content: none; }

.main-nav a.nav-entrar:hover {
  background: var(--primary);
  color: #fff;
}

.main-nav a.nav-entrar i { margin-right: 5px; }

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 0;
  height: 2px;
  border-radius: 4px;
  background: var(--primary);
  transform: translateX(-50%);
  transition: .2s;
}

.main-nav a:hover,
.main-nav a.active { color: var(--primary); }

.main-nav a:hover::after,
.main-nav a.active::after { width: 30px; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.icon-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.3rem;
  transition: .2s;
}

.icon-button:hover { background: #f2f2f3; color: var(--primary); }

.cart-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  color: white;
  background: var(--primary);
  border: 2px solid white;
  border-radius: 20px;
  font-size: .62rem;
  font-weight: 700;
}

/* Sem respiro embaixo: a barra de busca ja traz o proprio (14px), e
   somar os dois abria uma faixa vazia entre a abertura e o cardapio. */
.hero-section { padding: 18px 0 0; overflow: hidden; }

.hero-slide {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
}

/* ABERTA AGORA — no alto do quadro, do lado oposto ao texto.
   `z-index` acima do overlay e da foto; no carrossel ele fica fora do
   `carousel-inner`, entao nao anda com o slide. */
.hero-selo {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;

  /* Cor chapada, e nao vidro: o selo cai sobre a foto do produto, que
     muda a cada promocao. Fundo translucido herda o que estiver atras e
     fica claro numa foto e escuro na seguinte — verde e vermelho solidos
     saem iguais em qualquer uma. */
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(5, 5, 7, .3);
}

.hero-selo i { font-size: .82rem; }

/* Os dois tons sao mais escuros que o verde e o vermelho da marca: o
   texto e branco, pequeno e em caixa alta, e nesse tamanho o contraste
   precisa de folga para ser lido na tela do celular, no sol. */
.hero-selo-aberto  { background: #0f8043; }
.hero-selo-fechado { background: #c0392f; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,5,7,.94) 0%, rgba(5,5,7,.73) 40%, rgba(5,5,7,.08) 76%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(600px, 62%);
  padding: 62px 70px;
  color: white;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
  font-size: .75rem;
  font-weight: 700;
}

.hero-kicker i { color: var(--accent); }

.hero-content h1,
.hero-content h2 {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 4.4vw, 4.65rem);
  font-weight: 800;
  letter-spacing: -4px;
  line-height: .96;
}

.hero-content p {
  max-width: 470px;
  margin: 0 0 28px;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.65;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 23px;
  border: 0;
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button);
  font-weight: 700;
  transition: .2s;
}

.hero-cta:hover { background: var(--button-dark); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   BUSCA E CATEGORIAS QUE ACOMPANHAM A ROLAGEM

   Sao os dois controles do cardapio. Rolando a lista eles saiam da tela,
   e trocar de categoria exigia voltar ao topo — num cardapio longo, isso
   e o suficiente para a pessoa desistir de procurar.

   `--altura-cabecalho` existe porque o topo tambem e `sticky`: sem saber
   a altura dele, a barra grudaria embaixo dele ou por cima. O `- 1px`
   faz as duas se sobreporem por um fio, senao um resto de cartao
   apareceria na fresta entre elas.
--------------------------------------------------------------------- */

.discovery-section {
  padding: 0 0 50px;
  scroll-margin-top: calc(var(--altura-cabecalho) + 10px);
}

.filtro-fixo {
  position: sticky;
  top: calc(var(--altura-cabecalho) - 1px);
  z-index: 1030;

  /* Estende o fundo alem do texto: o cartao tem sombra e sobe 5px no
     hover, e sem a folga ele apareceria pelas beiradas da barra. */
  margin-inline: -14px;
  padding: 14px 14px 14px;

  border-radius: 0 0 20px 20px;
  background: var(--background);
  transition: box-shadow .25s ease, background .25s ease;
}

/* O `padding-bottom` da barra e a margem zero aqui trabalham juntos: a
   rolagem horizontal dos chips precisa do espaco DENTRO da barra, senao
   a sombra do chip ativo e cortada pela borda dela. */
.filtro-fixo .category-scroller { margin: 14px 0 0; padding-bottom: 0; }

/* GRUDADA: ganha profundidade e deixa o conteudo passar borrado por
   baixo, como o cabecalho ja faz. Solta, e invisivel — sombra parada no
   meio da pagina, sem nada por baixo, so pareceria sujeira. */
.filtro-fixo.fixado {
  background: rgba(250, 250, 250, .88);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px rgba(var(--shadow-rgb), .1);
}

/* Encolhe um pouco ao grudar: a barra fica com a altura de uma ferramenta
   e devolve espaco para o cardapio, que e o que a pessoa veio ver. */
.filtro-fixo .search-box { transition: height .25s ease; }

.filtro-fixo.fixado .search-box { height: 52px; }

.filtro-fixo.fixado .category-scroller { margin-top: 10px; }

/* O cabecalho encolhe abaixo de 992px, e a barra precisa acompanhar,
   senao gruda no lugar errado. */
@media (max-width: 991.98px) {
  .filtro-fixo { margin-inline: -10px; padding: 10px 10px 12px; }
  .filtro-fixo.fixado .search-box { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .filtro-fixo,
  .filtro-fixo .search-box { transition: none; }
}

.search-box {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 20px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: white;
  box-shadow: 0 10px 35px rgba(var(--shadow-rgb), .045);
}

.search-box > i { color: #60606a; font-size: 1.2rem; }

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.search-box button {
  display: none;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.search-box.has-value button { display: inline-flex; }

.category-scroller {
  display: flex;
  gap: 12px;
  margin: 24px 0 34px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-scroller::-webkit-scrollbar { display: none; }

.category-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 21px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: white;
  font-size: .85rem;
  font-weight: 700;
  transition: .2s;
}

.category-chip:hover,
.category-chip.active {
  border-color: var(--button);
  color: var(--button-text);
  background: var(--button);
  box-shadow: 0 8px 22px rgba(var(--button-rgb), .2);
}

/* Setas da barra de categorias (15/10/2026). So existem com mouse: no
   toque a barra ja rola com o dedo. Aparecem do lado em que ainda ha chip
   escondido (classes posta pelo app.js). A margem do .category-scroller
   atravessa a faixa, entao a faixa tem a altura dos chips e o 50% centra. */
.category-faixa { position: relative; }

.category-seta { display: none; }

@media (hover: hover) and (pointer: fine) {
  .category-seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: white;
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .2s, color .2s, border-color .2s;
  }
  .category-seta.esquerda { left: 0; }
  .category-seta.direita { right: 0; }
  .category-seta:hover { border-color: var(--button); color: var(--button); }

  .category-faixa.tem-esquerda .category-seta.esquerda,
  .category-faixa.tem-direita .category-seta.direita {
    opacity: 1;
    pointer-events: auto;
  }
}

/* `.section-heading` saiu junto com o titulo "Cardápio" da vitrine: era
   o unico lugar que a usava. */

.product-card {
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .035);
  transition: .25s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(var(--shadow-rgb), .1);
}

/* O cartao abre a tela do produto, entao precisa aparecer para quem
   chega nele pelo teclado. */
.product-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.product-image-wrap {
  position: relative;
  height: 225px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .35s;
}

.product-card:hover .product-image { transform: scale(1.05); }

.product-label {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: .66rem;
  font-weight: 700;
}

.product-body { padding: 17px; }

.product-body h3 {
  min-height: 43px;
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.product-description {
  min-height: 42px;
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 11px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 13px;
  color: #f5a900;
  font-size: .76rem;
  font-weight: 700;
}

.rating small { color: var(--muted); font-weight: 500; }

.product-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.price-wrap small {
  display: block;
  color: #a1a1aa;
  font-size: .67rem;
  text-decoration: line-through;
}

.price-wrap strong { font-size: 1.05rem; }

.add-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--button-text);
  background: var(--button);
  font-size: 1.2rem;
  transition: .2s;
}

.add-button:hover { background: var(--button-dark); transform: scale(1.06); }

.empty-state { padding: 70px 20px; text-align: center; }

.empty-state div { font-size: 3rem; }

.empty-state h3 { margin: 15px 0 6px; font-weight: 800; }

.empty-state p { color: var(--muted); }

.promo-section { padding: 4px 0 50px; }

.promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 28px;
  /* Sem uso hoje: a secao de promocao saiu do HTML junto com o cupom
     inventado do template. Os tokens ficam para que, se ela voltar, volte
     na cor da loja — e nao no vermelho do template dentro de uma loja
     azul, que era o que estava cravado aqui. */
  color: var(--primary-text);
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  box-shadow: 0 22px 55px rgba(var(--primary-rgb), .22);
}

.promo-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .6px;
}

.promo-card h2 { margin: 0 0 7px; font-weight: 800; letter-spacing: -1px; }

.promo-card p { margin: 0; color: rgba(255,255,255,.85); }

.promo-card button {
  flex: 0 0 auto;
  padding: 14px 20px;
  border: 0;
  border-radius: 13px;
  color: var(--primary);
  background: white;
  font-weight: 700;
}

/* `.about-section` saiu junto com o bloco que a vitrine tinha no fim do
   cardapio: a informacao institucional vive na pagina Sobre, que a mostra
   inteira. `.feature-card` fica — e ela que desenha os cartoes de la. */

/* O icone ao LADO do texto, e nao acima dele: o cartao fica mais baixo
   e o titulo comeca na mesma linha do simbolo, que e o que faz os tres
   se lerem como uma lista de informacoes e nao como tres banners. */
/* O ICONE E POSICIONADO, E NAO UMA COLUNA DE GRID
   O cartao tem o simbolo e DOIS ou mais irmaos soltos — `h3` e um ou
   mais `p`, dependendo do que a loja preencheu. Como coluna de grid, o
   terceiro filho cai para a linha de baixo e o titulo fica sozinho ao
   lado do icone. Tirando o icone do fluxo, o texto todo se alinha pelo
   `padding-left` e o numero de paragrafos deixa de importar. */
.feature-card {
  position: relative;
  height: 100%;
  min-height: 90px;
  padding: 22px 24px 22px 86px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
}

/* FUNDO NA COR DA LOJA, SIMBOLO EM BRANCO
   `--primary-text` em vez de `white` cravado: e o par de contraste que
   o tema ja calcula pela luminancia da primaria. Com a cor escura de
   agora ele DA branco, que e o pedido; numa loja de primaria clara — um
   amarelo — ele vira escuro sozinho, em vez de sumir. */
.feature-card > span {
  position: absolute;
  top: 22px;
  left: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: 1.22rem;
}

.feature-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }

.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }

.site-footer { padding: 52px 0 22px; border-top: 1px solid var(--border); background: white; }

.footer-identidade { margin-bottom: 26px; }

.footer-brand { margin-bottom: 0; align-items: center; }

/* Nome em cima, frase embaixo, as duas comecando no mesmo ponto: o logo
   e um item flex ao lado, entao o alinhamento nao depende da largura
   dele. */
.footer-marca { display: grid; gap: 2px; }

/* CLASSE PROPRIA, E NAO `small`
   `.brand small` ja tem dono: e o texto decorativo do logo no topo, e
   abaixo de 992px ele vira `display: none`. Um `<small>` aqui dentro
   herdava isso e a frase da loja sumia no celular — que e onde se pede.

   `.brand` tambem e caixa de titulo: 1.42rem, peso 700, `letter-spacing`
   negativo e `white-space: nowrap`. A frase desfaz os quatro — o nowrap
   principalmente, senao a descricao longa vira uma linha unica
   estourando a largura do rodape. */
.footer-marca .footer-slogan {
  display: block;
  max-width: 460px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: normal;
}

/* `auto-fit` em vez de duas colunas fixas: a loja que so preencheu o
   horario fica com um cartao ocupando a linha, em vez de um cartao e um
   buraco do lado. */
.footer-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

/* NO DESKTOP, CENTRALIZADO E DO TAMANHO DO CONTEUDO

   Os cartoes do rodape eram tres — horario, endereco e contato. Sobrou
   o de contato, e `auto-fit` fez com ele o que faz com um item so:
   esticou de ponta a ponta. Um bloco da largura da tela para dizer
   "Falar no WhatsApp" pesa mais do que a acao vale, e a identidade da
   loja ficava encostada na margem esquerda, longe dele.

   So a partir de 992px: no celular a largura inteira e o certo, e o
   alinhamento a esquerda tambem — a leitura ali e uma coluna so.

   `max-content` no lugar de `1fr` e o que impede o cartao de crescer
   sozinho; `justify-content: center` centraliza o que sobrar da grade,
   sendo um cartao ou tres. */
@media (min-width: 992px) {

  .footer-identidade { text-align: center; }

  .footer-brand { justify-content: center; }

  .footer-marca { justify-items: center; }

  .footer-marca .footer-slogan { margin-inline: auto; }

  .footer-cartoes {
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(258px, max-content));
  }

}

.footer-cartao {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.footer-icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: 1.15rem;
}

/* O WhatsApp e marca de terceiro: mantem o verde dele em qualquer loja,
   porque e por ele que o icone e reconhecido antes de alguem ler o
   titulo do cartao. */
.footer-icone.zap { color: #ffffff; background: #25d366; }

.footer-cartao h4 { margin: 0 0 5px; font-size: .92rem; font-weight: 700; }

.footer-cartao p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }

.footer-cartao a { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }

/* UM SELO POR FAIXA, UM POR LINHA
   Em texto corrido os grupos se emendam e a quebra cai no meio de
   "Quarta: fechado", que passa a parecer parte da faixa anterior. Cada
   um na sua linha, o olho encontra o dia sem ler a frase inteira.

   `grid` com `justify-items: start` para o selo ter a largura do
   conteudo: em `block` ele esticaria ate a borda do cartao e viraria
   uma tarja. */
.horario-selos {
  display: grid;
  justify-items: start;
  gap: 5px;
  margin-top: 2px;
}

/* O mesmo selo serve ao horario e as formas de pagamento: sao listas
   curtas de fatos sobre a loja, e desenha-las diferente faria parecer
   que uma delas e outra coisa. */
.horario-selo,
.pagamento-selo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--primary-soft);
  font-size: .76rem;
  line-height: 1.35;
}

.horario-selo-dias { color: var(--muted); }

.horario-selo b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fechado nao e horario: sai do tom da loja e perde o destaque do
   numero, senao o dia em que ela NAO abre chama mais atencao que os
   outros seis. */
.horario-selo.fechado { background: #f1f1f4; }

.horario-selo.fechado b { color: var(--muted); font-weight: 600; }

/* O horario vai um por linha porque cada selo carrega dias E hora, e
   dois deles lado a lado ja passam da largura do cartao. Forma de
   pagamento e um rotulo curto: em coluna sobraria uma tira de espaco
   vazio a direita, entao estes fluem e quebram quando precisam. */
.pagamento-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pagamento-selo { color: var(--text); font-weight: 600; }

.footer-cartao a:hover { color: var(--primary); }

.footer-redes {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.footer-redes > span { color: var(--muted); font-size: .8rem; }

.footer-redes-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.rede {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 1.05rem;
  transition: .2s;
}

.rede:hover { color: white; transform: translateY(-2px); }

.rede:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Cada rede na cor da propria marca, e nao na da loja: o icone redondo
   sem rotulo so funciona porque a pessoa reconhece o rosa do Instagram e
   o azul do Facebook antes de identificar o desenho. */
.rede-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.rede-facebook  { background: #1877f2; }
.rede-tiktok    { background: #010101; }
.rede-youtube   { background: #ff0000; }

.footer-bottom {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
  font-size: .74rem;
}

.cart-offcanvas { width: min(440px, 100%) !important; }

.offcanvas-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.offcanvas-header h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }

.offcanvas-header p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }

.cart-offcanvas .offcanvas-body { display: flex; flex-direction: column; padding: 20px 24px 24px; }

.cart-empty { padding: 70px 18px; text-align: center; }

.cart-empty span {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 2.1rem;
}

.cart-empty h3 { font-size: 1rem; font-weight: 800; }

.cart-empty p { color: var(--muted); font-size: .8rem; }

.cart-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item img { width: 76px; height: 72px; border-radius: 13px; object-fit: cover; }

.cart-item h4 { margin: 0 0 5px; font-size: .83rem; font-weight: 700; }

.cart-item-price { color: var(--primary); font-size: .78rem; font-weight: 700; }

.cart-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.qty-control button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: .9rem;
  line-height: 1;
  transition: background .16s, color .16s, transform .16s;
}

.qty-control button:hover { background: var(--primary-dark); }

.qty-control button:active { transform: scale(.92); }

/* O foco por teclado precisa aparecer: sao os unicos controles do
   carrinho que mudam o valor do pedido. */
.qty-control button:focus-visible,
.remove-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.qty-control b {
  min-width: 26px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   REMOVER
   Fica apagado ate a intencao aparecer: e o unico botao do carrinho que
   nao da para desfazer. Vermelho fixo, e nao a cor da loja — em loja
   vermelha o excluir se confundiria com o botao de somar.
--------------------------------------------------------------------- */

.remove-item {
  align-self: start;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #a1a1aa;
  background: transparent;
  font-size: 1rem;
  transition: color .16s, background .16s;
}

.remove-item:hover { color: #d92d20; background: #fef3f2; }

.remove-item:active { transform: scale(.94); }

.coupon-box { margin-top: auto; padding-top: 18px; }

.coupon-input-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.coupon-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; }

.coupon-input-wrap button {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--text);
  font-size: .74rem;
  font-weight: 700;
}

#couponMessage { display: block; min-height: 18px; margin-top: 6px; color: var(--muted); }

.cart-summary { padding-top: 17px; }

.cart-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: .82rem;
}

.cart-summary > div strong { color: var(--text); }

.cart-summary .discount-row strong { color: #169c52; }

.cart-summary .cart-total {
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

#checkoutButton {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  padding: 14px;
  border: 0;
  border-radius: 13px;
  color: var(--button-text);
  background: var(--button);
  font-weight: 700;
  transition: background .2s;
}

#checkoutButton:hover { background: var(--button-dark); }




.mobile-location,
.mobile-login {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  text-align: left;
}

.mobile-location { color: var(--text); background: #f5f5f6; }

.mobile-location > i { color: var(--primary); }

.mobile-location span { display: grid; }

.mobile-location small { color: var(--muted); font-size: .68rem; }

.mobile-location strong { font-size: .78rem; }

.mobile-login {
  justify-content: center;
  margin-top: 24px;
  color: white;
  background: var(--primary);
  font-weight: 700;
}

.mobile-cart-bar {
  position: fixed;
  z-index: 1035;
  right: 14px;
  bottom: 14px;
  left: 14px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: 17px;
  color: var(--button-text);
  background: var(--button);
  box-shadow: 0 14px 40px rgba(var(--button-rgb), .34);
}

.mobile-cart-icon { position: relative; font-size: 1.2rem; }

.mobile-cart-icon b {
  position: absolute;
  top: -10px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding-inline: 3px;
  border-radius: 20px;
  color: var(--button);
  background: white;
  font-size: .58rem;
}

.mobile-cart-bar > span:nth-child(2) { flex: 1; display: grid; text-align: left; }

.mobile-cart-bar strong { font-size: .8rem; }

.mobile-cart-bar small { color: rgba(255,255,255,.75); font-size: .66rem; }

.mobile-cart-bar > span:last-child { font-size: .82rem; font-weight: 800; }

@media (max-width: 1199.98px) {
  .header-grid { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 991.98px) {
  .page-container { padding-inline: 18px; }
  :root { --altura-cabecalho: 72px; }
  .header-grid { min-height: 72px; gap: 12px; }
  .brand small { display: none; }
  .hero-slide { min-height: 410px; }
  .hero-content { width: 70%; padding: 50px 48px; }
  .hero-content h1, .hero-content h2 { letter-spacing: -3px; }
  .product-image-wrap { height: 205px; }
}

@media (max-width: 767.98px) {
  body { padding-bottom: 78px; }
  .page-container { padding-inline: 14px; }
  .brand { font-size: 1.16rem; }
  .brand-icon { width: 37px; height: 37px; border-radius: 11px; }
  .brand-logo { height: 37px; max-width: 128px; }
  .header-actions .icon-button { width: 40px; height: 40px; }
  .hero-section { padding-top: 12px; }
  .hero-slide { min-height: 420px; border-radius: 25px; }

  /* Menor no celular: o selo diz uma coisa so, e no quadro estreito ele
     competia de igual para igual com o nome da promoção. */
  .hero-selo { top: 14px; right: 14px; padding: 6px 12px; font-size: .64rem; }
  .hero-selo i { font-size: .72rem; }
  .hero-overlay {
    background: linear-gradient(0deg, rgba(5,5,7,.94) 0%, rgba(5,5,7,.55) 58%, rgba(5,5,7,.08) 100%);
  }
  .hero-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 28px 24px 42px;
  }
  .hero-content h1,
  .hero-content h2 {
    margin-bottom: 12px;
    font-size: 2.15rem;
    letter-spacing: -2px;
  }
  /* A DESCRICAO FICA, MAS EM DUAS LINHAS
     O template escondia este paragrafo abaixo de 768px. Ele e o que diz
     o que a pizza tem dentro — no celular, que e onde quase todo pedido
     acontece, era justamente onde o cliente ficava sem saber.

     O corte em duas linhas nao e enfeite: a descricao do produto aceita
     mil caracteres, e o slide tem altura fixa. Sem limite, o texto
     empurra o preco e o botao para fora do quadro. */
  .hero-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
    font-size: .88rem;
    line-height: 1.5;
  }
  .hero-kicker {
    margin-bottom: 14px;
    padding: 8px 11px;
    font-size: .65rem;
  }
  .hero-cta { padding: 13px 18px; font-size: .78rem; }
  .search-box { height: 55px; border-radius: 16px; }
  .search-box input { font-size: .82rem; }
  .category-scroller { margin: 18px 0 28px; gap: 8px; }
  .category-chip { padding: 10px 14px; font-size: .72rem; }
  .product-image-wrap { height: 180px; }
  .product-body { padding: 14px; }
  .product-body h3 { min-height: 38px; font-size: .9rem; }
  .product-description { min-height: 37px; font-size: .71rem; }
  .promo-card { align-items: flex-start; flex-direction: column; padding: 28px; }
  .promo-card h2 { font-size: 1.4rem; }
  .mobile-cart-bar.show { display: flex !important; }
}

@media (max-width: 575.98px) {
  .hero-slide { min-height: 390px; }
  .product-image-wrap { height: 165px; }
  .product-body h3 { font-size: .84rem; }
  .rating { font-size: .69rem; }
  .add-button { width: 40px; height: 40px; }
  .price-wrap strong { font-size: .95rem; }
}

/* =====================================================================
   IDENTIDADE POR LOJA
   =====================================================================
   O template nasceu com uma marca so — "FastFood Delivery", vermelho,
   Inter, e tres fotos de banco de imagem. Aqui ele passa a servir
   qualquer loja: os tokens sao redefinidos no `<style>` do `index.php`, e
   o resto desta folha continua valendo sem alteracao.

   QUATRO PAPEIS, E NAO UMA COR SO
   `--primary`  a cor da marca: abertura, links, indicadores.
   `--button`   a cor em que se CLICA. Separada porque loja de fundo
                azul-marinho com botao azul-marinho tem um botao que some
                dentro do proprio fundo — foi o que aconteceu no primeiro
                teste com azul.
   `--accent`   chama atencao: raio do selo, rotulo de promocao.
   `--shadow-rgb` a cor das sombras. Preta embaixo de cartao sobre fundo
                colorido suja a cor; no tom da marca, assenta.

   OS TOKENS DE TEXTO
   `--primary-text`, `--button-text` e `--accent-text` existem porque as
   tres cores viram FUNDO em algum lugar: com vermelho, texto branco
   resolve; com amarelo, o branco some. `loja_cor_texto()` decide pelo
   contraste real (luminancia WCAG), e as regras usam o token em vez de
   `#fff` fixo.

   OS TOKENS `-rgb`
   `--shadow-rgb` e `--button-rgb` guardam o trio `r, g, b` — e nao a cor
   pronta — porque a mesma cor aparece com opacidades diferentes ao longo
   da folha: `rgba(var(--shadow-rgb), .035)` no cartao parado, `.1` no
   levantado. A loja escolhe o tom; a opacidade e decisao de layout e
   fica aqui.
   ===================================================================== */

:root {
  --primary-text: #ffffff;
  --primary-rgb: 234, 29, 44;
  --accent: #ffd126;
  --accent-text: #18181b;
  --button: var(--primary);
  --button-dark: var(--primary-dark);
  --button-text: #ffffff;
  --button-rgb: 234, 29, 44;
  --shadow-rgb: 24, 24, 27;
}

.cart-badge,
.brand-icon { color: var(--primary-text); }

/* ---------------------------------------------------------------------
   MARCA
   O logo e enviado pela loja e vem em qualquer proporcao. `contain`
   preserva o desenho: `cover` cortaria a marca de quem mandou um logo
   horizontal, que e a maioria.

   Quem manda a ALTURA e o cabecalho; a largura acompanha o desenho. Numa
   caixa quadrada, um logo 280x40 — deitado, como quase todo logo de
   loja — encolhia para 46x6 e sumia. O teto de largura existe para o
   logo nao empurrar o resto do cabecalho.
--------------------------------------------------------------------- */

.brand-logo {
  width: auto;
  height: 46px;
  max-width: 200px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}

.brand-nome {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.1;
}

/* Herda a cor do rodape, que e claro nesta folha. Fixar branco aqui
   sumia com o nome da loja em cima do fundo branco. */
.footer-brand .brand-nome { color: inherit; }

/* ---------------------------------------------------------------------
   ABERTURA
   Sem foto de banco de imagem: o fundo e a propria cor da loja. Foto
   generica de hamburguer numa loja de espetinho anuncia o que ela nao
   vende, e foto de verdade e coisa que so o dono pode subir.
--------------------------------------------------------------------- */

.hero-loja {
  background-image: linear-gradient(120deg,
    var(--primary-dark) 0%,
    var(--primary) 55%,
    var(--primary-dark) 100%);
}

.hero-loja .hero-overlay {
  background: linear-gradient(90deg, rgba(5,5,7,.62) 0%, rgba(5,5,7,.34) 52%, rgba(5,5,7,.05) 100%);
}

.hero-loja .hero-content { width: min(680px, 74%); }

/* ---------------------------------------------------------------------
   PROMOCOES NA ABERTURA
   A foto e a do proprio produto, e nao de banco de imagem — vem em
   qualquer luz e com qualquer fundo. Dai a mascara: texto branco sobre
   uma foto clara some. O degrade escurece o lado onde o texto cai e vai
   abrindo para a foto do outro, em vez de um veu chapado que apagaria a
   comida junto com o problema.
--------------------------------------------------------------------- */

.hero-carousel .carousel-inner { border-radius: var(--radius-xl); }

.hero-promo {
  cursor: pointer;
  background: #0b0b0e;
}

.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.hero-promo:hover .hero-foto { transform: scale(1.03); }

/* Duas camadas: a horizontal segura o texto, a vertical segura as
   bolinhas e a borda de baixo, onde a foto costuma ser mais clara. */
.hero-promo .hero-overlay {
  background:
    linear-gradient(90deg, rgba(5,5,7,.95) 0%, rgba(5,5,7,.78) 34%, rgba(5,5,7,.34) 64%, rgba(5,5,7,.05) 100%),
    linear-gradient(0deg,  rgba(5,5,7,.55) 0%, rgba(5,5,7,0) 42%);
}

.hero-promo:focus-visible {
  outline: 3px solid var(--button);
  outline-offset: 3px;
}

.hero-preco {
  display: block;
  margin: -4px 0 26px;
  color: white;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.hero-preco small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Quem clica e o slide inteiro. Um <button> de verdade aqui dentro
   daria dois alvos para a mesma acao — e um deles roubaria o clique
   do outro no celular. */
.hero-promo .hero-cta { pointer-events: none; }

.hero-seta {
  top: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, .92);
  opacity: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  transform: translateY(-50%);
}

.carousel-control-prev.hero-seta { left: 18px; }
.carousel-control-next.hero-seta { right: 18px; }

.hero-seta:hover { color: var(--primary); background: white; opacity: 1; }
.hero-seta i { font-size: 1.05rem; font-weight: 800; }

.hero-bolinhas { margin-bottom: 18px; }

.hero-bolinhas [data-bs-target] {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: white;
  opacity: .6;
  transition: width .25s;
}

.hero-bolinhas [data-bs-target].active {
  width: 26px;
  border-radius: 20px;
  background: var(--button);
  opacity: 1;
}

/* No celular a coluna de texto ocupa quase a largura toda: a mascara
   deixa de ser lateral e passa a subir do rodape, senao o fim da frase
   cai fora da parte escura. */
@media (max-width: 767.98px) {
  .hero-promo .hero-overlay {
    background:
      linear-gradient(90deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.6) 58%, rgba(5,5,7,.28) 100%),
      linear-gradient(0deg,  rgba(5,5,7,.78) 0%, rgba(5,5,7,0) 60%);
  }

  .hero-preco { margin-bottom: 18px; font-size: 1.3rem; }

  /* As setas somem: em 375px elas caem em cima do rotulo e do nome do
     produto, e o dedo ja passa o slide arrastando. As bolinhas ficam,
     porque sao elas que dizem quantas promocoes existem. */
  .hero-seta { display: none; }
  .hero-bolinhas { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------------
   PRECO
   "A partir de" so aparece em produto com mais de um tamanho.
--------------------------------------------------------------------- */

.preco-prefixo {
  display: block;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   TELA DO PRODUTO
   Dentro do SweetAlert. Fundo claro: a vitrine e clara, e um modal
   escuro no meio dela pareceria outro site.

   A leitura e de cima para baixo — o que o item E (foto, categoria,
   descricao), depois o que ha para DECIDIR (tamanho, escolhas,
   acrescimos) e por fim o que custa e o botao. Preco e botao ficam
   colados no rodape: com muitos acrescimos, o "Adicionar" ficaria a uma
   rolagem de distancia justo na hora de decidir.
--------------------------------------------------------------------- */

/* O padding de baixo vem do `Swal.fire`, em estilo inline: a
   biblioteca escreve `padding` no elemento e venceria esta folha. */
.pv-popup {
  border-radius: var(--radius-lg);
  text-align: left;
}

.pv-title {
  padding: 20px 66px 12px 22px;
  color: var(--text);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.8px;
  text-align: left;
}

.pv-container {
  margin: 0;
  padding: 0 22px;
  overflow: visible;
  color: var(--text);
  font-size: .92rem;
  text-align: left;
}

/* So o corpo rola: o rodape com preco e botao fica fora da rolagem. */
.pv-corpo {
  max-height: 52vh;
  padding-right: 4px;
  overflow-y: auto;
}

/* --------------------- o aviso de adicionado -------------------- */

/* Entra deslizando do canto e sai apagando. Vive fora do SweetAlert:
   ele aparece justo quando a tela do produto se fecha, e a biblioteca
   mantem um dialogo vivo por vez. */
.aviso-loja {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 36px));
  padding: 13px 18px;
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button);
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(var(--button-rgb), .34);
  opacity: 0;
  transform: translateX(22px) scale(.96);
  transition: opacity .3s, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}

.aviso-loja.aparece {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.aviso-loja i { font-size: 1.1rem; }

@media (max-width: 575.98px) {
  .aviso-loja { top: 12px; right: 12px; left: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-loja { transition: opacity .2s; transform: none; }
  .aviso-loja.aparece { transform: none; }
}

/* ------------------------- o fechamento ------------------------- */

/* O X do SweetAlert e um caractere solto no canto. Aqui ele vira
   alvo redondo de 40px — tamanho que o dedo acerta — e gira ao
   receber o ponteiro ou o foco, para dizer que responde. */
.pv-popup .swal2-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: #f1f1f4;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s;
}

.pv-popup .swal2-close:hover,
.pv-popup .swal2-close:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
  transform: rotate(90deg);
}

/* Afunda no clique: o toque no celular nao tem hover para responder. */
.pv-popup .swal2-close:active { transform: rotate(90deg) scale(.9); }

.pv-popup .swal2-close:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* O SweetAlert repinta o X no foco; sem isto ele volta ao vermelho
   padrao da biblioteca no meio da animacao. */
.pv-popup .swal2-close:focus { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .pv-popup .swal2-close { transition: background .2s, color .2s; }
  .pv-popup .swal2-close:hover,
  .pv-popup .swal2-close:focus-visible,
  .pv-popup .swal2-close:active { transform: none; }
}

.pv-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.pv-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.pv-etiqueta.promo {
  border-color: transparent;
  color: var(--accent-text);
  background: var(--accent);
}

/* A moldura ocupa a largura inteira e fixa a altura; a foto aparece
   INTEIRA dentro dela. Cortar para preencher decapitava a lata, e a
   foto do lojista vem em qualquer proporcao.

   `multiply` existe porque quase toda foto de catalogo vem com fundo
   BRANCO recortado: sobre o cinza da moldura, esse branco desaparece
   e sobra so o produto. Cor nenhuma escurece de verdade — o cinza e
   claro demais para isso. */
.pv-figura {
  display: grid;
  place-items: center;
  width: 100%;
  height: 215px;
  border-radius: var(--radius-md);
  background: #f4f4f6;
  overflow: hidden;
}

/* A FOTO PREENCHE A MOLDURA
   `cover` recorta o que sobra para nao deixar faixa vazia dos lados —
   e a mesma regra do cartao do cardapio, entao a foto abre igual ao
   que o cliente clicou. O preco disso e conhecido: foto muito alta ou
   muito larga perde as pontas, e quem enquadra e o lojista.

   Sem `padding` na moldura: sobra de 12px e area nao ocupada.

   O `mix-blend-mode: multiply` saiu junto. Ele existia para o fundo
   branco das fotos de catalogo sumir dentro do cinza da moldura;
   preenchendo a area toda nao ha moldura visivel para sumir dentro, e
   o que ele faria agora e escurecer a foto inteira contra o cinza.

   `min-*: 0` fica: item de grid nasce com `min-height: auto`, que vence
   o `height` e deixa a foto estourar a moldura pelo tamanho natural do
   arquivo. */
.pv-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

.pv-descricao {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

/* ----------------------------- grupos ---------------------------- */

.pv-grupo {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pv-grupo > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  background: #f7f7f9;
}

.pv-grupo h4 {
  margin: 0;
  font-size: .96rem;
  font-weight: 700;
}

.pv-grupo header small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .76rem;
}

.pv-selo {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 7px;
  color: white;
  background: #6b7180;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pv-selo.pequeno { padding: 3px 7px; font-size: .6rem; }

/* ---------------------------- opcoes ----------------------------- */

.pv-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 15px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.pv-opcao:first-of-type { border-top: 0; }

.pv-opcao-texto { flex: 1; min-width: 0; }

/* A FOTO DA OPÇÃO
   Pequena e quadrada: ela ajuda a reconhecer a borda, o molho, o corte —
   e não é o produto. Grande demais competiria com a foto do item lá em
   cima, que é a que vende. Não encolhe (`flex: 0 0 auto`) para o rótulo
   longo não achatá-la. */
/* A LINHA DO ACRESCIMO NO CELULAR
   Ela carrega mais coisa que a da escolha: foto, nome, preco e o
   contador de quantidade. Com a foto entrando, a coluna do texto ficava
   com uns 60px e o nome quebrava no meio da palavra — "Bord a de catu
   piry". Aqui o preco e o contador descem para uma segunda linha, e o
   nome recupera a largura inteira. */
.pv-opcao-passo { flex-wrap: wrap; row-gap: 8px; }

.pv-opcao-passo .pv-opcao-texto { flex: 1 1 55%; }

/* Empurra o contador para a direita quando ele desce sozinho. */
.pv-opcao-passo .pv-passo { margin-left: auto; }

@media (min-width: 560px) {
  /* Com espaco de sobra tudo cabe na mesma linha, como nas escolhas. */
  .pv-opcao-passo { flex-wrap: nowrap; }
}

.pv-opcao-foto {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  background: #f1f2f5;
}

/* A OBSERVAÇÃO
   Sem borda superior própria: o bloco já vem depois de tudo o que tem
   preço, e mais uma linha ali viraria ruído.

   O CORPO PRECISA DO MESMO RESPIRO DO CABEÇALHO
   Os outros grupos são feitos de linhas `.pv-opcao`, que trazem o
   próprio padding. Aqui o textarea e a nota são filhos diretos de
   `.pv-grupo`, que só tem padding no `header` — então os dois
   encostavam na borda do bloco.

   O padding fica no corpo, e não em margens nos filhos: `width: auto`
   não estica um `<textarea>` — ele cai na largura de `cols`, e o campo
   encolhia para um terço do bloco. */
.pv-observacao-corpo {
  padding: 14px 15px;
}

.pv-observacao textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
  transition: .2s;
}

.pv-observacao textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.pv-observacao-nota {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}

/* A observação no carrinho: é o único texto ali que a pessoa escreveu, e
   conferir se foi anotado direito é metade da razão de ela ter escrito.
   Por isso ganha fundo, e não vira mais uma linha cinza. */
.cart-item-observacao {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  padding: 5px 9px;
  border-radius: 8px;
  color: #6b5200;
  background: #fff8e1;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
}

.cart-item-observacao i { margin-top: 1px; }

.pv-opcao-texto strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
}

.pv-opcao-texto small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .78rem;
}

.pv-opcao-valor {
  flex-shrink: 0;
  color: var(--primary);
  font-size: .88rem;
  font-weight: 700;
}

.pv-opcao input[type="radio"],
.pv-opcao input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

/* No teto de sabores o que sobra apaga, em vez de aceitar o clique e
   recusar depois. O limite se ve antes de esbarrar nele. */
.pv-opcao.travada {
  opacity: .42;
  cursor: not-allowed;
}

.pv-sabores-vazio {
  margin: 0;
  padding: 14px 15px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .8rem;
}

/* Acrescimo nao e sim/nao: pode ir dobro de bacon. */
.pv-passo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.pv-passo button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--primary);
  background: transparent;
  font-size: .9rem;
}

.pv-passo button:hover { background: var(--primary-soft); }

.pv-passo b {
  min-width: 22px;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
}

.pv-passo.ativo { border-color: var(--primary); }

/* ---------------------------- rodape ----------------------------- */

.pv-fixo {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.pv-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pv-preco strong {
  display: block;
  color: var(--primary);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
}

.pv-preco small {
  display: block;
  color: var(--muted);
  font-size: .76rem;
}

/* O valor vem do servidor: enquanto a resposta nao chega, o numero
   antigo continua na tela, apagado, em vez de piscar zerado. */
.pv-preco strong.carregando { opacity: .45; }

/* O contador virou campo digitavel em 02/09/2026. Ele precisa parecer
   o mesmo numero de antes — sem moldura, sem fundo, sem as setinhas do
   `number` —, e so revelar que aceita teclado quando recebe o foco. */
.pv-quantidade input {
  min-width: 34px;
  width: 34px;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.pv-quantidade input:hover { border-color: rgba(0, 0, 0, .12); }

.pv-quantidade input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.pv-aviso {
  margin: 10px 0 0;
  color: #c0392f;
  font-size: .84rem;
  font-weight: 600;
}

.pv-aviso:empty { display: none; }

.pv-acoes {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.pv-adicionar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  border: 0;
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button);
  font-size: .98rem;
  font-weight: 700;
  transition: .2s;
}

.pv-adicionar:hover { background: var(--button-dark); }

.pv-favoritar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-size: .92rem;
  font-weight: 700;
  transition: .2s;
}

.pv-favoritar:hover { border-color: var(--primary); color: var(--primary); }

.pv-favoritar.ativo { border-color: var(--primary); color: var(--primary); }

@media (max-width: 575.98px) {
  .pv-title { padding: 16px 58px 10px 16px; font-size: 1.15rem; }
  .pv-container { padding-inline: 16px; }
  .pv-corpo { max-height: 46vh; }
  .pv-figura { height: 172px; }
  .pv-preco strong { font-size: 1.42rem; }
}

/* ---------------------------------------------------------------------
   CARRINHO
   O tamanho escolhido precisa aparecer na linha: "Coca Cola" duas vezes,
   uma lata e uma garrafa, sao dois itens que so o rotulo distingue.
--------------------------------------------------------------------- */

.cart-item-variacao {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  margin-bottom: 2px;
}

/* O que o cliente montou fica na linha, junto do tamanho: acrescimo
   que so aparece na tela do produto vira pedido errado na cozinha. */
.cart-item-complementos {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

/* O sabor nao e complemento: e o que o cliente vai comer. Fica acima e
   com o peso do texto normal, para nao se perder entre a borda e o
   bacon na hora de conferir o carrinho. */
.cart-item-sabores {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------
   O SLOGAN DA LOJA NAO SE CORTA
   O paragrafo do slide agora e limitado a duas linhas no celular, porque
   no slide de promocao ele carrega a descricao do produto, que aceita
   mil caracteres. O slogan da loja e uma linha curta escrita para ser
   lida inteira: cortar por um limite que existe para outro conteudo
   seria perder o fim de uma frase que ja cabia.
--------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .hero-loja .hero-content p {
    display: block;
    margin-bottom: 20px;
    font-size: .92rem;
  }
}

/* ---------------------------------------------------------------------
   MENU DA LOJA
   Um menu so, para toda largura. O botao de tres barras deixou de ser
   coisa de celular: a area do cliente precisa de um lugar fixo, e
   repetir esses itens na barra de cima encheria o cabecalho de coisa
   que so o dono da conta usa.

   Cada item e um cartao com alvo grande: no celular, o dedo acerta a
   linha inteira, e nao so a palavra.
--------------------------------------------------------------------- */

.menu-loja {
  width: min(400px, 92vw) !important;
  background: #f7f7f9;
}

.menu-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 14px;
}

.menu-topo .brand { font-size: 1.2rem; }

.menu-fechar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--text);
  background: white;
  font-size: 1.05rem;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s;
}

.menu-fechar:hover,
.menu-fechar:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
  transform: rotate(90deg);
}

.menu-fechar:active { transform: rotate(90deg) scale(.92); }

.menu-corpo {
  padding: 6px 20px 26px;
  overflow-y: auto;
}

/* ----------------------------- a conta ---------------------------- */

.menu-conta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--primary-soft) 0%, rgba(255, 255, 255, .6) 100%);
}

.menu-conta-icone {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--primary-rgb), .28);
  border-radius: 50%;
  color: var(--primary);
  background: rgba(255, 255, 255, .55);
  font-size: 1.5rem;
}

.menu-conta-texto { flex: 1; min-width: 0; }

.menu-conta-texto strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.3px;
}

.menu-conta-texto small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.menu-conta-seta {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: 1.05rem;
  transition: transform .2s;
}

.menu-conta:hover .menu-conta-seta { transform: translateX(3px); }

/* ----------------------------- os itens --------------------------- */

.menu-lista { display: grid; gap: 10px; }

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px 13px 13px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: white;
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .04);
  text-align: left;
  transition: .2s;
}

.menu-item:hover { border-color: var(--border); transform: translateX(2px); }

.menu-icone {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.1rem;
}

/* A area do cliente e outro assunto: o tom mais neutro separa dela o
   que e navegacao da loja, sem inventar uma segunda cor de marca. */
.menu-icone.conta { color: #5b5f70; background: #eef0f4; }
.menu-icone.sair  { color: #b04a52; background: #fbeced; }

.menu-rotulo { flex: 1; font-size: 1rem; font-weight: 750; }

.menu-seta { color: #b9bdc9; font-size: .95rem; }

/* O item aceso preenche o icone e acende a barra da esquerda: sem a
   barra, o unico sinal seria a cor — e cor sozinha nao chega a quem
   nao a distingue. */
.menu-item.ativo {
  background: linear-gradient(120deg, var(--primary-soft) 0%, rgba(255, 255, 255, .75) 100%);
}

.menu-item.ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--primary);
}

.menu-item.ativo .menu-icone {
  color: var(--primary-text);
  background: var(--primary);
}

.menu-item.ativo .menu-rotulo,
.menu-item.ativo .menu-seta { color: var(--primary); }

.menu-secao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
  color: #9aa0b0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.menu-secao::before,
.menu-secao::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.menu-sair { margin-top: 22px; }
.menu-sair .menu-item { color: #b04a52; }

/* ---------------------------------------------------------------------
   PAGINAS DA CONTA
   Entrar, criar conta, meus pedidos, minha conta, cupons e sobre.
   Formulario em coluna unica: sao poucos campos, e duas colunas so
   fariam o olho voltar para o comeco a cada linha.
--------------------------------------------------------------------- */

.pagina-conta { padding: 34px 0 60px; }

.cartao-conta {
  width: min(100%, 470px);
  margin: 0 auto;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow);
}

.pagina-conta.larga .container-fluid { max-width: 1100px; }

.cartao-conta h1,
.conta-cabecalho h1 {
  margin: 0 0 6px;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.cartao-conta-sub,
.conta-cabecalho p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

.conta-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.conta-cabecalho p { margin: 0; }

/* BOTAO, E NAO LINK SOLTO
   E a unica saida destas paginas para o cardapio, e como texto cinza de
   .85rem ele competia em peso com a descricao ao lado — dava para ler a
   pagina inteira sem reparar nele. Em pilula, com borda e fundo proprio,
   ele vira alvo: o dedo acerta e o olho acha. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 9px 17px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  transition: .2s;
}

.voltar:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .12);
}

/* A seta anda para tras no hover: o movimento diz para onde o clique
   leva antes de a pessoa ler o rotulo. */
.voltar i { transition: transform .2s; }

.voltar:hover i { transform: translateX(-3px); }

.voltar:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .voltar,
  .voltar i { transition: none; }
  .voltar:hover i { transform: none; }
}

.conta-cabecalho .voltar { margin: 0; flex-shrink: 0; }

/* `.sobre-texto` saiu com o paragrafo de descricao da pagina Sobre: era
   a unica regra dele, e o slogan no cabecalho ja tem estilo proprio. */

/* ------------------- mapa e horario da loja ---------------------- */

.sobre-bloco { margin-top: 38px; }

.sobre-bloco h2 {
  margin: 0 0 6px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.5px;
}

.sobre-bloco-apoio {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .88rem;
}

.sobre-bloco-apoio i { color: var(--primary); }

/* `aspect-ratio` no lugar do truque do padding-bottom: o iframe do
   Google nao tem altura propria, e sem uma o quadro nasce com 150px de
   altura padrao do navegador. */
.sobre-mapa {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 7;
  background: #ecedf0;
}

.sobre-mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .sobre-mapa { aspect-ratio: 4 / 3; }
}

.tabela-horarios {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
}

.tabela-horarios th,
.tabela-horarios td {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  font-size: .88rem;
  text-align: left;
}

.tabela-horarios tr:first-child th,
.tabela-horarios tr:first-child td { border-top: 0; }

.tabela-horarios th {
  font-weight: 600;
  white-space: nowrap;
}

.tabela-horarios td {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* O dia de hoje e o unico que o cliente quer de verdade; o resto e
   contexto. */
.tabela-horarios .hoje { background: var(--primary-soft); }

.tabela-horarios .hoje th,
.tabela-horarios .hoje td { color: var(--text); font-weight: 700; }

.selo-hoje {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

.tabela-horarios .fechado td { font-style: italic; }

/* ----------------------------- campos ----------------------------- */

.campo { display: block; margin-bottom: 16px; }

.campo > span {
  display: block;
  margin-bottom: 7px;
  font-size: .85rem;
  font-weight: 750;
}

.campo input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  color: var(--text);
  font-size: .95rem;
}

.campo input:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.campo-ajuda {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
}

.campo-erro {
  display: block;
  margin-top: 6px;
  color: #c0392f;
  font-size: .78rem;
  font-weight: 600;
}

/* O aceite dos termos na pagina de cadastro. Mesma grade de duas
   colunas do fechamento: o texto quebra em duas linhas no celular e nao
   pode correr por baixo da caixa. */
.campo-aceite {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  margin: 4px 0 18px;
  cursor: pointer;
}

.campo-aceite input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}

.campo-aceite > span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.campo-aceite .campo-erro { grid-column: 2; margin-top: 2px; }

.campo-aceite-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* As quebras que o lojista digitou sao a unica formatacao que ele tem. */
.termos-texto {
  color: var(--text);
  font-size: .9rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.campo-grupo {
  margin: 26px 0 20px;
  padding: 18px 16px 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.campo-grupo legend {
  padding: 0 8px;
  float: none;
  width: auto;
  font-size: .85rem;
  font-weight: 700;
}

.campo-grupo .campo-ajuda { margin: -4px 0 14px; }

/* ----------------------------- botoes ----------------------------- */

.botao-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button);
  font-size: .98rem;
  font-weight: 700;
  transition: .2s;
}

.botao-principal:hover { background: var(--button-dark); color: var(--button-text); }

.botao-vazado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-size: .92rem;
  font-weight: 700;
  transition: .2s;
}

.botao-vazado:hover { border-color: #e6c9cc; color: #b04a52; }

.sair-linha { margin-top: 14px; }

/* ------------------ excluir a propria conta ------------------------ */

/* A CHAMADA NAO E UM BOTAO
   Ela mora embaixo de "Sair da conta", em texto e no tom apagado. Quem
   procura, acha; quem esta ali para trocar o telefone nao esbarra. Um
   terceiro botao vermelho no fim do formulario seria um convite ao
   toque errado numa acao que nao tem volta. */
.excluir-chamada {
  margin: 18px 0 0;
  text-align: center;
}

.excluir-chamada a {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.excluir-chamada a:hover { color: #c0392f; }

/* O QUE SAI E O QUE FICA
   As duas listas dividem o mesmo cartao de proposito: separadas em
   blocos distantes, a segunda pareceria letra miuda — e ela e
   justamente a parte que costuma surpreender depois. */
.excluir-resumo {
  margin: 4px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fafafa;
}

.excluir-resumo h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #c0392f;
  font-size: .92rem;
  font-weight: 800;
}

/* O que fica nao e perda: o verde separa as duas leituras sem precisar
   de um rotulo dizendo "atencao, esta parte e diferente". */
.excluir-resumo h2.fica { margin-top: 18px; color: #1c7c4a; }

.excluir-resumo ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.65;
}

.excluir-nota {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Dinheiro que se perde nao pode sair no mesmo cinza do resto. */
.excluir-nota.atencao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #e6d6ae;
  border-radius: 12px;
  color: #7a6535;
  background: #fffbf0;
  font-weight: 600;
}

/* O BOTAO QUE APAGA E VERMELHO, E SO ELE
   Mesmo vermelho do "Fechado" e do pedido cancelado: nesta tela ele e a
   unica coisa irreversivel, e precisa parecer isso. */
.botao-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 15px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #c0392f;
  font-size: .98rem;
  font-weight: 700;
  transition: .2s;
}

.botao-perigo:hover { background: #a02f27; color: #fff; }

.botao-perigo:disabled { opacity: .5; cursor: not-allowed; }

.botao-perigo:focus-visible {
  outline: 2px solid #c0392f;
  outline-offset: 2px;
}

/* A saida tem de ser tao facil quanto a entrada. */
.excluir-desistir {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
}

.excluir-desistir:hover { color: var(--primary); }

/* DEPOIS
   Sem o cartao a pessoa ficaria sem saber se deu certo — e nao ha mais
   conta para onde voltar e conferir. */
.conta-excluida {
  padding: 12px 0 4px;
  text-align: center;
}

.conta-excluida i {
  color: #1c7c4a;
  font-size: 2.4rem;
}

.conta-excluida h1 { margin: 12px 0 8px; }

.conta-excluida p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}


.cartao-conta-rodape {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}

.cartao-conta-rodape a { color: var(--primary); font-weight: 700; }

/* ----------------------------- avisos ----------------------------- */

.aviso-erro,
.aviso-ok {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border-radius: 13px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}

.aviso-erro { color: #96322a; background: #fdecea; }
.aviso-ok   { color: #1c6b4f; background: #e8f7f0; }

/* SO APARECE NO DESENVOLVIMENTO. Listrado de proposito: e um atalho que
   nao pode ser confundido com parte da loja se algum dia escapar. */
.aviso-dev {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px dashed #b58900;
  border-radius: 13px;
  color: #6b5200;
  background: #fffbe8;
  font-size: .84rem;
  line-height: 1.5;
}

.aviso-dev a { color: #6b5200; font-weight: 700; word-break: break-all; }

.campo-esqueci {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
}

.campo-esqueci:hover { color: var(--primary); }

/* --------------------------- meus pedidos ------------------------- */

.lista-pedidos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 16px;
}

.pedido-cartao {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .04);
}

.pedido-cartao header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* O codigo na segunda cor do tema: ele e a etiqueta do pedido — o que
   a pessoa dita no WhatsApp — e no preto do texto sumia entre a data e
   o total. `--accent` e a cor que a loja escolheu para destacar. */
.pedido-cartao header strong {
  color: var(--accent);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* Um selo so, sem cor por situacao: o catalogo de status e da loja, e
   pintar cada um por conta propria diria uma coisa que o sistema nao
   afirma — verde de "deu certo" num status que so quer dizer "saiu". */
.pedido-selo {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  color: #4c5162;
  background: #eef0f4;
  font-size: .72rem;
  font-weight: 700;
}

.pedido-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .85rem;
}

.pedido-linha i { color: #9aa0b0; }

.pedido-cartao footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.pedido-cartao footer span { color: var(--muted); font-size: .85rem; }
.pedido-cartao footer strong { color: var(--primary); font-size: 1.15rem; font-weight: 800; }

/* ---------------------- a cor de quem avisa ----------------------- */

/* Verde quando deu certo, vermelho quando nao deu — e a cor sai do
   ICONE que cada `Swal.fire` ja informa, nao de uma classe repetida a
   mao em toda chamada. O SweetAlert marca a janela com
   `swal2-icon-success`, `swal2-icon-error` ou `swal2-icon-warning`, e a
   folha le dali. Assim o aviso que alguem escrever amanha ja nasce com
   a cor certa, sem depender de lembrar do `customClass`.

   `warning` fica no vermelho porque no app ele e o rosto da FALHA: e
   com ele que chega "Nao consegui registrar". Ja `question` e `info`
   ficam de fora de proposito: pergunta e recado nao sao resultado, e
   pintar tudo de verde gastaria o verde. Esses ficam com a cor da
   LOJA — sem regra nenhuma o SweetAlert usaria o roxo dele, que nao e
   de marca nenhuma e destoa da tela inteira.

   Os dois tons ja estao na tela dizendo as mesmas duas coisas: o verde
   do selo "Aberto agora" e o vermelho do "Fechado" e do pedido
   cancelado. Duas coisas que dizem "deu certo" nao podem dizer em tons
   diferentes.

   `!important` porque o SweetAlert grava a cor como estilo inline
   quando a chamada passa `confirmButtonColor`, e inline vence folha. */

/* O piso: sem icone de resultado, o botao e da loja. */
.swal2-styled.swal2-confirm {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.swal2-icon-success .swal2-styled.swal2-confirm,
.swal2-styled.swal-confirmar-ok {
  background-color: #0f8043 !important;
  color: #fff !important;
}

.swal2-icon-success .swal2-styled.swal2-confirm:focus,
.swal2-styled.swal-confirmar-ok:focus {
  box-shadow: 0 0 0 3px rgba(15, 128, 67, .35) !important;
}

.swal2-icon-error   .swal2-styled.swal2-confirm,
.swal2-icon-warning .swal2-styled.swal2-confirm {
  background-color: #c0392f !important;
  color: #fff !important;
}

.swal2-icon-error   .swal2-styled.swal2-confirm:focus,
.swal2-icon-warning .swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 47, .35) !important;
}

/* O "nao" nunca disputa atencao com o "sim": cinza, e so. Deixa-lo
   colorido faria a pessoa ler duas vezes para achar qual e qual. */
.swal2-styled.swal2-cancel {
  background-color: #6e7480 !important;
  color: #fff !important;
}

.swal2-styled.swal2-cancel:focus {
  box-shadow: 0 0 0 3px rgba(110, 116, 128, .35) !important;
}

/* ---------------------- o pagamento pendente ---------------------- */

/* Amarelo de aviso, e não o vermelho de erro: nada deu errado — falta
   uma ação. E não a cor da loja, porque isso o faria parecer só mais um
   bloco do layout, quando é o único que pede algo da pessoa. */
.acompanhar-pagar {
  margin: 4px 0 24px;
  padding: 18px;
  border: 1px solid #f0d9a0;
  border-radius: 16px;
  background: #fffbf0;
}

.acompanhar-pagar h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #6b5200;
  font-size: 1rem;
  font-weight: 800;
}

.acompanhar-pagar > p {
  margin: 0 0 16px;
  color: #7a6535;
  font-size: .86rem;
  line-height: 1.5;
}

.pagar-rotulo {
  display: block;
  margin-bottom: 6px;
  color: #6b5200;
  font-size: .78rem;
  font-weight: 700;
}

/* O código do PIX é longo e não tem espaços: sem `word-break` ele
   estoura a largura da tela em vez de quebrar. Monoespaçada porque o que
   se faz com ele é conferir caractere por caractere quando algo falha. */
.pagar-codigo {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #e6d6ae;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  line-height: 1.5;
  word-break: break-all;
  resize: none;
}

.acompanhar-pagar .botao-principal,
.acompanhar-pagar .botao-secundario {
  width: 100%;
  margin-top: 0;
}

.acompanhar-pagar .botao-secundario { margin-top: 10px; background: #fff; }

.pagar-expira {
  margin: 12px 0 0;
  color: #7a6535;
  font-size: .78rem;
  line-height: 1.45;
}

/* ------------------------ cartao na loja -------------------------- */

.cartao-form { margin-top: 12px; }

/* O CONTEINER DO IFRAME
   Quem desenha o campo por dentro e o Mercado Pago; o que fica aqui e a
   moldura. A altura e fixa porque o iframe nao tem altura propria — sem
   isso o campo nasce com zero pixel e a pessoa ve um retangulo vazio. */
.cartao-campo {
  height: 46px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid #e6d6ae;
  border-radius: 12px;
  background: #fff;
}

.cartao-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cartao-entrada {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid #e6d6ae;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .92rem;
}

.cartao-entrada:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.cartao-aviso:empty { display: none; }

.cartao-aviso {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 11px;
  color: #8a2a24;
  background: #fdecea;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Quem digita numero de cartao quer saber para onde ele vai. A frase
   fica embaixo do botao, onde a duvida aparece. */
.cartao-selo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  color: #7a6535;
  font-size: .76rem;
  line-height: 1.45;
}

/* --------------------- acompanhar o pedido ------------------------ */

.acompanhar-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 26px;
}

.acompanhar-codigo {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.acompanhar-topo h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
.acompanhar-topo p  { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* O prazo e o segundo dado que a pessoa procura, depois do status. Ele
   nao encolhe: sem `flex: 0 0 auto` o titulo o espremia ate quebrar
   "45 min" em duas linhas. */
.acompanhar-prazo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: .84rem;
  font-weight: 700;
}

/*
 * A LINHA DO TEMPO
 *
 * Cinco etapas numa tela de celular so cabem deitadas, com o rotulo
 * embaixo da marca. O traco que liga as marcas e um `::before` de cada
 * etapa, e nao uma barra atras de tudo: assim ele se pinta sozinho
 * conforme a etapa e cumprida, sem nenhuma conta de largura.
 */
.acompanhar-etapas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.etapa {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

/* O traco liga esta etapa a anterior. A primeira nao tem de onde vir. */
.etapa + .etapa::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
}

.etapa.cumprida::before { background: var(--primary); }

.etapa-marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #9aa0b0;
  background: #eef0f4;
  font-size: .95rem;
  transition: .25s;
}

.etapa.cumprida .etapa-marca {
  color: var(--primary-text);
  background: var(--primary);
}

/* A etapa ATUAL ganha um halo: e o jeito de dizer "e aqui que esta
   acontecendo" sem escrever mais uma frase na tela. */
.etapa.agora .etapa-marca {
  box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .16);
}

.etapa.cancelada { justify-items: start; }
.etapa.cancelada .etapa-marca { color: #fff; background: #c0392f; }

/* O MOTIVO NO LUGAR DA MARCA
   Com motivo gravado, a linha do tempo do pedido cancelado deixa de ser
   um ponto e vira um recado. Ocupa a largura toda: o texto vem de campo
   livre digitado no painel, e uma coluna estreita quebraria "não temos
   entregador disponível hoje" em cinco linhas. */
.etapa.cancelada.com-motivo { justify-items: stretch; text-align: left; }

.etapa-motivo {
  display: block;
  padding: 14px 15px;
  border: 1px solid #f2c7c2;
  border-left: 4px solid #c0392f;
  border-radius: 12px;
  background: #fdf1ef;
}

.etapa-motivo strong {
  display: block;
  margin-bottom: 4px;
  color: #a3352a;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* `pre-line` porque o motivo e texto de gente: se quem cancelou deu
   enter, a quebra estava na intencao dela. */
.etapa-motivo > span {
  display: block;
  color: #7d3b33;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Um respiro entre os rotulos: sem ele, 'Recebido' e 'Confirmado'
   encostam um no outro na tela de 375px e leem como uma frase so. */
.etapa-rotulo {
  padding-inline: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
}

.etapa.cumprida .etapa-rotulo { color: var(--text); }

.acompanhar-bloco {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.acompanhar-bloco h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 800; }

.acompanhar-itens { margin: 0; padding: 0; list-style: none; }

.acompanhar-itens li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
}

.acompanhar-itens li:last-child { border-bottom: 0; }

.acompanhar-quantidade {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--primary);
  font-size: .9rem;
  font-weight: 800;
}

.acompanhar-itens li > span:not(.acompanhar-quantidade) {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.acompanhar-itens strong { font-size: .92rem; font-weight: 700; }
.acompanhar-itens small  { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.acompanhar-itens b      { font-size: .9rem; font-weight: 700; white-space: nowrap; }

.acompanhar-totais {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.acompanhar-totais > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  color: var(--muted);
  font-size: .88rem;
}

.acompanhar-totais .acompanhar-total {
  margin-top: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
}

.acompanhar-totais .acompanhar-total b { color: var(--primary); font-size: 1.2rem; font-weight: 800; }

.acompanhar-linha {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.acompanhar-linha i { margin-top: 2px; color: #9aa0b0; }

.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}

.botao-secundario:hover { border-color: var(--primary); color: var(--primary); }

/* O cartao inteiro do historico vira link para o acompanhamento: no
   celular, um "ver" pequeno no canto e alvo pior do que o cartao todo. */
.pedido-cartao-link { display: block; text-decoration: none; color: inherit; }
.pedido-cartao-link:hover .pedido-cartao { border-color: var(--primary); }

/* ---------------------------- paginacao --------------------------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 6px;
}

.paginacao a,
.paginacao .desligado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}

.paginacao a { color: var(--primary); background: var(--surface); transition: .2s; }
.paginacao a:hover { border-color: var(--primary); }

/* A ponta da lista continua ocupando o lugar dela, apagada: sumir com o
   botao faria o "Próxima" pular de lado a cada virada de pagina. */
.paginacao .desligado { color: var(--muted); opacity: .45; }

.paginacao-conta { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* --------------------------- saldo na conta ----------------------- */

.saldo-cashback {
  margin: 4px 0 26px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.saldo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saldo-topo span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}

.saldo-topo i { color: #0f8043; }

/* O verde e o mesmo do "você recebe X de cashback" do fechamento: e o
   mesmo dinheiro, e ele nao pode mudar de cor de uma tela para a outra. */
.saldo-topo strong { color: #0f8043; font-size: 1.45rem; font-weight: 800; letter-spacing: -.5px; }

.saldo-apoio { margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.saldo-lista {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--border);
  list-style: none;
}

.saldo-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}

.saldo-lista span { font-size: .92rem; font-weight: 700; }
.saldo-lista small { color: var(--muted); font-size: .78rem; }

/* Vencendo na semana: a data deixa de ser informacao e vira aviso. */
.saldo-lista small.perto { color: #a2571a; font-weight: 700; }

/* ------------------------- repetir o pedido ----------------------- */

.repetir-pedido {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 24px;
  text-decoration: none;
}

/* ------------------------------ vazio ----------------------------- */

.conta-vazio {
  padding: 50px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: white;
  text-align: center;
}

.conta-vazio > span {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.9rem;
}

.conta-vazio h2 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; }

.conta-vazio p {
  max-width: 46ch;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.conta-vazio .botao-principal { width: auto; padding-inline: 26px; }

@media (max-width: 575.98px) {
  .pagina-conta { padding: 22px 0 44px; }
  .cartao-conta { padding: 22px 18px; border-radius: var(--radius-md); }
  .conta-cabecalho { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cartao-conta h1, .conta-cabecalho h1 { font-size: 1.36rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-fechar { transition: background .2s, color .2s; }
  .menu-fechar:hover,
  .menu-fechar:focus-visible,
  .menu-fechar:active { transform: none; }
  .menu-item:hover { transform: none; }
  .menu-conta:hover .menu-conta-seta { transform: none; }
}

/* ---------------------------------------------------------------------
   FECHAMENTO DO PEDIDO
   Ocupa o mesmo painel do carrinho, e por isso herda a largura dele. As
   etapas se substituem no lugar: nao ha navegacao para fora, e o
   carrinho continua a um toque de distancia pelo botao de voltar.
--------------------------------------------------------------------- */

.fechamento-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.fechamento-topo h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.4px;
}

.fechamento-topo p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }

.fechamento-voltar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  transition: .2s;
}

.fechamento-voltar:hover { border-color: var(--primary); color: var(--primary); }

/* `minmax(0, 1fr)`, e não o `1fr` implícito.
 *
 * Item de grid nasce com `min-width: auto`, e isso significa "não encolho
 * abaixo do meu tamanho natural". A coluna então cresce até caber o filho
 * mais largo — que aqui é a linha do cupom, com um `<input>` cuja largura
 * natural passa dos 180px — e o painel inteiro fica mais largo que a tela.
 * Medido num aparelho de 360px: o corpo pedia 417px.
 *
 * O sintoma engana: quem olha vê o CUPOM cortado e vai mexer no cupom. Mas
 * quem estoura é a coluna, e por isso as opções de pagamento, os totais e
 * o rodapé saem cortados junto. */
.fechamento-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* --------------------------- opcoes ---------------------------- */

.fechamento-opcao {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: .2s;
}

.fechamento-opcao:hover { border-color: var(--primary); }

/* `:not()` porque o icone tambem e filho direto <span>: sem isso ele
   herda o `flex: 1` e estica ate a metade do cartao. */
.fechamento-opcao > span:not(.fechamento-opcao-icone) {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fechamento-opcao strong { font-size: .92rem; font-weight: 700; }

.fechamento-opcao small { color: var(--muted); font-size: .78rem; line-height: 1.4; }

.fechamento-opcao b { font-size: .9rem; font-weight: 700; white-space: nowrap; }

/* A LISTA DE ENDERECOS
   Os itens sao os mesmos cartoes de opcao; o que muda e a marca de qual
   esta valendo agora. Sem ela, a lista pareceria um cadastro e nao uma
   escolha — e a pessoa nao saberia para onde a entrega ja ia. */
.endereco-opcao + .endereco-opcao { margin-top: 10px; }

.endereco-opcao.atual {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

/* Linha propria, acima do endereco: ao lado dele o selo comia a
   largura e quebrava a rua em quatro linhas. */
.endereco-atual {
  justify-self: start;
  margin-bottom: 2px;
  padding: 3px 9px;
  border-radius: 999px;

  /* `--primary-text` e o par de contraste da primaria, calculado por
     `loja_cor_texto()`. `--button-text` e do BOTAO, que pode ser outra
     cor — e aqui o fundo e a primaria. */
  color: var(--primary-text);
  background: var(--primary);
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Endereco cabe em duas linhas; cortar no meio esconde justamente o
   numero, que e o que distingue um do outro. */
.endereco-opcao strong { white-space: normal; line-height: 1.35; }

/* Cadastrar outro e ACAO, e nao rodape: o link sublinhado do resto do
   fechamento some no fim de uma lista de cartoes. A borda tracejada diz
   'aqui entra mais um' sem competir com os que ja existem. */
.endereco-novo {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: transparent;
  color: var(--primary);
  font-size: .88rem;
  font-weight: 700;
  transition: .2s;
}

.endereco-novo:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

.fechamento-opcao-icone {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary-text);
  background: var(--primary);
  font-size: 1.15rem;
}

/* A opcao escolhida tem de se distinguir sem depender so do circulo do
   radio, que e pequeno demais para ser lido de relance. */
.entrega-opcao:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.entrega-opcao input { accent-color: var(--primary); width: 18px; height: 18px; }

/* --------------------------- campos ---------------------------- */

.fechamento-campo { display: grid; gap: 5px; margin: 0; }

.fechamento-campo > span { color: var(--muted); font-size: .78rem; font-weight: 600; }

.fechamento-campo input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
}

.fechamento-campo input:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}

/* Campo que so o CEP preenche (loja que cobra por km): cinza e sem
   cursor de texto, para nao parecer um campo esquecido em branco. */
.fechamento-campo input[readonly] {
  background: var(--background);
  color: var(--muted);
  cursor: default;
}

.fechamento-campo input[readonly]:focus { border-color: var(--border); box-shadow: none; }

.fechamento-erro:empty { display: none; }

.fechamento-erro { color: #c4362f; font-size: .74rem; }

.fechamento-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* O CEP e o botao ficam na mesma linha: sao um gesto so. */
.fechamento-cep { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }

.fechamento-buscar {
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 600;
  transition: .2s;
}

.fechamento-buscar:hover { border-color: var(--primary); color: var(--primary); }

/* --------------------------- termos ---------------------------- */

/* Grade de duas colunas para o texto nao correr por baixo da caixa
   quando quebra em duas linhas — que e o normal no celular. */
.fechamento-termos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  margin: 2px 0 2px;
  cursor: pointer;
}

.fechamento-termos input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}

.fechamento-termos > span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

/* O erro pula a coluna da caixa e alinha com o texto. */
.fechamento-termos .fechamento-erro { grid-column: 2; }

.fechamento-termos-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* O texto vem do painel em linhas soltas, sem HTML: as quebras que o
   lojista digitou sao a unica formatacao que ele tem. */
.fechamento-termos-texto {
  max-height: 60vh;
  overflow-y: auto;
  padding: 2px 4px;
  color: var(--text);
  font-size: .88rem;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
}

/* --------------------------- acoes ----------------------------- */

.fechamento-seguir {
  width: 100%;
  height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button);
  font-size: .95rem;
  font-weight: 700;
  transition: .2s;
}

.fechamento-seguir:hover { background: var(--button-dark); }

/* Botao ocupado nao pode parecer clicavel: sem isso a pessoa toca de
   novo e manda o formulario duas vezes. */
.fechamento-seguir.ocupado,
.fechamento-buscar.ocupado { opacity: .6; cursor: progress; }

.fechamento-alternativa {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: underline;
}

.fechamento-alternativa:hover { color: var(--primary); }

.fechamento-aviso:empty { display: none; }

.fechamento-aviso {
  margin: 0;
  padding: 11px 13px;
  border-radius: 11px;
  color: #8a2a24;
  background: #fdeceb;
  font-size: .82rem;
  line-height: 1.45;
}

.fechamento-ok:empty { display: none; }

/* Recuperar a senha (02/10/2026): a confirmacao do envio, em verde. */
.fechamento-ok {
  margin: 0;
  padding: 11px 13px;
  border-radius: 11px;
  color: #1d6b3a;
  background: #e7f6ec;
  font-size: .82rem;
  line-height: 1.45;
}

.fechamento-nota { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; text-align: center; }

/* --------------------------- recusa ---------------------------- */

.fechamento-recusa {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px;
  border-radius: 16px;
  background: var(--primary-soft);
  text-align: center;
}

.fechamento-recusa > span { font-size: 1.9rem; line-height: 1; color: var(--primary); }

.fechamento-recusa p { margin: 0; font-size: .92rem; font-weight: 600; }

.fechamento-recusa small { color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* --------------------------- totais ---------------------------- */

.fechamento-totais {
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.fechamento-totais > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.fechamento-totais span { color: var(--muted); font-size: .84rem; }

.fechamento-totais b { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fechamento-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.fechamento-total span { color: var(--text); font-weight: 600; }

.fechamento-total b { font-size: 1.12rem; color: var(--primary); }

/* --------------------------- pagamento -------------------------- */

.fechamento-rotulo {
  margin: 6px 0 -2px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

/* Campo do cupom, botao de colar e botao de aplicar na mesma linha: sao
   um gesto so, e quebrar em duas linhas faria o "Aplicar" parecer outra
   coisa. */
.cupom-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }

.cupom-linha input {
  /* Sem isto o campo se recusa a encolher e empurra os dois botões para
     fora da tela — é a mesma regra do `minmax(0, 1fr)` acima, um nível
     abaixo. */
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  text-transform: uppercase;
}

/* O `uppercase` acima vale para o placeholder também, e "TEM UM CUPOM?"
   em caixa alta grita no meio de uma tela que fala baixo. O código
   DIGITADO continua subindo — é o formato dele. */
.cupom-linha input::placeholder {
  text-transform: none;
  color: var(--muted);
}

.cupom-linha input:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14);
}

/* AS FORMAS DE PAGAMENTO SÃO DE UMA LINHA SÓ
   As opções de entrega têm duas — rótulo e explicação —, e a altura
   delas foi calculada para isso. Aplicada às cinco formas de pagamento,
   a mesma altura empurra o total e o botão de confirmar para fora da
   tela num celular comum, e a pessoa fecha o pedido rolando às cegas. */
.pagamento-opcao {
  padding: 12px 16px;
  border-radius: 14px;
}

.pagamento-opcao strong { font-size: .9rem; }

/* O selo do desconto da forma (13/09/2026): ao lado do nome, sem
   virar linha nova — a lista de formas ja e alta. */
.pagamento-desconto {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .12);
  vertical-align: middle;
}

.cupom-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #1c7c4a;
  font-size: .82rem;
  font-weight: 600;
}

/* O cashback ganho e a unica linha verde da tela, e vem DEPOIS do total
   de proposito: ele nao abate nada aqui — e credito para o proximo
   pedido, e misturado ao total viraria promessa de desconto. */
.cashback-ganho {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;   /* folga ate o botao que vem embaixo (24/09/2026) */
  padding: 12px 14px;
  border: 1px solid #bfe6cf;
  border-radius: 13px;
  color: #1c7c4a;
  background: #edfaf1;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
}

.cashback-ganho i { font-size: 1.05rem; }

/* O PRAZO EM DESTAQUE
   "Chega em ~45 min" e o dado que decide entre entrega e retirada — mais
   que a taxa, quando a diferenca e de dois reais. Como texto cinza no
   meio do endereco, ele se lia por ultimo. */
.prazo-selo {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-size: .74rem !important;
  font-weight: 700;
}

.prazo-selo i { font-size: .78rem; }

/* A opcao escolhida ja tem o fundo suave: ali o selo precisa de contorno
   proprio para nao virar uma mancha so. */
.entrega-opcao:has(input:checked) .prazo-selo {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .25);
}

/* AVALIAR O PEDIDO NA TELA DE ACOMPANHAMENTO
   Fica logo abaixo da linha do tempo terminada em "Entregue": e o passo
   seguinte do pedido, e nao um cartaz solto no meio da pagina. Por isso
   tem fundo proprio — o mesmo recurso do bloco de pagamento, que
   tambem pede uma acao. */
.acompanhar-avaliar {
  margin: 4px 0 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fafafa;
  text-align: center;
}

.acompanhar-avaliar h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
}

.acompanhar-avaliar h2 i { color: #e8a317; }

.acompanhar-avaliar.avaliado h2 i { color: #1c7c4a; }

.acompanhar-avaliar > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

.avaliar-estrelas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
  color: #e8a317;
  font-size: 1.5rem;
}

/* A ESCOLHA
   Alvo de 44px porque e um toque de dedo, e nao um clique de mouse:
   abaixo disso a pessoa acerta a estrela vizinha e manda uma nota que
   nao quis dar. */
.avaliar-estrelas.escolha {
  gap: 2px;
  margin-bottom: 16px;
}

.avaliar-estrelas.escolha button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #e8a317;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

.avaliar-estrelas.escolha button:hover { background: #fff6e5; }

.avaliar-estrelas.escolha button:active { transform: scale(.9); }

.avaliar-estrelas.escolha button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.avaliar-rotulo {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
}

.avaliar-comentario {
  width: 100%;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.5;
  resize: vertical;
}

.avaliar-comentario:focus {
  border-color: var(--primary);
  outline: 0;
}

/* Botao desabilitado precisa PARECER desabilitado: sem isto a pessoa
   toca em "enviar" antes de escolher a nota e nada acontece. */
.acompanhar-avaliar .botao-principal:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* O RESPIRO EMBAIXO DO BOTAO
   O aviso de cashback vinha colado no "Enviar avaliação", e os dois
   juntos pareciam um bloco so — o verde lido como parte do botao, e
   nao como um recado a parte. O respiro sai do proprio botao, para
   valer tambem quando nao ha cashback nenhum embaixo dele.

   Nao colapsa com a margem do aviso: `.botao-principal` e
   `inline-flex`, e caixa de nivel inline nao junta margem com irmao.
   Os dois valores se somam, e e isso que se quer aqui. */
.acompanhar-avaliar .botao-principal { margin-bottom: 10px; }

.avaliar-cashback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #bfe6cf;
  border-radius: 13px;
  color: #1c7c4a;
  background: #edfaf1;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.avaliar-cashback i { font-size: 1.05rem; }

/* A MARGEM DE CIMA PRECISA DESTE PESO
   `.acompanhar-avaliar > p` (uma classe + um tipo) vence
   `.avaliar-cashback` (uma classe so), e zerava a margem que a regra
   acima pede. O aviso nunca teve o respiro que estava escrito nele —
   por isso aparecia grudado no "Enviar avaliação", como se fosse a
   parte de baixo do botao. */
.acompanhar-avaliar > p.avaliar-cashback { margin: 16px 0 0; }

/* ------------------------------------------------------------------ */
/* O CELULAR NÃO PODE APROXIMAR A TELA SOZINHO                         */
/*                                                                     */
/* O Safari do iPhone dá um zoom automático quando o campo que recebe   */
/* o foco tem fonte MENOR que 16px — e depois não volta: a pessoa toca  */
/* na busca, a página cresce, e ela precisa fechar o teclado e afastar  */
/* com dois dedos para continuar comprando.                            */
/*                                                                     */
/* A busca estava com `.82rem` (13px), o cupom com `.92rem` (15px) e os */
/* campos do fechamento com `.95rem`. Todos abaixo do limite.          */
/*                                                                     */
/* NÃO SE RESOLVE COM `maximum-scale=1` NO VIEWPORT                    */
/* Seria uma linha só, e é o conselho que mais circula. Mas isso tira  */
/* o zoom de pinça de quem precisa dele para ler — e o Safari ignora a */
/* diretiva desde o iOS 10 de qualquer forma. Ou seja: quebraria a      */
/* acessibilidade sem sequer resolver o problema.                      */
/*                                                                     */
/* O `:not()` está aí por especificidade: regras como `.search-box      */
/* input` valem mais que um `input` solto e continuariam vencendo.     */
/* De quebra, ele tira caixa e rádio da conta, onde `font-size` não     */
/* muda nada.                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

  input:not([type="checkbox"]):not([type="radio"]),
  textarea:not([type]),
  select:not([multiple]) {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* O RODAPÉ DO FECHAMENTO FICA PRESO                                   */
/*                                                                     */
/* A tela de pagamento tem cupom, cashback, cinco formas de pagamento,  */
/* troco, totais e o aviso do cashback. Medida num aparelho de 360px,   */
/* dá 1114px de conteúdo para 706px de tela — 408px a mais. Não existe  */
/* espaçamento a cortar que faça isso caber: é conteúdo, não folga.     */
/*                                                                     */
/* Sem prender, o "Confirmar pedido" nasce abaixo da dobra. A pessoa    */
/* escolhe a forma de pagamento, olha a tela, e não vê como terminar —  */
/* precisa rolar até o fim para descobrir que o botão existe.           */
/*                                                                     */
/* Preso, a lista rola por baixo e a ação fica sempre à mão. É o mesmo  */
/* desenho de qualquer aplicativo de entrega, e pela mesma razão.       */
/* ------------------------------------------------------------------ */
.fechamento-rodape {
  position: sticky;
  bottom: 0;
  z-index: 3;

  /* As margens negativas colam o rodapé nas bordas do painel: o
     `offcanvas-body` tem respiro lateral, e uma faixa que não vai até a
     borda parece um cartão solto boiando sobre o conteúdo. */
  margin: 4px -24px -24px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);

  /* Opaco, e não translúcido: o conteúdo que passa por baixo é texto de
     preço, e texto sobre texto não se lê. */
  background: var(--surface);
}

/* O total dentro do botão: quem aperta precisa ver quanto vai pagar sem
   procurar. O detalhamento continua acima, para quem quiser conferir. */
.fechamento-rodape .fechamento-seguir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  padding: 0 18px;
}

.fechamento-rodape .fechamento-seguir b { font-size: 1rem; font-weight: 800; }

/* O RODAPE NO FIM DO PAINEL, SEMPRE (24/09/2026)
   `sticky` so gruda embaixo quando o conteudo passa da tela. Pedido curto
   (uma coca) terminava antes, e o "Confirmar pedido" ficava boiando com
   um vao de mais de 100px embaixo. O fechamento passa a ocupar a altura
   do painel e o rodape e empurrado para o fim (`margin-top: auto`); com
   conteudo longo o `sticky` continua valendo. A grade vira coluna flexivel
   SO na etapa que tem rodape (`:has`), e os filhos ganham `min-width: 0`
   pelo mesmo motivo da grade (nao arrastar para o lado). */
.cart-offcanvas .fechamento { flex: 1 0 auto; display: flex; flex-direction: column; }
.fechamento-corpo:has(> .fechamento-rodape) { flex: 1 0 auto; display: flex; flex-direction: column; }
.fechamento-corpo:has(> .fechamento-rodape) > * { min-width: 0; }
/* O respiro de baixo do painel sai nesta etapa, e o rodape nao compensa
   mais com margem negativa: a margem negativa nao soma com o `margin-top:
   auto` do flex, e o botao parava 20px antes da borda. */
.cart-offcanvas .offcanvas-body:has(.fechamento-rodape) { padding-bottom: 0; }
.fechamento-corpo > .fechamento-rodape { margin-top: auto; margin-bottom: 0; }

/* O painel precisa poder rolar por baixo do rodapé; sem isto, um
   `overflow` escondido em algum antepassado mata o `sticky` calado. */
.offcanvas-body { overflow-y: auto; }

/* ------------------------------------------------------------------ */
/* O PAINEL DO PEDIDO NÃO ARRASTA PARA O LADO                          */
/*                                                                     */
/* Já corrigimos duas vezes a mesma família de defeito: item de grid    */
/* nasce com `min-width: auto` e a coluna cresce até caber o filho mais */
/* largo — foi o campo de cupom, e podia ser o próximo texto comprido   */
/* que alguém cadastrasse. Um nome de forma de pagamento, um código de  */
/* cupom sem espaços, o nome da loja num aparelho de 320px.             */
/*                                                                     */
/* Em vez de caçar o próximo, as regras abaixo fecham a classe inteira: */
/* nenhum grid do fechamento pode passar da largura disponível, texto   */
/* comprido quebra em vez de empurrar, e o painel corta o que sobrar    */
/* em vez de virar rolagem horizontal.                                  */
/*                                                                     */
/* O `overflow-x: hidden` é a última linha, e não a primeira: ele       */
/* esconde o sintoma. As outras três tiram a causa — mas num painel     */
/* lateral de largura fixa, arrastar de lado nunca é o comportamento    */
/* certo, então vale ter as duas coisas.                                */
/* ------------------------------------------------------------------ */

.cart-offcanvas .offcanvas-body { overflow-x: hidden; }

/* Os totais são grid, como o corpo: mesma armadilha, mesma correção. */
.fechamento-totais { grid-template-columns: minmax(0, 1fr); }

/* E o rótulo de cada linha encolhe e quebra em vez de empurrar o valor
   para fora — "Cupom SUPERDESCONTOFIMDESEMANA" é um único bloco sem
   espaço, e sem isto ele não tem onde quebrar. */
.fechamento-totais span { min-width: 0; overflow-wrap: anywhere; }

/* O rótulo da opção também é um grid, dentro de um flex. Dois níveis
   com o mesmo `min-width: auto` — o de fora já estava resolvido. */
.fechamento-opcao > span:not(.fechamento-opcao-icone) { grid-template-columns: minmax(0, 1fr); }

.fechamento-opcao strong,
.fechamento-opcao small { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ */
/* MAIS ESPAÇO NO APARELHO ESTREITO                                    */
/*                                                                     */
/* O painel usa 24px de respiro de cada lado. Num aparelho de 320px     */
/* isso é 48px dos 320 — 15% da tela — e é justamente onde os cartões   */
/* ficam apertados. Abaixo de 400px o respiro cai para 14px e devolve   */
/* 20px ao conteúdo, que é a diferença entre o rótulo caber numa linha  */
/* ou quebrar em duas.                                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 399.98px) {

  .cart-offcanvas .offcanvas-body { padding: 16px 14px 20px; }
  .cart-offcanvas .offcanvas-header { padding: 16px 14px; }

  .fechamento-opcao   { padding: 13px 12px; gap: 10px; }
  .pagamento-opcao    { padding: 11px 12px; }
  .fechamento-totais  { padding: 13px 12px; }

  /* O rodapé preso acompanha o respiro novo: a margem negativa tem de
     bater com o padding do painel, senão ele sobra para fora (arrasta)
     ou fica encolhido no meio (parece um cartão solto). */
  .fechamento-rodape { margin-left: -14px; margin-right: -14px; padding: 10px 14px; }
}

/* ---------------------------------------------------------------------
   MEUS CUPONS
   Cada cupom e um cartao dividido em duas partes, como bilhete: o que
   ele abate em cima, e o codigo embaixo, num campo que se copia. O
   picote entre as duas e o unico enfeite — e o que faz o olho ler o
   cartao como cupom, e nao como mais um aviso.
--------------------------------------------------------------------- */

.lista-cupons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.cupom-cartao {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .04);
}

.cupom-selo {
  padding: 20px 20px 16px;
  color: var(--primary-text);
  background: var(--primary);
}

.cupom-selo > i { font-size: 1.3rem; opacity: .9; }

.cupom-selo strong {
  display: block;
  margin-top: 8px;
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: -.4px;
  line-height: 1.25;
}

.cupom-selo small {
  display: block;
  margin-top: 5px;
  font-size: .84rem;
  line-height: 1.5;
  opacity: .85;
}

/* O picote. `--border` nas pontas e o fundo da pagina no meio: e o
   recorte que separa a promessa do codigo. */
.cupom-codigo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--border);
}

.cupom-codigo::before,
.cupom-codigo::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--background);
}

.cupom-codigo::before { left: -11px; }
.cupom-codigo::after  { right: -11px; }

.cupom-codigo > span {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  overflow-wrap: anywhere;
}

.cupom-copiar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--primary);
  background: white;
  font-size: .82rem;
  font-weight: 800;
  transition: .2s;
}

.cupom-copiar:hover { border-color: var(--primary); background: var(--primary-soft); }

.cupom-copiar.copiado {
  border-color: transparent;
  color: var(--primary-text);
  background: var(--primary);
}

.cupom-regras {
  margin: 0;
  padding: 15px 20px 18px;
  list-style: none;
}

.cupom-regras li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.cupom-regras li + li { margin-top: 7px; }

.cupom-regras i { color: #9aa0b0; margin-top: 2px; }

.cupom-regras:empty { display: none; }

/* ---------------------------------------------------------------------
   CONFIRMAR O NUMERO
   Segundo passo do primeiro acesso. O campo do codigo e grande e
   espacado porque e o unico dado da tela e porque quem digita esta
   olhando para o WhatsApp na outra mao.
--------------------------------------------------------------------- */

.campo-codigo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .55em;
  text-align: center;

  /* O `letter-spacing` empurra o texto para a esquerda quando ele e
     centralizado: o espaco depois do ultimo digito conta. O recuo
     devolve o conjunto para o meio. */
  text-indent: .55em;
}

/* As duas saidas do segundo passo. Sao acoes menores que confirmar, e
   parecem menores: botao com a mesma cor do principal faria a pessoa
   escolher pelo tamanho, e nao pelo que quer. */
.passo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.passo-acoes form { margin: 0; }

.botao-texto {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao-texto:hover { color: var(--primary); }


/* ===================================================================
   LOGIN PELO TELEFONE + CODIGO (BR-081, 12/10/2026)
   Os botoes "Reenviar o codigo" e "Trocar o numero" da entrar.php sao
   POSTs (mudam a sessao), mas tem a cara do link "Esqueci minha senha".
   =================================================================== */
.cartao-conta-acoes {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.botao-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: underline;
}

.botao-link:hover { color: var(--primary); }

/* O codigo no carrinho: os mesmos digitos largos da pagina. */
.fechamento-campo input.fechamento-codigo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;
}