/* ============================================================
   ZIRA DECORA — CSS Loja Integrada
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {
  --roxo-escuro:    #4a2d6e;
  --roxo-principal: #6d4c8e;
  --roxo-medio:     #9b6fc8;
  --roxo-claro:     #e8d5f5;
  --roxo-palido:    #f3e8fc;
  --rosa-claro:     #f9b8d0;
}

/* ── FONTE E FUNDO GERAL ── */
body, input, button, select, textarea, a {
  font-family: 'Lato', Arial, sans-serif !important;
}
body {
  background-color: #ffffff !important;
}

/* ── CONTAINER — sem max-width, ocupa tudo ── */
.conteiner {
  max-width: 100% !important;
  padding: 0 20px !important;
}

/* ── CLASSES DE COR DO TEMA ── */
.fundo-principal { background-color: var(--roxo-principal) !important; }
.fundo-secundario { background-color: var(--roxo-escuro) !important; }
.cor-principal { color: var(--roxo-principal) !important; }
.cor-secundaria { color: var(--roxo-escuro) !important; }
.borda-principal { border-color: var(--roxo-claro) !important; }
.borda-alpha { border-color: rgba(109,76,142,0.2) !important; }

/* ── FAIXA SUPERIOR ── */
div.barra-inicial {
  background-color: var(--roxo-escuro) !important;
}
div.barra-inicial a,
div.barra-inicial span {
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px !important;
}
div.barra-inicial a:hover { color: var(--rosa-claro) !important; }
div.barra-inicial ul li { border-left-color: rgba(255,255,255,0.15) !important; }

/* ── HEADER ── */
#cabecalho {
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--roxo-claro) !important;
}
#cabecalho h1.logo a { height: 72px !important; }
#cabecalho .conteudo-topo .superior { padding: 10px 0 !important; }

#cabecalho a.bem-vindo { color: #888 !important; font-size: 13px !important; }
#cabecalho a.bem-vindo span.cor-principal { color: var(--roxo-principal) !important; }

#cabecalho ul.acoes-conta li a { color: var(--roxo-escuro) !important; font-size: 13px !important; }
#cabecalho ul.acoes-conta li a:hover { color: var(--roxo-medio) !important; }
#cabecalho ul.acoes-conta li i { background-color: var(--roxo-principal) !important; color: #fff !important; }

#cabecalho div.carrinho { border-color: var(--roxo-claro) !important; background-color: #fff !important; }
#cabecalho div.carrinho a,
#cabecalho div.carrinho .vazio-text,
#cabecalho div.carrinho span.cor-secundaria { color: var(--roxo-escuro) !important; }
#cabecalho div.carrinho i.icon-shopping-cart { background-color: var(--roxo-principal) !important; color: #fff !important; }

/* ── BUSCA ── */
#cabecalho div.busca {
  border-color: var(--roxo-claro) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--roxo-palido) !important;
}
#cabecalho div.busca input[type="text"],
#cabecalho div.busca input#auto-complete {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--roxo-escuro) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
}
#cabecalho div.busca input::placeholder { color: var(--roxo-medio) !important; opacity: 1 !important; }
#cabecalho div.busca button.botao-busca {
  background-color: var(--roxo-principal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 22px 22px 0 !important;
}

/* ── BARRA FIXA ── */
#barraTopo {
  background-color: var(--roxo-escuro) !important;
  border-bottom: 2px solid var(--roxo-medio) !important;
}
#barraTopo h4 a,
#barraTopo .canais-contato a,
#barraTopo .canais-contato span { color: rgba(255,255,255,0.8) !important; }
#barraTopo div.busca {
  border-color: rgba(255,255,255,0.25) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.1) !important;
}
#barraTopo div.busca input[type="text"] {
  background: transparent !important; border: none !important;
  box-shadow: none !important; color: #fff !important;
}
#barraTopo div.busca input::placeholder { color: rgba(255,255,255,0.55) !important; }
#barraTopo div.busca button.botao-busca { background-color: var(--roxo-medio) !important; color: #fff !important; border: none !important; }
#barraTopo div.carrinho a,
#barraTopo div.carrinho .vazio-text { color: rgba(255,255,255,0.85) !important; }
#barraTopo div.carrinho i.icon-shopping-cart { background-color: var(--rosa-claro) !important; color: var(--roxo-escuro) !important; }

