/* AmerikaNu — PDP / reispagina (fase-4 Task 14). Maten 1:1 uit
   design/website-compleet/PDP Definitief.dc.html (desktop 1440 + mobiel 390) + SPEC-pdp.md +
   beslissingen/PDP - beslissingen.md, tenzij een docblock-comment hieronder een bewuste
   aanpassing aan de echte datamodel-vorm uitlegt (bv. dagen.php se "Dag X – Y"-kop). Conditioneel
   enqueued op is_singular('reis') (functions.php) — geen sitewide gewicht. */

/* -- hero ------------------------------------------------------------------------------------- */
/* Fase-4-gate-4-fix: hero bevriest op var(--frame-max), net als alle andere PDP-secties
   hieronder — zelfde max()-patroon. Terugdraai (David, 2026-07-13): een eerdere versie liet
   __media-wrap vanaf 1441px full-bleed uitbreken naar de volle viewportbreedte; dat wijkt af van
   het design (design/-frames, o.a. "PDP Definitief.dc.html") waarin de hero altijd binnen de
   contentdoos staat, op elke schermbreedte. Geen full-bleed-hero, ooit — de hero volgt gewoon
   dezelfde bevriezing als de rest van de pagina. */
.amerikanu-reis-hero {
	margin: 20px max(28px, calc((100% - var(--frame-max)) / 2 + 28px)) 0;
}
.amerikanu-reis-hero__frame {
	position: relative;
}
.amerikanu-reis-hero__media-wrap {
	position: relative;
	height: 540px;
	border-radius: var(--radius-hero);
	overflow: hidden;
	background: var(--navy-donker);
	color: #fff;
}
.amerikanu-reis-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-reis-hero__poster-fallback {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.amerikanu-reis-hero__video {
		display: none;
	}
	.amerikanu-reis-hero__poster-fallback {
		display: block;
	}
}
.amerikanu-reis-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 46, 90, 0.35) 0%, rgba(30, 46, 90, 0) 32%, rgba(30, 46, 90, 0) 48%, rgba(30, 46, 90, 0.6) 100%);
}
/* Kruimelpad in de hero, direct bóven de eyebrow/H1 (QA-doorloop P2.13). Het PDP-frame
   (PDP Definitief.dc.html r.62) tekent 'm losgekoppeld linksboven in de hoek, maar de rest van de
   site zet 'm al in het hero-contentblok boven de titel — componenten/hero.php se
   .amerikanu-hero__breadcrumb, dus élke plek-, overzicht-, excursie- en blogpagina. Twee
   verschillende kruimelpad-plekken naast elkaar is dubbelop (David 31-08); sitebrede consistentie
   wint hier van de letterlijke frame-positie. Dat lost meteen het mobiele probleem op: het
   kruimelpad schuift mee met het onderaan verankerde contentblok en kan dus niet botsen met de
   foto-knop of de Foto/Kaart-toggle in de bovenband. */
.amerikanu-reis-hero__breadcrumb {
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 6px rgba(30, 46, 90, 0.4);
}
.amerikanu-reis-hero__breadcrumb .amerikanu-breadcrumb__link {
	color: inherit;
}
/* Knoppen-conventie (test 095, David 31-08): eigen hoverkleur i.p.v. Kadence-blauw. Roze
   (var(--roze)) is hier het bestaande hero-accent (zie __eyebrow hieronder). */
.amerikanu-reis-hero__breadcrumb .amerikanu-breadcrumb__link:hover,
.amerikanu-reis-hero__breadcrumb .amerikanu-breadcrumb__link:focus-visible {
	color: var(--roze);
	text-decoration: underline;
}
.amerikanu-reis-hero__breadcrumb .amerikanu-breadcrumb__scheiding {
	opacity: 0.75;
}
.amerikanu-reis-hero__content {
	position: absolute;
	left: 36px;
	right: 36px;
	bottom: 84px;
	max-width: 620px;
	z-index: 1;
}
.amerikanu-reis-hero__eyebrow {
	color: var(--roze);
	text-shadow: 0 1px 8px rgba(30, 46, 90, 0.45);
}
.amerikanu-reis-hero__titel {
	margin: 6px 0 8px;
	color: #fff;
	text-shadow: 0 2px 16px rgba(30, 46, 90, 0.45);
}
.amerikanu-reis-hero__overlay-knop {
	position: absolute;
	z-index: 1;
	left: 36px;
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: rgba(30, 46, 90, 0.55);
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	backdrop-filter: blur(4px);
}
.amerikanu-reis-hero__overlay-knop:hover,
.amerikanu-reis-hero__overlay-knop:focus-visible {
	color: #fff;
	background: rgba(30, 46, 90, 0.75);
}
.amerikanu-reis-hero__overlay-knop svg {
	flex: none;
}

.amerikanu-reis-hero__toggle {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 36px;
	display: flex;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-pill);
	padding: 4px;
	box-shadow: 0 2px 8px rgba(30, 46, 90, 0.18);
}
.amerikanu-reis-hero__toggle-knop {
	font-family: var(--font);
	font-size: 12px;
	font-weight: 700;
	color: var(--navy);
	background: none;
	border: none;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--motion), color var(--motion);
}
.amerikanu-reis-hero__toggle-knop:hover,
.amerikanu-reis-hero__toggle-knop:focus-visible {
	color: var(--navy);
	background: var(--roze);
}
.amerikanu-reis-hero__toggle-knop.is-actief {
	background: var(--navy);
	color: #fff;
}
.amerikanu-reis-hero__kaart {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.amerikanu-reis-hero__kaart .routekaart {
	height: 100%;
	border-radius: 0;
}
/* Kaartstand (David 03-09, "dat label zit gruwelijk in de weg"): zodra de kaart getoond wordt
   verdwijnen de tekstlaag (kruimelpad, badges, titel, foto-knop) en het verloop, zodat de
   pins en de route vrij staan. Alleen de Foto/Kaart-schakelaar blijft. */
.amerikanu-reis-hero__media-wrap--kaart .amerikanu-reis-hero__content,
.amerikanu-reis-hero__media-wrap--kaart .amerikanu-reis-hero__overlay {
	display: none;
}

.amerikanu-reis-hero__swipe {
	display: none;
}

/* -- highlights-kaart: overlapt de hero-onderrand ---------------------------------------------- */
.amerikanu-reis-hero__highlights {
	position: absolute;
	right: 36px;
	bottom: -44px;
	width: 320px;
	background: var(--card);
	border-radius: var(--radius-card);
	box-shadow: 0 16px 36px -10px rgba(30, 46, 90, 0.3);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.amerikanu-reis-hero__highlights-eyebrow {
	color: var(--magenta);
}
.amerikanu-reis-hero__highlight {
	display: flex;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
}
.amerikanu-reis-hero__vink {
	color: var(--magenta);
	font-weight: 800;
	flex: none;
}

/* -- lightbox <dialog> (foto-overlay, "Alle X foto's & video's"): simpele <dialog>-lightbox met
   een scroll-rij (hero.php-docblock/beslissingen "design-systeem popup-stijl, 28px, navy scrim"
   — zelfde visuele taal als de excursie-popup hierboven: dialog-shadow, ronde afbeeldingstegels
   met eigen schaduw i.p.v. platte edge-to-edge foto's, sluitknop los boven de rij zodat 'ie nooit
   over een afbeelding heen valt. Fase-4-gate-4-pdp-batch-fix punt 1: de vorige versie miste deze
   afstand/schaduw/tegel-vorming volledig (platte 60vh-crops zonder marge, sluitknop over de 2e
   foto heen). ------------------------------------------------------------------------------------ */
.amerikanu-lightbox {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(90vw, 980px);
	max-height: 82vh;
	overflow-x: hidden;
	overflow-y: auto;
	border: none;
	border-radius: var(--radius-hero);
	padding: 0;
	background: var(--card);
	box-shadow: 0 32px 80px -24px rgba(15, 23, 45, 0.5);
}
.amerikanu-lightbox::backdrop {
	background: rgba(30, 46, 90, 0.65);
}
.amerikanu-lightbox__sluit {
	position: absolute;
	right: 16px;
	top: 16px;
	width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-pill);
	/* !important (fase-4-gate-4-pdp-batch-fix punt 1): Kadence se globale
	   "button, .button, .wp-block-button__link, …"-regel (global.min.css) blijft de achtergrond/
	   tekstkleur van een kale <button> overschrijven ondanks lagere specificiteit (0-0-1 vs de 0-1-0
	   van deze class-selector) — geverifieerd via CDP CSS.getMatchedStylesForNode, geen
	   hoger-specifieke of !important-regel gevonden die het verklaart; zelfde bug bestond al op
	   .amerikanu-excursie-popup__sluit hieronder. !important is hier de pragmatische, smal-
	   toegepaste fix (2 sluitknop-classes), geen generieke aanpak. */
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--navy) !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 23, 45, 0.22);
	z-index: 2;
}
.amerikanu-lightbox__rij {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 64px 24px 28px;
	scroll-snap-type: x mandatory;
}
.amerikanu-lightbox__beeld {
	flex: none;
	width: min(72vw, 560px);
	aspect-ratio: 4 / 3;
	height: auto;
	max-height: 58vh;
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--radius-card);
	scroll-snap-align: center;
	box-shadow: 0 8px 24px -8px rgba(15, 23, 45, 0.28);
}

