/* ============================================================
   LOJA — a base da página e as peças que só a loja tem
   ============================================================
   No sistema visual "peça de inventário" desde 12/10/2026, o mesmo do
   gestaostaff-spot, do Guia da Staff e do formulario-spot (pedido do dono:
   trazer o design system deles pra cá, com a MESMA paleta da loja, SEM o céu
   e SEM a fonte pixelada, como no formulário).
     styles/tokens.css -> os tokens --ln-* (cores, molduras, raios)
     styles/pecas.css  -> as peças .ln-* (cartão, slot, botão, poço, selo...)
     styles/core.css   -> o que já existia (animações, tema claro antigo)
     styles/loja.css   -> ESTE: a base e as peças da loja (prefixo loja-)

   As regras que seguram o sistema (as mesmas do guia e do formulário):
   - CSS novo usa token --ln-*, nunca hex ou rgba escrito na mão.
   - Nada se mexe no hover: só a borda clareia (ou o botão clareia 7%).
     Saíram os pulos, os zooms, o brilho girando na borda do "Mais popular"
     e o desfoque atrás dos diálogos.
   - Botão pressionado = o degrau de baixo cai de 3px pra 1px (afunda).
   - "Ligado" (selecionado) = fundo da marca + relevo invertido.
   - Sem a letra pixel: o rótulo (.ln-eyebrow) usa a fonte normal, em
     maiúsculas espaçadas.
   - O Tailwind (CDN) carrega DEPOIS deste arquivo: um utilitário de cor,
     borda ou raio no HTML ganha da peça. No HTML convertido, peça e
     utilitário de cor/borda/raio não se misturam (espaçamento e layout
     continuam no Tailwind).
   ============================================================ */

/* ============================================================
   BASE
   ============================================================ */
:root {
  /* A fonte da loja continua a Montserrat de sempre (pedido do dono,
     12/10/2026), e não a Plus Jakarta Sans do gestão, do guia e do
     formulário. O que veio dos três foram as peças e a receita. */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* O .ln-badge das peças lê esta variável (no guia ela é a Plus Jakarta
     Sans do next/font); aqui ela aponta pra Montserrat. */
  --font-jakarta: 'Montserrat';
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ln-surface-0);
}
body {
  font-family: var(--font-primary);
  background: var(--ln-surface-0);
  color: var(--ln-text-fg);
  /* QUEBRA DE LINHA, a mesma do gestão e do formulário (pedido do dono,
     13/10/2026: nada de uma palavra sozinha na última linha, nos três
     projetos). O pretty HERDA pra todo texto; os títulos (abaixo) repartem
     as linhas por igual. O `text-wrap-style`, e não o atalho `text-wrap`,
     de propósito: o atalho também liga a quebra e desfaria um `nowrap`
     herdado de quem corta o texto com reticências. */
  text-wrap-style: pretty;
}
h1, h2, h3, h4, h5, h6 { text-wrap-style: balance; }

::selection {
  background: var(--ln-brand-500);
  color: #ffffff;
}

/* A barra de rolagem discreta do guia: só o polegar, sem trilho. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ln-edge-2) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ln-edge-2); border-radius: var(--ln-radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--ln-frame); }

/* As áreas que rolavam com a barra roxa fina (.custom-scrollbar) usam a
   mesma barra discreta. */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--ln-edge-2) transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--ln-edge-2); border-radius: var(--ln-radius-sm); }

/* ============================================================
   TIPOGRAFIA
   O RÓTULO (.ln-eyebrow) na fonte normal, e não na letra pixel do gestão e
   do guia — o mesmo do formulário: curto, maiúsculo, espaçado. 14px dá a
   mesma altura de maiúscula da Silkscreen em 16px.
   ============================================================ */
.ln-eyebrow {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.ln-eyebrow-sm { font-size: 12px; }
.ln-pixel-text { font-family: var(--font-primary); }
/* O marcador de seção das peças (.ln-section-marker, o quadradinho roxo
   antes do título) NÃO é usado na loja: o dono pediu pra tirar
   (12/10/2026). Título de seção é só o texto. */

/* OS PESOS DA LOJA (pedido do dono, 12/10/2026: "onde tinha bold, ficou
   mais grosso; coloque como o site original era"). Medido no navegador,
   texto por texto, contra o backup (os pesos de cada classe loja-* abaixo
   já são os de antes). O selo fica no 600 das peças, que era o mais comum
   na loja; os que eram negrito ganham 700 aqui (os do card de produto, o
   de desconto) ou um font-bold no HTML, e os mais leves, font-medium/
   font-normal no HTML. Os "NOVO"/"NOVIDADE" do menu eram 800. (O "No
   carrinho" das variações deixou de ser selo: ver .loja-no-carrinho.) */
.loja-cat .ln-badge { font-weight: 800; letter-spacing: 0.05em; }
.loja-produto-selo,
.loja-selo-desconto { font-weight: 700; }
/* O SELO COMPACTO, no meio de uma linha de texto (o "3 opções" do card,
   ao lado de "A partir de"): só o fundo tingido, sem a borda de 2px — com
   ela o selo virava um botão e encostava no preço. O tamanho é o de antes. */
.loja-selo-compacto {
  gap: 4px;
  padding: 3px 6px;
  border-width: 0;
  border-radius: var(--ln-radius-sm);
  background: color-mix(in srgb, var(--ln-badge-c) 15%, transparent);
  font-size: 11px;
  line-height: 1;
}

/* O título de um bloco grande (o nome da categoria, "Seu carrinho"...). */
.loja-titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ln-text-fg);
}
.loja-texto-apagado { color: var(--ln-text-muted); }
.loja-texto-marca { color: var(--ln-brand-text); }

/* ============================================================
   BOTÕES ANTIGOS DA LOJA (.btn-primary, .btn-outline...)
   Os nomes continuam (o HTML e os scripts usam), mas agora desenham as
   peças do sistema: .btn-primary e .btn-cart = .ln-btn (roxo cheio com
   relevo), .btn-outline e .btn-secondary = .ln-slot-btn (a peça cinza),
   .btn-ghost = .ln-ghost (sem relevo até o hover).
   ============================================================ */
