/* =========================================================================
   Mimoda — Header (top-USP-balk + navigatiebalk). Gescoped op .mimoda-*.
   1:1 op Figma node 96:718 (top-balk #fec2dc 42px, navbalk wit 83px).
   ========================================================================= */

/* --- Top-USP-balk ---------------------------------------------------- */
.mimoda-topbar {
	background: var(--mimoda-topbar); /* #fec2dc — roze (klantkeuze) */
	height: 42px;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 101;
}
.mimoda-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
}
.mimoda-usp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500; /* Kumbh Medium */
	color: #fff;
	white-space: nowrap;
}
.mimoda-usp__check {
	width: 14px;
	height: 14px;
	color: #fff;
	flex: 0 0 auto;
}

/* --- Navigatiebalk (sticky) ------------------------------------------ */
.mimoda-header {
	background: var(--mimoda-white);
	position: sticky;
	top: 42px; /* onder de sticky USP-balk (42px) */
	z-index: 100;
	overflow: hidden; /* houdt de zoekbalk-animatie binnen de balk */
}

/* --- Zoekbalk-overlay (node 142:750) --------------------------------- */
.mimoda-searchbar {
	position: absolute;
	inset: 0;
	background: #fff;
	display: flex;
	align-items: center;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mimoda-searchbar.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mimoda-searchbar__inner { display: flex; align-items: center; gap: 16px; width: 100%; }
.mimoda-searchbar__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--mimoda-ink); }
.mimoda-searchbar__form { flex: 1 1 auto; }
.mimoda-searchbar__form input {
	width: 100%;
	border: none;
	background: transparent;
	font-family: var(--mimoda-font);
	font-size: 14px;
	color: var(--mimoda-ink);
	outline: none;
}
.mimoda-searchbar__form input::placeholder { color: var(--mimoda-ink); opacity: .75; }
.mimoda-searchbar__close {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--mimoda-ink);
	cursor: pointer;
}
.mimoda-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 83px;
}
.mimoda-header__logo { flex: 0 0 auto; display: block; }
/* max-width:none — de globale img{max-width:100%} liet het logo meeschalen met
   zijn (grid)kolom: bij ruimtegebrek werd het bij vaste hoogte platgedrukt
   (klant 06-08, 1280–1380px). Het logo houdt nu altijd zijn eigen verhouding;
   de container-ondergrens (style.css, --wide ≥1280) levert de benodigde ruimte. */
.mimoda-header__logo img { height: 39px; width: auto; max-width: none; }

/* Menu — op ≥1280px exact paginagecentreerd via de grid-middenkolom van
   .mimoda-header__inner (zie onder). Grid-kolommen overlappen nooit, dus het
   menu botst nooit met logo of iconenrij, hoe smal de balk ook wordt.
   Onder 1280px is het menu verborgen (hamburger). */
.mimoda-nav { justify-self: center; }
.mimoda-nav__list {
	display: flex;
	align-items: center;
	/* Tussenruimte schaalt mee: 32px zoals in het ontwerp zodra er plaats voor is
	   (≥1520px), en krimpt daaronder naar 18px. Met acht items (Accessoires erbij,
	   19-08) is het menu op één regel 721px breed, terwijl de middenkolom op 1280px
	   maar 647px vrijlaat — met vaste 32px brak "jurken & rokken" en "blazers &
	   jackets" over twee regels en werd de balk hoger dan de 83px uit het ontwerp.
	   Het knikpunt ligt op 1400px, niet op 1280: de headercontainer heeft een
	   ondergrens van 1120px (style.css --wide) en groeit dus pas vanaf ±1397px mee
	   met het venster. Daaronder blijft de vrije ruimte 647px, hoe breed het scherm
	   ook is. Gemeten marge: 24px op 1280, 13-25px in de ramp. */
	gap: clamp(18px, calc(18px + (100vw - 1400px) * 0.11667), 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Een label breekt nooit middenin: liever iets minder tussenruimte dan een
   menu-item over twee regels. */
.mimoda-nav__item { white-space: nowrap; }
.mimoda-nav__item a {
	font-size: 14px;
	font-weight: 400;
	color: var(--mimoda-ink);
	line-height: 1;
	transition: color .15s ease;
}
.mimoda-nav__item a:hover { color: var(--mimoda-accent); }

/* "new" = orchidee-pill (Figma 96:718: #e598e5, 80x44, radius 5px, ExtraBold 16px) */
.mimoda-nav__item.is-featured a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 44px;
	padding: 0 14px;
	background: var(--mimoda-orchid);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	border-radius: var(--mimoda-radius);
}
.mimoda-nav__item.is-featured a:hover { color: #fff; filter: brightness(.96); }

/* --- Iconen rechts (icoon + label eronder) --------------------------- */
.mimoda-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.mimoda-action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--mimoda-ink);
}
/* De zoek-actie is een <button> (opent de zoekbalk, navigeert niet): browser-
   opmaak van knoppen wegnemen zodat hij identiek oogt aan de <a>-acties ernaast. */
