/* Absplit menu versie B. Alle regels beginnen met #menu-b zodat ze niet door css_blue.css overschreven worden. */

#menu-b {
	clear: both;
	background: #fff;
	color: #12324f;
	text-align: left;
	font-size: 16px;
	line-height: 1.3;
}
#menu-b ul, #menu-b li { list-style: none; margin: 0; padding: 0; float: none; width: auto; display: block; }
#menu-b a { text-decoration: none; color: inherit; }

/* ---------- Mobiel: gestapelde schermen ---------- */
@media screen and (max-width: 767px) {
	#menu-b { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 998; min-height: calc(100vh - 150px); max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-sizing: border-box; background: #fff;
		/* wit vlak tot onder het menu, zodat de pagina eronder nooit zichtbaar is (alleen naar beneden, niet naar links/rechts/boven) */
		box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 0 -100vmax 0); }
	#main-menu-state:checked ~ #menu-b { display: block; }

	#menu-b .menub-link {
		display: flex; align-items: center; gap: 14px; box-sizing: border-box; min-height: 56px;
		padding: 6px 16px; font-size: 17px; font-weight: 600; color: #12324f; border-bottom: 1px solid #eef1f4; cursor: pointer;
	}
	#menu-b .menub-thumb { flex: none; width: 44px; height: 44px; max-width: 44px; max-height: 44px; border-radius: 8px; object-fit: cover; background: #eef3f8; }
	#menu-b .menub-chev { margin-left: auto; width: 10px; height: 10px; border-top: 2px solid #99a3b0; border-right: 2px solid #99a3b0; transform: rotate(45deg); flex: none; }

	/* een geopend item toont alleen zijn eigen paneel */
	#menu-b .menub-list.has-open > .menub-item:not(.is-open) { display: none; }
	#menu-b .menub-item.is-open > .menub-link { display: none; }
	#menu-b .menub-top.has-open ~ .menub-basket { display: none; }
	#menu-b .menub-panel { display: none; }
	#menu-b .menub-item.is-open > .menub-panel { display: block; }
	/* een geopend onderliggend scherm vervangt kop, "Bekijk alles" en advies van het vorige scherm */
	#menu-b .menub-panel.sub-open > .menub-head,
	#menu-b .menub-panel.sub-open > .menub-all,
	#menu-b .menub-panel.sub-open > .wizard { display: none; }

	#menu-b .menub-head { padding: 12px 16px 4px; }
	#menu-b .menub-back {
		display: block; margin: 0 0 6px; padding: 8px 0; border: 0; background: none; cursor: pointer;
		color: #198ddb; font: inherit; font-size: 15px; font-weight: 600;
	}
	#menu-b .menub-back::before { content: "\2039\00a0"; font-size: 20px; }
	#menu-b .menub-title { display: block; font-size: 22px; font-weight: 700; }
	#menu-b .menub-all {
		display: block; margin: 8px 16px 10px; padding: 12px 16px; border-radius: 24px; text-align: center;
		background: #ffc800; color: #12324f; font-weight: 600;
	}
	#menu-b .menub-all::after { content: "\00a0\2192"; }
	#menu-b .menub-l3 > .menub-link { font-size: 16px; font-weight: 400; min-height: 48px; padding-left: 20px; }
	#menu-b .wizard { margin: 12px 16px; width: auto; }
	#menu-b .menub-basket a { display: block; padding: 16px; font-weight: 600; color: #198ddb; }
}

