/* ============================================================
   MATO — warm equipment-showroom system
   Light, confident, gold used generously (not as a sliver accent).
   A light ground so the (mostly dark) product photography pops —
   real photography given room. Sharp corners on panels, pill
   shapes on buttons/badges/nav — the one thread worth keeping
   from this site's own history. Soft realistic shadows, never glow.
   ============================================================ */

:root{
  --bg:#faf7f1;
  --bg-soft:#f2ece0;
  --surface:#ffffff;
  --surface-2:#fbf7ee;
  --surface-3:#f5efe1;
  --text:#1c1812;
  --text-soft:rgba(28,24,18,.74);
  --muted:rgba(28,24,18,.64);
  --line:rgba(28,24,18,.12);
  --line-strong:rgba(28,24,18,.2);
  --gold:#a97a1f;
  --gold-bright:#c99a3d;
  --gold-deep:#8a6117;
  --gold-wash:rgba(169,122,31,.1);
  --gold-wash-strong:rgba(169,122,31,.18);
  --ink-on-gold:#211a0d;
  --paper:#faf7f1;
  --paper-ink:#1c1812;
  --shadow-sm:0 8px 22px rgba(28,24,18,.09);
  --shadow-md:0 18px 40px rgba(28,24,18,.12);
  --shadow-lg:0 26px 60px rgba(28,24,18,.16);
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --wrap:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:96px;
  font-family:var(--body);
  background:
    radial-gradient(circle at 18% 0%, rgba(217,173,85,.07), transparent 32%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  letter-spacing:-.008em;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.is-ready{opacity:1;transform:none}
body.is-leaving{opacity:0;transform:translateY(-8px);pointer-events:none}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{width:min(var(--wrap), calc(100% - 44px));margin:0 auto}
.page{overflow:hidden}
::selection{background:var(--gold-wash-strong);color:var(--text)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0 0 12px}
p{margin:0 0 14px;color:var(--text-soft)}
.lead{font-size:17.5px;line-height:1.65;color:var(--text-soft)}
.small{font-size:12.5px;color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:12px;
}

/* ---------- buttons (pill — the warmth thread) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink-on-gold);box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:var(--shadow-md)}
.btn-secondary{background:rgba(28,24,18,.06);border-color:var(--line-strong);color:var(--text)}
.btn-secondary:hover{background:rgba(28,24,18,.1);border-color:var(--gold)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- header ---------- */
.header{
  position:fixed;top:18px;left:50%;z-index:50;
  width:calc(100% - 44px);max-width:var(--wrap);
  transform:translateX(-50%);
}
.header .wrap.nav{width:100%;margin:0}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:8px 10px 8px 24px;box-shadow:var(--shadow-sm);
  transition:box-shadow .3s ease,background .3s ease;
}
.header.scrolled .nav{box-shadow:var(--shadow-md);background:rgba(255,255,255,.92)}
.brand{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text)}
.nav-menu{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-link{position:relative;font-size:13.5px;font-weight:600;color:var(--text-soft);padding:8px 2px;display:inline-flex;align-items:center;gap:5px;transition:color .2s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;border-radius:999px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease)}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav-caret{width:11px;height:11px;flex:none;transition:transform .2s ease}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.nav-item{position:relative}
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.nav-dropdown{
  position:absolute;top:100%;left:0;margin-top:14px;min-width:240px;
  display:flex;flex-direction:column;padding:8px;z-index:60;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;pointer-events:auto;transform:none}
.nav-dropdown a{padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--text-soft)}
.nav-dropdown a:hover{background:var(--gold-wash);color:var(--text)}
.dropdown-soon,.tab-soon{
  display:inline-block;margin-left:6px;padding:3px 8px;border-radius:999px;
  font:700 9.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  background:var(--gold-wash-strong);color:var(--gold-bright);
}
.nav-cta{display:flex;align-items:center;gap:10px}
.mobile-toggle{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.06);color:var(--text);font-size:16px}

.cart-toggle{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.06);cursor:pointer;
}
.cart-toggle svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:var(--gold);color:var(--ink-on-gold);
  font:700 10px/1 var(--mono);border:2px solid var(--bg);
}
.cart-count[data-empty="true"]{display:none}