@media (max-width: 899px) {
	.amerikanu-lightbox {
		width: 100%;
		max-width: 100%;
		max-height: 88vh;
		inset: auto 0 0 0;
		margin: 0;
		border-radius: 28px 28px 0 0;
	}
	.amerikanu-lightbox__rij {
		padding: 56px 16px 20px;
		gap: 12px;
	}
	.amerikanu-lightbox__beeld {
		width: min(78vw, 420px);
		max-height: 50vh;
	}
}

@media (max-width: 899px) {
	.amerikanu-reis-hero {
		margin: 10px 12px 0;
	}
	/* 300px (frame-maat) gaat uit van een eenregelige reistitel; de echte titels lopen tot 58
	   tekens en wikkelen op 390px naar vier regels. Het contentblok is bottom:38px verankerd en
	   liep daardoor al vóór punt 9 bovenaan de hero uit — gemeten: de titel schoof over de
	   foto-knop en de Foto/Kaart-toggle heen. Met het kruimelpad erbij (nu bovenin datzelfde blok)
	   viel dat als eerste weg. 380px is de kleinste hoogte waarbij alle drie de gemeten
	   titellengtes (15, 47 en 58 tekens) volledig binnen de hero passen, mét 18px lucht onder de
	   knoppenrij. */
	.amerikanu-reis-hero__media-wrap {
		height: 380px;
		border-radius: 22px;
	}
	.amerikanu-reis-hero__content {
		left: 16px;
		right: 16px;
		bottom: 38px;
	}
	/* Gate-4-pdp-batch-fix punt m (mobiele hero-stapeling conform frame, PDP Definitief.dc.html
	   r.463-467): het mobiele frame verplaatst de foto-telling-pill naar bovenin — NIET onderin
	   zoals desktop, want daar botst hij met de highlights-kaart die de hero-onderrand overlapt.
	   Het frame groepeert 'm rechts naast het hartje en de toggle; wij renderen geen hartje
	   (bewust, zie hero.php-docblock) en zetten hem daarom links als evenwichtige tegenhanger van
	   de toggle-pil rechts (top:12px;right:12px). P2.13 laat dit ongemoeid: het kruimelpad staat op
	   mobiel niet in de hero maar erboven (zie het blok hierna), dus die bovenband blijft vrij.
	   Openstaand, niet door punt 9 veroorzaakt en al vóór deze ronde meetbaar: bij een lange,
	   meerregelige reistitel groeit het bottom:38px-verankerde contentblok in de vaste 300px-hero
	   omhoog tot in deze bovenband, waardoor eyebrow/H1 en de knoppen elkaar raken. */
	/* Mobiel volgt het frame se maat (r.462: 11px) — plek blijft in het contentblok, zie het
	   desktopblok hierboven. Geen eigen positionering nodig: het contentblok regelt dat al. */
	.amerikanu-reis-hero__breadcrumb .amerikanu-breadcrumb__lijst {
		font-size: 11px;
	}
	.amerikanu-reis-hero__overlay-knop {
		top: 12px;
		left: 16px;
		bottom: auto;
		font-size: 11px;
		padding: 6px 12px;
	}
	.amerikanu-reis-hero__toggle {
		top: 12px;
		right: 12px;
	}
	.amerikanu-reis-hero__swipe {
		display: flex;
		position: absolute;
		z-index: 1;
		left: 16px;
		bottom: 18px;
		gap: 5px;
		align-items: center;
	}
	.amerikanu-reis-hero__swipe span {
		width: 5px;
		height: 5px;
		border-radius: var(--radius-pill);
		background: rgba(255, 255, 255, 0.5);
	}
	.amerikanu-reis-hero__swipe span:first-child {
		width: 14px;
		height: 5px;
		background: #fff;
	}
	/* Highlights-kaart overlapt de hero-onderrand ook op mobiel (frame r.483: "highlights-kaart:
	   overlapt de hero", margin: -28px 24px 0) — punt 4 haalde deze overlap er eerder helemaal
	   uit omdat de "Alle X foto's & video's"-knop toen nog in dezelfde onderste ~40px-band stond
	   (zie de knop-verplaatsing naar top hierboven, punt m). Met de knop uit de weg blijft alleen
	   nog de titeltekst-zone (content, tot bottom:38px) en de smalle swipe-dots-band (bottom:18px)
	   over; de -28px-overlap raakt hooguit de dots (net als in het frame zelf, waar de kaart over
	   diezelfde swipe-dots-band heen ligt) — geen botsing meer met leesbare tekst of knoppen. */
	.amerikanu-reis-hero__highlights {
		position: relative;
		right: auto;
		bottom: auto;
		margin: -28px 12px 0;
		width: auto;
		padding: 16px 18px;
		gap: 8px;
	}
}

/* -- feiten-regel ("C-stijl") --------------------------------------------------------------------- */
/* Fase-4-gate-4-fix: PDP-secties (feiten t/m gerelateerd) hadden geen eigen contentdoos, alleen
   een vaste padding/margin tegen de volle paginabreedte — bevriest nu op var(--frame-max) i.p.v.
   verder uit te rekken op 2560px+ (zelfde patroon als chrome.css se topbalk/submenu; zie
   tokens.css voor de --frame-max-onderbouwing). Bij ≤1440px viewport kiest max() gewoon de
   bestaande px-waarde, dus geen regressie op 1440px/mobiel. */
.amerikanu-feiten {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	/* D8-fix (controleronde 2026-08-10): design-waarde 64px links i.p.v. de eerder gezette 48px
	   (zelfde max()-frame-maat-patroon als de andere secties, alleen het grondgetal aangepast). */
	padding: 28px max(64px, calc((100% - var(--frame-max)) / 2 + 64px)) 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}
@media (min-width: 900px) {
	.amerikanu-feiten {
		/* D8-fix: 420px i.p.v. 380px (design-waarde, reserveert ruimte voor de sticky-kaart ernaast). */
		padding-right: 420px;
	}
}
.amerikanu-feiten__scheiding {
	color: var(--rand-knop);
}
/* Google-G + score (korte topregel, David-punt 17, 2026-08-11). */
.amerikanu-feiten__google {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.amerikanu-feiten__google-g {
	display: block;
	flex: none;
}

@media (max-width: 899px) {
	.amerikanu-feiten {
		/* David, PDP-naloop 2026-08-12: iets meer lucht boven (t.o.v. de "Waarom deze reis"-kaart,
		   was 14px) én onder (t.o.v. de pillen-balk, was 0) — bewust bescheiden ("echt maar een
		   klein beetje"). */
		padding: 26px 24px 12px;
		font-size: 13px;
		gap: 6px 12px;
	}
}

/* -- inclusies ------------------------------------------------------------------------------------- */
.amerikanu-inclusies {
	padding: 12px max(28px, calc((100% - var(--frame-max)) / 2 + 28px)) 0;
}
.amerikanu-inclusies__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	background: var(--beige);
	border-radius: var(--radius-card);
	padding: 22px 26px;
}
.amerikanu-inclusies__tegel {
	display: flex;
	align-items: center;
	gap: 14px;
}
.amerikanu-inclusies__tegel--gedimd {
	opacity: 0.62;
}
.amerikanu-inclusies__icoon {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 12px;
	background: var(--card);
	display: grid;
	place-items: center;
	color: var(--navy);
}
.amerikanu-inclusies__tegel--gedimd .amerikanu-inclusies__icoon {
	background: rgba(255, 255, 255, 0.6);
	color: var(--muted);
}
.amerikanu-inclusies__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-inclusies__tegel--gedimd .amerikanu-inclusies__label {
	color: var(--body);
}
.amerikanu-inclusies__subtekst {
	font-size: 12.5px;
	color: var(--muted-navy);
	margin-top: 2px;
}

