/* =============================================================
   DRACO TATTOO SHOP — CSS CUSTOMIZADO v1 (DO ZERO)
   Plataforma: Loja Integrada
   Identidade: Vermelho #e00000, Preto #111, Branco #fff
   ============================================================= */

/* ─────────────────────────────────────────────
   VARIÁVEIS
───────────────────────────────────────────── */
:root {
  --draco-red:   #e00000;
  --draco-black: #111111;
  --draco-white: #ffffff;
  --draco-gray:  #f5f5f5;
  --draco-text:  #333333;
  --draco-muted: #777777;
}

/* ─────────────────────────────────────────────
   1. COOKIES — esconde aviso
───────────────────────────────────────────── */
#avisoCookies { display: none !important; }

/* ─────────────────────────────────────────────
   2. TARJA ANIMADA (announcement bar)
───────────────────────────────────────────── */
.announcement-bar-draco {
  background: var(--draco-red) !important;
  color: #fff !important;
  z-index: 9999 !important;
}

/* ─────────────────────────────────────────────
   3. CABEÇALHO — fundo preto, layout flex
───────────────────────────────────────────── */

/* Esconde barra superior de redes sociais / contato */
#cabecalho .barra-inicial { display: none !important; }

/* Container principal do header */
#cabecalho {
  background: var(--draco-black) !important;
  padding: 0 !important;
  border-bottom: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Cabecalho usa largura total, nao limitada */
#cabecalho .conteiner {
  max-width: 100% !important;
  padding: 0 24px !important;
}
/* Linha com logo + busca + ícones */
#cabecalho .conteiner > .row-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 10px 0 !important;
  gap: 20px !important;
  width: 100% !important;
}
#cabecalho .conteiner > .row-fluid::before,
#cabecalho .conteiner > .row-fluid::after { display: none !important; }

/* — Logo — */
#cabecalho .span3 {
  float: none !important;
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 200px !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#cabecalho .logo {
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#cabecalho .logo a {
  display: block !important;
  visibility: visible !important;
}
#cabecalho .logo img {
  max-height: 60px !important;
  min-height: 30px !important;
  width: 100% !important;
  max-width: 160px !important;
  display: block !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* — Coluna direita (busca + ícones) — */
#cabecalho .conteudo-topo.span9 {
  float: none !important;
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Esconde linha superior (meus pedidos, bem-vindo) */
#cabecalho .superior.row-fluid { display: none !important; }

/* Linha inferior: busca + ícones */
#cabecalho .inferior.row-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  margin: 0 !important;
  width: 100% !important;
}
#cabecalho .inferior.row-fluid::before,
#cabecalho .inferior.row-fluid::after { display: none !important; }

/* — Busca — */
#cabecalho .span8.busca-mobile {
  float: none !important;
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
}
/* Esconde botão hamburguer no desktop */
#cabecalho .atalho-menu.visible-phone { display: none !important; }

/* Container da busca */
#cabecalho .busca,
#cabecalho .busca.borda-alpha {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #222 !important;
  border: 2px solid #444 !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  height: 44px !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Form dentro da busca — ocupa 100% */
#cabecalho #form-buscar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Input de texto */
#cabecalho .busca input,
#cabecalho #form-buscar input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  height: 44px !important;
  line-height: 44px !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block !important;
}
#cabecalho .busca input::placeholder,
#cabecalho #form-buscar input::placeholder { color: #aaa !important; }

/* Botão de busca (lupa) — RESET TOTAL das classes .botao do tema */
#cabecalho .busca .botao-busca,
#cabecalho #form-buscar .botao-busca,
#cabecalho #form-buscar button {
  /* Reset de tudo que o tema injeta em .botao */
  all: unset !important;
  /* Nosso estilo */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--draco-red) !important;
  color: #fff !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 44px !important;
  font-size: 18px !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 0 25px 25px 0 !important;
  transition: background 0.2s !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
