/* =====================================================================
   VITRINE PÚBLICA — o estilo que o CLIENTE DA LOJA vê.
   Não reusa app.css: aquele é o painel do ERP, com densidade de quem
   trabalha o dia inteiro na tela. Aqui é celular, dedo e pressa.
   ===================================================================== */

:root {
  /* ⚠️ Estes são só os PADRÕES. As cores de verdade são as da loja e chegam num
     <style> injetado pelo vitrine_topo, a partir de cfg_vitrine (db/151). Cor de
     loja NÃO mora em arquivo CSS: o módulo é vendável, e a segunda loja a contratar
     ficaria com a cara da primeira. */
  --vt-primaria: #0d3b66;
  --vt-primaria-txt: #ffffff;
  --vt-secundaria: #0d3b66;
  --vt-secundaria-txt: #ffffff;
  --vt-secundaria-escura: #092c4d;
  --vt-destaque: #c0392b;
  --vt-destaque-txt: #ffffff;

  --vt-borda: #e6e9ef;
  --vt-texto: #1e293b;
}

.vt-body {
  background: #f6f7f9;
  color: var(--vt-texto);
}

/* ------------------------------------------------------------- topo */

/* 🔴 O CABEÇALHO É AMARELO (primária), não azul — e isso é o oposto do que eu tinha
   feito. A identidade da Soluções Ferragens é AMARELO-dominante: no site
   institucional o `header.site-header` tem fundo primário com borda inferior azul de
   6 px, e o hero é um gradiente amarelo. O azul é ESTRUTURA (botões, rodapé, preço),
   não o protagonista. Com o azul no topo a vitrine virava um site genérico que não
   parecia da mesma empresa — apontado pelo Edmar em 28/08/2026.
   ⚠️ O texto vem de `--vt-primaria-txt`, que o cálculo de luminância resolve como
   ESCURO sobre o amarelo. Chumbar branco aqui deixaria o cabeçalho ilegível. */
