/* =========================================================================
   Chocolaterie Fleur — Header (1:1 Figma Homepage 520:2589).
   Drie rijen:
     1. Top-balk  (#f6bddd): reviews links · Over Fleur/Contact/Workshops rechts.
     2. Hoofdbalk (#fff):    logo (rond, 100px) · zoek-pill (44px) · account/cart.
     3. Navigatie (#fff):    hoofdmenu + hairline (Figma Line 2, y168).
   Gescopet onder .fleur-header / .fleur-topbar / .fleur-nav.
   Tokens uit fonts.css :root (--fleur-aubergine, --fleur-cream, --fleur-pink,
   --fleur-pink-soft).
   ========================================================================= */

/* ---- Algemeen ----------------------------------------------------------- */
.fleur-header {
	position: sticky;       /* header scrollt mee (blijft bovenaan) */
	top: 0;
	z-index: 1000;
	background: #fff;
	font-family: var(--fleur-font-sans);
	transition: box-shadow .2s ease;
}
.fleur-header.is-scrolled { box-shadow: 0 6px 20px rgba(76, 61, 69, .1); }
.fleur-header .fleur-icon {
	display: block;
	width: auto;
	height: auto;
}

/* =========================================================================
   Rij 1 — Top-balk (Figma 520:2595: bg #f6bddd, h46; tekst #f5f5f5 14px).
   ========================================================================= */
.fleur-topbar {
	background: var(--fleur-pink-soft);
	color: var(--fleur-cream);
}
.fleur-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 46px;
}

/* Reviews-cluster: badge · 5/5 · sterren · aantal. */
.fleur-topbar__reviews { display: inline-flex; align-items: center; }
.fleur-topbar__reviews-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fleur-cream);
	text-decoration: none;
}
.fleur-topbar__reviews-badge {
	display: block;
	width: auto;
	height: 30px;               /* Figma 520:2711 (65×33) — transparant logo */
}
.fleur-topbar__score {
	font-size: 14px;
	font-weight: 700;            /* DM Sans Bold (Figma 520:2740) */
	line-height: 1.2;
}
.fleur-topbar__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #fdd21b;             /* gevulde gouden sterren (Figma 520:2724-2736) */
}
.fleur-topbar__stars .fleur-icon--star { width: 14px; height: 14px; }
.fleur-topbar__count {
	font-size: 14px;
	font-weight: 700;            /* DM Sans Bold (Figma 520:2739) */
	line-height: 1.2;
	white-space: nowrap;
}

/* Links rechts: Over Fleur · Contact · [badge] Workshops. */
.fleur-topbar__links {
	display: inline-flex;
	align-items: center;
	gap: 28px;
}
.fleur-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 900;            /* DM Sans Black (Figma 520:2610/2611) */
	line-height: 1.2;
	color: var(--fleur-cream);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s ease;
}
.fleur-topbar__link:hover { opacity: .8; }

/* "Workshops" = aubergine knop tot aan de container-rand (Figma 520:2596),
   met het chocolade-icoon in een donker rond badge. */
.fleur-topbar__link--icon {
	align-self: center;
	height: 46px;
	padding: 0 20px;
	gap: 10px;
	background: var(--fleur-aubergine);
	border-radius: 0;            /* scherpe hoeken (Figma 520:2596) */
}
.fleur-topbar__link--icon:hover { opacity: 1; filter: brightness(1.12); }

.fleur-topbar__link-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;            /* wit rond badge (Figma 520:2612) */
	color: var(--fleur-aubergine); /* donker chocolade-icoon op wit */
}
.fleur-topbar__link-badge svg { display: block; width: 15px; height: 15px; }

/* =========================================================================
   Rij 2 — Hoofdbalk: logo (100px) · zoekveld (pill 44px) · account + cart.
   ========================================================================= */
.fleur-header__main {
	background: #f5f5f5;             /* LIVE: lichtgrijze hoofdbalk (#f5f5f5) */
}
.fleur-header__main-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 122px;          /* Figma: logo y57 h100 → ~122px balk (tot y168) */
}