.btn-primary,
.btn-cart,
.btn-secondary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--ln-radius-slot);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.btn-primary,
.btn-cart,
.btn-secondary,
.btn-outline {
  border: 2px solid var(--ln-outline);
  box-shadow:
    inset 0 var(--ln-btn-top) 0 0 var(--ln-b-top),
    inset 0 calc(-1 * var(--ln-btn-bottom)) 0 0 var(--ln-b-bottom);
  transition: filter 0.15s;
}
.btn-primary,
.btn-cart {
  background: var(--ln-btn-primary-face);
  color: #ffffff;
  font-weight: 600;
  --ln-b-top: var(--ln-btn-primary-top);
  --ln-b-bottom: var(--ln-btn-primary-bottom);
}
.btn-secondary,
.btn-outline {
  background: var(--ln-btn-slot-face);
  color: var(--ln-btn-slot-ink);
  font-weight: 600;
  --ln-b-top: var(--ln-btn-slot-top);
  --ln-b-bottom: var(--ln-btn-slot-bottom);
}
.btn-primary:hover,
.btn-cart:hover,
.btn-secondary:hover,
.btn-outline:hover { filter: brightness(1.07); }
.btn-primary:active,
.btn-cart:active,
.btn-secondary:active,
.btn-outline:active {
  box-shadow: inset 0 calc(-1 * var(--ln-btn-pressed-bottom)) 0 0 var(--ln-b-bottom);
}
.btn-primary:focus-visible,
.btn-cart:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--ln-ring);
  outline-offset: 2px;
}
.btn-primary:disabled,
.btn-cart:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-primary[aria-disabled='true'] {
  filter: saturate(0.4) brightness(0.75);
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  border: 0;
  color: var(--ln-text-muted);
  font-weight: 600;
  transition: background-color 0.1s, color 0.1s;
}
.btn-ghost:hover { background: var(--ln-hover-veil); color: var(--ln-text-fg); }
.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
/* No tema claro o texto do botão roxo continua branco (o core.css antigo
   também garantia isso com !important). */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-cart { color: #ffffff; }

/* O botão do produto quando ele JÁ ESTÁ no carrinho (data-state="active",
   main.js): a mesma peça em verde. */
[data-package-card-button][data-state="active"] {
  background: var(--ln-btn-success-face);
  --ln-b-bottom: var(--ln-btn-success-bottom);
}
/* O "X" de tirar do carrinho, colado à direita do botão verde. */
[data-package-card-button] [data-cart-remove] {
  border-left: 2px solid rgba(0, 0, 0, 0.28);
  border-radius: 0 var(--ln-radius-sm) var(--ln-radius-sm) 0;
}

/* A cor do Discord num botão do sistema (.ln-btn-color das peças). */
.loja-btn-discord {
  --btn-face: var(--ln-discord);
  --btn-face-bottom: var(--ln-discord-bottom);
}

/* O botão quadrado só com ícone (carrinho, tema, redes sociais). */
.loja-btn-icone {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-shrink: 0;
  font-size: 1rem;
}
.loja-btn-icone-lg { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }

/* ============================================================
   CAMPOS — todo campo é um POÇO (o .ln-input das peças).
   `html body :where(...)` dá a força de DOIS elementos: ganha do preflight
   do Tailwind (um elemento só, que zera o padding dos campos) e perde de
   QUALQUER classe — as peças (.ln-input, .loja-qtd-campo) e os utilitários
   do HTML (bg-transparent, h-12...). Medido: com `:root` (força de uma
   classe, e este arquivo vem depois do pecas.css) a regra ganhava do
   .ln-input e o campo de email do login ficava estreito.
   ============================================================ */
html body :where(
  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='submit'], [type='button'], [type='reset'], [type='image'], [type='hidden']),
  select,
  textarea
) {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--ln-outline);
  background-color: var(--ln-well-floor);
  color: var(--ln-text-fg);
  border-radius: var(--ln-radius-slot);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow:
    inset 0 0 0 2px var(--ln-frame-panel),
    inset 0 4px 0 0 var(--ln-well-depth),
    inset 0 -1px 0 0 var(--ln-well-lip);
  transition: box-shadow 0.12s;
}
html body :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='submit'], [type='button'], [type='reset'], [type='image'], [type='hidden']), select) {
  height: 2.5rem;
}
html body :where(textarea) { padding: 0.6rem 0.75rem; }
html body :where(select) {
  padding-right: 2.25rem;
  /* A setinha do select (a nativa some com o appearance: none). */
  background-image: linear-gradient(45deg, transparent 50%, var(--ln-text-muted) 50%), linear-gradient(135deg, var(--ln-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html body :where(input, select, textarea)::placeholder { color: var(--ln-text-placeholder); }
html body :where(input:not([type='checkbox'], [type='radio']), select, textarea):hover {
  box-shadow:
    inset 0 0 0 2px var(--ln-frame-slot),
    inset 0 4px 0 0 var(--ln-well-depth),
    inset 0 -1px 0 0 var(--ln-well-lip);
}
/* O foco troca a moldura translúcida pela da MARCA (sem anel por fora). */
html body :where(input:not([type='checkbox'], [type='radio']), select, textarea):focus,
html body :where(input:not([type='checkbox'], [type='radio']), select, textarea):focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ln-brand-400),
    inset 0 4px 0 0 var(--ln-well-depth);
}
/* Campo com erro (custom-field.html marca data-state="error"). */
html body :where(input, select, textarea)[data-state='error'] {
  border-color: var(--ln-danger);
}
/* O .ln-input das peças tem o foco na moldura neutra; na loja, a da marca,
   igual aos outros campos. */
.ln-input:focus {
  box-shadow:
    inset 0 0 0 2px var(--ln-brand-400),
    inset 0 4px 0 0 var(--ln-well-depth);
}

/* ============================================================
   TOPO: a NAVBAR (components/header.html)
   O painel do sistema com 64px de linha, na largura do conteúdo, como a
   barra do guia (a do laby.net), sem o céu atrás. Não gruda no topo ao
   rolar no computador (o dono tinha desligado isso); no celular a barra
   de cima gruda, como já era.
   ============================================================ */
.loja-topo {
  position: relative;
  z-index: 40;
}
/* No celular o cabeçalho inteiro gruda (a barra de cima é tudo o que ele
   mostra; o sticky precisa estar nele, que é filho do body). */
@media (max-width: 639px) {
  .loja-topo { position: sticky; top: 0; }
}
.loja-navbar {
  display: none;
  margin-top: 16px;
}
@media (min-width: 640px) {
  .loja-navbar { display: block; }
}
.loja-navbar-painel {
  padding: 0 12px;
  background: var(--ln-surface-1);
  border: 2px solid var(--ln-outline-slot);
  border-radius: var(--ln-radius-card);
  outline: 2px solid var(--ln-frame-nav);
  outline-offset: -4px;
}
.loja-navbar-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 72px;
}
.loja-navbar-marca {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  border-radius: var(--ln-radius-slot);
  color: var(--ln-text-fg);
  text-decoration: none;
}
.loja-navbar-marca:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 4px; }
.loja-navbar-logo { display: block; width: auto; height: 64px; }
.loja-navbar-nome {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loja-navbar-links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 4px;
}
/* O LINK: a altura inteira da linha, e não padding em cima e embaixo — é o
   que põe o traço de 3px exatamente no pé da barra. No hover o texto
   clareia e o traço aparece fraco; a página aberta tem o traço laranja
   (a cor secundária da loja). */
