/* ==========================================
   SEX SHOP - DARK LUXURY
   LOJA INTEGRADA | PRETO + ROXO
   ========================================== */

/* 01 - CORES E CONFIGURACOES */

:root {
  --preto: #09070d;
  --fundo: #100b19;
  --card: #191021;
  --roxo-escuro: #27143e;
  --roxo: #8529d8;
  --roxo-claro: #ab59f2;
  --lilas: #c78cff;
  --branco: #ffffff;
  --texto: #e6d8ef;
  --cinza: #b5a6c1;
  --borda: rgba(199,140,255,.22);
  --gradiente: linear-gradient(
    135deg,#6221a4,#a442ed
  );
  --sombra: 0 8px 30px rgba(0,0,0,.35);
  --brilho: 0 0 22px rgba(133,41,216,.35);
  --raio: 14px;
}

/* 02 - CONFIGURACAO GERAL */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--fundo) !important;
  color: var(--texto);
  font-family: "Montserrat", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body,
.conteiner-principal,
#corpo {
  background-color: var(--fundo);
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--roxo);
  color: white;
}

a {
  color: var(--lilas);
  transition: color .25s ease;
}

a:hover {
  color: var(--branco);
}

h1,h2,h3,h4,h5,h6 {
  color: var(--branco);
  font-weight: 700;
  letter-spacing: -.3px;
}

/* 03 - CABECALHO */

#cabecalho {
  background: var(--preto) !important;
  border-bottom: 1px solid var(--borda);
  box-shadow: 0 5px 25px rgba(0,0,0,.4);
}

#cabecalho .conteiner {
  background: transparent;
}

#cabecalho .logo img {
  max-height: 110px;
  object-fit: contain;
  transition: transform .3s;
}

#cabecalho .logo img:hover {
  transform: scale(1.04);
}

#cabecalho a {
  color: var(--texto);
}

#cabecalho a:hover {
  color: var(--lilas);
}

/* 04 - BARRA SUPERIOR */

.barra-inicial {
  background: var(--roxo-escuro) !important;
  color: white;
  border: 0;
}

.barra-inicial a,
.barra-inicial span {
  color: white !important;
}

/* 05 - MENU PRINCIPAL */