/* Logo (Figma 520:2754: rond badge 100×100). */
.fleur-header__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.fleur-header__logo-link,
.fleur-header__brand .custom-logo-link {
	display: block;
	line-height: 0;
}
.fleur-header__logo-img,
.fleur-header__brand img,
.fleur-header__brand .custom-logo {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: contain;
	border-radius: 50%;         /* rond, geen vierkante achtergrond (Figma 520:2754) */
}
.fleur-header__logo-text {
	font-family: var(--fleur-font-serif);
	font-size: 28px;
	line-height: 1.1;
	color: var(--fleur-aubergine);
	white-space: nowrap;
	transition: color .2s ease;
}
.fleur-header__logo-text:hover { color: var(--fleur-pink); }

/* Zoekveld (Figma 520:2602: bg #fff, radius 100px, h44; placeholder Regular 14px #000). */
.fleur-search {
	flex: 0 1 715px;
	position: relative;
	display: flex;
	align-items: center;
	max-width: 715px;
	margin-left: auto;          /* zoekveld + iconen rechts gegroepeerd (Figma) */
	height: 44px;
	background: #fff;
	border: 0;                  /* LIVE: geen rand — witte pill op grijze balk */
	border-radius: 100px;
}
.fleur-search__field {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 50px 0 22px;
	border: 0;
	background: transparent;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fleur-aubergine);
	border-radius: 100px;
	-webkit-appearance: none;
	appearance: none;
}
.fleur-search__field::placeholder {
	color: #000;
	opacity: 1;
}
.fleur-search__field:focus { outline: none; }
.fleur-search:focus-within { box-shadow: 0 0 0 2px rgba(224, 98, 131, .35); } /* subtiele focusring i.p.v. rand */
.fleur-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }

.fleur-search__btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fleur-aubergine);
	cursor: pointer;
	border-radius: 50%;
	transition: color .15s ease;
}
.fleur-search__btn:hover { color: var(--fleur-pink); }
.fleur-search__btn .fleur-icon { width: 20px; height: 20px; }

/* Account- + winkelwagen-iconen (Figma 520:2606 / 520:2622). */
.fleur-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
}
.fleur-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--fleur-aubergine);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color .15s ease;
}
.fleur-header__action:hover { color: var(--fleur-pink); }

/* Zoek-toggle: op desktop verborgen (het zoekveld staat daar inline in de balk).
   Op mobiel/tablet verschijnt dit icoon naast het account-icoon (zie media-query). */
.fleur-search-toggle { display: none; }
/* Zoek-sluitknop (✕): alleen tijdens mobiel zoeken (zie .search-open in de media-query). */
.fleur-search-close { display: none; }

/* Winkelwagen-teller (parent-fragment span.sellabees-header__cart-count). */
.fleur-header__cart { overflow: visible; }
.sellabees-header__cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fleur-font-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--fleur-aubergine);   /* LIVE: donker rond badge (#4c3d45) */
	border-radius: 100px;
}
/* Verberg de teller bij een lege winkelwagen (design toont geen badge bij 0).
   De WooCommerce-fragment vervangt deze span weer met de juiste waarde zodra
   er iets in de winkelwagen ligt. */
.sellabees-header__cart-count.is-empty { display: none; }

/* =========================================================================
   Rij 3 — Navigatiebalk (Figma: items Home/Bonbons/… SemiBold 14px #000, lijn y168).
   ========================================================================= */
.fleur-nav {
	background: #f5f5f5;            /* LIVE: lichtgrijze navigatiebalk (#f5f5f5) */
	border-top: 1px solid rgba(76, 61, 69, .14);   /* Figma Line 2 (520:2621) */
}
.fleur-nav__inner {
	display: flex;
	align-items: center;
	min-height: 51px;
}
.fleur-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fleur-nav__menu .menu-item { margin: 0; }
.fleur-nav__menu a {
	display: inline-block;
	padding: 14px 0;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	font-weight: 600;            /* DM Sans SemiBold (Figma 520:2597) */
	line-height: 1.2;
	color: #000;
	text-decoration: none;
	transition: color .2s ease;   /* vloeiend naar roze i.p.v. abrupt omklappen */
}
.fleur-nav__menu a:hover,
.fleur-nav__menu .current-menu-item > a,
.fleur-nav__menu .current_page_item > a { color: var(--fleur-pink); }