.loja-navbar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ln-text-secondary);
  transition: color 0.2s;
}
.loja-navbar-link i { font-size: 0.8125rem; }
.loja-navbar-link .loja-navbar-externo { font-size: 0.6875rem; transform: rotate(-45deg); opacity: 0.7; }
.loja-navbar-link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 3px;
  background: transparent;
  transition: background-color 0.2s;
}
.loja-navbar-link:hover,
.loja-navbar-link.is-ativo { color: var(--ln-text-fg); }
.loja-navbar-link:hover::after { background: color-mix(in srgb, var(--ln-text-fg) 18%, transparent); }
/* A página aberta: o traço no laranja da cor SECUNDÁRIA da loja
   (config.secondary_color), e não no roxo — pedido do dono, 12/10/2026. */
.loja-navbar-link.is-ativo::after { background: var(--ln-loja-destaque); }
.loja-navbar-link:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: -10px; border-radius: var(--ln-radius-slot); }
/* A Loja no meio é o botão roxo (o destino principal do site). */
.loja-navbar-loja { gap: 8px; margin: 0 8px; height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; font-weight: 700; }
.loja-navbar-acoes {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}
/* A janela estreita (640–1100px) não tem espaço pros links com o logo
   grande: o logo encolhe e os links apertam. */
@media (max-width: 1100px) {
  .loja-navbar-logo { height: 44px; }
  .loja-navbar-link { padding: 0 9px; font-size: 0.875rem; }
  .loja-navbar-link i:not(.loja-navbar-externo) { display: none; }
  .loja-navbar-loja { margin: 0 4px; }
}
@media (max-width: 820px) {
  .loja-navbar-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .loja-navbar-links { justify-content: center; }
  .loja-navbar-link { padding: 0 6px; font-size: 0.8125rem; }
}

/* A DICA embaixo de um botão da barra (tema, login): a peça .ln-tooltip,
   que aparece no hover sem se mexer. */
.loja-dica-ancora { position: relative; }
.loja-dica {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 30;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 0.15s, visibility 0s linear 0.15s;
}
.loja-dica-ancora:hover .loja-dica,
.loja-dica-ancora:focus-within .loja-dica {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s, visibility 0s;
}

/* O CONTADOR do carrinho: o selo laranja no canto do botão (a cor de
   sempre), com a borda escura das peças. */
.loja-contador {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-sm);
  background: var(--ln-loja-contador);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.22);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* ===== Celular: a barra de cima (grudada no topo pelo .loja-topo) ===== */
.loja-topo-celular {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 12px;
  background: var(--ln-surface-1);
  border-bottom: 2px solid var(--ln-outline-slot);
  box-shadow: inset 0 -2px 0 0 var(--ln-frame-nav);
}
@media (min-width: 640px) {
  .loja-topo-celular { display: none; }
}
.loja-topo-celular-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.loja-topo-celular-logo img { display: block; height: 46px; width: auto; }

/* ===== Celular: a GAVETA (o menu que o ☰ abre) =====
   A sidebar do guia: colada na borda, da altura da tela, com a borda
   escura só do lado do conteúdo. Abre e fecha pelo data-open (core.css). */
.loja-gaveta-fundo { background: var(--ln-overlay); }
.loja-gaveta {
  background: var(--ln-surface-1);
  border-right: 2px solid var(--ln-outline-slot);
}
.loja-gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ln-edge-1);
}
.loja-gaveta-topo img { display: block; height: 36px; width: auto; }
.loja-gaveta-titulo {
  padding: 12px 12px 6px;
  color: var(--ln-text-muted);
}
/* Os itens: apagados em repouso, o véu no hover, e a página aberta é a
   LINHA REALÇADA (o .ln-ghost.is-current) — não um botão com relevo. */
.loja-gaveta-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ln-radius-slot);
  color: var(--ln-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.1s, background-color 0.1s;
}
.loja-gaveta-link i:first-child { width: 20px; text-align: center; font-size: 0.875rem; }
.loja-gaveta-link:hover { background: var(--ln-hover-veil); color: var(--ln-text-fg); }
.loja-gaveta-link:active { background: var(--ln-surface-3); }
.loja-gaveta-link.is-current { background: var(--ln-surface-3); color: var(--ln-text-fg); font-weight: 700; }
.loja-gaveta-link.is-current i:first-child { color: var(--ln-brand-text); }
.loja-gaveta-link .loja-navbar-externo { margin-left: auto; font-size: 0.625rem; transform: rotate(-45deg); opacity: 0.6; }
.loja-gaveta-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ln-edge-1);
}
/* Os botões do rodapé da gaveta: a peça cinza, alinhada à esquerda. */
.loja-gaveta-botao {
  width: 100%;
  justify-content: flex-start;
  height: 2.75rem;
  padding: 0 12px;
  gap: 12px;
}
.loja-gaveta-botao i:first-child { width: 20px; text-align: center; }
.loja-gaveta-discord-sub { display: block; font-size: 0.6875rem; font-weight: 500; opacity: 0.8; margin-top: 1px; }

/* ===== A FAIXA embaixo da navbar (jogadores online / descontos) =====
   Um painel da cor da marca com o relevo do "ligado" (luz em cima, degrau
   escuro embaixo) — é a peça, não um retângulo chapado. */
.loja-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-card);
  background: var(--ln-brand-500);
  box-shadow: inset 0 2px 0 0 var(--ln-brand-bevel-top), inset 0 -3px 0 0 var(--ln-brand-bevel-bottom);
  color: #ffffff;
  font-size: 0.8125rem;
  text-align: center;
}
@media (min-width: 640px) { .loja-faixa { font-size: 0.9375rem; } }

