/* ============================================================
   HEADER 2027 — assets/header-2027.css
   Inladen NA site.css (laatste stylesheet in layouts/custom.rain).
   Alle selectors zijn gescoped op .header27 / .header27-* zodat
   dit bestand niets raakt in style.css, settings.css of site.css.

   Vereist: class="header27" op het <header>-element in de layout:
   <header class="header27">{% include 'snippets/header-2027.rain' %}</header>
   ============================================================ */

/* ---------- 1 · Tokens ----------
   Eén plek voor kleuren. Het thema gebruikt nu 4 tinten rood
   (#e20f1b, #cc131d, #d01016, #CC121E) — hier consolideren we op één. */
:root {
	--h27-red: #e20f1b;
	--h27-red-hover: #c40d17;
	--h27-red-second: #FF3A3A;
	--h27-bg-top: #000;
	--h27-bg-main: #0b0b0b;
	--h27-bg-subnav: #333;
	--h27-text: #fff;
	--h27-text-dim: rgba(255, 255, 255, .75);
	--h27-text-dark: #000;
	--h27-line: rgba(0, 0, 0, .2);
	--h27-star: #f7b500;
	--h27-radius: 4px;
	--h27-gap: 24px;
	--h27-topbar-h: 38px;
	--h27-subnav-h: 46px;
}

/* ---------- 2 · Legacy-reset ----------
   De oude header was position:fixed met body{padding-top:80px} als
   compensatie. De 2027-header is sticky en reserveert zijn eigen
   ruimte in de flow, dus die padding moet weg. Dit bestand wordt
   alleen geladen in layouts die de nieuwe header gebruiken. */
body {
	padding-top: 0;
}

/* ---------- 3 · Wrapper ---------- */
.header27 {
	position: sticky;
	top: 0;
	z-index: 300; /* zelfde laag als oude #header-holder */
}

/* Geen eigen font: de header erft het sitefont (Poppins). Buttons en
   inputs erven standaard géén font van hun parent (UA-default), dus
   die moeten expliciet op inherit. */
.header27 button,
.header27 input,
.header27-search .searchbox {
	font-family: inherit;
}

.header27 a {
	text-decoration: none;
}

.header27 :focus-visible {
	outline: 2px solid var(--h27-star);
	outline-offset: 2px;
}

/* ---------- 4 · Rij 1 · Topbar: USP's / reviews / taal ---------- */
.header27-topbar {
	background: var(--h27-bg-top);
	color: var(--h27-text);
	font-size: .8rem;
	border-bottom: 1px solid var(--h27-line);
}

.header27-topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--h27-gap);
	min-height: var(--h27-topbar-h);
}

/* USP's tonen er automatisch minder als de ruimte op is (3 → 2 → 1).
   Truc: items mogen wrappen naar een tweede regel, maar de lijst is
   precies één regel hoog met overflow:hidden — wat wrapt, valt buiten
   beeld. Geen breakpoints nodig; werkt dus ook met langere FR-teksten. */
.header27-usps {
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	flex: 1;
	min-width: 0; /* mag krimpen; zonder dit duwt de lijst reviews/taal weg */
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: var(--h27-topbar-h);
	overflow: hidden;
}

.header27-usps li {
	display: flex;
	align-items: center;
	gap: 7px;
	height: var(--h27-topbar-h); /* elke regel = exact de cliphoogte */
	white-space: nowrap;
}

.header27-usps .fa-check {
	font-size: .7rem;
}

.header27-mobile-usps,
.header27-mobile-reviews,
.header27-mobile-menu {
	display: none;
}

.header27-reviews {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0; /* reviews en taal blijven altijd staan; de USP's leveren in */
	white-space: nowrap;
}

.header27-stars {
	color: var(--h27-star);
	letter-spacing: 2px;
}

.header27-reviews a {
	color: var(--h27-text);
	text-decoration: underline;
}

.header27-lang {
	position: relative; /* anker voor de fancy-taal flyout */
	flex-shrink: 0;
}

.header27-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--h27-radius);
	padding: 10px 16px;
	color: var(--h27-text);
	background: none;
	border: 0;
	font-size: inherit;
	cursor: pointer;
}

.header27-lang-toggle:hover {
	background: transparent;
	text-decoration: underline;
}

/* Dropdown onder de taalknop (eigen implementatie, geen legacy fancy-flyout) */
.header27-lang-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: #fff;
	color: #333;
	border-radius: var(--h27-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
	padding: 6px 0;
	z-index: 20;
}

.header27-lang-dropdown[hidden] {
	display: none;
}

