/* ============================================
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-destaque: #b42318;
--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 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: var(--loja-fundo); 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; }
/* ============================================
TEMA DO DONO — raio, fonte e logo.
Raio e fonte NÃO são valor vindo do banco: são classe de um enum fechado
(ver Loja::Tema). É por isso que "12px; background:url("x")" não tem por onde
entrar — o valor do dono nunca vira CSS, só escolhe qual regra daqui vale.
============================================ */
.loja--raio-reto { --loja-raio: 2px; }
.loja--raio-suave { --loja-raio: 12px; }
.loja--raio-redondo { --loja-raio: 22px; }
/* `body.` na frente porque `body.loja` (que define a fonte padrão) tem
especificidade 0,1,1: uma classe sozinha perderia a disputa e o dono trocaria
a fonte sem nada acontecer na tela. */
body.loja--fonte-sistema {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Stacks LOCAIS: nada de pro Google Fonts. Meio segundo de tela branca
no 3G é caro numa loja que abre pelo link do WhatsApp. */
body.loja--fonte-serif {
font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
}
body.loja--fonte-condensada {
font-family: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", Impact, sans-serif;
letter-spacing: .2px;
}
/* Teto em altura, nunca em largura: logo largo espremido some, logo alto
empurra o carrinho pra fora da primeira dobra. */
.loja-topo__logo { max-height: 40px; width: auto; object-fit: contain; }
/* ============================================
PREÇO PROMOCIONAL E URGÊNCIA (consumido pela vitrine — Fatia 2)
============================================ */
/* O "de R$" é secundário DE PROPÓSITO: o número que decide a compra é o que se
paga hoje. Preço riscado do mesmo tamanho do preço vigente confunde. */
.loja-card__preco-de,
.loja-produto__preco-de {
color: var(--loja-tinta-fraca);
font-size: 13px;
font-weight: 600;
text-decoration: line-through;
margin: 0;
}
.loja-produto__preco-de { font-size: 15px; }
.loja-preco-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.loja-selo {
display: inline-block;
background: var(--loja-destaque);
color: #fff;
border-radius: 999px;
padding: 1px 8px;
font-size: 12px;
font-weight: 800;
line-height: 1.6;
white-space: nowrap;
}
/* Escassez só quando ela é VERDADE (1..3 no estoque, ver Product). Frase de
urgência permanente é a que ninguém acredita mais. */
.loja-card__ultimas,
.loja-produto__ultimas {
color: var(--loja-destaque);
font-size: 12px;
font-weight: 700;
margin: 0;
}
/* ============================================
AVISOS DA LOJA (consumido pelos slots — Fatia 5)
============================================ */
/* Faixa do topo: dentro do fluxo, nunca `position: fixed`. Faixa fixa come a
primeira dobra do celular, que é onde o produto tem que estar. */
.loja-banner {
background: var(--loja-cor);
color: #fff;
padding: 10px 0;
font-size: 14px;
}
.loja-banner__linha { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
/* O partial escreve titulo, corpo e cupom DENTRO de um só (`__texto`): um
parágrafo por faixa é o que mantém a leitura em voz alta na ordem certa. */
.loja-banner__texto { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.loja-banner__titulo { font-weight: 800; margin: 0; }
.loja-banner__corpo { margin: 0; opacity: .92; }
.loja-banner__cta {
color: inherit; font-weight: 800; text-decoration: underline;
min-height: 40px; display: inline-flex; align-items: center;
}
.loja-banner__cupom {
border: 1px dashed currentColor; border-radius: 6px;
padding: 1px 8px; font-weight: 800; letter-spacing: .5px;
}
/*