/*
 * Header: topbalk, hoofdheader, navigatie met mega menu's, account en winkelwagen,
 * en de mobiele balk met het zijmenu (alleen onder 64em / 1024px).
 * Wordt op elke pagina geladen (de header staat overal). Variabelen staan in :root in base.css.
 * Mobile-first: desktopnavigatie en headericonen verschijnen vanaf 64em (1024px).
 */

/* Iconen (uit assets/icons/, kleur via currentColor) */
.cp-icon {
	flex: none;
}

/* ---------- Topbalk ---------- */
.cp-topbar {
	background: var(--cp-color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em;
}

.cp-topbar__desktop {
	display: none;
}

/* Mobiel: horizontaal scrollbare track die zacht doorloopt (JS) en met de vinger versleept kan worden. */
.cp-topbar__mobile {
	padding-block: 0.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	touch-action: pan-x;
}

.cp-topbar__mobile::-webkit-scrollbar {
	display: none;
}

.cp-topbar__track {
	display: flex;
	width: max-content;
}

/* De padding aan het einde houdt beide lijsten exact even breed, zodat de loop naadloos is. */
.cp-topbar__list {
	display: flex;
	flex: none;
	gap: 1.25rem;
	margin: 0;
	padding: 0 1.25rem 0 0;
	list-style: none;
}

.cp-topbar__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

@media (min-width: 64em) {
	.cp-topbar__mobile {
		display: none;
	}

	/* Alle voordelen liggen op elkaar; er is er steeds één zichtbaar. */
	.cp-topbar__desktop {
		position: relative;
		display: block;
		max-width: var(--cp-header-max);
		height: var(--cp-topbar-height);
		margin-inline: auto;
		font-size: 0.8125rem;
	}

	.cp-topbar__usp {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.cp-topbar__usp.is-active {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Hoofdheader ---------- */
.cp-header {
	--cp-header-pad: 1rem;

	position: sticky;
	top: 0;
	z-index: var(--cp-z-header);
	background: var(--cp-color-bg);
	border-block-end: 1px solid var(--cp-color-border);
	transition: transform 0.3s ease;
}

.admin-bar .cp-header {
	top: 46px;
}

@media (min-width: 48.9375em) {
	.admin-bar .cp-header {
		top: 32px;
	}
}

.cp-header.is-hidden {
	transform: translateY(-100%);
}

.cp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-header-gap);
	max-width: var(--cp-header-max);
	min-height: var(--cp-header-height);
	margin-inline: auto;
	padding-inline: var(--cp-header-pad);
}

.cp-header__end {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 1rem;
}

.cp-brand {
	display: inline-flex;
	align-items: center;
	color: var(--cp-color-foreground);
	font-size: 1.25rem;
	font-weight: 800;
	text-decoration: none;
}

/* Vaste logobreedte; de hoogte volgt uit width/height van de SVG (geen vervorming, geen verspringen). */
.cp-brand__logo {
	width: var(--cp-logo-width);
	height: auto;
}

.cp-header .cp-button {
	padding: 0.625rem 1.5rem;
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary);
	font-weight: 700;
}

.cp-header .cp-button:hover {
	background: var(--cp-color-primary-hover);
}

@media (min-width: 40em) {
	.cp-header {
		--cp-header-pad: 1.5rem;
		--cp-logo-width: 15rem;
	}
}

@media (min-width: 64em) {
	.cp-header {
		--cp-header-pad: 2rem;
	}
}

/* ---------- Navigatie (alleen vanaf 1024px) ---------- */
.cp-nav {
	display: none;
}

.cp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cp-color-foreground);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.cp-nav__link:hover,
.cp-nav__link[aria-current="page"] {
	color: var(--cp-color-primary);
}