/* O aviso do topo (components/top-announce.html), configurável no painel. */
.loja-aviso-topo {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: var(--ln-brand-500);
  border-bottom: 2px solid var(--ln-outline);
  box-shadow: inset 0 -3px 0 0 var(--ln-brand-bevel-bottom);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.loja-aviso-topo .loja-aviso-codigo {
  padding: 1px 6px;
  border-radius: var(--ln-radius-sm);
  background: rgba(0, 0, 0, 0.28);
  font-weight: 700;
}

/* O CABEÇALHO COM IMAGEM NO FUNDO (o "Finalizar Compra" do checkout): a
   imagem bem apagada (10%, como era antes), por baixo do texto. A imagem
   vem do HTML na variável --loja-cabeca-img. O `isolation` faz o z-index
   -1 ficar ACIMA do fundo do painel e abaixo do conteúdo; a moldura
   (outline) do painel é pintada por último e fica por cima da imagem. */
.loja-cabeca-imagem {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.loja-cabeca-imagem::after {
  content: '';
  position: absolute;
  inset: 2px; /* começa DEPOIS da moldura (2px por dentro da borda), sem passar por baixo dela */
  z-index: -1;
  border-radius: calc(var(--ln-radius-card) - 4px);
  background: var(--loja-cabeca-img) center / cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

/* ============================================================
   MENU DE CATEGORIAS (components/category-menu.html)
   Cada categoria é a PEÇA CINZA (o .ln-slot-btn) com o ícone e o nome. A
   aberta afunda (o degrau de baixo cai) e ganha o traço OURO do lado e o
   nome em ouro — a cor que a loja sempre usou ali. As subcategorias
   descem num POÇO colado embaixo dela.
   ============================================================ */
.loja-categorias-titulo {
  margin: 0;
  padding: 18px 16px 6px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ln-loja-destaque-texto);
}
.loja-categorias-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 16px 16px;
}
.loja-cat { position: relative; }
.loja-cat-botao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px 10px 10px;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
  background: var(--ln-btn-slot-face);
  box-shadow:
    inset 0 var(--ln-btn-top) 0 0 var(--ln-btn-slot-top),
    inset 0 calc(-1 * var(--ln-btn-bottom)) 0 0 var(--ln-btn-slot-bottom);
  color: var(--ln-text-secondary);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.loja-cat-botao:hover { filter: brightness(1.07); color: var(--ln-text-fg); }
.loja-cat-botao:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 2px; }
.loja-cat-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.loja-cat-icone img { display: block; width: 34px; height: 34px; object-fit: contain; }
.loja-cat-nome { flex: 1; min-width: 0; }
.loja-cat-seta {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ln-text-muted);
  transition: transform 0.2s;
}
/* O traço ouro, fora do botão, na margem do painel (como sempre foi). */
.loja-cat-botao::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -16px;
  width: 4px;
  height: 40px;
  border-radius: 0 3px 3px 0;
  background: var(--ln-loja-ouro);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s;
}
.loja-cat[data-open='true'] .loja-cat-botao::before,
.loja-cat-botao.is-ativo::before { opacity: 1; }
.loja-cat[data-open='true'] .loja-cat-nome,
.loja-cat-botao.is-ativo .loja-cat-nome { color: var(--ln-loja-ouro-texto); }
/* Aberta: afunda e encosta no poço de baixo. */
.loja-cat[data-open='true'] .loja-cat-botao {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: inset 0 calc(-1 * var(--ln-btn-pressed-bottom)) 0 0 var(--ln-btn-slot-bottom);
}
.loja-cat[data-open='true'] .loja-cat-seta { transform: rotate(180deg); }
/* O SELO (NOVO, NOVIDADE...): a peça "ligada" pequena, no canto. */
.loja-cat-selo {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 1;
  transform: translateY(-50%);
  letter-spacing: 0.04em;
}
/* O poço das subcategorias. */
.loja-cat-sub {
  display: none;
  flex-direction: column;
  padding: 4px;
  margin-top: -2px;
  background: var(--ln-well-floor);
  border: 2px solid var(--ln-outline);
  border-top-width: 0;
  border-radius: 0 0 var(--ln-radius-slot) var(--ln-radius-slot);
  box-shadow: inset 0 3px 0 0 var(--ln-well-depth), inset 0 -1px 0 0 var(--ln-well-lip);
}
.loja-cat[data-open='true'] .loja-cat-sub { display: flex; }
.loja-cat-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--ln-radius-sm);
  color: var(--ln-text-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.1s, color 0.1s;
}
.loja-cat-sub-link:hover { background: var(--ln-hover-veil); color: var(--ln-text-fg); }
.loja-cat-sub-link.is-ativo { background: var(--ln-surface-3); color: var(--ln-loja-ouro-texto); }
/* O selo da subcategoria (NOVIDADE...): pequeno como era (10px de letra,
   16px de altura). Nesse tamanho a borda e o relevo do "ligado" vão para
   1px, senão comem a letra. */
.loja-cat-sub-link .ln-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-width: 1px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.025em;
  box-shadow: inset 0 1px 0 0 var(--ln-brand-bevel-top), inset 0 -1px 0 0 var(--ln-brand-bevel-bottom);
}

/* Destaque passageiro ao chegar na loja (clique em "Loja" no topo): a
   moldura do painel acende na cor da marca e volta. */
@keyframes lojaDestaqueCategorias {
  0%, 100% { outline-color: var(--ln-frame-panel); }
  25%, 60% { outline-color: var(--ln-brand-400); }
}
.loja-highlight { animation: lojaDestaqueCategorias 1.6s ease-out 1; }

/* ============================================================
   MAIOR COMPRADOR DA SEMANA (components/top-donators.html)
   ============================================================ */
/* O painel estica até a altura do conteúdo ao lado (o script da home mede);
   o bloco ocupa a altura toda e fica CENTRADO nela (pedido do dono). */
.loja-top {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 18px;
  text-align: center;
}
.loja-top-skin { position: relative; display: block; height: 144px; width: auto; }
.loja-top-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ln-mc-dark-green);
}
.loja-top-nome i { color: var(--ln-loja-destaque-texto); font-size: 0.875rem; }
.loja-top-sub { margin-top: 2px; font-size: 0.75rem; color: var(--ln-text-muted); }
.loja-top-semana { margin-top: 10px; }

/* ============================================================
   CARD DE PRODUTO (components/package-card.html)
   O CARTÃO ALTO do sistema (.ln-card-raised sem a sombra): fundo 2, borda
   escura e a moldura por dentro. No hover só a borda clareia. O "Mais
   popular" tem o FEIXE girando na borda, o .bg-highlited de antes, agora
   no rosa da tag LEGEND e mais chamativo (pedidos do dono, 12/10/2026: é a
   única coisa do card que se mexe sozinha, de propósito).
   ============================================================ */
