/* ================= VITRINE PÚBLICA (loja.html) =================
   Complementa css/style.css (reaproveita .team/.stickers/.sticker-btn/
   .badge/.btn/.wrapper/.group-label etc.) — só o que é específico desta
   página fica aqui: cabeçalho simplificado (sem menu/drawer), rodapé fixo
   do carrinho e o estado "sem estoque" (que aqui é bloqueado, diferente do
   app principal, onde .nostock ainda é clicável).
   Cores via tokens de style.css — a página usa data-theme="auto" (segue o
   aparelho do cliente). */

.loja-body{padding-bottom:96px}
/* style.css empurra o body 308px pra direita em telas largas (gaveta do app do dono) — a vitrine não tem gaveta */
@media(min-width:900px){.loja-body{padding-left:0}}

.loja-pausada{margin:0 0 16px;padding:13px 15px;border-radius:12px;line-height:1.5;
  font-size:13px;color:var(--text);background:color-mix(in srgb,var(--gold) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border))}
.loja-pausada.hidden{display:none}

/* "Meus pedidos" e "Meus dados": modais mais estreitos (centralização vem do
   .modal-bg/.modal base) */
#lojaMeusPedidosModal .modal,#lojaPerfilModal .modal{max-width:460px;
  max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto}
#lojaPerfilModal input{width:100%}
#lojaPerfilModal input:disabled{opacity:.6}
#lojaPerfilModal .cfg-lbl{display:block;font-size:10px;color:var(--muted);
  margin:12px 0 5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700}
#lojaPerfilModal .sec{margin-top:18px}
.meus-ped-row{display:block;text-decoration:none;color:var(--text);
  border:1px solid var(--border);border-radius:11px;padding:10px 12px;margin-bottom:8px}
