/* Ajustes da Criativvo sobre o tema original da Prime Motors.
   Carregado por ultimo, entao vence o CSS inline dos blocos.
   Os seletores usam prefixo de classe porque os blocos da Shopify
   geram um hash diferente a cada republicacao do tema. */

/* ------------------------------------------------------------------
   1. Carrossel de marcas: nunca pausa
   O bloco original pausa a animacao no hover do container.
   ------------------------------------------------------------------ */
[class^="ai-logo-scroll-"]:hover [class^="ai-logo-scroll-track-"],
[class^="ai-logo-scroll-track-"] {
  animation-play-state: running !important;
}

/* o loop e continuo: o track tem dois grupos iguais e anda ate -50%.
   fixar a origem evita meio pixel de tremida no ponto de emenda */
[class^="ai-logo-scroll-track-"] {
  will-change: transform;
  transform-origin: 0 0;
}

/* o hover no item nao interfere mais na faixa */
[class^="ai-logo-scroll-item-"] {
  pointer-events: none;
}

/* ------------------------------------------------------------------
   2. Botoes de categoria: nenhuma linha sobra pela metade
   Sao 5 botoes. O tema usa 3 colunas no desktop e 2 no mobile, entao
   "Todos os Modelos" caia sozinho na ultima linha com buraco do lado.

   desktop largo : 5 colunas, tudo numa linha so
   desktop medio : 3 colunas, o ultimo ocupa 2 e fecha a linha
   mobile        : 2 colunas, o ultimo ocupa a linha inteira
   ------------------------------------------------------------------ */
[class^="ai-search-categories__categories-"] > a:last-child {
  grid-column: span 2;
  background-color: #ff2b2b;
  border-color: #ff2b2b;
  color: #ffffff;
  font-weight: 600;
}

[class^="ai-search-categories__categories-"] > a:last-child:hover {
  background-color: #e01c1c;
  border-color: #e01c1c;
  color: #ffffff;
}

/* a partir daqui os 5 cabem lado a lado sem quebrar o texto */
@media screen and (min-width: 1000px) {
  [class^="ai-search-categories__categories-"] {
    grid-template-columns: repeat(5, 1fr);
  }
  [class^="ai-search-categories__categories-"] > a:last-child {
    grid-column: auto;
  }
  [class^="ai-search-categories__category-"] {
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
  }
}

/* a vitrine de relacionados vem pronta do build numa tag propria;
   tag desconhecida nasce inline, entao precisa virar bloco */
pm-recomendados {
  display: block;
}

/* ------------------------------------------------------------------
   Faixa de fotos no topo + card de informacoes por cima
   (montada pelo galeria.js)

   Cada foto entra no formato dela: em pe (3:4), deitada (4:3) ou panoramica.
   A altura vem da tela e a largura de cada caixa acompanha a proporcao da
   foto, entao nada e cortado pra caber num quadro que nao e o seu.

   O --pm-prop e a proporcao da primeira foto do carro, escrita pelo
   galeria.js. Ele faz duas coisas: e o palpite das caixas que ainda nao
   carregaram e, principalmente, segura a altura da faixa no celular, senao
   uma foto deitada de 540px de altura pediria 720px de largura numa tela de
   375 e o visitante veria so um pedaco do carro.
   ------------------------------------------------------------------ */
.pm-faixa {
  position: relative;
  margin-bottom: 0;
  background-color: #f1f1f1;
}

/* dentro do card, logo acima da marca do carro */
.pm-caminho {
  display: block;
  margin-bottom: 10px;
}

