/* =============================================================
   Trinity ERP · loja online publica

   Marca branca: tudo neutro, e so o ACENTO e da loja. A cor chega por
   `/marca.css` (services/marca.js), que a pagina carrega por ultimo e que
   sobrepoe os `--acento*` daqui. Os valores abaixo sao o indigo padrao.

   UM TEMA SO, o claro, por decisao do dono. O ERP tem claro e escuro porque
   quem trabalha nele passa o turno inteiro ali; quem compra nao escolhe tema, e
   loja que muda de cor sozinha conforme o celular do cliente confunde mais do
   que agrada.

   A letra em cima do botao de acao e `--acento-texto`, que o servidor escolhe
   (branca ou escura) pelo contraste com a cor da loja. `--acento-escrito` e o
   acento que se le como texto sobre o branco.
   ============================================================= */

:root {
  /* O topo da loja e preto, e a logo da loja vai em cima dele. */
  --preto: #121214;
  --preto-2: #26262B;
  --grafite: #3C3C42;

  /* Acao: o indigo padrao, sobreposto por /marca.css */
  --acento: #4F46E5;
  --acento-forte: #463ECA;
  --acento-suave: #EDEDFC;
  --acento-texto: #FFFFFF;
  --acento-escrito: #4F46E5;

  --bg: #FAFAFA;
  --card: #FFFFFF;
  --texto: #18181B;
  --texto-light: #55555C;
  --texto-fraco: #8A8A92;
  --border: #E7E7EA;
  --border-forte: #D6D6DA;
  --areia: #F4F4F5;

  --sucesso: #15703C;
  --alerta: #AB8B0D;
  --erro: #AC1808;

  /* Nomes antigos que telas e componentes ainda pedem. Mantidos apontando
     para a paleta nova, para nao sobrar var() sem valor em lugar nenhum. */
  --azul-noite: var(--preto);
  --azul-noite-2: var(--preto-2);
  --azul-escuro: #08080A;
  --ambar: var(--acento);
  --ambar-2: var(--acento-forte);
  --gelo: #E7E7EA;

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 8px 30px rgba(14, 14, 16, .10);
  --shadow-sm: 0 2px 10px rgba(14, 14, 16, .07);
  --max: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ------- Tipografia ------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; }

.eyebrow {
  display: inline-block; font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: 12px;
}