@media (max-width: 899px) {
	.amerikanu-inclusies {
		padding: 6px 12px 0;
	}
	.amerikanu-inclusies__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 10px;
		padding: 16px;
		border-radius: 16px;
	}
	.amerikanu-inclusies__icoon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}
	.amerikanu-inclusies__label {
		font-size: 13px;
	}
}

/* -- beschrijving --------------------------------------------------------------------------------- */
/* Fase-4-gate-4-fix-correctie: max-width:880px stond hier eerst op de gepadde doos zelf — met
   box-sizing:border-box (basis.css) telt padding mee in die 880px, dus bij een bevroren gutter
   van ~608px/kant (2560px-viewport) bleef er negatieve content-breedte over (tekst brak op 1
   woord per regel). De 880px-leesbreedte hoort op de tekst (__inhoud), niet op de gepadde doos —
   zo bevriest de doos gewoon de kolomstart-positie terwijl de leesbreedte los blijft staan. */
.amerikanu-beschrijving {
	padding: 56px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
.amerikanu-beschrijving__kop {
	margin: 0 0 16px;
}
.amerikanu-beschrijving__inhoud {
	position: relative;
	max-width: 880px;
	max-height: 5.6em;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}
.amerikanu-beschrijving__inhoud p {
	margin: 0 0 1em;
}
.amerikanu-beschrijving__inhoud::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 2.4em;
	background: linear-gradient(180deg, rgba(250, 250, 247, 0) 0%, var(--bg) 90%);
}
.amerikanu-beschrijving__inhoud.is-open {
	max-height: none;
	overflow: visible;
}
.amerikanu-beschrijving__inhoud.is-open::after {
	display: none;
}
.amerikanu-beschrijving__toggle {
	margin-top: 14px;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 4px;
	padding: 0;
}
.amerikanu-beschrijving__toggle:hover,
.amerikanu-beschrijving__toggle:focus-visible {
	background: none;
	color: var(--navy);
}

@media (max-width: 899px) {
	.amerikanu-beschrijving {
		padding: 28px 18px 0;
	}
	.amerikanu-beschrijving__inhoud {
		font-size: 15px;
	}
}

/* -- dag tot dag & route -------------------------------------------------------------------------- */
.amerikanu-dagen {
	position: relative;
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
.amerikanu-dagen__kop {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
}
.amerikanu-dagen__sub {
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-dagen__layout {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 36px;
	align-items: start;
}
.amerikanu-dagen__lijst {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.amerikanu-dagen__fasekop {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-navy);
	margin-top: 8px;
}
.amerikanu-dagen__fasekop:first-child {
	margin-top: 0;
}
.amerikanu-dagen__kaart {
	position: sticky;
	/* Fixronde 2026-08-11 (David-bugmelding "routekaart hangt te hoog"): top:24px lag bóven de
	   onderrand van de sticky quick-nav-balk (.amerikanu-sticky__desktop hieronder: top 52px +
	   ~91px eigen hoogte = ±143px onderrand bij gestickte staat, gemeten), waardoor de kaart voor
	   een groot deel achter die balk wegplakte. 164px = balk-onderrand (143px) + ~20px marge,
	   zelfde "sticky-top = voorgaande balk-hoogte + marge"-patroon als het design (PDP
	   Definitief.dc.html: sticky balk top:0, routekaart top:86px). */
	top: 164px;
}
.amerikanu-dagen__kaart .routekaart {
	height: 600px;
}
.amerikanu-dag {
	background: var(--card);
	border: 1.5px solid var(--rand-kaart);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.amerikanu-dag__kop {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	background: none;
	border: none;
	font-family: var(--font);
	text-align: left;
	cursor: pointer;
	color: var(--navy);
}
.amerikanu-dag__kop:hover,
.amerikanu-dag__kop:focus-visible {
	background: none;
	color: var(--navy);
}
.amerikanu-dag__nummer {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
}
.amerikanu-dag__kopinfo {
	flex: 1;
	min-width: 0;
}
.amerikanu-dag__range {
	display: block;
	font-size: 17px;
	font-weight: 700;
}
.amerikanu-dag__titel {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	margin-top: 1px;
}
.amerikanu-dag__thumb {
	flex: none;
	width: 130px;
	height: 80px;
	border-radius: 12px;
	overflow: hidden;
}
.amerikanu-dag__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-dag--open .amerikanu-dag__thumb {
	display: none;
}
.amerikanu-dag__chevron {
	flex: none;
	width: 18px;
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: transform var(--motion);
}
.amerikanu-dag--open .amerikanu-dag__chevron {
	transform: rotate(180deg);
}
.amerikanu-dag__paneel[hidden] {
	display: none;
}
.amerikanu-dag__paneel {
	padding: 0 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* dagfoto-fix (David, dagfoto-slider-herbouw): de vorige bouw (gate-4-pdp-batch-fix punt 2, zie
   git-historie) was een kale horizontaal-scrollende filmstrip die alle dagfoto's tegelijk naast
   elkaar toonde, zonder navigatie — géén slider, en een designafwijking van het frame (PDP
   Definitief.dc.html r.174-182: precies 1 grote foto in beeld, vorige/volgende-knoppen, een
   "x/y"-teller, bijschrift-overlay linksonder met gradient). Nu een échte index-slider:
   .amerikanu-dag__foto-slide is telkens position:absolute;inset:0 binnen de track, reis.js
   toggelt via het `hidden`-attribuut welke zichtbaar is (dagen.php se data-dagfoto-slide) — geen
   layout-scroll meer nodig, dus ook geen scroll-snap. Frame-maat: hoogte 340px desktop (r.175),
   altijd volle kaartbreedte (er is nu maar 1 foto tegelijk in beeld, geen "70%-tegel" meer). GEEN
   cap op het aantal foto's — alle foto's blijven renderen, alleen de weergave is anders. */
.amerikanu-dag__fotos {
	position: relative;
	height: 340px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--beeld-placeholder);
	/* D8-fix (controleronde 2026-08-10): design zet margin:0 14px op de foto zelf — smaller dan de
	   20px paneel-padding waar de tekst eronder wél vol op zit, zodat de foto net iets "voller"
	   oogt dan de tekstkolom. .amerikanu-dag__paneel heeft geen eigen margin-regel op de foto, dus
	   die erfde tot nu toe gewoon de volle 20px paneel-padding (`padding: 0 20px 20px` hierboven).
	   Negatieve margin -6px compenseert 6 van die 20px, netto inzet 14px. */
	margin: 0 -6px;
}
.amerikanu-dag__fotos-track {
	position: relative;
	width: 100%;
	height: 100%;
}
.amerikanu-dag__foto-slide {
	position: absolute;
	inset: 0;
}
.amerikanu-dag__foto-slide[hidden] {
	display: none;
}
.amerikanu-dag__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amerikanu-dag__foto-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 46, 90, 0) 55%, rgba(30, 46, 90, 0.45) 100%);
	pointer-events: none;
}
.amerikanu-dag__foto-label {
	position: absolute;
	z-index: 1;
	left: 18px;
	bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 6px rgba(30, 46, 90, 0.5);
}
.amerikanu-dag__foto-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.92);
	color: var(--navy);
	display: grid;
	place-items: center;
	transition: background var(--motion);
}
.amerikanu-dag__foto-nav:hover {
	background: #fff;
}
/* basis.css se globale `svg { max-width:100% }` botst met deze knop se `display:grid;
   place-items:center`: de impliciete grid-track sizet op max-content, en de %-max-width van de
   svg resolvet daarbinnen circulair naar een paar px (Chromium-fallback voor onoplosbare
   %-referenties) — dat KLEMT een expliciete width:14px alsnog terug omdat max-width altijd na
   width toegepast wordt. max-width:none breekt die circulariteit; zelfde soort correctie als
   .amerikanu-reis-hero__overlay-knop svg (daar via flex-context) hierboven. */
