/* Estilos Base */
body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #f8f8f8;
}

/* Header/Navbar */
.navbar {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
        .hero-section {
           background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
            url('../assets/images/download (16).png') no-repeat center center;
            background-size: cover;
            height: 100vh;
            display: flex;
            align-items: center;
        }

/* Rodapé */
footer {
    background-color: #333;
    color: white;
}

.footer-link:hover {
    color: #df4585;
}

/* ===== CORREÇÕES PARA IMAGENS E TÍTULOS ===== */
/* Ajusta as imagens dentro dos cards de produto e categoria para não serem cortadas */
.product-card img,
.category-card img {
    width: 100%; /* Garante que a imagem ocupe 100% da largura do seu container */
    height: 100%; /* Permite que a imagem se ajuste à altura do container */
    object-fit: cover; /* Garante que a imagem cubra o espaço mantendo a proporção e sem distorcer */
    display: block; /* Remove o espaço extra abaixo da imagem */
}

/* Garante que os títulos e subtítulos das categorias estejam sempre visíveis */
.category-card h3,
.category-card p {
    color: #333 !important; /* Força a cor para ser visível, superando outras regras */
    transition: all 0.3s ease; /* Adiciona uma transição suave para o hover */
}

/* Efeito ao passar o mouse sobre o cartão de categoria */
.category-card:hover h3 {
    color: #ec4899 !important; /* Muda a cor do título ao passar o mouse, forçando a aplicação */
}
.category-card a {
    position: relative;
    display: block;
}
.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.category-card:hover .category-overlay {
    opacity: 1;
}