/* WC Plus — shop-header (templates/header/*). Structureel, Bootstrap-vrij, op --wcp-*-tokens.
   Huisstijl komt uit het thema via de tokens; extra header-tokens (met fallback):
   --wcp-topbar-bg, --wcp-topbar-color, --wcp-menubar-bg, --wcp-menubar-color, --wcp-header-height.
   De .container komt uit het thema (thema-contract §1). */

.wcp-header {
	position: relative;
	z-index: var(--wcp-z-header);
	background: var(--wcp-color-surface);
}
.wcp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wcp-gutter);
	min-width: 0;
}

/* ── Upper / topbar ── */
.wcp-header__upper {
	background: var(--wcp-topbar-bg);
	color: var(--wcp-topbar-color);
	border-bottom: var(--wcp-border-width) solid var(--wcp-color-border);
	font-size: var(--wcp-font-size-sm);
}
.wcp-header__upper .wcp-header__inner { min-height: 2.25rem; gap: 1.5rem; }
.wcp-header__upper .wcp-usps { margin: 0; }

/* Krimpvolgorde. De drie blokken (reviews, USP's, topmenu) krimpen standaard even hard, maar
   alleen de USP-rij heeft inhoud die moet kunnen ademen — de andere twee liggen vast. Op een
   container van 1280px is de rij precies vol, en dan viel de derde USP als eerste om terwijl
   het reviewblok best tien pixels kon inleveren. Reviews krimpen nu eerder.

   Bewust geen flex-shrink: 0 op de USP's: de topbalk is zichtbaar vanaf 768px, en tussen 768
   en ~1100px moet de rij nog netjes kunnen afbreken in plaats van te overflowen. */
.wcp-header__upper .wcp-header__rating { flex-shrink: 4; }
/* In de topbar staan de USP's op één regel: geen icoonbadge en geen subregel,
   anders duwt de vaste opbouw (badge, titel boven subregel) de balk uit elkaar. */
/* wcp-components.css geeft .wcp-usps__list een margin-top van 1rem (zinvol onder een loop,
   niet in een balk van 38px). Zonder reset wordt het blok 38px hoog terwijl reviews en
   topmenu 22px zijn, en zet align-items:center de USP-tekst 8px lager dan de buren. */
.wcp-header__upper .wcp-usps__list {
	margin: 0;
	display: flex;
	/* wcp-components.css zet hier een grid neer; die display wordt hierboven overschreven,
	   maar grid-template-columns blijft in de computed style staan en leidt af bij debuggen. */
	grid-template-columns: none;
	flex-wrap: wrap;
	/* 1.75rem koste met drie USP's 56px aan gaten in een blok dat sowieso krap zit. */
	gap: 0.5rem 1rem;
}
.wcp-header__upper .wcp-usps__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
/* Eén regel op desktop. Reviews + drie USP's + topmenu passen in een 1140px-container niet
   naast elkaar (740px nodig, ~710px over) en de lijst wrapte naar twee rijen. De USP-wrapper
   is de container: past de derde USP niet, dan valt hij weg; vanaf ~1400px (1320px-container)
   past hij weer. Mobiel (<48rem) heeft zijn eigen rotator-regels hieronder. */
