/* Página de Catálogo de Produtos */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dropdown Categoria */
#categoria-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

#categoria-dropdown::-webkit-scrollbar {
    width: 6px;
}

#categoria-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#categoria-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#categoria-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Cards de Produto */
.aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[style*="opacity: 1; transform: none"] {
    animation: fadeIn 0.5s ease-out;
}

/* Responsivo */
@media (min-width: 768px) {
    /*
     * As utilities globais de base.css usam !important em .flex-col e .w-full.
     * Estes seletores específicos garantem o layout horizontal do catálogo.
     */
    #catalogo .catalogo-filtros-bar {
        flex-direction: row !important;
        align-items: center !important;
    }

    #catalogo .catalogo-busca {
        max-width: 20rem !important;
    }

    #catalogo .catalogo-categoria-toggle {
        width: auto !important;
    }
}

@media (max-width: 640px) {
    .flex-wrap {
        gap: 0.5rem;
    }
    
    .px-5 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}