/* Uitgeklede stylesheet voor de overzichtspagina, gegenereerd, niet met de hand bewerken.
   Zie main.css voor het origineel; deze bevat alleen wat op /cruises/ iets doet. */
/* ========================================
   Let's Cruise theme, main.css v0.2.0
   Design: Fris & Maritiem
   Brand: navy #0A2540 + ocean #0F75BC + sky #27A9E1
   Font: Plus Jakarta Sans + Instrument Serif (italic)
   ======================================== */

:root {
	--lct-primary: #0F75BC;
	--lct-primary-dark: #0a5a93;
	--lct-navy: #0A2540;
	--lct-navy-soft: #1A2A3E;
	--lct-sky: #27A9E1;
	--lct-highlight: #7FD3F1;
	--lct-text: #1A2A3E;
	--lct-text-mid: #3D5773;
	/* v5.0.243: was #5F7288 = 4,16:1 op wit, onder de WCAG AA-eis van 4,5
	   voor normale tekst. #5F7288 haalt 4,94:1 en blijft visueel grijs. */
	--lct-text-muted: #5F7288;
	--lct-bg: #ffffff;
	--lct-bg-subtle: #F6FAFD;
	--lct-bg-accent: #EAF6FC;
	--lct-border: #E4ECF3;
	--lct-success: #36c97b;

	--lct-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--lct-font-italic: 'Instrument Serif', Georgia, serif;

	--lct-container: 1280px;
	--lct-radius-sm: 10px;
	--lct-radius-md: 14px;
	--lct-radius-lg: 18px;
	--lct-radius-xl: 20px;
	--lct-radius-2xl: 28px;
	--lct-radius-pill: 999px;

	--lct-shadow-sm: 0 1px 2px rgba(10,37,64,0.04), 0 8px 24px rgba(10,37,64,0.06);
	--lct-shadow-md: 0 1px 2px rgba(10,37,64,0.04), 0 12px 32px rgba(10,37,64,0.06);
	--lct-shadow-lg: 0 4px 14px rgba(10,37,64,0.06), 0 24px 60px rgba(10,37,64,0.12);
	--lct-shadow-cta: 0 8px 24px rgba(15,117,188,0.3);

	/* v0.7.29: Section padding tokens, zorgen voor consistent rythme
	   - sm: kleine cards / CTA blokken
	   - md: standaard content sectie (default)
	   - lg: hero / belangrijke sectie
	   - xl: full-bleed showcase / onboard / status-match */
	--lct-section-py-sm: 48px;
	--lct-section-py-md: 60px;
	--lct-section-py-lg: 80px;
	--lct-section-py-xl: 100px;
	--lct-section-px: 24px;
	--lct-section-px-mobile: 16px;

	--lct-transition: 0.2s ease;
}

/* === Reset & base === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--lct-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lct-text);
	background: var(--lct-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lct-primary); text-decoration: none; transition: color var(--lct-transition); }
a:hover { color: var(--lct-navy); }

h1, h2, h3, h4, h5, h6 { font-family: var(--lct-font-body); font-weight: 800; line-height: 1.05; margin: 0 0 0.5em; color: var(--lct-navy); letter-spacing: -0.5px; }
h1 { font-size: clamp(40px, 7vw, 84px); letter-spacing: -2px; line-height: 0.98; }
h2 { font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.8px; }
h3 { font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.5px; }
h4 { font-size: 20px; letter-spacing: -0.3px; line-height: 1.25; font-weight: 700; }

.lct-container { max-width: var(--lct-container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .lct-container { padding: 0 80px; }
}

.screen-reader-text { position: absolute; left: -9999px; clip: rect(0,0,0,0); }
.lct-skip-link { position: absolute; left: -9999px; padding: 12px 20px; background: var(--lct-primary); color: #fff; }
.lct-skip-link:focus { left: 12px; top: 12px; z-index: 9999; }
@media (max-width: 900px) { .lct-hide-mobile { display: none !important; }
}

/* === ICONS === */
.lct-icon { width: 14px; height: 14px; flex-shrink: 0; }
.lct-icon-sm { width: 16px; height: 16px; }

/* === TOP BAR === */
.lct-topbar { background: var(--lct-navy); color: rgba(255,255,255,0.85); font-size: 12.5px; padding: 6px 0; }
.lct-topbar-inner {
	max-width: var(--lct-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
@media (min-width: 1024px) { .lct-topbar-inner { padding: 0 80px; }
}
.lct-topbar-left, .lct-topbar-right { display: flex; align-items: center; gap: 22px; }
.lct-topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.lct-topbar-divider { opacity: 0.4; }
.lct-topbar-link { color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 8px; }
.lct-topbar-link:hover { color: var(--lct-highlight); }
@media (max-width: 700px) { .lct-topbar { display: none; }
}

/* === TOP BAR · "Ik ben op reis"-rij (v5.0.165) === */
/* Eigen rij bovenaan de topbar; de gewone contactregel (sinds 2017 etc.)
   blijft er onder ongewijzigd links staan. */
.lct-topbar-reisrow {
	border-bottom: 1px solid rgba(242,176,30,.35);
	background: rgba(242,176,30,.10);
}
.lct-topbar-reisline {
	max-width: var(--lct-container); margin: 0 auto; padding: 7px 24px;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	color: #fff; font-size: 13px; line-height: 1.2;
}
@media (min-width: 1024px) { .lct-topbar-reisline { padding: 7px 80px; }
}
.lct-topbar-reisline .lct-reis-ico { font-size: 16px; line-height: 1; }
.lct-topbar-reisline .lct-reis-title { font-weight: 700; color: var(--lct-highlight); letter-spacing: .2px; }
.lct-topbar-reisline .lct-reis-info { color: rgba(255,255,255,.85); font-weight: 500; }
.lct-topbar-reisline .lct-reis-pill {
	display: inline-block; background: var(--lct-highlight); color: var(--lct-navy);
	font-weight: 800; border-radius: 999px; padding: 1px 9px; font-size: 12px; letter-spacing: .3px;
}
.lct-topbar-reisline .lct-reis-tm { opacity: .8; }
@media (max-width: 700px) {
	.lct-topbar-reis { display: block !important; }
	.lct-topbar-reisline { flex-wrap: wrap; gap: 6px 9px; padding: 7px 16px; font-size: 12.5px; }
	.lct-topbar-reisline .lct-reis-info { flex-basis: 100%; text-align: center; }
}


/* === HEADER === */
.lct-header {
	background: #fff;
	border-bottom: 1px solid var(--lct-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--lct-transition);
}
.lct-header.is-scrolled { box-shadow: 0 2px 16px rgba(10,37,64,0.08); }
.lct-header-inner {
	max-width: var(--lct-container);
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 1024px) { .lct-header-inner { padding: 12px 80px; }
}
.lct-logo a { display: flex; align-items: center; gap: 12px; }
.lct-logo img, .lct-logo .custom-logo { max-height: 60px; width: auto; display: block; }
.lct-logo-text { font-size: 22px; font-weight: 800; color: var(--lct-navy); letter-spacing: -0.5px; }

/* === DESKTOP NAV === */
.lct-nav-desktop { flex: 1; display: flex; justify-content: center; }
.lct-menu, .lct-menu-mobile, .lct-footer-menu, .lct-social-menu { list-style: none; padding: 0; margin: 0; }
.lct-menu { display: flex; gap: 32px; align-items: center; }
.lct-menu > li > a {
	color: var(--lct-text-mid);
	font-size: 14.5px;
	font-weight: 600;
	transition: color var(--lct-transition);
}
.lct-menu > li > a:hover, .lct-menu > .current-menu-item > a { color: var(--lct-primary); }

/* Sub-menu */
.lct-menu .sub-menu {
	display: none;
	position: absolute;
	background: #fff;
	min-width: 220px;
	padding: 8px;
	box-shadow: var(--lct-shadow-md);
	border-radius: var(--lct-radius-md);
	list-style: none;
	margin-top: 8px;
}
.lct-menu li { position: relative; }
.lct-menu li:hover > .sub-menu { display: block; }
.lct-menu .sub-menu a { display: block; padding: 10px 14px; color: var(--lct-text-mid); border-radius: 8px; font-size: 14px; }
.lct-menu .sub-menu a:hover { background: var(--lct-bg-subtle); color: var(--lct-primary); }

/* === BUTTONS === */
.lct-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: var(--lct-radius-pill);
	background: var(--lct-primary);
	color: #fff !important;
	font-family: var(--lct-font-body);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: var(--lct-shadow-cta);
	border: none;
	cursor: pointer;
	transition: transform var(--lct-transition), box-shadow var(--lct-transition);
	white-space: nowrap;
}
.lct-btn-primary:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 12px 28px rgba(15,117,188,0.4); }
.lct-btn-primary.lct-btn-lg { padding: 14px 24px; font-size: 14.5px; }
.lct-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: var(--lct-radius-pill);
	background: transparent;
	color: var(--lct-primary) !important;
	font-family: var(--lct-font-body);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border: 1.5px solid var(--lct-primary);
	transition: var(--lct-transition);
	white-space: nowrap;
}
.lct-btn-outline:hover { background: var(--lct-primary); color: #fff !important; }
.lct-btn-outline.lct-btn-lg { padding: 14px 24px; font-size: 14.5px; }
.lct-btn-light {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--lct-radius-pill);
	background: var(--lct-bg-accent);
	color: var(--lct-primary) !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: var(--lct-transition);
}
.lct-btn-light:hover { background: var(--lct-primary); color: #fff !important; }
.lct-btn-block { display: flex; justify-content: center; width: 100%; }

/* === BURGER === */
.lct-burger { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; gap: 4px; flex-direction: column; }
.lct-burger span { display: block; width: 24px; height: 2px; background: var(--lct-navy); transition: var(--lct-transition); }
.lct-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lct-burger.is-open span:nth-child(2) { opacity: 0; }
.lct-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* === MOBILE NAV === */
.lct-nav-mobile {
	position: fixed;
	top: 0;
	right: -100%;
	width: 85%;
	max-width: 360px;
	height: 100vh;
	background: #fff;
	padding: 80px 24px 24px;
	box-shadow: var(--lct-shadow-lg);
	transition: right 0.3s ease;
	z-index: 90;
	overflow-y: auto;
}
.lct-nav-mobile.is-open { right: 0; }
.lct-menu-mobile { display: block; }
.lct-menu-mobile li { border-bottom: 1px solid var(--lct-border); }
.lct-menu-mobile a { display: block; padding: 14px 0; color: var(--lct-text); font-weight: 600; font-size: 16px; }
.lct-menu-mobile a:hover { color: var(--lct-primary); }
.lct-menu-mobile .sub-menu { padding-left: 16px; }
.lct-mobile-contact { margin-top: 24px; padding-top: 24px; border-top: 2px solid var(--lct-primary); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .lct-nav-desktop { display: none; } .lct-burger { display: flex; }
}

/* === HERO === */
.lct-hero {
	position: relative;
	height: 720px;
	overflow: hidden;
	/* v4.2.43: fallback gradient, alleen zichtbaar als de hero-img faalt te laden.
	   Als de img wel laadt overlapt 'ie deze gradient volledig (object-fit: cover). */
	background: linear-gradient(135deg, #1e3a5f 0%, #0F75BC 50%, #2563eb 100%);
}
.lct-hero-image, .lct-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* v5.0.59: video fade-in zodra hij speelt, de geoptimaliseerde <img> eronder is de poster/LCP */
.lct-hero-video { opacity: 0; transition: opacity .6s ease; }
.lct-hero-video.is-playing { opacity: 1; }
.lct-hero h1 {
	color: #fff;
	margin: 24px 0 18px;
	font-weight: 800;
}
.lct-hero h1 em {
	font-family: var(--lct-font-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--lct-highlight);
}
.lct-hero p {
	font-size: 19px;
	line-height: 1.55;
	max-width: 580px;
	color: rgba(255,255,255,0.92);
}
.lct-hero-actions .lct-btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.55); }
.lct-hero-actions .lct-btn-outline:hover { background: #fff; color: var(--lct-primary) !important; }
@media (max-width: 700px) {
	.lct-hero { height: 600px; }
	.lct-hero h1 { font-size: 44px; letter-spacing: -1.4px; }
	.lct-hero p { font-size: 16px; }
}
@media (max-width: 768px) {
	.lct-searchbar-tab { flex: none; white-space: nowrap; }
	/* v5.0.447: zie main.css, zonder deze selector krimpen de tabs in plaats van te schuiven. */
	.lct-searchbar-tabs > .lct-searchbar-tab { flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip; padding-left: 11px; padding-right: 11px; }
}
/* v5.0.196: rederij-blok in de /cruises/-hero bij een actief rederij-filter. */
.lc-index-company-card { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 18px 10px 12px; background: rgba(255,255,255,.95); border: 1px solid #dbe9f4; border-radius: 14px; text-decoration: none; color: #0A2540; box-shadow: 0 6px 18px rgba(10,37,64,.08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; max-width: 100%; }
.lc-index-company-card:hover { transform: translateY(-2px); border-color: #b9d6ea; box-shadow: 0 10px 26px rgba(15,76,129,.16); }
.lc-index-company-card img { flex: none; height: 30px; width: auto; max-width: 110px; object-fit: contain; }
.lc-index-company-card-txt { display: flex; flex-direction: column; min-width: 0; }
.lc-index-company-card-txt strong { font-size: 14.5px; font-weight: 700; color: #0F4C81; line-height: 1.2; }
.lc-index-company-card-txt small { font-size: 12px; color: #51606f; line-height: 1.35; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-index-company-card-arrow { flex: none; font-weight: 800; color: #0F4C81; }
@media (max-width: 560px) { .lc-index-company-card-txt small { white-space: normal; }
}
.lct-searchbar {
	max-width: min(1420px, 100%); /* v5.0.197: breder zoekdeck */
	margin: 0 auto;
	background: #fff;
	border-radius: var(--lct-radius-xl);
	box-shadow: var(--lct-shadow-lg);
	border: 1px solid #f1f5f9;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.lct-searchbar-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none; /* v5.0.200: tabs zijn echte links */
	padding: 8px 16px;
	border-radius: var(--lct-radius-pill);
	font-size: 13.5px;
	font-weight: 600;
	background: transparent;
	color: var(--lct-text-muted);
	border: none;
	cursor: pointer;
	transition: var(--lct-transition);
}
.lct-searchbar-tab.is-active { background: var(--lct-bg-accent); color: var(--lct-primary); }
.lct-searchbar-tab:hover { background: var(--lct-bg-subtle); }
.lct-searchbar-fields {
	display: flex;
	border-radius: var(--lct-radius-md);
	border: 1px solid var(--lct-border);
	overflow: hidden;
}
.lct-searchbar-field {
	flex: 1;
	min-width: 0;
	padding: 14px 22px;
	border-right: 1px solid var(--lct-border);
	background: transparent;
	cursor: pointer;
	transition: background var(--lct-transition);
}
.lct-searchbar-field:hover { background: var(--lct-bg-subtle); }
.lct-searchbar-field:last-of-type { border-right: 0; }
.lct-searchbar-label { font-size: 12px; font-weight: 700; color: var(--lct-primary); letter-spacing: 0.8px; text-transform: uppercase; }
.lct-searchbar-value { font-size: 16px; font-weight: 600; color: var(--lct-navy); margin-top: 4px; }
.lct-searchbar-submit { display: flex; align-items: center; padding: 10px 14px; }
@media (max-width: 900px) {
	.lct-searchbar-fields { flex-direction: column; }
	.lct-searchbar-field { border-right: 0; border-bottom: 1px solid var(--lct-border); }
	.lct-searchbar-field:last-of-type { border-bottom: 0; }
	.lct-searchbar-submit { padding: 14px; }
	.lct-searchbar-submit .lct-btn-primary { width: 100%; justify-content: center; }
}

/* === SECTION === */
/* v5.0.423: gelijkgetrokken met main.css. Deze klasse komt niet voor op /cruises/,
   maar twee stylesheets die iets anders zeggen over dezelfde klasse is een val voor
   wie hier later kijkt, dan lijkt de oude waarde geldende. */
.lct-section { padding: clamp(44px, 6vw, 90px) 0; }
.lct-section + .lct-section { padding-top: clamp(32px, 4.5vw, 70px); }
.lct-section-header { margin-bottom: 44px; }
.lct-section-header.is-center { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.lct-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--lct-sky);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.lct-section h2 { margin: 0; }
.lct-section-header p { font-size: 17px; color: var(--lct-text-mid); margin-top: 14px; max-width: 640px; line-height: 1.55; }
.lct-section-header.is-center p { margin-left: auto; margin-right: auto; }

/* === CRUISE CARDS === */
.lct-cruise-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) { .lct-cruise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lct-cruise-grid { grid-template-columns: 1fr; }
}
.lct-cruise-card {
	background: #fff;
	border-radius: var(--lct-radius-xl);
	overflow: hidden;
	box-shadow: var(--lct-shadow-md);
	display: flex;
	flex-direction: column;
	transition: transform var(--lct-transition), box-shadow var(--lct-transition);
	color: var(--lct-text);
}
.lct-cruise-card:hover { transform: translateY(-4px); box-shadow: var(--lct-shadow-lg); color: var(--lct-text); }
.lct-cruise-card-image { position: relative; height: 200px; overflow: hidden; background: var(--lct-bg-accent); }
.lct-cruise-card-image img { width: 100%; height: 100%; object-fit: cover; }
.lct-cruise-card-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255,255,255,0.94);
	color: var(--lct-primary);
	padding: 5px 11px;
	border-radius: var(--lct-radius-pill);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.lct-cruise-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lct-cruise-card-company { font-size: 12px; font-weight: 700; color: var(--lct-sky); letter-spacing: 0.6px; text-transform: uppercase; min-height: 16px; }
/* v0.7.13: 3-line clamp + min-height zorgt dat alle titels even hoog zijn ongeacht woordlengte */
.lct-cruise-card-title {
	font-size: 17px; font-weight: 700; color: var(--lct-navy); line-height: 1.25;
	margin: 0; letter-spacing: -0.2px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; min-height: calc(17px * 1.25 * 3);
}
.lct-cruise-card-meta {
	font-size: 13.5px; color: var(--lct-text-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	min-height: 19px;
}
.lct-cruise-card-footer {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lct-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.lct-cruise-card-footer > div:first-child { min-width: 0; flex: 1; }
.lct-cruise-card-price { font-size: 12px; color: var(--lct-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lct-cruise-card-price strong { color: var(--lct-navy); font-weight: 800; font-size: 22px; margin-left: 4px; }
.lct-cruise-card-footer .lct-btn-light { flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; }
.lct-page-hero.has-image > .lct-container { position: relative; z-index: 2; }
.lct-post-hero > .lct-container { position: relative; z-index: 2; }

/* === FOOTER === */
.lct-footer { background: var(--lct-navy); color: rgba(255,255,255,0.78); padding: 70px 0 30px; margin-top: 0; }
.lct-footer-inner { max-width: var(--lct-container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .lct-footer-inner { padding: 0 80px; }
}
.lct-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 50px; }
@media (max-width: 900px) { .lct-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 500px) { .lct-footer-grid { grid-template-columns: 1fr; }
}
.lct-footer-brand img, .lct-footer-brand .custom-logo { height: 56px; margin-bottom: 18px; filter: brightness(0) invert(1); display: block; }
/* v0.7.13: nieuw wit SVG-logo */
.lct-footer-logo { display: inline-block; margin-bottom: 18px; line-height: 0; }
.lct-footer-logo svg { width: 200px; max-width: 100%; height: auto; display: block; }
/* v5.0.599: het echte logo; niet wit filteren, het lichtblauw hoort erbij. */
.lct-footer-brand .lct-footer-logo img.lct-footer-logo-img { width: 230px; max-width: 100%; height: auto; margin: 0; filter: none; display: block; }
.lct-footer-brand p { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.lct-footer-label { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
.lct-footer-block address { font-style: normal; font-size: 14px; line-height: 1.7; }
.lct-footer-block small { color: rgba(255,255,255,0.78); font-size: 12px; }
.lct-footer-contact { font-size: 14px; line-height: 1.9; margin: 0 0 14px; }
.lct-footer-contact a { color: rgba(255,255,255,0.85); }
.lct-footer-contact a:hover { color: var(--lct-highlight); }
.lct-footer-cta { color: var(--lct-highlight); font-weight: 700; font-size: 14px; }
.lct-footer-cta:hover { color: #fff; }
.lct-footer-menu { list-style: none; padding: 0; margin: 0; }
.lct-footer-menu li { margin-bottom: 8px; font-size: 14px; }
.lct-footer-menu a { color: rgba(255,255,255,0.78); }
.lct-footer-menu a:hover { color: var(--lct-highlight); }
.lct-social { display: flex; gap: 10px; margin-top: 12px; }
.lct-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--lct-radius-pill);
	background: rgba(255,255,255,0.1);
	color: #fff;
	transition: var(--lct-transition);
}
.lct-social a:hover { background: var(--lct-primary); }
.lct-social a svg { width: 18px; height: 18px; }

.lct-footer-affiliations {
	margin-top: 50px;
	padding: 30px 0;
	border-top: 1px solid rgba(255,255,255,0.10);
	border-bottom: 1px solid rgba(255,255,255,0.10);
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.lct-footer-affiliations img { max-height: 42px; width: auto; max-width: 100%; height: auto; filter: brightness(1.1) opacity(0.95); object-fit: contain; }
/* v4.0.0: face2face logo zonder geforceerde inline style, laat browser de natural aspect berekenen */
.lct-footer-aff-img { display: block; }
.lct-footer-affiliations .lct-footer-label { margin: 0; }
.lct-footer-bottom {
	margin-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: rgba(255,255,255,0.55);
}
.lct-footer-bottom a { color: rgba(255,255,255,0.55); }
.lct-footer-bottom a:hover { color: var(--lct-highlight); }
.lct-pagination .page-numbers.current { background: var(--lct-primary); color: #fff; border-color: var(--lct-primary); }

/* Container alignment, match theme container */
.letscruise-cruise .lc-container,
.letscruise-index .lc-container,
.letscruise-acties .lc-container {
	max-width: var(--lct-container);
	padding: 0 24px;
}
@media (min-width: 1024px) {
	.letscruise-cruise .lc-container,
	.letscruise-index .lc-container,
	.letscruise-acties .lc-container {
		padding: 0 80px;
	}
}

/* Round corners + soft shadows op key elementen */
.letscruise-cruise .lc-cta-card,
.letscruise-cruise .lc-advisor-block,
.letscruise-cruise .lc-day-airport,
.letscruise-index .lc-card,
.letscruise-acties .lc-card {
	border-radius: var(--lct-radius-lg) !important;
	box-shadow: var(--lct-shadow-sm);
}
.letscruise-cruise .lc-crumbs {
	font-size: 13px;
	color: var(--lct-text-muted);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.letscruise-cruise .lc-crumbs a { color: var(--lct-text-muted); text-decoration: none; }
.letscruise-cruise .lc-crumbs a:hover { color: var(--lct-primary); }
.letscruise-cruise .lc-crumbs span { opacity: 0.5; }
.letscruise-cruise .lc-tab-nav a.is-active { color: var(--lct-primary); border-bottom-color: var(--lct-primary); }
.letscruise-cruise .lc-detail-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: flex-start;
}
@media (max-width: 1024px) {
	.letscruise-cruise .lc-detail-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* v5.0.27: oude .letscruise-cruise CTA-balk-regels verwijderd, die class wordt
   nergens gezet (deed dus niets) en probeerde balk juist te tonen. De balk is
   nu bewust verborgen op mobiel (zie regel verderop bij .lc-mobile-cta-bar). */

/* Hide "Bel mij terug" floating knop op de cruise-detailpagina, de mobiele
   CTA-balk heeft daar al een eigen telefoonknop, dus de FAB overlapte die alleen.
   v5.0.26: gebruikt de ECHTE body-class .is-cruise-single (gezet via body_class
   filter in functions.php). De oude regels mikten op .letscruise-cruise, een class
   die nergens wordt gezet en dus niets deed. */
.is-cruise-single .lc-floating-callback,
.is-cruise-single .lc-callback-pill,
.is-cruise-single .lc-callback-fab { display: none !important; }

/* =====================================================
   NIEUW ONTWERP, CRUISE INDEX (/cruises/)
   v0.4.4: theme override + nieuwe kaartstijl
   ===================================================== */

/* Page hero (index) */
.lc-index .lc-index-page-hero {
	background: var(--lct-bg-subtle);
	border-bottom: 1px solid var(--lct-border);
	padding: 50px 0 36px;
	margin-bottom: 32px;
}
.lc-index .lc-index-page-hero h1 {
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 800;
	color: var(--lct-navy) !important;
	margin: 0 0 12px;
	letter-spacing: -1.4px;
	line-height: 1;
	font-family: var(--lct-font-body) !important;
}
.lc-index .lc-index-subtitle {
	font-size: 17px;
	color: var(--lct-text-mid);
	line-height: 1.55;
	margin: 0;
}
.lc-index .lc-index-subtitle strong { color: var(--lct-navy); font-weight: 800; }
.lc-index .lc-index-mode-link {
	font-size: 14px;
	color: var(--lct-text-muted);
	margin: 14px 0 0;
}
.lc-index .lc-index-mode-link a {
	color: var(--lct-primary);
	font-weight: 700;
	text-decoration: none;
}

/* Hide oude .lc-index-header (we vervangen 'm) */
.lc-index .lc-index-header { display: none !important; }

/* === v0.7.37: Override plugin's eigen badge pseudo-elementen ===
   De plugin (letscruise/assets/css/frontend.css regel 1466-1487) rendert
   ✨ NIEUW (::before, top-left) en ⚓ ERVAREN (::after, top-right) als
   pseudo-elementen op .lc-cruise-card. Die zijn los van onze nieuwe
   .lc-card-badge-stack, gevolg: dubbele visited-badge die andere stack-
   badges overlapt. Hier uitschakelen zodat alleen onze stack rendert. */
/* v0.7.79: legacy pseudo-element badges (✨ NIEUW / ⚓ ERVAREN) volledig
   uitschakelen, overal, niet alleen op .lc-index. De stack-badges
   (.lc-card-badge-stack) zijn nu de single source of truth. */
.lc-cruise-card.is-new::before,
.lc-cruise-card.is-new::after,
.lc-cruise-card.is-visited::before,
.lc-cruise-card.is-visited::after,
.lc-cruise-card.is-featured::before,
.lc-cruise-card.is-featured::after {
	display: none !important;
	content: none !important;
}

/* Card grid in de nieuwe stijl: 2 kolom layout per v0.4.6 */
/* =====================================================
   v0.7.36, Cruise Cards (gebaseerd op design canvas referentie)
   Card-anatomy:
     ┌─────────────────────────┐
     │  IMAGE        [BADGE]   │  ← image met badge-stack top-right
     │               [BADGE]   │
     │ [LOGO]                  │  ← rederij-logo overlay onderaan image
     ├─────────────────────────┤
     │ rederij · regio         │  ← mini-meta
     │ Cruise titel groot      │  ← h3
     │ Schipnaam               │  ← sub
     │ 📅 🌙 📍 🚢 (2×2 grid)  │  ← 4-spec
     │ Aanleghavens preview     │  ← optioneel
     ├─────────────────────────┤
     │ vanaf €X p.p.   Bekijk→ │  ← footer
     └─────────────────────────┘
   ===================================================== */
.lc-index .lc-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1200px) { .lc-index .lc-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) { .lc-index .lc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lc-index .lc-card-grid { grid-template-columns: 1fr; gap: 16px; }
}

.lc-index .lc-cruise-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 6px 18px rgba(10,37,64,0.06);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lct-border, #E5E7EB);
	color: var(--lct-text);
	text-decoration: none;
	transition: transform var(--lct-transition), box-shadow var(--lct-transition);
}
.lc-index .lc-cruise-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(10,37,64,0.08), 0 12px 28px rgba(10,37,64,0.12);
	color: var(--lct-text);
}
.lc-index .lc-cruise-card:focus-visible {
	outline: 2px solid var(--lct-primary);
	outline-offset: 3px;
}

/* === Image area === */
.lc-index .lc-card-image {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	background: var(--lct-bg-accent);
}
.lc-index .lc-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.lc-index .lc-cruise-card:hover .lc-card-image img { transform: scale(1.04); }
.lc-index .lc-card-image-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lct-primary);
	font-size: 14px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--lct-bg-accent), var(--lct-sky-soft, #C7E9F7));
}

/* === Badges (terug op image als absolute stack top-right) === */
.lc-index .lc-card-badge-stack {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	z-index: 3;
	max-width: calc(100% - 20px);
}
/* v0.7.53: badge-stack staat nu op .lc-card-image (zoals oude design), geen verberg-regel nodig */
.lc-index .lc-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
	background: rgba(255,255,255,0.96);
	color: var(--lct-navy, #0A2540);
	box-shadow: 0 2px 6px rgba(10,37,64,0.18);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	line-height: 1.2;
	white-space: nowrap;
}
/* v5.0.243: het lichte uiteinde van de gradiënt (#F59E0B) gaf witte tekst
   op 2,15:1, onleesbaar in de zon en een AA-fout. De text-shadow verdoezelde
   dat. Nu twee rode tinten: wit haalt 4,83 tot 6,47:1 over de hele verloop. */
.lc-index .lc-card-badge--lastminute {
	background: linear-gradient(135deg, #B91C1C, #DC2626);
	color: #fff;
}
.lc-index .lc-card-badge--new { background: #E7F4FB; color: #1e7ba6; border: 1px solid #C9E6F4; }
.lc-index .lc-card-badge--featured { background: #FBF3E1; color: #8A6410; border: 1px solid #EAD9AC; }
.lc-index .lc-card-badge--river { background: #DBEAFE; color: #1E40AF; }
.lc-index .lc-card-badge--visited { background: var(--lct-navy, #0A2540); color: #fff; }
/* v5.0.243: wit op het gele deel (#FACC15) was 1,53:1, de slechtst leesbare
   tekst op de site, en dat op het element dat het meeste aandacht trekt.
   Het goud blijft, de tekst wordt navy: 4,88 tot 10,15:1 over het verloop. */
.lc-index .lc-card-badge--actie {
	background: linear-gradient(135deg, #D97706, #FACC15);
	color: var(--lct-navy, #0A2540);
	font-weight: 800;
}

/* === Company logo (BEHOUDEN, top-left van image) === */
.lc-index .lc-card-company-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255,255,255,0.96);
	border-radius: var(--lct-radius-sm, 8px);
	padding: 6px 10px;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10);
	min-height: 36px;
	display: inline-flex;
	align-items: center;
}
.lc-index .lc-card-company-badge img {
	height: 22px;
	max-width: 100px;
	width: auto;
	display: block;
	object-fit: contain;
}
.lc-index .lc-card-company-text {
	font-size: 12px;
	font-weight: 800;
	color: var(--lct-navy, #0A2540);
	letter-spacing: 0.2px;
}

/* === Body === */
.lc-index .lc-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.lc-index .lc-card-body-head {
	/* Wrapper bestaat alleen voor wide layout, bij 4-col staat alles inline gelijk */
	display: contents;
}
.lc-index .lc-card-meta-line {
	font-size: 12px;
	font-weight: 700;
	color: var(--lct-sky, #27A9E1);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.lc-index .lc-card-meta-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lc-index .lc-card-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--lct-navy, #0A2540);
	line-height: 1.25;
	margin: 0;
	letter-spacing: -0.2px;
	/* Max 3 regels titel, wrap netjes */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lc-index .lc-card-ship-name {
	font-size: 12.5px;
	color: var(--lct-text-muted, #5B6573);
	margin: 0 0 4px;
	font-weight: 500;
}
.lc-index .lc-card-ship-meta {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 500;
}

/* === Specs lijst, compact bij 4-col === */
.lc-index .lc-card-specs {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 0;
	border-top: 1px solid var(--lct-border, #E5E7EB);
	border-bottom: 1px solid var(--lct-border, #E5E7EB);
	margin-top: 2px;
}
.lc-index .lc-card-spec {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.3;
}
.lc-index .lc-card-spec-icon {
	font-size: 14px;
	flex-shrink: 0;
	width: 18px;
	text-align: center;
}
.lc-index .lc-card-spec-label {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3px;
	flex-shrink: 0;
	min-width: 70px;
}
.lc-index .lc-card-spec-value {
	font-size: 12.5px;
	color: var(--lct-navy, #0A2540);
	font-weight: 600;
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: break-word;
}

/* === Route (aanleghavens), compact, max 2 regels === */
.lc-index .lc-card-route {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	line-height: 1.4;
	padding: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* v5.0.39: vaste hoogte voor exact 2 regels zodat alle kaarten in een rij
	   even hoog worden en prijs + knop netjes uitlijnen, ook als de route korter
	   is of (zie hieronder) ontbreekt. */
	min-height: 2.8em;
}
/* Reserveer dezelfde ruimte als er GEEN aanleghavens zijn, zodat een kaart
   zonder route niet inklapt en uit de pas loopt met de buren. */
.lc-index .lc-card-route-spacer {
	min-height: 2.8em;
	padding: 4px 0 0;
}
.lc-index .lc-card-route-label {
	color: var(--lct-text-muted, #5B6573);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-right: 6px;
}
.lc-index .lc-card-route-text {
	color: var(--lct-text, #1A1A1F);
	font-weight: 500;
}

/* === Footer === */
.lc-index .lc-card-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	flex-wrap: wrap;
}
.lc-index .lc-card-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
}
.lc-index .lc-card-price-label {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	text-transform: lowercase;
	letter-spacing: 0.2px;
	margin-bottom: 2px;
}
.lc-index .lc-card-price-value {
	font-size: 19px;
	font-weight: 800;
	color: var(--lct-navy, #0A2540);
	letter-spacing: -0.4px;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.lc-index .lc-card-price-pp {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 600;
	margin-left: 2px;
}
.lc-index .lc-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 14px;
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	border-radius: var(--lct-radius-pill, 999px);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.2px;
	white-space: nowrap;
	transition: background var(--lct-transition, 0.15s);
}
.lc-index .lc-cruise-card:hover .lc-card-cta {
	background: var(--lct-navy, #0A2540);
}

/* Last-minute outline blijft */
.lc-index .lc-cruise-card.is-lastminute { outline: 2px solid rgba(220,38,38,0.18); outline-offset: -2px; }

/* === ACTIVE FILTER CHIPS (boven results) === */
.lc-index .lc-active-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: #f5f9fc;
	border-radius: 10px;
	margin: 0 0 18px;
}
.lc-index .lc-active-filter-chips-label {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 6px;
}
.lc-index .lc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #fff;
	color: var(--lct-navy, #0A2540);
	border-radius: var(--lct-radius-pill, 999px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--lct-border, #E5E7EB);
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-chip:hover {
	background: #fff5f5;
	border-color: #fca5a5;
	color: #b91c1c;
}
.lc-index .lc-chip-x {
	color: #5F7288;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
.lc-index .lc-chip:hover .lc-chip-x { color: #b91c1c; }
.lc-index .lc-chip-clear {
	margin-left: auto;
	padding: 6px 12px;
	color: var(--lct-text-muted, #5B6573);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}
.lc-index .lc-chip-clear:hover { color: var(--lct-primary, #0F75BC); }
@media (max-width: 700px) {
	.lc-index .lc-chip-clear { margin-left: 0; margin-top: 4px; width: 100%; text-align: left; }
}

/* Filter sidebar, pillen */
.lc-index .lc-filter-chip,
.lc-index .lc-active-filter-chip {
	background: var(--lct-bg-accent) !important;
	color: var(--lct-primary) !important;
	border-radius: var(--lct-radius-pill) !important;
}

/* Container voor de hele index */
.lc-index { background: #fff; }

/* =====================================================
   v0.4.6, Bulletproof sidebar + layout fixes
   ===================================================== */

/* Force 2-col grid op cruise-detail */
.letscruise-cruise .lc-detail-grid {
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: 48px !important;
	align-items: flex-start !important;
}
@media (max-width: 1024px) {
	.letscruise-cruise .lc-detail-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* === v0.7.36: oude v0.4.6 card-badges weggehaald:
   .lc-card-price-badge bestaat niet meer in template (prijs nu in .lc-card-footer),
   en .lc-card-company-badge wordt nu geregeld door v3.5.11 fix verderop. === */

/* === v0.4.6, actieve search bar selects === */
.lct-searchbar-select {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lct-navy);
	padding: 4px 0;
	outline: none;
	cursor: pointer;
	margin-top: 4px;
}
.lct-searchbar-select:focus { color: var(--lct-primary); }
.lct-searchbar-field label.lct-searchbar-label { cursor: pointer; }

/* =====================================================
   v0.4.7, logo groter + visum kader + grid hard force
   ===================================================== */

/* HARD overrule plugin CSS, sidebar moet zichtbaar zijn */
.letscruise-cruise .lc-detail-layout > .lc-container > .lc-detail-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 48px !important;
	align-items: flex-start !important;
}
.letscruise-cruise .lc-detail-grid > .lc-detail-main {
	min-width: 0 !important;
	max-width: 100% !important;
}
.letscruise-cruise .lc-detail-grid > .lc-detail-sidebar {
	display: block !important;
	visibility: visible !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 380px !important;
	position: sticky !important;
	top: 160px !important;
}
@media (max-width: 1100px) {
	.letscruise-cruise .lc-detail-layout > .lc-container > .lc-detail-grid {
		grid-template-columns: minmax(0, 1fr) 320px !important;
		gap: 32px !important;
	}
	.letscruise-cruise .lc-detail-grid > .lc-detail-sidebar { max-width: 320px !important; }
}
@media (max-width: 768px) {
	.letscruise-cruise .lc-detail-layout > .lc-container > .lc-detail-grid {
		grid-template-columns: 1fr !important;
	}
	.letscruise-cruise .lc-detail-grid > .lc-detail-sidebar {
		max-width: 100% !important;
		position: static !important;
		order: -1; /* aside boven main */
	}
}

/* v3.5.11 / v3.5.12 / v3.5.13: company-badge: TOP-LEFT, écht shrink-fit. 
   Witte container precies even groot als het logo. Padding minimaal + line-height 0 om 
   vertical witruimte weg te halen. */
.lc-index .lc-card-company-badge,
.lct-cruise-card .lct-card-company-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	background: #fff !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	box-shadow: 0 3px 10px rgba(10,37,64,0.20) !important;
	z-index: 3;
	width: auto !important;
	min-width: 0 !important;
	max-width: 170px !important;
	min-height: 0 !important;
	height: auto !important;
	display: inline-block !important;
	line-height: 0 !important;
	font-size: 0 !important;
}
.lc-index .lc-card-company-badge img,
.lct-cruise-card .lct-card-company-badge img {
	height: 26px !important;
	max-height: 26px !important;
	max-width: 150px !important;
	width: auto !important;
	display: block !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	vertical-align: top !important;
}
.lc-index .lc-card-company-text,
.lct-cruise-card .lct-card-company-text {
	display: inline-block;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	color: var(--lct-navy, #0A2540) !important;
	letter-spacing: 0.2px;
	white-space: nowrap;
	line-height: 1 !important;
}
.lc-breadcrumb .is-current { color: var(--lct-text-mid); }
.lc-pill { display: inline-block; padding: 5px 12px; border-radius: var(--lct-radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.lc-tab-link.is-active { color: var(--lct-navy); border-bottom-color: var(--lct-primary); }
@media (max-width: 900px) { body.is-cruise-single { padding-bottom: 80px; }
}
.lct-breadcrumb--on-dark .is-current { color: #fff; }
.lct-availability-dot { width: 8px; height: 8px; background: #10B981; border-radius: 50%; box-shadow: 0 0 0 4px rgba(16,185,129,0.2); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.lct-offerte-msg.is-ok    { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.lct-offerte-msg.is-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.lct-offerte-form-progress span.is-active { background: var(--lct-primary); color: #fff; }

/* =====================================================================
   v0.5.5, /cruises/ overzicht polish (matches Cruise_overzicht mockup)
   ===================================================================== */

/* === Compactere page hero === */
.lc-index .lc-index-page-hero { padding: 32px 0 24px; background: var(--lct-bg-subtle); border-bottom: 1px solid var(--lct-border); }
.lc-index .lc-index-page-hero .lc-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.lc-index .lc-index-page-hero h1 { font-size: 36px; font-weight: 800; color: var(--lct-navy); margin: 6px 0 6px; line-height: 1.1; letter-spacing: -0.02em; }
.lc-index .lc-index-subtitle { font-size: 14.5px; color: var(--lct-text-mid); margin: 0; line-height: 1.5; }
.lc-index .lc-index-subtitle strong { color: var(--lct-navy); font-weight: 800; }
.lc-index .lc-index-mode-link { margin: 6px 0 0; font-size: 13.5px; color: var(--lct-primary); }
.lc-index .lc-index-mode-link a { color: var(--lct-primary); font-weight: 600; text-decoration: none; }

/* === Active filter chips bar === */
.lc-index .lc-active-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 0 4px; max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.lc-index .lc-active-filters strong { font-size: 12px; color: var(--lct-text-mid); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }
.lc-index .lc-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--lct-bg-accent); color: var(--lct-navy); border-radius: var(--lct-radius-pill); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.lc-index .lc-filter-chip:hover { background: var(--lct-primary); color: #fff; }
.lc-index .lc-filter-chip .lc-chip-x { font-size: 14px; opacity: 0.6; }
.lc-index .lc-filter-chip-clear { background: transparent; color: var(--lct-text-mid); font-weight: 500; }
.lc-index .lc-filter-chip-clear:hover { background: #FEE2E2; color: #991B1B; }

/* === Search + sort bar polish === */
.lc-index .lc-search-row { max-width: 1280px; margin: 12px auto 16px; padding: 0 32px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.lc-index .lc-search-form { display: flex; gap: 8px; flex: 1; }
.lc-index .lc-search-form input[type="text"],
.lc-index .lc-search-form input[type="search"] { flex: 1; padding: 11px 14px 11px 38px; border: 1px solid var(--lct-border); border-radius: var(--lct-radius-md); font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center; }
.lc-index .lc-search-form input:focus { border-color: var(--lct-primary); outline: none; box-shadow: 0 0 0 3px rgba(15,117,188,0.12); }
.lc-index .lc-search-form button { background: var(--lct-primary); color: #fff; padding: 11px 22px; border: 0; border-radius: var(--lct-radius-md); font-weight: 700; cursor: pointer; font-size: 14px; }
.lc-index .lc-search-form button:hover { background: var(--lct-navy); }
.lc-index .lc-sort-form select { padding: 10px 14px; border: 1px solid var(--lct-border); border-radius: var(--lct-radius-md); font-size: 13.5px; font-weight: 600; color: var(--lct-navy); background: #fff; cursor: pointer; }
.lc-index .lc-filter-toggle { display: none; padding: 10px 16px; background: #fff; border: 1px solid var(--lct-border); border-radius: var(--lct-radius-md); font-weight: 700; cursor: pointer; }
@media (max-width: 900px) { .lc-index .lc-filter-toggle { display: inline-flex; } .lc-index .lc-search-row { grid-template-columns: 1fr; }
}

.lc-index .lc-results-layout {
	max-width: 1280px;
	margin: 0 auto;
	/* v0.7.75: minder ruimte boven, filter sluit strakker aan op de hero */
	padding: 4px 32px 64px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.lc-index .lc-filter-sidebar { background: #fff; border: 1px solid var(--lct-border); border-radius: var(--lct-radius-lg); padding: 22px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 2px 8px rgba(10,37,64,0.04); }
.lc-index .lc-filter-sidebar h2,
.lc-index .lc-filter-sidebar .lc-sidebar-header { font-size: 16px; font-weight: 800; color: var(--lct-navy); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--lct-border); display: flex; justify-content: space-between; align-items: center; }
.lc-index .lc-filter-group { margin-bottom: 22px; }
.lc-index .lc-filter-label { display: block; font-weight: 700; font-size: 12px; color: var(--lct-primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.lc-index .lc-filter-sidebar select,
.lc-index .lc-filter-sidebar input[type="text"],
.lc-index .lc-filter-sidebar input[type="number"] { width: 100%; padding: 8px 12px; border: 1px solid var(--lct-border); border-radius: var(--lct-radius-md); font-size: 13.5px; background: #fff; color: var(--lct-text); }
.lc-index .lc-filter-sidebar select:focus,
.lc-index .lc-filter-sidebar input:focus { border-color: var(--lct-primary); outline: none; box-shadow: 0 0 0 2px rgba(15,117,188,0.12); }
.lc-index .lc-stacked-filters button[type="submit"] { width: 100%; background: var(--lct-primary); color: #fff; padding: 11px 16px; border: 0; border-radius: var(--lct-radius-md); font-weight: 700; cursor: pointer; margin-top: 8px; font-size: 14px; }
.lc-index .lc-stacked-filters button[type="submit"]:hover { background: var(--lct-navy); }

/* === Acties banner bovenaan results === */
.lc-index .lc-acties-banner { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-radius: var(--lct-radius-lg); padding: 14px 20px; margin-bottom: 18px; }
.lc-index .lc-acties-banner-icon { font-size: 28px; }
.lc-index .lc-acties-banner-text { flex: 1; }
.lc-index .lc-acties-banner-title { font-size: 13.5px; font-weight: 800; color: #92400E; text-transform: uppercase; letter-spacing: 0.4px; }
.lc-index .lc-acties-banner-sub { font-size: 14.5px; color: #78350F; margin-top: 2px; }
.lc-index .lc-acties-banner-cta { background: #92400E; color: #fff; padding: 9px 16px; border-radius: var(--lct-radius-md); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lc-index .lc-acties-banner-cta:hover { background: #78350F; color: #fff; }

/* === In-feed CTA: "Te veel opties?" === */
.lc-index .lc-infeed-cta { grid-column: 1 / -1; background: linear-gradient(135deg, var(--lct-bg-subtle), var(--lct-bg-accent)); border-radius: var(--lct-radius-lg); padding: 28px 32px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.lc-index .lc-infeed-cta-text { flex: 1; min-width: 220px; }
.lc-index .lc-infeed-cta h3 { font-size: 22px; font-weight: 800; color: var(--lct-navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.lc-index .lc-infeed-cta p { font-size: 14.5px; color: var(--lct-text-mid); margin: 0; line-height: 1.55; }
.lc-index .lc-infeed-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* === Pagination polish === */
.lc-index .lc-pagination { display: flex; justify-content: center; gap: 6px; margin: 36px 0 16px; flex-wrap: wrap; }
.lc-index .lc-pagination a, .lc-index .lc-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--lct-radius-md); background: #fff; border: 1px solid var(--lct-border); color: var(--lct-text); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.lc-index .lc-pagination a:hover { border-color: var(--lct-primary); color: var(--lct-primary); }
.lc-index .lc-pagination .current { background: var(--lct-primary); color: #fff; border-color: var(--lct-primary); }
.lc-index .lc-pagination .dots { background: transparent; border: 0; color: var(--lct-text-mid); }
.lct-region-cta .lct-eyebrow { color: rgba(255,255,255,0.7); }

/* === v0.6.5: Featured cruise cards: gelijke hoogte + prijs op één regel === */
.lct-cruise-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.lct-cruise-card-body {
	display: flex;
	flex-direction: column;
	flex: 1; /* duwt footer naar bottom voor gelijke knop-lijn */
	min-height: 0;
}
.lct-cruise-card-footer {
	margin-top: auto !important; /* override default 14px gap */
	flex-shrink: 0;
	gap: 12px;
}
.lct-cruise-card-price {
	white-space: nowrap; /* "€ 1.595" wrapt niet meer */
	flex: 1;
	min-width: 0;
}
.lct-cruise-card-price strong {
	white-space: nowrap;
}
/* Bekijk-knop compacter zodat prijs ruimte krijgt */
.lct-cruise-card-footer .lct-btn-pill,
.lct-cruise-card-footer .lct-btn,
.lct-cruise-card-footer a.lct-cta {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Grid: maximaal 4 kolommen op brede schermen voor 8 cruises in 2 rijen */
.lct-cruise-grid {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1280px) { .lct-cruise-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) { .lct-cruise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lct-cruise-grid { grid-template-columns: 1fr; }
}
/* Prijs-label: smaller meta + grotere strong */
.lct-cruise-card-price strong {
	font-size: 19px;
}

/* =====================================================================
   v0.7.0, Cruise Buddy Wizard + Cruise Stories
   ===================================================================== */

/* === MATCHER HERO === */
.lct-matcher-hero { background: linear-gradient(180deg, var(--lct-bg-subtle) 0%, #fff 100%); padding: 48px 0; }
.lct-matcher-step.is-active { display: block; }
@keyframes lctFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lctSpin { to { transform: rotate(360deg); } }

.lct-story-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(15,23,42,0.05);
	transition: all .22s ease;
	border: 1px solid var(--lct-bg-subtle, #F6FAFD);
}
.lct-story-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15,23,42,0.10);
	border-color: var(--lct-border, #E4ECF3);
}
.lct-story-card:hover .lct-story-card-image img { transform: scale(1.05); }
.lct-contact-hero > .lct-container { position: relative; z-index: 1; }
.lct-contact-hero .lct-eyebrow { color: #FBBF24; font-weight: 600; margin-bottom: 16px; }
.lct-contact-availability {
	display: inline-flex; align-items: center; gap: 10px;
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #BBF7D0;
	padding: 10px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 600;
}
.lct-availability-dot {
	width: 8px; height: 8px;
	background: #22C55E;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
	animation: lct-pulse 2s ease-in-out infinite;
}
@keyframes lct-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(34,197,94,0.25); }
	50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34,197,94,0.15); }
}
.lct-contact-msg.is-ok { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.lct-contact-msg.is-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.lct-field {
	display: flex; flex-direction: column;
	min-width: 140px;
}
.lct-field input,
.lct-field select,
.lct-contact-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--lct-border, #E4ECF3);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	color: #111827;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.lct-field input:focus,
.lct-field select:focus,
.lct-contact-form textarea:focus {
	outline: none;
	border-color: #0F172A;
	box-shadow: 0 0 0 3px rgba(15,23,42,0.08);
}
.lct-adviseur-header .lct-availability-dot {
	background: #BBF7D0;
	box-shadow: 0 0 0 3px rgba(187,247,208,0.3);
}
.lct-faq-list {
	max-width: 800px; margin: 50px auto 0;
	display: flex; flex-direction: column; gap: 10px;
}
.lct-faq-item {
	background: #fff;
	border: 1px solid var(--lct-bg-subtle, #F6FAFD);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease;
}
.lct-faq-item[open] { border-color: var(--lct-border, #E4ECF3); }
.lct-faq-item summary {
	padding: 20px 24px;
	font-size: 16px;
	font-weight: 600;
	color: #0F172A;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
}
.lct-faq-item summary::-webkit-details-marker { display: none; }
/* v0.7.17: oude ::after plus-icoon, alleen tonen als de markup GEEN .lct-faq-icon span heeft (legacy FAQs).
   Rederij FAQs gebruiken sinds v0.7.14 een span.lct-faq-icon; daar hier de ::after onderdrukken. */
.lct-faq-item summary::after {
	content: '+';
	font-size: 26px;
	font-weight: 300;
	color: var(--lct-text-muted, #5F7288);
	flex-shrink: 0;
	transition: transform .2s ease;
	line-height: 1;
}
.lct-faq-item summary:has(.lct-faq-icon)::after { content: none; display: none; }
/* v0.7.17: extra safe-fallback voor browsers zonder :has() support (oude Safari) */
.lct-rederij-faq .lct-faq-item summary::after { content: none !important; display: none !important; }
.lct-faq-item[open] summary::after { transform: rotate(45deg); }

/* =====================================================
   v0.7.11, Modern filter bar + custom combo with logos
   ===================================================== */

/* === Searchbar layout overrides === */
/* v5.0.200: duplicaat-definitie .lct-searchbar samengevoegd in de hoofddefinitie (r~392). */
.lct-searchbar-fields {
	border: 1px solid var(--lct-border, #E4ECF3);
	border-radius: 14px;
	overflow: visible;  /* combo dropdown moet eruit kunnen */
	background: #fff;
}
.lct-searchbar-field {
	position: relative;
	padding: 14px 20px 12px;
	border-right: 1px solid var(--lct-bg-subtle, #F6FAFD);
}
.lct-searchbar-field:hover { background: #FAFBFC; }
.lct-searchbar-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px /* v5.0.255: ondergrens, was 10.5px */;
	font-weight: 700;
	color: var(--lct-primary, #2563EB);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 2px;
}
.lct-searchbar-label .lct-field-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	opacity: 0.85;
}

/* Native selects, caret-icoon + meer ademruimte */
.lct-searchbar-select {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--lct-navy, #0F172A);
	padding: 4px 22px 4px 0;
	outline: none;
	cursor: pointer;
	margin-top: 2px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 14px;
}
.lct-searchbar-select:focus { color: var(--lct-primary, #2563EB); }
.lct-searchbar-select:hover { color: var(--lct-primary, #2563EB); }

/* === Submit-button: prominent === */
.lct-searchbar-submit {
	display: flex;
	align-items: center;
	padding: 8px;
}
.lct-searchbar-submit .lct-btn-primary {
	height: 100%;
	min-height: 56px;
	padding: 0 24px;
	font-size: 14.5px;
	font-weight: 700;
	gap: 8px;
	border-radius: 10px;
	white-space: nowrap;
}
.lct-searchbar-submit .lct-icon-sm { width: 16px; height: 16px; }

/* === Custom combo (rederij met logo's) === */
.lct-searchbar-field--combo { padding-right: 16px; }
.lct-combo { position: relative; margin-top: 2px; }
.lct-combo-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 2px 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--lct-navy, #0F172A);
	outline: none;
}
.lct-combo-current {
	display: flex;
	align-items: center;
	gap: 9px;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}
.lct-combo-current-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lct-combo-caret {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform .2s ease;
	color: var(--lct-navy, #0F172A);
}
.lct-combo.is-open .lct-combo-caret { transform: rotate(180deg); }
.lct-combo-button:hover { color: var(--lct-primary, #2563EB); }

.lct-combo-list {
	position: absolute;
	top: calc(100% + 12px);
	left: -16px;
	right: -16px;
	min-width: 280px;
	max-height: 380px;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
	border: 1px solid var(--lct-bg-subtle, #F6FAFD);
	z-index: 1000;
	padding: 6px;
}
.lct-combo-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	color: var(--lct-navy, #0F172A);
	text-align: left;
	transition: background .12s ease;
}
.lct-combo-item:hover { background: #F1F5F9; }
.lct-combo-item.is-selected { background: #EFF6FF; color: var(--lct-primary, #2563EB); font-weight: 600; }
.lct-combo-item-logo {
	flex-shrink: 0;
	width: 36px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 4px;
	color: #9ca3af;
	font-size: 14px;
	font-weight: 700;
}
.lct-combo-item-logo img,
img.lct-combo-item-logo {
	max-width: 36px;
	max-height: 24px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.lct-combo-item-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.lct-combo-list { left: 0; right: 0; min-width: 100%; max-height: 60vh; }
}
.lc-quick-tab.is-active {
	background: #fff;
	color: var(--lct-navy, #0A2540);
	border-color: #fff;
}
.lc-quick-tab--lm.is-active {
	background: #fff;
	color: #DC2626;
	border-color: #fff;
}
.lct-acties-tab.is-active {
	background: var(--lct-navy, #0A2540);
	color: #fff;
	border-color: var(--lct-navy, #0A2540);
}
.lct-acties-tab.is-active .lct-acties-tab-count {
	background: rgba(255,255,255,0.18);
	color: #fff;
}
.lct-acties-featured .lct-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: #FEF3C7;
	color: #92400E;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 16px;
}
/* Validity-link blijft eigen klikgebied */
.lct-featured-body .lc-action-validity { position: relative; z-index: 3; }
.lct-acties-trust-header .lct-eyebrow { color: var(--lct-primary, #0F75BC); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.lct-rederij-statusmatch .lct-btn-primary {
	background: #FCD34D;
	color: var(--lct-navy, #0A2540) !important;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(252,211,77,0.35);
}
.lct-rederij-statusmatch .lct-btn-primary:hover {
	background: #FBBF24;
	color: var(--lct-navy, #0A2540) !important;
	transform: translateY(-2px);
}
.lct-faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.lct-faq-item {
	background: #fff;
	border: 1px solid var(--lct-border, #E4ECF3);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.18s ease;
}
.lct-faq-item[open] {
	border-color: var(--lct-primary, #0F75BC);
	box-shadow: 0 4px 14px rgba(15,117,188,0.06);
}
.lct-faq-item[open] .lct-faq-icon {
	transform: rotate(45deg);
	background: var(--lct-primary, #0F75BC);
	color: #fff;
}

/* v3.5.10: Rivierschip badge (top-right, kan naast Last Minute top-left) */
.lc-index .lc-card-badge-river {
	position: absolute;
	top: 14px;
	right: 14px;
	background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.3px;
	padding: 6px 11px;
	border-radius: var(--lct-radius-pill, 999px);
	z-index: 4;
	box-shadow: 0 2px 8px rgba(14,165,233,0.32);
	text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
/* op last-minute + river kaarten: river-badge een rij eronder zodat ze NOOIT overlappen */
.lc-index .lc-cruise-card.is-lastminute.is-river .lc-card-badge-river {
	top: 50px; /* onder de last-minute badge */
}
.lc-index .lc-cruise-card.is-river { /* lichte aqua-outline */ }
.lct-rederijen-hero .lct-eyebrow {
	color: #FCD34D;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* =====================================================
   v0.7.17, Sub-menu support (hover dropdown)
   ===================================================== */
.lct-menu li { position: relative; }
.lct-menu .lct-menu-caret {
	display: inline-block;
	margin-left: 4px;
	font-size: 12px;
	opacity: 0.7;
	transition: transform 0.18s ease;
}
.lct-menu .lct-menu-has-children:hover > a .lct-menu-caret,
.lct-menu .lct-menu-has-children:focus-within > a .lct-menu-caret {
	transform: rotate(180deg);
}
.lct-menu .lct-menu-has-children:hover > .lct-submenu,
.lct-menu .lct-menu-has-children:focus-within > .lct-submenu {
	display: block;
}
/* Footer / vertikale lijst, submenus laten zien als ingesprongen lijst i.p.v. dropdown */
.lct-footer-menu .lct-submenu,
.lct-menu.is-vertical .lct-submenu {
	position: static;
	display: block;
	min-width: 0;
	padding: 4px 0 4px 16px;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-size: 13px;
}
.lct-footer-menu .lct-submenu li a,
.lct-menu.is-vertical .lct-submenu li a {
	padding: 4px 0;
	font-size: 13px;
	opacity: 0.85;
}
.lct-footer-menu .lct-menu-caret,
.lct-menu.is-vertical .lct-menu-caret { display: none; }
@media (max-width: 880px) {
	.lct-menu .lct-submenu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.lct-menu .lct-menu-caret { display: none; }
}
.lct-submenu .lct-menu-label { flex: 1; }
/* Footer + mobile keeps logos kleiner */
.lct-footer-menu .lct-menu-company-logo {
	width: 20px; height: 20px; padding: 2px;
	margin-right: 8px;
}

/* =====================================================
   v0.7.19, Megamenu support
   ===================================================== */
/* Megamenu container, wide dropdown met grid layout */
.lct-menu .lct-has-megamenu { position: static; }  /* zodat dropdown breed kan worden */
/* v0.7.20: hover-bridge zodat dropdown niet sluit tussen parent-link en dropdown */
.lct-menu .lct-has-megamenu > a { position: relative; }
.lct-menu .lct-has-megamenu > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;            /* onzichtbare brug van 14px onder de link */
	background: transparent;
	pointer-events: auto;
}
.lct-menu .lct-megamenu {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + 8px);  /* iets kleinere offset; hover-brug overbrugt het gat */
	min-width: 720px;
	max-width: min(95vw, 1100px);
	display: none;           /* v0.7.20: display toggle ipv visibility/opacity, werkt betrouwbaarder */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px 30px;
	padding: 26px 32px;
	background: #fff;
	border: 1px solid var(--lct-border, #E4ECF3);
	border-radius: 14px;
	box-shadow: 0 24px 50px rgba(15,23,42,0.18);
	z-index: 100;
}
.lct-menu .lct-has-megamenu:hover > .lct-megamenu,
.lct-menu .lct-has-megamenu:focus-within > .lct-megamenu {
	display: grid;
}
@media (max-width: 880px) {
	.lct-menu .lct-megamenu {
		position: static;
		display: block;
		min-width: 0;
		max-width: 100%;
		grid-template-columns: 1fr;
		padding: 0 0 0 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
		transform: none;
		left: auto;
		visibility: visible;
		opacity: 1;
	}
}
.lct-region-cta-matcher .lct-eyebrow {
	color: rgba(255,255,255,0.7);
	letter-spacing: 1.3px;
	font-size: 12px;
}
.lct-region-cta-matcher .lct-btn-primary {
	background: #fff;
	color: var(--lct-navy, #0A2540);
	padding: 15px 30px;
	font-weight: 700;
	font-size: 15.5px;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: inline-block;
}
.lct-region-cta-matcher .lct-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}
.lct-blog-hero-content.on-dark,
.lct-blog-hero-content.on-dark .lct-eyebrow,
.lct-blog-hero-content.on-dark .lct-blog-meta {
	color: #fff;
}
.lct-blog-newsletter .lct-eyebrow { color: rgba(255,255,255,0.7); }
.lct-blog-newsletter-form .lct-btn-primary {
	background: #fff;
	color: var(--lct-navy, #0A2540);
	padding: 14px 24px;
	border-radius: 10px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
}
.lct-blog-pagination .page-numbers.current {
	background: var(--lct-primary, #0F75BC);
	border-color: var(--lct-primary, #0F75BC);
	color: #fff;
}

.lct-rederij-ratings-detail .lct-eyebrow {
	color: var(--lct-primary, #0F75BC);
	margin-bottom: 14px;
}
.lct-blog-comment-list .children {
	list-style: none;
	margin: 14px 0 0 56px;
	padding: 0;
	border-left: 2px solid var(--lct-border, #E4ECF3);
	padding-left: 18px;
}
@media (max-width: 760px) {
	.lct-blog-comment-list .children { margin-left: 16px; padding-left: 12px; }
}
.lct-rederij-hero-actions .lct-btn-primary { background: #0F75BC; }
.lct-breadcrumb--on-dark .is-current { color: #fff; font-weight: 600; }
.lct-rederij-onboard .lct-eyebrow { color: #93C5FD; }
.lct-rederij-statusmatch .lct-btn-primary {
	background: #fff;
	color: var(--lct-primary, #0F75BC);
	font-weight: 800;
}
.lct-rederij-statusmatch .lct-btn-primary:hover {
	background: #FCD34D;
	color: var(--lct-navy, #0A2540);
}
.lct-rederij-cruises-header .lct-eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--lct-primary, #0F75BC);
}
.lct-cruise-sticky-bar.is-visible { transform: translateY(0); }
.lct-newsletter-form-status.is-success { color: #BBF7D0; font-weight: 600; }
.lct-newsletter-form-status.is-error   { color: #FECACA; }

/* =====================================================
   v0.7.37, Filter sidebar (checkbox-style, match mockup)
   ===================================================== */

.lc-index .lc-filter-sidebar {
	background: #fff;
	border: 1px solid var(--lct-border, #E5E7EB);
	border-radius: 14px;
	padding: 0;
	font-size: 14px;
	/* v0.7.38: clipping-fix. Regel 2706 zet sticky + max-height + overflow-y:auto
	   die de hele sidebar afknipt onder ~5 blokken op kleinere viewports.
	   Hier opheffen: laat sidebar gewoon meeflowen met page-scroll. */
	position: static !important;
	max-height: none !important;
	overflow: visible !important;
}

.lc-index .lc-fs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--lct-border, #E5E7EB);
}
.lc-index .lc-fs-title {
	font-size: 17px;
	font-weight: 800;
	margin: 0;
	color: var(--lct-navy, #0A2540);
}
.lc-index .lc-fs-reset {
	font-size: 13px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 600;
	text-decoration: none;
	padding: 4px 8px;
	border-radius: 6px;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-fs-reset:hover {
	background: #fef2f2;
	color: #b91c1c;
}

.lc-index .lc-fs-form {
	padding: 0;
}

/* === Filter block (one per category) === */
.lc-index .lc-fs-block {
	padding: 18px 20px;
	border-bottom: 1px solid var(--lct-border, #E5E7EB);
}
.lc-index .lc-fs-block:last-of-type {
	border-bottom: 0;
}
.lc-index .lc-fs-block-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--lct-navy, #0A2540);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.lc-index .lc-fs-block-soon {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #92400E;
	background: #FEF3C7;
	padding: 2px 8px;
	border-radius: 4px;
}

/* === List of checkbox items === */
.lc-index .lc-fs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lc-index .lc-fs-list li {
	margin: 0;
}
.lc-index .lc-fs-list li.lc-fs-hidden {
	display: none;
}
.lc-index .lc-fs-block.is-expanded .lc-fs-hidden {
	display: list-item;
}

.lc-index .lc-fs-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 6px;
	color: var(--lct-text, #1A1A1F);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	transition: background var(--lct-transition, 0.15s);
	cursor: pointer;
}
.lc-index .lc-fs-check:hover {
	background: #f5f9fc;
	color: var(--lct-navy, #0A2540);
}
.lc-index .lc-fs-check.is-on {
	background: #e8f4fb;
	color: var(--lct-navy, #0A2540);
	font-weight: 700;
}
.lc-index .lc-fs-check.is-disabled {
	color: #5F7288;
	cursor: not-allowed;
	pointer-events: none;
}

.lc-index .lc-fs-check-box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.lc-index .lc-fs-check:hover .lc-fs-check-box {
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fs-check.is-on .lc-fs-check-box {
	background: var(--lct-primary, #0F75BC);
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fs-check.is-disabled .lc-fs-check-box {
	background: #f1f5f9;
	border-color: #e2e8f0;
}
.lc-index .lc-fs-check-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lc-index .lc-fs-check-count {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.lc-index .lc-fs-check.is-on .lc-fs-check-count {
	color: var(--lct-primary, #0F75BC);
}

/* === "+ X meer" toggle button === */
.lc-index .lc-fs-more {
	margin-top: 6px;
	padding: 6px 8px;
	background: transparent;
	border: 0;
	color: var(--lct-primary, #0F75BC);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 6px;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-fs-more:hover {
	background: #f0f9ff;
}

/* === Dual-range price slider (v0.7.38) === */
.lc-index .lc-fs-price {
	padding: 4px 4px 0;
}
.lc-index .lc-fs-price-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 800;
	color: var(--lct-navy, #0A2540);
	font-variant-numeric: tabular-nums;
	padding: 4px 0 10px;
}
.lc-index .lc-fs-price-sep {
	color: #cbd5e1;
	font-weight: 400;
}
.lc-index .lc-fs-range-track {
	position: relative;
	height: 24px;
	margin: 0 9px;
}
.lc-index .lc-fs-range-track::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	background: #e2e8f0;
	border-radius: 999px;
	transform: translateY(-50%);
	pointer-events: none;
}
.lc-index .lc-fs-range-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	background: var(--lct-primary, #0F75BC);
	border-radius: 999px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}
.lc-index .lc-fs-range-input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: -9px;
	right: -9px;
	width: calc(100% + 18px);
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	background: transparent;
	pointer-events: none; /* alleen thumbs catchen events */
	margin: 0;
	z-index: 2;
}
.lc-index .lc-fs-range-input::-webkit-slider-runnable-track {
	background: transparent;
	border: 0;
	height: 24px;
}
.lc-index .lc-fs-range-input::-moz-range-track {
	background: transparent;
	border: 0;
	height: 24px;
}
.lc-index .lc-fs-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--lct-primary, #0F75BC);
	cursor: grab;
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(15,117,188,0.5);
	pointer-events: auto;
	margin-top: 0;
	position: relative;
	z-index: 3;
}
.lc-index .lc-fs-range-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--lct-primary, #0F75BC);
	cursor: grab;
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(15,117,188,0.5);
	pointer-events: auto;
}
.lc-index .lc-fs-range-input:active::-webkit-slider-thumb { cursor: grabbing; }
.lc-index .lc-fs-range-input:active::-moz-range-thumb { cursor: grabbing; }
.lc-index .lc-fs-price-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 600;
	margin-top: 4px;
}
.lc-index .lc-fs-price-hint {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-style: italic;
	margin-top: 8px;
	line-height: 1.4;
}

/* === Apply button === */
.lc-index .lc-fs-apply {
	padding: 16px 20px 18px;
	border-top: 1px solid var(--lct-border, #E5E7EB);
	background: #fafbfc;
}
.lc-index .lc-fs-apply-btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--lct-transition, 0.15s);
	letter-spacing: 0.2px;
}
.lc-index .lc-fs-apply-btn:hover {
	background: var(--lct-navy, #0A2540);
}

/* === Disabled block (stijl, voor nu UI-only) === */
.lc-index .lc-fs-block--disabled {
	opacity: 0.65;
}
.lc-index .lc-fs-block--disabled .lc-fs-block-title {
	color: var(--lct-text-muted, #5B6573);
}

/* === Verberg de OUDE combobox-styling die niet meer rendert ===
   Was 213 regels filter-sidebar (regel 273-486). Backwards-compat met
   eventuele andere templates die hetzelfde classnaam delen blijft intact;
   alleen inside .lc-filter-sidebar overruled. */
.lc-index .lc-filter-sidebar .lc-combobox,
.lc-index .lc-filter-sidebar .lc-stacked-filters,
.lc-index .lc-filter-sidebar .lc-filter-group {
	/* leeg: oude class-namen worden niet meer gegenereerd binnen sidebar */
}

/* =====================================================
   v0.7.40, Horizontale filter-bar (vervangt sidebar)
   ===================================================== */

.lc-index .lc-filter-bar-h {
	background: #fff;
	border: 1px solid var(--lct-border, #E5E7EB);
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 1px 3px rgba(10,37,64,0.04);
}
.lc-index .lc-fb-form {
	margin: 0;
}
.lc-index .lc-fb-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* === Filter pill (details element) === */
.lc-index .lc-fb-pill {
	position: relative;
	display: inline-block;
}
.lc-index .lc-fb-pill > summary {
	list-style: none;
	cursor: pointer;
}
.lc-index .lc-fb-pill > summary::-webkit-details-marker { display: none; }
.lc-index .lc-fb-pill > summary::marker { content: ''; }

.lc-index .lc-fb-pill-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #f5f9fc;
	border: 1px solid var(--lct-border, #E5E7EB);
	border-radius: var(--lct-radius-pill, 999px);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lct-navy, #0A2540);
	transition: var(--lct-transition, 0.15s);
	user-select: none;
}
.lc-index .lc-fb-pill-trigger:hover {
	background: #e8f4fb;
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fb-pill[open] .lc-fb-pill-trigger {
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	border-color: var(--lct-primary, #0F75BC);
	box-shadow: 0 2px 8px rgba(15,117,188,0.3);
}
.lc-index .lc-fb-pill.is-active .lc-fb-pill-trigger {
	background: #e8f4fb;
	border-color: var(--lct-primary, #0F75BC);
	color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fb-pill.is-active[open] .lc-fb-pill-trigger {
	background: var(--lct-primary, #0F75BC);
	color: #fff;
}
.lc-index .lc-fb-pill-icon {
	font-size: 14px;
	flex-shrink: 0;
}
.lc-index .lc-fb-pill-label {
	white-space: nowrap;
}
.lc-index .lc-fb-pill-label strong {
	font-weight: 700;
}
.lc-index .lc-fb-pill-chev {
	font-size: 12px;
	opacity: 0.7;
	transition: transform 0.2s;
}
.lc-index .lc-fb-pill[open] .lc-fb-pill-chev {
	transform: rotate(180deg);
}

/* === Popover panel === */
.lc-index .lc-fb-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 260px;
	max-width: 340px;
	background: #fff;
	border: 1px solid var(--lct-border, #E5E7EB);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(10,37,64,0.18);
	padding: 14px;
	z-index: 50;
	max-height: 60vh;
	overflow-y: auto;
}
.lc-index .lc-fb-popover--price {
	min-width: 320px;
}
.lc-index .lc-fb-popover-apply {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 9px 14px;
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.2px;
	transition: background var(--lct-transition, 0.15s);
}
.lc-index .lc-fb-popover-apply:hover {
	background: var(--lct-navy, #0A2540);
}

/* Reset link rechts in de bar */
.lc-index .lc-fb-reset {
	margin-left: auto;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lct-text-muted, #5B6573);
	text-decoration: underline;
	white-space: nowrap;
}
.lc-index .lc-fb-reset:hover {
	color: #b91c1c;
}
@media (max-width: 760px) {
	.lc-index .lc-filter-bar-h {
		padding: 10px 12px;
		overflow-x: auto;
	}
	.lc-index .lc-fb-pills {
		flex-wrap: nowrap;
		min-width: max-content;
	}
	.lc-index .lc-fb-pill-trigger {
		padding: 7px 12px;
		font-size: 12.5px;
	}
	.lc-index .lc-fb-popover {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		min-width: 0;
		max-width: none;
		max-height: 70vh;
	}
	.lc-index .lc-fb-reset {
		margin-left: 8px;
	}
}

/* =====================================================
   v0.7.41, Rating breakdown (onder Danny's Tip)
   ===================================================== */

/* =====================================================
   v0.7.42, Multi-select checkboxes in filter-popovers
   ===================================================== */
.lc-index .lc-fs-check--multi {
	position: relative;
	cursor: pointer;
}
.lc-index .lc-fs-check-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
/* Box reflects checkbox state */
.lc-index .lc-fs-check--multi .lc-fs-check-box {
	background: #fff;
	border: 1.5px solid #cbd5e1;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-fs-check--multi:hover .lc-fs-check-box {
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fs-check--multi .lc-fs-check-input:checked + .lc-fs-check-box {
	background: var(--lct-primary, #0F75BC);
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-fs-check--multi .lc-fs-check-input:checked + .lc-fs-check-box::after {
	content: '✓';
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.lc-index .lc-fs-check--multi.is-on {
	background: #e8f4fb;
	color: var(--lct-navy, #0A2540);
	font-weight: 700;
}

/* Pill count-badge in summary */
.lc-index .lc-fb-pill-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #fff;
	color: var(--lct-primary, #0F75BC);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	margin-left: 4px;
	line-height: 1;
}
.lc-index .lc-fb-pill[open] .lc-fb-pill-badge {
	background: rgba(255,255,255,0.95);
}
.lc-index .lc-fb-pill.is-active:not([open]) .lc-fb-pill-badge {
	background: var(--lct-primary, #0F75BC);
	color: #fff;
}

/* =====================================================
   v0.7.43, Brochure email-gating modal
   ===================================================== */
.lc-brochure-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lc-brochure-modal[hidden] { display: none; }
@keyframes lcBrFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcBrSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lc-brochure-form { display: flex; flex-direction: column; gap: 12px; }
.lc-brochure-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--lct-navy, #0A2540); font-weight: 600; }
.lc-brochure-form input[type="text"], .lc-brochure-form input[type="email"] { padding: 10px 14px; border: 1.5px solid var(--lct-border, #E5E7EB); border-radius: 8px; font-size: 15px; background: #fff; }
.lc-brochure-form input[type="text"]:focus, .lc-brochure-form input[type="email"]:focus { outline: none; border-color: var(--lct-primary, #0F75BC); box-shadow: 0 0 0 3px rgba(15,117,188,0.15); }
.lc-brochure-submit { margin-top: 4px; padding: 12px 18px; background: var(--lct-primary, #0F75BC); color: #fff; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--lct-transition, 0.15s); }
.lc-brochure-submit:hover:not(:disabled) { background: var(--lct-navy, #0A2540); }
.lc-brochure-submit:disabled { opacity: 0.6; cursor: wait; }
.lc-brochure-msg { font-size: 13px; padding: 0; }
.lc-brochure-msg.is-error { padding: 10px 14px; background: #fef2f2; color: #991b1b; border-radius: 6px; }
.lc-brochure-msg.is-success { padding: 10px 14px; background: #dcfce7; color: #166534; border-radius: 6px; }

/* =====================================================
   v0.7.44, Search-grid (2 rijen × 4 dropdowns + zoek-knop)
   Replaceert v0.7.40 pill-style filterbar op /cruises/
   ===================================================== */
.lc-index .lc-search-grid-wrap {
	/* v0.7.75: buitenste box verwijderd, de form (.lct-searchbar) is zelf al
	   een shadow-card. Voorheen zat hier een 2e border+shadow omheen (box-in-box). */
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.lc-index .lc-search-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	grid-template-rows: auto auto;
	gap: 14px 16px;
	align-items: end;
	margin: 0;
}
@media (max-width: 1100px) {
	.lc-index .lc-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
@media (max-width: 800px) {
	.lc-index .lc-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
	.lc-index .lc-sg-submit { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
	.lc-index .lc-search-grid { grid-template-columns: 1fr; }
}

/* === Field cell === */
.lc-index .lc-sg-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.lc-index .lc-sg-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 800;
	color: var(--lct-primary, #0F75BC);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 7px;
}
.lc-index .lc-sg-label-icon {
	font-size: 14px;
}

/* === Native select === */
.lc-index .lc-sg-select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--lct-border, #E5E7EB);
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lct-navy, #0A2540);
	background: #fff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-sg-select:hover,
.lc-index .lc-sg-select:focus {
	border-color: var(--lct-primary, #0F75BC);
	outline: none;
}

/* === Custom combo trigger === */
.lc-index .lc-sg-field--combo {
	position: relative;
}
.lc-index .lc-sg-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 14px;
	border: 1.5px solid var(--lct-border, #E5E7EB);
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lct-navy, #0A2540);
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-sg-trigger:hover {
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-sg-field--combo.is-open .lc-sg-trigger {
	border-color: var(--lct-primary, #0F75BC);
	box-shadow: 0 0 0 3px rgba(15,117,188,0.12);
}
.lc-index .lc-sg-trigger-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lc-index .lc-sg-trigger-caret {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	flex-shrink: 0;
	transition: transform 0.2s;
}
.lc-index .lc-sg-field--combo.is-open .lc-sg-trigger-caret {
	transform: rotate(180deg);
}

/* === Popover === */
.lc-index .lc-sg-popover {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 280px;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--lct-border, #E5E7EB);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(10,37,64,0.16);
	padding: 8px;
	z-index: 100;
	max-height: 360px;
	overflow-y: auto;
}
.lc-index .lc-sg-popover--scroll {
	max-height: 420px;
}
.lc-index .lc-sg-popover--price {
	padding: 18px 16px;
}

/* === Popover item (checkbox row) === */
.lc-index .lc-sg-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.12s;
	user-select: none;
}
.lc-index .lc-sg-item:hover {
	background: #f1f5f9;
}
.lc-index .lc-sg-item.is-on {
	background: #e0f2fe;
}
.lc-index .lc-sg-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0; height: 0;
}
.lc-index .lc-sg-item-check {
	width: 18px;
	height: 18px;
	border: 1.5px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: var(--lct-transition, 0.15s);
}
.lc-index .lc-sg-item input[type="checkbox"]:checked + .lc-sg-item-check {
	background: var(--lct-primary, #0F75BC);
	border-color: var(--lct-primary, #0F75BC);
}
.lc-index .lc-sg-item input[type="checkbox"]:checked + .lc-sg-item-check::after {
	content: '✓';
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}
.lc-index .lc-sg-item-logo {
	width: 30px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 3px;
	background: #fff;
	padding: 2px;
	border: 1px solid #f1f5f9;
}
.lc-index .lc-sg-item-logo--ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--lct-text-muted, #5B6573);
	background: #f1f5f9;
	border-color: transparent;
}
.lc-index .lc-sg-item-label {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	color: var(--lct-navy, #0A2540);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lc-index .lc-sg-item-count {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	font-weight: 600;
	background: #f1f5f9;
	padding: 2px 7px;
	border-radius: 9px;
	flex-shrink: 0;
}
.lc-index .lc-sg-item.is-on .lc-sg-item-count {
	background: var(--lct-primary, #0F75BC);
	color: #fff;
}

/* === Price slider in popover === */
.lc-index .lc-sg-price-display {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--lct-navy, #0A2540);
	margin-bottom: 16px;
}
.lc-index .lc-sg-price-sep {
	color: var(--lct-text-muted, #5B6573);
}
.lc-index .lc-sg-range-track {
	position: relative;
	height: 24px;
	margin: 0 8px 8px;
}
.lc-index .lc-sg-range-track::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 4px;
	background: #e2e8f0;
	border-radius: 2px;
	transform: translateY(-50%);
}
.lc-index .lc-sg-range-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	background: var(--lct-primary, #0F75BC);
	border-radius: 2px;
	transform: translateY(-50%);
}
.lc-index .lc-sg-range-input {
	position: absolute;
	top: 0; left: 0; right: 0;
	width: 100%;
	height: 24px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.lc-index .lc-sg-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 20px; height: 20px;
	background: #fff;
	border: 3px solid var(--lct-primary, #0F75BC);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(10,37,64,0.18);
}
.lc-index .lc-sg-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 20px; height: 20px;
	background: #fff;
	border: 3px solid var(--lct-primary, #0F75BC);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(10,37,64,0.18);
}
.lc-index .lc-sg-price-axis {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	padding: 0 4px;
}

/* === Submit kolom (spans 2 rijen) === */
.lc-index .lc-sg-submit {
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: 8px;
	min-width: 160px;
}
.lc-index .lc-sg-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 22px;
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	letter-spacing: 0.2px;
	transition: var(--lct-transition, 0.15s);
	box-shadow: 0 2px 8px rgba(15,117,188,0.3);
	white-space: nowrap;
}
.lc-index .lc-sg-submit-btn:hover {
	background: var(--lct-navy, #0A2540);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(10,37,64,0.32);
}
.lc-index .lc-sg-reset {
	text-align: center;
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	text-decoration: underline;
	padding: 4px;
}
.lc-index .lc-sg-reset:hover {
	color: #b91c1c;
}

/* Hide oude pill-style residue (defense, mocht 'ie nog gerenderd worden door cache) */
.lc-index .lc-filter-bar-h { display: none; }

/* =====================================================
   v0.7.44, Cruise-index filter in HOMEPAGE-stijl
   2 rijen × 4 dropdowns + Zoek-knop (spans 2 rijen)
   Multi-select via checkboxes binnen popover
   ===================================================== */

/* Defensief: oude pill-style filter verbergen mocht 'ie nog in cache zitten */
.lc-filter-bar-h, .lc-search-grid-wrap > .lc-search-grid { display: none !important; }

.lct-cruises-searchbar {
	max-width: 100%;
	margin: 0 0 28px;
	padding: 16px 18px;
}

/* 2-rij grid: 4 fields + submit (col 5), submit spant 2 rijen */
.lct-searchbar-fields--two-rows {
	display: grid;
	grid-template-columns: repeat(4, 1fr) minmax(180px, auto);
	grid-template-rows: 1fr 1fr;
	gap: 0;
	border-radius: var(--lct-radius-md);
	/* v0.7.74: buitenrand weg, de searchbar-card heeft al een shadow-box.
	   Interne scheidingslijnen tussen de velden blijven behouden. */
	border: none;
	overflow: visible; /* belangrijk: popovers mogen uitsteken */
}
.lct-searchbar-fields--two-rows > .lct-searchbar-field {
	border-right: 1px solid var(--lct-border);
	border-bottom: 1px solid var(--lct-border);
	padding: 12px 18px;
	position: relative;
	background: #fff;
	cursor: pointer;
	transition: background var(--lct-transition);
}
.lct-searchbar-fields--two-rows > .lct-searchbar-field:hover { background: var(--lct-bg-subtle); }
/* Rij 1 onderlijn behouden, rij 2 onderlijn weg */
.lct-searchbar-fields--two-rows > .lct-searchbar-field:nth-of-type(n+5) { border-bottom: 0; }
/* Col 4 (rederij in rij 1, prijs in rij 2): geen right border */
.lct-searchbar-fields--two-rows > .lct-searchbar-field:nth-of-type(4),
.lct-searchbar-fields--two-rows > .lct-searchbar-field:nth-of-type(8) { border-right: 0; }

/* Submit-knop kolom 5, spant rij 1 + rij 2 */
.lct-searchbar-submit--span {
	grid-column: 5;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	background: #fff;
	border-left: 1px solid var(--lct-border);
}
.lct-searchbar-submit--span .lct-btn-primary {
	width: 100%;
	justify-content: center;
	white-space: nowrap;
}
.lct-searchbar-reset {
	display: block;
	text-align: center;
	font-size: 12px;
	color: var(--lct-text-muted);
	text-decoration: none;
	padding: 6px 0;
}
.lct-searchbar-reset:hover { color: var(--lct-primary); text-decoration: underline; }

/* Combo-button, gebruikt searchbar-value styling */
.lct-cruises-searchbar .lct-combo-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 4px 0 0;
	margin: 0;
	cursor: pointer;
	width: 100%;
	text-align: left;
}
.lct-cruises-searchbar .lct-combo-button .lct-searchbar-value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lct-cruises-searchbar .lct-combo-caret {
	width: 14px;
	height: 14px;
	color: var(--lct-text-muted);
	transition: transform var(--lct-transition);
	flex-shrink: 0;
}
.lct-cruises-searchbar .lct-searchbar-field.is-open .lct-combo-caret { transform: rotate(180deg); }
.lct-cruises-searchbar .lct-searchbar-field.is-open { background: var(--lct-bg-accent); }

/* Native selects (Vertrek / Duur / Type schip), line up met combo-button */
.lct-cruises-searchbar .lct-searchbar-select {
	border: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	color: var(--lct-navy);
	padding: 4px 0 0;
	margin: 0;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6573' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 22px;
}
.lct-cruises-searchbar .lct-searchbar-select:focus { outline: none; color: var(--lct-primary); }

/* Popover (multi-select) */
.lct-combo-list--multi,
.lct-combo-list--price {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 320px;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--lct-border);
	border-radius: var(--lct-radius-md);
	box-shadow: var(--lct-shadow-lg);
	z-index: 50;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* v0.7.76: buitenste mag NIET scrollen, alleen .lct-combo-scroll daarbinnen.
	   Voorkomt dubbele scrollbar (base .lct-combo-list had max-height + overflow). */
	max-height: none;
	overflow: visible;
}
.lct-combo-list--multi[hidden],
.lct-combo-list--price[hidden] { display: none; }
.lct-combo-scroll {
	max-height: 320px;
	overflow-y: auto;
	margin: -4px -4px 4px;
	padding: 4px;
}
.lct-combo-item-multi {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background var(--lct-transition);
	user-select: none;
}
.lct-combo-item-multi:hover { background: var(--lct-bg-subtle); }
.lct-combo-item-multi.is-on { background: var(--lct-bg-accent); }
.lct-combo-item-multi input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.lct-combo-item-check {
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--lct-transition);
}
.lct-combo-item-multi.is-on .lct-combo-item-check {
	background: var(--lct-primary);
	border-color: var(--lct-primary);
}
.lct-combo-item-multi.is-on .lct-combo-item-check::after {
	content: '';
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.lct-combo-item-multi .lct-combo-item-logo {
	width: 32px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
	background: #fff;
	border-radius: 3px;
}
.lct-combo-item-multi .lct-combo-item-logo--ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	background: #f1f5f9;
	color: var(--lct-text-muted);
}
.lct-combo-item-multi .lct-combo-item-label {
	flex: 1;
	font-size: 14px;
	color: var(--lct-navy);
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lct-combo-item-multi .lct-combo-item-count {
	font-size: 12px;
	color: var(--lct-text-muted);
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 600;
}

.lct-combo-apply {
	background: var(--lct-primary);
	color: #fff;
	border: 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--lct-transition);
}
.lct-combo-apply:hover { background: var(--lct-navy); }

/* Prijs-popover specifiek */
.lct-combo-list--price { min-width: 320px; max-width: 360px; padding: 16px; }
.lct-price-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lct-navy);
	margin-bottom: 16px;
}
.lct-price-sep { color: var(--lct-text-muted); }
.lct-range-track {
	position: relative;
	height: 32px;
	margin: 0 8px 8px;
}
.lct-range-fill {
	position: absolute;
	top: 14px;
	height: 4px;
	background: var(--lct-primary);
	border-radius: 2px;
	pointer-events: none;
}
.lct-range-track::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--lct-border);
	border-radius: 2px;
}
.lct-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 32px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.lct-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	background: #fff;
	border: 3px solid var(--lct-primary);
	border-radius: 50%;
	pointer-events: auto;
	cursor: grab;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lct-range-input::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: #fff;
	border: 3px solid var(--lct-primary);
	border-radius: 50%;
	pointer-events: auto;
	cursor: grab;
}
.lct-price-axis {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--lct-text-muted);
	margin: 0 8px 14px;
}
@media (max-width: 1100px) {
	.lct-searchbar-fields--two-rows {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.lct-searchbar-fields--two-rows > .lct-searchbar-field {
		border-right: 1px solid var(--lct-border);
		border-bottom: 1px solid var(--lct-border);
	}
	.lct-searchbar-fields--two-rows > .lct-searchbar-field:nth-of-type(2n) { border-right: 0; }
	.lct-searchbar-submit--span {
		grid-column: 1 / -1;
		grid-row: auto;
		border-left: 0;
		border-top: 1px solid var(--lct-border);
		flex-direction: row;
		justify-content: center;
	}
	.lct-searchbar-submit--span .lct-btn-primary { flex: 1; max-width: 320px; }
}
@media (max-width: 600px) {
	.lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr;
	}
	.lct-searchbar-fields--two-rows > .lct-searchbar-field {
		border-right: 0 !important;
		border-bottom: 1px solid var(--lct-border);
	}
	.lct-combo-list--multi,
	.lct-combo-list--price {
		min-width: 260px;
		max-width: calc(100vw - 32px);
		left: 0;
	}
}

/* =====================================================
   v0.7.52, Sort-row verplaatst naar onder filter-menu
   ===================================================== */
.lc-index .lc-sort-row {
	max-width: 1280px;
	margin: 0 auto 8px;
	padding: 0 32px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.lc-index .lc-sort-row .lc-sort-form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 8px 14px;
	border: 1px solid var(--lct-border);
	border-radius: var(--lct-radius-md);
	box-shadow: 0 1px 2px rgba(10,37,64,0.04);
}
.lc-index .lc-sort-row .lc-sort-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lct-text-muted);
	white-space: nowrap;
}
.lc-index .lc-sort-row .lc-sort-select {
	padding: 6px 26px 6px 10px;
	border: 0;
	background-color: transparent;
	font-size: 14px;
	font-weight: 700;
	color: var(--lct-navy);
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F75BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 6px center;
}
.lc-index .lc-sort-row .lc-sort-select:focus { outline: none; color: var(--lct-primary); }
@media (max-width: 600px) {
	.lc-index .lc-sort-row {
		justify-content: stretch;
		padding: 0 16px;
	}
	.lc-index .lc-sort-row .lc-sort-form {
		flex: 1;
		justify-content: space-between;
	}
}

/* =====================================================
   v0.7.55, Favorites, video embed, blog-links, price-deltas
   ===================================================== */

/* === Favorite-hartje op cruise-cards (v0.7.56: kleiner: 32px ipv 38px) === */
.lc-card-fav-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #6b7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(10,37,64,0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.15s ease, color 0.2s ease, background 0.2s ease;
}
.lc-card-fav-btn svg { width: 18px; height: 18px; }
.lc-card-fav-btn:hover {
	transform: scale(1.08);
	color: #dc2626;
}
.lc-card-fav-btn.is-active {
	color: #dc2626;
	background: #fff;
}
.lc-card-fav-btn.is-active svg {
	fill: currentColor;
}
.lc-card-fav-btn.is-pulsing {
	animation: lc-fav-pulse 0.3s ease;
}
@keyframes lc-fav-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.3); }
}
.lc-quick-tab--fav .lc-quick-tab-count.has-favs {
	background: #dc2626;
	color: #fff;
}

/* === Quick-tab prijsdaling === */
.lc-quick-tab--drop.is-active {
	background: linear-gradient(135deg, #EA580C, #FACC15);
	color: #fff;
	border-color: transparent;
}

/* === Prijs-delta badges op card-image === */
.lc-index .lc-card-badge--price-drop {
	background: linear-gradient(135deg, #16a34a, #22c55e);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.lc-index .lc-card-badge--price-rise {
	background: #fee2e2;
	color: #991b1b;
}

/* === Favorieten-pagina === */
.lc-favorites-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 60px;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-favorites-grid .lc-cruise-card { position: relative; }
@media (max-width: 600px) {
	.lc-card-fav-btn { width: 34px; height: 34px; }
}
.lc-card-fav-btn--inline.is-active {
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
	background: #fef2f2 !important;
}

/* === v0.7.56: Favorieten-pagina, extra fixes voor cruise-cards === */
body.is-favorites-page .lc-favorites-grid .lc-cruise-card {
	display: flex;
	flex-direction: column;
}
body.is-favorites-page .lc-favorites-grid .lc-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}
body.is-favorites-page .lc-favorites-grid .lc-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.is-favorites-page .lc-favorites-grid .lc-card-company-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255,255,255,0.95);
	padding: 4px 8px;
	border-radius: 6px;
	max-width: 100px;
	max-height: 36px;
	z-index: 3;
}
body.is-favorites-page .lc-favorites-grid .lc-card-company-badge img {
	max-width: 100%;
	max-height: 28px;
	height: auto;
	width: auto;
	display: block;
}
body.is-favorites-page .lc-favorites-grid .lc-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
body.is-favorites-page .lc-favorites-grid .lc-card-meta-line {
	font-size: 12px;
	color: var(--lct-text-muted);
}
body.is-favorites-page .lc-favorites-grid .lc-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--lct-navy);
	margin: 4px 0 2px;
	line-height: 1.35;
}
body.is-favorites-page .lc-favorites-grid .lc-card-ship-name {
	font-size: 13px;
	color: var(--lct-text-muted);
}
body.is-favorites-page .lc-favorites-grid .lc-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #f1f5f9;
	gap: 12px;
}
body.is-favorites-page .lc-favorites-grid .lc-card-price small,
body.is-favorites-page .lc-favorites-grid .lc-card-dep small {
	display: block;
	font-size: 12px;
	color: var(--lct-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
body.is-favorites-page .lc-favorites-grid .lc-card-price strong {
	font-size: 18px;
	color: var(--lct-primary);
}
body.is-favorites-page .lc-favorites-grid .lc-card-dep strong {
	font-size: 13px;
	color: var(--lct-navy);
}

/* === v0.7.57: ❤ Favoriet-knop naast bouwjaar in Schip-infobar === */
.lc-card-fav-btn--meta {
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 3px 8px !important;
	margin-left: 8px;
	border-radius: 12px !important;
	background: #f1f5f9 !important;
	box-shadow: none !important;
	border: 1px solid transparent !important;
	color: #5F7288 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	vertical-align: middle;
}
.lc-card-fav-btn--meta:hover {
	transform: none !important;
	background: #fee2e2 !important;
	color: #dc2626 !important;
	border-color: #fecaca !important;
}
.lc-card-fav-btn--meta.is-active {
	background: #fee2e2 !important;
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
}
.lc-card-fav-btn--meta svg { width: 12px; height: 12px; }
.lc-sort-fav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	background: #fff;
	border: 1px solid var(--lct-border, #e5e7eb);
	border-radius: var(--lct-radius-md, 10px);
	box-shadow: 0 1px 2px rgba(10,37,64,0.04);
	font-size: 13px;
	font-weight: 600;
	color: var(--lct-navy, #0A2540);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lc-sort-fav-link:hover {
	color: #dc2626;
	border-color: #fca5a5;
	background: #fef2f2;
}
.lc-sort-fav-link svg { color: #5F7288; transition: color 0.15s ease; }
.lc-sort-fav-link:hover svg { color: #dc2626; }
.lc-sort-fav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
	background: #e5e7eb;
	color: #6b7280;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 700;
}
.lc-sort-fav-count.has-favs {
	background: #dc2626;
	color: #fff;
}
.lc-sort-fav-link:has(.lc-sort-fav-count.has-favs) svg {
	color: #dc2626;
}
@media (max-width: 600px) {
	.lc-sort-fav-link { padding: 6px 10px; font-size: 12px; }
}

/* === Generieke aside-block === */
.lct-blog-aside-block {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba(10,37,64,0.04);
}

/* =====================================================
   v0.7.62, Push notification opt-in banner
   ===================================================== */
.lc-push-banner {
	position: fixed;
	bottom: 20px;
	right: 20px;
	max-width: 380px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(10,37,64,0.15);
	z-index: 9999;
	animation: lc-push-slide-in 0.4s ease;
}
@keyframes lc-push-slide-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.lc-push-banner-inner { padding: 18px 18px 16px; display: flex; gap: 12px; flex-direction: column; }
.lc-push-banner-icon { font-size: 28px; line-height: 1; }
.lc-push-banner-content strong { display: block; font-size: 15px; color: var(--lct-navy, #0A2540); margin-bottom: 4px; }
.lc-push-banner-content p { margin: 0; font-size: 13px; color: var(--lct-text-mid, #3D5773); line-height: 1.45; }
.lc-push-banner-actions { display: flex; gap: 8px; }
.lc-push-banner-btn {
	flex: 1;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lc-push-banner-btn--primary { background: var(--lct-primary, #0F75BC); color: #fff; }
.lc-push-banner-btn--primary:hover { background: var(--lct-navy, #0A2540); }
.lc-push-banner-btn--ghost { background: #f1f5f9; color: var(--lct-text-mid, #3D5773); }
.lc-push-banner-btn--ghost:hover { background: #e2e8f0; }
.lc-push-banner.is-loading .lc-push-banner-btn { opacity: 0.5; pointer-events: none; }
.lc-push-banner.is-success { border-color: #16a34a; }
.lc-push-banner.is-success .lc-push-banner-icon::before { content: '✓ '; color: #16a34a; }
@media (max-width: 600px) {
	.lc-push-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* === v0.7.64: Header actions: Mijn omgeving + Plan gesprek (gelijke layout) === */
/* v0.7.66: compacter voor meer menu-ruimte */
.lct-header-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}
/* Header-buttons overrulen de globale .lct-btn-primary, kleiner + minder gap */
.lct-header-actions .lct-btn-primary {
	padding: 8px 14px;
	font-size: 13px;
	gap: 6px;
}
.lct-header-actions .lct-btn-primary svg {
	width: 13px;
	height: 13px;
}
/* Mijn-omgeving is in navy ipv primary */
.lct-btn-portal {
	background: var(--lct-navy, #0A2540) !important;
	color: #fff !important;
}
.lct-btn-portal:hover {
	background: #1a3a5c !important;
}
@media (max-width: 1200px) {
	.lct-header-actions .lct-btn-primary { padding: 8px 12px; font-size: 12.5px; gap: 5px; }
}
@media (max-width: 1100px) {
	/* Pijl bij Plan gesprek weg om ruimte te besparen */
	.lct-header-actions .lct-btn-primary svg:last-child { display: none; }
	.lct-header-actions .lct-btn-primary { padding: 8px 11px; }
}

/* === Cruise Buddy actieknop + BÈTA-badge (v5.0.46) === */
.lct-btn-buddy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--lct-radius-pill);
	background: linear-gradient(135deg, #0F75BC, #16a3d6);
	color: #fff !important;
	font-family: var(--lct-font-body);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(15,117,188,.35);
	position: relative;
	white-space: nowrap;
	transition: transform var(--lct-transition), box-shadow var(--lct-transition);
}
.lct-btn-buddy:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(15,117,188,.45);
	color: #fff !important;
}
.lct-btn-buddy svg { width: 13px; height: 13px; }

/* Menu + knoppen compacter zodat de extra knop past zonder dat de balk te breed wordt */
.lct-menu { gap: 24px; }
.lct-menu > li > a { font-size: 14px; }
.lct-header-actions { gap: 8px; }
@media (max-width: 1300px) {
	.lct-menu { gap: 18px; }
	.lct-menu > li > a { font-size: 13.5px; }
}
@media (max-width: 1150px) {
	/* Iconen in de actieknoppen weg om ruimte te maken voor 3 knoppen + labels */
	.lct-header-actions .lct-btn-primary svg:first-child,
	.lct-btn-buddy svg { display: none; }
	.lct-btn-buddy { padding: 8px 11px; }
}
/* Buddy-knop in mobiel menu: vol blok, groter */
.lct-btn-buddy.lct-btn-block {
	width: 100%;
	justify-content: center;
	padding: 13px 20px;
	font-size: 15px;
}
.lct-btn-buddy.lct-btn-lg svg { display: inline-block; }
@media (max-width: 980px) {
	/* Mijn omgeving naar icon-only mode (zonder tekst) */
	.lct-btn-portal {
		padding: 8px 10px !important;
		font-size: 0 !important; /* hide text node */
	}
	.lct-btn-portal svg {
		width: 16px !important;
		height: 16px !important;
		margin: 0 !important;
	}
}

.lct-pwa-install {
	background: #fff;
	color: #0A2540;
	border: 0;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 14px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s, box-shadow 0.15s;
}

.lct-pwa-install:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lct-pwa-install:active {
	transform: translateY(0);
}
@media (max-width: 420px) {
	.lct-pwa-install {
		padding: 8px 12px;
		font-size: 12px;
	}
}

/* ==========================================================================
   v0.7.73: Schip-cascade hint + zee/rivier checkboxes (cruises filter)
   ========================================================================== */

.lct-ship-hint {
	padding: 14px 16px;
	font-size: 13px;
	color: #51606F;
	line-height: 1.5;
	background: #f8fafc;
	border-radius: 8px;
	margin: 4px;
}

.lct-ship-item[hidden] {
	display: none !important;
}

/* Zee/rivier checkboxes onder de zoek-knop */
.lct-shiptype-checks {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	/* v0.7.74: compenseert de 14px flex-gap van de parent → strakke aansluiting */
	margin-top: -6px;
	padding: 2px 4px 0;
}

.lct-shiptype-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #0A2540;
	user-select: none;
}

.lct-shiptype-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #0F75BC;
	cursor: pointer;
}

.lct-shiptype-hint {
	font-size: 12px;
	color: #5F7288;
	font-style: italic;
}
@media (max-width: 600px) {
	.lct-shiptype-checks {
		gap: 16px;
	}
	.lct-shiptype-hint {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   v0.7.76: Combo-zoekveld + datum-range in Vertrek-combo
   ========================================================================== */

/* Zoekveld bovenin combo-popover */
.lct-combo-search {
	padding: 2px 2px 8px;
	border-bottom: 1px solid var(--lct-border);
	margin-bottom: 6px;
}
.lct-combo-search-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--lct-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	box-sizing: border-box;
}
.lct-combo-search-input:focus {
	border-color: var(--lct-primary);
	box-shadow: 0 0 0 3px rgba(15,117,188,0.12);
}
.lct-combo-noresults {
	padding: 16px 12px;
	text-align: center;
	color: #5F7288;
	font-size: 13px;
}
.lct-combo-searchable[hidden] { display: none !important; }

/* Date-combo popover (zelfde stijl als price) */
.lct-combo-list--date {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 300px;
	max-width: 340px;
	background: #fff;
	border: 1px solid var(--lct-border);
	border-radius: var(--lct-radius-md);
	box-shadow: var(--lct-shadow-lg);
	z-index: 50;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lct-combo-list--date[hidden] { display: none; }
.lct-date-range {
	display: flex;
	gap: 12px;
}
.lct-date-or {
	text-align: center;
	font-size: 12px;
	color: #5F7288;
	font-style: italic;
}
.lct-date-month {
	width: 100%;
}
@media (max-width: 600px) {
	.lct-combo-list--date {
		left: 0; right: 0; min-width: 100%; max-width: 100%;
	}
}

.lct-shiptype-tools .lc-sort-select {
	padding: 6px 26px 6px 10px;
	border: 1px solid var(--lct-border, #e2e8f0);
	border-radius: 8px;
	background-color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lct-navy, #0A2540);
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F75BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 6px center;
}
.lct-shiptype-tools .lc-sort-select:focus {
	outline: none;
	border-color: var(--lct-primary);
}

.lct-shiptype-tools .lc-sort-fav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--lct-border, #e2e8f0);
	border-radius: 8px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lct-navy, #0A2540);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.lct-shiptype-tools .lc-sort-fav-link:hover {
	border-color: #dc2626;
	color: #dc2626;
}
.lct-shiptype-tools .lc-sort-fav-link svg { color: #5F7288; transition: color 0.15s ease; }
.lct-shiptype-tools .lc-sort-fav-link:hover svg { color: #dc2626; }
.lct-shiptype-tools .lc-sort-fav-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--lct-bg-subtle, #f1f5f9);
	color: var(--lct-text-muted, #51606F);
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lct-shiptype-tools .lc-sort-fav-count.has-favs { background: #dc2626; color: #fff; }

/* ==========================================================================
   v0.7.79: Vertrekdatum-strip op cruise-tegel bij 25%+ korting
   ========================================================================== */

/* v0.7.97: subtieler vormgegeven datum-strip, past beter bij de overall card layout
   (was te dominant met zware gradient + grote padding) */
.lc-card-actie-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 8px;
	margin: 6px 0 8px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-left: 3px solid #f59e0b;
	border-radius: 4px;
	font-size: 12px;
	color: #78350f;
	line-height: 1.35;
	width: 100%;
	box-sizing: border-box;
}
.lc-card-actie-date-icon {
	font-size: 12px;
	flex-shrink: 0;
	opacity: 0.85;
}
.lc-card-actie-date-text strong {
	color: #b45309;
	font-weight: 700;
}

/* footer is een flex-row; zorg dat de datum-strip op een eigen regel zit erboven */
.lc-card-footer {
	flex-wrap: wrap;
}
.lc-card-footer .lc-card-actie-date {
	flex-basis: 100%;
}
/* Inhoud erbovenop */
.lct-has-video-bg > .lct-container,
.lct-has-video-bg > .lct-blog-archive-hero-inner {
	position: relative;
	z-index: 2;
}
.lct-blog-archive-hero.lct-has-video-bg .lct-eyebrow { color: #FBBF24; }

/* v0.7.85: Last-minute prijs-indicator op cruise-tegel */
.lc-card-price.is-lastminute .lc-card-price-label {
	color: #dc2626;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.lc-card-price.is-lastminute .lc-card-price-value {
	color: #b91c1c;
}

/* Cruises onder bericht (bij show_cruises = true) */
.lct-story-related-cruises {
	margin: 36px 0 24px;
}
.lct-story-related-cruises h3 {
	margin-bottom: 18px;
	color: var(--lct-navy, #0A2540);
}

/* 3-cols grid (gebruikt door related stories + show_cruises) */
.lct-cruise-grid-3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) { .lct-cruise-grid-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lct-cruise-grid-3col { grid-template-columns: 1fr; }
}

/* Related stories sectie op rederij + single-cruise */
.lct-related-stories {
	padding: 60px 0;
	background: #f8fafc;
}
.lct-related-stories .lct-section-header {
	margin-bottom: 28px;
}

/* v0.7.94: Story manual koppeling, sidebar (rederij + schepen) */
.lct-story-sidebar-link {
	background: linear-gradient(135deg, #0A2540 0%, #0F75BC 100%);
	color: #fff;
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	margin-bottom: 20px;
}
.lct-story-sidebar-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	color: rgba(255,255,255,0.65);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.lct-story-sidebar-company {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 16px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(255,255,255,0.12);
	transition: background .15s;
}
.lct-story-sidebar-company:hover { background: rgba(255,255,255,0.06); }
.lct-story-sidebar-logo-wrap {
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	flex-shrink: 1;
	min-width: 0;
	max-width: 50%;
	box-sizing: border-box;
}
.lct-story-sidebar-logo-wrap img {
	height: auto;
	max-height: 40px;
	width: 100%;
	max-width: 130px;
	object-fit: contain;
	display: block;
}
.lct-story-sidebar-co-body { min-width: 0; flex: 1 1 0; word-break: break-word; }
.lct-story-sidebar-co-body strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.lct-story-sidebar-arrow {
	display: inline-block;
	font-size: 12px;
	color: #FBBF24;
	font-weight: 600;
}
.lct-story-sidebar-ships {
	padding: 14px 0 6px;
	background: rgba(0,0,0,0.12);
}
.lct-story-sidebar-ship {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}
.lct-story-sidebar-ship:hover { background: rgba(255,255,255,0.08); }
.lct-story-sidebar-ship-img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(255,255,255,0.1);
}
.lct-story-sidebar-ship-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.lct-story-sidebar-ship-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
}
.lct-story-sidebar-ship-body { min-width: 0; flex: 1; }
.lct-story-sidebar-ship-body strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 2px;
}

/* v0.7.101: tekst-fallback voor footer-affiliations als logo's niet laden */
.lct-footer-affiliation-item { display: inline-flex; align-items: center; gap: 6px; }
.lct-footer-affiliation-text {
	display: none;
	color: rgba(255,255,255,0.92);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 4px 12px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	background: rgba(255,255,255,0.05);
}

/* v0.7.105: Klant-rating in topbar, vervangt de hero-pill */
.lct-topbar-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-size: 12.5px;
	line-height: 1;
	transition: background .15s, transform .15s;
}
.lct-topbar-rating:hover {
	background: rgba(255,255,255,0.18);
	transform: translateY(-1px);
	color: #fff;
}
.lct-topbar-rating-stars {
	color: #FBBF24;
	font-size: 13px;
	letter-spacing: 0.5px;
}
.lct-topbar-rating strong { font-weight: 700; }
@media (max-width: 700px) {
	.lct-topbar-rating { padding: 2px 8px; font-size: 12px; }
	.lct-topbar-rating-stars { font-size: 12px; }
}
@media (max-width: 768px) {
	html, body { overflow-x: clip; max-width: 100vw; }
}

/* =====================================================================
   GENERIC POPUP MODAL (v4.2.30), hergebruikt voor offerte + prijsalert
   ===================================================================== */
.lc-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lc-popup[hidden] { display: none; }

@keyframes lcPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcPopupSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Validity-tekst binnen gallery-actions card: kleiner */
.lc-gallery-actions .lc-action-validity {
	font-size: 12px;
	margin-top: 3px;
}

/* =====================================================================
   v4.2.35: Overzicht-h2 uitlijnen met sidebar tarief-blok (label-Y)
   Sidebar widget heeft padding-top:28px voor de prijs-label.
   Main krijgt dezelfde padding-top zodat h2 ernaast op gelijke hoogte zit.
   ===================================================================== */
.letscruise-cruise #lc-cruise-flex > main.lc-detail-main {
	padding-top: 28px;
}
@media (max-width: 900px) {
	/* Op mobile is de sidebar boven main gestapeld, extra padding-top is dan overbodig */
	.letscruise-cruise #lc-cruise-flex > main.lc-detail-main {
		padding-top: 0;
	}
}

/* =====================================================================
   v4.2.37: ACTIE-VALIDITY tekst, "Geldig t/m … · zie voorwaarden"
   Verschijnt onder elke actie-pill/banner op alle plekken.
   ===================================================================== */
.lc-action-validity {
	font-size: 12px;
	color: #51606F;
	margin-top: 5px;
	line-height: 1.35;
}
.lc-action-validity a {
	color: var(--lct-primary, #0F75BC);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.lc-action-validity a:hover {
	color: var(--lct-navy, #0A2540);
}

/* Op deal-cards binnen .lct-deal-card-body, iets meer marge en uitlijning */
.lct-deal-card-body .lc-action-validity {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #f1f5f9;
}
.lct-featured-body .lc-action-validity {
	margin-top: 10px;
	color: rgba(255,255,255,0.8);
}
.lct-featured-body .lc-action-validity a {
	color: #fff;
	text-decoration-color: rgba(255,255,255,0.5);
}

/* ========================================
   v4.2.48, Prijs per nacht (cards + detail)
   ======================================== */
.lc-price-per-night {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #51606F;
	font-weight: 500;
}
.lc-card-price .lc-price-per-night,
.lct-rederij-cruise-price + .lc-price-per-night {
	margin-top: 2px;
}
.lc-similar-foot + .lc-price-per-night {
	padding: 0 16px 14px;
}
/* Last-minute variant - iets feller want over rode achtergrond */
.lc-card-price.is-lastminute + .lc-price-per-night {
	color: #475569;
}

/* v4.2.48: Toggle Totaalprijs / Per nacht in prijs-filter */
.lct-price-mode-toggle {
	display: flex;
	gap: 0;
	background: #f1f5f9;
	border-radius: 8px;
	padding: 3px;
	margin-bottom: 14px;
}
.lct-price-mode-opt {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #51606F;
	cursor: pointer;
	transition: all 0.15s;
}
.lct-price-mode-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.lct-price-mode-opt.is-active,
.lct-price-mode-opt:has(input:checked) {
	background: #fff;
	color: var(--lct-primary, #0F75BC);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ========================================
   v4.2.50, Sticky bel-knop (mobile-only)
   ======================================== */
/* v5.0.203: .lct-sticky-call verwijderd, vervangen door .lct-call-fab satelliet. */

/* v4.2.58: Actie-promo (geel blok bovenaan cruises-resultaten, vanuit "Bekijk de deal") */
.lct-actie-promo{display:flex;gap:20px;align-items:stretch;background:linear-gradient(135deg,#FEF9E7,#FDF1C9);border:1px solid #F1D98B;border-left:5px solid #E0B945;border-radius:14px;padding:18px 20px;margin:0 0 22px;box-shadow:0 2px 10px rgba(199,160,40,.10)}
.lct-actie-promo-media{flex:0 0 200px;max-width:200px;border-radius:10px;overflow:hidden}
.lct-actie-promo-media img{width:100%;height:100%;object-fit:cover;display:block}
.lct-actie-promo-body{flex:1 1 auto;min-width:0}
.lct-actie-promo-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.lct-actie-promo-badge{font-size:12px;font-weight:800;color:#7A5A00;background:#F6DE9A;border-radius:999px;padding:3px 10px}
.lct-actie-promo-disc{font-size:13px;font-weight:800;color:#fff;background:#E0B945;border-radius:999px;padding:3px 10px}
.lct-actie-promo-co{font-size:13px;color:#6B5A2A}
.lct-actie-promo-title{font-size:22px;line-height:1.2;margin:0 0 4px;color:#3A2E08}
.lct-actie-promo-subtitle{font-size:15px;color:#6B5A2A;margin:0 0 8px}
.lct-actie-promo-desc{font-size:14px;line-height:1.6;color:#4A3E18;margin:0 0 12px}
.lct-actie-promo-desc p{margin:0 0 8px}
.lct-actie-promo-desc p:last-child{margin-bottom:0}
.lct-actie-promo-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lct-actie-promo-valid{font-size:13px;font-weight:600;color:#8A6D1F}
.lct-actie-promo-cta{display:inline-block;background:#E0B945;color:#3A2E08;font-weight:700;text-decoration:none;border-radius:8px;padding:9px 18px}
.lct-actie-promo-cta:hover{background:#D0A82F}
@media(max-width:760px) {.lct-actie-promo{flex-direction:column}.lct-actie-promo-media{flex-basis:auto;max-width:100%;max-height:180px}
}

/* v4.2.59: FAQ (Slimme zoeklaag), zichtbare veelgestelde vragen */
.lct-faq{max-width:880px;margin:32px auto;padding:0 16px}
.lct-faq-title{font-size:24px;line-height:1.2;margin:0 0 16px;color:var(--lct-navy,#0B2A4A)}
.lct-faq-list{display:flex;flex-direction:column;gap:10px}
.lct-faq-item{border:1px solid #E3E8EF;border-radius:12px;background:#fff;overflow:hidden}
.lct-faq-item[open]{border-color:#C9D4E2;box-shadow:0 2px 8px rgba(11,42,74,.06)}
.lct-faq-q{cursor:pointer;list-style:none;padding:16px 44px 16px 18px;font-weight:600;font-size:16px;color:var(--lct-navy,#0B2A4A);position:relative}
.lct-faq-q::-webkit-details-marker{display:none}
.lct-faq-q::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:#8AA0B8;transition:transform .2s}
.lct-faq-item[open] .lct-faq-q::after{content:"−"}
.lct-faq-a{padding:0 18px 16px;font-size:15px;line-height:1.6;color:var(--lct-text-mid,#3D5773)}
.lct-faq-a p{margin:0 0 10px}.lct-faq-a p:last-child{margin-bottom:0}
@media(max-width:600px) {.lct-faq-title{font-size:21px}.lct-faq-q{font-size:15px}
}

/* v4.2.60: Long-tail landing, unieke rederij/vaargebied-tekst onder de resultaten */
.lct-landing-intro{max-width:880px;margin:28px auto 8px;padding:20px 22px;background:#F7FAFC;border:1px solid #E3E8EF;border-radius:14px}
.lct-landing-title{font-size:22px;line-height:1.2;margin:0 0 10px;color:var(--lct-navy,#0B2A4A)}
.lct-landing-text{font-size:15px;line-height:1.65;color:var(--lct-text-mid,#3D5773)}
.lct-landing-text p{margin:0 0 10px}.lct-landing-text p:last-child{margin-bottom:0}
.lct-landing-links{margin:14px 0 0;font-size:14px;color:var(--lct-text-mid,#3D5773);line-height:1.9}
.lct-landing-links a{color:var(--lct-navy,#0B2A4A);text-decoration:underline}
@media(max-width:600px) {.lct-landing-intro{margin:20px 12px 4px}.lct-landing-title{font-size:19px}
}
.lc-fav-alert-msg.is-ok{color:#1B7F4B}
.lc-fav-alert-msg.is-err{color:#C0392B}

/* v4.2.62: Lead magnet, exit-intent inschrijfpopup */
.lct-lead{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:16px}
.lct-lead[hidden]{display:none}
.lct-lead.is-open{opacity:1;pointer-events:auto}
.lct-lead-overlay{position:absolute;inset:0;background:rgba(8,24,42,.55)}
.lct-lead-card{position:relative;background:#fff;border-radius:18px;max-width:440px;width:100%;padding:30px 26px 24px;box-shadow:0 24px 60px rgba(8,24,42,.35);text-align:center;transform:translateY(12px) scale(.98);transition:transform .25s ease}
.lct-lead.is-open .lct-lead-card{transform:none}
.lct-lead-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:#8AA0B8;cursor:pointer}
.lct-lead-x:hover{color:#3D5773}
.lct-lead-emoji{font-size:40px;line-height:1;margin-bottom:8px}
.lct-lead-title{font-size:23px;line-height:1.2;margin:0 0 8px;color:var(--lct-navy,#0B2A4A)}
.lct-lead-text{font-size:15px;line-height:1.55;color:var(--lct-text-mid,#3D5773);margin:0 0 16px}
.lct-lead-form{display:flex;flex-direction:column;gap:10px}
.lct-lead-email{padding:12px 14px;border:1px solid #C2D2E2;border-radius:10px;font-size:16px}
.lct-lead-email:focus{outline:none;border-color:#2C7BE5;box-shadow:0 0 0 3px rgba(44,123,229,.15)}
.lct-lead-submit{width:100%}
.lct-lead-msg{margin-top:10px;font-size:14px;font-weight:600}
.lct-lead-msg.is-ok{color:#1B7F4B}.lct-lead-msg.is-err{color:#C0392B}
.lct-lead-fine{margin:12px 0 0;font-size:12px;color:#8AA0B8}

/* v4.2.65: Slimme Cruise Buddy, wrapper (linksonder) + mini-quiz paneel */
.lct-cb{position:fixed;z-index:9990;bottom:24px;left:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.lct-cb[hidden]{display:none}
.lct-cb.is-in{opacity:1;transform:none;pointer-events:auto}
.lct-cb-fab{position:relative;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#0B2A4A,#15406B);color:#fff;border:0;cursor:pointer;text-decoration:none;border-radius:999px;padding:12px 18px 12px 15px;box-shadow:0 8px 24px rgba(11,42,74,.32);font-weight:600;font-size:14px;line-height:1;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.lct-cb-fab:hover,.lct-cb-fab:focus{transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,42,74,.42);color:#fff}
.lct-cb-fab-ico{font-size:20px;line-height:1}
.lct-cb-fab-txt{white-space:nowrap}
.lct-cb-badge{position:absolute;top:-6px;right:-6px;background:#E11D48;color:#fff;font-size:12px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.lct-cb-badge[hidden]{display:none}
.lct-cb-panel{position:relative;width:280px;max-width:calc(100vw - 36px);background:#fff;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 16px 40px rgba(11,42,74,.22);padding:18px 16px 16px}
.lct-cb-panel[hidden]{display:none}
.lct-cb-close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;line-height:1;color:#9CA3AF;cursor:pointer;padding:2px 6px}
.lct-cb-close:hover{color:#4B5563}
.lct-cb-panel-title{margin:0 18px 12px 0;font-weight:700;font-size:14.5px;color:#0B2A4A;line-height:1.35}
.lct-cb-q{margin-bottom:12px}
.lct-cb-q-label{display:block;font-size:12.5px;font-weight:600;color:#6B7280;margin-bottom:6px}
.lct-cb-opts{display:flex;flex-wrap:wrap;gap:6px}
.lct-cb-opt{border:1.5px solid #E5E7EB;background:#fff;color:#1F2937;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s,color .12s}
.lct-cb-opt:hover{border-color:#46B5DD}
.lct-cb-opt.is-sel{border-color:#0F4C81;background:#0F4C81;color:#fff}
.lct-cb-go{width:100%;margin-top:4px;justify-content:center}
.lct-cb-skip{display:block;text-align:center;margin-top:9px;font-size:12px;color:#6B7280;text-decoration:underline}
.lct-cb-skip:hover{color:#0F4C81}
@media(max-width:768px) {.lct-cb{bottom:16px;left:14px}.lct-cb-fab{gap:0;padding:12px;width:50px;height:50px;justify-content:center}.lct-cb-fab-txt{display:none}.lct-cb-fab-ico{font-size:22px}.lct-cb-panel{width:260px}
}

/* v5.0.2: View Transitions, vloeiende paginawissels (cross-document).
   Werkt samen met Speculation Rules: prerender + crossfade = app-gevoel.
   Browsers zonder ondersteuning negeren dit volledig. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media(prefers-reduced-motion:reduce) {@view-transition{navigation:none}
}

/* v5.0.3: op de cruise-pagina volgen FAQ + verhalen de contentlijn (1216px) */
.lct-faq-wide .lct-faq{max-width:none;width:min(1216px,calc(100% - 64px));padding:0}

/* v5.0.3: klassen-overzicht op de rederij-landing */
.lct-landing-classes{margin-top:22px;padding-top:20px;border-top:1px solid #E8EEF4}
.lct-landing-classes-title{margin:0 0 12px;font-size:17px;color:#0B2A4A}
.lct-landing-classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lct-landing-class{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:13px 15px}
.lct-landing-class-name{font-weight:700;font-size:14.5px;color:#0B2A4A}
.lct-landing-class-label{display:inline-block;margin-left:6px;padding:2px 8px;background:#EFF6FF;color:#0F75BC;border-radius:999px;font-size:12px;font-weight:700;vertical-align:middle}
.lct-landing-class-desc{margin:6px 0 0;font-size:13px;color:#5B7186;line-height:1.5}

/* v5.0.3: schip-hoverkaart */
[data-lc-ship]{cursor:help;text-decoration:underline dotted rgba(15,117,188,.45);text-underline-offset:3px}
.lct-shipcard{position:absolute;z-index:9995;width:300px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;box-shadow:0 18px 44px rgba(11,42,74,.22);overflow:hidden;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.lct-shipcard[hidden]{display:none}
.lct-shipcard.is-on{opacity:1;transform:none;pointer-events:auto}
.lct-shipcard-img{aspect-ratio:16/9;background-size:cover;background-position:center}
.lct-shipcard-body{padding:13px 15px 15px}
.lct-shipcard-name{font-weight:800;font-size:15.5px;color:#0B2A4A}
.lct-shipcard-co{font-size:12.5px;color:#5B7186;margin-top:1px}
.lct-shipcard-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:11px 0 0}
.lct-shipcard-facts div{display:flex;flex-direction:column}
.lct-shipcard-facts dt{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8AA0B4}
.lct-shipcard-facts dd{margin:1px 0 0;font-size:13px;font-weight:600;color:#1F2937}
.lct-shipcard-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.lct-shipcard-badges span{background:#F0F9FF;color:#0F75BC;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.lct-shipcard-link{display:block;margin-top:12px;font-size:13px;font-weight:700;color:#0F75BC;text-decoration:none}
.lct-shipcard-link:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce) {.lct-shipcard{transition:none}
}

/* v5.0.4: hoverkaart, sterren per leeftijdscategorie + galerij-thumbs */
.lct-shipcard-ratings{margin-top:12px;padding-top:11px;border-top:1px solid #EEF2F6;display:flex;flex-direction:column;gap:6px}
.lct-shipcard-rating{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lct-shipcard-rating .ic{width:18px;text-align:center}
.lct-shipcard-rating .lb{flex:1;color:#374151;font-weight:600}
.lct-shipcard-rating .st i{font-style:normal;color:#D8DEE6;font-size:13px;letter-spacing:1px}
.lct-shipcard-rating .st i.on{color:#F2B01E}
.lct-shipcard-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}
.lct-shipcard-thumbs span{display:block;aspect-ratio:4/3;border-radius:7px;background-size:cover;background-position:center;border:1px solid #EEF2F6}

/* v5.0.5: klassen-regel in de hoverkaart */
.lct-shipcard-classes{margin-top:10px;font-size:12px;color:#5B7186;line-height:1.5}
.lct-shipcard-classes span{font-weight:700;color:#374151}
.lct-buddy-pose{display:none}
.lct-buddy-pose.on{display:block}
.lct-buddy-bubble.pop{animation:lct-bd-pop .3s ease}
@keyframes lct-bd-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lct-bd-sail{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes lct-bd-wheelturn{from{rotate:0deg}to{rotate:360deg}}
@keyframes lct-bd-cheer{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes lct-bd-pop{0%{transform:scale(.96);opacity:.6}100%{transform:scale(1);opacity:1}}
@keyframes lct-bd-conf{from{transform:translateY(0)}to{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce) {.lct-buddy-fig,.lct-buddy-coach.is-sailing .lct-buddy-fig,.lct-bd-confetti circle,.lct-buddy-coach.is-sailing .lct-bd-wheel,.lct-buddy-bubble.pop{animation:none}
}

/* v5.0.7: Captain Danny prominent in de zwevende widget */
.lct-cb-fab{padding:10px 22px 10px 10px;gap:12px;background:linear-gradient(135deg,#0B2A4A 0%,#0F4C81 60%,#1273B5 100%);box-shadow:0 10px 28px rgba(11,42,74,.38),0 0 0 0 rgba(70,181,221,.4)}
.lct-cb-fab-ico{flex:0 0 auto}
.lct-cb-fab-ico .lct-buddy-face{width:48px;height:48px;display:block;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px #F2B01E,0 3px 8px rgba(0,0,0,.25)}
.lct-cb-fab-lines{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.lct-cb-fab .lct-cb-fab-txt{font-size:16.5px;font-weight:800;letter-spacing:.1px;line-height:1.1;white-space:nowrap}
.lct-cb:not(.is-open) .lct-cb-fab{animation:lct-cb-nudge 9s ease-in-out infinite}
.lct-cb-fab:hover{box-shadow:0 14px 34px rgba(11,42,74,.48),0 0 0 6px rgba(70,181,221,.18)}
@keyframes lct-cb-nudge{0%,90%,100%{transform:translateY(0) rotate(0)}92%{transform:translateY(-4px) rotate(-1.2deg)}95%{transform:translateY(0) rotate(1deg)}97%{transform:translateY(-2px) rotate(0)}}
.lct-cb-panel-face{display:inline-block;width:38px;height:38px;vertical-align:middle;margin-right:9px}
.lct-cb-panel-face .lct-buddy-face{width:38px;height:38px;border-radius:50%;background:#F2F8FD;box-shadow:0 0 0 2px #F2B01E}
@media(max-width:768px) {
	.lct-cb-fab{padding:7px;width:60px;height:60px;justify-content:center;gap:0}
	.lct-cb-fab-lines{display:none}
	.lct-cb-fab-ico .lct-buddy-face{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce) {.lct-cb:not(.is-open) .lct-cb-fab{animation:none}
}

/* =========================================================================
   v5.0.8: Cruise Buddy, brede make-over in huisstijl
   Hero: tekst links + Captain Danny rechts. Wizard: coach-rail links (sticky),
   vragen breed rechts, opties in 3-4 kolommen. Compacter in de hoogte.
   ========================================================================= */
.lct-matcher-hero{padding:34px 0 0;background:linear-gradient(180deg,#F2F8FD 0%,#fff 100%);border-bottom:1px solid #E8F0F7;overflow:hidden}
.lct-matcher-hero .lct-matcher-h1{font-size:46px;margin:12px 0 12px}
.lct-matcher-hero .lct-matcher-lead{margin:0;max-width:560px}
.lct-matcher-hero-fig{position:relative;flex:0 0 240px;align-self:flex-end;display:flex;justify-content:center}
.lct-matcher-hero-fig .lct-buddy-svg{width:210px;height:auto;position:relative;z-index:1;filter:drop-shadow(0 12px 22px rgba(11,42,74,.18))}
@media(max-width:860px) {.lct-matcher-hero-fig{display:none}.lct-matcher-hero .lct-matcher-lead{margin:0 auto}.lct-matcher-hero .lct-breadcrumb{justify-content:center}.lct-matcher-hero .lct-beta-row{justify-content:center}
}

/* v5.0.13: genummerde paginering, crawlbare diepe pagina's (SEO) */
.lc-index .lc-pagination-num{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:var(--lct-radius-md);background:#fff;border:1px solid var(--lct-border);color:var(--lct-text);text-decoration:none;font-size:13.5px;font-weight:600}
.lc-index .lc-pagination-num:hover{border-color:var(--lct-primary);color:var(--lct-primary)}
.lc-index .lc-pagination-num.is-current{background:var(--lct-primary);color:#fff;border-color:var(--lct-primary)}
.lc-index .lc-pagination-gap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:38px;color:var(--lct-text-mid)}
.lc-index .lc-pagination-arrow{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:var(--lct-radius-md);background:#fff;border:1px solid var(--lct-border);color:var(--lct-text);text-decoration:none;font-size:13.5px;font-weight:600}
.lc-index .lc-pagination-arrow:hover{border-color:var(--lct-primary);color:var(--lct-primary)}
.lc-index .lc-pagination-info{margin-left:10px;color:var(--lct-text-mid);font-size:13px}
@media (max-width:600px) {.lc-index .lc-pagination-info{display:none}
}

/* =====================================================
   SVG-ICONEN (v5.0.30), vervangt zichtbare emoji's
   ===================================================== */
.lct-ico {
	display: inline-block;
	vertical-align: -0.18em;      /* lijnt netjes met tekst-baseline */
	flex-shrink: 0;
	color: var(--lct-primary, #0F75BC);  /* huisstijlblauw, override per context */
}
/* In knoppen / donkere vlakken / gekleurde badges erft het icoon de tekstkleur
   (vaak wit). v5.0.34: badges toegevoegd, de last-minute-badge heeft een rode
   achtergrond met witte tekst; zonder currentColor bleef het icoon blauw en viel
   het weg op het rood. */
.lct-btn-primary .lct-ico,
.lct-btn-on-dark .lct-ico,
button .lct-ico,
.lc-mobile-cta-call .lct-ico,
.lct-cruise-card-badge .lct-ico,
.lct-cruise-card-badge--lm .lct-ico,
.lct-cruise-card-badge--disc .lct-ico,
[class*="--btn"] .lct-ico { color: currentColor; }

/* =====================================================
   GEDEELDE CRUISE-KAART (v5.0.40)
   De kaart-stijlen stonden onder `.lc-index ...` en golden dus alleen op het
   overzicht. Hier hangen we dezelfde stijlen ook onder `.lc-shared-card-grid`
   zodat de kaart op homepage/bestemming/rederij identiek oogt. Eén bron, overal
   gelijk.
   ===================================================== */
.lc-shared-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
@media (max-width: 1200px) { .lc-shared-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) { .lc-shared-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lc-shared-card-grid { grid-template-columns: 1fr; }
}

/* Kaart zelf, zelfde look als op het overzicht */
.lc-shared-card-grid .lc-cruise-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 6px 18px rgba(10,37,64,0.06);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lct-border, #E5E7EB);
	color: var(--lct-text);
	text-decoration: none;
	transition: transform var(--lct-transition), box-shadow var(--lct-transition);
}
.lc-shared-card-grid .lc-cruise-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(10,37,64,0.05), 0 12px 28px rgba(10,37,64,0.10);
}
.lc-shared-card-grid .lc-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eef3f8;
}
.lc-shared-card-grid .lc-card-media img,
.lc-shared-card-grid .lc-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lc-shared-card-grid .lc-card-badge-visited {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255,255,255,.94);
	color: #0F4C81;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid #CFE0EF;
}
.lc-shared-card-grid .lc-card-badge-visited .lct-ico { color: currentColor; }
.lc-shared-card-grid .lc-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.lc-shared-card-grid .lc-card-meta-line {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--lct-primary, #0F75BC);
	/* v5.0.44: rederij + regio op één regel houden; bij lange combinaties
	   (bv. NORWEGIAN CRUISE LINE · WEST-MIDDELLANDSE ZEE) netjes afkappen i.p.v.
	   naar een tweede regel wrappen, dat duwde titel op verschillende hoogtes. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.lc-shared-card-grid .lc-card-title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--lct-text, #0A2540);
	margin: 2px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lc-shared-card-grid .lc-card-ship {
	font-size: 12.5px;
	color: var(--lct-text-muted, #5B6573);
	border-bottom: 1px solid var(--lct-border, #E5E7EB);
	padding-bottom: 10px;
}
.lc-shared-card-grid .lc-card-specs {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 8px 0 0;
	margin-top: 4px;
	border-top: 1px solid var(--lct-border, #E5E7EB);
}
.lc-shared-card-grid .lc-card-spec {
	display: grid;
	grid-template-columns: 20px 96px 1fr;
	align-items: start;
	gap: 8px;
	font-size: 13px;
	/* v5.0.43: elke spec-rij reserveert ruimte voor TWEE regels tekst. Een korte
	   vertrekhaven (1 regel) neemt dan evenveel hoogte in als een lange (2 regels),
	   zodat alle kaarten onderling uitlijnen, zonder iets af te kappen. */
	min-height: 2.7em;
}
.lc-shared-card-grid .lc-card-spec-icon { color: var(--lct-primary, #0F75BC); display: inline-flex; padding-top: 1px; }
.lc-shared-card-grid .lc-card-spec-label { color: var(--lct-text-muted, #5B6573); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; }
.lc-shared-card-grid .lc-card-spec-value {
	color: var(--lct-text, #1A1A1F);
	font-weight: 600;
	line-height: 1.35;
	min-width: 0;
	/* Maximaal 2 regels; langere namen worden netjes afgekapt op regel 2 i.p.v.
	   de kaart hoger te maken. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lc-shared-card-grid .lc-card-route {
	font-size: 12px;
	color: var(--lct-text-muted, #5B6573);
	line-height: 1.4;
	padding: 10px 0 0;
	margin-top: 4px;
	border-top: 1px solid var(--lct-border, #E5E7EB);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.6em;
}
.lc-shared-card-grid .lc-card-route-spacer { min-height: 3.6em; padding: 10px 0 0; margin-top: 4px; border-top: 1px solid var(--lct-border, #E5E7EB); }
.lc-shared-card-grid .lc-card-route-label { color: var(--lct-text-muted, #5B6573); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 6px; }
.lc-shared-card-grid .lc-card-route-text { color: var(--lct-text, #1A1A1F); font-weight: 500; }
.lc-shared-card-grid .lc-card-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	flex-wrap: wrap;
}
.lc-shared-card-grid .lc-card-price { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.lc-shared-card-grid .lc-card-price-label { font-size: 12px; color: var(--lct-text-muted, #5B6573); font-weight: 600; }
.lc-shared-card-grid .lc-card-price.is-lastminute .lc-card-price-label { color: #dc2626; display: inline-flex; align-items: center; gap: 3px; }
.lc-shared-card-grid .lc-card-price.is-lastminute .lc-card-price-label .lct-ico { color: currentColor; }
.lc-shared-card-grid .lc-card-price-value { font-size: 22px; font-weight: 800; color: var(--lct-primary, #0F75BC); }
.lc-shared-card-grid .lc-card-price-pp { font-size: 12px; color: var(--lct-text-muted, #5B6573); }
.lc-shared-card-grid .lc-card-cta {
	background: var(--lct-primary, #0F75BC);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	white-space: nowrap;
}

/* v5.0.41: favorieten-hartknop op de gedeelde kaart-media positioneren */
.lc-shared-card-grid .lc-card-media .lc-card-fav-btn {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,0.92);
	color: #dc2626;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(10,37,64,0.15);
}
.lc-shared-card-grid .lc-card-media .lc-card-fav-btn svg { fill: currentColor; }
.lct-menu .lct-has-megamenu:hover > .lct-megamenu--ships,
.lct-menu .lct-has-megamenu:focus-within > .lct-megamenu--ships { display: block; }

/* =====================================================
   SCHEPEN logo-submenu in de navigatie (v5.0.52)
   Dropdown onder 'Schepen' met rederij-logo's → snel naar de juiste rederij.
   ===================================================== */
.lct-menu .lct-has-ships-submenu { position: relative; }
.lct-menu .lct-has-ships-submenu:hover > .lct-ships-submenu,
.lct-menu .lct-has-ships-submenu:focus-within > .lct-ships-submenu {
	display: block;
}

.lct-related{max-width:1100px;margin:0 auto 34px;padding:0 20px;}
.lct-related h2{font-size:1.15rem;color:#0F4C81;margin:0 0 12px;}
.lct-mode-tab.is-active{background:#fff;color:#0F4C81;box-shadow:0 1px 4px rgba(10,37,64,.10)}
.lct-chat-msg.bot{align-self:flex-start;background:#eef5fb;color:#0A2540;border-bottom-left-radius:4px}
.lct-chat-msg.user{align-self:flex-end;background:#0F75BC;color:#fff;border-bottom-right-radius:4px}
.lct-chat-msg.bot a{color:#0F4C81;font-weight:600}
.lct-haven-mode{flex:1;border:1px solid #dbe4ec;background:#fff;border-radius:8px;padding:7px 4px;font:inherit;font-size:12px;font-weight:600;color:#51606f;cursor:pointer;white-space:nowrap}
.lct-haven-mode.is-active{background:#0F4C81;border-color:#0F4C81;color:#fff}

/* === WhatsApp-FAB rechts naast Captain Danny (v5.0.167) === */
.lct-cb-fabrow{display:flex;align-items:center;gap:10px;pointer-events:auto}
/* v5.0.203: één held (Cruise Buddy), WhatsApp en Bel als kleine ronde satellieten.
   Bel-satelliet alleen mobiel (vervangt de oude full-width belbalk). */
.lct-wa-fab{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#25D366;color:#fff;border:0;cursor:pointer;text-decoration:none;border-radius:50%;padding:0;box-shadow:0 6px 18px rgba(37,211,102,.35);pointer-events:auto;flex:none;transition:transform .15s ease,box-shadow .15s ease}
.lct-wa-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.45);color:#fff}
/* v5.0.200: zichtbare focus voor toetsenbordgebruikers op beide fabs. */
.lct-wa-fab:focus-visible,.lct-cb-fab:focus-visible,.lct-call-fab:focus-visible{outline:3px solid #F2B01E;outline-offset:3px}
.lct-wa-fab-ico{flex:none;display:inline-flex}
.lct-call-fab{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:var(--lct-primary,#0F75BC);color:#fff;text-decoration:none;border-radius:50%;box-shadow:0 6px 18px rgba(15,117,188,.35);flex:none;transition:transform .15s ease,box-shadow .15s ease}
.lct-call-fab:hover{transform:translateY(-2px);color:#fff}
@media(max-width:768px) {.lct-cb-fabrow{gap:8px}.lct-call-fab{display:inline-flex}.lct-wa-fab,.lct-call-fab{width:42px;height:42px}
}
@supports (text-wrap: balance) {
	h1, h2, h3,
	.lc-fullwidth-title,
	.lct-acties-h1,
	.lc-pageheader-title,
	.lct-company-section-title,
	.lc-classes-heading {
		text-wrap: balance;
	}
}
@supports (text-wrap: pretty) {
	p, li, figcaption, .lc-eyebrow, .lct-intro, .lc-card-body {
		text-wrap: pretty;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.lc-cruise-card {
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		            box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
	.lc-cruise-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--lct-shadow-lg);
	}
	/* De afbeelding ademt heel licht mee, geeft diepte zonder te schreeuwen. */
	.lc-cruise-card .lc-card-image img,
	.lc-cruise-card .lc-card-media img {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-media img {
		transform: scale(1.04);
	}
}
@supports (background-size: 100% 2px) {
	.lct-prose a:not(.button):not(.lc-btn),
	.lc-rich-text a:not(.button):not(.lc-btn) {
		background-image: linear-gradient(var(--lct-primary), var(--lct-primary));
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 1.5px;
		transition: background-size 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
		padding-bottom: 1px;
	}
	.lct-prose a:not(.button):not(.lc-btn):hover,
	.lc-rich-text a:not(.button):not(.lc-btn):hover {
		background-size: 100% 1.5px;
	}
}

/* 5. Focus-zichtbaarheid voor toetsenbordgebruikers, een net, merk-
   gekleurd focusringetje. Toegankelijkheid is ook een 'craft'-signaal
   dat generieke output vaak mist. :focus-visible raakt alleen keyboard. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--lct-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* 6. Optisch: cijfers in prijzen en tabellen op gelijke breedte, zodat
   bedragen netjes onder elkaar uitlijnen (tabular-nums). */
.lc-card-price-badge,
.lc-price,
.lcdr-num,
.lc-from-price,
[class*="prijs"] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
@supports (container-type: inline-size) {

	/* Elke kaart wordt een query-container op basis van eigen breedte. */
	.lc-index .lc-cruise-card,
	.lc-card-grid .lc-cruise-card {
		container-type: inline-size;
		container-name: cruisecard;
	}
}
@supports (container-type: inline-size) {
@container cruisecard (max-width: 260px) {
		.lc-card-image, .lc-card-media { height: 150px; }
		.lc-card-body { padding: 14px 14px 16px; }
		.lc-card-title { font-size: 15px; line-height: 1.25; }
		.lc-card-ship-name { font-size: 12px; }
}
}
@supports (container-type: inline-size) {
@container cruisecard (min-width: 420px) {
		.lc-card-image, .lc-card-media { height: 220px; }
		.lc-card-body { padding: 22px 22px 24px; }
		.lc-card-title { font-size: 21px; line-height: 1.2; }
}
}

/* v5.0.178: thema-badge op kaart-tegels (was inline; nu één bron) */
.lc-card-badge-theme {
	position: absolute; bottom: 12px; left: 12px; z-index: 6;
	background: #0E7C86; color: #fff;
	padding: 4px 12px;
	border-radius: var(--lct-radius-pill, 999px);
	font-size: 12px; font-weight: 700;
	box-shadow: 0 2px 10px rgba(10,37,64,.35);
	max-width: calc(100% - 24px);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============ v5.0.179: Megamenu "De Brug" ============ */
.lct-mega{position:fixed;left:24px;right:24px;z-index:9997;background:#fff;color:var(--lct-navy,#0A2540);border-radius:18px;box-shadow:0 30px 80px rgba(4,18,33,.45);display:grid;grid-template-columns:1.2fr 1fr .9fr;overflow:hidden;opacity:0;transform:translateY(-8px);transition:opacity .26s ease,transform .26s ease;pointer-events:none}
.lct-mega.open{opacity:1;transform:translateZ(0);pointer-events:auto}
.lct-mega section{padding:24px 24px 20px}
.lct-mega section+section{border-left:1px solid #eef2f6}
.lct-mega h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lct-primary,#0F75BC);margin:0 0 13px}
/* v5.0.206: strakker cruises-paneel, compactere cellen, verzorgde fallback. */
.lct-mega-vaarg{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.lct-mega-vaarg a{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-size:13px;font-weight:600;padding:5px 7px;border-radius:9px;transition:background .15s}
.lct-mega-vaarg a:hover{background:#f2f7fb}
.lct-mega-vaarg .th{width:40px;height:30px;border-radius:7px;flex:none;object-fit:cover}
.lct-mega-vaarg .th--fb{background:linear-gradient(140deg,#0F4C81,#46B5DD);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Instrument Serif',serif;font-style:italic;font-weight:600;font-size:15px;line-height:1}
.lct-mega-vaarg small{display:block;font-weight:400;font-size:12px;color:#51606f}
.lct-mega-links a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-decoration:none;color:inherit;font-size:13.5px;font-weight:600;padding:8px 9px;border-radius:9px;transition:background .15s}
.lct-mega-links a:hover{background:#f2f7fb;color:var(--lct-primary,#0F75BC)}
.lct-mega-links .sub{flex-basis:100%;font-weight:400;font-size:12px;color:#51606f;padding-left:24px;margin-top:-3px}
.lct-mega-news a{display:block;text-decoration:none;color:inherit;font-size:12.5px;font-weight:600;line-height:1.4;padding:7px 0;border-bottom:1px solid #eef2f6}
.lct-mega-news .d{font-size:12px;color:var(--lct-primary,#0F75BC)}
.lct-mega-rev{margin-top:12px;padding:11px 13px;background:#f7fafd;border-left:3px solid var(--lct-gold,#F2B01E);border-radius:0 10px 10px 0;font-family:'Instrument Serif',serif;font-style:italic;font-size:13.5px;line-height:1.5;color:#33475c}
.lct-mega-rev small{display:block;font-family:inherit;font-style:normal;font-weight:600;font-size:12px;color:var(--lct-gold,#F2B01E);margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif}
.lct-mega-cta{grid-column:1/-1;background:linear-gradient(90deg,var(--lct-navy,#0A2540),var(--lct-blue,#0F4C81));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;font-size:13px;font-weight:600}
.lct-mega-cta a{color:var(--lct-gold,#F2B01E);text-decoration:none}
@media(max-width:900px) {.lct-mega{display:none !important}
}

/* v5.0.185: megamenu uitgebreid, logo's, highlights, acties, compacte panelen */
.lct-mega--sm{grid-template-columns:1.1fr .9fr}
.lct-mega[data-mega="rederij"]{grid-template-columns:1fr}
.lct-mega[data-mega="nieuws"]{grid-template-columns:1fr}
.lct-mega-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lct-mega-logos a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 6px;border:1px solid #eef2f6;border-radius:10px;text-decoration:none;color:var(--lct-navy,#0A2540);transition:border-color .15s,background .15s;min-height:52px}
.lct-mega-logos a:hover{background:#f2f7fb;border-color:#d7e5f0}
.lct-mega-logos img{max-height:26px;max-width:80px;object-fit:contain}
.lct-mega-logos span{font-size:12px;font-weight:600;text-align:center}
.lct-mega-logos small{font-size:12px;color:#51606f}
.lct-mega-logos--wide{grid-template-columns:repeat(6,1fr)}
.lct-mega-hl{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--lct-navy,#0A2540);font-size:13px;font-weight:600;line-height:1.35;padding:8px;border:1px solid #eef2f6;border-radius:12px;margin-bottom:8px;transition:border-color .15s,background .15s}
.lct-mega-hl:hover{background:#f2f7fb;border-color:#d7e5f0}
.lct-mega-hl img{width:72px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.lct-mega-hl small{display:block;font-weight:700;color:var(--lct-primary,#0F75BC);margin-top:2px}
.lct-mega-actie{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--lct-navy,#0A2540);font-size:13.5px;font-weight:600;padding:8px 9px;border-radius:10px;transition:background .15s}
.lct-mega-actie:hover{background:#f2f7fb}
.lct-mega-actie b{flex:none;background:#eaf7ee;color:#0a7a43;font-size:12px;padding:4px 9px;border-radius:999px}
.lct-mega-actie small{display:block;font-weight:400;font-size:12px;color:#51606f}
.lct-mega-news--rows a{font-size:13.5px;padding:9px 0}
.lct-mega-tekst{font-size:13px;line-height:1.55;color:#33475c;margin:0 0 12px}
.lct-mega-leeg{font-size:13px;color:#51606f}
/* v5.0.186: megamenu-verfijning, compacte acties met logo, contact met foto/uren, dichter gevuld */
.lct-mega-acties{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.lct-mega-actie{padding:6px 7px;gap:8px}
.lct-mega-actie .lg{width:34px;height:22px;object-fit:contain;flex:none}
.lct-mega-actie span{flex:1;font-size:12.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lct-mega-actie b{font-size:12px;padding:3px 7px}
.lct-mega--contact{grid-template-columns:1fr 1fr 1.1fr}
.lct-mega-danny{display:flex;gap:14px;align-items:flex-start}
.lct-mega-danny img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #f2f7fb}
.lct-mega-danny strong{display:block;font-size:15px;color:var(--lct-navy,#0A2540)}
.lct-mega-danny small{display:block;font-size:12px;line-height:1.45;color:#51606f;margin:4px 0 8px}
.lct-mega-besch{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.lct-mega-besch.is-open{background:#eaf7ee;color:#0a7a43}
.lct-mega-besch.is-dicht{background:#f3f4f6;color:#51606f}
.lct-mega-uren{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;color:#33475c}
.lct-mega-uren b{color:var(--lct-navy,#0A2540);font-variant-numeric:tabular-nums}
.lct-mega section{padding:20px 20px 16px}
.lct-mega-hl{margin-bottom:6px;padding:6px}
.lct-mega-hl img{width:64px;height:46px}
.lct-mega-hl{font-size:12.5px}
/* v5.0.187: megamenu: 4-kolommen cruises, alle rederijen, ruimere acties, zoek-paneel */
.lct-mega--4col{grid-template-columns:1.15fr .8fr .85fr 1fr}
.lct-mega-logos--col{grid-template-columns:1fr 1fr}
.lct-mega-logos--col a{flex-direction:row;justify-content:flex-start;gap:8px;min-height:40px;padding:6px 8px}
.lct-mega-logos--col img{max-height:22px;max-width:64px}
/* v5.0.193: logo's in het 'Populaire rederijen'-blok (cruises-paneel) gecentreerd i.p.v. links. */
.lct-mega[data-mega="cruises"] .lct-mega-logos--col a{justify-content:center}
.lct-mega[data-mega="rederij"] .lct-mega-logos--wide{grid-template-columns:repeat(5,1fr);max-height:52vh;overflow:auto;padding-right:4px}
.lct-mega[data-mega="rederij"] section{padding-bottom:12px}
.lct-mega[data-mega="acties"]{grid-template-columns:1.6fr .7fr}
.lct-mega-acties{grid-template-columns:1fr 1fr;max-height:48vh;overflow:auto}
.lct-mega-alles{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--lct-primary,#0F75BC);text-decoration:none}
.lct-mega-zoekveld{width:100%;font:600 16px 'Plus Jakarta Sans',sans-serif;padding:13px 16px;border:2px solid #d7e5f0;border-radius:12px;outline:none;color:var(--lct-navy,#0A2540)}
.lct-mega-zoekveld:focus{border-color:var(--lct-primary,#0F75BC)}
.lct-mega-zoekres{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:12px}
.lct-mega-zoekres a{display:block;text-decoration:none;color:var(--lct-navy,#0A2540);font-size:13.5px;font-weight:600;padding:9px 10px;border-radius:9px}
.lct-mega-zoekres a:hover{background:#f2f7fb;color:var(--lct-primary,#0F75BC)}
/* v5.0.188: nieuws met foto's, grotere rederij-logo's zonder aantallen */
.lct-mega-nieuwsitem{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--lct-navy,#0A2540);font-size:13.5px;font-weight:600;line-height:1.35;padding:8px;border-radius:12px;transition:background .15s}
.lct-mega-nieuwsitem:hover{background:#f2f7fb}
.lct-mega-nieuwsitem img,.lct-mega-nieuwsitem .ph{width:86px;height:58px;border-radius:10px;object-fit:cover;flex:none}
.lct-mega-nieuwsitem .ph{background:linear-gradient(140deg,var(--lct-blue,#0F4C81),var(--lct-cyan,#46B5DD));display:block}
.lct-mega-nieuwsitem .d{font-style:normal;font-size:12px;color:var(--lct-primary,#0F75BC);font-weight:700}
.lct-mega-news--rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.lct-mega-news--rows .lct-mega-nieuwsitem{border-bottom:0}
.lct-mega-logos img{max-height:40px;max-width:120px}
.lct-mega-logos a{min-height:64px;padding:10px 8px}
.lct-mega-logos--col img{max-height:30px;max-width:92px}
.lct-mega-logos--col a{min-height:48px}
.lct-mega[data-mega="rederij"] .lct-mega-logos--wide{grid-template-columns:repeat(4,1fr)}
/* v5.0.189: panelen op maat, geen zee van wit meer op brede schermen */
.lct-mega{left:50%;right:auto;transform:translateX(-50%) translateY(-8px);width:min(1240px,calc(100vw - 48px))}
.lct-mega.open{transform:translateX(-50%) translateZ(0)}
.lct-mega--sm{width:min(880px,calc(100vw - 48px))}
.lct-mega--zoek{width:min(680px,calc(100vw - 48px))}
.lct-mega[data-mega="rederij"]{width:min(980px,calc(100vw - 48px))}
.lct-mega[data-mega="nieuws"]{width:min(920px,calc(100vw - 48px))}
.lct-mega[data-mega="acties"]{width:min(940px,calc(100vw - 48px))}
/* rederijen: compacte cellen, 6 kolommen, logo passend */
.lct-mega[data-mega="rederij"] .lct-mega-logos--wide{grid-template-columns:repeat(5,1fr);gap:6px}
.lct-mega-logos a{min-height:52px;padding:7px 8px}
.lct-mega-logos img{max-height:30px;max-width:104px}
.lct-mega-logos--col a{min-height:44px;padding:5px 8px}
.lct-mega-logos--col img{max-height:24px;max-width:84px}
/* nieuws: compacte rijen met badge */
.lct-mega-news--rows{gap:2px 14px}
.lct-mega-nieuwsitem{padding:6px;font-size:13px}
.lct-mega-nieuwsitem img,.lct-mega-nieuwsitem .ph{width:64px;height:44px;border-radius:8px}
.lct-mega-nieuwsitem .b{font-style:normal;font-size:12px;font-weight:700;color:#0E7C86;background:#e8f4f5;padding:2px 7px;border-radius:999px;margin-left:7px}
/* v5.0.190: alle megamenu-panelen dezelfde breedte (evenwijdig) */
.lct-mega,.lct-mega--sm,.lct-mega--zoek,
.lct-mega[data-mega="rederij"],.lct-mega[data-mega="nieuws"],.lct-mega[data-mega="acties"]{width:min(1240px,calc(100vw - 48px))}
@media (max-width:768px) {
body.is-cruise-single .lct-cb-fabrow{display:none!important}
body.is-cruise-single{padding-bottom:76px}
}
/* v5.0.211: nieuws-megamenu, hero + compacte lijst. */
/* v5.0.212: nieuws op volle paneelbreedte, drie kolommen zoals de rest. */
.lct-mega--news{grid-template-columns:3.1fr 1fr;gap:22px;padding:22px 24px}
/* v5.0.213: de twee uitgelichte kaarten in een eigen 2-koloms zone. */
/* v5.0.215: drie voorvertoningen naast elkaar. */
.lct-mega-nheros{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
.lct-mega-nhero{display:block;text-decoration:none;color:var(--lct-navy,#0A2540);border-radius:14px;overflow:hidden;background:#f7fafd;transition:box-shadow .15s}
.lct-mega-nhero:hover{box-shadow:0 8px 24px rgba(10,37,64,.12)}
.lct-mega-nhero img,.lct-mega-nhero .ph{width:100%;height:150px;object-fit:cover;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(140deg,#0F4C81,#46B5DD)}
.lct-mega-nhero .tx{display:block;padding:12px 14px 14px}
.lct-mega-nhero .d{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lct-primary,#0F75BC);margin-bottom:4px}
.lct-mega-nhero strong{display:block;font-size:15.5px;line-height:1.3;font-weight:800}
.lct-mega-nhero small{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:#51606f;font-weight:500}
.lct-mega-nhero .meer{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--lct-primary,#0F75BC)}
.lct-mega-nlijst h4{margin-top:2px}
.lct-mega-nheros .lct-mega-nhero img,.lct-mega-nheros .lct-mega-nhero .ph{height:118px}
.lct-mega-nheros .lct-mega-nhero strong{font-size:14.5px}
@media (min-width: 1025px) {

	.lc-index .lc-results-layout {
		display: grid;
		grid-template-columns: 258px minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Geen sticky en geen eigen schuifbalk: alles scrollt samen. */
	.lc-index #lc-filter-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* ---------- filterkaart ---------- */
	.lc-index #lc-filter-sidebar .lct-cruises-searchbar {
		margin: 0;
		padding: 10px;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	/* ---------- Snel kiezen, binnen dezelfde kaart ---------- */
	.lc-index .lc-filter-group--quick {
		border: 0;
		border-bottom: 1px solid var(--lct-border);
		border-radius: 0;
		background: transparent;
		padding: 2px 10px 10px;
		margin: 0 0 2px;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 6px 0 0;
		padding: 0;
		border: 0;
		overflow: visible;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.15;
		padding: 3px 8px;
		border: 1px solid var(--lct-border);
		border-radius: 999px;
		background: #fff;
		color: var(--lct-navy);
		white-space: nowrap;
		text-decoration: none;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab:hover {
		border-color: var(--lct-primary);
		color: var(--lct-primary);
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab.is-active {
		background: var(--lct-primary);
		border-color: var(--lct-primary);
		color: #fff;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab-ico { width: 11px; height: 11px; }

	/* ---------- alles uitgeklapt ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-button { display: none; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list,
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list[hidden] {
		display: block;
		position: static;
		inset: auto;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 3px 0 0;
		min-width: 0;
		width: auto;
		max-width: none;
		max-height: none;
	}
	/* Klein schuifvakje per lange lijst, zodat de kolom compact blijft. */
	.lc-index #lc-filter-sidebar .lct-combo-scroll {
		overflow-y: auto;
		padding-right: 3px;
	max-height: 118px;
}
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar { width: 6px; }
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar-thumb {
		background: #dbe2ea;
		border-radius: 3px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-apply { display: none; }

	/* ---------- compacte velden ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field {
		border-right: 0;
		cursor: default;
	border-bottom: 1px solid var(--lct-border);
	padding: 8px 10px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-field:hover { background: #fff; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:last-of-type { border-bottom: 0; }
	.lc-index #lc-filter-sidebar .lct-searchbar-label {
	letter-spacing: 0.5px;
	font-size: 12px;
	white-space: normal;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi {
	font-size: 12px;
	padding: 3px 2px;
	gap: 6px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-label {
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-count {
	margin-left: auto;
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-select { font-size: 12px; padding: 5px 6px; }

	/* Zoekknop blijft binnen bereik terwijl je door de filters scrollt. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1;
		grid-row: auto;
		bottom: 0;
		background: #fff;
		z-index: 3;
	position: sticky;
	padding: 9px 0 3px;
	box-shadow: 0 -6px 10px -6px rgba(10,37,64,0.18);
	order: 99;
	order: 99;
}

	/* De vier promotegels netjes op een rij. */
	.lc-index .lc-results-column .lct-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Hero compacter: de snelkoppelingen zitten nu in de zijbalk. */
	.lc-index .lc-index-page-hero {
		padding-top: 16px;
		padding-bottom: 10px;
	}
}

/* ============================================================
   WEERGAVEKEUZE: 1 / 2 / 4 cruises per rij
   Hoe meer kolommen, hoe minder detail per kaart.
   ============================================================ */
.lc-index .lc-viewswitch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: auto;
}
.lc-index .lc-viewswitch-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lct-primary);
	margin-right: 2px;
}
.lc-index .lc-viewbtn {
	min-width: 28px;
	height: 26px;
	padding: 0 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--lct-navy);
	background: #fff;
	border: 1px solid var(--lct-border);
	border-radius: 7px;
	cursor: pointer;
	line-height: 1;
}
.lc-index .lc-viewbtn:hover { border-color: var(--lct-primary); color: var(--lct-primary); }
.lc-index .lc-viewbtn.is-active {
	background: var(--lct-primary);
	border-color: var(--lct-primary);
	color: #fff;
}


.lc-index .lc-card-grid.is-cols-2 .lc-card-route,
.lc-index .lc-card-grid.is-cols-2 .lc-card-route-spacer {
	display: none;
}

.lc-index .lc-card-grid.is-cols-4 .lc-card-route,
.lc-index .lc-card-grid.is-cols-4 .lc-card-route-spacer,
.lc-index .lc-card-grid.is-cols-4 .lc-card-ship-meta,
.lc-index .lc-card-grid.is-cols-4 .lc-card-spec-label {
	display: none;
}
@media (min-width: 1025px) {

	.lc-index #lc-filter-sidebar [data-filter="bestemming"] {
	order: 1;
	order: 1;
	order: 1;
}
	.lc-index #lc-filter-sidebar [data-filter="vertrek"]    {
	order: 2;
	order: 2;
	order: 3;
}
	.lc-index #lc-filter-sidebar [data-filter="duur"]       {
	order: 3;
	order: 3;
	order: 4;
}
	.lc-index #lc-filter-sidebar [data-filter="prijs"]      {
	order: 4;
	order: 4;
	order: 5;
}
	.lc-index #lc-filter-sidebar [data-filter="rederij"]    {
	order: 5;
	order: 6;
	order: 6;
}
	.lc-index #lc-filter-sidebar [data-filter="schip"]      {
	order: 6;
	order: 7;
	order: 7;
}
	.lc-index #lc-filter-sidebar [data-filter="type"]       {
	order: 7;
	order: 8;
	order: 8;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-dep"]  {
	order: 8;
	order: 9;
	order: 9;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-call"] {
	order: 9;
	order: 10;
	order: 10;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-arr"]  {
	order: 10;
	order: 11;
	order: 11;
}
	/* Zoekknop altijd onderaan. */

	/* --- de drie dichte havenfilters --- */
	/* Ze zien eruit als de andere velden, met een pijltje dat aangeeft
	   dat er iets uitklapt. */
	.lc-index #lc-filter-sidebar .lct-field--fold {
		cursor: pointer;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-button {
		padding: 0;
		font-size: 13px;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-searchbar-value {
		font-size: 13px;
	}
	/* Het uitklappaneel mag breder zijn dan de kolom - de zijbalk heeft
	   geen eigen schuifbalk meer, dus het kan er netjes buiten vallen. */
	/* ============================================================================
   v5.0.416, de sticky zoekknop niet meer vóór de filterlijst
   ----------------------------------------------------------------------------
   Hier stond z-index 40 op de lijst en 3 op de knop, en dat lijkt genoeg. Maar de
   knop is position: sticky en vormt daarmee zijn EIGEN stapellaag; die 40 wordt
   dan niet met de 3 vergeleken maar binnen een andere laag. Gevolg: de blauwe
   knop zweefde door de bestemmingenlijst heen, precies wat op /cruises/ te zien
   was.

   Nu ligt de lijst boven de knop met een marge die groot genoeg is om niet per
   ongeluk te worden ingehaald, en de knop krijgt een expliciet lagere waarde
   zodat de verhouding in de code te lezen is in plaats van af te leiden.
   ============================================================================ */
.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-list {
	z-index: 900;
	min-width: 306px;
}
.lc-index #lc-filter-sidebar .lct-combo.is-open { z-index: 900; }
.lc-index #lc-filter-sidebar .lct-searchbar-submit--span { z-index: 5; }
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-scroll {
		max-height: 232px;
		overflow-y: auto;
	}
	/* Hier is de Toepassen-knop juist wel nuttig: je klapt bewust open. */
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-apply {
		display: block;
		width: 100%;
	}
}

/* ============================================================
   v5.0.225: RESULTATENBALK + LIVE FILTEREN
   ------------------------------------------------------------
   - Weergavekeuze (1/2/4) links, aantallen in het midden,
     sorteren + favorieten rechts.
   - "Vertrek uit" is een echt filter geworden en krijgt een
     plek in de volgorde.
   - Tijdens het toepassen dimmen de resultaten kort, zodat
     zichtbaar is dat er iets gebeurt.
   ============================================================ */

/* --- de balk boven de resultaten --- */
.lc-index .lc-results-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}
.lc-index .lc-results-meta-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	align-items: center;
}
/* Sorteren + favorieten helemaal naar rechts. */
.lc-index .lc-results-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.lc-index .lc-results-tools .lct-sort-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lct-primary);
	white-space: nowrap;
}
.lc-index .lc-results-tools .lc-sort-select {
	font-size: 12.5px;
	padding: 5px 8px;
	border: 1px solid var(--lct-border);
	border-radius: 8px;
	background: #fff;
	color: var(--lct-navy);
	max-width: 190px;
}
.lc-index .lc-results-tools .lc-sort-fav-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--lct-navy);
	text-decoration: none;
	padding: 5px 9px;
	border: 1px solid var(--lct-border);
	border-radius: 8px;
	background: #fff;
	white-space: nowrap;
}
.lc-index .lc-results-tools .lc-sort-fav-link:hover {
	border-color: var(--lct-primary);
	color: var(--lct-primary);
}
.lc-index .lc-results-tools .lc-sort-fav-count {
	font-size: 12px;
	font-weight: 800;
	background: var(--lct-primary);
	color: #fff;
	border-radius: 999px;
	min-width: 17px;
	text-align: center;
	padding: 1px 5px;
}

/* De weergavekeuze blijft links staan. */
.lc-index .lc-viewswitch { margin-right: 0; }

/* --- bezig met filteren --- */
.lc-index .lc-results-layout.is-filtering .lc-results-column {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity .12s ease;
}
@media (min-width: 1025px) {
	.lc-index #lc-filter-sidebar [data-filter="vertrekland"] {
	order: 5;
	order: 2;
}
}
@media (max-width: 1024px) {

	.lc-index .lc-results-meta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.lc-index .lc-viewswitch {
		justify-content: flex-start;
		margin-right: 0;
	}

	.lc-index .lc-results-tools {
		margin-left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* "Sorteer op:" visueel weg, het sorteerveld spreekt voor zich.
	   Wel leesbaar houden voor schermlezers. */
	.lc-index .lc-results-tools .lct-sort-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* Het sorteerveld vult de ruimte die overblijft. */
	.lc-index .lc-results-tools .lc-sort-select {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	/* De favorietenknop krimpt niet mee, maar past nu wel. */
	.lc-index .lc-results-tools .lc-sort-fav-link {
		flex: 0 0 auto;
	}
}
@media (max-width: 400px) {
	.lc-index .lc-results-tools .lc-sort-fav-link .lc-sort-fav-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ============================================================
   v5.0.227: TOOLS-BLOK + BADGES
   ------------------------------------------------------------
   - Sorteren en favorieten op één regel, weergavekeuze eronder.
   - Badges staan nu in de kaart-body. Bij 2 en 4 kolommen liggen
     ze zoals voorheen over de afbeelding; bij 1 kolom staan ze in
     de tekst, direct onder het favorieten-hartje.
   ============================================================ */

/* --- tools rechtsboven: twee regels --- */
.lc-index .lc-results-tools {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-areas:
		"sortlabel sortsel fav"
		"vs        vs      vs";
	justify-content: end;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.lc-index .lc-results-tools .lct-sort-label   { grid-area: sortlabel; }
.lc-index .lc-results-tools .lc-sort-select   { grid-area: sortsel; }
.lc-index .lc-results-tools .lc-sort-fav-link { grid-area: fav; }
.lc-index .lc-results-tools .lc-viewswitch {
	grid-area: vs;
	justify-self: end;
}

/* --- badges --- */
/* Standaard: over de rechterbovenhoek van de afbeelding. De kaart is
   position:relative, de afbeelding staat bovenaan, dus dit valt samen. */
.lc-index .lc-cruise-card .lc-card-badge-stack {
	position: absolute;
	top: 10px;
	right: 10px;
}
@media (max-width: 1024px) {
	.lc-index .lc-results-tools {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"sortsel fav"
			"vs      vs";
		justify-content: stretch;
		width: 100%;
		margin-left: 0;
	}
	.lc-index .lc-results-tools .lc-viewswitch { justify-self: start; }
}

/* ============================================================
   v5.0.228: OPRUIMING RESULTATENBALK, KAART EN FILTERVOLGORDE
   ------------------------------------------------------------
   - Aantallen links, sorteren/favorieten/weergave rechts.
   - De zoekknop is niet meer zwevend. Dat was de oorzaak van het
     flikkeren tijdens scrollen (een sticky element met schaduw
     laat Safari continu hertekenen) en is met live filteren ook
     niet meer nodig.
   - Badges als rij tussen de twee lijnen van het specs-blok, dus
     meerdere badges rekken de kaart niet meer uit.
   - Bij één kolom staan vertrek/duur/vertrekhaven naast elkaar in
     plaats van onder elkaar: veel compacter en beter te scannen.
   - Filtervolgorde: "Vertrek uit" naar plek twee. Voor de
     Nederlandse bezoeker is "kan ik met de auto?" vaak de tweede
     vraag, nog vóór wanneer en hoe lang.
   ============================================================ */

/* --- resultatenbalk: aantallen links, gereedschap rechts --- */
.lc-index .lc-results-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}
.lc-index .lc-results-meta-inline { order: 1; }
.lc-index .lc-results-tools {
	order: 2;
	margin-left: auto;
}

/* --- zoekknop: gewoon onderaan, niet zwevend --- */
.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
	position: static;
	box-shadow: none;
	padding: 10px 0 2px;
}

/* --- één kolom: specificaties naast elkaar --- */
.lc-index .lc-card-grid.is-cols-1 .lc-card-specs {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 28px;
}
.lc-index .lc-card-grid.is-cols-1 .lc-card-spec {
	flex: 0 0 auto;
}
@media (min-width: 1025px) {
	
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span { order: 99; }
}
@media (min-width: 1500px) {
	:root { --lct-container: 1440px; }
}
@media (min-width: 1700px) {
	:root { --lct-container: 1580px; }
}
/* De hero op /cruises/ had de breedte hardgecodeerd; laat die meelopen. */
.lc-index .lc-index-page-hero .lc-container,
.lc-index .lc-container {
	max-width: var(--lct-container);
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 1025px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-field {
		padding: 6px 9px;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-label {
		letter-spacing: 0.4px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi {
		font-size: 12px;
		padding: 2px 2px;
		gap: 5px;
		line-height: 1.25;
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-label { font-size: 12px; }
	
	/* Placeholder-iconen (wereldbol, anker) weg: die zeggen niets en
	   kosten breedte. Echte rederij-logo's blijven wél staan. */
	.lc-index #lc-filter-sidebar .lct-combo-item-logo--ph {
	display: none;
}
	/* Meer opties zichtbaar in hetzelfde vakje, want de rijen zijn lager. */
	.lc-index #lc-filter-sidebar .lct-combo-scroll { max-height: 132px; }
	.lc-index #lc-filter-sidebar .lct-combo-search-input {
		font-size: 12px;
		padding: 5px 8px;
	}
}

/* ---------- compactere kaarten ---------- */
.lc-index .lc-card-body {
	padding: 12px 14px 14px;
	gap: 4px;
}
.lc-index .lc-card-specs {
	padding: 8px 0;
	gap: 4px;
}
@media (min-width: 1400px) { :root { --lct-container: min(95vw, 1560px); }
}
@media (min-width: 1800px) { :root { --lct-container: min(95vw, 1800px); }
}
@media (min-width: 2200px) { :root { --lct-container: min(94vw, 2100px); }
}

/* ---------- 2. geen kleurverschil achter de pagina bij terugveren ----------
   Scroll je bovenaan verder omhoog, dan toont de browser wat er achter de
   pagina zit. Was dat een andere kleur dan de header, dan las dat als een
   flits. */
html { background: #fff; }
/* Sticky header stabieler tijdens dat terugveren. */
.lct-header { backface-visibility: hidden; }
@media (min-width: 1025px) {

	/* ---------- 3. bredere filterkolom ---------- */
	.lc-index .lc-results-layout {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	/* ---------- 4. onderverdeling bestemmingen ---------- */
	.lc-index #lc-filter-sidebar .lct-combo-item-multi.is-sub {
		padding-left: 18px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi.is-sub .lct-combo-item-label {
		color: var(--lct-muted, #51606F);
	}
	/* Subtiel streepje zodat de samenhang zichtbaar is. */
	.lc-index #lc-filter-sidebar .lct-combo-item-multi.is-sub::before {
		content: "";
		position: absolute;
		left: 8px;
		top: 50%;
		width: 5px;
		height: 1px;
		background: var(--lct-border);
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi { position: relative; }

	/* ---------- 5. het vertrek-veld past nu in de kolom ---------- */
	.lc-index #lc-filter-sidebar [data-filter="vertrek"] .lct-combo-list,
	.lc-index #lc-filter-sidebar [data-filter="vertrek"] .lct-combo-list > * {
	min-width: 0;
	max-width: 100%;
}
	.lc-index #lc-filter-sidebar [data-filter="vertrek"] input[type="date"],
	.lc-index #lc-filter-sidebar [data-filter="vertrek"] select {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		font-size: 12px;
		padding: 5px 7px;
		box-sizing: border-box;
	}
}

.lc-index .lc-card-grid.is-cols-1 .lc-card-badge {
	border-radius: 999px 0 0 999px;
	padding-right: 14px;
	box-shadow: -2px 2px 9px rgba(10,37,64,0.16);
}

/* ============================================================
   v5.0.232: MOBIELE FILTERS, GROEPERING OVERAL, PRELOADER
   ============================================================ */

/* ---------- 1. groepering nu op ELK schermformaat ----------
   De insprong zat per ongeluk alleen in de desktop-regels, dus op
   mobiel stonden West- en Oost-Middellandse Zee er nog als losse
   broers bij. */
.lc-index .lct-combo-item-multi { position: relative; }
.lc-index .lct-combo-item-multi.is-sub { padding-left: 20px; }
.lc-index .lct-combo-item-multi.is-sub .lct-combo-item-label {
	color: var(--lct-muted, #51606F);
}
.lc-index .lct-combo-item-multi.is-sub::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: var(--lct-border);
}

/* ---------- 2. placeholder-iconen overal weg ----------
   Het wereldbolletje voor elke bestemming zei niets en duwde naam
   weg, waardoor "West-Middellandse Zee" werd afgekapt. */
.lc-index #lc-filter-sidebar .lct-combo-item-logo--ph { display: none; }
/* Namen mogen doorlopen op twee regels in plaats van afgekapt worden. */
.lc-index #lc-filter-sidebar .lct-combo-item-label {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.25;
}
.lc-index #lc-filter-sidebar .lct-combo-item-count {
	margin-left: auto;
	flex: 0 0 auto;
}

/* ---------- 3. preloader ---------- */
.lc-index .lc-results-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 16px;
	margin: 0 0 14px;
	background: #fff;
	border: 1px solid var(--lct-border);
	border-radius: var(--lct-radius-lg);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lct-navy);
	box-shadow: 0 2px 10px rgba(10,37,64,0.06);
}
.lc-index .lc-results-loader[hidden] { display: none; }
.lc-index .lc-results-loader-spin {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(15,117,188,0.25);
	border-top-color: var(--lct-primary);
	border-radius: 50%;
	animation: lcSpin .8s linear infinite;
	flex: 0 0 auto;
}
@keyframes lcSpin { to { transform: rotate(360deg); } }

/* ---------- 4. mobiel: filters dichtgeklapt achter een knop ---------- */
.lc-index .lc-filter-toggle { display: none; }
@media (max-width: 1024px) {
	.lc-index .lc-filter-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 0 0 12px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid var(--lct-border);
		border-radius: var(--lct-radius-lg);
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		color: var(--lct-navy);
		cursor: pointer;
	}
	.lc-index .lc-filter-toggle-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--lct-primary); }
	.lc-index .lc-filter-toggle-ico svg { width: 100%; height: 100%; }
	.lc-index .lc-filter-toggle-txt { flex: 1 1 auto; text-align: left; }
	.lc-index .lc-filter-toggle-count {
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 800;
		background: var(--lct-primary);
		color: #fff;
		border-radius: 999px;
		min-width: 20px;
		text-align: center;
		padding: 2px 7px;
	}
	.lc-index .lc-filter-toggle.is-open { border-color: var(--lct-primary); }

	/* Dicht bij het openen van de pagina: eerst cruises, dan filters. */
	.lc-index #lc-filter-sidebar { display: none; }
	.lc-index #lc-filter-sidebar.is-open {
	display: block;
	margin-bottom: 16px;
}

	/* De resultaten komen als eerste in beeld. */
	.lc-index .lc-results-layout {
		display: flex;
		flex-direction: column;
	}
	.lc-index .lc-filter-toggle { order: 1; }
	.lc-index #lc-filter-sidebar { order: 2; }
	.lc-index .lc-results-loader { order: 3; }
	.lc-index .lc-results-column { order: 4; }
}

/* ============================================================
   v5.0.234: BADGES NIET OVER DE TITEL, BREEDTE OP TABLET,
              LEESBARE INVULVELDEN
   ============================================================ */

/* ---------- 1. badges: rechts, maar in de tekststroom ----------
   Ze stonden absoluut gepositioneerd rechtsboven. Met twéé badges
   zakte de onderste precies op de titelregel en liep hij daar
   dwars over heen. Nu staan ze als rij tussen de twee lijnen van
   het specs-blok, rechts uitgelijnd en doorlopend tot de rand,
   het clip-effect blijft, maar ze kunnen nooit meer iets bedekken. */
.lc-index .lc-card-grid.is-cols-1 .lc-card-badge-stack {
	position: static;
	top: auto;
	right: auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	flex-basis: 100%;
	gap: 5px;
	margin: 0 -14px 4px 0;
	max-width: none;
}
.lc-index .lc-card-grid.is-cols-1 .lc-card-badge {
	border-radius: 999px 0 0 999px;
	padding-right: 14px;
	box-shadow: -2px 2px 8px rgba(10,37,64,0.14);
}
/* Bij 2 en 4 kolommen liggen ze over de foto; daar is genoeg ruimte
   en overlapt niets. Wel de titel vrijhouden voor de zekerheid. */
.lc-index .lc-card-grid.is-cols-2 .lc-card-title,
.lc-index .lc-card-grid.is-cols-4 .lc-card-title {
	padding-right: 2px;
}
@media (min-width: 1000px) {
	:root { --lct-container: min(97vw, 1560px); }
}
@media (min-width: 1700px) {
	:root { --lct-container: min(95vw, 1800px); }
}
@media (min-width: 2200px) {
	:root { --lct-container: min(94vw, 2100px); }
}
@media (min-width: 1000px) and (max-width: 1399px) {
	.lct-container,
	.lc-index .lc-container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 3. invulvelden zichtbaar maken ----------
   De datumvelden waren grijze vlakken zonder rand: het was niet te
   zien dát je er iets kon invullen. */
.lc-index #lc-filter-sidebar input[type="date"],
.lc-index #lc-filter-sidebar input[type="text"],
.lc-index #lc-filter-sidebar select {
	background: #fff;
	border: 1px solid var(--lct-border);
	border-radius: 8px;
	color: var(--lct-navy);
	min-height: 34px;
	box-sizing: border-box;
}
.lc-index #lc-filter-sidebar input[type="date"]:focus,
.lc-index #lc-filter-sidebar input[type="text"]:focus,
.lc-index #lc-filter-sidebar select:focus {
	outline: none;
	border-color: var(--lct-primary);
	box-shadow: 0 0 0 3px rgba(15,117,188,0.12);
}
/* Lege datumvelden krijgen een hint in plaats van een leeg vlak. */
.lc-index #lc-filter-sidebar input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
.lc-index #lc-filter-sidebar input[type="date"]:not(:focus):in-range::-webkit-datetime-edit {
	color: #9aa7b4;
}
/* De twee kopjes boven de datumvelden compacter. */
.lc-index #lc-filter-sidebar [data-filter="vertrek"] .lct-searchbar-label {
	margin-bottom: 2px;
}
@media (max-width: 1024px) {

	/* 1. Labels terug bij de compacte kaart.
	   De compacte weergave verbergt de labels VERTREK / DUUR /
	   VERTREKHAVEN. Op desktop klopt dat: daar staan vier kaarten
	   naast elkaar en is de ruimte krap. Maar mobiel is nu óók
	   compact, en dan blijft er alleen een icoontje met een datum
	   over. Het vertrek-icoon lijkt op een cadeautje, dus "7 dec
	   2026" zonder label leest als een actie in plaats van een
	   vertrekdatum. Labels dus terug waar één kaart de breedte heeft. */
	.lc-index .lc-card-grid.is-cols-4 .lc-card-spec-label { display: inline; }

	/* 2. De balk boven de resultaten was vier regels hoog voordat je
	   een cruise zag. Compacter. */
	.lc-index .lc-results-meta-row {
		gap: 8px;
		padding: 10px 12px;
	}
	.lc-index .lc-results-meta-inline {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2px 12px;
		font-size: 12.5px;
	}
	.lc-index .lc-results-tools { gap: 6px; }
	.lc-index .lc-viewswitch-label { font-size: 12px; }

	/* 3. De kop nam een achtste van het scherm. */
	.lc-index .lc-index-page-hero h1 {
		font-size: clamp(26px, 7vw, 34px);
		letter-spacing: -0.8px;
		margin-bottom: 8px;
	}
	.lc-index .lc-index-page-hero { padding: 18px 0 12px; }
}
@media (max-width: 700px) {
	/* Prijs op één regel in plaats van drie: "vanaf € 562 p.p." */
	.lc-index .lc-card-price {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 5px;
	}
	.lc-index .lc-card-price-label { font-size: 12px; }
	.lc-index .lc-card-price-value { font-size: 23px; line-height: 1.1; }
	.lc-index .lc-card-price-pp { font-size: 12px; }
	.lc-index .lc-card-footer { padding-top: 8px; gap: 6px; }

	/* Iets lagere foto, zodat er meer dan één cruise per scherm past. */
	.lc-index .lc-card-image { height: 148px; }
}

/* ============================================================
   v5.0.236: SUBGEBIEDEN PAS TONEN BIJ AANGEVINKTE OUDER
   ------------------------------------------------------------
   De lijst was 25 regels lang omdat alle onderverdelingen altijd
   meededen. Nu verschijnen West- en Oost-Caribbean pas zodra je
   Caribbean aanvinkt. Een zelf aangevinkt subgebied blijft altijd
   staan (klasse is-visible via JavaScript), en tijdens zoeken zijn
   ze allemaal zichtbaar.
   ============================================================ */
/* v5.0.369: display:none verwijderd, zie main.css. Een filter dat pas verschijnt als je
   een breder filter aanzet, is geen filter. */
.lc-index .lct-combo-item-multi.is-sub { display: flex; }
.lc-index .lct-combo-item-multi.is-sub.is-visible { display: flex; }
.lc-index .lct-combo-list.is-searching .lct-combo-item-multi.is-sub { display: flex; }

/* Zonder JavaScript blijft de lijst volledig bruikbaar. */
.no-js .lc-index .lct-combo-item-multi.is-sub { display: flex; }

/* ============================================================
   v5.0.237: ECHT VOLLE BREEDTE + DATUMVELDEN DIE PASSEN
   ------------------------------------------------------------
   1. Waarom de site niet breder werd: op .lc-results-layout stond
      een harde max-width van 1280px. Mijn --lct-container liep daar
      dus langs. Bij een iPad in desktopmodus (± 1600px) gaf dat
      precies de brede marges links en rechts.
   2. De datumvelden stonden in .lct-date-range, niet in een
      .lct-date-row. Mijn eerdere regel greep dus mis, waardoor
      "Vertrek tot" buiten de kolom viel.
   ============================================================ */

/* ---------- 1. de layout volgt nu wél de containerbreedte ---------- */
.lc-index .lc-results-layout,
.lc-index .lc-index-page-hero .lc-container,
.lc-index .lc-container {
	max-width: var(--lct-container);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
@media (min-width: 1000px) {
	/* Nog een tandje ruimer: op grote schermen mag de listing bijna de
	   volle breedte pakken. Een overzicht met kaarten leest daar goed;
	   lange tekstregels zijn hier niet in het spel. */
	.lc-index .lc-results-layout {
		max-width: min(98vw, 1900px);
		padding-left: 18px;
		padding-right: 18px;
	}
	.lc-index .lc-index-page-hero .lc-container,
	.lc-index .lc-container {
		max-width: min(98vw, 1900px);
	}
}

/* ---------- 2. vertrek vanaf / tot passen nu naast elkaar ---------- */
.lc-index #lc-filter-sidebar .lct-date-range {
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	display: grid;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}.lc-index #lc-filter-sidebar .lct-date-or {
	margin: 6px 0 4px;
	text-align: center;
}
@media (max-width: 1024px) {
	.lct-container,
	.lc-index .lc-container,
	.lc-index .lc-index-page-hero .lc-container {
		padding-left: 14px;
		padding-right: 14px;
		max-width: 100%;
	}
	.lc-index .lc-results-layout {
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
	/* De kaarten mogen breder: minder padding in de kaart zelf. */
	.lc-index .lc-card-body { padding: 12px 13px 13px; }
}
@media (max-width: 700px) {
	.lct-container,
	.lc-index .lc-container,
	.lc-index .lc-index-page-hero .lc-container {
		padding-left: 10px;
		padding-right: 10px;
	}
	.lc-index .lc-results-layout {
		padding-left: 8px;
		padding-right: 8px;
	}
	.lc-index .lc-card-grid { gap: 12px; }
	/* De filterknop en de resultatenbalk lopen mee tot de rand. */
	.lc-index .lc-filter-toggle { padding: 11px 12px; }
	.lc-index .lc-results-meta-row { padding: 9px 11px; }
	.lc-index .lc-card-body { padding: 11px 12px 12px; }
}

/* ============================================================
   v5.0.239: SNELMENU IN DE HERO
   ------------------------------------------------------------
   Op de plek van de losse regel over de aanbevolen selectie staan
   nu vier compacte ingangen met icoon. Ze gebruiken de bestaande
   filterparameters, dus een actieve keuze licht ook op.
   ============================================================ */
.lc-index .lc-hero-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 10px 0 0;
}
.lc-index .lc-hero-quick-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--lct-border);
	border-radius: 999px;
	background: #fff;
	color: var(--lct-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--lct-transition), color var(--lct-transition);
}
.lc-index .lc-hero-quick-ico {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--lct-primary);
}
.lc-index .lc-hero-quick-item:hover {
	border-color: var(--lct-primary);
	color: var(--lct-primary);
}
.lc-index .lc-hero-quick-item:hover .lc-hero-quick-ico { color: var(--lct-primary); }
/* Actief filter licht op, zodat je ziet waar je staat. */
.lc-index .lc-hero-quick-item.is-active {
	background: var(--lct-primary);
	border-color: var(--lct-primary);
	color: #fff;
}
.lc-index .lc-hero-quick-item.is-active .lc-hero-quick-ico { color: #fff; }
@media (max-width: 700px) {
	.lc-index .lc-hero-quick { gap: 6px; margin-top: 8px; }
	.lc-index .lc-hero-quick-item {
		font-size: 12px;
		padding: 5px 10px 5px 9px;
	}
	.lc-index .lc-hero-quick-ico { width: 14px; height: 14px; }
}


/* ============================================================
   v5.0.240: WEERGAVE-ICONEN + IDENTIEKE KAARTVOET OP MOBIEL
   ------------------------------------------------------------
   Twee kaarten die pal onder elkaar staan zagen er anders uit:
   bij de een stond "Bekijk cruise" naast de prijs (blauw), bij
   de ander eronder (navy). Twee losse oorzaken:

   1) DE KLEUR was de hover-stand. Op een telefoon blijft :hover
      hangen op het laatst aangeraakte element, dus juist de kaart
      waar je vinger tijdens het scrollen op stond werd navy. Alle
      hover-effecten staan daarom uit op aanraakschermen.

   2) DE PLAATSING was toeval. De voet is een flex-rij met
      flex-wrap: prijs + "per nacht" + knop passen op een smalle
      kaart net wél of net niet op één regel. Een paar pixels
      verschil in de prijstekst bepaalde dus de layout. Onder
      1025px ligt de voet nu vast in een raster: prijs en per-nacht
      links, knop rechts. Elke kaart identiek, ongeacht de tekst.

   Ook meegenomen: de bedoelde éénregelige prijs onder 700px
   werkte nooit, omdat flex-direction: column niet werd
   teruggezet. Dat is nu wel zo.
   ============================================================ */

/* --- weergavekeuze: iconen i.p.v. de cijfers 1 / 2 / 4 --- */
.lc-index .lc-viewbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 0 6px;
}
.lc-index .lc-viewbtn .lct-ico { display: block; }
@media (hover: none) {
	.lc-index .lc-cruise-card:hover,
	.lc-shared-card-grid .lc-cruise-card:hover,
	.lc-cruise-card:hover {
		transform: none;
		box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 6px 18px rgba(10,37,64,0.06);
	}
	.lc-index .lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-media img {
		transform: none;
	}
	.lc-index .lc-cruise-card:hover .lc-card-cta {
		background: var(--lct-primary, #0F75BC);
	}
	/* Dezelfde blijvende hover trof ook de andere kaarttypes. */
	.lct-cruise-card:hover,
	.lct-rederij-cruise-card:hover,
	.lc-ship-cruise-card:hover,
	.lc-related-cruise-card:hover {
		transform: none;
	}
}
@media (max-width: 1024px) {
	.lc-index .lc-card-footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"actie actie"
			"prijs cta"
			"nacht cta";
		align-items: center;
		column-gap: 10px;
		row-gap: 2px;
	}
	.lc-index .lc-card-footer .lc-card-actie-date { grid-area: actie; }
	.lc-index .lc-card-footer .lc-card-price      { grid-area: prijs; }
	.lc-index .lc-card-footer .lc-price-per-night { grid-area: nacht; }
	.lc-index .lc-card-footer .lc-card-cta {
		grid-area: cta;
		align-self: center;
		justify-self: end;
	}
}
@media (max-width: 700px) {
	.lc-index .lc-card-price {
		flex-direction: row;
		align-items: baseline;
	}
	.lc-index .lc-card-price-label { margin-bottom: 0; }
	.lc-index .lc-card-price-value { font-size: 21px; }
}


/* ============================================================
   v5.0.242: TOEGANKELIJKE KAART + GROTERE RAAKVLAKKEN
   ------------------------------------------------------------
   De hele kaart was een <a> met daarin een <button> (favoriet).
   Dat is ongeldige HTML: met een toetsenbord landt de focus in
   een link waar een knop in zit, en een schermlezer leest de
   volledige kaart (rederij, titel, schip, datum, haven, prijs,
   knoptekst) op als één linknaam van veertig woorden. Nu is de
   kaart een <div>, zit de link om de titel, dus een korte,
   beschrijvende linknaam, en dekt die link via ::after alsnog
   de hele kaart, zodat klikken overal blijft werken.
   ============================================================ */
.lc-index .lc-cruise-card,
.lc-shared-card-grid .lc-cruise-card { position: relative; }

.lc-card-title .lc-card-link {
	color: inherit;
	text-decoration: none;
}
/* Deze laag maakt de hele kaart klikbaar. z-index 1: boven de
   inhoud, onder de favoriet-knop. */
.lc-card-title .lc-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
/* De favoriet-knop moet aanklikbaar blijven bóven die laag. */
.lc-cruise-card .lc-card-fav-btn {
	position: relative;
	z-index: 2;
}
/* Zichtbare focus: de ring stond op de kaart zelf (die nu geen
   focus meer krijgt), dus verhuist hij naar de kaart-àls-geheel
   zodra er iets binnen focus heeft. */
.lc-index .lc-cruise-card:focus-within,
.lc-shared-card-grid .lc-cruise-card:focus-within {
	outline: 2px solid var(--lct-primary, #0F75BC);
	outline-offset: 3px;
}
.lc-card-title .lc-card-link:focus-visible { outline: none; }
@media (pointer: coarse) {
	.lc-index .lc-viewbtn {
		min-width: 42px;
		height: 38px;
	}
	.lc-index .lc-card-fav-btn {
		min-width: 38px;
		min-height: 38px;
	}
}


/* ============================================================
   v5.0.245: KAARTSYSTEEM, RASTER, WEERGAVEN EN KAART IN ÉÉN BLOK
   ------------------------------------------------------------
   Hiervoor stonden de kolommen, de fotohoogtes, de titelgroottes en
   de badges van dit onderdeel op vijf plekken in dit bestand, deels
   dubbel. Dat had twee zichtbare gevolgen:

   1) Het mobiele vangnet voor weergave 1 (@media max-width 700px,
      kaart naar één kolom) werd verderop overschreven door een blok
      zonder media-query. Op een telefoon stond de foto dus in een
      kolom van 248px naast ongeveer 120px tekst.
   2) De rasters schakelden op 600px, 700px en 1024px door elkaar.
      Tussen 601 en 700px viel weergave 4 door de mazen: daar bleven
      vier kolommen staan op een scherm van 650px.

   Vanaf hier geldt voor dit onderdeel één set grenzen:
      tot 700px      telefoon, altijd één kolom
      701 - 1024px   tablet, maximaal twee kolommen
      vanaf 1025px   desktop, de gekozen weergave

   Die 700 en 1024 zijn de grenzen die dit onderdeel al gebruikte; ze zijn
   niet verschoven, alleen samengebracht. Het verplaatsen van een grens is
   een zichtbare wijziging en die hoort niet in een opschoning thuis.

   En: de KAART kijkt niet meer naar de viewport maar naar zijn eigen
   breedte (@container). Een kaart van 300px ziet er dus hetzelfde uit
   of hij nu in twee kolommen op een tablet of in vier op een groot
   scherm staat. Dat is precies het verschil dat eerder twee identieke
   kaarten anders liet renderen.
   ============================================================ */

/* --- 1. het raster per weergave --- */
.lc-index .lc-card-grid.is-cols-1 { grid-template-columns: 1fr; gap: 14px; }
.lc-index .lc-card-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lc-index .lc-card-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* --- 2. de liggende kaart van weergave 1 (een keuze, geen breekpunt) --- */
.lc-index .lc-card-grid.is-cols-1 .lc-cruise-card {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	align-items: stretch;
}
.lc-index .lc-card-grid.is-cols-1 .lc-card-image {
	height: 100%;
	min-height: 168px;
	aspect-ratio: auto;
}

/* --- 3. de foto schaalt mee in plaats van een vaste hoogte ---
   Was height: 164px (en 148px op smal). Een vaste hoogte betekent dat
   dezelfde foto per weergave anders wordt afgesneden, en dat elke
   nieuwe weergave weer een eigen hoogte nodig heeft. */
.lc-index .lc-card-image {
	height: auto;
	aspect-ratio: 16 / 9;
}
.lc-index .lc-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 4. de kaart reageert op zijn eigen breedte --- */
.lc-index .lc-card-grid .lc-cruise-card {
	container-type: inline-size;
	container-name: lckaart;
}
@container lckaart (min-width: 700px) {
	.lc-card-title { font-size: 17px; }
}
@container lckaart (max-width: 699px) {
	.lc-card-title { font-size: 15px; }
}
@container lckaart (max-width: 330px) {
	.lc-card-title { font-size: 13.5px; }
	.lc-card-specs { gap: 2px; }
}
@supports not (container-type: inline-size) {
	.lc-index .lc-card-grid.is-cols-1 .lc-card-title { font-size: 17px; }
	.lc-index .lc-card-grid.is-cols-2 .lc-card-title { font-size: 15px; }
	.lc-index .lc-card-grid.is-cols-4 .lc-card-title { font-size: 13.5px; }
	.lc-index .lc-card-grid.is-cols-4 .lc-card-specs { gap: 2px; }
}
@media (max-width: 1024px) {
	/* Tablet: vier kolommen worden er twee. */
	.lc-index .lc-card-grid.is-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	/* Telefoon: elke weergave één kolom, en de liggende kaart van weergave 1
	   wordt staand, anders staat de foto in 248px naast 120px tekst. */
	.lc-index .lc-card-grid.is-cols-1,
	.lc-index .lc-card-grid.is-cols-2,
	.lc-index .lc-card-grid.is-cols-4 { grid-template-columns: 1fr; }
	.lc-index .lc-card-grid.is-cols-1 .lc-cruise-card { grid-template-columns: 1fr; }
	.lc-index .lc-card-grid.is-cols-1 .lc-card-image {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}



/* ============================================================
   v5.0.246: REISPERIODE ALS ÉÉN VELD
   ------------------------------------------------------------
   Twee losse datumvelden zijn één samengesteld veld geworden: van
   en tot in één omlijning, met een streepje ertussen. De fieldset
   houdt de twee invoervelden bij elkaar voor een schermlezer; de
   legend is de gezamenlijke vraag.
   ============================================================ */
/* Deze fieldset draagt óók de class .lct-date-range, en die staat op
   display:flex, in de zijbalk zelfs op display:grid met twee kolommen. Zonder
   deze reset werd de uitleg een tweede kolom naast de datums: één woord per
   regel, buiten de zijbalk hangend, met een veel te hoog leeg kader eronder
   omdat de flexrij op de hoogte van die tekst werd uitgerekt. */
.lct-date-range--single,
.lc-index #lc-filter-sidebar .lct-date-range--single {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}
.lct-date-legend {
	padding: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--lct-text-mid, #3D5773);
}
.lct-date-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--lct-border, #E4ECF3);
	border-radius: 10px;
	padding: 6px 10px;
	background: #fff;
}
.lct-date-inputs:focus-within {
	border-color: var(--lct-primary, #0F75BC);
	box-shadow: 0 0 0 3px rgba(15,117,188,0.12);
}
.lct-date-inputs input[type="date"] {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	padding: 4px 0;
	background: transparent;
	font: inherit;
	color: inherit;
}
.lct-date-inputs input[type="date"]:focus { outline: none; }
.lct-date-dash {
	flex: 0 0 auto;
	color: var(--lct-text-muted, #5F7288);
}
.lct-date-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--lct-text-muted, #5F7288);
}

/* --- het samengestelde veld in de smalle zijbalk --- */
.lc-index #lc-filter-sidebar .lct-date-legend { padding-bottom: 4px; }
.lc-index #lc-filter-sidebar .lct-date-inputs {
	gap: 5px;
	padding: 4px 7px;
	border-radius: 8px;
}
.lc-index #lc-filter-sidebar .lct-date-inputs input[type="date"] {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	font-size: 12px;
	padding: 4px 0;
	box-sizing: border-box;
}
.lc-index #lc-filter-sidebar .lct-date-dash { font-size: 12px; }
.lc-index #lc-filter-sidebar .lct-date-hint {
	line-height: 1.35;
	margin-top: 5px;
}

/* v5.0.248: uitleg in het lege-resultatenblok als de reisperiode oorzaak is. */
.lc-index .lc-empty-periode {
	max-width: 560px;
	margin: 0 auto 14px;
	padding: 12px 16px;
	background: var(--lct-bg-accent, #EAF6FC);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lct-text-mid, #3D5773);
}
.lc-index .lc-empty-periode a {
	display: inline-block;
	margin-left: 4px;
	font-weight: 700;
	color: var(--lct-primary-dark, #0a5a93);
}


/* ============================================================
   v5.0.250: INLINE STYLES UIT single-cruise.php
   ------------------------------------------------------------
   Opmaak stond op 27 plekken in het sjabloon zelf. Een inline
   stijl verslaat elke regel uit dit bestand, dus was hij alleen
   te overrulen met !important, zo zijn er 224 van die dingen
   ontstaan. Alles wat een vaste opmaak was, staat nu hier.

   Vier van de 27 deden trouwens niets: drie keer
   background:#fff op .lc-fullwidth-section (die kleur staat er
   al in) en één keer display:none op .lc-photo-modal (idem).

   Wat inline BLIJFT staan: de vier waarden die uit de database
   komen (een themakleur, een achtergrondfoto). Die horen daar,
   want ze verschillen per cruise.
   ============================================================ */

/* --- niet-boekbare afvaart --- */
.lc-not-bookable-badge {
	display: inline-block;
	background: #fef3c7;
	color: #92400e;
	font-weight: 700;
	font-size: 14px;
	border-radius: 8px;
	padding: 6px 12px;
}

/* --- fotomodal: open-stand als klasse --- */
.lc-photo-modal.is-open { display: flex; }
body.lc-scroll-lock { overflow: hidden; }

/* --- last-minute vertrekdatum op de homepage-kaart --- */
.lct-cruise-card-departure.is-lastminute {
	color: #dc2626;
	font-weight: 600;
}

/* --- lege-resultatenblok: bellen --- */
.lc-index .lc-empty-bel { margin-top: 14px; }
.lc-index .lc-empty-bel-btn {
	display: inline-block;
	background: #0F4C81;
	color: #fff;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 12px;
	text-decoration: none;
}
.lc-index .lc-empty-bel-note {
	color: #5b6b7b;
	font-size: .92rem;
}

/* --- niet-boekbare afvaart op een kaart --- */
.lc-index .lc-card-not-bookable {
	background: #fef3c7;
	border-radius: 8px;
	padding: 4px 10px;
}
.lc-index .lc-card-price-label--waarschuwing {
	color: #92400e;
	font-weight: 700;
}

/* --- herkomststempel (?lctv=1) --- */
.lc-versiestempel {
	margin: 0;
	padding: 10px 14px;
	background: var(--lct-navy, #0A2540);
	color: #fff;
	font: 600 12px/1.5 system-ui, sans-serif;
	word-break: break-all;
}
.lc-versiestempel-nr { color: var(--lct-gold, #F2B01E); }

#lc-cruise-flex {
		display: flex !important;
		flex-direction: row !important;
		gap: 48px !important;
		align-items: flex-start !important;
		overflow: visible !important;
		max-width: 1280px !important;
		margin: 0 auto !important;
		padding: 40px 32px !important;
		box-sizing: border-box !important;
	}
	#lc-cruise-flex > main {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	#lc-cruise-flex > aside {
		flex: 0 0 380px !important;
		width: 380px !important;
		max-width: 380px !important;
		align-self: flex-start !important;   /* blijft boven in de kolom staan */
		position: static !important;          /* scrollt mee met de pagina (niet vastgepind) */
		top: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
@media (max-width: 1100px) {
		#lc-cruise-flex > aside { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; }
		#lc-cruise-flex { gap: 32px !important; }
}
@media (max-width: 900px) {
		#lc-cruise-flex { flex-direction: column !important; padding: 24px 20px !important; }
		#lc-cruise-flex > aside { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; position: static !important; order: -1; }
}
			.lc-booking-dep-row.is-current{background:#e8f4fb;border-color:#46B5DD}
			.lc-booking-dep-row.is-cheapest.is-current{background:#e8f4fb;border-color:#46B5DD}
			@keyframes lcDepFlash{0%,100%{background:#e8f4fb}40%{background:#cfeafa}}
.lc-ct-btn.is-active{color:#0F4C81;border-bottom-color:#46B5DD}




/* ============================================================
   v5.0.255: DE FILTERKOLOM VOLGT ZIJN EIGEN BREEDTE
   ------------------------------------------------------------
   Hetzelfde filterblok is drie dingen: een brede balk boven de
   resultaten, een kolom van ongeveer 300px ernaast, en een
   uitklapbaar paneel op een telefoon. Dat verschil werd tot nu toe
   opgevangen met 114 regels die het ID #lc-filter-sidebar
   aanspreken, en een ID in een selector is bijna niet te
   overrulen. Vandaar dat elk nieuw veld twee keer moest worden
   vormgegeven, en dat het reisperiodeveld in de kolom omviel.

   Deze regels kijken naar de breedte van het blok zelf. Ze gelden
   dus in de kolom én in het telefoonpaneel, zonder dat er ergens
   een ID of een schermbreedte in staat. De maten uit 5.0.254 zijn
   hierheen verhuisd (niet gekopieerd, het oude blok is weg).

   Wat hier NIET in zit: de 114 bestaande regels samenvoegen. Bij
   28 selectors staat dezelfde regel op twee of drie plekken. Dat
   samenvoegen verandert de plek in de cascade, en of dat veilig is
   kan ik niet vanuit dit bestand bewijzen, daarvoor moet ik per
   element rekenen, dus met de gerenderde pagina ernaast.
   ============================================================ */
.lc-index .lc-search-grid-wrap {
	container-type: inline-size;
	container-name: lcfilter;
}
@container lcfilter (max-width: 460px) {
	/* Micro-kopjes: ondergrens 11px, en ze mogen afbreken in plaats van
	   afgekapt worden. Ze stonden in de kolom op 8,5 en 9px. */
	.lct-searchbar-label {
		font-size: 12px;
		letter-spacing: 0.2px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.25;
	}
	/* Alles wat je echt leest: 12px. */
	.lct-combo-item-multi,
	.lct-combo-item-label,
	.lct-combo-search-input,
	.lct-date-legend,
	.lct-date-hint,
	.lct-date-or,
	.lct-date-dash,
	.lct-date-inputs input[type="date"] {
		font-size: 12px;
	}
	.lct-combo-item-count { font-size: 12px; }
	/* De rijen worden hoger, dus mag het schuifvakje meer ruimte hebben. */
	.lct-combo-scroll { max-height: 150px; }
}
@supports not (container-type: inline-size) {
	
	.lc-index #lc-filter-sidebar .lct-combo-item-multi,
	.lc-index #lc-filter-sidebar .lct-combo-item-label,
	.lc-index #lc-filter-sidebar .lct-date-legend,
	.lc-index #lc-filter-sidebar .lct-date-hint {
	font-size: 12px;
}
}


/* ============================================================
   v5.0.259: 60 DODE DECLARATIES UIT DE FILTERKOLOM
   ------------------------------------------------------------
   Gemeten op de echte /cruises/-pagina met een controleur die de
   DOM opbouwt en per element uitrekent welke declaratie de cascade
   wint. Deze 60 declaraties wonnen bij geen van zeven
   viewportbreedtes op geen enkel van de 26.662 elementen in de
   kolom. Waaronder drie identieke kopieën van het order-blok dat
   de veldvolgorde regelt, alleen de laatste deed iets.

   Bewijs bij de oplevering: 74.434 element/breedte-combinaties op
   de hele pagina, voor en na, met een ONAFHANKELIJKE parser
   doorgerekend. Nul verschillen.

   Wat bewust is blijven staan: de 13 regels op .lc-filter-sidebar
   (de class, zonder hash). Die horen bij de plugin-versie van het
   overzicht die op de satellietsites draait; daar bestaat die
   markup nog wel.
   ============================================================ */


/* ============================================================
   v5.0.262: FILTER WORDT TOEGEPAST
   ------------------------------------------------------------
   Tussen je klik en het herladen zit een halve seconde. Zonder
   signaal lijkt het alsof er niets gebeurt, dus loopt er een dun
   balkje over de bovenkant van het filter. Het blokkeert niets:
   doorklikken in die halve seconde hoort te kunnen, dan wordt het
   één keer laden in plaats van drie.
   ============================================================ */
.lct-searchbar.is-bezig {
	position: relative;
}
.lct-searchbar.is-bezig::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--lct-primary, #0F75BC), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: lct-bezig 900ms linear infinite;
	z-index: 5;
}
@keyframes lct-bezig {
	0%   { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lct-searchbar.is-bezig::after { animation: none; background-size: 100% 100%; opacity: .5; }
}


/* ============================================================
   v5.0.263: SKELETONTEGELS TIJDENS HET BIJWERKEN
   ------------------------------------------------------------
   De groep neemt de rasterclasses van het echte raster over
   (is-cols-1/2/4), dus de tegels staan in dezelfde indeling als
   de kaarten die ze vervangen. Hoogte in de buurt van een echte
   kaart, zodat de pagina niet verspringt en je scrollpositie
   klopt.
   ============================================================ */
.lc-index .lc-skelet-melding {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lct-text-mid, #3D5773);
}
.lc-index .lc-skelet-kaart {
	background: #fff;
	border: 1px solid var(--lct-border, #E4ECF3);
	border-radius: 14px;
	padding: 0 0 16px;
	overflow: hidden;
}
.lc-index .lc-skelet-foto {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--lct-bg-accent, #EAF6FC);
}
.lc-index .lc-skelet-regel {
	height: 12px;
	margin: 14px 18px 0;
	border-radius: 6px;
	background: #eef2f7;
}
.lc-index .lc-skelet-regel--kort { width: 40%; height: 9px; }
.lc-index .lc-skelet-regel--half { width: 60%; }
.lc-index .lc-skelet-voet {
	height: 34px;
	margin: 18px 18px 0;
	border-radius: 10px;
	background: #e7eef6;
}

/* Eén rustige glans over de hele groep in plaats van per blokje. */
.lc-index .lc-skelet .lc-skelet-foto,
.lc-index .lc-skelet .lc-skelet-regel,
.lc-index .lc-skelet .lc-skelet-voet {
	background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
	background-size: 220px 100%;
	background-repeat: no-repeat;
	animation: lct-skelet-glans 1.2s linear infinite;
}
@keyframes lct-skelet-glans {
	0%   { background-position: -220px 0; }
	100% { background-position: calc(100% + 220px) 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lc-index .lc-skelet .lc-skelet-foto,
	.lc-index .lc-skelet .lc-skelet-regel,
	.lc-index .lc-skelet .lc-skelet-voet { animation: none; background-image: none; }
}

/* Bij één kolom is de kaart liggend; de tegel volgt dat. */
.lc-index .lc-skelet.is-cols-1 .lc-skelet-kaart {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
}
.lc-index .lc-skelet.is-cols-1 .lc-skelet-foto { aspect-ratio: auto; height: 100%; min-height: 168px; }
.lc-index .lc-skelet.is-cols-1 .lc-skelet-regel,
.lc-index .lc-skelet.is-cols-1 .lc-skelet-voet { grid-column: 2; }
@media (max-width: 700px) {
	.lc-index .lc-skelet.is-cols-1 .lc-skelet-kaart { grid-template-columns: 1fr; }
	.lc-index .lc-skelet.is-cols-1 .lc-skelet-foto { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
	.lc-index .lc-skelet.is-cols-1 .lc-skelet-regel,
	.lc-index .lc-skelet.is-cols-1 .lc-skelet-voet { grid-column: 1; }
}


/* ============================================================
   v5.0.264: OPRUIMING VAN 5.0.259 TERUGGEDRAAID
   ------------------------------------------------------------
   Die 60 "dode" declaraties waren niet allemaal dood. De meting
   keek naar een gerenderde pagina, en op die pagina stond het
   filterpaneel dicht, dus leek
   #lc-filter-sidebar.is-open { display: block } nergens te winnen.
   Gevolg: op mobiel opende het filter niet meer. Alle 60 staan
   terug.

   De methode is bijgesteld: regels met een toestandsclass
   (.is-*, .has-*, [aria-*=, [data-*=) of een pseudo-class worden
   niet meer gemeten, want die gelden per definitie niet op een
   pagina in ruststand. Van de 60 zou de nieuwe regel er 36 direct
   hebben tegengehouden; de rest is nu bewust niet aangeraakt.
   ============================================================ */


/* ============================================================
   v5.0.265: LET'S CRUISE-ILLUSTRATIE IN DE PRELOADER
   ------------------------------------------------------------
   Eigen SVG in de huisstijlkleuren, geen externe afbeelding: het
   is een handvol vormen en het hoort direct te staan zonder een
   extra verzoek naar de server.

   De golven schuiven met een periode van 120 eenheden, dus een
   verschuiving van precies -120 sluit naadloos rond. Het schip
   deint iets trager dan de golven, dat leest natuurlijker.
   ============================================================ */
.lc-index .lc-skelet-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 0 18px;
	text-align: center;
}
.lc-index .lc-skelet-ill {
	width: 240px;
	max-width: 70%;
	height: auto;
	overflow: visible;
}

/* --- kleuren uit de huisstijl --- */
.lc-ill-zon    { fill: var(--lct-gold, #F2B01E); opacity: .9; }
.lc-ill-wolk ellipse { fill: #EAF2F9; }
.lc-ill-romp   { fill: var(--lct-navy, #0A2540); }
.lc-ill-dek    { fill: #fff; stroke: var(--lct-navy, #0A2540); stroke-width: 2; }
.lc-ill-brug   { fill: #fff; stroke: var(--lct-navy, #0A2540); stroke-width: 2; }
.lc-ill-schoorsteen { fill: var(--lct-blue, #0F4C81); }
.lc-ill-vlag   { fill: var(--lct-gold, #F2B01E); }
.lc-ill-raam   { fill: var(--lct-cyan, #46B5DD); }
.lc-ill-golf   { fill: var(--lct-primary, #0F75BC); }
.lc-ill-golf--diep { fill: var(--lct-cyan, #46B5DD); opacity: .55; }

/* --- beweging --- */
.lc-ill-schip { animation: lct-ill-deinen 3.2s ease-in-out infinite; transform-origin: 107px 78px; }
.lc-ill-golf  { animation: lct-ill-golven 3s linear infinite; }
.lc-ill-golf--diep { animation: lct-ill-golven 4.4s linear infinite; }
.lc-ill-wolk  { animation: lct-ill-drijven 9s linear infinite; }

@keyframes lct-ill-deinen {
	0%, 100% { transform: translateY(0) rotate(-1.2deg); }
	50%      { transform: translateY(-3px) rotate(1.2deg); }
}
@keyframes lct-ill-golven {
	from { transform: translateX(0); }
	to   { transform: translateX(-120px); }
}
@keyframes lct-ill-drijven {
	from { transform: translateX(-14px); }
	to   { transform: translateX(24px); }
}

/* --- de wisselende tekst --- */
.lc-index .lc-skelet-tekst {
	margin: 6px 0 0;
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.2;
	color: var(--lct-navy, #0A2540);
	transition: opacity 180ms ease, transform 180ms ease;
}
.lc-index .lc-skelet-tekst.is-weg {
	opacity: 0;
	transform: translateY(4px);
}
.lc-index .lc-skelet-melding {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--lct-text-muted, #5F7288);
}
@media (prefers-reduced-motion: reduce) {
	.lc-ill-schip, .lc-ill-golf, .lc-ill-golf--diep, .lc-ill-wolk { animation: none; }
	.lc-index .lc-skelet-tekst { transition: none; }
}
@media (max-width: 700px) {
	.lc-index .lc-skelet-ill { max-width: 62%; }
	.lc-index .lc-skelet-tekst { font-size: 17px; }
}
@media (max-width: 1024px) {
	.lc-index #lc-filter-sidebar .lct-combo-apply {
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	/* De hoofdknop onderaan het paneel blijft de duidelijkste uitweg. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
		display: block;
		width: 100%;
	}
}


/* ============================================================
   v5.0.267: BIJGEHAALDE FILTERRESULTATEN
   ------------------------------------------------------------
   De havenlijsten bevatten alleen de drukste plus de aangevinkte;
   de rest komt van het zoek-endpoint. Deze regel onder de lijst
   vertelt hoeveel er nog zijn en wat er gebeurt tijdens het
   zoeken. Bijgehaalde rijen krijgen dezelfde opmaak als de rest,
   met een subtiele scheiding erboven zodat het duidelijk is dat
   dit zoekresultaten zijn.
   ============================================================ */
.lc-index .lct-combo-meer {
	margin: 6px 4px 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--lct-text-muted, #5F7288);
}
.lc-index .lct-combo-item-multi[data-lc-bijgehaald] {
	border-top: 1px dashed var(--lct-border, #E4ECF3);
}
.lc-index .lct-combo-item-multi[data-lc-bijgehaald] + .lct-combo-item-multi[data-lc-bijgehaald] {
	border-top-color: transparent;
}


/* ============================================================
   v5.0.269: ZOEKEN IN GEWONE TAAL
   ------------------------------------------------------------
   Staat boven het filterformulier, niet erin: het is een andere
   manier om bij dezelfde lijst te komen, geen extra filter. Na
   een zoekopdracht staan de gekozen filters gewoon als chips
   boven de resultaten.
   ============================================================ */
.lc-index .lc-slimzoek {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--lct-navy, #0A2540), var(--lct-blue, #0F4C81));
	border-radius: 14px;
	color: #fff;
}
.lc-index .lc-slimzoek-label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2px;
}
.lc-index .lc-slimzoek-rij {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.lc-index .lc-slimzoek-veld {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 10px;
	padding: 11px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--lct-text, #1A2A3E);
}
.lc-index .lc-slimzoek-veld::placeholder { color: #7d8ea3; }
.lc-index .lc-slimzoek-veld:focus {
	outline: 2px solid var(--lct-cyan, #46B5DD);
	outline-offset: 1px;
}
.lc-index .lc-slimzoek-btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	padding: 0 20px;
	background: var(--lct-gold, #F2B01E);
	color: var(--lct-navy, #0A2540);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.lc-index .lc-slimzoek-btn:disabled { opacity: .6; cursor: default; }
.lc-index .lc-slimzoek-uit:empty { display: none; }
.lc-index .lc-slimzoek-uit {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: #eaf6fc;
}
.lc-index .lc-slimzoek-hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255,255,255,.72);
}

/* Terwijl de schrijfhulp bezig is: een dun balkje over de bovenkant. */
.lc-index .lc-slimzoek.is-bezig { position: relative; overflow: hidden; }
.lc-index .lc-slimzoek.is-bezig::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--lct-cyan, #46B5DD), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: lct-bezig 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.lc-index .lc-slimzoek.is-bezig::after { animation: none; background-size: 100% 100%; opacity: .5; }
}
@media (max-width: 700px) {
	.lc-index .lc-slimzoek-rij { flex-direction: column; }
	.lc-index .lc-slimzoek-btn { padding: 11px 20px; }
}

/* ============================================================
   v5.0.274: PRIJSKAART LIEP OVER DE KNOPPEN
   ------------------------------------------------------------
   Op de cruisepagina lag de knoppenkaart over de prijstekst: je
   zag "LAST MINUTE · P.P." en "Andere vertrekdata vanaf" door de
   knoppen heen schemeren, en "Brochure downloaden" werd afgekapt.

   De oorzaak: .lc-gallery-side stond op aspect-ratio 4/5. De
   hoogte van die kolom volgde dus uit zijn BREEDTE, niet uit wat
   erin staat. Dat werkt zolang er precies één foto in zit, maar
   niet zodra er een prijsblok met vier regels én drie knoppen in
   komt, dan is de inhoud hoger dan de kolom en loopt hij eruit.

   Onder 768px was dit al gerepareerd met aspect-ratio: auto.
   Daarboven bleef de vaste verhouding staan, en juist daar is de
   kolom smal genoeg om te knellen.

   De verhouding is nu overal los: de kolom is zo hoog als zijn
   inhoud. De fotostrook eronder houdt zijn eigen verhouding, dus
   het beeld blijft hetzelfde als er niets in de weg zit.
   ============================================================ */
.is-cruise-single .lc-gallery-side {
	aspect-ratio: auto;
	min-height: 0;
	overflow: visible;
}
/* De knoppen moeten leesbaar blijven in plaats van af te kappen. */
.is-cruise-single .lc-gallery-action {
	white-space: normal;
	line-height: 1.3;
	text-align: center;
	min-height: 44px;
}
/* space-between duwde het prijsblok en de knoppen naar de randen van een
   hoogte die er niet was. Nu volgen ze elkaar gewoon op. */
.is-cruise-single .lc-gallery-actions {
	justify-content: flex-start;
	gap: 10px;
}
.is-cruise-single .lc-gallery-price-block {
	min-height: 0;
}
@media (max-width: 768px) and (pointer: coarse) {
	/* Zoekveld in een filterlijst: 34px -> 44px. */
	.lc-index .lct-combo-search-input {
		min-height: 44px;
		font-size: 16px;   /* onder 16px zoomt iOS in bij aantikken */
	}
	/* Keuzelijsten in de filterbalk. */
	.lc-index .lct-searchbar-select {
		min-height: 44px;
		font-size: 16px;
	}
	/* Pijltjes van de paginering: 38px -> 44px, en breed genoeg om te raken. */
	.lc-index .lc-pagination-arrow,
	.lc-index .lc-pagination-num {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
@media (max-width: 480px) {
	.lc-index .lc-card-spec-label,
	.lc-index .lc-viewswitch-label { font-size: 12px; }
}

/* ============================================================================
   AANVULLING van 6 augustus 2026 (theme 5.0.348)
   ----------------------------------------------------------------------------
   index.css is een uitgeklede versie van main.css voor /cruises/, gebouwd op
   1 augustus. Daarna is main.css flink veranderd, onder meer de MEDIA-BLOKKEN
   voor de paginering, en die wijzigingen zaten hier niet in. Gevolg: op een
   telefoon stond de paginering als kolom onder elkaar en bleef "Pagina 1 van
   1655" staan, terwijl die onder 600 px weg hoort.

   Het originele bouwscript kon niet draaien: dat heeft elementdiff.py en een
   HTML-momentopname van de pagina nodig, en die bestaan niet meer. Daarom is
   dit ALLEEN AANVULLEND, er is niets weggehaald, alleen toegevoegd wat in
   main.css staat, hier ontbrak, en waarvan de klasse voorkomt in de bestanden
   die deze pagina opbouwen. Dat neemt mogelijk iets te veel mee; het kan nooit
   iets wegnemen dat wel werkte.

   ONDERHOUD: zodra elementdiff.py er weer is, hoort index.css opnieuw volledig
   gegenereerd te worden. Deze aanvulling is een reparatie, geen nieuwe bouw.
   ============================================================================ */

/* ========================================
   Let's Cruise theme, main.css v0.2.0
   Design: Fris & Maritiem
   Brand: navy #0A2540 + ocean #0F75BC + sky #27A9E1
   Font: Plus Jakarta Sans + Instrument Serif (italic)
   ======================================== */

:root {
	--lct-primary: #0F75BC;
	--lct-primary-dark: #0a5a93;
	--lct-navy: #0A2540;
	--lct-navy-soft: #1A2A3E;
	--lct-sky: #27A9E1;
	--lct-highlight: #7FD3F1;
	--lct-text: #1A2A3E;
	--lct-text-mid: #3D5773;
	/* v5.0.243: was #5F7288 = 4,16:1 op wit, onder de WCAG AA-eis van 4,5
	   voor normale tekst. #5F7288 haalt 4,94:1 en blijft visueel grijs. */
	--lct-text-muted: #5F7288;
	--lct-bg: #ffffff;
	--lct-bg-subtle: #F6FAFD;
	--lct-bg-accent: #EAF6FC;
	--lct-border: #E4ECF3;
	--lct-success: #36c97b;

	--lct-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--lct-font-italic: 'Instrument Serif', Georgia, serif;

	--lct-container: 1280px;
	--lct-radius-sm: 10px;
	--lct-radius-md: 14px;
	--lct-radius-lg: 18px;
	--lct-radius-xl: 20px;
	--lct-radius-2xl: 28px;
	--lct-radius-pill: 999px;

	--lct-shadow-sm: 0 1px 2px rgba(10,37,64,0.04), 0 8px 24px rgba(10,37,64,0.06);
	--lct-shadow-md: 0 1px 2px rgba(10,37,64,0.04), 0 12px 32px rgba(10,37,64,0.06);
	--lct-shadow-lg: 0 4px 14px rgba(10,37,64,0.06), 0 24px 60px rgba(10,37,64,0.12);
	--lct-shadow-cta: 0 8px 24px rgba(15,117,188,0.3);

	/* v0.7.29: Section padding tokens, zorgen voor consistent rythme
	   - sm: kleine cards / CTA blokken
	   - md: standaard content sectie (default)
	   - lg: hero / belangrijke sectie
	   - xl: full-bleed showcase / onboard / status-match */
	--lct-section-py-sm: 48px;
	--lct-section-py-md: 60px;
	--lct-section-py-lg: 80px;
	--lct-section-py-xl: 100px;
	--lct-section-px: 24px;
	--lct-section-px-mobile: 16px;

	--lct-transition: 0.2s ease;
}
@media (min-width: 1024px) { .lct-container { padding: 0 80px; } }
@media (max-width: 900px) { .lct-hide-mobile { display: none !important; } }
/**
 * v5.0.336: tussen 901 en 1180 px het woord "Zoeken" weglaten.
 *
 * Dat is precies de iPad-in-liggende-stand-zone, waar de balk 33 px te breed was. Het icoon
 * blijft staan en dat is universeel begrepen; de 96 px die het woord kost, is daar het verschil
 * tussen passen en afkappen. Boven 1180 px komt het woord terug, want daar is ruimte en leest
 * het rustiger.
 */
@media (min-width: 901px) and (max-width: 1180px) {
	.lct-search-btn .lct-hide-mobile { display: none !important; }
}
@media (min-width: 1024px) { .lct-topbar-inner { padding: 0 80px; } }
@media (max-width: 700px) { .lct-topbar { display: none; } }
@media (min-width: 1024px) { .lct-topbar-reisline { padding: 7px 80px; } }
/* Tijdens de reis-modus blijft de topbar (incl. reis-rij) ook op mobiel zichtbaar. */
@media (max-width: 700px) {
	.lct-topbar-reis { display: block !important; }
	.lct-topbar-reisline { flex-wrap: wrap; gap: 6px 9px; padding: 7px 16px; font-size: 12.5px; }
	.lct-topbar-reisline .lct-reis-info { flex-basis: 100%; text-align: center; }
}
@media (min-width: 1024px) { .lct-header-inner { padding: 12px 80px; } }
/* === DESKTOP NAV === */
/**
 * v5.0.336: min-width 0, zodat de balk krimpt in plaats van overloopt.
 *
 * Een flex-item met inhoud die niet past, groeit standaard door zijn vak heen en duwt de rest
 * eruit, dan verdwijnt de Cruise Buddy-knop of het accountrondje van het scherm af, en dat
 * merk je pas als iemand het mist. Met min-width:0 krimpt het menu zelf; de tussenruimte
 * hierboven buigt al mee, dus in de praktijk gaat er niets afkappen.
 */
.lct-nav-desktop { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
/**
 * v5.0.336: het hoofdmenu past nu ook op een iPad.
 *
 * Nagerekend: zeven items met 32 px ertussen, plus het logo, "Zoeken", Cruise Buddy en het
 * accountrondje kwamen samen op ongeveer 1.227 px. Op een iPad in liggende stand (1.194 px) is
 * dat 33 px te veel, en dan drukt de balk iets weg of kapt het af, precies wat je zelf niet
 * kon nakijken.
 *
 * Daarom een MEEBUIGENDE tussenruimte in plaats van een vast getal: clamp geeft 14 px op een
 * smal scherm en loopt op naar 32 op een brede desktop. Zo hoeft er geen reeks breekpunten te
 * komen die elk hun eigen scherm goedmaken en de rest vergeten.
 */
.lct-menu { display: flex; gap: clamp(14px, 1.8vw, 32px); align-items: center; }
.lct-menu > li > a {
	color: var(--lct-text-mid);
	/* v5.0.336: schaalt licht mee, zodat zeven items op een iPad niet gaan afkappen. */
	font-size: clamp(13.5px, 1.05vw, 14.5px);
	font-weight: 600;
	transition: color var(--lct-transition);
	/**
	 * Aanraakvlak van 44 px hoog, de maat die Apple aanhoudt en die je met een vinger nog
	 * raakt. Zonder deze padding was het aanraakvlak alleen de tekst zelf, ongeveer 20 px, en
	 * dat is op een iPad wél te klein terwijl het met een muis prima werkt.
	 */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	white-space: nowrap;
}
/**
 * v5.0.336: submenu's waren op een iPad onbereikbaar.
 *
 * Deze regel opende een submenu bij hover. Op een aanraakscherm bestaat hover niet: de eerste
 * tik volgt de link en het submenu is dus nooit te openen. Alles wat als submenu-item in het
 * menu staat, was op een iPad onvindbaar, zonder dat er iets kapot lijkt.
 *
 * Nu: hover alleen op apparaten die het echt hebben, plus focus-within (voor toetsenbord) en
 * een klasse die het script zet bij een tik. Zo werkt het met muis, toetsenbord én vinger,
 * elk op de manier die daar past.
 */
@media (hover: hover) and (pointer: fine) {
	.lct-menu li:hover > .sub-menu { display: block; }
}
.lct-menu li:focus-within > .sub-menu,
.lct-menu li.lct-sub-open > .sub-menu { display: block; }
@media (max-width: 900px) { .lct-nav-desktop { display: none; } .lct-burger { display: flex; } }
/* === HERO === */
.lct-hero {
	position: relative;
	/* v5.0.315: 30% lager (was 720px). Een hero van 720 px duwt op een laptop alles
	   onder de vouw; met 504 px zie je de zoekbalk en het aanbod meteen.

	   v5.0.319: MIN-height in plaats van height. Met een vaste hoogte plus overflow:hidden
	   werd alles wat niet paste gewoon afgesneden, op mobiel verdwenen daardoor de
	   tagline en de knoppen onder de rand. Nu is 504 px de ondergrens en groeit het vlak
	   mee als de inhoud meer ruimte nodig heeft. */
	min-height: 504px;
	overflow: hidden;
	/* v4.2.43: fallback gradient, alleen zichtbaar als de hero-img faalt te laden.
	   Als de img wel laadt overlapt 'ie deze gradient volledig (object-fit: cover). */
	background: linear-gradient(135deg, #1e3a5f 0%, #0F75BC 50%, #2563eb 100%);
}
/* v5.0.315: onderkant van de film naar boven gedrukt.
   Bij een lagere hero snijdt object-fit: cover standaard vanuit het midden, waardoor de
   horizon en de lucht wegvallen en je vooral water overhoudt. Met een uitsnede op 70%
   schuift de zichtbare band naar beneden in het beeld: de onderrand van de film komt
   omhoog en de interessante helft blijft staan. */
.lct-hero-image, .lct-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 70%;
}
@media (min-width: 1024px) { .lct-hero-content { padding: 0 80px; } }
@media (max-width: 700px) {
	/* v5.0.319: op een telefoon bepaalt de INHOUD de hoogte.
	   De tekst stond absoluut gepositioneerd in een vlak met een vaste hoogte; alles wat
	   niet paste werd weggesneden, precies de tagline en de knoppen, het enige waarvoor
	   die hero er staat. Nu loopt de inhoud gewoon mee in de pagina en groeit het vlak
	   eromheen. De ondergrens van 420 px blijft, zodat de hero niet inzakt tot een strookje
	   wanneer er weinig tekst is. */
	.lct-hero { min-height: 420px; height: auto; display: flex; align-items: center; }
	.lct-hero-content { position: relative; top: auto; width: 100%; padding-top: 34px; padding-bottom: 38px; }
	.lct-hero h1 { font-size: 34px; letter-spacing: -1px; line-height: 1.12; }
	.lct-hero p { font-size: 15.5px; }
	/* v5.0.320: de knoppen onder de zoekbalk uit houden.
	   De zoekbalk ligt met margin-top:-76px OVER de onderkant van de hero. Zolang de hero
	   een vaste hoogte had, viel dat in leeg beeld. Nu de hero met de inhoud meegroeit,
	   eindigt hij precies waar de knoppen staan, en dan legt die kaart zich eroverheen.
	   Vandaar 86 px lucht onderaan: de overlap plus een marge. */
	.lct-hero-content { padding-bottom: 86px; }
	.lct-hero-actions { margin-top: 22px; gap: 10px; flex-direction: column; align-items: stretch; }
	.lct-hero-actions .lct-btn-primary,
	.lct-hero-actions .lct-btn-outline { width: 100%; text-align: center; justify-content: center; }
}
@media (min-width: 1024px) { .lct-searchbar-wrap { padding: 0 80px; } }
/* v5.0.200: mobiel, logostrip en tabs elk één horizontaal swipebare regel. */
@media (max-width: 768px) {
	.lct-searchbar-brands { flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.lct-searchbar-brands::-webkit-scrollbar { display: none; }
	.lct-searchbar-brands a { flex: none; }
	.lct-searchbar-brands img { max-height: 20px; max-width: 76px; }
	.lct-searchbar-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
	.lct-searchbar-tabs::-webkit-scrollbar { display: none; }
	.lct-searchbar-tab { flex: none; white-space: nowrap; }
	/* v5.0.447: zie main.css, zonder deze selector krimpen de tabs in plaats van te schuiven. */
	.lct-searchbar-tabs > .lct-searchbar-tab { flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip; padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 560px) { .lc-index-company-card-txt small { white-space: normal; } }
@media (min-width: 1024px) { .lct-usp { padding: 0 80px; } }
@media (max-width: 900px) { .lct-usp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .lct-usp { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .lct-cruise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lct-cruise-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lct-destinations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lct-destinations { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
	.lct-danny-block { grid-template-columns: 1fr; }
	.lct-danny-text { padding: 40px 24px; }
	.lct-danny-text h2 { font-size: 32px; }
	.lct-danny-image-wrap { min-height: 360px; }
}
@media (max-width: 1100px) { .lct-partners { grid-template-columns: repeat(5, 1fr); gap: 22px 14px; } }
@media (max-width: 800px)  { .lct-partners { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; } }
@media (max-width: 480px)  { .lct-partners { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; } }
@media (max-width: 480px) {
	.lct-partner-logo img { max-height: 40px; }
	.lct-partner-logo { padding: 6px 2px; }
}
/* v0.7.63: alleen op echte hover-devices (desktop), op mobile/touch wegblijven */
@media (hover: hover) and (pointer: fine) {
	.lct-partner-logo:hover {
		transform: translateY(-2px);
		color: var(--lct-navy, #0F172A);
	}
	.lct-partner-logo:hover img {
		opacity: 1;
		filter: none;
	}
	.lct-partner-logo:hover .lct-partner-name { opacity: 1; transform: translateY(0); }
}
/* Touch-devices: blijf het label volledig verbergen, geen hover-state plakt */
@media (hover: none), (pointer: coarse) {
	.lct-partner-logo .lct-partner-name {
		display: none;
	}
}
@media (max-width: 900px) { .lct-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lct-posts-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
	.lct-newsletter-cta { grid-template-columns: 1fr; padding: 40px 28px; gap: 30px; }
	.lct-newsletter-cta h2 { font-size: 28px; }
}
@media (max-width: 700px) { .lct-page-hero h1 { font-size: 36px; letter-spacing: -1px; } }
@media (min-width: 1024px) { .lct-footer-inner { padding: 0 80px; } }
@media (max-width: 900px) { .lct-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .lct-footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
	.lc-quote-inner { grid-template-columns: 1fr; }
	.lc-quote-inner > div:first-child { padding: 32px 24px 12px; }
	.lc-quote-inner > form { padding: 24px; }
	.lc-quote h2 { font-size: 24px; }
	.lc-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.letscruise-cruise .lc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; }
	.letscruise-cruise .lc-gallery-tile:first-child { grid-row: span 1; grid-column: span 2; }
	.letscruise-cruise .lc-gallery-tile:nth-child(n+4) { display: none; }
}
@media (max-width: 900px) {
	.letscruise-cruise .lc-info-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) { .letscruise-cruise .lc-inclusief-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .letscruise-cruise .lc-cabin-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .letscruise-cruise .lc-reviews-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .letscruise-cruise .lc-similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .letscruise-cruise .lc-similar-grid { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .lc-index .lc-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .lc-index .lc-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lc-index .lc-card-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 1100px) {
	.letscruise-cruise .lc-similar-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.letscruise-cruise .lc-similar-grid { grid-template-columns: 1fr !important; }
}
/* Tussenliggende viewport: kleinere sidebar */
@media (max-width: 1100px) {
	.letscruise-cruise .lc-detail-layout > .lc-container > .lc-detail-grid {
		grid-template-columns: minmax(0, 1fr) 320px !important;
		gap: 32px !important;
	}
	.letscruise-cruise .lc-detail-grid > .lc-detail-sidebar { max-width: 320px !important; }
}
/* Echt mobile: 1-kolom, sidebar BOVEN main */
@media (max-width: 768px) {
	.letscruise-cruise .lc-detail-layout > .lc-container > .lc-detail-grid {
		grid-template-columns: 1fr !important;
	}
	.letscruise-cruise .lc-detail-grid > .lc-detail-sidebar {
		max-width: 100% !important;
		position: static !important;
		order: -1; /* aside boven main */
	}
}
@media (max-width: 768px) {
	.lc-gallery-grid { grid-template-columns: 1fr; }
	.lc-gallery-small-grid { grid-template-rows: auto; }
}
@media (max-width: 768px) {
	.lc-infobar { grid-template-columns: 1fr 1fr; }
	.lc-infobar-cell { border-right: 0; border-bottom: 1px solid var(--lct-border); padding-bottom: 8px; }
}
@media (max-width: 600px) {
	.lc-day-card { grid-template-columns: 1fr; }
	.lc-day-marker { padding-top: 0; }
	.lc-itinerary::before { display: none; }
}
@media (max-width: 600px) { .lc-inclusief-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lct-acties-hero-stats { gap: 24px; flex-wrap: wrap; } }
@media (max-width: 900px) { .lct-actie-featured { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .lct-actie-featured-body { padding: 28px 28px; } }
@media (max-width: 768px) {
	.lct-company-hero { height: 480px; }
	.lct-company-hero-title { font-size: 44px; }
	.lct-company-hero-lead { font-size: 15px; }
}
/* === CRUISES section (uses .lct-similar-card from main.css) === */
.lct-company-cruises { background: #fff; padding: 60px 0; }
/* === KLASSEN section (uses .lc-classes-grid from main.css) === */
.lct-company-classes { background: var(--lct-bg-subtle); padding: 60px 0; }
@media (max-width: 980px) { .lct-offerte-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) {
	.lct-choice-grid,
	.lct-choice-grid--5col,
	.lct-choice-grid--6col,
	.lct-choice-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .lct-form-row, .lct-form-row--3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lc-index .lc-filter-toggle { display: inline-flex; } .lc-index .lc-search-row { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lct-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lct-blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.lc-ship-company-logo { padding: 14px 18px; }
	.lc-ship-company-logo img { max-height: 44px; }
}
@media (max-width: 900px) { .lct-acties-hero-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 768px) {
	.lct-region-hero { height: 480px; }
	.lct-region-hero-h1 { font-size: 48px; }
}
@media (max-width: 768px) {
	.lct-rederij-hero-h1 { font-size: 44px; }
	.lct-rederij-hero-logo img { height: 36px; }
}
/* Mobile padding */
@media (max-width: 768px) {
	.lct-region-section-inner,
	.lct-region-about-inner,
	.lct-region-season-inner { padding: 0 20px; }
}
@media (max-width: 1280px) { .lct-cruise-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .lct-cruise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lct-cruise-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .lct-matcher-h1 { font-size: 38px; } }
@media (max-width: 640px) { .lct-matcher-options { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
	.lct-matcher-result { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; }
	.lct-matcher-result-rank { grid-row: 1 / span 2; font-size: 16px; }
	.lct-matcher-result-media { grid-column: 2; aspect-ratio: 16/9; }
	.lct-matcher-result-body { grid-column: 2; padding: 14px 16px; }
	.lct-matcher-match-badge { width: 54px; height: 54px; top: 8px; right: 8px; }
	.lct-matcher-match-percent { font-size: 15px; }
	.lct-matcher-match-label { font-size: 12px; }
}
/* === CRUISE STORY BADGE op single-cruise.php === */
.lct-cruise-story-banner-section { padding: 12px 0; }
@media (max-width: 640px) {
	.lct-cruise-story-banner { grid-template-columns: 1fr; gap: 8px; text-align: center; }
	.lct-cruise-story-banner-cta { margin-top: 4px; }
}
@media (max-width: 768px) {
	.lc-departure-row {
		grid-template-columns: 1fr;
		gap: 10px;
		text-align: left;
	}
	.lc-departure-row-price { text-align: left; }
	.lc-departure-row-cta { width: 100%; }
}
@media (max-width: 1100px) { .lct-stories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lct-stories-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .lct-contact-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .lct-contact-form-card { padding: 28px 22px; } }
@media (max-width: 640px) { .lct-row { flex-direction: column; gap: 14px; } }
@media (max-width: 1024px) { .lct-contact-sidebar { position: static; } }
@media (max-width: 900px) { .lct-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lct-services-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.lc-quick-tabs { gap: 6px; }
	.lc-quick-tab { padding: 7px 12px; font-size: 12.5px; }
}
@media (max-width: 900px) {
	.lct-acties-hero-grid { grid-template-columns: 1fr; }
	.lct-acties-countdown { margin-top: 16px; }
}
@media (max-width: 840px) {
	.lct-featured-card { grid-template-columns: 1fr; }
	.lct-featured-body { padding: 24px; }
	.lct-featured-title { font-size: 22px; }
	.lct-featured-foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.lct-featured-cta { text-align: center; }
}
@media (max-width: 700px) {
	.lct-acties-trust { padding: 56px 0; }
	.lct-acties-trust-header h2 { font-size: 26px; }
}
@media (max-width: 740px) {
	.lct-rederij-keyfacts-inner { grid-template-columns: repeat(2, 1fr); }
	.lct-rederij-keyfact { border-right: none; border-bottom: 1px solid var(--lct-border); padding-bottom: 18px; }
}
@media (max-width: 600px) {
	.lct-rederij-statusmatch-title { font-size: 24px; }
	.lct-rederij-statusmatch { padding: 56px 24px; }
}
/* Mobile: alle submenus altijd zichtbaar */
@media (max-width: 880px) {
	.lct-menu .lct-submenu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.lct-menu .lct-menu-caret { display: none; }
}
/* Mobile: megamenu wordt gewoon ingesprongen lijst */
@media (max-width: 880px) {
	.lct-menu .lct-megamenu {
		position: static;
		display: block;
		min-width: 0;
		max-width: 100%;
		grid-template-columns: 1fr;
		padding: 0 0 0 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
		transform: none;
		left: auto;
		visibility: visible;
		opacity: 1;
	}
}
@media (max-width: 760px) {
	.lct-region-ports-grid { grid-template-columns: 1fr; }
	.lct-region-cta-matcher { padding: 60px 22px; }
}
@media (max-width: 1280px) {
	.lct-blog-body-grid.has-right-aside {
		grid-template-columns: 180px minmax(0, 1fr) 300px;
		gap: 30px;
	}
}
@media (max-width: 880px) {
	.lct-blog-body-grid,
	.lct-blog-body-grid.has-right-aside { grid-template-columns: 1fr; gap: 30px; }
	.lct-blog-toc-sticky { position: static; }
	.lct-blog-right-aside-sticky { position: static; }
	.lct-blog-side-rail-sticky { position: static; }
}
@media (max-width: 760px) {
	.lct-blog-featured-card { grid-template-columns: 1fr; }
	.lct-blog-featured-body { padding: 26px 24px; }
}
@media (max-width: 760px) {
	.lct-region-stats-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
	.lct-region-stat {
		border-left: 0;
		border-top: 1px solid var(--lct-border, #E4ECF3);
		padding-top: 14px;
	}
	.lct-region-stat:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
@media (max-width: 880px) {
	.lct-rederij-ratings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.lct-blog-comment-list .children { margin-left: 16px; padding-left: 12px; }
	.lct-blog-comment-body { gap: 10px; }
	.lct-blog-comment-content { padding: 12px 14px; }
}
@media (max-width: 900px) {
	.lct-region-season-grid { grid-template-columns: 1fr; gap: 28px; }
	.lct-region-season-intro { position: static; }
	.lct-region-season-row {
		grid-template-columns: 70px 1fr;
		grid-template-rows: auto auto;
		row-gap: 8px;
	}
	.lct-region-season-row-desc {
		grid-column: 1 / -1;
		font-size: 13px;
	}
}
@media (max-width: 900px) {
	.lct-rederij-keyfacts-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.lct-rederij-keyfact { border-left: 0; padding: 0; }
}
@media (max-width: 900px) {
	.lct-rederij-usps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.lct-rederij-usps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) { .lct-rederij-ships-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .lct-rederij-ships-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .lct-rederij-ships-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
	.lct-rederij-ships-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lct-rederij-ships-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .lct-rederij-onboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .lct-rederij-cruises-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lct-rederij-cruises-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .lct-rederij-reviews-grid { grid-template-columns: 1fr; } }
/* Alleen mobile */
@media (min-width: 901px) {
	.lct-cruise-sticky-bar { display: none; }
}
/* === RESPONSIVE === */
@media (max-width: 1100px) {
	.lct-searchbar-fields--two-rows {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.lct-searchbar-fields--two-rows > .lct-searchbar-field {
		border-right: 1px solid var(--lct-border);
		border-bottom: 1px solid var(--lct-border);
	}
	.lct-searchbar-fields--two-rows > .lct-searchbar-field:nth-of-type(2n) { border-right: 0; }
	.lct-searchbar-submit--span {
		grid-column: 1 / -1;
		grid-row: auto;
		border-left: 0;
		border-top: 1px solid var(--lct-border);
		flex-direction: row;
		justify-content: center;
	}
	.lct-searchbar-submit--span .lct-btn-primary { flex: 1; max-width: 320px; }
}
@media (max-width: 720px) {
	.lct-rb-content { grid-template-columns: 1fr; gap: 18px; }
	.lct-rb-header { flex-direction: column; align-items: stretch; text-align: center; }
	.lct-rb-header-score { align-self: center; }
}
@media (max-width: 600px) {
	.lc-favorites-grid { grid-template-columns: 1fr; }
	.lc-blog-links-grid { grid-template-columns: 1fr; }
	.lc-card-fav-btn { width: 34px; height: 34px; }
}
@media (max-width: 600px) {
	.lc-sort-row { gap: 8px; }
	.lc-sort-fav-link { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 880px) {
	.lct-blog-right-aside-sticky { gap: 18px; }
	.lct-blog-aside-author-cover { height: 50px; }
	.lct-blog-aside-author-avatar { width: 80px; height: 80px; }
	.lct-blog-aside-author-avatar-wrap { margin-top: -40px; }
}
/* Vanaf 1200px: nog iets compacter, pijl en icoon weg op smaller */
@media (max-width: 1200px) {
	.lct-header-actions .lct-btn-primary { padding: 8px 12px; font-size: 12.5px; gap: 5px; }
}
@media (max-width: 560px) {
	.lc-portal-hero { height: 200px; margin-bottom: -120px; }
	.lc-portal-login { padding: 32px 24px 24px; }
	.lc-portal-login h1 { font-size: 24px; }
	.lc-portal-trust-bar { gap: 12px; font-size: 12px; }
}
/* iOS mode: stack on small screens, geen install knop, alleen instructie */
@media (max-width: 420px) {
	.lct-pwa-banner {
		padding: 12px 14px;
		gap: 10px;
	}
	.lct-pwa-icon {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}
	.lct-pwa-text strong {
		font-size: 13px;
	}
	.lct-pwa-text span {
		font-size: 12px;
	}
	.lct-pwa-install {
		padding: 8px 12px;
		font-size: 12px;
	}
}
@media (max-width: 1100px) {
	.lct-home-deals-4col .lc-deals-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 860px) {
	.lct-home-deals-4col .lc-deals-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.lc-deals-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.lc-deal-badge {
		font-size: 13px;
		padding: 4px 9px;
	}
	.lc-deal-title {
		font-size: 14px;
	}
	.lc-deal-new {
		font-size: 18px;
	}
	.lc-deal-body {
		padding: 12px 13px 14px;
	}
}
@media (max-width: 700px) {
	.lct-shiptype-tools {
		margin-left: 0;
		width: 100%;
		padding-top: 8px;
		border-top: 1px solid var(--lct-border, #e2e8f0);
		margin-top: 4px;
	}
}
/* Reduce motion: bij prefers-reduced-motion → video pauzeren (browser doet dit deels automatisch
   maar we forceren voor zekerheid via een fallback styling) */
@media (prefers-reduced-motion: reduce) {
	.lct-page-hero-video { display: none; }
	.lct-has-video-bg::before {
		/* fallback gradient achtergrond als video niet draait */
		content: '';
		position: absolute; inset: 0;
		background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
		z-index: 0;
	}
}
@media (max-width: 1280px) {
	.lct-cruise-grid-5col { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.lct-cruise-grid-5col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.lct-cruise-grid-5col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.lct-cruise-grid-5col { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) { .lct-cruise-grid-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lct-cruise-grid-3col { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .lct-cruise-grid-4col { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .lct-cruise-grid-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .lct-cruise-grid-4col { grid-template-columns: 1fr; } }
/* Op zeer smalle tegels: knop onder de prijs op eigen regel */
@media (max-width: 1100px) {
	.lct-card-price-row { flex-wrap: wrap; }
	.lct-card-cta { margin-top: 4px; }
}
/* Klant-reacties sectie onder Danny-blok */
@media (max-width: 1000px) {
}
@media (max-width: 640px) {
}
@media (max-width: 900px) {
	.lc-blog-links-grid--fixed { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.lc-blog-links-grid--fixed { grid-template-columns: 1fr !important; }
}
/* Globaal: voorkom horizontale scroll-bug op mobile */
@media (max-width: 768px) {
	html, body { overflow-x: clip; max-width: 100vw; }
	.lc-day-body { padding: 14px 16px; }
	.lc-day-media { aspect-ratio: 16/9; }
}
/* =====================================================================
   VAARGEBIED, single-cruise sectie tussen visum en schip (v4.2.29)
   Toont region.description (intro) + grid van 10 beheerd foto's uit de wizard.
   ===================================================================== */
.lc-vaargebied-section { padding: 28px 0; }
@media (max-width: 1024px) { .lc-vaargebied-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .lc-vaargebied-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
@media (max-width: 768px) {
	.lc-ship-header-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
	.lc-popup-card { padding: 24px 20px 18px; max-height: 95vh; }
	.lc-popup-card h3 { font-size: 19px; }
}
/* Mobile */
@media (max-width: 768px) {
	.lc-gallery-side {
		aspect-ratio: auto;      /* op mobile geen vaste verhouding, natuurlijke stack */
		overflow: visible;
	}
	.lc-gallery-action {
		font-size: 13px;
		padding: 11px 14px;
	}
	.lc-gallery-action--call { padding: 11px 12px; }
}
@media (max-width: 768px) {
	.lc-infobar.lc-infobar--4cols { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:760px){.lct-actie-promo{flex-direction:column}.lct-actie-promo-media{flex-basis:auto;max-width:100%;max-height:180px}}
@media(max-width:600px){.lct-faq-title{font-size:21px}.lct-faq-q{font-size:15px}}
@media(max-width:600px){.lct-landing-intro{margin:20px 12px 4px}.lct-landing-title{font-size:19px}}
@media(max-width:600px){.lc-fav-alertbox-inner{flex-direction:column;gap:10px}.lc-fav-alert-submit{width:100%}}
@media(max-width:768px){.lct-cb{bottom:16px;left:14px}.lct-cb-fab{gap:0;padding:12px;width:50px;height:50px;justify-content:center}.lct-cb-fab-txt{display:none}.lct-cb-fab-ico{font-size:22px}.lct-cb-panel{width:260px}}
@media(prefers-reduced-motion:reduce){.lct-cruise-story-card{transition:none}.lct-cruise-story-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media(prefers-reduced-motion:reduce){.lct-shipcard{transition:none}}
@media(max-width:560px){.lct-buddy-coach{gap:10px}.lct-buddy-fig{width:76px;flex-basis:76px}.lct-buddy-bubble{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.lct-buddy-fig,.lct-buddy-coach.is-sailing .lct-buddy-fig,.lct-bd-confetti circle,.lct-buddy-coach.is-sailing .lct-bd-wheel,.lct-buddy-bubble.pop{animation:none}}
@media(max-width:768px){
	.lct-cb-fab{padding:7px;width:60px;height:60px;justify-content:center;gap:0}
	.lct-cb-fab-lines{display:none}
	.lct-cb-fab-ico .lct-buddy-face{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.lct-cb:not(.is-open) .lct-cb-fab{animation:none}}
@media(max-width:860px){.lct-matcher-hero-fig{display:none}.lct-matcher-hero-copy{padding-bottom:26px;text-align:center}.lct-matcher-hero .lct-matcher-lead{margin:0 auto}.lct-matcher-hero .lct-breadcrumb{justify-content:center}.lct-matcher-hero .lct-beta-row{justify-content:center}}
@media(min-width:981px){
	.lct-matcher-wizard-inner{display:grid;grid-template-columns:264px minmax(0,1fr);gap:44px;align-items:start}
	.lct-matcher-wizard-inner > .lct-buddy-coach{grid-column:1;position:sticky;top:96px;flex-direction:column;align-items:center;gap:12px;max-width:none;margin:0}
	.lct-matcher-wizard-inner > .lct-matcher-main{grid-column:2;min-width:0}
	.lct-buddy-coach .lct-buddy-fig{width:158px;flex-basis:auto}
	.lct-buddy-coach .lct-buddy-bubble{border-radius:4px 16px 16px 16px;width:100%}
	.lct-buddy-coach .lct-buddy-bubble::before{left:22px;bottom:auto;top:-9px;border:9px solid transparent;border-bottom-color:#DCE8F2;border-top:0}
	.lct-buddy-coach .lct-buddy-bubble::after{left:24px;bottom:auto;top:-7px;border:8px solid transparent;border-bottom-color:#fff;border-top:0}
}
@media(max-width:640px){.lct-matcher-options{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.lct-matcher-options{grid-template-columns:1fr}}
@media(max-width:980px){.lct-buddy-coach{margin-bottom:18px}}
@media (max-width:600px){.lc-index .lc-pagination-info{display:none}}
@media (max-width:640px){.lc-section-unique-intro p{font-size:15.5px}}
@media (max-width:640px){.lc-explore-section{padding:28px 0}.lc-explore-link{font-size:14px;padding:13px 15px}}
@media (max-width:640px){.lc-ship-title{font-size:28px}.lc-ship-hero{padding:48px 0 32px}.lc-ship-intro>p{font-size:16px}}
@media (max-width: 1200px) { .lc-shared-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .lc-shared-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lc-shared-card-grid { grid-template-columns: 1fr; } }
@media(max-width:600px){.lc-classes-divider span{font-size:18px}.lc-classes-subhead{font-size:18px}}
@media(max-width:640px){.lc-factbar-btn{margin-left:0;width:100%;}}
@media(prefers-reduced-motion:reduce){
	.lct-why-face video{display:none}
	.lct-why-face #lct-why-wave-still{display:block !important}
}
@media (max-width:640px){.lct-chat-messages{height:52vh}.lct-chat-msg{max-width:92%}}
@media(max-width:768px){.lct-cb-fabrow{gap:8px}.lct-call-fab{display:inline-flex}.lct-wa-fab,.lct-call-fab{width:42px;height:42px}}
/* ============================================================
   v5.0.174, Verfijningslaag (typografie-detail + micro-interactie)
   Doel: de laatste 5% craft die een ontwerp "met de hand gemaakt"
   laat aanvoelen. Bewust subtiel: geen herontwerp, alleen detail.
   Alles achter @supports zodat oudere browsers netjes terugvallen.
   ============================================================ */

/* 1. Koppen breken netjes af, geen eenzaam laatste woord op een regel.
   text-wrap:balance verdeelt de regels evenwichtig; dit is precies het
   soort detail dat een mens toevoegt en een template overslaat. */
@supports (text-wrap: balance) {
	h1, h2, h3,
	.lc-fullwidth-title,
	.lct-acties-h1,
	.lc-pageheader-title,
	.lct-company-section-title,
	.lc-classes-heading {
		text-wrap: balance;
	}
}
/* 2. Bodytekst: voorkom weduwen/wezen en te korte laatste regels. */
@supports (text-wrap: pretty) {
	p, li, figcaption, .lc-eyebrow, .lct-intro, .lc-card-body {
		text-wrap: pretty;
	}
}
/* 3. Signature-hover op cruise-kaarten: lichte lift + subtiele schaal +
   iets diepere schaduw. Eén samenhangende beweging i.p.v. los hover-
   kleurtje. Respecteert prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.lc-cruise-card {
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		            box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
	.lc-cruise-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--lct-shadow-lg);
	}
	/* De afbeelding ademt heel licht mee, geeft diepte zonder te schreeuwen. */
	.lc-cruise-card .lc-card-image img,
	.lc-cruise-card .lc-card-media img {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-media img {
		transform: scale(1.04);
	}
}
/* 4. Tekstlinks in de content: onderstreping die 'intekent' bij hover,
   i.p.v. een harde aan/uit. Alleen binnen lopende tekst, niet op knoppen
   of kaarten (die hebben hun eigen hover). */
@supports (background-size: 100% 2px) {
	.lct-prose a:not(.button):not(.lc-btn),
	.lc-rich-text a:not(.button):not(.lc-btn) {
		background-image: linear-gradient(var(--lct-primary), var(--lct-primary));
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 1.5px;
		transition: background-size 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
		padding-bottom: 1px;
	}
	.lct-prose a:not(.button):not(.lc-btn):hover,
	.lc-rich-text a:not(.button):not(.lc-btn):hover {
		background-size: 100% 1.5px;
	}
}
/* ============================================================
   v5.0.175, Container-queries op cruise-kaarten
   De kaart reageert nu op ZIJN EIGEN breedte i.p.v. de schermbreedte.
   Zo oogt dezelfde kaart juist in een smalle kolom én breed uitgelicht,
   ongeacht het scherm. Progressive enhancement: browsers zonder
   container-query-ondersteuning houden gewoon de bestaande layout.
   ============================================================ */
@supports (container-type: inline-size) {

	/* Elke kaart wordt een query-container op basis van eigen breedte. */
	.lc-index .lc-cruise-card,
	.lc-card-grid .lc-cruise-card {
		container-type: inline-size;
		container-name: cruisecard;
	}

	/* Smalle kaart (bijv. 4 kolommen op groot scherm, of een sidebar):
	   compactere beeldhoogte en iets kleinere koptekst zodat titels van
	   twee regels niet gaan verspringen. */
	@container cruisecard (max-width: 260px) {
		.lc-card-image, .lc-card-media { height: 150px; }
		.lc-card-body { padding: 14px 14px 16px; }
		.lc-card-title { font-size: 15px; line-height: 1.25; }
		.lc-card-ship-name { font-size: 12px; }
	}

	/* Ruime kaart (bijv. 2 kolommen of uitgelicht): meer beeld en een
	   grotere, luchtiger titel, benut de ruimte in plaats van hem leeg
	   te laten. */
	@container cruisecard (min-width: 420px) {
		.lc-card-image, .lc-card-media { height: 220px; }
		.lc-card-body { padding: 22px 22px 24px; }
		.lc-card-title { font-size: 21px; line-height: 1.2; }
	}
}
@media(max-width:900px){.lct-mega{display:none !important}}
/* v5.0.207: einde kermis op de mobiele cruisepagina, één sticky CTA-balk;
   de fab-rij (Buddy/WhatsApp/bel) verdwijnt daar, de balk heeft alles. */
@media (max-width:768px){
body.is-cruise-single .lct-cb-fabrow{display:none!important}
body.is-cruise-single{padding-bottom:76px}
}
/* ============================================================
   v5.0.223: FILTERZIJBALK + WEERGAVEKEUZE (/cruises/)
   ------------------------------------------------------------
   - Filters en pagina scrollen samen (geen sticky, geen eigen
     schuifgebied meer).
   - Smallere kolom (258px).
   - Snelkoppelingen zitten nu IN de filterkaart.
   - Bezoeker kiest 1, 2 of 4 cruises per rij. Standaard 1, en
     hoe meer kolommen, hoe minder detail per kaart.
   ============================================================ */
@media (min-width: 1025px) {

	.lc-index .lc-results-layout {
		display: grid;
		grid-template-columns: 258px minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Geen sticky en geen eigen schuifbalk: alles scrollt samen. */
	.lc-index #lc-filter-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* ---------- filterkaart ---------- */
	.lc-index #lc-filter-sidebar .lct-cruises-searchbar {
		margin: 0;
		padding: 10px;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	/* ---------- Snel kiezen, binnen dezelfde kaart ---------- */
	.lc-index .lc-filter-group--quick {
		border: 0;
		border-bottom: 1px solid var(--lct-border);
		border-radius: 0;
		background: transparent;
		padding: 2px 10px 10px;
		margin: 0 0 2px;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 6px 0 0;
		padding: 0;
		border: 0;
		overflow: visible;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.15;
		padding: 3px 8px;
		border: 1px solid var(--lct-border);
		border-radius: 999px;
		background: #fff;
		color: var(--lct-navy);
		white-space: nowrap;
		text-decoration: none;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab:hover {
		border-color: var(--lct-primary);
		color: var(--lct-primary);
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab.is-active {
		background: var(--lct-primary);
		border-color: var(--lct-primary);
		color: #fff;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab-ico { width: 11px; height: 11px; }

	/* ---------- alles uitgeklapt ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-button { display: none; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list,
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list[hidden] {
		display: block;
		position: static;
		inset: auto;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 3px 0 0;
		min-width: 0;
		width: auto;
		max-width: none;
		max-height: none;
	}
	/* Klein schuifvakje per lange lijst, zodat de kolom compact blijft. */
	.lc-index #lc-filter-sidebar .lct-combo-scroll {
		overflow-y: auto;
		padding-right: 3px;
	max-height: 118px;
}
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar { width: 6px; }
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar-thumb {
		background: #dbe2ea;
		border-radius: 3px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-apply { display: none; }

	/* ---------- compacte velden ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field {
		border-right: 0;
		cursor: default;
	border-bottom: 1px solid var(--lct-border);
	padding: 8px 10px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-field:hover { background: #fff; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:last-of-type { border-bottom: 0; }
	.lc-index #lc-filter-sidebar .lct-searchbar-label {
	letter-spacing: 0.5px;
	font-size: 12px;
	white-space: normal;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi {
	font-size: 12px;
	padding: 3px 2px;
	gap: 6px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-label {
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-count {
	margin-left: auto;
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-select { font-size: 12px; padding: 5px 6px; }

	/* Zoekknop blijft binnen bereik terwijl je door de filters scrollt. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1;
		grid-row: auto;
		bottom: 0;
		background: #fff;
		z-index: 3;
	position: sticky;
	padding: 9px 0 3px;
	box-shadow: 0 -6px 10px -6px rgba(10,37,64,0.18);
	order: 99;
	order: 99;
}

	/* De vier promotegels netjes op een rij. */
	.lc-index .lc-results-column .lct-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Hero compacter: de snelkoppelingen zitten nu in de zijbalk. */
	.lc-index .lc-index-page-hero {
		padding-top: 16px;
		padding-bottom: 10px;
	}
}
/* ============================================================
   v5.0.224: VOLGORDE FILTERS + DRIE LOSSE HAVENFILTERS
   ------------------------------------------------------------
   Gewenste volgorde in de zijbalk:
     bestemming, vertrek, duur, prijs, rederij, schip,
     type cruise, en dan de drie havenfilters (dicht).

   De volgorde loopt via het data-filter-kenmerk op elk veld,
   niet via nth-child. Zo blijft het leesbaar en kan de HTML-
   volgorde vrij blijven.

   De drie havenfilters houden hun uitklapknop (lct-field--fold
   wordt hierboven overgeslagen door de uitklap-regels), dus ze
   staan standaard dicht.
   ============================================================ */
@media (min-width: 1025px) {

	.lc-index #lc-filter-sidebar [data-filter="bestemming"] {
	order: 1;
	order: 1;
	order: 1;
}
	.lc-index #lc-filter-sidebar [data-filter="vertrek"]    {
	order: 2;
	order: 2;
	order: 3;
}
	.lc-index #lc-filter-sidebar [data-filter="duur"]       {
	order: 3;
	order: 3;
	order: 4;
}
	.lc-index #lc-filter-sidebar [data-filter="prijs"]      {
	order: 4;
	order: 4;
	order: 5;
}
	.lc-index #lc-filter-sidebar [data-filter="rederij"]    {
	order: 5;
	order: 6;
	order: 6;
}
	.lc-index #lc-filter-sidebar [data-filter="schip"]      {
	order: 6;
	order: 7;
	order: 7;
}
	.lc-index #lc-filter-sidebar [data-filter="type"]       {
	order: 7;
	order: 8;
	order: 8;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-dep"]  {
	order: 8;
	order: 9;
	order: 9;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-call"] {
	order: 9;
	order: 10;
	order: 10;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-arr"]  {
	order: 10;
	order: 11;
	order: 11;
}
	/* Zoekknop altijd onderaan. */

	/* --- de drie dichte havenfilters --- */
	/* Ze zien eruit als de andere velden, met een pijltje dat aangeeft
	   dat er iets uitklapt. */
	.lc-index #lc-filter-sidebar .lct-field--fold {
		cursor: pointer;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-button {
		padding: 0;
		font-size: 13px;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-searchbar-value {
		font-size: 13px;
	}
	/* Het uitklappaneel mag breder zijn dan de kolom - de zijbalk heeft
	   geen eigen schuifbalk meer, dus het kan er netjes buiten vallen. */
	/* ============================================================================
   v5.0.416, de sticky zoekknop niet meer vóór de filterlijst
   ----------------------------------------------------------------------------
   Hier stond z-index 40 op de lijst en 3 op de knop, en dat lijkt genoeg. Maar de
   knop is position: sticky en vormt daarmee zijn EIGEN stapellaag; die 40 wordt
   dan niet met de 3 vergeleken maar binnen een andere laag. Gevolg: de blauwe
   knop zweefde door de bestemmingenlijst heen, precies wat op /cruises/ te zien
   was.

   Nu ligt de lijst boven de knop met een marge die groot genoeg is om niet per
   ongeluk te worden ingehaald, en de knop krijgt een expliciet lagere waarde
   zodat de verhouding in de code te lezen is in plaats van af te leiden.
   ============================================================================ */
.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-list {
	z-index: 900;
	min-width: 306px;
}
.lc-index #lc-filter-sidebar .lct-combo.is-open { z-index: 900; }
.lc-index #lc-filter-sidebar .lct-searchbar-submit--span { z-index: 5; }
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-scroll {
		max-height: 232px;
		overflow-y: auto;
	}
	/* Hier is de Toepassen-knop juist wel nuttig: je klapt bewust open. */
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-apply {
		display: block;
		width: 100%;
	}
}
/* --- volgorde inclusief het nieuwe "Vertrek uit" --- */
@media (min-width: 1025px) {
	.lc-index #lc-filter-sidebar [data-filter="vertrekland"] {
	order: 5;
	order: 2;
}
}
/* ============================================================
   v5.0.226: RESULTATENBALK OP MOBIEL
   ------------------------------------------------------------
   Label + sorteerveld + favorieten stonden in één rij die naar
   rechts werd geduwd en buiten het scherm liep (de favorieten-
   knop viel half weg). Nu breekt de balk netjes af en krimpt
   het sorteerveld mee.
   ============================================================ */
@media (max-width: 1024px) {

	.lc-index .lc-results-meta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.lc-index .lc-viewswitch {
		justify-content: flex-start;
		margin-right: 0;
	}

	.lc-index .lc-results-tools {
		margin-left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* "Sorteer op:" visueel weg, het sorteerveld spreekt voor zich.
	   Wel leesbaar houden voor schermlezers. */
	.lc-index .lc-results-tools .lct-sort-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* Het sorteerveld vult de ruimte die overblijft. */
	.lc-index .lc-results-tools .lc-sort-select {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	/* De favorietenknop krimpt niet mee, maar past nu wel. */
	.lc-index .lc-results-tools .lc-sort-fav-link {
		flex: 0 0 auto;
	}
}
/* Heel smalle telefoons: alleen het hartje met het aantal. */
@media (max-width: 400px) {
	.lc-index .lc-results-tools .lc-sort-fav-link .lc-sort-fav-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/* Op mobiel blijft de balk gestapeld; de tools vullen de breedte. */
@media (max-width: 1024px) {
	.lc-index .lc-results-tools {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"sortsel fav"
			"vs      vs";
		justify-content: stretch;
		width: 100%;
		margin-left: 0;
	}
	.lc-index .lc-results-tools .lc-viewswitch { justify-self: start; }
}
/* --- filtervolgorde: "Vertrek uit" naar voren --- */
@media (min-width: 1025px) {
	
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span { order: 99; }
}
/* ============================================================
   v5.0.229: BREDER + COMPACTER
   ------------------------------------------------------------
   Inspiratie: dichte filterlijsten met het aantal rechts en zonder
   icoon per regel, zoals grotere cruise-sites doen. De huisstijl
   (kleuren, fonts, ronde hoeken) blijft ongewijzigd.

   1. Breder op grote schermen. De hele site loopt via één variabele,
      dus dit blijft consistent met de header. Onder 1500px verandert
      niets; daarboven benutten we de ruimte in twee stappen. Bewust
      niet onbeperkt: te lange tekstregels lezen slechter.
   2. Compactere filterrijen: minder padding, kleinere tekst en geen
      placeholder-icoontjes meer. Daardoor passen er meer opties in
      hetzelfde schuifvakje.
   3. Compactere kaarten: minder witruimte, lagere foto.
   ============================================================ */

@media (min-width: 1500px) {
	:root { --lct-container: 1440px; }
}
/* ---------- compactere filters ---------- */
@media (min-width: 1025px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-field {
		padding: 6px 9px;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-label {
		letter-spacing: 0.4px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi {
		font-size: 12px;
		padding: 2px 2px;
		gap: 5px;
		line-height: 1.25;
	}
	.lc-index #lc-filter-sidebar .lct-combo-item-label { font-size: 12px; }
	
	/* Placeholder-iconen (wereldbol, anker) weg: die zeggen niets en
	   kosten breedte. Echte rederij-logo's blijven wél staan. */
	.lc-index #lc-filter-sidebar .lct-combo-item-logo--ph {
	display: none;
}
	/* Meer opties zichtbaar in hetzelfde vakje, want de rijen zijn lager. */
	.lc-index #lc-filter-sidebar .lct-combo-scroll { max-height: 132px; }
	.lc-index #lc-filter-sidebar .lct-combo-search-input {
		font-size: 12px;
		padding: 5px 8px;
	}
}
/* ============================================================
   v5.0.231: ONDERVERDELING, BREEDTE, BADGES ALS CLIP
   ============================================================ */

/* ---------- 1. echt meeschalen met het scherm van de bezoeker ----------
   Eerder liep de breedte in vaste stappen. Nu volgt hij de resolutie:
   altijd een marge van een paar procent aan de zijkant, met een plafond
   zodat tekstregels leesbaar blijven. */
@media (min-width: 1400px) { :root { --lct-container: min(95vw, 1560px); } }
@media (min-width: 1800px) { :root { --lct-container: min(95vw, 1800px); } }
@media (min-width: 2200px) { :root { --lct-container: min(94vw, 2100px); } }
/* ---------- 2. breedte: ook op tablet meeschalen ----------
   De verbreding begon pas bij 1400px, waardoor een iPad in liggende
   stand (± 1024–1180px) nog de smalle versie kreeg. */
@media (min-width: 1000px) {
	:root { --lct-container: min(97vw, 1560px); }
}
/* Iets minder zijmarge op tablet, zodat de ruimte echt gebruikt wordt. */
@media (min-width: 1000px) and (max-width: 1399px) {
	.lct-container,
	.lc-index .lc-container { padding-left: 16px; padding-right: 16px; }
}
/* ============================================================
   v5.0.235: MOBIELE LAYOUT AANSCHERPEN
   ------------------------------------------------------------
   Mobiel opent nu op de compacte weergave. Daar bleken drie dingen
   niet goed uit te pakken.
   ============================================================ */

@media (max-width: 1024px) {

	/* 1. Labels terug bij de compacte kaart.
	   De compacte weergave verbergt de labels VERTREK / DUUR /
	   VERTREKHAVEN. Op desktop klopt dat: daar staan vier kaarten
	   naast elkaar en is de ruimte krap. Maar mobiel is nu óók
	   compact, en dan blijft er alleen een icoontje met een datum
	   over. Het vertrek-icoon lijkt op een cadeautje, dus "7 dec
	   2026" zonder label leest als een actie in plaats van een
	   vertrekdatum. Labels dus terug waar één kaart de breedte heeft. */
	.lc-index .lc-card-grid.is-cols-4 .lc-card-spec-label { display: inline; }

	/* 2. De balk boven de resultaten was vier regels hoog voordat je
	   een cruise zag. Compacter. */
	.lc-index .lc-results-meta-row {
		gap: 8px;
		padding: 10px 12px;
	}
	.lc-index .lc-results-meta-inline {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2px 12px;
		font-size: 12.5px;
	}
	.lc-index .lc-results-tools { gap: 6px; }
	.lc-index .lc-viewswitch-label { font-size: 12px; }

	/* 3. De kop nam een achtste van het scherm. */
	.lc-index .lc-index-page-hero h1 {
		font-size: clamp(26px, 7vw, 34px);
		letter-spacing: -0.8px;
		margin-bottom: 8px;
	}
	.lc-index .lc-index-page-hero { padding: 18px 0 12px; }
}
/* ============================================================
   v5.0.238: MEER BREEDTE OP MOBIEL
   ------------------------------------------------------------
   Op een telefoon ging er aan elke kant flink wat breedte op aan
   marge: de hero had 32px padding, de container 24px, en daar kwam
   de padding van de kaartenkolom nog bij. Bij een schermbreedte van
   390px betekende dat ruim een kwart aan witruimte. Nu strakker,
   zonder dat de tekst tegen de rand plakt.
   ============================================================ */

@media (max-width: 1024px) {
	.lct-container,
	.lc-index .lc-container,
	.lc-index .lc-index-page-hero .lc-container {
		padding-left: 14px;
		padding-right: 14px;
		max-width: 100%;
	}
	.lc-index .lc-results-layout {
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
	/* De kaarten mogen breder: minder padding in de kaart zelf. */
	.lc-index .lc-card-body { padding: 12px 13px 13px; }
}
/* --- 1. geen hover-effecten op aanraakschermen --- */
@media (hover: none) {
	.lc-index .lc-cruise-card:hover,
	.lc-shared-card-grid .lc-cruise-card:hover,
	.lc-cruise-card:hover {
		transform: none;
		box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 6px 18px rgba(10,37,64,0.06);
	}
	.lc-index .lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-image img,
	.lc-cruise-card:hover .lc-card-media img {
		transform: none;
	}
	.lc-index .lc-cruise-card:hover .lc-card-cta {
		background: var(--lct-primary, #0F75BC);
	}
	/* Dezelfde blijvende hover trof ook de andere kaarttypes. */
	.lct-cruise-card:hover,
	.lct-rederij-cruise-card:hover,
	.lc-ship-cruise-card:hover,
	.lc-related-cruise-card:hover {
		transform: none;
	}
	.lct-rederij-cruise-card:hover .lct-rederij-cruise-media img {
		transform: none;
	}
}
/* --- 2. vaste kaartvoet zolang de kaart smal is --- */
@media (max-width: 1024px) {
	.lc-index .lc-card-footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"actie actie"
			"prijs cta"
			"nacht cta";
		align-items: center;
		column-gap: 10px;
		row-gap: 2px;
	}
	.lc-index .lc-card-footer .lc-card-actie-date { grid-area: actie; }
	.lc-index .lc-card-footer .lc-card-price      { grid-area: prijs; }
	.lc-index .lc-card-footer .lc-price-per-night { grid-area: nacht; }
	.lc-index .lc-card-footer .lc-card-cta {
		grid-area: cta;
		align-self: center;
		justify-self: end;
	}
}
/* --- 3. prijs echt op één regel op smalle schermen --- */
@media (max-width: 700px) {
	.lc-index .lc-card-price {
		flex-direction: row;
		align-items: baseline;
	}
	.lc-index .lc-card-price-label { margin-bottom: 0; }
	.lc-index .lc-card-price-value { font-size: 21px; }
}
/* --- raakvlakken op aanraakschermen ---
   De weergave-knoppen waren 28×26px. Met een vinger is dat te
   klein (richtlijn: 44px). Alleen vergroten waar aangeraakt wordt,
   zodat de balk op desktop compact blijft. */
@media (pointer: coarse) {
	.lc-index .lc-viewbtn {
		min-width: 42px;
		height: 38px;
	}
	.lc-index .lc-card-fav-btn {
		min-width: 38px;
		min-height: 38px;
	}
}
/* De drempels liggen op de werkelijke kaartbreedtes:
     weergave 1  : 720 tot 1560px   -> ruim
     weergave 2  : 353 tot 773px    -> midden
     weergave 4  : 319 tot 473px    -> krap of midden
     telefoon    : 358px            -> midden
   Let op het gevolg: een kaart van 353px is even groot in weergave 2 als in
   weergave 4, dus krijgt hij nu ook dezelfde titelgrootte. Op een tablet wordt
   de titel in weergave 4 daardoor 15px in plaats van 13,5px, de kaart is daar
   immers net zo breed als in weergave 2. Dat is de bedoeling van deze omzetting:
   de kaart volgt zijn eigen maat, niet de knop die de bezoeker koos. */
@container lckaart (min-width: 700px) {
	.lc-card-title { font-size: 17px; }
}
/* Browsers zonder container queries (Safari < 16, Firefox < 110) houden de
   basisgroottes aan; dat is een leesbare kaart, alleen niet fijngeregeld. */
@supports not (container-type: inline-size) {
	.lc-index .lc-card-grid.is-cols-1 .lc-card-title { font-size: 17px; }
	.lc-index .lc-card-grid.is-cols-2 .lc-card-title { font-size: 15px; }
	.lc-index .lc-card-grid.is-cols-4 .lc-card-title { font-size: 13.5px; }
	.lc-index .lc-card-grid.is-cols-4 .lc-card-specs { gap: 2px; }
}
/* --- 5. de breekpunten, en die staan hier ONDERAAN ---
   Bewust als laatste in dit blok. Precies hier ging het eerder mis: het
   mobiele vangnet stond bovenaan en werd verderop overschreven door een
   regel zonder media-query. Een override moet ná de regel staan die hij
   overschrijft, anders doet hij niets. */
@media (max-width: 1024px) {
	/* Tablet: vier kolommen worden er twee. */
	.lc-index .lc-card-grid.is-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   v5.0.251: INLINE STYLES UIT front-page.php EN cruise-index.php
   ------------------------------------------------------------
   Tweede en laatste ronde van punt 7. De sectie-afstanden op de
   homepage stonden als losse getallen in het sjabloon (20, 40, 48,
   70, 100px door elkaar). Dat zijn nu vier modifiers, zodat de
   volgende sectie een keuze uit een schaal is in plaats van een
   nieuw getal.

   Eén ding is méér dan verplaatsen: de rode kleur van een
   last-minute-vertrekdatum was een inline waarde die per kaart uit
   PHP kwam. Dat is een toestand, geen opmaak, nu een klasse
   is-lastminute, zoals de kaarten op het overzicht het al deden.
   ============================================================ */

/* --- afstandsschaal voor de homepage-secties --- */
.lct-section--pt-s { padding-top: 20px; }
/* ============================================================
   v5.0.252: <style>-BLOKKEN UIT single-cruise.php
   ------------------------------------------------------------
   De cruisepagina had losse <style>-blokken in de HTML. Die gaan
   bij elke pageview opnieuw over de lijn, staan buiten de
   cache-busting van dit bestand en zijn niet te vinden als je
   later zoekt waar een kleur vandaan komt.

   Wat in het sjabloon blijft: het blok met een PHP-waarde erin
   (een themakleur uit de database) en de <noscript>-terugval voor
   de tabbladen, die hoort per definitie in de pagina.
   ============================================================ */

.lc-guided-badge{display:inline-block;background:#0F4C81;color:#fff;font-weight:700;font-size:13px;line-height:1;border-radius:999px;padding:7px 13px;margin:0 0 8px}
@media (max-width: 1100px) {
		#lc-cruise-flex > aside { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; }
		#lc-cruise-flex { gap: 32px !important; }
	}
@media (max-width: 900px) {
		#lc-cruise-flex { flex-direction: column !important; padding: 24px 20px !important; }
		#lc-cruise-flex > aside { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; position: static !important; order: -1; }
	}
/* Browsers zonder container queries (Safari < 16) houden de kolommaten aan
   die er al stonden; die zijn na 5.0.254 niet kleiner dan 11px. */
@supports not (container-type: inline-size) {
	
	.lc-index #lc-filter-sidebar .lct-combo-item-multi,
	.lc-index #lc-filter-sidebar .lct-combo-item-label,
	.lc-index #lc-filter-sidebar .lct-date-legend,
	.lc-index #lc-filter-sidebar .lct-date-hint {
	font-size: 12px;
}
	
}
/* ============================================================
   v5.0.266: MOBIEL FILTERT MET DE KNOP
   ------------------------------------------------------------
   Het direct toepassen en de preloader staan onder 1025px uit
   (zie cruise-index.php). Dan moet de knop "Toepassen" onderaan
   een lijst er ook weer zijn: die werd verstopt toen elk vinkje
   nog automatisch verzond.

   Onder 1025px is het filter een uitklappaneel; een vinkje dat de
   pagina herlaadt klapt dat paneel dicht en zet je bovenaan. Met
   de knop bepaal je zelf wanneer je klaar bent met kiezen.
   ============================================================ */
@media (max-width: 1024px) {
	.lc-index #lc-filter-sidebar .lct-combo-apply {
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	/* De hoofdknop onderaan het paneel blijft de duidelijkste uitweg. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
		display: block;
		width: 100%;
	}
}
/* ============================================================
   v5.0.277: RESOLUTIE-AUDIT /cruises/
   ------------------------------------------------------------
   Gemeten met de element-controleur op de echte pagina: 261
   element-soorten × 13 resoluties van 320 tot 1920px.

   WAT GOED WAS, en dat is de helft van een audit:
   - geen enkel element te breed voor zijn viewport, op geen enkele
     resolutie. Geen horizontale schuifbalk.
   - geen enkel raster met vaste px-kolommen die op smal blijven
     staan; alles vouwt.

   WAT HIER WORDT OPGELOST: drie tikdoelen onder de 44px die Apple
   en Google als ondergrens aanhouden. Op een telefoon met één hand
   is 34px net te klein om zeker te raken, en dan tik je het
   filterpaneel dicht in plaats van in het zoekveld.

   De maten gelden alleen op aanwijsapparaten die grof zijn
   (pointer: coarse) en tot 768px: op een muis is 34px prima en
   verandert er dus niets.
   ============================================================ */
@media (max-width: 768px) and (pointer: coarse) {
	/* Zoekveld in een filterlijst: 34px -> 44px. */
	.lc-index .lct-combo-search-input {
		min-height: 44px;
		font-size: 16px;   /* onder 16px zoomt iOS in bij aantikken */
	}
	/* Keuzelijsten in de filterbalk. */
	.lc-index .lct-searchbar-select {
		min-height: 44px;
		font-size: 16px;
	}
	/* Pijltjes van de paginering: 38px -> 44px, en breed genoeg om te raken. */
	.lc-index .lc-pagination-arrow,
	.lc-index .lc-pagination-num {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
/* De twee kleinste tekstmaten iets op. 10px is op een telefoon niet te
   lezen zonder te turen; 11px is de ondergrens die de rest van het
   theme sinds 5.0.254 ook aanhoudt. De labels blijven daarmee
   ondergeschikt aan de waarde eronder, wat de bedoeling was. */
@media (max-width: 480px) {
	.lc-index .lc-card-spec-label,
	.lc-index .lc-viewswitch-label { font-size: 12px; }
}
/* ============================================================
   v5.0.280: HOMEPAGE COMPACTER, TWEEDE POGING
   ------------------------------------------------------------
   In 5.0.279 ging ik ervan uit dat de cijferrij een kind was van
   het Danny-blok, zodat grid-column hem erin zou trekken. Dat is
   niet zo: hij staat ernaast. Mijn controle keek alleen of hij
   vóór </section> stond, en dat is niet hetzelfde als "erin".
   Gevolg: de foto werd wel kleiner, maar de cijfers bleven als
   losse strook onder het blok hangen met wit ertussen.

   Deze aanpak werkt ONGEACHT de nesting: de strook krijgt dezelfde
   achtergrond als het blok, schuift er met een negatieve marge
   tegenaan, en neemt de ronding over. Visueel één blok, zonder
   dat er markup verplaatst hoeft te worden, en dus zonder dat ik
   opnieuw op een aanname bouw.
   ============================================================ */
@media (min-width: 900px) {
	.lct-danny-block {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		align-items: stretch;
		gap: 0;
		/* Onderste ronding weg: de cijferstrook sluit hieronder aan. */
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.lct-danny-text { padding: 40px 40px 32px; }
	.lct-danny-text h2 { font-size: 36px; margin-bottom: 12px; }
	.lct-danny-text p { font-size: 15.5px; margin-bottom: 12px; }

	/* De foto mag niet hoger worden dan de tekst ernaast. 3/4 met een
	   maximum, en de bovenkant vasthouden zodat het gezicht blijft staan. */
	.lct-danny-image-wrap {
		position: relative;
		aspect-ratio: 3 / 4;
		max-height: 480px;
		overflow: hidden;
	}
	.lct-danny-image-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 15%;
	}

	/* --- de cijferstrook plakt onder het blok --- */
	.lct-danny-trust {
		max-width: var(--lct-container);
		margin: -1px auto 0;
		background: var(--lct-bg-accent, #EAF6FC);
		border-top: 1px solid rgba(15,76,129,.14);
		border-bottom-left-radius: var(--lct-radius-lg, 18px);
		border-bottom-right-radius: var(--lct-radius-lg, 18px);
		padding: 0;
	}
	.lct-danny-trust .lct-why-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}
	.lct-danny-trust .lct-why-card {
		background: transparent;
		border: 0;
		border-left: 1px solid rgba(15,76,129,.14);
		border-radius: 0;
		box-shadow: none;
		padding: 14px 16px;
	}
	.lct-danny-trust .lct-why-card:first-child { border-left: 0; }
	.lct-danny-trust .lct-why-num { font-size: 21px; }
	.lct-danny-trust .lct-why-lbl { font-size: 12px; line-height: 1.35; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.lct-danny-image-wrap { aspect-ratio: 16 / 10; max-height: 340px; overflow: hidden; }
	.lct-danny-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
	.lct-danny-text { padding: 32px 24px 24px; }
	.lct-danny-text h2 { font-size: 32px; }
}
@media (max-width: 600px) {
	.lc-vervoer { padding: 22px 16px 18px; border-radius: 14px; }
	.lc-vervoer > h2 { font-size: 22px; }
	/* Drie kolommen naar één: op een telefoon leest een rij van 62px logo,
	   naam en herkomst niet meer. */
	.lc-vervoer-mij-item {
		grid-template-columns: 62px minmax(0, 1fr);
		row-gap: 2px;
	}
	.lc-vervoer-mij-vanaf,
	.lc-vervoer-mij-van { grid-column: 2; text-align: left; }
}
@media (max-width: 600px) {
	.lc-hv-badges { justify-content: flex-start; }
}

/* ============================================================================
   v5.0.348, paginering op een telefoon
   ----------------------------------------------------------------------------
   Op de screenshot stonden de paginaknoppen als KOLOM onder elkaar en was
   "Pagina 1 van 1655" een omrande pil. Oorzaak: index.css (de uitgeklede
   stylesheet voor /cruises/) was van 1 augustus en miste de media-blokken.
   Dat is nu aangevuld, en deze regels staan er expliciet bij zodat de
   paginering nooit meer van één gegenereerd bestand afhangt.
   ============================================================================ */
.lc-index .lc-pagination,
nav.lc-pagination {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.lc-index .lc-pagination-info {
	/* Geen pil: dit is een mededeling, geen knop. */
	border: 0 !important;
	background: transparent !important;
	color: var(--lct-text-mid);
	font-weight: 500;
}
@media (max-width: 600px) {
	.lc-index .lc-pagination { gap: 5px; }
	.lc-index .lc-pagination-num,
	.lc-index .lc-pagination-arrow { min-width: 40px; height: 40px; font-size: 13px; }
	.lc-index .lc-pagination-arrow { padding: 0 12px; }
	/* De info staat al in de balk boven de resultaten; hier is hij overbodig. */
	.lc-index .lc-pagination-info { display: none; }
}

/* ============================================================================
   v5.0.349, de kop van /cruises/ compacter op een telefoon
   ----------------------------------------------------------------------------
   Op een toestel van 390 px kostte alles boven de eerste cruise bijna twee
   schermhoogten: kruimelpad, een kop van 40 px, een tellerregel over twee
   regels, vier snelkoppelingen ONDER elkaar, een filterknop van 78 px hoog en
   een balk met de paginateller op een eigen regel.

   Wat hier gebeurt is geen krimpen om het krimpen: elke regel haalt ruimte weg
   bij iets dat de bezoeker niet naar een cruise brengt, en laat staan wat hij
   nodig heeft om te kiezen. De snelkoppelingen blijven volwaardig, ze schuiven
   alleen horizontaal in plaats van vier rijen te vullen.
   ============================================================================ */
@media (max-width: 782px) {

	/* Kop en teller: kleiner, en de sectie zelf minder lucht. */
	.lc-index-page-hero { padding-top: 10px; padding-bottom: 12px; }
	.lc-index-page-hero h1 { font-size: 26px; line-height: 1.15; margin: 2px 0 4px; }
	.lc-index-subtitle { font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; }

	/* Kruimelpad hoort bij navigatie, niet bij kiezen: klein en strak. */
	.lc-crumbs { font-size: 12px; margin-bottom: 2px; }

	/**
	 * Snelkoppelingen in ÉÉN horizontale rij die je opzij veegt.
	 * Vier stuks onder elkaar kostte 4 × 58 px; nu 46 px totaal, en alle vier
	 * blijven bereikbaar. De rand rechts loopt door tot buiten het beeld, wat
	 * zichtbaar maakt dat er meer staat.
	 */
	.lc-hero-quick {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
		margin-right: -16px;
	}
	.lc-hero-quick::-webkit-scrollbar { display: none; }
	.lc-hero-quick-item {
		flex: 0 0 auto;
		padding: 8px 13px;
		font-size: 13px;
		white-space: nowrap;
	}
	.lc-hero-quick-ico { width: 15px; height: 15px; }

	/* Filterknop: 78 px hoog was een banner. 48 px is nog steeds ruim te raken. */
	.lc-filter-toggle { padding: 12px 16px !important; font-size: 14.5px; }
	.lc-filter-toggle-ico { width: 17px; height: 17px; }

	/**
	 * De balk: alles op één regel. De paginateller stond op een eigen regel
	 * bovenaan; die hoort achteraan bij de rest, want hij is het minst
	 * belangrijk van de vier dingen die er staan.
	 */
	.lc-results-meta-row,
	.lc-results-tools {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
	}
	.lc-results-meta-inline { order: 9; width: 100%; margin: 0; font-size: 12px; }

	/* De sorteerkeuze was tot een pijltje geknepen, die moet leesbaar zijn. */
	.lc-sort-select,
	.lc-results-tools select {
		flex: 1 1 150px;
		min-width: 130px;
		font-size: 14px;
		padding: 9px 10px;
	}

	/* "WEERGAVE" is een label bij drie duidelijke icoontjes; die tekst kan weg. */
	.lc-viewswitch-label,
	.lct-sort-label { display: none; }   /* labels bij duidelijke bedieningen */
	.lc-viewswitch { flex: 0 0 auto; gap: 4px; }
	.lc-viewbtn { width: 38px; height: 38px; }

	.lc-sort-fav-link { flex: 0 0 auto; }
	.lc-sort-fav-text { display: none; }   /* het hartje zegt het al */
}

/* ============================================================================
   v5.0.350, de vier snelkoppelingen op ÉÉN regel
   ----------------------------------------------------------------------------
   "Aanbevolen cruises · Cruises uit Nederland · Cruises uit Duitsland · Last
   minute" is samen breder dan elke telefoon. Drie dingen samen maken het passend
   zonder dat er iets verdwijnt:

   1. het KORTE label ("Nederland" in plaats van "Cruises uit Nederland"), het
      volledige label blijft in de HTML staan voor Google en schermlezers;
   2. de ICOONTJES gaan weg; die waren versiering naast een woord dat het al zegt;
   3. de vier knoppen VERDELEN de breedte gelijk, dus ze vullen de regel precies.

   Doorgerekend op 390 px: vier keer ongeveer 84 px plus drie tussenruimten van
   6 px = 354 px, binnen de 358 px die er na de marges over is. Op 360 px valt
   het terug op horizontaal schuiven, dus ook daar is niets onbereikbaar.
   ============================================================================ */
.lc-hero-quick-kort { display: none; }

@media (max-width: 782px) {
	.lc-hero-quick-lang { display: none; }
	.lc-hero-quick-kort { display: inline; }
	.lc-hero-quick-ico { display: none; }

	.lc-hero-quick {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
		overflow-x: visible;
		margin-right: 0;
	}
	.lc-hero-quick-item {
		flex: initial;
		min-width: 0;
		padding: 9px 4px;
		font-size: 12.5px;
		text-align: center;
		justify-content: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Onder 360 px is vier naast elkaar niet meer leesbaar: dan twee rijen van twee.
   Beter twee volle regels dan vier afgekapte woorden. */
@media (max-width: 360px) {
	.lc-hero-quick { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   SYNCHRONISATIE 6 augustus 2026, tweede ronde (theme 5.0.354)
   ----------------------------------------------------------------------------
   Het logo was op /cruises/ groter dan op de beginpagina. Oorzaak: de mobiele
   logomaat uit 5.0.348 heb ik IN main.css gewijzigd in plaats van eraan
   toegevoegd, en de synchronisatie van dat moment liep vóór die wijziging. Dus
   hield deze pagina de oude 60 px.

   Precies de val die in 5.0.348 al benoemd stond. De les is niet "beter
   opletten" maar: na ELKE main.css-wijziging deze vergelijking draaien in
   plaats van hem te onthouden.

   Nu aangevuld: de :root-variabelen (die waren bijgewerkt) en de twee
   media-blokken voor de logohoogte.
   ============================================================================ */

/* ========================================
   Let's Cruise theme, main.css v0.2.0
   Design: Fris & Maritiem
   Brand: navy #0A2540 + ocean #0F75BC + sky #27A9E1
   Font: Plus Jakarta Sans + Instrument Serif (italic)
   ======================================== */

:root {
	--lct-primary: #0F75BC;
	--lct-primary-dark: #0a5a93;
	--lct-navy: #0A2540;
	--lct-navy-soft: #1A2A3E;
	--lct-sky: #27A9E1;
	--lct-highlight: #7FD3F1;
	--lct-text: #1A2A3E;
	--lct-text-mid: #3D5773;
	/* v5.0.243: was #5F7288 = 4,16:1 op wit, onder de WCAG AA-eis van 4,5
	   voor normale tekst. #5F7288 haalt 4,94:1 en blijft visueel grijs. */
	--lct-text-muted: #5F7288;
	--lct-bg: #ffffff;
	--lct-bg-subtle: #F6FAFD;
	--lct-bg-accent: #EAF6FC;
	--lct-border: #E4ECF3;
	--lct-success: #36c97b;

	--lct-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--lct-font-italic: 'Instrument Serif', Georgia, serif;

	--lct-container: 1280px;
	--lct-radius-sm: 10px;
	--lct-radius-md: 14px;
	--lct-radius-lg: 18px;
	--lct-radius-xl: 20px;
	--lct-radius-2xl: 28px;
	--lct-radius-pill: 999px;

	--lct-shadow-sm: 0 1px 2px rgba(10,37,64,0.04), 0 8px 24px rgba(10,37,64,0.06);
	--lct-shadow-md: 0 1px 2px rgba(10,37,64,0.04), 0 12px 32px rgba(10,37,64,0.06);
	--lct-shadow-lg: 0 4px 14px rgba(10,37,64,0.06), 0 24px 60px rgba(10,37,64,0.12);
	--lct-shadow-cta: 0 8px 24px rgba(15,117,188,0.3);

	/* v0.7.29: Section padding tokens, zorgen voor consistent rythme
	   - sm: kleine cards / CTA blokken
	   - md: standaard content sectie (default)
	   - lg: hero / belangrijke sectie
	   - xl: full-bleed showcase / onboard / status-match */
	--lct-section-py-sm: 48px;
	--lct-section-py-md: 60px;
	--lct-section-py-lg: 80px;
	--lct-section-py-xl: 100px;
	--lct-section-px: 24px;
	--lct-section-px-mobile: 16px;

	--lct-transition: 0.2s ease;
}
/**
 * v5.0.348: het logo is op een telefoon te groot.
 *
 * 60 px hoog is op een desktop precies goed, maar op een telefoon van 390 px breed neemt het
 * logo dan bijna de helft van de kopbalk. Nu 44 px onder 782 px en 40 px onder 430 px, nog
 * ruim leesbaar, en het geeft de zoek- en menuknop de ruimte die ze nodig hebben.
 */
@media (max-width: 782px) {
	.lct-logo img, .lct-logo .custom-logo { max-height: 44px; }
}
@media (max-width: 430px) {
	.lct-logo img, .lct-logo .custom-logo { max-height: 40px; }
}

/* === css-sync 2026-08-08: 1 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.370: "incl. subgebieden" achter een verzameling in het bestemmingsfilter.
   Klein en grijs: het is een toelichting op het getal, geen tweede label. */
.lc-index .lct-combo-item-hint {
	display: inline-block;
	margin-left: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lct-muted, #51606F);
	white-space: nowrap;
}

/* === css-sync 2026-08-08: 4 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.373, geneste bestemmingen in de zoekbalk van de beginpagina
   ----------------------------------------------------------------------------
   De insprong bestond alleen voor .lct-combo-item-multi binnen .lc-index, dus
   voor de filterlijst op /cruises/. De zoekbalk op de beginpagina gebruikt
   .lct-combo-item (enkelvoudig) en zou de nesting dus niet tonen, dan staan
   Alaska en Noord-Amerika weer als broers in de lijst.
   ============================================================================ */
.lct-combo-item.is-sub { padding-left: 30px; position: relative; }
.lct-combo-item.is-sub .lct-combo-item-label { color: var(--lct-muted, #51606F); }
/* Streepje dat de samenhang aangeeft, zoals in de filterlijst. */
.lct-combo-item.is-sub::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: #c9d6e2;
}
.lct-combo-item-count {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef3f8;
	font-size: 12px;
	font-weight: 700;
	color: #51606f;
}

/* === css-sync 2026-08-08: 2 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.375, de zoekbalk blijft ÉÉN regel, ook met zes velden
   ----------------------------------------------------------------------------
   Met bestemming, vertrek, duur, rederij, vertrekhaven en prijs erbij werd de
   flexrij te krap: velden gingen wikkelen en de knop zakte eronder. Een raster
   met gelijke kolommen houdt het één regel en geeft elk veld dezelfde breedte,
   ongeacht hoe lang het label of de gekozen waarde is.

   De knop krijgt een eigen kolom op 'auto': die moet zijn tekst kwijt kunnen en
   mag niet meekrimpen met de velden.

   Waarom minmax(0,1fr) en niet 1fr: zonder die 0 gebruikt een grid de
   INHOUDSBREEDTE als minimum, en dan duwt één lange havennaam de hele rij uit
   elkaar. Met 0 mag een kolom smaller worden dan zijn inhoud en knipt de tekst
   netjes af, dat is precies wat we willen.
   ============================================================================ */
@media (min-width: 901px) {
	.lct-searchbar-fields {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
		align-items: stretch;
	}
	/* Compacter, zodat zes velden náást elkaar passen zonder te verdringen. */
	.lct-searchbar-field { padding: 12px 14px 10px; }
	.lct-searchbar-label { font-size: 12px; letter-spacing: .02em; }
	.lct-searchbar-select,
	.lct-combo-button { font-size: 14px; }
	/* Lange waarden afknippen in plaats van de kolom oprekken. */
	.lct-combo-current-label,
	.lct-searchbar-field .lct-combo-button > .lct-combo-current {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}
	.lct-searchbar-submit { padding: 10px 12px; }
}
/* Tussen tablet en laptop: twee rijen van drie is leesbaarder dan zes propvolle
   kolommen van 90 px. Eén regel is het doel, niet een dogma. */
@media (min-width: 901px) and (max-width: 1279px) {
	.lct-searchbar-fields {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lct-searchbar-submit { grid-column: 1 / -1; }
	.lct-searchbar-field { border-bottom: 1px solid var(--lct-bg-subtle, #F6FAFD); }
}

/* === css-sync 2026-08-08: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.376, de zoekbalk half zo hoog op een telefoon
   ----------------------------------------------------------------------------
   Zes velden onder elkaar over de volle breedte is een kolom van ruim 430 px,
   plus de knop. Dan staat de rest van de beginpagina onder de vouw en scrol je
   langs zes rijen waarin je meestal maar één keuze maakt.

   Twee kolommen halveren dat naar drie rijen. Elk veld houdt 48 px hoogte, dus
   het blijft goed aan te tikken, dat is de grens waar een duim betrouwbaar
   raakt, en die geef ik niet op voor compactheid.

   BESTEMMING blijft over de volle breedte. Dat is het veld waar bijna iedereen
   begint en de waarde is er het langst ("Middellandse Zee", "Oostzee &
   Baltische staten"); in een halve kolom zou daar niets van te lezen zijn.
   ============================================================================ */
@media (max-width: 900px) {
	.lct-searchbar { padding: 14px; gap: 12px; }
	.lct-searchbar-fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		flex-direction: unset;   /* de oude kolomregel uitzetten */
	}
	/* Bestemming en de knop over twee kolommen. */
	.lct-searchbar-fields > .lct-searchbar-field:first-of-type,
	.lct-searchbar-submit { grid-column: 1 / -1; }

	.lct-searchbar-field {
		min-height: 48px;
		padding: 9px 12px 8px;
		border-right: 1px solid var(--lct-bg-subtle, #F6FAFD);
		border-bottom: 1px solid var(--lct-bg-subtle, #F6FAFD);
	}
	/**
	 * De scheidingslijn weg bij de RECHTER kolom.
	 *
	 * Met nth-child(even) ging dat mis: bestemming pakt de volle breedte, dus schuift de pariteit
	 * één op, dan verdwijnt de lijn juist links en staat er een streep tegen de rechterrand. Ik
	 * had dat doorgerekend per veld en het klopte in geen van de vijf.
	 *
	 * nth-of-type met de juiste reeks volgt de werkelijke kolom: veld 3, 5 en 7 staan rechts
	 * (bestemming is nummer 1 en telt niet mee in een kolom).
	 */
	.lct-searchbar-field:nth-of-type(3),
	.lct-searchbar-field:nth-of-type(5),
	.lct-searchbar-field:nth-of-type(7) { border-right: 0; }
	/* Het laatste veld staat alleen op zijn rij: geen streep naar niets, en geen onderrand
	   want daaronder komt de knop. */
	.lct-searchbar-field:last-of-type { border-right: 0; border-bottom: 0; }

	.lct-searchbar-label { font-size: 12px; letter-spacing: .06em; margin-bottom: 1px; }
	.lct-searchbar-select,
	.lct-combo-button { font-size: 14.5px; padding-top: 0; padding-bottom: 0; }

	/* Lange waarden afknippen; een halve kolom is 45% van het scherm. */
	.lct-combo-current-label {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}
	.lct-searchbar-submit { padding: 10px 0 0; border: 0; }
}

/* === css-sync 2026-08-08: 2 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.377, twee gevolgen van de compacte zoekbalk repareren
   ============================================================================ */

/* 1. De UITKLAPLIJSTEN waren te smal geworden.
      Door de halve kolommen van 5.0.376 werd het paneel ook half zo breed, en
      dan staat er "Rott… 419" en "Disn…". Een lijst waarin je de namen niet kunt
      lezen is geen keuze.

      Het paneel is nu zo breed als het scherm (min de marges van de balk) en
      hangt onder het veld. Bij de rechterkolom vanaf de rechterrand, anders
      loopt het buiten beeld. */
@media (max-width: 900px) {
	.lct-searchbar-field .lct-combo-list {
		width: calc(100vw - 44px);
		min-width: 0;
		max-width: calc(100vw - 44px);
		max-height: 60vh;
		overflow-y: auto;
		left: 0;
		right: auto;
	}
	/* Rechterkolom: uitlijnen op de rechterrand. */
	.lct-searchbar-field:nth-of-type(3) .lct-combo-list,
	.lct-searchbar-field:nth-of-type(5) .lct-combo-list,
	.lct-searchbar-field:nth-of-type(7) .lct-combo-list {
		left: auto;
		right: 0;
	}
	/* De naam mag nu de ruimte pakken; alleen het aantal blijft rechts staan. */
	.lct-searchbar-field .lct-combo-item-label {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}
	.lct-searchbar-field .lct-combo-item { min-height: 44px; }
}
@media (max-width: 900px) {
	.lct-searchbar-tabs { gap: 6px; }
	.lct-searchbar-tab { padding: 7px 11px; font-size: 13px; }
	.lct-tab-extra { display: none; }
	.lct-searchbar-tabs.toon-extra .lct-tab-extra { display: inline-flex; }
	.lct-tab-meer {
		display: inline-flex;
		align-items: center;
		border: 1px dashed var(--lct-border, #E4ECF3);
		background: transparent;
		color: var(--lct-text-muted, #51606F);
		font-weight: 700;
		cursor: pointer;
	}
}

/* === css-sync 2026-08-09: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.378, de filtervelden op één lijn
   ----------------------------------------------------------------------------
   Op de screenshot staat "Alle bestemmingen" lager dan "Flexibel", en "Alle
   rederijen" weer lager. De oorzaak: elk veld bepaalde zijn eigen hoogte, en
   bij een label dat afbreekt ("VERTREKHAVEN", "BESTEMMING") schuift de waarde
   eronder mee. Dan lijkt de balk scheef zonder dat er iets fout staat.

   Nu twee vaste rijen per veld: één voor het label, één voor de waarde. Beide
   even hoog in alle zes de velden, dus liggen de labels op één lijn en de
   waarden ook, ongeacht de lengte van de tekst.
   ============================================================================ */
@media (min-width: 901px) {
	.lct-searchbar-field {
		display: grid;
		grid-template-rows: 16px 1fr;
		align-content: start;
		row-gap: 4px;
	}
	.lct-searchbar-label {
		margin: 0;
		line-height: 16px;
		/* Eén regel: een afbrekend label duwt anders de waarde omlaag en dat is
		   precies wat de balk scheef maakte. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* De waarde start bij alle velden op dezelfde hoogte. */
	.lct-searchbar-field > .lct-combo,
	.lct-searchbar-field > .lct-searchbar-select {
		align-self: start;
		margin: 0;
	}
	.lct-combo-button,
	.lct-searchbar-select {
		min-height: 26px;
		line-height: 26px;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* === css-sync 2026-08-09: 4 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.380, de zoekbalk nu écht op één lijn
   ----------------------------------------------------------------------------
   Mijn vaste rijhoogtes van 5.0.378 waren niet genoeg, en nu zie ik waarom:
   alleen BESTEMMING en REDERIJ stonden lager, en juist die twee hebben een
   .lct-combo-current-logo in de knop. Dat vakje is 22 px hoog en blijft die
   hoogte innemen ook als er geen logo in staat, dus werd de knop hoger en zakte
   de tekst.

   De andere vier velden hebben dat element niet en stonden daarom wél goed. Dat
   patroon had ik uit de screenshot moeten lezen in plaats van de rijhoogtes nog
   een keer aan te passen.
   ============================================================================ */
.lct-searchbar .lct-combo-current-logo:empty {
	/* Leeg = geen hoogte. Zodra er een logo in komt, gelden de maten hieronder weer. */
	width: 0;
	height: 0;
	margin: 0;
}
.lct-searchbar .lct-combo-current-logo {
	/* Even hoog als de tekstregel, zodat een gevuld logo de rij ook niet oprekt. */
	height: 20px;
	width: 20px;
}
.lct-searchbar .lct-combo-current-logo img {
	max-height: 20px;
	width: auto;
	object-fit: contain;
}
@media (min-width: 901px) {
	/* De knop zelf op een vaste hoogte, ongeacht wat erin staat. */
	.lct-searchbar-field .lct-combo-button {
		height: 26px;
		display: flex;
		align-items: center;
	}
}

/* === css-sync 2026-08-09: 2 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.381: het aantal achter een haven in het megamenu.
   Rechts uitgelijnd en klein, zoals de aantallen in het filter, het is een cijfer bij de keuze,
   geen deel van de naam. */
.lct-mega-links a > small {
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef3f8;
	font-size: 12px;
	font-weight: 700;
	color: #51606f;
}
.lct-mega-links a { display: flex; align-items: center; gap: 8px; }

/* === css-sync 2026-08-09: 1 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.382: dezelfde badge op de cruisekaartjes ook in het goud.
   Die was met 94% wit wél leesbaar, maar zag eruit als elk ander labeltje op de kaart. Goud maakt
   het onderscheid dat het verdient: dit is het enige wat geen concurrent kan zeggen. Navy op goud
   geeft een contrast van 8,1 op 1, dus het blijft goed leesbaar. */
.lc-shared-card-grid .lc-card-badge-visited,
.lc-card-badge-visited {
	background: #F2B01E;
	color: #0A2540;
	border-color: #D9971A;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* === css-sync 2026-08-09: 1 blok(ken) bijgewerkt vanuit main.css === */

@media (max-width: 782px) {
	/* Op een telefoon onder elkaar; de link krijgt een eigen regel met een tikdoel van 44 px. */
	.lct-danny2-buddy { flex-wrap: wrap; }
	.lct-danny2-buddy a { margin-left: 0; min-height: 44px; display: flex; align-items: center; }
}

/* === css-sync 2026-08-09: 3 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.384: de tekst "Mijn omgeving" naast het poppetje in de kop.
   Op DESKTOP zichtbaar, de ruimte is er weer sinds de Cruise Buddy-knop weg is, en een knop met
   alleen een poppetje laat een bezoeker gokken wat erachter zit.

   Op mobiel blijft het icoon alleen: daar staat de knop naast de hamburger en is elke pixel nodig.
   De bestaande regel font-size:0 (die de tekstnode verbergt) doet dat werk al; deze span erft dat
   en verdwijnt dus mee. Dat is precies het gedrag dat we willen, dus laat ik die regel staan in
   plaats van hem te overschrijven. */
.lct-btn-portal {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.lct-btn-portal-tekst { white-space: nowrap; }
/* Op mobiel de span helemaal weg in plaats van alleen op font-size 0: anders blijft de gap van 7 px
   ernaast staan en is de knop breder dan nodig zonder dat er iets te zien is. */
@media (max-width: 900px) {
	.lct-btn-portal-tekst { display: none; }
	.lct-btn-portal { gap: 0; }
}

/* === css-sync 2026-08-10: 7 blok(ken) bijgewerkt vanuit main.css === */

/* Tussen tablet en laptop: twee rijen van drie is leesbaarder dan zes propvolle
   kolommen van 90 px. Eén regel is het doel, niet een dogma.

   v5.0.385: bovengrens van 1180 naar 1279 px. Op 1181 px kreeg elk van de zes
   velden ongeveer 102 px, en "VERTREKHAVEN" met zijn icoon heeft er zo'n 107
   nodig, dat label hing dus over de scheidingslijn in het buurveld. Vanaf 1280
   px past het met ruimte over. */
/* ============================================================================
   v5.0.385, geen tekst en geen knop buiten het filterkader
   ----------------------------------------------------------------------------
   De veldenrij is een raster van repeat(6, minmax(0,1fr)) auto. Die nul in de
   minmax is er met een reden (5.0.371): zonder die nul rekt één lange havennaam
   de hele rij uit elkaar. Keerzijde: een kolom MAG smaller worden dan zijn
   inhoud, en dan loopt die inhoud gewoon door over de rand van zijn veld, het
   kader heeft overflow:visible, want de uitklaplijst moet eruit kunnen.

   De gekozen waarde was al afgeknipt (.lct-combo-current-label). Het LABEL was
   dat niet. Bij zes kolommen op 1181 px is er per veld ongeveer 102 px over,
   terwijl "VERTREKHAVEN" met zijn icoon er zo'n 107 px nodig heeft. Dat is een
   band van tientallen pixels breed waarin het label over de scheidingslijn heen
   in het buurveld hangt.

   Twee maatregelen, en die zijn niet dubbelop:

   1. STRUCTUREEL, zes kolommen pas vanaf 1280 px in plaats van 1181 px.
      Daaronder gelden drie ruime kolommen, en dan past elk label gewoon. Zo
      wordt er niets afgeknipt wat een bezoeker had moeten lezen.

   2. ACHTERVANG, alles wat tekst is krijgt een afknipregel. Bij welke
      lettergrootte, taal of zoomstand dan ook kan er niets meer buiten zijn
      eigen veld komen. Een afgeknipt woord is niet mooi; over de rand hangen is
      erger, want dan raakt het de buurman.

   Let op bij het label: dat is een flexbox (icoon + tekst). text-overflow werkt
   alleen op een blok, dus daar knipt hij af zonder puntjes. Voor de waarde
   eronder, een blok, komen de puntjes er wel.
   ============================================================================ */

/* 1. Structureel: de bovengrens van de drie-kolomsregel staat hierboven
   (regel ~18019, nu 1279 px in plaats van 1180 px). Die staat daar en niet hier,
   zodat er één plek is waar het breekpunt van de veldenrij vandaan komt.

   2. Achtervang: elk stukje tekst knipt zichzelf af.

   NIET op het veld zelf. Dat was mijn eerste opzet: overflow:hidden op
   .lct-searchbar-field, met een uitzondering op .lct-searchbar-field.is-open.
   Nagekeken in front-page.php (regel ~495): daar krijgt .lct-combo de klasse
   is-open, niet het veld. Op /cruises/ is dat wél het veld. De uitzondering had
   op de beginpagina dus nooit gegolden en overflow:hidden had de uitklaplijst
   van bestemming en rederij afgeknipt, de twee filters die het meest gebruikt
   worden. Daarom per element, en niet met een grove regel op de doos eromheen. */

/* Geen white-space:nowrap hier. Een label van twee woorden ("PRIJS TOT") wikkelt
   dan naar twee regels en blijft netjes binnen het veld; met nowrap zou ik dat
   wikkelen vervangen door afknippen, en dan verlies ik leesbare tekst waar dat
   niet nodig was. Alleen één lang woord ("VERTREKHAVEN") kan niet wikkelen, die
   wordt door overflow:hidden afgeknipt in plaats van over de rand te hangen. */
.lct-searchbar-label {
	min-width: 0;
	overflow: hidden;
}
.lct-searchbar-label .lct-field-icon { flex: 0 0 auto; }
.lct-searchbar-select {
	max-width: 100%;
	text-overflow: ellipsis;
}
/* De knop mag zijn kolom niet uit. Hij staat in een auto-kolom en heeft
   white-space:nowrap, dus normaal krijgt hij precies de ruimte die hij vraagt;
   dit is er voor het geval de kolom die ruimte niet heeft. */
.lct-searchbar-submit { min-width: 0; }
.lct-searchbar-submit .lct-btn-primary {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* De snelkoppelingen boven het kader wikkelen al; dit is voor één losse tab die
   zelf breder zou zijn dan de balk (een lange naam bij een nieuwe koppeling). */
.lct-searchbar-tab { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === css-sync 2026-08-10: 5 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.386, één breedte voor de hele site, met het zoekdeck als maat
   ----------------------------------------------------------------------------
   Danny, 9 augustus: "het filterblok is leidend voor de breedte van de inhoud;
   alles op de website moet in die breedte blijven."

   WAT ER MIS WAS
   De breedte kwam al uit één variabele (--lct-container), maar de ZIJMARGE stond
   op negen plekken los ingesteld, en niet overal hetzelfde:

     .lct-container            24 / 80 px  … en 16 px tussen 1000 en 1399
     .lct-topbar-inner         24 / 80
     .lct-topbar-reisline      24 / 80
     .lct-header-inner         24 / 80
     .lct-hero-content         24 / 80
     .lct-searchbar-wrap       24 / 80
     .lct-usp                  24 / 80
     .lct-footer-inner         24 / 80
     .lct-region-section-inner 24 / 32   (nooit 80)
     .lct-rederij-section-inner 24 / 32  (nooit 80)
     .lct-schepen-inner        24        (nooit 80)

   Twee gevolgen. Tussen 1000 en 1399 px hebben de secties 16 px marge en de kop,
   de hero en het zoekdeck 80 px: de tekst in een sectie begint dan 64 px verder
   naar buiten dan het filterkader. En op de bestemmings-, rederij- en
   schepenpagina's is die marge nooit meegegroeid naar 80, dus daar loopt de tekst
   op elke desktop ruim 50 px buiten dezelfde lijn.

   Daar komt bij dat het zoekdeck zelf een eigen plafond had: max-width
   min(1420px, 100%), los van --lct-container. Op een breed scherm werd het deck
   dus juist smaller dan de rest, en dan is het geen maat meer.

   WAT NU GELDT
   Eén variabele voor de zijmarge (--lct-gutter) en één voor de breedte
   (--lct-container). Elke wrapper gebruikt beide. Het zoekdeck vult die maat
   precies, dus zijn kaderlijn is de lijn waar alle tekst en alle knoppen op
   uitkomen, op elke pagina en bij elke breedte.

   De 16 px tussen 1000 en 1399 px is niet weggehaald maar opgetrokken naar álle
   wrappers: die marge was bedoeld om op een tablet de ruimte te benutten, en dat
   blijft zo. Alleen doet nu de hele pagina eraan mee in plaats van alleen de
   secties. Wil je daar liever 24 of 80, dan is het één regel.

   NIET aangeraakt: foto's, gekleurde balken en losse kaarten met eigen
   binnenmarge. Die mogen breder zijn dan de tekstkolom; dat is de vormgeving.
   ============================================================================ */

:root { --lct-gutter: 24px; }
@media (min-width: 1024px) { :root { --lct-gutter: 80px; } }
/* GEEN aparte marge tussen 1000 en 1399 px meer.
   Die stond er om op een tablet meer ruimte te benutten (16 px in plaats van 80),
   maar hij gold alleen voor .lct-container, dus voor de secties, en niet voor de
   kop, de hero en het zoekdeck. Dát is het gat van 64 px per kant waardoor tekst
   in een sectie buiten het filterkader begon. Nu het deck de maat is, komen de
   secties naar binnen en blijft het deck staan waar het staat. Wil je op tablet
   die ruimte terug, dan zet ik de gutter daar voor ALLES lager, niet voor één
   van de negen wrappers. */

/* Elke wrapper: dezelfde breedte, dezelfde zijmarge. Alleen links en rechts:
   de verticale marges van de kop en de reisregel blijven wat ze waren. */
.lct-container,
.lct-topbar-inner,
.lct-topbar-reisline,
.lct-header-inner,
.lct-hero-content,
.lct-searchbar-wrap,
.lct-usp,
.lct-footer-inner,
.lct-region-section-inner,
.lct-rederij-section-inner,
.lct-schepen-inner,
.letscruise-cruise .lc-container,
.letscruise-index .lc-container,
.letscruise-acties .lc-container {
	max-width: var(--lct-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--lct-gutter, 24px);
	padding-right: var(--lct-gutter, 24px);
}
/* Het zoekdeck vult de tekstkolom precies. Het eigen plafond van 1420 px is weg:
   twee onafhankelijke breedtes zijn precies waarom de lijnen niet klopten. */
.lct-searchbar { max-width: 100%; }
/* Twee uitzonderingen die na de regel hierboven opnieuw moeten gelden.

   1. De reisregel op een telefoon. Die had onder 700 px 16 px marge in plaats van
      24, zodat "Ik ben op vakantie met …" niet over vier regels valt. Mijn regel
      hierboven staat later in het bestand en zou die 16 px overschrijven. Het is
      een balk, en balken zijn hier niet het punt, dus die 16 px blijft. */
@media (max-width: 700px) {
	.lct-topbar-reisline { padding-left: 16px; padding-right: 16px; }
}

/* === css-sync 2026-08-10: 4 blok(ken) bijgewerkt vanuit main.css === */

.lct-danny-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	background: rgba(255,255,255,0.95);
	padding: 14px 18px;
	border-radius: var(--lct-radius-md);
	display: flex;
	align-items: center;
	gap: 12px;
}
/* 2. De keyfacts-strook op een rederijpagina staat NIET in de lijst hierboven.
      Zijn ouder (.lct-rederij-keyfacts) heeft zelf al 24 px zijmarge; de gutter
      erbovenop zou 104 px worden en dan staat die strook juist smaller dan de
      rest. Zelfde geldt voor de hero-stroken op /bestemming/…/havens/ en de
      thematische pagina's: daar zit de marge op de sectie in plaats van op de
      binnenlaag. Dat is een aparte ingreep, de marge moet dan van de sectie naar
      de binnenlaag verhuizen, en dat wil ik met een pagina ernaast doen in plaats
      van op de gok. */

/* 3. /cruises/ blijft in deze bouw ongemoeid.
      Die pagina heeft eigen containerregels (.lc-index .lc-container, met een
      filterkolom ernaast) en houdt dus voorlopig zijn eigen 16 px op tablet. Dat
      is de drukste pagina van de site; die zet ik pas om met een screenshot van
      die pagina ernaast, niet op de gok. */

/* === css-sync 2026-08-10: 3 blok(ken) bijgewerkt vanuit main.css === */

/* 2. De keyfacts-strook op een rederijpagina staat NIET in de lijst hierboven.
      Zijn ouder (.lct-rederij-keyfacts) heeft zelf al 24 px zijmarge; de gutter
      erbovenop zou 104 px worden en dan staat die strook juist smaller dan de
      rest. Zelfde geldt voor de hero-stroken op /bestemming/…/havens/ en de
      thematische pagina's: daar zit de marge op de sectie in plaats van op de
      binnenlaag. Dat is een aparte ingreep, de marge moet dan van de sectie naar
      de binnenlaag verhuizen, en dat wil ik met een pagina ernaast doen in plaats
      van op de gok. */

/* 3. /cruises/ blijft in deze bouw ongemoeid.
      Die pagina heeft eigen containerregels (.lc-index .lc-container, met een
      filterkolom ernaast) en houdt dus voorlopig zijn eigen 16 px op tablet. Dat
      is de drukste pagina van de site; die zet ik pas om met een screenshot van
      die pagina ernaast, niet op de gok. */

/* ============================================================================
   v5.0.397, "Danny was aan boord" op de schippagina en bij de vloot
   ----------------------------------------------------------------------------
   De badge stond alleen op een losse cruisepagina, precies de plek waar iemand
   al bijna gekozen heeft. Nu ook op /schip/…/ (waar je twijfelt over dít schip)
   en op de rederijpagina bij de vloot (waar de vraag is: welke ken jij zelf?).

   Kleur en tekstkleur zijn dezelfde als in de hero van de cruisepagina en als de
   badge op de cruisekaarten: goud met navy tekst. Gemeten 8,14, ruim boven de
   4,5 die voor deze lettergrootte nodig is. Wit op goud is 1,91 en dus geen optie,
   ook al staat de badge op een donkere achtergrond.

   DE NAAM: .lct-aanboord, en NIET .lct-danny-badge.
   Die laatste bestond al sinds de beginpagina (regel ~758): een wit blokje bij de
   foto van Danny, absoluut gepositioneerd op bottom:24px en left:24px. Mijn regel
   zette daar in 5.0.397 top:10px en right:10px bovenop, en dan staan alle vier de
   zijden vast, dus rekte het gouden vlak op tot de hele scheepsfoto min die marges:
   een goudblok van 257 bij 146 px met de tekst ergens in het midden.

   De les is niet "reset ook bottom en left". De les is: kijk of een klassenaam al
   bezet is voordat je hem pakt. Eén grep had dit voorkomen.
   ============================================================================ */

.lct-aanboord {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F2B01E;
	color: #0A2540;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 8px;
	white-space: nowrap;
}
/* Het icoon volgt de tekst. Zonder deze regel staat het op huisstijlblauw (zie de
   uitleg boven .lct-ico) en valt een blauw anker weg op het goud. */
.lct-aanboord .lct-ico { color: currentColor; }
@media (max-width: 640px) {
	.lct-aanboord--opfoto { font-size: 12px; padding: 5px 8px; }
	.lc-ship-danny { font-size: 12.5px; padding: 8px 12px; }
}

/* === css-sync 2026-08-10: 2 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.399, de kop van een schippagina leesbaar
   ----------------------------------------------------------------------------
   DE TITEL WAS NAVY OP EEN FOTO
   .lc-ship-hero zet color:#fff, maar de titel is een <h1> en regel 74 van dit
   bestand zet ÁLLE koppen op navy. Een eigen kleur wint van een geërfde, dus
   stond "Celebrity Reflection" in donkerblauw over een lichte scheepsromp en
   donker water. Gemeten: 1,24 op donker water. Dat is geen tekst meer.

   Dit staat er al sinds 5.0.20. Het viel niet op omdat de kop op een donkere
   foto nog net leesbaar leek, het probleem is dat het per foto verschilt, en
   daar kan geen enkele kleur tegenop. Dus: wit, met een schaduw eronder, en de
   sluier in schip.php verzwaard tot minstens 4,94 op een witte romp.

   DE GEGEVENSKAART SCHOOF OVER DE BADGE
   .lc-ship-specs heeft margin-top:-28px, zodat de kaart over de onderkant van
   de hero valt. Dat was goed toen daar niets stond. Sinds 5.0.397 staat er de
   badge "Danny was aan boord", en die verdween er half onder. Meer bodemruimte
   in de hero in plaats van de overlap weghalen: die overlap is het ontwerp.
   ============================================================================ */

.lc-ship-hero { background: var(--lct-navy, #0A2540); padding-bottom: 64px; }
@media (max-width: 640px) {
	/* Op een telefoon staat de titel over twee regels en komt de badge eronder;
	   daarom hier meer bodemruimte dan op een breed scherm. */
	.lc-ship-hero { padding: 40px 0 72px; }
	.lc-ship-title { font-size: 30px; line-height: 1.15; }
	.lc-ship-breadcrumb { font-size: 12.5px; margin-bottom: 12px; }
	.lc-ship-eyebrow { font-size: 12px; }
	/* De gegevenskaart in twee kolommen met leesbare cijfers in plaats van vier
	   kolommen van 120 px waarin "126.000 BT" over twee regels valt. */
	.lc-ship-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -22px; }
	.lc-ship-spec { padding: 13px 10px; }
	.lc-ship-spec-val { font-size: 17px; }
	.lc-ship-spec-key { font-size: 12px; }
}

/* === css-sync 2026-08-10: 1 blok(ken) bijgewerkt vanuit main.css === */

@media (max-width: 640px) {
	.lc-ship-dannynote { font-size: 17px; margin-top: 10px; }
}

/* === css-sync 2026-08-11: 4 blok(ken) bijgewerkt vanuit main.css === */

/**
 * v5.0.404, het vinkje hangt niet meer aan JavaScript.
 * ----------------------------------------------------------------------------
 * Het echte <input> staat op opacity:0 en de zichtbare vorm is een <span>. Of die
 * span gevuld werd, hing af van de klasse .is-on op de rij, en die zet
 * JavaScript. De luisteraars worden aangehaakt bij het OPENEN van de lijst; de
 * rijen onder "3 extra gevonden" worden dáárna met createElement bijgebouwd.
 * Gevolg: in die rijen kon je aanvinken zonder dat er iets veranderde. Precies
 * wat Danny zag bij het zoeken op "Key".
 *
 * Nu staat de opmaak op :checked, en dat is de bron zelf. Werkt voor rijen die er
 * al stonden, voor rijen die later komen, en zelfs als het script uitvalt.
 *
 * .is-on blijft bestaan voor de achtergrondkleur van de hele rij, dat is een
 * ander doel en mag aan JavaScript hangen.
 */
.lct-combo-item-multi input[type="checkbox"]:checked + .lct-combo-item-check,
.lct-combo-item-multi.is-on .lct-combo-item-check {
	background: var(--lct-primary);
	border-color: var(--lct-primary);
}
.lct-combo-item-multi input[type="checkbox"]:checked + .lct-combo-item-check::after,
.lct-combo-item-multi.is-on .lct-combo-item-check::after {
	content: '';
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
/* Toetsenbordgebruik: het echte veld is onzichtbaar, dus de focusring moet op de
   zichtbare vorm komen. Zonder dit kun je met Tab niet zien waar je staat. */
.lct-combo-item-multi input[type="checkbox"]:focus-visible + .lct-combo-item-check {
	outline: 2px solid var(--lct-primary);
	outline-offset: 2px;
}
/* ============================================================================
   v5.0.404, elk vinkje en keuzerondje op de site in de huisstijlkleur
   ----------------------------------------------------------------------------
   Er staan op de site drie soorten vinkjes: eigen gebouwde (de filterlijsten),
   vinkjes met een eigen accent-color (scheepstype) en gewone die de browser zelf
   tekent. Die laatste groep is op iOS lichtgrijs op wit, en in een lijst met
   twintig regels zie je dan niet welke aan staat.

   accent-color is één regel voor alle drie de gevallen: de browser tekent zijn
   eigen vinkje, maar in jouw blauw. Geen eigen vormen, geen JavaScript, en het
   blijft werken met een toetsenbord en een schermlezer.
   ============================================================================ */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--lct-primary, #0F75BC);
}

/* === css-sync 2026-08-11: 5 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.409, preloader met het logo-motief
   ----------------------------------------------------------------------------
   Drie golflijnen die naadloos doorlopen, met een scheepsromp die erop deint.
   Bewust CSS+SVG en geen gegenereerde video: een preloader moet er zijn vóórdat
   de rest is geladen, en een mp4 laat je wachten op de wachtanimatie. Zie
   inc/preloader.php voor de volledige afweging.

   De lus is naadloos doordat elke golflijn twee perioden breed is en precies
   één periode opschuift. Bij de laatste frame staat hij weer op de eerste.
   ============================================================================ */
.lcd-laad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
@keyframes lcd-deinen {
	0%, 100% { transform: translateY(0) rotate(-2.2deg); }
	50%      { transform: translateY(1.6px) rotate(2.2deg); }
}
@keyframes lcd-golven {
	from { transform: translateX(0); }
	to   { transform: translateX(24px); }   /* exact één golfperiode */
}
@keyframes lcd-punten {
	0%   { content: ""; }
	25%  { content: "."; }
	50%  { content: ".."; }
	75%  { content: "..."; }
}
/**
 * Wie beweging heeft uitgezet in zijn systeeminstellingen, krijgt geen beweging.
 * Dat is geen extraatje: bij vestibulaire klachten kan een deinende animatie
 * misselijkheid geven. Een video zou dit niet respecteren.
 */
@media (prefers-reduced-motion: reduce) {
	.lcd-laad-schip,
	.lcd-golf,
	.lcd-laad-punten::after { animation: none; }
	.lcd-laad-punten::after { content: "…"; }
}

/* === css-sync 2026-08-13: 6 blok(ken) bijgewerkt vanuit main.css === */

.lct-searchbar-tabs > .lct-searchbar-tab {
	flex: 0 1 auto;
	white-space: nowrap;
	/* Krimpen mag, verdwijnen niet: onder 8px zijruimte wordt het onleesbaar. */
	padding-left: clamp(8px, 1.1vw, 15px);
	padding-right: clamp(8px, 1.1vw, 15px);
}
/* === DESTINATIONS === */
.lct-destinations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* ============================================================================
   v5.0.414, de zoekknop niet meer achter de filterlijsten langs
   ----------------------------------------------------------------------------
   Dit blok spant twee rijen (grid-row: 1 / span 2), en de knop erin erfde
   height: 100% met min-height: 56px uit de algemene .lct-searchbar-submit-regel.
   Gevolg: de knop werd even hoog als beide rijen samen, ongeveer 130 pixels, en
   liep daarmee achter een geopende filterlijst langs. Die lijst heeft z-index
   1000 en staat er dus voor, maar aan de zijkanten bleef een blauwe rand
   zichtbaar. Dat leest als een fout in de opmaak, en dat was het ook.

   De knop krijgt nu zijn eigen hoogte terug. Hij staat verticaal gecentreerd in
   het blok, dus de balk blijft even hoog; alleen het blauwe vlak is niet meer
   groter dan de knop zelf.
   ============================================================================ */
.lct-searchbar-submit--span .lct-btn-primary {
	width: 100%;
	height: auto;
	min-height: 52px;
	max-height: 60px;
	flex: 0 0 auto;
	justify-content: center;
	white-space: nowrap;
}
/* ============================================================================
   v5.0.414, meer bestemmingen op de beginpagina
   ----------------------------------------------------------------------------
   De eerste zes vaargebieden staan open, de rest verschijnt met een klik. De
   kaarten staan altijd in de HTML: goed voor Google, en zonder sprong in de
   opmaak zodra de knop wordt ingedrukt.

   display: none en niet visibility of hoogte-nul: die laatste twee laten de
   kaarten meetellen in de rasterhoogte en dan blijft er onderaan lege ruimte.
   ============================================================================ */
.lct-destination-card--extra { display: none; }
.lct-destinations.is-alles .lct-destination-card--extra { display: block; }
/* Is alles al open, dan is de knop niet meer nodig. */
.lct-destinations.is-alles + .lct-dest-meer { display: none; }

/* === css-sync 2026-08-13: 1 blok(ken) bijgewerkt vanuit main.css === */

@media (max-width: 560px) {
	.lct-region-port-badge { top: 8px; left: 8px; font-size: 12px; padding: 4px 9px 4px 8px; }
}

/* === css-sync 2026-08-13: 3 blok(ken) bijgewerkt vanuit main.css === */

/* Submit-knop kolom 5, spant rij 1 + rij 2 */
/* ============================================================================
   v5.0.416, het knopblok mag niet OVER de filterlijsten liggen
   ----------------------------------------------------------------------------
   In 5.0.414 heb ik de KNOP zijn eigen hoogte teruggegeven. Dat was de helft van
   het probleem: het blok eromheen spant nog steeds twee rijen (grid-row 1/span 2)
   met een witte achtergrond, en dat blok ligt in de stapelvolgorde boven of onder
   een geopende filterlijst afhankelijk van de bronvolgorde.

   Op /cruises/ staat het blok NA de velden in de HTML, dus het lag erboven en de
   blauwe knop schemerde door de lijst heen. Op de beginpagina viel het niet op
   omdat de lijst daar korter is.

   z-index 0 met een eigen stapelcontext: het blok blijft waar het is, maar een
   filterlijst (z-index 1000) ligt er altijd voor. Geen hoogte veranderd, dus de
   balk ziet er hetzelfde uit.
   ============================================================================ */
.lct-searchbar-submit--span {
	grid-column: 5;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	background: #fff;
	border-left: 1px solid var(--lct-border);
	position: relative;
	z-index: 0;
}
/* En de velden zelf boven het knopblok, zodat hun lijst er zeker over valt. */
.lct-searchbar-fields--two-rows > .lct-searchbar-field { position: relative; z-index: 1; }
/**
 * De klasse is-open komt op .lct-combo BINNEN het veld, niet op het veld zelf
 * (cruise-index.php regel 1220). Daarom :has() op het kind, met :focus-within als
 * terugval voor browsers zonder :has, die dekt het geval waarin de lijst open is,
 * want dan staat de focus in het veld.
 */
.lct-searchbar-fields--two-rows > .lct-searchbar-field:has(.is-open),
.lct-searchbar-fields--two-rows > .lct-searchbar-field:focus-within { z-index: 1001; }

/* === css-sync 2026-08-13: 5 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.416, een geopende filterlijst hoort BOVEN alles wat erna komt
   ----------------------------------------------------------------------------
   .lct-combo-list heeft z-index 1000, en dat leek genoeg. Maar z-index werkt
   alleen binnen de eigen stapellaag: de lijst zit in .lct-combo, en die had
   position: relative ZONDER z-index. Zo'n element krijgt z-index auto en vormt
   dus geen eigen laag; de 1000 van de lijst wordt vergeleken binnen de laag van
   de ouder van .lct-combo, niet met de rest van de pagina.

   Gevolg: alles wat NA de combo in de HTML staat en zelf een stapelpositie heeft
   (de blauwe zoekknop, een sticky blok) komt eroverheen. Dat is wat er op
   /cruises/ te zien was: een blauwe balk die door de bestemmingenlijst heen liep.

   De oplossing is de combo zelf een laag geven zodra hij open staat. Niet
   permanent: een blijvende z-index op elk filter maakt de stapelorde van de hele
   zijkolom onvoorspelbaar, en dan schuift het probleem naar het volgende
   element.
   ============================================================================ */
.lct-combo.is-open { z-index: 1200; }
.lct-combo.is-open .lct-combo-list { z-index: 1201; }
/* Het veld eromheen ook, anders knipt de rand van het filterblok de lijst af. */
.lct-searchbar-field:has(.lct-combo.is-open) { z-index: 1200; }
/* ============================================================
   v5.0.223: FILTERZIJBALK + WEERGAVEKEUZE (/cruises/)
   ------------------------------------------------------------
   - Filters en pagina scrollen samen (geen sticky, geen eigen
     schuifgebied meer).
   - Smallere kolom (258px).
   - Snelkoppelingen zitten nu IN de filterkaart.
   - Bezoeker kiest 1, 2 of 4 cruises per rij. Standaard 1, en
     hoe meer kolommen, hoe minder detail per kaart.
   ============================================================ */
@media (min-width: 1025px) {

	.lc-index .lc-results-layout {
		display: grid;
		grid-template-columns: 258px minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Geen sticky en geen eigen schuifbalk: alles scrollt samen. */
	.lc-index #lc-filter-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* ---------- filterkaart ---------- */
	.lc-index #lc-filter-sidebar .lct-cruises-searchbar {
		margin: 0;
		padding: 10px;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	/* ---------- Snel kiezen, binnen dezelfde kaart ---------- */
	.lc-index .lc-filter-group--quick {
		border: 0;
		border-bottom: 1px solid var(--lct-border);
		border-radius: 0;
		background: transparent;
		padding: 2px 10px 10px;
		margin: 0 0 2px;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 6px 0 0;
		padding: 0;
		border: 0;
		overflow: visible;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.15;
		padding: 3px 8px;
		border: 1px solid var(--lct-border);
		border-radius: 999px;
		background: #fff;
		color: var(--lct-navy);
		white-space: nowrap;
		text-decoration: none;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab:hover {
		border-color: var(--lct-primary);
		color: var(--lct-primary);
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab.is-active {
		background: var(--lct-primary);
		border-color: var(--lct-primary);
		color: #fff;
	}
	.lc-index .lc-filter-group--quick .lc-quick-tab-ico { width: 11px; height: 11px; }

	/* ---------- alles uitgeklapt ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-button { display: none; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list,
	.lc-index #lc-filter-sidebar .lct-searchbar-field:not(.lct-field--fold) .lct-combo-list[hidden] {
		display: block;
		position: static;
		inset: auto;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 3px 0 0;
		min-width: 0;
		width: auto;
		max-width: none;
		max-height: none;
	}
	/* Klein schuifvakje per lange lijst, zodat de kolom compact blijft. */
	.lc-index #lc-filter-sidebar .lct-combo-scroll {
		overflow-y: auto;
		padding-right: 3px;
	max-height: 118px;
}
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar { width: 6px; }
	.lc-index #lc-filter-sidebar .lct-combo-scroll::-webkit-scrollbar-thumb {
		background: #dbe2ea;
		border-radius: 3px;
	}
	.lc-index #lc-filter-sidebar .lct-combo-apply { display: none; }

	/* ---------- compacte velden ---------- */
	.lc-index #lc-filter-sidebar .lct-searchbar-field {
		border-right: 0;
		cursor: default;
	border-bottom: 1px solid var(--lct-border);
	padding: 8px 10px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-field:hover { background: #fff; }
	.lc-index #lc-filter-sidebar .lct-searchbar-field:last-of-type { border-bottom: 0; }
	.lc-index #lc-filter-sidebar .lct-searchbar-label {
	letter-spacing: 0.5px;
	font-size: 12px;
	white-space: normal;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-multi {
	font-size: 12px;
	padding: 3px 2px;
	gap: 6px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-label {
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-combo-item-count {
	margin-left: auto;
	font-size: 12px;
}
	.lc-index #lc-filter-sidebar .lct-searchbar-select { font-size: 12px; padding: 5px 6px; }

	/* Zoekknop blijft binnen bereik terwijl je door de filters scrollt. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1;
		grid-row: auto;
		bottom: 0;
		background: #fff;
		/* v5.0.416: expliciet laag, zodat de verhouding met de filterlijst (900) in
		   de code te lezen is in plaats van af te leiden. */
		z-index: 5;
	position: sticky;
	padding: 9px 0 3px;
	box-shadow: 0 -6px 10px -6px rgba(10,37,64,0.18);
	order: 99;
	order: 99;
}

	/* De vier promotegels netjes op een rij. */
	.lc-index .lc-results-column .lct-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Hero compacter: de snelkoppelingen zitten nu in de zijbalk. */
	.lc-index .lc-index-page-hero {
		padding-top: 16px;
		padding-bottom: 10px;
	}
}
/* ============================================================
   v5.0.224: VOLGORDE FILTERS + DRIE LOSSE HAVENFILTERS
   ------------------------------------------------------------
   Gewenste volgorde in de zijbalk:
     bestemming, vertrek, duur, prijs, rederij, schip,
     type cruise, en dan de drie havenfilters (dicht).

   De volgorde loopt via het data-filter-kenmerk op elk veld,
   niet via nth-child. Zo blijft het leesbaar en kan de HTML-
   volgorde vrij blijven.

   De drie havenfilters houden hun uitklapknop (lct-field--fold
   wordt hierboven overgeslagen door de uitklap-regels), dus ze
   staan standaard dicht.
   ============================================================ */
@media (min-width: 1025px) {

	.lc-index #lc-filter-sidebar [data-filter="bestemming"] {
	order: 1;
	order: 1;
	order: 1;
}
	.lc-index #lc-filter-sidebar [data-filter="vertrek"]    {
	order: 2;
	order: 2;
	order: 3;
}
	.lc-index #lc-filter-sidebar [data-filter="duur"]       {
	order: 3;
	order: 3;
	order: 4;
}
	.lc-index #lc-filter-sidebar [data-filter="prijs"]      {
	order: 4;
	order: 4;
	order: 5;
}
	.lc-index #lc-filter-sidebar [data-filter="rederij"]    {
	order: 5;
	order: 6;
	order: 6;
}
	.lc-index #lc-filter-sidebar [data-filter="schip"]      {
	order: 6;
	order: 7;
	order: 7;
}
	.lc-index #lc-filter-sidebar [data-filter="type"]       {
	order: 7;
	order: 8;
	order: 8;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-dep"]  {
	order: 8;
	order: 9;
	order: 9;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-call"] {
	order: 9;
	order: 10;
	order: 10;
}
	.lc-index #lc-filter-sidebar [data-filter="haven-arr"]  {
	order: 10;
	order: 11;
	order: 11;
}
	/* Zoekknop altijd onderaan. */

	/* --- de drie dichte havenfilters --- */
	/* Ze zien eruit als de andere velden, met een pijltje dat aangeeft
	   dat er iets uitklapt. */
	.lc-index #lc-filter-sidebar .lct-field--fold {
		cursor: pointer;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-button {
		padding: 0;
		font-size: 13px;
	}
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-searchbar-value {
		font-size: 13px;
	}
	/* Het uitklappaneel mag breder zijn dan de kolom - de zijbalk heeft
	   geen eigen schuifbalk meer, dus het kan er netjes buiten vallen. */
	/* v5.0.416: zie de uitleg in index.css. De sticky zoekknop hieronder vormt een
   eigen stapellaag, dus 40 tegen 3 hielp niet; de lijst moet er ruim boven. */
.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-list {
	z-index: 900;
	min-width: 306px;
}
.lc-index #lc-filter-sidebar .lct-combo.is-open { z-index: 900; }
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-scroll {
		max-height: 232px;
		overflow-y: auto;
	}
	/* Hier is de Toepassen-knop juist wel nuttig: je klapt bewust open. */
	.lc-index #lc-filter-sidebar .lct-field--fold .lct-combo-apply {
		display: block;
		width: 100%;
	}
}

/* === css-sync 2026-08-13: 5 blok(ken) bijgewerkt vanuit main.css === */

/* Top-level items binnen megamenu zijn altijd zichtbaar (grid items zijn list items) */
.lct-megamenu > li {
	display: block;
	break-inside: avoid;
}
/* v3.5.15: cell wrapper voor section/recent_posts grid items */
.lct-megamenu .lct-megamenu-cell {
	display: block;
	min-width: 0;
}
.lct-megamenu > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--lct-text, #1A2A3E);
	font-weight: 500;
	text-decoration: none;
	border-radius: 4px;
}
.lct-megamenu > li > a:hover {
	color: var(--lct-primary, #0F75BC);
}
/* Sectie-titel binnen megamenu */
.lct-megamenu .lct-megamenu-section-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--lct-primary, #0F75BC);
	letter-spacing: 0.7px;
	text-transform: uppercase;
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--lct-border, #E4ECF3);
}

/* === css-sync 2026-08-13: 4 blok(ken) bijgewerkt vanuit main.css === */

.lct-section-header { margin-bottom: clamp(22px, 3vw, 40px); }
/* ============================================================================
   v5.0.423, de bestemmingenkaarten dichter op de kop
   ----------------------------------------------------------------------------
   Op de schermafbeelding van de beginpagina zat er een gat van bijna honderd
   pixels tussen "Ontdek de vaargebieden" en de eerste rij kaarten: de marge van
   het kopblok plus de sectiepadding kwamen daar bij elkaar. Een kop hoort bij wat
   eronder staat; te veel lucht ertussen maakt van één blok twee losse dingen.

   En de kaarten zelf: 240px hoog is prima voor een foto met een naam erop, maar
   twee rijen plus de gap is 504px en dan past er op een laptop niets anders meer
   in beeld. Op een smal scherm 200px, zodat er onder de eerste rij nog een stuk
   van de tweede zichtbaar is. Dat halve zicht is wat iemand aanzet tot scrollen.
   ============================================================================ */
.lct-destinations { gap: clamp(14px, 1.8vw, 24px); }
@media (max-width: 900px) {
	.lct-destination-card { height: 200px; }
}
@media (max-width: 600px) {
	/* Eén kolom: dan mogen ze weer wat hoger, want er staat er maar één per rij. */
	.lct-destination-card { height: 180px; }
}

/* === css-sync 2026-08-15: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.429, het filterpaneel bruikbaar maken op een telefoon
   ----------------------------------------------------------------------------
   WAT ER MIS WAS
   Op mobiel wordt de knop "Filters" zichtbaar en klapt de zijkolom open, maar er
   was geen enkele regel die de INHOUD mobiel maakt. Het raster van de zoekbalk
   hield zijn desktopvorm: vier kolommen plus een knopkolom van 180px, geperst in
   390 pixels. Gevolg op de schermafbeelding van 14 augustus:

     - labels afgekapt tot "BES", "REISP", "AANL", "TERU"
     - waarden tot "A." en "Fl..."
     - de knop "Zoek cruises" over de kolommen heen, half buiten beeld
     - kolommen die niet meer bij hun label horen

   Er BESTAAT een regel voor 600px die één kolom maakt, maar die geldt alleen voor
   .lct-searchbar-fields--two-rows buiten de zijkolom. In de zijkolom staat een
   regel met min-width: 1025px die hem daar op één kolom zet; onder die breedte
   valt hij terug op de desktopvorm. Precies omgekeerd van wat nodig is.

   DE OPLOSSING
   In de zijkolom onder 900px alles op één kolom, met volledige labels en velden
   die de breedte vullen. Niet "kleiner maken" maar "onder elkaar": een filter dat
   je niet kunt lezen is geen filter.
   ============================================================================ */
@media (max-width: 900px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows,
	.lc-index .lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-field,
	.lc-index .lc-filter-sidebar .lct-searchbar-field {
		grid-column: 1 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--lct-border) !important;
		padding: 12px 14px !important;
		min-width: 0;
	}
	/* Labels volledig: "BESTEMMING", niet "BES". */
	.lc-index #lc-filter-sidebar .lct-searchbar-label,
	.lc-index .lc-filter-sidebar .lct-searchbar-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 12px;
	}
	/* De waarde eronder ook: geen "A..." meer. */
	.lc-index #lc-filter-sidebar .lct-combo-current,
	.lc-index #lc-filter-sidebar .lct-combo-button,
	.lc-index .lc-filter-sidebar .lct-combo-current,
	.lc-index .lc-filter-sidebar .lct-combo-button {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		min-width: 0;
		width: 100%;
		text-align: left;
	}
	/* De zoekknop onderaan, over de volle breedte, niet als vijfde kolom. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
		padding: 14px !important;
		box-shadow: none !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary {
		width: 100%;
		min-height: 48px;
		max-height: none;
		justify-content: center;
	}
	/* De uitklaplijst mag de volle breedte van het paneel gebruiken. */
	.lc-index #lc-filter-sidebar .lct-combo-list,
	.lc-index .lc-filter-sidebar .lct-combo-list {
		left: 0 !important;
		right: 0 !important;
		min-width: 0 !important;
		max-height: 60vh;
	}
	/* Aanvinkvelden groot genoeg om te raken. */
	.lc-index #lc-filter-sidebar input[type="checkbox"],
	.lc-index .lc-filter-sidebar input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}

/* === css-sync 2026-08-15: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.429, het filterpaneel bruikbaar maken op een telefoon
   ----------------------------------------------------------------------------
   WAT ER MIS WAS
   Op mobiel wordt de knop "Filters" zichtbaar en klapt de zijkolom open, maar er
   was geen enkele regel die de INHOUD mobiel maakt. Het raster van de zoekbalk
   hield zijn desktopvorm: vier kolommen plus een knopkolom van 180px, geperst in
   390 pixels. Gevolg op de schermafbeelding van 14 augustus:

     - labels afgekapt tot "BES", "REISP", "AANL", "TERU"
     - waarden tot "A." en "Fl..."
     - de knop "Zoek cruises" over de kolommen heen, half buiten beeld
     - kolommen die niet meer bij hun label horen

   Er BESTAAT een regel voor 600px die één kolom maakt, maar die geldt alleen voor
   .lct-searchbar-fields--two-rows buiten de zijkolom. In de zijkolom staat een
   regel met min-width: 1025px die hem daar op één kolom zet; onder die breedte
   valt hij terug op de desktopvorm. Precies omgekeerd van wat nodig is.

   DE OPLOSSING
   In de zijkolom onder 900px alles op één kolom, met volledige labels en velden
   die de breedte vullen. Niet "kleiner maken" maar "onder elkaar": een filter dat
   je niet kunt lezen is geen filter.
   ============================================================================ */
@media (max-width: 900px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows,
	.lc-index .lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-field,
	.lc-index .lc-filter-sidebar .lct-searchbar-field {
		grid-column: 1 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--lct-border) !important;
		padding: 12px 14px !important;
		min-width: 0;
	}
	/* Labels volledig: "BESTEMMING", niet "BES". */
	.lc-index #lc-filter-sidebar .lct-searchbar-label,
	.lc-index .lc-filter-sidebar .lct-searchbar-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 12px;
	}
	/* De waarde eronder ook: geen "A..." meer. */
	.lc-index #lc-filter-sidebar .lct-combo-current,
	.lc-index #lc-filter-sidebar .lct-combo-button,
	.lc-index .lc-filter-sidebar .lct-combo-current,
	.lc-index .lc-filter-sidebar .lct-combo-button {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		min-width: 0;
		width: 100%;
		text-align: left;
	}
	/* De zoekknop onderaan, over de volle breedte, niet als vijfde kolom. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
		padding: 14px !important;
		box-shadow: none !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary {
		width: 100%;
		min-height: 48px;
		max-height: none;
		justify-content: center;
	}
	/**
	 * DE UITKLAPLIJST BOVEN DE VOLGENDE VELDEN.
	 *
	 * Met alleen left/right op nul werd de lijst wel de juiste breedte, maar viel hij ACHTER de
	 * filtervelden eronder. Op de schermafbeelding van 14 augustus zag je de aantallen (61, 86, 20)
	 * rechts langs "Aanleghaven" en "Terugkomsthaven" heen schuiven: de lijst werd getekend, maar
	 * onder de velden die later in de HTML staan.
	 *
	 * Oorzaak is dezelfde als bij de zoekknop eerder vandaag: z-index werkt alleen binnen de eigen
	 * stapellaag, en .lct-combo had position: relative ZONDER z-index. Dan vormt het geen eigen
	 * laag en wordt de 900 van de lijst vergeleken binnen de laag van de ouder, niet met de rest van
	 * het paneel.
	 *
	 * Dus: het VELD met een open lijst krijgt een eigen laag. Niet permanent op alle velden, want
	 * dan wordt de stapelorde van het hele paneel onvoorspelbaar en schuift het probleem naar het
	 * volgende element.
	 */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open),
	.lc-index .lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open) {
		position: relative;
		z-index: 950 !important;
	}
	.lc-index #lc-filter-sidebar .lct-combo.is-open,
	.lc-index .lc-filter-sidebar .lct-combo.is-open {
		position: relative;
		z-index: 950 !important;
	}
	.lc-index #lc-filter-sidebar .lct-combo-list,
	.lc-index .lc-filter-sidebar .lct-combo-list {
		left: 0 !important;
		right: 0 !important;
		min-width: 0 !important;
		max-height: 55vh;
		z-index: 960 !important;
		/* Een lijst die half doorschijnend is loopt visueel door de velden eronder. */
		background: #fff;
		box-shadow: 0 12px 34px rgba(10, 37, 64, .26);
	}

	/**
	 * TERUGVAL voor browsers zonder :has().
	 *
	 * Safari kent :has() sinds 15.4 en Chrome sinds 105, dus vrijwel elke telefoon heeft het. Maar
	 * op een oudere iPhone zou de lijst zonder terugval weer achter de velden vallen, en dat is
	 * precies de fout die we hier oplossen. De JS zet is-open al op .lct-combo; deze regel hangt de
	 * laag daaraan op in plaats van aan de ouder.
	 *
	 * transform maakt van een element een eigen stapellaag, ook zonder z-index op de ouder. Dat is
	 * hier de goedkoopste manier om die laag te forceren.
	 */
	.lc-index #lc-filter-sidebar .lct-combo.is-open .lct-combo-list,
	.lc-index .lc-filter-sidebar .lct-combo.is-open .lct-combo-list {
		transform: translateZ(0);
	}
	/* Aanvinkvelden groot genoeg om te raken. */
	.lc-index #lc-filter-sidebar input[type="checkbox"],
	.lc-index .lc-filter-sidebar input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}

/* === css-sync 2026-08-15: 2 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.429, het filterpaneel bruikbaar maken op een telefoon
   ----------------------------------------------------------------------------
   WAT ER MIS WAS
   Op mobiel wordt de knop "Filters" zichtbaar en klapt de zijkolom open, maar er
   was geen enkele regel die de INHOUD mobiel maakt. Het raster van de zoekbalk
   hield zijn desktopvorm: vier kolommen plus een knopkolom van 180px, geperst in
   390 pixels. Gevolg op de schermafbeelding van 14 augustus:

     - labels afgekapt tot "BES", "REISP", "AANL", "TERU"
     - waarden tot "A." en "Fl..."
     - de knop "Zoek cruises" over de kolommen heen, half buiten beeld
     - kolommen die niet meer bij hun label horen

   Er BESTAAT een regel voor 600px die één kolom maakt, maar die geldt alleen voor
   .lct-searchbar-fields--two-rows buiten de zijkolom. In de zijkolom staat een
   regel met min-width: 1025px die hem daar op één kolom zet; onder die breedte
   valt hij terug op de desktopvorm. Precies omgekeerd van wat nodig is.

   DE OPLOSSING
   In de zijkolom onder 900px alles op één kolom, met volledige labels en velden
   die de breedte vullen. Niet "kleiner maken" maar "onder elkaar": een filter dat
   je niet kunt lezen is geen filter.
   ============================================================================ */
@media (max-width: 900px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows,
	.lc-index .lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-field,
	.lc-index .lc-filter-sidebar .lct-searchbar-field {
		grid-column: 1 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--lct-border) !important;
		padding: 12px 14px !important;
		min-width: 0;
	}
	/* Labels volledig: "BESTEMMING", niet "BES". */
	.lc-index #lc-filter-sidebar .lct-searchbar-label,
	.lc-index .lc-filter-sidebar .lct-searchbar-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 12px;
	}
	/* De waarde eronder ook: geen "A..." meer. */
	.lc-index #lc-filter-sidebar .lct-combo-current,
	.lc-index #lc-filter-sidebar .lct-combo-button,
	.lc-index .lc-filter-sidebar .lct-combo-current,
	.lc-index .lc-filter-sidebar .lct-combo-button {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		min-width: 0;
		width: 100%;
		text-align: left;
	}
	/* De zoekknop onderaan, over de volle breedte, niet als vijfde kolom. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
		padding: 14px !important;
		box-shadow: none !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary {
		width: 100%;
		min-height: 48px;
		max-height: none;
		justify-content: center;
	}
	/**
	 * DE UITKLAPLIJST BOVEN DE VOLGENDE VELDEN.
	 *
	 * Met alleen left/right op nul werd de lijst wel de juiste breedte, maar viel hij ACHTER de
	 * filtervelden eronder. Op de schermafbeelding van 14 augustus zag je de aantallen (61, 86, 20)
	 * rechts langs "Aanleghaven" en "Terugkomsthaven" heen schuiven: de lijst werd getekend, maar
	 * onder de velden die later in de HTML staan.
	 *
	 * Oorzaak is dezelfde als bij de zoekknop eerder vandaag: z-index werkt alleen binnen de eigen
	 * stapellaag, en .lct-combo had position: relative ZONDER z-index. Dan vormt het geen eigen
	 * laag en wordt de 900 van de lijst vergeleken binnen de laag van de ouder, niet met de rest van
	 * het paneel.
	 *
	 * Dus: het VELD met een open lijst krijgt een eigen laag. Niet permanent op alle velden, want
	 * dan wordt de stapelorde van het hele paneel onvoorspelbaar en schuift het probleem naar het
	 * volgende element.
	 */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open),
	.lc-index .lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open) {
		position: relative;
		z-index: 950 !important;
	}
	.lc-index #lc-filter-sidebar .lct-combo.is-open,
	.lc-index .lc-filter-sidebar .lct-combo.is-open {
		position: relative;
		z-index: 950 !important;
	}
	/**
	 * v5.0.431: op een telefoon een VAST PANEEL onderaan het scherm, geen uitklaplijst.
	 *
	 * WAAROM NIET NOG EEN RONDE MET Z-INDEX
	 * Drie rondes op rij hetzelfde beeld: de lijst valt achter de velden eronder. Elke keer met een
	 * hogere z-index, elke keer hetzelfde. De oorzaak is dat een uitklaplijst binnen een smalle,
	 * schuivende kolom vecht met alles wat later in de HTML staat, en dat gevecht win je niet met
	 * getallen, je moet eruit stappen.
	 *
	 * position: fixed haalt de lijst uit de kolom en hangt hem aan het scherm. Dan is er geen
	 * stapelorde meer om te verliezen: hij ligt over de pagina, niet ertussen.
	 *
	 * En het is op een telefoon gewoon beter: een lijst van zestig havens in een venster van 200
	 * pixels is niet te gebruiken. Onderaan het scherm, tot 70 procent hoog, met de zoekbalk bovenin
	 * bereikbaar. Dat is hoe elke app het doet, en om dezelfde reden.
	 *
	 * GEEN transform hier, en dat is met opzet: die maakt een containing block en dan zou fixed weer
	 * aan de kolom hangen in plaats van aan het scherm. Zie de uitleg hierboven.
	 */
	.lc-index #lc-filter-sidebar .lct-combo-list,
	.lc-index .lc-filter-sidebar .lct-combo-list {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-height: 85vh !important;
		margin: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		border: 0 !important;
		border-top: 1px solid var(--lct-border) !important;
		padding: 10px 12px 24px !important;
		background: #fff;
		box-shadow: 0 -10px 40px rgba(10, 37, 64, .3) !important;
		z-index: 100000 !important;
		overflow-y: auto;
		/* Ruimte voor de balk onderin de browser, anders valt de laatste haven eronder. */
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* Een greep bovenaan, zodat zichtbaar is dat dit een paneel is en geen deel van de pagina. */
	.lc-index #lc-filter-sidebar .lct-combo.is-open .lct-combo-list::before,
	.lc-index .lc-filter-sidebar .lct-combo.is-open .lct-combo-list::before {
		content: "";
		display: block;
		width: 42px;
		height: 4px;
		margin: 2px auto 12px;
		border-radius: 999px;
		background: #C9D5E2;
	}
	/* Grotere regels: dit is een lijst om met een vinger in te tikken. */
	.lc-index #lc-filter-sidebar .lct-combo-list .lct-combo-item,
	.lc-index .lc-filter-sidebar .lct-combo-list .lct-combo-item {
		min-height: 46px;
		font-size: 15px;
	}

	/**
	 * v5.0.431: HIER STOND EEN transform: translateZ(0), EN DIE WAS FOUT.
	 *
	 * Ik zette hem in 5.0.430 als terugval voor browsers zonder :has(): een transform maakt van een
	 * element een eigen stapellaag, dus dan zou de lijst boven de velden komen ook zonder z-index op
	 * de ouder.
	 *
	 * Wat ik niet had doordacht: een transform maakt óók een CONTAINING BLOCK. Alles binnen dat
	 * element wordt eraan opgehangen, en een positie buiten de eigen grenzen kan niet meer. De lijst
	 * kon daarmee juist niet meer over de velden eronder heen, precies het probleem dat de regel
	 * moest oplossen.
	 *
	 * Nagerekend met een scan op transform, filter en contain in alle stylesheets: dit was de ENIGE
	 * regel die een containing block maakte rond de filterlijst, en hij was van mij.
	 *
	 * De les: bij een opmaakprobleem dat na een fix hetzelfde blijft, eerst kijken of de fix zelf de
	 * oorzaak is geworden. Dat is vandaag drie rondes gaan zitten.
	 */
	/* Aanvinkvelden groot genoeg om te raken. */
	.lc-index #lc-filter-sidebar input[type="checkbox"],
	.lc-index .lc-filter-sidebar input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}
/* v5.0.432: het verduisteringsblok van 5.0.431 is HIER WEGGEHAALD.
   Het lag over het paneel heen omdat body::after buiten de stapelcontext van de
   filterkolom valt. De verduistering zit nu in de schaduw van het paneel zelf
   (0 0 0 100vmax), dus per definitie eronder. Zie main.css.

   LET OP: css-sync.py voegt blokken TOE maar verwijdert ze niet. Deze regel stond
   dus nog in index.css nadat hij uit main.css was gehaald, en zou de fout hebben
   teruggebracht. Bij het weghalen van CSS altijd BEIDE bestanden nalopen. */
@media (max-width: 900px) {
	body.lc-combo-open { overflow: hidden; }
}

/* === css-sync 2026-08-15: 2 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.429, het filterpaneel bruikbaar maken op een telefoon
   ----------------------------------------------------------------------------
   WAT ER MIS WAS
   Op mobiel wordt de knop "Filters" zichtbaar en klapt de zijkolom open, maar er
   was geen enkele regel die de INHOUD mobiel maakt. Het raster van de zoekbalk
   hield zijn desktopvorm: vier kolommen plus een knopkolom van 180px, geperst in
   390 pixels. Gevolg op de schermafbeelding van 14 augustus:

     - labels afgekapt tot "BES", "REISP", "AANL", "TERU"
     - waarden tot "A." en "Fl..."
     - de knop "Zoek cruises" over de kolommen heen, half buiten beeld
     - kolommen die niet meer bij hun label horen

   Er BESTAAT een regel voor 600px die één kolom maakt, maar die geldt alleen voor
   .lct-searchbar-fields--two-rows buiten de zijkolom. In de zijkolom staat een
   regel met min-width: 1025px die hem daar op één kolom zet; onder die breedte
   valt hij terug op de desktopvorm. Precies omgekeerd van wat nodig is.

   DE OPLOSSING
   In de zijkolom onder 900px alles op één kolom, met volledige labels en velden
   die de breedte vullen. Niet "kleiner maken" maar "onder elkaar": een filter dat
   je niet kunt lezen is geen filter.
   ============================================================================ */
@media (max-width: 900px) {
	.lc-index #lc-filter-sidebar .lct-searchbar-fields--two-rows,
	.lc-index .lc-filter-sidebar .lct-searchbar-fields--two-rows {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-field,
	.lc-index .lc-filter-sidebar .lct-searchbar-field {
		grid-column: 1 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--lct-border) !important;
		padding: 12px 14px !important;
		min-width: 0;
	}
	/* Labels volledig: "BESTEMMING", niet "BES". */
	.lc-index #lc-filter-sidebar .lct-searchbar-label,
	.lc-index .lc-filter-sidebar .lct-searchbar-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 12px;
	}
	/* De waarde eronder ook: geen "A..." meer. */
	.lc-index #lc-filter-sidebar .lct-combo-current,
	.lc-index #lc-filter-sidebar .lct-combo-button,
	.lc-index .lc-filter-sidebar .lct-combo-current,
	.lc-index .lc-filter-sidebar .lct-combo-button {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		min-width: 0;
		width: 100%;
		text-align: left;
	}
	/* De zoekknop onderaan, over de volle breedte, niet als vijfde kolom. */
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
		padding: 14px !important;
		box-shadow: none !important;
	}
	.lc-index #lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary,
	.lc-index .lc-filter-sidebar .lct-searchbar-submit--span .lct-btn-primary {
		width: 100%;
		min-height: 48px;
		max-height: none;
		justify-content: center;
	}
	/**
	 * DE UITKLAPLIJST BOVEN DE VOLGENDE VELDEN.
	 *
	 * Met alleen left/right op nul werd de lijst wel de juiste breedte, maar viel hij ACHTER de
	 * filtervelden eronder. Op de schermafbeelding van 14 augustus zag je de aantallen (61, 86, 20)
	 * rechts langs "Aanleghaven" en "Terugkomsthaven" heen schuiven: de lijst werd getekend, maar
	 * onder de velden die later in de HTML staan.
	 *
	 * Oorzaak is dezelfde als bij de zoekknop eerder vandaag: z-index werkt alleen binnen de eigen
	 * stapellaag, en .lct-combo had position: relative ZONDER z-index. Dan vormt het geen eigen
	 * laag en wordt de 900 van de lijst vergeleken binnen de laag van de ouder, niet met de rest van
	 * het paneel.
	 *
	 * Dus: het VELD met een open lijst krijgt een eigen laag. Niet permanent op alle velden, want
	 * dan wordt de stapelorde van het hele paneel onvoorspelbaar en schuift het probleem naar het
	 * volgende element.
	 */
	.lc-index #lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open),
	.lc-index .lc-filter-sidebar .lct-searchbar-field:has(.lct-combo.is-open) {
		position: relative;
		z-index: 950 !important;
	}
	.lc-index #lc-filter-sidebar .lct-combo.is-open,
	.lc-index .lc-filter-sidebar .lct-combo.is-open {
		position: relative;
		z-index: 950 !important;
	}
	/**
	 * v5.0.431: op een telefoon een VAST PANEEL onderaan het scherm, geen uitklaplijst.
	 *
	 * WAAROM NIET NOG EEN RONDE MET Z-INDEX
	 * Drie rondes op rij hetzelfde beeld: de lijst valt achter de velden eronder. Elke keer met een
	 * hogere z-index, elke keer hetzelfde. De oorzaak is dat een uitklaplijst binnen een smalle,
	 * schuivende kolom vecht met alles wat later in de HTML staat, en dat gevecht win je niet met
	 * getallen, je moet eruit stappen.
	 *
	 * position: fixed haalt de lijst uit de kolom en hangt hem aan het scherm. Dan is er geen
	 * stapelorde meer om te verliezen: hij ligt over de pagina, niet ertussen.
	 *
	 * En het is op een telefoon gewoon beter: een lijst van zestig havens in een venster van 200
	 * pixels is niet te gebruiken. Onderaan het scherm, tot 70 procent hoog, met de zoekbalk bovenin
	 * bereikbaar. Dat is hoe elke app het doet, en om dezelfde reden.
	 *
	 * GEEN transform hier, en dat is met opzet: die maakt een containing block en dan zou fixed weer
	 * aan de kolom hangen in plaats van aan het scherm. Zie de uitleg hierboven.
	 */
	.lc-index #lc-filter-sidebar .lct-combo-list,
	.lc-index .lc-filter-sidebar .lct-combo-list {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-height: 85vh !important;
		margin: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		border: 0 !important;
		border-top: 1px solid var(--lct-border) !important;
		padding: 10px 12px 24px !important;
		background: #fff;
		/* v5.0.432: zwaarder, want de verduistering is eruit. Dit is nu het enige
		   dat laat zien dat het paneel over de pagina ligt. */
		box-shadow: 0 -8px 24px rgba(10, 37, 64, .22), 0 -1px 0 rgba(10, 37, 64, .10), 0 0 0 100vmax rgba(10, 37, 64, .38) !important;
		z-index: 100000 !important;
		overflow-y: auto;
		/* Ruimte voor de balk onderin de browser, anders valt de laatste haven eronder. */
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* Een greep bovenaan, zodat zichtbaar is dat dit een paneel is en geen deel van de pagina. */
	.lc-index #lc-filter-sidebar .lct-combo.is-open .lct-combo-list::before,
	.lc-index .lc-filter-sidebar .lct-combo.is-open .lct-combo-list::before {
		content: "";
		display: block;
		width: 42px;
		height: 4px;
		margin: 2px auto 12px;
		border-radius: 999px;
		background: #C9D5E2;
	}
	/* Grotere regels: dit is een lijst om met een vinger in te tikken. */
	.lc-index #lc-filter-sidebar .lct-combo-list .lct-combo-item,
	.lc-index .lc-filter-sidebar .lct-combo-list .lct-combo-item {
		min-height: 46px;
		font-size: 15px;
	}

	/**
	 * v5.0.431: HIER STOND EEN transform: translateZ(0), EN DIE WAS FOUT.
	 *
	 * Ik zette hem in 5.0.430 als terugval voor browsers zonder :has(): een transform maakt van een
	 * element een eigen stapellaag, dus dan zou de lijst boven de velden komen ook zonder z-index op
	 * de ouder.
	 *
	 * Wat ik niet had doordacht: een transform maakt óók een CONTAINING BLOCK. Alles binnen dat
	 * element wordt eraan opgehangen, en een positie buiten de eigen grenzen kan niet meer. De lijst
	 * kon daarmee juist niet meer over de velden eronder heen, precies het probleem dat de regel
	 * moest oplossen.
	 *
	 * Nagerekend met een scan op transform, filter en contain in alle stylesheets: dit was de ENIGE
	 * regel die een containing block maakte rond de filterlijst, en hij was van mij.
	 *
	 * De les: bij een opmaakprobleem dat na een fix hetzelfde blijft, eerst kijken of de fix zelf de
	 * oorzaak is geworden. Dat is vandaag drie rondes gaan zitten.
	 */
	/* Aanvinkvelden groot genoeg om te raken. */
	.lc-index #lc-filter-sidebar input[type="checkbox"],
	.lc-index .lc-filter-sidebar input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}
/* ============================================================================
   v5.0.432: GEEN verduistering achter het filterpaneel
   ----------------------------------------------------------------------------
   In 5.0.431 zette ik hier een body::after met z-index 99999, met het paneel op
   100000. Dat leek te kloppen, maar het paneel ligt in .lc-filter-sidebar en die
   kolom vormt een eigen stapelcontext. Binnen zo'n context geldt de 100000 alleen
   ten opzichte van broertjes in diezelfde context; body::after zit erbuiten en ligt
   er dus altijd bovenop. Gevolg: het paneel zelf werd ook gedimd.

   Dat is de VIJFDE keer vandaag dat een stapelcontext van een ouder een z-index
   betekenisloos maakt. Ik ga er geen zesde regel tegenaan zetten: het paneel heeft
   een zware schaduw en een duidelijke rand, en dat is genoeg om te zien dat het
   over de pagina ligt.

   Wat WEL blijft: de pagina eronder scrollt niet meer terwijl het paneel open
   staat. Dat is functioneel, niet decoratief, en het werkt zonder stapelorde.
   ============================================================================ */
@media (max-width: 900px) {
	body.lc-combo-open { overflow: hidden; }
}

/* === css-sync 2026-08-15: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.432: GEEN verduistering achter het filterpaneel
   ----------------------------------------------------------------------------
   In 5.0.431 zette ik hier een body::after met z-index 99999, met het paneel op
   100000. Dat leek te kloppen, maar het paneel ligt in .lc-filter-sidebar en die
   kolom vormt een eigen stapelcontext. Binnen zo'n context geldt de 100000 alleen
   ten opzichte van broertjes in diezelfde context; body::after zit erbuiten en ligt
   er dus altijd bovenop. Gevolg: het paneel zelf werd ook gedimd.

   Dat is de VIJFDE keer vandaag dat een stapelcontext van een ouder een z-index
   betekenisloos maakt. Ik ga er geen zesde regel tegenaan zetten: het paneel heeft
   een zware schaduw en een duidelijke rand, en dat is genoeg om te zien dat het
   over de pagina ligt.

   Wat WEL blijft: de pagina eronder scrollt niet meer terwijl het paneel open
   staat. Dat is functioneel, niet decoratief, en het werkt zonder stapelorde.
   ============================================================================ */
@media (max-width: 900px) {
	body.lc-combo-open { overflow: hidden; }

	/**
	 * v5.0.434, de rest van het formulier VERBERGEN zolang een lijst open staat.
	 *
	 * WAAROM DIT DE OPLOSSING IS EN GEEN ZEVENDE Z-INDEX
	 * Zes rondes op rij ging het over stapelorde: de lijst achter de velden, de
	 * verduistering over het paneel, een transform die een containing block maakte.
	 * Elke keer een andere oorzaak, elke keer hetzelfde beeld. De reden dat het
	 * blijft terugkomen: een vast gepositioneerd paneel binnen een kolom die zelf
	 * een stapelcontext vormt, met vijftien broertjes die er allemaal overheen
	 * kunnen vallen. Dat gevecht is niet te winnen met getallen.
	 *
	 * Hier valt de strijd weg: wat niet zichtbaar is kan niet overlappen.
	 *
	 * EN HET IS INHOUDELIJK BETER
	 * Je bent een haven aan het kiezen. De velden "Type cruise" en "Prijs" hoeven
	 * dan niet in beeld; je komt er zo weer bij zodra je op Toepassen tikt. Dat is
	 * hoe een keuzepaneel op een telefoon hoort te werken.
	 *
	 * visibility en niet display: none. Met display verdwijnt de hoogte en springt
	 * de pagina eronder omhoog; bij het sluiten sta je dan op een andere plek dan
	 * waar je begon. Met visibility blijft de ruimte staan.
	 *
	 * Het veld MET de open lijst blijft zichtbaar: dat is de kop van het paneel, en
	 * daar staat welk filter je aan het instellen bent.
	 */
	/* v5.0.435: de per-veld-regel is hier weggehaald; de hele kolom wordt nu verborgen. */
	/**
	 * TERUGVAL zonder :has(): de klasse lc-veld-open, gezet door de JS.
	 *
	 * Op een browser zonder :has() faalt de :not(:has(...)) hierboven en wordt de hele selector
	 * genegeerd, dan blijft alles zichtbaar en is er niets stuk. Maar het omgekeerde risico is
	 * erger: als :has() gedeeltelijk wordt begrepen zou het OPEN veld ook verdwijnen, en dan kun je
	 * geen haven meer kiezen.
	 *
	 * Deze twee regels zetten de zichtbaarheid van het open veld en zijn lijst expliciet terug. Ze
	 * hangen aan een klasse en niet aan :has(), dus ze werken in elke browser.
	 */
	body.lc-combo-open .lct-searchbar-field.lc-veld-open,
	body.lc-combo-open .lct-searchbar-field.lc-veld-open * {
		visibility: visible;
	}
	body.lc-combo-open .lct-combo.is-open,
	body.lc-combo-open .lct-combo.is-open * {
		visibility: visible;
	}
}

/* === css-sync 2026-08-15: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.432: GEEN verduistering achter het filterpaneel
   ----------------------------------------------------------------------------
   In 5.0.431 zette ik hier een body::after met z-index 99999, met het paneel op
   100000. Dat leek te kloppen, maar het paneel ligt in .lc-filter-sidebar en die
   kolom vormt een eigen stapelcontext. Binnen zo'n context geldt de 100000 alleen
   ten opzichte van broertjes in diezelfde context; body::after zit erbuiten en ligt
   er dus altijd bovenop. Gevolg: het paneel zelf werd ook gedimd.

   Dat is de VIJFDE keer vandaag dat een stapelcontext van een ouder een z-index
   betekenisloos maakt. Ik ga er geen zesde regel tegenaan zetten: het paneel heeft
   een zware schaduw en een duidelijke rand, en dat is genoeg om te zien dat het
   over de pagina ligt.

   Wat WEL blijft: de pagina eronder scrollt niet meer terwijl het paneel open
   staat. Dat is functioneel, niet decoratief, en het werkt zonder stapelorde.
   ============================================================================ */
@media (max-width: 900px) {
	body.lc-combo-open { overflow: hidden; }

	/**
	 * v5.0.435, de HELE filterkolom onzichtbaar, niet de velden apart.
	 *
	 * In 5.0.434 verborg ik de velden één voor één met visibility: hidden. Dat werkte tegen de
	 * overlap, maar liet een lege doos van vijfhonderd pixels achter: de kolom zelf bleef staan met
	 * zijn witte vlak en rand, en daarbinnen niets. Dat ziet uit als een stuk pagina dat niet is
	 * geladen.
	 *
	 * Nu de kolom als geheel. Dan blijft er geen doos over, alleen de verduistering en het paneel
	 * eronder, zoals een keuzepaneel in elke app.
	 *
	 * En het paneel gaat naar 85 procent van de schermhoogte. Bij 70 procent bleef er bovenaan een
	 * strook leegte die nergens bij hoorde; met 85 procent vult het paneel plus de verduistering het
	 * beeld en is er niets meer te zien dat afleidt.
	 *
	 * visibility en niet display: none, want de kolom moet zijn hoogte houden. Anders springt de
	 * pagina bij het sluiten naar een andere plek dan waar je begon.
	 */
	body.lc-combo-open .lc-index #lc-filter-sidebar,
	body.lc-combo-open .lc-index .lc-filter-sidebar {
		visibility: hidden;
	}
	/* Het open veld en zijn lijst blijven zichtbaar; die vormen samen het paneel. */
	body.lc-combo-open .lct-searchbar-field.lc-veld-open,
	body.lc-combo-open .lct-searchbar-field.lc-veld-open *,
	body.lc-combo-open .lct-combo.is-open,
	body.lc-combo-open .lct-combo.is-open * {
		visibility: visible;
	}
	/* De knop van het open veld hoeft niet: de lijst heeft zijn eigen kop. */
	body.lc-combo-open .lct-searchbar-field.lc-veld-open .lct-combo-button {
		visibility: hidden;
	}
}

/* === css-sync 2026-08-15: 2 blok(ken) bijgewerkt vanuit main.css === */

/* === HERO === */
.lct-hero {
	position: relative;
	/* v5.0.315: 30% lager (was 720px). Een hero van 720 px duwt op een laptop alles
	   onder de vouw; met 504 px zie je de zoekbalk en het aanbod meteen.

	   v5.0.319: MIN-height in plaats van height. Met een vaste hoogte plus overflow:hidden
	   werd alles wat niet paste gewoon afgesneden, op mobiel verdwenen daardoor de
	   tagline en de knoppen onder de rand. Nu is 504 px de ondergrens en groeit het vlak
	   mee als de inhoud meer ruimte nodig heeft. */
	/**
	 * v5.0.436: de hoogte schaalt mee met de breedte, voor het nieuwe hero-beeld.
	 *
	 * De nieuwe video is een uitsnede van 2,4:1 (dek links, water rechts, gefilmd recht naar
	 * beneden vanaf het balkon). Met een vaste hoogte van 504 px sneed object-fit: cover daar op een
	 * breed scherm 37 procent van af, en dan verdwijnt precies de reling die de compositie maakt.
	 *
	 * Doorgerekend per schermbreedte:
	 *
	 *   1440 px breed, 504 hoog  ->  2,86:1  ->  16% van het beeld weg
	 *   1440 px breed, 576 hoog  ->  2,50:1  ->   4% weg
	 *   1920 px breed, 620 hoog  ->  3,10:1  ->  23% weg
	 *
	 * Vandaar clamp: 504 px blijft de ondergrens (v5.0.315 koos die bewust, want 720 px duwde de
	 * zoekbalk onder de vouw), 40vw laat de hoogte meelopen met de breedte, en 620 px is het plafond
	 * zodat een groot scherm geen halve pagina hero krijgt.
	 *
	 * Nog steeds MIN-height en geen height: bij veel inhoud moet het vlak kunnen groeien, anders
	 * sneuvelen de tagline en de knoppen (v5.0.319).
	 */
	min-height: clamp(504px, 40vw, 620px);
	overflow: hidden;
	/* v4.2.43: fallback gradient, alleen zichtbaar als de hero-img faalt te laden.
	   Als de img wel laadt overlapt 'ie deze gradient volledig (object-fit: cover). */
	background: linear-gradient(135deg, #1e3a5f 0%, #0F75BC 50%, #2563eb 100%);
}
/* v5.0.315: onderkant van de film naar boven gedrukt.
   Bij een lagere hero snijdt object-fit: cover standaard vanuit het midden, waardoor de
   horizon en de lucht wegvallen en je vooral water overhoudt. Met een uitsnede op 70%
   schuift de zichtbare band naar beneden in het beeld: de onderrand van de film komt
   omhoog en de interessante helft blijft staan. */
.lct-hero-image, .lct-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* v5.0.436: center, niet 70%. De oude waarde schoof het beeld omhoog omdat de
	   bronvideo een hoge staander was; de nieuwe is al uitgesneden op de juiste band,
	   dus verschuiven haalt er alleen weer iets af. */
	object-position: center center;
}

/* === css-sync 2026-08-16: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.437, invoervelden op 16px, zodat iOS niet inzoomt
   ----------------------------------------------------------------------------
   HET PROBLEEM
   Safari op iOS zoomt automatisch in zodra je een invoerveld aantikt waarvan de
   letter kleiner is dan 16 pixels. De pagina schuift dan opzij, staat scheef, en
   de bezoeker moet handmatig uitzoomen om verder te kunnen.

   Nagemeten: 36 regels in deze stylesheet zetten een invoerveld op 13,5 tot 15
   pixels. Er stond één vangnet, maar dat dekt alleen het zoekveld in een
   filterlijst. Alle andere velden zoomen dus: het contactformulier, de
   offerte-aanvraag, de nieuwsbrief, de zoekbalk, de sorteerkeuzes.

   DE OPLOSSING
   Onder 900 pixels alles op 16px. Dat is precies de grens waaronder iOS ingrijpt,
   dus 16 is genoeg; groter maken zou de opmaak onnodig veranderen.

   Alleen op mobiel: op een desktop is 14px prettig en zoomt niets. Zo blijft de
   vormgeving daar zoals hij was.

   pointer: coarse zit er BEWUST niet bij. De bestaande vangnetregel gebruikt dat
   wel, maar een iPad met een toetsenbord meldt zich als fine pointer en zoomt
   evengoed. De schermbreedte is hier de betrouwbaardere maat.
   ============================================================================ */
@media (max-width: 900px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="password"],
	input[type="date"],
	input[type="time"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* === css-sync 2026-08-18: 1 blok(ken) bijgewerkt vanuit main.css === */

/* ============================================================================
   v5.0.587 / v5.0.439, hidden moet WERKEN op elementen met een display-regel
   ----------------------------------------------------------------------------
   Het hidden-attribuut werkt via de stylesheet van de browser: [hidden] krijgt
   display: none. Maar die regel heeft de specificiteit van een ATTRIBUUT, en een
   klasse met display: flex of grid wint daarvan. Zo'n element blijft dus zichtbaar
   met hidden erop, en JavaScript die het attribuut zet doet niets.

   Op 18 augustus 2026 kostte dat twee versies aan een verkeerde diagnose: het
   appoverzicht stond altijd open, en ik zocht het bij de grootte van de sluitknop.
   Die knoppen werkten prima; ze zetten alleen een attribuut zonder effect.

   Deze elementen worden alle 5 met hidden geschakeld en hebben een display-regel
   in een klasse, gevonden door de klassen te vergelijken die in de HTML een
   hidden-attribuut krijgen met de klassen die display zetten. Zonder deze regel is
   het bij elk ervan wachten tot het opvalt.
   ============================================================================ */
.lc-favorites-actions[hidden],
.lc-favorites-grid[hidden],
.lc-shared-card-grid[hidden],
.lct-btn-outline[hidden],
.lct-mega[hidden] {
	display: none !important;
}

/* === css-sync 2026-08-23: 3 blok(ken) bijgewerkt vanuit main.css === */

.lct-fooi-status strong.ja { color: #0E7C48; }
.lct-fooi-status strong.nee { color: #8A6D1E; }
@media (min-width: 640px) {
	.lct-fooi-kaart { grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
	.lct-fooi-note { grid-column: 1 / -1; }
}

/* =====================================================
   v5.0.464, de resultatenpagina mag meegroeien met het scherm

   .lc-results-layout stond vast op 1280px terwijl de rest van de site op een breed scherm tot
   1580px groeit. Op een monitor van 1900px bleef daardoor een derde leeg en werd de filterkolom
   op 300px gehouden, vandaar dat elk filter er krap uitzag: foto, naam, subgebied en aantal
   vochten om drie vingers breedte.

   Nu volgt de layout dezelfde variabele als de container, en krijgt de filterkolom naar rato
   meer ruimte: 340px vanaf 1025px, 380px vanaf 1500px, 420px vanaf 1700px. De resultaten krijgen
   wat overblijft, en dat is op elk formaat méér dan eerst.

   Later in het bestand dan de oorspronkelijke regels, en met dezelfde specificiteit: wat later
   staat wint. Zie harde regel 4 uit de overdracht.
   ===================================================== */
.lc-index .lc-results-layout {
	max-width: var(--lct-container, 1280px);
}
@media (min-width: 1025px) {
	.lc-index .lc-results-layout {
		/* v5.0.507: smaller. In 5.0.464 groeide deze kolom mee met het scherm omdat de
		   filters krap stonden. Dat is opgelost door de inhoud, niet door de breedte: de
		   foto's zijn eruit en de lijsten klappen uit. Een kolom van 420 pixels naast een
		   compacte resultatenlijst is uit verhouding, het filter mag niet zwaarder wegen
		   dan waar je naar zoekt. */
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 26px;
	}
}
@media (min-width: 1500px) {
	.lc-index .lc-results-layout {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: 30px;
	}
}
@media (min-width: 1700px) {
	.lc-index .lc-results-layout {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 34px;
	}
	/* v5.0.507: geen extra binnenruimte meer; die was er om een brede kolom te vullen. */
}

/* =====================================================
   v5.0.492, pas zoeken als je erop klikt
   ===================================================== */
[data-lc-zoekknop].is-wacht {
	animation: lcZoekPuls 1.6s ease-in-out infinite;
	box-shadow: 0 0 0 3px rgba(242,176,30,.45);
}
@keyframes lcZoekPuls {
	0%, 100% { box-shadow: 0 0 0 3px rgba(242,176,30,.45); }
	50%      { box-shadow: 0 0 0 7px rgba(242,176,30,.12); }
}
@media (prefers-reduced-motion: reduce) { [data-lc-zoekknop].is-wacht { animation: none; } }

.lc-zoekbalk-mobiel { display: none; }
@media (max-width: 1024px) {
	.lc-zoekbalk-mobiel {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9200;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
		border-top: 1px solid var(--lct-border, #E4EAF1);
		box-shadow: 0 -6px 20px rgba(10,37,64,.10);
	}
	.lc-zoekbalk-mobiel[hidden] { display: none; }
	.lc-zoekbalk-mobiel button { width: 100%; justify-content: center; }
}

/* v5.0.508, een filterkeuze zonder resultaten wordt grijs, maar blijft aanklikbaar.
   Verbergen zou hem laten verspringen terwijl je erop mikt; en een aangevinkte keuze
   met nul resultaten moet je juist kunnen uitvinken. */
/* v5.0.515: keuzes zonder resultaten worden VERBORGEN.
   Eerst maakte ik ze grijs, om te voorkomen dat de lijst verspringt. Maar een lijst
   met tweehonderd havens waarvan er honderdtachtig grijs zijn, is onbruikbaar.
   Wat je zelf hebt aangevinkt krijgt deze klasse niet, dus je kunt je eigen keuze
   altijd terugvinden en uitzetten. */
.lct-combo-item-multi.is-leeg { display: none !important; }

/* =====================================================
   v5.0.514, havenfilters uitgeklapt, net als rederij en bestemming
   Ze hadden als enige een uitklapvenster; dat gaf drie versies lang gedoe met
   het sluiten. Nu hetzelfde gedrag als de rest, met een vaste hoogte en een
   schuifbalk omdat de lijst lang is.
   ===================================================== */
@media (min-width: 1025px) {
	.lc-index #lc-filter-sidebar [data-filter^="haven-"] .lct-combo-scroll {
		max-height: 240px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	/* De zoekregel blijft staan terwijl je door de lijst scrolt. */
	.lc-index #lc-filter-sidebar [data-filter^="haven-"] .lct-combo-search {
		position: sticky;
		top: 0;
		z-index: 2;
		background: #fff;
	}
}

/* =====================================================
   v5.0.516, het vrije zoekveld bovenaan, compacter
   ===================================================== */
.lc-index .lc-slimzoek { margin: 0 0 12px; }
.lc-index .lc-slimzoek-label { display: none; }
.lc-index .lc-slimzoek-rij { display: flex; gap: 8px; }
.lc-index .lc-slimzoek-veld { flex: 1 1 auto; min-width: 0; }
.lc-index .lc-slimzoek-hint { display: none; }
/* De uitleg verschijnt pas als je het veld gebruikt: anders staan er drie regels
   op elke pagina waar niemand het veld aanraakt. */
.lc-index .lc-slimzoek:focus-within .lc-slimzoek-hint { display: block; margin: 6px 0 0; font-size: 12px; }

/* === css-sync 2026-09-27: 47 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.538: de bovenbalk blijft op mobiel verborgen, MAAR een melding niet.
   De contactregel met openingstijden hoeft niet op een telefoon, die staat in het menu en
   onderaan. Maar "vandaag beperkt bereikbaar" is nieuws, en nieuws verberg je niet voor de
   helft van je bezoekers. Dus: de balk blijft weg, de meldingsregels blijven staan. */
@media (max-width: 700px) {
	.lct-topbar { display: none; }
	.lct-topbar.lct-topbar-dinsdag,
	.lct-topbar.lct-topbar-reis { display: block; padding: 0; }
	.lct-topbar.lct-topbar-dinsdag .lct-topbar-inner,
	.lct-topbar.lct-topbar-reis .lct-topbar-inner { display: none; }
}
@media (max-width: 1100px) { .lct-kl-rooster--club { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.lct-kl-rooster { grid-template-columns: 1fr; }
	.lct-kl-rooster--club { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lct-kl-beeld { max-height: 200px; }
	.lct-kl--club .lct-kl-beeld--pas { height: 84px; }
}
/* =====================================================
   v5.0.465, homepage inkorten, overdracht "model A v2"
   Alles hier is aanvullend en staat later in het bestand dan de oorspronkelijke regels,
   dus het wint bij gelijke specificiteit (harde regel 4).
   ===================================================== */

/* Punt 1, bereikbaarheid in de bovenbalk: groene stip, grijs als Danny dicht is. */
.lct-topbar-open { font-weight: 700; }
.lct-topbar-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); flex: none; }
.lct-topbar-open.is-dicht { font-weight: 500; opacity: .85; }
.lct-topbar-open.is-dicht .lct-topbar-dot { background: #9AA7B5; box-shadow: none; }
@media (max-width: 1100px) { .lct-destinations--zes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .lct-destinations--zes { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.lct-destinations--zes .lct-destination-card--extra { display: block; }
@media (max-width: 1200px) { .lct-stories-grid--kaarten { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .lct-stories-grid--kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lct-stories-grid--kaarten { grid-template-columns: 1fr; } }
.lct-stories-grid--kaarten .lct-story-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
	border: 1px solid var(--lct-border, #E5E7EB); box-shadow: 0 1px 2px rgba(10,37,64,0.04), 0 6px 18px rgba(10,37,64,0.06);
	text-decoration: none; color: var(--lct-text); transition: transform .18s ease, box-shadow .18s ease; }
.lct-stories-grid--kaarten .lct-story-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(10,37,64,0.05), 0 12px 28px rgba(10,37,64,0.10); }
@media (max-width: 560px) { .lcd-dag-eilandje { font-size: 12px; padding: 1px 6px; margin-left: 6px; } }
/* =====================================================
   v5.0.485: "Ook een paar dagen naar de parken?" op een Disney-cruisepagina
   Alleen zichtbaar bij een vertrekhaven in Florida; zie de toelichting in
   letscruise/cruiseonly/secties.php.
   ===================================================== */
.lcd-disneyland-lead { margin: 0 0 18px; color: var(--lct-text-soft, #42576E); }
@media (max-width: 860px) { .lcd-disneyland-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lct-blog-aanbod { padding: 30px 0 4px; } }
@media (max-width: 1100px) { .lct-havens-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .lct-havens-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* =====================================================
   v5.0.527, voertaal aan boord
   Vlaggetjes als tekst, dus geen extra verzoek en ze schalen mee met de tekst.
   ===================================================== */
.lct-voertaal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	margin: 0 0 16px; padding: 12px 14px; background: #F6FAFD;
	border: 1px solid var(--lct-border, #E4EAF1); border-radius: 12px; }
.lct-voertaal-l { font-size: 12px; font-weight: 800; letter-spacing: .4px;
	text-transform: uppercase; color: #5F7288; }
.lct-voertaal-v { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* v5.0.529: eigen tekstkleur, want dit blok staat ook op een DONKERE sectie.
   Op de rederijpagina erft de tekst daar wit, en dan is "Engels" wit op een witte pil:
   onzichtbaar. Een component dat op twee achtergronden staat, moet zijn eigen kleuren
   meebrengen en niets erven. */
.lct-taal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
	border-radius: 100px; background: #fff; border: 1px solid #E1E9F1; font-size: 13px;
	color: #12283F; }
.lct-voertaal { color: #42576E; }
.lct-voertaal-l { color: #5F7288; }
.lct-voertaal-note { color: #42576E; }
.lct-voertaal-en { color: #5F7288; }
.lct-taal i { font-style: normal; font-size: 15px; line-height: 1; }
.lct-taal.is-hoofd { font-weight: 800; border-color: #F2D9A0; background: #FFFDF7; }
.lct-voertaal-note { flex: 1 1 100%; margin: 2px 0 0; font-size: 13.5px; line-height: 1.55;
	color: var(--lct-text-soft, #42576E); }
/* v5.0.528, de vaste regel dat het personeel Engels spreekt.
   Kleiner en lichter dan de toelichting: het is een geruststelling, geen waarschuwing. */
.lct-voertaal-en { flex: 1 1 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5;
	color: #5F7288; }
/* =====================================================
   v5.0.532, dinsdagmelding en reactietijden
   ===================================================== */
.lct-topbar-dinsdagrow { display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 7px 16px; background: rgba(242,176,30,.16);
	border-bottom: 1px solid rgba(242,176,30,.3); font-size: 13px; color: #fff; }
.lct-dinsdag-dot { width: 8px; height: 8px; border-radius: 50%; background: #F2B01E;
	box-shadow: 0 0 0 3px rgba(242,176,30,.25); flex: 0 0 auto; }
.lct-dinsdag-txt strong { font-weight: 800; }
@media (max-width: 560px) {
	.lct-topbar-dinsdagrow { font-size: 12px; padding: 6px 12px; text-align: center; }
}
/* De reactietijden in het megamenu: twee beloftes en een voorbehoud. */
.lct-mega-reactie { display: flex; flex-direction: column; gap: 3px; margin-top: 10px;
	padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.lct-mega-reactie b { color: #F2B01E; }
.lct-mega-reactie-di { margin-top: 3px; font-size: 12px; opacity: .75; }
/* =====================================================
   v5.0.540, zoeksuggesties in het menu, met pictogram en toelichting
   ===================================================== */
.lct-mega-zoekhit { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
	border-radius: 8px; color: inherit; text-decoration: none; }
.lct-mega-zoekhit:hover { background: rgba(255,255,255,.08); color: inherit; }
.lct-mega-zoekicon { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.lct-mega-zoektxt { display: flex; flex-direction: column; min-width: 0; }
.lct-mega-zoektxt b { font-weight: 700; font-size: 14px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; }
.lct-mega-zoektxt small { font-size: 12px; opacity: .7; }
@media (min-width: 769px) {
	.lct-searchbar-tabs { flex-wrap: wrap; row-gap: 6px; overflow: visible; }
}

/* === css-sync 2026-09-29: 11 blok(ken) bijgewerkt vanuit main.css === */

/* v5.0.626: de zoekvaart, een schip over een stippellijn met kielzog (vervangt de spinner). */
.lc-index .lc-zoekvaart { gap: 14px; }
.lc-index .lc-zoekvaart-baan { display: block; width: 132px; height: 26px; flex: 0 0 auto; }
.lc-index .lc-zoekvaart-baan svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-index .lc-zoekvaart-schip { transform-box: view-box; animation: lcZoekVaart 1.8s cubic-bezier(.45,.05,.4,1) infinite; }
.lc-index .lc-zoekvaart-zog { animation: lcZoekZog 1.8s cubic-bezier(.45,.05,.4,1) infinite; }
@keyframes lcZoekVaart { 0% { transform: translate(0, 5px) rotate(0deg); } 25% { transform: translate(26px, 4px) rotate(-3deg); } 50% { transform: translate(53px, 5px) rotate(2deg); } 75% { transform: translate(80px, 4px) rotate(-2deg); } 100% { transform: translate(106px, 5px) rotate(0deg); } }
@keyframes lcZoekZog { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 18; } }
/* de resultaten eronder: een glans die overloopt zolang er gezocht wordt */
.lc-index .lc-results-layout.is-filtering .lc-results-column { position: relative; opacity: 0.6; }
.lc-index .lc-results-layout.is-filtering .lc-results-column::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--lct-radius-lg); background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%); background-size: 250% 100%; animation: lcZoekGlans 1.2s linear infinite; }
@keyframes lcZoekGlans { from { background-position: 120% 0; } to { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .lc-index .lc-zoekvaart-schip, .lc-index .lc-zoekvaart-zog, .lc-index .lc-results-layout.is-filtering .lc-results-column::after { animation: none; } .lc-index .lc-zoekvaart-zog { stroke-dashoffset: 0; } }