/* ============================================================
   VITA ORIGEM — CSS Personalizado | Loja Integrada
   Paleta: Verde #1e5631 | Dourado #c9a055 | Creme #f7f4ee
   IMPORTANTE: Não sobrescreve o grid Bootstrap da plataforma
   ============================================================ */

/* ─── VARIÁVEIS ─────────────────────────────────────────── */
:root {
  --verde:        #1e5631;
  --verde-esc:    #163d23;
  --verde-hover:  #2d7a47;
  --dourado:      #c9a055;
  --dourado-cl:   #e2c07a;
  --creme:        #f7f4ee;
  --creme-esc:    #e8e2d6;
  --texto:        #2d2d2d;
  --texto-suave:  #777;
  --branco:       #ffffff;
  --radius:       10px;
  --radius-lg:    14px;
  --sombra:       0 3px 16px rgba(30, 86, 49, 0.11);
  --sombra-h:     0 8px 28px rgba(30, 86, 49, 0.20);
  --trans:        all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BASE ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--creme);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(30, 86, 49, 0.18);
  color: var(--verde-esc);
}

a { transition: var(--trans); }

.conteiner {
    border:none !important;
    box-shadow: none !important;
    padding:6px !important;
}

#cabecalho .superior.row-fluid {
    border-bottom: none !important;
    padding-bottom: 8px !important;
}

/* ─── BARRA TOPO ────────────────────────────────────────── */
.atalhos-topo,
.barra-topo {
  background: var(--verde-esc) !important;
  color: rgba(255,255,255,0.82);
  font-size: 12.5px;
  padding: 7px 0;
}

.atalhos-topo a,
.barra-topo a {
  color: rgba(255,255,255,0.75);
}

.atalhos-topo a:hover,
.barra-topo a:hover {
  color: var(--dourado-cl);
}

/* ─── CABEÇALHO ─────────────────────────────────────────── */
#cabecalho {
  background: var(--branco) !important;
  border-bottom: 4px solid var(--dourado) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09);
}

/* Logo */
#cabecalho .logo img {
  max-height: 78px;
  width: auto;
  transition: opacity 0.2s;
}

#cabecalho .logo img:hover {
  opacity: 0.85;
}

/* Linha separadora entre info e busca */
#cabecalho .superior.row-fluid {
  border-bottom: 1px solid var(--creme-esc);
  padding-bottom: 8px !important;
}

/* "Bem-vindo, identifique-se para fazer pedidos" */
.bem-vindo.cor-secundaria,
.menu-user-welcome {
  color: var(--texto-suave) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

.bem-vindo a,
.menu-user-welcome a {
  color: var(--verde) !important;
  font-weight: 600;
}

.bem-vindo a:hover,
.menu-user-welcome a:hover {
  color: var(--dourado) !important;
}

/* Botão dropdown "Olá" */
.botao.secundario.pequeno.dropdown-toggle {
  background: var(--creme) !important;
  border: 1.5px solid var(--creme-esc) !important;
  color: var(--verde) !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  transition: var(--trans);
}

.botao.secundario.pequeno.dropdown-toggle:hover {
  background: var(--verde) !important;
  color: var(--branco) !important;
}

/* Links superiores — Meus Pedidos / Minha Conta */
.superior a.cor-secundaria {
  color: var(--verde) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  transition: var(--trans);
}

.superior a.cor-secundaria:hover {
  color: var(--dourado) !important;
}

/* Carrinho — forçar texto branco em tudo dentro */
#cabecalho .carrinho *,
#cabecalho .carrinho span,
#cabecalho .carrinho b,
#cabecalho .carrinho strong,
#cabecalho .carrinho .cor-secundaria,
#cabecalho .carrinho .titulo {
  color: var(--branco) !important;
}

/* Ícone do carrinho — branco sobre verde */
#cabecalho .carrinho .icon-shopping-cart,
#cabecalho .carrinho [class*="icon-"] {
  background: transparent !important;
  color: var(--branco) !important;
}

/* Busca — remove o fundo quadrado cinza do container */
#cabecalho .busca,
#cabecalho .busca.borda-alpha,
div#cabecalho div.busca,
div#cabecalho div.busca.borda-alpha {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

#cabecalho input[type="text"],
#cabecalho input[type="search"] {
  border: 2px solid var(--creme-esc) !important;
  border-radius: 50px !important;
  padding: 8px 18px !important;
  background: var(--creme) !important;
  font-size: 13.5px !important;
  height: auto !important;
  transition: var(--trans);
  outline: none;
}