/* ---------- Desktop / tablet ---------- */
@media screen and (min-width: 768px) {
	#menu-b { display: block; background: transparent; }
	#menu-b .menub-top { display: flex; flex-wrap: wrap; justify-content: center; }
	#menu-b .menub-top > .menub-item { position: static; display: block; }
	#menu-b .menub-top > .menub-item > .menub-link {
		display: block; padding: 9px 16px; font-size: 16px; font-weight: 400; color: #fff; border: 0; cursor: pointer;
	}
	#menu-b .menub-top > .menub-item:hover > .menub-link,
	#menu-b .menub-top > .menub-item:focus-within > .menub-link,
	#menu-b .menub-top > .menub-item.is-open > .menub-link { background: #0f6fb5; }
	#menu-b .menub-l1 > .menub-link .menub-thumb,
	#menu-b .menub-chev, #menu-b .menub-back, #menu-b .menub-basket { display: none; }

	/* mega-paneel onder de balk */
	#menu-b .menub-l1 > .menub-panel {
		display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1000; box-sizing: border-box;
		max-width: 1400px; padding: 18px 24px 22px; background: #fff; color: #12324f;
		box-shadow: 0 12px 30px rgba(0, 0, 0, .25); border-radius: 0 0 10px 10px;
	}
	#menu-b .menub-l1:hover > .menub-panel,
	#menu-b .menub-l1:focus-within > .menub-panel,
	#menu-b .menub-l1.is-open > .menub-panel { display: block; }
	#menu-b .menub-l1 > .menub-panel > .menub-head { padding: 0 0 12px; }
	#menu-b .menub-l1 > .menub-panel > .menub-head .menub-title { font-size: 20px; font-weight: 700; }
	#menu-b .menub-l1 > .menub-panel > .menub-all {
		position: absolute; top: 16px; right: 24px; padding: 6px 16px; border-radius: 20px;
		background: #ffc800; font-size: 14px; font-weight: 600;
	}
	#menu-b .menub-l1 > .menub-panel > .menub-all::after { content: "\00a0\2192"; }

	/* twee panelen: links de subgroepen (met thumbnail), rechts de artikelgroepen van de actieve subgroep */
	#menu-b .menub-l1 > .menub-panel > .menub-list { position: relative; min-height: 280px; }
	#menu-b .menub-l1 > .menub-panel > .menub-two { display: grid; grid-auto-flow: column; grid-auto-columns: 290px; column-gap: 12px; align-content: start; }
	#menu-b .menub-two > .menub-l2 > .menub-panel { left: 624px; }
	#menu-b .menub-l2 { position: static; }
	#menu-b .menub-l2 > .menub-link {
		display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 290px; min-height: 52px; margin: 0 0 2px; padding: 5px 10px;
		font-size: 15px; font-weight: 600; color: #12324f; border-radius: 8px; cursor: pointer;
	}
	#menu-b .menub-l2.is-active > .menub-link,
	#menu-b .menub-l2.is-open > .menub-link { background: #eaf5ff; color: #198ddb; }
	#menu-b .menub-l2 > .menub-link .menub-chev { display: block; margin-left: auto; width: 8px; height: 8px; border-top: 2px solid #99a3b0; border-right: 2px solid #99a3b0; transform: rotate(45deg); flex: none; }
	#menu-b .menub-thumb { flex: none; width: 40px; height: 40px; max-width: 40px; max-height: 40px; border-radius: 8px; object-fit: cover; background: #eef3f8; }

	#menu-b .menub-l2 > .menub-panel {
		display: none; position: absolute; top: 0; bottom: 0; left: 310px; right: 0; box-sizing: border-box; overflow-y: auto;
		padding: 0 0 0 28px; border-left: 1px solid #e8edf2;
	}
	#menu-b .menub-l2.is-active > .menub-panel,
	#menu-b .menub-l2.is-open > .menub-panel { display: block; }
	#menu-b .menub-l2 > .menub-panel > .menub-head { padding: 4px 0 10px; }
	#menu-b .menub-l2 > .menub-panel > .menub-head .menub-title { font-size: 18px; font-weight: 700; }
	#menu-b .menub-l2 > .menub-panel > .menub-all { position: absolute; top: 6px; right: 0; padding: 0; background: none; color: #198ddb; font-size: 14px; font-weight: 600; }
	#menu-b .menub-l2 > .menub-panel > .menub-all::after { content: "\00a0\2192"; }
	#menu-b .menub-l2 > .menub-panel > .menub-list { column-count: 3; column-gap: 24px; }
	#menu-b .menub-l3 { break-inside: avoid; }
	#menu-b .menub-l3 > .menub-link { display: block; padding: 4px 0; font-size: 14px; font-weight: 400; color: #334155; }
	#menu-b .menub-l3 > .menub-link:hover { color: #198ddb; text-decoration: underline; }
	#menu-b .wizard { margin-top: 18px; }
}


/* =====================================================================
   Nieuwe, lagere header (alleen variant B): hamburger links, logo in het midden,
   account- en winkelwagenknop rechts, daaronder het zoekveld.
   De header-achtergrond is gelijk aan de achtergrondkleur van g/logo-wide-small.png (#1595E4).
   Veel regels hebben !important omdat de basket/account-HTML inline styles meebrengt.
   ===================================================================== */

#mainheader, #topmenu, .main-nav, .main-nav-sub { background-color: #1595e4; }
#mainheader { position: relative; }

/* logo: g/logo-header.png is voorverkleind (664x150, transparant, ruim 3x de getoonde grootte) zodat de dunne lijnen scherp blijven */
#header .logo {
	--logo-h: 44px;
	float: none; flex: none; margin: 0; z-index: 2;
	height: var(--logo-h); width: calc(var(--logo-h) * 4.4267);
	background: url('/g/logo-header.png') no-repeat center / contain;
}
#header .logo a { display: block; width: 100%; height: 100%; }
#header .logo2 { display: none; }

/* zoekformulier */
#header #search3 form > div {
	display: flex; align-items: stretch; box-sizing: border-box; height: 46px; background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
#header #search3 form > div:focus-within { box-shadow: 0 0 0 3px rgba(255, 200, 0, .75); }
#header #search3 form > div { position: relative; }
#header #search3 form > div::before {
	content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; z-index: 1; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312324f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#header #search3 .searchbox {
	float: none; flex: 1 1 auto; min-width: 0; width: auto; max-width: none; height: 46px; margin: 0; box-sizing: border-box;
	padding: 0 12px 0 46px; border: 0; border-radius: 0; outline: 0; font-size: 16px; color: #12324f; background: transparent;
}
#header #search3 .searchbutton {
	float: none; flex: none; width: auto; max-width: none; min-width: 104px; height: 46px; margin: 0; padding: 0 22px; border: 0; border-radius: 0;
	background-color: #ffc800; color: #12324f; font-size: 17px; font-weight: 700; cursor: pointer;
}
#header #search3 .searchbutton:hover { background-color: #ffd21f; }

