/* ============================================================================
 * Skin "Mosaico" do cardápio — config.cardapio_tema = 3
 *
 * Arquivo PRÓPRIO, carregado só quando o tema está ativo, em vez de somar ao
 * cardapio.css (128KB compartilhado com o cardápio de mesa/QR). As 73 lojas que
 * não usam este skin não baixam um byte disto.
 *
 * Tudo escopado em .mos- e sob .cardapio-mosaico, pra não vazar no Bootstrap que o
 * resto da página carrega. Fase 1 sem Tailwind (decisão Cayu 2026-08-02): não
 * há passo de build no deploy, e CSS escopado converte pra Tailwind depois se
 * fizer sentido — o contrário é que dói.
 * ==========================================================================*/

.cardapio-mosaico {
  --mos-borda: #dbdbdb;
  --mos-texto: #171717;
  --mos-suave: #737373;
  --mos-fundo: #fff;
  --mos-acento: #ec4899;
  background: var(--mos-fundo);
  color: var(--mos-texto);
}

@media (prefers-color-scheme: dark) {
  .cardapio-mosaico.mos-auto-dark {
    --mos-borda: #262626;
    --mos-texto: #f5f5f5;
    --mos-suave: #a3a3a3;
    --mos-fundo: #000;
  }
}

.mos-wrap { max-width: 935px; margin: 0 auto; padding: 0 0 90px; }

/* ---------- Cabeçalho do perfil ---------- */
.mos-perfil { display: flex; gap: 20px; align-items: center; padding: 18px 16px 12px; }
.mos-avatar {
  width: 86px; height: 86px; flex: 0 0 86px; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--mos-borda); background: #fafafa;
}
.mos-avatar img, .mos-avatar picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-perfil-dados { flex: 1 1 auto; min-width: 0; }

/* Os 3 contadores. Colunas iguais: número em cima, rótulo embaixo — o rótulo
   é a razão de existirem (é dado real, não métrica de rede social). */
