/* Nova Septem - Zoek mega-paneel (full width, strak/clean) */

.ns-search { position: relative; flex: 1 1 auto; max-width: 640px; margin: 0 18px; z-index: 200; }

/* ---- Zoekveld ---- */
.ns-search__form {
  display: flex; align-items: center;
  background: #fff; border: 1px solid #d7dbe2; border-radius: 13px;
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.ns-search.is-open .ns-search__form,
.ns-search__form:focus-within { border-color: #2f7d3a; box-shadow: 0 2px 12px rgba(20,40,25,.10); }
.ns-search__input { flex: 1 1 auto; border: 0; outline: 0; padding: 12px 15px; font-size: 14.5px; background: transparent; color: #1c2330; }
.ns-search__input::placeholder { color: #9aa3b1; }
.ns-search__clear { border: 0; background: transparent; cursor: pointer; color: #9aa3b1; padding: 0 5px; display: flex; align-items: center; }
.ns-search__clear:hover { color: #51606f; }
.ns-search__btn { flex: 0 0 auto; border: 0; cursor: pointer; width: 48px; height: 46px; display: flex; align-items: center; justify-content: center; background: #2f7d3a; color: #fff; }
.ns-search__btn:hover { background: #276a31; }

/* ---- Overlay: dimt de hele pagina ---- */
.ns-search__overlay { position: fixed; inset: 0; background: rgba(15,23,30,.62); z-index: 1500; }

/* KRITISCH: display:grid op het paneel overschrijft het hidden-attribuut.
   Forceer daarom dat hidden altijd wint, anders sluit het paneel niet. */
.ns-search__panel[hidden],
.ns-search__overlay[hidden] { display: none !important; }

/* Header boven de overlay zodat de zoekrij helder blijft; navbalk + catbar
   apart dimmen. Paneel staat los op body (z 2000), ook boven de overlay. */
body.ns-search-open #jhHeader {
  z-index: 1700;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ns-search-open #jhHeader .jh-row.jh-navrow,
body.ns-search-open #jhHeader .jh-catbar {
  position: relative;
  filter: brightness(.45);
  transition: filter .14s ease;
}

/* ---- Paneel: full width, vast onder de zoekrij (top via JS) ---- */
.ns-search__panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,30,.28);
  z-index: 2000; overflow: hidden;
  max-height: min(78vh, 720px);
  animation: nsPanelIn .14s ease;
}
@keyframes nsPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ns-col__head {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8a9486; font-weight: 600; padding: 2px 4px 12px;
}
.ns-col__head--row { display: flex; align-items: baseline; justify-content: space-between; }
.ns-col__total { font-size: 12px; letter-spacing: 0; text-transform: none; color: #aab2a6; font-weight: 400; }

/* ---- Kolom 1: categorieen ---- */
.ns-search__cats { background: #f7f9f6; border-right: 1px solid #edf0ea; padding: 20px 14px; overflow-y: auto; }
.ns-cats { list-style: none; margin: 0; padding: 0; }
.ns-cats__item { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: #2a3344; font-size: 13px; }
.ns-cats__item:hover { background: #fff; box-shadow: 0 1px 3px rgba(20,40,25,.07); }
.ns-cats__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-cats__parent { color: #aab2a6; }
.ns-cats__count { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: #5d7a51; background: #e7efe5; border-radius: 999px; padding: 2px 8px; }
.ns-cats__empty { color: #9aa3b1; font-size: 13px; padding: 2px 10px; }

/* ---- Kolom 2: productgrid ---- */
.ns-search__list { padding: 20px 22px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 0; }

/* Vast kopblok (telling, knop, merken) en daaronder het scrollende grid.
   Zo kan er nooit iets over de merkenbalk heen vallen. */
.ns-list__head { flex: 0 0 auto; position: relative; z-index: 2; padding-bottom: 12px; box-shadow: 0 8px 14px -12px rgba(15,23,30,.35); }
.ns-list__head .ns-brands { margin-bottom: 0; }
.ns-list__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 14px; }
.ns-pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ns-pc {
  display: flex; align-items: stretch; gap: 12px;
  padding: 11px; border: 1px solid #edf0ea; border-radius: 13px;
  text-decoration: none; color: inherit; background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.ns-pc:hover { border-color: #cfe0c9; box-shadow: 0 6px 18px rgba(15,23,30,.10); transform: translateY(-1px); }
.ns-pc__thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f1f3f1; display: flex; align-items: center; justify-content: center; }
.ns-pc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ns-pc__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ns-pc__brand { font-size: 10px; color: #8a9486; text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; min-height: 14px; }
.ns-pc__title { font-size: 13px; font-weight: 500; color: #1c2330; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-pc__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ns-pc__sku { font-size: 11px; color: #b0b8ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-pc__price { font-size: 13.5px; font-weight: 600; color: #1c2330; white-space: nowrap; }
.ns-pc__price .amount { font-weight: 600; }
.ns-pc__price del { color: #b3bac4; font-weight: 400; margin-right: 4px; }

.ns-pc__match { font-size: 10.5px; color: #5d7a51; margin-top: 3px; }
.ns-didyoumean { font-size: 13px; color: #5f6b57; margin: 0 0 10px; }
.ns-didyoumean strong { color: #476930; }
/* Alleen zichtbaar met ?nsdebug=1 in de URL. */
.ns-debug { font-size: 10px; color: #8a9486; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Prijs wordt voor ingelogde klanten net na de resultaten bijgeladen. */
.ns-pc__price:empty { display: inline-block; width: 54px; height: 12px; border-radius: 6px; background: #eef1ec; }

.ns-all { display: block; text-align: center; margin-top: 16px; padding: 12px; border-radius: 12px; background: #2f7d3a; color: #fff; font-size: 13.5px; font-weight: 500; text-decoration: none; }
.ns-all:hover { background: #276a31; }
/* Bovenaan: zit in het vaste kopblok */
.ns-all--top { margin-top: 0; margin-bottom: 12px; padding: 11px; }

/* ---- Merken-balk boven de producten ---- */
/* De merkenbalk staat in het vaste kopblok. Bij brede zoekopdrachten zijn er
   honderden merken, dus de hoogte is begrensd en de balk scrollt zelf. Zo kan
   hij het productgrid nooit uit beeld duwen. */
.ns-brands {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px;
  max-height: 104px; overflow-y: auto;
}
.ns-brands.is-expanded { max-height: 168px; }
.ns-brand--more { border-color: #9fc191; color: #2f7d3a; font-weight: 600; }
.ns-brand {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d7ddd4; background: #fff; color: #46504a;
  font-size: 12.5px; line-height: 1; padding: 7px 12px;
  border-radius: 999px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.ns-brand:hover { border-color: #9fc191; }
.ns-brand.is-active { background: #2f7d3a; border-color: #2f7d3a; color: #fff; }
.ns-brand__count {
  font-size: 11px; color: #5d7a51; background: #e7efe5;
  border-radius: 999px; padding: 2px 7px;
}
.ns-brand.is-active .ns-brand__count { background: rgba(255,255,255,.22); color: #fff; }

/* ---- Kolom 3: bestsellers ---- */
.ns-search__feat { background: #fafbfa; padding: 20px 16px; overflow-y: auto; }
.ns-feat__card { display: block; border: 1px solid #edf0ea; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; margin-bottom: 11px; transition: box-shadow .14s ease, transform .14s ease; }
.ns-feat__card:hover { box-shadow: 0 6px 16px rgba(15,23,30,.10); transform: translateY(-1px); }
.ns-feat__img { display: block; aspect-ratio: 5 / 3; background: #f1f3f1; }
.ns-feat__img img { width: 100%; height: 100%; object-fit: cover; }
.ns-feat__body { display: block; padding: 9px 11px 11px; }
.ns-feat__brand { display: block; font-size: 10px; color: #8a9486; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.ns-feat__title { display: block; font-size: 12.5px; font-weight: 500; color: #1c2330; line-height: 1.3; }
.ns-feat__price { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #1c2330; }
.ns-feat__price .amount { font-weight: 600; }

/* ---- States ---- */
.ns-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #8a9486; min-height: 240px; gap: 10px; padding: 20px; }
.ns-empty svg { color: #c3ccc1; }
.ns-empty__sub { font-size: 13px; color: #aeb6a9; }
.ns-loading { display: flex; align-items: center; justify-content: center; min-height: 240px; color: #9aa3b1; font-size: 14px; }

/* ---- Volledige resultatenpagina ---- */
.ns-results { max-width: 1240px; margin: 0 auto; padding: 40px 20px 80px; }
.ns-results__head { margin-bottom: 28px; }
.ns-results__head h1 { font-size: 26px; margin: 0 0 4px; color: #1c2330; }
.ns-results__count { color: #7b8494; font-size: 15px; }
.ns-results__form { display: flex; max-width: 520px; margin-top: 18px; border: 1px solid #d7dbe2; border-radius: 13px; overflow: hidden; }
.ns-results__form input[type="text"] { flex: 1 1 auto; border: 0; outline: 0; padding: 12px 16px; font-size: 15px; }
.ns-results__form button { border: 0; background: #2f7d3a; color: #fff; padding: 0 22px; cursor: pointer; font-size: 14px; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.ns-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #edf0ea; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.ns-card:hover { box-shadow: 0 10px 26px rgba(15,23,30,.11); transform: translateY(-2px); }
.ns-card__img { aspect-ratio: 1 / 1; background: #f1f3f1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ns-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ns-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.ns-card__brand { font-size: 11px; color: #8a9486; text-transform: uppercase; letter-spacing: .03em; }
.ns-card__title { font-size: 14.5px; font-weight: 500; color: #1c2330; line-height: 1.3; }
.ns-card__sku { font-size: 12px; color: #b0b8ae; }
.ns-card__price { margin-top: 4px; font-size: 16px; font-weight: 600; color: #1c2330; }
.ns-card__price .amount { font-weight: 600; }
.ns-results__empty { padding: 60px 20px; text-align: center; color: #7b8494; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ns-search__panel { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .ns-search { max-width: none; margin: 10px 0 0; flex-basis: 100%; }
  .ns-search__panel {
    left: 0; right: 0; bottom: 0; height: auto; max-height: calc(100vh - 70px);
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  }
  .ns-search__cats { border-right: 0; border-bottom: 1px solid #edf0ea; max-height: 32vh; }
  .ns-search__feat { display: none; }
  .ns-pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}