:root{
  --bg:#F3EBDD;
  --ink:#3B2E2A;
  --ink-soft:#5a4b45;
  --gold:#C19A5B;
  --gold-2:#E6D3B5;
  --sand:#EFE8DE;
  --white:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:30;background:rgba(243,235,221,.92);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
nav{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.nav-title{font-weight:800;letter-spacing:.6px}
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu a{padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:800;
  background:linear-gradient(180deg, var(--gold), #b88748 90%);
  border:1px solid #b88748; box-shadow:0 6px 18px rgba(193,154,91,.25)}
.menu a:hover{filter:brightness(0.97); transform:translateY(-1px)}
.hero{padding:56px 0;background:linear-gradient(180deg, #FFF, #F3EBDD 60%)}
.hero h1{margin:0 0 10px 0;font-size:36px}
.hero p.lead{font-size:18px;color:#3e332f;max-width:800px;line-height:1.45}
.section{padding:42px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(0,0,0,.06);margin-bottom:8px; object-fit:cover}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--sand);font-weight:600;margin:6px 6px 0 0}
.btn{display:inline-block;padding:12px 18px;border-radius:16px;
  background:linear-gradient(180deg, var(--gold), #b88748 88%);
  color:#2d241f;font-weight:900;text-decoration:none;border:1px solid #b88748;
  box-shadow:0 10px 28px rgba(193,154,91,.28)}
.btn:hover{filter:brightness(0.97); transform:translateY(-1px)}
.small{font-size:14px;color:var(--ink-soft)}
footer{background:var(--sand);padding:28px 0;border-top:1px solid rgba(0,0,0,.06);margin-top:40px}
.open-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.open{background:#10B981} .closed{background:#EF4444}
ul.clean{margin:8px 0 0 0; padding-left:18px}
ul.clean li{font-size:14px; color:var(--ink-soft); margin:4px 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#efe2cc;border:1px solid #e2cda4;
  font-weight:600;margin:8px 6px 0 0; font-size:12px;color:#6b5535}
.map-card{background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.map-card iframe{width:100%;height:220px;border:0;display:block}
.map-card .pad{padding:14px}
.kader{object-fit:contain; max-height:220px; background:#fff; border:1px dashed #e2cda4}
.banner{display:none; position:sticky; top:64px; z-index:25; background:#fff7ec;
  border-bottom:1px solid #f0d9b8; color:#7a4a00}
.banner .wrap{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 12px;flex-wrap:wrap}
.banner .pill{background:#fff;border:1px dashed #f0d9b8;border-radius:999px;padding:6px 10px;font-weight:800}
.banner a{color:#7a4a00; font-weight:800}
#loadbar{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#b88748,var(--gold));width:0;z-index:50; box-shadow:0 2px 8px rgba(193,154,91,.5)}
#loadtxt{position:fixed; left:50%; top:8px; transform:translateX(-50%); font-size:12px; color:#6b5535; z-index:51; background:rgba(255,255,255,.8); padding:3px 8px; border-radius:8px; border:1px solid #e2cda4; display:none}
/* Xsensible product tegels */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.product-card h3 {
  font-size: 16px;
  margin: 12px 0 6px;
}

.product-card p {
  font-size: 14px;
  margin: 4px 0;
}

.product-card .prijs {
  font-weight: bold;
  font-size: 15px;
  color: #8a6b3b;
  margin-top: 6px;
}