/* ── MENU SUPERIOR — uma linha só ── */
div.menu.superior {
  background-color: var(--roxo-principal) !important;
  margin-top: 0 !important;
}
div.menu.superior ul.nivel-um {
  display: flex !important;
  justify-content: center !important;
}
div.menu.superior ul.nivel-um > li {
  padding: 0 15px !important;
  border-color: rgba(255,255,255,0.12) !important;
  border-top-width: 0 !important;
}
div.menu.superior ul.nivel-um > li:hover { margin-top: 0 !important; border-top-width: 0 !important; }
div.menu.superior ul.nivel-um > li > a strong.titulo {
  color: rgba(255,255,255,0.9) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  margin: 10px 0 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}
div.menu.superior ul.nivel-um > li:hover > a strong.titulo {
  color: #fff !important;
}
div.menu.superior ul.nivel-um > li > ul {
  background-color: var(--roxo-escuro) !important;
  border: 1px solid var(--roxo-claro) !important;
  border-radius: 6px !important;
}
div.menu.superior ul.nivel-um > li > ul li { border-color: rgba(255,255,255,0.08) !important; }
div.menu.superior ul.nivel-um > li > ul li a,
div.menu.superior ul.nivel-um > li > ul li a strong { color: rgba(255,255,255,0.8) !important; }
div.menu.superior ul.nivel-um > li > ul li a:hover strong { color: var(--rosa-claro) !important; }

.icon-chevron-down.fundo-secundario {
  background: none !important;
}

