/**
 * SV Mobiel menu — JeVibe
 *
 * Elke selector is met #sv-mmenu gescoped. Dat is bewust: Loobek zet stijlen op
 * kale elementen (o.a. padding: 7px 30px op élke <button>), en een losse klasse
 * verliest het dan van de reset hieronder. Met de ID ervoor wint elke
 * componentregel altijd van de reset én van het thema.
 *
 * Wordt alleen geladen onder het breekpunt (media-attribuut op de <link>), dus
 * een desktopbrowser laat hem de weergave niet blokkeren.
 *
 * Opbouw van dit bestand:
 *   1. Lettertype         5. Hoofdbanner       9.  USP's
 *   2. Ontwerptokens      6. Tabs              10. Lijstweergave (optioneel)
 *   3. Reset              7. Tegels            11. Voetlengte
 *   4. Paneel, kop, lagen 8. Nu trending       12. Snelkoppelingen, a11y
 *
 * Wijzig maten en kleuren bij voorkeur alleen in de tokens (2); de componenten
 * lezen alles daaruit.
 */

/* ----------------------------------------------------------- 1. lettertype */

/*
 * Manrope (SIL Open Font License, zie assets/fonts/OFL.txt), variabel 400–800,
 * alleen het Latin-deel: 25 KB. Zelf gehost onder een eigen naam, zodat het
 * niet botst met de Manrope die het thema op sommige pagina's alleen in
 * gewicht 400 laadt — dan zouden 600/700 nep-vet worden.
 *
 * Wordt pas gedownload als er tekst in deze letter getekend wordt (of als de
 * JavaScript hem na het laden van de pagina alvast ophaalt). font-display:
 * swap: tot die tijd de terugvalletter, nooit onzichtbare tekst.
 */
@font-face {
	font-family: "SV Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------- 2. ontwerptokens */

#sv-mmenu {
	/* Kleur */
	--sv-blauw: #0b63df;
	--sv-blauw-diep: #084fb3;
	--sv-blauw-waas: rgba(11, 99, 223, 0.06);
	--sv-navy: #071b33;
	--sv-tekst: #2b3a4f;          /* lopende tekst: navy, iets zachter */
	--sv-zacht: #627086;          /* subteksten */
	--sv-stil: #9aa5b5;           /* chevrons, hulplijnen */
	--sv-tab: rgba(7, 27, 51, 0.46); /* inactieve tab: transparant navy */
	--sv-lijn: rgba(7, 27, 51, 0.08);
	--sv-lijn-zacht: rgba(7, 27, 51, 0.06);
	--sv-vlak: #f5f8fd;
	--sv-vlak-2: #ebf2fc;
	--sv-bg: #fff;

	/* Typografie: één familie, één schaal. */
	--sv-font: "SV Manrope", "Manrope", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sv-fs-2xs: 11px;
	--sv-fs-xs: 12px;
	--sv-fs-sm: 13px;
	--sv-fs-base: 15px;
	--sv-fs-md: 17px;
	--sv-fs-lg: 20px;
	--sv-lh-kop: 1.12;
	--sv-lh-tekst: 1.4;
	--sv-ls-kop: -0.022em;        /* koppen iets strakker gespatieerd */
	--sv-ls-label: -0.005em;

	/* Gewichten: hiërarchie zonder overal vet. Tussengewichten (450, 540)
	   bestaan echt dankzij de variabele Manrope; geen nep-vet. */
	--sv-fw-tekst: 430;           /* lopende tekst, subteksten */
	--sv-fw-label: 520;           /* tegellabels, inactieve tabs, links */
	--sv-fw-sterk: 600;           /* actieve tab, kaarttitels, knoppen */
	--sv-fw-kop: 690;             /* hero- en sectiekoppen */

	/* Ruimte: één ritme van 4px. */
	--sv-pad: 16px;               /* zijmarge van alle inhoud */
	--sv-s1: 4px;
	--sv-s2: 8px;
	--sv-s3: 12px;
	--sv-s4: 16px;
	--sv-s5: 24px;

	/* Vorm */
	--sv-rond: 14px;
	--sv-rond-s: 12px;
	--sv-schaduw: 0 1px 2px rgba(7, 27, 51, 0.04), 0 6px 16px -8px rgba(7, 27, 51, 0.12);
	--sv-rij: 52px;               /* hoogte van een lijstregel */
	--sv-knop: 40px;              /* zichtbare knophoogte (tikvlak is 44px) */
	--sv-snel: 0.3s cubic-bezier(0.32, 0.72, 0, 1);

	/* --sv-top wordt door de JavaScript gezet op de onderrand van de header.
	   De hele laag begint daar, niet alleen het paneel: anders blijft er een
	   onzichtbaar vlak over de header liggen dat kliks op logo, account en
	   winkelwagen opvangt. Valt de JS uit, dan is de terugval 0. */
	position: fixed;
	top: var(--sv-top, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999; /* boven de sticky header en de floating sidebars van Loobek */

	font-family: var(--sv-font);
	font-size: var(--sv-fs-base);
	font-weight: var(--sv-fw-tekst);
	line-height: var(--sv-lh-tekst);
	color: var(--sv-navy);
	font-feature-settings: "kern" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#sv-mmenu[hidden] {
	display: none;
}

html.sv-mmenu-open,
html.sv-mmenu-open body {
	overflow: hidden;
	touch-action: none;
}

/* --------------------------------------------------------------- 3. reset */

#sv-mmenu *,
#sv-mmenu *::before,
#sv-mmenu *::after {
	box-sizing: border-box;
}