.menu.superior {
  background: var(--preto) !important;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.menu.superior .nivel-um > li > a {
  color: var(--branco) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .7px;
  transition: all .25s;
}

.menu.superior .nivel-um > li:hover > a {
  color: var(--lilas) !important;
  background: rgba(133,41,216,.12);
}

.menu.superior .nivel-dois,
.menu.superior .nivel-tres {
  background: var(--card) !important;
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
}

.menu.superior .nivel-dois a,
.menu.superior .nivel-tres a {
  color: var(--texto) !important;
}

.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-tres a:hover {
  background: var(--roxo-escuro);
  color: white !important;
}

/* 06 - CAMPO DE BUSCA */

.busca,
.busca form {
  background: transparent !important;
}

.busca input {
  background: var(--card) !important;
  color: white !important;
  border: 1px solid var(--borda) !important;
  border-radius: 25px !important;
  padding: 12px 18px !important;
  box-shadow: none !important;
  transition: .3s;
}

.busca input:focus {
  border-color: var(--lilas) !important;
  box-shadow: var(--brilho) !important;
  outline: none;
}

.busca input::placeholder {
  color: var(--cinza);
}

.busca .botao-busca {
  background: var(--roxo) !important;
  color: white !important;
  border-radius: 50%;
}

/* 07 - CARRINHO */

.carrinho,
.carrinho > a {
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 12px;
}

.carrinho:hover {
  border-color: var(--lilas) !important;
  box-shadow: var(--brilho);
}

.carrinho .qtd-carrinho,
.carrinho .carrinho-interno {
  color: var(--branco);
}

.carrinho-interno {
  background: var(--card) !important;
  border: 1px solid var(--borda);
}

/* 08 - BANNERS */

.banner,
.banner.cheio,
.banner .flexslider {
  overflow: hidden;
  border-radius: var(--raio);
}

.banner img {
  max-width: 100%;
  height: auto;
  transition: transform .6s ease;
}

.banner a:hover img {
  transform: scale(1.025);
}

.flex-control-paging li a {
  background: var(--roxo-escuro);
}

.flex-control-paging li a.flex-active {
  background: var(--lilas);
}

/* 09 - TITULOS DAS VITRINES */

.vitrine .titulo,
.listagem .titulo,
.titulo-categoria {
  color: var(--branco) !important;
  font-weight: 700 !important;
}

.listagem > .titulo {
  border-bottom: 1px solid var(--borda);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.listagem > .titulo::after {
  content: "";
  display: block;
  width: 65px;
  height: 3px;
  margin-top: 10px;
  background: var(--gradiente);
  border-radius: 6px;
}

/* 10 - CARDS DOS PRODUTOS */

.listagem .listagem-item {
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--raio);
  padding: 12px !important;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.listagem .listagem-item:hover {
  transform: translateY(-6px);
  border-color: var(--roxo-claro) !important;
  box-shadow:
    0 15px 35px rgba(0,0,0,.45),
    0 0 20px rgba(133,41,216,.2);
}

.listagem .imagem-produto {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.listagem .imagem-produto img {
  transition: transform .5s ease;
}

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

/* 11 - NOMES DOS PRODUTOS */

.listagem .nome-produto,
.listagem .nome-produto a {
  color: var(--branco) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.listagem .nome-produto:hover,
.listagem .nome-produto a:hover {
  color: var(--lilas) !important;
}

/* 12 - PRECOS */

.preco-promocional,
.preco-produto .preco-promocional {
  color: var(--lilas) !important;
  font-size: 22px;
  font-weight: 800;
}

.preco-venda,
.preco-produto {
  color: var(--branco);
}

.preco-antigo,
.preco-parcela,
.preco-a-partir {
  color: var(--cinza) !important;
}

.desconto-a-vista {
  color: var(--lilas);
}

/* 13 - SELOS E PROMOCOES */

.bandeiras-produto .bandeira,
.bandeira-promocao,
.bandeira-frete-gratis {
  background: var(--roxo) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px;
}

/* 14 - BOTOES GERAIS */

.botao,
.btn,
button[type="submit"],
input[type="submit"] {
  background: var(--gradiente) !important;
  color: white !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700;
  letter-spacing: .2px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.botao:hover,
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--brilho);
  filter: brightness(1.12);
}

.botao:active,
.btn:active {
  transform: scale(.98);
}

.botao.principal,
.botao-comprar,
.botao.grande {
  background: var(--gradiente) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 12px 20px;
  font-weight: 800;
}

/* 15 - PAGINA DO PRODUTO */

.pagina-produto #corpo {
  background: var(--fundo);
}

.pagina-produto .nome-produto {
  color: white !important;
  font-weight: 700;
}

.produto .principal {
  color: var(--texto);
}

.produto .preco-promocional {
  font-size: 28px;
}

.produto .acoes-produto {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}

.produto .imagem-principal {
  background: white;
  border-radius: var(--raio);
  overflow: hidden;
}

.produto .imagem-principal img {
  transition: transform .4s;
}

.produto .imagem-principal:hover img {
  transform: scale(1.045);
}

.produto .miniaturas img {
  border-radius: 8px;
  border: 2px solid transparent;
}

.produto .miniaturas a:hover img {
  border-color: var(--roxo);
}

/* 16 - DESCRICAO DO PRODUTO */

#descricao,
#descricao p,
#descricao span,
.tab-content,
.tab-content p,
.tab-content span,
.descricao-produto,
.descricao-produto p,
.descricao-produto span {
  color: var(--texto) !important;
  line-height: 1.8;
}

#descricao,
.descricao-produto {
  background: var(--card);
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 12px;
}

#descricao h2,
#descricao h3,
.descricao-produto h2,
.descricao-produto h3 {
  color: var(--lilas) !important;
}

.abas-custom .tab-content {
  background: var(--card);
  border-radius: 0 0 12px 12px;
}

.abas-custom .active a {
  background: var(--roxo) !important;
  color: white !important;
}

/* 17 - CATEGORIAS E LATERAIS */

.menu.lateral,
.menu.lateral .nivel-um {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.menu.lateral a {
  color: var(--texto) !important;
}

.menu.lateral a:hover {
  color: var(--lilas) !important;
  background: var(--roxo-escuro);
}

.filtro,
.filtro.lista {
  background: var(--card);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.filtro label {
  color: var(--texto);
}

/* 18 - FORMULARIOS */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  background-color: var(--card);
  border: 1px solid var(--borda);
  color: var(--branco);
  border-radius: 8px;
  transition: .25s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--lilas);
  outline: none;
  box-shadow: 0 0 0 3px rgba(133,41,216,.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--cinza);
}

select option {
  background: var(--card);
  color: var(--branco);
}

/* 19 - CARRINHO E RESUMOS */

.pagina-carrinho #corpo,
.pagina-carrinho .conteiner-principal {
  background: var(--fundo);
}

.tabela-carrinho,
.tabela-carrinho th,
.tabela-carrinho td {
  color: var(--texto);
  border-color: var(--borda);
}

.tabela-carrinho th {
  background: var(--roxo-escuro);
  color: var(--branco);
}

.tabela-carrinho .produto-info a {
  color: var(--lilas);
}

/* 20 - PAGINACAO E ORDENACAO */

.paginacao a {
  background: var(--card);
  color: var(--lilas);
  border: 1px solid var(--borda);
  border-radius: 7px;
}

.paginacao a:hover,
.paginacao .active a {
  background: var(--roxo);
  color: white;
}

.ordenar-listagem,
.ordenar-listagem label {
  color: var(--texto);
}

/* 21 - NEWSLETTER */

.newsletter {
  background: var(--roxo-escuro) !important;
  border-radius: var(--raio);
  padding: 22px;
}

.newsletter .titulo {
  color: white !important;
}

.newsletter input {
  background: white;
  color: #17111c;
}

.newsletter .botao {
  background: var(--gradiente);
}

/* 22 - RODAPE */

#rodape {
  background: var(--preto) !important;
  border-top: 2px solid var(--roxo-escuro);
  color: var(--texto);
}

#rodape .institucional,
#rodape .pagamento-selos {
  background: var(--preto) !important;
}

