/* =========================================================
   KÖRRÄ – AJUSTES DE LAYOUT
   Onde colar: Personalize sua loja > Editar CSS
   Cole NO FINAL do que já existe e clique em Salvar alterações.
   Para trocar a cor de destaque, mude só o valor de --korra-destaque.
   ========================================================= */

:root {
  korra-preto: #000000;
  korra-destaque: #FF5A1F; /* laranja "número de peito" */
  korra-fundo-card: #F2F2F2;
  korra-texto: #1A1A1A;
}

/* 1. Esconde o código SKU (ex.: ZH7DY2ZGU) nas vitrines e categorias */
.listagem-item .produto-sku,
.listagem .produto-sku {
  display: none !important;
}

/* 2. Cards de produto mais limpos */
.listagem-item .imagem-produto img {
  background: var(--korra-fundo-card);
  border-radius: 6px;
}

.listagem-item .nome-produto {
  color: var(--korra-texto);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.7em; /* alinha os preços mesmo com nomes de tamanhos diferentes */
}

.listagem-item .preco-venda,
.listagem-item .preco-promocional {
  font-size: 18px;
}

/* 3. Linha do Pix em destaque (a classe é aplicada pelo código "Todas as páginas") */
.korra-pix-linha {
  color: var(--korra-texto) !important;
  font-weight: 600;
}
.korra-pix-linha strong,
.korra-pix-linha b {
  color: var(--korra-destaque) !important;
}

/* 4. Botão Comprar com a cor da marca */
.botao-comprar,
.botao.principal {
  background: var(--korra-preto) !important;
  border-color: var(--korra-preto) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  font-weight: 700;
  text-shadow: none !important;
}
.botao-comprar:hover,
.botao.principal:hover {
  background: var(--korra-destaque) !important;
  border-color: var(--korra-destaque) !important;
}
.botao-comprar:focus-visible,
.botao.principal:focus-visible {
  outline: 3px solid var(--korra-destaque);
  outline-offset: 2px;
}

/* =========================================================
   KÖRRÄ – BARRA DE BUSCA COM FUNDO SÓLIDO
   Onde colar: Personalize sua loja > Editar CSS
   Cole NO FINAL do CSS que já existe e clique em Salvar alterações.
   ========================================================= */

/* Formulário de busca (a busca da Loja Integrada envia para /buscar) */
form[action*="buscar"],
.busca,
#busca,
.busca-mobile {
  background: #FFFFFF !important;
  border-radius: 6px;
}

/* Campo onde a pessoa digita */
form[action*="buscar"] input[type="text"],
form[action*="buscar"] input[type="search"],
input[name="q"] {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid #CCCCCC !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  opacity: 1 !important;
}
form[action*="buscar"] input::placeholder,
input[name="q"]::placeholder {
  color: #6B6B6B !important;
  opacity: 1;
}
form[action*="buscar"] input:focus,
input[name="q"]:focus {
  border-color: #000000 !important;
  outline: none;
}

/* Botão da lupa */
form[action*="buscar"] button,
form[action*="buscar"] .botao {
  color: #1A1A1A !important;
  background: transparent !important;
}

/* Lista de sugestões que abre enquanto a pessoa digita */
.ui-autocomplete,
.ui-autocomplete .ui-menu-item,
.autocomplete-suggestions {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  z-index: 10000 !important;
}
.ui-autocomplete {
  border: 1px solid #DDDDDD !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

/* Tamanho do logo – computador e celular */
#cabecalho .logo img, #cabecalho h1 img {
  max-height: 60px !important; width: auto !important; max-width: 100%;
}
@media (max-width: 768px) {
  #cabecalho .logo img, #cabecalho h1 img { max-height: 42px !important; }
}

/* Cabeçalho sempre branco, sem transparência (inclusive ao rolar a página) */
.box-header-full, #cabecalho, #cabecalho .conteiner, #cabecalho .conteiner-principal {
  background: #FFFFFF !important; background-image: none !important; }
.box-header-full { border-bottom: 1px solid #E5E5E5; }
/* Textos e ícones escuros, para não sumirem no fundo branco */
#cabecalho a, #cabecalho i, #cabecalho [class*="icon"], #cabecalho .cor-secundaria {
  color: #1A1A1A !important; }