: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) }