#sv-mmenu button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	-webkit-tap-highlight-color: transparent;
}

#sv-mmenu a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

#sv-mmenu h2,
#sv-mmenu h3,
#sv-mmenu p {
	margin: 0;
	padding: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

#sv-mmenu ul,
#sv-mmenu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sv-mmenu li::before,
#sv-mmenu li::marker {
	content: none;
	display: none;
}

#sv-mmenu [hidden] {
	display: none !important;
}

/* Het thema begrenst afbeeldingen en svg's; dat zou onze iconen laten krimpen
   zodra een ouder smal is. */
#sv-mmenu svg {
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* De JeVibe-iconen (assets/icons) houden hun eigen lijndikte. */
#sv-mmenu svg.sv-ico {
	stroke-width: 1.8;
}

#sv-mmenu img {
	max-width: none;
	border: 0;
	box-shadow: none;
}

/* Tekst die op een vast aantal regels moet blijven. */
#sv-mmenu .sv-mmenu__hero-titel,
#sv-mmenu .sv-mmenu__hero-sub,
#sv-mmenu .sv-mmenu__teaser-titel,
#sv-mmenu .sv-mmenu__teaser-sub {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Alleen afbreken tussen woorden: automatische afbreekstreepjes gaven
	   "vol-gende" in de hero. */
	overflow-wrap: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* ------------------------------------------------- 4. paneel, kop, lagen */

#sv-mmenu .sv-mmenu__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(7, 27, 51, 0.35);
	opacity: 0;
	transition: opacity var(--sv-snel);
}

#sv-mmenu.is-open .sv-mmenu__overlay {
	opacity: 1;
}

#sv-mmenu .sv-mmenu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
	background: var(--sv-bg);
	transform: translateX(100%);
	transition: transform var(--sv-snel);
	will-change: transform;
	outline: none;
}

#sv-mmenu.is-open .sv-mmenu__panel {
	transform: translateX(0);
}

/*
 * Kopregel van een geopende categorie, één rij onder de tabs:
 *   Schoenen                         ← Dames
 * Links de huidige categorie (mag krimpen, krijgt dan "…"), rechts de stap
 * terug (krimpt niet onder de ±40% en houdt altijd zijn pijl).
 */
#sv-mmenu .sv-mmenu__top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-s3);
	min-height: 52px;
	padding: 4px calc(var(--sv-pad) + env(safe-area-inset-right, 0px)) 2px calc(var(--sv-pad) + env(safe-area-inset-left, 0px));
	background: var(--sv-bg);
}

#sv-mmenu .sv-mmenu__titel {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--sv-fs-lg);
	font-weight: var(--sv-fw-sterk);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--sv-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sv-mmenu .sv-mmenu__back {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-width: 72px;
	max-width: 44%;
	min-height: 44px;
	margin-right: -4px;
	padding: 0 4px 0 8px;
	font-size: var(--sv-fs-base);
	font-weight: var(--sv-fw-label);
	letter-spacing: var(--sv-ls-label);
	color: var(--sv-blauw);
	cursor: pointer;
	text-align: right;
}

