/* ******************** */
/* ******************** */
/* COR DA BARRA DE ROLAGEM */
/* ******************** */
/* ******************** */
* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #FF6C03 #FFEFE3;
    }

/* ******************** */
/* ******************** */
/* COR DO FUNDO DA INDEX */
/* ******************** */
/* ******************** */
    body {
        font-family: 'Montserrat', sans-serif;
        background-color: #FFEFE3;
        margin: 0;
        padding: 0;
        color: #333;
    }

/* ******************** */
/* ******************** */
/* COR DA BARRA DE ROLAGEM */
/* ******************** */
/* ******************** */
    ::-webkit-scrollbar { width: 7px; }
    ::-webkit-scrollbar-thumb {
        background-color: #FF6C03;
        border-radius: 7px;
        border: 3px solid #FFEFE3;
    }
    
    ::-webkit-scrollbar-track {
        background-color: #FFEFE3;
        border-radius: 7px;
    }
    
    html { scrollbar-gutter: stable; }
    @media (pointer: coarse) { * { scrollbar-width: auto; } }
    
/* ******************** */
/* ******************** */
/* COR DO TOPO 2 */
/* ******************** */
/* ******************** */
    header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #FFEFE3; color: #fff; }
    
    main {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .logotipo {
        color: #fff;
        text-decoration: none;
        font-size: 1.5rem;
    }
    
    .logotipo img {
    height: 70px;
    }
    
/* ******************** */
/* ******************** */
/* COR DO MENU DO TOPO 2 */
/* ******************** */
/* ******************** */
    /* Menu mobile */
    .hamburger-menu { background: none; border: none; cursor: pointer; padding: 0.5rem; display: flex; flex-direction: column; gap: 4px; z-index: 1000; }
    .hamburger-menu span { width: 25px; height: 3px; background: #FF6C03; transition: all 0.3s ease-in-out; }
    
    .mobile-nav { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background-color: #FFEFE3; transition: right 0.3s ease-in-out; padding-top: 110px; z-index: 999; }
    .mobile-nav.open { right: 0; }
    .mobile-nav ul { list-style: none; padding: 0; margin: 0; }
    .mobile-nav ul li a { font-family: 'Poppins Medium', sans-serif; display: block; padding: 1rem; color: #FF6C03; text-decoration: none; border-bottom: 1px solid #FFEFE3; }
    .mobile-nav ul li a:hover {
      color: #FFFFFF; /* Nova cor do texto ao passar o mouse */
      background-color: #929D35; /* Opcional: fundo mais claro no hover */
      border-radius: 7px;
    }
    
    /* Animação do ícone */
    .hamburger-menu.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger-menu.open span:nth-child(2) { opacity: 0; }
    .hamburger-menu.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    
    /* Esconde o menu de desktop em telas pequenas */
    @media (min-width: 768px) {
        .hamburger-menu { display: none; }
        .mobile-nav { position: static; width: auto; height: auto; background: none; padding-top: 0; }
        .mobile-nav ul { display: flex; }
        .mobile-nav ul li a { border-bottom: none; }
    }
    
    input,
    textarea,
    button {
      font-family: 'Montserrat', sans-serif;
    }
    
/* ******************** */
/* ******************** */
/* COR DO TOPO 1 */
/* ******************** */
/* ******************** */
    .topo-1 {
      background-color: #FF6C03;
      color: #fff;
      padding: 8px 20px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      font-weight: bold;
    }
    
    .topo-1 a {
      color: #fff;
      text-decoration: none !important;
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
    }
    
    .topo-1 a i {
      font-size: 18px;
      color: #fff;
      transition: transform 0.2s ease;
    }
    
    .topo-1 a:hover i {
      transform: scale(1.2);
    }
    
    .topo-1 a:hover {
      text-decoration: underline;
    }
    
    .topo-1 .info-contato span {
        display: inline-block;
    }
    
    .telefone-topo-esquerda {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500; /* ou 600 se quiser mais destaque */
      text-decoration: none;
      color: inherit;
    }
    
    .contato-esquerda {
      display: flex;
      align-items: center;
    }
    
    .redes-direita {
      display: flex;
      align-items: center;
      gap: 12px; /* espaçamento entre ícones */
    }
    
/* ******************** */
/* ******************** */
/* COR DO MENU CATEGORIAS */
/* ******************** */
/* ******************** */
    .menu-categorias {
        display: flex;
        flex-wrap: wrap;
        align-items: center; /* Alinha verticalmente os botões do menu categorias na frente da loja. */
        justify-content: center; /* Alinha horizontalmente os botões do menu categoria na frente da loja. */
        gap: 10px;
        padding: 2px 10px 20px 10px;
        margin-bottom: 20px;
    }

    .menu-categorias .categoria {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .menu-categorias .categoria-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 140px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        background-color: #FF6C03;
        border: none;
        border-radius: 6px;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.3s ease;
        vertical-align: top;
    }

    .menu-categorias .categoria-btn:hover {
        background-color: #929D35;
    }
    
    .menu-categorias .categoria-wrapper {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .menu-categorias .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #FFF;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        z-index: 10;
    }
    
/* ******************** */
/* ******************** */
/* COR DO SUBMENU CATEGORIAS */
/* ******************** */
/* ******************** */
    .menu-categorias .submenu a {
        display: block;
        color: #FFEFE3;
        font-weight: bold;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 4px;
        background-color: #FFF;
    }

    .menu-categorias .submenu a:hover {
        background-color: #FFEFE3;
    }

    
    /* Botão do menu mobile */
    .menu-toggle {
        display: none;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        background: transparent;
        color: #FFEFE3;
        margin-top: -30px; /* Faz subir o botão de hamburguer Menu-Categorias. */
        position: relative;
        z-index: 1;
    }
    
/* ******************** */
/* ******************** */
/* BOTÕES DO POP-UP */
/* ******************** */
/* ******************** */

.botoes-info-produto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}

.botoes-info-produto button {
  flex: 1 1 45%;
  min-width: 120px;
  max-width: 180px;
  padding: 10px 20px;
  margin: 0px 5px 0px 5px; /* top, right, bottom, left */
  background: #FF6C03;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
    
/* ******************** */
/* ******************** */
/* POP-UP */
/* ******************** */
/* ******************** */
    #popupInfo {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 9999;
        width: 400px;
        max-width: 90%;
        max-height: 80vh;
        box-sizing: border-box;
        padding: 0;
        border: 5px solid #FF6C03;
        flex-direction: column;
    }
    
    #popupConteudo {
        overflow-y: auto;
        padding: 20px;
        max-height: calc(80vh - 60px); /* espaço reservado para o botão */
        box-sizing: border-box;
    }
    
    #btnFecharPopup {
        margin: 0;
        padding: 10px 20px;
        background: #FF6C03;
        color: white;
        border: none;
        border-radius: 0 0 8px 8px;
        font-size: 14px;
        cursor: pointer;
        width: 100%;
    }


/* ******************** */
/* ******************** */
/* COR DO BOTÃO VOLTAR PAAR O TOPO */
/* ******************** */
/* ******************** */
    #btnTopo {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      background-color: #FF6C03;
      color: white;
      font-size: 24px;
      line-height: 36px;
      font-weight: bold;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.3s ease;
      z-index: 1000;
      box-sizing: border-box;
    }
    #btnTopo:hover {
      background-color: #716124;
      transform: scale(1.05);
    }
    
