/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}

body{
background:#f3f4f6;
color:#333;
}

/* HEADER */

header{
background:linear-gradient(90deg,#111,#222);
color:white;
padding:18px 30px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

header h1{
font-size:28px;
letter-spacing:1px;
}

header form{
margin-top:10px;
}

header input{
padding:10px 15px;
border-radius:25px;
border:none;
width:240px;
}

/* GRID PRODUTOS */

.produtos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
padding:35px;
}

/* CARD PRODUTO */

.card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:all .25s ease;
position:relative;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* IMAGEM */

.card img{
width:100%;
height:210px;
object-fit:cover;
}

/* CONTEUDO CARD */

.card-content{
padding:15px;
}

.card h3{
font-size:18px;
margin-bottom:5px;
}

.card p{
font-size:14px;
color:#777;
margin-bottom:10px;
}

/* PREÇOS */

.preco{
font-size:20px;
font-weight:bold;
color:#ff5a00;
}

.preco-antigo{
text-decoration:line-through;
color:#888;
font-size:14px;
margin-left:8px;
}

/* SELO DESCONTO */

.selo{
position:absolute;
top:10px;
left:10px;
background:#ff2e2e;
color:white;
padding:5px 10px;
font-size:13px;
border-radius:20px;
font-weight:bold;
}

/* BOTÕES */

.btn{
display:block;
text-align:center;
padding:10px;
margin-top:8px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
transition:0.2s;
}

/* BOTÃO WHATSAPP */

.whatsapp{
background:#25D366;
color:white;
}

.whatsapp:hover{
background:#1ebe5d;
}

/* BOTÃO COMPRAR */

.comprar{
background:#ff6a00;
color:white;
}

.comprar:hover{
background:#e05500;
}

/* FORMULÁRIOS */

form{
background:white;
padding:20px;
border-radius:10px;
max-width:500px;
margin-top:20px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

form input,
form textarea{
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #ccc;
}

form button{
margin-top:10px;
padding:12px;
border:none;
background:#ff6a00;
color:white;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

form button:hover{
background:#e25800;
}

/* TABELA ADMIN */

table{
width:100%;
border-collapse:collapse;
margin-top:20px;
background:white;
border-radius:10px;
overflow:hidden;
}

table th{
background:#222;
color:white;
padding:12px;
text-align:left;
}

table td{
padding:10px;
border-bottom:1px solid #eee;
}

table tr:hover{
background:#fafafa;
}

/* BOTÃO EXCLUIR */

table a{
color:red;
text-decoration:none;
font-weight:bold;
}

/* RESPONSIVO */

@media(max-width:900px){

header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

header input{
width:100%;
}

}

@media(max-width:600px){

.produtos{
grid-template-columns:1fr;
padding:20px;
}

.card img{
height:180px;
}

header h1{
font-size:22px;
}

}