.mos-numeros { display: flex; gap: 6px; margin-bottom: 10px; }
.mos-num { flex: 1 1 0; text-align: center; min-width: 0; }
.mos-num b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.mos-num span { display: block; font-size: 11px; color: var(--mos-suave); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.mos-nome { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.mos-bio { font-size: 13px; line-height: 1.45; margin: 0; color: var(--mos-texto); }
.mos-bio-linha { display: block; }
.mos-bio-link { color: #00376b; text-decoration: none; font-weight: 600; word-break: break-all; }

@media (max-width: 576px) {
  .mos-perfil { gap: 14px; padding: 14px 12px 10px; }
  .mos-avatar { width: 72px; height: 72px; flex-basis: 72px; }
  .mos-num b { font-size: 15px; }
}

/* ---------- Ações ---------- */
.mos-acoes { display: flex; gap: 8px; padding: 0 16px 14px; }
.mos-btn {
  flex: 1 1 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--mos-borda);
  background: transparent; color: var(--mos-texto); font-size: 14px; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.mos-btn-primario { background: #0095f6; border-color: #0095f6; color: #fff; }
.mos-btn:hover { text-decoration: none; }

/* ---------- Destaques (categorias) ---------- */
.mos-destaques {
  display: flex; gap: 16px; padding: 4px 16px 16px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mos-destaques::-webkit-scrollbar { display: none; }
.mos-destaque { flex: 0 0 auto; width: 72px; text-align: center; background: none;
  border: 0; padding: 0; cursor: pointer; color: inherit; }
.mos-destaque-foto {
  width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--mos-borda); padding: 3px; background: var(--mos-fundo);
}
.mos-destaque-foto img, .mos-destaque-foto picture { width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block; }
.mos-destaque.ativo .mos-destaque-foto { border: 2px solid var(--mos-acento); padding: 2px; }
.mos-destaque span {
  display: block; font-size: 11px; line-height: 1.25; color: var(--mos-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Barra de abas ---------- */
.mos-abas { display: flex; border-top: 1px solid var(--mos-borda); }
.mos-aba {
  flex: 1 1 0; padding: 12px 0; text-align: center; background: none; border: 0;
  border-top: 1px solid transparent; margin-top: -1px; color: var(--mos-suave);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
.mos-aba.ativo { color: var(--mos-texto); border-top-color: var(--mos-texto); }
.mos-aba i { font-size: 15px; }

/* ---------- Grade em CARD (2 colunas no celular, 3 no desktop) ----------
   A foto segue protagonista, mas o card passou a trazer o que faz o cliente
   decidir sem abrir nada: nome, uma linha de descrição, preço e o "+".
   Mudança de 2026-08-02 (descaracterização): grade colada de 3 colunas só com
   foto é leitura de feed de rede social; card com preço e botão é vitrine.

   2 colunas no celular NÃO é preferência estética: medido em 390px, com 3
   colunas o card fica em 128px e a descrição vira "Pão, carne, quei…". Com 2,
   ela cabe inteira. A partir de 768px sobra largura e voltam as 3. */
.mos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
@media (min-width: 768px) { .mos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; } }

.mos-celula {
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--mos-fundo); border: 1px solid var(--mos-borda); border-radius: 14px;
}
.mos-celula-foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fafafa; }
.mos-celula-foto img, .mos-celula-foto picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* `flex:1` + `margin-top:auto` no pé: preço e botão param na MESMA altura em
   cards vizinhos mesmo quando um nome ocupa duas linhas e o outro uma. Sem
   isso a fileira fica visualmente torta — o mesmo ajuste que a Fase 2 do
   cardápio clássico precisou. */
.mos-celula-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 8px 10px 10px; min-width: 0; }
.mos-celula-nome {
  font-size: 13px; font-weight: 600; line-height: 1.25; margin: 0; color: var(--mos-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.mos-celula-desc {
  font-size: 11.5px; line-height: 1.3; margin: 3px 0 0; color: var(--mos-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mos-celula-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }

/* Preço: o riscado só existe durante Happy Hour, que é quando há de fato um
   preço anterior. Fora dele não se inventa "preço de" — isso é preço de
   referência falso, e o cliente percebe. */
.mos-preco { font-size: 14px; font-weight: 700; color: var(--mos-texto); white-space: nowrap; min-width: 0; }
.mos-preco-de { font-size: 11.5px; font-weight: 500; color: var(--mos-suave); text-decoration: line-through; }
.mos-preco-por { color: #dc2626; }
.mos-preco-opcoes { font-size: 13px; font-weight: 600; color: var(--mos-suave); }

.mos-add {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-topo, #ea1d2c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ---------- Lista: linha horizontal (foto à direita) ----------
   Com a grade virando card, uma segunda grade de cards seria a mesma tela em
   larguras diferentes. Como linha, cada aba entrega algo distinto: varrer por
   foto × ler o cardápio inteiro rápido. */
.mos-lista { display: flex; flex-direction: column; padding: 6px 12px 12px; }
@media (min-width: 768px) { .mos-lista { padding: 10px 16px 16px; } }

.mos-linha {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 0; border-bottom: 1px solid var(--mos-borda);
}
.mos-linha:last-child { border-bottom: 0; }
.mos-linha-texto { flex: 1 1 auto; min-width: 0; }
.mos-linha-nome {
  font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0 0 2px; color: var(--mos-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.mos-linha-desc {
  font-size: 12.5px; line-height: 1.35; margin: 0 0 6px; color: var(--mos-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mos-linha-foto {
  position: relative; flex: 0 0 96px; width: 96px; height: 96px;
  border-radius: 12px; overflow: hidden; background: #fafafa;
}
.mos-linha-foto img, .mos-linha-foto picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-linha-foto .mos-add { position: absolute; right: 5px; bottom: 5px; }
@media (min-width: 768px) { .mos-linha-foto { flex-basis: 120px; width: 120px; height: 120px; } }

/* ---------- Vazios ---------- */
.mos-vazio { padding: 48px 20px; text-align: center; color: var(--mos-suave); font-size: 14px; }
.mos-vazio i { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5; }

.mos-secao-titulo {
  display: flex; align-items: center; gap: 8px; padding: 16px 16px 0;
  font-size: 14px; font-weight: 700;
}
.mos-secao-titulo button { background: none; border: 0; color: var(--mos-suave); font-size: 13px;
  margin-left: auto; cursor: pointer; }

/* Imagem padrão do sistema é um LOGO: cover a corta no meio e, repetida numa
   grade de 3 colunas, o cardápio inteiro vira um mosaico de logo picotado. */
.mos-celula-foto img.is-default,
.mos-linha-foto img.is-default,
.mos-destaque-foto img.is-default { object-fit: contain; padding: 14%; background: #fafafa; }


/* ============================================================================
 * F2 — telas 4, 5 e 6 dentro do skin (detalhe do prato, carrinho, finalização)
 *
 * TUDO AQUI É RESTYLE POR CSS ESCOPADO, de propósito. O markup destas três
 * telas (ajax/produtom.php, ajax/pedido.php, include/delivery*.php) é
 * COMPARTILHADO com os outros 3 skins e com o cardápio de mesa/QR: mexer nele
 * pra encaixar este visual mudaria a tela de 73 lojas que não pediram nada.
 * Por isso cada regra abaixo começa em .cardapio-mosaico — fora do skin, nada muda.
 *
 * O `body` recebe .cardapio-mosaico em TODAS as rotas do cardápio (index.php), então
 * o checkout e os modais herdam o escopo sem truque nenhum.
 * ==========================================================================*/

/* A assinatura visual do mock: o CTA em gradiente. Uma variável só, usada nos
   3 botões de ação principal — trocar a marca depois é uma linha. */
.cardapio-mosaico { --mos-cta: linear-gradient(90deg, #f43f5e 0%, #ec4899 55%, #f97316 100%); }

/* ---------- Tela 4: detalhe do prato ---------- */
.cardapio-mosaico .modal-product .modal-content { border-radius: 16px; overflow: hidden; border: 0; }
@media (max-width: 576px) {
  /* No celular o modal vira folha colada embaixo: é o gesto que o usuário de
     um feed de fotos espera, e encurta a distância dedo→botão de adicionar. */
  .cardapio-mosaico .modal-product .modal-dialog { margin: 0; align-items: flex-end; min-height: 100%; }
  .cardapio-mosaico .modal-product .modal-content { border-radius: 18px 18px 0 0; max-height: 94vh; }
}
.cardapio-mosaico .modal-product .modal-header { border-bottom: 1px solid var(--mos-borda); padding: 12px 16px; }
.cardapio-mosaico .modal-product .modal-title { font-size: 14px; font-weight: 700; }

.cardapio-mosaico .product-detail-img {
  /* max-height:300px vem do cardapio.css e CAPAVA o aspect-ratio: a foto saía
     374x300 em vez de quadrada. Aspect-ratio não vence altura máxima. */
  aspect-ratio: 1 / 1; width: 100%; max-height: none; object-fit: cover; border-radius: 12px;
}
.cardapio-mosaico .product-detail-img.is-default { object-fit: contain; padding: 12%; background: #fafafa; }
.cardapio-mosaico .product-detail-name { font-size: 19px; font-weight: 700; line-height: 1.25; }
.cardapio-mosaico .product-detail-price { font-size: 22px; font-weight: 800; color: var(--mos-texto); }

.cardapio-mosaico .option-group { border: 1px solid var(--mos-borda); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.cardapio-mosaico .option-group-title { font-size: 14px; font-weight: 700; }
.cardapio-mosaico .option-group-subtitle { font-size: 12px; color: var(--mos-suave); }
.cardapio-mosaico .option-item { border-bottom: 1px solid var(--mos-borda); padding: 10px 2px; }
.cardapio-mosaico .option-item:last-child { border-bottom: 0; }
.cardapio-mosaico .option-item-price { font-size: 13px; font-weight: 700; color: #16a34a; }
.cardapio-mosaico .option-item-price.free { color: var(--mos-suave); font-weight: 600; }
.cardapio-mosaico .badge-optional { border-radius: 999px; font-size: 10px; letter-spacing: .04em; }

.cardapio-mosaico .obs-textarea { border-radius: 12px; border: 1px solid var(--mos-borda); font-size: 14px; }
.cardapio-mosaico .obs-textarea:focus { border-color: #a3a3a3; box-shadow: none; }

.cardapio-mosaico .qty-spinner { border: 1px solid var(--mos-borda); border-radius: 999px; }
.cardapio-mosaico .qty-btn { border-radius: 50%; }

/* !important aqui NÃO é preguiça: o cardapio.css pinta este grupo de botões com
   `background:#e0173a!important` (cor de CTA chumbada, que aliás já ignora o
   --cor-preco configurável da loja). Contra !important nenhuma especificidade
   vence — só outro !important. Escopado em .cardapio-mosaico, então não vaza. */
.cardapio-mosaico .btn-add-order,
.cardapio-mosaico .cart-v2-checkout-btns .btn-primary,
.cardapio-mosaico .form-page .btn-primary {
  background: var(--mos-cta) !important; border: 0; border-radius: 12px;
  font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(236,72,153,.28);
}
.cardapio-mosaico .btn-add-order:hover,
.cardapio-mosaico .cart-v2-checkout-btns .btn-primary:hover,
.cardapio-mosaico .form-page .btn-primary:hover { filter: brightness(1.05); transform: none; }

/* ---------- Tela 5: carrinho ---------- */
.cardapio-mosaico .cart-v2-item { border: 1px solid var(--mos-borda); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.cardapio-mosaico .cart-v2-img-wrap { border-radius: 10px; overflow: hidden; }
.cardapio-mosaico .cart-v2-img { object-fit: cover; }
.cardapio-mosaico .cart-v2-img.is-default { object-fit: contain; padding: 10%; background: #fafafa; }
.cardapio-mosaico .cart-v2-extras-section { border-top: 1px dashed var(--mos-borda); }
.cardapio-mosaico .cart-v2-extras-item { font-size: 12px; color: var(--mos-suave); }
.cardapio-mosaico .cart-v2-free-delivery-badge { border-radius: 999px; font-weight: 700; }
.cardapio-mosaico .cart-v2-empty-icon { opacity: .35; }
/* NÃO zerar o fundo aqui. A regra base do cardapio.css pinta este botão com
   `background: var(--cor-topo)` e `color: var(--cor-topo-texto, #fff)`; o
   override antigo tirava só o FUNDO e deixava o texto branco — botão branco com
   letra branca sobre o modal branco, invisível. E é o botão que leva ao
   checkout: quem não o enxerga não fecha o pedido. Aqui fica só o raio. */
.cardapio-mosaico .cart-v2-continue-btn { border-radius: 12px; }

/* ---------- Tela 6: finalização ---------- */
.cardapio-mosaico .form-page { max-width: 560px; margin: 0 auto; }
.cardapio-mosaico .form-page-title { font-size: 18px; font-weight: 800; }
.cardapio-mosaico .form-page-subtitle { color: var(--mos-suave); font-size: 13px; }
.cardapio-mosaico .form-section { border: 1px solid var(--mos-borda); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.cardapio-mosaico .form-section-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 10px; }
.cardapio-mosaico .form-label { font-size: 12px; font-weight: 600; color: var(--mos-suave); }
.cardapio-mosaico .form-control,
.cardapio-mosaico .select2-selection { border-radius: 10px !important; border: 1px solid var(--mos-borda) !important; }
/* 16px é o mínimo que o iOS aceita sem dar zoom automático no foco — abaixo
   disso o checkout inteiro salta de escala quando o cliente toca no campo. */
.cardapio-mosaico .form-control { font-size: 16px; }
.cardapio-mosaico .btn-back { border-radius: 999px; }

/* O rodapé fixo de atalhos (.bottom-action-bar, 54px) já existe e é reusado —
   decisão do Cayu (2026-08-02) de NÃO criar a barra do mock. Só garantimos que
   nenhuma das três telas termine escondida atrás dele. */
.cardapio-mosaico .form-page,
.cardapio-mosaico .cart-v2-items { padding-bottom: 76px; }

/* ---------- Stories no avatar (pedido do Cayu, 2026-08-02) ----------
 * O anel só existe quando a loja TEM story ativo: anel sem story é promessa
 * falsa, e o cliente clica em nada. A regra mora no PHP (classe .tem-story). */
.cardapio-mosaico .mos-avatar.tem-story {
  border: 0; padding: 3px; cursor: pointer;
  background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
}
.cardapio-mosaico .mos-avatar.tem-story img { border-radius: 50%; border: 2px solid var(--mos-fundo); }
.cardapio-mosaico .mos-avatar.tem-story:focus-visible { outline: 2px solid var(--mos-acento); outline-offset: 3px; }
/* Do 2º story em diante: no DOM só pra alimentar a navegação do story-viewer.js. */
.cardapio-mosaico .mos-stories-ocultos { display: none; }

/* "Conectado como X": a contraparte permanente da faixa de boas-vindas, que
   agora some em 10s. Discreto de propósito — é confirmação de identidade, não
   anúncio; e o ponto verde é o mesmo vocabulário de "online" que o cliente já
   conhece de app de mensagem. */
.cardapio-mosaico .mos-conectado {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px 10px; font-size: 12px; color: var(--mos-suave);
}
.cardapio-mosaico .mos-conectado b { color: var(--mos-texto); font-weight: 600; }
.cardapio-mosaico .mos-conectado-ponto {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 7px;
}

/* 🔴 CORREÇÃO — o modal virou folha de 94vh no F2 e o corpo NÃO rolava.
 *
 * Produto com descrição/adicionais gera 1097px de conteúdo dentro de um
 * container de 752px: sem overflow no .modal-body o excedente simplesmente
 * ficava fora da tela e o botão "Adicionar ao Pedido" era INALCANÇÁVEL — o
 * cliente abria o prato e não conseguia pedir.
 *
 * Limitar a altura de um container obriga a declarar QUEM rola lá dentro.
 * `min-height:0` é obrigatório: sem ele um filho flex não encolhe abaixo do
 * tamanho do conteúdo e o overflow nunca chega a acontecer.
 */
.cardapio-mosaico .modal-product .modal-content { display: flex; flex-direction: column; }
.cardapio-mosaico .modal-product .modal-header { flex: 0 0 auto; }
.cardapio-mosaico .modal-product .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* A linha de ação (qtd + adicionar) cola no rodapé do modal, como no mock: o
 * cliente não precisa rolar até o fim pra achar o botão. O contêiner dela não
 * tem classe (é `style` inline no produtom.php), daí o :has() — navegador sem
 * suporte simplesmente não fixa, e a rolagem acima já garante o acesso. */
.cardapio-mosaico .modal-product .modal-body form > div:has(> .btn-add-order) {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--mos-fundo); padding: 10px 0 4px; margin-top: 12px;
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.18);
}

/* ---------- Categorias fixas no topo ao rolar (pedido do Cayu, 2026-08-02) ----------
 * Destaques + abas viram UM bloco sticky: trocar de categoria no meio do feed
 * sem ter que voltar ao topo é o ganho, e separar os dois faria a fileira colar
 * e as abas ficarem pra trás.
 *
 * `top` é 0 porque o cardápio não tem header fixo próprio — o que é fixo é o
 * rodapé (.bottom-action-bar). Fundo opaco obrigatório: sem ele a grade passa
 * por baixo e some a leitura.
 */
.cardapio-mosaico .mos-sticky {
  /* Gruda LOGO ABAIXO do header da loja (decisão do Cayu, 2026-08-02), não por
     cima: o header traz nome, aberto/fechado e os atalhos, que continuam úteis
     enquanto se rola o feed. `.header-modern` é sticky top:0 z-index:1030 — com
     as duas em top:0 elas se sobrepunham e as categorias iam pra trás.
     A altura vem do JS porque varia com o nome da loja e o breakpoint; o
     fallback de 0px mantém o comportamento antigo se o JS não rodar. */
  position: sticky; top: var(--mos-header-h, 0px); z-index: 20;
  background: var(--mos-fundo);
  box-shadow: 0 1px 0 var(--mos-borda);
}
/* Rolando, a fileira encolhe pra não comer meia tela em celular pequeno. */
.cardapio-mosaico .mos-sticky.encolhido .mos-destaques { padding-top: 2px; padding-bottom: 8px; }
.cardapio-mosaico .mos-sticky.encolhido .mos-destaque { width: 58px; }
.cardapio-mosaico .mos-sticky.encolhido .mos-destaque-foto { width: 50px; height: 50px; }
.cardapio-mosaico .mos-sticky.encolhido .mos-destaque span { font-size: 10px; }
.cardapio-mosaico .mos-sticky .mos-destaques,
.cardapio-mosaico .mos-sticky .mos-destaque,
.cardapio-mosaico .mos-sticky .mos-destaque-foto { transition: all .18s ease; }

/* A barra "Ver Carrinho" precisa RECEBER o clique.
 * `.cart-float` tem `pointer-events:none` no cardapio.css (para o vão em volta
 * dela não bloquear o cardápio) e `.cart-float-inner` nunca restaurou `auto` —
 * no cardápio clássico isso passa batido porque o conteúdo embaixo é inerte,
 * mas na grade do Mosaico o que fica sob a barra é célula clicável, e o
 * clique atravessava para o produto em vez de abrir o carrinho.
 * Escopado: fora do skin nada muda. */
.cardapio-mosaico .cart-float { pointer-events: none; }
.cardapio-mosaico .cart-float-inner { pointer-events: auto; }

/* ---------- Modal de ofertas (Cayu, 2026-08-02) ----------
 * Molde do modal de cupons, que o cliente deste cardápio já conhece. O
 * conteúdo é a seção Highlights inteira (Combos / Pedir Novamente / Sugestões),
 * reusada de include/highlights.php — não há markup de produto duplicado aqui.
 */
.mos-ofertas-modal {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
@media (min-width: 768px) { .mos-ofertas-modal { align-items: center; padding: 24px; } }

.mos-ofertas-box {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--mos-fundo); color: var(--mos-texto);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.3);
}
@media (min-width: 768px) { .mos-ofertas-box { border-radius: 18px; } }

.mos-ofertas-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--mos-texto);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.mos-ofertas-head { display: flex; align-items: center; gap: 12px; padding: 18px 56px 12px 18px; flex: 0 0 auto; }
.mos-ofertas-emoji { font-size: 26px; }
.mos-ofertas-titulo { font-size: 17px; font-weight: 800; line-height: 1.2; }
.mos-ofertas-sub { font-size: 12.5px; color: var(--mos-suave); margin-top: 1px; }

/* Quem rola é o corpo — mesma lição do modal do produto: limitar a altura da
   caixa obriga a declarar quem rola lá dentro, e min-height:0 é o que permite
   o filho flex encolher. */
.mos-ofertas-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 18px; }

/* A seção Highlights foi desenhada pro corpo do cardápio; dentro do modal ela
   não precisa das margens externas nem do fundo próprio. */
.mos-ofertas-body .highlights-section { margin: 0; padding: 0 12px; background: transparent; box-shadow: none; }

/* Pulsar do ícone no rodapé: chama atenção pra oferta sem abrir pop-up sozinho
   (o de cupom já abre; dois na mesma visita afastam). Respeita quem pediu menos
   movimento no sistema — acessibilidade, e evita enjoo em tela pequena. */
@keyframes mosPulseOferta {
  0%, 100% { transform: scale(1);    filter: none; }
  50%      { transform: scale(1.16); filter: drop-shadow(0 0 6px rgba(249,115,22,.75)); }
}
.bottom-action-item.mos-ofertas-pulse i { color: #f97316; animation: mosPulseOferta 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bottom-action-item.mos-ofertas-pulse i { animation: none; }
}