/* ******************** */
/* ******************** */
/* COR DO FOOTER */
/* ******************** */
/* ******************** */
    footer {
      background-color: #929D35;
      padding: 20px 10px;
      font-family: 'Montserrat', sans-serif;
      color: #fff;
    }
    
    footer .rodape-conteudo {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      gap: 20px;
    }
    
    footer .rodape-esquerda,
    footer .rodape-centro,
    footer .rodape-direita {
      flex: 1;
      min-width: 200px;
      font-family: 'Montserrat', sans-serif;
    }
    
    footer .rodape-esquerda {
      text-align: left;
    }
    
    footer .rodape-centro {
      text-align: center;
    }
    
    footer .rodape-direita {
      text-align: right;
    }
    
    footer .rodape-direita a {
      margin-left: 10px;
      font-size: 18px;
      color: #fff;
      text-decoration: none;
    }
    
    footer .rodape-direita a:hover {
      opacity: 0.8;
    }
    
    footer #footer-copy {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
    
/* ******************** */
/* ******************** */
/* COR DO BOTÃO DO CARRINHO */
/* ******************** */
/* ******************** */
    .botao-carrinho {
      font-size: 15px;
      color: #FFF;
      text-decoration: none;
      padding: 10px 12px;
      background-color: #929D35;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.3s ease;
    }
    
    .botao-carrinho {
      font-size: 16px;
      color: #fff;
    }
    
    .botao-carrinho:hover {
      background-color:#FF6C03;
    }
    
    .botao-busca {
      font-size: 15px;
      color: #FFF;
      text-decoration: none;
      padding: 10px 12px;
      background-color: #FF6C03;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.3s ease;
    }
    
    .botao-busca {
      font-size: 16px;
      color: #fff;
    }
        
    .botao-busca:hover {
        background-color: #716124;
    }
    
    .produtos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .produto {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        flex: 1 1 280px;
        max-width: 400px;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .produto.visivel:hover {
        transform: scale(1.02);
    }
    
/* ******************** */
/* ******************** */
/* COR DO TÍTULO DO PRODUTO */
/* ******************** */
/* ******************** */
    .produto h3 {
        margin-top: 0;
        color: #FF6C03;
    }
    .produto p {
        margin: 5px 0;
        font-size: 15px;
    }
    
    .imagens {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .imagens img {
        width: 100%;
        max-width: 100px;
        height: auto;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .imagens img:hover { transform: scale(1.1); }
    
    label { display: block; margin-top: 10px; font-size: 14px; }
    input.extra {
        margin-top: 5px;
        padding: 8px;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
    
/* ******************** */
/* ******************** */
/* COR DO TOTAL DO PRODUTO */
/* ******************** */
/* ******************** */
    .total-produto { font-weight: bold; margin-top: 10px; color: #BA264A; }
    
    #valorTotalCompra {
        font-size: 22px;
        font-weight: bold;
        color: #BA264A;
        text-align: center;
        margin: 30px 0;
    }
    
    form#formCliente {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    form#formCliente input {
        font-family: 'Montserrat', sans-serif;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #fff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    form#formCliente input:focus {
        border-color: #007bff;
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
        outline: none;
        z-index: 1;
    }
    
    button {
        font-family: 'Montserrat', sans-serif;
        display: block;
        margin: 20px auto;
        padding: 12px 24px;
        background-color: #FF6C03;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button:hover { background-color: none; } /* Cor do hamburguer ao passar o mouse. */
    
/* ******************** */
/* ******************** */
/* COR DA ETIQUETA DO PRODUTO */
/* ******************** */
/* ******************** */
    .etiqueta-produto {
      background-color: #929D35;
      color: white;
      padding: 6px 12px;
      border-radius: 6px 6px 0 0;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
/* ******************** */
/* ******************** */
/* COR DOS BOTÕES DO CARRINHO */
/* ******************** */
/* ******************** */
    .btn-adicionar,
    .btn-ver {
      display: inline-block;
      padding: 10px 16px;
      background-color: #FF6C03;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: bold;
      text-decoration: none;
      margin: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .btn-adicionar:hover,
    .btn-ver:hover {
      background-color: #929D35;
    }
    
/* ******************** */
/* ******************** */
/* COR DA PAGINAÇÃO */
/* ******************** */
/* ******************** */
    .paginacao {
        text-align: center;
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }

    .paginacao a {
        background-color: #FF6C03;
        color: white;
        padding: 10px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }
    
    .paginacao a:hover {
        background-color: #929D35;
    }
    
    .paginacao span {
        font-weight: bold;
        font-size: 14px;
        color: #444;
    }
    
    @keyframes zoomIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    
    /* Responsivo para telas menores */
    @media (max-width: 768px) {
        .menu-toggle { display: block; text-align: right; }
        .menu-categorias {
            display: none;
            flex-direction: column;
            align-items: center;
            background: #FFEFE3;
            padding: 10px;
            border-radius: 6px;
        }
        .menu-categorias a {
          width: auto;
          min-width: 160px;
          max-width: 250px;
          margin: 5px 0;
          text-align: center;
        }
        body.menu-open .menu-categorias {
        display: flex;
        }
        .busca-container {
            padding: 0 16px !important; /* margem interna nas laterais do campo de busca */
        }
        .paginacao {
        flex-direction: column;
        gap: 8px;
    }

        .paginacao a,
        .paginacao span {
            display: block;
            width: 100%;
            max-width: 280px;
            margin: 0 auto;
            font-size: 15px;
        }
    }
    
    /* Ajustes adicionais para telas muito pequenas */
    @media (max-width: 600px) {
        .logotipo img {
            height: 55px;
        }
        .produto {
            padding: 10px;
        }
      header img {
        height: 60px;
        top: 10px;
        left: 10px;
      }
      header h1 {
        font-size: 22px;
        margin-left: 80px;
        text-align: left;
      }
      main {
        padding: 10px;
      }
      .menu-categorias a {
        font-size: 16px;
        padding: 8px 12px;
      }
      #btnTopo {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      #imagemAmpliada {
        max-width: 95%;
        max-height: 85%;
      }
    
      /* ✅ Rodapé responsivo */
      footer .rodape-esquerda,
      footer .rodape-direita {
        text-align: center;
      }
    
      footer .rodape-direita a {
        margin: 0 5px;
      }
    }
    
    @media (max-width: 480px) {
        .paginacao a,
        .paginacao span {
            font-size: 14px;
            padding: 8px 12px;
        }
    }