.header27-lang-dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header27-lang-dropdown a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	color: #333;
	white-space: nowrap;
}

.header27-lang-dropdown a:hover {
	background: #f4f4f4;
}


.header27-lang .header27-lang-toggle .flags {
	display: none;
}

/* ---------- 5 · Rij 2 · Main bar ---------- */
.header27-main {
	background: white;
	color: var(--h27-text);
	border-bottom: 1px solid var(--h27-line);
	position: relative; /* anker voor de zoek-overlay */
}

.header27-main [id^=dmws-p_w8g3t0-vat-switch] {
	margin-right: 0;
}

.header27-main [id^=dmws-p_w8g3t0-vat-switch] > b {
	font-weight: 400;
	font-size: 13px;
}

/* 1fr auto 1fr: logo blijft exact gecentreerd, ongeacht hoe
   breed de linker- en rechterkant zijn. */
.header27-main-grid {
	background: white;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--h27-gap);
	min-height: 72px;
}

.header27-main-grid:before,
.header27-main-grid:after {
	content: "";
	display: none;
}

.header27-left {
	display: flex;
	align-items: center;
	gap: 22px;
}

.header27-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

/* Rode categorieën-knop. Extra .categories-button in de selector
   zodat we eventuele legacy-regels op die class zeker overrulen. */
.header27-categories,
.header27-categories.categories-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--h27-red);
	color: var(--h27-text);
	border: 0;
	border-radius: var(--h27-radius);
	padding: 10px 16px;
	font-size: .8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .2s ease;
}

.header27-categories:hover,
.header27-categories.categories-button:hover {
	background: var(--h27-red-hover);
}

.header27-categories svg {
	display: block;
	flex-shrink: 0; /* chevron mag nooit smaller geknepen worden */
	transition: transform .2s ease;
}

/* De fill staat hardcoded in de svg (#D9D9D9). currentColor laat de
   chevron meekleuren met de knoptekst — de path-selector is nodig
   omdat het fill-attribuut op de path zelf staat. */
.header27-categories svg path {
	fill: currentColor;
}

/* Pijl klapt om als het megamenu open is (JS toggelt aria-expanded). */
.header27-categories[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.header27-quicklinks {
	display: flex;
	align-items: center;
	gap: 22px;
}

.header27-quicklinks a {
	color: var(--h27-text-dark);
	font-weight: 400;
	font-size: .95rem;
}

.header27-quicklinks a:hover {
	opacity: .8;
}

.header27-quicklinks a.is-highlight {
	color: var(--h27-red);
}

.header27-logo img {
	display: block;
	max-height: 44px;
	width: auto;
}

.header27-right > a,
.header27-right > button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--h27-text-dark);
	background: none;
	border: 0;
	font-size: .95rem;
	padding: 4px;
	cursor: pointer;
}

.header27-right > a:hover,
.header27-right > button:hover {
	opacity: 0.8;
}

.header27-divider {
	width: 1px;
	height: 16px;
	background: var(--h27-line);
}

.header27-right .nova-icon,
.header27-search-toggle .fa-search {
	font-size: 1.25rem;
}

/* Cart-badge. #qty in de selector zodat we legacy-regels op dat id
   (specificiteit!) zeker verslaan. */
.header27-right .cart {
	position: relative;
}

.header27-right .cart .cart-total-qty,
.header27 #qty {
	position: absolute;
	top: -6px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 50%;
	background: var(--h27-red-second);
	color: var(--h27-text);
	font-size: .7rem;
	line-height: 18px;
	text-align: center;
}

/* ---------- 6 · Zoek-overlay (uitklapbaar onder rij 2) ---------- */
.header27-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	padding: 14px 0;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.header27-search[hidden] {
	display: none;
}

.header27-search .searchform,
.header27-search .searchcontent {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px;
}

/* style.css zet .searchcontent/.more/.noresults op display:none en
   absolute/400px (dropdown in de oude header). Hier stroomt alles mee
   in het witte paneel, en header-2027.js toggelt via [hidden] — dat
   attribuut verliest van een CSS display-regel, dus beide kanten
   moeten hier expliciet. */
.header27-search .searchcontent {
	display: block;
	position: static;
	width: auto;
	box-shadow: none;
	padding-top: 6px;
}

.header27-search .more,
.header27-search .noresults {
	display: block;
}

.header27-search .searchcontent[hidden],
.header27-search .more[hidden],
.header27-search .noresults[hidden] {
	display: none;
}

/* Resultatenlijst zoals header-2027.js hem rendert:
   li > a > img + .result-title + .result-price */
