/* ============================================================
   DVYNE · CSS da loja — versão consolidada
   Painel → Personalize sua loja → Editar CSS
   COMO USAR: apaga TUDO que está no campo hoje e cola só isto.
   Não cola no final — substitui, senão fica duplicado.

   Atualizado — bloco 16 (quatro mini banners) e bloco 17
   (só mostrar o estoque quando faltar menos de 10).

   ⚠️ O bloco 13 depende do código HTML "Variações
      indisponíveis", publicado em Rodapé · Página do produto.
      O bloco 14 funciona sozinho, não precisa de nada.
   ============================================================ */


/* ---- 1. TARJA BRANCA DE COOKIES ----------------------------
   Faixa fixa na base da tela, branca a 95%, sem texto e sem
   botão de fechar. O cliente não consegue dispensar e ela
   intercepta o toque no celular.
------------------------------------------------------------ */
#avisoCookies {
  display: none !important;
}


/* ---- 1b. TIRA DE CATEGORIAS DO CELULAR ---------------------
   A Loja Integrada entrega HTML diferente para celular. Lá o
   menu de categorias é a tira #menuinsta (carrossel Slick) —
   elemento que não existe na versão de computador. Fora do
   @media de propósito: ele só é servido para celular.
------------------------------------------------------------ */
#menuinsta {
  display: none !important;
}


/* ---- 2. RODAPÉ COM TEXTO INVISÍVEL ------------------------
   O tema deixou o texto branco sobre fundo branco.
------------------------------------------------------------ */
#rodape .titulo,
#rodape a,
#rodape span,
#rodape li,
#rodape p {
  color: #12100F !important;
}
#rodape a:hover {
  color: #6E675F !important;
}


/* ---- 3. CANTOS ARREDONDADOS -------------------------------
   O banner grande do topo ficou de fora de propósito: sangra
   até a borda da tela e canto redondo ali parece defeito.
------------------------------------------------------------ */
/* mini banners (os três) */
.banner.mini-banner .modulo,
.banner.mini-banner .flexslider,
.banner.mini-banner img {
  border-radius: 16px;
  overflow: hidden;
}
/* fotos da vitrine de produtos */
.listagem-item .imagem-produto,
.listagem-item .imagem-produto img {
  border-radius: 16px;
  overflow: hidden;
}