button.mimoda-action {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.mimoda-action__icon { width: 24px; height: 24px; display: block; }
.mimoda-action__label {
	font-size: 9px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap; /* "LOG IN" mag nooit over 2 regels breken (design: 1 regel) */
}
.mimoda-action:hover { color: var(--mimoda-accent); }

/* Winkelwagen-teller (Figma: 12px cirkel, accent, wit 8px) */
.mimoda-action__iconwrap { position: relative; display: inline-block; }
.mimoda-cart-count,
.sellabees-wish-count {
	position: absolute;
	top: -3px;
	right: -6px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 100px;
	background: var(--mimoda-gold); /* #bea561 goud — design 252:1742 winkelwagen-teller */
	color: var(--mimoda-ink);
	font-size: 8px;
	font-weight: 700;
	/* Flex-centrering i.p.v. line-height:14px. Gemeten (Chrome 150): het cijfer
	   staat hiermee exact in het midden — afwijking 0,000px. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/* iOS-correctie (klant 07-08). Twee onafhankelijke oorzaken, allebei nodig:
   1) de halve-pixel-positie van de iconenrij op mobiel — zie .mimoda-action__icon
      in het ≤981-blok hieronder (23px → 24px);
   2) deze regel: op WebKit komt een ONEVEN regelhoogte in het 14px-rondje zuiver
      uit, op Blink juist een even. Zonder deze regel stond het cijfer ook op een
      iPhone 7 (2×-scherm) scheef; mét deze regel was die juist goed.
   NIET het lettertype: op het toestel gemeten metrics (99,0/26,0) zijn gelijk aan
   Chrome (99,0/25,0), er is geen tekstvergroting en text-box-trim doet niets.
   Scope: -webkit-touch-callout bestaat alleen in WebKit (Blink negeert dit blok,
   geverifieerd); de touch-conditie laat Safari op de Mac ongemoeid. */
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		.mimoda-cart-count,
		.sellabees-wish-count { line-height: 11px; }
	}
}

.mimoda-content { display: block; }

/* Mobiel-only elementen: standaard (≥982px) verborgen */
.mimoda-header__toggles,
.mimoda-burger,
.mimoda-mobile-nav { display: none; }

/* =========================================================================
   Desktop (≥1280px) — 3-koloms grid: logo links, menu exact PAGINAGECENTREERD,
   iconen rechts. `1fr auto 1fr` houdt het menu gecentreerd t.o.v. de balk
   (gelijk aan Figma) én laat de kolommen nooit overlappen. Dit verving de oude
   absolute centrering + gap-knijp-hack. De grens lag eerst op 1220 (Sjon/Fleur),
   maar Mimoda's menu + iconenrij-met-labels zijn daarvoor te breed: op
   1220–1279 propte alles op elkaar en werd het logo platgedrukt (klant 06-08).
   Die zone valt nu onder de tablet-header (hamburger) hieronder. */
@media (min-width: 1280px) {
	.mimoda-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 24px;
	}
	.mimoda-header__logo { justify-self: start; }
	.mimoda-header__actions { justify-self: end; }
}

/* =========================================================================
   Mobiel (≤981px) — 1:1 op Figma "Responisive ontwerp" (Menu 406:4600,
   Zoeken 406:4353). Hamburger + zoeken links, gecentreerd logo, hart + tas
   rechts; hoofdmenu verhuist naar het inschuivende drawer.
   Breakpoint-systeem = Sjon/Fleur (981 / 600).
   ========================================================================= */