.loja-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 18px 14px 14px;
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-panel);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
  transition: border-color 0.12s;
}
@media (min-width: 640px) { .loja-produto { padding: 24px 16px 16px; } }
.loja-produto:hover { border-color: var(--ln-selection); }
/* O FEIXE: a borda fica transparente e mostra um degradê que vai da borda
   escura das peças até o rosa, desenhado só na faixa da borda
   (border-box) por baixo do fundo do card (padding-box). O ângulo do
   degradê gira (a variável registrada com @property é o que deixa o
   navegador animar um ângulo), e o rosa dá a volta no card em 8s — a mesma
   volta do .bg-highlited antigo. Discreto de propósito: o dono testou uma
   versão chamativa (dois feixes, brilho, 4s) e preferiu esta. */
@property --loja-feixe-angulo {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.loja-produto--destaque {
  border-color: transparent;
  background:
    linear-gradient(var(--ln-surface-2), var(--ln-surface-2)) padding-box,
    linear-gradient(var(--loja-feixe-angulo), var(--ln-outline), var(--ln-loja-feixe)) border-box;
  animation: lojaFeixeGira 8s linear infinite;
}
.loja-produto--destaque:hover { border-color: transparent; }
@keyframes lojaFeixeGira {
  to { --loja-feixe-angulo: 360deg; }
}
/* Gira SEMPRE, como o .bg-highlited antigo — inclusive com os "efeitos de
   animação" do Windows desligados (o dono não via o feixe girar). */
/* O selo em cima do card (Mais popular / Restam X). */
.loja-produto-selo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 11;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  gap: 6px;
}
.loja-produto-selo i { font-size: 0.875rem; }
/* O selo vermelho do estoque acabando: a peça ligada em vermelho (com o
   relevo do vermelho, e não o roxo). */
.loja-selo-perigo {
  background: var(--ln-btn-danger-face);
  --ln-on-luz: var(--ln-btn-danger-top);
  --ln-on-degrau: var(--ln-btn-danger-bottom);
}
.loja-produto-imagem {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.loja-produto-imagem img { position: relative; width: 100%; max-width: 165px; }
/* "Clique para saber mais": a dica do sistema, por cima da imagem. */
.loja-produto-dica {
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 20;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 0.15s, visibility 0s linear 0.15s;
}
.loja-produto-imagem:hover .loja-produto-dica { opacity: 1; visibility: visible; transition: opacity 0.15s, visibility 0s; }
.loja-produto-imagem:hover ~ .loja-produto-selo { opacity: 0; }
.loja-produto-nome {
  margin: 0;
  padding-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--ln-text-fg);
}
@media (min-width: 640px) { .loja-produto-nome { padding-top: 16px; font-size: 1.125rem; } }

/* O PREÇO: "R$" pequeno em cima, o número grande, os centavos embaixo. */
.loja-preco-antigo {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ln-text-muted);
  text-decoration: line-through;
}
.loja-preco {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  padding-bottom: 16px;
  line-height: 1;
  color: var(--ln-text-fg);
}
.loja-preco-moeda,
.loja-preco-centavos { font-size: 0.875rem; font-weight: 600; color: var(--ln-text-muted); }
.loja-preco-moeda { align-self: flex-start; margin-top: 4px; }
.loja-preco-centavos { align-self: flex-end; margin-bottom: 4px; }
.loja-preco-valor { margin: 0 2px; font-size: 2.25rem; font-weight: 800; }
/* A etiqueta de desconto (o selo com o raio): o número em cima dela. */
.loja-etiqueta { position: relative; display: inline-block; height: fit-content; }
.loja-etiqueta svg { display: block; }
.loja-etiqueta-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-33%, -50%);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ln-danger);
}
[data-theme="light"] .loja-etiqueta-num { color: #b91c1c; }

/* ============================================================
   DIÁLOGOS (.dialog, scripts/dialog.js)
   O fundo escurece SEM desfocar; a caixa é o PAINEL do sistema e sobe 8px
   ao abrir. As animações de abrir/fechar (data-state) estão no core.css.
   ============================================================ */
.loja-dialogo {
  background: var(--ln-surface-1);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-panel);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
  color: var(--ln-text-fg);
}
/* Caixa com rolagem dentro: a moldura vem por cima (`loja-dialogo
   ln-moldura-cima`; a regra que tira o outline dobrado está no bloco do
   PÓS-COMPRA, no fim deste arquivo). */
.loja-dialogo-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--ln-edge-1);
}
.loja-dialogo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ln-text-fg);
}
.loja-dialogo-rodape {
  padding: 16px 20px;
  border-top: 1px solid var(--ln-edge-1);
}
/* O X de fechar: o botão fantasma do sistema. */
.loja-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.05rem;
}
/* O ícone do cabeçalho num SLOT tingido (o .ui-dialog-media do guia), em
   tamanho pequeno pro cabeçalho em linha. */
.loja-slot-icone {
  --c: var(--ln-brand-text);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--ln-radius-slot);
  border: 2px solid var(--ln-outline-slot);
  outline: 2px solid var(--ln-frame-slot);
  outline-offset: -4px;
  background: color-mix(in srgb, var(--c) 14%, var(--ln-slot-fill));
  color: var(--c);
  font-size: 0.9375rem;
}
.loja-slot-icone--lg { width: 52px; height: 52px; font-size: 1.25rem; }
.loja-slot-icone--sucesso { --c: var(--ln-success-text); }
.loja-slot-icone--perigo { --c: var(--ln-danger-text); }
.loja-slot-icone--aviso { --c: var(--ln-warning-text); }
.loja-slot-icone--discord { --c: var(--ln-discord); }
/* O cabeçalho CENTRADO (ícone no slot + título + frase), o do .ui-dialog. */
.loja-dialogo-cabeca-centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 24px 20px;
  text-align: center;
  border-bottom: 1px solid var(--ln-edge-1);
}
.loja-dialogo-cabeca-centro .loja-slot-icone { margin-bottom: 6px; }
.loja-dialogo-cabeca-centro .loja-fechar { position: absolute; top: 10px; right: 10px; }
.loja-dialogo-desc { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ln-text-muted); }

/* A imagem do produto num SLOT (o quadro cinza de antes). */
.loja-slot-imagem {
  background: var(--ln-slot-fill);
  border: 2px solid var(--ln-outline-slot);
  outline: 2px solid var(--ln-frame-slot);
  outline-offset: -4px;
  border-radius: var(--ln-radius-slot);
  /* A imagem começa DEPOIS da moldura, sem passar por baixo dela (a
     "Opção 1" do dono, 12/10/2026: a moldura inteira em volta, como um
     quadro). Quem precisa de mais folga põe p-2, p-4... no HTML. */
  padding: 2px;
}
.loja-slot-imagem > img { border-radius: 2px; }

