/* CSS inicial para a CR Auto Performance
   Estilo automotivo: grafite, vermelho e destaques nos produtos.
   Os seletores podem variar conforme o tema da Loja Integrada. */

:root {
  --cr-grafite: #17191c;
  --cr-grafite-claro: #25282d;
  --cr-vermelho: #d62828;
  --cr-vermelho-escuro: #ad1f1f;
  --cr-texto: #252525;
  --cr-cinza: #6b7280;
  --cr-fundo: #f5f5f5;
  --cr-borda: #e5e7eb;
}

/* Fundo e tipografia geral */
body {
  color: var(--cr-texto);
  background-color: #fff;
}

/* Cabeçalho */
#cabecalho {
  background-color: var(--cr-grafite);
  color: #fff;
}

#cabecalho a {
  color: #fff;
}

#cabecalho a:hover {
  color: #ff6b6b;
}

/* Menu principal */
.menu.superior {
  background-color: var(--cr-grafite-claro);
}

.menu.superior a {
  color: #fff;
  font-weight: 600;
  transition: color 0.2s ease;
}

.menu.superior a:hover {
  color: #ff6b6b;
}

/* Cartões de produtos */
.listagem-item {
  overflow: hidden;
  border: 1px solid var(--cr-borda);
  border-radius: 10px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.listagem-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 10%);
}

.listagem-item img {
  transition: transform 0.25s ease;
}

.listagem-item:hover img {
  transform: scale(1.03);
}

.listagem-item .nome-produto {
  color: var(--cr-texto);
  font-weight: 600;
  line-height: 1.4;
}

.listagem-item .preco-produto {
  color: var(--cr-vermelho);
  font-weight: 700;
}

/* Botões de compra e chamadas principais */
.botao,
button,
input[type="submit"] {
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.botao.principal,
.botao-comprar,
input[type="submit"] {
  border-color: var(--cr-vermelho);
  background-color: var(--cr-vermelho);
  color: #fff;
  font-weight: 700;
}

.botao.principal:hover,
.botao-comprar:hover,
input[type="submit"]:hover {
  border-color: var(--cr-vermelho-escuro);
  background-color: var(--cr-vermelho-escuro);
  transform: translateY(-1px);
}

/* Links e elementos de destaque */
a {
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cr-vermelho);
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
  .listagem-item {
    border-radius: 8px;
  }

  .listagem-item:hover {
    transform: none;
    box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
  }

  #cabecalho {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}