: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}
/* De container had geen binnenruimte, waardoor alles vanaf 1240 pixels en
   smaller tegen de rand van het scherm plakte. De inhoudsbreedte op groot
   scherm blijft 1240 pixels, want de padding komt er bovenop. */
.jh-wrap{max-width:1280px;margin:0 auto;padding-inline:20px;box-sizing:border-box}

@media (max-width:640px){
  .jh-wrap{padding-inline:16px}
}
.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; } }


/* ==================================================================
   Nova Septem - Logo niet laten samendrukken

   Het logo staat in een rasterkolom die mag krimpen. Met een vaste hoogte
   en een automatische breedte wordt de afbeelding dan in elkaar gedrukt in
   plaats van netjes kleiner geschaald. De zoekbalk hoort de ruimte af te
   staan, niet het logo.
   ================================================================== */

.jh-brand{
  flex: 0 0 auto;
  min-width: max-content;
}

.jh-brand .jh-logo,
.jh-brand img.custom-logo{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Alleen de zoekbalk mag inleveren op ruimte. */
.jh-top .jh-wrap > .jh-search,
.jh-top .jh-wrap .jh-search{
  min-width: 0;
}

@media (max-width: 700px){
  .jh-brand .jh-logo,
  .jh-brand img.custom-logo{ height: 34px !important; }
}

@media (max-width: 420px){
  .jh-brand .jh-logo,
  .jh-brand img.custom-logo{ height: 30px !important; }
  .jh-top .jh-wrap{ gap: 10px; }
}


/* ==================================================================
   Niets breder dan het scherm

   De accountknop bevat "Welkom, <voornaam>" en kon niet krimpen. Samen met
   de burgerknop werd de header daardoor breder dan het venster, waardoor de
   hele pagina horizontaal kon schuiven en de rechterkant wegviel.
   ================================================================== */

html, body{ max-width: 100%; overflow-x: hidden; }

.jh-top .jh-wrap{ min-width: 0; }
.jh-icons{ min-width: 0; }

.jh-accbadge{
  min-width: 0;
  max-width: 220px;
}

.jh-accbadge__txt{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Onder de 900 pixels alleen het icoon, de naam kost daar te veel ruimte. */
@media (max-width: 900px){
  .jh-accbadge{ max-width: none; }
  .jh-accbadge__txt{ display: none; }
}


/* ==================================================================
   Smalle schermen: zoekbalk op een eigen regel

   Logo, zoekbalk en de knoppen naast elkaar past onder ongeveer 780 pixels
   niet meer. De zoekbalk eiste alle ruimte op en duwde het account en het
   menu buiten beeld. Nu staan logo en knoppen op de eerste regel en krijgt
   de zoekbalk de volle breedte daaronder.
   ================================================================== */

@media (max-width: 780px){
  .jh-top .jh-wrap{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand icons"
      "search search";
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    padding-block: 12px;
    min-height: 0;
  }

  .jh-brand{ grid-area: brand; }

  .jh-icons{
    grid-area: icons;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ns-search,
  .jh-search{
    grid-area: search;
    width: 100%;
    max-width: 100%;
  }

  /* De categorieenknop staat al verborgen op deze breedte, maar voor de
     zekerheid ook hier. */
  .jh-catwrap{ display: none; }
}

@media (max-width: 420px){
  .jh-top .jh-wrap{ column-gap: 8px; }
  .jh-icons{ gap: 6px; }
}


/* ==================================================================
   Mobiel menu: openen en sluiten

   De lade stond wel in de header maar was nooit aangesloten. Deze regels
   horen bij assets/js/jh-mobilemenu.js.
   ================================================================== */

.jh-mobile{ z-index: 99999; }

.jh-mobile__overlay{
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}

.jh-mobile.is-open .jh-mobile__overlay{ opacity: 1; }

.jh-mobile__inner{
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
  z-index: 1;
}

.jh-mobile.is-open .jh-mobile__inner{ transform: none; }

body.jh-menu-open{ overflow: hidden; }

/* De burgerknop mag ook laten zien dat hij open staat. */
.jh-burger[aria-expanded="true"]{ background: #f0f3ed; }

@media (prefers-reduced-motion: reduce){
  .jh-mobile__overlay, .jh-mobile__inner{ transition: none; }
}


/* ---- Burgerknop wordt een kruisje ---- */

.jh-burger{
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.jh-burger span{
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #1e2a17;
  transition: transform .22s ease, opacity .18s ease;
}

.jh-burger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.jh-burger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.jh-burger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* De knop moet boven de menulade blijven, anders is hij niet meer aan te
   klikken om te sluiten. */
.jh-burger{ position: relative; z-index: 100001; }


/* ==================================================================
   Mobiel menu: volledige opmaak
   ================================================================== */

.jh-mobile__inner{
  width: min(92vw, 400px);
  padding: 0 0 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* ---- Kop met sluitknop ---- */

.jh-mobile__kop{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  background: #fff;
}

.jh-mobile__titel{
  font-size: 17px;
  font-weight: 800;
  color: #1e2a17;
}

.jh-mobile__sluit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #f0f3ed;
  color: #1e2a17;
  cursor: pointer;
  transition: background .15s ease;
}

.jh-mobile__sluit:hover{ background: #e6ebe0; }

/* ---- Account ---- */

.jh-mobile__account{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f5f8f1;
  text-decoration: none !important;
}

.jh-mobile__accicon{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  color: #476930;
}

.jh-mobile__acctxt{ display: flex; flex-direction: column; min-width: 0; }
.jh-mobile__acctxt strong{ font-size: 15px; color: #1e2a17; line-height: 1.2; }
.jh-mobile__acctxt small{ font-size: 12.5px; color: #5f6b57; }

/* ---- Snelknoppen ---- */

.jh-mobile__snel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 14px 16px;
}

.jh-mobile__snelknop{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f0f3ed;
  color: #1e2a17 !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
}

.jh-mobile__snelknop svg{ color: #476930; flex: 0 0 19px; }
.jh-mobile__snelknop:hover{ background: #e6ebe0; }

.jh-mobile__snelknop .jh-badge{
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #476930;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Hoofdmenu ---- */

.jh-mobile__nav{ margin: 0 14px 8px; }

.jh-mobilemenu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jh-mobilemenu a{
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1e2a17;
  text-decoration: none;
}

.jh-mobilemenu a:hover{ background: #f5f8f1; color: #476930; }

/* ---- Kopjes ---- */

.jh-mobile__kopje{
  display: block;
  margin: 14px 14px 6px;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a9486;
}

/* ---- Categorieen ---- */

.jh-mobile__catlijst{
  list-style: none;
  margin: 0 14px;
  padding: 0;
}

.jh-mobile__catrij{
  display: flex;
  align-items: center;
  gap: 4px;
}

.jh-mobile__catrij > a{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  color: #1e2a17;
  text-decoration: none;
  min-width: 0;
}

.jh-mobile__catrij > a:hover{ background: #f5f8f1; color: #476930; }

.jh-mobile__aantal{
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a9486;
  background: #f0f3ed;
  border-radius: 999px;
  padding: 2px 8px;
}

.jh-mobile__uitklap{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5f6b57;
  cursor: pointer;
  transition: transform .18s ease, background .15s ease;
}

.jh-mobile__uitklap:hover{ background: #f0f3ed; }
.jh-mobile__cat.is-open .jh-mobile__uitklap{ transform: rotate(180deg); }

.jh-mobile__sub{
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 12px;
}

.jh-mobile__sub a{
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #5f6b57;
  text-decoration: none;
}

.jh-mobile__sub a:hover{ background: #f5f8f1; color: #476930; }

/* ---- Contact ---- */

.jh-mobile__contact{
  margin-top: 8px;
  padding: 0 14px;
}

.jh-mobile__contact a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e2a17;
  text-decoration: none;
}

.jh-mobile__contact a svg{ color: #476930; flex: 0 0 17px; }
.jh-mobile__contact a:hover{ background: #f5f8f1; }


/* ==================================================================
   Knop naar de oude webshop

   Tijdelijk, zolang klanten nog moeten wennen aan de nieuwe omgeving.
   Weghalen kan later door het blok in header.php te verwijderen.
   ================================================================== */

.jh-hotline{
  display: flex;
  align-items: center;
  gap: 14px;
}

.jh-oudeshop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s ease;
}

.jh-oudeshop:hover{ background: rgba(255,255,255,.24); }
.jh-oudeshop svg{ flex: 0 0 16px; opacity: .9; }

/* Op smallere schermen alleen de tekst korter, de knop blijft bereikbaar. */
@media (max-width: 1100px){
  .jh-oudeshop span{ display: none; }
  .jh-oudeshop{ padding: 8px 10px; }
  .jh-oudeshop::after{ content: "Oude webshop"; font-size: 13px; }
}

/* In de mobiele lade staat hij als gewone regel, zie header.php. */
@media (max-width: 900px){
  .jh-navrow .jh-oudeshop{ display: none; }
}