@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..800;1,62..125,400..800&display=swap');

/* ====== KONER ====== */
/* Paleta: preto puro #000000 (header), preto #141414, preto apoio #1f1f1f, off-white #f5f5f3, laranja #F26F00 */
/* Ponte até a Groomb liberar o arquivo do tema. Depois disso, as cores voltam pro editor. */

/* ---------- Cores do tema ---------- */
:root {
--csOfsT:#F26F00 !important;
--csOfs:#000000 !important;
--cOfsP2T:#f5f5f3 !important;
--cOfsP2:#000000 !important;
--cOfsPT:#141414 !important;
--cOfsP:#F26F00 !important;
--cOfsVT:#f5f5f3 !important;
--cOfsV:#000000 !important;
--cOfsMS:#000000 !important;
--cOfsMT:#F26F00 !important;
--cOfsM:#000000 !important;
--csCorPrincipal:#000000 !important;
--csBotoes:#F26F00 !important;
--csSuporte:#F26F00 !important;
--csSuporteIcone:#141414 !important;
--csInfoDestaque:#0d0d0d !important;
--csInfoDestaqueTxt:#f5f5f3 !important;
--csCab:#000000 !important;
--csCabTxt:#f5f5f3 !important;
--csBusca:#1a1a1a !important;
--csBuscaTxt:#b3b3b3 !important;
--csCarrinhoqtd:#F26F00 !important;
--csCarrinhoqtdn:#141414 !important;
--csMenu:#F26F00 !important;
--csMenuTxt:#141414 !important;
--csTodasCategorias:#141414 !important;
--csBandeiraDesconto:#F26F00 !important;
--csBp1:#141414 !important;
--csBp2:#F26F00 !important;
--csBp3:#1f1f1f !important;

--cFundo:#f5f5f3 !important;
--cBotoes:#F26F00 !important;
--cBotoesTxt:#141414 !important;
--cTitulos:#141414 !important;
--cAlerta:#F26F00 !important;
--cdP:#F26F00 !important;
--cSuporte:#F26F00 !important;
--cSuporteIcone:#141414 !important;
--cBarra:#000000 !important;
--cBarraTxt:#f5f5f3 !important;
--cInfoDestaque:#0d0d0d !important;
--cInfoDestaqueIcone:#F26F00 !important;
--cInfoDestaqueTxt:#f5f5f3 !important;
--cCab:#000000 !important;
--cCabIcones:#f5f5f3 !important;
--cCabTxt:#f5f5f3 !important;
--cBusca:#1a1a1a !important;
--cBuscaTxt:#b3b3b3 !important;
--cCarrinhoqtd:#F26F00 !important;
--cCarrinhoqtdn:#141414 !important;
--cMenu:#F26F00 !important;
--cMenuTxt:#141414 !important;
--cTodasCategoriasIcone:#141414 !important;
--cTodasCategoriasTxt:#141414 !important;
--cBannerF:#000000 !important;
--cBannerN:#f5f5f3 !important;
--cBannerP:#F26F00 !important;
--cBannerB:#F26F00 !important;
--cBannerBTxt:#141414 !important;
--cTarja:#000000 !important;
--cTarjaIcone:#F26F00 !important;
--cTarjaTxt:#f5f5f3 !important;
--cTarjaSub:#b3b3b3 !important;
--cPreco:#53a96c !important;
--cPix:#f5f5f3 !important;
--cPixIcone:#F26F00 !important;
--cPixTxt:#141414 !important;
--cBotaoWP:#ffffff !important;
--cBotaoWPTxt:#141414 !important;
--cBotaoWPBorda:#F26F00 !important;
--cBandeiraDesconto:#F26F00 !important;
--cBandeiraDescontoTxt:#141414 !important;
--cBandeiraFrete:#1e8a4c !important;
--cBandeiraFreteTxt:#ffffff !important;
--cBp1:#141414 !important;
--cBp1Txt:#F26F00 !important;
--cBp2:#F26F00 !important;
--cBp2Txt:#141414 !important;
--cBp3:#1f1f1f !important;
--cBp3Txt:#f5f5f3 !important;
--cVMarcas:#ffffff !important;
--cVMarcasTxt:#141414 !important;
--cVVideo:#000000 !important;
--cVVideoTxt:#f5f5f3 !important;
--cVBlog:#f5f5f3 !important;
--cVBlogTxt:#141414 !important;
--cVBlogD:#F26F00 !important;
--cVDepoimentos:#ffffff !important;
--cVDepoimentosTxt:#141414 !important;
--cNewsletter:#F26F00 !important;
--cNewsletterTxt:#141414 !important;
--cNewsletterCaixa:#ffffff !important;
--cNewsletterCaixaTxt:#141414 !important;
--cRodape:#f5f5f3 !important;
--cRodapeTxt:#141414 !important;
--cRodapeRedes:#e4e4e2 !important;
--cRodapeRedesTxt:#141414 !important;
--cRodapeInferior:#f5f5f3 !important;
--cRodapeInferiorTxt:#141414 !important;
--cLancamento:#F26F00 !important;
--cDesc:#ffffff !important;
--cDescTxt:#141414 !important;
}

/* ---------- Fonte ---------- */
body, input, select, .titulo, button, textarea, .pagina-pagina .caixa-sombreada p {
  font-family:'Archivo', Arial, sans-serif !important;
}

