/* GRIPMAX PNEUS - CSS COMPATÍVEL LOJA INTEGRADA */

/* Fundo geral */
body {
  background: #f7f7f7 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Cabeçalho */
header,
.cabecalho,
#cabecalho {
  background: #0d0d0d !important;
  border-bottom: 3px solid #ff4b00 !important;
}

/* Barra superior */
.barra-inicial,
.barra-superior,
.superior {
  background: #111111 !important;
  color: #ffffff !important;
}

/* Textos e links do cabeçalho */
.cabecalho a,
.cabecalho span,
.cabecalho p,
#cabecalho a,
#cabecalho span,
#cabecalho p {
  color: #ffffff !important;
}

/* Logo */
.logo img,
.logo a img {
  max-height: 80px !important;
  width: auto !important;
}

/* Menu */
.menu.superior,
.menu-principal,
#menu {
  background: #191919 !important;
  border-top: 1px solid #2a2a2a !important;
}

.menu.superior > ul > li > a,
.menu-principal a,
#menu a {
  color: #ffffff !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.menu.superior > ul > li:hover > a,
.menu-principal a:hover,
#menu a:hover {
  background: #ff4b00 !important;
  color: #ffffff !important;
}

/* Busca */
.busca input[type="text"],
.busca input[type="search"],
input[name="q"] {
  border: 2px solid #dddddd !important;
  border-radius: 6px 0 0 6px !important;
  height: 42px !important;
  font-size: 14px !important;
}

.busca button,
.busca .botao,
button.botao-busca {
  background: #ff4b00 !important;
  border-color: #ff4b00 !important;
  color: #ffffff !important;
  height: 42px !important;
  border-radius: 0 6px 6px 0 !important;
}

.busca button:hover,
.busca .botao:hover,
button.botao-busca:hover {
  background: #ff6a00 !important;
}

/* Botões */
.botao.principal,
.botao-comprar,
.produto .botao,
button[type="submit"],
input[type="submit"] {
  background: #ff4b00 !important;
  border-color: #ff4b00 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 6px !important;
}

.botao.principal:hover,
.botao-comprar:hover,
.produto .botao:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #ff6a00 !important;
}

/* Cards de produtos */
.listagem .produto,
.produto,
.produto-listagem {
  border-radius: 10px !important;
  border: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.listagem .produto:hover,
.produto:hover,
.produto-listagem:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border-color: #ff4b00 !important;
}

/* Nome do produto */
.nome-produto,
.produto .nome,
.produto a.nome-produto {
  color: #111111 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

/* Preço */
.preco,
.preco-produto,
.valor,
.produto .preco {
  color: #ff4b00 !important;
  font-weight: bold !important;
}

/* Títulos */
.titulo,
.titulo-categoria,
h1,
h2,
h3 {
  font-weight: bold !important;
}

/* WhatsApp */
.whatsapp,
.botao-whatsapp,
.float-whatsapp {
  background: #25d366 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
}

/* Rodapé */
.rodape,
footer {
  background: #0d0d0d !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
  header,
  .cabecalho,
  #cabecalho {
    padding: 10px 0 !important;
  }

  .logo img,
  .logo a img {
    max-height: 58px !important;
  }

  .busca {
    width: 100% !important;
    margin: 10px 0 !important;
  }

  .busca input[type="text"],
  .busca input[type="search"],
  input[name="q"] {
    height: 44px !important;
    font-size: 15px !important;
  }

  .menu.superior,
  .menu-principal,
  #menu {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .menu.superior > ul,
  .menu-principal ul,
  #menu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .menu.superior > ul > li > a,
  .menu-principal a,
  #menu a {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }

  .botao.principal,
  .botao-comprar,
  .produto .botao {
    width: 100% !important;
    padding: 12px !important;
  }
}

/* Corrigir textos da descrição do produto */
.produto-descricao,
.produto-descricao p,
.produto-descricao li,
.produto-descricao span,
.produto-descricao div,
.abas-custom,
.tab-content,
#descricao,
.descricao-produto,
.descricao {
    color: #222 !important;
}

/* Títulos */
.produto-descricao h1,
.produto-descricao h2,
.produto-descricao h3,
#descricao h1,
#descricao h2,
#descricao h3,
.descricao h1,
.descricao h2,
.descricao h3 {
    color: #111 !important;
}