.header27-search .searchresults ul {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header27-search .searchresults li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.header27-search .searchresults a {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	gap: 12px;
	padding: 8px 6px;
	color: #333;
	border-radius: var(--h27-radius);
}

.header27-search .searchresults a:hover {
	background: #f4f4f4;
}

.header27-search .searchresults .result-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header27-search .searchresults .result-price {
	font-weight: 600;
}

.header27-search .searchbox {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: var(--h27-radius);
	padding: 12px 16px;
	font-size: 1rem;
}

.header27-search .searchbox:focus {
	border-color: var(--h27-red);
	outline: none;
}

.header27-search-submit {
	display: none;
}

/* ---------- 7 · Rij 3 · Subnav ---------- */
.header27-subnav {
	background: var(--h27-bg-subnav);
}

.header27-subnav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--h27-gap);
	min-height: var(--h27-subnav-h);
}

.header27-subnav .container:before,
.header27-subnav .container:after {
	display: none;
	content: "";
}

.header27-subnav-cats {
	display: flex;
	align-items: center;
	gap: 4px;
}

.header27-subnav-cats a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 13px 12px;
	color: var(--h27-text);
	font-size: .85rem;
	white-space: nowrap;
	transition: background .15s ease;
	letter-spacing: -0.01em;
}

.header27-subnav-cats a:hover {
	background: rgba(255, 255, 255, .08);
}

.header27-subnav-cats .fa-chevron-down {
	font-size: .6rem;
	opacity: .7;
}

.header27-subnav-service {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header27-subnav-service a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--h27-text);
	font-size: .85rem;
	white-space: nowrap;
}

/* ---------- 8 · Megamenu-anker ----------
   desktopmenu.rain wordt in de oude header onder .subheader
   gepositioneerd; hier hangen we hem onder de hele header. De
   basisstyling van het megamenu komt uit style.css; alleen de
   expliciete full-width-modus wordt hieronder overschreven. */
.header27 .nav-main-holder {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

/* De horizontale categorierij toont op desktop alleen het submenu van
   de actieve categorie als volledige-breedte paneel. Zonder deze
   modusklasse blijft het bestaande menu met 280px-sidebar intact voor
   de knop "Categorieën" en voor kleinere schermen. */
@media (min-width: 992px) {
	/* Sidebar-modus: zelfde horizontale begrenzing als de overige
	   .container-elementen in de header. */
	.header27 #header27-megamenu:not(.is-full-width) {
		top: calc(100% - var(--h27-subnav-h));
		right: 0;
		margin-top: 0;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
	}

	/* De nav vormt het positioneringsvlak voor sidebar en flyout.
	   Alleen de eerste 280px krijgen de witte sidebar-achtergrond. */
	.header27 #header27-megamenu:not(.is-full-width) .nav-main {
		width: 100%;
		background: linear-gradient(to right, #fff 0, #fff 280px, transparent 280px);
	}

	.header27 #header27-megamenu:not(.is-full-width) .nav-main > .nav-main-item {
		width: 280px;
	}

	/* Alle flyouts beginnen naast de sidebar. Alleen bestaande
	   megamenu's vullen vervolgens de volledige resterende ruimte. */
	.header27 #header27-megamenu:not(.is-full-width) .nav-main > .nav-main-item > .nav-main-sub {
		left: 280px;
	}

	.header27 #header27-megamenu:not(.is-full-width) .nav-main > .nav-main-item > .nav-main-sub.full-width.mega {
		right: 0;
		width: auto;
	}

	.header27 #header27-megamenu.is-full-width .nav-main {
		width: 100%;
		margin: 0;
		padding: 0;
		background: transparent;
	}

	.header27 #header27-megamenu.is-full-width .nav-main > .nav-main-item {
		padding: 0;
	}

	.header27 #header27-megamenu.is-full-width a.nav-main-item-name {
		display: none;
	}

	.header27 #header27-megamenu.is-full-width .nav-main-sub {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		min-height: 0;
		border-left: 0;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
	}
}

/* Bootstrap-containerbreedtes uit bootstrap.css, toegepast op de
   absoluut gepositioneerde sidebar-modus van het megamenu. */
@media (min-width: 1200px) and (max-width: 1299px) {
	.header27 #header27-megamenu:not(.is-full-width) {
		max-width: 1170px;
	}
}

@media (min-width: 1300px) {
	.header27 #header27-megamenu:not(.is-full-width) {
		max-width: 1290px;
	}
}

/* Eigen dimmer (header-2027.js), los van legacy .subnav-dimmed.
   z-index -1 legt hem achter de headerrijen, maar omdat .header27
   zelf op z-index 300 staat ligt hij nog steeds over de pagina. */