#sv-mmenu .sv-mmenu__back-tekst {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#sv-mmenu .sv-mmenu__back-pijl {
	display: inline-flex;
	flex: 0 0 auto;
	transform: scaleX(-1);
}

#sv-mmenu .sv-mmenu__back svg {
	width: 18px;
	height: 18px;
}

#sv-mmenu .sv-mmenu__back:active {
	color: var(--sv-blauw-diep);
}

#sv-mmenu .sv-mmenu__sectie-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	font-size: var(--sv-fs-sm);
	font-weight: var(--sv-fw-label);
	letter-spacing: var(--sv-ls-label);
	color: var(--sv-blauw);
	white-space: nowrap;
}

#sv-mmenu .sv-mmenu__sectie-link svg {
	width: 15px;
	height: 15px;
}

/* Zoekbalk (staat standaard uit, filter sv_mmenu_show_search). */
#sv-mmenu .sv-mmenu__search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: var(--sv-s3) var(--sv-pad) var(--sv-s1);
	padding: 0 var(--sv-s4);
	border: 1px solid var(--sv-lijn);
	border-radius: 999px;
	background: var(--sv-vlak);
	flex: 0 0 auto;
}

#sv-mmenu .sv-mmenu__search:focus-within {
	border-color: var(--sv-blauw);
	background: #fff;
}

#sv-mmenu .sv-mmenu__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	height: 46px;
	padding: 0;
	font-family: inherit;
	font-size: 16px; /* 16px voorkomt dat iOS inzoomt */
	color: var(--sv-navy);
	box-shadow: none;
}

#sv-mmenu .sv-mmenu__search button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	color: var(--sv-zacht);
	cursor: pointer;
}

#sv-mmenu .sv-mmenu__search svg {
	width: 20px;
	height: 20px;
}

#sv-mmenu .sv-mmenu__stack {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* Elk niveau scrollt zelf. Flexkolom, zodat het voetblok onderin met
   margin-top: auto naar de bodem kan zakken als er ruimte over is.

   Het niveau is ook de ene contentwrapper van het menu: alleen híer staat
   de zijmarge (--sv-pad plus de veilige zone van het toestel). Alles erin is
   100% breed zonder eigen zijmarges, en staat daardoor links en rechts exact
   op dezelfde lijn. */
#sv-mmenu .sv-mmenu__level {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-left: calc(var(--sv-pad) + env(safe-area-inset-left, 0px));
	padding-right: calc(var(--sv-pad) + env(safe-area-inset-right, 0px));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--sv-bg);
	transform: translateX(0);
	transition: transform var(--sv-snel);
}

#sv-mmenu .sv-mmenu__level > *,
#sv-mmenu .sv-mmenu__paneel > *,
#sv-mmenu .sv-mmenu__hero-slot > * {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Nieuw niveau begint rechts buiten beeld en schuift in. */
#sv-mmenu .sv-mmenu__level.is-entering {
	transform: translateX(100%);
	transition: none;
}

/* Onderliggend niveau schuift een stukje mee naar links: geeft diepte. */
#sv-mmenu .sv-mmenu__level.is-behind {
	transform: translateX(-18%);
}

#sv-mmenu .sv-mmenu__level.is-leaving {
	transform: translateX(100%);
}

/* --------------------------------------------------------- 5. hoofdbanner */

/*
 * Vaste, compacte hoogte (180px op 375, 206px op 430) in plaats van een
 * verhouding: zo groeit
 * de banner nooit mee met de tekst — ook niet bij grotere systeemletters —
 * en verspringt er niets tijdens het laden. Titel en subtekst hebben elk een
 * maximum aantal regels, dus de inhoud past altijd.
 */
#sv-mmenu .sv-mmenu__hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: clamp(172px, 48vw, 208px);
	margin: var(--sv-s3) 0 0;
	overflow: hidden;
	border-radius: var(--sv-rond);
	background: linear-gradient(120deg, var(--sv-vlak-2) 0%, var(--sv-vlak) 100%);
	isolation: isolate;
}

#sv-mmenu .sv-mmenu__hero-beeld {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

