*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#000;
  color:#fff;
}

.topo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
  background:#111;
  border-bottom:2px solid gold;
}

.logo{
  font-size:28px;
  font-weight:bold;
  color:gold;
}

nav a{
  color:#fff;
  text-decoration:none;
  margin-left:25px;
  transition:0.3s;
}

nav a:hover{
  color:gold;
}

.banner{
  height:90vh;
  background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
  url('https://images.unsplash.com/photo-1607082349566-187342175e2f?auto=format&fit=crop&w=1400&q=80');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 8%;
}

.banner-texto h1{
  font-size:60px;
  color:gold;
}

.banner-texto p{
  font-size:22px;
  margin:20px 0;
}

.btn{
  display:inline-block;
  padding:15px 30px;
  background:gold;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  border-radius:8px;
}

.btn:hover{
  background:#fff;
}

.categorias{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:50px 8%;
}

.cat{
  background:#111;
  padding:25px;
  text-align:center;
  border:1px solid gold;
  border-radius:10px;
  font-size:20px;
}

.produtos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  padding:50px 8%;
}

.produto{
  background:#111;
  padding:20px;
  border-radius:12px;
  text-align:center;
  transition:0.3s;
}

.produto:hover{
  transform:translateY(-8px);
  border:1px solid gold;
}

.produto img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
}

.produto h3{
  margin:15px 0 10px;
}

.produto p{
  color:gold;
  font-size:22px;
  font-weight:bold;
}

.produto button{
  margin-top:15px;
  padding:12px 25px;
  border:none;
  background:gold;
  color:#000;
  font-weight:bold;
  border-radius:8px;
  cursor:pointer;
}

.whats{
  text-align:center;
  padding:40px;
}

.whats a{
  background:#25D366;
  color:#fff;
  padding:15px 30px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
}

footer{
  background:#111;
  text-align:center;
  padding:25px;
  margin-top:40px;
  border-top:1px solid gold;
}

@media(max-width:900px){

.categorias,
.produtos{
grid-template-columns:repeat(2,1fr);
}

.banner-texto h1{
font-size:40px;
}

}

@media(max-width:600px){

.categorias,
.produtos{
grid-template-columns:1fr;
}

.topo{
flex-direction:column;
gap:15px;
}

nav a{
margin:0 10px;
}

}
.checkout{
padding:50px 8%;
}

.checkout h1{
color:gold;
margin-bottom:25px;
}

.checkout-box{
max-width:650px;
margin:auto;
background:#111;
padding:35px;
border-radius:15px;
border:1px solid gold;
}

.checkout-box h2{
color:gold;
margin:20px 0 15px;
}

.checkout-box input{
width:100%;
padding:15px;
margin-bottom:12px;
border:none;
border-radius:8px;
background:#000;
color:#fff;
border:1px solid #333;
}

.checkout-box button{
width:100%;
padding:16px;
background:gold;
color:#000;
font-weight:bold;
border:none;
border-radius:8px;
cursor:pointer;
margin-top:15px;
font-size:18px;
}

.checkout-box button:hover{
background:#fff;
}