/* ===== Açaí do Guri — loja do cliente ===== */
:root{
  --primary:#7E047D;
  --primary-hover:#66036A;
  --accent:#DB04E2;
  --violet:#902A88;
  --deep:#3C0151;
  --night:#22002E;
  --bg:#FBF7FD;
  --ink:#2A0530;
  --ink-suave:#6B5570;
  --linha:#EBDCEF;
  --verde:#1E9E4A;
  --vermelho:#C62828;
  --amarelo:#B8860B;
  --hdr-bg:rgba(31,4,33,0);   /* definido pelo JS conforme a rolagem */
  --accop:0;                    /* opacidade da linha de acento */
  --altura-header:58px;
  --raio:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
img{max-width:100%}
[hidden]{display:none !important}

/* ===== Cabeçalho (transição de cor dirigida pela rolagem) ===== */
#hdr{
  position:fixed; top:0; left:0; right:0; z-index:40; color:#fff;
  background:var(--hdr-bg);
}
#hdr.compacto{
  box-shadow:0 8px 28px rgba(31,4,33,.38), 0 4px 22px rgba(219,4,226,.30);
}
.hwrap{
  max-width:680px; margin:0 auto; min-height:var(--altura-header);
  display:flex; align-items:center; gap:10px; padding:8px 14px;
}
.htextos{display:flex;flex-direction:column;line-height:1.15;min-width:0}
/* Nome no topo so aparece ao rolar (v1.13.2): no alto da pagina a logo
   do hero ja traz o nome — repetir era ruido. Rolou, ele surge. */
