.wkheader {
	--wkheader-accent: #e8836a;
	--wkheader-text: #3f4a5a;
	--wkheader-heading: #b0475f;
	--wkheader-border: #ececec;
	background: #fff;
	font-family: inherit;
	position: relative;
	z-index: 900;
}

.wkheader.is-sticky {
	position: sticky;
	top: 0;
}

/* Achtergrond-scroll blokkeren als de mobiele drawer open is */
.wkheader-noscroll {
	overflow: hidden;
}

.wkheader * {
	box-sizing: border-box;
}

/* ---------- Bovenste balk ---------- */
.wkheader-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 24px;
}

.wkheader-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.wkheader .wkheader-logo img {
	height: 46px !important;
	width: auto !important;
	max-width: 260px;
	display: block;
}

.wkheader-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 520px;
	margin: 0 auto;
}

/* de zoekbalk zelf komt uit [wk_product_search]; hier alleen breedte resetten */
.wkheader-search .wksearch {
	max-width: none;
}

.wkheader-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.wkheader-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--wkheader-text);
	background: #f4f5f6;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.wkheader-icon:hover {
	background: #ececef;
	color: #1d1d1f;
}

.wkheader-icon svg {
	width: 22px;
	height: 22px;
}

.wkheader-cart {
	background: var(--wkheader-accent);
	color: #fff;
}

.wkheader-cart:hover {
	background: #df6f54;
	color: #fff;
}

.wkheader-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #2f3542;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.wkheader-cart-count.is-empty {
	display: none;
}

/* ---------- Navigatie ---------- */
.wkheader-nav {
	border-top: 1px solid var(--wkheader-border);
}

.wkheader-menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 24px;
	list-style: none;
}

.wkheader-item {
	position: static;
}

/* Gewone dropdown hangt onder z'n eigen item; mega blijft volle breedte. */
.wkheader-item.has-dropdown {
	position: relative;
}

.wkheader-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
	color: var(--wkheader-text);
	font-weight: 600;
	font-size: 0.98em;
	text-decoration: none;
	transition: color 0.15s ease;
}

.wkheader-link:hover {
	color: var(--wkheader-accent);
}

/* Zwarte "Alle krukken"-knop met hamburger, links */
.wkheader .wkheader-link--mega,
.wkheader .wkheader-link--mega:hover,
.wkheader .wkheader-link--mega:focus {
	background: #1d1d1f;
	color: #fff !important;
	border-radius: 999px;
	padding: 11px 20px;
	margin-right: 14px;
}

.wkheader .wkheader-link--mega:hover {
	background: #000;
}

.wkheader-menu-icon {
	width: 18px;
	height: 16px;
}

.wkheader-item.is-outlet .wkheader-link {
	color: var(--wkheader-accent);
}

.wkheader-caret {
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}

.wkheader-item.has-mega:hover .wkheader-caret,
.wkheader-item.has-dropdown:hover .wkheader-caret,
.wkheader-item.is-open .wkheader-caret {
	transform: rotate(180deg);
}

/* ---------- Gewone dropdown ---------- */
.wkheader-dropdown {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	min-width: 200px;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wkheader-border);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 20;
}

.wkheader-dropdown a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--wkheader-text);
	text-decoration: none;
	font-size: 0.92em;
}

.wkheader-dropdown a:hover {
	background: #f6f7f8;
	color: var(--wkheader-accent);
}

.wkheader-item.has-dropdown:hover .wkheader-dropdown,
.wkheader-item.has-dropdown.is-open .wkheader-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---------- Mega-menu ---------- */
.wkheader-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--wkheader-border);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 15;
}

.wkheader-item.has-mega:hover .wkheader-mega,
.wkheader-item.has-mega.is-open .wkheader-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wkheader-mega-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px 40px;
}

.wkheader-mega-heading {
	display: block;
	margin-bottom: 14px;
	color: var(--wkheader-heading);
	font-size: 1.15em;
	font-weight: 700;
	text-decoration: none;
}

