*{
box-sizing:border-box;
}

body{

font-family:system-ui,-apple-system,Arial;
background:#f3f4f6;
margin:0;

}

/* HEADER */

.header{

background:white;
padding:20px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.08);

}

.header h1{

margin:0;
font-size:26px;

}

.sub{

color:#777;
margin:5px 0;

}

.entrega{

background:#e8f8f2;
color:#2a9d8f;
font-weight:bold;
display:inline-block;
padding:6px 12px;
border-radius:8px;
margin:10px 0;

}

/* BUSCA */

.busca-box{

display:flex;
gap:8px;
margin-top:10px;

}

.busca-box input{

flex:1;
padding:12px;
border-radius:10px;
border:1px solid #ddd;

}

.busca-box button{

background:#2a9d8f;
border:none;
color:white;
padding:10px 14px;
border-radius:8px;
cursor:pointer;
font-weight:bold;

}

.busca-box .limpar{

background:#e63946;

}

/* CATEGORIAS */

.categorias{

display:flex;
gap:10px;
overflow-x:auto;
padding:12px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);

}

.categorias button{

border:none;
background:#f0f0f0;
padding:8px 14px;
border-radius:20px;
cursor:pointer;
font-weight:600;
white-space:nowrap;
transition:0.2s;

}

.categorias button:hover{

background:#e4e4e4;

}

/* BOTÃO ATIVO (estilo iFood) */

.categorias .ativo{

background:#e63946;
color:white;

}

/* PRODUTOS */

main{

padding:15px;

}

.titulo{

margin-bottom:15px;
font-size:20px;

}

#produtos{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:15px;

}

/* CARD */

.card{

background:white;
border-radius:16px;
padding:14px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
text-align:center;
transition:0.2s;

}

.card:hover{

transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);

}

.card img{

width:100%;
height:120px;
object-fit:contain;

}

.card h3{

font-size:15px;
margin:8px 0;

}

.preco-antigo{

text-decoration:line-through;
font-size:13px;
color:#999;

}

.preco{

font-size:20px;
font-weight:bold;
color:#e63946;

}

/* BOTÃO */

.card button{

margin-top:10px;
width:100%;
background:#25D366;
color:white;
border:none;
padding:11px;
border-radius:10px;
font-weight:bold;
cursor:pointer;

}

/* FOOTER */

footer{

text-align:center;
font-size:12px;
padding:25px;
color:#777;

}

/* MOBILE */

@media (max-width:500px){

#produtos{

grid-template-columns:repeat(2,1fr);

}

.card img{

height:100px;

}

}