/* =====================================================================
   Loja de Evento (28/10, SQL 2396; tela A "Vitrine" escolhida pelo autor): src/ui/loja-evento-ui.js.
   As 3 ofertas de JoD no alto, os itens por Abóbora em 2 colunas. Celular: a janela ocupa a largura toda.
   Texto grande do Android: tudo usa --text-scale.
   ===================================================================== */
:root{--le-ouro:#e7c07a;--le-ouro-esc:#8a6a33;--le-ab:#ff8a2a;--le-ab-esc:#7a3a0c;--le-fg:#f3e9dc;--le-mut:#b3a3a8;--le-ok:#7fd18b;
  --le-jod:#b48cff;--le-painel:#1a1420;--le-painel2:#241b2b;--le-linha:#3a2c40;--le-erro:#ff8a7a}
.le-fundo{z-index:1400}
.le-janela.modal-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);padding:0;display:flex;flex-direction:column;overflow:hidden;
  color:var(--le-fg);background:var(--le-painel);border:1px solid var(--le-linha);border-radius:18px;box-shadow:0 0 0 1px #000,0 0 40px rgba(255,138,42,.18),0 20px 60px #000}
.le-corpo{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;font-size:calc(14px * var(--text-scale,1))}
.le-topo{padding:12px 14px 10px;background:radial-gradient(120% 140% at 15% 0%,#3b1d0b 0%,var(--le-painel) 60%);border-bottom:1px solid var(--le-linha)}
.le-linha1{display:flex;align-items:center;gap:10px}
.le-topo h2{margin:0;flex:1 1 auto;min-width:0;font-family:var(--font-display,Georgia,serif);font-weight:normal;font-size:calc(20px * var(--text-scale,1));color:var(--le-ouro);line-height:1.15}
.le-saldo{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:rgba(0,0,0,.55);border:1px solid var(--le-ab-esc);border-radius:999px;padding:3px 10px 3px 4px;
  color:var(--le-ab);font-variant-numeric:tabular-nums}
.le-saldo b{font-size:calc(15px * var(--text-scale,1))}
.le-saldo-ic{width:calc(26px * var(--text-scale,1));height:calc(26px * var(--text-scale,1));animation:le-gira 6s linear infinite}
.le-fechar{min-width:38px;flex:0 0 auto}
.le-encerra{margin-top:4px;font-size:.85em;color:var(--le-mut);font-variant-numeric:tabular-nums}
.le-encerra b{color:var(--le-fg)}
.le-dobro{margin-left:6px;color:var(--le-ab);font-weight:900}
@keyframes le-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.le-saldo-ic{animation:none}}
.le-rolar{overflow:auto;min-height:0;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.le-vazio{padding:28px 14px;text-align:center;color:var(--le-mut)}
.le-aviso{margin:8px 12px 0;padding:8px 10px;border-radius:10px;font-size:.9em;background:rgba(127,209,139,.12);border:1px solid rgba(127,209,139,.4);color:var(--le-ok)}
.le-aviso.erro{background:rgba(255,138,122,.1);border-color:rgba(255,138,122,.4);color:var(--le-erro)}
.le-ic{width:2.8em;height:2.8em;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}
.le-ic-vazio{display:inline-block}
.le-sec{font-family:var(--font-display,Georgia,serif);color:var(--le-ouro);margin:0 0 8px;font-size:1em}
.le-ofertas{padding:12px 12px 4px}
.le-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.le-of{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 6px 8px;border-radius:12px;
  background:linear-gradient(#2c2038,#1b1424);border:1px solid var(--le-ouro-esc)}
.le-of .le-ic{width:3.2em;height:3.2em}
.le-of .le-nome{font-size:.8em;line-height:1.2;min-height:2.4em;overflow-wrap:anywhere}
.le-of .le-bt{width:100%;padding:.45em .2em}
.le-selo{position:absolute;top:6px;right:6px;background:var(--le-ab);color:#2a1205;font-weight:900;font-size:.75em;border-radius:6px;padding:2px 6px}
.le-riscado{text-decoration:line-through;color:var(--le-mut);font-size:.82em}
.le-of .le-riscado{margin-top:auto}
.le-grade{padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.le-it{min-width:0;display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:var(--le-painel2);border:1px solid var(--le-linha)}
.le-it.comprado,.le-of.comprado{opacity:.6}
.le-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.le-it .le-nome{font-size:.85em;line-height:1.2;overflow-wrap:anywhere}
.le-preco{display:inline-flex;align-items:center;gap:3px;font-size:.8em;color:var(--le-ab);font-weight:900;font-variant-numeric:tabular-nums}
.le-preco-ic{width:1.3em;height:1.3em}
.le-bt{margin:0;border:1px solid var(--le-ab-esc);border-radius:8px;padding:.45em .7em;cursor:var(--cur-mao,pointer);font-family:inherit;font-weight:900;font-size:.9em;
  color:#2a1205;background:linear-gradient(#ff9a3f,#d8641a);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;min-height:34px}
.le-bt.jod{background:linear-gradient(#c7a6ff,#8a5ce0);border-color:#5b3a99;color:#160a2a}
.le-bt.conf{background:var(--botao-ouro-fundo);border-color:var(--botao-ouro-borda);color:var(--botao-ouro-texto);animation:le-pisca 1s ease-in-out infinite}
.le-bt.falta{background:var(--le-painel);color:var(--le-mut);border-color:var(--le-linha);cursor:var(--cur-seta,default)}
.le-bt[disabled]:not(.falta){opacity:.6;cursor:wait}
@keyframes le-pisca{50%{filter:brightness(1.18)}}
@media (prefers-reduced-motion:reduce){.le-bt.conf{animation:none}}
.le-feito{color:var(--le-ok);font-weight:900;font-size:.88em;white-space:nowrap}
/* 05/11 (2640): Trocar por Gold */
.le-gold{margin:0 12px 4px;padding:10px;border-radius:12px;background:var(--le-painel2);border:1px solid var(--le-ouro-esc)}
.le-gold .le-sec{margin-bottom:6px}
.le-gold-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.le-gold-taxa{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;color:var(--le-ouro);font-size:.92em}
.le-gold-taxa b{color:var(--le-fg)}
.le-gold-bts{display:inline-flex;flex-wrap:wrap;gap:6px;min-width:0}
.le-bt.ouro{background:linear-gradient(#ffe08a,#d9a63a);border-color:#7a5a1c;color:#2a1a05}
.le-gold-dica{margin:6px 0 0;font-size:.8em;color:var(--le-mut);line-height:1.35}
.le-teto{margin:0;padding:8px 14px 0;font-size:.86em;font-weight:700;color:var(--le-txt,#ffe2b8);line-height:1.4}
.le-rodape{margin:0;padding:4px 14px 14px;font-size:.8em;color:var(--le-mut);line-height:1.4}
@media (max-width:520px){
  .le-fundo{padding:0!important;align-items:stretch}
  .le-janela.modal-card{width:100%;max-height:100%;height:100%;border-radius:0}
}
@media (max-width:480px){.le-grade{grid-template-columns:minmax(0,1fr)}}