.meus-ped-row:hover{border-color:var(--accent-line)}
.meus-ped-row .mp-top{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.meus-ped-row .mp-top span{color:var(--accent);font-weight:700}
.meus-ped-row .mp-sub{display:block;font-size:11px;color:var(--muted);margin-top:3px}

#lojaEstado{text-align:center;padding:40px 15px;color:var(--muted)}
#lojaEstado:empty{display:none}
.loja-msg{font-size:14px;line-height:1.6;max-width:360px;margin:0 auto}
.loja-spin{width:30px;height:30px;border-radius:50%;margin:0 auto 16px;
  border:3px solid var(--border);border-top-color:var(--accent);animation:loja-spin .8s linear infinite}
@keyframes loja-spin{to{transform:rotate(360deg)}}

/* preço da figurinha: o estilo (12px, sempre com centavos, transborda em vez de
   cortar) mora em css/style.css agora — app e vitrine iguais. */

.sticker-btn.unavailable{opacity:.32;cursor:not-allowed;filter:grayscale(.6)}
.sticker-btn.unavailable:hover{transform:none;background:var(--surface-2);border-color:var(--border)}

/* figurinha que o cliente pediu na lista colada mas o vendedor não tem agora —
   entra no pedido do mesmo jeito; clicar remove */
.sticker-btn.unavailable.req{opacity:.95;cursor:pointer;filter:none;
  border:1px dashed #6fd39c;color:#a9e8c8;background:#1e2b25}
.sticker-btn.unavailable.req:hover{transform:none;background:#25332d;border-color:#8fe0b4}

/* lista colada pelo cliente */
#lojaPaste{margin-bottom:4px}
#lojaPasteInput{min-height:108px}
#lojaPasteResult{text-align:left}
#lojaPasteResult:empty{display:none}

.loja-footer{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;align-items:center;
  justify-content:space-between;gap:10px;background:var(--ground);
  background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);padding:11px 15px calc(11px + env(safe-area-inset-bottom))}
/* .loja-footer{display:flex} vence o .hidden genérico por ordem de cascata
   (loja.css carrega depois de style.css) — precisa da regra explícita */
.loja-footer.hidden{display:none}
.loja-footer span{font-size:13px;font-weight:700;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.loja-footer .btn{margin:0;flex:0 0 auto}
.loja-foot-left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.loja-footnote{font-size:10.5px;font-weight:500;line-height:1.3;color:var(--muted);opacity:.9;max-width:100%}
.loja-footnote.hidden{display:none}
.loja-foot-btns{display:flex;gap:7px;flex:0 0 auto}
.loja-foot-btns .btn{padding:10px 13px;font-size:12.5px}
#btnLojaResumo{padding:10px 11px}
@media (max-width:430px){
  .loja-footer{padding:9px 11px calc(9px + env(safe-area-inset-bottom));gap:8px}
  .loja-footer span{font-size:12px}
  .loja-footnote{font-size:9.5px}
  .loja-foot-btns{gap:5px}
  .loja-foot-btns .btn{padding:9px 10px;font-size:11.5px;white-space:nowrap}
  #btnLojaResumo{padding:9px 9px}
}


/* ================= ÁLBUM (multi-álbum, v10.64) =================
   Abas no topo do catálogo — mesmo visual do seletor de álbum do app do dono
   (.theme-seg, css/style.css), só que sempre 2 opções fixas em vez de N. */
.loja-album-tabs{display:flex;gap:8px;margin:6px 0 16px;overflow-x:auto;scrollbar-width:none} /* N álbuns: a fileira rola pro lado */
.loja-album-tabs::-webkit-scrollbar{display:none}
.loja-album-tab{flex:1 0 auto;appearance:none;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:11px 8px;border-radius:12px;
  cursor:pointer;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loja-album-tab:hover{color:var(--text);border-color:var(--border-2)}
.loja-album-tab.on{border-color:var(--accent);color:var(--accent);background:var(--accent-quiet)}
/* aba Legends (view toggle, v10.109) fica dourada quando ativa, não verde
   como as demais — mesma paleta do resto do produto Legends */
/* seletor de álbum da vitrine: UM POR LINHA, com a capa (v10.163, escolha do dono) */
#lojaAlbumTabs{flex-direction:column;overflow:visible;gap:8px}
#lojaAlbumTabs .loja-album-tab{display:flex;align-items:center;gap:12px;width:100%;flex:none;min-height:58px;padding:7px 14px 7px 9px;text-align:left}
#lojaAlbumTabs .loja-album-tab.hidden{display:none} /* o display:flex acima ganharia da classe .hidden */
.aba-capa{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:43px;border-radius:5px;overflow:hidden;
  background:var(--surface-3);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.aba-capa img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8}
.aba-capa-fb{font-size:18px}
.loja-album-tab.on .aba-capa img{opacity:1}
.aba-nome{flex:1;min-width:0;font-size:15px;line-height:1.15}
.aba-ck{flex:0 0 auto;visibility:hidden}
.loja-album-tab.on .aba-ck{visibility:visible}
.loja-album-tab .tab-badge{margin-left:6px;background:var(--surface-3);color:var(--muted);
  font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;vertical-align:1px}
#lojaViewTabLegends.on{border-color:var(--gold);color:var(--gold-soft);background:var(--gold-quiet)}
#lojaViewTabLegends.on .tab-badge{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-soft)}
/* Legends como item da lista de álbuns (v10.169): capa = estrela dourada num cartão, nome com subtítulo, contagem em selo */
#lojaViewTabLegends .aba-capa{background:var(--gold-quiet);color:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent),0 2px 6px rgba(0,0,0,.5)}
#lojaViewTabLegends .aba-capa .ic{width:20px;height:20px}
#lojaViewTabLegends .aba-nome small{display:block;margin-top:2px;font-family:var(--f-text);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
#lojaViewTabLegends .tab-badge{position:static;flex:0 0 auto;margin:0;height:auto;min-width:0}
#lojaViewTabLegends.on .aba-nome small{color:var(--gold-soft)}
/* álbum sem estoque (v10.169): subtítulo na linha da lista + cartão de convite com o botão de WhatsApp */
.loja-album-tab.sem-estoque .aba-nome::after{content:"sem estoque no momento";display:block;margin-top:2px;font-family:var(--f-text);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.loja-semestoque{margin:4px 0 22px;padding:20px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--border);text-align:center}
.loja-semestoque.hidden{display:none}
#panelLegends.sem-estoque .leg-hero{display:none}
.loja-semestoque .se-t{display:block;font-family:var(--f-display);font-size:20px;text-transform:uppercase;letter-spacing:.03em;color:var(--text)}
.loja-semestoque p{margin:8px 0 16px;color:var(--muted);font-size:14px;line-height:1.45}
.loja-semestoque .wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;width:100%}
/* na view Legends o painel das figurinhas continua montado (a lista de álbuns precisa ficar visível), só esconde o resto */
#panelFigs.view-legends>:not(#lojaTools){display:none!important}
#panelFigs.view-legends #lojaSearchWrap,#panelFigs.view-legends #lojaFilterTip{display:none!important}

/* ================= LEGENDS (Extra Stickers) — view dedicada (v10.109) =================
   Mesmo carrinho/checkout das figurinhas (ckItens soma os dois), mas visualmente
   à parte: hero de destino + cards com foto em vez da grade de quadradinhos.
   Antes era uma gaveta fechada dentro da grade normal — agora é a aba própria
   #lojaViewTabLegends (ver js/loja.js, setView()); #lojaLegends fica sempre
   visível dentro dela, sem estado de aberto/fechado. */
.leg-hero{position:relative;overflow:hidden;margin:14px 0 22px;padding:26px 18px 22px;border-radius:20px;
  text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 16%,var(--surface)),var(--surface) 72%);
  border:1px solid var(--gold-line)}
.leg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,226,140,.14) 48%,transparent 66%);
  background-size:200% 100%;animation:leg-shine 5.5s ease-in-out infinite}