@media (min-width: 48rem) {
	.wcp-header__upper .wcp-usps {
		flex: 1 1 auto;
		min-width: 0;
		container-type: inline-size;
	}
	.wcp-header__upper .wcp-usps__list { flex-wrap: nowrap; }
	.wcp-header__upper .wcp-usps__item { white-space: nowrap; }
	@container (max-width: 47rem) {
		.wcp-header__upper .wcp-usps__item:nth-child(n + 4) { display: none; } /* kind 1 is de (verborgen) beoordeling */
	}
}
.wcp-header__upper .wcp-usps__item > i {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: 1.05rem;
}
.wcp-header__upper .wcp-usps__head {
	font-size: inherit;
	font-weight: var(--wcp-font-weight-medium);
	color: inherit;
}
.wcp-header__upper .wcp-usps__text { display: none; }
.wcp-header__topmenu { margin-left: auto; }
.wcp-header__topmenu-list {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wcp-header__topmenu-list a { color: inherit; text-decoration: none; }
.wcp-header__topmenu-list a:hover { color: var(--wcp-color-primary); }
/* De beoordeling is alleen op smalle schermen een regel in de USP-lijst; daarboven staat ze
   als eigen blok links in de balk. */
@media (min-width: 48rem) {
	/* Specifieker dan ".wcp-header__upper .wcp-usps__item { display: flex }" hierboven,
	   anders staat de beoordeling op desktop twee keer in de balk. */
	.wcp-header__upper .wcp-usps__list .wcp-usps__item--lead { display: none; }
}

@media (max-width: 47.99rem) {
	.wcp-header__topmenu { display: none; }

	/* Eén regel tegelijk. De regels staan onder elkaar in een venster van één regelhoogte en
	   schuiven omhoog; wcp-ui.js telt --wcp-usps-slide op. Zonder JS (of met
	   prefers-reduced-motion) blijft de eerste regel staan en is er niets stuks. */
	.wcp-header__upper .wcp-usps--rotate {
		--wcp-usps-line: 1.375rem;
		height: var(--wcp-usps-line);
		overflow: hidden;
	}
	.wcp-header__upper .wcp-usps--rotate .wcp-usps__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		transform: translateY( calc( var( --wcp-usps-slide, 0 ) * var( --wcp-usps-line ) * -1 ) );
		transition: transform 0.4s ease;
	}
	.wcp-header__upper .wcp-usps--rotate .wcp-usps__item {
		flex: 0 0 var(--wcp-usps-line);
		height: var(--wcp-usps-line);
		justify-content: center;
	}

	/* Rotatie uitgezet met het filter: dan toont de balk alleen de eerste USP, zoals voorheen. */
	.wcp-header__upper .wcp-usps:not(.wcp-usps--rotate) .wcp-usps__item:not(:first-child) { display: none; }
	.wcp-header__upper .wcp-usps:not(.wcp-usps--rotate) .wcp-usps__list { justify-content: center; }

	/* De beoordeling staat als eerste regel in de lijst, dus het losse blok kan weg. */
	.wcp-header__rating { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wcp-header__upper .wcp-usps--rotate .wcp-usps__list { transition: none; }
}

/* ── Bar: logo / zoeken / acties ── */
.wcp-header__bar { border-bottom: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-header__bar .wcp-header__inner { padding-block: 0.875rem; }
.wcp-header__logo { flex: 0 0 auto; display: flex; align-items: center; }
/* flex i.p.v. inline-flex: een inline-flex-link laat een regelhoogte onder het logo staan, waardoor het logo boven het midden van de balk hing. */
.wcp-header__logo-link { display: flex; align-items: center; text-decoration: none; }
.wcp-header__logo img { display: block; height: var(--wcp-logo-height); width: auto; max-width: 12rem; }
.wcp-header__logo-text { font-weight: var(--wcp-font-weight-bold); font-size: 1.25rem; color: var(--wcp-color-primary); text-transform: uppercase; }
.wcp-header__search { flex: 1 1 auto; min-width: 0; max-width: var(--wcp-search-max-width); }
.wcp-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
	flex: 0 0 auto;
}
.wcp-header__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wcp-color-dark);
	text-decoration: none;
	cursor: pointer;
	font: inherit;
}
.wcp-header__action i[class*="svg-icon__"] { font-size: 1.375rem; }
.wcp-header__action:hover { color: var(--wcp-color-primary); }
.wcp-header__action-text {
	display: none;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}
