:root{
  --ink:#0f172a; --dim:#475569; --bg:#fff; --mut:#f5f7fb; --line:#e5eaf0;
  --accent:#f0c419; /* zoekknop geel (pas aan) */
  --brand:#2e7d32;  /* Jansma groen */
  --shadow:0 10px 26px rgba(15,23,42,.06);
  --radius:14px;
}
*{box-sizing:border-box}
.jh-wrap{max-width:1240px;margin:0 auto;padding:0}
.jh-head{position:sticky;top:0;z-index:1000;background:var(--bg);box-shadow:none}
.jh-row{border-bottom:1px solid var(--line)}
.jh-top .jh-wrap{display:grid;grid-template-columns:auto auto 1fr auto;gap:18px;align-items:center;min-height:86px}
.jh-row.jh-top { background: #fbf7f1;}
.jh-row.jh-navrow { background: #476930; }
/* BRAND */
.jh-brand .jh-logo{height:44px;width:auto}

/* CATEGORIES */
.jh-catwrap{position:relative}
.jh-catsBtn{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;font-weight:600;color:var(--ink)}
.jh-catsIcon{width:22px;height:16px;display:inline-block;position:relative}
.jh-catsIcon:before,.jh-catsIcon:after,.jh-catsIcon span{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
.jh-catsIcon:before{top:0}.jh-catsIcon:after{bottom:0}.jh-catsIcon span{top:7px}
.jh-catsPanel{position:absolute;left:0;top:calc(100% + 10px);width:min(980px,90vw);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0;overflow:hidden}
.jh-catsPanel__cols{display:grid;grid-template-columns:280px 1fr 1fr;min-height:420px}
.jh-col{padding:18px}
.jh-col--left{background:var(--mut);border-right:1px solid var(--line)}
.jh-catList,.jh-subList{list-style:none;margin:0;padding:0}
.jh-catList li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer}
.jh-catList li:hover,.jh-catList li.is-active{background:#fff;border:1px solid var(--line)}
.jh-catList img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#eef1f6}
.jh-colTitle{margin:4px 0 12px;color:var(--dim);font-weight:600}
.jh-subList li{padding:8px 6px}
.jh-subList a{color:var(--ink);text-decoration:none}
.jh-subList a:hover{text-decoration:underline}

/* SEARCH */
.jh-search{display:grid;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.jh-search input[type="search"]{border:0;padding:0 16px;height:48px;font-size:16px;outline:none}
.jh-searchBtn{border:0;height:48px;font-weight:700;background:var(--accent);border-left:1px solid rgba(0,0,0,.06);border-radius:0 999px 999px 0}

/* ICONS */
.jh-icons{display:flex;align-items:center;gap:14px}
.jh-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.jh-badge{position:absolute;top:-6px;right:-6px;background:#111;color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 5px}
.jh-burger{display:none;background:transparent;border:0;width:42px;height:42px;border-radius:12px;position:relative}
.jh-burger span{position:absolute;left:10px;right:10px;height:2px;background:#111}
.jh-burger span:nth-child(1){top:12px}.jh-burger span:nth-child(2){top:20px}.jh-burger span:nth-child(3){top:28px}

/* NAV ROW */
.jh-navrow .jh-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px}
.jh-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.jh-menu a{text-decoration:none;color:#1f2937;font-weight:600}
.jh-menu .current-menu-item > a{color:white}
.jh-hotline{display:flex;align-items:center;gap:14px}
.jh-deal{color:#166534;font-weight:700}
.jh-hotbadge{background:#6d53b2;color:#fff;text-decoration:none;border-radius:12px;padding:10px 14px;}

/* MOBILE */
@media (max-width: 1024px){
  .jh-top .jh-wrap{grid-template-columns:auto 1fr auto;gap:12px}
  .jh-catwrap{display:none}
  .jh-search{grid-template-columns:1fr 110px}
  .jh-burger{display:inline-flex}
  .jh-navrow{display:none}
  .jh-icons .jh-ico:nth-child(-n+3){display:none} /* account/compare/wishlist verbergen op mobiel */
}

/* Mobile drawer */
.jh-mobile[hidden]{display:none}
.jh-mobile{position:fixed;inset:0;display:grid}
.jh-mobile__overlay{position:absolute;inset:0;background:rgba(15,23,42,.45);border:0}
.jh-mobile__inner{position:absolute;left:0;top:0;bottom:0;width:min(88vw,420px);background:#fff;box-shadow:var(--shadow);padding:20px 16px 28px;overflow:auto}
.jh-mobilemenu{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.jh-mobilemenu a{padding:12px 10px;text-decoration:none;color:var(--ink);border-radius:8px}

/* === MODERN REFRESH === */
:root{
  --ink:#0f172a; --dim:#5b6474; --line:#e9edf3; --mut:#f8fafc;
  --accent:#f2c21a;      /* geel search */
  --brand:#2f7a3a;       /* Jansma groen */
  --ring: 0 0 0 3px rgba(47,122,58,.12);
  --glass: blur(8px) saturate(120%);
  --radius: 12px;
  --radius-lg: 18px;
}

/* header stickier + glass */
.jh-head{backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); border-bottom: none !important}
.jh-row{border-bottom:1px solid rgba(233,237,243,.8)}
.jh-top .jh-wrap{min-height:78px; gap:16px}

/* LOGO iets compacter */
.jh-brand .jh-logo{height:38px}

/* CATEGORIES pill – vlakker, moderner */
.jh-catsBtn{
  gap:12px; height:46px; padding:0 16px;
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(#fff, #fff);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.jh-catsBtn:hover{border-color:#dfe6ee; box-shadow:0 6px 18px rgba(15,23,42,.06)}
.jh-catsBtn:active{transform:translateY(1px)}
.jh-catsIcon,
.jh-catsIcon:before,.jh-catsIcon:after,.jh-catsIcon span{background:#1e293b}

/* Mega-panel cleaner */
.jh-catsPanel{border-radius:20px}
.jh-col--left{background:linear-gradient(180deg,#f7fafc 0%, #fff 100%)}
.jh-catList li{border:1px solid transparent}
.jh-catList li:hover,.jh-catList li.is-active{border-color:#eef2f7; box-shadow:0 4px 14px rgba(15,23,42,.06)}
.jh-catList img{border-radius:12px}

/* SEARCH – slanke pill, geen dikke geelbal */
.jh-search{
  border: none;
  border-radius: 999px;
  overflow:hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.jh-search:focus-within{border-color:#d8e0ea; box-shadow:var(--ring)}
.jh-search input[type="search"]{height:40px; font-size:15px; padding:0 18px; width: 100%; background: #fff; box-shadow: 0 5px 11px rgb(0 0 0 / 5%);}
.jh-searchBtn{
  height:46px; font-weight:700;
  background:linear-gradient(180deg, #f6d95a 0%, var(--accent) 100%);
  border-left:1px solid rgba(0,0,0,.05);
  padding:0 18px; letter-spacing:.1px;
  transition: filter .15s ease, transform .06s ease;
  border-radius:0 999px 999px 0;
}
.jh-searchBtn:hover{filter:brightness(.98)}
.jh-searchBtn:active{transform:translateY(1px)}

/* ICON buttons – ghost, smaller, badges moderner */
.jh-icons{gap:10px}
.jh-ico{
      width: 40px;
    height: 40px;
    border-radius: 10000px;
    background: #ffffff;
    transition: border-color .2s 
ease, box-shadow .2s 
ease, transform .06s 
ease;
    box-shadow: 0 5px 11px rgb(0 0 0 / 5%);
}
.jh-ico:hover{border-color:#dfe6ee; box-shadow:0 6px 18px rgba(15,23,42,.06)}
.jh-ico:active{transform:translateY(1px)}
.jh-badge{
  top:-4px; right:-6px; min-width:18px;height:18px;
  background: #0b1220; font-weight:700;
}
.jh-cartcount{background: #476930}

/* NAV – strakker, minder spacing */
.jh-navrow .jh-wrap{min-height:52px}
.jh-menu{gap:18px}
.jh-menu a{font-weight:300;color:white}
.jh-menu a:hover{text-decoration: underline;}

/* Hotline badge – subtieler */
.jh-hotbadge{
    background: none;
    padding: 9px 12px;
    border-radius: 14px;
    display: flex;
    align-items: end;
}

.jh-hotbadge svg {
  margin-right: 5px;
}
.jh-deal{font-weight:700;color:white}

/* Mobile small tweaks */
@media (max-width:1024px){
  .jh-top .jh-wrap{min-height:74px}
  .jh-search{grid-template-columns:1fr 112px}
  .jh-burger{width:40px;height:40px;border:1px solid var(--line);border-radius:14px}
  .jh-burger span{background:#1f2937}
}

/* Focus states toegankelijk */
.jh-catsBtn:focus-visible,
.jh-ico:focus-visible,
.jh-hotbadge:focus-visible,
.jh-searchBtn:focus-visible{outline:none; box-shadow:var(--ring)}

/* ===== Mega menu (sidebar + 3-col content) ===== */
.jh-catsPanel{
  position:absolute; left:0; top:calc(100% + 10px);
  width:min(1040px,92vw); background:#fff; border:1px solid #e8ecf3;
  border-radius:18px; box-shadow:0 14px 36px rgba(14,22,40,.12); overflow:hidden;
  padding:12px;
}
.jh-catsPanel__cols{
  display:grid; grid-template-columns:280px 1fr; gap:14px; min-height:420px;
}
.jh-col--left{
  background:#fafbff; border:1px solid #edf1f6; border-radius:14px; padding:10px;
}
.jh-catList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jh-catList li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;
  color:#0f172a; font-weight:600; border:1px solid transparent; transition:background .15s,border-color .15s}
.jh-catList li:hover{background:#fff;border-color:#eef2f7}
.jh-catList li.is-active{background:#6d53b2; color:#fff; border-color:transparent}
.jh-catList li.is-active img{background:rgba(255,255,255,.18)}
.jh-catList img{width:34px;height:34px;border-radius:10px;object-fit:cover;background:#eef2f7}

.jh-col--content{padding:6px 10px}
.jh-contentHead{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px}
.jh-contentHead h3{font-size:26px;line-height:1.15;margin:0;color:#0f172a}
.jh-showAllBtn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #e8ecf3;background:#fff;border-radius:12px;text-decoration:none;color:#111}
.jh-showAllBtn:hover{border-color:#dfe6ea}

.jh-gcols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.jh-g{display:flex;flex-direction:column;gap:8px}
.jh-g h4{margin:0 0 4px;font-size:15px;color:#5b2fb2}
.jh-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jh-g a{text-decoration:none;color:#0f172a}
.jh-g a:hover{color:#5b2fb2}
.jh-g .jh-more{margin-top:4px;display:inline-flex;align-items:center;gap:8px;color:#0f172a;text-decoration:none}
.jh-g .jh-more:hover{color:#5b2fb2}

@media (max-width: 1024px){
  .jh-catsPanel{position:fixed; inset:auto 0 0 0; top:64px; margin:0 auto; width:min(96vw,980px)}
  .jh-gcols{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .jh-catsPanel__cols{grid-template-columns:1fr}
  .jh-col--left{display:none}
  .jh-gcols{grid-template-columns:1fr}
}

/* Account badge */
.jh-accbadge{
display: inline-flex
;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e6ebef;
    background: #fff;
    text-decoration: none;
    line-height: 1;
    font-weight: 600;
    color: #0f172a;
    height: 40px;
    border-radius: 100px;
}
.jh-accbadge:hover{ border-color:#d8e2e8; }

.jh-accbadge__icon{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; }

.jh-accbadge__txt{ white-space:nowrap; max-width:180px;  text-overflow:ellipsis;     font-size: 14px; }
@media (max-width:480px){ .jh-accbadge__txt{ max-width:120px; } }