/* ============================================================
   CONTEÚDO DENTRO DA MOLDURA (a "Opção 1" do dono, 12/10/2026)
   A borda grossa das peças é a borda escura + a moldura clara por dentro.
   A moldura é translúcida: quando uma imagem ou um fundo colorido encosta
   na borda, ele aparecia POR BAIXO dela, e a borda parecia "afastada pra
   dentro", com o conteúdo vazando. Agora nada passa por baixo da moldura:
   - imagem em slot ganha 2px por dentro (.loja-slot-imagem, acima);
   - onde a moldura é desenhada POR CIMA do conteúdo (.ln-moldura-cima:
     tabelas, cards do RankUP, vídeo do Jogar, blog, chat), ela é SÓLIDA:
     a mesma cor que a translúcida dava sobre o fundo da peça
     (--ln-frame-op-*, no tokens.css);
   - as faixas coloridas de aviso começam depois da moldura.
   ============================================================ */
.ln-moldura-cima::before { border-color: var(--loja-moldura-op, var(--ln-frame-op-panel)); }
.ln-card.ln-moldura-cima { --loja-moldura-op: var(--ln-frame-op-card); }
.ln-card-raised.ln-moldura-cima,
.vt-tabela.ln-moldura-cima { --loja-moldura-op: var(--ln-frame-op-raised); }
.ln-slot.ln-moldura-cima,
.ln-slot-raised.ln-moldura-cima,
.rk-heroi.ln-moldura-cima { --loja-moldura-op: var(--ln-frame-op-slot); }
.ln-well.ln-moldura-cima { --loja-moldura-op: var(--ln-frame-op-well); }
.loja-tabela.ln-moldura-cima { --loja-moldura-op: var(--ln-frame-op-card); }
/* A faixa de 3px do alerta (.ln-alert, das peças) começa depois da moldura. */
.ln-alert::before { top: 2px; bottom: 2px; left: 2px; }
/* As LINHAS que cortam a peça de ponta a ponta (o border-b do título da
   categoria, os separadores do checkout, do diálogo...) passavam por baixo
   da moldura translúcida e apareciam dentro da borda (o dono viu,
   12/10/2026). Nas peças de fundo fixo a moldura também é sólida: a linha
   termina nela. */
.ln-panel,
.ui-dialog,
.loja-dialogo { outline-color: var(--ln-frame-op-panel); }
.ln-card { outline-color: var(--ln-frame-op-card); }
.ln-card-raised { outline-color: var(--ln-frame-op-raised); }
.loja-faq-item,
.loja-cartao { outline-color: var(--ln-frame-op-card2); }
.loja-navbar-painel { outline-color: var(--ln-frame-op-nav); }
/* O GIF do banner de cupom já vem com os cantos ARREDONDADOS no próprio
   arquivo (transparentes; 1914×431, curva de ~20px). Pra imagem ficar de
   canto reto (pedido do dono, 12/10/2026), ela cresce 7px do arquivo pra
   cada lado e o clip-path corta esses 7px — só o bastante pra curva sumir
   (~0,4% da largura). As margens em % contam sobre a LARGURA da caixa, por
   isso o mesmo valor serve em cima e dos lados. Um banner novo de canto reto
   só perde esses 7px da beirada.
   A MOLDURA continua redonda, acompanhando a borda de fora: o banner usa o
   raio do cartão (8px; no slot de 6px a curva de dentro ficava com 2px e
   parecia quadrada) e o recorte arredonda a imagem com o mesmo raio da
   beirada de dentro da moldura (8 - 2 da borda - 2 da moldura = 4px). */
.banner-cupom { border-radius: var(--ln-radius-card); }
.banner-cupom > img {
  --loja-banner-corte: calc(100% * 7 / 1900);
  display: block;
  width: calc(100% + 2 * var(--loja-banner-corte));
  max-width: none;
  margin: calc(-1 * var(--loja-banner-corte));
  border-radius: 0;
  clip-path: inset(calc(100% * 7 / 431) calc(100% * 7 / 1914) round calc(var(--ln-radius-card) - 4px));
}

/* ============================================================
   CARRINHO (o modal #dialog-cart do header.html)
   ============================================================ */
.loja-carrinho-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-card);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
}
@media (max-width: 639px) { .loja-carrinho-item { align-items: stretch; } }
.loja-carrinho-item-img {
  flex-shrink: 0;
  align-self: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  object-fit: contain;
}
.loja-carrinho-item-nome {
  margin: 0;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ln-text-fg);
}
.loja-carrinho-item-preco { margin: 2px 0 0; font-size: 0.875rem; font-weight: 700; color: var(--ln-brand-text); }
/* Quantidade: [-] [1] [+] com as peças pequenas. */
.loja-qtd { display: flex; align-items: center; gap: 6px; }
.loja-qtd-botao {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 0.6875rem;
}
.loja-qtd-botao:disabled { filter: saturate(0.4) brightness(0.75); cursor: not-allowed; }
.loja-qtd-campo {
  width: 2.5rem;
  height: 1.75rem;
  padding: 0 4px;
  text-align: center;
  font-size: 0.8125rem;
}
.loja-lixeira {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ln-text-muted);
  border-radius: var(--ln-radius-slot);
  transition: color 0.1s, background-color 0.1s;
}
.loja-lixeira:hover { color: var(--ln-danger-text); background: var(--ln-hover-veil); }

/* O BALÃOZINHO "Remover do carrinho?" (scripts/cart.js): aparece logo em cima
   do "–" quando o item tem 1 unidade — a confirmação pequena, sem modal por
   cima (pedido do dono, 12/10/2026). Um tom acima do item (o #30313A das
   peças do modal) e com sombra, pra não se misturar com o cartão do item; a
   setinha aponta pro meio do botão (--seta-x vem do JS). Embaixo do botão
   quando não cabe em cima (.is-embaixo). */
.loja-confirma-remover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10060;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 12px 14px;
  background: var(--ln-loja-modal-peca);
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transform-origin: var(--seta-x, 50%) 100%;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.loja-confirma-remover.is-embaixo { transform: translateY(-4px) scale(0.97); transform-origin: var(--seta-x, 50%) 0; }
.loja-confirma-remover.is-open { opacity: 1; transform: none; }
/* A SETINHA: dois triângulos — o de fora na cor da borda, colado na borda; o
   de dentro na cor do balão, um pouco acima — pra os 2px de borda contornarem
   a ponta sem emenda (o quadrado girado de antes deixava um degrau). */