/* ---- 5. ÍCONES DO TOPO EM CONTORNO ------------------------
   Os quatro ícones do canto direito (fale conosco, rastreio,
   minha conta, carrinho) são fonte de ícone (Font Awesome),
   não imagem — então não existe "versão vazada" pra trocar.
   O truque é pintar o glifo de transparente e desenhar só a
   borda dele. Funciona em qualquer ícone, sem trocar fonte.

   Tamanho: mexa no font-size (era 25px do tema, agora 20px).
   Espessura do traço: mexa no 1px.

   ⚠️ TUDO DENTRO DE @media (min-width:768px) — ou seja, SÓ NO
   COMPUTADOR. No celular esses mesmos ícones ficam numa barra
   PRETA, e contorno preto sobre preto some. Foi o que aconteceu
   com o ícone do caminhão. Não tire este @media.
------------------------------------------------------------ */
@media (min-width: 768px) {
  .contato-evtop i.fas,
  .rastreio-topo i.fas,
  .minha-conta i.fas,
  div.carrinho > a > i.icon-shopping-cart {
    color: transparent !important;
    -webkit-text-stroke: 1px #12100F;
    font-size: 20px !important;
    /* mata o quadrado preto que aparecia ao passar o mouse.
       O tema pinta o fundo do próprio ícone no hover. */
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* o hover também pinta o botão em volta em alguns navegadores */
  .contato-evtop:hover,
  .rastreio-topo:hover,
  .minha-conta a.dropdown-toggle:hover,
  .minha-conta a.dropdown-toggle:focus,
  div.carrinho > a:hover {
    background: none !important;
    box-shadow: none !important;
  }
}
/* O "> a >" acima é de propósito. Sem ele, o ícone branco do
   botão IR PARA O CARRINHO — que fica dentro do mesmo bloco
   do carrinho — também virava contorno e sumia no fundo preto. */


/* ---- 5b. BARRA PRETA DO CELULAR --------------------------
   Garante que TODO ícone dessa barra seja branco cheio, sem
   contorno e sem fundo. Vale para os que já existem e para
   qualquer um que o tema adicione depois.
------------------------------------------------------------ */
.atalhos-mobile a,
.atalhos-mobile i,
.atalhos-mobile [class*="icon-"],
.atalhos-mobile [class*="fa-"] {
  color: #FFFFFF !important;
  -webkit-text-stroke: 0 !important;
  background: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}


/* ---- 6. CONTADOR DO CARRINHO REDONDO ----------------------
   O quadradinho com o número de itens vira círculo, e diminui
   junto com os ícones. Se mudar o tamanho, os três valores
   (width, height, line-height) têm que ficar iguais — é isso
   que mantém o número centralizado dentro do círculo.
------------------------------------------------------------ */
strong.qtd-carrinho {
  border-radius: 50% !important;
  text-align: center;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 11px !important;
}


/* ---- 7. FOTO DO PRODUTO NO CARRINHO -----------------------
   A miniatura da peça na tabela do carrinho estava quadrada,
   destoando das fotos da vitrine que já são arredondadas.
------------------------------------------------------------ */
.conteiner-imagem img,
.conteiner-imagem a,
.conteiner-imagem .imagem {
  border-radius: 10px !important;
  overflow: hidden;
}


/* ---- 8. BOTÕES DE TAMANHO E BOTÃO COMPRAR -----------------
   Tamanho (M/G): cantos arredondados, combinando com as
   bolinhas de cor logo acima.
   Comprar: era verde-limão, virou preto da marca. O verde
   não existe em nenhum outro lugar da loja — era a única
   cor fora da paleta na página inteira.
------------------------------------------------------------ */
a.atributo-item[data-grade-nome="TAMANHO"] {
  border-radius: 8px !important;
}
a.botao.botao-comprar,
a.botao.botao-comprar:focus {
  background: #12100F !important;
  background-color: #12100F !important;
  border-color: #12100F !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
}
a.botao.botao-comprar:hover {
  background: #2A2724 !important;
  background-color: #2A2724 !important;
  color: #FFFFFF !important;
}
/* Enquanto o cliente não escolhe cor e tamanho, o tema deixa
   o botão em 50% de opacidade. Isso é do tema e está certo —
   é o aviso visual de que falta escolher a variação. */


/* ---- 9. MINI-CARRINHO DO TOPO -----------------------------
   A janelinha que abre ao passar o mouse no ícone do carrinho.
   É outro HTML, com outras classes — por isso não pegou junto
   com a foto da página do carrinho.
------------------------------------------------------------ */
.carrinho-interno .imagem-produto,
.carrinho-interno .imagem-produto img {
  border-radius: 8px !important;
  overflow: hidden;
}


/* ---- 10. BOTÃO FINALIZAR COMPRA ---------------------------
   Estava verde igual o Comprar estava. Mesmo tratamento:
   preto da marca e cantos arredondados. O "Continuar
   comprando" ao lado também arredonda, senão fica um botão
   redondo colado num quadrado.
------------------------------------------------------------ */
.finalizar-compra button.botao.principal,
.finalizar-compra button.botao.principal:focus {
  background: #12100F !important;
  background-color: #12100F !important;
  border-color: #12100F !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
}
.finalizar-compra button.botao.principal:hover {
  background: #2A2724 !important;
  background-color: #2A2724 !important;
}
.finalizar-compra a.botao {
  border-radius: 10px !important;
}
/* O botão da PÁGINA DE CHECKOUT é outro elemento: tem id
   próprio (#finalizarCompra) e não está dentro de
   .finalizar-compra. Por isso precisa da regra separada. */
button#finalizarCompra,
button#finalizarCompra:focus {
  background: #12100F !important;
  background-color: #12100F !important;
  border-color: #12100F !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
}
button#finalizarCompra:hover {
  background: #2A2724 !important;
  background-color: #2A2724 !important;
}


