/* Telas MUITO pequenas (antigas / mini smartphones) */
@media (max-width: 400px) {
    .gallery {
        columns: 1;
    }
}

/* --- RESPONSIVO (MOBILE) --- */
@media (max-width: 600px) {
    .modal-content {
        padding: 10px;
        border-radius: 6px;
    }

    .modal img {
        max-width: 100%;
        border-radius: 6px;
    }

    #modal-close {
        top: 10px;
        right: 15px;
        font-size: 35px;
    }

    .modelo-item img {
        width: 100%;
        max-width: 170px;   /* opcional */
    }
}

/* 🔒 MOBILE — até 600px */
@media (max-width: 600px) {

    /* remove rolagem APENAS quando body tiver a classe no-scroll-modal */
    .no-scroll-modal .modal {
        overflow-y: hidden !important;
    }

    /* estilos do modal img APENAS nesta página */
    .pagina-galeria .modal img {
        font-weight: 600;
        max-width: 95%;     /* melhor para mobile */
        height: auto;
        border-radius: 10px;
    }
}

/* Versão mobile (opcional) */
@media (max-width: 600px) {
  .whatsapp-float {
    bottom: 15px;
    right: 15px;
    padding: 8px;
  }

  .whatsapp-float img {
    width: 40px;
    height: 40px;
  }
}

/* responsivo: ajusta posição do texto em telas pequenas */
@media (max-width: 991px) {
  .btn-cartoon {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    transform: none;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .row1 .produto {
    width: 100% !important;
  }
}


@media (max-width: 480px) {
  .row1 .produto {
    width: 100%; /* 1 por linha */
  }
}

/* ======================================
   MOBILE
   ====================================== */
   @media (max-width: 991.98px) {
    .pex-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
    }

    /* Corrige sobreposição no mobile */
    body {
      padding-top: 196px; /* altura da barra + menu */
    }

    /* Corrige comportamento do dropdown */
    #navbar-vertical {
      position: fixed;
      top: 130px !important;
      left: 0;
      width: 100%;
      z-index: 1999;
    }
  }

  /* MOBILE */
@media (max-width: 600px) {
    .gallery {
        columns: 2;
        column-gap: 12px;
    }

    .gallery-item {
        break-inside: avoid;
        margin-bottom: 12px;
        width: 100%;
        display: inline-block;
    }

    .gallery-item img {
        width: 100%;
        border-radius: 8px;
        display: block;
    }
}