/* Breakpoints (mobile-first) */
/* ===== Responsive ===== */
@media (min-width:768px){
  .cards{grid-template-columns:1fr 1fr}.cards--3{grid-template-columns:repeat(3,1fr)}
  .about__grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:5rem}
  .contact__grid{grid-template-columns:1fr 1.2fr;align-items:center;gap:4rem}
  .footer__grid{grid-template-columns:2fr 1fr 1fr}
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px}
  .scroll{display:block}
}
@media (min-width:1024px){
  body{padding-bottom:0}.dock{display:none}
  .burger{display:none}
  .nav{position:static;flex-direction:row;background:none;color:inherit;opacity:1;visibility:visible;transform:none;gap:2.2rem;font:500 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;z-index:auto}
  .nav a:not(.btn){position:relative}.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .4s}.nav a:not(.btn):hover::after{width:100%}
  .nav__cta{margin:0;min-height:44px}
  .site-header{padding:1.3rem var(--pad)}.site-header.scrolled{padding:.8rem var(--pad)}
}
@media (min-width:1600px){:root{--wrap:1360px}}
@media (min-width:768px){.mosaic{grid-template-areas:"a b b c" "a b b c" "a d e c" "a d e c" "f g h i" "f g h i" "j j k k" "j j k k"}}

/* ===== Mobiele verfijning ===== */
html{-webkit-text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent}
.footer nav a,.footer address a,.mcat__cta,.link{display:inline-flex;align-items:center;min-height:44px}
.hero{min-height:100vh;min-height:100dvh}
.nav{overflow-y:auto;padding:5.5rem 1.5rem 2.5rem}
@media (max-height:520px){.nav{gap:.5rem;font-size:1.4rem}}
@media (max-width:1023px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .dock{padding-bottom:env(safe-area-inset-bottom,0px)}
  .site-header{padding-top:calc(.7rem + env(safe-area-inset-top,0px))}
}
@media (min-width:1024px){.nav{overflow:visible;padding:0}}
@media (max-width:600px){
  .mcat{padding:1.25rem}
  /* naam + prijs op één regel, omschrijving daaronder over de volle breedte */
  .mcat .item{display:grid;grid-template-columns:1fr auto;column-gap:1rem;row-gap:.35rem;align-items:start}
  .mcat .item>div{display:contents}
  .mcat .item h4{grid-column:1;grid-row:1;margin:0;font-size:1.3rem}
  .mcat .item .price{grid-column:2;grid-row:1;font-size:1.45rem}
  .mcat .item p{grid-column:1/-1;grid-row:2;max-width:none}
  .price small{font-size:.7rem}
  .actions .btn{width:100%;padding:.8rem 1.2rem;text-align:center;line-height:1.3}
  .tel{font-size:1.8rem}
  .section__head{margin-bottom:2.25rem}
  .handmade__note{margin-top:2.5rem}
  .map,.map iframe{min-height:280px}
}