.amerikanu-dag__foto-nav svg {
	width: 14px;
	height: 14px;
	max-width: none;
	flex: none;
}
.amerikanu-dag__foto-nav--vorige {
	left: 12px;
}
.amerikanu-dag__foto-nav--volgende {
	right: 12px;
}
.amerikanu-dag__foto-teller {
	position: absolute;
	right: 16px;
	bottom: 14px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(30, 46, 90, 0.5);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.amerikanu-dag__tekst {
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}
.amerikanu-dag__tekst p {
	margin: 0 0 1em;
}
.amerikanu-dag__tekst p:last-child {
	margin-bottom: 0;
}

/* -- samengevoegde-kaart subblokken (fase-4 gate-3-fix-1): secundaire dag-teksten + "Optioneel"
   tour-blokken binnen 1 dag-kaart. Eyebrow-stijl-tussenkopje (kleiner/gedempter dan de kaart-kop
   subtitel) boven een eigen, standaard ingeklapte tekst. */
.amerikanu-dag__subblok {
	padding-top: 12px;
	border-top: 1px solid var(--rand-kaart);
}
.amerikanu-dag__subkop {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.amerikanu-dag__subtekst {
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}
.amerikanu-dag__subtekst p {
	margin: 0 0 0.8em;
}
.amerikanu-dag__subtekst p:last-child {
	margin-bottom: 0;
}
.amerikanu-dag__subtekst-meer[hidden] {
	display: none;
}
.amerikanu-dag__subtekst-meer {
	margin-top: 0.8em;
}
.amerikanu-dag__subtekst-toggle {
	display: inline-block;
	margin-top: 8px;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: var(--magenta-hover);
	cursor: pointer;
}
.amerikanu-dag__subtekst-toggle:hover,
.amerikanu-dag__subtekst-toggle:focus-visible {
	background: none;
	color: var(--magenta-hover);
}
.amerikanu-dag__excursies {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.amerikanu-dag__excursie {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1.5px dashed rgba(30, 46, 90, 0.22);
	border-radius: 14px;
	padding: 10px 14px;
	background: none;
	font-family: var(--font);
	text-align: left;
	cursor: pointer;
	color: var(--navy);
}
.amerikanu-dag__excursie:hover,
.amerikanu-dag__excursie:focus-visible {
	color: var(--navy);
	background: var(--roze);
	border-color: rgba(30, 46, 90, 0.4);
}
.amerikanu-dag__excursie-thumb {
	flex: none;
	width: 56px;
	height: 42px;
	border-radius: 8px;
	overflow: hidden;
}
.amerikanu-dag__excursie-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-dag__excursie-info {
	flex: 1;
	min-width: 0;
}
.amerikanu-dag__excursie-naam {
	display: block;
	font-size: 13px;
	font-weight: 700;
}
.amerikanu-dag__excursie-prijs {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-dag__excursie-cta {
	flex: none;
	border: 1.5px solid var(--rand-knop);
	border-radius: var(--radius-pill);
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 700;
}

.amerikanu-dag__tip {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--roze);
	border-radius: 14px;
	padding: 14px 16px;
}
/* Tips staan buiten het inklapbare paneel (David 2026-08-12: altijd zichtbaar, ook bij een
   dichtgeklapte dag) — eigen marge omdat de paneel-padding hier niet meer omheen zit. */
.amerikanu-dag__tip--vast {
	margin: 0 20px 18px;
}
[data-dag-paneel]:not([hidden]) + .amerikanu-dag__tip--vast,
.amerikanu-dag__tip--vast + .amerikanu-dag__tip--vast {
	margin-top: 0;
}
[data-dag-paneel][hidden] + .amerikanu-dag__tip--vast {
	margin-top: 14px;
}
.amerikanu-dag__tip .amerikanu-avatar {
	width: 44px;
	height: 44px;
	border: 2px solid #fff;
}
.amerikanu-dag__tip-naam {
	font-size: 12px;
	font-weight: 800;
	color: var(--magenta-hover);
}
.amerikanu-dag__tip-tekst {
	font-size: 14px;
	line-height: 1.5;
	color: var(--navy);
	margin-top: 2px;
}

@media (max-width: 899px) {
	.amerikanu-dagen {
		padding: 36px 12px 0;
	}
	.amerikanu-dagen__layout {
		display: flex;
		flex-direction: column;
		/* De desktop-regel (hierboven) zet align-items:start (grid-kolomcompensatie) — een
		   media query overschrijft alleen expliciet genoemde properties, dus zonder deze reset
		   bleef "start" ook op mobiel actief. In een column-flex betekent align-items:start
		   shrink-to-fit i.p.v. volle breedte: .amerikanu-dagen__kaart (geen eigen intrinsieke
		   breedte — .routekaart zelf zet ook geen width) klapte dan dicht tot 0px, waardoor de
		   routekaart onzichtbaar bleef (gate-3-fix-4-bevinding: lege ruimte tussen de "Dag tot
		   dag & route"-kop en de dagenlijst op mobiel). */
		align-items: stretch;
	}
	.amerikanu-dagen__kaart {
		position: relative;
		top: auto;
		order: -1;
		margin-bottom: 12px;
	}
	.amerikanu-dagen__kaart .routekaart {
		height: 180px;
	}
	.amerikanu-dagen__lijst {
		gap: 10px;
	}
	.amerikanu-dag {
		border-radius: 16px;
	}
	.amerikanu-dag__kop {
		padding: 12px 14px;
		gap: 10px;
	}
	.amerikanu-dag__nummer {
		width: 30px;
		height: 30px;
		font-size: 11px;
	}
	.amerikanu-dag__range {
		font-size: 16px;
	}
	.amerikanu-dag__thumb {
		width: 84px;
		height: 56px;
		border-radius: 10px;
	}
	/* Frame-maat mobiel (PDP Definitief.dc.html r.569, mobiele dag-tot-dag): hoogte 210px i.p.v.
	   desktop se 340px, kleinere knoppen (30px i.p.v. 38px). De taakeis (David) houdt op mobiel
	   BEIDE pijlknoppen ← → aan (naast swipe) i.p.v. de frame se mobiele mock die alleen een
	   →-knop + "swipe"-hint toont — bewuste keuze vóór toegankelijkheid (een "vorige"-knop blijft
	   zo ook zonder touch bruikbaar), zie dagfoto-fix-verslag. */
	.amerikanu-dag__fotos {
		height: 210px;
		border-radius: 12px;
		/* D8-fix mobiel: design 0 10px i.p.v. desktop se 0 14px; paneel-padding blijft 20px op alle
		   breedtes (geen eigen mobiele padding-regel voor .amerikanu-dag__paneel), dus -10px. */
		margin: 0 -10px;
	}
	.amerikanu-dag__foto-nav {
		width: 30px;
		height: 30px;
	}
	.amerikanu-dag__tekst {
		font-size: 13.5px;
	}
	.amerikanu-dag__subtekst {
		font-size: 13.5px;
	}
}

/* -- excursie-popup <dialog> ------------------------------------------------------------------------ */
.amerikanu-excursie-popup {
	position: fixed;
	inset: 0;
	margin: auto;
	width: 680px;
	max-width: 92vw;
	max-height: 88vh;
	overflow: hidden;
	border: none;
	border-radius: var(--radius-hero);
	padding: 0;
	background: var(--card);
	box-shadow: 0 32px 80px -24px rgba(15, 23, 45, 0.5);
}
.amerikanu-excursie-popup::backdrop {
	background: rgba(30, 46, 90, 0.55);
}
.amerikanu-excursie-popup__media {
	position: relative;
	height: 300px;
	background: var(--beeld-placeholder);
}
.amerikanu-excursie-popup__beeld {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-excursie-popup__sluit {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 36px;
	height: 36px;
	display: inline-grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-pill);
	/* !important: zelfde Kadence-globale-button-collision als .amerikanu-lightbox__sluit
	   hierboven — zie de docblock-toelichting daar. */
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--navy) !important;
	cursor: pointer;
	/* Fixronde 2026-08-11 (David-bugmelding "sluitkruisje werkt niet"): géén klik-/JS-bug — het
	   kruisje-icoon zelf rendert onzichtbaar. Root cause (geverifieerd via CDP
	   CSS.getMatchedStylesForNode + handmatige DOM-bisectie): dezelfde Kadence-globale-
	   button-collision als hierboven, maar dan op `padding` i.p.v. achtergrond/tekstkleur —
	   Kadence se "button, .button, …"-regel (global.min.css) zet `padding: .4em 1em` +
	   `font-size: 1.125rem`, wat op dit knop-formaat naar ~18px padding-links/rechts omrekent.
	   Met box-sizing:border-box en de vaste breedte 36px hierboven eet die padding (18+18=36px)
	   de volledige content-box op — 0px ruimte over voor het gecentreerde svg-icoon, dat daardoor
	   op 0px breedte rendert (onzichtbaar, wel nog een volledig klikbare 36×36-cirkel: de
	   knop-eigen box blijft ongewijzigd, alleen de zichtbare X verdwijnt). padding:0 hieronder
	   herstelt de content-box; zelfde collision (ontbrekende padding-override) zit ook op
	   .amerikanu-lightbox__sluit hierboven en .amerikanu-mobiel-paneel__sluit (chrome.css) —
	   buiten de scope van deze fix, hier gedocumenteerd voor een vervolgronde. */
	padding: 0 !important;
}
.amerikanu-excursie-popup__body {
	padding: 26px 30px 28px;
	overflow-y: auto;
	max-height: calc(88vh - 300px);
}
.amerikanu-excursie-popup__titel {
	margin: 4px 0 6px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.amerikanu-excursie-popup__prijs {
	font-size: 13px;
	font-weight: 700;
	color: var(--body);
	margin-bottom: 12px;
}
.amerikanu-excursie-popup__tekst {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--body);
}
.amerikanu-excursie-popup__acties {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.amerikanu-excursie-popup__link {
	font-size: 14px;
	font-weight: 700;
	background: var(--magenta);
	color: #fff;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	text-decoration: none;
}
.amerikanu-excursie-popup__link:hover,
.amerikanu-excursie-popup__link:focus-visible {
	background: var(--magenta-hover);
}
.amerikanu-excursie-popup__sluit-knop {
	border: 1.5px solid var(--rand-knop);
	background: none;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	border-radius: var(--radius-pill);
	padding: 11px 20px;
	cursor: pointer;
}
.amerikanu-excursie-popup__sluit-knop:hover,
.amerikanu-excursie-popup__sluit-knop:focus-visible {
	color: var(--navy);
	background: var(--roze);
}

@media (max-width: 899px) {
	.amerikanu-excursie-popup {
		width: 100%;
		max-width: 100%;
		max-height: 90vh;
		inset: auto 0 0 0;
		margin: 0;
		border-radius: 28px 28px 0 0;
	}
	.amerikanu-excursie-popup__media {
		height: 170px;
	}
}

/* -- "Plan een afspraak"-popup v1 (fase-4-gate-4-pdp-batch punt 5, plan-popup.php-docblock):
   zelfde <dialog>-mechaniek + visuele taal als de excursie-popup hierboven (design-systeem
   popup-stijl, 28px radius, navy scrim) maar zonder media-header — puur tekst + contactlinks. ---- */
/* R3 (David 2026-08-14): de tijdelijke "Plan een afspraak"-popup is vervangen door de echte
   adviesgesprek-flow (/adviesgesprek/, assets/css/adviesgesprek.css) — de bijbehorende
   .amerikanu-plan-popup-regels zijn hier verwijderd. */

}

/* -- jump-nav-ankerdoelen: compenseer de vaste navy-submenu + (desktop) sticky-balk-hoogte ------- */
#dagen,
#hotels,
#prijs,
#reviews,
#faq {
	scroll-margin-top: 132px;
}

/* -- Reviews-sectiemarge (controleronde D8, 2026-08-10): #reviews is, net als #faq hieronder, een
   dun anker-wrapper-divje om het gedeelde reviews.php-component heen. .amerikanu-reviews krijgt
   alleen padding via de PLP/home-parent-selectors (.amerikanu-overzicht > / .amerikanu-home >,
   zie overzicht.css/home.css) — op de PDP viel de sectie daardoor terug op 0, dus volledig
   full-bleed tegen de paginaranden. Zelfde patroon/maat als #faq (gate-3-fix-3): 64px 48px 0. */
#reviews {
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
@media (max-width: 899px) {
	#reviews {
		/* Frame-maat mobiel, zelfde als #faq mobiel. */
		padding: 40px 12px 0;
	}
}

