:root {
    --main-light-color: #e6ecf4;
    --main-dark-color: #102A83;
    --main-very-dark-color: #0C1C53;
  }
  
  /* Scrollbar */
  body::-webkit-scrollbar {
      width: 10px;
  }
  
  body::-webkit-scrollbar-thumb {
      background-color: var(--main-dark-color);
      border-radius: 8px;
  }
  
  /* Garantir a cor do corpo */
  body {
      background: #ffffff;
  }
  
  /* Ajustes dos inputs */
  input {
      border-color: #dfdfdf !important;
  }
  
  /* Classes principais para uso posterior: */
  /* .conteiner, .row-fluid,.span-{1-12} */
  
  .busca .botao-busca {
      padding: 6px 14px;
  }
  
  /* Barra superior do menu desktop */
  .barra-inicial{
      background: var(--main-very-dark-color);
  }
  .busca.borda-alpha {
      border: none;
      box-shadow: none;
      background: transparent;
  }
  
  .busca.borda-alpha input {
      border-radius: 44px;
      padding: 8px 16px;
      border-color: #dfdfdf;
  }
  
  .busca.borda-alpha form button {
      height: 38px;
      color: #555;
      background: transparent;
      border: none;
  }
  
  .menu.superior .nivel-um > li {
      border-right: none;
  }
  
  #cabecalho .menu .nivel-dois,
  #cabecalho .menu .nivel-tres {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
  }
  
  .menu .nivel-dois,
  .menu .nivel-tres,
  .menu.lateral .nivel-um > li > a {
      background-color: #fff;
      box-shadow: 0 5px 8px -2px rgb(0 0 0 / 6%);
  }
  
  .menu li > a i,
  .menu-responsivo i {
      border-radius: 20px;
  }
  
  .busca.borda-alpha form button:hover {
      color: #555;
  }
  
  /* Menu mobile */
  #barraTopo {
      display: none;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 7px rgb(0 0 0 / 50%);
      height: 48px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99999;
      padding: 16px 0;
  }
  
  #barraTopo .busca.borda-alpha input {
      border-radius: 44px;
      padding: 4px 4px 4px 12px;
      border-color: #dfdfdf;
  }
  
  #barraTopo .busca.borda-alpha form button {
      height: 30px;
  }
  
  /* Íconer e botões da barra superior */
  .carrinho {
      border: none;
      position: relative;
      background: var(--main-light-color);
      border-radius: 38px;
  }
  
  .carrinho > a i {
      display: block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 24px;
      border-radius: 40px;
  }
  
  .icon-shopping-cart:before {
      margin-left: -3px;
  }
  
  .acoes-conta > li i {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 6px;
      border-radius: 54px;
      line-height: 24px;
  }
  
  .menu.superior {
      background-color: #ffffff;
      display: flex;
      justify-content: center;
  }
  
  /* Blocos padrão do site */
  .conteiner-principal .conteiner {
      box-shadow: none;
  }
  
  .secao-banners > .conteiner {
      max-width: 100% !important;
  }
  
  /* Ajustes de banners gerais da loja */
  .banner.tarja {
      text-align: center;
  }
  .banner.tarja > img {
      max-width: 1140px;
  }
  
  /* Ajustes dos botões principais do site, lembrar que é usado everywhere */
  .botao.principal,
  .avise-me .avise-btn .botao {
      padding: 14px 24px;
      border-radius: 55px;
      border: none;
      font-size: 16px;
      text-shadow: none;
  }
  
  .botao {
      background-image: none;
  }
  
  .btn {
      background-image: none;
  }
  
  /* Listagens da tela inicial */
  .listagem .titulo-categoria {
      border-bottom: 2px solid #e0e0e0;
      border-top: none;
      font-weight: bold;
      font-size: 24px;
  }
  
  .listagem .titulo-categoria:hover {
      background: #ffffff;
      padding-left: 0;
  }
  
  .listagem-item .acoes-produto {
      bottom: -10px;
  }
  
  .listagem-item:hover .acoes-produto {
      border: none;
      /* bottom: 38%; */
      bottom: 5px;
  }

  /* Mini banner */

  .banner.mini-banner{
      margin-top: 2.5rem;
  }
  
  /* Rodapé: links e categorias e os selos */
  
  #rodape .institucional,
  #rodape .pagamento-selos {
      background-image: none !important;
      background-position: top center;
      background-repeat: no-repeat;
      background: var(--main-light-color);
  }
  
  #rodape .institucional {
      padding-top: 2rem;
  }
  
  #rodape .institucional .titulo {
      color: var(--main-dark-color);;
  }
  
  #rodape .institucional ul,
  #rodape .institucional ul li,
  #rodape .institucional ul a,
  #rodape .institucional ul p,
  #rodape .links-rodape,
  #rodape .links-rodape ul,
  #rodape .links-rodape ul li,
  #rodape .links-rodape ul li a,
  #rodape .links-rodape p,
  #rodape .sobre-loja-rodape, 
  #rodape .sobre-loja-rodape ul, 
  #rodape .sobre-loja-rodape ul li, 
  #rodape .sobre-loja-rodape ul li a, 
  #rodape .sobre-loja-rodape p{
      color: #555;
  } 
  
  #rodape .institucional .lista-redes ul, #rodape .institucional .lista-redes ul a {
      color: #ffffff;
  }
  
  #rodape .titulo {
      border-bottom: none;
  }
  
  /* Ajustes dos botões de redes sociais */
  #rodape .redes-sociais{
      background: #ffffff;
  }
  
  #rodape .lista-redes ul li{
      border:none;
  }
  
  /*Bloco redes sociais*/
  #rodape .redes-sociais{
      box-shadow: none;
  }
  
  /* Descrição do produto */
  #descricao p{
      font-size: 0.9rem;
  }
  
  .barra-inicial .lista-redes i{
      background: transparent;
  }
  
  .lista-redes i{
      border-radius: 50%;
  }
  
  .links-rodape ul li {
      list-style-image: none;
  }
  
  /* Listagem de produtos tela inicial */
  .listagem .listagem-linha li {
      border: none;
  }
  
  .listagem-linha ul li > div {
      padding: 2rem 10px 5rem 10px !important;
      border-radius: 12px;
  }
  
  .listagem-linha ul li:hover > div {
      box-shadow: 0 0 10px rgb(0 0 0 / 8%);
  }
  
  .listagem-linha ul li .info-produto {
      text-align: center;
      padding-top: 20px !important;
  }
  .listagem-linha ul li .info-produto * {
      color: #555;
  }
  
  /* .listagem-linha ul li .info-produto div:last-child{
      color: rgb(41, 39, 39);
      font-size: 16px;
  } */
  
  /* Gerais de telas */
  .dropdown-menu {
      box-shadow: 0 5px 8px -2px rgb(0 0 0 / 6%);
      border-radius: 12px;
      padding: 8px 4px;
      border: none;
  }
  
  .componente.newsletter {
      background: #efefef;
  }
  
  /* Área de login */
  .cadastro-logar .caixa-sombreada {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      box-shadow: 0 5px 8px -2px rgb(0 0 0 / 6%);
  }
  
  /* Cards com sombra */
  .caixa-sombreada {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      box-shadow: 0 5px 8px -2px rgb(0 0 0 / 6%);
  }
  
  .cadastro-logar .caixa-sombreada .botao.principal {
      padding: 6px 16px;
      border-radius: 55px;
      border: none;
      font-size: 15px;
  }
  
  /* Área de cadastro completa do usuário novo */
  /* Botão simples de voltar */
  .botao {
      padding: 14px 24px;
      border-radius: 55px;
      border: none;
      font-size: 15px;
  }
  .dados-acesso {
      background: #efefef;
  }
  
  /* Alerts - bootstrap */
  .alert {
      padding: 1rem 1.5rem;
      border: none;
      box-shadow: none;
      font-size: 13px;
  }
  
  .alert .close {
      right: -5px;
  }
  
  .alert.alert-danger {
      background: #ffe9e9;
  }
  
  @media screen and (max-width: 600px) {
      .botao.principal {
          padding: 4px 10px;
      }
  }
  
  /* LGPD */
  .termLGPD {
      position: fixed;
      width: 100%;
      bottom: 0px;
      background-color: #00588d;
      color: #fff;
      text-align: center;
      font-size: 30px;
      z-index: 1001;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      min-height: 80px;
      padding-top: 15px;
      padding-bottom: 15px;
  }
  .termLGPD label {
      width: 100%;
      max-width: 800px;
  }
  .termLGPD a {
      color: #ccc;
  }
  .termLGPD button {
      background-color: var(--main-dark-color);
      padding: 15px;
      color: #fff;
      border-radius: 5px;
      margin-left: 10px;
  }
  /* Resposividade para botoes de comprar da listagem inicial e da tarja LGPD */
  @media screen and (max-width: 700px) {
      .listagem .listagem-item .acoes-produto-responsiva{
          position: relative;
          text-align: center;
          margin-top: 16px;
      }
      .acoes-produto-responsiva.visible-phone a.tag-comprar {
          border-radius: 60px;
          padding: 2px 20px;
      }
      .acoes-produto-responsiva.visible-phone a.tag-comprar .titulo {
          margin-right: 10px;
      }
      .acoes-produto-responsiva.visible-phone a.tag-comprar .icon-search {
          font-size: 18px;
          top: 0;
      }
      .termLGPD label {
          padding: 2px 40px 12px 40px;
      }
  }
  
  @media screen and (min-width: 768px){
      .secao-banners .conteiner{
          padding:0;
      }
  }