@keyframes wa-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
    70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  .wa-pulse { animation: wa-pulse-anim 2s infinite; }

  /* ============================================
     DESKTOP RESPONSIVE — grid 2/3/4 cols + container
     ============================================ */
  .container-sb { max-width: 100%; margin-left: auto; margin-right: auto; }
  @media (min-width: 768px) {
    .container-sb { max-width: 768px; padding-left: 1.5rem; padding-right: 1.5rem; }
  }
  @media (min-width: 1024px) {
    .container-sb { max-width: 1024px; }
  }
  @media (min-width: 1280px) {
    .container-sb { max-width: 1200px; }
  }

  /* Grid de produtos: 1col mobile, 2col tablet, 3col laptop, 4col desktop grande */
  .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  }
  @media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  }
  @media (min-width: 1440px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* __CARD1156_GRADE_CENTRO_V1__ (issue #1156, vit-12) no computador, categoria com menos produtos
     que colunas deixava os cards encostados na esquerda e um vazio de ~400px a direita, com a busca
     centralizada em cima: a pagina parecia torta (1366px: cards em 107-867 num wrap de 107-1259).
     A fileira incompleta agora fica no centro, com o MESMO tamanho de card da grade cheia, e o
     titulo da categoria acompanha. Classico e editorial; o compacto e lista (ja ocupa a largura).
     Celular e tablet nao mudam (a regra so vale de 1024px para cima). */
  @media (min-width: 1024px) {
    [data-layout="classico"] .product-grid,
    [data-layout="editorial"] .product-grid {
      --grade-cols: 3;
      --grade-gap: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--grade-gap);
    }
    [data-layout="classico"] .product-grid > *,
    [data-layout="editorial"] .product-grid > * {
      flex: 0 0 calc((100% - (var(--grade-cols) - 1) * var(--grade-gap)) / var(--grade-cols));
      max-width: calc((100% - (var(--grade-cols) - 1) * var(--grade-gap)) / var(--grade-cols));
      min-width: 0;
    }
    [data-layout="classico"] #produtos-wrap > section > h2,
    [data-layout="editorial"] #produtos-wrap > section > h2 {
      text-align: center;
    }
    /* as abas de categoria acompanham; `safe` volta a alinhar na esquerda quando elas nao cabem,
       senao a primeira aba ficaria cortada e fora do alcance da rolagem */
    [data-layout="classico"] #cat-tabs-wrap,
    [data-layout="editorial"] #cat-tabs-wrap {
      justify-content: safe center;
    }
  }
  @media (min-width: 1440px) {
    [data-layout="classico"] .product-grid { --grade-cols: 4; }
  }

  /* Cards de produto ficam melhores no desktop com hover */
  @media (min-width: 768px) {
    .product-card {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -8px rgba(0,0,0,0.12);
    }
  }
  /* Em telas >= sm os cards dentro do grid (não os carrossel destaques) viram coluna */
  @media (min-width: 640px) {
    .product-grid .product-card { flex-direction: column !important; }
    .product-grid .product-card img { width: 100% !important; height: 180px !important; object-fit: cover; }
    .product-grid .product-card .product-info { padding: 1rem; }
  }
  @media (min-width: 1024px) {
    .product-grid .product-card img { height: 200px !important; }
  }

  /* Hero maior no desktop */
  @media (min-width: 1024px) {
    #main-header.premium-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  }

  /* ============================================
     __SOBMEDIDA_MODO_A_V1__ — grupos de escolha no produto
     (modo A do artefato "Pedidos sob medida")

     A escolha e a parte mais tocada da tela num lanche montado, entao a linha
     inteira e o alvo de toque — nao a bolinha de 16px. Cor vem das variaveis da
     LOJA (--cor-primaria / --cor-destaque), pra combinar com a marca de cada
     vitrine em vez de fixar uma paleta aqui.
     ============================================ */
  .sb-op-grupo { border: 0; padding: 0; margin: 0 0 1.25rem; }
  .sb-op-grupo:last-child { margin-bottom: 0; }

  .sb-op-legend {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
    width: 100%; padding: 0 0 0.625rem;
  }
  .sb-op-titulo { font-weight: 700; font-size: 0.9375rem; color: #1f2937; }
  /* a regra do grupo e informacao de apoio: fica na direita, apagada */
  .sb-op-regra { margin-left: auto; font-size: 0.75rem; color: #9ca3af; }

  .sb-op-tag {
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 100px; white-space: nowrap;
  }
  .sb-op-tag--req { background: #fef3c7; color: #92400e; }
  .sb-op-tag--ok  { background: #dcfce7; color: #166534; }

  .sb-op-itens { display: flex; flex-direction: column; gap: 0.375rem; }

  .sb-op-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid #e5e7eb; border-radius: 0.75rem;
    cursor: pointer; user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .sb-op-row:hover { border-color: #d1d5db; background: #fafafa; }
  .sb-op-row.is-on {
    border-color: var(--cor-primaria, #5C6B3A);
    background: color-mix(in srgb, var(--cor-primaria, #5C6B3A) 7%, white);
  }
  /* o input nativo sai da tela mas continua existindo: e ele que carrega o estado, o
     foco de teclado e a semantica de radio/checkbox pro leitor de tela */
  .sb-op-input { position: absolute; opacity: 0; width: 0; height: 0; }
  .sb-op-row:focus-within { outline: 2px solid var(--cor-primaria, #5C6B3A); outline-offset: 2px; }

  .sb-op-marca {
    flex: 0 0 auto; width: 20px; height: 20px;
    border: 2px solid #d1d5db; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  /* checkbox (multipla escolha) vira quadrado arredondado — a forma ja diz "da pra
     marcar mais de um" antes de o usuario ler a regra do grupo */
  .sb-op-row input[type="checkbox"] ~ .sb-op-marca { border-radius: 0.375rem; }
  .sb-op-row.is-on .sb-op-marca {
    border-color: var(--cor-primaria, #5C6B3A);
    background: var(--cor-primaria, #5C6B3A);
  }
  .sb-op-row.is-on .sb-op-marca::after {
    content: ''; width: 6px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
  }

  .sb-op-nome { flex: 1 1 auto; font-size: 0.875rem; color: #374151; line-height: 1.35; }
  .sb-op-row.is-on .sb-op-nome { color: #111827; font-weight: 500; }

  .sb-op-delta {
    flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700;
    /* __CARD1150_COR_TEXTO_V1__ destaque claro como TEXTO sobre branco some: versao escurecida ate 4,5:1 */
    color: var(--cor-destaque-legivel, var(--cor-destaque, #c2410c)); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  /* opcao que BAIXA o preco (pizza media) nao pode usar a mesma cor de quem sobe */
  .sb-op-delta--neg { color: #15803d; }

  /* ============================================
     __SOBMEDIDA_MODO_A_V2__ — foto+ingredientes do sabor e adicional somavel

     Tres mudancas pedidas pelo dono depois de ver o V1 rodando:
     1. grupo que aceita UM so vira bolinha mesmo sendo opcional (a borda recheada
        vinha quadrada); a saida e a opcao sintetica "Nao quero", desenhada aqui
        como qualquer outra linha;
     2. sabor de pizza mostra FOTO e os ingredientes — "Portuguesa" sozinho nao
        diz se tem ovo, e e por isso que o cliente abre o cardapio;
     3. adicional deixa de ser liga/desliga e ganha - 1 + : dois bacon no mesmo
        lanche e pedido comum, e antes so dava pra marcar uma vez.
     ============================================ */

  /* nome + ingredientes empilham; a coluna cresce e empurra delta/stepper pra direita */
  .sb-op-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
  .sb-op-desc {
    font-size: 0.75rem; color: #6b7280; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .sb-op-row.is-on .sb-op-desc { color: #4b5563; }

  /* miniatura do sabor: quadrada e pequena — e apoio da decisao, nao o assunto da linha */
  .sb-op-foto {
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
    object-fit: cover; background: #f3f4f6;
  }

  /* nota da regra de preco (meio a meio): precisa vir ANTES das opcoes, senao o cliente
     so descobre como e cobrado depois de escolher */
  .sb-op-nota {
    margin: -0.25rem 0 0.5rem; font-size: 0.75rem; color: #6b7280;
    background: #f9fafb; border-left: 2px solid #d1d5db; padding: 0.375rem 0.5rem;
    border-radius: 0 0.25rem 0.25rem 0;
  }

  /* linha com passo-a-passo nao e <label>: o clique tem que cair nos botoes, e um label
     envolvendo botao rouba o toque no mobile */
  .sb-op-row--qtd { cursor: default; }
  .sb-op-row--qtd:hover { background: #fff; border-color: #e5e7eb; }
  .sb-op-row--qtd.is-on:hover { border-color: var(--cor-primaria, #5C6B3A); }

  .sb-op-stepper {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.125rem;
    border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.125rem; background: #fff;
  }
  .sb-op-passo {
    width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; background: #f3f4f6;
    color: #374151; font-size: 1rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sb-op-passo:hover:not(:disabled) { background: var(--cor-primaria, #5C6B3A); color: #fff; }
  .sb-op-passo:disabled { opacity: 0.35; cursor: not-allowed; }
  .sb-op-passo:focus-visible { outline: 2px solid var(--cor-primaria, #5C6B3A); outline-offset: 2px; }
  .sb-op-qtd {
    min-width: 1.5rem; text-align: center; font-size: 0.875rem; font-weight: 700;
    color: #111827; font-variant-numeric: tabular-nums;
  }

/* ── __CARD518_CONSULTA__ modo consulta (QR da mesa): o cliente VE, nao pede ─────────
   Esconde TODA superficie que leve a fechar pedido (criterio do card: carrinho, checkout,
   "+" do card, upsell, stepper e Adicionar do modal, FABs). display:none aqui e a 1a
   camada; a 2a sao os guards em adicionarAoCarrinho/abrirCarrinho/submeterPedido — CSS
   desfeito no devtools nao vira pedido. */
body.sb-consulta [data-h-click="abrirCarrinho"],
body.sb-consulta [data-h-click="addCarrinho"],
body.sb-consulta #cart-fab,
body.sb-consulta #wa-fab,
body.sb-consulta #cart-overlay,
body.sb-consulta #checkout-overlay,
body.sb-consulta #upsell-overlay,
body.sb-consulta #modal-add-btn,
body.sb-consulta [data-h-click="modalQty_1"],
body.sb-consulta [data-h-click="modalQty_1_2"],
body.sb-consulta #modal-qty,
body.sb-consulta #btn-conta {
  display: none !important;
}