/* ============================================
   LOJA — a vitrine pública do CLIENTE.

   Folha isolada de propósito: não importa nada de application/dashboard, e
   nenhum token daqui vaza pra lá. A loja é servida no domínio do cliente e não
   pode herdar a marca do Giants num deploy que ninguém pediu.

   MOBILE PRIMEIRO: a maioria entra pelo link do WhatsApp, no celular, em rede
   ruim. Layout de uma coluna é o padrão; o desktop é que ganha exceção.
   ============================================ */

:root {
  --loja-cor: #111111;
  --loja-fundo: #ffffff;
  --loja-tinta: #16181d;
  --loja-tinta-fraca: #666c78;
  --loja-borda: #e4e6ea;
  --loja-raio: 12px;
}

* { box-sizing: border-box; }

body.loja {
  margin: 0;
  background: var(--loja-fundo);
  color: var(--loja-tinta);
  /* Fonte do sistema: sem CDN. Um <link> pro Google Fonts é meio segundo de
     tela branca no 3G — e a loja abre no celular do cliente, não no nosso. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.loja-wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.loja-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.loja-skip {
  position: absolute; left: -9999px;
}
.loja-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }

/* ---- topo ---- */
.loja-topo { border-bottom: 1px solid var(--loja-borda); background: #fff; position: sticky; top: 0; z-index: 5; }
.loja-topo__linha { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
.loja-topo__marca { font-weight: 800; font-size: 18px; text-decoration: none; color: var(--loja-cor); }
.loja-topo__carrinho { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.loja-badge {
  background: var(--loja-cor); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 13px; font-weight: 700;
}

/* ---- avisos ---- */
.loja-flash { border-radius: var(--loja-raio); padding: 12px 14px; margin: 16px 0; font-weight: 600; }
.loja-flash--ok  { background: #eaf7ee; color: #1c6b35; }
.loja-flash--erro { background: #fdecec; color: #a12626; }
.loja-aviso { color: var(--loja-tinta-fraca); font-size: 14px; }

/* ---- vitrine ---- */
.loja-hero { padding: 28px 0 8px; }
.loja-hero h1 { margin: 0 0 6px; font-size: 26px; color: var(--loja-cor); }
.loja-hero p { margin: 0; color: var(--loja-tinta-fraca); }

.loja-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.loja-input {
  font: inherit; padding: 12px; border: 1px solid var(--loja-borda);
  border-radius: var(--loja-raio); background: #fff; color: inherit;
  flex: 1 1 160px; min-width: 0;
}
.loja-input--num { flex: 0 0 84px; text-align: center; }

.loja-resultado, .loja-vazio, .loja-voltar { color: var(--loja-tinta-fraca); }
.loja-secao { font-size: 20px; margin: 24px 0 12px; }

/* Duas colunas já no celular: card grande demais esconde o segundo produto e
   faz a pessoa achar que a loja tem um item só. */
.loja-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .loja-grade { grid-template-columns: repeat(4, 1fr); } }

.loja-card { border: 1px solid var(--loja-borda); border-radius: var(--loja-raio); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.loja-card__link { text-decoration: none; color: inherit; }
.loja-card__foto, .loja-produto__foto {
  aspect-ratio: 1 / 1; background: #f4f5f7; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.loja-card__sem-foto { font-weight: 800; color: #b4b8c1; font-size: 22px; }
.loja-card__nome { font-size: 14px; margin: 6px 0 0; font-weight: 600; }
.loja-card__preco { margin: 0; font-weight: 800; color: var(--loja-cor); }
.loja-card__form { margin-top: auto; }

/* ---- produto ---- */
.loja-produto { display: grid; gap: 16px; margin: 16px 0; }
@media (min-width: 700px) { .loja-produto { grid-template-columns: 1fr 1fr; align-items: start; } }
.loja-produto h1 { font-size: 22px; margin: 0 0 8px; }
.loja-produto__preco { font-size: 24px; font-weight: 800; color: var(--loja-cor); margin: 0 0 12px; }
.loja-produto__descricao { color: var(--loja-tinta-fraca); }
.loja-produto__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }

/* ---- botões: alvo de 48px porque isto é dedo em celular ---- */
.loja-btn {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--loja-cor); border-radius: var(--loja-raio);
  background: var(--loja-cor); color: #fff;
  padding: 12px 16px; min-height: 48px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.loja-btn--cheio { width: 100%; }
.loja-btn--fraco { background: #fff; color: var(--loja-cor); }
.loja-btn--texto { background: none; border: none; color: var(--loja-tinta-fraca); text-decoration: underline; padding: 8px; min-height: 40px; }
.loja-link-wa { font-weight: 700; }

/* ---- carrinho ---- */
.loja-itens { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.loja-item {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--loja-borda); border-radius: var(--loja-raio); padding: 12px;
}
.loja-item__nome { display: flex; flex-direction: column; }
.loja-item__unit { color: var(--loja-tinta-fraca); font-size: 14px; }
.loja-item__qtd { display: flex; gap: 6px; align-items: center; }
.loja-item__qtd .loja-btn { min-height: 40px; padding: 8px 12px; }
.loja-item__total { font-weight: 800; }

.loja-resumo { border: 1px solid var(--loja-borda); border-radius: var(--loja-raio); padding: 14px; margin: 16px 0; }
.loja-resumo p { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.loja-resumo__total { font-size: 19px; border-top: 1px solid var(--loja-borda); padding-top: 10px; }
.loja-resumo--compacto p { font-size: 15px; }

.loja-acoes { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

/* ---- checkout ---- */
.loja-form { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.loja-form label { font-weight: 600; margin-top: 10px; }
.loja-form__pagamento { border: 1px solid var(--loja-borda); border-radius: var(--loja-raio); margin: 14px 0; }
.loja-form__pagamento label { display: block; font-weight: 400; margin: 6px 0; }

.loja-ok { text-align: center; padding: 24px 0 8px; }
.loja-ok h1 { color: var(--loja-cor); margin-bottom: 6px; }
.loja-pix { border: 1px dashed var(--loja-cor); border-radius: var(--loja-raio); padding: 14px; margin: 16px 0; }
.loja-pix__chave { font-size: 18px; font-weight: 800; word-break: break-all; }

/* ---- rodapé ---- */
.loja-rodape { border-top: 1px solid var(--loja-borda); margin-top: 40px; padding: 24px 0 40px; color: var(--loja-tinta-fraca); font-size: 14px; }
.loja-rodape__nome { font-weight: 700; color: var(--loja-tinta); margin: 0 0 4px; }
.loja-rodape__links { display: flex; gap: 16px; }

.loja-paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0; }
.loja-vertudo { margin: 20px 0; }

/* ESGOTADO + "avise quando chegar". O selo é discreto de propósito: o item
   continua na prateleira pelo SEO e pelo sinal de demanda, mas não pode
   competir com o que está disponível pra comprar agora. */
.loja-card__esgotado,
.loja-produto__esgotado { font-weight: 700; color: #a33; margin: 0 0 8px; }
.loja-aviso { display: grid; gap: 6px; }
.loja-aviso__form { display: grid; gap: 6px; }
.loja-aviso__ok { font-weight: 700; color: #1a7f37; margin: 0; }
.loja-aviso__erro:empty { display: none; }
.loja-aviso__erro { color: #a33; margin: 0; font-size: 14px; }
.loja-aviso__nota { font-size: 12px; opacity: .7; margin: 0; }