@media(max-width:900px){
  .header{top:14px;left:22px;right:22px;width:auto;transform:none}
  .nav{border-radius:24px;padding:8px 10px 8px 20px;flex-wrap:wrap;align-items:flex-start}
  .nav-menu{display:none;width:100%;flex-direction:column;padding:6px 4px 14px}
  .nav-menu.open{display:flex}
  .nav-links{width:100%;flex-direction:column;align-items:stretch;gap:2px}
  .nav-link{padding:12px 6px;justify-content:space-between}
  .nav-item{border-top:1px solid var(--line)}
  .nav-dropdown{
    position:static;opacity:1;pointer-events:auto;transform:none;border:0;box-shadow:none;
    border-radius:0;margin:0;background:transparent;max-height:0;overflow:hidden;transition:max-height .22s ease;padding:0 0 0 12px;
  }
  .nav-item.dropdown-open .nav-dropdown{max-height:420px;padding-top:4px;padding-bottom:8px}
  .nav-cta{width:100%;padding-top:10px;border-top:1px solid var(--line);justify-content:space-between}
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center}
  body{padding-top:80px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- layout rhythm ---------- */
.section{padding:76px 0}
.section-tight{padding:48px 0}
.section-head{max-width:680px;margin-bottom:32px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head h2{font-size:clamp(28px,4vw,40px)}
.section-head p{font-size:16px}

/* ---------- page-title ---------- */
.page-title{padding:66px 0 30px}
.page-title h1{font-size:clamp(32px,4.6vw,50px);margin:6px 0 12px}
.page-title p{max-width:620px}

/* ---------- homepage hero ---------- */
.hero.hero-split{padding:56px 0 0}
.hero-split-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.hero-text h1{font-size:clamp(36px,5.6vw,64px);max-width:840px;margin:6px 0 22px}
.hero-text .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-photo-slot{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:100%;min-height:clamp(260px,32vw,460px);
}
.hero-photo-slot img{width:100%;max-width:560px;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
/* de video heeft de paginakleur ingebakken i.p.v. de grijze studio-achtergrond en is
   bijgesneden tot de automaten zelf, zodat ze de kolom vullen. De smalle fade vangt
   compressieruis op en blijft buiten de automaten (die op 2,5% van de rand starten). */
.hero-photo-slot video{
  width:100%;height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),
                     linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),
             linear-gradient(to bottom,transparent,#000 1.5%,#000 98.5%,transparent);
  mask-composite:intersect;
}
@media(max-width:900px){
  .hero-split-grid{grid-template-columns:1fr;gap:20px}
  /* De video stond hier vroeger op display:none, waardoor mobiele bezoekers
     je automaten helemaal niet te zien kregen. Hij blijft nu staan, maar
     lager zodat de titel en de knoppen eerst in beeld komen. */
  .hero-photo-slot{display:flex;min-height:0;margin-top:4px}
  .hero-photo-slot video{max-height:44vh}
  .hero-photo-slot img{max-width:100%}
}
@media(max-width:520px){
  .hero-photo-slot video{max-height:38vh}
}

/* ---------- diensten ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.simple-card{
  position:relative;padding:30px 28px;border-radius:0;
  background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease),border-color .28s ease,box-shadow .32s ease;
  display:flex;flex-direction:column;
}
.simple-card:hover{transform:translateY(-6px);border-color:var(--gold-wash-strong);box-shadow:var(--shadow-md)}
.card-icon{
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  background:var(--gold-wash);color:var(--gold);flex:none;margin-bottom:20px;
}
.card-icon svg{width:24px;height:24px}
.card-kicker{
  position:absolute;top:28px;right:28px;
  font:700 12px/1 var(--mono);color:var(--muted);
}
.simple-card h3{font-size:22px;margin-bottom:8px}
.simple-card p{font-size:14.5px;margin:0 0 20px;flex:1}
.card-link{
  display:inline-flex;align-items:center;gap:8px;
  font:600 13.5px var(--body);color:var(--gold-deep);white-space:nowrap;
  transition:gap .25s ease;
}
.simple-card:hover .card-link{gap:12px}
@media(max-width:900px){.card-grid{grid-template-columns:1fr}}

/* ---------- invest section ---------- */
.invest-section{
  background:linear-gradient(165deg,var(--surface-2),var(--bg-soft));
  border-radius:0;margin:0;
}
.invest-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
.invest-photo{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;
}
.invest-photo img{width:100%;max-width:400px;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.invest-body{display:flex;flex-direction:column;gap:28px}
.invest-intro h2{font-size:clamp(26px,3.2vw,36px)}
.invest-intro p{max-width:50ch;font-size:16px}
.invest-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.invest-point{padding:18px 20px;border-radius:0;background:rgba(28,24,18,.04);border:1px solid var(--line)}
.invest-point strong{display:block;font-size:15px;margin-bottom:5px;color:var(--text)}
.invest-point p{margin:0;font-size:13px}
@media(max-width:900px){.invest-grid{grid-template-columns:1fr}.invest-points{grid-template-columns:1fr}}

/* ---------- referenties ---------- */
.reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.reference-card{
  border-radius:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s ease;
}
.reference-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
/* 17/10 = de verhouding van de aangeleverde referentiefoto's, zodat de
   ingebrande bedrijfsnaam nooit wordt weggesneden */
.reference-photo{aspect-ratio:17/10;overflow:hidden}
.reference-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.reference-card:hover .reference-photo img{transform:scale(1.05)}
.reference-body{padding:18px 20px}
.reference-body h3{font-size:16.5px;margin-bottom:3px}
.reference-body p{margin:0;font-size:13px;color:var(--muted)}
@media(max-width:1100px){.reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .reference-body{padding:12px 14px}
  .reference-body h3{font-size:14.5px}
  .reference-body p{font-size:12px}}
@media(max-width:430px){.reference-grid{grid-template-columns:1fr}}

/* ---------- home dot rail ---------- */
.home-dots{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:10px;
}
.home-dot{
  width:10px;height:10px;border-radius:999px;border:1.5px solid var(--line-strong);
  background:transparent;cursor:pointer;padding:0;transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.home-dot.active{background:var(--gold);border-color:var(--gold);transform:scale(1.3)}
@media(max-width:900px){.home-dots{display:none}}

/* ---------- info-grid / info-card ---------- */
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.info-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-card{padding:26px;border-radius:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.info-card h2,.info-card h3{font-size:19px;margin-bottom:10px}
.info-card p{font-size:14px;margin:0}
@media(max-width:760px){.info-grid,.info-grid-3{grid-template-columns:1fr}}

.check-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.check-list li{position:relative;padding-left:24px;font-size:14px;color:var(--text-soft)}
.check-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:999px;background:var(--gold)}

.legal-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.legal-list li{color:var(--text-soft);font-size:14px;line-height:1.6}
.legal-list strong{color:var(--text)}

.legal-note{
  padding:16px 18px;border-radius:0;background:var(--surface);border:1px solid var(--line);
  font-size:13px;color:var(--text-soft);line-height:1.6;
}
.legal-note a{color:var(--gold-deep)}

/* ---------- catalog ---------- */
.catalog-shell{position:relative}
.catalog-hero{padding:60px 0 26px}
.catalog-hero h1{font-size:clamp(36px,4.8vw,54px);margin:6px 0 14px}
.catalog-hero p{max-width:580px}
.catalog-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.filter-bar{position:sticky;top:96px;z-index:20;padding-bottom:4px;background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.filter-tabs{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:18px}
.filter-tab{
  padding:11px 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.04);
  color:var(--text-soft);font-size:13px;font-weight:600;cursor:pointer;transition:all .22s ease;
}
.filter-tab:hover{border-color:var(--gold-wash-strong);transform:translateY(-1px)}
.filter-tab.active{background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold)}
.filter-tab.active .tab-soon{background:rgba(33,26,13,.2);color:var(--ink-on-gold)}

.filter-subtabs{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 18px 4px;border-left:2px solid var(--line-strong);margin-left:6px}
.filter-subtabs[hidden]{display:none}
.filter-subtab{
  padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;
}
.filter-subtab:hover{border-color:var(--gold-wash-strong);color:var(--text)}
.filter-subtab.active{background:var(--gold-wash);border-color:var(--gold-wash-strong);color:var(--gold-deep)}
.filter-subtab.active .tab-soon{background:var(--gold-wash-strong);color:var(--gold-deep)}

.catalog-groups{display:flex;flex-direction:column;gap:8px}
.catalog-category + .catalog-category{margin-top:36px}
.catalog-category-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.catalog-category-head h2{font-size:20px;margin:0}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:16px 0}
.product-card{
  position:relative;padding:18px;border-radius:0;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .3s var(--ease),border-color .28s ease,box-shadow .3s ease;
}
.product-card:hover{transform:translateY(-6px);border-color:var(--gold-wash-strong);box-shadow:var(--shadow-md)}
.product-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.product-type{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.product-badge{padding:6px 10px;border-radius:999px;background:var(--gold-wash-strong);color:var(--gold-bright);font-size:11px;font-weight:700}
.product-badge.badge-soon{background:rgba(28,24,18,.08);color:var(--text-soft)}
.product-card.coming-soon{border-style:dashed}
.product-visual{
  height:180px;border-radius:0;background:rgba(28,24,18,.03);
  display:grid;place-items:center;overflow:hidden;margin-bottom:12px;
}
.product-photo{max-width:88%;max-height:160px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.4));transition:transform .4s var(--ease)}
.product-card:hover .product-photo{transform:translateY(-6px) scale(1.02)}
.product-card.coming-soon .product-photo{opacity:.75;filter:drop-shadow(0 16px 20px rgba(0,0,0,.3)) grayscale(.3)}
.device{width:100px;height:140px;border-radius:0;background:var(--surface-2);border:1px solid var(--line-strong)}
.product-body h3{font-size:17px;margin-bottom:6px}
.product-body p{font-size:13.5px;color:var(--text-soft);min-height:38px;margin:0}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.product-footer span{font-size:12px;color:var(--muted)}
.product-footer strong{font-size:13px;color:var(--gold-deep)}
@media(max-width:1100px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.catalog-grid{grid-template-columns:1fr}}

/* ---------- catalog drawer ---------- */
.catalog-drawer{
  position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end;padding:18px;
  background:rgba(10,8,6,.62);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.catalog-drawer.open{opacity:1;pointer-events:auto}
.catalog-panel-drawer{
  width:min(580px,100%);height:100%;overflow:auto;border-radius:0;
  background:var(--bg-soft);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
  transform:translateX(24px);transition:transform .34s var(--ease);
}
.catalog-drawer.open .catalog-panel-drawer{transform:none}
.drawer-head{border-bottom:1px solid var(--line)}
.drawer-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px}
.drawer-label{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.drawer-close{width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.05);color:var(--text);cursor:pointer}
.drawer-close:hover{background:rgba(28,24,18,.1)}
.drawer-visual-wrap{height:300px;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden;position:relative}
.drawer-photo{max-width:78%;max-height:260px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(0,0,0,.5));cursor:zoom-in}
.zoom-hint{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:999px;background:rgba(15,13,10,.7);border:1px solid var(--line-strong);display:grid;place-items:center;pointer-events:none}
.zoom-hint svg{width:16px;height:16px}
.drawer-copy{padding:22px}
.drawer-copy h3{font-size:28px;margin-bottom:8px}
.drawer-copy p{font-size:15px;margin:0}
.drawer-section{padding:0 22px}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.drawer-card{padding:18px;border-radius:0;background:rgba(28,24,18,.03);border:1px solid var(--line)}
.drawer-card h4{font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px}
.drawer-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.drawer-list li{position:relative;padding-left:16px;font-size:13.5px;color:var(--text-soft)}
.drawer-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:999px;background:var(--gold)}
.drawer-price{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px 26px;border-top:1px solid var(--line)}
.price-block small{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.price-block strong{display:block;font-size:28px}
.price-block span{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.drawer-actions{display:flex;gap:10px;flex-wrap:wrap}
.catalog-drawer.coming-soon [data-drawer-price]{color:var(--text-soft)}
@media(max-width:640px){.catalog-panel-drawer{width:100%}.drawer-grid{grid-template-columns:1fr}}

.stat-stack{display:grid;gap:12px}
.stat-line{display:grid;grid-template-columns:110px 1fr 32px;gap:10px;align-items:center}
.stat-line span{font-size:12px;color:var(--muted)}
.stat-track{height:6px;border-radius:999px;background:rgba(28,24,18,.08);overflow:hidden}
.stat-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}

.photo-lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,5,4,.94);display:none;align-items:center;justify-content:center}
.photo-lightbox.open{display:flex}
.lightbox-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox-img{max-width:88vw;max-height:88vh;object-fit:contain;cursor:grab}
.photo-lightbox.is-zoomed .lightbox-img{cursor:grabbing}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.06);color:var(--text);cursor:pointer}
.lightbox-zoom-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.lightbox-zoom-in,.lightbox-zoom-out{width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(28,24,18,.06);color:var(--text);font-size:18px;cursor:pointer}

