/* LOJA 05/11 (opção A do autor). Carregado por último no index.html.
   1) Jornada do Arcanjo em faixa compacta ("to achando ele grande, e pouco atrativo pra venda");
   2) prévia da etapa sem rolar ("o modal que abre é extenso e mal posicionado, preciso rolar muito");
   3) topo da Loja numa linha só: Jewel of Dark, VIP e Mercado ("é uma caixa de texto que da pra deixar em uma linha").
   No celular em pé o VIP continua fora do topo (escolha de 31/10, styles/celular-em-pe.css). Sem glow. */

/* ---------- fichas curtas (cartão e prévia) ---------- */
.loja-arc-fichas{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.loja-arc-fichas li{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 9px 4px 6px;border:1px solid #3a2e17;border-radius:999px;background:#0f0c07;color:#eadfc4;font-size:calc(12px * var(--text-scale,1));white-space:nowrap}
.loja-arc-fichas li img,.loja-arc-fichas li .col-icone img{width:20px;height:20px;object-fit:contain;flex:none}
.loja-arc-fichas li .col-icone{font-style:normal;flex:none}
.loja-arc-fichas li b{color:#fff1c9;font-weight:800}
.loja-arc-fichas li small{color:#b8a984;font-size:1em}
/* ---------- as 5 peças em miniatura ---------- */
.loja-arc-trilha{display:flex;gap:6px;flex-wrap:wrap}
.loja-arc-passo{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #3a2e17;border-radius:10px;background:#0f0c07;cursor:var(--cur-mao,pointer)}
.loja-arc-passo img{width:34px;height:34px;object-fit:contain}
.loja-arc-passo small{position:absolute;right:-4px;bottom:-5px;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;border:1px solid #5a4720;border-radius:8px;background:#2a210f;color:#cdbf9c;font:800 9px/14px Cinzel,Georgia,serif;text-align:center}
.loja-arc-passo.locked img{opacity:.42;filter:grayscale(.6)}
.loja-arc-passo.done{border-color:#2f7a4a}
.loja-arc-passo.done small{border-color:#2ecc71;background:#1d4d2f;color:#bff0cf}
.loja-arc-passo.current{border-color:#e3b04b;background:linear-gradient(180deg,#2c2210,#140f07)}
.loja-arc-passo.current small{border-color:#f5d27f;background:#c8912f;color:#2a1b04}
.loja-arc-passo:hover,.loja-arc-passo:focus-visible{border-color:#f5d27f}
/* ---------- o cartão ---------- */
.loja-destaque.loja-arc{grid-template-columns:130px minmax(0,1fr) minmax(200px,240px);gap:16px;align-items:center;padding:14px 16px}
.loja-arc-arte{position:relative;display:grid;place-items:center;height:130px;background:radial-gradient(circle at 50% 50%,rgba(243,207,122,.16),transparent 66%)}
.loja-arc-arte img{max-width:100%;max-height:118px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.loja-arc-mais7{position:absolute;top:6px;right:6px;padding:2px 8px;border:1px solid #fbe3a3;border-radius:999px;background:linear-gradient(180deg,#f5d27f,#c8912f);color:#2a1b04;font-weight:900;font-size:calc(12px * var(--text-scale,1))}
.loja-arc-info{display:flex;flex-direction:column;gap:7px;min-width:0}
.loja-arc h3{margin:0;color:#fff1c9;font-family:Cinzel,Georgia,serif;font-size:calc(20px * var(--text-scale,1));line-height:1.15;overflow-wrap:anywhere}
.loja-arc-chamada{margin:0;color:#cdbf9c;font-size:calc(13px * var(--text-scale,1))}
.loja-arc-compra{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.loja-arc-compra .loja-comprar{width:100%}
.loja-arc-compra>small{color:#b8a984;font-size:calc(11px * var(--text-scale,1))}
.loja-arc-compra .loja-colecao-atalho.est-a{margin:0;padding:7px 10px;border:1px solid #6b5426;background:rgba(0,0,0,.25);box-shadow:none}
.loja-arc-compra .loja-colecao-atalho.est-a>span{display:grid;min-width:0}
.loja-arc-compra .loja-colecao-atalho.est-a,.loja-arc-compra .loja-colecao-atalho.est-a *{text-transform:none;letter-spacing:normal}
.loja-arc-compra .loja-colecao-atalho.est-a b{font-size:calc(12px * var(--text-scale,1))}
.loja-arc-compra .loja-colecao-atalho.est-a small{color:#b8a984;font-size:calc(11px * var(--text-scale,1))}
.loja-arc-compra .loja-colecao-atalho .lca-pct{margin-left:auto}
.loja-arc-compra .loja-colecao-atalho i{margin-left:0}
@media (max-width:1100px){.loja-destaque.loja-arc{grid-template-columns:100px minmax(0,1fr) minmax(170px,200px);gap:12px}.loja-arc-arte{height:100px}.loja-arc-arte img{max-height:92px}}
@media (max-width:899px){.loja-destaque.loja-arc{grid-template-columns:100px minmax(0,1fr)}.loja-arc-compra{grid-column:1/-1}}
@media (max-width:699px){
  html:not(#_):not(#__) #storeView .loja-destaque.loja-arc{grid-template-columns:76px minmax(0,1fr)!important;gap:8px 10px!important;padding:12px!important;align-items:center}
  html:not(#_):not(#__) #storeView .loja-arc-arte{height:76px;min-height:0}
  html:not(#_):not(#__) #storeView .loja-arc-arte img{max-width:76px!important;max-height:70px!important}
  html:not(#_):not(#__) #storeView .loja-arc-mais7{top:0;right:-4px;padding:1px 6px}
  /* a arte fica ao lado só do título; o resto usa a largura toda */
  html:not(#_):not(#__) #storeView .loja-arc-info{display:contents}
  html:not(#_):not(#__) #storeView .loja-arc-info>.loja-etapa{grid-column:2;grid-row:1;align-self:end}
  html:not(#_):not(#__) #storeView .loja-arc-info>h3{grid-column:2;grid-row:2;align-self:start;font-size:calc(17px * var(--text-scale,1))}
  html:not(#_):not(#__) #storeView .loja-arc-arte{grid-column:1;grid-row:1/3}
  html:not(#_):not(#__) #storeView .loja-arc-chamada,html:not(#_):not(#__) #storeView .loja-arc-fichas,html:not(#_):not(#__) #storeView .loja-arc-trilha,html:not(#_):not(#__) #storeView .loja-arc-compra{grid-column:1/-1}
  .loja-arc-trilha{gap:5px}.loja-arc-passo{width:40px;height:40px}.loja-arc-passo img{width:28px;height:28px}
  .loja-arc-fichas li{padding:3px 8px 3px 5px}
}
}
/* ---------- a prévia ---------- */
.loja-previa.loja-arc-previa{max-height:calc(100dvh - 24px)}
.loja-arc-previa-corpo{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.loja-arc-previa h3{margin:0}.loja-arc-previa .loja-previa-chamada{margin:0}.loja-arc-previa .loja-previa-pe{margin-top:4px}
.loja-arc-pecas{display:grid;gap:6px;margin:0;padding:0;list-style:none;text-align:left}
.loja-arc-pecas li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border:1px solid #6b5426;border-radius:8px;background:linear-gradient(90deg,#2a200f,#120e07);color:#fff1c9;font-size:calc(13px * var(--text-scale,1))}
.loja-arc-pecas li img{width:30px;height:30px;object-fit:contain;flex:none}
.loja-arc-pecas li span{min-width:0;overflow-wrap:anywhere}.loja-arc-pecas li b{color:#f5d27f}
.loja-arc-previa .loja-arc-fichas{justify-content:center}
@media (min-width:700px){
  .loja-previa.loja-arc-previa{display:grid;grid-template-columns:230px minmax(0,1fr);width:min(700px,100%);padding:0;text-align:left;overflow:auto}
  .loja-arc-previa .loja-previa-palco{height:auto;min-height:100%;margin:0;border-radius:16px 0 0 16px}
  .loja-arc-previa .loja-previa-palco img{max-width:180px;max-height:180px}
  .loja-arc-previa .loja-previa-mais7{right:18px;top:18px}
  .loja-arc-previa-corpo{padding:20px 22px 18px}
  .loja-arc-previa .loja-arc-fichas{justify-content:flex-start}
  .loja-arc-previa .loja-previa-pe{align-items:stretch}
}
@media (max-width:699px){.loja-arc-previa .loja-previa-palco{height:120px}.loja-arc-previa .loja-previa-palco img{max-width:100px;max-height:100px}}
@media (max-height:500px){.loja-arc-previa .loja-previa-palco{height:96px}.loja-arc-previa .loja-previa-palco img{max-width:80px;max-height:80px}}

/* ---------- topo da Loja numa linha só ---------- */
html:not(#_):not(#__):not(#___) #storeView .loja-barra.test-store-header{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;border:1px solid #6b5426;border-radius:12px;background:linear-gradient(180deg,#1f190e,#141009);overflow:hidden}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .store-account-strip{order:1!important;display:flex!important;flex-wrap:nowrap!important;gap:0!important;flex:none!important;width:auto!important;justify-content:flex-start}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .store-account-strip>*{flex:none!important;width:auto!important;min-width:0!important;margin:0!important;padding:8px 16px!important;border:0!important;border-right:1px solid #3a2e17!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-height:0!important;white-space:nowrap}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .test-wallet,html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet,html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status{display:flex!important;align-items:center;gap:8px}
html:not(#_):not(#__):not(#___).col-online #storeView .loja-barra .test-wallet{display:none!important}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .test-wallet>span,html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status>span{margin:0;color:#b39d6a;font-size:calc(11px * var(--text-scale,1))!important;font-weight:800;letter-spacing:.1em}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .test-wallet>strong{margin:0;font-size:calc(15px * var(--text-scale,1))!important}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>span{display:flex;align-items:center;margin:0!important;font-size:0!important}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>span img{width:22px;height:22px}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>strong{margin:0!important;font-size:calc(18px * var(--text-scale,1))!important;line-height:1}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>strong::after{content:" JoD";font-size:.6em;color:#b9a6d8;letter-spacing:.03em}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>small,html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status>small{display:none!important}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>.loja-link{margin:0!important;padding:3px 9px!important;border-radius:999px;font-size:calc(11px * var(--text-scale,1))!important;min-height:0!important;text-decoration:none!important}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>.loja-link::before{content:"+ "}
html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status>strong{margin:0;font-size:calc(14px * var(--text-scale,1))!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado{order:2!important;flex:1 1 360px!important;width:auto!important;min-width:0!important;gap:10px!important;margin:0!important;padding:8px 16px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado:hover,html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado:focus-visible{background:rgba(217,164,65,.08)!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-artes{flex-direction:row!important;gap:4px!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-artes img{width:22px!important;height:22px!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-texto{flex:1 1 auto;min-width:0}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-texto small{display:none!important}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-texto strong{font-size:calc(12px * var(--text-scale,1))!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-ir{flex:none;padding:4px 10px!important}
/* Tela média e texto grande: o "comprar mais" vira só "+" e o rótulo do VIP sai (fica o INATIVO/nível). */
@media (max-width:1180px){
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>.loja-link{font-size:0!important;padding:3px 9px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>.loja-link::before{content:"+";font-size:calc(14px * var(--text-scale,1));font-weight:900}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status>span{display:none}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status>strong::before{content:"VIP ";color:#b39d6a;font-size:.8em;letter-spacing:.08em}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-artes img:not(:first-child){display:none}
}
/* Celular: Jewel of Dark e Mercado na mesma linha (o VIP segue fora, 31/10). */
@media (max-width:699px){
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .vip-store-status,html:not(#_):not(#__):not(#___) #storeView .loja-barra .test-wallet{display:none!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .store-account-strip>*{padding:6px 8px 6px 10px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet{gap:6px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>span img{width:18px;height:18px}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>strong{font-size:calc(15px * var(--text-scale,1))!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra .token-wallet>.loja-link{padding:3px 8px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-barra.test-store-header{flex-wrap:nowrap!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado{flex:1 1 0!important;gap:6px!important;padding:6px 10px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-artes img:not(:first-child){display:none}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-artes img{width:18px!important;height:18px!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-texto strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:calc(11px * var(--text-scale,1))!important;letter-spacing:.04em!important;line-height:1.15}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-ir{padding:2px 9px!important;font-size:0!important}
  html:not(#_):not(#__):not(#___) #storeView .loja-atalho-mercado-ir::after{content:"›"!important;font-size:calc(15px * var(--text-scale,1))}
}