/* -- FAQ-sectiemarge (fase-4 gate-3-fix-3): #faq is een dun anker-wrapper-divje om het gedeelde
   faq.php-component heen (zelfde patroon als #reviews) — vóór deze fix had het nergens een eigen
   buiten-marge, waardoor de FAQ tegen het voorgaande expertblok (.amerikanu-expertblok, margin:
   56px 48px 0) aan plakte. 64px 48px 0 is dezelfde sectie-ritme-maat als .amerikanu-dagen/
   .amerikanu-prijsblok hierboven en de frame-maat (PDP Definitief.dc.html, FAQ-blok). */
#faq {
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
@media (max-width: 899px) {
	#faq {
		/* Frame-maat (PDP Definitief.dc.html "faq mobiel"): padding 40px 12px 0. */
		padding: 40px 12px 0;
	}
}

/* -- sticky: desktop fixed balk + mobiele jump-nav + CTA-onderbalk (fase-4 Task 15) --------------- */
.amerikanu-sticky {
	/* display:contents: sticky.php se buitenste div mag geen eigen box vormen — position:sticky
	   kan alleen "meebewegen" binnen de hoogte van z'n eigen ouder-element (hier: dit kleine
	   wrapper-divje, amper 130px hoog), anders raakt de sticky-context na een paar honderd px
	   scroll al "op" en scrollt de balk gewoon weg. Met display:contents tellen .amerikanu-
	   sticky__navm/__ctam als directe kinderen van <main class="wrap"> (paginahoogte) — precies
	   hetzelfde patroon waarmee het navy regio-submenu (chrome.css) al goed sticky is. */
	display: contents;
}
.amerikanu-sticky__desktop {
	/* Frame-fix (David, gate-4-pdp-batch-2 punt 7): stond op position:fixed + opacity:0, pas
	   zichtbaar gemaakt door reis.js se IntersectionObserver ná het volledig wegscrollen van de
	   hero — de balk stond daardoor eerst nergens op de pagina en verscheen pas ineens diep in de
	   scroll, terwijl het frame 'm gewoon op z'n designpositie (vlak na de hero/feiten) toont en
	   pas gaat "plakken" zodra hij bovenin komt. Nu een échte position:sticky-balk, zelfde bewezen
	   patroon als .amerikanu-sticky__navm hieronder (mobiel) — display:contents op de ouder
	   (.amerikanu-sticky) zorgt dat dit element als direct kind van <main class="wrap"> telt, dus
	   genoeg scroll-"ruimte" heeft om te blijven plakken (zelfde precedent, zie de docblock daar).
	   top:52px = navy regio-submenu-hoogte (chrome.css), zodat de balk er onder plakt i.p.v. erover
	   (gate-4-pdp-batch-fix punt 5-klik-vanger-fix, ongewijzigd gebleven signaal).
	   Fixronde 2026-08-11 (David-bugmelding "quick-nav te breed"): zijpadding stond op een vaste
	   28px, terwijl elke andere PDP-sectie (.amerikanu-dagen, .amerikanu-inclusies, #faq, …,
	   reis.css) op var(--frame-max) bevriest via `max(Npx, calc((100% - var(--frame-max)) / 2 +
	   Npx))` — hierdoor liep de balk op schermen breder dan 1440px (--frame-max, tokens.css) fors
	   breder door dan de inhoud eronder (gemeten bij 1920px: balk 1864px vs dagen-kolom 1344px).
	   Design (PDP Definitief.dc.html r.101) gebruikt dezelfde 28px-basiswaarde als hieronder —
	   alleen de sitewide clamp-formule ontbrak. Bij ≤1440px viewport is dit pixel-identiek aan de
	   oude vaste 28px (geen regressie). */
	position: sticky;
	top: 52px;
	z-index: 70;
	padding: 18px max(28px, calc((100% - var(--frame-max)) / 2 + 28px)) 12px;
	background: linear-gradient(180deg, var(--bg) 72%, rgba(250, 250, 247, 0) 100%);
}
.amerikanu-sticky__balk {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--card);
	border: 1px solid var(--rand-lijn);
	border-radius: var(--radius-pill);
	padding: 10px 12px 10px 26px;
	box-shadow: 0 8px 24px -12px rgba(30, 46, 90, 0.18);
}
.amerikanu-sticky__nav {
	display: flex;
	align-items: center;
	gap: 4px;
}
.amerikanu-sticky__navlink {
	font-size: 13px;
	font-weight: 700;
	color: var(--body);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: background var(--motion), color var(--motion);
}
.amerikanu-sticky__navlink:hover,
.amerikanu-sticky__navlink:focus-visible {
	background: var(--beige);
	color: var(--navy);
}
.amerikanu-sticky__rechts {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.amerikanu-sticky__reisnaam {
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	white-space: nowrap;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.amerikanu-sticky__adviesgesprek {
	display: flex;
	align-items: center;
	gap: 8px;
}
.amerikanu-sticky__avatars {
	display: flex;
}
.amerikanu-sticky__avatars .amerikanu-avatar {
	width: 32px;
	height: 32px;
	border: 2px solid #fff;
}
.amerikanu-sticky__avatars .amerikanu-avatar:not(:first-child) {
	margin-left: -10px;
}
.amerikanu-sticky__adviesgesprek-link {
	/* <button> i.p.v. <a> sinds gate-4-batch-fix punt 5 (opent de plan-popup) — reset naar
	   tekst-link-uiterlijk + !important tegen dezelfde Kadence-globale-button-collision als de
	   __sluit-classes hierboven (reis.css). */
	border: none;
	padding: 0;
	background: none !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy) !important;
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 3px;
	white-space: nowrap;
	cursor: pointer;
}
.amerikanu-sticky__prijs {
	font-size: 13px;
	color: var(--body);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* anker voor .amerikanu-info__paneel — die klapt hier rechts uitgelijnd onder uit, zie
	   .amerikanu-sticky__prijs .amerikanu-info__paneel hieronder. */
	position: relative;
}
.amerikanu-sticky__prijs strong {
	color: var(--navy);
}
.amerikanu-sticky__cta {
	font-size: 13px;
	font-weight: 700;
	background: var(--magenta);
	color: #fff;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--motion);
}
.amerikanu-sticky__cta:hover,
.amerikanu-sticky__cta:focus-visible {
	background: var(--magenta-hover);
	color: #fff;
}

.amerikanu-sticky__navm,
.amerikanu-sticky__ctam {
	display: none;
}

@media (max-width: 899px) {
	.amerikanu-sticky__desktop {
		display: none;
	}
	/* Pillen-balk (David, PDP-feedbackronde 2026-08-11, mobiel punt 1 + mock-akkoord): de balk
	   zelf krijgt een dekkende achtergrond (witte kaartkleur + onderrand) i.p.v. de eerdere
	   pagina-gradient, en elk item is een gevulde pil; de actieve sectie (scrollspy in reis.js,
	   initNavmSpy) licht magenta op. */
	.amerikanu-sticky__navm {
		display: block;
		position: sticky;
		/* Mobielfix (David 14-09): de tabbalk plakt hier standaard tegen de bovenrand. 56px was
		   vast ingerekend als de mobiele hoogte van de navy regio-submenu (chrome.css), maar
		   amerikanu_submenu_context() rendert die balk niet op elke reis, bv. Yucatan mist een
		   plek-hub/ervaringen-link voor de regio en dan blijft het submenu weg. Daardoor bleef
		   hier een lege strook van 56px staan. De regel hieronder zet 56px terug zodra het
		   submenu er wél staat, zonder dat deze balk zelf hoeft te weten waarom. */
		top: 0;
		z-index: 70;
		padding: 10px 12px;
		background: var(--card);
		border-bottom: 1px solid var(--rand-lijn);
		box-shadow: 0 6px 18px -14px rgba(30, 46, 90, 0.25);
	}
	body:has(.amerikanu-submenu) .amerikanu-sticky__navm {
		top: 56px;
	}
	.amerikanu-sticky__navm-rij {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.amerikanu-sticky__navm-rij::-webkit-scrollbar {
		display: none;
	}
	.amerikanu-sticky__navm-chip {
		flex: none;
		font-size: 13px;
		font-weight: 700;
		color: var(--navy);
		background: var(--beige);
		border: none;
		border-radius: var(--radius-pill);
		padding: 8px 14px;
		text-decoration: none;
		white-space: nowrap;
	}
	.amerikanu-sticky__navm-chip.is-actief {
		background: var(--magenta);
		color: #fff;
	}
	/* Fixronde-bevinding 3: .amerikanu-sticky__ctam hieronder is position:fixed (viewport-relatief),
	   dus zonder compensatie blijft de balk bij volledig doorscrollen permanent over de footer-
	   inhoud (footer-links) hangen. Root cause van de eerdere sticky-bottom-poging bevestigd: het
	   Kadence-parenttheme se #wrapper heeft `overflow: hidden; overflow: clip;` (header.php/
	   global.min.css) — élk position:sticky-nakomeling daarbinnen verliest z'n scrollcontainer-
	   referentie op de bottom-as (top-sticky, zoals .amerikanu-sticky__navm hierboven, ontsnapt
	   hieraan in de praktijk; bottom-sticky niet). position:fixed blijft dus de juiste keuze; de
	   footer-overlap lossen we op met een padding-bottom-reserve op body, exact zo groot als de
	   balk se eigen footprint (bottom-offset + hoogte + marge) — de balk overlapt daardoor alleen
	   nog lege, gereserveerde ruimte ná de footer, nooit de footer-inhoud zelf. */
	body {
		padding-bottom: 84px;
	}
	.amerikanu-sticky__ctam {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 8px;
		z-index: 70;
		padding: 0 12px 8px;
	}
	.amerikanu-sticky__ctam-balk {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--card);
		border: 1px solid var(--rand-lijn);
		border-radius: var(--radius-pill);
		padding: 8px 8px 8px 14px;
		box-shadow: 0 -6px 24px -10px rgba(30, 46, 90, 0.25), 0 8px 24px -12px rgba(30, 46, 90, 0.25);
	}
	.amerikanu-sticky__ctam-avatars {
		display: flex;
		flex: none;
	}
	.amerikanu-sticky__ctam-avatars .amerikanu-avatar {
		width: 30px;
		height: 30px;
		border: 2px solid #fff;
	}
	.amerikanu-sticky__ctam-avatars .amerikanu-avatar:not(:first-child) {
		margin-left: -10px;
	}
	.amerikanu-sticky__ctam-prijs {
		font-size: 13px;
		font-weight: 700;
		color: var(--body);
		white-space: nowrap;
	}
	.amerikanu-sticky__ctam-prijs strong {
		color: var(--navy);
	}
	.amerikanu-sticky__ctam-cta {
		margin-left: auto;
		flex: none;
		font-size: 13px;
		font-weight: 700;
		background: var(--magenta);
		color: #fff;
		padding: 9px 16px;
		border-radius: var(--radius-pill);
		text-decoration: none;
		white-space: nowrap;
	}
}

/* -- hotels: klasse-segmented-control + fotopaneel (fase-4 Task 15) ------------------------------- */
.amerikanu-hotels {
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
.amerikanu-hotels__eyebrow {
	display: block;
	margin-bottom: 10px;
}
.amerikanu-hotels__titel {
	margin: 0 0 6px;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.amerikanu-hotels__intro {
	margin: 0 0 26px;
	font-size: 15px;
	color: var(--body);
	max-width: 620px;
}
/* De klassetabs (.amerikanu-hotels__tabs/__tab/__badge) staan sinds 07-09 in componenten.css:
   hetzelfde component doet dienst in het aanvraagformulier (David-besluit, één kiezer). */
.amerikanu-hotels__paneel[hidden] {
	display: none;
}
.amerikanu-hotels__paneel {
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-card);
	padding: 26px 28px;
}
.amerikanu-hotels__paneelkop {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 6px;
}
.amerikanu-hotels__label {
	font-size: 18px;
	font-weight: 800;
	color: var(--navy);
}
.amerikanu-hotels__delta {
	font-size: 14px;
	font-weight: 700;
	color: var(--magenta);
}
.amerikanu-hotels__tekst {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--body);
	max-width: 640px;
}
.amerikanu-hotels__fotos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.amerikanu-hotels__kaart {
	display: block;
	border: 1px solid var(--rand-kaart);
	border-radius: 16px;
	overflow: hidden;
	background: var(--card);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--motion), transform var(--motion);
}
.amerikanu-hotels__kaart:hover,
.amerikanu-hotels__kaart:focus-visible {
	box-shadow: var(--schaduw-hover);
	transform: translateY(-3px);
	color: inherit;
}
.amerikanu-hotels__kaart:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}
.amerikanu-hotels__foto {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}
.amerikanu-hotels__kaart-tekst {
	padding: 12px 14px;
}
.amerikanu-hotels__kaart-titel {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-hotels__kaart-sub {
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted);
}

