/* 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 */
.nsmm__panel{
  position:fixed; left:0; right:0; 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;
}
.nsmm__inner{ padding:10px 12px; }
.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 */
   overflow:auto; padding:10px 8px;
}

/* Itemblok – geen randen/schaduw, minimaal */
.nsmm__col{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:inline-block; width:100%;
  margin: 0 0 30px;            /* compacte verticale afstand */
}

/* 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; }