.wcp-header__action-text strong { font-size: var(--wcp-font-size-sm); }
.wcp-header__action-text span { font-size: 0.75rem; color: var(--wcp-color-muted); }
.wcp-header__action-text .opening-status:empty { display: none; }
.wcp-header__action-text .opening-status.open::before,
.wcp-header__action-text .opening-status.closed::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--wcp-color-success);
}
.wcp-header__action-text .opening-status.closed::before { background: var(--wcp-color-danger); }
@media (min-width: 48rem) {
	.wcp-header__action-text { display: flex; }
	.wcp-header__menu-toggle { display: none; }
}
@media (max-width: 47.99rem) {
	.wcp-header__bar .wcp-header__inner { flex-wrap: wrap; gap: 0.75rem 1rem; }
	.wcp-header__search { order: 3; flex-basis: 100%; max-width: none; }
	.wcp-header__actions { gap: 1rem; }
}

/* ── Zoekbalk onder de header (contentpagina's) ── */
.wcp-header__search-bar { padding-block: 0.75rem; border-bottom: var(--wcp-border-width) solid var(--wcp-color-border); }
@media (min-width: 48rem) { .wcp-header__search-bar { display: none; } }
/* Op mobiel neemt de zoekbalk onder de header het over: dan niet óók het zoekveld in de bar tonen. */
@media (max-width: 47.99rem) { body:has(.wcp-header__search-bar) .wcp-header__bar .wcp-header__search { display: none; } }
/* Logo: expliciete hoogte wint ook van img[width][height] { height: auto } uit thema-resets, en een SVG zonder
   intrinsieke maat krijgt zo toch een breedte. */
.wcp-header .wcp-header__logo img, .wcp-header .wcp-header__logo img[width][height] { height: var(--wcp-logo-height); width: auto; max-width: 12rem; }

/* ── Menubalk ── */
.wcp-header__menu {
	background: var(--wcp-menubar-bg);
	color: var(--wcp-menubar-color);
}
.wcp-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.wcp-nav > li { position: relative; }
/* Het mega-menu spant de hele menubalk (absolute t.o.v. .wcp-header__menu; .wcp-header__inner is static),
   dus het item zelf mag geen positioneringscontext zijn — anders krimpt het paneel tot de breedte van het item. */
.wcp-nav > li.has-submenu { position: static; }
.wcp-nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.8rem 1rem;
	color: inherit;
	font-weight: var(--wcp-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease-in-out;
}
.wcp-nav > li > a:hover,
.wcp-nav > li.is-open > a,
.wcp-nav > li.is-active > a { background-color: rgba(0, 0, 0, 0.15); }
.wcp-nav > li > a .svg-icon__chevron-bottom { font-size: 0.6em; }
.wcp-nav > li > a .svg-icon__chevron-right { transform: rotate(90deg); font-size: 0.6em; }
@media (max-width: 47.99rem) { .wcp-header__menu { display: none; } }