#cabecalho .busca .botao-busca:hover,
#cabecalho #form-buscar .botao-busca:hover,
#cabecalho #form-buscar button:hover {
  background: #c00 !important;
}
/* Ícone da lupa dentro do botão */
#cabecalho .busca .botao-busca::before,
#cabecalho #form-buscar .botao-busca::before {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* — Ícones (carrinho, conta, rastreio, contato) — */
#cabecalho .span4.hidden-phone {
  float: none !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrapper visual de cada ícone do header */
#cabecalho .carrinho,
#cabecalho .minha-conta,
#cabecalho .rastreio-btn,
#cabecalho .contato-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}
#cabecalho .carrinho:hover,
#cabecalho .minha-conta:hover,
#cabecalho .rastreio-btn:hover,
#cabecalho .contato-top:hover { background: rgba(255,255,255,0.08) !important; }

/* Ícones — cor e tamanho */
#cabecalho .carrinho i,
#cabecalho .minha-conta i,
#cabecalho .rastreio-topo i,
#cabecalho .contato-evtop i {
  font-size: 22px !important;
  color: var(--draco-red) !important;
  display: block !important;
}

/* Labels abaixo dos ícones */
#cabecalho .carrinho a > .vazio-text,
#cabecalho .carrinho a > b {
  display: block !important;
  color: #ccc !important;
  font-size: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-weight: normal !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
}
#cabecalho .rastreio-topo span,
#cabecalho .contato-evtop + .contato-content > .titulo {
  color: #ccc !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  display: block !important;
  text-align: center !important;
}

/* Link do carrinho */
#cabecalho .carrinho a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Contador do carrinho — badge vermelho */
#cabecalho .qtd-carrinho {
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  background: var(--draco-red) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Conta — esconde dropdown visualmente no ícone */
#cabecalho .minha-conta .btn-group > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #ccc !important;
  font-size: 10px !important;
}
#cabecalho .minha-conta .btn-group > a::after {
  content: 'Minha Conta' !important;
  font-size: 10px !important;
  color: #ccc !important;
  margin-top: 3px !important;
}
#cabecalho .minha-conta .icon-chevron-down { display: none !important; }

/* Rastreio — label */
#cabecalho .rastreio-btn {
  position: relative !important;
}
#cabecalho .rastreio-content {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  min-width: 220px !important;
  z-index: 999 !important;
}
#cabecalho .rastreio-btn:hover .rastreio-content { display: block !important; }
#cabecalho .rastreio-content input {
  width: 100% !important;
  padding: 8px !important;
  margin: 8px 0 !important;
  background: #333 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}
#cabecalho .rastreio-content button {
  background: var(--draco-red) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  width: 100% !important;
  font-weight: 700 !important;
}

/* Contato — dropdown */
#cabecalho .contato-top {
  position: relative !important;
}
#cabecalho .contato-content {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  min-width: 200px !important;
  z-index: 999 !important;
}
#cabecalho .contato-top:hover .contato-content { display: block !important; }
#cabecalho .contato-content ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#cabecalho .contato-content li { padding: 4px 0 !important; }
#cabecalho .contato-content a { color: #ddd !important; text-decoration: none !important; font-size: 13px !important; }

/* Esconde o mini-carrinho flutuante (sidebar) */
#cabecalho .minicart-placeholder { display: none !important; }

