/* ---------------------------------------------------------------------------
   Ajustes da Criativvo sobre o tema.
   Carrega por último, depois de sections.css. Só acrescenta: não redefine
   token nem regra do tema, para não repetir o problema de cascata que deixou
   os botões ilegíveis.
   Nomes começam com gc- para não colidir com as classes do tema.
--------------------------------------------------------------------------- */

/* ---------- peças comuns ---------- */
.gc-ico {
  width: 1rem; height: 1rem;
  flex: none;
  vertical-align: -.15em;
}
.gc-ico--sm { width: .875rem; height: .875rem; }

.gc-marca {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 1.125rem;
}
.gc-marca__logo {
  width: 1.125rem; height: 1.125rem;
  object-fit: contain;
  opacity: .78;
}
.gc-marca__nome {
  font-size: var(--text-3xs, .625rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgb(var(--color-foreground) / .55);
  line-height: 1;
}

/* ---------- card do veículo ---------- */
.gc-card__conteudo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}
.gc-card__titulo {
  font-size: var(--text-base-xl, 1.0625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}
.gc-card__titulo:hover { text-decoration: underline; text-underline-offset: .2em; }

.gc-card__detalhe {
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .6);
  line-height: 1.2;
  margin: 0;
}

.gc-selos {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  margin-top: .0625rem;
}
.gc-selo {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .72);
  line-height: 1;
  white-space: nowrap;
}
.gc-selo .gc-ico { opacity: .6; }

/* preço em destaque, como em classificado */
.gc-preco {
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: rgb(var(--color-foreground));
  margin: .125rem 0 0;
}

.gc-badge--prep {
  display: inline-block;
  padding: .3125rem .625rem;
  border-radius: var(--rounded-button, 999px);
  background: rgb(var(--color-highlight));
  color: #fff;
  font-size: var(--text-3xs, .625rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- página do veículo ---------- */
.gc-ficha {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media screen and (min-width: 1024px) {
  .gc-ficha { grid-template-columns: minmax(0, 1fr) 22.5rem; }
}

.gc-ficha__marca { margin-bottom: .625rem; gap: .5rem; }
/* na página do veículo a marca é identificação, não etiqueta: vale mais peso */
.gc-ficha__marca .gc-marca__logo {
  width: 2.75rem; height: 2.75rem;
  opacity: 1;
}
.gc-ficha__marca .gc-marca__nome {
  font-size: var(--text-sm, .875rem);
  letter-spacing: .1em;
  font-weight: 600;
  color: rgb(var(--color-foreground) / .7);
}
.gc-ficha__titulo {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}

.gc-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.25rem 1rem;
  padding: 1.5rem;
  border-radius: var(--rounded-block, 1rem);
  background: rgb(var(--color-foreground) / .035);
}
.gc-spec { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
/* o ícone puxa a cor da marca — o resto do bloco segue discreto, como antes */
.gc-spec__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .55);
  line-height: 1;
}
.gc-spec__rotulo .gc-ico { color: rgb(var(--color-highlight)); }
.gc-spec__valor {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* opcionais */
.gc-opcionais { margin-top: 2rem; }
.gc-opcionais__titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  margin: 0 0 1rem;
}
.gc-opcionais__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem .75rem;
  list-style: none;
  padding: 0; margin: 0;
}
.gc-opcional {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .8);
  line-height: 1.3;
}
.gc-opcional .gc-ico { color: rgb(var(--color-highlight)); opacity: 1; }

/* coluna da direita: preço e ações */
.gc-lateral { display: grid; gap: 1rem; }
@media screen and (min-width: 1024px) {
  .gc-lateral { position: sticky; top: calc(var(--header-height, 5rem) + 1.5rem); }
}
.gc-painel {
  padding: 1.5rem;
  border-radius: var(--rounded-block, 1rem);
  border: 1px solid rgb(var(--color-foreground) / .1);
  background: rgb(var(--color-background));
}
.gc-status {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
  color: rgb(var(--color-foreground) / .75);
  margin-bottom: .75rem;
}
.gc-status::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: #16a34a;
}
.gc-status--prep::before { background: rgb(var(--color-highlight)); }

.gc-painel__rotulo {
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .55);
  margin: 0;
}
.gc-painel__preco {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: .125rem 0 1.25rem;
}

.gc-acoes { display: grid; gap: .625rem; }
.gc-acoes .button { width: 100%; }

.gc-garantias {
  display: grid; gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgb(var(--color-foreground) / .1);
  list-style: none;
}
.gc-garantia {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .75);
  line-height: 1.35;
}
.gc-garantia .gc-ico { margin-top: .1em; color: rgb(var(--color-highlight)); }

