/* Toda Loja com largura total */
.conteiner {
  max-width: 100vw;
}

.menu .titulo {
    font-weight: bold;
}

#rodape .redes-sociais {
    background: none;
    box-shadow: none;
    border-color: #0000;
}

.institucional .redes-sociais .titulo {
    color: #fff
}

.listagem .titulo-categoria {
    color: #000;
}

a.bem-vindo {
    color: black; /*Altera a cor do texto*/
    font-size: 13px; /*Altera o tamanho da fonte do texto*/
    font-weight: bold;
}
/*Altera o trecho "identifique-se" dentro da mensagem de boas-vindas*/
a.bem-vindo span {
    color: black; /**Altera a cor do texto*/
    font-size: 13px; /*Altera o tamanho da fonte do texto*/
    font-weight: bold;
}

@media only screen and (max-width: 767px) {
.listagem .listagem-linha>ul {  margin-left: 0;}
.listagem>ul, .listagem-linha>ul {  margin: 0;  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;}
.listagem .listagem-linha li {  width: 50%;}
}

@media only screen and (max-width: 479px) {
.acoes-produto-responsiva .tag-comprar {
        line-height: 30px;
        padding: 0 5px;
    }
}

@media only screen and (max-width: 767px){
    #rodape .institucional .titulo, 
    #rodape .institucional ul,
    .span5.links-rodape.links-rodape-categorias,
    .span3.links-rodape.links-rodape-paginas,
    .span4.sobre-loja-rodape,
    .institucional.fundo-secundario .span12.visible-phone {
        text-align: center;
    }
}

.logo a img {
    max-height: none;
}

/* 1.1 Logo menor no mobile */
@media (max-width: 768px) {
  .logo img, .header-logo img {
    max-width: 180px;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
    .conteiner .logo {
        margin: auto;
    }
}

/* Melhorar usabilidade do menu no mobile */
@media (max-width: 768px) {
  .menu-hamburguer, 
  .menu-toggle {
    width: 44px;        /* Área mínima recomendada pelo Google */
    height: 44px;
    padding: 10px;
    cursor: pointer;
  }

  nav ul li a {
    font-size: 16px;    /* Links mais legíveis */
    padding: 12px 10px; /* Espaçamento maior para toque */
    display: block;
  }
}

/* Botões mais amigáveis no celular */
@media (max-width: 768px) {
  button, 
  .btn, 
  .botao-comprar, 
  .product-buy-button {
    font-size: 16px;
    padding: 12px 20px; /* Área maior de toque */
    border-radius: 8px;
  }
}

/* ==============================
   BANNERS E IMAGENS RESPONSIVAS
   ============================== */

/* Imagens se adaptam ao container */
img {
  max-width: 100%;
  height: auto;
}

.banner.cheio+.row-fluid {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 1.2 Banners responsivos */
.banner img, .hero img, .carousel img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 1.3 Texto de banner legível (escala fluida) */
.banner-text, .hero .title {
  font-size: clamp(16px, 2.8vw, 28px);
  line-height: 1.25;
}

/* 1.4 Fonte mínima para descrições */
.product-description, .product-card .description {
  font-size: 14px;
  line-height: 1.45;
}

/* 1.5 Espaçamentos no mobile */
@media (max-width: 768px) {
  .product-item, .product-card { padding: 10px 0; }
  footer { padding: 16px 0; }
}

/* 1.6 CTA mais visível */
.btn-primary, .buy-button, .cta {
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 8px;
}
.btn-primary:hover, .buy-button:hover, .cta:hover { filter: brightness(1.05); }

/* 1.9 Acessibilidade: foco visível */
a:focus, button:focus { outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px; }


/* 🔧 Correção CLS - Perfetto Cabelos */

/* Reservar espaço para banners */
.banner, .slider, .carrossel {
  display: block;
}

/* Reservar espaço para imagens de produtos */
.produto img, .produto-detalhe img, .listagem img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Reservar espaço para containers principais */
#corpo, .row-fluid {
  height: auto; /* ajuste conforme quantidade de produtos na lista */
}

/* Evitar salto em avisos/promoções */
#aviso, .barra-promocao, .popup-cupom {
  min-height: 50px;
}