:root{
    --bg:#000000;
    --card:#000000;
    --surface:#000000;
    --muted:#888;
    --accent:#8a1f4d;
    --accent-2:#a8325c;
}

/* Base */
html,body{height:100%;}
body{
    font-family: 'Poppins', sans-serif;
    background-color:var(--bg);
    color:#fff;
    margin:0;
    padding:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Header */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 24px;
    background:var(--surface);
}
header img{ height:48px; }
nav a, .voltar{ color:#fff; text-decoration:none; margin:0 14px; font-weight:700; }
nav a:hover, .voltar:hover{ color:var(--accent); }

/* Banner */
.banner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;            /* smaller gap so h1 sits more rente */
    padding:1px 20px 1px 1px; /* align with header padding */
    background:var(--card);
}
.banner-img{ width:220px; height:220px; object-fit:cover; border-radius:12px; }
.banner h1{ color:var(--accent); font-size:3.2rem; font-family:'Creepster', cursive; letter-spacing:1px; margin:0; }
@media (max-width:520px){
    .banner{ flex-direction:column; text-align:center; padding-left:20px; }
    .banner-img{ width:160px; height:160px; margin-bottom:12px; }
    .banner h1{ font-size:2.2rem; }
}

/* Nossa História */
.nossa-historia{ background:linear-gradient(135deg,var(--bg),var(--card)); padding:72px 20px; text-align:center; }
.historia-container{ max-width:1200px; margin:0 auto; }
.nossa-historia h2{ font-size:2.2rem; color:var(--accent); margin-bottom:12px; font-family:'Creepster', cursive; letter-spacing:0.5px; }
.nossa-historia p{ font-size:1.05rem; color:#bbb; margin-bottom:40px; line-height:1.6; }
.historia-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.historia-item{ background:var(--surface); border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.45); transition:transform .28s, box-shadow .28s; }
.historia-item:hover{ transform:translateY(-8px); box-shadow:0 12px 30px rgba(138,31,77,0.28); }
.historia-item img{ width:100%; height:240px; object-fit:cover; display:block; }
.historia-item h4{ padding:16px; margin:0; color:#fff; font-size:1.05rem; background:var(--card); }

/* Produtos */
.produtos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; padding:40px; }
.produto{ background:var(--card); border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.45); padding:14px; text-align:center; transition:transform .25s; }
.produto:hover{ transform:translateY(-6px); }
.produto img{ width:100%; border-radius:10px; display:block; }

/* Badge */
.img-container{ position:relative; display:inline-block; }
.img-container img{ display:block; width:100%; border-radius:10px; }
.badge{ position:absolute; top:10px; left:10px; background:rgba(138,31,77,0.95); color:#fff; padding:6px 10px; border-radius:8px; font-weight:800; font-size:.9rem; box-shadow:0 4px 10px rgba(0,0,0,0.35); z-index:20; }
@media (max-width:360px){ .badge{ top:8px; left:8px; padding:4px 8px; font-size:.8rem; } }

/* Two images layout */
.img-dupla{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
.img-side{ position:relative; overflow:hidden; border-radius:10px; background:var(--surface); }
.img-side img{ display:block; width:100%; height:auto; object-fit:cover; }
.small-badge{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.6); color:#fff; padding:4px 8px; border-radius:6px; font-weight:700; font-size:.8rem; z-index:15; }
@media (max-width:520px){ .img-dupla{ grid-template-columns:1fr; } }

/* Buttons */
button{ background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; margin-top:10px; transition:background .18s, transform .12s; font-weight:700; }
button:hover{ background:var(--accent-2); transform:translateY(-1px); }

/* Carrinho */
.carrinho-container{ max-width:760px; margin:48px auto; padding:20px; background:var(--card); border-radius:10px; }
.item-carrinho{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.03); padding-bottom:12px; }
.item-carrinho img{ width:70px; height:70px; border-radius:8px; object-fit:cover; margin-right:12px; }
.item-info{ flex:1; }
.carrinho-total{ text-align:center; margin-top:20px; }

/* Footer */
footer{ background:var(--surface); text-align:center; padding:18px; margin-top:40px; color:var(--muted); }

/* Notification */
#notificacao{ position:fixed; bottom:26px; right:26px; background:var(--accent); color:#fff; padding:12px 16px; border-radius:10px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .28s, transform .28s; transform:translateY(16px); z-index:9999; }
#notificacao.mostrar{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Helpers */
.muted{ color:var(--muted); }