.loja-confirma-remover::before,
.loja-confirma-remover::after {
  content: '';
  position: absolute;
  left: var(--seta-x, 50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 9px 9px 0;
  transform: translateX(-50%);
}
.loja-confirma-remover::before { top: calc(100% + 2px); border-top-color: var(--ln-outline); }
.loja-confirma-remover::after { top: calc(100% - 1px); border-top-color: var(--ln-loja-modal-peca); }
.loja-confirma-remover.is-embaixo::before,
.loja-confirma-remover.is-embaixo::after { top: auto; border-width: 0 9px 9px; border-top-color: transparent; }
.loja-confirma-remover.is-embaixo::before { bottom: calc(100% + 2px); border-bottom-color: var(--ln-outline); }
.loja-confirma-remover.is-embaixo::after { bottom: calc(100% - 1px); border-bottom-color: var(--ln-loja-modal-peca); }
.loja-confirma-remover-texto {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--ln-text-fg);
}
.loja-confirma-remover-botoes { display: flex; gap: 8px; }
.loja-confirma-remover-botoes > button {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .loja-confirma-remover { transition: none; }
}
/* O selo de % do item: âmbar, como no card. */
.loja-selo-desconto { --ln-badge-c: var(--ln-loja-destaque-texto); }

/* O vazio (carrinho sem nada): o ícone num slot grande, apagado. */
.loja-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 16px;
  text-align: center;
}
.loja-vazio .loja-slot-icone { --c: var(--ln-text-muted); margin-bottom: 14px; }
.loja-vazio-titulo { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--ln-text-fg); }
.loja-vazio-desc { max-width: 260px; margin: 4px 0 0; font-size: 0.875rem; color: var(--ln-text-muted); }

/* ============================================================
   PERGUNTAS FREQUENTES (pages/index.html)
   Cada pergunta é um CARTÃO; a aberta tem a borda clareada.
   ============================================================ */
/* O título "Perguntas Frequentes" (home, RankUP, Investidor) é montado só
   com utilitários no HTML: o ícone num .loja-slot-icone e o texto em
   text-xl/800, sem caixa alta (pedido do dono, 12/10/2026). */

.loja-faq-item {
  overflow: hidden;
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-card);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
  transition: border-color 0.12s;
}
.loja-faq-item:hover { border-color: var(--ln-selection); }
.loja-faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  color: var(--ln-text-fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.loja-faq-pergunta:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: -4px; border-radius: var(--ln-radius-card); }
.loja-faq-seta { flex-shrink: 0; font-size: 0.75rem; color: var(--ln-brand-500); transition: transform 0.25s; }
.loja-faq-resposta { height: 0; overflow: hidden; transition: height 0.25s ease; }
.loja-faq-resposta p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ln-text-secondary);
}
.loja-faq-resposta strong { color: var(--ln-text-fg); }

/* ============================================================
   PAGINAÇÃO (components/pagination.html)
   As páginas são peças cinza; a atual é a peça "ligada".
   ============================================================ */
.loja-pagina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
}
.loja-pagina.is-off { opacity: 0.45; pointer-events: none; }

/* ============================================================
   VARIAÇÕES (components/variations-list.html)
   Cada opção é uma linha-peça; a escolhida é a borda da marca com o miolo
   tingido (o mesmo jeito do card "Mais popular").
   ============================================================ */
.loja-variacao {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: start;
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-card);
  outline-offset: -4px;
  border-radius: var(--ln-radius-slot);
  color: var(--ln-text-fg);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.loja-variacao:hover { border-color: var(--ln-selection); }
.loja-variacao:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 2px; }
.loja-variacao[data-selected='true'] {
  border-color: var(--ln-brand-400);
  outline-color: color-mix(in srgb, var(--ln-brand-400) 40%, transparent);
  background: color-mix(in srgb, var(--ln-brand-500) 12%, var(--ln-surface-2));
}
.loja-variacao[data-selected='true'] .loja-variacao-preco { color: var(--ln-brand-text); }
/* Leves de olhar, mas no sistema (pedido do dono, 12/10/2026): a peça com
   moldura + o ícone num slot com moldura pesava (três bordas duplas uma
   dentro da outra), e a versão de borda fininha fugia do visual novo. Cada
   opção continua a PEÇA (fundo 2 sólido e a borda escura de 2px), mas SEM a
   moldura de dentro; a moldura só aparece na escolhida, no roxo do
   "ligado" (.loja-variacao[data-selected], acima). */
.loja-variacao--compacta,
.loja-variacao--cheia { outline-color: transparent; }
.loja-variacao--compacta { min-height: 44px; gap: 10px; padding: 4px 12px; }
.loja-variacao--cheia { min-height: 60px; gap: 12px; padding: 8px 14px; }
/* O ícone ou a imagem pequena num SLOT LISO: o miolo escuro do slot, sem a
   borda preta nem a moldura (o ícone da variação e a imagem do topo da
   janelinha "Variações disponíveis"). */
.loja-slot-liso {
  background: var(--ln-slot-fill);
  border-radius: var(--ln-radius-slot);
}
.loja-variacao-preco { color: var(--ln-text-fg); }
/* "No carrinho": a mesma linha do estoque, no laranja da loja. Não é selo
   com borda: o selo era mais alto que a linha de estoque e deixava o
   cartão da variação no carrinho mais alto que os vizinhos (o dono viu no
   modal e na lista do produto, 12/10/2026). */
.loja-no-carrinho { color: var(--ln-loja-destaque-texto); }
/* A lista COMPACTA (a coluna estreita do diálogo) não mora mais num poço:
   o poço escuro em volta das peças era o que mais pesava ali. As opções
   ficam empilhadas direto no diálogo (gap no HTML). */

/* O MODAL DO PRODUTO e a JANELINHA DE VARIAÇÃO nas cores do tema original
   (pedido do dono, 12/10/2026: a migração tinha escurecido o modal, e a
   paleta não muda). O fundo é o --accent antigo; as linhas de variação, um
   tom acima (o cartão das descrições); o quadro da imagem e os ícones, o
   cinza-azulado de antes (tokens --ln-loja-modal-*). Só esses dois: os
   outros diálogos (carrinho, login) seguem no painel do sistema. */
[data-package-dialog].loja-dialogo,
[data-variation-picker].loja-dialogo {
  background: var(--ln-loja-modal);
  outline-color: var(--ln-loja-modal-moldura);
}
:is([data-package-dialog], [data-variation-picker]) .loja-variacao { background: var(--ln-loja-modal-peca); }
:is([data-package-dialog], [data-variation-picker]) .loja-variacao[data-selected='true'] {
  background: color-mix(in srgb, var(--ln-brand-500) 14%, var(--ln-loja-modal-peca));
}
:is([data-package-dialog], [data-variation-picker]) .loja-slot-liso,
[data-package-dialog] .loja-slot-imagem { background: var(--ln-loja-modal-imagem); }