@media (max-width: 981px) {

	/* --- Top-USP-balk: autoplay-slider (JS voegt .is-usp-slider toe op mobiel) ---
	   Alle USP's rouleren oneindig door (fade), één tegelijk gecentreerd. */
	.mimoda-topbar { height: 40px; }
	.mimoda-topbar__inner { gap: 0; }
	.mimoda-usp { font-size: 13px; }
	.mimoda-topbar.is-usp-slider .mimoda-topbar__inner { position: relative; min-height: 40px; }
	.mimoda-topbar.is-usp-slider .mimoda-usp {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity .5s ease;
	}
	.mimoda-topbar.is-usp-slider .mimoda-usp.is-active { opacity: 1; pointer-events: auto; }

	/* --- Navigatiebalk --- */
	.mimoda-header { top: 40px; }
	.mimoda-header__inner { height: 66px; }

	/* Links: hamburger + zoeken */
	.mimoda-header__toggles { display: flex; align-items: center; gap: 16px; }
	.mimoda-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 26px;
		height: 26px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mimoda-ink);
		cursor: pointer;
	}
	.mimoda-burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}
	.mimoda-action--m-search { gap: 0; }
	.mimoda-header__toggles .mimoda-action__icon { width: 23px; height: 23px; }

	/* Midden: logo absoluut gecentreerd */
	.mimoda-header__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.mimoda-header__logo img { height: 34px; }

	/* Desktopmenu weg */
	.mimoda-nav { display: none; }

	/* Rechts: alleen hart + tas (labels + zoek/account-icoon weg) */
	.mimoda-action__label { display: none; }
	.mimoda-action--search,
	.mimoda-action--account { display: none; }
	.mimoda-header__actions { gap: 20px; align-items: center; }
	/* 24px i.p.v. de 23px uit het ontwerp — bewust EVEN. Een oneven icoonhoogte
	   gecentreerd in de 66px navbalk geeft (66−23)/2 = 21,5px: de hele iconenrij
	   (en dus de teller erin) belandt op een halve pixel. Op een 2×-scherm valt
	   dat nog op een beeldpunt, op een 3×-scherm (iPhone 13/17) precies ertussen
	   → daar schoof het cijfer los van het gouden rondje (klant 07-08; iPhone 7
	   was juist wél goed — dát verschil wees de oorzaak aan). Met 24px komt de
	   rij op 21px uit en staat alles weer op hele pixels. */
	.mimoda-header__actions .mimoda-action__icon { width: 24px; height: 24px; }
}

/* =========================================================================
   Menu-drawer — GEDEELD FUNDAMENT voor mobiel (≤981px) én liggende
   tablet/laptop (982–1279px). Het inschuivende paneel + scrim + banner zien
   er op beide tiers identiek uit; alleen de navbalk zelf (welke iconen/labels
   tonen) verschilt per tier. Daarom staat de drawer op ≤1279 i.p.v. binnen het
   mobiele blok. Op ≥1280px blijft de drawer verborgen (default display:none).
   ========================================================================= */