/* ─────────────────────────────────────────────
   MOBILE HEADER (≤ 767px)
   Layout linha única: [LOGO] [BUSCA ▶] [≡]
───────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Esconde elementos desktop */
  #cabecalho .atalhos-mobile     { display: none !important; }
  #cabecalho .span4.hidden-phone { display: none !important; }
  #cabecalho .superior.row-fluid { display: none !important; }
  #cabecalho .minha-conta        { display: none !important; }
  #cabecalho .rastreio-btn       { display: none !important; }
  #cabecalho .contato-top        { display: none !important; }
  #cabecalho .barra-inicial      { display: none !important; }

  /* Container sem padding lateral extra */
  #cabecalho .conteiner { padding: 0 !important; }

  /* LINHA PRINCIPAL: [LOGO | BUSCA+HAMBURGER] */
  #cabecalho .conteiner > .row-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cabecalho .conteiner > .row-fluid::before,
  #cabecalho .conteiner > .row-fluid::after { display: none !important; }

  /* LOGO — tamanho fixo, não encolhe */
  #cabecalho .span3 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
  }
  #cabecalho .logo {
    display: block !important;
    margin: 0 !important;
  }
  #cabecalho .logo img {
    height: 38px !important;
    width: auto !important;
    min-width: 70px !important;
    max-width: 100px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* COLUNA DIREITA — cresce, contém busca+hamburger */
  #cabecalho .conteudo-topo.span9 {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Linha da busca: [BUSCA] [≡] — hamburger à DIREITA */
  #cabecalho .inferior.row-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #cabecalho .inferior.row-fluid::before,
  #cabecalho .inferior.row-fluid::after { display: none !important; }

  /* CAMPO DE BUSCA — cresce */
  #cabecalho .span8.busca-mobile {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    order: 1 !important;
  }

  /* HAMBURGUER — fixo, vai para depois da busca */
  #cabecalho .atalho-menu.visible-phone {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: var(--draco-red) !important;
    color: #fff !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    float: none !important;
    position: static !important;
  }

  /* BUSCA — proporções corretas */
  #cabecalho .busca,
  #cabecalho .busca.borda-alpha {
    height: 38px !important;
    border-radius: 20px !important;
    width: 100% !important;
  }
  #cabecalho #form-buscar { height: 38px !important; }
  #cabecalho #form-buscar input {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  #cabecalho .busca .botao-busca,
  #cabecalho #form-buscar .botao-busca,
  #cabecalho #form-buscar button {
    height: 38px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    font-size: 14px !important;
    border-radius: 0 20px 20px 0 !important;
  }
}

/* ─────────────────────────────────────────────
   4. MENU DE NAVEGAÇÃO
───────────────────────────────────────────── */
.menu.superior {
  background: var(--draco-red) !important;
  border: none !important;
  position: relative !important;
  z-index: 900 !important;
}
.menu.superior .nivel-um {
  display: flex !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-evenly !important;
  overflow: visible !important;
  width: 100% !important;
}
.menu.superior .nivel-um > li {
  position: relative !important;
  border: none !important;
}
.menu.superior .nivel-um > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 13px 12px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  gap: 4px !important;
  transition: background 0.2s !important;
}
.menu.superior .nivel-um > li > a:hover { background: rgba(0,0,0,0.2) !important; }
.menu.superior .nivel-um > li > a strong.titulo {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Seta para itens com submenu */
.menu.superior .nivel-um > li.com-filho > a::after {
  content: ' v' !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.8) !important;
  margin-left: 2px !important;
}