.hnome{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
body.rolou .hnome{opacity:1;transform:none}
.hstatus{font-size:12px;font-weight:700}
.hstatus.aberta{color:#7CF29C}
.hstatus.fechada{color:#FFB3B3}
.hcarrinho{
  margin-left:auto; flex:none; position:relative;
  min-height:44px; padding:9px 14px; border:0; border-radius:999px;
  background:rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:14px;
  backdrop-filter:blur(2px);
}
.hcarrinho:active{background:rgba(255,255,255,.32)}
.hbadge{
  position:absolute; top:-5px; right:-5px; min-width:22px; height:22px;
  border-radius:999px; background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
  padding:0 5px; border:2px solid #fff;
}
.haccent{
  height:3px; opacity:var(--accop);
  background:linear-gradient(90deg,var(--accent),var(--violet));
}

/* ===== Herói ===== */
.hero{
  background:linear-gradient(180deg,var(--deep) 0%,var(--night) 92%);
  color:#fff; text-align:center;
  padding:calc(var(--altura-header) + 30px) 18px 34px;
}
.hero-logo{
  /* v1.9.13: logo "solta" — PNG sem fundo; a sombra acompanha o desenho */
  width:min(300px,74vw);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
}
.hero h1{font-size:30px;font-weight:900;margin-top:16px;letter-spacing:.2px}
.hero-status{margin-top:8px;font-size:15px;font-weight:700}
.hero-status.aberta{color:#7CF29C}
.hero-status.fechada{color:#FFB3B3}
.hero-info{margin-top:6px;font-size:14px;color:#EFD9F5}
.hero-links{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hero-link{
  color:#fff; text-decoration:none; font-weight:700; font-size:14px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  padding:10px 16px; border-radius:999px; min-height:44px; display:inline-flex; align-items:center;
}

/* ===== Conteúdo ===== */
.conteudo{max-width:680px;margin:0 auto;padding:0 14px}
.banner-fechada{
  margin-top:14px; background:#FDECEC; color:var(--vermelho);
  border:1.5px solid #F3B8B8; border-radius:var(--raio);
  padding:14px 16px; font-weight:700; font-size:15px; text-align:center;
}
.busca-wrap{margin-top:16px}
#busca{
  width:100%; min-height:48px; border:1.5px solid var(--linha); border-radius:999px;
  padding:12px 18px; background:#fff; outline:none;
}
#busca:focus{border-color:var(--primary)}
.chips{
  position:sticky; top:calc(var(--altura-header) + 3px); z-index:30;
  display:flex; gap:8px; overflow-x:auto; padding:12px 2px 8px;
  background:var(--bg); scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; min-height:40px; padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--primary); background:#fff; color:var(--primary);
  font-weight:700; font-size:14px;
}
.chip.ativo{background:var(--primary); color:#fff}

.secao-titulo{
  font-size:20px; font-weight:900; margin:22px 0 6px;
  scroll-margin-top:calc(var(--altura-header) + 64px);
}
.secao{scroll-margin-top:calc(var(--altura-header) + 60px)}

.card-produto{
  display:flex; gap:12px; width:100%; text-align:left;
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  padding:12px; margin-top:10px; min-height:96px; align-items:stretch;
}
.card-produto:active{border-color:var(--primary)}
.card-produto.esgotado{opacity:.55}
.cp-textos{flex:1; min-width:0; display:flex; flex-direction:column}
.cp-nome{font-weight:800; font-size:16px}
.cp-desc{font-size:13px; color:var(--ink-suave); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cp-preco{margin-top:auto; padding-top:6px; font-weight:900; color:var(--primary); font-size:15px}
.cp-preco .apartir{font-weight:600; font-size:12px; color:var(--ink-suave)}
.cp-foto{width:84px; height:84px; border-radius:12px; object-fit:cover; flex:none}
.cp-foto-vazia{
  width:84px; height:84px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:34px;
}
.cp-selos{display:flex; gap:6px; margin-bottom:4px; flex-wrap:wrap}
.selo{font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px}
.selo-destaque{background:linear-gradient(90deg,var(--accent),var(--violet)); color:#fff}
.selo-esgotado{background:#EEE; color:#777}
.sem-resultado{text-align:center; color:var(--ink-suave); padding:28px 10px; font-size:15px}

.rodape{padding:34px 6px 110px; text-align:center; color:var(--ink-suave); font-size:13px}
.rodape-assinatura{margin-top:6px}

/* ===== Barra fixa do carrinho ===== */
.barra-carrinho{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom)); z-index:35;
  width:min(652px, calc(100vw - 28px)); min-height:54px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--primary); color:#fff; border:0; border-radius:999px;
  padding:14px 20px; font-size:16px; font-weight:800;
  box-shadow:0 12px 30px rgba(126,4,125,.45), 0 4px 18px rgba(219,4,226,.30);
}
.barra-carrinho:active{background:var(--primary-hover)}

/* ===== Overlays / folhas (sheets) ===== */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(31,4,33,.58);
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet{
  background:var(--bg); width:100%; max-width:680px; max-height:92dvh;
  border-radius:22px 22px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y:auto; animation:subir .22s ease-out;
}
@keyframes subir{from{transform:translateY(26px); opacity:.4} to{transform:none; opacity:1}}
@media (min-width:700px){
  .overlay{align-items:center}
  .sheet{border-radius:22px; max-height:88dvh}
}
.sheet-topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.sheet-topo h2{font-size:20px; font-weight:900}
.btn-fechar{
  width:44px; height:44px; border-radius:50%; border:0; flex:none;
  background:#F1E3F4; color:var(--ink); font-size:17px; font-weight:700;
}

/* ===== Montador ===== */
.montador-foto{width:100%; height:170px; object-fit:cover; border-radius:var(--raio)}
.montador-desc{color:var(--ink-suave); font-size:14px; margin:8px 0 4px}
.grupo{margin-top:16px; border:1.5px solid transparent; border-radius:var(--raio); padding:4px}
.grupo.invalido{border-color:var(--vermelho); background:#FFF5F5}
.grupo-topo{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.grupo-nome{font-size:16px; font-weight:800}
.grupo-contador{font-size:13px; font-weight:800; color:var(--primary); white-space:nowrap}
.grupo-dica{font-size:12.5px; color:var(--ink-suave); margin-top:2px}
.grupo-erro{font-size:12.5px; color:var(--vermelho); font-weight:700; margin-top:4px}
.opcao{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fff; border:1.5px solid var(--linha); border-radius:12px;
  padding:12px 14px; margin-top:8px; min-height:52px; font-size:15px;
}
.opcao .op-nome{flex:1; font-weight:600}
.opcao .op-preco{font-weight:800; color:var(--primary); font-size:14px; white-space:nowrap}
.opcao .op-preco.gratis{color:var(--verde)}
.opcao.selecionada{border-color:var(--primary); background:#FBF0FC}
.opcao.bloqueada{opacity:.45}
.opcao.esgotada{opacity:.45}
.op-marcador{
  width:26px; height:26px; flex:none; border-radius:50%;
  border:2px solid #C9A6CE; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:900; background:#fff;
}
.opcao.multipla .op-marcador{border-radius:8px}
.opcao.selecionada .op-marcador{background:var(--primary); border-color:var(--primary)}
.campo{display:block; margin-top:14px}
.campo span{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
.campo input,.campo select{
  width:100%; min-height:48px; border:1.5px solid var(--linha); border-radius:12px;
  padding:11px 13px; background:#fff; outline:none;
}
.campo input:focus,.campo select:focus{border-color:var(--primary)}
.montador-rodape{
  position:sticky; bottom:0; background:var(--bg); padding-top:12px; margin-top:18px;
  display:flex; gap:12px; align-items:stretch;
}
.qtd-controle{
  display:flex; align-items:center; gap:4px; background:#fff;
  border:1.5px solid var(--linha); border-radius:999px; padding:4px;
}
.qtd-controle button{
  width:44px; height:44px; border-radius:50%; border:0;
  background:#F6E9F8; color:var(--primary); font-size:22px; font-weight:900;
}
.qtd-controle span{min-width:26px; text-align:center; font-weight:900; font-size:17px}
.btn-primario{
  flex:1; min-height:52px; border:0; border-radius:999px;
  background:var(--primary); color:#fff; font-size:16px; font-weight:800;
  padding:13px 18px;
}
.btn-primario:active{background:var(--primary-hover)}
.btn-primario:disabled{background:#C9A6CE; cursor:not-allowed}

/* ===== Carrinho ===== */
.carrinho-itens{min-height:80px}
.item-carrinho{
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  padding:12px 14px; margin-top:10px;
}
.ic-topo{display:flex; justify-content:space-between; gap:10px}
.ic-nome{font-weight:800; font-size:15px}
.ic-preco{font-weight:900; color:var(--primary); white-space:nowrap}
.ic-opcoes{font-size:13px; color:var(--ink-suave); margin-top:4px; white-space:pre-line}
.ic-obs{font-size:13px; color:var(--ink); margin-top:4px; font-style:italic}
.ic-acoes{display:flex; align-items:center; gap:10px; margin-top:10px}
.ic-acoes .qtd-controle button{width:38px;height:38px;font-size:19px}
.ic-acoes .qtd-controle span{min-width:22px;font-size:15px}
.btn-texto{
  border:0; background:none; color:var(--primary); font-weight:800; font-size:14px;
  min-height:44px; padding:8px 6px;
}
.btn-texto.perigo{color:var(--vermelho)}
.carrinho-vazio{text-align:center; color:var(--ink-suave); padding:30px 8px; font-size:15px}
.carrinho-rodape{margin-top:16px}
.linha-total{display:flex; justify-content:space-between; font-size:16px; margin-bottom:6px}
.linha-total strong{color:var(--primary); font-size:18px}
.carrinho-obs{font-size:12.5px; color:var(--ink-suave); margin-bottom:12px}

/* ===== Checkout ===== */
.grupo-form{border:0; margin-top:18px}
.grupo-form legend{font-size:16px; font-weight:900; padding:0; margin-bottom:2px}
.grupo-form .campo:first-of-type{margin-top:8px}
.segmentado{display:flex; gap:10px; margin-top:10px}
.segmentado button{
  flex:1; min-height:52px; border-radius:14px; font-size:16px; font-weight:800;
  border:1.5px solid var(--primary); background:#fff; color:var(--primary);
}
.segmentado button.seg-ativo{background:var(--primary); color:#fff}
.linha-campos{display:flex; gap:10px}
.campo-rua{flex:1}
.campo-numero{width:110px; flex:none}
.pagamentos{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.pag-opcao{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:#fff; border:1.5px solid var(--linha); border-radius:12px;
  padding:13px 14px; min-height:52px; font-size:15px; font-weight:700;
}
.pag-opcao .pag-rotulo{flex:1}
.pag-opcao.selecionada{border-color:var(--primary); background:#FBF0FC}
.pag-online{
  font-size:11px; font-weight:800; color:#fff; border-radius:999px; padding:3px 9px;
  background:linear-gradient(90deg,var(--accent),var(--violet));
}
.pag-online-aviso{
  margin-top:10px; background:#F6E9F8; border-radius:12px; padding:11px 13px;
  font-size:13.5px; color:var(--ink);
}
.resumo{
  margin-top:20px; background:#fff; border:1px solid var(--linha);
  border-radius:var(--raio); padding:14px 16px;
}
.resumo-linha{display:flex; justify-content:space-between; font-size:15px; padding:3px 0}
.resumo-total{border-top:1px dashed var(--linha); margin-top:8px; padding-top:10px; font-size:17px}
.resumo-total strong{color:var(--primary); font-size:19px}
.rs-minimo{color:var(--vermelho); font-weight:700; font-size:13.5px; margin-top:8px}
.erro-form{
  margin-top:14px; background:#FDECEC; color:var(--vermelho); font-weight:700;
  border-radius:12px; padding:12px 14px; font-size:14.5px;
}
.btn-confirmar{width:100%; margin-top:16px}
.campo-obs-geral{margin-top:18px}

/* ===== Acompanhamento ===== */
.conteudo-pedido{padding-top:calc(var(--altura-header) + 22px); padding-bottom:60px}
.btn-voltar{
  border:0; background:none; color:var(--primary); font-weight:800; font-size:15px;
  min-height:44px; padding:8px 0;
}
.acomp-card{
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px 16px; margin-top:10px;
}
.acomp-numero{font-size:22px; font-weight:900}
.acomp-status-txt{font-size:15px; color:var(--ink-suave); margin-top:4px}
.timeline{margin-top:20px; position:relative; padding-left:6px}
.tl-etapa{display:flex; gap:14px; position:relative; padding-bottom:22px}
.tl-etapa:last-child{padding-bottom:2px}
.tl-etapa::before{
  content:""; position:absolute; left:12px; top:26px; bottom:0; width:2.5px;
  background:var(--linha);
}
.tl-etapa:last-child::before{display:none}
.tl-etapa.feita::before{background:var(--primary)}
.tl-bola{
  width:26px; height:26px; flex:none; border-radius:50%; z-index:1;
  border:2.5px solid #D8BFDC; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
}
.tl-etapa.feita .tl-bola{background:var(--primary); border-color:var(--primary)}
.tl-etapa.atual .tl-bola{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(219,4,226,.18);
}
.tl-textos{padding-top:2px}
.tl-nome{font-weight:800; font-size:15px}
.tl-hora{font-size:12.5px; color:var(--ink-suave)}
.cancelado-box{
  margin-top:16px; background:#FDECEC; color:var(--vermelho); border-radius:12px;
  padding:13px 15px; font-weight:700; font-size:14.5px;
}
.pagamento-box{
  margin-top:16px; border:1.5px dashed var(--primary); border-radius:var(--raio);
  padding:15px; background:#FDF6FE; text-align:center;
}
.pagamento-box h3{font-size:16px; font-weight:900; margin-bottom:6px}
.pagamento-box p{font-size:14px; color:var(--ink-suave)}
.qr-texto{
  margin-top:10px; background:#fff; border:1px solid var(--linha); border-radius:10px;
  padding:10px; font-size:12px; word-break:break-all; text-align:left;
  max-height:110px; overflow-y:auto; user-select:all;
}
.btn-secundario{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 18px; border-radius:999px; margin-top:12px;
  border:1.5px solid var(--primary); background:#fff; color:var(--primary);
  font-weight:800; font-size:15px; text-decoration:none;
}
.btn-zap{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; border-radius:999px; margin-top:14px;
  background:#22A95C; color:#fff; font-weight:800; font-size:16px; text-decoration:none;
}
.pago-box{
  margin-top:16px; background:#E8F8EE; color:#14632F; border-radius:12px;
  padding:13px 15px; font-weight:800; font-size:15px; text-align:center;
}
.detalhes-titulo{font-weight:900; font-size:16px; margin-bottom:6px}
.detalhe-linha{display:flex; justify-content:space-between; font-size:14.5px; padding:3px 0; gap:12px}
.detalhe-linha span:first-child{color:var(--ink-suave)}
.acomp-item{padding:9px 0; border-bottom:1px dashed var(--linha)}
.acomp-item:last-child{border-bottom:0}
.acomp-item-nome{font-weight:700; font-size:14.5px; display:flex; justify-content:space-between; gap:10px}
.acomp-item-ops{font-size:13px; color:var(--ink-suave); white-space:pre-line; margin-top:2px}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom)); z-index:80;
  background:var(--night); color:#fff; font-weight:700; font-size:14.5px;
  padding:13px 20px; border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.35);
  max-width:calc(100vw - 36px); text-align:center;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sheet{animation:none}
}

/* ===== Ícones SVG (v1.9) ===== */
.ic{width:1.05rem;height:1.05rem;flex:none;vertical-align:-.18em}
.hero-link .ic,.btn-zap .ic,.btn-secundario .ic,.btn-primario .ic{margin-right:.3rem}
.cp-foto-vazia .ic{width:2rem;height:2rem}
.selo-destaque .ic{width:.8rem;height:.8rem}
.tl-bola .ic{width:.85rem;height:.85rem;vertical-align:-.12em}
.op-marcador .ic{width:.95rem;height:.95rem;vertical-align:-.15em}
.pago-box .ic{margin-right:.3rem}

/* Pontinhos de status (substituem os círculos de emoji). */
.dot{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;vertical-align:-.05em}
.dot-verde{background:#22c55e}
.dot-vermelho{background:#ef4444}
.dot-amarelo{background:#f59e0b}

/* ===== Controle de tema (v1.9): segmentado sol/lua, canto inferior ESQUERDO ===== */
.tema-seg{
  position:relative; display:inline-flex; isolation:isolate;
  background:#fff; border:1px solid var(--linha); border-radius:999px; padding:3px;
  box-shadow:0 4px 16px rgba(31,4,33,.22);
}
.tema-seg-fixo{position:fixed; left:16px; bottom:16px; z-index:45}
.tema-seg .tema-thumb{
  position:absolute; top:3px; bottom:3px; left:3px; width:2rem; border-radius:999px;
  background:var(--primary,#7E047D); box-shadow:0 2px 8px rgba(60,1,81,.35);
  transition:transform .28s cubic-bezier(.5,1.4,.4,1); z-index:0;
}
.tema-seg.escuro .tema-thumb{transform:translateX(2rem)}
.tema-btn{
  position:relative; z-index:1; width:2rem; height:2rem; border:none; background:transparent;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:#6b5578; cursor:pointer; transition:color .2s; padding:0;
}
.tema-btn .ic{width:1.1rem;height:1.1rem;vertical-align:0}
.tema-seg:not(.escuro) .tema-btn[data-tema-btn="claro"],
.tema-seg.escuro .tema-btn[data-tema-btn="escuro"]{color:#fff}

/* ===== Código de entrega no acompanhamento (v1.9) ===== */
.codigo-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem;
  background:linear-gradient(120deg,#f8ecff,#fde9fe);
  border:1.5px dashed var(--violet,#902A88); border-radius:12px;
  padding:.75rem .95rem; margin:14px 0 4px; text-align:left;
}
.codigo-box .codigo-rot{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--violet,#902A88);display:inline-flex;align-items:center;gap:.3rem}
.codigo-box .codigo-num{font-size:1.8rem;font-weight:900;letter-spacing:.28em;color:var(--deep,#3C0151)}
.codigo-box .codigo-dica{font-size:.82rem;color:var(--ink-suave,#7a6a80);flex-basis:100%}

/* ===== Tema escuro (html[data-tema="escuro"]) =====
   O cabeçalho e o herói já são roxo-escuros nos dois temas (identidade);
   o escuro troca o fundo claro e os cartões brancos por roxo-noite. */
:root[data-tema="escuro"]{
  --bg:#17041B;
  --ink:#F4EAF7;
  --ink-suave:#C9A9D1;
  --linha:#3D1240;
}
:root[data-tema="escuro"] .tema-seg{background:#2A0730}
:root[data-tema="escuro"] .codigo-box{background:linear-gradient(120deg,#34104a,#3d0a45);border-color:#DB04E2}
:root[data-tema="escuro"] .codigo-box .codigo-num{color:#fff}
:root[data-tema="escuro"] .codigo-box .codigo-rot{color:#f0a5f5}
:root[data-tema="escuro"] #busca,
:root[data-tema="escuro"] .card-produto,
:root[data-tema="escuro"] .opcao,
:root[data-tema="escuro"] .campo input,
:root[data-tema="escuro"] .campo select,
:root[data-tema="escuro"] .sheet{background:#24062A}
:root[data-tema="escuro"] .chip{background:#24062A}
:root[data-tema="escuro"] .opcao.selecionada{background:#3A0A40}
:root[data-tema="escuro"] .op-marcador{background:#24062A}
:root[data-tema="escuro"] .btn-fechar{background:#3A0A40}
:root[data-tema="escuro"] .selo-esgotado{background:#3A0A40; color:#C9A9D1}
:root[data-tema="escuro"] .card-produto,
:root[data-tema="escuro"] .opcao{color:var(--ink)}

/* ---------- motoboy animado (tela de acompanhamento) ---------- */
.moto-cena{position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#f8f0fc,#edd9f8);height:116px;margin:10px 0 4px}
.moto-img{position:absolute;left:50%;bottom:9px;height:100px;width:auto;mix-blend-mode:multiply;animation:motoBob .45s ease-in-out infinite alternate}
@keyframes motoBob{from{transform:translateX(-50%) translateY(0) rotate(-.3deg)}to{transform:translateX(-50%) translateY(-4px) rotate(.3deg)}}
.moto-vento{position:absolute;left:100%;height:5px;border-radius:99px;background:linear-gradient(90deg,#b678c9,transparent);opacity:.55;animation:ventoMove 1s linear infinite}
.moto-vento.v1{top:22px;width:80px}
.moto-vento.v2{top:50px;width:115px;animation-duration:1.35s;animation-delay:.3s}
.moto-vento.v3{top:78px;width:62px;animation-duration:.8s;animation-delay:.55s}
@keyframes ventoMove{from{transform:translateX(0)}to{transform:translateX(-720px)}}
.moto-chao{position:absolute;left:0;right:0;bottom:8px;height:5px;border-radius:99px;background:repeating-linear-gradient(90deg,#7E047D 0 36px,transparent 36px 68px);opacity:.45;animation:chaoMove .5s linear infinite}
@keyframes chaoMove{from{background-position-x:0}to{background-position-x:-68px}}
.moto-cena.rapido .moto-vento{animation-duration:.55s}
.moto-cena.rapido .moto-vento.v2{animation-duration:.72s}
.moto-cena.rapido .moto-vento.v3{animation-duration:.45s}
.moto-cena.rapido .moto-chao{animation-duration:.26s}
.moto-cena.rapido .moto-img{animation-duration:.3s}
.moto-legenda{text-align:center;font-weight:700;color:var(--primary);font-size:.95rem;margin:2px 0 4px}
@media (prefers-reduced-motion: reduce){.moto-img,.moto-vento,.moto-chao{animation:none}}
.opcao .op-preco.extra{color:#c77400}
:root[data-tema="escuro"] .opcao .op-preco.extra{color:#f5b453}

/* Celular (v1.9.12): hero compacto pra o cardapio aparecer sem rolar tanto. */
@media (max-width:700px){
  .hero{padding-bottom:22px}
  .hero-logo{width:min(190px,52vw)}
  .hero h1{font-size:24px;margin-top:12px}
  .hero-links{margin-top:12px}
}

/* Legibilidade no escuro (v1.9.12): precos/totais/contadores em roxo sobre o
   cartao escuro somem — no escuro viram lilas claro; apoio e chips clareiam. */
:root[data-tema="escuro"]{--ink-suave:#DEC9E8}
:root[data-tema="escuro"] .cp-preco,
:root[data-tema="escuro"] .grupo-contador,
:root[data-tema="escuro"] .opcao .op-preco,
:root[data-tema="escuro"] .ic-preco,
:root[data-tema="escuro"] .linha-total strong,
:root[data-tema="escuro"] .resumo-total strong,
:root[data-tema="escuro"] .btn-texto,
:root[data-tema="escuro"] .btn-voltar{color:var(--destaque-claro, #F2C1F7)}
:root[data-tema="escuro"] .chip{color:#EFD9F5;border-color:#7A4A86}
:root[data-tema="escuro"] .opcao .op-preco.gratis{color:#5ED97E}

/* Fidelidade (v1.9.17) — cartão do programa na tela do cliente */
.fidel-card{border-radius:14px;padding:14px 16px;margin:12px 0;background:linear-gradient(135deg,#3C0151,#6d28a8);color:#fff;text-align:left}
.fidel-card .fidel-tit{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;margin-bottom:6px}
.fidel-card .fidel-tit .ic{width:20px;height:20px}
.fidel-card p{margin:4px 0;line-height:1.45}
.fidel-card .fidel-sub{font-size:.88rem;opacity:.92}
.fidel-card .fidel-premio{font-size:1.06rem}
.fidel-card.ganhou{background:linear-gradient(135deg,#f7b733,#fc4a1a);color:#fff}
.fidel-dots{display:flex;gap:6px;margin:8px 0 4px}
.fidel-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.55)}
.fidel-dot.on{background:#ffd968;border-color:#ffd968}
.ck-fidelidade{background:#f3e8f7;border:1px solid #d9b8ec;color:#4a1066;border-radius:10px;padding:10px 12px;font-size:.9rem;line-height:1.45;margin:2px 0 6px}
:root[data-tema="escuro"] .ck-fidelidade{background:#2c1540;border-color:#7A4A86;color:var(--destaque-claro, #F2C1F7)}

/* Voltar ao topo (v1.9.23) — aparece só depois de rolar; sobe quando a
   barra do carrinho está visível, pra nunca ficar embaixo dela. */
.btn-topo{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:36;width:46px;height:46px;border-radius:50%;border:1px solid var(--linha);background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(60,1,81,.25);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,bottom .25s ease}
.btn-topo .ic{width:22px;height:22px;transform:rotate(-90deg)}
.btn-topo.visivel{opacity:1;transform:none;pointer-events:auto}
.btn-topo.acima{bottom:calc(84px + env(safe-area-inset-bottom))}
:root[data-tema="escuro"] .btn-topo{background:#2c1540;color:var(--destaque-claro, #F2C1F7);border-color:#7A4A86}

/* Loja fechada (v1.12.1): botões de compra inativos (só Insta/Whats ativos) */
body.loja-fechada .card-produto:not(.esgotado) { opacity: .55; filter: grayscale(.35); }
body.loja-fechada #barra-carrinho:disabled,
body.loja-fechada #hdr-carrinho:disabled,
body.loja-fechada #btn-ir-checkout:disabled,
body.loja-fechada #montador-adicionar:disabled { opacity: .5; pointer-events: none; }