/* O sistema visual é o do www.ryi.com.br (a loja da Tray), medido em 19/09/2026:
   azul-marinho #21314a de primária, vermelho #ce1f33 de preço e botão, Trebuchet MS de
   fonte e pílula de 20px em tudo que é botão e campo. As cores moram SÓ aqui: literal solto
   no meio do arquivo é o que faz duas telas divergirem. */
:root {
  --marinho: #21314a; --marinho-escuro: #182538;
  --vermelho: #ce1f33; --vermelho-escuro: #a8172a;
  --alerta: #f50e01;
  --aviso: #b07a00; --aviso-fundo: #fff6dc; --alerta-fundo: #fdecee;
  --tinta: #050505; --fraca: rgba(5, 5, 5, .62); --tenue: rgba(5, 5, 5, .42);
  --fundo: #ffffff; --papel: #f5f6f8; --regua: rgba(5, 5, 5, .12);
  --whats: #25d366; --verde: #2f6b4f; --verde-claro: #22c55e;
  --raio: 20px; --raio-cartao: 10px;
  --fonte: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
  --miolo: 1200px;
  --sombra: 0 6px 24px rgba(5, 5, 5, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta);
       font-family: var(--fonte); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select { font-family: inherit; }
/* O atributo hidden vence o display de qualquer classe: a linha da peça é grid e a barra
   do filtro é flex, e sem isto o JS as "escondia" sem que nada sumisse. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }
.miolo { max-width: var(--miolo); margin: 0 auto; padding: 0 20px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================ cabeçalho
   Três faixas no topo: a vermelha (Sobre, Contato, telefones), a do logo com a busca, e a
   das categorias. Rolando para baixo, a primeira e a terceira recolhem e fica só a do logo,
   em azul-marinho — o JS no fim do base.html põe e tira ``body.recolhido``. Sem JS, o
   cabeçalho fica inteiro e grudado no topo, que é o caso degradado honesto. */
header.cabecalho { position: sticky; top: 0; z-index: 20; background: var(--marinho);
                   color: #fff; box-shadow: 0 2px 10px rgba(5, 5, 5, .18); }
.faixa-topo { background: var(--vermelho); font-size: .82rem; max-height: 40px;
              overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.faixa-topo .miolo { display: flex; justify-content: space-between; align-items: center;
                     gap: 12px; min-height: 30px; }
.faixa-topo a { color: #fff; }
.faixa-topo nav, .faixa-contato { display: flex; gap: 16px; align-items: center;
                                  white-space: nowrap; }
.faixa-contato svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px;
                     fill: currentColor; }
.topo .miolo { display: flex; align-items: center; gap: 18px; min-height: 80px; }
.marca { display: flex; align-items: center; flex: 0 0 auto; }
.marca img { height: 46px; width: auto; display: block; }
/* A busca em pílula, como na Tray: campo claro sobre o marinho, lupa dentro. */
form.busca { flex: 1; min-width: 200px; position: relative; display: flex; }
form.busca input { flex: 1; padding: 11px 48px 11px 18px; font-size: 1rem; border: 0;
                   border-radius: var(--raio); background: rgba(255, 255, 255, .14);
                   color: #fff; min-width: 0; }
form.busca input::placeholder { color: rgba(255, 255, 255, .7); }
form.busca input:focus { outline: 0; background: #fff; color: var(--tinta); }
form.busca input:focus::placeholder { color: var(--tenue); }
form.busca button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
                    border: 0; background: transparent; color: #fff; cursor: pointer;
                    border-radius: 50%; display: grid; place-items: center; }
form.busca input:focus + button { color: var(--marinho); }
form.busca button svg { width: 20px; height: 20px; fill: currentColor; }
.botao-whats { display: inline-flex; align-items: center; gap: 8px; background: var(--whats);
               color: #fff; font-weight: 700; padding: 10px 18px; border-radius: var(--raio);
               white-space: nowrap; }
.botao-whats:hover { text-decoration: none; filter: brightness(1.07); }
.botao-whats svg { width: 18px; height: 18px; fill: currentColor; }

/* Quem entrou, e quem ainda não. Ficam à direita da busca, depois do WhatsApp e do
   carrinho. */
.entrar, .chip-conta { display: inline-flex; align-items: center; gap: 8px;
                       white-space: nowrap; font-size: .9rem; font-weight: 700; }
.entrar svg { width: 20px; height: 20px; fill: currentColor; }
.entrar:hover { text-decoration: none; opacity: .85; }
.chip-conta { background: rgba(255, 255, 255, .14); border-radius: var(--raio);
              padding: 8px 14px; max-width: 320px; }
.chip-conta > span { overflow: hidden; text-overflow: ellipsis; }
.chip-conta form { display: inline; }
.chip-conta button { border: 0; background: none; color: #fff; opacity: .75; cursor: pointer;
                     font-size: .8rem; font-weight: 400; padding: 0; text-decoration: underline; }
.chip-conta a { opacity: .75; font-size: .8rem; font-weight: 400; text-decoration: underline; }

/* As três telas de conta: entrar, pedir acesso e o recado de que o pedido chegou. */
.formulario { max-width: 420px; margin: 24px auto 60px; display: flex; flex-direction: column;
              gap: 12px; }
.formulario h1 { margin: 0; font-size: 1.5rem; }
.formulario .nota { margin: 0; }
.formulario .acoes { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.formulario .mais { font-size: .85rem; color: var(--fraca); }
.aviso-erro { background: #fdecee; border-left: 3px solid var(--vermelho); color: var(--tinta);
              padding: 10px 14px; border-radius: 6px; font-size: .95rem; }

/* As categorias, em caixa alta como no site. No celular a fila rola de lado. */
.categorias { max-height: 60px; overflow: hidden; transition: max-height .3s ease, opacity .3s ease;
              border-top: 1px solid rgba(255, 255, 255, .1); }
/* A fila fica no centro, como na Tray (Rodrigo, 05/10/2026). O "safe" é o que a devolve ao
   início quando não cabe (celular, e até ~1100px): com "center" puro a ponta esquerda de uma
   fila que transborda fica inalcançável, mesmo rolando. Navegador sem "safe" ignora a
   declaração e a fila fica à esquerda, como era. */
.categorias ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px;
                 justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.categorias ul::-webkit-scrollbar { display: none; }
.categorias a { display: block; padding: 15px 14px; font-size: .86rem; font-weight: 700;
                text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
                border-bottom: 3px solid transparent; }
.categorias a:hover, .categorias a[aria-current] { text-decoration: none;
                                                    border-bottom-color: var(--vermelho); }
/* "Todas as categorias" é o último item: um link para a busca que, com o mouse ou o foco em
   cima, abre o painel com TODAS as categorias em ordem alfabética, no estilo da Tray (medido
   em 04/10/2026: caixa branca da largura do miolo, cantos de 20px, 4 colunas de links em
   caixa alta sublinhados). O painel mora DENTRO do li, como descendente absoluto: o bloco de
   contenção dele é o header (sticky), e por isso nem o overflow do nav (que recolhe ao rolar)
   nem o do ul (que rola de lado no celular) o cortam — li, ul e nav NUNCA podem ganhar
   position ou transform. As regras de .categorias ul/a valem lá dentro também, e cada uma é
   desfeita abaixo. Sem mouse (celular) o painel some e o link vale. */
.categorias li.todas > a { text-transform: none; letter-spacing: 0; font-weight: 400;
                           opacity: .85; padding: 11px 14px; margin: 4px 0 7px;
                           border-bottom: 0; border-radius: var(--raio); }
/* (4 + 11 = os 15px de padding dos outros itens: o texto fica na mesma linha de base; os
   7 de baixo são os 4 que faltam mais a borda de 3px que os outros têm.) */
.categorias li.todas > a svg { width: 14px; height: 14px; fill: currentColor;
                               vertical-align: -3px; }
.categorias li.todas:hover > a, .categorias li.todas:focus-within > a {
  background: var(--fundo); color: var(--vermelho); opacity: 1; }
.categorias .painel-categorias { position: absolute; left: 0; right: 0; top: 100%; z-index: 31;
                                 display: none; max-width: var(--miolo); margin: 0 auto;
                                 padding: 8px 20px 0; color: var(--tinta); }
/* O teclado abre pelo :focus-within do LI, e não por "link:focus-visible + painel" nem por
   "painel:focus-within": entre o blur do link e o foco do item seguinte o navegador recalcula
   o estilo, o painel fecharia (display: none) e o foco cairia no body — medido no Edge em
   05/10/2026; com o li, o Tab entra no painel e o Shift+Tab volta. */
.categorias li.todas:hover .painel-categorias,
.categorias li.todas:focus-within .painel-categorias { display: block; }
.categorias .painel-categorias ul { display: block; overflow-x: hidden; overflow-y: auto;
                                    max-height: 70vh; padding: 20px 28px;
                                    background: var(--fundo); border: 1px solid var(--regua);
                                    border-radius: var(--raio); box-shadow: var(--sombra);
                                    columns: 240px; column-gap: 24px; }
.categorias .painel-categorias li { break-inside: avoid; padding: 4px 0; }
.categorias .painel-categorias a { display: block; padding: 0; border: 0; font-size: 1rem;
                                   font-weight: 400; letter-spacing: 0; line-height: 1.3;
                                   white-space: normal; text-decoration: underline; }
.categorias .painel-categorias a:hover { color: var(--vermelho); }
body.recolhido .faixa-topo, body.recolhido .categorias { max-height: 0; opacity: 0; }
body.recolhido .categorias .painel-categorias { display: none !important; }

/* Os três estados do cabeçalho na home, como no site atual:

     tela toda para cima   body.home.no-topo   transparente sobre a arte
     rolou                 (nenhuma)           marinho sólido, três faixas
     rolou além de 220px   body.recolhido      só a barra da busca

   Para a arte começar em y=0, atrás dele, o cabeçalho sai do fluxo. Isso vale só na home,
   que é onde há um herói, e só acima de 1.150px: abaixo disso a arte fica curta demais e o
   cabeçalho cobriria a frase gravada nela, que começa a 40% da altura (medido: em 1024px
   sobraria -16px). O html.js garante o caso degradado — ver o <head> do base.html.

   De quebra, na home o cabeçalho deixa de encurtar o documento ao recolher, que é a causa
   do tremor descrito no JS do fim desta página. Nas outras páginas ele segue no fluxo, e
   por isso a trava de lá continua necessária. */
@media (min-width: 1150px) {
  html.js body.home header.cabecalho { position: fixed; left: 0; right: 0;
                                       transition: background-color .3s ease; }
  /* Só a faixa vermelha tem fundo próprio e continua vermelha; as outras duas herdam este.
     O véu escurece o topo para o texto branco ler sobre qualquer arte. */
  html.js body.home.no-topo header.cabecalho {
    background-color: transparent; box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(5, 5, 5, .5), rgba(5, 5, 5, 0));
  }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-topo, .categorias { transition: none; }
  html { scroll-behavior: auto; }
}

/* A lista de sugestões da busca, desenhada pelo JS. Fica DENTRO do form para o clique fora
   fechar por evento e o Esc por tecla, e cobre o que estiver embaixo. */
.sugestoes { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0;
             padding: 6px 0; list-style: none; background: #fff; color: var(--tinta);
             border-radius: 12px; box-shadow: var(--sombra); z-index: 30; max-height: 70vh;
             overflow-y: auto; overflow-x: hidden; }
.sugestoes li a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
                  gap: 12px; align-items: center; padding: 8px 14px; }
.sugestoes li a:hover, .sugestoes li[aria-selected="true"] a { background: var(--papel);
                                                              text-decoration: none; }
.sugestoes img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px;
                 background: var(--papel); }
/* Nome e linha de baixo são BLOCOS que cortam com reticências: como span inline o
   overflow não vale, e o título longo passava por cima do preço (12/10/2026). */
.sugestoes .texto { display: block; min-width: 0; overflow: hidden; }
.sugestoes .nome { display: block; font-size: .92rem; font-weight: 700; line-height: 1.25;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugestoes .mais { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugestoes .ref { font-size: .8rem; color: var(--fraca); }
.sugestoes .info { font-size: .8rem; color: var(--vermelho); }   /* o resumo da ficha, na frente do código */
.sugestoes .preco { font-size: .95rem; font-weight: 700; white-space: nowrap;
                    justify-self: end; text-align: right; }
.sugestoes li.ver-tudo a { display: block; text-align: center; color: var(--vermelho);
                           font-weight: 700; font-size: .88rem; }

main { max-width: var(--miolo); margin: 0 auto; padding: 24px 20px 70px; }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 34px 0 12px; }
.migalha { font-size: .85rem; color: var(--fraca); margin-bottom: 14px; }
.migalha a:hover { color: var(--vermelho); }
.nota { color: var(--fraca); font-size: .9rem; margin: 0 0 16px; }
.vazio { color: var(--fraca); padding: 40px 0; text-align: center; }

/* ============================================================ botões */
.botao { display: inline-block; background: var(--marinho); color: #fff; font-weight: 700;
         padding: 11px 22px; border-radius: var(--raio); border: 0; cursor: pointer;
         font-size: .95rem; line-height: 1.2; }
.botao:hover { background: var(--marinho-escuro); text-decoration: none; }
.botao.vermelho, .cascata-curta .botao, .filtros .botao, .veiculo-escolhido .botao,
.botao.pedir { background: var(--vermelho); }
.botao.vermelho:hover, .cascata-curta .botao:hover, .filtros .botao:hover,
.veiculo-escolhido .botao:hover, .botao.pedir:hover { background: var(--vermelho-escuro); }

/* ============================================================ herói e vantagens
   O herói é a arte do site atual, de borda a borda. Ele mora FORA do <main> (ver o bloco
   "heroi" no base.html), por isso nasce com a largura da página sem precisar de 100vw.
   O teto de 1920px é a largura nativa da arte: acima disso ela pararia de crescer e viraria
   uma parede de 933px num monitor de 2560. O que sobrar nas laterais fica no marinho. */
.banners { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0;
           max-width: 1920px; margin: 0 auto; scrollbar-width: none;
           background: var(--marinho); }
.banners::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1920 / 700; min-height: 220px;
          background: var(--cor, var(--marinho)) center / cover no-repeat; color: #fff;
          display: flex; align-items: center; padding: 40px 48px; }
.banner:hover { text-decoration: none; }
/* Herói com imagem: o texto está gravado na arte, então o bloco de texto some. */
.banner.com-imagem .banner-texto { display: none; }
.banner-texto { max-width: 560px; }
.banner h2 { font-size: 2.2rem; line-height: 1.1; margin: 0 0 10px;
             text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.banner p { font-size: 1.05rem; margin: 0 0 18px; opacity: .95; }
.banner .botao { background: var(--vermelho); }

.vantagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
             gap: 18px 24px; margin: 8px 0 26px; }
/* "> div", e não "div": o bloco de texto de dentro também é uma div, e sem o ">" ele
   virava outra grade de duas colunas, com o título de um lado e a frase do outro. */
.vantagens > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px;
                   align-items: start; }
.vantagens img { width: 60px; height: 60px; object-fit: contain; }
.vantagens b { display: block; font-size: 1.05rem; color: var(--tinta); margin-bottom: 4px; }
.vantagens span { font-size: .88rem; color: var(--fraca); line-height: 1.4; }

/* ============================================================ busca pelo veículo
   O card marinho do site atual: título à esquerda, os selects à direita, Filtrar vermelho. */
.veiculo-busca { background: var(--marinho); color: #fff; border-radius: var(--raio-cartao);
                 padding: 22px 26px; margin: 0 0 22px; }
/* Rede de segurança para o caminho sem JS, em que o "Filtrar" ainda usa a âncora: sem
   isto a seção para atrás do cabeçalho grudado, que tem 165px. */
#veiculo { scroll-margin-top: 180px; }
/* Enquanto o pedaço novo não chega. Some rápido demais para animar. */
#veiculo-cascata.trocando { opacity: .55; }
.veiculo-busca h2 { margin: 0 0 14px; font-size: 1.35rem; display: flex; gap: 10px;
                    align-items: center; }
.veiculo-busca h2 svg { width: 30px; height: 30px; fill: currentColor; }
.cascata-curta { display: grid; gap: 12px; align-items: end;
                 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cascata-curta .acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.cascata-curta .mais, .cascata-curta .limpar { font-size: .85rem;
                                               color: rgba(255, 255, 255, .8); }
.veiculo-busca .campo { color: rgba(255, 255, 255, .85); }
.veiculo-busca .campo select { background: rgba(255, 255, 255, .12); color: #fff;
                               border-color: transparent; }
.veiculo-busca .campo select option { color: var(--tinta); }
.veiculo-busca .campo select:focus { background: #fff; color: var(--tinta); }
.veiculo-busca .veiculo-escolhido { margin: 14px 0 0; background: rgba(255, 255, 255, .1);
                                    border-left-color: var(--vermelho); color: #fff; }
.veiculo-escolhido .botao { padding: 8px 16px; margin-left: 10px; font-size: .9rem; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--fraca); }
.campo span { font-size: .85rem; }
/* 1rem, e não menos: abaixo de 16px o iPhone dá zoom na página a cada toque no campo. */
.campo select, .campo input { padding: 11px 14px; font-size: 1rem; border: 1.5px solid var(--regua);
                              border-radius: var(--raio); background: var(--fundo);
                              color: var(--tinta);
                              /* Sem isto o select segue a opção mais longa ("NOVO UNO
                                 MILLE VIVACE/ATTRACTIVE/CIAO") e estoura a tela do celular. */
                              width: 100%; min-width: 0; }
.campo select:focus, .campo input:focus { outline: 0; border-color: var(--marinho); }

/* ============================================================ marcas */
/* Uma fileira só. Sem JS, ou com menos movimento pedido, ela rola com o dedo; quando não
   cabe, o JS da home duplica os logos e liga a esteira. O espaço é margem em cada caixa, e
   não gap: assim o trilho duplicado mede o dobro exato de uma volta e a emenda não pula. */
.marcas-strip { overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.marcas-strip::-webkit-scrollbar { display: none; }
.marcas-trilho { display: flex; width: max-content; margin: 0 auto; }
.marcas-strip a, .marcas-strip span { display: block; flex: 0 0 150px; width: 150px;
                                      height: 84px; margin: 0 7px; border: 1px solid var(--regua);
                                      border-radius: var(--raio-cartao); padding: 12px;
                                      background: #fff; }
/* Altura em 100% da caixa, que é definida: com o display grid de antes o max-height era
   ignorado, e logo quadrado (FirPar, Juntas Lima) vazava para a fileira de baixo. */
.marcas-strip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marcas-strip.esteira { overflow: hidden; }
.marcas-strip.esteira .marcas-trilho { margin: 0;
                                       animation: esteira-marcas var(--duracao, 45s) linear infinite; }
.marcas-strip.esteira:hover .marcas-trilho,
.marcas-strip.esteira:focus-within .marcas-trilho { animation-play-state: paused; }
@keyframes esteira-marcas { to { transform: translateX(-50%); } }
.marcas-strip a:hover { border-color: var(--vermelho); text-decoration: none; }
.marcas-strip .marca-nome { font-weight: 700; color: var(--fraca); font-size: .9rem; }

/* ============================================================ seções e cartões */
.secao { margin-top: 30px; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between;
             gap: 16px; margin-bottom: 14px; }
.secao-cab h2, .secao-cab h1 { margin: 0 0 6px; }
.secao-cab a { font-size: .88rem; color: var(--vermelho); font-weight: 700; }
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* O carrossel (04/10/2026): uma linha que rola de lado, com as setas por cima das bordas. */
.carrossel-corpo { position: relative; }
.carrossel-trilho { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
                    scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 8px; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-item { flex: 0 0 230px; scroll-snap-align: start; display: flex; }
.carrossel-item .cartao { width: 100%; }
.carrossel-seta { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
                  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--regua);
                  background: var(--fundo); box-shadow: var(--sombra); color: var(--tinta);
                  font-size: 1.7rem; line-height: 1; cursor: pointer; }
.carrossel-seta:hover { color: var(--vermelho); }
.carrossel-seta.anterior { left: 6px; }
.carrossel-seta.proxima { right: 6px; }
html:not(.js) .carrossel-seta { display: none; }
html:not(.js) .carrossel-trilho { scrollbar-width: auto; }
/* O cartão da Tray: foto quadrada, selo, título, referência, preço em vermelho e o botão. */
.cartao { position: relative; background: var(--fundo); border: 1px solid var(--regua);
          border-radius: var(--raio-cartao); padding: 14px; display: flex;
          flex-direction: column; gap: 6px; transition: box-shadow .15s ease; }
.cartao:hover { box-shadow: var(--sombra); }
/* O link mora no nome e se estica sobre o cartão: clicar em qualquer parte abre a peça. O
   + e o − ficam por cima (.passo-carrinho tem z-index). */
.cartao a.nome { text-decoration: none; }
.cartao a.nome::after { content: ""; position: absolute; inset: 0;
                        border-radius: var(--raio-cartao); }
/* O preço à esquerda e o + e − à direita, na mesma altura. */
.compra-cartao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compra-cartao .valores { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cartao .foto { position: relative; aspect-ratio: 1; display: grid; place-items: center;
                overflow: hidden; border-radius: 6px; background: #fff; }
.cartao .foto img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sem-foto { display: grid; place-items: center; width: 100%; height: 100%;
            color: var(--tenue); font-size: .8rem; text-align: center; padding: 8px; }
.sem-foto img { max-width: 70%; max-height: 70%; opacity: .55; }
.selo { position: absolute; top: 8px; left: 8px; background: var(--alerta); color: #fff;
        font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        padding: 4px 10px; border-radius: var(--raio); }
.cartao .nome { font-size: .92rem; font-weight: 700; line-height: 1.3; margin-top: 6px;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; }
/* O código é o que o cliente confere contra a peça velha na mão: não pode ser o texto
   mais apagado do cartão. */
.cartao .ref { font-size: .82rem; color: var(--fraca); }
/* A foto e' do tipo da peca, e nao desta peca. Discreta de proposito: e' ressalva, nao
   aviso -- mas some do cartao no celular, onde cada linha custa caro. */
.ilustrativa { font-size: .72rem; color: var(--tenue); margin: 4px 0 0; }
.imagem .ilustrativa { text-align: center; font-size: .8rem; margin-top: 8px; }
.preco { font-size: 1.25rem; font-weight: 700; color: var(--vermelho); }
.preco.promo { color: var(--vermelho); }
.de { font-size: .8rem; color: var(--tenue); text-decoration: line-through; }
.parcela { font-size: .78rem; color: var(--fraca); }
.atacado { font-size: .8rem; font-weight: 700; color: var(--fraca); animation: pisca-promo 2s steps(1, end) infinite; }
/* A promoção de atacado pisca (pedido do Rodrigo, 04/10/2026): 1 s na cor de sempre, 1 s em
   verde claro, sem transição (o vermelho não destacava), em negrito nas duas. Quem pediu ao
   aparelho menos movimento vê o verde parado. */
@keyframes pisca-promo { 0% { color: var(--fraca); } 50% { color: var(--verde-claro); } }
@media (prefers-reduced-motion: reduce) { .atacado { animation: none; color: var(--verde-claro); } }
.estoque { font-size: .78rem; color: var(--verde); }
.cartao .rodape-cartao { display: flex; align-items: center; justify-content: space-between;
                         gap: 8px; margin-top: auto; padding-top: 8px; }
.cartao .rodape-cartao img { max-height: 26px; max-width: 80px; object-fit: contain; }
.cartao .rodape-cartao .marca-nome { font-size: .78rem; font-weight: 700; color: var(--fraca); }
.cartao .botao { padding: 8px 16px; font-size: .85rem; }

/* O rodapé da lista. Mesma pílula das outras, com a página atual em marinho cheio. */
.paginador { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
             gap: 6px; margin: 28px 0 8px; }
.paginador a, .paginador span { min-width: 44px; padding: 10px 12px; text-align: center;
                                border-radius: var(--raio); font-size: .9rem; line-height: 1.2; }
.paginador a { border: 1px solid var(--regua); color: var(--tinta); }
.paginador a:hover { border-color: var(--vermelho); color: var(--vermelho);
                     text-decoration: none; }
.paginador .atual { background: var(--marinho); color: #fff; font-weight: 700; }
.paginador .fora { color: var(--tenue); }

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { background: var(--fundo); border: 1px solid var(--regua); border-radius: var(--raio);
          padding: 7px 14px; font-size: .88rem; }
.pilula:hover { border-color: var(--vermelho); text-decoration: none; }
.pilula b { color: var(--vermelho); }

/* ============================================================ ficha */
.ficha { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
.ficha .imagem { background: var(--fundo); border: 1px solid var(--regua);
                 border-radius: var(--raio-cartao); padding: 18px; display: grid;
                 place-items: center; aspect-ratio: 1;
                 /* item de grade não alarga a coluna com a largura da foto: no celular
                    (coluna única) isso empurrava a caixa para fora da tela (10/10/2026) */
                 min-width: 0; }
.ficha .imagem img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ficha .imagem .sem-foto { height: 100%; }
/* A galeria da peça: miniaturas embaixo da principal; a ativa ganha a borda escura. */
.ficha .imagem .miniaturas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 10px; }
.ficha .imagem .miniaturas a { display: block; width: 64px; height: 64px; padding: 2px;
  border: 1px solid var(--regua); border-radius: 6px; background: #fff; }
.ficha .imagem .miniaturas a.ativa { border-color: var(--tinta); }
.ficha .imagem .miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.dados dt { font-size: .82rem; color: var(--fraca); }
.dados dd { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }
.compra { background: var(--papel); border-radius: var(--raio-cartao); padding: 20px;
          margin: 18px 0; }
.compra .preco { font-size: 2rem; }
.compra .de { font-size: 1rem; }
.compra .atacado { font-size: .92rem; margin-top: 2px; }
/* Enquanto não há carrinho, o pedido pelo WhatsApp é a ação principal da ficha. */
.botao.pedir { display: block; text-align: center; padding: 14px 20px; font-size: 1.05rem;
               margin-top: 14px; }
.compra .nota { margin: 6px 0 14px; text-align: center; font-size: .85rem; }
.garantias { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px;
             font-size: .88rem; color: var(--fraca); }
.garantias a { color: var(--tinta); text-decoration: underline;
               text-decoration-color: var(--regua); }
.garantias a:hover { color: var(--vermelho); }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; color: var(--fraca);
     letter-spacing: .06em; border-bottom: 2px solid var(--marinho); padding: 0 12px 6px 0; }
td { border-bottom: 1px solid var(--regua); padding: 8px 12px 8px 0; }
.rolo { overflow-x: auto; }

/* ============================================================ a busca completa */
.busca-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px;
                align-items: start; }
.filtros { background: var(--papel); border-radius: var(--raio-cartao); padding: 18px;
           display: flex; flex-direction: column; gap: 10px; position: sticky; top: 96px;
           min-width: 0; }
.filtros h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
              color: var(--marinho); margin: 8px 0 2px; }
.filtros h2:first-child { margin-top: 0; }
.filtros .acoes { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.filtros .limpar { font-size: .85rem; color: var(--fraca); }
.veiculo-escolhido { background: var(--papel); border-left: 3px solid var(--verde);
                     padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
                     font-size: .95rem; }
.resultados h1 { font-size: 1.35rem; }
.resultados h1 em { color: var(--vermelho); font-style: normal; }

/* ============================================================ página do veículo
   A lista de peças do motor: foto | preço | descrição | marca, uma peça por linha, na ordem
   da referência. A foto cresce ao passar o mouse, só onde há mouse. Nada aqui pode ter
   overflow: hidden nem .linha pode ter z-index: cortaria ou cobriria a foto grande. */
/* O filtro de dentro da página: texto, categoria e marca numa linha, que quebra no
   celular. Mesmo desenho dos campos da busca (pílula, 1rem para o iPhone não dar zoom). */
.filtro-pecas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
                margin: 0 0 6px; }
.filtro-pecas input, .filtro-pecas select { padding: 10px 14px; font-size: 1rem;
                border: 1.5px solid var(--regua); border-radius: var(--raio);
                background: var(--fundo); color: var(--tinta); min-width: 0; }
.filtro-pecas input { flex: 2 1 300px; }
.filtro-pecas select { flex: 1 1 200px; max-width: 280px; }
.filtro-pecas input:focus, .filtro-pecas select:focus { outline: 0; border-color: var(--marinho); }
.filtro-conta { flex-basis: 100%; font-size: .85rem; color: var(--fraca); min-height: 1.3em; }
.linhas { display: grid; gap: 6px; }
.linha { position: relative;
         display: grid; grid-template-columns: 64px 130px 34px minmax(0, 1fr) 120px;
         grid-template-areas: "foto valor passo descricao fabricante"; align-items: center;
         gap: 14px; background: var(--fundo); border: 1px solid var(--regua);
         border-radius: var(--raio-cartao); padding: 8px 12px; }
.linha:hover { border-color: var(--vermelho); text-decoration: none; }
.linha:hover .nome { text-decoration: underline; }
/* O link esticado a partir do nome, como no cartão. A foto fica por cima dele (z-index 1)
   porque precisa receber o mouse para crescer; ela é um link à parte para a mesma peça. */
.linha a.nome::after { content: ""; position: absolute; inset: 0;
                       border-radius: var(--raio-cartao); }
.linha .foto { grid-area: foto; position: relative; z-index: 1; display: block;
               width: 56px; height: 56px; }
.linha .passo { grid-area: passo; }
.linha .valor { grid-area: valor; line-height: 1.25; }
.linha .descricao { grid-area: descricao; min-width: 0; }
.linha .fabricante { grid-area: fabricante; justify-self: end; text-align: right; }
/* transform não mexe no layout: a linha não cresce nem empurra as vizinhas. Origem à
   esquerda para a foto crescer sobre a própria linha, para a direita, nunca para fora da
   tela. O fundo branco tapa o texto atrás de PNG transparente. */
.linha .foto img { display: block; width: 56px; height: 56px; object-fit: contain;
                   background: var(--fundo); transform-origin: left center;
                   transition: transform .15s ease-out; }
.linha .sem-foto { width: 56px; height: 56px; padding: 4px; font-size: .6rem; line-height: 1.1; }
.linha .preco { font-size: 1.05rem; }
.linha .de { font-size: .78rem; }
.linha .atacado { font-size: .75rem; }
.linha .nome { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.linha .ref { font-size: .85rem; color: var(--fraca); }
.linha .fabricante img { display: block; max-height: 44px; max-width: 110px; object-fit: contain; }
.linha .marca-nome { font-size: .82rem; font-weight: 700; color: var(--fraca); }
/* Aro e sombra escalam junto com a imagem: os valores já estão divididos por 4,5. */
@media (hover: hover) {
  .linha .foto:hover { z-index: 2; }
  .linha .foto:hover img { transform: scale(4.5); border-radius: 1px;
                           box-shadow: 0 0 0 .25px var(--regua), 0 1px 5px rgba(0, 0, 0, .22); }
}
@media (prefers-reduced-motion: reduce) { .linha .foto img { transition: none; } }

/* ============================================================ WhatsApp flutuante */
.zap { position: fixed; right: 18px; bottom: 18px; z-index: 15; display: inline-flex;
       align-items: center; gap: 10px; background: var(--whats); color: #fff; font-weight: 700;
       padding: 13px 20px; border-radius: var(--raio); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.zap:hover { text-decoration: none; filter: brightness(1.07); }
.zap svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================================ rodapé */
footer { background: var(--marinho); color: rgba(255, 255, 255, .85); font-size: .9rem;
         margin-top: 40px; padding: 38px 0 0; }
footer .colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
                  gap: 24px; padding-bottom: 26px; }
footer h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #fff;
            margin: 0 0 10px; }
footer p { margin: 0 0 6px; }
footer a { color: #fff; }
footer a:hover { color: #fff; text-decoration: underline; }
.pagamentos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagamentos span { background: #fff; color: var(--marinho); font-size: .72rem; font-weight: 700;
                   padding: 4px 10px; border-radius: 6px; }
.rodape-fim { border-top: 1px solid rgba(255, 255, 255, .15); padding: 14px 20px;
              font-size: .8rem; color: rgba(255, 255, 255, .6); text-align: center; }

/* ============================================================ páginas institucionais */
.texto { max-width: 720px; }
.texto h2 { margin-top: 28px; }
.texto p, .texto li { font-size: 1.02rem; }
.texto li { margin-bottom: 6px; }

/* ============================================================ telas menores */
@media (max-width: 860px) {
  .faixa-topo nav { display: none; }
  .faixa-topo .miolo { justify-content: center; }
  .faixa-contato { gap: 12px; font-size: .78rem; }
  .topo .miolo { flex-wrap: wrap; gap: 10px; min-height: 0; padding-top: 10px;
                 padding-bottom: 10px; }
  .marca img { height: 36px; }
  .botao-whats span { display: none; }
  .botao-whats { padding: 10px 12px; }
  form.busca { order: 3; flex-basis: 100%; }
  .categorias a { padding: 12px 10px; font-size: .8rem; }
  /* sem mouse não há hover: o "Todas as categorias" é só o link para a busca */
  .categorias .painel-categorias { display: none !important; }
  .banner { padding: 24px 20px; }
  .banner h2 { font-size: 1.4rem; }
  .busca-layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  /* minmax(0, …) como no desktop: "1fr" puro é minmax(auto, 1fr), e a foto da galeria
     alargava a coluna além da tela do celular (10/10/2026) */
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .zap span { display: none; }
  .zap { padding: 13px; border-radius: 50%; }
}
@media (max-width: 600px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .carrossel-trilho { gap: 10px; }
  .carrossel-item { flex-basis: calc(50% - 5px); }
  .carrossel-seta { width: 34px; height: 34px; font-size: 1.4rem; }
  .carrossel-seta.anterior { left: 4px; }
  .carrossel-seta.proxima { right: 4px; }
  /* No celular só Anterior, a página de agora e Próxima: os números viram uma parede. */
  .paginador a:not([rel]), .paginador .fora { display: none; }
  .paginador .atual { display: inline-block; }
  .cartao { padding: 10px; }
  .cartao .nome { font-size: .85rem; }
  .cartao .botao { display: none; }
  .vantagens { grid-template-columns: 1fr; gap: 12px; }
  /* No celular a foto fica à esquerda ocupando as duas linhas; descrição em cima, preço
     e marca embaixo, e o + e − à direita, também nas duas linhas. */
  .linha { gap: 4px 10px; padding: 8px 10px;
           grid-template-columns: 56px minmax(0, 1fr) auto 34px;
           grid-template-areas: "foto descricao descricao passo" "foto valor fabricante passo"; }
  .linha .preco { font-size: 1rem; }
  .linha .nome { font-size: .9rem; }
  .filtro-pecas select { max-width: none; }
  .linha .fabricante img { max-height: 32px; max-width: 80px; }
}

/* Herói com imagem: a arte manda no tamanho; o texto está gravado nela. */
.banner.com-imagem { padding: 0; aspect-ratio: auto; min-height: 0; display: block; }
.banner.com-imagem img { display: block; width: 100%; height: auto; }

/* ============================================================ o carrinho
   O contador no cabeçalho, a caixa fechada na vitrine, a tela do carrinho, o fechamento e
   a confirmação. Mesma régua do resto: marinho de estrutura, vermelho de preço e ação,
   pílula de 20px em botão e campo. */
.carrinho-link { position: relative; display: inline-flex; align-items: center; gap: 8px;
                 color: #fff; padding: 6px 10px; border-radius: var(--raio); }
.carrinho-link svg { width: 22px; height: 22px; fill: currentColor; }
.carrinho-link:hover { text-decoration: none; background: rgba(255, 255, 255, .14); }
.carrinho-link.cheio { background: rgba(255, 255, 255, .14); }
.conta-itens { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
               background: var(--vermelho); color: #fff; font-size: .75rem; font-weight: 700;
               display: inline-flex; align-items: center; justify-content: center; }

/* A peça que só sai em embalagem fechada, dita já na vitrine: descobrir que o mínimo
   são 8 depois de clicar é o jeito certo de perder a venda. */
.embalagem { font-size: .8rem; color: var(--tinta); font-weight: 700; margin-top: 2px; }
.compra .embalagem { font-size: .9rem; margin: 10px 0; font-weight: 400; color: var(--tinta);
                 background: var(--papel); border-left: 3px solid var(--verde);
                 padding: 8px 12px; border-radius: 0 6px 6px 0; }
.ao-carrinho { margin: 14px 0 6px; }
.ao-carrinho .botao { width: 100%; text-align: center; background: var(--vermelho); }
.ao-carrinho .botao:hover { background: var(--vermelho-escuro); }
.botao.pedir.secundario { background: var(--marinho); }
.botao.pedir.secundario:hover { background: var(--marinho-escuro); }

.carrinho h1, .fechar h1, .pedido-feito h1 { font-size: 1.6rem; margin: 18px 0 14px; }
.aviso { background: #fff6d8; border-left: 3px solid #e0a800; padding: 10px 14px;
         border-radius: 0 6px 6px 0; margin: 0 0 16px; }
.aviso.erro { background: #ffeaec; border-left-color: var(--vermelho); }
.vazio { color: var(--fraca); margin: 30px 0 60px; }
.vazio a { color: var(--vermelho); font-weight: 700; }

.carrinho .itens { width: 100%; border-collapse: collapse; }
.carrinho .itens th { text-align: left; font-size: .8rem; color: var(--fraca);
                      text-transform: uppercase; letter-spacing: .04em;
                      border-bottom: 1px solid var(--regua); padding: 8px 10px; }
.carrinho .itens td { border-bottom: 1px solid var(--regua); padding: 14px 10px;
                      vertical-align: top; }
.carrinho .itens td.foto { width: 84px; }
.carrinho .itens td.foto img { width: 72px; height: 72px; object-fit: contain; }
.carrinho .itens td.nome a { font-weight: 700; }
.carrinho .itens .ref { font-size: .8rem; color: var(--fraca); }
.carrinho .itens td.preco, .carrinho .itens td.total { white-space: nowrap; font-weight: 700; }
.carrinho .itens td.total { color: var(--vermelho); }
.carrinho .itens .un { font-size: .75rem; color: var(--fraca); font-weight: 400; }
.carrinho .quantidade form { display: flex; gap: 6px; align-items: center; }
.carrinho .quantidade input { width: 80px; padding: 8px 10px; border: 1px solid var(--regua);
                              border-radius: var(--raio); text-align: center; }
.carrinho .quantidade button { border: 1px solid var(--regua); background: var(--papel);
                               border-radius: var(--raio); padding: 8px 12px; cursor: pointer;
                               font-size: .8rem; }
.carrinho .tirar button { border: 0; background: none; color: var(--tenue); cursor: pointer;
                          font-size: 1.1rem; padding: 4px 8px; }
.carrinho .tirar button:hover { color: var(--vermelho); }
.carrinho .tirar .rotulo { display: none; }     /* "Tirar" só no celular (abaixo) */

.fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
         justify-content: flex-end; margin: 22px 0 60px; }
.fecha .soma { margin-right: auto; }
.fecha .soma span { color: var(--fraca); margin-right: 10px; }
.fecha .soma strong { font-size: 1.6rem; color: var(--vermelho); }
.fecha .nota, .resumo .nota, .pedido-feito .nota { font-size: .8rem; color: var(--fraca); }
.continuar { color: var(--fraca); font-size: .9rem; }

/* O fechamento: formulário à esquerda, resumo à direita, uma coluna no celular. */
.fechar .colunas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px;
                   align-items: start; margin-bottom: 60px; }
.dados-pedido label { display: block; margin-bottom: 14px; font-size: .9rem;
                      color: var(--fraca); }
.dados-pedido input, .dados-pedido textarea { display: block; width: 100%; margin-top: 5px;
    padding: 11px 14px; border: 1px solid var(--regua); border-radius: var(--raio);
    font-size: 1rem; color: var(--tinta); }
.dados-pedido textarea { border-radius: 10px; resize: vertical; }
.dados-pedido .opcional { color: var(--tenue); font-weight: 400; }
.dados-pedido .botao { background: var(--vermelho); }
.dados-pedido .botao:hover { background: var(--vermelho-escuro); }
.dados-pedido .nota { font-size: .8rem; color: var(--fraca); margin-top: 10px; }
.resumo { background: var(--papel); border-radius: var(--raio-cartao); padding: 18px 20px; }
.resumo h2 { font-size: 1rem; margin: 0 0 12px; }
.resumo ul { list-style: none; margin: 0 0 14px; padding: 0; }
.resumo li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px;
             font-size: .85rem; padding: 7px 0; border-bottom: 1px solid var(--regua); }
.resumo li em { display: block; font-style: normal; color: var(--tinta); font-size: .78rem; }
.resumo .v { font-weight: 700; white-space: nowrap; }
.resumo .soma { display: flex; justify-content: space-between; align-items: baseline; }
.resumo .soma strong { font-size: 1.3rem; color: var(--vermelho); }

/* Meus pedidos (05/10/2026): a lista da conta; no celular a tabela rola de lado (.rolo). */
.meus-pedidos { margin-bottom: 60px; }
.meus-pedidos td { white-space: nowrap; }
.meus-pedidos td a { color: var(--vermelho); font-weight: 700; }
.meus-pedidos .recado { color: var(--fraca); }

.pedido-feito { max-width: 720px; margin-bottom: 60px; }
.pedido-feito .recado { color: var(--fraca); margin-bottom: 20px; }
.pedido-feito .parcelas { display: block; margin: 10px 0 6px; font-weight: 600; }
.pedido-feito .parcelas select { display: block; margin-top: 4px; padding: 8px; font-size: 1rem;
  max-width: 100%; border: 1px solid var(--regua); border-radius: 6px; background: #fff; }
.pedido-feito .itens { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pedido-feito .itens td { border-bottom: 1px solid var(--regua); padding: 10px 8px; }
.pedido-feito .itens .q { width: 48px; color: var(--fraca); }
.pedido-feito .itens .v { text-align: right; font-weight: 700; white-space: nowrap; }
.pedido-feito .soma { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pedido-feito .soma .nota { flex-basis: 100%; margin: 0; }
.pedido-feito .soma strong { font-size: 1.5rem; color: var(--vermelho); }
.pedido-feito .acoes { display: flex; gap: 18px; align-items: center; margin-top: 26px; }

/* A calculadora de frete (carrinho e ficha) e as opções que ela devolve. */
.calc-frete { margin: 14px 0 6px; }
.calc-frete.no-carrinho { max-width: 520px; margin-left: auto; }
.calc-frete label { display: block; font-size: .85rem; color: var(--fraca); margin-bottom: 6px; }
.calc-frete .cep { display: inline-block; width: 130px; margin-top: 4px; padding: 8px 12px;
                   border: 1px solid var(--regua); border-radius: var(--raio); font-size: .95rem; }
.calc-frete .botao { padding: 8px 16px; font-size: .9rem; border: 0; cursor: pointer; }
.frete-resultado { margin-top: 8px; }
.frete-opcoes { list-style: none; margin: 0 0 6px; padding: 0; }
.frete-opcoes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px;
                   align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--regua);
                   font-size: .88rem; }
.frete-opcoes .p { color: var(--fraca); font-size: .8rem; white-space: nowrap; }
.frete-opcoes strong { white-space: nowrap; }
.frete-aviso { font-size: .85rem; color: var(--fraca); margin: 6px 0; }

/* A escolha da entrega e do pagamento no fechamento (03/10/2026). O ".dados-pedido input"
   acima estica todo campo a 100%: aqui o rádio volta a ser rádio. */
.escolha { border: 1px solid var(--regua); border-radius: var(--raio-cartao); padding: 10px 14px 4px;
           margin: 0 0 16px; }
.escolha legend { font-weight: 700; color: var(--tinta); padding: 0 6px; font-size: .95rem; }
.dados-pedido .escolha label { display: flex; gap: 10px; align-items: flex-start; color: var(--tinta);
                               margin-bottom: 10px; cursor: pointer; }
.dados-pedido .escolha input[type=radio] { display: inline-block; width: auto; margin: 3px 0 0;
                                           padding: 0; flex: none; accent-color: var(--vermelho); }
.escolha label strong { color: var(--vermelho); margin-left: 4px; }
.escolha label small { display: block; color: var(--fraca); font-size: .8rem; margin-top: 2px; }
.escolha input:disabled + span { opacity: .45; }
.escolha .endereco { margin: 4px 0 10px 26px; }
.escolha .endereco label { display: block; color: var(--fraca); margin-bottom: 10px; cursor: auto; }
.dados-pedido .escolha .endereco input:not([type=radio]) { display: block; width: 100%;
    margin-top: 4px; padding: 9px 12px; border: 1px solid var(--regua); border-radius: var(--raio);
    font-size: .95rem; color: var(--tinta); }
.escolha .endereco .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha-titulo { font-weight: 700; color: var(--tinta); margin: 10px 0 6px; font-size: .9rem; }

/* O pagamento na página do pedido: o Pix na tela, o cartão, e as outras formas. */
.pedido-feito .pago { background: #e8f5ee; border-left: 3px solid var(--verde); padding: 12px 16px;
                      border-radius: 6px; font-size: 1.05rem; }
.pedido-feito .pix { border: 1px solid var(--regua); border-radius: var(--raio-cartao);
                     padding: 16px 20px; margin-bottom: 18px; text-align: center; }
.pedido-feito .pix h2 { font-size: 1.15rem; margin: 0 0 12px; }
.pedido-feito .pix .qr { display: block; margin: 0 auto 12px; image-rendering: pixelated; }
.pedido-feito .pix label { display: block; text-align: left; font-size: .85rem; color: var(--fraca); }
.pedido-feito .pix textarea { display: block; width: 100%; margin: 5px 0 10px; padding: 10px;
                              border: 1px solid var(--regua); border-radius: 8px; font-size: .8rem;
                              word-break: break-all; resize: none; }
.pedido-feito .espera { font-weight: 700; color: var(--tinta); }
.pedido-feito form.pagar { margin: 6px 0 16px; }
.pedido-feito form.pagar .botao, .pedido-feito .pix .botao { background: var(--vermelho); border: 0;
                                                             cursor: pointer; font-size: 1rem; }
#cartao-mp { margin: 10px 0 18px; }
.outras-formas { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; }
.outras-formas form { margin: 0; }
.outras-formas { align-items: center; }
.botao.contorno { background: transparent; color: var(--marinho); border: 1px solid var(--marinho); }
.botao.contorno:hover { background: var(--papel); }
button.link { background: none; border: 0; padding: 0; color: var(--marinho); font: inherit;
              font-size: .9rem; text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .fechar .colunas { grid-template-columns: 1fr; }
  .carrinho .itens thead { display: none; }
  .carrinho .itens td.foto { width: 64px; }
  .carrinho .itens td { padding: 10px 6px; }
}
/* O carrinho vira cartões no celular (12/10/2026): a tabela de 6 colunas tem 541 px de
   largura mínima e transbordava a tela. Cada item é uma grade de três linhas: foto e nome;
   preço da unidade e "✕ Tirar"; quantidade com o Atualizar e o total da linha. Este bloco
   fica DEPOIS das regras base do carrinho de propósito: com a mesma especificidade vence
   quem vem por último, e na primeira versão (dentro do @media de cima) a borda e o padding
   de cada célula voltavam por cima dele. */
@media (max-width: 600px) {
  .carrinho .itens, .carrinho .itens tbody { display: block; }
  .carrinho .itens tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "foto nome nome" "foto preco tirar" "quantidade quantidade total";
    column-gap: 12px; row-gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--regua);
    align-items: start; }
  .carrinho .itens td { display: block; border: 0; padding: 0; }
  .carrinho .itens td.foto { grid-area: foto; width: auto; }
  .carrinho .itens td.foto img { width: 64px; height: 64px; }
  .carrinho .itens td.nome { grid-area: nome; font-size: .92rem; line-height: 1.3; }
  .carrinho .itens td.preco { grid-area: preco; white-space: normal; font-size: 1rem;
                              align-self: center; }
  /* "a unidade" inteiro na linha de baixo quando não cabe, nunca "a / unidade" */
  .carrinho .itens td.preco .un { display: inline-block; white-space: nowrap; margin-left: 4px; }
  .carrinho .itens td.tirar { grid-area: tirar; justify-self: end; align-self: center; }
  .carrinho .tirar button { color: var(--fraca); font-size: .95rem; padding: 4px 0 4px 8px; }
  .carrinho .tirar .rotulo { display: inline; font-size: .82rem; }
  .carrinho .itens td.quantidade { grid-area: quantidade; margin-top: 4px; }
  .carrinho .quantidade input { width: 64px; padding: 9px 6px; font-size: 1rem; }
  .carrinho .quantidade button { border: 1px solid var(--marinho); color: var(--marinho);
                                 background: #fff; font-weight: 700; font-size: .85rem;
                                 padding: 9px 14px; }
  .carrinho .itens td.total { grid-area: total; justify-self: end; align-self: center;
                              margin-top: 4px; font-size: 1.05rem; }
  .carrinho .itens td.total::before { content: "Total "; font-size: .75rem; font-weight: 400;
                                      color: var(--fraca); }
}

/* O − e o + da ficha da peça. Sem JavaScript os botões somem e o campo de número vale
   sozinho: o navegador respeita o step, e o servidor confere de novo de qualquer jeito. */
.passos { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.passos .passo { width: 40px; height: 40px; border: 1px solid var(--regua); background: #fff;
                 border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1;
                 color: var(--marinho); }
.passos .passo:hover { background: var(--papel); }
.passos input { width: 84px; height: 40px; text-align: center; font-size: 1.05rem;
                font-weight: 700; border: 1px solid var(--regua); border-radius: var(--raio);
                color: var(--tinta); }
.passos .de-quanto { font-size: .8rem; color: var(--fraca); }
html:not(.js) .passos .passo { display: none; }

/* ============================================================ + e − nas listas
   Vertical, como o Rodrigo pediu em 26/09/2026: + em cima, quanto já está no carrinho no
   meio, − embaixo. Fica por cima do link esticado da linha e do cartão (z-index), e mais
   nada aqui pode mexer no z-index da .linha: a foto grande depende disso. */
.passo-carrinho { position: relative; z-index: 1; display: flex; flex-direction: column;
                  align-items: center; gap: 2px; width: 32px; margin: 0; }
.passo-carrinho button { width: 30px; height: 26px; padding: 0; border: 1px solid var(--regua);
                         background: var(--fundo); color: var(--marinho); font-size: 1.1rem;
                         font-weight: 700; line-height: 1; cursor: pointer; }
.passo-carrinho .mais { border-radius: 8px 8px 3px 3px; }
.passo-carrinho .menos { border-radius: 3px 3px 8px 8px; }
.passo-carrinho button:hover:not(:disabled) { background: var(--marinho); color: #fff;
                                              border-color: var(--marinho); }
.passo-carrinho button:disabled { color: var(--tenue); cursor: default; }
.passo-carrinho .quantos { font-size: .9rem; font-weight: 700; line-height: 1.2;
                           color: var(--vermelho); font-variant-numeric: tabular-nums; }
.passo-carrinho .quantos.zero { color: var(--tenue); font-weight: 400; }
.passo-carrinho.ocupado { opacity: .6; }
/* O aviso de limite ("é tudo o que temos"), posto pelo JS por dois segundos. */
.passo-carrinho[data-aviso]::after { content: attr(data-aviso); position: absolute;
                                     left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
                                     background: var(--marinho); color: #fff; font-size: .72rem;
                                     white-space: nowrap; padding: 3px 8px; border-radius: 6px; }

/* ============================================================ preço fechado
   Commerce › Configurações pode fechar o preço para quem não entrou na conta. No lugar
   dele, o convite para entrar; por cima do link esticado do cartão e da linha. */
.entrar-preco { position: relative; z-index: 1; display: inline-block; font-size: .85rem;
                font-weight: 700; color: var(--marinho); text-decoration: underline; }
.entrar-preco:hover { color: var(--vermelho); }
.entrar-comprar { display: inline-block; margin: 4px 0 12px; }

/* ============================================================ os anéis do pistão
   A tela que abre quando um pistão entra no carrinho (26/09/2026): um <dialog> com os
   anéis indicados, o aviso amarelo e, no pistão de canaleta alternativa, o "!" vermelho.
   A caixa tem rolagem própria: no celular a lista de anéis passa da altura da tela. */
.dialogo-aneis { border: 0; border-radius: var(--raio-cartao); padding: 0;
                 width: min(940px, 94vw); max-height: 88vh; box-shadow: var(--sombra);
                 color: var(--tinta); background: var(--fundo); }
.dialogo-aneis::backdrop { background: rgba(5, 5, 5, .45); }
.aneis-do-pistao { position: relative; display: flex; flex-direction: column; gap: 10px;
                   padding: 20px 22px; max-height: 88vh; overflow-y: auto; }
.aneis-do-pistao h2 { margin: 0; padding-right: 36px; font-size: 1.2rem; }
.pistao-da-tela { margin: 0; color: var(--fraca); font-size: .92rem; }
.fechar-dialogo { position: absolute; top: 10px; right: 12px; margin: 0; }
.fechar-dialogo button { border: 0; background: none; font-size: 1.25rem; line-height: 1;
                         padding: 6px; cursor: pointer; color: var(--fraca); }
.fechar-dialogo button:hover { color: var(--tinta); }
.aviso-aneis, .aviso-alternativa { display: flex; gap: 10px; align-items: flex-start;
                                   padding: 10px 14px; border-radius: 6px; font-size: .95rem; }
.aviso-aneis { background: var(--aviso-fundo); border-left: 3px solid var(--aviso); }
.aviso-aneis .triangulo { color: var(--aviso); font-size: 1.2rem; line-height: 1.2; }
.aviso-alternativa { background: var(--alerta-fundo); border-left: 3px solid var(--alerta);
                     align-items: center; }
.exclamacao { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px;
              border-radius: 50%; background: var(--alerta); color: #fff; font-weight: 700; }
.aneis-do-pistao .pergunta { margin: 4px 0 0; font-weight: 700; }
.acoes-dialogo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end;
                 margin-top: 6px; }
.acoes-dialogo form { margin: 0; }
.botao.secundario { background: var(--marinho); }
.botao.secundario:hover { background: var(--marinho-escuro); }