#sv-mmenu .sv-mmenu__hero-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* De bannerbeelden houden het onderwerp in de midden/rechterzone en links
	   lucht voor de tekst; bij bijsnijden valt er links lucht weg, niet het
	   onderwerp. */
	object-position: 72% center;
}

/* Lichte waas links, zodat de tekst ook op een drukkere foto leesbaar blijft. */
#sv-mmenu .sv-mmenu__hero-beeld::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.44) 46%, rgba(255, 255, 255, 0) 72%);
}

#sv-mmenu .sv-mmenu__hero-tekst {
	width: 68%;
	padding: var(--sv-s4) 0 var(--sv-s4) var(--sv-s4);
}

#sv-mmenu .sv-mmenu__hero-titel {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: clamp(18px, 5.2vw, 23px);
	font-weight: var(--sv-fw-kop);
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--sv-navy);
}

/* Slogan: kleiner, rustiger en iets zachter dan de titel. pre-line laat een
   regelovergang uit het beheerveld staan (de tekst zelf is platte tekst). */
#sv-mmenu .sv-mmenu__hero-sub {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin-top: 6px;
	font-size: clamp(13px, 3.6vw, 15px);
	font-weight: var(--sv-fw-tekst);
	line-height: 1.35;
	color: #3f4e64;
	white-space: pre-line;
}

/* Knop: 40px zichtbaar, 44px tikvlak (de ::before steekt 2px uit). */
#sv-mmenu .sv-mmenu__hero-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--sv-knop);
	margin-top: var(--sv-s3);
	padding: 0 var(--sv-s4) 0 18px;
	border-radius: 999px;
	background: var(--sv-blauw);
	box-shadow: 0 6px 14px -6px rgba(11, 99, 223, 0.55);
	color: #fff;
	font-size: var(--sv-fs-sm);
	font-weight: var(--sv-fw-sterk);
	line-height: 1;
	letter-spacing: 0.005em;
	white-space: nowrap;
	transition: background-color 0.2s;
}

#sv-mmenu .sv-mmenu__hero-cta::before {
	content: "";
	position: absolute;
	top: -2px;
	right: 0;
	bottom: -2px;
	left: 0;
}

#sv-mmenu .sv-mmenu__hero-cta svg {
	width: 16px;
	height: 16px;
}

#sv-mmenu .sv-mmenu__hero-cta:active {
	background: var(--sv-blauw-diep);
}

/* ---------------------------------------------------------------- 6. tabs */

/*
 * Vier gelijke vakken over de hele breedte; de onderstreping loopt onder het
 * hele vak, dun en strak. Doordat de vakken vast zijn, verschuift er niets als
 * het actieve woord iets zwaarder wordt.
 * Inactief: transparant navy, rustig. Actief: JeVibe-blauw.
 */
/* De balk staat buiten de niveaus (op elk niveau zichtbaar), dus hij draagt
   zelf dezelfde zijmarge als de inhoud eronder. */
#sv-mmenu .sv-mmenu__tabbalk {
	flex: 0 0 auto;
	padding: 2px calc(var(--sv-pad) + env(safe-area-inset-right, 0px)) 0 calc(var(--sv-pad) + env(safe-area-inset-left, 0px));
	background: var(--sv-bg);
}

#sv-mmenu .sv-mmenu__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	width: 100%;
	margin: 0;
	border-bottom: 1px solid var(--sv-lijn-zacht);
}

#sv-mmenu .sv-mmenu__tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 4px;
	font-size: var(--sv-fs-base);
	font-weight: var(--sv-fw-label);
	letter-spacing: -0.01em;
	color: var(--sv-tab);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: color 0.2s;
}

#sv-mmenu .sv-mmenu__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--sv-blauw);
	transform: scaleX(0);
	transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

#sv-mmenu .sv-mmenu__tab.is-active {
	color: var(--sv-blauw);
	font-weight: var(--sv-fw-sterk);
}

#sv-mmenu .sv-mmenu__tab.is-active::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------- 7. tegels */

/* Twee gelijke kolommen, geen maximum. Bij een oneven aantal blijft de laatste
   tegel gewoon even breed als de rest. */
#sv-mmenu .sv-mmenu__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: var(--sv-s3) 0 0;
}

/* Precies één kind: één brede kaart over de hele rij. */
#sv-mmenu .sv-mmenu__tiles > .sv-mmenu__tile:only-child {
	grid-column: 1 / -1;
}

