/* ============================================================================
 * 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; }

/* Convite pra conversa. Herda o peso secundário do "Informações" que ele
   substitui — só o ícone leva a cor, que é o suficiente pra ele não parecer
   mais um link de texto. Cheio e colorido ao lado do primário leria "promoção",
   e quem clicasse esperando desconto acharia um bate-papo. */
/* 13px e não 14: "Pedir conversando" quebrava em duas linhas ao lado de
   "Cardápio" (medido em 390px), e rótulo quebrado num par de botões parece
   defeito. Encurtar o texto custaria o que ele tem de melhor — dizer o que a
   pessoa GANHA, e não só para onde vai. */
.mos-btn-conversa { color: var(--mos-texto); font-size: 13px; }
.mos-btn-conversa i { color: #00a884; margin-right: 4px; font-size: 12px; }
/* Em 360px nem a 13px cabe: o ícone sai e o texto fica, porque é o texto que
   diz o que acontece — ícone sozinho não conta nada (mesmo critério que tirou
   microfone e câmera da barra da conversa). */
@media (max-width: 380px) { .mos-btn-conversa i { display: none; } }

/* A coluna de nota vira link quando existe avaliação — sem cara de link, porque
   ela continua sendo, antes de tudo, um número do perfil. */
.mos-num-link { text-decoration: none; color: inherit; display: block; }
.mos-num-link:hover { text-decoration: none; color: inherit; }
.mos-num-link:active { opacity: .6; }

/* ---------- 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; }

/* ---------- Sininho de story sobre o avatar ----------
 *
 * Cayu, 2026-08-19: *"no modo moderno já é evidente o stories, mas no mosaico
 * passa despercebido… a notificação precisa ter movimento, precisa ser sininho
 * vibrando"*. O anel colorido é vocabulário de rede social: quem não usa
 * Instagram não lê aquilo como "tem novidade". Sino tocando é universal.
 *
 * O badge mora FORA do avatar porque `.mos-avatar` tem `overflow:hidden` (o
 * recorte redondo da foto) — dentro dele, qualquer coisa que passe da borda
 * seria cortada. Daí o `.mos-avatar-wrap`.
 *
 * A animação toca ~1,2s e descansa ~1,8s: sino que balança sem parar vira
 * ruído de fundo e o olho aprende a ignorar em segundos — o que é exatamente o
 * problema que ele veio resolver. */
/* `flex: 0 0 auto` e NÃO um número: o wrap tem de valer exatamente o que o
   avatar vale. Ele nasceu com `0 0 86px` copiando o tamanho do `.mos-avatar`,
   mas o avatar encolhe para 72px abaixo de 576px e o wrap não encolhia junto —
   sobravam 14px mortos à direita, e como o sino é posicionado por `right` DO
   WRAP, ele saía do anel no celular (media 390px: o sino passava 18px da borda
   do avatar, contra 4px no desktop). Número mágico duplicado em dois lugares
   que precisam mudar juntos: com `auto` o wrap mede o filho e passa a valer em
   qualquer breakpoint, inclusive nos que ainda não existem. */
.cardapio-mosaico .mos-avatar-wrap { position: relative; flex: 0 0 auto; }
.cardapio-mosaico .mos-story-sino {
  position: absolute; top: -2px; right: -4px;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 2px solid var(--mos-fundo, #fff); background: #ef4444; color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .45);
  transform-origin: 50% 4px;                 /* balança pendurado pelo topo, como sino de verdade */
  animation: mos-sino-toca 3s ease-in-out infinite;
}
.cardapio-mosaico .mos-story-sino:active { filter: brightness(.88); }  /* transform brigaria com a animação */
.cardapio-mosaico .mos-story-n {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: #111; color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--mos-fundo, #fff);
}
@keyframes mos-sino-toca {
  0%, 40%, 100% { transform: rotate(0); }
  42% { transform: rotate(16deg); }
  46% { transform: rotate(-14deg); }
  50% { transform: rotate(11deg); }
  54% { transform: rotate(-9deg); }
  58% { transform: rotate(6deg); }
  62% { transform: rotate(-4deg); }
  66% { transform: rotate(2deg); }
}
/* Quem pediu menos movimento recebe menos MOVIMENTO — não menos informação.
   A primeira versão só zerava a animação, e o sino nasceu justamente porque
   "no mosaico o story passa despercebido, precisa ter movimento" (Cayu, 19/08):
   parado e sem nada no lugar, ele volta a passar despercebido. E isso não é
   caso raro — o modo de economia de bateria do Android liga `reduce` sozinho,
   então é o que boa parte dos celulares vê.
   Troca: anel de destaque fixo em volta do sino, no lugar do balanço. Estático,
   visível, e não briga com o `:active` (que usa filter, não transform). */
@media (prefers-reduced-motion: reduce) {
  .cardapio-mosaico .mos-story-sino {
    animation: none;
    box-shadow: 0 2px 6px rgba(239,68,68,.45), 0 0 0 3px rgba(239,68,68,.28);
  }
}

/* "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; }

/* O modal de Ofertas (markup, CSS e gatilho) mudou-se para o par
   include/ofertas_modal.php + css/cardapio.css em 2026-08-21: a skin Loja
   Virtual passou a usar a MESMA aba, e regra de skin não serve duas skins. */

/* "Ver mais itens" — só existe em catálogo grande (funcoes/CardapioPaginacao.php).
   O contador embaixo do botão ("50 de 520 itens") não é enfeite: sem ele o
   cliente não sabe se faltam 3 itens ou 300, e é essa a diferença entre
   continuar clicando e desistir da loja. */
.mos-mais { padding: 18px 16px 28px; text-align: center; }
.mos-mais-btn {
  display: inline-block; text-decoration: none;
  width: 100%; max-width: 340px; padding: 12px 18px;
  border: 1px solid var(--mos-borda); border-radius: 10px;
  background: transparent; color: var(--mos-texto);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.mos-mais-btn:hover { background: rgba(127,127,127,.08); }
.mos-mais-btn.ocupado { opacity: .55; cursor: default; }
.mos-mais-conta { margin: 8px 0 0; font-size: 12px; color: var(--mos-suave); }

/* ── Esgotado ────────────────────────────────────────────────────────────────
 * O item de estoque zerado continua na grade, marcado — ver o bloco "ESGOTADO"
 * do cardapio.css, que é onde a decisão está escrita por inteiro. Aqui só as
 * classes .mos-.
 *
 * O Mosaico é a skin de 93 das 106 lojas: é por aqui que a mudança vai ser
 * vista. Na GRADE o selo vai sobre a foto (é tudo que a célula tem de espaço);
 * na LISTA vira etiqueta ao lado do nome, porque a foto é pequena demais. */
.cardapio-mosaico .mos-selo-esgotado{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:rgba(17,24,39,.88);color:#fff;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}

.cardapio-mosaico .mos-esgotado .mos-celula-foto img,
.cardapio-mosaico .mos-esgotado .mos-linha-foto img{filter:grayscale(.65);opacity:.72}
.cardapio-mosaico .mos-esgotado .mos-celula-nome,
.cardapio-mosaico .mos-esgotado .mos-linha-nome{opacity:.78}
.cardapio-mosaico .mos-esgotado .mos-preco{color:#6b7280}

/* Etiqueta ao lado do nome — mesmo vocabulário do "Bacon · esgotado" dos
   adicionais (.option-esgotado-tag), porque o fundo aqui também é branco. */
.cardapio-mosaico .mos-tag-esgotado{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:#fee2e2;color:#b3261e;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}

.cardapio-mosaico .mos-add-off{background:#9ca3af;color:#fff;cursor:not-allowed}

/* A capa acompanha a largura do resto da página (2026-08-22).
   `.banner-section` se auto-limita a 800px (o padrão do Clássico), mas aqui ela
   mora dentro do `.mos-wrap`, que tem 935px — no desktop a capa saía 135px mais
   estreita que os botões logo acima e que a grade logo abaixo, desalinhada dos
   dois. `max-width:none` faz ela seguir o wrapper em vez de repetir o número:
   no dia em que o Mosaico mudar de largura, a capa muda junto.
   No celular nada muda — lá o teto de 800px nunca chegava a valer. */
.cardapio-mosaico .banner-section { max-width: none; padding-left: 16px; padding-right: 16px; }

/* A capa do Mosaico deixa de ter altura fixa no celular (2026-08-22).
   Cayu: *"no modo mosaico não sei se fica visualmente agradável essa altura
   toda… no desktop tá bom, no celular é que incomoda"*.

   O que é alto aqui NÃO é foto que o lojista subiu: é o `.banner-produto-card`,
   o banner de OFERTA dinâmico (foto + nome + preço + CTA). Ele nasceu com 240px
   porque carrega conteúdo — e 240px lê bem no desktop, onde a caixa tem ~900 de
   largura (3,76:1). No celular a mesma caixa tem 358 e a proporção vira 1,49:1:
   quase quadrada, que é o que o olho registra como "alto demais".

   Medido em produção, iPhone 390x844 no cardápio do Dom Burger: com capa, o 1º
   produto começa em y=763 — aparece como uma fatia de 81px no rodapé. A mesma
   skin SEM capa entrega produto em y=481.

   `clamp()` e não media query: a altura acompanha a LARGURA, que é a variável
   que estraga a proporção. Abaixo de 533px de viewport ela encolhe (390px →
   ~176px, ou 2:1); daí para cima fica nos 240px de sempre, então o desktop não
   muda em nada.

   Só o card de OFERTA. `.banner-img` fica de fora de propósito: ela não tem
   altura fixa, respeita a proporção natural da imagem sob um teto de 200px —
   forçar altura ali passaria a RECORTAR a foto que o lojista escolheu.

   Precedente: o Moderno já faz o mesmo por skin (`body.cardapio-cw
   .banner-produto-card { height:150px !important }`). */
.cardapio-mosaico .banner-produto-card { height: clamp(160px, 45vw, 240px); }