@media (max-width: 899px) {
	.amerikanu-hotels {
		padding: 40px 12px 0;
	}
	.amerikanu-hotels__titel {
		font-size: 22px;
	}
	.amerikanu-hotels__paneel {
		padding: 16px;
		border-radius: 18px;
	}
	/* Foto-slider (David, PDP-feedbackronde 2026-08-11, mobiel punt 3 + mock-akkoord — vervangt
	   de eerdere gestapelde mini-thumb-lijst, "de foto's zijn nu heel klein"): bijna-schermbrede
	   kaarten met een randje van de volgende kaart als swipe-hint, scroll-snap, en dots eronder
	   (reis.js, initHotelKaartSlider). Hotel-totaalbeeld staat als eerste kaart in de data. */
	.amerikanu-hotels__fotos {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 0 16px 2px;
	}
	.amerikanu-hotels__fotos::-webkit-scrollbar {
		display: none;
	}
	.amerikanu-hotels__kaart {
		flex: 0 0 84%;
		scroll-snap-align: center;
	}
	.amerikanu-hotels__foto {
		height: 200px;
	}
}
/* Dots onder de mobiele foto-slider — buiten de media query gedefinieerd zodat de tokens overal
   bestaan; reis.js voegt de dots alleen toe wanneer de rij daadwerkelijk scrollt (mobiel). */
