@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root { --ink: #201914; --clay: #a55f39; --mist: #f4efe8; --line: rgba(32,25,20,.13); }
body { background: var(--mist); color: var(--ink); }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.28; pointer-events:none; background-image:radial-gradient(rgba(65,43,30,.16) .6px,transparent .6px); background-size:7px 7px; }
.font-heading, h1, h2, h3 { font-family: Fraunces, Georgia, serif !important; letter-spacing:-.035em; }
#navbar { background:rgba(244,239,232,.88) !important; border-color:var(--line) !important; }
#navbar .max-w-7xl > div.flex.justify-between > a:first-child { letter-spacing:-.06em; }
/* The main routes are deliberately visible: the header is the site's primary map. */
#navbar .top-links { display:flex !important; flex:1 1 auto; justify-content:flex-end; min-width:0; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
#navbar .top-links::-webkit-scrollbar { display:none; }
#navbar .top-links a { padding:8px 2px; flex:0 0 auto; }
#navbar .top-links a { color:var(--clay); }

/* Eén vaste navigatie op elke pagina. */
#navbar {
  height: 96px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4efe8 !important;
  backdrop-filter: none !important;
}
#navbar > .max-w-7xl {
  width: 100%;
  max-width: 1280px;
  padding-inline: 24px;
}
#navbar > .max-w-7xl > .flex.justify-between {
  height: 96px;
  align-items: center;
}
#navbar .top-links {
  gap: 24px !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
#navbar .top-links a {
  color: var(--clay) !important;
  line-height: 20px;
}
#navbar > .max-w-7xl > .flex.justify-between > a:first-child {
  color: var(--ink) !important;
  font-family: Fraunces, Georgia, serif !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
#navbar #mobile-menu-btn, #navbar #mobile-menu { display:none !important; }
.rounded-xl, .rounded-2xl { border-radius: 4px !important; }
.bg-wood-700, .bg-wood-600 { background-color: var(--clay) !important; }
.text-wood-700, .text-wood-600 { color: var(--clay) !important; }
.border-wood-100, .border-stone-100 { border-color:var(--line) !important; }
section[id] { scroll-margin-top: 96px; }
#modellen { background:#dfd2c0 !important; }
#modellen .group { border:1px solid rgba(32,25,20,.18); box-shadow:none !important; border-radius:0 !important; }
#modellen .group:nth-child(2) { transform:translateY(26px); }
#modellen .group img { filter:saturate(.82) contrast(1.04); }
#modellen .group:hover { border-color:var(--ink); }
#modellen, #levering, #heaters, #materialen, #faq, #reviews { display:none; }
.product-overview { border-top:1px solid var(--line); }
.product-link { display:block; color:inherit; text-decoration:none; border:1px solid var(--line); background:#f8f4ef; transition:transform .2s cubic-bezier(0.23, 1, 0.32, 1),border-color .2s ease; }
.product-link:hover { border-color:var(--ink); }
/* Lift only for real pointers (touch fires sticky hovers) and when motion is welcome. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .product-link:hover { transform:translateY(-5px); } }
.product-link:active { transform:scale(.98); transition-duration:.12s; }.product-link img { width:100%; height:260px; object-fit:cover; filter:saturate(.78) contrast(1.04); }.product-link div { padding:22px; }.product-link span { display:block; color:var(--clay); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }.product-link h3 { font-size:27px; margin:12px 0 9px; }.product-link p { color:#6a5d54; line-height:1.6; min-height:76px; }.product-link b { display:block; margin-top:19px; font-size:13px; }.product-link i { color:var(--clay); font-style:normal; margin-left:7px; }
.config-intro { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:52px; padding:34px; background:var(--ink); color:#fff; }.config-intro h2 { margin:10px 0; }.config-intro p:not(.font-mono) { max-width:650px; color:#ded2c8; line-height:1.6; }.config-intro .primary { white-space:nowrap; background:#e7b18a; color:var(--ink); }
#levering { background:var(--ink) !important; color:#f8f2ea; }
#levering h2, #levering h3 { color:#f8f2ea !important; }
#levering p { color:#d7c9bb !important; }
#levering .bg-white, #levering .bg-wood-50 { background:rgba(255,255,255,.08) !important; }
.reviews-marquee { padding:18px 0; border-block:1px solid var(--line); }
footer { background:#17120f !important; }
/* Shared compact rhythm; keep navigation, reading sizes and touch targets intact. */
main > section[class*="py-"], body > section[class*="py-"] { padding-top:32px !important; padding-bottom:32px !important; }
main > section[class*="pb-20"] { padding-bottom:32px !important; }
main > section.pt-20 > div { min-height:0 !important; padding-top:36px !important; padding-bottom:24px !important; }
main > section .mb-8, body > section .mb-8 { margin-bottom:20px !important; }
main > section .mt-12, body > section .mt-12 { margin-top:24px !important; }
main > section .mt-10, body > section .mt-10 { margin-top:24px !important; }
.config-intro { margin-top:28px; padding:24px; gap:20px; }
footer[class*="py-"] { padding-top:32px !important; padding-bottom:32px !important; }
.sd-page-intro { margin-bottom:20px !important; }
.sd-layout-model { margin-top:24px; }
.sd-layout-sketch { margin:0; border:1px solid #ded4c9; background:#fff; }
.sd-barrel-sideview { max-width:900px; margin:20px auto 0; overflow:hidden; aspect-ratio:16/9; border-color:#e4dcd4; background:#f5f3ef; }
.sd-barrel-sideview img { width:100%; height:100%; object-fit:contain; }
.sd-layout-sketch img { display:block; width:100%; height:auto; }
.sd-layout-sketch figcaption { padding:10px 16px; color:#625950; font-size:13px; line-height:1.5; border-top:1px solid #e8ded4; }
@media(max-width:640px) {
  main > section[class*="py-"], body > section[class*="py-"] { padding-top:24px !important; padding-bottom:24px !important; }
  .config-intro { padding:20px; margin-top:24px; }
}
@media (max-width:1023px) { #navbar .max-w-7xl { padding-inline:16px; } #navbar > div > div { gap:16px; } #navbar .max-w-7xl > div.flex.justify-between > a:first-child { flex:0 0 auto; font-size:19px; } #navbar .top-links { justify-content:flex-start; gap:14px !important; } #modellen .group:nth-child(2) { transform:none; } .config-intro { align-items:flex-start; flex-direction:column; } }
@media (max-width:640px) { #navbar .max-w-7xl > div.flex.justify-between > a:first-child { font-size:16px; } #navbar .top-links { gap:12px !important; } }