/* Estilo para a listagem de produtos em destaque */
.listagem-destaque {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem em várias linhas */
    justify-content: center; /* Centraliza os itens horizontalmente */
    margin: 20px 0; /* Margem superior e inferior para espaçamento */
}

/* Estilo do item de produto em destaque */
.wd-product-item {
    border-radius: 12px; /* Borda arredondada */
    overflow: hidden; /* Evita que o conteúdo exceda as bordas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
    width: calc(25% - 20px); /* Largura ajustada para 4 itens por linha */
    margin: 10px; /* Margem para espaçamento entre os produtos */
    text-align: center; /* Centraliza o conteúdo do item */
    position: relative; /* Necessário para elementos absolutos dentro */
    transition: transform 0.2s; /* Efeito de transição suave */
}

/* Efeito ao passar o mouse */
.wd-product-item:hover {
    transform: scale(1.05); /* Efeito de aumento ao passar o mouse */
}

/* Estilo do botão Comprar */
.btn-comprar {
    display: inline-block; /* Permite que o botão se comporte como um bloco */
    background-color: #28a745; /* Verde */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    border-radius: 5px; /* Bordas arredondadas */
    padding: 10px 15px; /* Espaçamento interno */
    cursor: pointer; /* Mão ao passar o mouse */
    transition: background-color 0.3s; /* Transição suave */
    font-size: 16px; /* Tamanho da fonte */
    margin-top: 10px; /* Espaçamento acima do botão */
}

/* Efeito ao passar o mouse no botão */
.btn-comprar:hover {
    background-color: #218838; /* Verde mais escuro ao passar o mouse */
}

/* Responsividade para produtos em destaque */
@media (max-width: 1200px) {
    .wd-product-item {
        width: calc(33.33% - 20px); /* 3 itens por linha */
    }
}

@media (max-width: 800px) {
    .wd-product-item {
        width: calc(50% - 20px); /* 2 itens por linha */
    }
}

@media (max-width: 500px) {
    .wd-product-item {
        width: 100%; /* 1 item por linha */
        margin: 5px 0; /* Para evitar excesso de margem em dispositivos menores */
    }
}