a.wkheader-mega-heading:hover {
	text-decoration: underline;
}

.wkheader-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wkheader-mega-links li {
	margin: 0 0 8px;
}

.wkheader-mega-link {
	color: var(--wkheader-text);
	text-decoration: none;
	font-size: 0.96em;
	transition: color 0.15s ease;
}

.wkheader-mega-link:hover {
	color: var(--wkheader-accent);
}

.wkheader-mega-link.is-heading {
	color: var(--wkheader-heading);
	font-weight: 700;
}

/* ---------- Hamburger + overlay ---------- */
.wkheader-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.wkheader-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--wkheader-text);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wkheader.is-open .wkheader-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.wkheader.is-open .wkheader-burger span:nth-child(2) {
	opacity: 0;
}
.wkheader.is-open .wkheader-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.wkheader-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 899;
}

/* ---------- Tablet / kleinere desktop ---------- */
@media (max-width: 1100px) {
	.wkheader-bar {
		gap: 16px;
		padding: 12px 18px;
	}

	.wkheader .wkheader-logo img {
		height: 40px !important;
	}

	.wkheader-search {
		max-width: 380px;
	}

	.wkheader-link {
		padding: 12px 10px;
		font-size: 0.92em;
	}

	.wkheader-mega-inner {
		gap: 20px;
		padding: 26px 18px 32px;
	}
}

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
	.wkheader-burger {
		display: flex;
		order: -1;
	}

	.wkheader-bar {
		gap: 12px;
		padding: 12px 16px;
		flex-wrap: wrap;
	}

	.wkheader-logo {
		margin-right: auto;
	}

	.wkheader .wkheader-logo img {
		height: 38px !important;
	}

	.wkheader-search {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
		margin: 6px 0 2px;
	}

	/* Nav wordt een off-canvas drawer */
	.wkheader-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 84%;
		max-width: 360px;
		background: #fff;
		border-top: 0;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
		z-index: 900;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
	}

	.wkheader.is-open .wkheader-nav {
		transform: translateX(0);
	}

	.wkheader.is-open .wkheader-overlay {
		opacity: 1;
	}

	.wkheader-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 16px;
	}

	.wkheader-link {
		justify-content: space-between;
		padding: 14px 8px;
		border-bottom: 1px solid var(--wkheader-border);
		font-size: 1.05em;
	}

	/* In de drawer geen zwarte pil, gewoon een rij */
	.wkheader .wkheader-link--mega,
	.wkheader .wkheader-link--mega:hover,
	.wkheader .wkheader-link--mega:focus {
		background: transparent;
		color: var(--wkheader-text) !important;
		border-radius: 0;
		padding: 14px 8px;
		margin-right: 0;
	}

	/* Mega/dropdown als accordion in de drawer */
	.wkheader-mega,
	.wkheader-dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		display: none;
		background: #fafafa;
		border-radius: 10px;
		margin: 4px 0 10px;
	}

	.wkheader-item.is-open > .wkheader-mega,
	.wkheader-item.is-open > .wkheader-dropdown {
		display: block;
	}

	.wkheader-mega-inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 16px;
	}

	.wkheader-mega-heading {
		margin-bottom: 8px;
	}

	/* In de drawer opent de mega via JS, niet via hover */
	.wkheader-item.has-mega:hover .wkheader-mega,
	.wkheader-item.has-dropdown:hover .wkheader-dropdown {
		opacity: 1;
	}
}

/* ---------- Kleine telefoons ---------- */
@media (max-width: 420px) {
	.wkheader-bar {
		gap: 8px;
		padding: 10px 12px;
	}

	.wkheader .wkheader-logo img {
		height: 32px !important;
	}

	.wkheader-icon {
		width: 38px;
		height: 38px;
	}

	.wkheader-actions {
		gap: 8px;
	}

	.wkheader-nav {
		width: 90%;
	}
}