/* ── MENU LATERAL ── */
div.menu.lateral {
  background-color: #fff !important;
  border: 1px solid var(--roxo-claro) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
div.menu.lateral ul.nivel-um > li {
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: var(--roxo-claro) !important;
}
div.menu.lateral ul.nivel-um > li:last-child { border-bottom: none !important; }
div.menu.lateral ul.nivel-um > li > a {
  padding: 10px 14px !important;
  text-decoration: none !important;
  display: block !important;
  transition: background 0.15s, padding-left 0.15s !important;
}
div.menu.lateral ul.nivel-um > li > a strong.titulo {
  color: var(--roxo-escuro) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
div.menu.lateral ul.nivel-um > li:hover > a { background-color: var(--roxo-palido) !important; padding-left: 20px !important; }
div.menu.lateral ul.nivel-um > li:hover > a strong.titulo { color: var(--roxo-principal) !important; }

/* ── CORPO ── */
#corpo { background-color: #faf5ff !important; }
.conteiner-principal .conteiner { background-color: #ffffff !important; }

/* ── IMAGENS DE PRODUTO — fundo branco, nunca roxo ── */
.listagem-item .imagem-produto,
div.listagem-item div.imagem-produto {
  background-color: #ffffff !important;
}

/* ── TÍTULO LISTAGEM ── */
#listagemProdutos h4.titulo {
  color: var(--roxo-escuro) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--roxo-claro) !important;
  padding-bottom: 8px !important;
}
.listagem .listagem-linha { border-color: var(--roxo-claro) !important; }
.listagem .listagem-linha li { border-color: var(--roxo-claro) !important; }

/* ── CARD PRODUTO ── */
div.listagem-item {
  background: #fff !important;
  border: 1px solid var(--roxo-claro) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
div.listagem-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(109,76,142,0.12) !important;
}
div.listagem-item a.nome-produto {
  color: var(--roxo-escuro) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 6px !important;
}
div.listagem-item a.nome-produto:hover { color: var(--roxo-principal) !important; text-decoration: none !important; }
div.listagem-item span.preco-parcela,
div.listagem-item span.preco-parcela strong { color: var(--roxo-medio) !important; font-size: 12px !important; }
div.listagem-item strong.preco-promocional { color: var(--roxo-principal) !important; font-size: 15px !important; font-weight: 700 !important; }
div.listagem-item s.preco-venda { color: #bbb !important; font-size: 11px !important; }
div.listagem-item .acoes-produto { background-color: rgba(255,255,255,0.88) !important; border-color: var(--roxo-claro) !important; }
div.listagem-item a.botao-comprar {
  background-color: var(--roxo-principal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
div.listagem-item a.botao-comprar:hover { background-color: var(--roxo-medio) !important; color: #fff !important; }

/* ── BOTÕES GERAIS ── */
a.botao.principal, button.botao.principal, input[type="submit"].botao.principal {
  background-color: var(--roxo-principal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  transition: background 0.2s !important;
}
a.botao.principal:hover, button.botao.principal:hover { background-color: var(--roxo-medio) !important; color: #fff !important; }
a.botao.secundario, button.botao.secundario {
  color: var(--roxo-principal) !important;
  border: 1.5px solid var(--roxo-principal) !important;
  border-radius: 20px !important;
}
a.botao.secundario:hover { background-color: var(--roxo-palido) !important; }

/* ── FORMULÁRIOS ── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  border: 1.5px solid var(--roxo-claro) !important;
  border-radius: 8px !important;
  color: var(--roxo-escuro) !important;
  font-size: 13px !important;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--roxo-principal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(109,76,142,0.12) !important;
}

/* ── MOBILE ── */
div.atalhos-mobile { background-color: var(--roxo-escuro) !important; }
div.atalhos-mobile li a { color: rgba(255,255,255,0.85) !important; }
div.atalhos-mobile li.fundo-principal a { color: var(--roxo-escuro) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-thumb { background: var(--roxo-claro) !important; border-radius: 10px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--roxo-principal) !important; }



/* ── MENU LATERAL MELHORADO ── */
div.menu.lateral {
  background-color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(74,45,110,0.10) !important;
}

/* Cabeçalho do menu */
div.menu.lateral ul.nivel-um::before {
  content: 'Categorias' !important;
  display: block !important;
  background: linear-gradient(135deg, #4a2d6e, #6d4c8e) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 14px 18px !important;
  font-family: 'Lato', Arial, sans-serif !important;
}

/* Cada item */
div.menu.lateral ul.nivel-um > li {
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
  border-color: #f0e8fa !important;
  position: relative !important;
  list-style: none !important;
  background-image: none !important;
}
div.menu.lateral ul.nivel-um > li:last-child {
  border-bottom: none !important;
}

/* Link */
div.menu.lateral ul.nivel-um > li > a {
  padding: 11px 16px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  transition: background 0.18s, border-left-color 0.18s, padding-left 0.18s !important;
}

/* Texto */
div.menu.lateral ul.nivel-um > li > a strong.titulo {
  color: #5a3a7a !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: color 0.18s !important;
  flex: 1 !important;
}

/* Seta */
div.menu.lateral ul.nivel-um > li > a::after {
  content: '›' !important;
  color: #d8b8f0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin-left: auto !important;
  transition: color 0.18s, transform 0.18s !important;
  display: inline-block !important;
}

/* Hover */
div.menu.lateral ul.nivel-um > li:hover > a {
  background-color: #f8f0ff !important;
  border-left-color: #6d4c8e !important;
  padding-left: 20px !important;
}
div.menu.lateral ul.nivel-um > li:hover > a strong.titulo {
  color: #6d4c8e !important;
  font-weight: 700 !important;
}
div.menu.lateral ul.nivel-um > li:hover > a::after {
  color: #6d4c8e !important;
  transform: translateX(3px) !important;
}

/* ── MENU LATERAL V2 — com ícones emoji e design mais rico ── */

/* Container */
div.menu.lateral {
  background: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(74,45,110,0.13) !important;
}

/* Cabeçalho */
div.menu.lateral ul.nivel-um::before {
  content: '🛍️  Categorias' !important;
  display: block !important;
  background: linear-gradient(135deg, #4a2d6e 0%, #9b6fc8 100%) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 16px 18px !important;
  font-family: 'Lato', Arial, sans-serif !important;
}

/* Reset lista */
div.menu.lateral ul.nivel-um {
  margin: 0 !important;
  padding: 0 !important;
}

div.menu.lateral ul.nivel-um > li {
  list-style: none !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid #f3eaff !important;
  margin: 0 !important;
}

div.menu.lateral ul.nivel-um > li:last-child {
  border-bottom: none !important;
}

/* Links */
div.menu.lateral ul.nivel-um > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  background: #fff !important;
  border-left: 4px solid transparent !important;
  transition: all 0.2s ease !important;
  gap: 10px !important;
}

/* Bolinha colorida como marcador */
div.menu.lateral ul.nivel-um > li > a::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #d8b8f0 !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, transform 0.2s !important;
}

div.menu.lateral ul.nivel-um > li > a strong.titulo {
  flex: 1 !important;
  color: #4a2d6e !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
  font-family: 'Lato', Arial, sans-serif !important;
}

/* Seta direita */
div.menu.lateral ul.nivel-um > li > a::after {
  content: '›' !important;
  font-size: 20px !important;
  color: #d8b8f0 !important;
  line-height: 1 !important;
  transition: all 0.2s !important;
  display: inline-block !important;
}

/* Hover */
div.menu.lateral ul.nivel-um > li:hover > a {
  background: linear-gradient(90deg, #f8f0ff, #fff) !important;
  border-left-color: #9b6fc8 !important;
  padding-left: 18px !important;
}

div.menu.lateral ul.nivel-um > li:hover > a::before {
  background: #9b6fc8 !important;
  transform: scale(1.4) !important;
}

div.menu.lateral ul.nivel-um > li:hover > a strong.titulo {
  color: #6d4c8e !important;
  font-weight: 700 !important;
}

div.menu.lateral ul.nivel-um > li:hover > a::after {
  color: #9b6fc8 !important;
  transform: translateX(4px) !important;
}

/* Zebrado suave */
div.menu.lateral ul.nivel-um > li:nth-child(even) > a {
  background: #fdfaff !important;
}
div.menu.lateral ul.nivel-um > li:nth-child(even):hover > a {
  background: linear-gradient(90deg, #f8f0ff, #fdfaff) !important;
}

/* ── DANILO ── */

.conteiner-principal #cabecalho .conteiner:first-child {
  padding:0 !important;
}

.conteiner-principal #cabecalho .conteiner:first-child .row-fluid:first-child {
  padding:20px !important;
  width:unset !important;
}

.container-principal #corpo .conteiner:first-child {
  padding-top:20px !important;
}

#cabecalho > div.conteiner {
  padding:0 !important;
}

#corpo > div.conteiner:first-child {
  padding-top:20px !important;
}

#cabecalho > div.conteiner > div.row-fluid:first-child {
  padding:20px !important;
  width: unset !important;
}

.busca .botao-busca {
  right: 0px !important;
  top: 0px !important;
  height: 50px !important;
}

.listagem .span3 .listagem-item .nome-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .listagem-item .nome-produto {
  min-height: 0 !important;
}

.listagem .listagem-item .nome-produto {
  min-height: 0 !important;
}

.imagem-principal {
  border-radius: 5px !important;
}

#imagemProduto {
  border-radius: 10px !important;
}

.abas-custom .tab-content {
  box-shadow: none !important;
  border-radius: 10px !important;
  border: 1px solid #e8d5f5 !important;
  margin: 10px !important;
  padding: 30px !important;
}

#corpo > div > div.secao-principal.row-fluid > div > div:nth-child(6) > div > div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li:nth-child(1) > div > div.info-produto > a {
  font-size: 1rem !important;
}

h1.nome-produto.titulo.cor-secundaria {
  font-size: 2rem !important;
}

.botao.grande {
  font-size: 22px !important;
}

div.listagem-item a.nome-produto {
  font-size: 1rem !important;
}


/* ── MENU SUPERIOR — RESPONSIVO MOBILE ── */
@media (max-width: 768px) {

  /* Esconde o menu superior no mobile, o atalhos-mobile já cobre */
  div.menu.superior {
    display: none !important;
  }

  /* Busca mobile mais compacta */
  #cabecalho div.busca {
    border-radius: 12px !important;
  }

  /* Dropdown do menu — quando aberto no mobile */
  div.menu.superior ul.nivel-um > li > ul {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }

  div.menu.superior ul.nivel-um > li > ul li a {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
}