/* ------- Botoes ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer;
  transition: background .16s, color .16s, transform .16s, border-color .16s;
}
.btn-ambar { background: var(--acento); color: var(--acento-texto); }
.btn-ambar:hover { background: var(--ambar-2); transform: translateY(-2px); }

.btn-escuro { background: var(--azul-noite); color: #fff; }
.btn-escuro:hover { background: var(--azul-escuro); transform: translateY(-2px); }

.btn-linha { background: transparent; color: var(--azul-noite); border-color: var(--azul-noite); }
.btn-linha:hover { background: var(--azul-noite); color: #fff; transform: translateY(-2px); }

.btn-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-claro:hover { background: #fff; color: var(--azul-noite); }

.btn-bloco { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ------- Header ------- */
.topbar {
  background: var(--azul-escuro); color: rgba(255, 255, 255, .8);
  font-size: .82rem; padding: 7px 0;
}
.topbar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .espaco { flex: 1; }
.topbar .aberto { color: #7EE2A8; font-weight: 600; }
.topbar .fechado { color: #FCA5A5; font-weight: 600; }

.header {
  background: var(--azul-noite); color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.header .container { display: flex; align-items: center; gap: 20px; height: 68px; }
.header .marca {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; gap: 10px;
}
.header .marca .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ambar); display: grid; place-items: center; font-size: 1rem;
}
.header .espaco { flex: 1; }

/* ------- Secoes ------- */
.secao { padding: clamp(48px, 8vw, 88px) 0; }
.secao-clara { background: var(--areia); }
.secao-escura { background: var(--azul-noite); color: #fff; }
.secao-escura .eyebrow { color: var(--ambar); }
.secao-cabecalho { margin-bottom: 34px; }
.secao-cabecalho p { color: var(--texto-light); margin-top: 8px; max-width: 60ch; }
.secao-escura .secao-cabecalho p { color: rgba(255, 255, 255, .72); }

/* ------- Card de produto ------- */
.grade-produtos {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.card-produto {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.card-produto:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-produto .foto {
  aspect-ratio: 1; background: var(--areia);
  display: grid; place-items: center; position: relative;
}
.card-produto .foto img { width: 100%; height: 100%; object-fit: cover; }
.card-produto .corpo { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.card-produto .nome { font-weight: 600; font-size: .96rem; line-height: 1.3; }
.card-produto .unidade { font-size: .8rem; color: var(--texto-light); }
.card-produto .preco {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums;
}
.card-produto .preco .antes {
  font-size: .85rem; font-weight: 500; color: var(--texto-light);
  text-decoration: line-through; margin-right: 6px;
}

.selo-flutuante {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--acento); color: var(--acento-texto);
}
.selo-flutuante.esgotado { background: var(--texto-light); }
.selo-flutuante.ultimas { background: var(--alerta); }
/* Frete gratis fica a DIREITA: o produto pode ser retornavel e ter frete
   gratis ao mesmo tempo, e dois selos no mesmo canto se cobririam. */
.selo-flutuante.selo-frete { left: auto; right: 10px; background: var(--sucesso); color: #fff; }

/* ------- Sugestao no checkout -------
   Uma linha discreta, dispensavel, fora do caminho do botao de finalizar.
   Nunca modal, nunca tela intersticial. Se o cliente ignorar, some. */
.sugestao {
  background: var(--areia); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
  margin: 16px 0;
}
.sugestao .cabecalho {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sugestao .titulo { font-size: .86rem; font-weight: 600; color: var(--texto-light); }
.sugestao .espaco { flex: 1; }
.sugestao .dispensar {
  background: none; border: 0; cursor: pointer;
  color: var(--texto-light); font-size: 1.1rem; line-height: 1; padding: 2px 4px;
}
.sugestao .dispensar:hover { color: var(--texto); }
.sugestao .itens { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.sugestao .item {
  flex-shrink: 0; width: 130px;
  background: var(--card); border-radius: var(--radius-sm); padding: 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.sugestao .item .nome { font-size: .8rem; font-weight: 500; line-height: 1.25; }
.sugestao .item .preco { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sugestao .item .add {
  border: 1px solid var(--border); background: transparent; border-radius: 999px;
  padding: 5px; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--azul-noite);
}
.sugestao .item .add:hover { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }

/* ------- Rodape ------- */
.rodape { background: var(--azul-escuro); color: rgba(255, 255, 255, .68); padding: 44px 0 26px; }
.rodape a:hover { color: var(--ambar); }
.rodape .colunas {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rodape h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.rodape .creditos {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; text-align: center;
}

@media (max-width: 640px) {
  .header .container { height: 58px; gap: 12px; }
  .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ------- Carrossel de fotos -------
   Uma foto so nao vira carrossel: sem seta e sem bolinha. Controle que nao faz
   nada atrapalha mais do que ajuda. */
.carrossel {
  position: relative; overflow: hidden;
  aspect-ratio: 1; background: var(--areia);
  border-radius: var(--radius) var(--radius) 0 0;
}
.carrossel:focus-visible { outline: 3px solid var(--ambar); outline-offset: -3px; }
.carrossel.vazio {
  display: grid; place-items: center;
  color: var(--texto-light); font-size: .82rem;
}

.carrossel-trilho {
  display: flex; height: 100%;
  transition: transform .28s cubic-bezier(.3, .8, .3, 1);
}
.carrossel-slide { flex: 0 0 100%; height: 100%; }
.carrossel-slide img { width: 100%; height: 100%; object-fit: cover; }

.carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--azul-noite);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .15s, background .15s;
}
.carrossel:hover .carrossel-seta,
.carrossel:focus-within .carrossel-seta { opacity: 1; }
.carrossel-seta:hover { background: #fff; }
.carrossel-seta.anterior { left: 8px; }
.carrossel-seta.proxima { right: 8px; }

/* No celular nao ha hover, e o dedo arrasta. As setas ficam sempre visiveis
   mas discretas, para quem preferir tocar. */
@media (hover: none) {
  .carrossel-seta { opacity: .85; }
}

.carrossel-pontos {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 5px;
}
.carrossel-ponto {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .6); cursor: pointer;
  transition: background .15s, width .15s;
  box-shadow: 0 0 0 1px rgba(15, 29, 46, .18);
}
.carrossel-ponto.ativo { background: #fff; width: 16px; border-radius: 3px; }

/* O detalhe do produto usa a versao grande e nao corta a imagem: o cliente
   precisa ver o rotulo inteiro para saber que e o produto certo. */
.carrossel.detalhe { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.carrossel.detalhe .carrossel-slide img { object-fit: contain; background: #fff; }
.carrossel.detalhe .carrossel-seta { width: 40px; height: 40px; font-size: 24px; opacity: 1; }

/* ------- Caixa de marcar da vitrine (18/09/26, pedido do dono) -------
   O mesmo desenho do ERP (components.css), com as cores da vitrine: a caixa
   nativa do navegador destoava. So nas duas caixas que a vitrine tem ("Salvar
   este endereço" no checkout e "Usar como favorito" na conta), e nao em todo
   input: as escolhas de entrega e pagamento sao radios escondidos dentro de
   cartoes, e uma regra global desenharia uma bolinha em cima deles. */
.marcador-salvar input[type="checkbox"],
.ct-marcador input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  width: 20px; height: 20px; margin: 0;
  background: var(--card);
  border: 1.5px solid var(--texto-fraco);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.marcador-salvar input[type="checkbox"]::before,
.ct-marcador input[type="checkbox"]::before {
  content: '';
  width: 5px; height: 10px;
  border: solid var(--acento-texto);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform .12s ease-out;
}
.marcador-salvar input[type="checkbox"]:checked,
.ct-marcador input[type="checkbox"]:checked {
  background: var(--acento);
  border-color: var(--acento);
}
.marcador-salvar input[type="checkbox"]:checked::before,
.ct-marcador input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(45deg) scale(1); }
.marcador-salvar input[type="checkbox"]:focus-visible,
.ct-marcador input[type="checkbox"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.marcador-salvar input[type="checkbox"]:disabled,
.ct-marcador input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }

/* CEP na vitrine (24-09-26): a frase da consulta embaixo do campo. Vale para o
   checkout e para Minha conta. */
/* Com `.campo` na frente: o `.campo .dica` do loja.css vem depois e empataria. */
.dica.cep-ok, .campo .dica.cep-ok { color: var(--sucesso); }
.dica.cep-erro, .campo .dica.cep-erro { color: var(--erro); }
/* O ambar da marca nao se le em letra pequena: o aviso usa o tom do .aviso.info. */
.dica.cep-aviso, .campo .dica.cep-aviso { color: #7C4A03; }