/* ── Mega-menu (variant 1 en 2): open op hover/focus-within of .is-open (JS, toetsenbord) ── */
.wcp-mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--wcp-z-dropdown);
	color: var(--wcp-color-text);
	background: var(--wcp-color-surface);
	border-bottom: var(--wcp-border-width) solid var(--wcp-color-border);
	box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.12);
}
.wcp-header__menu .wcp-header__inner { position: static; }
.wcp-nav > li.has-submenu:hover > .wcp-mega-menu,
.wcp-nav > li.has-submenu:focus-within > .wcp-mega-menu,
.wcp-nav > li.has-submenu.is-open > .wcp-mega-menu { display: block; }
.wcp-mega-menu__inner {
	display: flex;
	gap: var(--wcp-gutter);
	/* Geen ruimte bovenaan: de categoriekolom links sluit tegen de header aan, zodat de
	   markering van het item waar je op staat doorloopt in de balk erboven in plaats van
	   los te zweven. De kolommen rechts hebben dat houvast niet en krijgen hun ruimte
	   terug op .wcp-mega-menu__panel. Onderaan blijft het compact: het menu moet op een
	   13"-scherm passen. */
	padding-block: 0 1.5rem;
}
.wcp-mega-menu__column { flex: 1 1 0; min-width: 0; }
.wcp-mega-menu__subcategories { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.wcp-mega-menu__list { margin: 0; padding: 0; list-style: none; min-width: 10rem; }
.wcp-mega-menu__list li a {
	display: block;
	padding: 0.2rem 0;
	color: var(--wcp-color-text);
	text-decoration: none;
	font-size: var(--wcp-font-size-sm);
}
.wcp-mega-menu__list li a:hover,
.wcp-mega-menu__list li.is-active a { color: var(--wcp-color-primary); }
/* "Alle …"-link onder een ingekorte lijst */
.wcp-mega-menu__list li.wcp-mega-menu__more a { color: var(--wcp-color-primary); }
.wcp-mega-menu__heading a {
	font-weight: var(--wcp-font-weight-bold);
	font-size: 1rem;
	color: var(--wcp-color-dark);
	margin-bottom: 0.25rem;
}
/* variant 2: categorieën links, paneel rechts */
.wcp-mega-menu__inner--split { gap: 0; }
.wcp-mega-menu__categories {
	flex: 0 0 16rem;
	margin: 0;
	padding: 0 1rem 0 0;
	list-style: none;
	border-right: var(--wcp-border-width) solid var(--wcp-color-border);
}
/* Compact: het hoofdmenu van een shop telt al snel vijftien categorieën en moet
   op een 13"-scherm in één keer in beeld passen. */
.wcp-mega-menu__categories a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--wcp-radius);
	color: var(--wcp-color-dark);
	text-decoration: none;
	font-weight: var(--wcp-font-weight-semibold);
}
.wcp-mega-menu__categories a .svg-icon__chevron-right { margin-left: auto; font-size: 0.6em; opacity: 0.6; }
.wcp-mega-menu__categories li.is-active > a,
.wcp-mega-menu__categories li.is-current > a,
.wcp-mega-menu__categories a:hover { background: var(--wcp-color-light); color: var(--wcp-color-primary); }
.wcp-menu__thumb { display: inline-flex; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.wcp-menu__thumb img { width: 100%; height: 100%; object-fit: contain; }
.wcp-mega-menu__panel { display: none; flex: 1 1 auto; padding-top: 1.5rem; padding-left: 2rem; }
.wcp-mega-menu__panel.is-active { display: flex; gap: var(--wcp-gutter); }

/* Backdrop achter een open mega-menu (JS zet .wcp-mega-backdrop.is-open op body-niveau) */
.wcp-mega-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--wcp-z-header) - 1);
	background: var(--wcp-backdrop-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.wcp-mega-backdrop.is-open { opacity: 1; }

/* ── Kale checkout-header ── */
.wcp-header--minimal .wcp-header__inner { justify-content: space-between; padding-block: 1rem; }
.wcp-header__back { color: var(--wcp-color-text); text-decoration: none; font-size: var(--wcp-font-size-sm); }
.wcp-header__back:hover { color: var(--wcp-color-primary); }

/* ── Mobiel menu (offcanvas met schuivende panelen) ── */
.wcp-menu-canvas { --wcp-offcanvas-width: 22rem; }
/* Dubbele klassen: mini-cart.css laadt ná dit bestand en zet .wcp-offcanvas__header/__body op
   1rem 1.25rem; met alleen .wcp-menu-canvas__* (zelfde specificiteit) verloren deze regels en
   stonden de rijen 2 × 1.25rem van de rand, de thumbnails 20px verder dan de titel "Menu". */
.wcp-menu-canvas__header.wcp-offcanvas__header { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; }
.wcp-menu-canvas__back {
	display: none;
	border: 0;
	background: transparent;
	padding: 0.25rem;
	cursor: pointer;
	color: inherit;
	font-size: 1.1rem;
}
.wcp-menu-canvas__back.is-visible { display: inline-flex; }
.wcp-menu-canvas__title { flex: 1 1 auto; transition: opacity 0.15s ease; }
.wcp-menu-canvas__title.is-changing { opacity: 0; }
.wcp-menu-canvas__body.wcp-offcanvas__body { padding: 0; overflow: hidden; }
.wcp-menu-canvas__panels { display: flex; height: 100%; }
.wcp-menu-canvas__panel {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 0.5rem 0 1.5rem;
	transition: transform 0.3s ease;
}
.wcp-menu-canvas__panel.submenu { order: 2; }
.wcp-menu-canvas__panel.is-entered { order: 1; }
.wcp-menu-canvas__list { margin: 0; padding: 0; list-style: none; }
.wcp-menu-canvas__list + .wcp-menu-canvas__list { border-top: var(--wcp-border-width) solid var(--wcp-color-border); margin-top: 0.5rem; padding-top: 0.5rem; }
.wcp-menu-canvas__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* 40px: de rijen lopen over de volle breedte, dus het raakvlak blijft ruim; 44px las in de
	   mobiele check als te veel lucht en 52px maakte de lijst onnodig lang (acht categorieën in
	   beeld). De 1.25rem inline is de enige insprong: de body zelf heeft geen padding. */
	padding: 0.375rem 1.25rem;
	min-height: 2.5rem;
	color: var(--wcp-color-dark);
	text-decoration: none;
	font-weight: var(--wcp-font-weight-medium);
}
/* Het label vult de rij, zodat de chevron altijd tegen de rechterrand staat. Met alleen
   margin-left:auto op de chevron klopte dat niet: bij een lang label (bv.
   "Diamantgereedschap") bleef er geen ruimte over, werd de auto-marge 0 en schoof de
   chevron mee naar rechts buiten de rij — 19px verder dan bij de buren. */