#sv-mmenu .sv-mmenu__tiles > .sv-mmenu__tile:only-child .sv-mmenu__tile-beeld {
	aspect-ratio: 2 / 1;
}

#sv-mmenu .sv-mmenu__tiles > .sv-mmenu__tile:only-child .sv-mmenu__tile-beeld.is-leeg {
	padding-bottom: 12%;
}

#sv-mmenu .sv-mmenu__tile {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--sv-lijn-zacht);
	border-radius: var(--sv-rond);
	background: var(--sv-vlak);
	box-shadow: var(--sv-schaduw);
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

/* 3:2 — iets breder dan het 4:3-bronbeeld (640×480), zoals in het ontwerp;
   cover snijdt dan ±11% boven en onder weg. Daarom luidt het advies in het
   beheer "onderwerp centraal houden". */
#sv-mmenu .sv-mmenu__tile-beeld,
#sv-mmenu .sv-mmenu__tile-plek {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
}

@supports not (aspect-ratio: 3 / 2) {
	#sv-mmenu .sv-mmenu__tile-beeld,
	#sv-mmenu .sv-mmenu__tile-plek {
		height: 0;
		padding-bottom: 66.667%;
	}
}

#sv-mmenu .sv-mmenu__tile-beeld img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Geen beeld ingesteld: rustig JeVibe-vlak met een klein icoon. */
#sv-mmenu .sv-mmenu__tile-beeld.is-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 22%;
	background: linear-gradient(150deg, var(--sv-vlak-2) 0%, var(--sv-vlak) 100%);
	color: rgba(11, 99, 223, 0.34);
}

#sv-mmenu .sv-mmenu__tile-beeld.is-leeg svg {
	width: 32px;
	height: 32px;
}

/* Lege vakken terwijl een niveau wordt opgehaald. */
#sv-mmenu .sv-mmenu__tile-plek {
	border-radius: var(--sv-rond);
	background: #eef2f7;
}

/*
 * Label linksonder op het beeld: licht doorschijnend wit met een zachte
 * blur, als pil die in de foto ligt in plaats van eroverheen geplakt.
 * Zonder backdrop-filter (oudere browsers) wordt het vlak iets dichter, zodat
 * het contrast blijft.
 */
#sv-mmenu .sv-mmenu__tile-naam {
	position: absolute;
	left: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 12px);
	padding: 7px 12px 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 2px rgba(7, 27, 51, 0.08);
	font-size: 14.5px;
	font-weight: var(--sv-fw-label);
	line-height: 1.2;
	letter-spacing: -0.008em;
	color: var(--sv-navy);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#sv-mmenu .sv-mmenu__tile-naam {
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: blur(8px) saturate(1.2);
		backdrop-filter: blur(8px) saturate(1.2);
	}
}

/* Een lange naam krijgt een beletselteken; de pijl blijft staan. */
#sv-mmenu .sv-mmenu__tile-tekst {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sv-mmenu .sv-mmenu__tile-naam svg {
	width: 15px;
	height: 15px;
	color: var(--sv-navy);
}

#sv-mmenu .sv-mmenu__tile:active {
	transform: scale(0.98);
	box-shadow: 0 1px 2px rgba(7, 27, 51, 0.06);
}

#sv-mmenu .sv-mmenu__tile:active .sv-mmenu__tile-naam,
#sv-mmenu .sv-mmenu__tile:active .sv-mmenu__tile-naam svg {
	color: var(--sv-blauw);
}

@media (hover: hover) and (pointer: fine) {
	#sv-mmenu .sv-mmenu__tile:hover .sv-mmenu__tile-naam,
	#sv-mmenu .sv-mmenu__tile:hover .sv-mmenu__tile-naam svg {
		color: var(--sv-blauw);
	}
}

/* --------------------------------------------------------- 8. Nu trending */

#sv-mmenu .sv-mmenu__trend {
	width: 100%;
	margin: var(--sv-s5) 0 0;
}

#sv-mmenu .sv-mmenu__sectie-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-s3);
	width: 100%;
	margin-bottom: 2px;
}