.vt-topo {
  background: var(--vt-primaria);
  color: var(--vt-primaria-txt);
  /* A borda azul é a assinatura do cabeçalho da fachada — mesma medida do site. */
  border-bottom: 6px solid var(--vt-secundaria);
  position: sticky;              /* a busca e o carrinho seguem a rolagem */
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

/* Faixa fina azul acima do cabeçalho, como a `.brand-strip` do site. Dá o mesmo
   "peso" de marca e separa a vitrine do topo do navegador. */
.vt-strip {
  background: var(--vt-secundaria);
  color: var(--vt-secundaria-txt);
  text-align: center;
  font-weight: 600;
  letter-spacing: .07em;
  font-size: .78rem;
  padding: .3rem 0;
}

.vt-marca { color: var(--vt-primaria-txt); font-weight: 700; font-size: 1.05rem; }
.vt-marca-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.vt-logo { height: 42px; width: auto; }
/* ⚠️ SEM chip branco atrás da logo. Ele existia para garantir contraste de uma
   logo qualquer sobre a barra colorida, mas logo com fundo transparente dentro de
   um retângulo branco vira ADESIVO colado no cabeçalho — foi o que apareceu no
   teste lado a lado. Logo é da loja e já vem com as cores dela; quem precisa
   garantir contraste é a escolha da cor da barra, em /config/vitrine. */
.vt-busca { max-width: 30rem; flex: 1 1 12rem; }
.vt-carrinho-btn { white-space: nowrap; }

/* No celular a busca ganha a linha inteira: espremida ao lado da marca ela
   fica com ~6rem e não cabe nem "parafuso". */
@media (max-width: 575.98px) {
  .vt-topo .container { flex-wrap: wrap; }
  .vt-busca { order: 3; flex-basis: 100%; max-width: none; margin: .35rem 0 .15rem; }
  .vt-marca-nome { max-width: 55vw; }
}

/* -------------------------------------------------------- chamada */

.vt-chamada {
  background: #fff;
  border: 1px solid var(--vt-borda);
  border-radius: .75rem;
  padding: 1rem 1.15rem;
}

/* ----------------------------------------------------- categorias */

.vt-cats { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.vt-cat {
  flex: 0 0 auto;
  padding: .3rem .8rem;
  border: 1px solid var(--vt-borda);
  border-radius: 2rem;
  background: #fff;
  color: var(--vt-texto);
  text-decoration: none;
  font-size: .9rem;
}
.vt-cat.ativa { background: var(--vt-secundaria); border-color: var(--vt-secundaria);
               color: var(--vt-secundaria-txt); }

/* --------------------------------------------------------- cards */

.vt-card {
  background: #fff;
  border: 1px solid var(--vt-borda);
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vt-card-foto { display: block; background: #fff; }
/* aspect-ratio + object-fit: contain — foto de ferragem vem em proporção
   qualquer, e `cover` cortaria justamente a ponta da broca que identifica
   o produto. O quadrado fixo é o que mantém a grade alinhada. */
.vt-card-foto img,
.vt-ficha-foto img {
  width: 100%;
  /* ⚠️ `height: auto` é OBRIGATÓRIO aqui. As tags trazem width="500" height="500"
     para reservar o espaço e o texto não pular enquanto a foto carrega — e esse
     `height` do HTML é uma dica de apresentação que VENCE o `aspect-ratio` quando a
     altura fica resolvida. Sem esta linha a foto virava 304×500, o card ia a 691 px
     e o celular mostrava um produto por tela (medido em 28/08/2026). */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

/* ⚠️ Teto de altura: sem ele a foto acompanha a largura da coluna e, num monitor
   grande, o card passava de 600 px — um produto por tela de celular e três por tela
   de desktop (Edmar, 28/08/2026). Com `contain`, a imagem só encolhe; nada é
   cortado. O quadrado continua valendo enquanto a coluna for mais estreita que o teto. */
.vt-card-foto img { max-height: 190px; }
.vt-ficha-foto img { max-height: 380px; }

.vt-card-corpo { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; flex: 1 1 auto; }

.vt-card-nome {
  color: var(--vt-texto);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.25;
  /* 3 linhas e reticências: as descrições do ERP são longas e sem padrão
     ("PARAFUSO SEXTAVADO 5/16 X 2.1/2 ZINCADO C/ PORCA"), e sem o corte
     cada card ganha uma altura diferente. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserva 2 linhas, e não 3: alinha o preço entre os cards da mesma fileira sem
     deixar um buraco embaixo do nome de uma linha só. Com a foto compacta o vazio
     ficou visível — antes a imagem grande o disfarçava. */
  min-height: 2.3em;
}

.vt-preco { font-size: 1.15rem; font-weight: 700; color: var(--vt-secundaria); margin-top: .4rem; }
.vt-preco .vt-un { font-size: .8rem; font-weight: 400; color: #64748b; }
.vt-ref { font-size: .72rem; color: #5b6b7f; text-transform: uppercase; letter-spacing: .02em; }
.vt-preco-grande { font-size: 2rem; font-weight: 800; color: var(--vt-secundaria); }

.vt-disp { font-size: .82rem; margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }
.vt-disp.tem { color: #15803d; }
.vt-disp.encomenda { color: #b45309; }

.vt-add-ok { background: #15803d !important; border-color: #15803d !important; }

.vt-qtd-campo { max-width: 7rem; }

/* -------------------------------------------------------- pedido */

.vt-tabela { background: #fff; }
.vt-item-nome { font-weight: 600; font-size: .93rem; }
.vt-item-qtd { max-width: 5.5rem; margin: 0 auto; }

.vt-vazio, .vt-ok { background: #fff; border: 1px solid var(--vt-borda); border-radius: .75rem; }

/* -------------------------------------------------------- rodapé */

.vt-rodape { background: var(--vt-secundaria); color: var(--vt-secundaria-txt); }
.vt-rodape a { color: var(--vt-secundaria-txt); }
/* O rodapé usa .text-white-50 do Bootstrap, que é branco fixo — ilegível se a loja
   escolher um secundário claro. Aqui ele vira "a cor do texto, mais apagada". */
.vt-rodape .text-white-50 { color: var(--vt-secundaria-txt) !important; opacity: .72; }

/* ------------------------------------------- quem leva este, leva também */

.vt-junto {
  border-top: 1px solid var(--vt-borda);
  padding-top: 1.5rem;
}


/* ------------------------------------------------- cores da loja nos controles */

/* O Bootstrap traz o azul dele em .btn-primary; aqui manda a cor da loja.
   ⚠️ Prefixado por .vt-body para não vazar para o painel do ERP, que carrega o
   app.css e usa .btn-primary com outro sentido. */
.vt-body .btn-primary {
  background-color: var(--vt-secundaria);
  border-color: var(--vt-secundaria);
  color: var(--vt-secundaria-txt);
}
.vt-body .btn-primary:hover,
.vt-body .btn-primary:focus {
  background-color: var(--vt-secundaria-escura);
  border-color: var(--vt-secundaria-escura);
  color: var(--vt-secundaria-txt);
}
.vt-body .btn-outline-primary { color: var(--vt-secundaria); border-color: var(--vt-secundaria); }
.vt-body .btn-outline-primary:hover {
  background-color: var(--vt-secundaria);
  border-color: var(--vt-secundaria);
  color: var(--vt-secundaria-txt);
}

/* Contador do carrinho: cor de destaque da loja (era o vermelho fixo do Bootstrap). */
.vt-badge { background: var(--vt-destaque); color: var(--vt-destaque-txt); }

/* ⚠️ A chamada NÃO leva mais borda amarela. Ela ficava logo abaixo de um cabeçalho
   que agora é amarelo — duas doses da mesma cor na mesma dobra da tela, e a segunda
   não somava nada. O azul aqui separa as duas faixas. */
.vt-chamada {
  border-left: 6px solid var(--vt-secundaria);
}

/* --------------------------------------------- pré-cadastro (bloco opcional) */

/* <details> nativo: abre e fecha sem JS e sem biblioteca. Estilizado para parecer
   um cartão, não um acordeão de sistema. */
.vt-cad {
  border: 1px solid var(--vt-borda);
  border-radius: .6rem;
  background: #fff;
}
.vt-cad > summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-weight: 600;
  list-style: none;
}
.vt-cad > summary::-webkit-details-marker { display: none; }
/* Seta própria, que gira ao abrir — o marcador nativo é diferente em cada navegador. */
.vt-cad > summary::after {
  content: "⌄";
  float: right;
  transition: transform .15s;
  line-height: 1;
}
.vt-cad[open] > summary::after { transform: rotate(180deg); }
.vt-cad[open] > summary { border-bottom: 1px solid var(--vt-borda); }
.vt-cad-corpo { padding: 1rem; }

/* ------------------------------------------------------- páginas legais */

/* Largura de LEITURA, não de tela cheia: linha de 110 caracteres cansa e faz a
   pessoa perder o começo da linha seguinte — e ninguém lê política de privacidade
   por prazer. */
.vt-legal {
  background: #fff;
  border: 1px solid var(--vt-borda);
  border-radius: .75rem;
  padding: 1.5rem;
  max-width: 46rem;
  margin: 0 auto;
  line-height: 1.65;
}
.vt-legal h2 { color: var(--vt-secundaria); }
.vt-legal ul { padding-left: 1.2rem; }
.vt-legal li { margin-bottom: .35rem; }

/* Observação de apoio — sem virar "alerta", que aqui só assustaria. */
.vt-legal-nota {
  background: #f6f7f9;
  border-left: 4px solid var(--vt-primaria);
  padding: .7rem .9rem;
  border-radius: .3rem;
  font-size: .92rem;
}

/* O texto que a LOJA escreveu, visualmente separado do que a lei garante. */
.vt-legal-loja {
  background: #f6f7f9;
  border-radius: .5rem;
  padding: 1rem;
}
.vt-legal-pendente { border: 1px dashed var(--vt-borda); background: #fff; }

.vt-legal-rodape { font-size: .85rem; color: #64748b; margin-top: 2rem; }

.vt-rodape-links a { text-decoration: underline; opacity: .9; }

/* Dica do código de barras — presente, sem competir com a chamada. */
.vt-dica {
  margin-top: .6rem;
  font-size: .88rem;
  color: #475569;
}
.vt-dica .bi { color: var(--vt-secundaria); }

/* "Para quando você precisa?" — no celular os três botões não cabem lado a lado. */
@media (max-width: 575.98px) {
  .vt-prazo { display: flex; flex-direction: column; width: 100%; }
  .vt-prazo .btn { border-radius: .375rem !important; margin-bottom: .3rem; }
}

/* Dica do cliente já cadastrado — informativa, não alerta. */
.vt-cad-dica {
  background: #f6f7f9;
  border-left: 4px solid var(--vt-secundaria);
  padding: .6rem .8rem;
  border-radius: .3rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}

/* Voltar ao site da loja — presente no cabeçalho, sem competir com a busca. */
.vt-volta-site {
  color: var(--vt-primaria-txt);
  text-decoration: none;
  font-size: .88rem;
  white-space: nowrap;
  opacity: .85;
}
.vt-volta-site:hover { opacity: 1; text-decoration: underline; color: var(--vt-primaria-txt); }

/* Limpar pedido: discreto de propósito — ver o comentário no vitrine.js. */
.vt-limpar { text-decoration: none; }
.vt-limpar:hover { text-decoration: underline; }

/* ------------------------------------------------- produto sem foto */

/* Ocupa EXATAMENTE o espaço que a foto ocuparia (mesmo aspect-ratio e teto de
   altura), senão a grade desalinha quando um card tem imagem e o vizinho não. */
.vt-sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 190px;
  background: #f1f3f7;
  color: #b6c0cf;
  font-size: 2.2rem;
}

.vt-sem-foto-grande {
  flex-direction: column;
  gap: .4rem;
  max-height: 380px;
  border-radius: .5rem;
  font-size: 1rem;
  color: #64748b;
  text-align: center;
  padding: 1rem;
}
.vt-sem-foto-grande .bi { font-size: 3rem; color: #b6c0cf; }
.vt-sem-foto-grande small { color: #5b6b7f; }

/* --------------------------------------------------- carrossel de marcas */

/* ⚠️ `vt-marca-card` e NÃO `vt-marca`: o CABEÇALHO já usa `.vt-marca` para a marca
   DA LOJA (vitrine_topo.php). Reaproveitar o nome pintou uma caixa branca de 116 px
   em volta do nome da loja no topo — colisão de classe, vista em 28/08/2026.

   Rolagem HORIZONTAL, não grade: são 20+ marcas, e uma grade delas empurraria os
   produtos para fora da primeira tela — e é o produto que vende. */
.vt-marcas-fila {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scroll-snap-type: x proximity;
  /* Barra discreta no desktop; no celular o dedo arrasta e ela nem aparece. */
  scrollbar-width: thin;
}

.vt-marca-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 116px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .6rem .5rem;
  background: #fff;
  border: 1px solid var(--vt-borda);
  border-radius: .6rem;
  text-decoration: none;
  color: var(--vt-texto);
  transition: border-color .15s, box-shadow .15s;
}
.vt-marca-card:hover {
  border-color: var(--vt-secundaria);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.vt-marca-card.ativa {
  border-color: var(--vt-secundaria);
  border-width: 2px;
  background: #f6f9ff;
}

/* `contain` para o logo nunca deformar — cada marca manda uma proporção diferente. */
/* ⚠️ Medido em 28/08/2026: com 26 px de teto os logos saíam a 17–18 px de altura
   (TRAMONTINA 84x18, KRONA 84x17) — legíveis na lupa, invisíveis na tela. Como o
   NOME aparece embaixo em todo cartão, o logo pode crescer sem risco de a pessoa não
   saber que marca é. */
.vt-marca-card img {
  max-width: 96px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Marca sem logo vira texto — honesto e continua legível. Duas linhas no máximo,
   senão "QUARTZOLIT" estica o cartão e quebra o alinhamento da fila. */
.vt-marca-card-nome {
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.1;
  text-align: center;
  color: var(--vt-secundaria);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vt-marca-card-n { font-size: .7rem; color: #5b6b7f; white-space: nowrap; }

/* Com logo, o nome vira legenda: o logo já diz a marca, e um nome do mesmo peso
   competiria com ele. Sem logo, o nome É a identidade e fica em destaque. */
.vt-marca-card-nome.com-logo {
  font-weight: 600;
  font-size: .68rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .02em;
}

@media (max-width: 575.98px) {
  .vt-marca-card { width: 104px; min-height: 88px; }
  .vt-marca-card img { max-width: 80px; max-height: 30px; }
}

/* ------------------------------------------------------------ seções */

/* Grade que quebra, NÃO fila que rola. São 8 e cabem numa linha no desktop e em
   duas no celular — sem rolagem lateral, que é o que fazia o carrossel de marcas
   esconder metade de si mesmo sem a pessoa perceber que havia mais. */
.vt-secoes {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .5rem;
}

.vt-secao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .7rem .4rem;
  background: #fff;
  border: 1px solid var(--vt-borda);
  border-radius: .6rem;
  text-decoration: none;
  color: var(--vt-texto);
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vt-secao:hover {
  border-color: var(--vt-secundaria);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}
.vt-secao.ativa {
  border-color: var(--vt-secundaria);
  border-width: 2px;
  background: #f6f9ff;
}

.vt-secao .bi { font-size: 1.5rem; color: var(--vt-secundaria); line-height: 1; }
.vt-secao-nome { font-size: .78rem; font-weight: 600; line-height: 1.15; }
.vt-secao-n { font-size: .68rem; color: #5b6b7f; }
/* ⚠️ #94a3b8 dava 2,56:1 sobre branco em texto de 10,9px — reprovado no
   Lighthouse e ilegível de verdade no celular ao sol, que é onde o pedreiro
   abre isto. #5b6b7f passa dos 4,5:1 exigidos e continua secundário. */

@media (max-width: 991.98px) { .vt-secoes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) {
  .vt-secoes { grid-template-columns: repeat(4, 1fr); gap: .35rem; }
  .vt-secao { padding: .5rem .25rem; }
  .vt-secao .bi { font-size: 1.2rem; }
  .vt-secao-nome { font-size: .68rem; }
}

/* ------------------------------------------------- contraste (WCAG AA)
   Medido no Lighthouse contra o cinza #f6f7f9 do fundo da vitrine, onde o padrão
   do Bootstrap não passa: `.btn-outline-secondary` dava 4,37:1 e o link pequeno
   4,20:1 — o mínimo é 4,5:1. São links de NAVEGAÇÃO (paginação, "ver todas as
   marcas"): quem não os enxerga não chega no resto do catálogo. */
.vt-body .btn-outline-secondary { color: #576270; border-color: #97a1ab; }
.vt-body a.small { color: #0a58ca; }