/* ------------------------------PRODUTOS ---------------------------- */
.disabled {
    pointer-events: none; /* Desativa cliques */
    color: #ccc; /* Altera a cor do texto para dar aparência de desativado */
    cursor: not-allowed; /* Altera o cursor para indicar que não é clicável */
    text-decoration: none; /* Remove sublinhado */
}

.product-name {
    display: -webkit-box; 
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-align: center;
    min-height: 5.6em; /* Adjust this based on the line height */
    line-height: 1.4em; /* Adjust line height to match your design */
}

/* Personaliza a cor de fundo para a paginação ativa */
.pagination .page-item.active .page-link {
    background-color: #00428a !important; /* Azul escuro específico */
    border-color: #00428a !important; /* Mantém a cor da borda consistente */
}
/* ------------------------------------------------------------------------- */

/* ------------------HEADER -> ONDE COMPRAR E SUPORTE ---------------------- */
.dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown ul li {
    display: flex;
    align-items: center; /* Alinha verticalmente o ícone e o texto */
    padding: 5px 0;
}

.dropdown ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.dropdown ul li a i {
    margin-right: 1px; /* Espaço entre o ícone e o texto */
    min-width: 20px; /* Define uma largura mínima para garantir que o texto fique alinhado */
    text-align: center; /* Centraliza o ícone */
}

.dropdown ul li a span {
    flex-grow: 1; /* Faz com que o texto ocupe o espaço restante */
}
/* ------------------------------------------------------------------------- */

/* --------------------------PRODUTO -> DETALHES ---------------------------- */
/* CSS para ajustar o tamanho da imagem com media queries */
.portfolio-details-image img {
    width: 80%; /* Padrão para dispositivos móveis */
    height: auto;
    max-width: 500px; /* Limite o tamanho máximo em telas grandes */
}

@media (min-width: 768px) {
    .portfolio-details-image img {
    width: 60%; /* Ajuste para tablets */
    }
}

@media (min-width: 1200px) {
    .portfolio-details-image img {
    width: 50%; /* Ajuste para telas grandes */
    }
}
/* ------------------------------------------------------------------------- */