/* ---- 11. CAIXAS DO CHECKOUT ------------------------------
   As opções de entrega, os endereços e a forma de pagamento
   vinham com canto de 4px — quase reto. Sobem para 10px, o
   mesmo raio das fotos e dos botões.

   De propósito NÃO arredondei os contêineres das três
   colunas: eles têm uma régua preta grossa no topo, e o
   canto redondo transformava a régua num arco.
------------------------------------------------------------ */
#formas-envio-wrapper .forma-envio,
.endereco.accordion-group,
#formas-pagamento-wrapper .accordion-group {
  border-radius: 10px !important;
  overflow: hidden;
}
/* "Alterar entrega" e "Alterar forma de pagamento" */
a.btn.btn-small {
  border-radius: 8px !important;
}


/* ---- 13. VARIAÇÕES INDISPONÍVEIS --------------------------
   NOVO NESTA VERSÃO.

   ⚠️ Só funciona junto com o código HTML "Variações
      indisponíveis" (Rodapé · Página do produto). O código
      marca as opções sem estoque; estas regras é que apagam
      e travam o clique. Um sem o outro não resolve.

   O PROBLEMA
   A cliente escolhia cor e tamanho, e só então o preço e o
   botão Comprar sumiam, trocados por "Para mais informações
   entre em contato conosco". Ela descobria que não podia
   comprar DEPOIS de escolher, e sem explicação nenhuma.

   AS DUAS CLASSES
   · .indisponivel  — o próprio tema já põe, nas combinações
                      que não existem (ex.: PINK + M)
   · .dv-esgotado   — o nosso código põe, nas que existem mas
                      estão com estoque zero (ex.: AREIA + G)

   POR QUE APAGAR E NÃO SUMIR
   Sumindo, a fileira de bolinhas encolhe a cada clique e a
   cliente acha que a loja bugou. Pior: se ela viu a peça no
   Instagram e não acha a cor no site, ela não pergunta — vai
   embora. Apagada, ela vê que a cor existe, entende que
   acabou, e você pode oferecer no WhatsApp quando repuser.
------------------------------------------------------------ */

/* as duas, cor e tamanho */
a.atributo-item.indisponivel,
a.atributo-item.dv-esgotado {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;   /* trava o clique */
  text-decoration: line-through !important;
  position: relative;
}

/* risco diagonal em cima da bolinha de cor */
a.atributo-item.dv-cor.indisponivel:after,
a.atributo-item.dv-cor.dv-esgotado:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 15px;                 /* altura do centro da bolinha */
  width: 34px;
  height: 1px;
  margin-left: -17px;
  background: #12100F;
  transform: rotate(-45deg);
  pointer-events: none;
}

/* botão de tamanho */
a.atributo-item.indisponivel:not(.dv-cor),
a.atributo-item.dv-esgotado:not(.dv-cor) {
  background: #F2EFEC !important;
  border-color: #DCD5CE !important;
  color: #6E675F !important;
}

/* Aqui existia uma regra para tirar a mãozinha do <li> em
   volta. Ela usava um seletor novo que o editor da Loja
   Integrada acusa como erro de sintaxe — o validador deles é
   mais antigo que esse recurso do CSS.
   Tirei porque era só enfeite: o pointer-events:none lá em
   cima já bloqueia o clique, que é o que importa. */

/* Para SUMIR em vez de apagar, troque este bloco 13 inteiro por:
     a.atributo-item.indisponivel,
     a.atributo-item.dv-esgotado { display: none !important; }
   Leia antes o "POR QUE APAGAR E NÃO SUMIR" lá em cima. */


/* ---- 14. OPÇÃO SELECIONADA -------------------------------
   NOVO NESTA VERSÃO.

   O PROBLEMA
   Ao clicar numa cor, nada mudava na bolinha. A cliente
   escolhia e continuava sem saber se tinha escolhido. Só
   descobria lá embaixo, quando a foto trocava — ou nem isso,
   se ela já estivesse olhando a cor certa.

   COMO O TEMA MARCA
   Ele põe a classe "active" no <li> que envolve a opção, e
   não no link. Por isso a regra começa em "li.active >".

   O ANEL
   São duas sombras em volta do círculo: 2px brancos e 4px
   pretos. O branco é o que faz funcionar no PRETO — sem ele,
   anel preto em bolinha preta some. Testado nas 6 cores.
------------------------------------------------------------ */

