body{
margin:0;
font-family:'Montserrat', sans-serif;
background:#0a0a0a;
color:#fff;
}

/* BANNER */
.banner{
width:100%;
height:260px;
position:relative;
overflow:hidden;
background:#000;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* MENU */
nav{
background:rgba(15,15,15,.96);
display:flex;
justify-content:center;
gap:12px;
padding:14px 12px;
flex-wrap:wrap;
backdrop-filter:blur(6px);
border-top:1px solid rgba(212,175,55,.08);
border-bottom:1px solid rgba(212,175,55,.08);
box-shadow:0 8px 24px rgba(0,0,0,.18);
}

nav button{
background:linear-gradient(180deg,#1b1b1b,#111);
color:#f3d57a;
border:1px solid rgba(212,175,55,.22);
padding:11px 18px;
border-radius:999px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:all .25s ease;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 6px 14px rgba(0,0,0,.18);
}

nav button:hover{
transform:translateY(-2px);
background:linear-gradient(180deg,#242424,#161616);
border-color:rgba(212,175,55,.45);
box-shadow:
0 10px 20px rgba(0,0,0,.28),
0 0 12px rgba(212,175,55,.12);
}

nav button:active{
transform:scale(.98);
background:linear-gradient(180deg,#d4af37,#b88a16);
color:#000;
}

/* SACOLA */
.botao-sacola{
position:fixed;
top:18px;
right:18px;
background:linear-gradient(180deg,#181818,#0d0d0d);
color:#fff;
padding:12px 16px;
border-radius:999px;
font-weight:700;
cursor:pointer;
z-index:9999;
border:1px solid rgba(212,175,55,.26);
box-shadow:
0 10px 25px rgba(0,0,0,.30),
0 0 10px rgba(212,175,55,.08);
transition:all .25s ease;
}

.botao-sacola:hover{
transform:translateY(-2px);
box-shadow:
0 14px 28px rgba(0,0,0,.35),
0 0 14px rgba(212,175,55,.14);
}

.botao-sacola span{
background:linear-gradient(180deg,#f1d16a,#c99d29);
padding:3px 8px;
border-radius:999px;
color:#000;
font-weight:800;
margin-left:4px;
box-shadow:0 4px 10px rgba(212,175,55,.22);
}

/* BUSCA */
.busca-area{
padding:22px 16px;
text-align:center;
}

.busca-area input{
width:90%;
max-width:520px;
padding:14px 18px;
border-radius:999px;
border:1px solid rgba(212,175,55,.22);
background:linear-gradient(180deg,#121212,#0d0d0d);
color:#fff;
font-size:15px;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.03),
0 8px 18px rgba(0,0,0,.18);
transition:all .25s ease;
}

.busca-area input:focus{
border-color:rgba(212,175,55,.5);
box-shadow:
0 0 0 3px rgba(212,175,55,.08),
0 10px 24px rgba(0,0,0,.22);
}

/* PRODUTOS */
.produtos{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:22px;
padding:20px;
}

.produto{
background:linear-gradient(180deg,#181818 0%, #101010 100%);
border-radius:22px;
padding:12px;
text-align:center;
border:1px solid rgba(212,175,55,.14);
box-shadow:
0 14px 30px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.03);
transition:all .3s ease;
}

.produto:hover{
transform:translateY(-6px);
border-color:rgba(212,175,55,.30);
box-shadow:
0 18px 34px rgba(0,0,0,.38),
0 0 16px rgba(212,175,55,.10);
}

.produto img{
width:100%;
height:180px;
object-fit:cover;
border-radius:16px;
display:block;
border:1px solid rgba(212,175,55,.10);
box-shadow:0 8px 16px rgba(0,0,0,.18);
}

.produto h3{
color:#fff;
font-size:16px;
font-weight:700;
margin:12px 0 6px;
line-height:1.35;
}

.produto p{
color:#e0c56a;
font-weight:700;
margin:6px 0 10px;
font-size:15px;
}

/* BOTÃO ADICIONAR */
.botao{
width:100%;
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(212,175,55,.28);
background:linear-gradient(180deg,#1a1a1a 0%, #0f0f0f 100%);
color:#f3d57a;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:all .25s ease;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 10px 18px rgba(0,0,0,.22);
}

.botao:hover{
transform:translateY(-2px);
background:linear-gradient(180deg,#232323 0%, #141414 100%);
border-color:rgba(212,175,55,.48);
box-shadow:
0 12px 22px rgba(0,0,0,.30),
0 0 14px rgba(212,175,55,.14);
}

.botao:active{
transform:scale(.98);
background:linear-gradient(180deg,#e5c760 0%, #c29522 100%);
color:#000;
}

/* OVERLAY */
#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
backdrop-filter:blur(2px);
display:none;
z-index:9998;
}

#overlay.ativo{
display:block;
}

/* CARRINHO */
.carrinho{
position:fixed;
top:0;
right:-420px;
width:380px;
max-width:100%;
height:100%;
background:linear-gradient(180deg,#111 0%, #0b0b0b 100%);
color:#fff;
padding:16px;
transition:right .3s ease;
overflow:auto;
z-index:9999;
box-shadow:-14px 0 35px rgba(0,0,0,.40);
border-left:1px solid rgba(212,175,55,.10);
box-sizing:border-box;
}

.carrinho.ativo{
right:0;
}

.carrinho h2{
margin:4px 0 16px;
font-family:'Playfair Display', serif;
font-size:24px;
color:#f0cc62;
letter-spacing:.4px;
}

/* ITEM CARRINHO */
#listaCarrinho{
margin-top:8px;
}

.item-carrinho{
background:linear-gradient(180deg,#191919 0%, #121212 100%);
padding:14px;
margin-bottom:12px;
border-radius:18px;
border:1px solid rgba(212,175,55,.14);
box-shadow:
0 12px 22px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.03);
}

.item-carrinho h4{
margin:0 0 6px;
font-size:15px;
font-weight:700;
color:#fff;
line-height:1.35;
}

.item-carrinho p{
margin:0;
color:#e0c56a;
font-weight:700;
font-size:15px;
}

/* CONTROLES */
.controles{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:12px 0 10px;
}

.controles button{
width:36px;
height:36px;
border:none;
border-radius:12px;
background:linear-gradient(180deg,#202020 0%, #111 100%);
color:#f3d57a;
font-size:18px;
font-weight:800;
cursor:pointer;
transition:all .22s ease;
border:1px solid rgba(212,175,55,.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 8px 14px rgba(0,0,0,.22);
display:flex;
align-items:center;
justify-content:center;
padding:0;
}

.controles button:hover{
transform:translateY(-1px);
background:linear-gradient(180deg,#282828 0%, #151515 100%);
border-color:rgba(212,175,55,.44);
box-shadow:
0 10px 16px rgba(0,0,0,.26),
0 0 12px rgba(212,175,55,.12);
}

.controles button:active{
transform:scale(.96);
background:linear-gradient(180deg,#e5c760 0%, #c29522 100%);
color:#000;
}

.controles span{
min-width:28px;
text-align:center;
font-size:15px;
font-weight:700;
color:#fff;
}

/* REMOVER */
.remover{
width:100%;
padding:10px 12px;
border:none;
border-radius:12px;
background:linear-gradient(180deg,#1a1a1a 0%, #101010 100%);
color:#f3d57a;
font-weight:700;
cursor:pointer;
border:1px solid rgba(212,175,55,.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.03),
0 8px 14px rgba(0,0,0,.18);
transition:all .22s ease;
}

.remover:hover{
transform:translateY(-1px);
background:linear-gradient(180deg,#232323 0%, #141414 100%);
border-color:rgba(212,175,55,.44);
box-shadow:
0 10px 16px rgba(0,0,0,.24),
0 0 10px rgba(212,175,55,.12);
}

.remover:active{
transform:scale(.98);
background:linear-gradient(180deg,#e5c760 0%, #c29522 100%);
color:#000;
}

/* RESUMO */
.resumo{
background:linear-gradient(180deg,#171717 0%, #101010 100%);
padding:14px;
border-radius:16px;
text-align:center;
margin-top:14px;
border:1px solid rgba(212,175,55,.10);
box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.resumo p{
margin:0 0 8px;
color:#d9d9d9;
font-size:14px;
}

.resumo h3{
margin:0;
color:#f0cc62;
font-size:20px;
font-family:'Playfair Display', serif;
}

/* ENDEREÇO */
.endereco{
background:linear-gradient(180deg,#171717 0%, #101010 100%);
padding:14px;
border-radius:16px;
margin-top:14px;
border:1px solid rgba(212,175,55,.10);
box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.endereco h3{
margin:0 0 10px;
color:#f0cc62;
font-size:18px;
font-family:'Playfair Display', serif;
}

.endereco input{
width:100%;
padding:12px 13px;
margin-top:8px;
background:linear-gradient(180deg,#0f0f0f 0%, #090909 100%);
color:#fff;
border:1px solid rgba(212,175,55,.12);
border-radius:12px;
box-sizing:border-box;
outline:none;
transition:all .22s ease;
}

.endereco input:focus{
border-color:rgba(212,175,55,.38);
box-shadow:0 0 0 3px rgba(212,175,55,.08);
}

/* BOTÕES FINAIS */
.btn{
width:100%;
padding:13px;
margin-top:10px;
border:none;
border-radius:14px;
cursor:pointer;
font-weight:700;
font-size:14px;
transition:all .25s ease;
box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.continuar{
background:linear-gradient(180deg,#2a2a2a 0%, #1a1a1a 100%);
color:#fff;
border:1px solid rgba(255,255,255,.06);
}

.continuar:hover{
transform:translateY(-2px);
background:linear-gradient(180deg,#353535 0%, #212121 100%);
}

.finalizar{
background:linear-gradient(180deg,#f0cf6c 0%, #cb9d2a 100%);
color:#000;
border:1px solid rgba(255,220,120,.55);
}

.finalizar:hover{
transform:translateY(-2px);
box-shadow:
0 14px 24px rgba(0,0,0,.24),
0 0 18px rgba(212,175,55,.18);
filter:brightness(1.03);
}

.limpar{
background:linear-gradient(180deg,#2a2a2a 0%, #171717 100%);
color:#f3d57a;
border:1px solid rgba(212,175,55,.18);
}

.limpar:hover{
transform:translateY(-2px);
background:linear-gradient(180deg,#353535 0%, #1e1e1e 100%);
}

/* FOOTER */
footer{
background:#111;
color:#d0d0d0;
text-align:center;
padding:22px;
margin-top:26px;
border-top:1px solid rgba(212,175,55,.08);
font-size:14px;
}

/* RESPONSIVO */
@media (max-width:480px){
.produtos{
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:14px;
padding:14px;
}

.produto img{
height:150px;
}

.banner{
height:200px;
}

.carrinho{
width:100%;
right:-100%;
}
}