body{
 margin:0;
 background:#0b0b0b;
 color:#fff;
 font-family:Arial;
}

.logo{
 text-align:center;
 font-size:42px;
 letter-spacing:8px;
 padding:10px;
}

.hero{
 text-align:center;
 color:#aaa;
}

.tabs{
 display:flex;
 gap:10px;
 padding:10px;
 overflow:auto;
}
.tab{
 padding:8px 14px;
 background:#1a1a1a;
 border-radius:20px;
}
.tab.active{
 background:#fff;
 color:#000;
}

.grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 padding:10px;
}

.card{
 background:#1a1a1a;
 border-radius:14px;
 overflow:hidden;
}

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

.cardBody{
 padding:10px;
}

.cart{
 position:fixed;
 right:0;
 top:0;
 width:300px;
 height:100%;
 background:#111;
 transform:translateX(100%);
 transition:.3s;
 padding:20px;
}

.cart.active{
 transform:translateX(0);
}

.cartBtn{
 position:fixed;
 right:15px;
 bottom:80px;
 background:#fff;
 color:#000;
 padding:12px;
 border-radius:50px;
}

.sticky{
 position:fixed;
 bottom:0;
 width:100%;
 background:#111;
 padding:10px;
 display:flex;
 justify-content:space-between;
}

.detail{
 display:none;
 position:fixed;
 inset:0;
 background:#000;
 flex-direction:column;
 padding:20px;
}

.detail.active{
 display:flex;
}

.toast{
 position:fixed;
 bottom:120px;
 left:50%;
 transform:translateX(-50%);
 background:#fff;
 color:#000;
 padding:10px 20px;
 border-radius:20px;
 opacity:0;
}

.toast.show{
 opacity:1;
}