#cabecalho input[type="text"]:focus,
#cabecalho input[type="search"]:focus {
  border-color: var(--verde) !important;
  background: var(--branco) !important;
  box-shadow: 0 0 0 3px rgba(30,86,49,0.12) !important;
}

.botao-busca,
.botao.botao-busca {
  background: var(--verde) !important;
  color: var(--branco) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  transition: var(--trans);
}

.botao-busca:hover {
  background: var(--dourado) !important;
  transform: scale(1.04);
}

/* Carrinho */
#cabecalho .carrinho {
  background: transparent !important;
  border: 2px solid var(--verde) !important;
  border-radius: 50px !important;
  color: var(--verde) !important;
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  transition: var(--trans);
}

#cabecalho .carrinho:hover {
  background: var(--verde) !important;
  color: var(--branco) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,86,49,0.2) !important;
}

#cabecalho .carrinho:hover * {
  color: var(--branco) !important;
}

.qtd-carrinho {
  color: var(--verde) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}

/* Corrige texto branco no carrinho quando hover */
#cabecalho .carrinho *,
#cabecalho .carrinho span,
#cabecalho .carrinho b,
#cabecalho .carrinho strong,
#cabecalho .carrinho .cor-secundaria,
#cabecalho .carrinho .titulo,
#cabecalho .carrinho .vazio-text {
  color: inherit !important;
}

#cabecalho .carrinho [class*="icon-"] {
  background: transparent !important;
}

/* ─── MENU SUPERIOR ─────────────────────────────────────── */
.menu.superior {
  background: var(--verde) !important;
  border-top: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  min-height: 0 !important;
}

/* Quando vazio, não mostra bloco */
.menu.superior .nivel-um:empty {
  display: none;
}

.menu.superior .nivel-um > li > a {
  color: var(--branco) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 16px !important;
  border-bottom: 3px solid transparent;
  transition: var(--trans);
}

/* Força texto branco no strong dentro dos links do menu */
.menu.superior .nivel-um > li > a strong,
.menu.superior .nivel-um > li > a span,
.menu.superior .nivel-um > li > a * {
  color: var(--branco) !important;
}

.menu.superior .nivel-um > li > a:hover,
.menu.superior .nivel-um > li.ativo > a {
  background: var(--verde-esc) !important;
  border-bottom-color: var(--dourado) !important;
  color: var(--dourado-cl) !important;
}

/* Submenu dropdown */
.menu.superior .nivel-dois {
  background: var(--branco) !important;
  border-top: 3px solid var(--dourado) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--sombra) !important;
}

.menu.superior .nivel-dois a {
  color: var(--texto) !important;
  padding: 10px 18px !important;
  font-size: 13px;
  border-bottom: 1px solid var(--creme-esc) !important;
  transition: var(--trans);
}

.menu.superior .nivel-dois a:hover {
  background: var(--creme) !important;
  color: var(--verde) !important;
  padding-left: 24px !important;
}

/* ─── MENU LATERAL (sidebar) ────────────────────────────── */
.menu.lateral {
  background: var(--branco) !important;
  border: 1px solid var(--creme-esc) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* Título da seção (h3/h4) — só o cabeçalho do bloco */
.menu.lateral > h3.titulo,
.menu.lateral > h4.titulo,
.menu.lateral > div > h3.titulo,
.menu.lateral > div > h4.titulo {
  background: var(--verde) !important;
  color: var(--branco) !important;
  padding: 12px 16px !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 !important;
}

/* Links das categorias — fundo branco, texto verde */
.menu.lateral .nivel-um li a {
  color: var(--verde) !important;
  padding: 10px 16px !important;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--creme-esc) !important;
  display: block;
  background: var(--branco) !important;
  transition: var(--trans);
}

/* strong/span dentro dos links — NÃO recebe fundo verde */
.menu.lateral .nivel-um li a strong,
.menu.lateral .nivel-um li a span,
.menu.lateral .nivel-um li a .titulo {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  display: inline !important;
}

.menu.lateral .nivel-um li a:hover {
  background: var(--creme) !important;
  color: var(--verde-esc) !important;
  border-left: 3px solid var(--dourado) !important;
  padding-left: 20px !important;
}

.menu.lateral .nivel-um li.ativo > a {
  color: var(--verde-esc) !important;
  font-weight: 700;
  border-left: 3px solid var(--dourado) !important;
}

/* ─── CORPO ─────────────────────────────────────────────── */
#corpo {
  background: var(--creme);
  padding: 28px 0 48px;
}