#sv-mmenu .sv-mmenu__sectie-titel {
	min-width: 0;
	font-size: var(--sv-fs-md);
	font-weight: var(--sv-fw-kop);
	line-height: var(--sv-lh-kop);
	letter-spacing: var(--sv-ls-kop);
	color: var(--sv-navy);
}

/* Evenveel gelijke kolommen als er teasers zijn (één of twee). */
#sv-mmenu .sv-mmenu__teasers {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 10px;
	width: 100%;
}

/*
 * Compacte teaser: beeld links, tekst rechts, kleine ronde pijl. Vaste hoogte
 * van 100px: titel maximaal twee regels, subtekst maximaal drie, en dat past
 * precies — lange tekst wordt afgekapt in plaats van de kaart op te rekken.
 */
#sv-mmenu .sv-mmenu__teaser {
	--sv-teaser-beeld: 28%;
	position: relative;
	display: grid;
	grid-template-columns: var(--sv-teaser-beeld) minmax(0, 1fr);
	height: 100px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--sv-lijn-zacht);
	border-radius: var(--sv-rond-s);
	background: var(--sv-vlak);
}

#sv-mmenu .sv-mmenu__teaser-beeld {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--sv-vlak-2);
}

#sv-mmenu .sv-mmenu__teaser-beeld img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#sv-mmenu .sv-mmenu__teaser-beeld.is-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sv-blauw);
}

#sv-mmenu .sv-mmenu__teaser-beeld.is-leeg svg {
	width: 24px;
	height: 24px;
	opacity: 0.8;
}

#sv-mmenu .sv-mmenu__teaser-tekst {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 3px;
	min-width: 0;
	padding: 9px 10px 9px 11px;
}

/* Titel en slogan hebben de volle breedte van de tekstkolom. */
#sv-mmenu .sv-mmenu__teaser-titel {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/* De titel heeft de volle tekstbreedte (de pijl staat op het beeld), dus
	   ook een lang eigen woord als "babymerken" past. Alleen een woord dat
	   zelfs dan te lang is, wordt als laatste redmiddel gebroken. */
	overflow-wrap: break-word;
	font-size: 14px;
	font-weight: var(--sv-fw-sterk);
	line-height: 1.15;
	letter-spacing: -0.012em;
	color: var(--sv-navy);
}

#sv-mmenu .sv-mmenu__teaser-sub {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: 12px;
	font-weight: var(--sv-fw-tekst);
	line-height: 1.25;
	color: var(--sv-zacht);
	white-space: pre-line; /* regelovergang uit het beheerveld blijft staan */
}

/* Rechtsboven, op één lijn met de eerste regel van de titel. */
/* Ronde pijl rechtsonder op het beeld: zo neemt hij geen tekstruimte weg en
   staat hij op elke breedte op dezelfde plek. */
#sv-mmenu .sv-mmenu__teaser-pijl {
	position: absolute;
	left: calc(var(--sv-teaser-beeld) - 28px);
	bottom: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(7, 27, 51, 0.12);
	color: var(--sv-blauw);
}

#sv-mmenu .sv-mmenu__teaser-pijl svg {
	width: 13px;
	height: 13px;
}

#sv-mmenu .sv-mmenu__teaser:active {
	background: var(--sv-vlak-2);
}

/* ---------------------------------------------------------------- 9. USP's */

/*
 * Drie gelijke kolommen op wit, gescheiden door een dunne verticale lijn.
 * Per kolom het icoon links en titel + subtekst ernaast (grid: icoon over
 * twee rijen). Op schermen smaller dan 360px gaat het icoon boven de tekst.
 */
#sv-mmenu .sv-mmenu__usps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	margin: var(--sv-s5) 0 0;
}

#sv-mmenu .sv-mmenu__usp {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 7px;
	row-gap: 2px;
	align-content: start;
	min-width: 0;
	padding: 2px 8px;
}

#sv-mmenu .sv-mmenu__usp:first-child {
	padding-left: 0;
}

#sv-mmenu .sv-mmenu__usp:last-child {
	padding-right: 0;
}

#sv-mmenu .sv-mmenu__usp + .sv-mmenu__usp {
	border-left: 1px solid var(--sv-lijn);
}

#sv-mmenu .sv-mmenu__usp-icoon {
	grid-row: 1 / span 2;
	display: flex;
	padding-top: 1px;
	color: var(--sv-blauw);
}