/* prévia discreta ao passar o mouse (vem antes de propósito:
   a regra da cor escolhida, logo abaixo, tem que ganhar) */
a.atributo-item.dv-cor:hover:before {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #CFC8C1 !important;
}

/* anel em volta da bolinha de cor escolhida */
li.active > a.atributo-item.dv-cor:before,
li.active > a.atributo-item.dv-cor:hover:before {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #12100F !important;
}

/* o nome da cor escolhida também escurece e engrossa */
li.active > a.atributo-item.dv-cor {
  color: #12100F !important;
  font-weight: 700 !important;
}

/* tamanho escolhido: preenchido, não só com a borda mais grossa */
li.active > a.atributo-item:not(.dv-cor) {
  background: #12100F !important;
  border-color: #12100F !important;
}
/* o "*" é para alcançar o texto que o tema pinta por dentro do
   botão — sem ele a letra fica preta no fundo preto */
li.active > a.atributo-item:not(.dv-cor),
li.active > a.atributo-item:not(.dv-cor) * {
  color: #FFFFFF !important;
}


/* ---- 16. QUATRO MINI BANNERS ------------------------------
   NOVO NESTA VERSÃO.

   O tema monta os mini banners numa grade de 12 colunas e dá a
   cada um a classe "span4" — que quer dizer "ocupa 4 das 12",
   ou seja, um terço. Com três, fecha a linha certinho. Com o
   quarto, ele não cabe e cai sozinho na linha de baixo.

   Aqui a largura vai de um terço para um quarto. A conta é a
   mesma que o tema usa: 4 blocos de 23,0769% mais 3 espaços de
   2,5641% dão 100%. Não é número inventado, é o valor que a
   própria grade do tema usa para 3 colunas de 12.

   EFEITO COLATERAL BOM: com quatro, os mini banners passam a
   ficar alinhados com as quatro colunas de produtos de
   LANÇAMENTOS, logo abaixo. A home fica com uma coluna só.

   Só no computador. No celular eles continuam empilhados, um
   embaixo do outro (item 4e).

   ⚠️ Isto é só a largura. O quarto banner em si você adiciona
      em Personalize sua loja → Banners.
------------------------------------------------------------ */
@media (min-width: 768px) {
  .banner.mini-banner .modulo.span4 {
    width: 23.0769% !important;
  }
}


/* ---- 17. ESTOQUE SÓ QUANDO ESTIVER ACABANDO --------------
   NOVO NESTA VERSÃO.

   Antes aparecia "Estoque: 30 unidades" — informação que não
   ajuda a vender e ainda entrega o tamanho do seu estoque para
   quem quiser copiar.

   Descobri que o tema já separa os dois casos sozinho. Ele
   coloca no mesmo elemento uma destas classes:

       qtd-maior-10   →  "Estoque: 30 unidades"
       qtd-menor-10   →  "Aproveite! Restam apenas 2 unidades"

   Ou seja, a conta já está pronta dentro do tema. Basta esconder
   o primeiro caso. Não precisa de código, não precisa de script.

   A frase de urgência continua igual, e é ela que vende.

   ⚠️ O elemento continua na página, só invisível. Isso é de
      propósito: o código "Adicionar ao carrinho" lê esse número
      para não deixar a cliente pedir mais do que existe. Se em
      vez de esconder você apagasse, essa trava pararia.
------------------------------------------------------------ */
span.estoque.qtd-maior-10 {
  display: none !important;
}