@media (max-width: 1279px) {

	/* --- Menu-drawer (links inschuivend + scrim) --- */
	.mimoda-mobile-nav {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		visibility: hidden;
		transition: visibility 0s linear .34s;
	}
	.mimoda-mobile-nav.is-open { visibility: visible; transition: visibility 0s; }

	.mimoda-mobile-nav__scrim {
		position: absolute;
		inset: 0;
		background: rgba(17, 17, 17, .38);
		opacity: 0;
		transition: opacity .34s ease;
	}
	.mimoda-mobile-nav.is-open .mimoda-mobile-nav__scrim { opacity: 1; }

	.mimoda-mobile-nav__panel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 86%;
		max-width: 344px;
		background: #fff;
		display: flex;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform .34s cubic-bezier(.22, .61, .36, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mimoda-mobile-nav.is-open .mimoda-mobile-nav__panel { transform: translateX(0); }

	/* Bovenbalk met sluitknop (rechtsboven) */
	.mimoda-mobile-nav__top {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 56px;
		padding: 0 22px;
		flex: 0 0 auto;
	}
	.mimoda-mobile-nav__close {
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mimoda-ink);
		cursor: pointer;
	}
	.mimoda-mobile-nav__close svg { width: 100%; height: 100%; display: block; }

	/* Beeldbanner (Figma "Menu" 406:4737 = collage-export menu-banner.jpg op 3× = 1032×420,
	   zodat hij op retina-schermen scherp blijft; getoond op 344×140 CSS-px) */
	.mimoda-mobile-nav__banner { flex: 0 0 auto; }
	.mimoda-mobile-nav__banner img {
		width: 100%;
		height: 140px;
		object-fit: cover;
		display: block;
	}

	/* Menu-lijst */
	.mimoda-mobile-nav__menu {
		flex: 0 0 auto;
		padding: 30px 46px 0;
	}
	.mimoda-mobile-nav__menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mimoda-mobile-nav__item { margin-bottom: 30px; }
	.mimoda-mobile-nav__item a {
		font-size: 16px;
		font-weight: 400;
		color: var(--mimoda-ink);
		line-height: 1;
	}
	.mimoda-mobile-nav__item a:hover { color: var(--mimoda-accent); }

	/* "new" = orchidee-pill (80×44, radius 5px, ExtraBold 16px) */
	.mimoda-mobile-nav__item.is-featured { margin-bottom: 30px; }
	.mimoda-mobile-nav__item.is-featured a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 80px;
		height: 44px;
		padding: 0 14px;
		background: var(--mimoda-orchid);
		color: #fff;
		font-size: 16px;
		font-weight: 800;
		border-radius: var(--mimoda-radius);
	}
	.mimoda-mobile-nav__item.is-featured a:hover { color: #fff; filter: brightness(.96); }

	/* Log in — icoon boven, tekst eronder, onderaan links */
	.mimoda-mobile-nav__login {
		margin: auto 0 34px 46px;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		align-self: flex-start;
		color: var(--mimoda-ink);
		font-size: 11px;
		text-transform: lowercase;
		letter-spacing: .02em;
	}
	.mimoda-mobile-nav__login .mimoda-action__icon { width: 25px; height: 25px; }
	.mimoda-mobile-nav__login:hover { color: var(--mimoda-accent); }

	/* Scroll-lock terwijl drawer/filter open is */
	body.mimoda-no-scroll { overflow: hidden; }
}

/* =========================================================================
   Liggende tablet / kleine laptop (982–1279px). Geen klant-ontwerp → afgeleid
   van het Sjon/Fleur-systeem: hamburger-navigatie (zoals mobiel) maar mét de
   VOLLEDIGE rechter-iconenrij (Zoeken/Verlanglijstje/Log in/Winkelwagen mét
   labels), want daar is op deze breedte ruimte voor. Logo gecentreerd; de
   topbalk houdt alle 3 USP's (passen tot 982px) en behoudt de desktop-hoogtes
   (topbar 42 / navbalk 83). Het inschuivende drawer zelf komt uit het gedeelde
   ≤1279-fundament hierboven. Bovengrens was 1219, maar op 1220–1279 propte de
   volle desktop-nav op elkaar (klant 06-08) → die zone hoort nu bij dit tier.
   Strikt gescopet → geen conflict met het mobiele (≤981) of desktop (≥1280) blok.
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1279px) {

	/* Desktop-hoofdmenu weg; hamburger aan (opent de gedeelde drawer). */
	.mimoda-nav { display: none; }

	.mimoda-header__toggles { display: flex; align-items: center; }
	.mimoda-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 26px;
		height: 26px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mimoda-ink);
		cursor: pointer;
	}
	.mimoda-burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	/* De losse zoek-toggle links vervalt: zoeken zit al in de rechter-rij. */
	.mimoda-action--m-search { display: none; }

	/* Logo absoluut gecentreerd (los van hamburger-/iconen-breedte), net als
	   op mobiel — maar op desktop-formaat (39px, via de default-regel). */
	.mimoda-header__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	/* De rechter-iconenrij blijft de volledige desktop-versie (iconen + labels):
	   de mobiele "labels/zoeken/account verbergen"-regels gelden hier NIET, dus er
	   is niets extra's nodig. */

	/* Login staat op dit formaat al in de header (rechter-iconenrij), dus de
	   login-knop onderin het drawer is dubbelop → verbergen (alleen op tablet). */
	.mimoda-mobile-nav__login { display: none; }
}

/* De vroegere gap-knijp-zone (1220–1279px, desktop-nav met ingeknepen
   tussenruimtes) is vervallen: dat bleef gepropt ogen (klant 06-08). Die
   breedtes vallen nu onder het tablet-tier hierboven (hamburger + volle
   iconenrij); de desktop-nav begint pas op 1280px, waar hij écht past. */