/* =========================================================================
   Macrolux header — getrouw aan Figma (node 1:158)
   Kleuren komen via CSS-variabelen uit de ACF thema-opties.
   ========================================================================= */

.ml-header {
	--ml-primary: #ff6600;
	--ml-text: #1d1d1b;
	--ml-nav-text: #333333;
	--ml-badge: #1e417c;
	--ml-gradient-from: #e5dcdc;
	--ml-border: #e9e9e9;
	--ml-radius: 15px;

	position: relative;
	z-index: 100;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: linear-gradient(180deg, var(--ml-gradient-from) 0%, #ffffff 78%);
	color: var(--ml-text);
	-webkit-font-smoothing: antialiased;
}

/* De Kava/ProStore masthead-wrapper neutraliseren zodat onze full-bleed
   header werkt (de header rendert binnen <header id="masthead">). */
#masthead.site-header:has(.ml-header),
.site-header:has(.ml-header) {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.ml-container {
	width: min(1400px, 100% - 40px);
	margin-inline: auto;
}

.ml-header * {
	box-sizing: border-box;
}

.ml-header a {
	text-decoration: none;
	color: inherit;
}

/* ---------- USP / topbalk ------------------------------------------------ */
.ml-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 52px;
	padding-block: 8px;
}

.ml-usps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-usp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 1.2;
	color: var(--ml-text);
}

.ml-usp__icon {
	display: inline-flex;
	color: var(--ml-primary);
}

.ml-usp__icon .ml-icon {
	width: 18px;
	height: 18px;
}

.ml-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-nav-text);
	white-space: nowrap;
}

.ml-topbar__phone-icon .ml-icon {
	width: 22px;
	height: 22px;
}

/* ---------- Hoofdnavigatie (witte card) --------------------------------- */
.ml-nav-wrap {
	padding-bottom: 22px;
}

.ml-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 80px;
	padding: 0 25px;
	background: #ffffff;
	border-radius: var(--ml-radius);
	box-shadow: 0 6px 24px rgba(29, 29, 27, 0.06);
}

.ml-nav__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.ml-nav__logo img {
	display: block;
	height: auto;
	width: auto;
}

/* Menu */
.ml-menu {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-menu__item {
	position: relative;
}

.ml-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-nav-text);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.ml-menu__item:hover > .ml-menu__link,
.ml-menu__item:focus-within > .ml-menu__link {
	color: var(--ml-primary);
}

.ml-menu__caret .ml-icon {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.ml-menu__item:hover .ml-menu__caret .ml-icon {
	transform: rotate(180deg);
}

.ml-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	/* Extra padding onderaan zet de tekst optisch in het midden
	   (Open Sans hangt anders net iets te laag). */
	padding: 0 7px 2px;
	border-radius: 5px;
	background: var(--ml-badge);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2px;
}

/* Dropdown */
.ml-submenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ml-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(29, 29, 27, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 20;
}

.ml-menu__item:hover > .ml-submenu,
.ml-menu__item:focus-within > .ml-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ml-submenu li a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ml-nav-text);
	transition: background 0.15s ease, color 0.15s ease;
}

.ml-submenu li a:hover {
	background: #f6f6f6;
	color: var(--ml-primary);
}

/* Acties rechts */
.ml-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 25px;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.ml-btn--primary {
	background: var(--ml-primary);
	color: #fff;
}

/* CTA-tekst wit houden (anders wint `.ml-header a { color: inherit }`). */
.ml-header .ml-btn--primary {
	color: #fff;
}

.ml-btn--primary:hover {
	filter: brightness(0.93);
}

.ml-btn--primary:active {
	transform: translateY(1px);
}

.ml-iconbtn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid var(--ml-border);
	color: var(--ml-text);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ml-iconbtn:hover {
	border-color: var(--ml-primary);
	color: var(--ml-primary);
}

.ml-iconbtn .ml-icon {
	width: 24px;
	height: 24px;
}