#sv-mmenu .sv-mmenu__usp-icoon svg {
	width: 22px;
	height: 22px;
}

#sv-mmenu .sv-mmenu__usp-titel {
	font-size: var(--sv-fs-xs);
	font-weight: var(--sv-fw-sterk);
	line-height: 1.2;
	letter-spacing: -0.008em;
	color: var(--sv-navy);
	overflow-wrap: anywhere;
}

#sv-mmenu .sv-mmenu__usp-tekst {
	font-size: var(--sv-fs-2xs);
	font-weight: var(--sv-fw-tekst);
	line-height: 1.3;
	color: var(--sv-zacht);
	overflow-wrap: anywhere;
}

/* Smalle schermen (<375): iets smallere beeldkolom en titel in de trending-
   tegels, zodat een lang woord ("babymerken") naast de pijl past. */
@media (max-width: 374px) {
	#sv-mmenu .sv-mmenu__teaser {
		--sv-teaser-beeld: 30%;
	}

	#sv-mmenu .sv-mmenu__teaser-titel {
		font-size: 13px;
	}
}

/* ----------------------------------------------- heel smalle schermen (<360) */

@media (max-width: 359px) {
	/* Hero: op zo'n smal scherm kan een eigen titel drie regels nodig hebben.
	   De banner is hier minimaal (niet exact) 172px, zodat hij dan iets
	   meegroeit in plaats van slogan of knop af te snijden. De hoogte hangt
	   alleen van de tekst af, niet van het beeld, dus er verspringt niets
	   tijdens het laden. */
	#sv-mmenu .sv-mmenu__hero {
		height: auto;
		min-height: 172px;
	}

	#sv-mmenu .sv-mmenu__hero-titel {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	#sv-mmenu .sv-mmenu__tab {
		padding: 0 2px;
		font-size: 14px;
	}

	#sv-mmenu .sv-mmenu__tile-naam {
		padding: 6px 10px;
		font-size: 13px;
	}

	#sv-mmenu .sv-mmenu__teaser-tekst {
		padding: var(--sv-s2) var(--sv-s2) var(--sv-s2) 9px;
	}

	#sv-mmenu .sv-mmenu__teaser-sub {
		font-size: var(--sv-fs-2xs);
	}

	#sv-mmenu .sv-mmenu__usp {
		grid-template-columns: minmax(0, 1fr);
		padding: 2px 5px;
	}

	#sv-mmenu .sv-mmenu__usp-icoon {
		grid-row: auto;
		margin-bottom: 4px;
	}

	#sv-mmenu .sv-mmenu__usp-titel {
		font-size: 11px;
	}

	#sv-mmenu .sv-mmenu__usp-tekst {
		font-size: 10.5px;
	}
}

/* ------------------------------------------- 10. lijstweergave (optioneel) */

/* Alleen in gebruik als de tegels met het filter sv_mmenu_tiles uit staan. */
#sv-mmenu .sv-mmenu__list {
	padding: var(--sv-s1) 0 var(--sv-s4);
}

#sv-mmenu .sv-mmenu__row {
	position: relative;
	display: flex;
}

#sv-mmenu .sv-mmenu__row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--sv-lijn);
}

#sv-mmenu .sv-mmenu__link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: var(--sv-rij);
	padding: 10px 2px;
	font-size: var(--sv-fs-base) !important;
	font-weight: var(--sv-fw-label) !important;
	line-height: 1.35;
	color: var(--sv-navy) !important;
	text-align: left;
	cursor: pointer;
}

#sv-mmenu .sv-mmenu__link:active {
	background: var(--sv-blauw-waas);
}

#sv-mmenu .sv-mmenu__rij-beeld {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 32px;
	margin-right: 14px;
}

#sv-mmenu .sv-mmenu__rij-beeld img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#sv-mmenu .sv-mmenu__label {
	flex: 1 1 auto;
	min-width: 0;
}

#sv-mmenu .sv-mmenu__drill {
	flex: 0 0 auto;
	display: flex;
	color: var(--sv-stil);
}

#sv-mmenu .sv-mmenu__drill svg {
	width: 17px;
	height: 17px;
}

/* ------------------------------------------------- 11. vraag om voetlengte */