/* ---------- Títulos no estilo KONER: condensado, itálico, caixa alta ---------- */
.titulo,
.titulo-categoria,
.titulo-categoria strong,
.vitrine .titulo,
.vitrine h2 {
  font-family:'Archivo', Arial, sans-serif !important;
  font-style:italic !important;
  font-stretch:75%;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:0.01em;
}

/* ---------- Rodapé "Sobre nós": logo + texto organizados ---------- */
#rodape .rodape-sobre .logo,
#rodape .rodape-sobre .logo a {
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  margin:0 !important;
}
#rodape .rodape-sobre .logo img {
  content:url("https://cdn.awsli.com.br/2836/2836968/arquivos/koner-descrito-laranja-preto.png") !important;
  width:220px !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  margin:-22px 0 -18px -8px !important; /* a imagem tem sobra transparente */
  display:block !important;
}
@media (max-width: 991px) {
  #rodape .rodape-sobre .logo img {
    width:200px !important;
    margin:-18px 0 -14px -6px !important;
  }
}
/* texto: o original fica escondido e é reescrito com negrito e itálico */
#rodape .rodape-sobre p {
  font-size:0 !important;
  margin:0 !important;
  max-width:330px;
}
#rodape .rodape-sobre p::before {
  content:"Experiência profissional em estética automotiva.";
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  color:#141414;
}
#rodape .rodape-sobre p::after {
  content:"Produtos de qualidade, atendimento especializado e entrega ágil garantida.";
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  color:#3a3a3a;
}
#rodape .rodape-sobre > span::after {
  content:"MANTENHA SUA CONQUISTA VIVA.";
  display:block;
  margin-top:12px;
  font-size:16px;
  font-weight:800;
  font-style:italic;
  letter-spacing:.01em;
  color:#141414;
}

/* ---------- Rodapé: uma peça só, clara, com linha divisória ---------- */
#rodape .institucional + div,
#rodape > div:last-child,
.rodape-inferior,
#rodape .pagamento-selos,
#rodape [class*="inferior"] {
  border-top:1px solid #dcdcda !important;
}

/* ---------- Cards de produto: leve elevação no hover ---------- */
.listagem-produtos .produto,
.box-produto {
  transition:box-shadow .2s, transform .2s;
}
.listagem-produtos .produto:hover,
.box-produto:hover {
  box-shadow:0 8px 24px rgba(20,20,20,.08);
  transform:translateY(-4px);
}

/* ---------- Hover dos botões: laranja um tom mais escuro ---------- */
.botao.principal:hover,
.botao.botao-comprar.principal:hover,
.btn.btn-primary:hover {
  background:#d96300 !important;
  color:#141414 !important;
}

/* ---------- Header preto puro (reforço) ---------- */
#cabecalho, header#cabecalho, .cabecalho, .topo, .fundo-principal {
  background-color:#000000 !important;
}

/* ---------- Logo do header no celular: não invade a lupa ---------- */
@media (max-width: 991px) {
  #cabecalho .logo,
  #cabecalho #logo,
  #cabecalho .logo-imagem,
  header .logo {
    max-width:45% !important;
    overflow:hidden !important;
    margin:0 auto !important;
  }
  #cabecalho .logo img,
  #cabecalho #logo img,
  #cabecalho .logo-imagem img,
  header .logo img {
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:28px !important;
    object-fit:contain !important;
  }
  /* lupa e carrinho sempre por cima do logo */
  #cabecalho .busca,
  #cabecalho [class*="busca"],
  #cabecalho [class*="carrinho"],
  #cabecalho [class*="menu-mobile"] {
    position:relative;
    z-index:5 !important;
  }
}

/* ---------- Carrossel de marcas: logos em tamanho controlado por tela ---------- */
.vitrine-marcas img {
  object-fit:contain !important;
  height:auto !important;
  width:auto !important;
  margin:0 auto !important;
  display:block !important;
}
/* celular pequeno (iPhone SE, Androids compactos) */
@media (max-width: 400px) {
  .vitrine-marcas img { max-height:60px !important; max-width:55% !important; }
}
/* celular comum (iPhone 13/14/15, Galaxy S) */
@media (min-width: 401px) and (max-width: 575px) {
  .vitrine-marcas img { max-height:70px !important; max-width:50% !important; }
}
/* celular grande deitado e tablet pequeno */
@media (min-width: 576px) and (max-width: 767px) {
  .vitrine-marcas img { max-height:80px !important; max-width:45% !important; }
}
/* tablet (iPad) */
@media (min-width: 768px) and (max-width: 991px) {
  .vitrine-marcas img { max-height:90px !important; max-width:70% !important; }
}
/* computador */
@media (min-width: 992px) {
  .vitrine-marcas img { max-height:100px !important; max-width:80% !important; }
}

/* ---------- Menu rápido (celular e tablet) em laranja, igual ao computador ---------- */
@media (max-width: 991px) {
  #cabecalho .menu-rapido {
    background:#F26F00 !important;
    margin:6px -15px 0 !important;
    padding:7px 15px !important;
    border:0 !important;
  }
  #cabecalho .menu-rapido a {
    color:#000000 !important;
  }
}