body{font-family:Arial;margin:0;background:#faf7f2}
header{text-align:center;padding:30px}
.logo{max-width:500px;width:90%}
nav{background:#2fa84f;padding:12px;text-align:center}
nav a{color:white;text-decoration:none;margin:0 15px}
section{padding:25px}
#search{padding:10px;width:100%;max-width:400px}
#grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin-top:20px;
}
.card{background:white;padding:15px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.btn{background:#25D366;color:white;padding:8px 12px;text-decoration:none;border-radius:5px}
.wa{position:fixed;right:20px;bottom:20px;background:#25D366;color:white;padding:15px;text-decoration:none;border-radius:25px}
.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}
.product-placeholder {
    width: 100%;
    height: 180px;
    background: #2e7d32;
    color: white;
    font-size: 48px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 10px;
}

.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}
#grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-top:20px;
}

@media (max-width:1200px){
    #grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media (max-width:900px){
    #grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:600px){
    #grid{
        grid-template-columns:repeat(2,1fr);
    }
}