@media (min-width: 64em) {
	.cp-nav {
		display: flex;
	}

	/* De items zijn zo hoog als de header, zodat de muis tussen knop en paneel niet "valt". */
	.cp-nav__list {
		display: flex;
		align-items: stretch;
		gap: 2rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cp-nav__list > li {
		display: flex;
		align-items: stretch;
	}
}

/* ---------- Mega menu's ---------- */
.cp-mega__trigger .cp-icon {
	transition: transform 0.2s ease;
}

.cp-mega:hover:not(.is-dismissed) .cp-mega__trigger,
.cp-mega:focus-within:not(.is-dismissed) .cp-mega__trigger,
.cp-mega.is-open:not(.is-dismissed) .cp-mega__trigger {
	color: var(--cp-color-primary);
}

.cp-mega:hover:not(.is-dismissed) .cp-mega__trigger .cp-icon,
.cp-mega:focus-within:not(.is-dismissed) .cp-mega__trigger .cp-icon,
.cp-mega.is-open:not(.is-dismissed) .cp-mega__trigger .cp-icon {
	transform: rotate(180deg);
}

/* Het paneel positioneert t.o.v. de sticky header (links/rechts 0, direct onder de balk). */
.cp-mega__panel {
	position: absolute;
	inset: 100% 0 auto;
	visibility: hidden;
	background: var(--cp-color-bg);
	border-block-start: 1px solid var(--cp-color-border);
	box-shadow: var(--cp-shadow-menu);
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cp-mega:hover:not(.is-dismissed) > .cp-mega__panel,
.cp-mega:focus-within:not(.is-dismissed) > .cp-mega__panel,
.cp-mega.is-open:not(.is-dismissed) > .cp-mega__panel {
	visibility: visible;
	opacity: 1;
}

.cp-mega__inner {
	display: grid;
	gap: 2.5rem;
	max-width: var(--cp-header-max);
	margin-inline: auto;
	padding: 2.5rem var(--cp-header-pad);
}

.cp-mega__inner--categories {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-mega__inner--product {
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 2rem;
	padding-block: 2rem;
}

.cp-mega__card {
	padding: 2rem;
	border-radius: var(--cp-radius-card);
}

.cp-mega__card--dark {
	background: var(--cp-color-foreground);
	color: #fff;
}

.cp-mega__card--muted {
	background: var(--cp-color-muted-bg);
}

.cp-mega__card p {
	margin: 0;
}

.cp-mega__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cp-mega__eyebrow--primary {
	color: var(--cp-color-primary);
}

.cp-mega__eyebrow--muted {
	color: var(--cp-color-muted);
}

.cp-mega__title {
	margin-block-start: 0.75rem;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: var(--cp-line-height-tight);
}

.cp-mega__text {
	margin-block-start: 0.75rem;
	color: rgb(255 255 255 / 0.7);
	font-size: 0.875rem;
}

.cp-mega__button {
	display: inline-block;
	margin-block-start: 1.25rem;
	padding: 0.625rem 1.5rem;
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.cp-mega__button:hover {
	background: var(--cp-color-primary-hover);
	color: #fff;
}

/* Particulier: categorieën in drie kolommen naast het donkere blok. */
.cp-mega__categories {
	display: grid;
	grid-column: span 3;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-content: start;
}

.cp-mega__inner--categories:not(:has(.cp-mega__card)) .cp-mega__categories {
	grid-column: 1 / -1;
}

.cp-mega__category {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: 10px;
	color: var(--cp-color-foreground);
	text-decoration: none;
}

.cp-mega__category:hover {
	background: var(--cp-color-primary-tint);
	color: var(--cp-color-foreground);
}

.cp-mega__icon {
	display: grid;
	flex: none;
	width: 2.25rem;
	aspect-ratio: 1;
	place-items: center;
	border-radius: 10px;
	background: var(--cp-color-primary-tint-strong);
	color: var(--cp-color-primary);
}

.cp-mega__category-body {
	display: grid;
	gap: 0.125rem;
}

.cp-mega__category-title {
	font-size: 0.875rem;
	font-weight: 700;
}

.cp-mega__category:hover .cp-mega__category-title {
	color: var(--cp-color-primary);
}

.cp-mega__category-text {
	color: var(--cp-color-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* Product: uitgelicht product, links en aanbieding. */
.cp-mega__product {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.cp-mega__product-image {
	flex: none;
	width: 8rem;
	height: auto;
	aspect-ratio: 8 / 9;
	border-radius: 10px;
	object-fit: cover;
}

.cp-mega__product-title {
	margin-block-start: 0.375rem;
	color: var(--cp-color-foreground);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: var(--cp-line-height-tight);
}

.cp-mega__accent {
	color: var(--cp-color-primary);
}

.cp-mega__product-title a {
	color: inherit;
	text-decoration: none;
}

.cp-mega__product-title a:hover {
	color: var(--cp-color-primary);
}

.cp-mega__product-text {
	margin-block-start: 0.5rem;
	color: var(--cp-color-muted);
	font-size: 0.875rem;
}

.cp-mega__price {
	margin-block-start: 0.5rem;
	color: var(--cp-color-primary);
	font-weight: 800;
}

.cp-mega__links ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.cp-mega__links a {
	display: block;
	padding-block: 0.5rem;
	color: var(--cp-color-foreground);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.cp-mega__links a:hover {
	color: var(--cp-color-primary);
}

.cp-mega__offer {
	align-self: start;
}

.cp-mega__offer .cp-mega__title {
	font-size: 1.5rem;
}

/* ---------- Account en winkelwagen (WooCommerce, vanaf 1024px) ---------- */
.cp-header__actions {
	display: none;
	align-items: center;
	gap: 0.25rem;
}

@media (min-width: 64em) {
	.cp-header__actions {
		display: flex;
	}
}

.cp-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--cp-radius-button);
	background: transparent;
	color: var(--cp-color-foreground);
	cursor: pointer;
}

.cp-header__icon:hover {
	background: var(--cp-color-primary-tint);
	color: var(--cp-color-primary);
}

.cp-header__cart-count {
	position: absolute;
	inset: 0.125rem 0.125rem auto auto;
	display: grid;
	min-width: 1rem;
	aspect-ratio: 1;
	padding-inline: 0.25rem;
	place-items: center;
	border-radius: 999px;
	background: var(--cp-color-primary);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 800;
	line-height: 1;
}

.cp-header__cart-count[hidden] {
	display: none;
}

.cp-header .cp-account {
	position: relative;
}

.cp-header .cp-account__menu {
	position: absolute;
	inset: calc(100% + 0.75rem) 0 auto auto;
	z-index: 1;
	width: 14rem;
	padding-block: 0.5rem;
	visibility: hidden;
	background: var(--cp-color-bg);
	border: 1px solid var(--cp-color-border);
	border-radius: 10px;
	box-shadow: var(--cp-shadow-menu);
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Met JavaScript bepaalt .is-open; zonder JavaScript opent het menu bij focus. */
.cp-header .cp-account.is-open .cp-account__menu,
.cp-header .cp-account:not([data-cp-js]):focus-within .cp-account__menu {
	visibility: visible;
	opacity: 1;
}

.cp-header .cp-account__name {
	margin: 0;
	padding: 0.5rem 1rem 0.75rem;
	border-block-end: 1px solid var(--cp-color-border);
	color: var(--cp-color-foreground);
	font-size: 0.875rem;
	font-weight: 700;
}

.cp-header .cp-account__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	color: var(--cp-color-foreground);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.cp-header .cp-account__link:hover {
	color: var(--cp-color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.cp-header,
	.cp-topbar__usp,
	.cp-mega__panel,
	.cp-mega__trigger .cp-icon,
	.cp-header .cp-account__menu {
		transition: none;
	}
}

/* ---------- Mobiele balk en zijmenu (alleen onder 1024px) ---------- */

.cp-mobile-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: var(--cp-z-header);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	min-height: calc(68px + env(safe-area-inset-bottom, 0px));
	padding-right: env(safe-area-inset-right, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-left: env(safe-area-inset-left, 0px);
	background: var(--cp-color-bg);
	border-top: 1px solid var(--cp-color-border);
}

.cp-mobile-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
	min-width: 0;
	min-height: 56px;
	margin: 0;
	padding: 0.375rem 0.125rem;
	border: 0;
	background: none;
	color: color-mix(in srgb, var(--cp-color-foreground) 70%, transparent);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

.cp-mobile-bar__item span {
	max-width: 100%;
}

.cp-mobile-bar__item:hover,
.cp-mobile-bar__item[aria-current="page"] {
	color: var(--cp-color-primary);
}

.cp-mobile-spacer {
	height: calc(68px + env(safe-area-inset-bottom, 0px));
}

/* Paneel: popover, schuift van rechts. Gesloten blijft het uit de weergave. */
.cp-mobile-panel {
	position: fixed;
	inset: 0 0 0 auto;
	display: none;
	flex-direction: column;
	width: min(280px, 82vw);
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--cp-color-bg);
	color: var(--cp-color-foreground);
	transform: translateX(100%);
	transition:
		transform 0.3s ease,
		overlay 0.3s ease allow-discrete,
		display 0.3s allow-discrete;
}

.cp-mobile-panel:popover-open {
	display: flex;
	transform: translateX(0);
}

.cp-mobile-panel:focus {
	outline: none;
}

.cp-mobile-panel::backdrop {
	background: color-mix(in srgb, var(--cp-color-navy) 50%, transparent);
	opacity: 0;
	transition:
		opacity 0.3s ease,
		overlay 0.3s ease allow-discrete,
		display 0.3s allow-discrete;
}

.cp-mobile-panel:popover-open::backdrop {
	opacity: 1;
}

@starting-style {
	.cp-mobile-panel:popover-open {
		transform: translateX(100%);
	}

	.cp-mobile-panel:popover-open::backdrop {
		opacity: 0;
	}
}

.admin-bar .cp-mobile-panel {
	top: 46px;
}

@media (min-width: 48.9375em) {
	.admin-bar .cp-mobile-panel {
		top: 32px;
	}
}

.cp-mobile-panel__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: calc(80px + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) 1rem 0 1.25rem;
	border-bottom: 1px solid var(--cp-color-border);
}

.cp-mobile-panel__title {
	margin: 0;
	color: var(--cp-color-primary);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.cp-mobile-panel__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cp-color-foreground);
	cursor: pointer;
}

.cp-mobile-panel__close:hover {
	background: var(--cp-color-muted-bg);
}

.cp-mobile-panel__nav {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.cp-mobile-panel__list {
	margin: 0;
	padding: 0.5rem;
	list-style: none;
}

.cp-mobile-panel__list a {
	display: block;
	padding: 12px 16px;
	border-radius: 10px;
	color: var(--cp-color-foreground);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.cp-mobile-panel__list a:hover,
.cp-mobile-panel__list a:focus-visible,
.cp-mobile-panel__list .current-menu-item > a,
.cp-mobile-panel__list a[aria-current="page"] {
	background: var(--cp-color-primary-tint);
	color: var(--cp-color-primary);
}

.cp-mobile-panel__foot {
	flex: none;
	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--cp-color-border);
}

.cp-mobile-panel__login {
	display: block;
	color: var(--cp-color-muted);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.cp-mobile-panel__login:hover,
.cp-mobile-panel__login:focus-visible {
	color: var(--cp-color-primary);
}

@media (max-width: 63.999em) {
	html:has(.cp-mobile-panel:popover-open),
	body:has(.cp-mobile-panel:popover-open) {
		overflow: hidden;
	}
}

@media (min-width: 64em) {
	.cp-mobile-nav {
		display: none;
	}

	.cp-mobile-panel,
	.cp-mobile-panel:popover-open {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-mobile-panel,
	.cp-mobile-panel::backdrop {
		transition: none;
	}
}