/* account- en winkelwagenknop (HTML komt uit de basket-code met inline styles, vandaar !important) */
#header #menutop {
	float: none !important; position: static !important; flex: none; width: auto !important; min-width: 0 !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0;
}
#header #menutop, #header #menutop2, #header #menutop_winkelwagenb { height: auto !important; }
#header #menutop2, #header #menutop_winkelwagenb { width: auto !important; margin: 0 !important; float: none !important; }
#header #menutop_winkelwagenb > div { display: flex !important; gap: 12px; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; }
#header #menutop_winkelwagenb > div > div {
	float: none !important; position: relative; width: 44px !important; height: 44px; margin: 0 !important;
	background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
/* de oude icoontjes (g/account.png, g/basket.png) zijn klein en worden onscherp als ze groter getoond worden. Daarom tekenen we scherpe SVG-icoontjes als achtergrond;
   het <img> blijft (onzichtbaar) over de hele knop liggen zodat de alt-tekst en het klikvlak blijven werken. */
#header #menutop_winkelwagenb a {
	position: relative; display: block; width: 100%; height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312324f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") no-repeat center / 28px 28px;
}
#header #menutop_winkelwagenb a[href*="/afrekenen"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312324f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h3l2.2 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7.5H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E");
}
#header #menutop_winkelwagenb img { position: absolute; top: 0; left: 0; float: none !important; width: 100%; height: 100%; margin: 0; opacity: 0; }
#header #menutop_winkelwagenb span {
	position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important;
	min-width: 20px; height: 20px !important; width: auto !important; padding: 0 4px; box-sizing: border-box; font-size: 12px; line-height: 1;
}

/* gratis-verzending-regel onder het zoekveld (alleen zichtbaar vanaf 1024px). Absoluut gepositioneerd, zodat hij het zoekblok niet hoger maakt
   en de icoontjes rechts exact op dezelfde hoogte als het zoekveld uitlijnen. */
#header #search { position: relative; }
#header #header_usp { position: absolute; top: 100%; left: 0; float: none; width: auto; margin: 4px 0 0; font-size: 12px; line-height: 14px; white-space: nowrap; color: rgba(255, 255, 255, .92); }
#header #header_usp span { margin: 0; }

/* ---------- Mobiel: twee rijen ---------- */
@media screen and (max-width: 767px) {
	#mainheader { border-radius: 0 0 16px 16px; }
	#header { height: auto !important; position: relative !important; float: none; }
	/* rij 1: hamburger, logo en icoontjes, alle drie 40px hoog en even ver van de rand; rij 2: zoekveld */
	#header > div {
		display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "burger logo icons" "search search search";
		align-items: center; column-gap: 12px; row-gap: 20px; box-sizing: border-box; padding: 14px 16px 16px;
	}
	#header .logo { --logo-h: 40px; grid-area: logo; justify-self: center; }
	#header #menutop { grid-area: icons; }
	#header #search { grid-area: search; float: none; width: 100% !important; min-width: 0; margin: 0 !important; position: static; }
	#header #search3 form > div, #header #search3 .searchbox, #header #search3 .searchbutton { height: 44px; }
	#header #menutop_winkelwagenb > div { gap: 10px; }
	#header #menutop_winkelwagenb > div > div { width: 40px !important; height: 40px; }
	#header #menutop_winkelwagenb a { background-size: 24px 24px; }

	/* hamburger links in de eerste rij */
	#topmenu { position: static !important; float: none; width: auto; height: 0; background: transparent; }
	.main-nav, .main-nav-sub { position: static; background: transparent; }
	.main-menu-btn {
		position: absolute !important; top: 14px; left: 9px; z-index: 999; float: none; margin: 0; width: 40px; height: 40px;
	}
	.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after { left: 7px; width: 26px; height: 3px; border-radius: 2px; }
	.main-menu-btn-icon:before { left: 0; top: -8px; }
	.main-menu-btn-icon:after { left: 0; top: 8px; }
	#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before,
	#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { top: 0; }
}

/* ---------- Desktop / tablet: één rij + menubalk ---------- */
@media screen and (min-width: 768px) {
	#header { height: auto !important; }
	#header > div { display: flex; align-items: center; gap: 40px; box-sizing: border-box; padding: 10px 16px 20px; }
	#header .logo { --logo-h: 52px; }
	#header #search { float: none; flex: 1 1 auto; min-width: 0; max-width: 700px; width: auto !important; margin: 0 !important; }
	#header #menutop { margin-left: auto !important; }
	#topmenu { border-top: 0; }
	#menu-b .menub-top > .menub-item > .menub-link { padding: 10px 16px; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#header > div { gap: 24px; }
}