/* =====================================================
   Forno Paulista - visual da loja de pedidos
   Igual ao site: espresso, dourado e vermelho da fome (forno a lenha)
   ===================================================== */
body.vb {
  --fundo: #140d0a; --fundo-2: #1d120d; --fundo-3: #241711; --fundo-4: #2a1a1255;
  --texto: #f3e7d2; --texto-2: #b79e82; --texto-3: #8a715a;
  --borda: rgba(231, 178, 63, .16); --borda-forte: rgba(231, 178, 63, .34);
  --cor: #d4302a; --cor-texto: #fff; --ciano: #e7b23f; --roxo: #e7b23f;
  --ouro: #e7b23f; --ouro-2: #c9962e;
  --raio: 10px; --raio-p: 7px;
  --fonte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vb-display: "Fraunces", "Georgia", serif;
  --vb-logo: "Fraunces", Georgia, serif;
  background: var(--fundo) !important; color: var(--texto); font-family: var(--fonte);
}
body.vb h1, body.vb h2, body.vb h3 { font-family: var(--vb-display); letter-spacing: .01em; }

/* Cabeçalho igual ao do site */
.vb-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(13, 12, 11, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ouro-2); }
.vb-top-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.vb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.vb-logo img { width: 48px; height: 48px; border-radius: 50%; }
.vb-logo b { display: block; font-family: var(--vb-logo); font-weight: 900; font-size: 24px; line-height: 1; color: var(--ouro); white-space: nowrap; }
.vb-logo small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); font-weight: 600; margin-top: 4px; white-space: nowrap; font-family: var(--fonte); }
.vb-top nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.vb-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vb-display); font-weight: 700; font-size: 17px; padding: 9px 18px; border-radius: 6px; text-decoration: none; border: 2px solid transparent; white-space: nowrap; }
.vb-btn.ouro { border-color: var(--ouro); color: var(--ouro); }
.vb-btn.ouro:hover { background: rgba(227, 179, 74, .1); }
.vb-btn.link { color: var(--texto); padding-inline: 8px; }
@media (max-width: 640px) { .vb-logo b { font-size: 20px; } .vb-logo small { display: none; } .vb-btn.link { display: none; } .vb-btn { font-size: 15px; padding: 8px 12px; } }

/* Topo da loja: como o hero do site */
body.vb .capa { padding: 46px 16px 30px; background:
  linear-gradient(90deg, var(--fundo) 0%, rgba(13, 12, 11, .75) 45%, rgba(13, 12, 11, .2) 100%),
  linear-gradient(0deg, var(--fundo) 0%, transparent 40%),
  var(--vb-hero) right center / cover no-repeat, var(--fundo) !important; }
body.vb .capa-tema::before, body.vb .capa-tema::after { display: none; }
body.vb .loja-logo { border-radius: 50%; border: 2px solid var(--ouro); background: #000; }
body.vb .loja-info h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 900; text-transform: none; color: var(--texto); letter-spacing: -.01em; }
body.vb .slogan { font-size: 18px; color: var(--texto); font-weight: 500; }
body.vb .chips-info .selo { font-family: var(--vb-display); font-weight: 600; font-size: 15px; background: rgba(56, 44, 22, .85); border: 1px solid rgba(227, 179, 74, .25); border-radius: 6px; }

/* Categorias e pesquisa */
body.vb .barra-cats { background: rgba(13, 12, 11, .95); top: 73px; }
body.vb .busca input { background: var(--fundo-2); border-color: var(--borda); }
body.vb .cats a { font-family: var(--vb-display); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto); border: 1px solid var(--borda); border-radius: 6px; }
body.vb .cats a.ativo { background: var(--ouro); border-color: var(--ouro); color: #1a1205; }

/* Ementa */
body.vb .cardapio h2 { font-size: 32px; font-weight: 700; text-transform: uppercase; color: var(--ouro); }
body.vb .cat-topo h2::after { content: ""; display: block; width: 46px; height: 3px; background: var(--cor); margin-top: 8px; border-radius: 2px; }
body.vb .card-destaque, body.vb .produto, body.vb .cartao { background: var(--fundo-3); border: 1px solid transparent; border-radius: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
body.vb .card-destaque:hover, body.vb .produto:hover { border-color: var(--ouro-2); }
body.vb .p-nome, body.vb .cd-info b { font-family: var(--vb-display); font-size: 21px; font-weight: 700; }
body.vb .preco { font-family: var(--vb-display); font-size: 22px; font-weight: 800; color: var(--ouro); }
body.vb .p-img { border-radius: 6px; }
body.vb .selo.roxo { background: rgba(198, 33, 39, .18); color: #ff8a8f; }

/* Janela do produto, carrinho, checkout */
body.vb .janela-caixa { background: var(--fundo-2); border: 1px solid var(--borda); }
body.vb #jpNome, body.vb .sacola-topo h3 { font-size: 30px; text-transform: uppercase; color: var(--ouro); }
body.vb .grupo legend, body.vb .grupo-titulo { font-family: var(--vb-display); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
body.vb .btn.primario { font-family: var(--vb-display); font-size: 18px; font-weight: 700; border-radius: 6px; box-shadow: 0 6px 18px rgba(198, 33, 39, .35); }
body.vb .barra-sacola { background: var(--cor); color: #fff; border-radius: 8px; font-family: var(--vb-display); font-size: 18px; }
body.vb .topo-simples h1 { font-size: 28px; text-transform: uppercase; color: var(--ouro); }
body.vb .cartao h2 { font-size: 22px; text-transform: uppercase; color: var(--ouro); }
body.vb .codigo-pedido { color: var(--ouro); }
body.vb .escolha input:checked + span { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset; background: rgba(227, 179, 74, .08); }
body.vb input, body.vb select, body.vb textarea { background: var(--fundo); border-color: var(--borda); }

/* Rodapé */
body.vb .rodape-loja { background: var(--fundo); border-top: 0; padding-top: 0; }
body.vb .rodape-loja::before { content: "Grelhados no carvão · Hambúrgueres · Feijoada aos sábados · Nazaré"; display: block; margin: 0 -16px 24px; padding: 10px 16px; text-align: center; font-family: var(--vb-display); font-weight: 600; font-size: 17px; color: var(--ouro); background: linear-gradient(90deg, #3a2c10, #5a4416, #3a2c10); }
body.vb .rodape-links a, body.vb .assinatura a { color: var(--ouro); }

/* Produto sem foto: logótipo da casa em vez da ilustração genérica */
body.vb img[src$="sem-foto.svg"] { content: url("../../../uploads/logo-180.png"); object-fit: contain; padding: 14%; background: #000; }

/* ===== Fundo rotativo do topo da loja ===== */
body.vb .capa{position:relative;isolation:isolate}
body.vb .capa-slides{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body.vb .capa-slides .cs{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.1s ease}
body.vb .capa-slides .cs.on{opacity:1}
body.vb .capa-slides::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--fundo) 0%,rgba(20,13,10,.72) 45%,rgba(20,13,10,.22) 100%),
  linear-gradient(0deg,var(--fundo) 0%,transparent 44%)}