.amerikanu-hotels__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding-top: 10px;
}
.amerikanu-hotels__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rand-knop);
	transition: background var(--motion);
}
.amerikanu-hotels__dot.is-actief {
	background: var(--magenta);
}

/* -- campers: modelkaarten (D5/D6, 2026-08-10) — vervangt .amerikanu-hotels op camperreizen,
   zelfde kaartvorm (rand, radius 16px, foto 140px/object-fit:cover) maar zonder tabs/badge/delta:
   camperprijzen per model zijn niet bekend, dus hier staat nergens een prijs. -------------------- */
.amerikanu-campers {
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
.amerikanu-campers__eyebrow {
	display: block;
	margin-bottom: 10px;
}
.amerikanu-campers__titel {
	margin: 0 0 6px;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.amerikanu-campers__intro {
	margin: 0 0 26px;
	font-size: 15px;
	color: var(--body);
	max-width: 620px;
}
.amerikanu-campers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.amerikanu-campers__kaart {
	border: 1px solid var(--rand-kaart);
	border-radius: 16px;
	overflow: hidden;
	background: var(--card);
}
.amerikanu-campers__foto {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}
.amerikanu-campers__foto--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--beige);
	color: var(--navy);
}
.amerikanu-campers__kaart-tekst {
	padding: 12px 14px;
}
.amerikanu-campers__kaart-titel {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-campers__kaart-sub {
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted);
}
.amerikanu-campers__kaart-beschrijving {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--body);
}

@media (max-width: 899px) {
	.amerikanu-campers {
		padding: 40px 12px 0;
	}
	.amerikanu-campers__titel {
		font-size: 22px;
	}
	/* Mobiel-390: zelfde gestapelde patroon als de mobiele hotelkaarten (.amerikanu-hotels__fotos
	   hierboven) — rij-layout met kleine thumb + tekst ernaast i.p.v. een 3-koloms grid. */
	.amerikanu-campers__grid {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.amerikanu-campers__kaart {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px;
		border-radius: 12px;
	}
	.amerikanu-campers__foto {
		width: 64px;
		height: 48px;
		flex-shrink: 0;
		border-radius: 8px;
	}
	.amerikanu-campers__kaart-tekst {
		padding: 0;
	}
	.amerikanu-campers__kaart-beschrijving {
		display: none; /* mobiel: alleen naam + typering, zelfde beknoptheid als de hotelkaart-rij */
	}
}

/* -- prijsblok (fase-4 Task 15; punt 13b/c 2026-09-09: volledige design-driekolom) ------------------ */
.amerikanu-prijsblok {
	margin: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
	background: var(--beige);
	border-radius: var(--radius-hero);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 44px;
}
/* kolommen-3 (PDP Definitief.dc.html regel 325 e.v.): hoofd + "Wat bepaalt de prijs?" + inex —
   de design-standaardsituatie, want prijsuitleg_watbepaalt staat via de seed vrijwel altijd
   gevuld. kolommen-4 komt er alleen bij als een reis ook nog het pre-existing "opties"-veld
   gebruikt (geen designonderdeel, maar niet geschrapt — zie prijsblok.php se docblock). */
.amerikanu-prijsblok--kolommen-3 {
	grid-template-columns: 1.1fr 1fr 1fr;
}
.amerikanu-prijsblok--kolommen-4 {
	grid-template-columns: 1.1fr 0.9fr 0.9fr 0.8fr;
}
.amerikanu-prijsblok__eyebrow {
	display: block;
	margin-bottom: 10px;
}
.amerikanu-prijsblok__bedragrij {
	display: flex;
	align-items: baseline;
	gap: 8px;
	/* anker voor .amerikanu-info__paneel, zie hieronder. */
	position: relative;
}
.amerikanu-prijsblok__bedrag {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--navy);
}
.amerikanu-prijsblok__eenheid {
	font-size: 16px;
	font-weight: 600;
	color: var(--body);
}
/* ⓘ-tooltip (gedeeld door sticky.php en prijsblok.php, feedbackronde 2026-09-10 — voorheen twee
   losse title-attribuut-spans met een kale browser-tooltip, past niet in het design). Knop +
   verborgen tekstpaneel; markup + escaping via amerikanu_info_tooltip() (inc/helpers.php), open-
   /sluitgedrag via reis.js initInfoTooltips(). Paneel-styling volgt uitsluitend de design-
   systeem-tokens (design/website-compleet/_ds/…/colors_and_type.css kent zelf geen tooltip-
   component): witte kaart, radius-sm, shadow-md, 1px rand in de bestaande randkleur-token
   (--rand-kaart), bodytekst 14px in de navy-tekstkleur, geen pijltje. Geen transition/animatie —
   [hidden] schakelt direct, dus prefers-reduced-motion is vanzelf gerespecteerd. */
.amerikanu-info {
	/* Rust-toestand 1-op-1 uit design/website-compleet/"PDP Definitief.dc.html" (regel 325-335,
	   de ⓘ-span naast de prijs): width/height 17px, border 1.5px solid #8A93A6 (--muted),
	   font-size 11px, zelfde kleur, geen achtergrond. */
	display: inline-grid;
	place-items: center;
	width: 17px;
	height: 17px;
	/* Kadence se globale "button, .button, …"-regel (global.min.css) legt op élke kale <button>
	   `padding: .4em 1em` op (at bij font-size 11px hierónder de hele doos op — zelfde bug als de
	   .amerikanu-sluitknop-fix hierboven, basis.css) én een navy hover-/focus-achtergrond
	   (`button:hover,button:focus{background:var(--global-palette-btn-bg-hover)}`, hoger
	   specificiteit dan je zou verwachten omdat de rust-regel hier geen background zette). Alle
	   vijf hieronder expliciet gezet — ook in de hover/open-regel verderop — zodat niets van
	   Kadence nog doorschijnt. Dit is geen sluitknop, dus los van de sitewide
	   .amerikanu-sluitknop-lijst opgelost. */
	padding: 0;
	background: none;
	line-height: 1;
	font-family: var(--font);
	font-size: 11px;
	color: var(--muted);
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--muted);
	cursor: pointer;
	flex-shrink: 0;
}
/* Hover/focus én "open" (tap-toggle op touch, geen :hover-status om aan vast te houden): alléén
   rand + "i" in navy, geen vulling — Kadence se button:hover-regel zet zelf wél een navy
   achtergrond (zie hierboven), dus background hier bewust herhaald i.p.v. weggelaten. */