/* ============================================================
   RODAPÉ (components/footer.html)
   ============================================================ */
/* O ESPAÇO PADRÃO entre a página e o rodapé é este margin-top, o mesmo em
   todas as páginas (pedido do dono, 12/10/2026). Por isso as páginas NÃO
   põem espaço embaixo (nada de pb-*, py-*, mb-* ou min-h-screen no fim):
   o último bloco termina e o rodapé vem 48px depois. */
.loja-rodape {
  margin-top: 48px;
  background: var(--ln-surface-1);
  border-top: 2px solid var(--ln-outline-slot);
  box-shadow: inset 0 2px 0 0 var(--ln-frame-nav);
}
.loja-rodape-texto { font-size: 0.875rem; line-height: 1.6; color: var(--ln-text-muted); }
.loja-rodape-legal { font-size: 0.75rem; color: var(--ln-text-quaternary); }
.loja-rodape-assinatura { font-size: 0.875rem; font-weight: 600; color: var(--ln-text-muted); }

/* ============================================================
   AVISOS (Toastify): o alerta do sistema — um painel com a faixa de 3px
   colada à esquerda (verde = deu certo, vermelho = erro). Antes era a
   pílula verde/vermelha chapada.
   ============================================================ */
.toastify {
  --toast-c: var(--ln-success);
  max-width: 520px !important;
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 19px !important;
  overflow: hidden;
  background: var(--ln-surface-2) !important;
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-panel);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card) !important;
  box-shadow: none !important;
  color: var(--ln-text-fg) !important;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
}
.toastify::before {
  content: '';
  position: absolute;
  top: 2px; /* depois da moldura, sem passar por baixo dela */
  bottom: 2px;
  left: 2px;
  width: 3px;
  background: var(--toast-c);
}
.toastify.error { --toast-c: var(--ln-danger); }
.toastify .toast-close {
  color: var(--ln-text-muted);
  opacity: 1;
  padding: 0 2px;
  font-size: 1.1rem;
}
.toastify .toast-close:hover { color: var(--ln-text-fg); }
.toastify .toast-body i { color: var(--toast-c); }

/* ============================================================
   NOTIFICAÇÃO DE COMPRA (scripts/purchase-notif.js)
   O mesmo alerta, com a faixa na cor da marca.
   ============================================================ */
.purchase-notif__container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}
.purchase-notif__box {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 0;
  max-width: 310px;
  padding: 8px 12px 8px 14px;
  overflow: hidden;
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-panel);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
  opacity: 0;
  transform: translateX(-100%);
}
.purchase-notif__box::before {
  content: '';
  position: absolute;
  top: 2px; /* depois da moldura, sem passar por baixo dela */
  bottom: 2px;
  left: 2px;
  width: 3px;
  background: var(--ln-brand-500);
}
.purchase-notif__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-sm);
  background: var(--ln-brand-500);
  box-shadow: inset 0 2px 0 0 var(--ln-brand-bevel-top), inset 0 -2px 0 0 var(--ln-brand-bevel-bottom);
}
.purchase-notif__icon-svg { width: 12px; height: 12px; }
.purchase-notif__text-area {
  flex-grow: 1;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ln-text-muted);
}
.purchase-notif__text-area strong { font-weight: 700; color: var(--ln-text-fg); }
.purchase-notif__timer { font-size: 9px; font-weight: 700; color: var(--ln-loja-destaque-texto); }
.purchase-notif__animate-in { animation: purchaseNotifSlideIn 0.4s ease forwards; }
.purchase-notif__animate-out { animation: purchaseNotifFadeOut 0.4s ease forwards; }
@keyframes purchaseNotifSlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes purchaseNotifFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================================
   DISCORD: o botão flutuante e o modal de suporte
   (components/discord-float.html). O botão é a peça do sistema na cor do
   Discord (sem subir no hover); o modal é o diálogo do sistema.
   ============================================================ */
.discord-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99;
}
.discord-float .icon {
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 26px;
  border-radius: var(--ln-radius-card);
}
.discord-float .loja-dica { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; transform: none; }
.discord-float:hover .loja-dica { opacity: 1; visibility: visible; transition: opacity 0.15s, visibility 0s; }

.discord-modal { display: none; }
.discord-modal.is-open,
.discord-modal.is-closing { display: block; }
.discord-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--ln-overlay);
}
.discord-modal__container {
  width: 95vw;
  max-width: 420px;
  overflow: hidden;
}
.discord-modal.is-open .discord-modal__overlay { animation: lojaFundoEntra 240ms cubic-bezier(0.33, 1, 0.68, 1); }
.discord-modal.is-open .discord-modal__container { animation: lojaCaixaEntra 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.discord-modal.is-closing .discord-modal__overlay { animation: lojaFundoSai 180ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.discord-modal.is-closing .discord-modal__container { animation: lojaCaixaSai 180ms cubic-bezier(0.4, 0, 1, 1) forwards; }
/* Os passos: o número num slot pequeno tingido do Discord. */
.loja-passos { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.loja-passo { display: flex; align-items: flex-start; gap: 12px; }
.loja-passo-num {
  --c: var(--ln-discord);
  width: 28px;
  height: 28px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.loja-passo-texto { margin: 3px 0 0; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--ln-text-body); }
.loja-passo-sub { margin: 2px 0 0; font-size: 0.8125rem; color: var(--ln-text-muted); }
.loja-canal {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: var(--ln-radius-sm);
  background: var(--ln-surface-3);
  color: var(--ln-text-fg);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Entrada e saída dos diálogos (as mesmas curvas do .ui-dialog do guia). */
@keyframes lojaFundoEntra { from { opacity: 0; } }
@keyframes lojaFundoSai { to { opacity: 0; } }
@keyframes lojaCaixaEntra { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes lojaCaixaSai { to { opacity: 0; transform: translateY(6px) scale(0.99); } }
/* Quem pediu menos movimento no sistema recebe só o fade. */
@media (prefers-reduced-motion: reduce) {
  .discord-modal.is-open .discord-modal__container { animation-name: lojaFundoEntra; }
  .discord-modal.is-closing .discord-modal__container { animation-name: lojaFundoSai; }
}

/* (O resto — o pós-compra, a conta/blog e as páginas institucionais — está
   em styles/loja-paginas.css: a CentralCart limita cada arquivo a 64 KB.) */