/* ===================================================================
   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; }
/* Botões de ação dos cards no escuro. Dois problemas: o quick-add (.qa-stepper)
   tinha fundo branco fixo (as "partes brancas"), e tudo que era bordô (--cor)
   — "Escolher +", preços e +/– das fitas — some no fundo escuro. Fundo do card
   + rosa claro (mesmo tom do nome da loja) resolve o contraste. */
body.loja.escuro .qa-stepper{ background:var(--card); border-color:var(--linha); }
body.loja.escuro .qa-stepper button,
body.loja.escuro .var-op .vo-st button,
body.loja.escuro .vo-stepper button,
body.loja.escuro .var-op .vo-preco{ color:#e79a9f; }
body.loja.escuro .destaque-mais{ color:#e79a9f; border-color:#4a3138; }
body.loja.escuro .var-op{ border-color:var(--linha); }
body.loja.escuro .var-op.ativa{ background:rgba(231,154,159,.10); border-color:#e79a9f; }
/* Barra das abas de categoria: tinha fundo branco fixo (a faixa branca atrás
   dos chips escuros). No escuro vira quase-preto translúcido, igual à busca. */
body.loja.escuro .cat-tabs{ background:rgba(20,20,25,.96); }
*{ 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 ---------- */
/* Canto do topo: botão Conta (celular) ao lado da bandeira de idioma. */
.topo-canto{ position:absolute; top:12px; right:12px; z-index:30; display:flex; align-items:center; gap:8px; }
.topo-canto .lang-sel{ position:static; top:auto; right:auto; }
.topo-conta-bt{ display:flex; align-items:center; justify-content:center; width:38px; height:32px;
  border:none; border-radius:10px; background:rgba(0,0,0,.45); color:#fff; font-size:18px; cursor:pointer; }
@media (min-width:1000px){ .topo-conta-bt{ display:none; } }   /* no PC a Conta já fica na barra pc-topo */
.lang-sel{ position:absolute; top:12px; right:12px; z-index:30; }
.lang-atual{ display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.45); color:#fff;
  border:none; border-radius:10px; padding:7px 11px; cursor:pointer; }
.lang-atual img{ width:24px; height:16px; border-radius:3px; object-fit:cover; display:block; }
.lang-atual .lang-ar{ font-size:11px; opacity:.9; }
.lang-menu{ position:absolute; top:calc(100% + 6px); right:0; background:#fff; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.20); overflow:hidden; min-width:172px; }
.lang-menu.oculto{ display:none; }
.lang-opt{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none;
  padding:11px 14px; font-size:14px; font-weight:700; color:#1f2430; cursor:pointer; text-align:left; }
/* Cores FIXAS (o menu é sempre branco): sem var(--texto)/--bg, senão no modo
   escuro o texto clareava e sumia no fundo branco. */
.lang-opt:hover,.lang-opt.sel{ background:#f0f0f3; }
.lang-opt img{ width:26px; height:17px; border-radius:3px; object-fit:cover; display:block; }

/* ---------- 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 só o CTA "faça seu pedido a qualquer hora" (redundante no cardápio), a
   faixa fica bem fina e um selo "Cardápio" dá a identidade que separa do site
   online. O HORÁRIO ("loja aberta/fechada", abre/fecha às X) CONTINUA à vista —
   a loja física tem horário como qualquer outra. Vale no celular e no PC. */
body.cardapio .btn-pedido{ 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; }
/* Resgatar cupom (estilo Amazon): recolhido, colado no valor. */
.cupom-resgatar{ margin-bottom:8px; }
.cupom-resgatar-bt{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:11px 12px; border:1px dashed var(--linha); border-radius:10px;
  background:transparent; color:var(--texto); font-family:inherit; font-size:13.5px;
  font-weight:700; cursor:pointer; }
.cupom-resgatar-bt:hover{ border-color:var(--cor); }
.cupom-resgatar-bt .cr-seta{ color:var(--cor); transition:transform .15s; }
.cupom-resgatar.aberto .cr-seta{ transform:rotate(180deg); }
.cupom-painel{ padding:10px 2px 2px; }
.cupom-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; }
.cupom-chip{ border:1px solid var(--cor); background:transparent; color:var(--cor);
  border-radius:999px; padding:7px 12px; font-size:12.5px; font-weight:700;
  font-family:inherit; cursor:pointer; }
.cupom-chip:hover{ background:var(--cor); color:#fff; }

/* 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; }
/* Olhinho pra mostrar/ocultar senha (login do painel, entregador, separação…). */
.senha-linha{ position:relative; }
.senha-linha input{ width:100%; box-sizing:border-box; padding-right:44px; }
.senha-olho{ position:absolute; top:50%; right:6px; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:18px; line-height:1; padding:6px; opacity:.6; }
.senha-olho:hover{ opacity:1; }
/* Deter download das fotos da loja (print ainda é possível — não dá pra impedir). */
body.loja img, body.loja .pp-foto, body.loja .thumb, body.loja .destaque-foto,
body.loja .produto-foto, body.loja .pp-sug-foto, body.loja [style*="background-image"]{
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
/* Botão compartilhar na página de produto */
.pp-share{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 10px;
  padding:7px 14px; border:1px solid var(--linha,#e6e6ee); border-radius:999px;
  background:var(--card,#fff); color:var(--texto,#333); font-size:13px; font-weight:700;
  cursor:pointer; }
.pp-share:hover{ border-color:var(--cor); color:var(--cor); }
/* Login social (Google/Facebook) no cadastro. */
.bv-social{ display:flex; flex-direction:column; gap:8px; margin:0 0 10px; }
.bv-social-bt{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  box-sizing:border-box; padding:11px 14px; border-radius:10px; font-size:14px; font-weight:700;
  text-decoration:none; border:1px solid var(--linha); cursor:pointer; }
.bv-social-bt.g{ background:#fff; color:#3c4043; }
.bv-social-bt.f{ background:#1877f2; color:#fff; border-color:#1877f2; }
.bv-social-ic{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; font-weight:900; font-size:14px; flex:none; }
.bv-social-bt.g .bv-social-ic{ background:#fff; color:#4285f4; border:1px solid var(--linha); }
.bv-social-bt.f .bv-social-ic{ background:#fff; color:#1877f2; }
.bv-social-ou{ position:relative; text-align:center; margin:4px 0 2px; }
.bv-social-ou::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--linha); }
.bv-social-ou span{ position:relative; background:var(--card); padding:0 10px; font-size:12px; color:var(--cinza); }

/* ---------- "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:10px 42px 10px 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); }
.busca-fechar{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:none; color:var(--cinza); font-size:16px; cursor:pointer;
  padding:6px; line-height:1; display:none; }
/* No celular a busca NÃO fica fixa no topo: abre ao tocar em "Buscar" na barra de
   baixo (o foco sobe o teclado) e fecha no ✕. No desktop segue a busca de sempre. */
@media (max-width:999px){
  .busca-wrap{ display:none; }
  body.busca-aberta .busca-wrap{ display:block !important; position:fixed; top:0; left:0; right:0; z-index:55;
    background:var(--card); box-shadow:0 3px 12px rgba(0,0,0,.16);
    padding:10px 12px !important; }   /* !important vence o recuo do "tem-conta" (barra inteira) */
  body.busca-aberta .busca-fechar{ display:block; }
}
body.loja.escuro .busca-wrap{ background:rgba(20,20,25,.97); }
/* Busca ATIVA (2+ letras): esconde capa/faixas pra os RESULTADOS aparecerem logo
   abaixo da barra de busca (senão a cliente digita e continua vendo a capa). */
body.busca-ativa .capa, body.busca-ativa .promo-banner, body.busca-ativa .cupons-faixa,
body.busca-ativa .destaques, body.busca-ativa .vitrine-bar{ display:none !important; }
@media (max-width:999px){ body.busca-ativa #cardapio{ margin-top:58px; } }

/* ---------- Abas de categoria (sticky, logo abaixo da busca) ---------- */
.cat-tabs{ position:sticky; top:50px; z-index:20; display:flex; gap:6px; overflow-x:auto;
  padding:6px 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; }
/* Arrastar pra rolar (desktop): mãozinha; ao arrastar, vira "agarrando" e trava
   a seleção de texto. Genérico: vale pra toda barra .arrasta-rola (categorias,
   cupons, thumbs do produto…). */
@media (pointer:fine){ .arrasta-rola{ cursor:grab; } }
/* Rolagem por inércia no toque (iOS/Android) — sem isto, em alguns Safari a
   barra "não arrastava para o lado". */
.arrasta-rola{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.arrasta-rola.arrastando{ cursor:grabbing; user-select:none; }
/* Impede o arrasto nativo de link/imagem dentro da barra (travava ao arrastar). */
.arrasta-rola a, .arrasta-rola img{ -webkit-user-drag:none; user-drag:none; }
/* (NÃO usar pointer-events:none nos filhos — travava o clique dos menus. A
   supressão do clique pós-arrasto é feita no JS, só quando arrastou de fato.) */
body.loja.escuro .cat-tabs{ background:rgba(20,20,25,.96); }
/* No celular as categorias descem pra logo ACIMA da barra de baixo (mesma função,
   só muda de lugar). No desktop continuam no topo (sticky). ~52px = altura da barra. */
@media (max-width:999px){
  .cat-tabs{ position:fixed; top:auto; bottom:calc(52px + env(safe-area-inset-bottom));
    left:0; right:0; z-index:49; border-bottom:none; border-top:1px solid var(--linha);
    box-shadow:0 -2px 8px rgba(0,0,0,.05); }
  .categoria{ scroll-margin-top:12px; }
  body.loja{ padding-bottom:150px; }   /* espaço p/ categorias + barra de baixo */
}
.cat-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--cinza); padding:6px 13px; border-radius:16px; background:var(--bg); white-space:nowrap; transition:.15s; }
.cat-chip.ativo{ background:var(--cor); color:#fff; }
/* Logo da categoria no chip: formato/tamanho vêm da aba da loja (Google/iOS/Samsung, P/M/G). */
.cat-chip .cc-logo{ flex:none; width:var(--catlogo-size,24px); height:var(--catlogo-size,24px);
  border-radius:var(--catlogo-radius,50%); object-fit:cover; background:#fff; }
/* Aba mostrando SÓ a logo (sem o nome escrito): vira um ícone tipo app.
   O formato (redondo/quadrado) é escolhido por marca em Categorias. */
.cat-chip.chip-logo{ padding:3px; background:transparent; gap:0; }
.cat-chip.chip-logo .cc-logo{ width:42px; height:42px; border:1px solid var(--linha); }
.cat-chip.chip-redondo .cc-logo{ border-radius:50%; }
.cat-chip.chip-quadrado .cc-logo{ border-radius:24%; }
.cat-chip.chip-logo.ativo{ background:transparent; }
.cat-chip.chip-logo.ativo .cc-logo{ border-color:var(--cor); box-shadow:0 0 0 2px var(--cor); }

/* ---------- Filtro por CATEGORIA (a taxonomia da dona; filtra a vitrine) ----------
   Barra de pílulas rolável, no fluxo normal (não briga com o sticky das abas de
   grupo). "Todas" limpa o filtro. Some enquanto a busca está ativa. */
.vit-cats{ position:sticky; top:var(--vitcats-top, 120px); z-index:19;
  display:flex; gap:8px; overflow-x:auto; padding:10px 14px 8px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha); scrollbar-width:none; }
body.loja.escuro .vit-cats{ background:rgba(20,20,25,.96); }
/* No celular a barra rolável sai: as categorias vão pro sheet (botão da barra
   de baixo). No PC a barra sticky continua. */
@media (max-width:999px){ .vit-cats{ display:none !important; } }
/* Lista de categorias dentro do sheet (celular): uma linha embaixo da outra. */
.cat-sheet-lista{ display:flex; flex-direction:column; gap:6px; padding:2px 0 6px; }
.cat-sheet-lista .vit-cat{ width:100%; text-align:left; white-space:normal;
  padding:12px 14px; border-radius:10px; font-size:15px; }
.cat-sheet-lista .vit-cat.on{ background:var(--cor); color:#fff; border-color:var(--cor); }
.vit-cats::-webkit-scrollbar{ display:none; }
.vit-cat{ flex:0 0 auto; font-size:13px; font-weight:600; color:var(--cinza);
  padding:7px 15px; border-radius:18px; border:1px solid var(--linha);
  background:var(--bg); white-space:nowrap; cursor:pointer; transition:.15s; }
@media (pointer:fine){ .vit-cat:hover{ border-color:var(--cor); color:var(--texto,inherit); } }
.vit-cat.on{ background:var(--cor); color:#fff; border-color:var(--cor); }
body.busca-ativa .vit-cats{ display:none !important; }

/* ---------- Categorias e produtos ---------- */
.categoria{ padding:10px 14px 4px; scroll-margin-top:58px; }
/* No celular NÃO há mais barra fixa no topo (busca só abre sob demanda, categorias
   foram pro rodapé): a marca clicada encosta no topo, sem sobrar a anterior em cima.
   Fica DEPOIS da regra base pra vencer (mesma especificidade). */
@media (max-width:999px){ .categoria{ scroll-margin-top:8px; } }
/* 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:17px; font-weight:800; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.cat-logo-titulo{ width:34px; height:34px; border-radius:var(--catlogo-radius,8px); object-fit:contain; background:#fff; }
.produto{ display:flex; gap:10px; padding:8px 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; }
/* Nome em no máximo 2 linhas (reticências depois). O nome completo aparece ao
   tocar no produto (página do produto). */
.produto-texto h3{ font-size:15px; font-weight:600; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.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:3px; }
/* Unidade colada no preço ("R$ 100,00 · UN"), pra economizar uma linha. */
.preco-un{ font-size:12px; color:var(--gold); font-weight:700; white-space:nowrap; }
.produto-foto{ position:relative; width:92px; height:92px; flex:0 0 92px; }
.produto-foto img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
/* Carrossel de fotos no card: arrasta pro lado pra ver mais fotos SEM abrir o
   produto. Toque (sem arrastar) ainda abre o produto (o card é um link). */
.produto-foto .pf-carrossel{ display:flex; width:100%; height:100%; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:12px; }
.produto-foto .pf-carrossel::-webkit-scrollbar{ display:none; }
.produto-foto .pf-carrossel img{ flex:0 0 100%; scroll-snap-align:center; }
.produto-foto .pf-dots{ position:absolute; bottom:6px; left:0; right:0; z-index:2; display:flex;
  justify-content:center; gap:4px; pointer-events:none; }
.produto-foto .pf-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55);
  box-shadow:0 0 2px rgba(0,0,0,.45); transition:.15s; }
.produto-foto .pf-dots span.on{ background:#fff; transform:scale(1.25); }
body.loja.vitrine-grade .produto-foto .pf-carrossel,
body.loja.vitrine-grade3 .produto-foto .pf-carrossel{ border-radius:0; }
.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); }

/* ===== Vitrine moderna: GRADE x LISTA (toggle no topo) ===== */
.vitrine-bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 2px; }
.vitrine-bar .vb-count{ font-size:13px; color:var(--cinza); font-weight:700; }
.vitrine-bar .vb-dir{ display:inline-flex; align-items:center; gap:8px; }
.vitrine-bar .vb-view{ display:inline-flex; gap:5px; }
.vitrine-bar .vb-bt{ width:36px; height:32px; border:1px solid var(--linha); background:var(--card); border-radius:9px;
  font-size:16px; color:var(--cinza); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.vitrine-bar .vb-bt svg{ fill:currentColor; display:block; }
.vitrine-bar .vb-bt.sel{ border-color:var(--cor); color:var(--cor); background:rgba(109,15,31,.06); }
.vitrine-bar .vb-fav{ border:1px solid var(--linha); background:var(--card); border-radius:9px; height:32px;
  padding:0 11px; font-size:13px; font-weight:700; color:var(--cinza); cursor:pointer; white-space:nowrap; }
.vitrine-bar .vb-fav.on{ border-color:var(--cor); color:var(--cor); background:rgba(109,15,31,.06); }
/* Coração de favoritar no card. Fundo escuro translúcido pra o ♡ aparecer em
   qualquer foto (a bolinha branca sumia nas fotos claras). */
.produto-foto .fav-bt, .destaque-foto .fav-bt{ position:absolute; top:6px; right:6px; z-index:3; width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(0,0,0,.4); color:#fff; font-size:17px; line-height:1; cursor:pointer;
  padding:0; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.produto-foto .fav-bt.on, .destaque-foto .fav-bt.on{ background:#c0242a; color:#fff; }
/* Coração de favoritar na PÁGINA de produto: maior, no canto da galeria. Regra
   COMPLETA (não herda a de .produto-foto, que é escopada) — senão o <button>
   caía no estilo padrão do navegador (aquele quadrado cinza) e no fluxo normal. */
.pp-fav{ position:absolute; top:12px; right:12px; z-index:4; width:42px; height:42px;
  border:none; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; font-size:23px;
  line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.3); }
.pp-fav.on{ background:#c0242a; color:#fff; }
/* Ver só favoritos: esconde os que não são favoritos e as categorias que ficaram vazias */
body.so-favoritos .produto:not(.is-fav){ display:none; }
body.so-favoritos .categoria.sem-fav{ display:none; }
/* Aba Favoritos: modo focado — só o cabeçalho + os favoritos. */
.fav-header{ display:flex; align-items:center; gap:12px; padding:12px 14px 4px; }
.fav-header .fav-voltar{ background:none; border:none; color:var(--cor); font-weight:800; font-size:14px; cursor:pointer; padding:0; }
.fav-header .fav-titulo{ font-size:17px; font-weight:800; color:var(--texto); }
.fav-vazio{ text-align:center; padding:44px 24px; color:var(--cinza); }
.fav-vazio .fv-ic{ font-size:46px; margin-bottom:8px; }
.fav-vazio p{ margin:0 0 16px; line-height:1.5; }
body.so-favoritos .cat-tabs, body.so-favoritos .vitrine-bar,
body.so-favoritos .categoria .cat-titulo, body.so-favoritos .capa,
body.so-favoritos .destaques, body.so-favoritos .promo-banner,
body.so-favoritos .aviso-topo, body.so-favoritos .cupons-faixa{ display:none; }
/* GRADE: cards em 2 ou 3 colunas, foto no topo (some no modo lista).
   Laterais finas (8px) pra os cards ficarem bem largos. */
body.loja.vitrine-grade .produtos,
body.loja.vitrine-grade3 .produtos{ display:grid; gap:8px; padding:2px 8px 10px; }
body.loja.vitrine-grade .produtos{ grid-template-columns:repeat(2,1fr); }
body.loja.vitrine-grade3 .produtos{ grid-template-columns:repeat(3,1fr); gap:6px; }
body.loja.vitrine-grade .produto,
body.loja.vitrine-grade3 .produto{ flex-direction:column; align-items:stretch; gap:0; padding:0;
  border:1px solid var(--linha); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:var(--sombra); position:relative; }
body.loja.vitrine-grade .produto-foto,
body.loja.vitrine-grade3 .produto-foto{ width:100%; height:auto; aspect-ratio:1/1; flex:none; order:0; }
body.loja.vitrine-grade .produto-foto img,
body.loja.vitrine-grade .produto-foto .sem-foto,
body.loja.vitrine-grade3 .produto-foto img,
body.loja.vitrine-grade3 .produto-foto .sem-foto{ border-radius:0; }
body.loja.vitrine-grade .produto-texto,
body.loja.vitrine-grade3 .produto-texto{ order:1; padding:8px 10px 6px; }
body.loja.vitrine-grade .produto-texto h3{ font-size:13.5px; }
body.loja.vitrine-grade .produto-acao,
body.loja.vitrine-grade3 .produto-acao{ order:2; padding:0 10px 10px; justify-content:flex-start; }
/* 3 por linha: tudo mais compacto pra caber. */
body.loja.vitrine-grade3 .produto-texto{ padding:6px 7px 4px; }
body.loja.vitrine-grade3 .produto-texto h3{ font-size:11.5px; line-height:1.25; }
body.loja.vitrine-grade3 .produto-texto .preco{ font-size:13px; }
body.loja.vitrine-grade3 .produto-acao{ padding:0 7px 8px; }
body.loja.vitrine-grade3 .produto-foto .fav-bt{ width:26px; height:26px; font-size:14px; top:4px; right:4px; }
body.loja.vitrine-grade3 .mais{ width:30px; height:30px; font-size:19px; }
.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 */
/* Controle de quantidade compacto (~76×34), borda cinza clara, sem sombra. */
.qa-stepper{ display:flex; flex-direction:row; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--linha); border-radius:10px; padding:4px 7px; }
.qa-stepper.ativo{ border-color:var(--cor); }
.qa-stepper button{ border:none; background:none; color:var(--cor); font-size:18px; line-height:1;
  width:20px; height:24px; cursor:pointer; }
.qa-qtd{ min-width:12px; 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); }
/* Produto esgotado + "Avise-me quando chegar". O selo fica embaixo à esquerda
   pra não brigar com o selo de promo (topo-esq) nem com o coração (topo-dir). */
.esgotado-selo{ top:auto; bottom:6px; left:6px; background:#6b7280; }
.produto.esgotado .produto-foto .pf-carrossel,
.produto.esgotado .produto-foto img,
.produto.esgotado .produto-foto .sem-foto{ filter:grayscale(.9); opacity:.82; }
.avise-bt{ width:100%; border:1px solid var(--cor); background:rgba(109,15,31,.06); color:var(--cor);
  font-weight:700; font-size:12.5px; border-radius:10px; padding:8px 10px; cursor:pointer;
  font-family:inherit; line-height:1.2; text-align:center; }
.avise-bt:hover{ background:var(--cor); color:#fff; }
.avise-bt:disabled{ opacity:.75; cursor:default; }
.avise-bt.avisado{ border-color:#137a3a; color:#137a3a; background:rgba(19,122,58,.08); }
/* Esgotado no card de DESTAQUE: a foto é background-image (não <img>), então o
   grayscale vai no próprio bloco; o botão Avise-me acompanha o espaçamento. */
.destaque-card.esgotado .destaque-foto{ filter:grayscale(.9); opacity:.82; }
.destaque-card .avise-bt{ margin-top:6px; }

/* 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; }
/* Card em coluna: o nome cresce e ocupa a folga, enquanto PREÇO e BOTÃO ficam
   fixos no rodapé — alinhados entre todos os cards da fileira (grid já iguala a
   altura). Antes, nome de 1 vs 2 linhas deixava botão e preço em alturas
   diferentes de um card pro outro. */
.destaque-card{ min-width:0; display:flex; flex-direction:column; }
/* Só o <a> que EMBRULHA foto+nome+preço cresce. O botão também é um <a>
   (.destaque-mais) — o :not() evita que ele herde o flex:1 e estique. */
.destaque-card > a:not(.destaque-mais){ display:flex; flex-direction:column; flex:1 1 auto; }
.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:3; -webkit-box-orient:vertical; overflow:hidden;
  flex:1 1 auto; }   /* cresce e empurra o preço pro rodapé */
.destaque-preco{ font-size:14px; margin-top:6px; }   /* logo acima do botão */
.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; flex:0 0 auto; }
.destaque-card .var-op.uni{ flex:0 0 auto; }
/* Botão de altura FIXA e texto centralizado por flex: sem isto, num card de
   nome curto (mais folga) o botão esticava e o "Escolher +" desalinhava —
   ficavam com tamanhos diferentes na mesma fileira. flex:0 0 auto trava o
   crescimento; min-height iguala todos. */
.destaque-mais{ flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  min-height:34px; box-sizing:border-box; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--cor); border:1px solid var(--linha); border-radius:20px; padding:4px 8px; }

.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:12px;
  width:calc(100% - 24px); max-width:452px; z-index:40; border:none; cursor:pointer;
  background:var(--cor); color:#fff; padding:13px 16px; border-radius:12px;
  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:22px; height:22px;
  border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.barra-carrinho .total{ margin-left:auto; }

/* ===== Barra de navegação inferior (celular, estilo app SHEIN) ===== */
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:var(--card); border-top:1px solid var(--linha);
  box-shadow:0 -2px 12px rgba(0,0,0,.06); padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav .bn-item{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:7px 2px 6px; border:none; background:none; cursor:pointer;
  color:var(--cinza); font-family:inherit; }
.bottom-nav .bn-ic{ position:relative; font-size:20px; line-height:1; }
.bottom-nav .bn-lb{ font-size:10.5px; font-weight:700; max-width:100%; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.bottom-nav .bn-item.on{ color:var(--cor); }
.bottom-nav .bn-cart .bn-lb{ color:var(--cor); }          /* o total do carrinho em destaque */
/* No modo escuro o bordô fica ilegível: o total do carrinho ganha um tom claro. */
body.loja.escuro .bottom-nav .bn-cart .bn-lb{ color:#f0a6ae; }
body.loja.escuro .bottom-nav .bn-item.on{ color:#f0a6ae; }
.bottom-nav .bn-badge{ position:absolute; top:-6px; right:-11px; min-width:16px; height:16px; padding:0 4px;
  box-sizing:border-box; border-radius:8px; background:#c0242a; color:#fff; font-size:10px; font-weight:800;
  line-height:16px; text-align:center; }
.bottom-nav .bn-badge.oculto{ display:none; }
#navCarrinho.pulou .bn-ic{ animation:bnPulo .4s ease; }
@keyframes bnPulo{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.28); } }
/* No celular as ações migraram pra barra de baixo: some o topo flutuante + a pílula
   (o .click() programático nelas continua funcionando mesmo escondidas). */
@media (max-width:999px){ .topo-esq, .barra-carrinho{ display:none !important; } }
/* No desktop o topo já é barra sticky (loja-pc.css): esconde a barra de baixo. */
@media (min-width:1000px){ .bottom-nav{ display:none; } }

/* ---------- 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); }
/* Pós-pagamento: o "Enviar pedido no WhatsApp" pisca (pulso verde) pra chamar
   a atenção da cliente pra concluir o envio. */
@keyframes wppPulse{ 0%,100%{ transform:scale(1); box-shadow:0 3px 12px rgba(29,185,84,.4); }
  50%{ transform:scale(1.03); box-shadow:0 5px 22px rgba(29,185,84,.75); } }
#pixEnviarWpp, #cartaoEnviarWpp{ animation:wppPulse 1.1s ease-in-out infinite; }
/* O botão finalizar (Enviar pedido / Pagar) ocupa a largura toda, igual ao
   "Próximo" e ao "Calcular" — o container dele não é flex, então o flex:1 não
   esticava sozinho. */
#finalizar{ width:100%; box-sizing:border-box; }

/* ---------- 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%; }
/* Atalhos Casa/Trabalho pro nome do endereço */
.rotulo-chips{ display:flex; gap:8px; margin-top:6px; }
.chip-rotulo{ padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid var(--linha); background:var(--card); color:var(--texto);
  border-radius:999px; transition:border-color .15s, background .15s; }
.chip-rotulo:hover{ border-color:var(--cor); background:rgba(109,15,31,.04); }
.chip-rotulo:active{ transform:scale(.98); background:rgba(109,15,31,.08); }
/* Atalho "editar localização" no checkout (some quando não há pino) */
.link-editar-local{ display:block; width:100%; margin:2px 0 10px; padding:9px;
  font-size:13.5px; font-weight:600; cursor:pointer; color:var(--cor);
  background:transparent; border:1px dashed var(--linha); border-radius:10px; }
.link-editar-local:hover{ border-color:var(--cor); background:rgba(109,15,31,.04); }
/* CPF mascarado na Minha conta (👁 revela) */
.cpf-linha{ display:flex; gap:8px; align-items:stretch; }
.cpf-linha input{ flex:1; }
.cpf-ver{ flex:0 0 auto; width:46px; border:1px solid var(--linha); background:var(--card);
  border-radius:10px; cursor:pointer; font-size:16px; }
.cpf-ver:hover{ border-color:var(--cor); background:rgba(109,15,31,.04); }

/* ===== Passe compacto / minimalista (inspiração iFood) — checkout enxuto,
   fontes e espaços menores pra caber mais em uma tela. Agrupado aqui pra
   calibrar/reverter fácil. ===== */
.etapa{ margin-bottom:8px; border-radius:12px; }
.etapa-cab{ padding:10px 12px; gap:8px; }
.et-num{ width:22px; height:22px; font-size:12px; }
.et-tit{ font-size:14px; }
.et-resumo{ font-size:12px; }
.etapa-corpo{ padding:0 12px 12px; }
.btn-proximo{ margin-top:10px; padding:12px; font-size:15px; border-radius:11px; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.campo{ margin-bottom:8px; }
.campo label{ font-size:12.5px; margin-bottom:3px; }
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
.campo select, .campo textarea{ padding:9px 11px; font-size:14px; }
.cart-item{ padding:9px 0; }
.cart-item .ci-nome, .cart-item .ci-preco{ font-size:13.5px; }
.pag-op{ padding:10px 12px; }
.conta-sec{ margin-bottom:12px; }
.conta-sec .campo{ margin-bottom:6px; }
.conta-sec .campo input, .ct-select{ padding:9px 11px; font-size:14px; }

/* ===== Carrinho: barra de ação fixa (estilo iFood) + itens compactos ===== */
/* Botões de finalizar e a navegação inline das etapas somem — quem comanda é a
   barra fixa #acaoCart. Voltar pra uma etapa: tocar no cabeçalho dela. */
.finalizar-oculto{ display:none !important; }
.sheet-carrinho .etapa-nav, .sheet-carrinho .bt-voltar-solo{ display:none !important; }
/* Cupom fixo no rodapé (acima do valor). */
#cupomRodape{ margin:0 0 8px; }
.cart-acao{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.cart-acao-esq{ flex:1 1 auto; min-width:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
/* Total inline (rótulo na frente do valor), embaixo do subtotal/frete e em
   destaque — o valor alinha na mesma coluna dos de cima. */
.cart-acao-tot{ display:flex; flex-direction:row; align-items:baseline; justify-content:space-between;
  gap:8px; flex:none; margin-top:2px; white-space:nowrap; }
.cart-acao-tot span{ font-size:12px; color:var(--texto); font-weight:800; }
.cart-acao-tot strong{ font-size:15px; }
/* Subtotal/Frete/Cupom miúdos, logo abaixo do Total, numa linha só cada (sem
   quebrar) pra não crescer a barra. */
.cart-mini{ display:flex; flex-direction:column; gap:0; margin-top:1px; }
.cart-mini .cart-total-linha{ margin-bottom:0 !important; font-size:10px !important;
  line-height:1.3; white-space:nowrap; gap:8px; }
/* Botão de ação: metade da largura, do lado direito, altura fixa e compacta
   (não estica com as infos). */
.cart-acao-bt{ flex:none; width:44%; border:none; border-radius:12px; background:var(--cor); color:#fff;
  font:inherit; font-size:15px; font-weight:800; padding:0 14px; cursor:pointer;
  height:49px; min-height:49px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 3px 12px rgba(0,0,0,.14); }
.cart-acao-bt span{ transition:transform .15s; }
.cart-acao-bt:hover span{ transform:translateX(3px); }
.cart-acao-bt:active{ transform:translateY(1px); }
.cart-acao-bt.desativado, .cart-acao-bt:disabled{ background:var(--linha); color:var(--cinza); box-shadow:none; cursor:default; }
/* Dica "role para ver tudo" — flutua logo acima do rodapé fixo. */
.cart-scroll-hint{ position:absolute; left:50%; transform:translateX(-50%); top:-30px;
  background:var(--cor); color:#fff; font-size:11.5px; font-weight:700; padding:4px 12px;
  border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.18); pointer-events:none; white-space:nowrap;
  animation:hintUp 1.2s ease-in-out infinite; }
@keyframes hintUp{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(3px) } }
/* Itens do carrinho compactos: nome + preço na linha, fonte menor. */
/* Itens do carrinho BEM compactos (cabe 12+ na lista): foto pequena, linha fina. */
.cart-item{ padding:5px 0; gap:8px; }
.cart-item .ci-foto{ flex:none; width:34px; height:34px; border-radius:7px;
  background:var(--bg) center/cover no-repeat; }
.cart-item .ci-foto-sem{ display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--cinza); font-size:13px; }
.cart-item .ci-nome{ font-size:11.5px; line-height:1.2; }
.cart-item .ci-preco{ font-size:12px; }
.cart-item .mini-stepper{ gap:6px; }
.cart-item .mini-stepper button{ width:22px; height:22px; }
.cart-item .mini-stepper span{ font-size:12.5px; min-width:14px; text-align:center; }
/* Voltar (←) na barra fixa */
.cart-voltar{ flex:none; width:42px; height:44px; border:1px solid var(--linha); background:var(--card);
  border-radius:12px; font-size:18px; color:var(--texto); cursor:pointer; }
.cart-voltar:hover{ border-color:var(--cor); }
/* Cabeçalhos das etapas sem número (minimalista): • no passo atual, ✓ no feito. */
.et-num{ font-size:0; }
.etapa.aberta .et-num::after{ content:"•"; font-size:18px; line-height:1; }
.etapa.feita .et-num{ font-size:0; }
.etapa.feita .et-num::after{ content:"✓"; font-size:14px; }

/* ===== Cards de seleção do checkout (Entrega/Retirar, Frete, Pagamento) —
   estilo iFood: card selecionável, ícone/rótulo + bolinha de escolha. ===== */
/* Entrega × Retirar: dois cards lado a lado */
.entrega-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.entrega-opts .radio{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  border:1.5px solid var(--linha); border-radius:12px; padding:14px 10px; cursor:pointer;
  font-weight:700; font-size:14px; }
.entrega-opts .radio input{ position:absolute; opacity:0; pointer-events:none; }
.entrega-opts .radio.sel{ border-color:var(--cor); background:rgba(109,15,31,.05); color:var(--cor); }
/* Frete: card compacto com ÍCONE à esquerda (estilo iFood). SEM bolinha — a
   seleção é o próprio card destacado (borda + fundo vermelho claro). */
.frete-opcoes{ gap:6px; }
.frete-op{ flex-direction:row; align-items:center; text-align:left; gap:10px; padding:8px 12px;
  border-radius:10px; position:relative; font-size:13.5px; }
/* Botão de ordenar as opções de frete (tempo x preço). */
/* "Ordenar por" (rótulo, fora) + botão só com o critério (💲 preço / 🕒 tempo). */
.frete-ordenar-linha{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.frete-ordenar-linha .fo-ord-lb{ font-size:12.5px; font-weight:600; color:var(--cinza); }
.frete-ordenar{ display:inline-flex; align-items:center; gap:5px; padding:7px 13px;
  border:1px solid var(--linha); background:var(--card); color:var(--cor); border-radius:20px;
  font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; }
body.loja.escuro .frete-ordenar{ color:#f0a6ae; }
.frete-op .fo-ic{ font-size:22px; line-height:1; flex:none; width:28px; text-align:center; }
.frete-op .fo-nome{ flex:1; font-weight:600; line-height:1.2; }
.frete-op .fo-obs{ display:block; font-size:11.5px; color:var(--cinza); font-weight:400; margin-top:1px; }
.frete-op .fo-preco{ font-size:14px; font-weight:700; white-space:nowrap; }
.frete-op input{ position:absolute; opacity:0; pointer-events:none; }
/* Ícone dos botões Entrega/Retirar */
.entrega-opts .eo-ic{ font-size:18px; }
/* Checkout em TELA CHEIA no mobile — nada atrás, como uma tela própria.
   Layout em 3 faixas: título fixo no topo, miolo rolável, e RODAPÉ FIXO no fim
   (Total + botão sempre colados embaixo, mesmo com poucos itens). */
@media (max-width:680px){
  #modalCarrinho{ background:#fff; }
  #modalCarrinho .sheet-carrinho{ width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; display:flex; flex-direction:column; overflow:hidden; }
  #modalCarrinho .sheet-titulo{ flex:0 0 auto; }
  #modalCarrinho .cart-form{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* .cart-form é flex-column: sem isto, os filhos (etapa Itens) ENCOLHIAM pra
     caber na altura fixa e os itens ficavam cortados sem rolar. flex-shrink:0
     deixa cada etapa com a altura real → o conteúdo transborda e o form rola. */
  #modalCarrinho .cart-form > *{ flex-shrink:0; }
  #modalCarrinho .cart-rodape{ flex:0 0 auto; position:relative; box-shadow:0 -4px 14px rgba(0,0,0,.06); }
}
/* Pagamento: cards com ÍCONE (SVG) num quadradinho à esquerda + rótulo. Seções
   em 2 colunas (Na entrega / Cartão); Pix full. Sem bolinha (seleção = card). */
.pag-op{ gap:10px; padding:11px 12px; font-size:14px; border-radius:12px; position:relative;
  flex-direction:row !important; }   /* vence o .cart-form label{ column } */
.pag-op input{ position:absolute; opacity:0; pointer-events:none; }
.pag-op .po-ic{ flex:none; width:34px; height:34px; border-radius:8px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; }
.pag-op .po-svg{ width:20px; height:20px; display:block; }
/* Marcas (aproximação por cor/ícone; trocar por logo oficial se enviarem o arquivo) */
.pag-op .po-mp{ background:#009ee3; font-size:17px; }
.pag-op .po-inf{ background:#111; color:#22e584; font-weight:800; font-size:18px; }
/* Opção com LOGO (imagem) ocupando o card, sem texto ao lado. */
.pag-op.pag-logo{ justify-content:center; padding:10px 12px; }
.pag-op .po-logo-img{ max-width:100%; max-height:44px; object-fit:contain; display:block; }
.pag-op .po-logo-svg{ width:30px; height:30px; display:block; }
/* Centraliza TODAS as formas de pagamento (ícone/logo + rótulo) no card. */
.pag-op{ justify-content:center; }
/* PADRÃO: todos os cards de opção (pagamento e frete) com a MESMA altura do
   botão de ação (49px, igual ao Continuar/Pagamento). Ícones/logos ajustados
   pra caber sem esticar o card. */
.pag-op, .frete-op{ height:49px; min-height:49px; box-sizing:border-box; padding:0 12px; overflow:hidden; }
.pag-op .po-ic{ width:30px; height:30px; }
.pag-op .po-logo-img{ max-height:30px; }
/* Mercado Pago tem muita margem no arquivo → aumenta só ele pra preencher o card
   (InfinitePay já está no ponto). */
.pag-op .po-logo-img[alt="Mercado Pago"]{ max-height:58px; }
/* Pix é um ícone quadrado (não wordmark): fica um pouco maior pra equilibrar. */
.pag-op .po-pix{ max-height:36px; }
/* Carteira digital — botões estilo "wallet" (Apple Pay preto, Google Pay branco). */
.pag-op.po-apay{ background:#000; border-color:#000; }
.pag-op.po-apay .wallet-txt{ color:#fff; font-size:20px; font-weight:600; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:5px; }
.pag-op.po-apay .apay-logo{ width:19px; height:19px; display:block; margin-bottom:2px; }
.pag-op.po-gpay{ background:#fff; border:1px solid #dadce0; }
.pag-op.po-gpay .wallet-txt{ color:#3c4043; font-size:18px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; }
.pag-op.po-gpay .wallet-txt svg{ width:22px; height:22px; display:block; }
/* Selecionado: mantém a cor nativa do wallet e marca com um anel da cor da loja. */
.pag-op.po-apay.sel{ background:#000; }
.pag-op.po-gpay.sel{ background:#fff; }
.pag-op.po-wallet.sel{ box-shadow:0 0 0 2px #1db954; }   /* carteiras: mesmo anel verde */
.frete-op .fo-ic{ font-size:20px; width:46px; }
.frete-op .fo-obs{ font-size:11px; }
.pag-op .po-nome{ flex:1; text-align:left; line-height:1.2; }
.pag-op .po-nome small{ display:block; color:var(--cinza); font-weight:400; font-size:11px; }
/* Dinheiro / Débito: ícone + rótulo centralizados como os cards de logo (o
   po-nome deixa de esticar pra o grupo ficar no meio). */
.pag-op.so-presencial .po-nome{ flex:0 0 auto; text-align:center; }
.pag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; grid-auto-rows:49px; }
.pag-grid .pag-op{ height:49px; }
@media (max-width:360px){ .pag-grid{ grid-template-columns:1fr; } }

/* Checkout ~20% mais enxuto (Endereço cabe sem rolar): campos, labels e gaps
   menores. Escopo só no carrinho, não afeta o resto do site. */
#modalCarrinho .cart-form{ gap:8px; padding:12px 16px; }
#modalCarrinho .cart-form label{ gap:3px; font-size:12px; }
#modalCarrinho .cart-form .campo{ margin-bottom:5px; }
#modalCarrinho .cart-form .campo label,
#modalCarrinho .cart-form .campo > label{ font-size:11.5px; margin-bottom:2px; }
#modalCarrinho .cart-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
#modalCarrinho .cart-form select,
#modalCarrinho .cart-form textarea{ padding:7px 10px; font-size:13px; }
#modalCarrinho .end-linha{ gap:8px; }
#modalCarrinho .rotulo-chips{ margin-top:4px; }
#modalCarrinho .cep-dica, #modalCarrinho .cep-status, #modalCarrinho .geo-status{ font-size:11.5px; }
#modalCarrinho .btn-local{ padding:8px; font-size:12.5px; }
/* 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: card com ÍCONE/LOGO à ESQUERDA (regra final, vence a antiga). Sem
   bolinha — a seleção é o card destacado. Cabe mais opção por tela. */
.frete-opcoes{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
/* !important vence o `.cart-form label{ flex-direction:column }` (o .frete-op é um
   label dentro do .cart-form) — sem isto o ícone ficava EM CIMA do texto. */
.frete-op{ display:flex; flex-direction:row !important; align-items:center; text-align:left; gap:10px;
  border:1px solid var(--linha); border-radius:10px; position:relative;
  padding:8px 12px; cursor:pointer; font-size:13.5px; }
.frete-op.sel{ border-color:var(--cor); background:rgba(109,15,31,.05); }
.frete-op input{ position:absolute; opacity:0; pointer-events:none; }
.frete-op .fo-ic{ flex:none; width:54px; text-align:center; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; align-self:center; }
/* Logo real da transportadora: cabe na caixa e fica centralizado (não "cai" pra baixo). */
.frete-op .fo-logo{ max-width:100%; max-height:26px; object-fit:contain; display:block; }
.frete-op .fo-nome{ flex:1; font-weight:700; line-height:1.2; }
.frete-op .fo-obs{ display:block; font-size:11.5px; color:var(--cinza); font-weight:400; margin-top:1px; }
.frete-op .fo-preco{ font-weight:800; font-size:14px; white-space:nowrap; }
/* Logos estilo Correios (SEDEX/PAC) — amarelo sobre azul, itálico inclinado. */
.lg-cor{ display:inline-block; font-style:italic; font-weight:800; font-size:12px;
  padding:2px 6px; border-radius:3px; letter-spacing:.4px; transform:skewX(-6deg); background:#003399; color:#ffcc00; }
.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; }
/* Selecionado: MESMO estilo pra TODAS as formas (Dinheiro, Débito, Pix, carteiras,
   cartões) — anel + borda VERDE consistente. Antes cada tipo mostrava diferente. */
.pag-op.sel{ border-color:#1db954 !important; box-shadow:0 0 0 2px #1db954;
  background:rgba(29,185,84,.07); }
.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); }
/* Conta agora é QUADRADO (só o 👤), igual ao tema/favorito. */
.btn-conta{ background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:10px; width:38px; height:38px;
  font-weight:800; font-size:17px; cursor:pointer; font-family:inherit; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.btn-conta:active{ transform:scale(.95); }
/* Favorito no topo (♡ quadrado) + badge com a contagem. */
.btn-fav-topo{ position:relative; }
.btn-fav-topo.on{ background:var(--cor); }
.fav-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:9px;
  background:#c0242a; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; display:none; }
.fav-badge.on{ display:block; }
.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; }
/* Rodapé de ações da conta (Sair / Pronto). */
.conta-rodape{ display:flex; gap:10px; padding:12px 16px; }
.conta-rodape .btn{ flex:1; }
/* Minha conta em TELA CHEIA no celular: cabeçalho fixo no topo, corpo rola e as
   ações fixas embaixo. No desktop continua como sheet normal. */
@media(max-width:999px){
  #sheetConta .sheet-conta{ max-width:none; width:100%; height:100vh; height:100dvh;
    max-height:100vh; max-height:100dvh; border-radius:0; padding-bottom:0;
    display:flex; flex-direction:column; overflow:hidden; }
  .sheet-conta > h3{ margin:0; flex:0 0 auto; border-bottom:1px solid var(--linha); }
  .sheet-conta .conta-corpo{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; }
  .sheet-conta .conta-rodape{ flex:0 0 auto; border-top:1px solid var(--linha);
    background:var(--card); box-shadow:0 -4px 14px rgba(0,0,0,.06);
    padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
.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-cidade{ font-size:11.5px; font-weight:700; color:var(--cor); margin:1px 0 5px; }
.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; }
/* Cortes na VITRINE (expansão inline do card, só no PC — classes .var-op/.vo-st).
   Estavam sem estilo (renderizavam inline/quebrado). */
.produto.aberto .var-exp{ display:block; }
.var-exp{ margin-top:10px; border-top:1px solid var(--linha); padding-top:10px; }
.var-exp-topo{ font-size:11.5px; font-weight:800; color:var(--cinza); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.var-exp-lista{ display:flex; flex-direction:column; gap:6px; }
.var-op{ display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--linha); border-radius:10px; }
.var-op .vo-nome{ flex:1; font-size:14px; }
.var-op .vo-preco{ font-size:13px; font-weight:700; color:var(--cor); }
.var-op .vo-st{ display:flex; align-items:center; gap:8px; flex:none; }
.var-op .vo-st button{ border:none; background:none; font-size:20px; line-height:1; color:var(--cor); width:22px; cursor:pointer; }
.var-op .vo-qtd{ min-width:14px; text-align:center; font-weight:700; font-size:14px; }
.var-op.ativa{ border-color:var(--cor); background:rgba(109,15,31,.04); }
/* Opção única (fita só "Inteira"): fica direto na ação do card, sem "Escolher".
   O corte vira rótulo à esquerda pra cliente saber o que está levando. */
.var-op.uni{ margin-top:0; padding:5px 8px; gap:8px; }
.var-op.uni .vo-nome{ flex:1; font-size:12.5px; font-weight:700; color:var(--cinza); }
.destaque-card .var-op.uni{ margin-top:6px; width:100%; }

/* Inscrição estadual: bloco que aparece só quando o documento é CNPJ. */
.ie-wrap{ margin-top:2px; }
.ie-wrap .ie-isento{ display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--cinza); margin-top:6px; cursor:pointer; }
.ie-wrap .ie-isento input{ width:auto; margin:0; }
.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 FIXA ao rolar (pedido do dono): gruda logo abaixo do cabeçalho e
   acompanha a rolagem, junto com a fileira de lojas. `--topo-h` é a altura do
   .admin-top, medida pelo painel.js (o menu do topo é de altura constante desde
   que virou nowrap+rolagem, então não pula). z-index menor que o do cabeçalho
   (10): se encostarem, quem fica por cima é a faixa vermelha. Fundo opaco pra o
   conteúdo passar por baixo sem transparecer. */
.admin-wrap.sub-wrap{ max-width:none; padding:0; background:var(--bg);
  position:sticky; top:var(--topo-h, 60px); z-index:9; }
/* Caminho reverso (breadcrumb): Painel › Seção › Página. O último é a página
   atual (negrito, sem link); os anteriores levam de volta. */
.trilha{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; overflow-x:auto;
  scrollbar-width:none; padding:7px 16px 5px; font-size:12.5px; background:var(--bg);
  border-bottom:1px solid var(--linha); }
.trilha::-webkit-scrollbar{ display:none; }
.trilha a{ color:var(--cinza); text-decoration:none; font-weight:600; white-space:nowrap; }
.trilha a:hover{ color:var(--cor); text-decoration:underline; }
.trilha .tr-sep{ color:#2fa84f; font-weight:800; }
.trilha .tr-atual{ color:var(--texto); font-weight:800; white-space:nowrap; }
@media (min-width:1100px){ .trilha{ padding-left:28px; padding-right:28px; } }
/* 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:var(--card); color:var(--texto); border:1px solid var(--linha); }
.btn.danger{ background:var(--card); 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; }
.vend-msg{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vend-acoes{ display:flex; align-items:center; gap:12px; flex:none; }
/* Botão "Enviar pra cliente" na barra do modo vendedora: branco sobre o bordô. */
.vend-enviar{ background:#fff; color:#7a1725; border:none; border-radius:8px;
  padding:6px 11px; font-weight:800; font-size:12.5px; font-family:inherit; cursor:pointer; white-space:nowrap; }
.vend-enviar:disabled{ opacity:.7; }
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); }
.vend-link{ display:flex; flex-direction:column; gap:7px; margin:11px 0 2px; text-align:left; }
.vend-link input{ width:100%; padding:11px 12px; border:1.5px solid var(--cor);
  border-radius:11px; font-size:13px; font-family:inherit;
  background:var(--card); color:var(--texto); }
.vend-link small{ color:var(--cinza); font-size:12px; line-height:1.4; }

/* ---------- 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. */
/* Cola ABAIXO do cabeçalho+sub-abas (que agora também são fixos), nunca em cima:
   top = altura do stack fixo (--stack-h, medida no painel.js) e z-index MENOR que
   o do cabeçalho (10) e sub-abas (9). Antes era top:0/z-15 e cobria a faixa
   vermelha ao rolar — o cabeçalho "sumia". */
.pf-barra{ position:sticky; top:var(--stack-h, 150px); z-index:8; 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); }
/* Horário/data em que o pedido entrou — fica na frente da cidade no card. */
.tag-hora{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:rgba(0,0,0,.05); color:var(--cinza); white-space:nowrap; }

/* 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:13px; font-weight:600; line-height:1; padding:9px 13px; white-space:nowrap; }
.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:"▾ "; }
/* Preço por loja com variações: uma sanfona por loja (compacta por padrão). */
.ficha details.pl-loja{ border:1px solid var(--linha); border-radius:10px; margin:8px 0;
  padding:0 12px; background:var(--bg); }
.ficha details.pl-loja>summary{ cursor:pointer; font-weight:700; font-size:13.5px;
  padding:10px 0; list-style:none; }
.ficha details.pl-loja>summary::-webkit-details-marker{ display:none; }
.ficha details.pl-loja>summary::before{ content:"▸ "; color:var(--cinza); }
.ficha details.pl-loja[open]>summary::before{ content:"▾ "; }
.ficha details.pl-loja[open]{ padding-bottom:10px; }
body.admin.escuro .ficha details.pl-loja{ background:var(--card); }
.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); }
/* Só "acende" quando o passo está completo. Enquanto falta algo (escolher o
   envio, preencher o endereço), fica apagado e não clica. */
.btn-proximo{ transition:opacity .2s, filter .2s; }
.btn-proximo.apagado{ opacity:.4; filter:grayscale(.5); cursor:default;
  pointer-events:none; box-shadow:none; }
/* Checkout WIZARD, um passo por vez: só a etapa aberta aparece; as outras somem
   (nada de acordeão com cabeçalhos). Cada passo tem [← Voltar] ao lado do botão
   que leva ao PRÓXIMO passo (o nome do próximo é o rótulo). O 1º passo (Cadastro)
   não tem Voltar. */
.sheet-carrinho .etapa:not(.aberta){ display:none; }
.etapa-nav{ display:flex; gap:10px; align-items:stretch; margin-top:14px; }
.etapa-nav .btn-proximo{ flex:1; margin-top:0; }
.bt-voltar{ flex:0 0 auto; width:54px; border:1.5px solid var(--linha); background:#fff;
  color:var(--texto); border-radius:12px; font-size:20px; font-weight:800; cursor:pointer; }
.bt-voltar:active{ transform:translateY(1px); }
.bt-voltar-solo{ width:auto; padding:11px 16px; margin-top:14px; font-size:14px; }
/* "+ 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; }