.amerikanu-info:hover,
.amerikanu-info:focus-visible,
.amerikanu-info[aria-expanded='true'] {
	background: none;
	border-color: var(--navy);
	color: var(--navy);
}
.amerikanu-info:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}
.amerikanu-info__paneel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 2;
	width: max-content;
	max-width: 280px;
	padding: 12px 14px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--navy);
	white-space: normal;
}
/* Sticky-balk: de ⓘ staat aan de rechterkant van de bar, dus het paneel rechts uitlijnen zodat
   het niet buiten het scherm valt (fixronde-instructie feedbackronde 2026-09-10). */
.amerikanu-sticky__prijs .amerikanu-info__paneel {
	left: auto;
	right: 0;
}
.amerikanu-prijsblok__opaanvraag {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.amerikanu-prijsblok__sub {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	margin: 4px 0 14px;
}
/* Intro-alinea (punt 13b, 2026-09-09, PDP Definitief.dc.html regel 333): prijsuitleg_kort met
   [personen]/[basisklasse]-inserts, dezelfde tekst als de ⓘ-tooltip (prijsblok.php). */
.amerikanu-prijsblok__intro {
	font-size: 14px;
	line-height: 1.55;
	color: var(--body);
	margin: 0 0 18px;
}
/* "Wat bepaalt de prijs?"-kolom (punt 13b, PDP Definitief.dc.html regel 336-343): alleen
   desktop, zie de @media-override hieronder — het design laat 'm op mobiel volledig weg (geen
   stacked variant, anders dan de andere kolommen). */
.amerikanu-prijsblok__watbepaalt-kop {
	font-size: 14px;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 12px;
}
.amerikanu-prijsblok__watbepaalt-lijst {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: var(--body);
}
.amerikanu-prijsblok__watbepaalt-regel {
	display: flex;
	gap: 10px;
}
.amerikanu-prijsblok__watbepaalt-nr {
	font-weight: 800;
	color: var(--navy);
}
.amerikanu-prijsblok__uitleg {
	font-size: 14px;
	line-height: 1.55;
	color: var(--body);
	margin: 0 0 18px;
}
.amerikanu-prijsblok__uitleg p {
	margin: 0 0 0.8em;
}
.amerikanu-prijsblok__cta-rij {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.amerikanu-prijsblok__vraag-cta {
	/* <button> i.p.v. <a> sinds gate-4-batch-fix punt 5 (opent de plan-popup) — reset +
	   !important tegen dezelfde Kadence-globale-button-collision als de __sluit-classes
	   hierboven (reis.css). */
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy) !important;
	border: 1.5px solid var(--rand-knop);
	background: none !important;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
}
.amerikanu-prijsblok__inex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.amerikanu-prijsblok__inex-kop {
	font-size: 13px;
	font-weight: 800;
	color: var(--muted);
	margin-bottom: 8px;
}
.amerikanu-prijsblok__inex-kop--in {
	color: var(--forest);
}
.amerikanu-prijsblok__inex-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--body);
}
.amerikanu-prijsblok__inex-lijst--uit {
	color: var(--muted);
}
.amerikanu-prijsblok__inex-toggle {
	/* D15: "+N meer"-knop op tablet/mobiel, zie reis.js initInexToggle() — reset + !important
	   tegen dezelfde Kadence-globale-button-collision als __vraag-cta hierboven. Alleen
	   zichtbaar/effectief onder de 899px-breakpoint (CSS hieronder); desktop toont 'm niet. */
	display: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--navy) !important;
	background: none !important;
	border: none;
	padding: 6px 0 0;
	margin-top: 2px;
	text-decoration: underline;
	text-decoration-color: var(--roze);
	text-underline-offset: 3px;
	cursor: pointer;
}
.amerikanu-prijsblok__opties-kop {
	font-size: 13px;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 8px;
}
.amerikanu-prijsblok__opties-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--body);
}

@media (max-width: 899px) {
	.amerikanu-prijsblok {
		margin: 40px 12px 0;
		padding: 22px 18px;
		border-radius: 20px;
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.amerikanu-prijsblok--kolommen-3,
	.amerikanu-prijsblok--kolommen-4 {
		grid-template-columns: 1fr;
	}
	.amerikanu-prijsblok__bedrag {
		font-size: 32px;
	}
	/* Intro-alinea (punt 13b, PDP Definitief.dc.html regel 693): iets groter en compacter dan
	   desktop, zelfde tekst. */
	.amerikanu-prijsblok__intro {
		font-size: 15px;
		line-height: 1.5;
		margin: 0 0 12px;
	}
	/* "Wat bepaalt de prijs?"-kolom: het design laat 'm op mobiel volledig weg (geen stacked
	   variant, PDP Definitief.dc.html regel 689-700 heeft geen middenkolom). */
	.amerikanu-prijsblok__watbepaalt {
		display: none;
	}
	.amerikanu-prijsblok__inex {
		gap: 12px;
	}
	/* D15: inclusief/exclusief-lijsten tonen op tablet/mobiel standaard maar de eerste regels
	   (prijsblok.php se $inex_toon_max) — de rest zit achter "+N meer" (reis.js data-inex-toggle).
	   Volgt PDP Definitief.dc.html se "prijs mobiel"-frame, dat per kolom ook maar 3 regels toont. */
	.amerikanu-prijsblok__inex-item--extra {
		display: none;
	}
	.amerikanu-prijsblok__inex-lijst.is-open .amerikanu-prijsblok__inex-item--extra {
		display: list-item;
	}
	.amerikanu-prijsblok__inex-toggle {
		display: block;
	}
}

/* -- expertblok: buiten-marge om het (edge-to-edge) adviesblok-component ------------------------- */
.amerikanu-expertblok {
	margin: 56px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 0;
}
@media (max-width: 899px) {
	.amerikanu-expertblok {
		margin: 18px 12px 0;
	}
	/* D15 + correctie 2026-08-11 (David: "foto's hoog, veel ruimte, dan de rest — geen compacte
	   sectie zoals het design"): het navy adviesblok-component (componenten.css) wordt op
	   home/plek/excursie/overzicht ongewijzigd hergebruikt — dus alléén hier, gescopet onder de
	   PDP-specifieke .amerikanu-expertblok-ouder, de compacte PDP-frame-variant. De eerdere D15-
	   invulling centreerde alles (naar Info-paginas-Mobiel-voorbeeld) en toonde namen onder de
	   portretten; het PDP-frame ("expert mobiel", PDP Definitief.dc.html r.707-719) is LINKS
	   uitgelijnd: 48px-portretten als strak rijtje boven de kop, géén namen/taglines/eyebrow/
	   trust, kop 18px, alles links. Specificity (0,2,0+) wint van componenten.css (0,1,0). */
	.amerikanu-expertblok .amerikanu-adviesblok {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 22px 18px;
		border-radius: 20px;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__experts {
		order: -1;
		justify-content: flex-start;
		gap: 8px;
		margin-bottom: 10px;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__expert .amerikanu-avatar {
		width: 48px;
		height: 48px;
		margin: 0;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__expert-naam,
	.amerikanu-expertblok .amerikanu-adviesblok__expert-tagline,
	.amerikanu-expertblok .amerikanu-adviesblok__eyebrow,
	.amerikanu-expertblok .amerikanu-adviesblok__trust {
		display: none;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__kop {
		font-size: 18px;
		line-height: 1.25;
		margin-bottom: 5px;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__tekst {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 12px;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__cta-rij {
		gap: 6px;
	}
	.amerikanu-expertblok .amerikanu-adviesblok__mini-cta {
		padding: 10px 14px;
	}
}

/* -- gerelateerd: 3-koloms grid desktop, horizontale scroll-rij mobiel (fase-4 Task 15) ---------- */
.amerikanu-gerelateerd {
	padding: 64px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) 80px;
}
.amerikanu-gerelateerd__titel {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--navy);
}
.amerikanu-gerelateerd__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 899px) {
	.amerikanu-gerelateerd {
		padding: 40px 0 20px;
	}
	.amerikanu-gerelateerd__titel {
		margin: 0 18px 12px;
		font-size: 22px;
	}
	.amerikanu-gerelateerd__grid {
		display: flex;
		gap: 12px;
		padding: 0 18px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.amerikanu-gerelateerd__grid::-webkit-scrollbar {
		display: none;
	}
	.amerikanu-gerelateerd__grid > .amerikanu-reiskaart {
		flex: none;
		width: 250px;
	}
}