/* ===================================================================
   Loja 2M Bronze — estilo cardápio mobile (inspirado no Goomer)
   =================================================================== */
:root{
  --cor: #6d0f1f;          /* bordô da marca (botões, barra, abas) */
  --gold: #d99a3c;         /* dourado da marca (detalhes, unidade) */
  --bg: #f5f5f7;
  --card: #ffffff;
  --texto: #1c1c1e;
  --cinza: #8a8a8e;
  --linha: #ececf0;
  --verde: #1db954;
  --raio: 14px;
  --sombra: 0 2px 10px rgba(0,0,0,.06);
}
/* Modo escuro */
body.loja.escuro{ --bg:#141419; --card:#1f1f27; --texto:#f1f1f4; --cinza:#9a9aa4; --linha:#2e2e39;
  --sombra:0 2px 10px rgba(0,0,0,.4); background:#141419; }
body.loja.escuro .sheet, body.loja.escuro .produto, body.loja.escuro .destaque-card,
body.loja.escuro .cupom-card, body.loja.escuro .metodo-card, body.loja.escuro .busca-wrap,
body.loja.escuro #busca, body.loja.escuro .pag-op, body.loja.escuro .frete-op,
body.loja.escuro .endereco, body.loja.escuro .btn-pedidos, body.loja.escuro .cart-form input,
body.loja.escuro .conta-sec .campo input, body.loja.escuro .ct-select, body.loja.escuro .ct-end,
body.loja.escuro input, body.loja.escuro select, body.loja.escuro textarea,
body.loja.escuro .produto-desc, body.loja.escuro .cupom-ic{ background:var(--card); color:var(--texto); border-color:var(--linha); }
body.loja.escuro .cart-rodape, body.loja.escuro .sheet-carrinho{ background:var(--card); }
body.loja.escuro .capa-info h1{ color:#e79a9f; }   /* nome mais claro no escuro */
body.loja.escuro .sem-foto{ background:#2a2a33; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
/* overflow-x só no html: propaga pra viewport e trava a rolagem lateral sem
   virar contêiner de rolagem — no body ele quebraria o position:sticky */
/* scrollbar-gutter:stable reserva o espaço da barra de rolagem vertical SEMPRE.
   Sem isso, uma tela curta (sem scroll) fica mais larga que uma tela longa (com
   scroll), e o conteúdo centralizado PULA pra esquerda/direita ao trocar de aba. */
html{ overflow-x:clip; scrollbar-gutter:stable; }
html,body{ background:var(--bg); color:var(--texto); max-width:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
body.loja{ max-width:480px; margin:0 auto; padding-bottom:90px; position:relative; background:#fff; min-height:100vh;
  font-family:var(--fonte-loja, "Nunito"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.oculto{ display:none !important; }

/* ---------- Seletor de idioma ---------- */
.lang-sel{ position:absolute; top:12px; right:12px; z-index:30; display:flex; gap:6px; }
.lang-btn{ background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:10px; padding:9px 15px;
  font-size:14px; font-weight:800; cursor:pointer; }
.lang-btn.sel{ background:var(--cor); }

/* ---------- Capa ---------- */
.capa{ position:relative; }
.capa-img{ height:var(--capa-h, 112px); background-size:cover; background-position:center;
  background-image:radial-gradient(130% 120% at 50% -10%, #b8862f 0%, #7c1226 34%, #4a0c17 100%); }
.capa-info{ padding:0 18px 14px; margin-top:calc(-1 * var(--logo-offset, 80px)); position:relative; text-align:center; }
.logo{ width:var(--logo-size, 84px); height:var(--logo-size, 84px); border-radius:var(--logo-radius, 50%);
  margin:0 auto 8px; background:#fff; border:3px solid #fff; box-shadow:var(--sombra); overflow:hidden; display:flex;
  align-items:center; justify-content:center; }
.logo img{ width:100%; height:100%; object-fit:cover; }
.logo span{ font-size:26px; font-weight:800; color:var(--cor); }
.capa-info h1{ font-size:var(--nome-size, 22px); font-weight:900; color:var(--cor); }
.capa-info .desc{ font-size:13px; color:var(--cinza); margin-top:2px; }

/* --- Cardápio (loja física atendida pelo WhatsApp): visual enxuto ---
   Some o horário/"loja aberta" e o "faça seu pedido a qualquer hora" (aqui o
   atendimento é por WhatsApp, a qualquer hora), a faixa fica bem fina e um selo
   "Cardápio" dá a identidade que separa do site online. Vale no celular e no PC. */
body.cardapio .status-lista,
body.cardapio .status-row,
body.cardapio .btn-pedido,
body.cardapio .pc-status{ display:none !important; }
body.cardapio .capa-img{ height:88px; }
body.cardapio .selo-cardapio{
  display:inline-block; margin:6px auto 0; font-size:11.5px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; color:#fff; background:var(--cor);
  padding:3px 12px; border-radius:999px; }
.badges{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.badge{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px;
  background:var(--linha); color:var(--cinza); }
.badge.aberto{ background:rgba(29,185,84,.12); color:var(--verde); }
.badge.fechado{ background:rgba(255,59,48,.12); color:#ff3b30; }
/* Cupons — faixa de cartões (3 cabem sem arrastar) */
/* Banner promocional da vitrine — imagem larga, cantos arredondados. A altura
   segue a proporção da imagem (ideal 1200×400). */
.promo-banner{ display:block; margin:10px 12px; border-radius:14px; overflow:hidden;
  box-shadow:var(--sombra); }
.promo-banner img{ width:100%; height:auto; display:block; }
.cupons-faixa{ display:flex; gap:7px; overflow-x:auto; padding:10px 12px; -webkit-overflow-scrolling:touch; }
.cupom-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  flex:1 1 0; min-width:96px; border:1px solid var(--linha); border-radius:11px;
  padding:9px 6px; background:#fff; cursor:pointer; }
.cupom-card:active{ opacity:.8; }
/* Cupom de frete grátis: chama atenção (pulso verde + brilho passando) */
.cupom-card.cupom-frete{ position:relative; overflow:hidden; border-color:#25a25a;
  animation:freteGlow 1.7s ease-in-out infinite; }
.cupom-card.cupom-frete .cupom-ic{ background:rgba(37,162,90,.15); }
.cupom-card.cupom-frete .cupom-titulo{ color:#137a3a; }
.cupom-card.cupom-frete::after{ content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform:translateX(-180%); animation:freteShine 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes freteGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,162,90,.0); }
  50%{ box-shadow:0 0 0 4px rgba(37,162,90,.18); } }
@keyframes freteShine{ 0%{ transform:translateX(-180%); } 55%,100%{ transform:translateX(320%); } }
.cupom-card.vitrine{ cursor:default; }
.cupom-card.vitrine:active{ opacity:1; }
.cupom-ic{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:rgba(109,15,31,.08); flex:none; }
.cupom-titulo{ font-weight:800; font-size:12.5px; line-height:1.1; }
.cupom-sub{ font-size:10px; color:var(--cinza); line-height:1.15; }
/* Cupom no checkout */
.cupom-checkout{ display:flex; gap:8px; margin-bottom:8px; }
/* min-width:0 é o que faz o campo encolher de verdade: sem isso o input tem
   largura mínima de ~20 caracteres e empurra o botão Aplicar pra fora da tela. */
.cupom-checkout input{ flex:1 1 auto; min-width:0; text-transform:uppercase; }
.cupom-checkout .btn{ flex:0 0 auto; white-space:nowrap; }
.cupom-msg{ font-size:12px; font-weight:600; margin-bottom:8px; }
.cupom-msg.ok{ color:var(--verde); }
.cupom-msg.erro{ color:#c0242a; }

/* Status estilo Google: "Fechado · Abre às 08:00" (centralizado) */
.status-lista{ display:flex; flex-direction:column; gap:10px; margin-top:12px; align-items:center; }
.btn-pedido{ display:inline-block; background:var(--verde); color:#fff; font-weight:700;
  padding:10px 22px; border-radius:999px; font-size:14px; text-decoration:none; }
.btn-pedido:active{ opacity:.85; }
.status-row{ display:flex; align-items:baseline; justify-content:center; gap:6px; font-size:14px; }
.st-word{ font-weight:700; }
.st-word.ok{ color:var(--verde); }
.st-word.no{ color:#c0242a; }
.st-sep{ color:var(--cinza); }
.st-frase{ color:var(--cinza); }
.endereco{ font-size:11px; color:var(--texto); margin:10px auto 0; background:rgba(109,15,31,.06);
  border:1.5px solid var(--cor); border-radius:14px; padding:9px 14px; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:10px; line-height:1.3; text-align:left; width:94%; max-width:520px; box-sizing:border-box; }
.endereco:active{ opacity:.8; }
.end-pin{ font-size:18px; line-height:1; flex:none; }
.end-txt{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.end-rua{ font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.end-sec{ font-size:11px; color:var(--cinza); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.end-cta{ color:var(--cor); font-weight:800; font-size:11px; margin-left:auto; flex:none; white-space:nowrap; }
/* Tutorial guiado (gestos na própria navegação) */
.gtut{ position:fixed; inset:0; z-index:130; }
.gtut.oculto{ display:none; }
.gtut-spot{ position:absolute; border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.72);
  transition:left .45s ease, top .45s ease, width .45s ease, height .45s ease; pointer-events:none;
  border:2px solid rgba(255,255,255,.9); }
.gtut-hand{ position:absolute; font-size:42px; pointer-events:none; z-index:2;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.gtut-hand.tap{ animation:gtutTap 1.15s ease-in-out infinite; }
@keyframes gtutTap{ 0%,100%{ transform:scale(1) translateY(0); } 45%{ transform:scale(.68) translateY(5px); } }
.gtut-hand.swipe{ animation:gtutSwipe 1.5s ease-in-out infinite; }
@keyframes gtutSwipe{ 0%{ transform:translateX(52px) rotate(6deg); } 50%{ transform:translateX(-52px) rotate(-6deg); } 100%{ transform:translateX(52px) rotate(6deg); } }
.gtut-cap{ position:absolute; background:#fff; color:#222; font-weight:700; font-size:14px; line-height:1.35;
  padding:11px 15px; border-radius:14px; max-width:250px; text-align:center; z-index:3;
  box-shadow:0 10px 30px rgba(0,0,0,.35); }
.gtut-cap::before{ content:""; position:absolute; top:-8px; left:50%; margin-left:-8px; border:8px solid transparent;
  border-top:0; border-bottom:8px solid #fff; }
.gtut-btn{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:4; min-width:190px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); }
.endereco:active{ opacity:.75; }
/* Nota do Google (perto do endereço) */
/* Nota do Google dentro do botão do endereço (lado direito) */
.end-nota{ margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding-left:10px; line-height:1; }
.end-nota .nota-num{ color:#c8860a; font-weight:900; font-size:13px; }
.end-nota .nota-estrelas{ position:relative; display:inline-block; font-size:12px; line-height:1;
  letter-spacing:.5px; color:#e0e0e0; }
.end-nota .nota-estrelas::before{ content:"★★★★★"; position:absolute; left:0; top:0; color:#f5b301;
  white-space:nowrap; overflow:hidden; width:var(--nota,100%); }
.end-nota .nota-estrelas::after{ content:"★★★★★"; }
.end-nota .nota-qtd{ color:var(--cinza); font-size:10px; font-weight:600; }
.end-seta{ color:var(--cor); font-weight:800; }
.sheet-mapas{ padding:22px 18px 26px; }
/* Pop-up de cadastro (boas-vindas) */
.sheet-cadastro{ padding:24px 20px 26px; text-align:center; }
.bv-logo{ width:72px; height:72px; margin:0 auto 10px; border-radius:50%; overflow:hidden;
  background:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--cor); font-size:22px; }
.bv-logo img{ width:100%; height:100%; object-fit:cover; }
.sheet-cadastro input{ width:100%; padding:12px 14px; border:1px solid var(--linha); border-radius:10px;
  font-size:15px; font-family:inherit; }
.bv-nota{ text-align:center; font-size:12px; color:var(--cinza); margin-top:10px; }

/* ---------- "Foi pro carrinho" ----------
   A foto do produto voa até o carrinho e o carrinho dá um pulo. Serve pra
   cliente saber que o toque pegou: sem confirmação ela toca de novo e sai com
   dois do mesmo item. */
/* O número dourado. Dourado porque é a segunda cor da marca (--gold) e destaca
   sobre o bordô e sobre a foto do produto sem competir com o preço. */
.num-voa{
  position:fixed; z-index:200; pointer-events:none;
  font-family:inherit; font-size:26px; font-weight:900; line-height:1;
  padding:6px 13px; border-radius:999px; white-space:nowrap;
  color:#fff;
  background:linear-gradient(145deg,#f0c36a 0%,#d99a3c 45%,#b8782a 100%);
  border:1.5px solid rgba(255,255,255,.65);
  /* dois brilhos: um recorte claro em volta e um halo dourado difuso */
  box-shadow:0 0 0 3px rgba(217,154,60,.22), 0 8px 22px rgba(184,120,42,.5);
  text-shadow:0 1px 2px rgba(120,70,10,.55);
}
/* Saindo do carrinho: mesma família, mas apagado — some em vez de brilhar. */
.num-voa.saiu{
  background:linear-gradient(145deg,#cfcfd6 0%,#a9a9b3 100%);
  box-shadow:0 0 0 3px rgba(150,150,160,.18), 0 6px 16px rgba(90,90,100,.35);
  text-shadow:0 1px 2px rgba(60,60,70,.4);
  font-size:22px;
}
/* Faíscas que estouram no carrinho quando o número chega. */
.faisca{
  position:fixed; z-index:199; pointer-events:none;
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, #f0c36a 45%, #d99a3c 100%);
  box-shadow:0 0 8px rgba(240,195,106,.9);
}

/* O pulo do carrinho ao receber. Curto de propósito — é confirmação, não
   espetáculo, e ele repete a cada item que entra. */
@keyframes cart-pulo{
  0%{ transform:translateX(-50%) scale(1) }
  35%{ transform:translateX(-50%) scale(1.13) }
  60%{ transform:translateX(-50%) scale(.97) }
  100%{ transform:translateX(-50%) scale(1) }
}
.barra-carrinho.pulou{ animation:cart-pulo .42s ease-out; }

/* No PC o carrinho está na barra do topo e NÃO é centralizado por transform —
   usar a mesma animação o jogaria pra esquerda no meio do pulo. */
@media (min-width:1000px){
  @keyframes cart-pulo-pc{
    0%{ transform:scale(1) } 35%{ transform:scale(1.13) }
    60%{ transform:scale(.97) } 100%{ transform:scale(1) }
  }
  .barra-carrinho.pulou{ animation-name:cart-pulo-pc; }
}

@media (prefers-reduced-motion:reduce){
  .barra-carrinho.pulou{ animation:none; }
}

/* ---------- Escolha do brinde no carrinho ----------
   Só aparece quando o cupom aplicado dá direito a escolher. Fica dentro do
   rodapé do carrinho, logo abaixo do cupom, pra a cliente ver o que ganhou no
   mesmo lugar onde vê o desconto. */
.brinde-box{ border:1.5px dashed var(--gold); border-radius:12px; padding:11px 12px;
  margin-bottom:10px; background:rgba(217,154,60,.07); }
.brinde-topo{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.brinde-topo .brinde-ic{ font-size:19px; line-height:1; }
.brinde-topo b{ display:block; font-size:13.5px; }
.brinde-topo small{ font-size:11.5px; color:var(--cinza); }
.brinde-opcoes{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; scrollbar-width:none; }
.brinde-opcoes::-webkit-scrollbar{ display:none; }
.brinde-op{ position:relative; flex:0 0 auto; width:84px; border:1.5px solid var(--linha);
  border-radius:10px; background:#fff; padding:6px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; gap:5px; align-items:center; transition:.14s; }
.brinde-op img, .brinde-op .sem{ width:100%; height:60px; border-radius:7px; object-fit:cover;
  background:var(--bg); display:block; }
.brinde-op .bn{ font-size:10.5px; font-weight:700; line-height:1.2; text-align:center;
  color:var(--texto); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; }
.brinde-op.sel{ border-color:var(--gold); background:rgba(217,154,60,.12); }
/* Quantas unidades daquele brinde ela escolheu — só aparece se for mais de zero. */
.brinde-op .qn{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px;
  border-radius:999px; background:var(--gold); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }

/* Cliente reconhecida pelo WhatsApp: substitui os campos de cadastro por uma
   saudação. Verde porque é confirmação, não alerta. */
.bv-conhecida{ display:flex; align-items:center; gap:10px; margin-top:10px;
  background:rgba(29,185,84,.10); border:1px solid rgba(29,185,84,.45);
  border-radius:12px; padding:11px 12px; }
.bv-conhecida .bv-ok{ width:24px; height:24px; flex:none; border-radius:50%;
  background:var(--verde); color:#fff; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.bv-conhecida div{ flex:1; min-width:0; line-height:1.3; }
.bv-conhecida b{ font-size:14px; display:block; }
.bv-conhecida small{ font-size:11.5px; color:var(--cinza); }
/* "Não sou eu" é saída de emergência: precisa existir, não precisa competir
   com o botão de entrar. */
.bv-conhecida button{ flex:none; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--cinza);
  text-decoration:underline; padding:4px; }
.mapa-op{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--linha);
  border-radius:12px; margin-bottom:10px; font-size:16px; font-weight:700; }
.mapa-op span{ font-size:22px; }
.mapa-op:active{ background:var(--bg); }

.aviso-topo{ background:var(--cor); color:#fff; font-size:13px; text-align:center;
  padding:8px 14px; font-weight:600; }

/* ---------- Busca ---------- */
.busca-wrap{ padding:8px 14px; position:sticky; top:0; z-index:22;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  transition:padding-left .18s ease; }
/* grudada no topo: recua pra não passar por baixo do "Minha conta" + tema.
   Só em tela estreita — no desktop a coluna é centralizada e os botões não cobrem. */
.busca-wrap.presa{ box-shadow:0 2px 10px rgba(0,0,0,.07); }
@media (max-width:900px){
  /* Busca grudada: os botões (Minha conta + tema) ficam à ESQUERDA dela — do
     mesmo lado que já estão no topo, sem pular de lado — e a busca recua à
     esquerda pra não ficar embaixo deles. */
  .busca-wrap.presa{ padding-left:62px; }                 /* só o botão de tema */
  body.tem-conta .busca-wrap.presa{ padding-left:196px; } /* + "Minha conta" */
}
.busca-campo{ position:relative; }
.busca-campo .lupa{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:15px; opacity:.55; pointer-events:none; line-height:1; }
#busca{ width:100%; padding:12px 16px 12px 40px; border:1.5px solid var(--linha);
  border-radius:12px; background:var(--card); color:var(--texto);
  font-size:15px; outline:none; box-shadow:0 1px 5px rgba(0,0,0,.05); transition:.15s; }
#busca::placeholder{ color:var(--cinza); }
#busca:focus{ border-color:var(--cor); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
body.loja.escuro .busca-wrap{ background:rgba(20,20,25,.97); }

/* ---------- Abas de categoria (sticky, logo abaixo da busca) ---------- */
.cat-tabs{ position:sticky; top:52px; z-index:20; display:flex; gap:8px; overflow-x:auto;
  padding:10px 14px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha); scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-chip{ flex:0 0 auto; font-size:13px; font-weight:600; color:var(--cinza);
  padding:8px 14px; border-radius:20px; background:var(--bg); white-space:nowrap; transition:.15s; }
.cat-chip.ativo{ background:var(--cor); color:#fff; }

/* ---------- Categorias e produtos ---------- */
.categoria{ padding:18px 14px 6px; scroll-margin-top:60px; }
/* Deslize entre categorias (swipe) */
@keyframes slideEsq{ from{ transform:translateX(32px); opacity:.3; } to{ transform:translateX(0); opacity:1; } }
@keyframes slideDir{ from{ transform:translateX(-32px); opacity:.3; } to{ transform:translateX(0); opacity:1; } }
#cardapio.anim-esq{ animation:slideEsq .28s ease; }
#cardapio.anim-dir{ animation:slideDir .28s ease; }
.cat-titulo{ font-size:18px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.cat-logo-titulo{ width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff; }
.produto{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--linha);
  cursor:pointer; align-items:center; }
.produto:active{ opacity:.6; }
.produto-texto{ flex:1; min-width:0; order:1; }
.produto-foto{ order:0; }            /* foto à esquerda */
.produto-acao{ order:2; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.produto-texto h3{ font-size:15px; font-weight:700; line-height:1.25; }
.unidade{ font-size:12px; color:var(--gold); font-weight:700; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.produto-desc{ font-size:13px; color:var(--cinza); margin-top:6px; line-height:1.4; }
.desc-toggle{ margin-top:6px; background:none; border:none; padding:0; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--gold); }
.desc-toggle:hover{ text-decoration:underline; }
/* ➕ minimalista pra abrir mais informações do produto */
.desc-mais{ position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:22px;
  font-weight:700; cursor:pointer; padding:0; z-index:2; }
.preco{ font-size:15px; font-weight:800; color:var(--texto); margin-top:8px; }
.produto-foto{ position:relative; width:96px; height:96px; flex:0 0 96px; }
.produto-foto img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.sem-foto{ width:100%; height:100%; border-radius:12px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
  color:var(--linha); }
.mais{ width:34px; height:34px; border-radius:50%;
  background:var(--cor); color:#fff; font-size:22px; font-weight:600; display:flex;
  align-items:center; justify-content:center; box-shadow:var(--sombra); }
/* Quick-add (– 0 +) na coluna de ação do card */
.qa-stepper{ display:flex; flex-direction:row; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--linha); border-radius:22px; padding:5px 10px; }
.qa-stepper.ativo{ border-color:var(--cor); }
.qa-stepper button{ border:none; background:none; color:var(--cor); font-size:20px; line-height:1;
  width:18px; height:22px; cursor:pointer; }
.qa-qtd{ min-width:10px; text-align:center; font-weight:800; font-size:14px; color:var(--texto); }

/* Info da loja no topo (tempo de entrega / pedido mínimo) */
.loja-info{ font-size:12px; color:var(--cinza); margin-top:6px; }

/* Selo/badge no card */
.selo{ position:absolute; top:6px; left:6px; z-index:2; font-size:10px; font-weight:800;
  color:#fff; background:var(--texto); padding:3px 7px; border-radius:8px; letter-spacing:.2px; }
.selo.promo{ background:var(--cor); }

/* Seção Destaques (cards horizontais) */
.destaques{ padding:14px 0 6px; border-bottom:8px solid var(--bg); }
.destaques .cat-titulo{ padding:0 14px 10px; }
.destaques-lista{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 14px 4px; }
.destaque-card{ min-width:0; }
.destaque-foto{ position:relative; width:100%; height:140px; border-radius:12px;
  background:var(--bg) center/cover no-repeat; }
.destaque-nome{ font-size:13px; font-weight:600; margin-top:6px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.destaque-preco{ font-size:14px; margin-top:2px; }
.destaque-preco b{ font-weight:800; }
.destaque-preco s{ color:var(--cinza); font-size:11px; }
.destaque-card .qa-stepper{ width:100%; justify-content:space-between; margin-top:6px; }
.destaque-mais{ display:block; text-align:center; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--cor); border:1px solid var(--linha); border-radius:20px; padding:6px; }

.vazio{ text-align:center; padding:60px 20px; color:var(--cinza); }
.vazio .btn{ display:inline-block; margin-top:12px; background:var(--cor); color:#fff;
  padding:10px 18px; border-radius:10px; font-weight:600; }

/* ---------- Barra do carrinho ---------- */
.barra-carrinho{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px;
  width:calc(100% - 28px); max-width:452px; z-index:40; border:none; cursor:pointer;
  background:var(--cor); color:#fff; padding:15px 18px; border-radius:14px;
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.2); }
.barra-carrinho .qtd{ background:rgba(255,255,255,.25); min-width:26px; height:26px;
  border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.barra-carrinho .total{ margin-left:auto; }

/* ---------- Sheets (modais) ---------- */
.sheet-overlay{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; }
.sheet{ background:#fff; width:100%; max-width:480px; max-height:92vh; overflow-y:auto; overflow-x:hidden;
  border-radius:20px 20px 0 0; position:relative; animation:sobe .25s ease; }
@keyframes sobe{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.fechar{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px;
  border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:15px; cursor:pointer; }
.sheet-foto{ height:250px; background:var(--bg) center/cover no-repeat; }
.sheet-video{ position:relative; width:100%; padding-top:56.25%; background:#000; }
.sheet-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sheet-thumbs{ display:flex; gap:8px; padding:10px 14px 0; overflow-x:auto; }
.sheet-thumbs::-webkit-scrollbar{ display:none; }
.thumb{ flex:0 0 auto; width:56px; height:56px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; position:relative; background:var(--bg) center/cover; }
.thumb.sel{ border-color:var(--cor); }
.thumb.thumb-video::after{ content:"▶"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-size:16px; }
.sheet-corpo{ padding:16px 18px 8px; }
.sheet-corpo h3{ font-size:19px; font-weight:800; }
.sheet-corpo .produto-desc{ -webkit-line-clamp:unset; margin-top:8px; }
.sheet-corpo .preco{ font-size:20px; }
.sheet-rodape{ display:flex; gap:12px; align-items:center; padding:14px 18px;
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--linha); }
.stepper{ display:flex; align-items:center; gap:14px; border:1px solid var(--linha);
  border-radius:12px; padding:8px 12px; }
.stepper button{ border:none; background:none; font-size:22px; color:var(--cor);
  width:24px; cursor:pointer; }
.btn-add{ flex:1; border:none; background:var(--cor); color:#fff; padding:14px;
  border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; }
.btn-add.wpp{ background:var(--verde); }

/* ---------- Carrinho ---------- */
.sheet-carrinho{ padding-bottom:0; }
.sheet-titulo{ padding:16px 18px; font-size:18px; font-weight:800; border-bottom:1px solid var(--linha); }
.cart-itens{ padding:6px 18px; }
.btn-add-mais{ display:block; width:calc(100% - 36px); margin:4px 18px 8px; padding:13px;
  border:1px solid var(--linha); background:var(--card); color:var(--cor); font-weight:700;
  font-size:15px; border-radius:12px; cursor:pointer; font-family:inherit;
  transition:border-color .15s, background .15s; }
.btn-add-mais:hover{ border-color:var(--cor); background:rgba(109,15,31,.04); }
.btn-add-mais:active{ transform:scale(.98); background:rgba(109,15,31,.08); }
.cart-item{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--linha); }
.cart-item .ci-nome{ flex:1; font-size:14px; font-weight:600; }
.cart-item .ci-preco{ font-size:14px; font-weight:700; }
.cart-item .mini-stepper{ display:flex; align-items:center; gap:10px; }
.cart-item .mini-stepper button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--linha);
  background:#fff; font-size:16px; color:var(--cor); cursor:pointer; }
.cart-form{ padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.cart-form label{ font-size:13px; font-weight:600; color:var(--cinza); display:flex; flex-direction:column; gap:5px; }
/* Um só desenho pra todos os campos do checkout — sem o `type` de cada um, senão
   o e-mail (e qualquer campo novo) fica com a caixa quadrada do navegador. */
.cart-form input:not([type=radio]):not([type=checkbox]),
.cart-form select, .cart-form textarea,
.cupom-checkout input{ padding:11px 13px; border:1px solid var(--linha);
  border-radius:10px; font-size:15px; color:var(--texto); background:transparent;
  font-family:inherit; }
.cart-form input:not([type=radio]):focus, .cart-form select:focus,
.cart-form textarea:focus, .cupom-checkout input:focus{
  outline:none; border-color:var(--cor); }
.entrega-opts{ display:flex; gap:10px; }
.radio{ flex:1; flex-direction:row !important; align-items:center; gap:8px; border:1px solid var(--linha);
  padding:11px; border-radius:10px; color:var(--texto) !important; transition:border-color .15s, background .15s; }
/* a escolhida precisa saltar aos olhos — antes só o pontinho do rádio mudava */
.radio:has(input:checked){ border-color:var(--cor); border-width:2px; padding:10px;
  background:color-mix(in srgb, var(--cor) 7%, transparent); font-weight:700; }
.radio input[type=radio]{ accent-color:var(--cor); width:18px; height:18px; }
.end-linha{ display:flex; gap:10px; }
.end-linha label{ min-width:0; }
.end-linha input{ width:100%; }
/* Mapa do cliente (estilo Uber: pino fixo no centro, mapa se move) */
.mapa-wrap{ margin-top:12px; }
.mapa-titulo{ font-size:12px; font-weight:600; color:var(--cinza); margin-bottom:6px; }
.mapa-box{ position:relative; height:180px; border-radius:14px; overflow:hidden; }
#mapaCliente{ position:absolute; inset:0; z-index:0; }
.pino-fixo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
  z-index:5; pointer-events:none; }
.pino{ width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--cor);
  transform:rotate(-45deg); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.pino::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  background:#fff; border-radius:50%; transform:translate(-50%,-50%) rotate(45deg); }
.pino-sombra{ width:14px; height:5px; background:rgba(0,0,0,.25); border-radius:50%;
  margin:2px auto 0; filter:blur(1px); }
.frete-gratis-aviso{ font-size:13px; font-weight:600; color:var(--verde);
  background:rgba(29,185,84,.1); padding:8px 10px; border-radius:8px; margin-top:8px; }
.frete-falta-aviso{ font-size:13px; font-weight:600; color:var(--cor);
  background:rgba(109,15,31,.07); padding:8px 10px; border-radius:8px; margin-top:8px; }
.frete-opcoes{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.frete-op{ display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:10px;
  padding:11px 12px; cursor:pointer; font-size:14px; }
.frete-op.sel{ border-color:var(--cor); background:rgba(109,15,31,.05); }
.frete-op input{ accent-color:var(--cor); }
.frete-op .fo-nome{ flex:1; font-weight:600; }
.frete-op .fo-obs{ display:block; font-size:12px; color:var(--cinza); font-weight:400; }
.frete-op .fo-preco{ font-weight:700; }
.frete-aviso{ font-size:13px; color:#ff3b30; padding:8px 0; }
.frete-carregando{ font-size:13px; color:var(--cinza); padding:8px 0; }
/* Formas de pagamento no checkout */
.pagamento-bloco{ margin-top:14px; }
.pag-opcoes{ display:flex; flex-direction:column; gap:8px; }
.pag-grupo{ font-size:12px; font-weight:700; color:var(--cinza); margin-top:6px; text-transform:uppercase; letter-spacing:.3px; }
.pag-grupo:first-child{ margin-top:0; }
.pag-op{ display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:10px;
  padding:11px 12px; cursor:pointer; font-size:14px; font-weight:600; }
.pag-op.sel{ border-color:var(--cor); background:rgba(109,15,31,.05); }
.pag-op input{ accent-color:var(--cor); }
/* Modal Pix */
.pix-corpo{ padding:22px 18px; text-align:center; }
.pix-corpo h3{ font-size:19px; font-weight:800; }
.pix-valor{ font-size:22px; font-weight:800; color:var(--cor); margin:6px 0 14px; }
.pix-qr{ width:220px; height:220px; margin:0 auto; display:block; border:1px solid var(--linha); border-radius:12px; padding:6px; background:#fff; }
.pix-hint{ font-size:13px; color:var(--cinza); margin:14px 0 8px; }
.pix-copia{ display:flex; gap:8px; }
.pix-copia input{ flex:1; padding:11px; border:1px solid var(--linha); border-radius:10px; font-size:12px; }
/* Topo-esquerdo fixo: Minha conta + Modo escuro */
.topo-esq{ position:fixed; left:12px; top:12px; z-index:40; display:flex; gap:6px;
  align-items:center; transition:opacity .15s ease; }
/* No MEIO da rolagem (saiu do topo e a busca ainda não grudou) o "Minha conta" +
   tema somem — senão flutuam por cima dos cupons e do nome da loja. Aparecem só
   no topo (sobre a capa) e, depois, grudados na linha da busca. Só no CELULAR —
   no desktop eles vivem na barra do topo (position:static, ver loja-pc.css). */
@media (max-width:999px){
  body:not(.no-topo):not(.busca-presa) .topo-esq{ opacity:0; pointer-events:none; }
}
/* Quando a busca gruda no topo (rolou a página), o "Minha conta" + tema saem do
   canto esquerdo da capa e vão pra a DIREITA, na linha da busca. */
body.busca-presa .topo-esq{ left:12px; right:auto; top:9px; }
body.busca-presa .btn-conta, body.busca-presa .btn-tema{ background:var(--cor); }
.btn-conta{ background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:10px; padding:9px 14px;
  font-weight:800; font-size:13px; cursor:pointer; font-family:inherit; }
.btn-conta:active{ transform:scale(.97); }
.btn-tema{ background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:10px; width:38px; height:38px;
  font-size:17px; cursor:pointer; line-height:1; }
.btn-tema:active{ transform:scale(.95); }
/* Minha conta — seções */
.sheet-conta{ padding-bottom:20px; }
.conta-sec{ padding:14px 18px; border-top:8px solid var(--bg); }
.conta-sec:first-of-type{ border-top:none; }
.conta-sec h4{ font-size:15px; margin-bottom:10px; }
.conta-sec .campo{ margin-bottom:8px; }
.conta-sec .campo label{ font-size:13px; font-weight:600; color:var(--cinza); display:block; margin-bottom:4px; }
.conta-sec .campo input, .ct-select{ width:100%; padding:11px 13px; border:1px solid var(--linha); border-radius:10px; font-size:15px; font-family:inherit; }
.opc{ font-weight:400; color:var(--cinza); font-size:11px; }
.conta-msg{ font-size:12px; font-weight:700; color:var(--verde); margin-left:8px; }
.ct-enderecos{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ct-vazio{ font-size:13px; color:var(--cinza); }
.ct-end{ border:1px solid var(--linha); border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap; }
.ct-end.principal{ border-color:var(--cor); background:rgba(109,15,31,.04); }
.ct-end-txt{ font-size:13px; }
.ct-end-txt div{ color:var(--cinza); font-size:12px; }
.ct-end-acoes{ display:flex; gap:8px; }
.ct-mini{ background:none; border:none; color:var(--cor); font-size:12px; font-weight:700; cursor:pointer; padding:0; }
.ct-mini.del{ color:#c0242a; }
.ct-form-end{ margin-top:10px; background:var(--bg); border-radius:10px; padding:12px; }

/* Botão e modal "Meus pedidos" */
.btn-pedidos{ margin-top:10px; background:var(--bg); border:1px solid var(--linha); border-radius:999px;
  padding:8px 16px; font-size:13px; font-weight:800; color:var(--cor); cursor:pointer; font-family:inherit; }
.btn-pedidos:active{ opacity:.8; }
.sheet-pedidos{ padding-bottom:16px; }
.lista-pedidos{ padding:8px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.pd-card{ border:1px solid var(--linha); border-radius:12px; padding:12px 14px; }
.pd-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.pd-status{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--bg); }
.pd-status.em_rota{ background:rgba(19,122,58,.12); color:#137a3a; }
.pd-status.entregue{ background:rgba(0,0,0,.06); color:var(--cinza); }
.pd-itens{ font-size:13px; color:var(--cinza); margin:4px 0; }
.pd-total{ font-weight:800; font-size:15px; }
.pd-acoes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pd-btn{ flex:1; min-width:130px; text-align:center; padding:10px; border-radius:10px; font-weight:800;
  font-size:13px; border:none; cursor:pointer; text-decoration:none; }
.pd-btn.refazer{ background:var(--cor); color:#fff; }
.pd-btn.track{ background:#137a3a; color:#fff; }
.pd-btn.pix{ background:#32bcad; color:#fff; }
.pd-pend{ margin-top:6px; font-size:12px; font-weight:700; color:#c0242a; }

/* CEP — dica e feedback de precisão */
.cep-dica{ font-size:12.5px; color:var(--cinza); background:var(--bg); border-radius:8px; padding:8px 11px; margin-bottom:2px; }
.cep-status{ font-size:12.5px; font-weight:600; margin-top:-4px; }
.cep-status.buscando{ color:var(--cinza); }
.cep-status.ok{ color:var(--verde); }
.cep-status.erro{ color:#c0242a; }

/* Localização do cliente (GPS) — fica ao lado do CEP, como alternativa a ele */
.geo-wrap{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.geo-ou{ font-size:13px; font-weight:600; color:var(--cinza); }
/* mesma altura do campo de CEP ao lado — sem quebrar o texto em duas linhas */
.geo-wrap .btn-local{ padding:11px 8px; font-size:13.5px; white-space:nowrap; }
/* Linha cheia, não pontilhada: tracejado lê como "rascunho / cuidado" e fazia
   a cliente hesitar em tocar justo no atalho que poupa o endereço todo. */
.btn-local{ width:100%; padding:13px; border:1px solid var(--linha); background:var(--card);
  color:var(--cor); font-weight:700; font-size:14px; border-radius:12px; cursor:pointer;
  font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .15s, background .15s; }
.btn-local:hover{ border-color:var(--cor); background:rgba(109,15,31,.04); }
.btn-local:active{ transform:scale(.99); background:rgba(109,15,31,.08); }
.geo-status{ margin-top:8px; font-size:13px; font-weight:600; }
.geo-status.ok{ color:var(--verde); }
.geo-status.erro{ color:#c0242a; }
.geo-status a{ color:var(--cor); font-weight:700; text-decoration:underline; }

/* Botão calcular frete em destaque */
.btn-frete{ background:var(--cor); color:#fff; font-weight:800; font-size:15px; padding:14px;
  border:none; border-radius:12px; box-shadow:0 4px 14px rgba(109,15,31,.32); animation:pulseFrete 2s ease-in-out infinite; }
.btn-frete:active{ transform:scale(.98); }
@keyframes pulseFrete{ 0%,100%{ box-shadow:0 4px 14px rgba(109,15,31,.28); } 50%{ box-shadow:0 4px 20px rgba(109,15,31,.5); } }

.cart-rodape{ position:sticky; bottom:0; background:#fff; padding:14px 18px 18px;
  border-top:1px solid var(--linha); }
.cart-total-linha{ display:flex; justify-content:space-between; font-size:16px; margin-bottom:12px; }
.cart-total-linha strong{ font-size:18px; }

.link-admin{ display:block; text-align:center; color:var(--linha); font-size:11px; padding:16px; }

/* ===================================================================
   PÁGINA DO PRODUTO (estilo iFood)
   =================================================================== */
body.pagina-produto{ padding-bottom:88px; }
.pp-voltar{ position:fixed; top:12px; left:12px; z-index:10; width:38px; height:38px;
  border-radius:50%; background:#fff; box-shadow:var(--sombra); display:flex; align-items:center;
  justify-content:center; font-size:24px; color:var(--texto); }
.pp-galeria{ position:relative; width:100%; }
.pp-foto{ width:100%; aspect-ratio:1/1; height:auto; background:var(--bg) center/cover no-repeat; }
.pp-voltar-baixo{ display:block; text-align:center; margin:18px 16px 6px; padding:14px;
  background:var(--cor); color:#fff; border-radius:12px; font-weight:700; font-size:15px;
  box-shadow:var(--sombra); }
.pp-video{ position:relative; width:100%; padding-top:56.25%; background:#000; }
.pp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pp-thumbs{ display:flex; gap:8px; padding:10px 14px 0; overflow-x:auto; }
.pp-thumbs::-webkit-scrollbar{ display:none; }
.pp-thumbs .thumb{ flex:0 0 auto; width:56px; height:56px; border-radius:10px;
  border:2px solid transparent; cursor:pointer; background:var(--bg) center/cover; position:relative; }
.pp-thumbs .thumb.sel{ border-color:var(--cor); }
.pp-thumbs .thumb-video::after{ content:"▶"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; }
.pp-corpo{ padding:16px 16px 8px; }
.pp-corpo h1{ font-size:22px; font-weight:800; }
.pp-desc{ font-size:14px; color:var(--cinza); margin-top:8px; line-height:1.4; }
.pp-preco-linha{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.qa-stepper.pp-qa{ flex-direction:row; padding:6px 14px; flex:0 0 auto; }
.qa-stepper.pp-qa button{ width:28px; }
.pp-preco{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pp-apartir{ font-size:12px; color:var(--cinza); width:100%; }
.pp-por{ font-size:22px; font-weight:800; }
.pp-de{ font-size:15px; color:var(--cinza); text-decoration:line-through; }
.pp-off{ font-size:12px; font-weight:800; color:#fff; background:var(--cor); padding:2px 8px;
  border-radius:8px; white-space:nowrap; display:inline-block; }
.pp-de{ white-space:nowrap; }
.pp-variacoes{ margin-top:18px; border-top:8px solid var(--bg); padding-top:14px; }
.pp-var-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pp-var-head span{ display:block; font-size:12px; color:var(--cinza); }
.pp-obrig{ font-size:11px; font-weight:800; color:#fff; background:#1c1c1e; padding:4px 9px; border-radius:6px; }
.pp-var-op{ display:flex; align-items:center; justify-content:space-between; padding:12px 4px;
  border-bottom:1px solid var(--linha); }
.pp-var-op.ativa{ background:rgba(109,15,31,.04); }
.vo-nome{ font-size:15px; }
.vo-dir{ display:flex; align-items:center; gap:14px; }
.vo-preco{ font-size:14px; font-weight:700; }
.vo-stepper{ display:flex; align-items:center; gap:12px; border:1px solid var(--linha);
  border-radius:10px; padding:5px 10px; }
.vo-stepper button{ border:none; background:none; font-size:20px; line-height:1; color:var(--cor);
  width:20px; cursor:pointer; }
.vo-qtd{ min-width:14px; text-align:center; font-weight:700; font-size:15px; }
.pp-sugestoes{ margin-top:10px; border-top:8px solid var(--bg); padding:16px 0 6px; }
.pp-sugestoes h2{ font-size:16px; font-weight:800; padding:0 16px 10px; }
.pp-sug-lista{ display:flex; gap:12px; overflow-x:auto; padding:0 16px; }
.pp-sug-lista::-webkit-scrollbar{ display:none; }
.pp-sug-card{ flex:0 0 140px; }
.pp-sug-foto{ width:140px; height:120px; border-radius:12px; background:var(--bg) center/cover no-repeat; }
.pp-sug-nome{ font-size:13px; font-weight:600; margin-top:6px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pp-sug-preco{ font-size:13px; margin-top:2px; }
.pp-sug-preco s{ color:var(--cinza); font-size:11px; }
.qa-stepper.sug{ flex-direction:row; justify-content:space-between; width:100%; margin-top:6px; padding:4px 12px; }
.qa-stepper.sug button{ height:auto; width:24px; }
.pp-sug-add{ display:block; text-align:center; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--cor); border:1px solid var(--linha); border-radius:20px; padding:6px; }
.pp-sug-link{ display:block; }
.pp-rodape{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  z-index:20; background:#fff; border-top:1px solid var(--linha); padding:12px 16px;
  display:flex; gap:12px; align-items:center; }

/* Preço promocional no card da vitrine */
.preco{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.preco .preco-de{ font-size:12px; color:var(--cinza); text-decoration:line-through; font-weight:500; white-space:nowrap; }
.preco .preco-off{ font-size:11px; font-weight:800; color:#fff; background:var(--cor); padding:2px 7px;
  border-radius:6px; white-space:nowrap; display:inline-block; }

/* ===================================================================
   PAINEL ADMIN
   =================================================================== */
body.admin{ background:var(--bg); max-width:none; padding:0; }
/* Faixa do painel: a cor vem da loja (--faixa = cor_primaria do site), com a
   logo da loja à esquerda. O título que mudava a cada aba foi removido (bagunçava
   o alinhamento e a nav já diz onde você está). Textos e abas em branco/claro
   pra ler sobre a cor. */
/* Barra do "ver como funcionária" — amarela e chamativa, no topo de tudo. */
.imperson-bar{ background:#ffcf33; color:#3a2c00; font-size:13.5px; font-weight:700;
  padding:8px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.imperson-bar a{ margin-left:auto; background:#3a2c00; color:#fff; padding:5px 12px;
  border-radius:8px; font-weight:800; text-decoration:none; white-space:nowrap; }
.admin-top{ background:var(--faixa, var(--cor)); border-bottom:none; padding:10px 20px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 10px rgba(0,0,0,.10); }
.admin-top h1{ display:none; }              /* título por página: fora */
.admin-top .g{ display:none; }
/* Marca do painel: a logo da loja aberta. Altura fixa e largura automática
   pra aceitar logo quadrada ou deitada sem distorcer. */
/* Redonda e sem fundo branco, igual à logo do site (pedido do dono). Quadrada
   fixa + object-fit:cover pra o corte circular ficar certo. */
.marca-logo{ width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  object-fit:cover; background:transparent; padding:0; }
.marca-sigla{ width:36px; height:36px; flex:0 0 auto; border-radius:9px;
  background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:14px; letter-spacing:.5px; }
/* UMA linha só. Antes era flex-wrap:wrap: em larguras intermediárias o menu
   quebrava numa 2ª linha que ENCOSTAVA na 1ª, e a altura do cabeçalho mudava a
   cada troca de aba (a sub-nav grudada embaixo, posicionada por --topo-h, subia e
   encostava). Agora não quebra: se não couber, rola na horizontal (como no mobile)
   — cabeçalho de altura constante, nada sobrepõe. min-width:0 deixa a barra
   encolher dentro do .admin-top pra rolar em vez de empurrar a página. */
.admin-nav{ margin-left:auto; display:flex; gap:5px; flex-wrap:nowrap;
  min-width:0; overflow-x:auto; scrollbar-width:none; }
.admin-nav::-webkit-scrollbar{ display:none; }
.admin-nav a{ font-size:13px; font-weight:600; color:rgba(255,255,255,.82);
  padding:8px 12px; border-radius:8px; flex:0 0 auto; white-space:nowrap; }
.admin-nav a.ativo,.admin-nav a:hover{ background:rgba(255,255,255,.20); color:#fff; }
.admin-wrap{ max-width:900px; margin:0 auto; padding:16px 20px; }

/* ---------- Sub-abas (ex.: tudo de entrega numa aba só) ----------
   Gruda logo abaixo do cabeçalho. O `--topo-h` é medido pelo painel.js porque
   o menu tem 16 abas e quebra em 2 ou 3 linhas conforme a largura da tela —
   com um valor fixo aqui, a fileira passava por baixo do cabeçalho e aparecia
   cortada pela metade. O z-index é menor que o do cabeçalho: se um dia
   encostarem, quem fica por cima é ele. */
/* Sub-nav COLADA e consistente em toda tela: largura de conteúdo (alinhada aos
   cards), logo abaixo do cabeçalho, SEM flutuar. Antes umas telas eram sticky
   (flutuavam ao rolar) e outras não — o dono pediu tudo colado. Se um dia quiser
   ela fixa ao rolar de novo, é só voltar position:sticky; top:var(--topo-h). */
/* Sub-abas COLADAS na faixa vermelha (sem folga acima) — pedido do dono. A
   fileira de lojas (pills) fica separada logo abaixo, como a única "flutuante". */
.admin-wrap.sub-wrap{ max-width:none; padding:0; background:var(--bg); }
/* Fileira de lojas (trocar de loja sem sair da tela) — _lojas_pills.html, dentro
   da _sub_nav (logo abaixo das sub-abas), só nas seções por-loja. */
.sub-nav.lojas-pills{ align-items:center; margin-top:0; }
.sub-nav.lojas-pills .lp-rot{ flex:0 0 auto; font-size:12px; font-weight:800; color:var(--cinza);
  text-transform:uppercase; letter-spacing:.4px; padding:0 6px 0 4px; }
/* Barras (sub-abas e lojas) PLANAS e de ponta a ponta, coladas uma na outra e no
   cabeçalho — pedido do dono (mais minimalista). Full-width via .admin-wrap.sub-wrap
   abaixo; aqui: sem cantos, só um traço embaixo separando as barras. */
.sub-nav{ display:flex; gap:4px; background:#fff; border:none;
  border-bottom:1px solid var(--linha); border-radius:0; padding:4px 16px;
  overflow-x:auto; scrollbar-width:none; }
.sub-nav::-webkit-scrollbar{ display:none; }
.sub-nav a{ flex:0 0 auto; display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:13.5px; font-weight:700; color:var(--cinza); padding:9px 15px; border-radius:9px;
  transition:.15s; }
.sub-nav a .ic{ font-size:15px; line-height:1; }
.sub-nav a:hover{ background:var(--bg); color:var(--texto); }
.sub-nav a.ativo{ background:var(--cor); color:#fff; }
/* Quantos pedidos esperam naquele estágio. Fica na própria aba pra não ser
   preciso entrar em cada uma só pra descobrir se sobrou algo lá. */
.sub-nav a .sub-badge{ font-size:11px; font-weight:800; line-height:1;
  padding:3px 7px; border-radius:999px; background:var(--bg); color:var(--cinza); }
.sub-nav a.ativo .sub-badge{ background:rgba(255,255,255,.25); color:#fff; }

/* ---------- Painel no computador: aproveita a tela larga ---------- */
@media (min-width:1100px){
  .admin-wrap{ max-width:1180px; padding:24px 28px; }
  .sub-wrap{ padding:0 28px 0; }   /* colado na faixa vermelha (sem folga acima) */
  .admin-top{ padding:14px 28px; }
  .admin-nav a{ font-size:13.5px; padding:9px 14px; }
  /* cartões de formulário lado a lado em vez de uma coluna estreita e longa */
  .admin-colunas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:18px; align-items:start; }
}
@media (min-width:1500px){
  .admin-wrap{ max-width:1400px; }
}
.painel-acoes{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:6px; background:var(--cor); color:#fff;
  border:none; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; }
.btn.sec{ background:#fff; color:var(--texto); border:1px solid var(--linha); }
.btn.danger{ background:#fff; color:#ff3b30; border:1px solid #ffd0cd; }
.btn.small{ padding:6px 10px; font-size:12px; }

.cat-bloco{ background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); margin-bottom:16px; overflow:hidden; }
.cat-bloco-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--linha); }
.cat-bloco-head h3{ font-size:16px; }
.cat-bloco-head .conta{ font-size:12px; color:var(--cinza); background:var(--bg); padding:3px 8px; border-radius:12px; }
.cat-bloco-head .head-acoes{ margin-left:auto; display:flex; gap:6px; }
.prod-linha{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--linha); }
.prod-linha:last-child{ border-bottom:none; }
.prod-linha img,.prod-linha .sem{ width:48px; height:48px; border-radius:8px; object-fit:cover; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--cinza); font-weight:700; }
.prod-linha .pl-nome{ flex:1; font-size:14px; font-weight:600; }
.prod-linha .pl-nome small{ display:block; color:var(--cinza); font-weight:400; }
.prod-linha .pl-preco{ font-weight:700; font-size:14px; }
.tag-inativo{ font-size:11px; color:#ff3b30; background:rgba(255,59,48,.1); padding:2px 7px; border-radius:10px; }

/* Componentes compartilhados do painel — canônicos, para não reinventar em cada
   tela. `.aviso-fase` estava redefinido igual em 11 templates; a pílula de status
   (verde=ok / cinza=off) reaparecia como .badge-cfg / .bl-status / .nf-status. */
.aviso-fase{ font-size:12px; color:var(--cinza); background:var(--bg);
  padding:8px 10px; border-radius:8px; margin-top:8px; }
.status-pill{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px;
  display:inline-block; }
.status-pill.on{ background:rgba(29,185,84,.12); color:var(--verde); }
.status-pill.off{ background:var(--bg); color:var(--cinza); }

/* Formulários admin */
.form-card{ background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); padding:22px; }
.form-card h2{ margin-bottom:18px; font-size:18px; }
.campo{ margin-bottom:11px; }
.campo label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
/* Sem listar tipo por tipo: era assim que o campo de e-mail (e qualquer tipo
   novo — date, url, search) escapava do estilo e ficava com a caixa quadrada
   do navegador ao lado dos outros arredondados. */
/* `not(...)` em vez de listar os tipos que valem: era assim que o e-mail (e
   qualquer tipo novo — url, search, date) escapava do estilo e ficava com a
   caixa quadrada do navegador ao lado dos outros arredondados. Ficam de fora
   só os controles que não são caixa de texto: caixinha, bolinha, arquivo,
   cor e o deslizante — nesses a moldura atrapalha. */
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
.campo select,.campo textarea{ width:100%; padding:11px 13px;
  border:1px solid var(--linha); border-radius:10px; font-size:15px; font-family:inherit;
  color:var(--texto); background:var(--card); }
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--cor); }
.campo textarea{ min-height:80px; resize:vertical; }
.campo-linha{ display:flex; gap:10px; flex-wrap:wrap; }
.campo-linha .campo{ flex:1 1 160px; min-width:0; }
.check{ display:flex; align-items:center; gap:8px; font-size:14px; }
.form-acoes{ display:flex; gap:10px; margin-top:8px; }
.login-box{ max-width:340px; margin:80px auto; }
.erro-msg{ background:rgba(255,59,48,.1); color:#ff3b30; padding:10px; border-radius:10px;
  font-size:13px; margin-bottom:14px; text-align:center; }
.mini-foto{ width:80px; height:80px; border-radius:10px; object-fit:cover; background:var(--bg); margin-top:8px; }
.tabela{ width:100%; background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden; }
.tabela .ped{ padding:14px 16px; border-bottom:1px solid var(--linha); }
.tabela .ped:last-child{ border:none; }
.ped-topo{ display:flex; justify-content:space-between; font-size:13px; color:var(--cinza); }
.ped-total{ font-weight:800; color:var(--texto); }

/* ===================================================================
   PAINEL RESPONSIVO — celular vs PC
   =================================================================== */
@media (max-width: 680px){
  .admin-top{ flex-wrap:wrap; gap:8px 12px; padding:12px 14px; }
  .admin-top h1{ font-size:16px; }
  .admin-nav{ margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .admin-nav::-webkit-scrollbar{ display:none; }
  .admin-nav a{ flex:0 0 auto; white-space:nowrap; }
  .admin-wrap{ padding:14px 12px; }
  .form-card{ padding:16px; }
  /* campos lado a lado passam a empilhar no celular */
  .campo-linha{ flex-direction:column; gap:0; }
  /* com direction:column o flex-basis vira ALTURA — os 160px da linha lado a
     lado esticavam cada campo e criavam buracos enormes no celular */
  .campo-linha .campo{ width:100%; flex:0 0 auto; }
  .painel-acoes{ gap:8px; }
  .cat-bloco-head{ flex-wrap:wrap; }
  .prod-linha{ flex-wrap:wrap; }
  .metodo-card .linha{ flex-direction:column; align-items:stretch; }
  .metodo-card .linha .campo{ width:100%; }
  #mapaLoja{ height:240px; }
}

/* ---------- Modo vendedora: a loja usada pra montar pedido da cliente ---------- */
.vend-barra{ position:sticky; top:0; z-index:60; background:#7a1725; color:#fff;
  padding:9px 14px; font-size:12.5px; display:flex; align-items:center; gap:10px;
  justify-content:space-between; }
.vend-barra a{ color:#fff; text-decoration:underline; font-weight:700; white-space:nowrap; }
body.modo-vend .busca-wrap{ top:36px; }        /* a barra empurra o sticky */
body.modo-vend .cat-tabs{ top:88px; }
.vend-campos{ margin:12px 0 10px; text-align:left; }
.vend-campos label{ display:block; font-size:12px; color:var(--cinza); margin-bottom:3px; }
.vend-campos input{ width:100%; padding:11px; border:1px solid var(--linha);
  border-radius:10px; font-size:15px; font-family:inherit; margin-bottom:8px;
  background:var(--card); color:var(--texto); }

/* ---------- Nascimento no cadastro (3 caixinhas, mais rápido no celular) ---------- */
.bv-nasc-lbl{ display:block; font-size:12px; color:var(--cinza); margin:12px 0 5px; }
.bv-nasc-lbl span{ font-size:11px; opacity:.85; }
.bv-nasc{ display:flex; gap:6px; }
.bv-nasc select{ flex:1; min-width:0; padding:11px 8px; border:1px solid var(--linha);
  border-radius:10px; font-size:14px; font-family:inherit; background:var(--card);
  color:var(--texto); }
.bv-nasc select:invalid{ color:var(--cinza); }

/* ---------- Avisos de validação (CPF/CNPJ e e-mail) ---------- */
.val-msg{ font-size:11.5px; margin:3px 0 0; line-height:1.3; min-height:0; }
.val-msg.ok{ color:#1db954; }
.val-msg.erro{ color:#c0242a; }
.val-msg.sugestao{ color:#a35c00; }
.val-msg.sugestao b{ text-decoration:underline; }
input.val-erro{ border-color:#c0242a !important; }
input.val-ok{ border-color:#1db954 !important; }
.cart-op{ font-size:11px; color:var(--cinza); font-weight:400; }


/* ---------- Telefone: seletor de país com bandeira de verdade ----------
   Menu próprio em vez de <select>, porque o menu nativo do Windows não
   desenha bandeira emoji — ele mostra as letras do país ("BR"). */
.tel-caixa{ display:flex; gap:6px; align-items:stretch; position:relative; }
.tel-btn{ display:flex; align-items:center; gap:5px; flex:0 0 auto; padding:0 9px;
  border:1px solid var(--linha); border-radius:10px; background:var(--card);
  cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--texto); }
.tel-btn img{ width:22px; height:15px; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.tel-seta{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--cinza); margin-left:1px; }
.tel-caixa > input{ flex:1; min-width:0; margin:0 !important; }
.tel-menu{ position:absolute; top:calc(100% + 5px); left:0; z-index:60; width:270px;
  max-width:88vw; background:var(--card); border:1px solid var(--linha); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.16); overflow:hidden; }
.tel-menu.oculto{ display:none; }
.tel-busca{ width:100%; padding:10px 12px; border:none; border-bottom:1px solid var(--linha);
  font-size:14px; font-family:inherit; background:var(--card); color:var(--texto); outline:none; }
.tel-lista{ max-height:230px; overflow-y:auto; }
.tel-item{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px;
  border:none; background:none; cursor:pointer; font-family:inherit; font-size:13.5px;
  text-align:left; color:var(--texto); }
.tel-item:hover{ background:var(--bg); }
.tel-item.on{ background:rgba(109,15,31,.08); font-weight:700; }
.tel-item img{ width:24px; height:17px; object-fit:cover; border-radius:2px; flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.tel-item .nm{ flex:1; min-width:0; }
.tel-item .dd{ color:var(--cinza); font-size:12.5px; }

/* ---------- Painel no celular: menos respiro entre os campos ----------
   Os formulários de configuração são longos; espaço demais obriga a rolar
   muito pra achar o botão de salvar. */
@media (max-width:760px){
  .admin-wrap{ padding:12px 12px; }
  .form-card, .pag-card{ padding:14px; margin-bottom:12px; }
  .campo{ margin-bottom:9px; }
  .campo label{ margin-bottom:2px; }
  .campo-linha{ gap:0; }
  .form-acoes{ margin-top:10px; }
  .aviso-fase{ margin-top:8px; padding:8px 10px; }
  .sub-wrap{ padding:0 12px 0; }   /* colado na faixa vermelha (mobile) */
  h2{ margin-bottom:6px; }
}

/* campo do painel sempre na largura toda — alguns nasciam do tamanho do texto */
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select,
.campo textarea{ width:100%; box-sizing:border-box; }

/* Contas a vencer — a bolinha diz o estado sem precisar ler. */
.conta .bolinha{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--cinza)}
.conta-pago .bolinha{background:var(--verde)}
.conta-longe .bolinha{background:#3f7d4f}
.conta-perto .bolinha{background:#e8b93a}
.conta-hoje .bolinha{background:#e8873a}
.conta-atrasado .bolinha{background:#d84a3a}
.conta-atrasado{border-color:rgba(216,74,58,.45)}
.conta-hoje{border-color:rgba(232,135,58,.4)}
.conta-pago{opacity:.6}

/* Aviso de contas no painel inicial. */
.alerta-contas{border:1px solid rgba(216,74,58,.4);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.alerta-contas h3{font-size:14px;margin:0 0 8px}
.alerta-contas a{display:flex;gap:8px;align-items:center;padding:5px 0;text-decoration:none;color:inherit}
.alerta-contas .q{margin-left:auto;font-size:12px;color:var(--cinza)}

/* Dashboard do início — venda do período, por loja e por canal. */
.dash{border:1px solid var(--linha);border-radius:14px;padding:14px;margin-bottom:16px}
.dash-periodo{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.dash-periodo .chip{padding:5px 12px;border:1px solid var(--linha);border-radius:999px;
  font-size:13px;text-decoration:none;color:inherit;white-space:nowrap}
.dash-periodo .chip.ativo{background:var(--verde);border-color:var(--verde);color:#0b0b0b}
.dash-datas{display:flex;gap:6px;align-items:center;margin-left:auto}
.dash-datas input{padding:4px 8px;border:1px solid var(--linha);border-radius:8px;
  background:transparent;color:inherit;font-size:13px}
.dash-topo{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.dash-grande{font-size:30px;font-weight:700;line-height:1.1}
.dash-tabela{width:100%;border-collapse:collapse;font-size:14px}
.dash-tabela td{padding:7px 0;border-bottom:1px solid var(--linha)}
.dash-tabela td.q{text-align:right;width:60px;color:var(--cinza);font-size:12px}
.dash-tabela td.v{text-align:right;width:120px;white-space:nowrap}
.dash-tabela tr.zero{opacity:.45}
.dash-tabela tr.soma td{border-bottom:none;border-top:2px solid var(--linha);padding-top:9px}
.dash-canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;margin-top:14px}
.dash-canais .canal{border:1px solid var(--linha);border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px}
.dash-canais .canal.zero{opacity:.4}
.dash-canais .n{font-size:12px;color:var(--cinza)}
.dash-canais .v{font-size:15px;font-weight:600}

/* No computador o dashboard ganha largura — no celular continua empilhado. */
@media (min-width:900px){
  .dash{max-width:980px !important}
  .alerta-contas{max-width:980px !important}
}


/* Dois campos na mesma linha no carrinho. No celular estreito eles voltam a
   empilhar — espremer e-mail em meia tela de 320px não ajuda ninguém. */
.campo-duplo{ display:flex; gap:10px; }
.campo-duplo > label{ flex:1 1 0; min-width:0; }
.campo-duplo input{ width:100%; min-width:0; }
/* 340px pega só os celulares bem antigos. No 375 (iPhone SE, Android comum)
   os dois cabem na linha — que é o objetivo, encurtar o formulário. */
@media (max-width:340px){ .campo-duplo{ display:block; } }
/* placeholder longo não pode esticar o campo além da metade que ele tem */
.campo-duplo input{ text-overflow:ellipsis; }

/* Dica sob o mapa do checkout. */
.mapa-dica{ font-size:12px; color:var(--cinza); margin:6px 0 0; line-height:1.4; }

/* Selo de estado de uma integração (conectado / falta algo / desligado). */
.selo{ display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px }
.selo-ok{ background:rgba(19,122,58,.12);color:#137a3a }
.selo-falta{ background:rgba(255,153,0,.16);color:#a35c00 }
.selo-off{ background:rgba(120,120,120,.14);color:var(--cinza) }

/* Segunda fileira de abas (configurações dentro da loja escolhida).
   Menor e recuada, pra ler como "dentro de" e não como outra seção. */
.sub-nav2{ font-size:13px; margin-top:-4px; padding-left:4px; }
.sub-nav2 a{ padding-top:6px; padding-bottom:6px; }
.sub-nav2 a.ativo{ font-weight:800; }

/* ---------- Busca e filtro da lista de produtos ----------
   Fica grudada no topo: com 707 produtos, rolar até o fim e ter que voltar
   pra refinar a busca seria pior do que não ter busca. */
.pf-barra{ position:sticky; top:0; z-index:15; display:flex; gap:8px; flex-wrap:wrap;
  align-items:center; background:var(--bg); padding:10px 0 12px; margin-bottom:6px; }
.pf-busca{ position:relative; flex:1 1 260px; min-width:0; }
.pf-busca input{ width:100%; padding:11px 34px 11px 36px; border:1.5px solid var(--linha);
  border-radius:11px; font-size:14px; font-family:inherit; background:#fff; }
.pf-busca input:focus{ border-color:var(--cor); outline:none; }
.pf-lupa{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.55;
  font-size:14px; pointer-events:none; }
.pf-x{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none;
  background:none; cursor:pointer; color:var(--cinza); font-size:15px; padding:4px 6px; }
.pf-barra select{ flex:0 1 220px; padding:11px 10px; border:1.5px solid var(--linha);
  border-radius:11px; font-family:inherit; font-size:13.5px; background:#fff; }
.pf-check{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--cinza);
  font-weight:700; white-space:nowrap; }
.pf-check input{ width:auto; margin:0; }
.pf-conta{ font-size:12.5px; color:var(--cinza); font-weight:700; white-space:nowrap; }

/* ---------- Escolha de lojas (quais cotam Correios) ---------- */
.cx-lojas{ background:var(--bg); border:1px solid var(--linha); border-radius:12px;
  padding:12px 14px; margin-bottom:14px; }
.cx-lojas > b{ font-size:14px; }
.lj-grade{ display:grid; gap:6px 18px; margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.lj-grade .check{ margin:0; }

/* ---------- Campo de credencial já configurada ----------
   Mostra que existe e os quatro últimos caracteres — o bastante pra conferir
   que é o token certo sem deixar o resto à mostra de quem passar pelo balcão. */
.sg-cx{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--bg); border:1px solid var(--linha); border-radius:10px;
  padding:9px 12px; }
.sg-ok{ font-size:12.5px; font-weight:800; color:#137a3a; white-space:nowrap; }
.sg-fim{ font-family:monospace; font-size:13px; color:var(--cinza);
  background:#fff; border:1px solid var(--linha); border-radius:6px; padding:2px 8px; }
.sg-cx .btn{ margin-left:auto; }
.segredo .sg-novo{ margin-top:0; }

/* ---------- Agenda dentro de Transferências ----------
   Fechada por padrão: no dia a dia se olha a remessa, não o calendário. Fica
   aqui embaixo porque é a CAUSA das remessas listadas acima. */
.agenda-cx{ background:#fff; border:1px solid var(--linha); border-radius:14px;
  margin-top:20px; overflow:hidden; }
.agenda-cx > summary{ display:flex; align-items:center; gap:12px; padding:14px 16px;
  cursor:pointer; list-style:none; }
.agenda-cx > summary::-webkit-details-marker{ display:none; }
.agenda-cx > summary:hover{ background:var(--bg); }
.agenda-cx[open] > summary{ border-bottom:1px solid var(--linha); }
.agenda-cx summary b{ display:block; font-size:14.5px; }
.agenda-cx summary small{ display:block; font-size:12px; color:var(--cinza); margin-top:1px; }
.agenda-cx summary > span:nth-child(2){ flex:1; min-width:0; }
.ag-ic{ font-size:20px; line-height:1; flex:0 0 auto; }
.ag-seta{ color:var(--cinza); font-size:12px; transition:transform .15s; flex:0 0 auto; }
.agenda-cx[open] .ag-seta{ transform:rotate(180deg); }
.agenda-cx > form, .agenda-cx > .bloco, .agenda-cx > p{ padding:0 16px; }
.agenda-cx > form{ padding-bottom:16px; }

/* Etiqueta da loja no pedido: só aparece pro dono, que vê a rede toda. */
.tag-loja{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(109,15,31,.09); color:var(--cor); }

/* Corte entre os grupos do menu: dia a dia · montar a loja · ocasional.
   Uma linha fina basta — rótulo em cada grupo deixaria o menu comprido demais
   no celular, onde ele já rola de lado. */
.nav-corte{ flex:0 0 auto; align-self:center; width:1px; height:18px;
  background:var(--linha); margin:0 4px; }

/* Configurações (engrenagem) e Sair no fim do menu, empurrados pra direita. A
   engrenagem é só ícone (config da rede, uso ocasional); Sair tem contorno
   próprio pra não se confundir com uma aba de navegação. */
.admin-nav a.nav-config{ margin-left:auto; font-size:17px; line-height:1; padding:7px 11px; }
.admin-nav a.nav-sair{ color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.32);
  border-radius:8px; font-weight:700; }
.admin-nav a.nav-sair:hover{ background:rgba(255,255,255,.16); color:#fff; }
@media (max-width:815px){
  /* No menu que rola na horizontal não há espaço livre pra empurrar; a
     engrenagem só fica depois das outras, sem margem automática. */
  .admin-nav a.nav-config{ margin-left:6px; }
}

/* ---------- Liberação de abas por funcionária ---------- */
.acessos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:7px; margin-top:5px; }
.ac-item{ display:flex; align-items:flex-start; gap:9px; border:1px solid var(--linha);
  border-radius:10px; padding:9px 11px; cursor:pointer; background:#fff; transition:.12s; }
.ac-item:hover{ background:var(--bg); }
.ac-item input{ width:auto; margin:2px 0 0; flex:0 0 auto; }
.ac-item span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ac-item b{ font-size:13px; font-weight:700; line-height:1.25; }
.ac-item small{ font-size:11px; color:var(--cinza); line-height:1.3; }
.ac-item:has(input:checked){ border-color:var(--cor); background:rgba(109,15,31,.05); }

/* ---------- Copiar configuração para outras lojas ----------
   Fechado por padrão (é <details>): copiar por cima da configuração das outras
   cinco lojas não pode ser a coisa mais fácil de clicar na tela. */
.copiar-box{ border:1px dashed var(--linha); border-radius:12px; padding:0 14px;
  margin:18px 0 8px; background:#fff; }
.copiar-box summary{ cursor:pointer; font-size:13.5px; font-weight:800;
  color:var(--cor); padding:12px 0; list-style:none; }
.copiar-box summary::-webkit-details-marker{ display:none; }
.copiar-box[open] summary{ border-bottom:1px solid var(--linha); margin-bottom:12px; }
.copiar-box form{ padding-bottom:14px; }
.cp-o-que{ font-size:13px; margin-bottom:10px; }
.cp-lojas{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.cp-loja{ display:flex; align-items:center; gap:7px; border:1px solid var(--linha);
  border-radius:9px; padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer; }
.cp-loja:has(input:checked){ border-color:var(--cor); background:rgba(109,15,31,.06); }
.cp-loja input{ width:auto; margin:0; }
.cp-nunca{ font-size:12px; line-height:1.45; color:var(--cinza); background:var(--bg);
  border-radius:9px; padding:9px 11px; margin-bottom:10px; }
.cp-aviso{ font-size:12px; line-height:1.4; color:#a35c00;
  background:rgba(255,153,0,.12); border-radius:9px; padding:9px 11px; margin-bottom:10px; }

/* Aviso de escopo nas telas de Entregas. A fileira mistura o que é contrato da
   empresa (Correios, Uber, DHL) com o que é de cada loja (motoboy, envio
   particular); sem dizer qual é qual, dá pra mudar o frete das seis lojas
   achando que está mexendo só numa. */
.aviso-escopo{ font-size:12.5px; line-height:1.4; border-radius:10px;
  padding:10px 12px; margin-bottom:14px; }
.aviso-escopo.rede{ background:rgba(217,154,60,.12); border:1px solid rgba(217,154,60,.5); }
.aviso-escopo.loja{ background:var(--bg); border:1px solid var(--linha); color:var(--cinza); }

/* Seletor de loja do menu de cima: diz de qual unidade o painel está falando.
   Discreto de propósito — é informação de contexto, não uma ação do dia a dia. */
/* "Painel de" fica ACIMA do seletor de loja (empilhado), não ao lado — pedido
   do dono pra dar respiro na faixa. */
.loja-topo{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0; }
.loja-topo .lt-rot{ font-size:10.5px; font-weight:700; color:rgba(255,255,255,.72);
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.loja-topo select{ font-family:inherit; font-size:13px; font-weight:800; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); border-radius:8px;
  padding:5px 9px; cursor:pointer; }
/* o menu aberto do seletor volta a ser escuro sobre branco (senão fica branco no branco) */
.loja-topo select option{ color:#222; background:#fff; }

/* (legado) Bolha numérica — substituída pela bolinha de status `.pt` abaixo. */
.admin-nav .bolha{ display:inline-block;min-width:16px;height:16px;line-height:16px;
  margin-left:5px;padding:0 4px;border-radius:999px;background:#c0242a;color:#fff;
  font-size:10px;font-weight:800;text-align:center;vertical-align:middle }

/* Bolinha de status das abas e sub-abas.
   verde = configurado · amarelo = falta configurar · vermelho = ligado e quebrado.
   Cores escolhidas com contraste suficiente para daltonismo vermelho-verde:
   além do tom, o vermelho pulsa e o amarelo tem borda — quem não distingue as
   cores ainda separa os três pelo movimento e pelo `title`. */
.pt{ display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;
  vertical-align:middle;flex:0 0 auto }
.pt-verde{ background:#1a9d4b }
.pt-amarelo{ background:#e8a800;box-shadow:0 0 0 2px rgba(232,168,0,.22) }
.pt-vermelho{ background:#d92b2b;box-shadow:0 0 0 2px rgba(217,43,43,.22);
  animation:pt-pulso 1.8s ease-in-out infinite }
@keyframes pt-pulso{ 50%{ box-shadow:0 0 0 5px rgba(217,43,43,0) } }
/* Respeita quem desligou animação no sistema — piscar dá enjoo em muita gente. */
@media (prefers-reduced-motion:reduce){ .pt-vermelho{ animation:none } }
/* A sub-aba já é flex com gap:7px — a margem duplicaria o espaço. */
.sub-nav .pt{ margin-left:0 }
/* Na sub-aba ativa (fundo colorido) a bolinha ganha um anel claro pra não
   sumir dentro da cor da marca. */
.sub-nav a.ativo .pt{ box-shadow:0 0 0 2px rgba(255,255,255,.55) }

/* Lista de estoque dentro da aba da loja. */
.est-lin{ display:grid;grid-template-columns:1fr 70px 60px 70px;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--linha);font-size:13px;align-items:center }
.est-lin .q{ text-align:right }
.est-lin.cab{ font-size:11px;color:var(--cinza);text-transform:uppercase;font-weight:700 }
.est-lin .bolinha{ width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px }
.faixa-otimo{ background:#0d6b32 } .faixa-bom{ background:#2e9e57 }
.faixa-ok{ background:#7bc47f } .faixa-alerta{ background:#e8b93a }
.faixa-critico{ background:#e8873a } .faixa-zerado{ background:#d84a3a }
.faixa-negativo{ background:#8b1a1a } .faixa-parado{ background:#9aa0a6 }

/* ================= Ficha do produto (painel) =================
   A mesma ficha serve a tela cheia e a sanfona dentro da lista. */

/* --- fotos: quadrados clicaveis, sem "Escolher arquivo / Nenhum arquivo" --- */
.fotos{ margin:14px 0; }
.fotos .rot{ display:block; font-size:12px; color:var(--cinza); margin-bottom:6px; }
.fgrade{ display:flex; gap:10px; flex-wrap:wrap; }
.foto{ position:relative; width:96px; height:96px; border-radius:12px; cursor:pointer;
  border:2px dashed var(--linha); background:var(--bg); display:flex;
  align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.foto:hover{ border-color:var(--cor); }
.foto img{ width:100%; height:100%; object-fit:cover; display:none; }
.foto.tem{ border-style:solid; border-color:var(--linha); }
.foto.tem img{ display:block; }
.foto.tem .vazio{ display:none; }
.foto .vazio{ font-size:26px; color:var(--cinza); font-weight:300; line-height:1; }
.foto .tag{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55);
  color:#fff; font-size:10px; text-align:center; padding:2px 0; letter-spacing:.03em; }
.foto.trocada{ border-color:var(--cor); box-shadow:0 0 0 3px rgba(109,15,31,.14); }

/* --- blocos que abrem: fiscal e custo nascem fechados quando ja preenchidos --- */
.ficha details.bloco{ background:#fff; border:1px solid var(--linha); border-radius:12px;
  padding:0 14px; margin:14px 0; }
.ficha details.bloco[open]{ padding-bottom:12px; }
.ficha details.bloco summary{ cursor:pointer; font-weight:700; font-size:14px;
  padding:12px 0; list-style:none; }
.ficha details.bloco summary::-webkit-details-marker{ display:none; }
.ficha details.bloco summary::before{ content:"▸ "; color:var(--cinza); }
.ficha details.bloco[open] summary::before{ content:"▾ "; }
.ficha .marcas{ display:flex; gap:18px; flex-wrap:wrap; margin:14px 0; }
.ficha label small{ font-weight:400; color:var(--cinza); font-size:11px; }

/* --- lista de produtos: alca de arrastar + sanfona --- */
.prod-linha{ position:relative; }
.alca{ cursor:grab; color:var(--cinza); font-size:17px; line-height:1; padding:0 4px;
  user-select:none; touch-action:none; flex:0 0 auto; }
.alca:active{ cursor:grabbing; }
.prod-linha.arrastando{ opacity:.4; }
.prod-linha.alvo{ box-shadow:inset 0 3px 0 var(--cor); }
.prod-linha.aberta{ background:rgba(109,15,31,.05); }
.prod-toque{ flex:1; display:flex; align-items:center; gap:10px; cursor:pointer;
  min-width:0; }
.ficha-cx{ display:none; padding:0 0 14px; }
.ficha-cx.on{ display:block; }
.ficha-cx .carregando{ color:var(--cinza); font-size:13px; padding:14px; }
.ficha-cx .form-card{ margin:0; }
.ordem-salva{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px;
  background:#137a3a; color:#fff; padding:9px 16px; border-radius:999px; font-size:13px;
  font-weight:700; z-index:70; opacity:0; transition:opacity .2s; pointer-events:none; }
.ordem-salva.on{ opacity:1; }

/* ===================================================================
   MODO ESCURO DO PAINEL ADMIN (opt-in via botão flutuante 🌙)
   -------------------------------------------------------------------
   Centralizado aqui de propósito: em vez de trocar os ~266 `#fff`
   fixos espalhados em 74 templates (arriscado — quebra impressão e
   texto branco sobre cor), pinto as superfícies-card com var(--card)
   sob `body.admin.escuro`. O seletor `body.admin.escuro .x` tem
   especificidade maior que o `.x{background:#fff}` do template, então
   vence sem tocar no template. Desligado por padrão: quem não ligar
   não vê diferença. As telas de impressão têm CSS próprio (#000 sobre
   branco) que NÃO é alcançado por estes seletores — impressão intacta. */
/* Botão flutuante do tema. `bottom:72px` deixa ele ACIMA das barras fixas de
   baixo (salvar/lote/transferência têm ~50-60px), então nunca cobre um botão. */
.admin-tema{ position:fixed; right:16px; bottom:72px; z-index:81; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--linha); background:var(--card); box-shadow:var(--sombra);
  font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:.9; }
.admin-tema:hover{ transform:translateY(-1px); opacity:1; }

body.admin.escuro{ --bg:#141419; --card:#1f1f27; --texto:#f1f1f4; --cinza:#9a9aa4; --linha:#2e2e39;
  --sombra:0 2px 10px rgba(0,0,0,.4); background:#141419; color:var(--texto); }

/* superfícies-card (fundo branco fixo → carta escura) */
body.admin.escuro .sub-nav, body.admin.escuro .form-card, body.admin.escuro .cat-bloco,
body.admin.escuro .vc-card, body.admin.escuro .barra-bling, body.admin.escuro .vd,
body.admin.escuro .barra, body.admin.escuro .barra-lote, body.admin.escuro .barra-salvar,
body.admin.escuro .dup-cx, body.admin.escuro .bal-lin, body.admin.escuro .bl-card,
body.admin.escuro .bl-hist, body.admin.escuro .cab, body.admin.escuro .cab-rem,
body.admin.escuro .it, body.admin.escuro .item, body.admin.escuro .camera,
body.admin.escuro .fc-cx, body.admin.escuro .fc-pend, body.admin.escuro .adm-c,
body.admin.escuro .adm-tab, body.admin.escuro .cofre, body.admin.escuro .cs-card,
body.admin.escuro .novo, body.admin.escuro .novo-custo, body.admin.escuro .rc,
body.admin.escuro .rm, body.admin.escuro .custo-row, body.admin.escuro .cat,
body.admin.escuro .prod-item, body.admin.escuro .hp-preview, body.admin.escuro .bp-res,
body.admin.escuro .pp-topo, body.admin.escuro .pp, body.admin.escuro .cx,
body.admin.escuro .bloco, body.admin.escuro .ch-esq, body.admin.escuro .ch-dir,
body.admin.escuro .ins, body.admin.escuro .contador, body.admin.escuro .salvar-fixo,
body.admin.escuro .db-c, body.admin.escuro .db-loja, body.admin.escuro .metodo-card,
body.admin.escuro .metodo-cx, body.admin.escuro .cidade-lista, body.admin.escuro .ac-lista,
body.admin.escuro .filtros, body.admin.escuro .mov-tab, body.admin.escuro .mov-cx,
body.admin.escuro .mov-hist, body.admin.escuro .lancar, body.admin.escuro .topo-bal,
body.admin.escuro .bal-tab, body.admin.escuro .passos, body.admin.escuro .passo,
body.admin.escuro .marca, body.admin.escuro .cartao, body.admin.escuro .caixa,
body.admin.escuro .fn-card, body.admin.escuro .canal, body.admin.escuro .b-chip,
body.admin.escuro .nf-card, body.admin.escuro .mp-canal, body.admin.escuro .mp-conta,
body.admin.escuro .neg-cx, body.admin.escuro .np-l, body.admin.escuro .pag-card,
body.admin.escuro .alerta, body.admin.escuro .tab-pv, body.admin.escuro .chip,
body.admin.escuro .linha, body.admin.escuro .vazio{
  background:var(--card); color:var(--texto); }

/* faces de botão brancas (± / abas) → carta escura */
body.admin.escuro .btn.sec, body.admin.escuro .btn.danger, body.admin.escuro .mini-add,
body.admin.escuro .fmt-op, body.admin.escuro .db-per a, body.admin.escuro .fx-del,
body.admin.escuro .va-nova, body.admin.escuro .vaba, body.admin.escuro .qtd-bt button,
body.admin.escuro .cnt button, body.admin.escuro .cont button, body.admin.escuro .qtd button,
body.admin.escuro .atalhos button, body.admin.escuro .passos button,
body.admin.escuro .desc-tipo button{
  background:var(--card); color:var(--texto); border-color:var(--linha); }

/* superfícies que faltaram na 1ª lista (mesma regra, via :is() pra ficar enxuto).
   `.qr-cartao` fica DE FORA de propósito: o QR do WhatsApp precisa de fundo branco
   pra ser escaneável. `.slider:before` (botão do toggle) também não é alcançado. */
body.admin.escuro :is(.novo-ped, .formas, .rem, .topo, .sug, .vb-cx, .tut, .pasta,
  .vd-cx, .vt-p, .vt-prev, .fechar-box, .sc-cont, .sc-card, .sc-lista, .lado,
  .cli-cupom){ background:var(--card); color:var(--texto); }
body.admin.escuro :is(.contador button, .cat-bt){ background:var(--card);
  color:var(--texto); border-color:var(--linha); }
body.admin.escuro .cat-bt{ color:var(--cinza); }
body.admin.escuro .cat-bt.ativo{ background:var(--cor); color:#fff; }
/* stragglers achados varrendo as telas em modo escuro (regras multi-linha que o
   grep de linha única não pegou): superfícies e segmented-controls brancos. */
body.admin.escuro :is(.filtro, .mt-conta, .pill){ background:var(--card); color:var(--texto); }
body.admin.escuro :is(.btn-ordem, .adm-per a){ background:var(--card); color:var(--texto);
  border-color:var(--linha); }

/* campos de texto (os fora do .campo padrão também) */
body.admin.escuro input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
body.admin.escuro select, body.admin.escuro textarea{
  background:var(--card); color:var(--texto); border-color:var(--linha); }

/* sub-nav: texto legível na carta escura (a aba ativa mantém bordô+branco) */
body.admin.escuro .sub-nav a{ color:var(--texto); }
body.admin.escuro .sub-nav a.ativo{ color:#fff; }

/* avisos amarelos (#fffdf5) → âmbar escuro, mantendo o significado */
body.admin.escuro .aviso, body.admin.escuro .perdidas, body.admin.escuro .aviso-foto,
body.admin.escuro .div-box, body.admin.escuro .item.dif{
  background:rgba(230,161,0,.12); border-color:rgba(230,161,0,.5); color:var(--texto); }
body.admin.escuro .aviso-fase{ background:var(--bg); color:var(--cinza); }

/* ── ⓘ Ajuda curta ───────────────────────────────────────────────────
   Troca os parágrafos de explicação por um ícone discreto (círculo com i)
   que revela o texto ao passar o mouse ou tocar. Deixa as telas de config
   enxutas — pedido do dono: "mais simples, menor e minimalista". */
.info{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:5px; border-radius:50%;
  border:1px solid var(--cinza); color:var(--cinza);
  font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700;
  font-size:10px; line-height:1; cursor:help; vertical-align:middle; flex:none;
  user-select:none; }
.info::after{ content:"i"; }
.info:hover, .info:focus{ border-color:var(--cor); color:var(--cor); outline:none; }
.info:hover::before, .info:focus::before{
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 7px);
  transform:translateX(-50%); width:max-content; max-width:260px;
  background:var(--texto); color:var(--bg);
  font-family:inherit; font-style:normal; font-weight:400; font-size:12px; line-height:1.4;
  text-align:left; padding:8px 10px; border-radius:9px; box-shadow:var(--sombra);
  white-space:normal; z-index:60; pointer-events:none; }

/* "＋" no fim da fileira de lojas: cria nova loja / conecta marketplace.
   Maior que os pills de loja, pra convidar ao clique (pedido do dono). */
.lojas-pills .lp-add{ font-weight:800; font-size:22px; line-height:1;
  padding-top:0; padding-bottom:0; color:var(--cor); }
.lojas-pills .lp-add:hover{ background:var(--cor); color:#fff; }

/* Seção recolhível (Aparência / Funcionamento dentro da aba Dados). */
.bloco{ border:1px solid var(--linha); border-radius:14px; background:#fff;
  margin-bottom:16px; overflow:hidden; }
.bloco>summary{ list-style:none; cursor:pointer; padding:14px 16px;
  font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px; }
.bloco>summary::-webkit-details-marker{ display:none; }
.bloco>summary::after{ content:"▸"; margin-left:auto; color:var(--cinza);
  transition:transform .15s; }
.bloco[open]>summary::after{ transform:rotate(90deg); }
.bloco>summary .sub-lbl{ font-weight:400; font-size:12px; color:var(--cinza); }
.bloco-corpo{ padding:2px 16px 18px; }
body.admin.escuro .bloco{ background:var(--card); }

/* Seletor principal da Vitrine (Destaques/Lançamentos/Promoção/Banner). */
.vit-sel-rot{ display:block; font-size:12px; color:var(--cinza); margin-bottom:6px; font-weight:600; }
.vit-sel{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.vit-sel a{ padding:9px 16px; border-radius:999px; border:1.5px solid var(--linha);
  background:#fff; font-weight:700; font-size:14px; color:var(--texto); }
.vit-sel a:hover{ border-color:var(--cor); }
.vit-sel a.on{ background:var(--cor); border-color:var(--cor); color:#fff; }
body.admin.escuro .vit-sel a{ background:var(--card); }

/* ===== Fonte do painel: sistema central + seletor =====================
   O navegador NÃO faz input/select/textarea/button herdarem a fonte da página
   — era isso que deixava muitos CAMPOS numa fonte diferente do resto. Aqui a
   fonte do admin inteiro (menus, abas, sub-abas, campos) vem de UMA variável, e
   os campos herdam sempre. A escolha do dono vira só o valor da variável. */
:root{ --fonte-sistema:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
body.admin{ font-family:var(--fonte-sistema); }
body.admin input, body.admin select, body.admin textarea,
body.admin button, body.admin optgroup{ font-family:inherit; }

/* Botão flutuante do seletor de fonte (logo acima do botão de tema). */
.admin-fonte{ position:fixed; right:16px; bottom:122px; z-index:81; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--linha); background:var(--card); box-shadow:var(--sombra);
  font-size:16px; font-weight:800; line-height:1; cursor:pointer; display:flex; align-items:center;
  justify-content:center; opacity:.9; }
.admin-fonte:hover{ transform:translateY(-1px); opacity:1; }
.admin-fonte-menu{ position:fixed; right:16px; bottom:172px; z-index:82; width:216px;
  background:var(--card); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--sombra);
  padding:8px; display:flex; flex-direction:column; gap:2px; }
.admin-fonte-menu b{ font-size:12px; color:var(--cinza); padding:4px 8px 6px; }
.admin-fonte-menu button{ text-align:left; padding:9px 11px; border:none; background:none;
  border-radius:8px; font-size:15px; color:var(--texto); cursor:pointer; }
.admin-fonte-menu button:hover{ background:var(--bg); }
.admin-fonte-menu button.on{ background:var(--cor); color:#fff; }

/* Checkout: resumo recolhido dos dados do cliente já cadastrado (encurta a tela).
   "Editar" reabre os campos completos. */
.cli-resumo{ display:flex; align-items:center; gap:10px; background:var(--bg,#f5f5f7);
  border:1px solid var(--linha,#e5e5ea); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.cli-resumo .cli-info{ flex:1; min-width:0; overflow:hidden; }
.cli-resumo .cli-info b{ display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli-resumo .cli-info small{ display:flex; flex-wrap:wrap; gap:1px 10px; color:var(--cinza,#8a8a8e); font-size:12.5px; }
.cli-resumo .cli-info small span:empty{ display:none; }
.cli-resumo .cli-editar{ flex:none; border:1px solid var(--linha,#e5e5ea); background:#fff;
  border-radius:9px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer; color:var(--cor,#6d0f1f); }
.cli-resumo .cli-editar:hover{ background:var(--cor,#6d0f1f); color:#fff; }

/* ===== Checkout em etapas (wizard) =====================================
   1 Endereço → 2 Localização → 3 Envio → 4 Pagamento. A etapa concluída vira
   um cabeçalho compacto com ✓ e um resumo; clicar nele reabre pra trocar. */
.etapa{ border:1px solid var(--linha,#e5e5ea); border-radius:14px; margin-bottom:10px;
  background:var(--card,#fff); overflow:hidden; }
.etapa-cab{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px;
  background:none; border:none; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.et-num{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--bg,#f1f1f4);
  color:var(--cinza,#8a8a8e); font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.etapa.aberta .et-num{ background:var(--cor); color:#fff; }
.etapa.feita .et-num{ background:#1db954; color:#fff; font-size:0; }
.etapa.feita .et-num::after{ content:"✓"; font-size:14px; }
.et-tit{ font-weight:800; font-size:15px; flex:none; }
.et-resumo{ flex:1; min-width:0; font-size:12.5px; color:var(--cinza,#8a8a8e);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.et-seta{ flex:none; color:var(--cinza,#8a8a8e); font-size:12px; transition:transform .15s; }
.etapa.aberta .et-seta{ transform:rotate(180deg); }
.etapa-corpo{ display:none; padding:0 14px 14px; }
.etapa.aberta .etapa-corpo{ display:block; }
/* etapa ainda não liberada: apagada e sem clique */
.etapa.bloqueada .etapa-cab{ opacity:.45; pointer-events:none; }

/* "Próximo →" — cheio, grande e com a seta que anda no hover */
.btn-proximo{ width:100%; margin-top:14px; padding:14px; border:none; border-radius:12px;
  background:var(--cor); color:#fff; font:inherit; font-size:16px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.16); }
.btn-proximo span{ font-size:19px; transition:transform .15s; }
.btn-proximo:hover span{ transform:translateX(4px); }
.btn-proximo:active{ transform:translateY(1px); }
/* "+ Cadastrar novo endereço": discreto, não compete com o Próximo */
.link-discreto{ background:none; border:none; padding:6px 0; font:inherit; font-size:13px;
  color:var(--cor); cursor:pointer; text-decoration:underline; }

/* Trilha 1—2—3—4 do checkout: onde ela está e o que já ficou pronto. */
.passos{ display:flex; margin:14px 0; }
.passo{ flex:1; position:relative; display:flex; flex-direction:column;
  align-items:center; gap:6px; cursor:pointer; }
.passo::before{ content:""; position:absolute; top:13px; left:0; right:50%;
  height:2px; background:var(--linha,#e5e5ea); }
.passo:first-child::before{ display:none; }
.passo.feito::before, .passo.atual::before{ background:var(--cor,#6d0f1f); }
.p-num{ width:26px; height:26px; border-radius:50%; background:var(--bg,#f1f1f4);
  color:var(--cinza,#8a8a8e); font-size:13px; font-weight:800; display:flex;
  align-items:center; justify-content:center; position:relative; z-index:1;
  border:2px solid var(--bg,#f1f1f4); }
.passo.atual .p-num{ background:var(--cor,#6d0f1f); color:#fff; border-color:var(--cor,#6d0f1f); }
.passo.feito .p-num{ background:#1db954; color:#fff; border-color:#1db954; font-size:0; }
.passo.feito .p-num::after{ content:"✓"; font-size:14px; }
.p-lbl{ font-size:11px; color:var(--cinza,#8a8a8e); text-align:center; line-height:1.2; }
.passo.atual .p-lbl{ color:var(--cor,#6d0f1f); font-weight:800; }