.ml-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	border-radius: 99px;
	background: var(--ml-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Burger (mobiel/tablet) */
.ml-burger {
	display: none;
}

/* Zelfde look als de zoek- en winkelmandknop; extra specificiteit (button.)
   neutraliseert de knop-padding en blauwe hover van het thema, zodat het
   icoon strak centreert. Geen display hier: het mediaquery zet 'm op grid. */
.ml-burger,
button.ml-burger {
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0 !important;
	margin: 0;
	border-radius: 5px;
	background: #fff;
	border: 1px solid var(--ml-border);
	color: var(--ml-text);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ml-burger:hover,
.ml-burger:focus,
button.ml-burger:hover,
button.ml-burger:focus {
	background: #fff !important;
	color: var(--ml-primary, #ff6600) !important;
	border-color: var(--ml-primary, #ff6600) !important;
	box-shadow: none;
	outline: none;
}

/* Let op: geen display hier — .ml-burger__open/__close regelen zelf
   welk icoon zichtbaar is (menu of kruis). */
.ml-burger .ml-icon {
	width: 26px;
	height: 26px;
}

.ml-burger__close {
	display: none;
}

.ml-burger.is-open .ml-burger__open {
	display: none;
}

.ml-burger.is-open .ml-burger__close {
	display: block;
}

/* ---------- Sticky ------------------------------------------------------- */
.ml-header.is-sticky.ml-stuck .ml-nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	margin-top: 0; /* wint van de 10px margin-top onder 1300px */
	padding: 8px 0;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 16px rgba(29, 29, 27, 0.1);
	/* De balk schuift van boven het scherm in, zodat het vastklikken
	   niet abrupt aanvoelt. */
	animation: ml-nav-slide-in 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes ml-nav-slide-in {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

/* In de sticky balk heeft de zoekbalk geen eigen witte kaart nodig:
   de balk zelf is al wit met blur. Extra ruimte onder het invoerveld. */
.ml-header.is-sticky.ml-stuck .ml-search-bar__form {
	margin-top: 12px;
	padding: 0 0 20px;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.ml-header.is-sticky.ml-stuck .ml-nav {
	box-shadow: none;
	border-radius: 0;
	background: transparent;
}

/* ---------- Mobiel menu -------------------------------------------------- */
.ml-mobile {
	display: none;
	padding: 12px 20px 24px;
	background: #fff;
	border-top: 1px solid var(--ml-border);
}

/* Open menu hangt fixed onder de navigatie, zodat het in beeld blijft;
   de pagina erachter staat dan op slot (html.ml-menu-open). De top-waarde
   wordt door JS gezet op de onderkant van de navigatiebalk. */
.ml-mobile.is-open {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 12px 24px rgba(29, 29, 27, 0.12);
	/* Animatie speelt vanzelf af zodra het panel zichtbaar wordt. */
	animation: ml-mobile-in 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes ml-mobile-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

html.ml-menu-open,
html.ml-menu-open body {
	overflow: hidden;
}

/* Kava's scroll-to-top knop hoort onder het open menu te blijven. */
#toTop {
	z-index: 900 !important;
}

html.ml-menu-open #toTop {
	display: none !important;
}

.ml-mobile__menu,
.ml-mobile__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-mobile__item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ml-nav-text);
	border-bottom: 1px solid #f0f0f0;
}

.ml-mobile__sub {
	padding: 4px 0 8px 14px;
}

.ml-mobile__sub li a {
	display: block;
	padding: 8px 4px;
	font-size: 14px;
	color: var(--ml-nav-text);
}

.ml-mobile__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-weight: 600;
	color: var(--ml-primary);
}

.ml-mobile__phone .ml-icon {
	width: 22px;
	height: 22px;
}

/* Keuzehulp-CTA onderaan het uitgeklapte menu, over de volle breedte. */
.ml-mobile__cta,
.ml-header .ml-mobile__cta {
	display: flex;
	width: 100%;
	margin-top: 30px;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1300px) {
	.ml-menu {
		display: none;
	}
	.ml-burger {
		display: grid;
	}
	.ml-nav {
		justify-content: space-between;
	}
	.ml-nav-wrap {
		margin-top: 10px;
	}
}

@media (max-width: 768px) {
	.ml-usps {
		display: none;
	}
	.ml-topbar__inner {
		justify-content: center;
	}
	.ml-nav-wrap {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.ml-actions__cta {
		display: none;
	}
	.ml-nav {
		padding: 0 14px;
		gap: 10px;
	}
	/* button.-varianten erbij: anders wint de bredere basisregel (50px). */
	.ml-iconbtn,
	.ml-burger,
	button.ml-burger {
		width: 44px;
		height: 44px;
	}
	.ml-iconbtn .ml-icon,
	button.ml-search__toggle .ml-icon {
		width: 20px;
		height: 20px;
	}
	.ml-burger .ml-icon {
		width: 22px;
		height: 22px;
	}
}

/* ---------- Checkout-header: versimpeld, zonder menu -------------------- */
.ml-nav--checkout {
	justify-content: space-between;
}

.ml-checkout-actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ml-checkout-back {
	font-size: 14px;
	font-weight: 600;
	color: rgba(29, 29, 27, 0.6);
	text-decoration: none;
	white-space: nowrap;
}

.ml-checkout-back:hover {
	color: var(--ml-primary, #ff6600);
}

.ml-checkout-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #1d1d1b;
	text-decoration: none;
	white-space: nowrap;
}

.ml-checkout-phone__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.ml-checkout-phone:hover {
	color: var(--ml-primary, #ff6600);
}

.ml-secure-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 30px;
	background: rgba(46, 158, 91, 0.1);
	color: #2e9e5b;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.ml-secure-pill svg {
	width: 14px;
	height: 14px;
	display: block;
}

@media (max-width: 700px) {
	.ml-checkout-phone {
		display: none;
	}
}

@media (max-width: 520px) {
	.ml-secure-pill {
		display: none;
	}
}

/* ---------- Full-width zoekbalk onderaan de header ----------------------- */

/* Toggle is een <button>: browser/thema-knopstijlen neutraliseren zodat
   het icoon exact gecentreerd staat (zelfde look als de cart-knop). */
button.ml-search__toggle {
	display: inline-grid;
	place-items: center;
	padding: 0 !important;
	margin: 0;
	line-height: 1;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

button.ml-search__toggle .ml-icon {
	width: 24px;
	height: 24px;
	display: block;
}

/* Thema kleurt <button>:hover donkerblauw — witte knop met oranje accent houden */
button.ml-search__toggle:hover,
button.ml-search__toggle:focus,
button.ml-search__toggle:active {
	background: #fff !important;
	color: var(--ml-primary, #ff6600) !important;
	border-color: var(--ml-primary, #ff6600) !important;
	box-shadow: none;
	outline: none;
}

button.ml-search__toggle.is-open {
	color: var(--ml-primary, #ff6600) !important;
	border-color: var(--ml-primary, #ff6600) !important;
}

/* Balk klapt soepel uit onder de navigatie (0fr -> 1fr grid-truc). */
.ml-search-bar {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		grid-template-rows 0.45s cubic-bezier(0.33, 1, 0.68, 1),
		opacity 0.3s ease,
		transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.ml-search-bar.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
}

.ml-search-bar__clip {
	min-height: 0;
	overflow: hidden;
}

.ml-search-bar__form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px;
	background: #fff;
	border-radius: var(--ml-radius, 15px);
	box-shadow: 0 6px 24px rgba(29, 29, 27, 0.06);
}

.ml-search-bar__field {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--ml-border, #e9e9e9);
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ml-search-bar__field:focus-within {
	border-color: rgba(29, 29, 27, 0.55);
}

.ml-search-bar__icon {
	display: inline-flex;
	color: rgba(29, 29, 27, 0.4);
}

.ml-search-bar__icon .ml-icon {
	width: 20px;
	height: 20px;
}

.ml-search-bar__input,
input.ml-search-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	padding: 0 !important;
	margin: 0;
	background: transparent !important;
	font-family: inherit;
	font-size: 15px;
	color: #1d1d1b;
	outline: none !important;
	box-shadow: none !important;
}

.ml-search-bar__input::placeholder {
	color: rgba(29, 29, 27, 0.4);
}

/* Zwarte knop in de stijl van de keuzehulp-CTA. */
.ml-btn--dark,
.ml-header .ml-btn--dark,
button.ml-search-bar__submit {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #1d1d1b;
	color: #fff;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
	transition: background 0.25s ease;
}

.ml-search-bar__submit-icon {
	display: inline-flex;
}

.ml-search-bar__submit-icon .ml-icon {
	width: 18px;
	height: 18px;
	display: block;
}

.ml-btn--dark:hover,
.ml-header .ml-btn--dark:hover,
button.ml-search-bar__submit:hover {
	background: #3a3a37;
	color: #fff;
	filter: none;
}

/* ---------- Topbalk rechts: verzending, btw-schakelaar, telefoon -------- */
.ml-topbar__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ml-topbar__btw {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ml-topbar__btw-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ml-nav-text);
	white-space: nowrap;
}

/* Compacte variant van de segmentschakelaar uit het homeblok. */
.ml-seg--topbar {
	padding: 3px;
}

.ml-seg--topbar .ml-seg__btn,
.ml-seg--topbar button.ml-seg__btn {
	padding: 5px 12px;
	font-size: 13px;
}

.ml-seg--topbar::before {
	top: 3px;
	left: 3px;
	width: calc(50% - 3px);
	height: calc(100% - 6px);
}

/* Gratis verzending vanaf, in de topbalk. */
.ml-verzending-promo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ml-nav-text);
	white-space: nowrap;
}

.ml-verzending-promo .ml-icon {
	width: 18px;
	height: 18px;
	color: var(--ml-primary, #ff6600);
}

@media (max-width: 1100px) {
	.ml-verzending-promo__text {
		display: none;
	}
}

@media (max-width: 900px) {
	.ml-topbar__right {
		gap: 12px;
	}
	.ml-topbar__btw-label {
		display: none;
	}
}

@media (max-width: 560px) {
	.ml-topbar__right {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* ---------- Topbalk op één regel houden ---------------------------------
   De USP's staan links, rechts komen verzending, btw-schakelaar en telefoon
   erbij. Alles compacter en niet afbreken, en bij minder ruimte vallen de
   minst belangrijke USP's als eerste weg. Alleen in de topbalk: de USP-strip
   in de footer blijft zoals hij is. */
.ml-topbar__inner {
	gap: 16px;
	flex-wrap: nowrap;
}

.ml-topbar .ml-usps {
	flex: 0 1 auto;
	flex-wrap: nowrap;
	gap: 6px 18px;
	min-width: 0;
}

.ml-topbar .ml-usp {
	font-size: 13px;
	gap: 6px;
	white-space: nowrap;
}

.ml-topbar .ml-usp__icon .ml-icon {
	width: 16px;
	height: 16px;
}

.ml-topbar__right {
	flex: 0 0 auto;
	gap: 16px;
}

.ml-topbar__phone {
	font-size: 14px;
}

.ml-topbar__phone-icon .ml-icon {
	width: 19px;
	height: 19px;
}

/* Minder ruimte: USP's van achter naar voren laten vallen, zodat de balk
   nooit een tweede regel nodig heeft. */
@media (max-width: 1440px) {
	.ml-topbar .ml-usp:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 1300px) {
	.ml-topbar .ml-usp:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 1150px) {
	.ml-topbar .ml-usp:nth-child(n + 3) {
		display: none;
	}
}

@media (max-width: 1000px) {
	.ml-topbar .ml-usp:nth-child(n + 2) {
		display: none;
	}
}

@media (max-width: 820px) {
	.ml-topbar .ml-usps {
		display: none;
	}
}