.pm-faixa-trilho {
  --pm-prop: 0.75;
  display: flex;
  /* a altura manda e a largura de cada foto acompanha a proporcao dela.
     Ocupa a maior altura possivel deixando o comeco do card aparecer
     junto na primeira tela. */
  /* altura calibrada com o Matheus: cheia o suficiente pra foto respirar,
     sem empurrar o card pra fora da primeira tela. O terceiro limite e o
     que impede a foto deitada de ficar mais larga que a tela. */
  height: min(calc(100vh - 375px), 560px, calc(100vw / var(--pm-prop)));
  min-height: min(290px, calc(100vw / var(--pm-prop)));
  /* foto colada na foto e colada na borda: nada de faixa branca em volta */
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pm-faixa-trilho::-webkit-scrollbar {
  display: none;
}

.pm-faixa-foto {
  display: block;
  overflow: hidden;
  height: 100%;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  /* o galeria.js escreve o formato de cada foto direto na caixa; isto aqui e
     o que vale enquanto ele nao sabe */
  aspect-ratio: var(--pm-prop, 3 / 4);
  /* nenhuma caixa passa da largura da tela: panoramica no meio de um carro
     fotografado em pe cede lateral em vez de exigir rolagem de duas telas */
  max-width: 100%;
  background: #e4e4e4;
  cursor: zoom-in;
  scroll-snap-align: start;
}

.pm-faixa-foto img {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foto panoramica (mais larga que 16:9).

   No monitor a caixa e 16:9 e a foto preenche: cede um pouco de lateral e o
   carro, que fica no meio, aparece inteiro. No celular a caixa nao pode passar
   da largura da tela e fica quase quadrada, entao cortar partiria o carro no
   meio: a foto entra inteira e o vazio em volta e ela mesma desfocada, em vez
   de duas barras cinzas. */
@media screen and (max-width: 999px) {
  .pm-faixa-foto--pano {
    position: relative;
    background: #101014;
  }

  .pm-faixa-foto--pano::before {
    position: absolute;
    z-index: 0;
    background-image: var(--pm-fundo);
    background-position: center;
    background-size: cover;
    content: '';
    filter: blur(26px) brightness(0.55);
    inset: -30px;
  }

  .pm-faixa-foto--pano img {
    object-fit: contain;
  }
}

.pm-faixa-seta {
  position: absolute;
  top: 50%;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: #1f1f1f;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}

.pm-faixa-seta:hover {
  background: #ffffff;
}

.pm-faixa-seta svg {
  width: 20px;
  height: 20px;
}

.pm-faixa-seta--ant {
  left: 18px;
}

.pm-faixa-seta--prox {
  right: 18px;
}

.pm-faixa-seta--prox svg {
  transform: rotate(180deg);
}

/* no canto direito: o card de informacoes sobe pela esquerda e cobriria */
.pm-faixa-contador {
  position: absolute;
  right: 24px;
  bottom: 16px;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}

/* o bloco de informacoes vira o card branco que sobe por cima da faixa */
.pm-produto-card {
  position: relative;
  z-index: 2;
  /* sobe so o suficiente pra encostar na foto: e um detalhe, nao um degrau */
  margin-top: -24px;
  /* topo enxuto pra sobrar altura pras fotos sem esconder o nome do carro */
  padding: 18px 30px 8px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.1);
}

/* A galeria do tema sai de cena, mas fica no DOM: e ela que abre o zoom.

   Esconde desde o primeiro instante, e nao so depois que o galeria.js marca a
   pagina com .pm-produto-card. O motivo e medido: enquanto ela ficava visivel,
   o bloco do produto nascia com 1341px e encolhia pra 1095px quando o script
   rodava. A pagina inteira dava um pulo de 246px pra cima, e so isso valia
   0,48 de CLS (o Google considera ruim acima de 0,25).

   A faixa nova entra no lugar com a mesma funcao, entao esconder cedo nao tira
   nada de quem esta olhando: so evita mostrar duas vezes e depois corrigir. */
.product .product__media,
.pm-produto-card .product__media {
  display: none !important;
}

.pm-produto-card .product__info {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
}

/* conteudo de um lado, oferta do outro */
@media screen and (min-width: 1000px) {
  .pm-produto-card .product__info {
    display: grid;
    align-items: start;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

/* ------------------------------------------------------------------
   Bloco de oferta: o unico ponto de decisao da pagina

   Fica grudado no topo enquanto o comprador le a ficha e a descricao,
   entao o contato nunca sai da tela. Ordem de leitura: situacao do carro,
   preco, contato e o que da seguranca pra clicar.
   ------------------------------------------------------------------ */
.pm-lado-oferta {
  padding: 20px 22px 22px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 1000px) {
  .pm-lado-oferta {
    position: sticky;
    top: 96px;
  }
}

.pm-oferta-status {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  color: #17703c;
  font-size: 12.5px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.02em;
}

/* Carro que nao esta pronto pra fechar negocio hoje: a cor sai do verde, que
   e o convite pra clicar, e a bolinha para de pulsar. O texto continua sendo
   o que manda, a cor so evita que o olho leia "pode vir buscar". */
.pm-oferta-status--reservado {
  color: #9a6206;
}

.pm-oferta-status--preparacao {
  color: #5b5b5b;
}

/* a bolinha pulsa: sinal de que o anuncio esta vivo, nao um ponto parado */
.pm-oferta-bolinha {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #21c65a;
}

.pm-oferta-status--reservado .pm-oferta-bolinha {
  background: #e0a106;
}

.pm-oferta-status--preparacao .pm-oferta-bolinha {
  background: #8a8a8a;
}

.pm-oferta-bolinha::after {
  position: absolute;
  border: 2px solid #21c65a;
  border-radius: 50%;
  animation: pm-pulso 1.9s ease-out infinite;
  content: "";
  inset: 0;
}

.pm-oferta-status--reservado .pm-oferta-bolinha::after,
.pm-oferta-status--preparacao .pm-oferta-bolinha::after {
  display: none;
}

@keyframes pm-pulso {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(3);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-oferta-bolinha::after {
    animation: none;
  }
}

.pm-oferta-rotulo {
  margin: 0 0 2px;
  color: #8a8a8a;
  font-size: 12.5px;
}

/* selos de apoio: o que responde "posso confiar?" antes do clique */
.pm-oferta-apoio {
  padding: 16px 0 0;
  border-top: 1px solid #f0f0f0;
  margin: 18px 0 0;
  list-style: none;
}

.pm-oferta-apoio li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  color: #5c5c5c;
  font-size: 13px;
  gap: 10px;
  line-height: 1.35;
}

.pm-oferta-apoio li:last-child {
  margin-bottom: 0;
}

.pm-oferta-apoio svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #ff2b2b;
}

.pm-lado-oferta .price,
.pm-lado-oferta .price-list {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #1f1f1f;
}

.pm-lado-oferta .product-meta__price-list-container {
  margin-bottom: 16px;
}

.pm-lado-oferta .button {
  width: 100%;
}

/* ------------------------------------------------------------------
   Botao de contato: e a acao principal da pagina
   ------------------------------------------------------------------ */
.pm-whats {
  position: relative;
  display: flex !important;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #21c65a 0%, #15a848 100%) !important;
  box-shadow: 0 4px 14px rgba(21, 168, 72, 0.32);
  color: #ffffff !important;
  gap: 12px;
  text-align: left;
  transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.pm-whats:hover {
  box-shadow: 0 7px 20px rgba(21, 168, 72, 0.42);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.pm-whats:active {
  box-shadow: 0 2px 8px rgba(21, 168, 72, 0.3);
  transform: translateY(1px);
}

.pm-whats-icone {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.pm-whats-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.pm-whats-linha1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.pm-whats-linha2 {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.86;
  text-transform: none;
}

/* onda que sai de onde o dedo/mouse tocou */
.pm-whats-onda {
  position: absolute;
  width: 12px;
  height: 12px;
  animation: pm-onda 0.6s ease-out forwards;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@keyframes pm-onda {
  to {
    height: 420px;
    opacity: 0;
    width: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-whats,
  .pm-whats-onda {
    animation: none;
    transition: none;
  }
}

@media screen and (max-width: 999px) {
  .pm-lado-oferta {
    margin-top: 18px;
  }
}

@media screen and (max-width: 999px) {
  .pm-faixa-trilho {
    height: min(calc(100vh - 330px), 540px, calc(100vw / var(--pm-prop)));
    min-height: min(280px, calc(100vw / var(--pm-prop)));
  }
  .pm-faixa-seta {
    width: 36px;
    height: 36px;
  }
  .pm-faixa-seta--ant {
    left: 8px;
  }
  .pm-faixa-seta--prox {
    right: 8px;
  }
  .pm-produto-card {
    /* !important porque no mobile o tema poe margin-top no .product e vence */
    margin-top: -22px !important;
    padding: 22px 18px 6px;
  }
}

/* ------------------------------------------------------------------
   Visualizador de fotos em tela cheia (visualizador.js)
   ------------------------------------------------------------------ */
.pm-sem-rolagem {
  overflow: hidden;
}

.pm-visor {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #0b0b0d;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.pm-visor--aberto {
  opacity: 1;
  pointer-events: auto;
}

.pm-visor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  color: #ffffff;
}

.pm-visor-contador {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.pm-visor-acoes {
  display: flex;
  gap: 8px;
}

.pm-visor-botao {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.pm-visor-botao:hover {
  background: rgba(255, 255, 255, 0.24);
}

.pm-visor-botao svg {
  width: 19px;
  height: 19px;
}

.pm-visor-palco {
  display: flex;
  overflow: hidden;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.pm-visor-foto {
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  object-fit: contain;
  transition: transform 0.18s ease;
  user-select: none;
}

.pm-visor--ampliado .pm-visor-foto {
  cursor: grab;
}

.pm-visor-foto--arrastando {
  cursor: grabbing !important;
  transition: none;
}

.pm-visor-seta {
  position: absolute;
  top: 50%;
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.18s ease;
}

.pm-visor-seta:hover {
  background: rgba(255, 255, 255, 0.28);
}

.pm-visor-seta svg {
  width: 22px;
  height: 22px;
}

.pm-visor-seta--ant {
  left: 20px;
}

.pm-visor-seta--prox {
  right: 20px;
}

.pm-visor-tiras {
  display: flex;
  justify-content: center;
  padding: 14px 16px 18px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pm-visor-tiras::-webkit-scrollbar {
  display: none;
}

.pm-visor-tira {
  overflow: hidden;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}

.pm-visor-tira:hover {
  opacity: 0.85;
}

.pm-visor-tira.is-atual {
  border-color: #ff2b2b;
  opacity: 1;
}

.pm-visor-tira img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 749px) {
  .pm-visor-seta {
    width: 40px;
    height: 40px;
  }
  .pm-visor-seta--ant {
    left: 8px;
  }
  .pm-visor-seta--prox {
    right: 8px;
  }
  .pm-visor-tira {
    width: 48px;
    height: 48px;
  }
  .pm-visor-palco {
    padding: 0 6px;
  }
}

/* ------------------------------------------------------------------
   Ficha do veiculo (pagina do carro)
   Ano, km, cambio e cor viravam texto corrido no meio da descricao.
   Aqui viram cards com icone, logo abaixo do botao de contato.
   Montado pelo cards.js.
   ------------------------------------------------------------------ */
.pm-ficha {
  display: grid;
  /* duas colunas na coluna do produto (~486px); vira uma so em tela estreita */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 20px;
  margin: 6px 0 24px;
  padding: 18px 0 4px;
  border-top: 1px solid #ececec;
}

.pm-ficha-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

/* rotulo pequeno em cima, com o icone junto */
.pm-ficha-rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 400;
  color: #8a8a8a;
}

.pm-ficha-rotulo svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #ff2b2b;
}

/* valor maior embaixo */
.pm-ficha-valor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f1f1f;
  /* break-word e nao anywhere: anywhere partia "2021/2022" no meio */
  overflow-wrap: break-word;
  hyphens: none;
}

/* bolinha da cor da pintura: brilho no alto e sombra embaixo, pra dar o
   aspecto de lataria envernizada em vez de um circulo chapado */
/* A bolinha da cor do carro.

   O efeito de esfera era forte demais pro tamanho: o brilho cobria 46% do
   topo e a sombra escurecia a base, entao o olho lia so o miolo como sendo a
   bolinha, e ela parecia cortada em cima e embaixo. Num carro branco ou prata
   era pior, porque a faixa escura da base virava quase um risco.

   Aqui o brilho vai ate 26% e a sombra e leve. Continua parecendo tinta de
   carro, que e o ponto, sem comer as duas pontas. 20px em vez de 19 porque
   numero par fecha melhor o circulo em tela comum. */
.pm-tinta {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42) 0%,
                            rgba(255, 255, 255, 0.06) 26%,
                            rgba(255, 255, 255, 0) 38%),
    linear-gradient(345deg, rgba(0, 0, 0, 0.22) 0%,
                            rgba(0, 0, 0, 0) 34%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.10);
}

/* o reflexo pontual, como a luz batendo no capo */
.pm-tinta::after {
  position: absolute;
  top: 3px;
  left: 4.5px;
  width: 5px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  content: "";
  filter: blur(0.5px);
  transform: rotate(-28deg);
}

@media screen and (max-width: 749px) {
  .pm-ficha {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
  }
  .pm-ficha-valor {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------
   3. Card de veiculo: ficha rapida (ano e km) e botao de fotos
   Os elementos abaixo sao criados pelo cards.js.
   ------------------------------------------------------------------ */

/* versao/cambio, logo abaixo do nome do carro */
.pm-versao {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #6b6b6b;
}

/* linha de ano + quilometragem */
.pm-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 10px 0 2px;
  font-size: 14px;
  color: #282828;
}

.pm-spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pm-spec svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #8a8a8a;
}

/* botao no lugar do "Ver parcelas" da referencia */
.pm-botao {
  display: block;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 8px;
  background-color: #1f1f1f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.pm-botao:hover {
  background-color: #ff2b2b;
  color: #ffffff;
}

/* tudo ancorado na esquerda.
   O card do tema vem centralizado de fabrica (price-list--centered), entao
   precisa desmontar o alinhamento tambem nos filhos, nao so no container. */
.pm-info,
.pm-info > *,
.pm-info .pm-preco-caixa,
.pm-info [class*="title"],
.pm-info [class*="vendor"] {
  text-align: left;
}

.pm-info .pm-preco-caixa {
  display: flex;
  justify-content: flex-start;
}

.pm-specs {
  justify-content: flex-start;
}

/* preco em destaque, como na referencia: maior que o nome do carro */
.pm-preco,
.pm-preco-caixa {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f1f1f;
}

.pm-preco-caixa {
  margin-top: 8px;
}

/* o conteudo do card fica na esquerda, mas o rotulo do botao continua
   centralizado dentro dele, como na referencia */
.pm-info > .pm-botao {
  text-align: center;
}

/* ------------------------------------------------------------------
   Altura padronizada: os botoes tem que fechar na mesma linha
   Nome de carro as vezes ocupa 1 linha, as vezes 2, e isso empurrava
   tudo abaixo pra baixo, deixando um botao desalinhado do vizinho.
   Reserva o espaco de 2 linhas no nome e prende o botao no rodape.
   ------------------------------------------------------------------ */
.pm-card {
  display: flex;
  flex-direction: column;
}

.pm-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.pm-titulo {
  display: block;
  min-height: 2.6em;
  line-height: 1.3;
}

/* versao pode faltar em alguns carros: mantem o espaco pra nao desalinhar */
.pm-versao {
  min-height: 1.35em;
}

/* empurra o botao pro fim do card, independente do conteudo acima */
.pm-info > .pm-botao {
  margin-top: auto;
}

/* a ficha de ano/km fica colada no preco, e o preco logo acima do botao */
.pm-info > .pm-preco-caixa {
  margin-bottom: 12px;
}

/* Foto do card sempre em 3:4.

   O tema desenha cada foto na proporcao original dela: um padding-bottom
   inline, calculado imagem por imagem, que sobrou da foto que a Shopify tinha
   ali antes das do cadastro. Deixado solto, o card da BMW ficava baixo e largo
   ao lado da Strada alta e estreita, e a fileira desalinhava.

   A regra vale pro <product-item> cru, e nao so pro .pm-card.

   A diferenca importa e e visivel: o .pm-card so existe depois que o cards.js
   roda, e ele roda depois de buscar o catalogo no CRM. Ate la o visitante fica
   olhando a grade do tema, com um quadro diferente por carro. Num 4G isso
   passava de dois segundos, e a home parecia ter voltado pro layout antigo.
   Presa ao <product-item>, que ja vem no HTML, a moldura nasce certa na
   primeira pintura e o cards.js so troca o conteudo dentro dela.

   O !important e pra vencer o style inline do tema. */
.pm-card [class*="aspect-ratio"],
product-item [class*="aspect-ratio"] {
  /* o tema define a altura por aspect-ratio (a var vem no style inline);
     o padding-bottom e so o fallback antigo, entao vai a zero pra nao somar */
  aspect-ratio: 3 / 4 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

.pm-card [class*="aspect-ratio"] img,
.pm-card [class*="product-image"] img,
product-item [class*="aspect-ratio"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* no mobile a grade e de 2 colunas: card estreito pede escala menor */
@media screen and (max-width: 749px) {
  .pm-versao {
    font-size: 12px;
  }
  .pm-specs {
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 13px;
  }
  .pm-spec svg {
    width: 15px;
    height: 15px;
  }
  .pm-botao {
    padding: 11px 8px;
    font-size: 12.5px;
  }
  .pm-preco,
  .pm-preco-caixa {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------------
   Ficha completa do veiculo: procedencia, documentacao e opcionais
   (montada pelo ficha.js)

   O cinza "A verificar" e proposital: campo nao conferido nao pode
   parecer ausencia do item.
   ------------------------------------------------------------------ */
.pm-ficha-completa {
  margin-top: 26px;
}

.pm-amostra {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #ffe0a3;
  border-radius: 10px;
  margin-bottom: 22px;
  background: #fffaf0;
  color: #7a5a10;
  font-size: 13px;
  gap: 10px;
  line-height: 1.45;
}

.pm-amostra-icone {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* selos de confianca, logo abaixo da ficha rapida */
.pm-destaques {
  display: flex;
  flex-wrap: wrap;
  margin: -8px 0 22px;
  gap: 8px;
}

.pm-destaque {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 1px solid #cdeed7;
  border-radius: 20px;
  background: #f1fbf5;
  color: #17703c;
  font-size: 12.5px;
  font-weight: 600;
  gap: 8px;
}

.pm-destaque-icone {
  width: 14px;
  height: 14px;
}

.pm-bloco {
  padding-top: 22px;
  border-top: 1px solid #ececec;
  margin-bottom: 24px;
}

.pm-bloco-titulo {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: #1f1f1f;
  gap: 12px;
}

.pm-bloco-icone {
  width: 19px;
  height: 19px;
  color: #ff2b2b;
}

/* procedencia: rotulo de um lado, selo do outro */
.pm-doc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px 30px;
}

.pm-doc-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f4f4f4;
  gap: 14px;
}

.pm-doc-rotulo {
  color: #6d6d6d;
  font-size: 13.5px;
}

.pm-doc-valor {
  flex-shrink: 0;
}

.pm-selo {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
}

.pm-selo-icone {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pm-selo--bom {
  color: #17703c;
}

.pm-selo--atencao {
  color: #b4560f;
}

.pm-selo--duvida {
  color: #8f8f8f;
  font-weight: 500;
}

.pm-doc-obs {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 16px 0 0;
  background: #f7f7f7;
  color: #4a4a4a;
  font-size: 13.5px;
  gap: 9px;
  line-height: 1.45;
}

.pm-doc-obs-icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #8f8f8f;
}

/* opcionais */
.pm-opcionais {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px 22px;
  list-style: none;
}

.pm-opc {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 10px;
}

.pm-opc-icone {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pm-opc--tem {
  color: #2c2c2c;
}

.pm-opc--tem .pm-opc-icone {
  color: #17703c;
}

.pm-opc--nao {
  color: #9a9a9a;
}

.pm-opc-titulo {
  margin: 20px 0 10px;
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-vazio {
  color: #8f8f8f;
  font-size: 13.5px;
}

@media screen and (max-width: 749px) {
  .pm-doc {
    grid-template-columns: 1fr;
  }
  .pm-opcionais {
    grid-template-columns: 1fr;
  }
  .pm-bloco-titulo {
    font-size: 16px;
  }
}

/* a descricao do vendedor: bloco de texto, nao deposito de dado tecnico */
.pm-sobre {
  color: #3d3d3d;
  font-size: 15px;
  line-height: 1.6;
}

/* o tema estiliza h2 dentro da descricao como titulo enorme; aqui o titulo
   segue o tamanho dos outros blocos da ficha */
.pm-sobre .pm-sobre-titulo {
  /* o h2 do tema vem como block e derrubava o flex do .pm-bloco-titulo:
     o icone colava no texto (0px) enquanto os outros dois blocos tinham 12px.
     Repetido aqui porque este seletor e mais especifico e precisa vencer. */
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid #ececec;
  margin: 26px 0 14px;
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

.pm-sobre p {
  margin: 0 0 12px;
}

.pm-sobre strong,
.pm-sobre b {
  color: #1f1f1f;
  font-weight: 700;
}

.pm-sobre ul {
  padding-left: 20px;
  margin: 0 0 14px;
}

.pm-sobre li {
  margin-bottom: 5px;
}

/* a ficha completa vem logo depois, sem repetir a linha divisoria */
.pm-sobre + .pm-ficha-completa .pm-bloco:first-of-type {
  padding-top: 22px;
}

/* ------------------------------------------------------------------
   Cabecalho do card: marca, nome do carro e uma unica divisoria

   O tema desenha um risco embaixo do bloco de titulo e a ficha desenha
   outro logo abaixo. Dois riscos separando a mesma coisa. Fica so o da
   ficha, que e o que de fato divide titulo de dados.
   ------------------------------------------------------------------ */
.pm-lado-conteudo .product-meta {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* marca e nome do carro andam juntos: sao a mesma informacao */
.pm-lado-conteudo .product-meta__vendor {
  margin-bottom: 2px;
}

.pm-lado-conteudo .product-meta__title {
  margin-top: 4px;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Carro em preparacao (ainda sem foto propria)

   Duas artes da mesma peca, cada uma no formato do lugar onde entra:
     3:4  -> cards de listagem, pra fileira nao desalinhar
     16:9 -> pagina do carro, ocupando sozinha a largura que varias
             fotos ocupariam
   ------------------------------------------------------------------ */
.pm-faixa--preparacao {
  /* mesmo preto do fundo da arte: a foto parece se estender ate a borda */
  background-color: #0a0a0c;
}

.pm-faixa-foto--larga {
  width: 100%;
  aspect-ratio: auto;
  background: transparent;
  cursor: default;
}

.pm-faixa-foto--larga img {
  /* contain pra arte aparecer inteira; o fundo preto disfarca a sobra */
  object-fit: contain;
}

/* sem varias fotos, nao ha o que navegar */
.pm-faixa--preparacao .pm-faixa-seta,
.pm-faixa--preparacao .pm-faixa-contador {
  display: none;
}

/* ------------------------------------------------------------------
   Cabecalho mais enxuto

   Barra de aviso + cabecalho comiam 178px, 20% da altura util numa tela
   de 900. Reduzindo a logo e o respiro em volta, sobra tela pro conteudo
   sem perder legibilidade da marca nem do menu.
   ------------------------------------------------------------------ */
.announcement-bar__message {
  padding-top: 11px;
  padding-bottom: 11px;
}

.header__wrapper {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.header__logo img {
  height: 58px !important;
  width: auto !important;
}

@media screen and (max-width: 999px) {
  .header__logo img {
    height: 46px !important;
  }
  .header__wrapper {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}

/* ------------------------------------------------------------------
   Preço abaixo da tabela FIPE

   Dois lugares, cada um com o peso certo:
     listagem -> etiqueta sobre a foto, pra pegar o olho na varredura
     pagina   -> faixa abaixo do preço, com o número da diferença
   A FIPE é referência pública de mercado. Aqui ela informa, não promete.
   ------------------------------------------------------------------ */
/* Pilula verde, no corpo do card e nao sobre a foto.
   Sobre a foto ela competia com a imagem e sumia em carro claro; aqui,
   contra o branco do card, e o unico elemento colorido antes do nome. */
.pm-pilula-fipe {
  display: inline-flex;
  /* o card e uma coluna flex: sem isto a pilula estica ate a borda,
     virando uma barra em vez de uma pilula do tamanho do texto */
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 20px;
  margin-bottom: 8px;
  background: #12803f;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.pm-pilula-fipe svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pm-pilula-fipe strong {
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .pm-pilula-fipe {
    padding: 4px 9px;
    font-size: 10.5px;
    gap: 5px;
  }
  .pm-pilula-fipe svg {
    width: 11px;
    height: 11px;
  }
}

.pm-preco-de {
  margin: 0 0 1px;
  color: #9a9a9a;
  font-size: 14px;
}

.pm-preco-de s {
  text-decoration-thickness: 1px;
}

/* faixa de destaque no bloco de oferta */
/* Grafite, e nao verde: o verde ja e do botao de contato, que fica 16px
   abaixo. Duas cores iguais competindo faziam nenhuma das duas vencer.
   Escuro tambem e o unico bloco desse tom no card branco, entao o olho vai
   direto nele. */
.pm-fipe {
  padding: 13px 15px;
  border-radius: 10px;
  margin: 2px 0 16px;
  background: #1f1f22;
}

.pm-fipe-selo {
  display: flex;
  align-items: center;
  /* verde da marca do contato, nao amarelo: sobre o grafite ele le bem e
     conversa com a pilula verde que aparece acima, no nome do carro */
  color: #2ee06a;
  font-size: 16px;
  font-weight: 700;
  gap: 9px;
  line-height: 1.2;
}

.pm-fipe-seta {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.pm-fipe-detalhe {
  margin: 6px 0 0;
  color: #b9b9c0;
  font-size: 12px;
  line-height: 1.35;
}

.pm-fipe-detalhe strong {
  color: #2ee06a;
  font-weight: 700;
}



/* ------------------------------------------------------------------
   Um card só, em qualquer seção

   As duas vitrines da home vinham de blocos diferentes e chegavam com
   aparências diferentes: título de 15px num, 16px no outro, e a marca
   repetida só num deles. Aqui os dois passam a ler igual.
   ------------------------------------------------------------------ */
.pm-card .pm-titulo {
  margin-bottom: 0;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.3;
}

/* a marca sai do card: o nome do carro ja comeca com ela
   ("TOYOTA" + "TOYOTA COROLLA 2.0 XEI"). Na pagina do carro ela fica,
   porque la o nome tem hierarquia propria. */
.pm-card [class*="product-vendor"],
.pm-card .product-item-meta__vendor {
  display: none;
}

/* mesmo respiro entre as partes, venha o card de onde vier */
.pm-card .pm-versao {
  margin-top: 5px;
}

.pm-card .pm-specs {
  margin-top: 10px;
  margin-bottom: 0;
}

.pm-card .pm-preco-caixa {
  margin-top: 10px;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------
   Rodapé: assinatura da Criativvo e apresentação da loja
   ------------------------------------------------------------------ */
/* WOFF2 no lugar do OTF: mesma fonte, 57 KB a menos.

   O OTF vinha inteiro, com todo alfabeto e sinal que a fonte tem, pra
   escrever uma palavra so no rodape. O WOFF2 e comprimido pra web e este aqui
   ficou com o basico latino, o que basta pra assinatura e sobra pra qualquer
   texto em portugues. Refazer, se um dia precisar:

     python3 -m fontTools.subset _fonte/midia/avestiana-black.otf \
       --unicodes="U+0020-007E,U+00A0-00FF" --layout-features="kern,liga" \
       --flavor=woff2 --output-file=assets/avestiana-black.woff2 */
@font-face {
  font-family: "AVEstiana";
  src: url("/assets/avestiana-black.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
}

.pm-assinatura {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pm-assinatura:hover {
  opacity: 1;
}

.pm-assinatura-rotulo {
  font-size: 12.5px;
}

/* a marca segue a regra da casa: minusculo, AVEstiana Black, spacing
   levemente fechado */
.pm-assinatura-marca {
  /* "inherit" numa lista de font-family invalida a regra inteira */
  font-family: "AVEstiana", "Rubik", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.pm-sobre-loja {
  max-width: 320px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.85;
}

/* a assinatura saiu de dentro da linha de copyright e virou uma linha
   propria acima dela, ancorada na esquerda */
footer .footer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

footer .footer__aside .pm-assinatura {
  order: -1;
}

/* ------------------------------------------------------------------
   Rodapé: navegação por marca e por carroceria
   ------------------------------------------------------------------ */
.pm-link-filtro {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* a contagem e apoio, nao concorre com o nome da marca. Entre parenteses
   porque "Toyota 6" solto parece parte do nome */
.pm-quantidade {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.42;
}

.pm-quantidade::before {
  content: "(";
}

.pm-quantidade::after {
  content: ")";
}

.pm-link-filtro--atual {
  color: var(--text-color, currentColor);
  font-weight: 600;
  opacity: 1;
}

/* Duas colunas de marca so onde cabe. Na largura do celular a coluna e
   estreita e "Volkswagen" quebrava no meio da palavra. */
@media screen and (min-width: 1000px) {
  .pm-coluna-marcas .linklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* ------------------------------------------------------------------
   Carro que já foi vendido
   ------------------------------------------------------------------
   O link do anúncio já circulou no WhatsApp de gente de verdade, então
   a página continua existindo. O que muda é o que ela diz: para de
   vender e passa a convidar pro resto do pátio. */
.pm-vendido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: #1f1f22;
  color: #fff;
  border-radius: var(--radius-card, 0);
}

.pm-vendido strong {
  font-size: 17px;
  font-weight: 800;
}

.pm-vendido span {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.8;
}

.pm-vendido-botao {
  margin-top: 4px;
  padding: 10px 18px;
  background: #fff;
  color: #1f1f22;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* sem preço, sem botão de compra e sem faixa de FIPE num carro vendido */
.pm-carro-vendido .pm-fipe,
.pm-carro-vendido .pm-pilula-fipe { display: none; }


/* ------------------------------------------------------------------
   Card da listagem: marca em cima, carro embaixo
   ------------------------------------------------------------------
   Mesma leitura da pagina do carro. O nome vinha inteiro numa linha so
   ("TOYOTA COROLLA CROSS XRE"), em caixa alta, repetindo a marca. */
.pm-card-marca {
  display: block;
  margin-bottom: 2px;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Barra de filtros da listagem (filtros.js)
   ------------------------------------------------------------------ */
.pm-filtros {
  margin-bottom: 22px;
}

.pm-filtro-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  background: #fff;
  color: #3a3a3a;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.pm-chip:hover {
  border-color: #b5b5b5;
  transform: translateY(-1px);
}

.pm-chip--ativo {
  border-color: #1f1f1f;
  background: #1f1f1f;
  color: #fff;
}

.pm-chip-n {
  font-size: 11.5px;
  opacity: 0.5;
}

/* a logo é o que faz a marca ser reconhecida antes da leitura */
.pm-filtro-logo {
  width: 22px;
  height: 16px;
  object-fit: contain;
}

/* no chip ativo o fundo é escuro: a logo colorida precisa de um respiro */
.pm-chip--ativo .pm-filtro-logo {
  padding: 1px;
  border-radius: 3px;
  background: #fff;
}

.pm-filtro-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid #eee;
  margin-top: 14px;
}

.pm-filtro-contagem {
  padding-top: 10px;
  color: #6b6b6b;
  font-size: 13.5px;
  font-weight: 600;
}

.pm-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  color: #6b6b6b;
  font-size: 13px;
}

.pm-ordenar select {
  padding: 7px 10px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* No celular o "Ordenar por" quebrava em duas linhas e empurrava o select
   pra cima da contagem. Sem o rotulo o select ja se explica sozinho, porque
   ele mostra "Mais recentes" escrito. */
@media (max-width: 560px) {
  .pm-ordenar > span { display: none; }
  .pm-ordenar select { width: 100%; }
  .pm-filtro-topo { gap: 10px; }

  /* Dez marcas quebradas em cinco linhas empurravam o primeiro carro pra
     380px abaixo da dobra: quem abre no celular via filtro, nao carro.
     Cada linha vira um trilho que rola de lado, e sobra so ~110px. */
  .pm-filtro-linha {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* o trilho sangra ate a borda da tela pra ficar claro que continua */
    margin-left: -20px;
    margin-right: -20px;
    padding: 2px 20px;
  }
  .pm-filtro-linha::-webkit-scrollbar { display: none; }
  .pm-chip { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------
   Entrada dos cards
   ------------------------------------------------------------------
   O escalonamento é curto de propósito: passa a sensação de que a lista
   respondeu ao filtro, sem virar espera. Quem pediu menos movimento no
   sistema não vê animação nenhuma. */
@keyframes pm-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pm-entra {
  animation: pm-entrada 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--pm-atraso, 0ms);
}

/* O card e uma superficie, nao um retangulo transparente.

   Antes ele nao tinha fundo, borda, canto nem respiro: era foto e texto soltos
   na pagina. No hover entrava so uma sombra, e como nao havia margem entre a
   sombra e o conteudo, ela desenhava um contorno rente ao texto e ao botao. De
   longe parecia um risco claro grudado no card, e nao um card levantando.

   Agora a moldura existe o tempo todo (fundo branco, borda de 1px, canto de
   14px e um respiro de 10px em volta da foto), e o hover so aumenta o que ja
   esta la: sobe 4px, escurece a borda de leve e abre a sombra. */
.pm-card {
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 16px;
  /* Sombra de apoio no repouso, no lugar de uma borda desenhada. Linha de 1px
     em volta de cada card vira uma grade de risquinhos quando os cards estao
     lado a lado; a sombra separa o card do fundo sem desenhar nada. */
  box-shadow: 0 1px 3px rgba(20, 30, 25, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* A grade do tema corta o que passa dela (overflow hidden). Com o card subindo
   4px no hover, a sombra batia nessa borda invisivel e aparecia cortada, do
   lado e em cima. A grade nao precisa cortar nada: quem rola horizontal e a
   faixa da pagina do carro, que e outro elemento. */
.product-list__inner,
[class*="ai-collection-tabs__grid-"],
[class*="ai-collection-tabs__panel-"] {
  overflow: visible;
}

/* a foto acompanha o canto do card, senao sobra bico quadrado no arredondado */
.pm-card .product-item__image-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

.pm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

/* a foto do card ganha um leve zoom no hover, dentro da moldura
   (o overflow e o canto arredondado ja estao na regra do .pm-card acima) */
.pm-card .product-item__primary-image {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pm-card:hover .product-item__primary-image {
  transform: scale(1.05);
}

/* nome do carro no card: um pouco maior, que é o que se lê primeiro */
.pm-card .pm-titulo {
  font-size: 16px !important;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .pm-entra { animation: none; }
  .pm-card, .pm-card .product-item__primary-image { transition: none; }
  .pm-card:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Página de contato (contato.js)
   ------------------------------------------------------------------
   Sem formulário de propósito: o que existia postava pra Shopify e a
   mensagem sumia. Numa revenda quem fecha é a pessoa, então a página
   leva direto pro WhatsApp e apresenta quem vai atender. */
.pm-contato {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.pm-contato-sobretitulo {
  margin: 0 0 10px;
  color: #ff2b2b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pm-contato-titulo {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.pm-contato-texto {
  max-width: 560px;
  margin: 0 0 26px;
  color: #5c5c5c;
  font-size: 16px;
  line-height: 1.6;
}

.pm-contato-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.pm-botao-zap,
.pm-socio-zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.pm-botao-zap svg,
.pm-socio-zap svg {
  width: 19px;
  height: 19px;
}

.pm-botao-zap:hover,
.pm-socio-zap:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.pm-botao-mapa {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.pm-botao-mapa:hover {
  border-color: #1f1f1f;
  transform: translateY(-2px);
}

.pm-contato-endereco {
  margin: 0;
  color: #7a7a7a;
  font-size: 14.5px;
  line-height: 1.6;
}

.pm-socios {
  padding-top: 44px;
  border-top: 1px solid #ececec;
  margin-top: 52px;
}

.pm-socios-titulo {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.pm-socios-linha {
  margin: 0 0 30px;
  max-width: 46ch;
  color: #6b6b6b;
  font-size: 15.5px;
  line-height: 1.6;
}

.pm-socios-grade {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.pm-socio {
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 20px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pm-socio:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
}

/* O retrato é o bloco principal do card.

   A foto é 1080x1080 de estúdio, com o sócio de corpo e fundo claro. Em
   `cover` ancorado no topo, o enquadramento cai no rosto e no peito, que é
   onde está a camisa com a logo da Prime. O degradê no pé é só pra foto não
   terminar num corte seco em cima do texto. */
.pm-socio-retrato {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f7f7f8 0%, #efeff1 100%);
}

.pm-socio-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.pm-socio-retrato::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  pointer-events: none;
}

.pm-socio-corpo {
  padding: 4px 26px 26px;
}

.pm-socio-papel {
  display: block;
  margin-bottom: 6px;
  color: #E11A22;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-socio-nome {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pm-socio-texto {
  margin: 0 0 20px;
  color: #5c5c5c;
  font-size: 15px;
  line-height: 1.65;
}

.pm-socio-zap {
  padding: 12px 22px;
  font-size: 14.5px;
}

@media (max-width: 560px) {
  /* No celular o card ocupa a tela toda, então a foto pode ser mais alta sem
     empurrar demais: é o que dá o efeito de estar olhando pra pessoa. */
  .pm-socio-retrato { aspect-ratio: 1 / 1; }
  .pm-socios-titulo { font-size: 23px; }
}

/* ------------------------------------------------------------------
   Barra fixa de preço e WhatsApp, no celular

   Nasceu de uma medição: na página do SW4 num iPhone, o preço estava a
   1.857px do topo e o botão do vendedor a 1.907px. Duas telas e pouco de
   rolagem pra descobrir quanto custa e pra chamar a loja, sendo que quase
   todo acesso é por celular. No desktop nada disso acontece, porque preço e
   botão vivem na coluna da direita: por isso a barra só existe até 900px.
   ------------------------------------------------------------------ */
.pm-barra-preco {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #ececec;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.10);
  backdrop-filter: saturate(180%) blur(8px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.pm-barra-preco--oculta {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.pm-barra-preco-valor {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.pm-barra-preco-valor span {
  color: #7a7a7a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pm-barra-preco-valor strong {
  color: #111;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pm-barra-preco-zap {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  /* 48px de altura: alvo de toque confortável, acima dos 44 recomendados */
  padding: 13px 18px;
  border-radius: 999px;
  background: #21c65a;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}

.pm-barra-preco-zap svg {
  width: 19px;
  height: 19px;
}

/* espaço no fim da página pra barra não tampar o rodapé */
body.pm-tem-barra-preco {
  padding-bottom: 78px;
}

/* O botao verde flutuante sai enquanto a barra estiver na tela.

   Ele vive num web component com shadow DOM (<whatsup-whatsapp-button>), entao
   so da pra alcancar o elemento de fora, nao o botao de dentro. Some inteiro,
   e nao sobe, porque dois botoes verdes de WhatsApp na mesma tela e repeticao:
   o da barra e maior, esta perto do preco e ja leva a mensagem com o nome do
   carro. O flutuante mandava a conversa generica e ainda cobria o texto do
   outro. */
body.pm-tem-barra-preco whatsup-whatsapp-button {
  display: none !important;
}

@media (min-width: 901px) {
  .pm-barra-preco { display: none; }
  body.pm-tem-barra-preco { padding-bottom: 0; }
}

/* ------------------------------------------------------------------
   Topo com altura reservada: a página não pula mais ao carregar

   Medido na página do SW4 num iPhone: aos 99ms o conteúdo inteiro subia de
   136px para 112px. Um pulo de 24px, sozinho, valia 0,53 de CLS (o Google
   considera ruim acima de 0,25). Na prática é a pessoa começando a ler e o
   texto fugindo, ou pior, tocando num botão que se moveu.

   A causa está no topo: a barra de endereço e o cabeçalho fecham em 112px,
   mas antes disso a altura oscila (troca de fonte, ícone que chega, tamanho
   que só é decidido depois). Em vez de caçar cada motivo, o espaço é reservado
   desde o primeiro pixel: com o topo travado, nada abaixo se mexe.
   ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
  .announcement-bar {
    min-height: 44px;
    box-sizing: border-box;
  }

  .header {
    min-height: 68px;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
   Quantas fotos de carro cabem lado a lado na listagem

   O tema so conhece dois tamanhos de tela aqui: ate 1399px ele poe 2 carros
   por linha, e de 1400px pra cima poe 5. Nao existe degrau no meio, entao
   qualquer notebook comum (1280px, 1366px, ou a janela com o editor aberto do
   lado) cai no valor de celular e mostra dois cards ocupando meia tela cada.

   Numa listagem cheia isso so parece grande demais. Na Pick-Up, que tem dois
   carros, a pagina inteira vira dois cartazes e da a impressao de patio vazio,
   que e o contrario do que a pagina existe pra dizer.

   Os degraus que faltavam entram aqui, nos mesmos pontos de quebra do tema
   (741 / 1000 / 1400). O !important e porque o tema declara essa variavel num
   <style> preso ao id da secao, e id ganha de qualquer seletor de classe.
   ------------------------------------------------------------------ */
@media screen and (min-width: 741px) and (max-width: 999px) {
  .shopify-section--main-collection {
    --section-products-per-row: 3 !important;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1399px) {
  .shopify-section--main-collection {
    --section-products-per-row: 4 !important;
  }
}

/* ------------------------------------------------------------------
   14. Texto que o buscador le

   A home era video e carrossel de marca, e a listagem era so card. Nenhuma
   frase dizia o que a loja faz nem onde fica, entao o Google nao tinha por
   que mostrar o site pra quem procura "seminovo em Penapolis". Estes blocos
   entram pelo _fonte/seo.py, no fim do build.

   Herdam a fonte e a cor do tema (var --heading-font-family / --text-color)
   pra nao parecerem colados de outro site.
   ------------------------------------------------------------------ */
.pm-sobre {
  background: #f6f6f6;
  padding: 56px 20px;
}

.pm-sobre__caixa {
  max-width: 760px;
  margin: 0 auto;
}

.pm-sobre__titulo {
  font-family: var(--heading-font-family, inherit);
  font-weight: var(--heading-font-weight, 700);
  text-transform: var(--heading-text-transform, none);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  margin: 0 0 18px;
  color: #0a0a0a;
}

.pm-sobre p {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  margin: 0 0 14px;
}

.pm-sobre a {
  color: #d81212;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pm-sobre__pe {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e2e2e2;
  font-size: 15px;
  color: #555;
}

/* paragrafo de contexto embaixo do H1 da listagem */
/* O texto do topo da listagem fica embaixo de um titulo centralizado, entao
   ele tambem tem que estar centralizado. O max-width sozinho nao faz isso: a
   caixa nascia com 70ch encostada na esquerda do container, e como o texto
   dentro dela e que vinha centralizado, o paragrafo aparecia deslocado uns
   90px pra esquerda do H1. Parecia defeito de renderizacao, e era margem. */
.pm-intro {
  margin: 10px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  max-width: 62ch;
}

/* ------------------------------------------------------------------
   15. Perguntas frequentes (pagina de contato)
   Alem de responder o cliente, e o bloco que as IAs copiam inteiro quando
   alguem pergunta "que horas abre a Prime Motors".
   ------------------------------------------------------------------ */
.pm-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.pm-faq__titulo {
  font-family: var(--heading-font-family, inherit);
  font-weight: var(--heading-font-weight, 700);
  text-transform: var(--heading-text-transform, none);
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 0 0 24px;
  color: #0a0a0a;
}

.pm-faq__item {
  padding: 16px 0;
  border-top: 1px solid #e2e2e2;
}

.pm-faq__item:last-child {
  border-bottom: 1px solid #e2e2e2;
}

.pm-faq__pergunta {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0a0a0a;
}

.pm-faq__resposta {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ------------------------------------------------------------------
   16. Segunda vitrine da home (bloco de abas do tema)

   Dois problemas de acabamento:

   a) A grade era fixa em 4 / 3 / 2 colunas. Como cada aba tem a quantidade de
      carro que a loja TEM naquela categoria, e nao um multiplo de 4, a ultima
      linha ficava pela metade e sobrava um buraco branco na direita. Com hatch
      e picape, que tem 1 e 2 carros, a linha inteira ficava torta.

      Vira flex com as mesmas larguras: linha cheia continua igual (a conta
      fecha em 100%), e linha incompleta fica centralizada, que le como escolha
      e nao como falta.

   b) A secao nao tinha titulo. A de cima anuncia "Ultimas novidades" e esta
      comecava direto nas abas, sem dizer o que e. O titulo entra pelo
      _fonte/seo.py, com a mesma classe do titulo da outra secao.
   ------------------------------------------------------------------ */
/* O !important nao e preguica: o bloco declara o `display: grid` num <style>
   solto no corpo da pagina, que o navegador le DEPOIS desta folha. Sem ele a
   regra abaixo perde por ordem, nao por especificidade. Mesmo motivo do
   !important da grade de listagem, mais acima. */
[class*="ai-collection-tabs__grid-"] {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* 5 por linha, igual a vitrine de cima: as duas secoes mostram carro no mesmo
   tamanho e no mesmo ritmo. Antes esta tinha 4 e a de cima 5, e o desencontro
   aparecia na hora de comparar as fotos.
   Conta: 5 x (20% - 19.2px) + 4 x 24px = 100% */
[class*="ai-collection-tabs__grid-"] > * {
  flex: 0 1 calc(20% - 19.2px);
}

/* os degraus acompanham a grade da vitrine de cima */
@media screen and (max-width: 1399px) {
  [class*="ai-collection-tabs__grid-"] > * {
    flex-basis: calc(25% - 18px);
  }
}

@media screen and (max-width: 989px) {
  [class*="ai-collection-tabs__grid-"] > * {
    flex-basis: calc(33.333% - 16px);
  }
}

@media screen and (max-width: 749px) {
  [class*="ai-collection-tabs__grid-"] > * {
    flex-basis: calc(50% - 12px);
  }
}

.pm-titulo-vitrine {
  text-align: center;
  margin: 0 0 28px;
}

/* ------------------------------------------------------------------
   Capa do video do topo da home

   O video so comeca a baixar depois que a pagina carregou o resto (ver
   _fonte/capa-do-video.py). Ate la quem preenche a tela e este fundo, que e um
   quadro do proprio video: a home abre nitida na hora e a troca pro video
   passa despercebida.
   ------------------------------------------------------------------ */
/* No proprio <native-video>, e nao no filho: quando o video entra, o tema
   apaga o conteudo interno inteiro. Aqui embaixo a capa fica, e o video pinta
   por cima dela. Sem isso a tela voltava a ficar preta entre a troca e o
   primeiro quadro. */
.video-wrapper--native {
  background: #101014 url("/assets/hero-capa.webp") center / cover no-repeat;
}