/* Submenu dropdown */
.menu.superior .nivel-um > li .nivel-dois {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--draco-black) !important;
  min-width: 180px !important;
  border: 1px solid #333 !important;
  border-radius: 0 0 6px 6px !important;
  z-index: 999 !important;
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}
.menu.superior .nivel-um > li:hover > .nivel-dois { display: block !important; }
.menu.superior .nivel-dois > li > a {
  display: block !important;
  padding: 9px 16px !important;
  color: #ddd !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 0.15s !important;
}
.menu.superior .nivel-dois > li > a strong { background: transparent !important; color: #ddd !important; font-weight: normal !important; }
.menu.superior .nivel-dois > li > a:hover { background: var(--draco-red) !important; color: #fff !important; }
.menu.superior .nivel-dois > li > a:hover strong { color: #fff !important; }

/* Ícone de seta nos sub-itens com filho */
.menu.superior .nivel-dois .icon-chevron-down { display: none !important; }

/* Botão "MAIS CATEGORIAS" — destaque preto com borda vermelha */
.menu.superior .mais-categorias-container > a {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 13px 12px !important;
}
.menu.superior .mais-categorias-container > a:hover {
  background: rgba(0,0,0,0.4) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* "Mais Categorias" dropdown abre para baixo */
.menu.superior .mais-categorias-container .dropdown-mais {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  background: var(--draco-black) !important;
  min-width: 180px !important;
  border: 1px solid #333 !important;
  border-radius: 0 0 6px 6px !important;
  z-index: 999 !important;
  list-style: none !important;
  padding: 6px 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}
.menu.superior .mais-categorias-container:hover .dropdown-mais { display: block !important; }
.menu.superior .dropdown-mais > li > a {
  display: block !important;
  padding: 9px 16px !important;
  color: #ddd !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.menu.superior .dropdown-mais > li > a strong { color: #ddd !important; background: transparent !important; font-weight: normal !important; }
.menu.superior .dropdown-mais > li > a:hover { background: var(--draco-red) !important; color: #fff !important; }

/* Menu mobile — gaveta lateral */
@media (max-width: 767px) {
  .menu.superior {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 80% !important;
    max-width: 300px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    background: var(--draco-black) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important;
  }
  .menu.superior.aberto-forcado { display: block !important; }

  /* Itens em coluna */
  .menu.superior .nivel-um {
    flex-direction: column !important;
    padding: 16px 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    overflow: visible !important;
  }
  .menu.superior .nivel-um > li > a {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    white-space: normal !important;
    background: transparent !important;
  }
  .menu.superior .nivel-um > li > a strong.titulo {
    font-size: 14px !important;
    color: #fff !important;
  }
  .menu.superior .nivel-um > li > a:hover {
    background: var(--draco-red) !important;
  }

  /* Mais categorias — mostra inline */
  .menu.superior .mais-categorias-container > a {
    background: rgba(255,255,255,0.05) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 14px 20px !important;
  }
  .menu.superior .mais-categorias-container .dropdown-mais {
    position: static !important;
    display: block !important;
    background: rgba(0,0,0,0.4) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .menu.superior .dropdown-mais > li > a {
    padding: 12px 30px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #bbb !important;
    font-size: 13px !important;
  }

  /* Submenu nivel-dois inline no mobile */
  .menu.superior .nivel-dois {
    position: static !important;
    display: block !important;
    background: rgba(0,0,0,0.3) !important;
    box-shadow: none !important;
    border: none !important;
  }
  .menu.superior .nivel-dois > li > a {
    padding: 10px 30px !important;
    font-size: 13px !important;
    color: #bbb !important;
  }
}

/* ─────────────────────────────────────────────
   5. BANNER PRINCIPAL — altura mínima 450px
───────────────────────────────────────────── */
.secao-banners .flexslider,
.secao-banners .banner {
  min-height: 420px !important;
  width: 100% !important;
}
.secao-banners .flexslider img,
.secao-banners .banner img {
  width: 100% !important;
  min-height: 420px !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 767px) {
  .secao-banners .flexslider,
  .secao-banners .banner { min-height: 200px !important; }
  .secao-banners img { min-height: 200px !important; }
}

/* ─────────────────────────────────────────────
   6. BARRA DE BENEFÍCIOS — Carrossel infinito
───────────────────────────────────────────── */
@keyframes draco-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.draco-beneficios {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 0;
  overflow: hidden;
}

/* Wrapper que esconde o overflow */
.draco-beneficios-track-wrap {
  overflow: hidden;
  width: 100%;
  padding: 16px 0;
}

/* A ul desliza — contém itens duplicados para loop */
.draco-beneficios-grid {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: draco-scroll 28s linear infinite;
}
.draco-beneficios-grid:hover {
  animation-play-state: paused;
}

/* Cada item do benefício */
.draco-beneficios-grid li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 32px;
  white-space: nowrap;
  border-right: 1px solid #eee;
  flex-shrink: 0;
}

.draco-beneficios-grid .ben-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.draco-beneficios-grid .ben-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--draco-red);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draco-beneficios-grid .ben-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
}
.draco-beneficios-grid .ben-text span {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 1px;
}

/* Mobile — animação mais rápida, itens menores */
@media (max-width: 767px) {
  .draco-beneficios-grid {
    animation-duration: 22s;
  }
  .draco-beneficios-grid li {
    padding: 6px 20px;
    gap: 10px;
  }
  .draco-beneficios-grid .ben-icon svg {
    width: 24px;
    height: 24px;
  }
  .draco-beneficios-grid .ben-text strong {
    font-size: 12px;
  }
  .draco-beneficios-grid .ben-text span {
    font-size: 10px;
  }
}

/* Seção de banners de categorias removida — categorias no menu */

/* ─────────────────────────────────────────────
   8. TÍTULOS DE SEÇÃO
───────────────────────────────────────────── */
.titulo-categoria {
  border: none !important;
  padding: 6px 0 10px 0 !important;
  margin: 32px 0 16px 0 !important;
  background: transparent !important;
  text-align: center !important;
  position: relative !important;
}
.titulo-categoria::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 4px !important;
  background: var(--draco-red) !important;
  margin: 8px auto 0 auto !important;
  border-radius: 2px !important;
}
.titulo-categoria strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--draco-red) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────
   9. VITRINE — CARROSSEL DE PRODUTOS
   O JS converte o FlexSlider para carrossel CSS nativo.
   Container: .draco-carrossel (scroll horizontal suave)
───────────────────────────────────────────── */

/* Esconde o carrossel original ate o JS converter */
.produtos-carrossel { display: none !important; }
.produtos-carrossel.draco-ok { display: block !important; }
/* Garante que nenhum pai corte os botoes nav */
#listagemProdutos,
.listagem,
.conteudo.span12,
.secao-principal { overflow: visible !important; }

/* Wrapper do carrossel com botoes prev/next */
.draco-carrossel-wrap {
  position: relative !important;
  margin: 0 !important;
  padding: 0 44px !important;
  overflow: visible !important;
}

/* Container scroll */
.draco-carrossel {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  list-style: none !important;
  margin: 0 !important;
}
.draco-carrossel::-webkit-scrollbar { display: none !important; }

/* Carrossel com poucos itens (nao precisa de scroll) */
.draco-carrossel.draco-carrossel-fixo {
  overflow-x: visible !important;
  flex-wrap: wrap !important;
}
.draco-carrossel.draco-carrossel-fixo > li {
  flex: 1 1 calc(25% - 12px) !important;
  min-width: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
}
@media (max-width: 991px) {
  .draco-carrossel.draco-carrossel-fixo > li {
    flex: 1 1 calc(33.333% - 12px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
@media (max-width: 599px) {
  .draco-carrossel.draco-carrossel-fixo > li {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Cada card no carrossel */
.draco-carrossel > li {
  flex: 0 0 calc(25% - 12px) !important;
  min-width: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  float: none !important;
}
@media (max-width: 991px) {
  .draco-carrossel > li {
    flex: 0 0 calc(33.333% - 12px) !important;
    min-width: calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
  }
}
@media (max-width: 767px) {
  /* Cards: 80% da tela, mostra 1.2 por vez com peek do próximo */
  .draco-carrossel > li {
    flex: 0 0 80% !important;
    min-width: 80% !important;
    max-width: 80% !important;
  }
  .draco-carrossel {
    gap: 12px !important;
    padding: 8px 0 16px 0 !important;
    /* scroll-snap para arrastar card a card */
    scroll-snap-type: x mandatory !important;
  }
  .draco-carrossel > li {
    scroll-snap-align: start !important;
  }
  .draco-carrossel-wrap {
    padding: 0 16px !important;
    overflow: hidden !important;
  }
  /* Fixo: mesma largura */
  .draco-carrossel.draco-carrossel-fixo > li {
    flex: 0 0 80% !important;
    min-width: 80% !important;
    max-width: 80% !important;
  }
}

/* Botoes prev/next */
.draco-nav-btn {
  position: absolute !important;
  top: 40% !important;
  transform: translateY(-50%) !important;
  background: #fff !important;
  border: 2px solid #ddd !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--draco-red) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.2s !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.draco-nav-btn:hover {
  background: var(--draco-red) !important;
  color: #fff !important;
  border-color: var(--draco-red) !important;
}
.draco-nav-prev { left: 0 !important; }
.draco-nav-next { right: 0 !important; }
@media (max-width: 767px) {
  .draco-nav-btn { display: none !important; }
}

/* Card do produto */
.listagem-item {
  background: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
  padding: 14px !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  /* Garante que acoes-produto fica dentro do card */
  align-items: stretch !important;
}
.listagem-item:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.16) !important;
  transform: translateY(-2px) !important;
}

/* Imagem do produto — vem ANTES do nome no flex order */
.imagem-produto {
  text-align: center !important;
  margin-bottom: 10px !important;
  order: -1 !important;
}
.imagem-produto img {
  max-width: 100% !important;
  height: 180px !important;
  width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: #fafafa !important;
}

/* Info */
.info-produto {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.nome-produto {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #222 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 18px !important;
  margin-bottom: 6px !important;
  word-break: break-word !important;
}

/* Estrelas de avaliação (injetadas pelo JS) */
.draco-stars {
  color: #f5a623 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  letter-spacing: 1px !important;
}

/* Preço */
.preco-produto {
  border: none !important;
  margin-top: auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
.preco-venda { /* risco de preço antigo */
  text-decoration: line-through !important;
  color: #aaa !important;
  font-size: 12px !important;
  display: block !important;
}
.preco-promocional {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111 !important;
  display: block !important;
  line-height: 1.2 !important;
}
.draco-pix-label {
  font-size: 11px !important;
  color: #888 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.preco-parcela {
  font-size: 12px !important;
  color: #555 !important;
  display: block !important;
  margin-top: 2px !important;
}
.desconto-a-vista {
  background: #fff5f5 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  display: block !important;
}
.desconto-a-vista strong {
  color: var(--draco-red) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Badge de desconto */
.bandeiras-produto {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 2 !important;
}
.bandeira-promocao {
  background: var(--draco-red) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

/* Botão COMPRAR — sólido vermelho, sem bordas do tema */
/* ATENÇÃO: seletores precisos para NÃO vazar para .botao-busca da pesquisa */
.acoes-produto .botao.botao-comprar.principal,
.acoes-produto .botao.botao-comprar,
.acoes-produto .botao-comprar,
.acoes-produto .botao-comprar.principal,
.acoes-produto-responsiva .tag-comprar {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--draco-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
}
.acoes-produto .botao.botao-comprar.principal:hover,
.acoes-produto .botao.botao-comprar:hover,
.acoes-produto .botao-comprar:hover,
.acoes-produto .botao-comprar.principal:hover,
.acoes-produto-responsiva .tag-comprar:hover {
  background: #cc0000 !important;
  color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
}
/* Botão de compra — sempre no fluxo normal do card */
.acoes-produto,
.acoes-produto.hidden-phone,
.acoes-produto-responsiva {
  position: static !important;
  width: 100% !important;
  display: block !important;
  margin-top: auto !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

/* Desktop: mostra hidden-phone, esconde responsiva */
@media (min-width: 768px) {
  .acoes-produto.hidden-phone { display: block !important; }
  .acoes-produto-responsiva.visible-phone { display: none !important; }
}

/* Mobile: esconde hidden-phone, mostra responsiva */
@media (max-width: 767px) {
  .acoes-produto.hidden-phone { display: none !important; }
  .acoes-produto-responsiva.visible-phone {
    display: block !important;
    width: 100% !important;
    position: static !important;
  }
}

/* Botão WhatsApp removido */

/* Mobile — cards 80% da largura, conteúdo maior e legível */
@media (max-width: 767px) {
  .listagem-item {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .imagem-produto img {
    height: 200px !important;
    object-fit: contain !important;
  }
  .nome-produto {
    font-size: 14px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: 21px !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 8px !important;
  }
  .draco-stars {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  .preco-venda {
    font-size: 13px !important;
  }
  .preco-promocional {
    font-size: 22px !important;
  }
  .preco-parcela {
    font-size: 12px !important;
  }
  .desconto-a-vista {
    font-size: 12px !important;
    padding: 5px 10px !important;
    margin-top: 6px !important;
  }
  .desconto-a-vista strong {
    font-size: 14px !important;
  }
  /* Botão COMPRAR no mobile — tamanho normal */
  .acoes-produto .botao-comprar,
  .acoes-produto .botao.botao-comprar,
  .acoes-produto-responsiva .tag-comprar {
    font-size: 13px !important;
    padding: 11px 0 !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ─────────────────────────────────────────────
   10. NEWSLETTER (injetada pelo JS)
───────────────────────────────────────────── */
.draco-newsletter {
  background: var(--draco-red);
  padding: 36px 0;
}
.draco-newsletter .conteiner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.draco-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.draco-nl-texto strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.draco-nl-texto span {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  display: block;
}
.draco-nl-form {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 600px;
  flex-wrap: wrap;
}
.draco-nl-form input {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.draco-nl-form button {
  background: #111;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.draco-nl-form button:hover { background: #000; }
@media (max-width: 767px) {
  .draco-newsletter { padding: 28px 0; }
  .draco-newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .draco-nl-texto strong { font-size: 18px; }
  .draco-nl-form {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .draco-nl-form input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .draco-nl-form button {
    width: 100%;
    text-align: center;
    padding: 12px;
  }
}

/* ─────────────────────────────────────────────
   11. RODAPÉ
───────────────────────────────────────────── */
#rodape .institucional {
  background: var(--draco-black) !important;
  padding: 40px 0 !important;
  border: none !important;
}

/* Recolore todos os textos do rodapé */
#rodape .institucional,
#rodape .institucional p,
#rodape .institucional span,
#rodape .institucional .titulo,
#rodape .institucional a,
#rodape .institucional li a {
  color: #ccc !important;
}
#rodape .institucional .titulo {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 12px !important;
  display: block !important;
}
#rodape .institucional a:hover { color: var(--draco-red) !important; }

/* Logo no rodapé */
#rodape .logo img { max-height: 50px !important; width: auto !important; filter: brightness(0) invert(1) !important; margin-bottom: 12px !important; }

/* Links */
#rodape .links-rodape ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#rodape .links-rodape ul li { padding: 3px 0 !important; }

/* Ícones de redes sociais */
#rodape .lista-redes ul { display: flex !important; gap: 10px !important; list-style: none !important; padding: 0 !important; margin: 12px 0 0 0 !important; }
#rodape .lista-redes a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 16px !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}
#rodape .lista-redes a:hover { background: var(--draco-red) !important; }

/* Bandeiras de pagamento */
#rodape .bandeiras-pagamento { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 8px 0 !important; }

/* Barra inferior do rodapé — fundo preto */
#rodape .odge-rodape {
  background: #000 !important;
  padding: 14px 0 !important;
}
#rodape .odge-rodape p,
#rodape .odge-rodape span,
#rodape .odge-rodape a { color: #777 !important; font-size: 12px !important; }
#rodape .odge-rodape .logo img { max-height: 32px !important; filter: brightness(0) invert(0.4) !important; }

/* Linha de creditos da plataforma */
#rodape > div:last-of-type {
  background: #000 !important;
}
#rodape > div:last-of-type p,
#rodape > div:last-of-type a {
  color: #555 !important;
}

/* Pagamento selos */
#rodape .pagamento-selos { background: #000 !important; }

/* ─────────────────────────────────────────────
   12. GERAL — ajustes finos
───────────────────────────────────────────── */
/* Container padrão */
.conteiner { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; }
/* Banner full-width — remove limitação do conteiner */
.secao-banners .conteiner { max-width: 100% !important; padding: 0 !important; }
.secao-banners .row-fluid.banner.cheio { width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Link produto — remove sublinhado */
.produto-sobrepor { text-decoration: none !important; }

/* Lupa de zoom no produto */
.imagem-produto .icon-search { display: none !important; }

/* Esconde SKU */
.produto-sku.hide { display: none !important; }

/* WhatsApp flutuante */
.li-whatsapp a {
  background-image: linear-gradient(to right, #1a7a38, #25D366) !important;
}

/* ─────────────────────────────────────────────
   CORREÇÕES GERAIS MOBILE
───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Botão COMPRAR antes do WhatsApp */
  .acoes-produto.hidden-phone { order: 1 !important; }
  .acoes-produto-responsiva { order: 1 !important; }
  .draco-wpp-btn { order: 2 !important; }

  /* Rodapé mobile — coluna única */
  #rodape .institucional { padding: 28px 0 !important; }
  #rodape .row-fluid { flex-direction: column !important; }
  #rodape .span4,
  #rodape .span3,
  #rodape .span9 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px !important;
  }
  #rodape .titulo { font-size: 13px !important; margin-top: 8px !important; }
  #rodape .links-rodape ul li { padding: 4px 0 !important; }

  /* Conteiner global no mobile */
  .conteiner { padding: 0 14px !important; }

  /* Beneficios — sem gap negativo no mobile */
  .draco-beneficios .conteiner { padding: 0 !important; }

  /* Oculta botoes nav no mobile */
  .draco-nav-btn { display: none !important; }
}

/* ═══════════════════════════════════════════
   MOBILE CONSOLIDADO — correções finais
═══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 1. Esconde seção de categorias se ainda existir no DOM */
  .draco-cat-banners { display: none !important; }

  /* 2. Botões de nav do carrossel — ocultos no mobile (usa swipe) */
  .draco-nav-btn { display: none !important; }

  /* 3. Carrinho wrapper no mobile — sem padding extra */
  .draco-carrossel-wrap {
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  /* 4. tag-comprar (botão mobile da LI) — fundo vermelho, texto branco */
  .acoes-produto-responsiva .tag-comprar,
  .acoes-produto-responsiva a.tag-comprar {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--draco-red) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 11px 0 !important;
    margin-top: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
  }
  .acoes-produto-responsiva .tag-comprar .titulo,
  .acoes-produto-responsiva .tag-comprar span.titulo {
    display: inline !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  /* Esconde ícone de lupa e seta dentro do botão */
  .acoes-produto-responsiva .tag-comprar i,
  .acoes-produto-responsiva .tag-comprar .icon-search { display: none !important; }
}

/* ─────────────────────────────────────────────
   SLIDER DE CATEGORIAS (Slick) — oculto no mobile
   Os links são injetados no menu hamburguer pelo JS
───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Container do slider de categorias gerado pela LI */
  .slick-list,
  .slick-track,
  .slick-slider,
  [class*="slick"] { display: none !important; }

  /* Qualquer wrapper pai que contenha o slick */
  .categorias-slider,
  .menu-categorias-slider,
  .nav-categorias { display: none !important; }
}

/* ─────────────────────────────────────────────
   ITENS DO SLIDER INJETADOS NO MENU HAMBURGUER
───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Separador de seção dentro do menu */
  .draco-menu-sep {
    display: block !important;
    list-style: none !important;
    pointer-events: none !important;
  }
  /* Links das categorias injetadas */
  .draco-slick-injetado {
    display: block !important;
    list-style: none !important;
    border: none !important;
  }
  .draco-slick-injetado a {
    color: #ddd !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: block !important;
  }
}