/* ---------- cart panel ---------- */
.cart-panel{position:fixed;inset:0;z-index:130;background:rgba(10,8,6,.62);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s ease;padding:16px}
.cart-panel.open{opacity:1;pointer-events:auto}
.cart-panel-box{width:min(460px,100%);max-height:88vh;overflow:auto;border-radius:0;background:var(--bg-soft);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}
.cart-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-panel-head h3{margin:0;font-size:19px}
.cart-items{display:flex;flex-direction:column;padding:0 22px}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item-photo{width:56px;height:56px;border-radius:0;background:rgba(28,24,18,.04);display:grid;place-items:center;overflow:hidden}
.cart-item-photo img{width:100%;height:100%;object-fit:contain;padding:5px}
.cart-item-body strong{display:block;font-size:14px;margin-bottom:2px}
.cart-item-body span{font-size:12px;color:var(--muted)}
.cart-item-remove{width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);cursor:pointer;flex:none}
.cart-item-remove:hover{border-color:var(--gold);color:var(--gold)}
.cart-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px}
.cart-panel-foot span{font-size:12.5px;color:var(--muted)}
.cart-panel-alt{padding:0 22px 22px;text-align:center}
.cart-panel-alt a{font-size:12.5px;color:var(--gold-deep)}
.cart-empty{padding:32px 22px;text-align:center;font-size:13.5px;color:var(--muted)}
.cart-checkout-form{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.cart-step-intro{font-size:13px;color:var(--text-soft);margin:0}
.cart-checkout-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-soft)}
.cart-form-status{font-size:12.5px;margin:0;color:var(--muted)}
.cart-success{padding:32px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.cart-success-check{width:44px;height:44px;border-radius:999px;background:var(--gold-wash-strong);color:var(--gold);display:grid;place-items:center;font-size:18px;margin-bottom:6px}
.cart-success h4{margin:0;font-size:18px}
.cart-success p{font-size:13.5px;margin:0}

/* ---------- forms ---------- */
.input,.select,.textarea{
  width:100%;padding:13px 15px;border-radius:0;border:1px solid var(--line-strong);
  background:rgba(28,24,18,.04);color:var(--text);font-size:14px;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-wash)}
