/* Warm & ambachtelijke stijl */
:root{
  --max-width:1100px;
  --accent:#7a4a2a; /* chocoladebruin */
  --muted:#7b6b5a;
  --bg:#fbf7f3;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--accent); background:var(--bg); line-height:1.5}
.container{max-width:var(--max-width); margin:0 auto; padding:1rem}
.site-header{background:#fff; border-bottom:1px solid rgba(0,0,0,0.05); position:sticky; top:0; z-index:50}
.site-header .container{display:flex; align-items:center; justify-content:space-between}
.brand-wrap{display:flex; flex-direction:column}
.brand{margin:0; font-size:1.4rem; letter-spacing:0.6px; font-weight:700}
.tagline{margin:0; color:var(--muted); font-size:0.9rem}
.nav a{margin-left:1rem; text-decoration:none; color:var(--muted); font-size:0.95rem}
.hero{padding:3rem 0; background:linear-gradient(180deg,#fff 0%, #fbf7f3 100%); border-bottom:1px solid rgba(0,0,0,0.03)}
.hero-inner{display:flex; gap:2rem; align-items:center}
.hero h2{font-size:1.9rem; margin:0 0 0.5rem}
.hero p{color:var(--muted)}
.cta{display:inline-block; margin-top:0.8rem; padding:0.6rem 1rem; background:var(--accent); color:white; text-decoration:none; border-radius:6px}
.hero-image img{max-width:420px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.products{padding:2rem 0}
.products h3, .about h3, .contact h3, .gallery h3{margin-top:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
.card{border:1px solid rgba(0,0,0,0.06); padding:1rem; border-radius:10px; background:white; display:flex; flex-direction:column; gap:0.6rem}
.card img{width:100%; height:180px; object-fit:cover; border-radius:8px}
.category{grid-column:1/-1; margin-top:1rem}
.price{margin-top:auto; font-weight:700}
.gallery-grid img{width:100%; height:220px; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,0.06)}
.about, .contact{padding:2rem 0}
label{display:block; margin:0.6rem 0}
input, textarea{width:100%; padding:0.5rem; border:1px solid #eee; border-radius:6px}
.formMessage{margin-top:0.5rem; color:green}
.site-footer{border-top:1px solid rgba(0,0,0,0.03); padding:1rem 0; background:transparent; color:var(--muted)}
.social a{margin-left:0.6rem; text-decoration:none; color:var(--muted)}
.btn{background:transparent; border:2px solid var(--accent); padding:0.5rem 0.8rem; border-radius:8px; cursor:pointer}
.secondary{background:transparent; border-color:var(--muted)}
.cartSummary{margin-top:1rem}
@media (max-width:800px){
  .hero-inner{flex-direction:column}
}