#rodape .titulo {
  color: var(--lilas) !important;
  font-weight: 700;
}

#rodape a {
  color: var(--texto);
}

#rodape a:hover {
  color: var(--lilas);
}

#rodape .redes-sociais a {
  transition: transform .25s;
}

#rodape .redes-sociais a:hover {
  transform: translateY(-3px);
}

/* 23 - LINKS, AVISOS E MENSAGENS */

.alert,
.alert-info,
.alert-success {
  background: var(--roxo-escuro);
  border: 1px solid var(--borda);
  color: white;
  border-radius: 10px;
}

.breadcrumbs,
.breadcrumbs a {
  color: var(--cinza);
}

.breadcrumbs a:hover {
  color: var(--lilas);
}

/* 24 - CARROSSEL EXISTENTE */

.flexslider {
  background: transparent;
  border: 0;
}

.flex-direction-nav a {
  background: rgba(39,20,62,.85);
  color: white;
  border-radius: 50%;
}

.flex-direction-nav a:hover {
  background: var(--roxo);
}

.listagem .slick-arrow,
.listagem .flex-direction-nav a {
  color: white;
}

.slick-dots li.slick-active button:before {
  color: var(--lilas);
}

/* 25 - ANIMACOES SUAVES */

@keyframes brilhoRoxo {
  0%,100% {
    box-shadow: 0 0 8px rgba(133,41,216,.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(133,41,216,.5);
  }
}

.botao.principal:hover,
.botao-comprar:hover {
  animation: brilhoRoxo 1.5s ease-in-out infinite;
}

/* 26 - BARRA DE ROLAGEM */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 9px;
  }

  ::-webkit-scrollbar-track {
    background: var(--preto);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--roxo);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--lilas);
  }
}

/* 27 - AJUSTES PARA TABLETS */

@media (max-width: 991px) {
  .listagem .listagem-item {
    padding: 10px !important;
  }

  .listagem .nome-produto {
    font-size: 13px;
  }

  .preco-promocional {
    font-size: 19px;
  }

  .produto .acoes-produto {
    padding: 14px;
  }
}

/* 28 - VERSAO CELULAR */

@media (max-width: 767px) {
  body {
    font-size: 14px;
    overflow-x: hidden;
  }

  #cabecalho {
    padding: 8px 0;
  }

  #cabecalho .logo img {
    max-height: 75px;
  }

  .banner,
  .banner img {
    border-radius: 9px;
  }

  .listagem .listagem-item {
    border-radius: 11px;
    padding: 8px !important;
    margin-bottom: 10px;
    transform: none;
  }

  .listagem .listagem-item:hover {
    transform: none;
  }

  .listagem .imagem-produto img {
    max-width: 100%;
  }

  .listagem .nome-produto,
  .listagem .nome-produto a {
    font-size: 12px;
    line-height: 1.35;
  }

  .preco-promocional,
  .preco-produto .preco-promocional {
    font-size: 17px;
  }

  .preco-parcela {
    font-size: 11px;
  }

  .botao.principal,
  .botao-comprar {
    padding: 12px 10px;
    font-size: 13px;
    border-radius: 9px;
  }

  .produto .preco-promocional {
    font-size: 25px;
  }

  #descricao,
  .descricao-produto {
    padding: 14px;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .newsletter {
    padding: 15px;
  }

  #rodape {
    text-align: center;
  }
}

/* 29 - ACESSIBILIDADE */

:focus-visible {
  outline: 2px solid var(--lilas);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* FIM DO CSS - DARK LUXURY */