/* ============================================================
   ADIÇÕES
   Estilos das peças que entraram para atender o documento mestre:
   painel de cookies por categoria, cards de fabricante com selo de
   situação, aviso fino de dado em validação e a página 404.

   Carrega por último, depois de refinamentos.css e home.css, pela
   mesma razão que refinamentos existe: aqui a cascata é o que
   mantém o resto de pé. Nada neste arquivo redefine regra antiga —
   são classes novas.
   ============================================================ */

/* ---------- Painel de cookies (documento mestre, 9.5) ---------- */
.ckpanel{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(4,18,27,.72)
}
.ckpanel.open{display:flex}
.ckbox{
  background:var(--cream-l);color:var(--navy);
  max-width:560px;width:100%;max-height:88vh;overflow-y:auto;
  padding:clamp(24px,4vw,38px);border-left:5px solid var(--yellow)
}
.ckbox h2{font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.02em}
.ckbox > p{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.ckopt{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  cursor:pointer
}
.ckopt input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--navy)}
.ckopt input:disabled{opacity:.55}
.ckopt span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.ckopt b{display:block;color:var(--navy);font-size:16.5px;margin-bottom:3px}
.ckacoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ckacoes .btn--out{color:var(--navy);border-color:var(--navy)}
.ckacoes .btn--out:hover{background:var(--navy);color:var(--cream)}

/* o botão de preferências no rodapé é texto, não CTA */
.flegal [data-cookie-abrir]{font:inherit;color:inherit;opacity:.85}
.flegal [data-cookie-abrir]:hover{opacity:1;color:var(--yellow)}

/* ---------- Aviso de dado em validação ----------
   Versão estreita do warnbox, para ficar dentro da listagem sem
   empurrar os resultados para baixo da dobra.                  */
.warnbox--fina{margin:14px 0 22px;padding:13px 18px}
.warnbox--fina b{font-size:11.5px;margin-bottom:4px}
.warnbox--fina p{font-size:13.5px;line-height:1.45;color:#9db3c0}

/* ---------- Cards de fabricante ----------
   O documento proíbe publicar marca como representada sem
   confirmação, então o card carrega a situação junto do nome.  */
.bgrupo{
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:18px
}
.bcard--link{transition:transform .16s,border-color .16s;cursor:pointer}
.bcard--link:hover{transform:translateY(-3px);border-color:var(--yellow)}
.bcard .bselo{
  display:block;margin-top:10px;font-style:normal;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--opal)
}
.bcard--pend .bselo{color:var(--sand)}
/* Abaixo de 860px o card deita numa fileira só (refinamentos.css, v21),
   desenhada quando ele tinha dois filhos: o nome e a linha. O selo da
   situação chegou depois e virou o terceiro item da mesma fileira, que
   não fecha em 276px — o texto saía cortado pela direita. Ele passa a
   ocupar a sua própria linha dentro do card.                        */
@media (max-width:860px){
  .bcard{flex-wrap:wrap}
  .bcard .bselo{flex:1 0 100%;margin-top:4px;text-align:left}
}
.bcard--pend{opacity:.86}
.bcard--pend:hover{opacity:1}

/* ---------- Página 404 ---------- */
.erro404{position:relative;overflow:hidden;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px)}
.erro404 .dsearch{display:flex;gap:10px}
.erro404 .dsearch input{flex:1}

/* ---------- Página de fabricante ---------- */
#v-marca .badges{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- A linha do produto no celular ----------
   Aqui houve dois consertos que deixaram de ser necessários em 6 de
   outubro, quando a função de comparar saiu e a linha perdeu a
   primeira coluna — a da caixa de comparar, que a página de marca e
   o buscador imitavam com um espaço vazio. Sem ela, as três
   listagens têm a mesma grade e não precisam de regra própria.

   Fica a foto. O responsivo.css esconde a miniatura abaixo de
   860px, de quando ela era sempre uma caixa vazia. O cliente já
   enviou foto para a maioria das fichas, e no celular — de onde vem
   a maior parte das visitas — a listagem não mostrava nenhuma.

   A miniatura volta SÓ na linha que tem foto: sem foto não há
   caixa, e a linha fica numa coluna. Por isso tudo passa por
   :has(.thumb img) — a coluna da foto só pode existir quando há o
   que pôr nela, senão o texto cai numa coluna de 84px e quebra uma
   palavra por linha. Navegador sem :has() fica sem miniatura. */
@media (max-width:860px){
  .prow .thumb:has(img){display:block;height:auto;aspect-ratio:1/1;align-self:start}
  .prow:has(.thumb img){grid-template-columns:84px minmax(0,1fr)}
}