#sv-mmenu .sv-mmenu__voetmaat {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sv-s1);
	padding: 14px var(--sv-pad);
	border-top: 1px solid var(--sv-lijn);
	background: var(--sv-vlak);
}

#sv-mmenu .sv-mmenu__voetmaat-titel {
	font-size: var(--sv-fs-base);
	font-weight: var(--sv-fw-sterk);
	letter-spacing: var(--sv-ls-label);
	color: var(--sv-navy);
}

#sv-mmenu .sv-mmenu__voetmaat-uitleg {
	font-size: var(--sv-fs-sm);
	color: var(--sv-zacht);
}

#sv-mmenu .sv-mmenu__voetmaat-rij {
	display: flex;
	align-items: center;
	gap: var(--sv-s2);
	margin-top: var(--sv-s2);
}

#sv-mmenu .sv-mmenu__voetmaat-veld {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 var(--sv-s3);
	border: 1px solid var(--sv-lijn);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 16px; /* 16px voorkomt dat iOS inzoomt bij focus */
	color: var(--sv-navy);
	box-shadow: none;
}

#sv-mmenu .sv-mmenu__voetmaat-veld:focus {
	outline: none;
	border-color: var(--sv-blauw);
}

#sv-mmenu .sv-mmenu__voetmaat-eenheid {
	flex: 0 0 auto;
	font-size: var(--sv-fs-sm);
	color: var(--sv-zacht);
}

#sv-mmenu .sv-mmenu__voetmaat-knop {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--sv-blauw);
	color: #fff;
	font-size: var(--sv-fs-sm);
	font-weight: var(--sv-fw-sterk);
	cursor: pointer;
}

#sv-mmenu .sv-mmenu__voetmaat-knop:active {
	background: var(--sv-blauw-diep);
}

#sv-mmenu .sv-mmenu__voetmaat-fout {
	font-size: var(--sv-fs-sm);
	color: #b3261e;
}

#sv-mmenu .sv-mmenu__voetmaat-weg {
	align-self: flex-start;
	min-height: 36px;
	font-size: var(--sv-fs-sm);
	color: var(--sv-zacht);
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------- 12. snelkoppelingen */

/* margin-top: auto: zolang de inhoud erboven het scherm niet vult, duwt deze
   marge het blok naar de bodem. Zodra er gescrold moet worden, komt het
   gewoon achter de inhoud. */
#sv-mmenu .sv-mmenu__voet {
	margin-top: auto;
	display: block;
	padding: var(--sv-s4) 0 calc(var(--sv-s3) + env(safe-area-inset-bottom, 0px));
}

#sv-mmenu .sv-mmenu__voet-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--sv-rij);
	padding: 6px 2px;
	font-size: var(--sv-fs-base);
	font-weight: var(--sv-fw-tekst);
	line-height: 1.3;
	letter-spacing: var(--sv-ls-label);
	color: var(--sv-navy);
}

#sv-mmenu .sv-mmenu__voet-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--sv-lijn-zacht);
}

#sv-mmenu .sv-mmenu__voet-link:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--sv-lijn-zacht);
}

#sv-mmenu .sv-mmenu__voet-icoon {
	flex: 0 0 auto;
	display: flex;
	font-size: 20px;
	line-height: 1;
	color: var(--sv-navy);
}

#sv-mmenu .sv-mmenu__voet-icoon svg {
	width: 21px;
	height: 21px;
}

#sv-mmenu .sv-mmenu__voet-label {
	flex: 1 1 auto;
	min-width: 0;
}

#sv-mmenu .sv-mmenu__voet-link > svg {
	width: 17px;
	height: 17px;
	color: var(--sv-stil);
}

#sv-mmenu .sv-mmenu__voet-link:active {
	background: var(--sv-blauw-waas);
	color: var(--sv-blauw);
}

/* ------------------------------------------------------ toegankelijkheid */

#sv-mmenu :focus-visible {
	outline: 2px solid var(--sv-blauw);
	outline-offset: 2px;
	border-radius: 6px;
}

#sv-mmenu .sv-mmenu__panel:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	#sv-mmenu .sv-mmenu__panel,
	#sv-mmenu .sv-mmenu__overlay,
	#sv-mmenu .sv-mmenu__level,
	#sv-mmenu .sv-mmenu__tab::after,
	#sv-mmenu .sv-mmenu__tile {
		transition: none;
	}
}