.wcp-menu-canvas__list a > span:not(.wcp-menu__thumb) { flex: 1 1 auto; min-width: 0; }
.wcp-menu-canvas__list a .svg-icon__chevron-right { flex: 0 0 auto; font-size: 0.6em; opacity: 0.6; }
/* Categorie-afbeelding in het menu; een regel zónder afbeelding lijnt mee via een even brede
   inspringing. Die hing eerder aan a > span:first-child, maar in een rij mét thumbnail ís de
   thumbnail dat eerste kind — dus kreeg élke rij 3,25rem inspringing en stond geen enkel
   icoon meer op de padding-rand. Nu alleen de rijen die echt geen thumbnail hebben. */
.wcp-menu-canvas__list a > .wcp-menu__thumb { flex: 0 0 auto; }
.wcp-menu-canvas__list:has(a .wcp-menu__thumb) a:not(:has(.wcp-menu__thumb)) > span:first-child {
	/* thumbnailbreedte (1.75rem, zie .wcp-menu__thumb) + de gap van de rij (0.75rem).
	   Stond op 3.25rem, alsof de afbeelding 2.5rem breed was — dat gold voor de oude
	   .wcp-menu-canvas__list a img-regel, die door .wcp-menu__thumb img { width: 100% }
	   al niet meer aankwam. Daardoor zouden regels zonder thumbnail 12px te ver staan. */
	margin-left: calc(1.75rem + 0.75rem);
}
.wcp-menu-canvas__list li.is-active > a { color: var(--wcp-color-primary); }
.wcp-menu-canvas__view-all a { font-weight: var(--wcp-font-weight-bold); }
.wcp-menu-canvas__list--secondary a { font-weight: var(--wcp-font-weight-normal); font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); }
.wcp-menu-canvas__topmenu { margin-top: auto; padding-top: 0.5rem; border-top: var(--wcp-border-width) solid var(--wcp-color-border); }

/* Taalwissel */
.wcp-lang-switch__toggle { border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; }
.wcp-lang-switch__list { margin: 0; padding: 0.25rem 0; list-style: none; min-width: 8rem; border: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-lang-switch__list a { display: flex; gap: 0.5rem; padding: 0.35rem 0.75rem; color: var(--wcp-color-text); text-decoration: none; }