:root{
  --ink:#0f172a; --dim:#64748b; --line:#e5eaf0; --mut:#f6f8fb;
}
.jh-catbar{border-bottom:1px solid var(--line); background:#fbf7f1;}
.jh-catbar .jh-wrap{padding-block:14px;    width: 100%;
    max-width: 100%;}
#jhCatSplide{position:relative; z-index: 9}
#jhCatSplide .splide__list{align-items:stretch}
#jhCatSplide .splide__list li {     box-shadow: 0 6px 16px rgba(15, 23, 42, .06); }
.splide__track { overflow:visible; }
.jh-catcard{    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 12px;
    border-radius: 16px;
    min-width: 140px;
    height: 100%;
    background: white;
    box-shadow: 0 5px 11px rgb(0 0 0 / 5%);}
.jh-catcard__thumb{width:36px; height:36px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--mut); overflow:hidden}
.jh-catcard__thumb img{width:100%; height:100%; object-fit:cover}
.jh-thumb--ph{width:34px; height:34px; border-radius:8px; background:#d9e1ee}

.jh-catcard__name{color:var(--ink); font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px}
.jh-catcard__meta{color:var(--dim); font-size:12px}

#jhCatSplide .splide__arrow{background:#fff; border:1px solid var(--line); width:38px; height:38px; border-radius:12px; box-shadow:0 6px 16px rgba(15,23,42,.06)}
#jhCatSplide .splide__arrow:disabled{opacity:.4}
#jhCatSplide .splide__pagination{display:none}

/* mobile */
@media (max-width: 640px){
  .jh-catcard{min-width:132px}
}

/* --- Toggle button --- */
.jh-catbar{
  position: relative;
  --bar-bg: #fff;
  --brand: #2f7a3a;       /* pas aan naar jouw groen */
  --edge: #e6ebef;
  --expanded-h: 140px;    /* totale hoogte van de bar */
  --collapsed-h: 0px;     /* hoogte in ingeklapte state */
  transition: max-height .25s ease;
  max-height: var(--expanded-h);
  overflow: hidden;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--edge);
}

/* De knop hangt gecentreerd onderaan */
.jh-catbar__toggle{
  position: absolute;
  left: 50%;
  bottom: -18px;               /* laat ‘m half over de rand vallen */
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 2px solid var(--edge);
  color: var(--brand);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .25s ease, border-color .15s ease, box-shadow .15s ease;
  z-index: 2;
}
.jh-catbar__toggle:hover{ border-color:#d9e2e8; box-shadow:0 10px 20px rgba(0,0,0,.12) }

/* Pijltje draait bij collapse */
.jh-catbar.is-collapsed .jh-catbar__toggle svg{
  transform: rotate(0deg);
  transition: transform .25s ease;
}

.jh-catbar .jh-catbar__toggle svg{
    transform: rotate(180deg);
  }

/* Ingekapt: hoogte dichtknijpen (toggle blijft zichtbaar) */
.jh-catbar.is-collapsed{
  max-height: var(--collapsed-h);
  border-bottom-color: transparent;
}

/* Container */
.jh-catbar{
  position: relative;
  --bar-bg:#fff; --brand:#2f7a3a; --edge:#e6ebef;
  --expanded-h:140px; --collapsed-h:0px;
  padding-bottom: 18px; /* ruimte voor de knop */
  background: #fbf7f1;
    overflow: visible;
    border-bottom: none !important;
}

/* Alleen de BODY klapt in/uit */
.jh-catbar__body{
  max-height: var(--expanded-h);
  overflow: hidden;
  transition: max-height .25s ease;
  border-bottom: none !important;
}
.jh-catbar.is-collapsed .jh-catbar__body{
  max-height: var(--collapsed-h);
  border-bottom-color: transparent;
}

/* Toggle altijd zichtbaar */
.jh-catbar__toggle{
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    background: #fbf7f1;
    border: none;
    color: #333;
    box-shadow: none;
    cursor: pointer;
    z-index: 2;
    transition: transform .25s 
ease, border-color .15s 
ease, box-shadow .15s 
ease;
}
.jh-catbar__toggle:hover{ border-color:#d9e2e8; box-shadow:0 10px 20px rgba(0,0,0,.12) }


/* ==================================================================
   Nova Septem - Correcties op de categoriebalk

   1. De naam had max-width:140px terwijl de kaart zelf 140 breed is met
      12 pixels padding. De tekst was dus breder dan de binnenkant van de
      kaart en liep over de buurkaart heen.
   2. De schuifbaan had geen ruimte aan de zijkanten, waardoor de kaarten
      tegen de rand van de container plakten en de pijlen eroverheen vielen.
   ================================================================== */

/* Dezelfde binnenruimte als de rest van de header, zodat de kaarten op een
   lijn staan met het menu erboven. De pijlen vallen binnen die ruimte. */
.jh-catbar .jh-wrap{
  padding-inline: 20px;
  box-sizing: border-box;
}

.jh-catcard{
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.jh-catcard__name{
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.25;
}

.jh-catcard__meta{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De schuifbaan mag niet meer buiten zijn oevers treden. De verticale ruimte
   blijft behouden zodat de schaduw onder de kaarten niet afgekapt wordt. */
#jhCatSplide .splide__track{
  overflow: hidden;
  padding-block: 10px;
  margin-block: -10px;
}

/* Pijlen aan de rand van de container, met een witte achtergrond zodat ze
   leesbaar blijven waar ze een kaart raken. */
#jhCatSplide .splide__arrow--prev{ left: -14px; }
#jhCatSplide .splide__arrow--next{ right: -14px; }

#jhCatSplide .splide__arrow{
  background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.14);
}

/* Onder de 900 pixels vallen de pijlen onvermijdelijk over de kaarten, en
   daar zijn ze ook overbodig: op een aanraakscherm veegt de bezoeker. */
@media (max-width: 900px){
  #jhCatSplide .splide__arrow{ display: none !important; }

  .jh-catbar .jh-wrap{ padding-inline: 16px; }

  /* Let op: hier stond overflow:visible om het laatste kaartje half door te
     laten lopen. Dat maakte de pagina breder dan het scherm, waardoor je
     horizontaal kon scrollen en de header half wegviel. */
  #jhCatSplide .splide__track{ overflow: hidden; }
  .jh-catbar{ overflow: hidden; }
}

@media (max-width: 640px){
  .jh-catcard{ min-width: 132px; padding: 10px; }
  .jh-catcard__name{ font-size: 13.5px; }
  .jh-catcard__meta{ font-size: 11.5px; }
}