@keyframes leg-shine{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.leg-hero::before{animation:none}}
.leg-kicker{display:flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold-soft);margin-bottom:8px;position:relative}
.leg-kicker .ic{width:1.1em;height:1.1em}
.leg-hero h2{position:relative;margin:0 0 8px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(34px,10vw,48px);line-height:.95;
  background:linear-gradient(100deg,var(--gold-soft),#fff2c8 45%,var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.leg-hero p{position:relative;margin:0;max-width:34em;font-size:13.5px;line-height:1.5;color:var(--text-soft)}
.leg-hero-stats{position:relative;display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
.leg-hero-stats span{font-size:12px;color:var(--muted)}
.leg-hero-stats b{color:var(--gold-soft);font-family:var(--f-display);font-size:14px}
.legend-shelf-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
/* aspect-ratio 3/4 bate com o scan real do card Panini (~1200×1600, cliente
   já confirmou) — object-fit:contain (não cover) pra nunca cortar a arte,
   mesmo numa foto que o vendedor tenha subido num recorte levemente diferente.
   width:50% (pedido do usuário, 06/10/2026 — "tá muito grande no PC"): a foto
   crescia com o .wrapper inteiro (640px mobile, 860px desktop em body.v2 a
   partir de 760px, css/loja-v2.css) por não ter teto próprio; metade da
   largura do cartão, centralizada, escala igual nos dois breakpoints em vez
   de um valor fixo em px que ficaria certo num e errado no outro. */
.legend-shelf-photo{position:relative;width:50%;margin:0 auto;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.legend-shelf-photo img{width:100%;height:100%;object-fit:contain}
.legend-shelf-ph{font-size:32px}
.legend-shelf-tiertag{position:absolute;top:8px;right:8px;background:var(--surface-2);
  color:var(--text-soft);border:1px solid var(--border);font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:20px}
.legend-shelf-info b{display:block;font-size:15px;color:var(--text)}
.legend-shelf-info i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11.5px;
  color:var(--muted);margin-top:2px}
.legend-shelf-info i img.fimg{width:15px;height:auto;border-radius:2px}
.legend-shelf-tabs{display:flex;flex-wrap:wrap;gap:6px}
/* as 4 abas aparecem sempre, coloridas por raridade — mesma paleta da tela
   de estoque do dono (.legend-tier-row, mais acima neste arquivo/style.css):
   regular=lilás, bronze/prata/ouro com a cor própria. Só a raridade com
   estoque fica clicável (`disabled` no HTML já bloqueia clique/teclado). */
.legend-tab{position:relative;background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--text-soft);
  cursor:pointer}
.legend-tab:hover{border-color:var(--border-2)}
.legend-tab.tier-regular{color:var(--violet)}
.legend-tab.tier-bronze{color:var(--bronze)}
.legend-tab.tier-silver{color:var(--silver)}
.legend-tab.tier-gold{color:var(--gold)}
.legend-tab.tier-regular.on{background:var(--violet-quiet);border-color:var(--violet-line)}
.legend-tab.tier-bronze.on{background:var(--bronze-quiet);border-color:var(--bronze-line)}
.legend-tab.tier-silver.on{background:var(--silver-quiet);border-color:var(--silver-line)}
.legend-tab.tier-gold.on{background:var(--gold-quiet);border-color:var(--gold-line)}
.legend-tab:disabled{color:var(--faint);cursor:not-allowed;opacity:.55}
.legend-tab:disabled:hover{border-color:var(--border)}
.legend-shelf-tiertag.tier-regular{color:var(--violet);background:var(--violet-quiet);border-color:var(--violet-line)}
.legend-shelf-tiertag.tier-bronze{color:var(--bronze);background:var(--bronze-quiet);border-color:var(--bronze-line)}
.legend-shelf-tiertag.tier-silver{color:var(--silver);background:var(--silver-quiet);border-color:var(--silver-line)}
.legend-shelf-tiertag.tier-gold{color:var(--gold);background:var(--gold-quiet);border-color:var(--gold-line)}
.legend-shelf-addbtn{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius);padding:11px 14px;cursor:pointer;font:inherit}
.legend-shelf-addbtn{margin-top:20px} /* gap do card (10px) + 20px = 30px entre as abas de raridade e o botão: no celular 10–20px ainda gerava toque sem querer em "Adicionar" ao trocar de raridade */
.legend-shelf-addbtn:hover{border-color:var(--border-2)}
.legend-shelf-addbtn:active{transform:scale(.98)}
.legend-shelf-addbtn.sel{background:var(--accent-2);border-color:var(--accent);color:var(--accent-ink)}
.legend-shelf-price{font-size:15px;font-weight:800}
.legend-shelf-addlabel{font-size:12.5px;font-weight:700}

/* botão "Como funciona?" — discreto, logo abaixo do subtítulo */
.loja-saibamais{display:block;margin-top:8px;font-size:12px;color:var(--muted);text-decoration:none}
.loja-saibamais:hover{color:var(--accent);text-decoration:underline}
/* chamado pro Meu Álbum (v10.163): cartão-link inteiro, alvo de toque grande */
.loja-meualbum{display:flex;align-items:center;gap:14px;grid-column:1/-1;margin:2px 0 26px;padding:12px 14px;min-height:72px;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.loja-meualbum:hover{background:var(--surface-2);border-color:var(--accent-line)}
.lm-caps{display:flex;flex:0 0 auto}
.lm-caps img{width:36px;height:48px;object-fit:cover;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.45);border:1px solid var(--border)}
.lm-caps img+img{margin-left:-14px}
.lm-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lm-txt b{font-family:var(--f-display);font-weight:800;font-size:17px;line-height:1.1;text-transform:uppercase;color:var(--text)}
.lm-txt small{font-size:12.5px;line-height:1.35;color:var(--text-soft)}
.lm-go{flex:0 0 auto;font-size:20px;color:var(--accent)}

/* modal "Como funciona?" — reaproveita .modal / .sec de style.css */
#lojaHelpModal .modal{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
#lojaHelpModal .modal p{font-size:13px;line-height:1.6;color:var(--text-soft);margin:0 0 4px}
.loja-help-note{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:16px;
  border-top:1px solid var(--border);padding-top:12px}

/* contato — pé da página, acima dos links jurídicos */
.loja-contato{text-align:center;margin:30px 0 4px;padding-top:18px;border-top:1px solid var(--border)}
.loja-contato-title{font-size:13px;color:var(--text-soft);margin-bottom:8px}
.loja-contato-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.loja-contato-links a{font-size:13px;color:var(--text-soft);text-decoration:none}
.loja-contato-links a:hover{color:var(--accent);text-decoration:underline}

/* links jurídicos — pé da página */
.loja-legal-links{text-align:center;margin:26px 0 2px;font-size:11.5px;color:var(--faint)}
.loja-legal-links a{color:var(--muted);text-decoration:none}
.loja-legal-links a:hover{color:var(--accent);text-decoration:underline}

/* link "Área do vendedor" — pé da página, bem discreto (não é pro cliente) */
#siteFooter .sf-in{padding-right:72px} /* mobile: os botões flutuantes (voltar ao topo) não cobrem o fim dos links */
@media(min-width:760px){#siteFooter .sf-in{padding-right:24px}}
body.sf-visible #lojaWhatsFab{opacity:0;pointer-events:none} /* o WhatsApp já está no rodapé: o FAB sai de cima dos links */
.loja-vendor-link{text-align:center;margin:6px 0 6px}
.loja-vendor-link a{font-size:11.5px;color:var(--faint);text-decoration:none}
.loja-vendor-link a:hover{color:var(--muted);text-decoration:underline}
.loja-ver{text-align:center;margin:2px 0 14px;font-size:10px;color:var(--faint);letter-spacing:.3px}

/* aviso de cookies/armazenamento — informativo, não bloqueia (só storage funcional) */
.loja-cookie{position:fixed;left:0;right:0;bottom:0;z-index:130;
  display:flex;align-items:center;gap:12px;
  padding:11px 15px calc(11px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);
  font-size:12px;line-height:1.45;color:var(--text-soft)}
.loja-cookie a{color:var(--accent)}
.loja-cookie .btn{flex:0 0 auto;margin:0}
.loja-cookie.hidden{display:none}
@media (max-width:430px){.loja-cookie{flex-direction:column;align-items:stretch;gap:8px;text-align:center}}

/* checkout (Fase 6.1) */
#lojaCheckoutModal .modal{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
.ck-steps{display:flex;gap:6px;justify-content:center;margin:2px 0 14px}
.ck-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.ck-dot.on{background:var(--accent)}
.ck-dot.done{background:var(--accent-2)}
.ck-pane .cfg-lbl{display:block;font-size:10px;color:var(--muted);margin:12px 0 5px;
  letter-spacing:.6px;text-transform:uppercase;font-weight:700}
.ck-pane input{width:100%}
.ck-actions{display:flex;gap:8px;margin-top:18px}
.ck-actions .btn{flex:1}
.ck-opt{display:flex;gap:10px;align-items:flex-start;padding:12px;margin-top:8px;
  border:1px solid var(--border);border-radius:12px;cursor:pointer}
.ck-opt input{width:auto;margin-top:3px;flex:0 0 auto}
.ck-opt span{display:flex;flex-direction:column;gap:2px}
.ck-opt b{font-size:13.5px}
.ck-opt i{font-size:11.5px;color:var(--muted);font-style:normal;line-height:1.4}
.ck-opt.disabled{opacity:.5;cursor:not-allowed}
.ck-total{font-size:15px;font-weight:800;color:var(--accent);margin:14px 0 10px;text-align:center}
.ck-pay{width:100%}
.ck-pay:disabled{opacity:.55;cursor:not-allowed}
.ck-qr{display:block;width:220px;max-width:70%;margin:10px auto;border-radius:8px;background:#fff;padding:8px}
.ck-copia{margin:10px 0}
.ck-copia code{display:block;word-break:break-all;font-size:11px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:8px;line-height:1.4}
.ck-pago{font-size:16px;font-weight:800;color:var(--accent);text-align:center;margin:10px 0}
#ckPixStatus code{word-break:break-all;font-size:10.5px}
.ck-count{text-align:center;font-size:13px;margin:8px 0;padding:8px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);line-height:1.45}
.ck-conta{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2)}
.ck-conta input{margin-top:8px}
.ck-conta .ck-actions{margin-top:10px}
.ck-opcional{font-weight:400;color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0}
/* resumo compacto no topo do passo 1 (Fase 9): 1 linha com total; abre pra ver item por item */
.ck-resumo-box{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin:0 0 4px}
.ck-resumo-box summary{cursor:pointer;padding:11px 14px;font-size:13.5px;font-weight:700;
  color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ck-resumo-box summary::-webkit-details-marker{display:none}
.ck-resumo-box summary::after{content:"▾";color:var(--muted);font-size:12px;transition:transform .15s}
.ck-resumo-box[open] summary::after{transform:rotate(180deg)}
.ck-resumo-box #ckResumo{padding:0 14px 12px}
.ck-pane .cfg-hint a{color:var(--accent)}
/* aceite dos termos — trava o "Pagar com PIX" até marcar */
.ck-aceite{display:flex;gap:9px;align-items:flex-start;margin:6px 0 12px;
  font-size:12.5px;line-height:1.5;color:var(--text-soft);cursor:pointer}
.ck-aceite input{width:auto;margin-top:2px;flex:0 0 auto}
.ck-aceite a{color:var(--accent)}

/* envio / endereço (Fase 6.2) */
.ck-envio{margin-top:6px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.ck-envio.hidden{display:none}
.ck-envio input[readonly]{opacity:.75}
.ck-row{display:flex;gap:8px}
.ck-row>div{flex:1;min-width:0}
#btnCkFrete{margin-top:12px}
.ck-frete-opt{display:flex;gap:9px;align-items:flex-start;padding:10px;margin-top:8px;
  border:1px solid var(--border);border-radius:10px;cursor:pointer}
.ck-frete-opt input{width:auto;margin-top:3px;flex:0 0 auto}
.ck-frete-opt.sel{border-color:var(--accent-line);background:var(--accent-quiet)}
.ck-frete-opt b{font-size:13px}
.ck-frete-opt i{font-size:11.5px;color:var(--muted);font-style:normal}
.ck-frete-val{margin-left:auto;font-weight:800;color:var(--accent);white-space:nowrap}

/* resumo do pedido */
#lojaResumoModal .modal{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
.resumo-sec{font-weight:800;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);
  margin:16px 0 7px;border-top:1px solid var(--border);padding-top:12px}
.resumo-sec:first-child{border-top:none;padding-top:0;margin-top:4px}
.resumo-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;line-height:1.4}
.resumo-line .rl-nums{color:var(--text-soft)}
.resumo-line .fimg{width:19px;height:16px;object-fit:contain;border-radius:2px;vertical-align:-2px;margin-right:3px}
.resumo-line .fico{margin-right:3px}
.resumo-line .rl-val{color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.resumo-line.muted{color:var(--muted)}
.resumo-total{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:800;
  color:var(--accent);margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.resumo-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px}
.resumo-empty{font-size:13px;color:var(--muted);padding:12px 0;text-align:center}

/* ================= TIPOGRAFIA da vitrine (v10.76 — direção A) =================
   As regras gerais (fontes, .btn, quadradinhos) vêm de css/style.css; aqui só o que é da vitrine. */
.loja-album-tab,.legend-tab{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.legend-tab{font-size:12.5px;letter-spacing:.03em;padding:6px 9px}
.legend-shelf-tabs{gap:5px}
.legend-shelf-info b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:22px}
.legend-shelf-price{font-family:var(--f-display);font-weight:700;font-size:21px}
.legend-shelf-addlabel{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.legend-shelf-tiertag{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
.loja-footer span{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.02em}
.loja-footer .loja-footnote{font-family:var(--f-text);font-weight:400;font-size:10.5px;letter-spacing:0}
.ck-total{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.02em}
.ck-opt b{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.03em}
.ck-pane .cfg-lbl,#lojaPerfilModal .cfg-lbl{font-family:var(--f-text);font-weight:600;letter-spacing:.9px}
.shinytag,.acetag{font-family:var(--f-display);font-weight:700}
@media (max-width:430px){
  .loja-footer span{font-size:15px}
}

/* ================= A2 — primeira tela da vitrine (v10.79) =================
   Topo enxuto (título + 3 fatos + colar lista + WhatsApp), a lista colada vira um cartão, o campo de
   colar vira painel que abre por cima e o carrinho ganha a lixeira (Cancelar tudo). Espaçamento generoso
   entre botões e busca: no celular o dedo errava o alvo (pedido do vendedor). Alvos de toque >= 48px. */
.loja-hero{text-align:center;margin:8px 0 22px}
.loja-hero h2{font-size:40px;line-height:1.02;margin:0 0 10px}
.loja-hero .subtitle{max-width:30em;margin:0 auto 16px;font-size:14.5px;line-height:1.45}
.loja-facts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.loja-facts>span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;background:var(--surface);
  border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-soft)}
.loja-facts .ic{color:var(--accent)}
.loja-retinfo{margin:12px auto 0;max-width:30em;font-size:13.5px;line-height:1.4;color:var(--muted)}
.loja-retinfo:empty{display:none}
.loja-retinfo b{color:var(--text);font-weight:600}
.loja-cta-row{display:flex;gap:12px;margin:0 0 14px}
.loja-cta-row .btn{min-height:50px;font-size:16px}
.loja-cta-row #btnPasteToggle{flex:1.5}
.loja-cta-row #btnLojaHelp{flex:1;background:transparent;color:var(--text-soft)}
.loja-cta-row #btnLojaHelp:hover{border-color:var(--accent-line);color:var(--accent)}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;margin:0 0 14px;text-decoration:none;font-size:16px;
  border-color:var(--accent-line);color:var(--accent);background:transparent}
.wa-btn:hover{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent)}
.wa-btn.hidden{display:none}
#btnCollFaltantes{min-height:50px}
.loja-saibamais{text-align:center;margin:0 0 30px;font-size:12.5px}
.loja-listcard.hidden{display:none}
.loja-listcard{border:1px solid var(--accent-line);background:linear-gradient(160deg,var(--accent-quiet),var(--surface));
  border-radius:16px;padding:14px;margin:0 0 26px;display:flex;flex-direction:column;gap:12px}
