/* NS Mega Menu – masonry + full-width + COMPACT */
:root{
  --nsmm-bg:#fff; --nsmm-txt:#111; --nsmm-muted:#6b7280;
  --nsmm-border:#e5e7eb; --nsmm-shadow:0 18px 40px rgba(0,0,0,.06);
}

.nsmm{ position:relative; display:inline-block; }

/* Trigger (klein en strak) */
.nsmm__btn{
    display: flex
;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #333;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    box-shadow: 0 5px 11px rgb(0 0 0 / 5%);
}
.nsmm__btn:focus{ outline:2px solid #3b82f6; outline-offset:2px; }
.nsmm__chev{ transition:transform .2s ease; }
.nsmm__btn[aria-expanded="true"] .nsmm__chev{ transform:rotate(180deg); }

/* Full-width panel */
/* Het paneel wordt door de JS onder de knop gepositioneerd. Zonder
   hoogtebegrenzing loopt het door onder de onderkant van het scherm en valt
   de rest van de categorieen weg. Daarom een maximum plus een eigen scroll
   op het kolommenblok. */
.nsmm__panel{
  position:fixed; left:0; right:0; top:var(--nsmm-top, 78px); z-index:9999;
  width:100vw; background:#fbf7f1; color:var(--nsmm-txt);
  border: 1px solid #c2c2c2; border-radius:0; box-shadow:var(--nsmm-shadow);
  overflow:hidden;
  max-height: var(--nsmm-maxh, calc(100vh - 96px));
  display:flex; flex-direction:column;
}
/* Het hidden-attribuut zet display:none, maar dat verliest het van de
   display:flex hierboven. Daarom expliciet terugzetten. */
.nsmm__panel[hidden]{ display:none; }
.nsmm__inner{
  padding:10px 12px;
  display:flex; flex-direction:column;
  min-height:0; flex:1 1 auto;
}
.nsmm__header{ flex:0 0 auto; }
.nsmm__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-bottom: 1px solid #c2c2c2; font-size:14px;    margin-bottom: 20px;
}
.nsmm__close{ font-size:22px; line-height:1; border:0; background:transparent; cursor:pointer; }

/* Masonry via columns – compact */
.nsmm__grid{
  columns: 280px;                /* smalle kolommen = compacter */
  column-gap: 16px;              /* weinig ruimte tussen kolommen */
  padding:10px 8px;
}

/* Scrollen gebeurt op de wikkel, niet op het kolommenblok zelf. Een
   kolommenblok met een vaste hoogte gaat namelijk nieuwe kolommen NAAST
   elkaar maken in plaats van door te lopen naar beneden. */
.nsmm__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Itemblok – geen randen/schaduw, minimaal */
/* Let op: display:inline-block maakt een blok ondeelbaar voor de kolomindeling.
   Met een reuzencategorie als Udea wordt de kolomhoogte dan op dat ene blok
   afgestemd, waardoor alles in twee of drie extreem lange kolommen past en de
   rest van de breedte leeg blijft. Daarom mag een sectie hier wel breken. */
.nsmm__col{
  display:block; width:100%;
  break-inside:auto; -webkit-column-break-inside:auto;
  margin: 0 0 30px;            /* compacte verticale afstand */
}

/* Een kop mag nooit alleen onderaan een kolom achterblijven, en losse
   regels worden niet middenin afgebroken. */
.nsmm__root{ break-after:avoid; page-break-after:avoid; }
.nsmm__item, .nsmm__sublist li, .nsmm__list > li{
  break-inside:avoid; -webkit-column-break-inside:avoid;
}

/* Root (hoofdcategorie) – net boven subcats */
.nsmm__root{
  display:flex; align-items:flex-start; gap:.5rem;
  text-decoration:none; color:var(--nsmm-txt);
  margin:0 0 10px;
}
.nsmm__rootImg{ width:20px; height:20px; flex:0 0 20px; object-fit:cover; border-radius:4px; border:1px solid var(--nsmm-border); display:none; }
.nsmm__rootName{ font-weight:800; font-size:15px; line-height:1.1; }

/* Subcategorieën – iets kleiner en vet */
.nsmm__list{ list-style:none; margin:0; padding:0; }
.nsmm__child{
  display:block; text-decoration:none; color:var(--nsmm-txt);
  font-weight:500; font-size:14px; line-height:1.15;
  margin:8px 0;
  padding-left: 0px;
}
.nsmm__child:hover{ text-decoration:underline; }

/* Sub-subcategorieën – mini indent + subtiel bolletje */
.nsmm__sublist{ list-style:none; padding:0; }
.nsmm__sublist li{ position:relative; margin:0; line-height:1.2; padding-left: 10px; }
.nsmm__sublist li + li{ margin-top:1px; }

.nsmm__gchild{
  text-decoration:none; color:#000000;
  font-weight:500; font-size:13px; display:inline-block;
}
.nsmm__gchild:hover{ color:#111; text-decoration:underline; }

/* Mobiel: 1 kolom, zelfde compacte typografie */
@media (max-width:900px){ .nsmm__grid{ columns: 240px; column-gap:14px; } }
@media (max-width:640px){
  .nsmm__grid{ columns:1; }
  .nsmm__inner{ padding:8px; }
  .nsmm__header{ padding:6px 6px; }
}


/* Center content inside the full-width panel */
.nsmm__inner{
  /* kies je containerbreedte hier */
  width: min(90%, calc(100vw - 32px));
  margin-inline: auto;      /* centreren */
  padding-left: 12px;       /* behoudt wat lucht */
  padding-right: 12px;
}

/* optioneel: iets strakker kolommen binnen de gecentreerde container */
.nsmm__grid{
  columns: 280px;           /* kolombreedte; pas aan naar smaak (260–320) */
  column-gap: 18px;         /* ruimte tussen kolommen */
}

/* Zorg dat de lijst niet wordt weggesneden door ouders */
.jh-search { position: relative; overflow: visible; z-index: 30; }

/* De dropdown zelf */
.jh-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  display: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  max-height: 380px;
  overflow: auto;
  z-index: 9999; /* boven je header/mega menu */
  padding: 6px;
}
.jh-suggest.is-open{ display:block; }

.jh-suggest li[role="option"]{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .7rem; border-radius:10px; cursor:pointer;
}
.jh-suggest li[aria-selected="true"], .jh-suggest li:hover{ background:#f6f7f8; }
.jh-suggest img{ width:40px; height:40px; object-fit:cover; border-radius:8px; }
.jh-suggest .t{ flex:1; line-height:1.2; }
.jh-suggest .p{ white-space:nowrap; font-weight:600; }
.jh-suggest .more{ text-align:center; font-weight:600; }