.textarea{min-height:130px;resize:vertical}
.full{grid-column:1/-1}
.mato-form{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.mato-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.mato-form label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-soft)}
.mato-form label[hidden]{display:none}
.mato-form input,.mato-form select,.mato-form textarea{
  width:100%;padding:13px 15px;border-radius:0;border:1px solid var(--line-strong);background:rgba(28,24,18,.04);
  color:var(--text);font-size:14px;font-family:var(--body);
}
.mato-form input:focus,.mato-form select:focus,.mato-form textarea:focus{outline:none;border-color:var(--gold)}
.mato-form textarea{min-height:110px;resize:vertical}
.mato-form-status{font-size:13px;margin:6px 0 0}
.mato-form-status[data-state="success"]{color:#8fd6a0}
.mato-form-status[data-state="error"]{color:#e08585}
.mato-form-status[data-state="sending"]{color:var(--muted)}

/* ---------- contact page ---------- */
.contact-unified-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-radius:0;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.contact-unified-col{padding:28px}
.contact-unified-col + .contact-unified-col{border-left:1px solid var(--line)}
.contact-unified-col .card-kicker{position:static;display:block;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.contact-unified-col h2{font-size:20px;margin-bottom:12px}
.contact-unified-col p{font-size:13.5px}
.contact-unified-col .social-link{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text);font-weight:600;font-size:13px;margin-bottom:8px;
}
.contact-unified-col .social-link:hover{border-color:var(--gold);background:var(--gold-wash)}
.contact-unified-col .social-link svg{width:16px;height:16px}
.booking-embed{border-radius:0;border:1px solid var(--line);min-height:280px;background:rgba(28,24,18,.02)}
.booking-embed-placeholder{padding:26px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:900px){.contact-unified-box{grid-template-columns:1fr}.contact-unified-col + .contact-unified-col{border-left:0;border-top:1px solid var(--line)}}

/* ---------- over-ons ---------- */
.social-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.social-card,.social-card-large{padding:30px;border-radius:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.social-card h2{font-size:26px;margin:12px 0 8px}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.social-handle-card{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;
  border:1px solid var(--line-strong);font-weight:600;font-size:13px;
}
.social-handle-card svg{width:18px;height:18px}
.video-frame{position:relative;min-height:360px;border-radius:0;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md)}
.video-frame video{width:100%;height:100%;min-height:360px;object-fit:cover}
.video-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,6,.55))}
.video-caption{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff}
.video-caption strong{display:block;font-size:14px;color:#fff}
.video-caption span{font-size:12px;color:rgba(255,255,255,.78)}
@media(max-width:820px){.social-grid{grid-template-columns:1fr}}

/* ---------- productpartner ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.visual-card{position:relative;border-radius:0;overflow:hidden;min-height:360px;box-shadow:var(--shadow-md)}
.visual-card img{width:100%;height:100%;object-fit:cover}
.visual-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,8,6,.5))}
.visual-note{position:absolute;left:20px;bottom:18px;z-index:2;max-width:280px;color:#fff}
.visual-note strong{display:block;font-size:14px;margin-bottom:2px;color:#fff}
.visual-note span{font-size:12px;color:rgba(255,255,255,.78)}
.content-block h2{font-size:28px}
.content-block p{font-size:15px}
.feature-points{display:grid;gap:12px;margin-top:18px}
.feature-point{padding:16px 18px;border-radius:0;background:rgba(28,24,18,.04);border:1px solid var(--line)}
.feature-point strong{display:block;font-size:14.5px;margin-bottom:3px;color:var(--text)}
.feature-point p,.feature-point span{display:block;margin:0;font-size:13px;color:var(--text-soft)}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- automatenshop ---------- */
.shop-video{position:relative;overflow:hidden;border-radius:0;box-shadow:var(--shadow-lg);aspect-ratio:16/9}
.shop-video video{width:100%;height:100%;object-fit:cover;display:block}
.location-badge{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;padding:8px 14px;border-radius:999px;
  background:var(--gold-wash);border:1px solid var(--gold-wash-strong);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);
}
.location-badge svg{width:14px;height:14px}
.photo-strip-wrap{position:relative;border-radius:0;overflow:hidden;box-shadow:var(--shadow-lg)}
.photo-strip-hero{display:flex;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.photo-strip-hero::-webkit-scrollbar{display:none}
.photo-strip-item{flex:0 0 100%;aspect-ratio:16/8}
.photo-strip-item img{width:100%;height:100%;object-fit:cover}
.photo-strip-arrow{
  position:absolute;right:18px;bottom:18px;width:48px;height:48px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(15,13,10,.7);color:var(--text);cursor:pointer;font-size:16px;z-index:2;
}
.photo-strip-arrow:hover{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold)}
.content-block .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------- telemetry (Televend) ---------- */
.telemetry-section{background:var(--bg-soft)}
.televend-showcase{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px;align-items:stretch;margin-bottom:22px;
}
.televend-figure{
  margin:0;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.televend-figure img{
  width:100%;flex:1;min-height:0;object-fit:contain;padding:26px;
}
.televend-figure-wide img{object-fit:cover;object-position:top center;padding:0}
.televend-figure figcaption{
  padding:12px 18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
@media(max-width:820px){
  .televend-showcase{grid-template-columns:1fr}
  .televend-figure img{max-height:280px}
}

/* ---------- catalog-tease ---------- */
.catalog-tease{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:30px;border-radius:0;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);
}
.catalog-tease .eyebrow{margin-bottom:8px}
.catalog-tease h2{font-size:26px;margin-bottom:6px}
.catalog-tease p{margin:0;font-size:14.5px}
@media(max-width:640px){.catalog-tease{grid-template-columns:1fr}}

/* ---------- recommended cards ---------- */
.recommended-visual{height:150px;margin-bottom:14px}
.recommended-card h3{font-size:20px;margin-bottom:6px}
.recommended-card p{font-size:14px;min-height:auto}

/* ---------- footer ---------- */
.footer{padding:40px 0 26px;border-top:1px solid var(--line);margin-top:20px}
.newsletter-bar{
  display:grid;grid-template-columns:1fr auto;gap:20px 28px;align-items:center;
  padding:24px 26px;border-radius:0;border:1px solid var(--gold-wash-strong);background:var(--gold-wash);margin-bottom:30px;
}
.newsletter-bar-text p{margin:4px 0 0;font-size:13.5px;color:var(--text-soft);max-width:420px}
.footer-title{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.footer-links{display:grid;gap:10px}
.footer-links a{font-size:14px;color:var(--text-soft)}
.footer-links a:hover{color:var(--text)}
.footer-grid-legal{display:grid;grid-template-columns:1.4fr auto auto auto;gap:24px;align-items:start}
.footer-meta{display:grid;gap:6px;margin-top:14px}
.footer-meta span{font-size:13px;color:var(--muted);line-height:1.5}
.footer-meta strong{color:var(--text-soft);font-weight:600}
.footer-bottom{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@media(max-width:900px){.footer-grid-legal{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-grid-legal{grid-template-columns:1fr}.newsletter-bar{grid-template-columns:1fr}}

/* sib/Brevo embed */
#sib-form-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;grid-column:2}
#sib-form-container .sib-form-message-panel{grid-column:auto;margin:0;font-size:13px;background:none;border:none;padding:0;max-width:320px}
#error-message.sib-form-message-panel{color:#e08585}
#success-message.sib-form-message-panel{color:#8fd6a0}
/* Brevo's eigen stylesheet laadt NA site.css en zet #sib-container op wit met
   padding (dat gaf het witte vak in de nieuwsbriefbalk). Deze selectors zijn
   bewust specifieker (#sib-form-container #sib-container) zodat ze winnen
   zonder !important. */
#sib-form-container #sib-container{width:100%;background:transparent;padding:0;display:block}
#sib-form-container .sib-form-block{padding:0}
#sib-form-container form#sib-form{display:flex;gap:10px;align-items:flex-start;padding:0;background:transparent}
#sib-form-container .sib-input{flex:1}
#sib-form-container .form__entry,
#sib-form-container .form__label-row{margin:0}
#sib-form-container .entry__field{width:100%;background:transparent;border:0;border-radius:0;margin:0;display:block}
#sib-form-container input.input{width:220px;padding:12px 15px;border-radius:999px;background:rgba(28,24,18,.05);border:1px solid var(--line-strong);color:var(--text)}
#sib-form-container input.input::placeholder{color:var(--muted)}
#sib-form-container .entry__error{display:block;font-size:12px;color:#e08585;margin-top:4px}
#sib-form-container .entry__error:empty{display:none}
#sib-form-container button.btn{padding:0 22px;white-space:nowrap;background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold);display:inline-flex;align-items:center;gap:6px}
#sib-form-container button.btn svg{width:14px;height:14px}
@media(max-width:640px){
  #sib-form-container{grid-column:1;align-items:stretch}
  #sib-form-container form#sib-form{flex-direction:column;align-items:stretch}
  #sib-form-container input.input{width:100%;border-radius:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   MATO-chatwidget  (assets/chat.js + /api/chat)
   ============================================================ */
.mato-chat{position:fixed;right:20px;bottom:20px;z-index:60;font-family:inherit}
.mato-chat-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* knop rechtsonder */
.mato-chat-toggle{
  width:56px;height:56px;border-radius:999px;border:1px solid var(--gold);
  background:var(--gold);color:var(--ink-on-gold);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-md);
  transition:transform .22s var(--ease),background .22s ease;touch-action:manipulation;
}
.mato-chat-toggle:hover{transform:translateY(-2px)}
.mato-chat-toggle svg{width:24px;height:24px}
.mato-chat-icon-close{display:none}
.mato-chat.is-open .mato-chat-icon-open{display:none}
.mato-chat.is-open .mato-chat-icon-close{display:block}

/* paneel */
.mato-chat-panel{
  position:absolute;right:0;bottom:70px;width:min(380px,calc(100vw - 40px));
  display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 120px));
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
/* Cruciaal: het hidden-attribuut komt uit de browser-stylesheet (display:none),
   maar onze eigen display:flex hierboven overschrijft dat. Zonder deze regel
   blijft het paneel in de layout staan. Op mobiel is het schermvullend, dus
   het ving daar elke tik op, ook die op de chatknop zelf. */
.mato-chat-panel[hidden]{display:none}
.mato-chat.is-open .mato-chat-panel{opacity:1;transform:none;pointer-events:auto}

.mato-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--gold-wash);
}
.mato-chat-head strong{display:block;font-size:14.5px;color:var(--text)}
.mato-chat-head span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mato-chat-x{background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;line-height:0}
.mato-chat-x:hover{color:var(--text)}
.mato-chat-x svg{width:18px;height:18px}

/* berichten */
.mato-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.mato-chat-msg{max-width:85%;padding:10px 13px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.mato-chat-msg.is-user{align-self:flex-end;background:var(--gold);color:var(--ink-on-gold)}
.mato-chat-msg.is-assistant{align-self:flex-start;background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.mato-chat-msg.is-fout{border-color:#e08585;color:#8a3b3b}

.mato-chat-typing{display:flex;gap:4px;align-items:center;padding:13px}
.mato-chat-typing span{width:6px;height:6px;border-radius:999px;background:var(--muted);animation:mato-chat-bounce 1.2s infinite}
.mato-chat-typing span:nth-child(2){animation-delay:.15s}
.mato-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes mato-chat-bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* suggesties */
.mato-chat-suggesties{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 4px}
.mato-chat-suggesties:empty{display:none}
.mato-chat-sugg{
  padding:7px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;
  background:transparent;border:1px solid var(--line-strong);color:var(--text-soft);
  transition:border-color .2s ease,color .2s ease;
}
.mato-chat-sugg:hover{border-color:var(--gold);color:var(--gold-deep)}

/* invoer */
.mato-chat-form{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.mato-chat-form textarea{
  flex:1;resize:none;font:inherit;font-size:14px;line-height:1.45;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--text);
  max-height:110px;overflow-y:auto;
}
.mato-chat-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.mato-chat-form button{
  flex:none;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:var(--gold);border:1px solid var(--gold);color:var(--ink-on-gold);
  transition:opacity .2s ease;
}
.mato-chat-form button svg{width:17px;height:17px}
.mato-chat-form.is-busy button{opacity:.5;pointer-events:none}

.mato-chat-voet{margin:0;padding:0 16px 12px;font-size:11px;color:var(--muted);line-height:1.4}
.mato-chat-voet a{color:var(--gold-deep);text-decoration:underline}

/* mobiel: paneel schermvullend, knop wat kleiner */
@media(max-width:520px){
  .mato-chat{right:14px;bottom:14px}
  .mato-chat-toggle{width:50px;height:50px}
  .mato-chat-panel{
    position:fixed;inset:0;width:100vw;max-height:none;height:100vh;height:100dvh;
    border:0;transform:none;
  }
  .mato-chat.is-open .mato-chat-panel{transform:none}
  .mato-chat-log{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .mato-chat-toggle,.mato-chat-panel{transition:none}
  .mato-chat-typing span{animation:none}
}

/* ---------- Automatenshop: stappen, locaties, producttegels ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stap{padding:24px 22px;background:var(--surface);border:1px solid var(--line);position:relative}
.stap-nr{display:block;font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--gold-deep);margin-bottom:12px}
.stap h3{font-size:18px;margin-bottom:8px}
.stap p{margin:0;font-size:14.5px}
@media(max-width:820px){.stappen{grid-template-columns:1fr}}

.locatie-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch}
.locatie-kaart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.locatie-beeld{aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.locatie-beeld video,.locatie-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.locatie-body{padding:24px 24px 26px}
.locatie-body h3{font-size:22px;margin-bottom:10px}
.locatie-body p{font-size:14.5px}
.locatie-kaart.is-binnenkort{background:var(--surface-2);border-style:dashed;justify-content:center}
.locatie-kaart.is-binnenkort .dropdown-soon{margin:0 0 12px}
@media(max-width:900px){.locatie-grid{grid-template-columns:1fr}}

.product-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.product-tegel{
  padding:22px 20px;background:var(--gold-wash);border:1px solid var(--gold-wash-strong);
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--text);
}
@media(max-width:820px){.product-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.product-tegels{grid-template-columns:1fr}}

/* ---------- modeltabel op de kopersgids ---------- */
.modeltabel-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.modeltabel{width:100%;border-collapse:collapse;min-width:640px}
.modeltabel th,.modeltabel td{padding:14px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.modeltabel th{background:var(--gold-wash);font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text)}
.modeltabel tbody tr:last-child td{border-bottom:0}
.modeltabel tbody tr:hover{background:var(--surface-2)}
.modeltabel td:last-child{white-space:nowrap;font-family:var(--mono);font-size:13.5px}