/* =====================================================
     MODO APP — coluna mobile centralizada (look de app no desktop)
     Ativado pela configuração "Modo App" (admin > Configurações).
     Só age em telas grandes; no celular o layout segue idêntico.
     ===================================================== */
  html.app-mode, html.app-mode body { --app-col-width: 448px; }

  @media (min-width: 641px) {
    html.app-mode { background: #111827; }
    html.app-mode body.dark { background: #0b1120; }

    /* Coluna central do cardápio */
    body.app-mode {
      max-width: var(--app-col-width);
      margin: 0 auto;
      min-height: 100vh;
      box-shadow: 0 0 48px rgba(0, 0, 0, 0.55);
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Cabeçalho dentro da coluna */
    body.app-mode header img.bg { height: 190px; }

    /* Barra flutuante do carrinho (desktop) alinhada à coluna */
    body.app-mode .carrinho-flutuante {
      left: 50%;
      right: auto;
      width: var(--app-col-width);
      margin-left: calc(var(--app-col-width) / -2);
    }

    /* Bottom nav mobile alinhada à coluna */
    body.app-mode .bottom-nav-mobile {
      left: 50%;
      right: auto;
      width: var(--app-col-width);
      margin-left: calc(var(--app-col-width) / -2);
    }

    /* Bottom sheet do produto dentro da coluna */
    html.app-mode .produto-modal-content {
      left: 50%;
      right: auto;
      width: var(--app-col-width);
      margin-left: calc(var(--app-col-width) / -2);
      border-radius: 24px 24px 0 0;
    }

    /* Modal de carrinho mobile: folha alinhada à coluna */
    html.app-mode #modal-carrinho-mobile { justify-content: center; }
    html.app-mode #modal-carrinho-mobile-content {
      width: var(--app-col-width);
      border-radius: 24px 24px 0 0;
    }

    /* Modal "Meus Pedidos" dentro da coluna */
    html.app-mode #modal-pedidos > div { max-width: var(--app-col-width) !important; }

    /* Notificações/toasts dentro da coluna */
    body.app-mode .cp-toast-stack {
      left: 50%;
      transform: translateX(-50%);
      width: var(--app-col-width);
      max-width: 100%;
    }
    body.app-mode .cp-toast {
      width: calc(var(--app-col-width) - 32px);
      max-width: 100%;
    }
  }

  .banner-cardapio { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 16px 8px; }
  .banner-cardapio img { width: 100%; border-radius: 12px; object-fit: cover; max-height: 200px; display: block; }