/* ─── LISTAGEM DE PRODUTOS ──────────────────────────────── */
.listagem {
  background: transparent !important;
  border: none !important;
}

.listagem h4.titulo {
  font-size: 20px;
  font-weight: 700;
  color: var(--verde-esc);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--dourado) !important;
  position: relative;
}

/* ─── CARD DE PRODUTO ───────────────────────────────────── */
/* O li.span3 é o wrapper do Bootstrap — não tocar no layout */
.listagem-linha li.span3 {
  padding: 0 0px;
  margin-bottom: 20px !important;
}

.listagem-item {
  background: var(--branco) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--creme-esc) !important;
  box-shadow: var(--sombra) !important;
  overflow: hidden;
  transition: var(--trans);
  position: relative;
  height: 100%;
}

.listagem-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-h) !important;
  border-color: var(--verde) !important;
}

/* Imagem do produto */
.listagem-item .imagem-produto {
  overflow: hidden;
  background: var(--branco) !important;
  border-bottom: 1px solid var(--creme-esc);
  padding: 8px;
}

.listagem-item .imagem-produto img.imagem-principal {
  width: 100%;
  display: block;
  transition: transform 0.4s ease !important;
  aspect-ratio: 1/1;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}

.listagem-item:hover .imagem-produto img.imagem-principal {
  transform: scale(1.06);
}

/* Info do produto */
.listagem-item .info-produto {
  padding: 14px 16px 16px !important;
}

/* Nome */
.listagem-item .nome-produto {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45;
  color: var(--texto) !important;
  display: block;
  margin-bottom: 10px;
  transition: var(--trans);
}

.listagem-item:hover .nome-produto {
  color: var(--verde) !important;
}

/* Preço */
.listagem-item .preco-produto {
  margin-top: 6px;
}

.listagem-item .preco-venda {
  color: var(--texto-suave) !important;
  font-size: 11.5px !important;
  text-decoration: line-through;
  display: block;
}

.listagem-item .preco-promocional,
.listagem-item strong.preco-promocional {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--verde) !important;
  display: block;
  margin: 2px 0;
}

.listagem-item .preco-parcelamento,
.listagem-item .parcelamento {
  font-size: 11px !important;
  color: var(--texto-suave) !important;
}

/* Botão comprar no card */
.listagem-item .botao-comprar,
.listagem-item .comprar,
.listagem-item a.botao.principal {
  display: block !important;
  background: var(--verde) !important;
  color: var(--branco) !important;
  text-align: center;
  border-radius: 50px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: 12px;
  border: none !important;
  transition: var(--trans);
  letter-spacing: 0.02em;
}

.listagem-item .botao-comprar:hover,
.listagem-item .comprar:hover,
.listagem-item a.botao.principal:hover {
  background: var(--dourado) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(201,160,85,0.4) !important;
}

/* ─── BOTÕES GLOBAIS ────────────────────────────────────── */
.botao.principal,
a.botao.principal,
button.botao.principal {
  background: var(--verde) !important;
  color: var(--branco) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  transition: var(--trans);
}

.botao.principal:hover {
  background: var(--verde-esc) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30,86,49,0.30) !important;
}

.botao.secundario {
  border: 2px solid var(--verde) !important;
  color: var(--verde) !important;
  background: transparent !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: var(--trans);
}

.botao.secundario:hover {
  background: var(--verde) !important;
  color: var(--branco) !important;
}

/* ─── PÁGINA DE PRODUTO ─────────────────────────────────── */
.pagina-produto #corpo {
  padding-top: 32px;
}

/* Galeria */
.foto-produto-principal img,
.imagem-produto-detalhe img {
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
}

.miniaturas-produto img,
.fotos-produto-miniaturas img {
  border-radius: var(--radius) !important;
  border: 2px solid transparent !important;
  transition: var(--trans);
  cursor: pointer;
}

.miniaturas-produto img:hover,
.fotos-produto-miniaturas img:hover,
.miniaturas-produto img.ativo {
  border-color: var(--dourado) !important;
  transform: scale(1.06);
}