/* Eenvoudige submenu's (desktop hover; mobiel via .is-expanded vanuit core-JS). */
.fleur-nav__menu .menu-item-has-children { position: relative; }
.fleur-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(76, 61, 69, .14);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(76, 61, 69, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.fleur-nav__menu .menu-item-has-children:hover > .sub-menu,
.fleur-nav__menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.fleur-nav__menu .sub-menu a { display: block; padding: 8px 20px; }

/* Mobiel-only extra navigatie (Over Fleur/Contact + Workshops-knop). Onzichtbaar
   op desktop/liggende tablet; getoond in de schermvullende overlay ≤981 (media-query). */
.fleur-nav__extra { display: none; }

/* Chevron-knop die de core-JS injecteert (submenu open/dicht). */
.sellabees-nav__chevron {
	display: none;
	margin-left: 6px;
	padding: 4px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

/* =========================================================================
   Mobiel — hamburger/zoek-toggles komen uit de core-JS; hier de styling.
   Breakpoint = parent default 900px (SellabeesCoreConfig.mobileBreakpoint).
   ========================================================================= */

/* Hamburger-toggle (core-JS injecteert .sellabees-nav__toggle in .actions). */
.sellabees-nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fleur-aubergine);
	cursor: pointer;
}
.sellabees-nav__toggle-lines,
.sellabees-nav__toggle-lines span {
	display: block;
	box-sizing: border-box;
}
.sellabees-nav__toggle-lines {
	position: relative;
	width: 24px;
	height: 16px;
	margin: 0 auto;
}
.sellabees-nav__toggle-lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.sellabees-nav__toggle-lines span:nth-child(1) { top: 0; }
.sellabees-nav__toggle-lines span:nth-child(2) { top: 7px; }
.sellabees-nav__toggle-lines span:nth-child(3) { top: 14px; }
.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(2) { opacity: 0; }
.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sluit-kruis dat de core-JS tijdens mobiel zoeken in .top-inner zet. */
.sellabees-search-close {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fleur-aubergine);
	cursor: pointer;
}

/* Breakpoint = Sjon-systeem: <=981px = mobiel/staande tablet (hamburger),
   982-1219px = liggende tablet (volledige header past nog), >=1220 = desktop. */