/* ---- 4. AJUSTES DE CELULAR --------------------------------
   Um único bloco @media, sempre o último do arquivo.
------------------------------------------------------------ */
@media (max-width: 767px) {

  /* 4a. nome do produto colava no breadcrumb e a primeira
         palavra ia pra direita */
  .info-principal-produto .breadcrumbs {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
  }
  h1.nome-produto {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    font-size: 17px;
    line-height: 1.3;
  }

  /* 4e. mini banners: um embaixo do outro em vez de três colunas */
  .banner.mini-banner .modulo.span4 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 14px 0 !important;
    display: block !important;
  }
  .banner.mini-banner .modulo.span4:last-child {
    margin-bottom: 0 !important;
  }
  .banner.mini-banner img {
    width: 100% !important;
    height: auto !important;
  }

  /* 4d. botão do menu: só três traços, sem a caixa preta */
  .atalho-menu.icon-th {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    width: 44px !important;
    height: 46px !important;
    min-width: 0 !important;
    position: relative;
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
  }
  .atalho-menu.icon-th:before { content: none !important; }
  .atalho-menu.icon-th:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 2px;
    margin-left: -13px;   /* centraliza na horizontal */
    margin-top: -7px;     /* centraliza o conjunto de 3 traços */
    background: #12100F;
    box-shadow: 0 6px 0 #12100F, 0 12px 0 #12100F;
  }

  /* 4c. popup "Rastreio Rápido" com texto invisível no celular */
  .rastreio-content {
    background: #FFFFFF !important;
    border: 1px solid #E4DED7;
  }
  .rastreio-content * {
    color: #12100F !important;
  }
  .rastreio-content input,
  #OrderTracking {
    background: #FFFFFF !important;
    border: 1px solid #CFC8C1 !important;
  }
  .rastreio-content button.rastreio {
    background: #12100F !important;
    color: #FFFFFF !important;
    border: none !important;
  }

  /* 4f. BOLINHAS DE COR NO CELULAR — NOVO NESTA VERSÃO

         O PROBLEMA
         Cada opção de cor tinha a largura do nome dela. PINK
         ocupava 45px, AZUL MARINHO ocupava 100px. Como elas
         flutuam uma ao lado da outra, a fila quebrava em
         lugares diferentes e o espaçamento nunca batia. No
         celular isso virava uma escadinha: 5 bolinhas grandes
         na primeira linha e 1 sobrando embaixo.

         A SOLUÇÃO
         Toda opção de cor passa a ter a MESMA largura — 20% da
         tela. Vinte por cento entra 4 vezes com folga em
         qualquer celular, de 320px a 430px, então sempre dão
         4 por linha, alinhadas em coluna. As 6 cores viram
         4 + 2, certinhas uma embaixo da outra.

         E a bolinha cai de 36px para 26px, que é o que você
         pediu. Ela continua bem acima do mínimo de toque.

         O min-height é o detalhe que faz a grade fechar:
         AZUL MARINHO quebra em duas linhas e, sem altura
         igual para todas, a bolinha seguinte se enganchava na
         anterior em vez de descer. Com altura fixa, não tem
         como desalinhar.

         Só vale no celular. No computador nada muda. */
  a.atributo-item.dv-cor {
    width: 20vw !important;
    max-width: 100px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    padding: 0 2px !important;
    margin: 0 0 12px !important;
    gap: 4px !important;
  }
  a.atributo-item.dv-cor:before {
    width: 26px !important;
    height: 26px !important;
  }
  a.atributo-item.dv-cor span {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  /* 4g. o risco da cor esgotada (bloco 13) foi desenhado para
         a bolinha de 36px. Com 26px ele precisa encolher e
         subir junto, senão passa por fora do círculo. */
  a.atributo-item.dv-cor.indisponivel:after,
  a.atributo-item.dv-cor.dv-esgotado:after {
    top: 13px !important;
    width: 24px !important;
    margin-left: -12px !important;
  }

  /* 4b. tira de categorias que estoura a tela.
         MANTER apenas se o botão hambúrguer (quadrado preto
         com listras) abrir as categorias. Se não abrir,
         apaga as 3 linhas abaixo e me avisa. */
  .menu.superior,
  ul.nivel-um,
  #cabecalho .flex-direction-nav {
    display: none !important;
  }
}