/* ---------- Contraste (documento mestre, 4.2 e 10.3) ----------
   Três correções que a auditoria WCAG AA apontou. */

/* 1. O card de produto é branco desde refinamentos.css, e as cores dos
      filhos foram ajustadas lá — mas o wrapper sem classe herdava a cor
      do contexto. Dentro de uma seção navy isso dava texto creme sobre
      card branco, ilegível. A cor do card não depende de onde ele está. */
.prow{color:var(--navy)}
.prow .act .btn--out{color:var(--navy);border-color:var(--navy)}
.prow .act .btn--out:hover{background:var(--navy);color:var(--cream)}

/* 2. O botão de contorno nasceu para fundo escuro (texto creme). Em
      seção clara ele ficava creme sobre branco — 1,23:1. */
.sec--white .btn--out,.sec--cream .btn--out,.ckbox .btn--out{
  color:var(--navy);border-color:var(--navy)
}
.sec--white .btn--out:hover,.sec--cream .btn--out:hover,.ckbox .btn--out:hover{
  background:var(--navy);color:var(--cream);border-color:var(--navy)
}

/* 3. O selo "em breve" de Caminhões era navy sobre um cinza que dava
      2,55:1. Um passo mais claro no fundo resolve sem mudar o desenho. */
.util .frentes .soon{color:#8ba3b2}
.util .frentes .soon i{background:#8ba3b2;color:var(--navy)}

/* 4. sec--deep é fundo quase preto, mas não declarava cor de texto: o
      título do cross-sell na ficha herdava navy e sumia no fundo.
      Na ficha, refinamentos.css força navy no .d3 (correto, porque lá
      o nome do produto fica sobre fundo claro) — mas a regra alcançava
      também o cross-sell, que é escuro. Aqui a exceção é explícita. */
.sec--deep{color:var(--cream)}
.sec--deep .d1,.sec--deep .d2,.sec--deep .d3{color:var(--white)}
#v-ficha .sec--deep h1,#v-ficha .sec--deep .d3{color:var(--white)!important}

/* ---------- Aba "sei o meu veículo" ----------
   Dois seletores dividem a linha, e o nome da família de câmbio é
   longo ("G 211-16 — sem retarder"). Um corpo menor só aqui evita
   que a opção escolhida apareça cortada. */
#fbody .fform select{font-size:16px}

/* ---------- Marcas das três frentes (Quem Somos) ----------
   Altura fixa e largura livre: as três marcas têm proporções
   parecidas, então a mesma altura já as deixa do mesmo tamanho
   ótico. object-fit evita distorção quando o card é estreito
   demais para a largura natural da marca. */
.fr .frlogo{
  display:block;height:32px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center
}
.fr .frlogo + span{margin-top:16px}

/* ---------- Marca do fabricante na tabela (Marcas) ----------
   O nome do fabricante virou a própria marca. Altura fixa e largura
   livre, que é o que mantém duas marcas de proporções diferentes do
   mesmo tamanho ótico.

   Já foi link para o site do fabricante, com a chamada "Ver o site"
   embaixo do logotipo. A OSY pediu para tirar, e saiu daqui tudo o
   que existia só para isso: a chamada, o hover que apagava o
   logotipo, o anel de foco e o `transition` do `.marcalogo`. O que
   sobrou é a caixa do logotipo. */
.marcalink{display:inline-block;padding:2px 0}
/* Uma caixa so para todos, porque a arte ja vem normalizada:
   os nove arquivos estao numa tela comum de 480x240, cada
   logotipo dimensionado para ocupar a mesma area de tinta. Ver
   o comentario em css/componentes.css. */
.marcalogo{
  display:block;width:136px;height:auto;max-width:100%;
  object-fit:contain;object-position:left center
}
@media (max-width:760px){
  .marcalogo{width:116px}
}

/* ---------- Mega-menu sem a contagem ----------
   Sem a segunda linha o item caiu para 38px de altura. O mínimo de
   44px que o documento pede (9.4) volta pelo min-height, e de quebra
   o menu não fica com as dez linhas espremidas. */
.mgitem{min-height:44px;align-content:center}

/* ---------- Responsividade: auditoria de 320 a 1920 ----------

   1. A marca do cabeçalho tem largura fixa (267px na altura de 38px) e
      abaixo de 360px ela passava por baixo do botão do menu, com o
      traço do hambúrguer cortando a palavra COMPONENTES. Havia uma
      regra antiga que encolhia a marca no celular, mas uma refinada
      posterior sem media query a desfazia. Aqui a marca encolhe só
      abaixo do menor breakpoint do documento, sem mexer no resto. */
@media (max-width:359px){
  header.site .brand img{height:30px}
}

/* 2. Alvos de toque abaixo de 44 × 44 px, que é o mínimo do
      documento (9.4). São todos casos de altura: a largura já passa.
      Onde crescer empurraria o layout, o alvo cresce por dentro, com
      padding compensado por margem negativa — a área clicável chega a
      44px sem mudar a altura visível da faixa. */
@media (max-width:767px){
  .brand{min-height:44px;display:inline-flex;align-items:center}
  .fchips button{min-height:44px}
  .dfoot .tel{display:inline-flex;align-items:center;min-height:44px}
  .copybtn{min-height:44px;display:inline-flex;align-items:center}
  .abmenu{min-height:44px}
  .crumb button,.crumb a{padding-block:11px;margin-block:-11px;min-width:44px}
}

/* ---------- Alvo de toque ----------
   O documento pede no mínimo 44 × 44 px (9.4). Os links de texto
   do rodapé ficavam abaixo disso no celular.

   A barra do grupo saiu daqui: esticar o link para 44px dentro de
   uma faixa de 38px transbordava a faixa por cima do cabeçalho.
   Lá o alvo vem da altura da própria faixa, logo abaixo.          */
@media (max-width:760px){
  .flegal a,.flegal button{display:inline-block;padding:6px 0;min-height:44px;line-height:32px}
  .fcols a,.fcols button{display:inline-block;min-height:44px;line-height:1.5;padding:5px 0}
}


/* ============================================================
   CELULAR: barra do grupo e busca do herói
   Dois estouros de largura que se somavam na home. Ficam aqui, e
   não em refinamentos.css, porque corrigem regras de lá.
   ============================================================ */

/* ---------- 1. a faixa do grupo ----------
   O endereço nunca saía no celular: a regra que o tirava mirava um
   <span>, e em js/layout.js ele é um <a>. Sobrando na faixa, ele
   empurrava as quatro frentes além da largura da tela, quebrava em
   duas linhas e escorria por cima do cabeçalho.
   Os dois filhos diretos <a> da faixa são exatamente o telefone e o
   endereço — as frentes vêm dentro de um <span>. */
@media (max-width:767px){
  .util .wrap > a{display:none}
  /* sem os dois links, o gap de 22px só desloca a fileira do centro */
  .util .wrap{gap:0}
  /* nada dentro da faixa pode ultrapassar a largura da tela: ela é
     fixa, e o que transborda dela não some com o overflow do body */
  .util,.util .wrap{max-width:100vw;overflow:hidden}
  .util .frentes{min-width:0}
  /* "Grupo Osy" quebrava em duas linhas dentro da célula de 44px e
     desalinhava a fileira; se os quatro não couberem, a fileira rola
     de lado, que é o que a regra de refinamentos.css já previa. */
  .util .frentes a,.util .frentes .soon{white-space:nowrap;flex:0 0 auto}
}
/* Em 360px faltam ~10px para a quarta frente: o recuo lateral cede
   antes de a fileira precisar rolar. */
@media (max-width:380px){
  .util .frentes a,.util .frentes .soon{padding:0 7px;font-size:11.5px}
}

/* ---------- 2. alvo de toque das frentes ----------
   44 × 44 px (9.4) sem transbordar: quem cresce é a faixa, e o link
   já ocupa 100% da altura dela. */
@media (max-width:760px){
  :root{--altura-barra-grupo:44px}
}

/* ---------- 3. a busca do herói ----------
   Os campos pedem 180px cada. Na aba "sei o meu veículo" são dois
   seletores mais o botão, e a linha não fecha em tela de celular:
   com a montadora escolhida ("Eaton e Clark (50)") a caixa
   estourava para fora do card. No celular a linha vira coluna. */
@media (max-width:600px){
  .fform{flex-direction:column;align-items:stretch;gap:10px}
  .fform input,.fform select,.fform .btn{width:100%;min-width:0;flex:0 0 auto}
  .fform .btn{justify-content:center}
}

/* ---------- 4. o display não escapa da tela ----------
   "rodando." é uma palavra só e mais larga que a coluna no celular:
   sem isto ela sai pela direita em vez de descer de linha. */
@media (max-width:860px){
  .d1,.d2,.d3{overflow-wrap:break-word}
}

/* `.marcanome` saiu daqui. Era o nome escrito no lugar da arte,
   para a marca sem logotipo não encolher a fileira da tabela de
   fabricantes. A OSY pediu para tirar da tabela quem não tem
   logotipo, então a regra ficou sem nada que a alcance. */