@media (max-width: 981px) {
	/* Top-balk: alleen reviews tonen, links verbergen om ruimte te besparen. */
	.fleur-topbar__inner { justify-content: center; }
	.fleur-topbar__links { display: none; }
	.fleur-topbar__count { display: none; }

	.fleur-header__main-inner {
		min-height: 80px;
		gap: 14px;
		flex-wrap: wrap;
	}
	.fleur-header__brand { margin-right: auto; }
	.fleur-header__logo-img,
	.fleur-header__brand .custom-logo,
	.fleur-header__brand img { width: 64px; height: 64px; }
	.fleur-header__logo-text { font-size: 22px; }

	/* — Zoeken: het zoek-icoon (naast account) opent het zoekveld. Bij openen
	   faden logo + iconen soepel weg en verschijnt de zoekbalk in dezelfde rij
	   (crossfade + lichte slide — géén layout-sprong, géén scaleX-vervorming). — */
	.fleur-header__main-inner { position: relative; }
	.fleur-search-toggle { display: inline-flex; align-items: center; justify-content: center; }

	/* Zoekveld = absolute overlay over de balk; standaard verborgen (fade + slide). */
	.fleur-search {
		position: absolute;
		left: 24px;                  /* zelfde gutter als het logo — niet tegen de schermrand */
		right: 72px;                 /* ruimte voor de ✕-knop rechts (24px gutter + knop) */
		top: 50%;
		margin: 0;
		flex: none;
		max-width: none;
		width: auto;
		height: 46px;
		transform: translateY(-50%) translateX(14px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 6;
		transition: opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
	}
	.fleur-header.search-open .fleur-search {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(-50%) translateX(0);
		transition: opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1);
	}

	/* ✕-sluitknop, rechts naast het zoekveld (op de gutter). */
	.fleur-search-close {
		position: absolute;
		right: 24px;
		top: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--fleur-aubergine);
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 7;
		transform: translateY(-50%) scale(.8);
		transition: opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s, color .15s ease;
	}
	.fleur-header.search-open .fleur-search-close {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(-50%) scale(1);
		transition: opacity .3s ease .05s, transform .34s cubic-bezier(.22,.61,.36,1) .05s, color .15s ease;
	}
	.fleur-search-close:hover { color: var(--fleur-pink); }

	/* Logo + iconen faden soepel weg terwijl de zoekbalk verschijnt. */
	.fleur-header__brand,
	.fleur-header__actions {
		transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1);
	}
	.fleur-header.search-open .fleur-header__brand {
		opacity: 0;
		transform: translateX(-10px);
		pointer-events: none;
	}
	.fleur-header.search-open .fleur-header__actions {
		opacity: 0;
		transform: translateX(10px);
		pointer-events: none;
	}

	.sellabees-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

	/* Navigatie = schermvullende overlay ONDER de header (Sjon-stijl). Staat altijd
	   in de DOM zodat 'ie soepel in-/uitfaadt + zacht naar beneden schuift
	   (géén display:none-sprong). Achtergrond = site-grijs (--fleur-cream), niet wit.
	   z-index onder de sticky header (z1000) → de ✕/hamburger blijft klikbaar.
	   --fleur-header-h wordt door theme.js op de exacte headerhoogte gezet. */
	.fleur-nav {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--fleur-header-h, 126px);
		bottom: 0;
		z-index: 40;
		background: var(--fleur-cream);
		border-top: 1px solid rgba(76, 61, 69, .12);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
	}
	.fleur-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1);
	}
	.fleur-nav__inner { display: block; min-height: 0; padding-block: 10px 28px; }
	.fleur-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	/* Elk top-level item = rij (link + evt. chevron); submenu wrapt eronder.
	   Scheidingslijn op de li zodat die over de volle breedte loopt. */
	.fleur-nav__menu > .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(76, 61, 69, .1);
	}
	/* Laatste menu-item HOUDT z'n scheidingslijn zodat er ook een streepje onder
	   "Chocolade op maat" staat, vóór het extra-blok (Over Fleur/Contact/Workshops). */
	.fleur-nav__menu > .menu-item:last-child { border-bottom: 1px solid rgba(76, 61, 69, .1); }
	.fleur-nav__menu > .menu-item > a {
		flex: 1 1 auto;
		padding: 16px 0;
		font-size: 17px;
		border-bottom: 0;
	}

	/* Mobiele submenu's: ingeklapt tenzij theme.js .is-expanded zet. */
	.fleur-nav__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		flex: 0 0 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 8px 16px;
		border: 0;
		box-shadow: none;
		border-radius: 0;
	}
	.fleur-nav__menu .menu-item-has-children.is-expanded > .sub-menu { display: block; }
	.fleur-nav__menu .sub-menu a { padding: 8px 0; border: 0; }

	/* Chevron-knop (theme.js injecteert 'm ná de link). */
	.sellabees-nav__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		padding: 10px;
		color: inherit;
	}
	.sellabees-nav__chevron svg { width: 12px; height: auto; transition: transform .2s ease; }
	.fleur-nav__menu .is-expanded > .sellabees-nav__chevron svg { transform: rotate(180deg); }

	/* Extra navigatie onderaan het schermvullende menu: Over Fleur/Contact als
	   doorlopende menu-rijen; Workshops als aubergine knop onderaan (Sjon-stijl). */
	.fleur-nav__extra {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.fleur-nav__extra-link {
		display: block;
		padding: 16px 0;
		font-family: var(--fleur-font-sans);
		font-size: 17px;
		font-weight: 600;
		color: #000;
		text-decoration: none;
		border-bottom: 1px solid rgba(76, 61, 69, .1);
		transition: color .2s ease;
	}
	.fleur-nav__extra-link:hover { color: var(--fleur-pink); }
	.fleur-nav__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-top: 22px;
		padding: 16px 24px;
		background: var(--fleur-aubergine);
		color: var(--fleur-cream);
		font-family: var(--fleur-font-sans);
		font-size: 15px;
		font-weight: 900;
		border-radius: 100px;
		text-decoration: none;
		transition: filter .2s ease, transform .2s ease;
	}
	.fleur-nav__cta:hover { color: var(--fleur-cream); filter: brightness(1.12); }
	.fleur-nav__cta-ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		flex: 0 0 26px;
		border-radius: 50%;
		background: #fff;
		color: var(--fleur-aubergine);
	}
	.fleur-nav__cta-ico svg { width: 15px; height: 15px; display: block; }
}

@media (max-width: 600px) {
	.fleur-topbar__reviews-badge { height: 18px; }
	.fleur-topbar__score,
	.fleur-topbar__count { font-size: 12px; }

	/* Iets kleiner logo op zeer smalle schermen. */
	.fleur-header__logo-img,
	.fleur-header__brand .custom-logo,
	.fleur-header__brand img { width: 56px; height: 56px; }
}