.header27-dimmer {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.header27-dimmer.active {
	opacity: 1;
	visibility: visible;
}

/* ---------- 9 · Actiebanner boven de header ----------
   Staat buiten .header27 (zie layouts/custom.rain): een eigen blok direct
   vóór het sticky header-element, dus deze banner scrollt gewoon weg.
   Full-bleed volgens het bestaande patroon: achtergrond op het buiten-
   element, inhoud in een .container. */
.promo27 {
	position: relative;
	display: block;
	overflow: hidden;
	background: #9d0100;
	color: #fff !important;
}

.promo27-wave {
	position: absolute;
	top: -1px;
	left: 7px;
	width: 142px;
	height: 94px;
	opacity: .18;
	pointer-events: none;
}

.promo27-wave--end {
	left: auto;
	right: 7px;
}

.promo27-desktop {
	position: relative;
	z-index: 2;
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: 13px;
	line-height: 1.2;
}

.promo27-image {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.promo27-desktop strong {
	font-weight: 700;
}

.promo27-link {
	margin-left: 8px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Marquee is de mobiele variant; op desktop toont .promo27-desktop. */
.promo27-marquee {
	display: none;
}

/* ---------- 10 · Responsive ----------
   Mobiel/tablet: USP-marquee · hamburger/logo/cart · zoeken · reviews. */
@media (max-width: 991px) {
	.header27 .nav-main-holder {
		overflow: hidden;
	}

	/* Banner: desktop-rij eruit, tekst loopt als marquee voorbij. Zelfde
	   opzet als de USP-ticker hierboven: twee identieke helften, elk met
	   eigen trailing padding, animatie naar translateX(-50%). */
	.promo27-desktop {
		display: none;
	}

	.promo27-marquee {
		display: block;
		width: 100%;
		overflow: hidden;
	}

	.promo27-marquee-track {
		display: flex;
		width: max-content;
		will-change: transform;
		animation: promo27-marquee 22s linear infinite;
	}

	.promo27-marquee-item {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 38px;
		padding-right: 42px;
		white-space: nowrap;
		font-size: 13px;
	}

	.promo27-marquee-item strong {
		font-weight: 700;
	}
	.header27-topbar .container {
		width: 100%;
		min-height: 38px;
		padding: 0;
		overflow: hidden;
	}

	.header27-topbar .header27-reviews,
	.header27-topbar .header27-lang {
		display: none;
	}

	.header27-mobile-usps {
		display: block;
		width: 100%;
		overflow: hidden;
	}

	/* Stapsgewijze USP-ticker: elk item is precies zo breed als de balk,
	   de animatie houdt elke positie vast en verspringt dan naar de
	   volgende. 4 items (3 USP's + herhaling van de eerste) => track 400%,
	   item 25%. Let op: bij het toevoegen/verwijderen van een USP moeten
	   deze percentages én de keyframes mee worden aangepast. */
	.header27-mobile-usps-track {
		display: flex;
		width: 400%;
		margin: 0;
		padding: 0;
		list-style: none;
		will-change: transform;
		animation: header27-usp-step 12s ease-in-out infinite;
	}

	.header27-mobile-usps li {
		display: inline-flex;
		width: 25%;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 38px;
		white-space: nowrap;
		font-size: 13px;
	}

	.header27-mobile-usps .fa-check {
		font-size: 13px;
	}

	.header27-main-grid {
		grid-template-columns: 1fr auto 1fr;
		gap: 16px;
		width: 100%;
		min-height: 70px;
		padding-right: 22px;
		padding-left: 22px;
	}

	.header27-logo img {
		max-height: 46px;
	}

	.header27-left {
		min-width: 0;
	}

	.header27-right {
		gap: 0;
	}

	.header27-mobile-menu {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 28px;
		height: 24px;
		padding: 6px;
		background: none;
		border: 0;
		cursor: pointer;
		border-radius: 5px;
	}

	.header27-mobile-menu:hover {
		background: black;
	}

	.header27-mobile-menu span {
		display: block;
		width: 16px;
		height: 2px;
		background: #000;
	}

	.header27-mobile-menu:hover span {
		background: white;
	}

	.header27-main [id^=dmws-p_w8g3t0-vat-switch],
	.header27-search-toggle,
	.header27-account {
		display: none !important;
	}

	.header27-right .cart {
		padding: 5px;
	}

	.header27-right .cart svg {
		width: 28px;
		height: 28px;
	}

	/* Zoekbalk klapt in zodra er gescrold wordt (.header27-scrolled,
	   toggle in header-2027.js), zodat de hoofdrij (hamburger/logo/
	   cart) permanent zichtbaar blijft in de sticky .header27. */
	.header27-search {
		display: block;
		position: static;
		padding: 8px;
		background: #F2F7FC;
		box-shadow: none;
		overflow: hidden;
		max-height: 120px;
		transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
	}

	.header27.header27-scrolled .header27-search {
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
	}

	.header27-search .searchform {
		display: flex;
		max-width: none;
		padding: 0;
		overflow: hidden;
		background: #fff;
		border-radius: 6px;
	}

	.header27-search .searchbox {
		flex: 1;
		min-width: 0;
		height: 40px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		font-size: 16px;
	}

	.header27-search-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		width: 40px;
		min-height: 40px;
		padding: 0;
		border: 0;
		border-radius: 0 5px 5px 0;
		background: #a40000;
		color: #fff;
		font-size: 19px;
		cursor: pointer;
		aspect-ratio: 1;
	}

	.header27-search .searchbox::placeholder {
		color: #BBBBBB;
		font-size: 13px;
	}

	.header27-search .searchform,
	.header27-search .searchcontent {
		max-width: none;
	}

	.header27-search .searchcontent {
		padding-right: 8px;
		padding-left: 8px;
	}

	.header27-search .searchresults ul,
	.header27-search .searchresults li {
		display: block;
		width: 100%;
	}

	.header27-search .searchresults li + li {
		border-top: 1px solid #eee;
	}

	.header27-search .searchresults a {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 10px;
		width: 100%;
		min-width: 0;
		padding: 8px 6px;
		border-radius: 0;
	}

	.header27-search .searchresults img {
		display: block;
		width: 40px;
		height: 40px;
		margin: 0;
		object-fit: contain;
	}

	.header27-search .searchresults .result-title {
		display: -webkit-box;
		min-width: 0;
		max-height: 34px;
		overflow: hidden;
		font-size: 12px;
		line-height: 1.4;
		white-space: normal;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.header27-search .searchresults .result-price {
		align-self: center;
		max-width: 82px;
		overflow: hidden;
		font-size: 12px;
		font-weight: 600;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header27-search .more,
	.header27-search .noresults {
		margin-top: 8px;
		padding: 8px 4px 2px;
		font-size: 12px;
	}

	.header27-mobile-reviews {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 38px;
		padding: 7px 12px;
		background: #000;
		color: #fff;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		max-height: 60px;
		transition: max-height .25s ease, opacity .2s ease, min-height .25s ease, padding .25s ease;
	}

	.header27.header27-scrolled .header27-mobile-reviews {
		min-height: 0;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
	}

	.header27-mobile-reviews .header27-stars {
		font-size: 17px;
		letter-spacing: 2px;
	}

	.header27-mobile-reviews a {
		color: #fff;
		text-decoration: underline;
	}

	.mobile-nav .bottom [id^=dmws-p_w8g3t0-vat-switch].header27-mobile-vat {
		display: flex !important;
		min-height: 44px;
		margin: 0;
	}

	.mobile-nav .bottom [id^=dmws-p_w8g3t0-vat-switch].header27-mobile-vat > b {
		color: #333;
	}

	.header27-vat-home,
	.header27-mobile-extra-actions[hidden] {
		display: none;
	}
}

@media (max-width: 480px) {
	.header27-main-grid {
		padding-right: 16px;
		padding-left: 16px;
	}

	.header27-logo img {
		max-width: 150px;
		max-height: 40px;
	}

	.header27-mobile-reviews {
		gap: 6px;
		font-size: 12px;
	}

	.header27-mobile-reviews .header27-stars {
		font-size: 15px;
		letter-spacing: 1px;
	}
}

/* Elk paar keyframes met dezelfde waarde is de pauze; de overgang
   ertussen is het doorschuiven naar de volgende USP. */
@keyframes header27-usp-step {
	0%, 20% {
		transform: translateX(0);
	}
	25%, 45% {
		transform: translateX(-25%);
	}
	50%, 70% {
		transform: translateX(-50%);
	}
	75%, 100% {
		transform: translateX(-75%);
	}
}

@keyframes promo27-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.header27-mobile-usps-track,
	.promo27-marquee-track {
		animation: none;
	}

	/* Zonder animatie zou alleen de eerste USP zichtbaar zijn; maak de
	   balk daarom handmatig doorveegbaar. */
	.header27-mobile-usps {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.header27-mobile-usps li {
		scroll-snap-align: center;
	}
}