/* Nome do produto */
.pagina-produto h1.nome-produto,
.pagina-produto .titulo-produto {
  color: var(--verde-esc) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* Preço na página */
.pagina-produto .preco-produto {
  background: var(--creme) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  border-left: 4px solid var(--dourado) !important;
  margin: 16px 0;
}

.pagina-produto .preco-promocional,
.pagina-produto strong.preco-promocional {
  font-size: 32px !important;
  color: var(--verde) !important;
  font-weight: 700 !important;
}

.pagina-produto .preco-venda {
  color: var(--texto-suave) !important;
  font-size: 14px !important;
  text-decoration: line-through;
}

/* Descrição */
.descricao-produto,
.pagina-produto .descricao {
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: #555 !important;
  margin-top: 20px;
}

/* ─── BANNERS ───────────────────────────────────────────── */
.secao-banners {
  position: relative;
  overflow: hidden;
}

.secao-banners img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ─── BREADCRUMB ────────────────────────────────────────── */
.breadcrumb,
.caminho-navegacao {
  background: transparent !important;
  padding: 10px 0 !important;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.breadcrumb a,
.caminho-navegacao a {
  color: var(--verde) !important;
}

.breadcrumb a:hover {
  color: var(--dourado) !important;
}

/* ─── FORMULÁRIOS ───────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border: 2px solid var(--creme-esc) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--texto) !important;
  background: var(--branco) !important;
  transition: var(--trans);
  font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--verde) !important;
  box-shadow: 0 0 0 4px rgba(30,86,49,0.10) !important;
  outline: none;
}

/* ─── CARRINHO / CHECKOUT ───────────────────────────────── */
.pagina-carrinho .tabela-produtos,
.tabela-carrinho {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.pagina-carrinho thead,
.tabela-carrinho thead {
  background: var(--verde) !important;
  color: var(--branco) !important;
}

.pagina-carrinho tbody tr:hover,
.tabela-carrinho tbody tr:hover {
  background: var(--creme) !important;
}

.total-carrinho,
.valor-total {
  color: var(--verde) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* ─── PAGINAÇÃO ─────────────────────────────────────────── */
.paginacao a,
.paginacao span {
  border: 2px solid var(--creme-esc) !important;
  border-radius: var(--radius) !important;
  color: var(--texto) !important;
  padding: 7px 13px !important;
  font-weight: 600;
  transition: var(--trans);
}

.paginacao a:hover {
  border-color: var(--verde) !important;
  color: var(--verde) !important;
  background: var(--creme) !important;
}

.paginacao .ativo,
.paginacao .pagina-atual {
  background: var(--verde) !important;
  border-color: var(--verde) !important;
  color: var(--branco) !important;
}

/* ─── RODAPÉ ────────────────────────────────────────────── */
#rodape {
  margin-top: 48px;
  border-top: 4px solid var(--dourado);
}

#rodape .institucional {
  background: var(--verde-esc) !important;
  color: rgba(255,255,255,0.80) !important;
  padding: 44px 0 !important;
}

#rodape .titulo {
  color: var(--dourado) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 18px !important;
}

#rodape a {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13.5px;
  transition: var(--trans);
}

#rodape a:hover {
  color: var(--dourado-cl) !important;
  padding-left: 5px !important;
}

/* Selos de pagamento */
.bandeiras-pagamento,
.pagamento-selos {
  margin-top: 12px;
  opacity: 0.85;
  filter: brightness(0.9) contrast(1.1);
}

/* Faixa copyright */
.rodape-copy,
.copyright {
  background: #0f2a18 !important;
  color: rgba(255,255,255,0.45) !important;
  padding: 16px 0 !important;
  font-size: 12px !important;
  text-align: center;
}

/* ─── UTILIDADES DA PLATAFORMA ──────────────────────────── */
.cor-principal  { color: var(--verde) !important; }
.cor-secundaria { color: var(--dourado) !important; }
.fundo-principal   { background: var(--verde) !important; }
.fundo-secundario  { background: var(--dourado) !important; }
.borda-principal   { border-color: var(--verde) !important; }
.borda-alpha       { border-color: var(--creme-esc) !important; }

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .listagem-linha li.span3 {
    padding: 0 6px;
    margin-bottom: 14px !important;
  }

  .listagem-item .nome-produto {
    font-size: 12.5px !important;
  }

  .listagem-item .preco-promocional,
  .listagem-item strong.preco-promocional {
    font-size: 16px !important;
  }

  #rodape .institucional {
    padding: 28px 0 !important;
  }

  .menu.lateral {
    border-radius: var(--radius) !important;
    margin-bottom: 20px;
  }
}

/* ─── ATALHOS MOBILE ────────────────────────────────────── */
.atalhos-mobile {
  background: var(--verde-esc) !important;
}

.atalhos-mobile a {
  color: var(--branco) !important;
}

.atalhos-mobile a:hover {
  color: var(--dourado) !important;
}