/* aviso do veículo em preparação */
.gc-aviso {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .875rem 1rem;
  border-radius: var(--rounded-block, 1rem);
  background: rgb(var(--color-highlight) / .08);
  color: rgb(var(--color-foreground) / .85);
  font-size: var(--text-sm, .875rem);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Página do veículo: mosaico de fotos e layout de anúncio
--------------------------------------------------------------------------- */

/* Faixa de fotos, no formato que a Prime usa (padrão de classificado):
   as fotos ocupam a largura toda no topo, lado a lado, com rolagem
   horizontal. O card de informações sobe por cima da base da faixa. */
.gc-faixa {
  position: relative;
  background: rgb(var(--color-foreground) / .06);
  /* encosta nas bordas da tela: o container do tema tem recuo lateral e a
     faixa precisa sangrar para fora dele */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.gc-faixa__trilho {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  height: clamp(20rem, 56vh, 34rem);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
/* Veículo com uma foto só (a arte de "em preparação"): ela ocupa a faixa
   inteira, em vez de deixar um vazio à direita. Mesma solução da Prime. */
.gc-faixa--unica .gc-faixa__trilho { cursor: default; height: auto; }
.gc-faixa--unica .gc-faixa__foto {
  width: 100%;
  aspect-ratio: 21 / 9;
  cursor: zoom-in;
}
@media screen and (max-width: 767px) {
  .gc-faixa--unica .gc-faixa__foto { aspect-ratio: 16 / 10; }
}

/* enquanto arrasta, o navegador não pode animar nem "imantar" o scroll */
.gc-faixa__trilho.arrastando,
.gc-faixa__trilho.arrastando .gc-faixa__foto { cursor: grabbing; }
.gc-faixa__trilho.arrastando img { pointer-events: none; }
.gc-faixa__trilho::-webkit-scrollbar { display: none; }

.gc-faixa__foto {
  flex: none;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: 0; border: 0;
  background: none;
  cursor: grab;          /* a faixa se arrasta; o clique parado é que amplia */
  overflow: hidden;
  position: relative;
  /* Sem `touch-action` limitado: o arrasto escrito no site.js é de mouse
     (mousedown/mousemove), e com `pan-y` aqui o dedo ficava sem nada — nem o
     nosso arrasto, que não escuta toque, nem a rolagem horizontal do próprio
     navegador, que o `pan-y` proibia. No celular sobrava só a setinha.
     Deixando o padrão, a faixa (que é um `overflow-x: auto` de verdade) rola
     no dedo com o embalo do sistema, e o mouse segue no arrasto do site.js. */
}
.gc-faixa__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.gc-faixa__foto:focus-visible { outline: 3px solid rgb(var(--color-highlight)); outline-offset: -3px; }

.gc-faixa__seta {
  position: absolute;
  /* centraliza na parte da faixa que fica à vista, acima do card */
  top: calc(50% - 1.5rem); transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgb(var(--color-background) / .92);
  color: rgb(var(--color-foreground));
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .16);
  transition: background .2s, opacity .2s;
  z-index: 2;
}
.gc-faixa__seta:hover { background: rgb(var(--color-background)); }
.gc-faixa__seta[hidden] { display: none; }
.gc-faixa__seta--ant { left: 1rem; }
.gc-faixa__seta--prox { right: 1rem; }

.gc-faixa__contador {
  position: absolute;
  /* acima da base, senão o card de informações cobre */
  right: 1.25rem; bottom: clamp(4rem, 5vw, 4.75rem);
  padding: .3125rem .6875rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .62);
  color: #fff;
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

/* o card de informações sobe por cima da faixa */
.gc-cartao {
  position: relative;
  z-index: 3;
  margin-top: clamp(-3.5rem, -4vw, -2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--rounded-block, 1rem);
  background: rgb(var(--color-background));
  box-shadow: 0 4px 30px rgb(0 0 0 / .09);
}

@media screen and (max-width: 767px) {
  .gc-faixa__trilho { height: clamp(15rem, 42vh, 20rem); }
  .gc-faixa__seta { width: 2.25rem; height: 2.25rem; }
  .gc-faixa__seta--ant { left: .5rem; }
  .gc-faixa__seta--prox { right: .5rem; }
  .gc-cartao { margin-top: -1.5rem; padding: 1.25rem; }
}

/* corpo do anúncio: conteúdo largo à esquerda, decisão à direita */
.gc-anuncio {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media screen and (min-width: 1024px) {
  .gc-anuncio { grid-template-columns: minmax(0, 1fr) 21.5rem; }
  .gc-anuncio__lateral {
    position: sticky;
    top: calc(var(--sticky-header-height, 5rem) + 1.5rem);
  }
}
.gc-anuncio__principal { min-width: 0; display: grid; gap: 1.75rem; }

/* ----- o anúncio em tela estreita -----
   A ordem muda: nome do carro, depois preço e botões, depois ficha e
   opcionais. O preço continua perto do topo, mas quem chega já sabe de que
   carro se trata — antes o nome só aparecia depois do painel inteiro.

   `align-items` volta a esticar. O bloco de cima usa `start` para a ficha e o
   painel não crescerem à toa lado a lado no desktop; empilhado, esse mesmo
   `start` fazia cada card parar na largura do próprio conteúdo, e sobrava uma
   faixa vazia à direita que parecia margem torta. */
@media screen and (max-width: 1023px) {
  .gc-anuncio {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* o miolo deixa de ser caixa para os filhos entrarem na mesma pilha e
     poderem ser reordenados */
  .gc-anuncio__principal { display: contents; }
  .gc-anuncio__cabecalho { order: -2; }
  .gc-anuncio__lateral   { order: -1; }
  /* o espaçamento agora é o `gap` da pilha */
  .gc-opcionais { margin-top: 0; }
  .gc-ficha__titulo { margin-bottom: .5rem; }
}

/* ---------------------------------------------------------------------------
   Lightbox — o tema chamava o PhotoSwipe, que não veio no pacote da captura
--------------------------------------------------------------------------- */
.gc-lb {
  position: fixed;
  inset: 0;
  /* o botão flutuante do WhatsApp vive em z-index 99999 */
  z-index: 100000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* fundo opaco. Era 96% de preto, e os 4% que sobravam deixavam ler o
     cabeçalho e os botões da página por trás da foto */
  background: #0b0b0c;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s .22s;
  /* respeita o entalhe e a barra de gestos do celular */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: contain;
}
.gc-lb[open] { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.gc-lb[hidden] { display: none; }

/* a página atrás fica parada enquanto as fotos estão abertas, e o botão
   flutuante do WhatsApp sai da frente */
.gc-lb-aberto, .gc-lb-aberto body { overflow: hidden; }
.gc-lb-aberto body { position: fixed; width: 100%; }
.gc-lb-aberto .gc-zapflut { display: none; }

/* ----- barra de cima ----- */
.gc-lb__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem clamp(.75rem, 2vw, 1.25rem);
}
.gc-lb__contador {
  flex: none;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
}
.gc-lb__nome {
  flex: 1;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-lb__acoes { flex: none; display: flex; gap: .5rem; }

.gc-lb__botao {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
.gc-lb__botao svg { width: 1.375rem; height: 1.375rem; }
.gc-lb__botao:hover { background: rgb(255 255 255 / .24); }
/* o anel de foco só aparece para quem navega pelo teclado: abrir as fotos
   com o mouse deixava um anel azul do sistema em volta do X */
.gc-lb__botao:focus { outline: none; }
.gc-lb__botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gc-lb__lupa[aria-pressed="true"] { background: #e10600; }

/* ----- palco ----- */
.gc-lb__palco { position: relative; min-height: 0; }

.gc-lb__trilho {
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  /* a barra de rolagem não faz sentido aqui: quem navega é o dedo, a seta
     ou a miniatura */
  scrollbar-width: none;
}
.gc-lb__trilho::-webkit-scrollbar { display: none; }
.gc-lb__trilho:focus { outline: none; }

.gc-lb__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* flex, não grid: numa área de grid com altura automática o `max-height:
     100%` da foto não tem contra o que resolver e o navegador ignora, e a
     foto estourava a altura da tela em vez de caber nela */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(.5rem, 2vw, 3.5rem);
  overflow: hidden;
}
.gc-lb__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .5rem;
  cursor: zoom-in;
  transition: transform .25s ease;
  /* o navegador inicia o arrasto dele e mata o nosso */
  -webkit-user-drag: none;
  user-select: none;
}

/* com a foto ampliada a faixa trava: arrastar passeia pela foto em vez de
   pular para a próxima */
.gc-lb--zoom .gc-lb__trilho { overflow: hidden; scroll-snap-type: none; }
.gc-lb--zoom .gc-lb__slide img { cursor: zoom-out; }
.gc-lb--zoom .gc-lb__seta { opacity: 0; pointer-events: none; }

/* ----- setas ----- */
.gc-lb__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  /* fundo escuro sólido, não translúcido: metade das fotos é de carro claro
     em parede clara, e a seta translúcida sumia justamente nelas */
  background: rgb(15 15 16 / .78);
  box-shadow: 0 2px 14px rgb(0 0 0 / .45);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
}
.gc-lb__seta svg { width: 1.5rem; height: 1.5rem; }
.gc-lb__seta:hover { background: #e10600; }
.gc-lb__seta:focus { outline: none; }
.gc-lb__seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gc-lb__seta--ant  { left: clamp(.5rem, 1.5vw, 1.25rem); }
.gc-lb__seta--prox { right: clamp(.5rem, 1.5vw, 1.25rem); }

/* ----- dica de primeira vez ----- */
.gc-lb__dica {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  margin: 0;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgb(15 15 16 / .82);
  font-size: .8125rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.gc-lb__dica[data-visivel="true"] { opacity: 1; }

/* uma foto só: nada para navegar */
.gc-lb--unica .gc-lb__seta,
.gc-lb--unica .gc-lb__tiras,
.gc-lb--unica .gc-lb__contador { display: none; }

/* ----- miniaturas ----- */
.gc-lb__tiras {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .75rem clamp(.75rem, 2vw, 1.25rem) 1rem;
  scrollbar-width: none;
}
.gc-lb__tiras::-webkit-scrollbar { display: none; }
.gc-lb__tira {
  flex: none;
  width: 5.25rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: .5rem;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .18s ease, border-color .18s ease;
}
.gc-lb__tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-lb__tira:hover { opacity: .85; }
.gc-lb__tira[aria-selected="true"] { opacity: 1; border-color: #e10600; }
.gc-lb__tira:focus { outline: none; }
.gc-lb__tira:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ----- telas estreitas -----
   No celular a foto é o conteúdo: a barra encolhe, as setas saem (o dedo já
   faz o papel delas e elas só tapariam a foto) e as miniaturas viram uma
   régua de posição, menor. */
@media screen and (max-width: 767px) {
  .gc-lb__barra { padding: .5rem .75rem; gap: .625rem; }
  .gc-lb__nome { display: none; }
  .gc-lb__botao { width: 2.5rem; height: 2.5rem; }
  .gc-lb__seta { display: none; }
  .gc-lb__slide { padding: 0 .25rem; }
  .gc-lb__tiras { gap: .375rem; padding: .5rem .75rem .75rem; }
  .gc-lb__tira { width: 3.75rem; height: 2.625rem; }
}

/* telas baixas e deitadas: a régua de miniaturas come a foto */
@media screen and (max-height: 460px) {
  .gc-lb__tiras { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-lb, .gc-lb__slide img, .gc-lb__seta, .gc-lb__tira, .gc-lb__dica { transition: none; }
}

/* ---------------------------------------------------------------------------
   Ajustes de comportamento e de respiro entre seções
--------------------------------------------------------------------------- */

/* A faixa "+10 anos Realizando Sonhos" parava quando o mouse passava por cima
   (regra do tema: .scrolling-text:hover .marquee { paused }). Ela é decorativa
   e deve seguir rodando. */
.scrolling-text:hover .marquee,
.scrolling-text .marquee.animate { animation-play-state: running !important; }

/* A página do veículo terminava colada na faixa vermelha e a vitrine de
   "vistos recentemente" encostava no bloco de vantagens do rodapé. */
.gc-cartao { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gc-opcionais { padding-bottom: .5rem; }

/* O respiro acima e abaixo da faixa vermelha tem que ser o mesmo. Acima quem
   manda é a margem do card do anúncio; abaixo, o recuo da vitrine. */
.related-products,
[data-vistos] { padding-top: 0; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
[data-vistos] { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
/* mesmo valor da margem do card, para os dois lados da faixa andarem juntos
   em qualquer largura de tela */
.related-products > .section,
[data-vistos] > .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* a vitrine usa o mesmo card das listagens */
/* "Relacionados" e "Vistos recentemente" são grade, não carrossel.
   Até 1023px o tema transforma essas listas em faixa horizontal
   (`.slider--tablet .card-grid` manda um `grid: auto / auto-flow 36vw`).
   Definir só o `grid-template-columns` por cima não desfaz aquilo: o
   `grid-auto-flow: column` continua valendo, os cards vazam para colunas
   automáticas de 36vw e as colunas declaradas ficam com o que sobrou —
   eram as duas tiras finas ao lado de um card inteiro. Por isso o fluxo
   volta explicitamente para `row`. */
.related-products .card-grid,
[data-vistos] .card-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media screen and (max-width: 767px) {
  .related-products .card-grid,
  [data-vistos] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Botão do WhatsApp
   "Falar com Vendedor" abre o WhatsApp, então usa o verde da própria rede.
   O gradiente abre no verde vivo e fecha um pouco na base: o #25D366 puro,
   com texto branco por cima, dá contraste 2:1 e o texto some. Assim ele lê
   como WhatsApp e o texto continua legível (auditar-botoes.mjs mede isso).
   O preenchimento que sobe no hover vem do tema; aqui é branco, com o texto
   escurecendo junto.
--------------------------------------------------------------------------- */
.gc-acoes .gc-zap {
  --color-button-background: 25 165 76;
  --color-button-text: 255 255 255;
  --color-button-border: 25 165 76;
  background: linear-gradient(180deg, rgb(37 197 94), rgb(19 140 65) 100%);
  background-color: rgb(25 165 76);
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 1px rgb(0 0 0 / .18);
}
.gc-acoes .gc-zap .btn-fill { background-color: #fff; }
.js [data-button_hover="standard"] .gc-acoes .gc-zap:hover:not([disabled]) {
  color: rgb(13 105 50);
  text-shadow: none;
}
.gc-acoes .gc-zap .gc-ico { width: 1.125rem; height: 1.125rem; }

/* ---------------------------------------------------------------------------
   Depoimentos: o rabisco que circula a frase
   O desenho é um SVG que transborda o texto uns 28px de cada lado. Quando a
   frase destacada cai no começo ou no fim da linha, esse transbordo saía da
   área de conteúdo e o círculo aparecia cortado — acontece no site antigo
   também. Aqui o bloco ganha uma folga lateral do tamanho do transbordo e
   nada mais corta o traço.
--------------------------------------------------------------------------- */
.testimonials { overflow: visible; }
.testimonials .testimonial { padding-inline: 2.25rem; }
.testimonials blockquote { overflow: visible; }

/* o traço também não pode ser cortado pela caixa do próprio SVG */
.highlighted-text { overflow: visible; }
.highlighted-text .icon-circle,
.highlighted-text svg { overflow: visible; }

@media screen and (max-width: 767px) {
  .testimonials .testimonial { padding-inline: 1.75rem; }
}

/* ---------------------------------------------------------------------------
   Cabeçalho por cima do vídeo
   O tema pinta o menu com --color-transparent (preto), contando com um banner
   claro e parado. Sobre um vídeo que troca de cena o preto sumia. O menu passa
   a ser branco, com uma sombra fraca por baixo: nos quadros claros do vídeo é
   ela que segura a leitura, sem precisar de fundo atrás do texto.
   Vale só nesse estado: com o cabeçalho branco, tudo volta ao normal.
--------------------------------------------------------------------------- */
.header-transparent:not(.header-scrolled) .header__menu .menu__item,
.header-transparent:not(.header-scrolled) .header__buttons > a,
.header-transparent:not(.header-scrolled) .header__buttons > button {
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.header-transparent:not(.header-scrolled) .header__buttons .icon {
  color: #fff;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45));
}


/* ---------------------------------------------------------------------------
   Luz do menu ("tubelight")
   Uma barra acesa marca o item da página atual e desliza para o item sob o
   mouse, voltando quando o ponteiro sai. A cor é a da marca, não preta.
   Feito em CSS + um punhado de JS porque o site é estático: o componente de
   referência é React com framer-motion, que não roda aqui.
--------------------------------------------------------------------------- */
.header__menu .list-menu { position: relative; }

.gc-luz {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--luz-w, 0);
  transform: translateX(var(--luz-x, 0));
  border-radius: 999px;
  /* A pílula é vermelha. Ela era branca, e o menu sobre o vídeo da capa
     também é branco: o item da página atual ficava texto branco em pílula
     branca, ilegível. Vermelho resolve nos dois estados do cabeçalho,
     porque o texto do item aceso é sempre branco (.gc-item-aceso).

     O degradê é leve de propósito: a faixa do topo fecha em #840000, quase
     marrom, e num elemento desse tamanho aquilo pesa. Aqui ele só desce um
     tom, do vermelho da marca para um vermelho fechado. */
  background: linear-gradient(160deg, #e10600 0%, #b60000 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .14),
    0 2px 12px rgb(160 0 0 / .3);
  pointer-events: none;
  opacity: 0;
  /* o fundo do cabeçalho é um ::before com z-index 1; abaixo disso a luz
     ficaria escondida atrás do branco */
  z-index: 1;
  transition:
    transform .38s cubic-bezier(.34, 1.32, .5, 1),
    width     .38s cubic-bezier(.34, 1.32, .5, 1),
    opacity   .25s ease;
}
.gc-luz[data-visivel="true"] { opacity: 1; }

/* o item por cima da pílula: branco nos dois estados do cabeçalho. O tema
   pinta o texto em .btn-text, e o item duplicado (.btn-duplicate) é o que
   sobe na animação de hover — os dois precisam da cor, senão o texto some
   no meio do movimento. */
.header__menu .menu__item.gc-item-aceso,
.header__menu .menu__item.gc-item-aceso .btn-text,
.header__menu .menu__item.gc-item-aceso .btn-text.btn-duplicate {
  color: #fff;
}

/* A barra acesa fica acima do item, não encostada: a pílula que o tema
   desenha no hover é opaca e cobriria uma barra colada na borda. */
.gc-luz::before {
  content: "";
  position: absolute;
  top: -.6875rem;
  left: 50%;
  translate: -50% 0;
  width: 2rem;
  height: .25rem;
  border-radius: 0 0 .25rem .25rem;
  background: rgb(var(--color-highlight));
}
/* o brilho que escapa da barra */
.gc-luz::after {
  content: "";
  position: absolute;
  top: -.9375rem;
  left: 50%;
  translate: -50% 0;
  width: 3.5rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgb(var(--color-highlight) / .45);
  filter: blur(10px);
}

/* o item já vem com z-2 do tema, o que o mantém acima da luz */

/* A pílula do item é o segundo texto do item (btn-duplicate), que o tema
   pinta de preto. Aqui ela fica clara, com o texto escuro, para combinar
   com a barra acesa e não brigar com o cabeçalho branco. */
/* A pílula do item sob o mouse continua preta, como no tema: é o contraste
   com a pílula vermelha do item da página atual que deixa claro onde se está
   e para onde se vai. */

@media (prefers-reduced-motion: reduce) {
  .gc-luz { transition: opacity .2s ease; }
}

/* ---------------------------------------------------------------------------
   Modal de escolha de unidade já aberto
   Um script logo depois do modal marca o <html> antes da primeira pintura.
   Estas regras deixam o modal na aparência de aberto desde o começo, sem
   esperar o JS do tema — é isso que evita ver a home por um instante antes
   da pergunta.
--------------------------------------------------------------------------- */
.gc-modal-aberto { overflow: hidden; }
.gc-modal-aberto #AgeVerifier {
  visibility: visible;
  pointer-events: auto;
}
.gc-modal-aberto #AgeVerifier > .overlay {
  visibility: visible;
  opacity: 1;
}
.gc-modal-aberto #AgeVerifier .drawer__inner,
.gc-modal-aberto #AgeVerifier .drawer__content,
.gc-modal-aberto #AgeVerifier .modal__content {
  visibility: visible;
  opacity: 1;
}
/* O título entra palavra por palavra (animate-element). Como o modal abre
   antes de o tema processar essa animação, as palavras ficariam pela metade:
   aqui elas já entram no estado final. */
.gc-modal-aberto #AgeVerifier animate-element,
.gc-modal-aberto #AgeVerifier split-words,
.gc-modal-aberto #AgeVerifier .single-word {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   Segundo botão da escolha de unidade
   O modal abria com um botão vermelho (Ibitinga) e um contornado de branco
   (Borborema). O contornado sai branco sobre a foto clara da loja e some,
   e no meio da animação de hover o texto vira branco enquanto o fundo ainda
   é branco — nesse instante o botão fica ilegível.

   Aqui os dois nascem vermelhos. O segundo usa o degradê da faixa do topo
   (136deg, #DF0000 -> #840000), que é mais fechado que o degradê vertical do
   primeiro: as duas unidades continuam distinguíveis sem depender de um
   fundo claro que não contrasta. O preenchimento de hover escurece em vez de
   clarear, então o texto é branco do começo ao fim do movimento.
--------------------------------------------------------------------------- */
#AgeVerifier .cookie__buttons .button--secondary {
  background-image: linear-gradient(136deg, #df0000 11%, #840000 84%);
  background-color: #b00000;
  border-color: transparent;
  color: #fff;
}
#AgeVerifier .cookie__buttons .button--secondary .btn-text,
#AgeVerifier .cookie__buttons .button--secondary .btn-text.btn-duplicate {
  color: #fff;
}
/* a pastilha que sobe no hover: no tema ela é preta e o texto do botão
   contornado é escuro. Como agora o texto já é branco, ela escurece o
   vermelho em vez de trocar de cor. */
#AgeVerifier .cookie__buttons .button--secondary .btn-fill {
  background-color: #6e0000;
}

/* ---------------------------------------------------------------------------
   Última fileira das vitrines da home
   O corte é do site.js, que lê quantas colunas a grade abriu e marca o que
   sobra da última fileira. Aqui só se esconde o que ele marcou.
--------------------------------------------------------------------------- */
.featured-collections .card-grid > .gc-fora-da-fileira { display: none; }

/* ---------------------------------------------------------------------------
   Fotos coladas no cabeçalho, na página do veículo
   A faixa de fotos herdava o padding-block-start de 40px que o tema dá a toda
   seção. Numa página em que a primeira coisa é a foto ocupando a largura
   inteira, aquilo virava uma tira branca entre o cabeçalho e o carro. Só o
   respiro de cima sai: o de baixo continua separando as fotos do card de
   informações que sobe por cima.
--------------------------------------------------------------------------- */
.template-product #MainContent > .shopify-section:first-child .section--padding {
  padding-block-start: 0;
}

/* ---------------------------------------------------------------------------
   Resumo de ano e quilometragem, colado no nome do carro
   No celular o painel de preço vem antes da ficha, e o ano do carro só
   aparecia lá embaixo. Esta linha entra junto do título.
--------------------------------------------------------------------------- */
.gc-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  margin: 0;
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .65);
}
.gc-resumo__item { display: inline-flex; align-items: center; }
/* o ponto separador é decoração: entra pelo CSS para não virar texto que o
   leitor de tela anuncia */
.gc-resumo__item + .gc-resumo__item::before {
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  margin-inline-end: .875rem;
}

/* ---------------------------------------------------------------------------
   Ficha em duas colunas no celular
   A grade pedia 9,5rem por coluna, e na largura do celular só cabia uma: a
   ficha virava uma lista comprida com metade da largura vazia à direita.
--------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .gc-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem 1rem;
    padding: 1.25rem;
  }
  .gc-opcionais__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Botão apertado no celular
   O tema troca a cor do texto para branco só no `:hover`, e celular não tem
   hover: ao tocar, a pastilha escura subia e o texto continuava escuro — some
   no meio do toque. Aqui o estado apertado é explícito e na cor da marca.
--------------------------------------------------------------------------- */
@media (hover: none) {
  /* o botão do WhatsApp fica de fora: ele é verde porque é WhatsApp, e virar
     vermelho ao toque desmancharia justamente o reconhecimento que faz a
     pessoa tocar nele. O apertado dele está logo abaixo, no próprio verde. */
  .gc-acoes .button:not(.gc-zap):active {
    background-image: linear-gradient(160deg, #e10600 0%, #b60000 100%);
    background-color: #c20000;
    border-color: transparent;
    color: #fff;
  }
  .gc-acoes .button:not(.gc-zap):active .btn-text,
  .gc-acoes .button:not(.gc-zap):active .btn-text.btn-duplicate,
  .gc-acoes .button:not(.gc-zap):active .gc-ico,
  .gc-acoes .button:not(.gc-zap):active svg { color: #fff; }
  /* a pastilha do tema sairia por cima do vermelho com a cor errada */
  .gc-acoes .button:not(.gc-zap):active .btn-fill { opacity: 0; }

  /* o do WhatsApp só escurece um tom, e o texto continua branco */
  .gc-acoes .gc-zap:active {
    background-image: linear-gradient(160deg, #1da851 0%, #12833d 100%);
    color: #fff;
  }
  .gc-acoes .gc-zap:active .btn-text,
  .gc-acoes .gc-zap:active .gc-ico { color: #fff; }
  .gc-acoes .gc-zap:active .btn-fill { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Janelinha do WhatsApp
   O botão flutuante mandava para o linktr.ee/gilsoncar só para a pessoa
   escolher entre as duas unidades: saía do site, caía numa página de terceiro
   com a marca de outra empresa em volta, e voltava. A escolha agora acontece
   aqui, com a cara da GilsonCar.
--------------------------------------------------------------------------- */
.gc-zapmodal {
  position: fixed;
  inset: 0;
  /* o próprio botão flutuante está em z-index 99999 */
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  /* O escurecimento é o fundo do próprio modal, não uma div dentro dele. Uma
     div absoluta aqui herdava o alinhamento do grid e nascia com 0x0, mesmo
     com `inset: 0` — a página atrás ficava sem escurecer. Menos peça, e o
     clique fora da janela é o clique no próprio modal. */
  background: rgb(10 10 12 / .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s;
}
.gc-zapmodal[open] { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.gc-zapmodal[hidden] { display: none; }
/* a página atrás não rola enquanto a escolha está na frente */
.gc-zapmodal-aberto { overflow: hidden; }
.gc-zapmodal__janela:focus { outline: none; }


.gc-zapmodal__janela {
  position: relative;
  width: min(26rem, 100%);
  padding: 1.75rem;
  border-radius: var(--rounded-block, 1.25rem);
  background: rgb(var(--color-background));
  box-shadow: 0 24px 60px rgb(0 0 0 / .3);
  transform: translateY(.75rem) scale(.98);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.gc-zapmodal[open] .gc-zapmodal__janela { transform: none; }

.gc-zapmodal__x {
  position: absolute;
  top: .875rem;
  inset-inline-end: .875rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--color-foreground) / .06);
  color: rgb(var(--color-foreground) / .7);
  cursor: pointer;
  transition: background .18s ease;
}
.gc-zapmodal__x svg { width: 1.125rem; height: 1.125rem; }
.gc-zapmodal__x:hover { background: rgb(var(--color-foreground) / .12); }

.gc-zapmodal__olho {
  margin: 0 0 .375rem;
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--color-highlight));
}
.gc-zapmodal__titulo {
  margin: 0 0 .5rem;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  /* o X mora no canto: sem esta folga o título passaria por baixo dele */
  padding-inline-end: 2.25rem;
}
.gc-zapmodal__texto {
  margin: 0 0 1.25rem;
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .65);
  line-height: 1.45;
}

.gc-zapmodal__lojas { display: grid; gap: .625rem; }

.gc-zaploja {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  border: 1px solid rgb(var(--color-foreground) / .12);
  border-radius: var(--rounded-block, 1rem);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.gc-zaploja:hover {
  border-color: #25d366;
  background: rgb(37 211 102 / .07);
}
.gc-zaploja:focus { outline: none; }
.gc-zaploja:focus-visible { outline: 2px solid rgb(var(--color-highlight)); outline-offset: 2px; }
.gc-zaploja:active { transform: scale(.99); }

.gc-zaploja__icone {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}
.gc-zaploja__icone svg { width: 1.375rem; height: 1.375rem; }

.gc-zaploja__texto { display: grid; gap: .125rem; min-width: 0; flex: 1; }
.gc-zaploja__nome { font-weight: 600; line-height: 1.2; }
.gc-zaploja__num {
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .6);
  font-variant-numeric: tabular-nums;
}
.gc-zaploja__seta {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: rgb(var(--color-foreground) / .35);
}

@media (prefers-reduced-motion: reduce) {
  .gc-zapmodal, .gc-zapmodal__janela, .gc-zaploja { transition: none; }
  .gc-zapmodal__janela { transform: none; }
}

/* ---------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   O posicionamento estava no `style` da imagem, e aí o <a> em volta ficava com
   tamanho zero: quem tinha área clicável era só a figura, e o link não dava
   para alcançar por teclado. Agora quem flutua é o link, e a imagem só o
   preenche. O ícone também deixou de vir de um host de terceiro e mora em
   assets/img/.
--------------------------------------------------------------------------- */
.gc-zapflut {
  position: fixed;
  inset-block-end: 25px;
  inset-inline-end: 25px;
  z-index: 99999;
  display: block;
  width: 80px;
  height: 80px;
  line-height: 0;
  border-radius: 50%;
  transition: transform .18s ease;
}
.gc-zapflut img { width: 100%; height: 100%; display: block; }
.gc-zapflut:hover { transform: scale(1.06); }
.gc-zapflut:focus { outline: none; }
.gc-zapflut:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }

@media screen and (max-width: 767px) {
  .gc-zapflut { width: 64px; height: 64px; inset-block-end: 18px; inset-inline-end: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-zapflut { transition: none; }
}

/* ---------------------------------------------------------------------------
   Rodapé no desktop
   O tema desenha o rodapé em duas colunas e guardava a da direita para o
   bloco de newsletter, que não veio na captura: sobrava metade da largura
   vazia, com a linha divisória apontando para o nada, e os três blocos
   espremidos e quebrando linha na metade esquerda.

   Agora o rodapé é uma coluna só, e os blocos se distribuem por toda a
   largura numa grade de quatro — o quarto é o "Fale com a gente", com o
   WhatsApp de cada unidade, que é o que faltava para a direita ter função em
   vez de só preenchimento.

   Vale só no desktop: no celular o tema empilha os blocos em sanfona, e
   aquilo já funciona.
--------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  footer.footer { grid-template-columns: minmax(0, 1fr); }
  /* a divisória separava da coluna que não existe mais */
  footer.footer .footer__left { border-inline-end: 0; }
  footer.footer .footer__left,
  footer.footer .footer__accordions { width: 100%; }

  footer.footer .footer__accordions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 3rem;
    align-items: start;
  }
  /* O tema carimba uma largura em porcentagem em cada bloco (33%, 51%, 33%),
     medida contra a metade esquerda em que eles viviam. Dentro da célula da
     grade essa conta vira uma coluna de 64px com o texto quebrando letra a
     letra. Quem manda na largura agora é a grade. */
  footer.footer .footer__accordions > details { width: auto; }
}
/* em telas médias quatro colunas ficam estreitas demais para o endereço */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  footer.footer .footer__accordions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* WhatsApp de cada unidade no rodapé */
.gc-rodape-zap {
  display: grid;
  gap: .75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.gc-rodape-zap a {
  display: grid;
  gap: .125rem;
  text-decoration: none;
  color: inherit;
}
.gc-rodape-zap__loja {
  font-size: var(--text-sm, .875rem);
  opacity: .65;
  line-height: 1.2;
}
.gc-rodape-zap__num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  transition: color .18s ease;
}
.gc-rodape-zap a:hover .gc-rodape-zap__num { color: #25d366; }

/* ----- pílulas de rede social -----
   Cada rede na sua cor: o degradê do Instagram e o azul do Facebook. É a cor
   que a pessoa reconhece antes de ler o nome, e num rodapé escuro os dois
   links viravam texto cinza igual a todo o resto. */
.gc-rodape-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gc-social {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .8125rem .4375rem .625rem;
  border-radius: 999px;
  color: #fff;
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.gc-social svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.gc-social:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gc-social:focus { outline: none; }
.gc-social:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* o degradê oficial do Instagram corre na diagonal, do amarelo ao roxo */
.gc-social--ig {
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
}
.gc-social--fb { background: #1877f2; }

@media (prefers-reduced-motion: reduce) {
  .gc-social { transition: none; }
  .gc-social:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Assinatura da Criativvo
   Era uma imagem de 110px com "site criado por: criativvo" desenhado dentro —
   não dava para clicar, não era texto para busca e nem leitor de tela lia.
   Agora é texto, e o nome leva para o site da agência.
--------------------------------------------------------------------------- */
.gc-assinatura {
  margin: 0;
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .5);
  letter-spacing: .01em;
}
/* a marca é a palavra: minúscula, AVEstiana Black e o espaçamento um pouco
   fechado, como no logotipo */
.gc-assinatura a {
  font-family: AVEstiana, Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.3em;
  letter-spacing: -.02em;
  text-transform: lowercase;
  /* branco direto, não o token: no rodapé o `--color-foreground` resolve num
     cinza médio, e a marca saía mais apagada que o "Site criado por" ao lado.
     Este bloco só existe dentro do rodapé, que é sempre escuro. */
  color: rgb(255 255 255 / .92);
  text-decoration: none;
  /* o sublinhado fica na sombra do texto para não cortar as descidas da
     fonte, e some no hover junto com o clareamento */
  border-block-end: 1px solid rgb(255 255 255 / .22);
  padding-block-end: .12em;
  transition: color .18s ease, border-color .18s ease;
}
.gc-assinatura a:hover {
  color: #fff;
  border-color: currentColor;
}
.gc-assinatura a:focus { outline: none; }
.gc-assinatura a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* no celular o botão flutuante do WhatsApp para bem em cima da assinatura
   quando a página chega ao fim; esta folga tira ele de cima do texto */
@media screen and (max-width: 767px) {
  .gc-assinatura { padding-block-end: 3.5rem; }
}

/* ---------------------------------------------------------------------------
   Os dois endereços no rodapé
   O bloco mostrava só o de Ibitinga, em toda página. Agora são os dois, cada
   um com o nome da unidade em cima e o endereço levando ao mapa.
--------------------------------------------------------------------------- */
.gc-rodape-end {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gc-rodape-end li { display: grid; gap: .1875rem; }
.gc-rodape-end__loja {
  font-size: var(--text-sm, .875rem);
  opacity: .65;
  line-height: 1.2;
}
.gc-rodape-end a {
  color: inherit;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease;
}
.gc-rodape-end a:hover { color: rgb(var(--color-highlight)); }
.gc-rodape-end a:focus { outline: none; }
.gc-rodape-end a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Etiqueta de unidade no card
   Os dois estoques são diferentes, e numa busca geral o carro pode estar em
   qualquer uma das lojas. Sem a etiqueta, só dava para saber abrindo o
   anúncio. Fica por cima da foto, no mesmo canto do "Em preparação".

   Fundo escuro translúcido em vez de cor de marca: a etiqueta é informação de
   apoio, e o vermelho do "Em preparação" tem que continuar sendo o único
   aviso que chama atenção quando os dois aparecem juntos.
--------------------------------------------------------------------------- */
.gc-badge--loja {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .375rem .6875rem .375rem .5rem;
  border-radius: var(--rounded-button, 999px);
  /* Fundo opaco, não translúcido. Com 72% de preto a legibilidade dependia da
     foto atrás: sobre carro claro em parede clara a etiqueta desbotava. O anel
     claro por dentro a separa também das fotos escuras, onde o preto sozinho
     encostaria no fundo. */
  background: #101012;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .16),
    0 2px 8px rgb(0 0 0 / .35);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
/* o alfinete era vermelho sobre o quase-preto da pílula, o par de menor
   contraste do conjunto justo no elemento menor. Branco, junto do texto. */
.gc-badge--loja .gc-ico { width: .875rem; height: .875rem; color: #fff; }

/* ---------------------------------------------------------------------------
   Em qual unidade o carro está, na página do anúncio
   A linha antiga dizia "Loja física em Ibitinga e Borborema", que é verdade
   sobre a empresa e não ajuda quem quer ver este carro. Aqui vai a unidade
   certa, com o endereço levando ao mapa dela.
--------------------------------------------------------------------------- */
.gc-loja {
  display: grid;
  gap: .25rem;
  margin-block-start: 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--rounded-block, 1rem);
  border: 1px solid rgb(var(--color-foreground) / .1);
  background: rgb(var(--color-foreground) / .035);
}
.gc-loja__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .55);
  line-height: 1.2;
}
.gc-loja__rotulo .gc-ico { color: rgb(var(--color-highlight)); }
.gc-loja__nome {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  line-height: 1.2;
}
.gc-loja__mapa {
  font-size: var(--text-sm, .875rem);
  color: rgb(var(--color-foreground) / .65);
  line-height: 1.35;
  text-decoration: none;
  border-block-end: 1px solid rgb(var(--color-foreground) / .2);
  justify-self: start;
  transition: color .18s ease, border-color .18s ease;
}
.gc-loja__mapa:hover {
  color: rgb(var(--color-highlight));
  border-color: currentColor;
}
.gc-loja__mapa:focus { outline: none; }
.gc-loja__mapa:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* a unidade ao lado do preço, nos resultados de busca */
.gc-resultado__rodape { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.gc-resultado__loja {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--text-xs, .75rem);
  color: rgb(var(--color-foreground) / .55);
}
.gc-resultado__loja::before {
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: rgb(var(--color-highlight));
}

/* ---------------------------------------------------------------------------
   Título da primeira dobra entra pronto
   O tema anima os títulos palavra por palavra (`split-words` com
   `fade-up-large`). Isso funciona nas seções que a pessoa alcança rolando: a
   animação começa quando a seção entra em cena e ela já está olhando.

   No título que abre a página é outra história — ele está na tela desde o
   primeiro quadro, e o efeito deixava um bloco branco de ~100px no lugar do
   texto por mais de um segundo. Na página de Contato ficava evidente: o
   subtítulo e o botão do WhatsApp apareciam, e onde deveria estar "Entre em
   Contato" havia um vão.

   Vale só para o primeiro título de cada página. Todo o resto continua
   entrando animado.
--------------------------------------------------------------------------- */
#MainContent > .shopify-section:first-child .heading animate-element,
#MainContent > .shopify-section:first-child .heading split-words,
#MainContent > .shopify-section:first-child .heading .single-word {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------------------------
   Respiro das páginas de listagem
   O `section--padding` do tema não vale aqui — esta seção é montada pelo
   gerar_estoque.py e nasce com padding zero. O título encostava na navegação
   e o último card encostava na faixa vermelha logo abaixo, sem nenhuma folga
   entre uma coisa e outra.
--------------------------------------------------------------------------- */
.gc-listagem {
  padding-block-start: clamp(1.75rem, 3vw, 3rem);
  /* A faixa vermelha logo abaixo é uma seção arredondada do tema, e ela sobe
     uns 50px por baixo do conteúdo para desenhar o canto. Esse pedaço come o
     respiro: com 40px de padding o último card ficava 10px POR BAIXO dela no
     celular. O valor aqui já conta com essa sobreposição. */
  padding-block-end: clamp(5rem, 6vw, 6.5rem);
}

/* ---------------------------------------------------------------------------
   Saída do modal de unidade
   O modal cobre a página inteira, então quem só queria clicar em "Nosso
   Estoque" ficava preso: qualquer clique caía na pergunta. Aqui está o
   caminho para ver tudo, e ele também conta como resposta — quem sai por aqui
   não é perguntado de novo pelos mesmos 15 dias.

   É link, não um terceiro botão: escolher a unidade continua sendo a ação
   principal, e três pílulas iguais fariam as três disputarem o mesmo peso.
--------------------------------------------------------------------------- */
.gc-verTudo {
  display: inline-block;
  margin-block-start: 1rem;
  font-size: var(--text-sm, .875rem);
  font-weight: 500;
  color: rgb(var(--color-foreground) / .62);
  text-decoration: none;
  border-block-end: 1px solid rgb(var(--color-foreground) / .25);
  padding-block-end: .1em;
  transition: color .18s ease, border-color .18s ease;
}
.gc-verTudo:hover {
  color: rgb(var(--color-highlight));
  border-color: currentColor;
}
.gc-verTudo:focus { outline: none; }
.gc-verTudo:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Aviso de veículo vendido

   Quem chega numa página dessas veio de um link que alguém mandou no WhatsApp,
   do próprio histórico, ou do Google. O carro não está mais à venda, e a página
   continua de pé de propósito: sumir com ela devolveria 404 pra quem confiou no
   link. O aviso é a primeira coisa da página e leva pro estoque, que é o único
   lugar onde essa visita ainda pode virar venda.

   O vermelho é o da marca (#CC0000), aplicado como faixa e não como alerta de
   erro: não é um problema do site, é uma informação sobre o carro.
--------------------------------------------------------------------------- */
.gc-vendido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 1.5rem;
  /* A faixa atravessa a tela, mas o texto dela começa onde o conteúdo da
     página começa: o mesmo recuo lateral da logo e do menu. Encostado na borda
     ele lia como se fosse de outro site colado por cima. */
  padding: 1.125rem clamp(1.25rem, 4vw, 3.25rem);
  border-radius: var(--rounded-block, 12px);
  background: #CC0000;
  color: #fff;
}
.gc-vendido strong {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.gc-vendido span {
  font-size: var(--text-sm, .875rem);
  line-height: 1.45;
  opacity: .92;
}
.gc-vendido__link {
  margin-top: .25rem;
  padding: .5rem .875rem;
  border-radius: var(--rounded-button, 999px);
  background: #fff;
  color: #CC0000;
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
  text-decoration: none;
}
.gc-vendido__link:hover { opacity: .9; }

/* O selo do painel quando o carro já vendeu.

   Ele segue o mesmo desenho dos outros dois (texto com uma bolinha na frente,
   ver .gc-status acima), só trocando a cor da bolinha: verde é disponível,
   laranja é em preparação, cinza é vendido. A bolinha cinza é deliberada, e
   não vermelha: o vermelho da faixa no topo já deu o recado, e repetir cor de
   alerta aqui faz a página gritar a mesma coisa duas vezes. */
.gc-status--vendido { color: rgb(var(--color-foreground) / .55); }
.gc-status--vendido::before { background: #9a9a9a; }