.lc-head{display:flex;align-items:center;justify-content:space-between}
.lc-head b{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:8px}
.lc-edit{background:none;border:none;color:var(--text-soft);font:600 13.5px var(--f-text);display:flex;align-items:center;gap:6px;
  cursor:pointer;padding:10px 4px;min-height:44px}
.lc-stats{display:flex;gap:8px}
.lc-stats span{flex:1;background:var(--ground);border:1px solid var(--border);border-radius:11px;padding:8px 10px;
  font-size:11.5px;color:var(--muted);display:flex;flex-direction:column}
.lc-stats b{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1;color:var(--text)}
.lc-stats .ok b{color:var(--accent)}.lc-stats .no b{color:var(--gold-soft)}
.lc-sel{width:100%;min-height:50px}
.lc-sel:disabled{opacity:1;cursor:default;transform:none;background:var(--accent-quiet);border-color:var(--accent-line);color:var(--accent)}
.loja-listcard #lojaPasteResult{margin:0;text-align:left}
.tem-pedido .loja-hero,.tem-pedido .loja-saibamais,.tem-pedido .loja-meualbum{display:none}
.tem-pedido #lojaPaste .loja-cta-row{margin-bottom:22px}
.loja-dica-rem{display:none;margin:0 0 12px;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.4;color:var(--muted)}
.loja-dica-rem b{color:var(--text);font-weight:600}
.tem-pedido .loja-dica-rem{display:block}
.loja-tools{margin:0 0 18px;padding:14px;display:flex;flex-direction:column;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px}
.loja-tools .search-box{margin:0}
.loja-tools .search-box input{max-width:none;width:100%;min-height:50px;border-radius:12px;font-size:15px}
.loja-tools .filter-tip{margin:0}
.loja-tools .loja-album-tabs{margin:0;gap:12px}
.loja-tools .loja-album-tab{min-height:50px}
.loja-teamnav{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.loja-teamnav::-webkit-scrollbar{display:none}
.loja-teamnav.hidden{display:none}
.tn-chip{flex:none;min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:var(--f-display);font-weight:700;letter-spacing:.05em;font-size:15px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.tn-chip img{width:20px;height:14px;border-radius:2px;object-fit:cover}
.tn-chip:hover{border-color:var(--accent-line);color:var(--accent)}
.loja-body .team{scroll-margin-top:74px}
.foot-trash{flex:0 0 auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--danger-line);background:var(--danger-quiet);
  color:var(--danger);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.foot-trash .ic{width:21px;height:21px}
.foot-trash:hover{background:var(--danger-line);color:#fff}
.loja-footer .loja-foot-btns .btn{min-height:46px;padding-left:12px;padding-right:12px}
.loja-footer .loja-foot-left span{font-size:15px}
#toast.act{pointer-events:auto;display:flex;align-items:center;gap:16px}
.toast-act{background:rgba(0,0,0,.22);border:1px solid rgba(0,0,0,.4);color:inherit;border-radius:9px;padding:8px 14px;min-height:40px;
  font:700 14px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.whats-fab{position:fixed;right:14px;bottom:calc(64px + 58px + env(safe-area-inset-bottom));z-index:116;width:50px;height:50px;border-radius:50%;
  background:#25d366;color:#08281a;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);text-decoration:none;
  opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .18s,transform .18s}
.whats-fab.show{opacity:1;pointer-events:auto;transform:none}
.whats-fab.hidden{display:none}
.whats-fab .ic{width:28px;height:28px}
@media (min-width:900px){.whats-fab{bottom:82px;right:24px}}
.loja-sheet{align-items:flex-end;padding:0}
.loja-sheet .modal{margin:0 auto;border-radius:22px 22px 0 0;max-width:620px;padding:22px 18px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto}
.loja-sheet textarea{min-height:140px;margin-top:10px}
.loja-sheet .actions{margin:14px 0 0;gap:12px}
.loja-sheet .actions .btn{min-height:50px;flex:1}
/* achado do ux-ui-reviewer (v10.115): com ~900 itens, #lojaCollLista rolando
   dentro do .modal inteiro levava o X e os botões Marcar/Desmarcar junto —
   aqui só a lista rola, o cabeçalho (close+título+ações) fica fixo */
#lojaCollSheet .modal{display:flex;flex-direction:column;overflow-y:hidden}
#lojaCollLista{overflow-y:auto;min-height:0;flex:1;margin-top:10px}
/* achado do usuário (06/10/2026): dentro do modal (620px) as figurinhas saíam menores que
   as da vitrine normal — body.v2 .sticker-btn{width:100%} estica cada cartão pra preencher
   a coluna, e aqui a grade herdava "10 colunas" do breakpoint largo (pensado pro catálogo
   inteiro, não pra um modal estreito), resultando em colunas de ~55px em vez de 73px. Fixa
   o tamanho de verdade (mesmo 73×103/123px de .sticker-btn.haveName em css/style.css) e
   deixa a grade só quebrar linha com o que couber — sem depender do nº de colunas. */
#lojaCollLista .stickers{grid-template-columns:repeat(auto-fill,73px);max-width:none;justify-content:start}
#lojaCollLista .sticker-btn{width:73px}
.coll-falt-team{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:12.5px;
  font-weight:800;color:var(--text-soft);text-transform:uppercase}
.coll-falt-team:first-child{margin-top:0}
.coll-falt-team .fimg{width:22px;height:16px;object-fit:contain;border-radius:2px}
.coll-falt-team .fico{font-size:16px}
/* Legends que a Catanos tem, faltantes do Meu Álbum (v10.123) — mesmo tratamento de
   cabeçalho fixo + lista rolável do painel de figurinhas acima */
#lojaCollLegSheet .modal{display:flex;flex-direction:column;overflow-y:hidden}
#lojaCollLegLista{overflow-y:auto;min-height:0;flex:1;margin-top:10px}
.coll-leg-falt-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;min-height:48px;
  background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--border);
  border-radius:10px;cursor:pointer;color:var(--text-soft)}
.coll-leg-falt-item .clf-name{font-weight:800;flex:1}
.coll-leg-falt-item .clf-tier{font-size:11px;text-transform:uppercase;opacity:.8}
.coll-leg-falt-item .clf-price{font-family:var(--f-display);font-weight:800}
.coll-leg-falt-item.tier-regular{border-left-color:var(--violet)}
.coll-leg-falt-item.tier-bronze{border-left-color:var(--bronze)}
.coll-leg-falt-item.tier-silver{border-left-color:var(--silver)}
.coll-leg-falt-item.tier-gold{border-left-color:var(--gold)}
.coll-leg-falt-item.has{background:var(--accent-2);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:430px){
  .loja-hero h2{font-size:36px}
  .loja-cta-row .btn{font-size:15px;padding-left:10px;padding-right:10px}
}

/* ================= FOTO NO QUADRADINHO (v10.80) =================
   Quem está em FOTOS (js/fotos-index.js) ganha a miniatura (3:4, 97px de altura) e a barra de preço embaixo —
   o quadradinho continua com os mesmos 73×123. Sem foto = quadradinho de texto como sempre. */
.sticker-btn.haveName.hasPhoto{padding:0}
.tphoto{position:absolute;top:0;left:0;width:100%;height:97px;object-fit:cover;border-radius:7px 7px 0 0;background:var(--surface-3);pointer-events:none}
.hasPhoto .tnum{position:absolute;top:5px;left:5px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:13px;line-height:1;padding:3px 6px;border-radius:7px}
.hasPhoto .acen,.hasPhoto .acestar{display:none}
.hasPhoto .pr{position:absolute;left:0;right:0;bottom:0;height:26px;margin:0;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border)}
.sticker-btn.hasPhoto.shiny{box-shadow:0 0 0 2px var(--gold)}
.sticker-btn.hasPhoto.ace{box-shadow:0 0 0 2px var(--violet)}
.sticker-btn.hasPhoto.sel{box-shadow:0 0 0 3px var(--accent)}
.hasPhoto.sel::after{content:"";position:absolute;left:0;right:0;top:0;bottom:26px;border-radius:7px 7px 0 0;background:rgba(63,157,116,.32);z-index:1;pointer-events:none}
.hasPhoto .qty-badge{z-index:4}
.tzoom{position:absolute;top:4px;right:4px;z-index:3;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.tzoom .ic{width:14px;height:14px}
.tzoom::after{content:"";position:absolute;inset:-6px}
@media (max-width:480px){
  .tzoom{width:20px;height:20px;top:3px;right:3px}
  .tzoom .ic{width:12px;height:12px}
  .hasPhoto .tnum{font-size:12px;padding:2px 5px;top:3px;left:3px}
}
body.tem-fotos .loja-body .team,body.tem-fotos #lojaCatalogo .team{content-visibility:auto;contain-intrinsic-size:auto 520px}
.foto-modal{max-width:440px;padding:16px}
.foto-modal #fotoImg{display:block;width:100%;aspect-ratio:3/4;max-height:66vh;object-fit:contain;border-radius:12px;background:var(--surface-2)}
.foto-modal .close{z-index:2;background:rgba(0,0,0,.55);color:#fff}
.foto-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 2px}
.foto-cap b{font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em;text-align:left}
.foto-cap span{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--accent);white-space:nowrap}
.foto-add{width:100%;min-height:50px}
.ck-whats{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--accent-line);
  background:var(--accent-quiet);color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}
.ck-whats.hidden{display:none}

.loja-cancel-modal p{margin:8px 0 14px;font-size:14px;line-height:1.45}
.loja-cancel-modal .actions{display:flex;gap:10px;flex-wrap:wrap}

/* chip de navegação: ícones de FWC e CC no tamanho das bandeiras */
.tn-chip .fico-fwc,.tn-chip .fico-cc{width:20px;height:14px;border-radius:2px}
.tn-chip .fico-fwc .ic{width:11px;height:11px}
.tn-chip .fico-cc .ic{height:11px}

/* portão do WhatsApp (v10.190): link da política legível nos dois temas + campo/botão com respiro */
.loja-whats-modal a{color:var(--accent,#2fc66b);text-decoration:underline}
.loja-whats-modal .actions{margin-top:14px}
.loja-whats-modal .hint{margin-top:12px;text-align:center}

/* figurinha sem estoque agora: continua apagada, mas toca (abre "me avise quando chegar") */
.sticker-btn.unavailable.avisavel,body.v2 .sticker-btn.unavailable.avisavel{cursor:pointer}
.sticker-btn.unavailable.avisavel:hover,body.v2 .sticker-btn.unavailable.avisavel:hover{opacity:.62;border-color:var(--accent-line,#3f8a63)}