/* GI Travel — "Voyager" UI layer (v3.0.0)
 *
 * Loaded IN ADDITION TO gitp-frontend.css, never instead of it. Everything here is namespaced under
 * .gitp-vy so none of the six existing single-page templates or seven showcase layouts can be affected
 * by it — a site that never selects a Voyager template renders exactly as it did on v2.1.0.
 *
 * Colour still flows from the same --gitp-* custom properties the style presets set (see the preset
 * blocks at the top of gitp-frontend.css), so Light/Dark/Elegant/Creative/Professional keep working and
 * Elementor's Style tab can still override per-instance. The tokens added below are derived extras that
 * the denser Voyager surfaces need (a deep shade for headers, a warm accent for deals/urgency, a green
 * for inclusions, a red for exclusions) — each falls back to the accent when a preset doesn't define it.
 */

.gitp-vy {
	--vy-accent: var(--gitp-accent, #2563eb);
	--vy-accent-deep: color-mix(in srgb, var(--vy-accent) 78%, #04122e);
	--vy-accent-soft: color-mix(in srgb, var(--vy-accent) 10%, #ffffff);
	--vy-accent-line: color-mix(in srgb, var(--vy-accent) 26%, #ffffff);

	--vy-deal: #f97316;
	--vy-deal-soft: #fff4ea;
	--vy-yes: #0f9d58;
	--vy-yes-soft: #eaf7f0;
	--vy-no: #d93025;
	--vy-no-soft: #fdeeed;
	--vy-star: #f5a623;

	--vy-text: var(--gitp-text, #1f2430);
	--vy-muted: var(--gitp-muted, #6b7280);
	--vy-faint: color-mix(in srgb, var(--vy-muted) 62%, #ffffff);
	--vy-card: var(--gitp-card-bg, #ffffff);
	--vy-line: var(--gitp-border, #e5e7eb);
	--vy-wash: color-mix(in srgb, var(--vy-line) 32%, #ffffff);

	--vy-r-sm: 8px;
	--vy-r: 12px;
	--vy-r-lg: 16px;
	--vy-r-xl: 22px;

	--vy-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
	--vy-sh-2: 0 4px 10px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .08);
	--vy-sh-3: 0 12px 24px rgba(16, 24, 40, .1), 0 28px 60px rgba(16, 24, 40, .12);

	/* Offset used by every sticky surface. A theme with a fixed header sets --vy-header-offset from the
	 * plugin settings field so the sticky sub-nav parks *below* that header instead of under it. */
	--vy-header-offset: 0px;
	--vy-nav-h: 56px;

	color: var(--vy-text);
	font-family: var(--gitp-font, inherit);
	-webkit-font-smoothing: antialiased;
}

.gitp-vy *,
.gitp-vy *::before,
.gitp-vy *::after { box-sizing: border-box; }

.gitp-vy img { max-width: 100%; height: auto; display: block; }

.gitp-vy-shell {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* Dark preset needs the "white" side of each colour-mix flipped, otherwise the soft washes go milky. */
.gitp-preset-dark .gitp-vy {
	--vy-accent-soft: color-mix(in srgb, var(--vy-accent) 16%, #0b0f19);
	--vy-accent-line: color-mix(in srgb, var(--vy-accent) 34%, #0b0f19);
	--vy-faint: color-mix(in srgb, var(--vy-muted) 70%, #0b0f19);
	--vy-wash: color-mix(in srgb, var(--vy-line) 45%, #0b0f19);
	--vy-deal-soft: color-mix(in srgb, var(--vy-deal) 18%, #0b0f19);
	--vy-yes-soft: color-mix(in srgb, var(--vy-yes) 18%, #0b0f19);
	--vy-no-soft: color-mix(in srgb, var(--vy-no) 18%, #0b0f19);
	--vy-sh-2: 0 8px 24px rgba(0, 0, 0, .5);
	--vy-sh-3: 0 18px 50px rgba(0, 0, 0, .6);
}

/* =============================================================================================
 * Shared atoms
 * ========================================================================================== */

.gitp-vy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.gitp-vy-btn:hover { transform: translateY(-1px); }
.gitp-vy-btn:active { transform: translateY(0); }
.gitp-vy-btn:focus-visible { outline: 3px solid var(--vy-accent-line); outline-offset: 2px; }

.gitp-vy-btn-primary {
	background: linear-gradient(180deg, var(--vy-accent) 0%, var(--vy-accent-deep) 100%);
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--vy-accent) 34%, transparent);
}
.gitp-vy-btn-primary:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--vy-accent) 42%, transparent); }

.gitp-vy-btn-deal {
	background: linear-gradient(180deg, #fb923c 0%, var(--vy-deal) 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(249, 115, 22, .34);
}

.gitp-vy-btn-ghost {
	background: transparent;
	color: var(--vy-accent);
	border-color: var(--vy-accent-line);
}
.gitp-vy-btn-ghost:hover { background: var(--vy-accent-soft); border-color: var(--vy-accent); }

.gitp-vy-btn-sm { padding: 9px 16px; font-size: 13.5px; }
.gitp-vy-btn-block { width: 100%; }

.gitp-vy-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--vy-wash);
	border: 1px solid var(--vy-line);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vy-muted);
	white-space: nowrap;
}
.gitp-vy-pill svg { width: 14px; height: 14px; flex: none; }

.gitp-vy-pill-accent { background: var(--vy-accent-soft); border-color: var(--vy-accent-line); color: var(--vy-accent-deep); }
.gitp-vy-pill-deal { background: var(--vy-deal-soft); border-color: color-mix(in srgb, var(--vy-deal) 34%, #fff); color: #b45309; }
.gitp-vy-pill-yes { background: var(--vy-yes-soft); border-color: color-mix(in srgb, var(--vy-yes) 30%, #fff); color: #0b6b3d; }

.gitp-vy-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: var(--vy-r-sm);
	background: var(--vy-yes);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
}
.gitp-vy-rating svg { width: 13px; height: 13px; fill: currentColor; }

.gitp-vy-stars { display: inline-flex; gap: 1px; color: var(--vy-star); }
.gitp-vy-stars svg { width: 14px; height: 14px; fill: currentColor; }

.gitp-vy-eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vy-muted);
}

.gitp-vy-sec-head { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.gitp-vy-sec-sub { margin: 0 0 18px; color: var(--vy-muted); font-size: 14.5px; }

.gitp-vy-card {
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-1);
}

/* Screen-reader-only text — used on icon-only controls so the sticky bars stay accessible. */
.gitp-vy-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================================
 * Sticky in-page sub-navigation (Overview / Itinerary / Hotels / Inclusions / Policies / FAQ)
 * Scroll-spy state (.is-active) is set by gitp-voyager.js via IntersectionObserver.
 * ========================================================================================== */

.gitp-vy-subnav {
	position: sticky;
	top: var(--vy-header-offset);
	z-index: 40;
	background: color-mix(in srgb, var(--vy-card) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--vy-line);
	margin-bottom: 28px;
}
.gitp-vy-subnav-inner {
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--vy-nav-h);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gitp-vy-subnav-inner::-webkit-scrollbar { display: none; }

.gitp-vy-subnav a {
	position: relative;
	flex: none;
	padding: 0 16px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--vy-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease;
}
.gitp-vy-subnav a::after {
	content: "";
	position: absolute;
	left: 16px; right: 16px; bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--vy-accent);
	transform: scaleX(0);
	transition: transform .2s ease;
}
.gitp-vy-subnav a:hover { color: var(--vy-text); }
.gitp-vy-subnav a.is-active { color: var(--vy-accent); }
.gitp-vy-subnav a.is-active::after { transform: scaleX(1); }

/* The price/CTA condensed into the sub-nav once the hero price card scrolls out of view. */
.gitp-vy-subnav-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.gitp-vy-subnav.is-condensed .gitp-vy-subnav-cta { opacity: 1; visibility: visible; transform: none; }
.gitp-vy-subnav-cta-price { font-weight: 800; font-size: 17px; line-height: 1.1; white-space: nowrap; }
.gitp-vy-subnav-cta-price small { display: block; font-size: 11px; font-weight: 600; color: var(--vy-muted); }

/* Anchor targets have to clear the sticky sub-nav, otherwise a jump lands with the heading hidden. */
.gitp-vy-anchor {
	scroll-margin-top: calc(var(--vy-header-offset) + var(--vy-nav-h) + 16px);
}

/* =============================================================================================
 * Hero — mosaic gallery
 * ========================================================================================== */

.gitp-vy-hero { margin-bottom: 22px; }

.gitp-vy-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--vy-muted);
	margin-bottom: 14px;
}
.gitp-vy-crumbs a { color: var(--vy-muted); text-decoration: none; }
.gitp-vy-crumbs a:hover { color: var(--vy-accent); text-decoration: underline; }
.gitp-vy-crumbs span[aria-hidden] { opacity: .5; }

.gitp-vy-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 190px 190px;
	gap: 8px;
	border-radius: var(--vy-r-xl);
	overflow: hidden;
	position: relative;
}
.gitp-vy-mosaic figure { margin: 0; position: relative; overflow: hidden; background: var(--vy-wash); }
/* nth-of-type, not nth-child: the badge strip and the "view all photos" button are also children of
 * this grid (both absolutely positioned), so child-indexed selectors would be off by one. */
.gitp-vy-mosaic figure:nth-of-type(1) { grid-row: span 2; }
.gitp-vy-mosaic img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.gitp-vy-mosaic figure:hover img { transform: scale(1.05); }
.gitp-vy-mosaic button.gitp-vy-mosaic-open {
	position: absolute; inset: 0;
	width: 100%; border: 0; padding: 0;
	background: transparent;
	cursor: pointer;
}

.gitp-vy-mosaic-more {
	position: absolute;
	right: 16px; bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 0;
	background: rgba(9, 14, 26, .78);
	backdrop-filter: blur(6px);
	color: #fff;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	box-shadow: var(--vy-sh-2);
}
.gitp-vy-mosaic-more:hover { background: rgba(9, 14, 26, .92); }
.gitp-vy-mosaic-more svg { width: 16px; height: 16px; fill: currentColor; }

.gitp-vy-hero-badges {
	position: absolute;
	left: 16px; top: 16px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
.gitp-vy-ribbon {
	padding: 7px 14px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fb923c, var(--vy-deal));
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .02em;
	box-shadow: 0 4px 12px rgba(249, 115, 22, .4);
}

/* Title block sitting under the mosaic */
.gitp-vy-titlebar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin-top: 20px;
}
.gitp-vy-titlebar-main { flex: 1 1 420px; min-width: 0; }
.gitp-vy-title {
	margin: 0 0 8px;
	font-size: clamp(25px, 3.4vw, 36px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.15;
}
.gitp-vy-subtitle { margin: 0 0 12px; color: var(--vy-muted); font-size: 15.5px; }
.gitp-vy-title-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.gitp-vy-titlebar-actions { display: flex; gap: 8px; flex: none; }
.gitp-vy-icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid var(--vy-line);
	background: var(--vy-card);
	color: var(--vy-muted);
	font-size: 13.5px;
	font-weight: 650;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.gitp-vy-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.gitp-vy-icon-btn:hover { border-color: var(--vy-accent); color: var(--vy-accent); background: var(--vy-accent-soft); }
.gitp-vy-icon-btn.is-saved { border-color: var(--vy-no); color: var(--vy-no); background: var(--vy-no-soft); }

/* =============================================================================================
 * Two-column detail layout with a sticky booking rail
 * ========================================================================================== */

.gitp-vy-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 366px;
	gap: 32px;
	align-items: start;
}

.gitp-vy-main > section { margin-bottom: 34px; }
.gitp-vy-main > section:last-child { margin-bottom: 0; }

.gitp-vy-rail {
	position: sticky;
	top: calc(var(--vy-header-offset) + var(--vy-nav-h) + 20px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --- Price card ---------------------------------------------------------------------------- */

.gitp-vy-pricecard {
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-2);
	overflow: hidden;
}
.gitp-vy-pricecard-top {
	padding: 20px 20px 18px;
	background: linear-gradient(160deg, var(--vy-accent-soft), transparent 70%);
	border-bottom: 1px solid var(--vy-line);
}
.gitp-vy-price-note { font-size: 12.5px; color: var(--vy-muted); font-weight: 650; }
.gitp-vy-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.gitp-vy-price-was { font-size: 16px; color: var(--vy-faint); text-decoration: line-through; }
.gitp-vy-price-now { font-size: 33px; font-weight: 850; letter-spacing: -.03em; line-height: 1; }
.gitp-vy-price-unit { font-size: 13px; color: var(--vy-muted); }
.gitp-vy-price-save {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	border-radius: var(--vy-r-sm);
	background: var(--vy-yes-soft);
	color: #0b6b3d;
	font-size: 12.5px;
	font-weight: 800;
}

.gitp-vy-pricecard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }

.gitp-vy-quickfacts { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.gitp-vy-quickfacts li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 13.5px;
	border-bottom: 1px dashed var(--vy-line);
}
.gitp-vy-quickfacts li:last-child { border-bottom: 0; }
.gitp-vy-quickfacts svg { width: 17px; height: 17px; fill: var(--vy-accent); flex: none; }
.gitp-vy-quickfacts b { margin-left: auto; font-weight: 700; text-align: right; }

.gitp-vy-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 4px;
}
.gitp-vy-trust span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 650;
	color: var(--vy-muted);
}
.gitp-vy-trust svg { width: 13px; height: 13px; fill: var(--vy-yes); }

.gitp-vy-assist {
	padding: 14px 20px;
	border-top: 1px solid var(--vy-line);
	background: var(--vy-wash);
	font-size: 13px;
	color: var(--vy-muted);
}
.gitp-vy-assist a { color: var(--vy-accent); font-weight: 700; text-decoration: none; }
.gitp-vy-assist a:hover { text-decoration: underline; }

/* =============================================================================================
 * Route chain — "2N Hanoi → 1N Halong → 2N Da Nang"
 * ========================================================================================== */

.gitp-vy-route {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	padding: 16px 18px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-1);
}
.gitp-vy-route-stop {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 2px;
}
.gitp-vy-route-dot {
	width: 30px; height: 30px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vy-accent-soft);
	border: 1.5px solid var(--vy-accent-line);
	color: var(--vy-accent);
	font-size: 12px;
	font-weight: 800;
}
.gitp-vy-route-label { line-height: 1.25; }
.gitp-vy-route-label strong { display: block; font-size: 14.5px; font-weight: 750; }
.gitp-vy-route-label small { font-size: 12px; color: var(--vy-muted); }
.gitp-vy-route-link {
	flex: 1 1 26px;
	min-width: 26px;
	height: 2px;
	margin: 0 12px;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, var(--vy-accent-line) 0 6px, transparent 6px 11px);
}

/* =============================================================================================
 * Highlights strip
 * ========================================================================================== */

.gitp-vy-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}
.gitp-vy-highlight {
	display: flex;
	gap: 11px;
	padding: 15px 16px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	font-size: 14px;
	line-height: 1.45;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gitp-vy-highlight:hover { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-2); transform: translateY(-2px); }
.gitp-vy-highlight-ico {
	width: 32px; height: 32px;
	flex: none;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--vy-accent-soft);
	color: var(--vy-accent);
}
.gitp-vy-highlight-ico svg { width: 17px; height: 17px; fill: currentColor; }

/* =============================================================================================
 * Day-by-day itinerary timeline
 * ========================================================================================== */

.gitp-vy-itin-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.gitp-vy-itin-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.gitp-vy-itin-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }

.gitp-vy-timeline { position: relative; padding-left: 0; }

.gitp-vy-day {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 0;
}
.gitp-vy-day + .gitp-vy-day { margin-top: 12px; }

/* The spine: a line down the gutter column, stopping at the last day. */
.gitp-vy-day-gutter { position: relative; }
.gitp-vy-day-gutter::before {
	content: "";
	position: absolute;
	left: 21px; top: 44px; bottom: -12px;
	width: 2px;
	background: var(--vy-line);
}
.gitp-vy-day:last-child .gitp-vy-day-gutter::before { display: none; }

.gitp-vy-day-num {
	position: relative;
	z-index: 1;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vy-card);
	border: 2px solid var(--vy-accent-line);
	color: var(--vy-accent);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
}
.gitp-vy-day-num b { display: block; font-size: 15px; letter-spacing: -.02em; }
.gitp-vy-day.is-open .gitp-vy-day-num {
	background: var(--vy-accent);
	border-color: var(--vy-accent);
	color: #fff;
}

.gitp-vy-day-body {
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.gitp-vy-day.is-open .gitp-vy-day-body { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-2); }

.gitp-vy-day-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.gitp-vy-day-head:hover { background: var(--vy-wash); }
.gitp-vy-day-head-text { min-width: 0; flex: 1; }
.gitp-vy-day-title { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; }
.gitp-vy-day-stay {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--vy-muted);
}
.gitp-vy-day-stay svg { width: 13px; height: 13px; fill: currentColor; }

.gitp-vy-day-chips { display: flex; gap: 5px; flex: none; }
.gitp-vy-day-chip {
	width: 26px; height: 26px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	background: var(--vy-wash);
	color: var(--vy-muted);
}
.gitp-vy-day-chip svg { width: 14px; height: 14px; fill: currentColor; }

.gitp-vy-day-caret {
	flex: none;
	width: 26px; height: 26px;
	display: grid;
	place-items: center;
	color: var(--vy-muted);
	transition: transform .22s ease;
}
.gitp-vy-day-caret svg { width: 16px; height: 16px; fill: currentColor; }
.gitp-vy-day.is-open .gitp-vy-day-caret { transform: rotate(180deg); color: var(--vy-accent); }

/* Collapsible panel — height animated by the script via a max-height it measures, so the transition
 * works without hard-coding a guess that would clip a long day. */
.gitp-vy-day-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s cubic-bezier(.3, .8, .4, 1);
}
.gitp-vy-day.is-open .gitp-vy-day-panel { max-height: none; }
.gitp-vy-day-panel-inner { padding: 4px 18px 18px; border-top: 1px solid var(--vy-line); }

/* --- One typed stop inside a day ------------------------------------------------------------ */

.gitp-vy-stop {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 13px;
	padding: 15px 0;
	border-bottom: 1px dashed var(--vy-line);
}
.gitp-vy-stop:last-child { border-bottom: 0; padding-bottom: 2px; }

.gitp-vy-stop-ico {
	width: 34px; height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--vy-accent-soft);
	color: var(--vy-accent);
}
.gitp-vy-stop-ico svg { width: 18px; height: 18px; fill: currentColor; }

/* Type-specific tinting so a day scans by shape and colour, not by reading every label. */
.gitp-vy-stop-hotel   .gitp-vy-stop-ico { background: #f3ecff; color: #7c3aed; }
.gitp-vy-stop-meal    .gitp-vy-stop-ico { background: var(--vy-yes-soft); color: #0b6b3d; }
.gitp-vy-stop-flight  .gitp-vy-stop-ico,
.gitp-vy-stop-train   .gitp-vy-stop-ico,
.gitp-vy-stop-bus     .gitp-vy-stop-ico,
.gitp-vy-stop-transfer .gitp-vy-stop-ico { background: #e8f2ff; color: #1d4ed8; }
.gitp-vy-stop-activity .gitp-vy-stop-ico,
.gitp-vy-stop-sightseeing .gitp-vy-stop-ico { background: var(--vy-deal-soft); color: #c2410c; }

.gitp-preset-dark .gitp-vy-stop-hotel .gitp-vy-stop-ico { background: rgba(124, 58, 237, .18); color: #c4b5fd; }
.gitp-preset-dark .gitp-vy-stop-flight .gitp-vy-stop-ico,
.gitp-preset-dark .gitp-vy-stop-train .gitp-vy-stop-ico,
.gitp-preset-dark .gitp-vy-stop-bus .gitp-vy-stop-ico,
.gitp-preset-dark .gitp-vy-stop-transfer .gitp-vy-stop-ico { background: rgba(29, 78, 216, .22); color: #93c5fd; }

.gitp-vy-stop-body { min-width: 0; }
.gitp-vy-stop-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gitp-vy-stop-label { font-size: 14.5px; font-weight: 700; }
.gitp-vy-stop-type {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vy-faint);
}
.gitp-vy-stop-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 12px;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--vy-muted);
}
.gitp-vy-stop-meta span { display: inline-flex; align-items: center; gap: 5px; }
.gitp-vy-stop-meta svg { width: 13px; height: 13px; fill: currentColor; opacity: .8; }
.gitp-vy-stop-desc { margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--vy-muted); }
.gitp-vy-stop-img {
	margin-top: 11px;
	border-radius: var(--vy-r);
	overflow: hidden;
	max-width: 260px;
	border: 1px solid var(--vy-line);
}
.gitp-vy-stop-img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* =============================================================================================
 * Hotels — first-class section (the v3.0 data model, not itinerary stops)
 * ========================================================================================== */

.gitp-vy-hotels { display: flex; flex-direction: column; gap: 14px; }

.gitp-vy-hotel {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 0;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	box-shadow: var(--vy-sh-1);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gitp-vy-hotel:hover { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-2); transform: translateY(-2px); }

.gitp-vy-hotel-media { position: relative; background: var(--vy-wash); }
.gitp-vy-hotel-media img { width: 100%; height: 100%; min-height: 176px; object-fit: cover; }
.gitp-vy-hotel-nights {
	position: absolute;
	left: 12px; top: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(9, 14, 26, .8);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

.gitp-vy-hotel-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.gitp-vy-hotel-head { display: flex; align-items: flex-start; gap: 12px; }
.gitp-vy-hotel-name { margin: 0; font-size: 17px; font-weight: 780; letter-spacing: -.015em; }
.gitp-vy-hotel-city {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--vy-muted);
}
.gitp-vy-hotel-city svg { width: 13px; height: 13px; fill: currentColor; }
.gitp-vy-hotel-head-right { margin-left: auto; text-align: right; flex: none; }

.gitp-vy-hotel-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.gitp-vy-hotel-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 4px;
	border-top: 1px dashed var(--vy-line);
	margin-top: 2px;
}
.gitp-vy-hotel-amenities span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--vy-muted);
}
.gitp-vy-hotel-amenities svg { width: 15px; height: 15px; fill: var(--vy-accent); opacity: .85; }

.gitp-vy-hotel-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}
.gitp-vy-hotel-similar { font-size: 12px; color: var(--vy-faint); font-style: italic; }
.gitp-vy-hotel-foot .gitp-vy-btn { margin-left: auto; }

/* =============================================================================================
 * Inclusions / exclusions
 * ========================================================================================== */

.gitp-vy-inex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.gitp-vy-inex-col {
	padding: 18px 20px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
}
.gitp-vy-inex-col h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 15.5px;
	font-weight: 780;
}
.gitp-vy-inex-col h3 svg { width: 18px; height: 18px; }
.gitp-vy-inex-yes h3 svg { fill: var(--vy-yes); }
.gitp-vy-inex-no h3 svg { fill: var(--vy-no); }

.gitp-vy-inex-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gitp-vy-inex-col li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.gitp-vy-inex-col li::before {
	content: "";
	flex: none;
	width: 18px; height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}
.gitp-vy-inex-yes li::before {
	background-color: var(--vy-yes-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f9d58'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.gitp-vy-inex-no li::before {
	background-color: var(--vy-no-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d93025'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
}

/* =============================================================================================
 * Policies / FAQ accordion
 * ========================================================================================== */

.gitp-vy-acc { display: flex; flex-direction: column; gap: 10px; }
.gitp-vy-acc-item {
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	overflow: hidden;
}
.gitp-vy-acc-item.is-open { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-1); }
.gitp-vy-acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	font-weight: 700;
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
}
.gitp-vy-acc-head:hover { background: var(--vy-wash); }
.gitp-vy-acc-head::after {
	content: "";
	margin-left: auto;
	flex: none;
	width: 11px; height: 11px;
	border-right: 2px solid var(--vy-muted);
	border-bottom: 2px solid var(--vy-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .22s ease;
}
.gitp-vy-acc-item.is-open .gitp-vy-acc-head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.gitp-vy-acc-panel { display: none; padding: 0 18px 17px; font-size: 14px; line-height: 1.65; color: var(--vy-muted); }
.gitp-vy-acc-item.is-open .gitp-vy-acc-panel { display: block; }
.gitp-vy-acc-panel p:first-child { margin-top: 0; }
.gitp-vy-acc-panel p:last-child { margin-bottom: 0; }

/* =============================================================================================
 * Mobile sticky action bar (detail page)
 * ========================================================================================== */

.gitp-vy-actionbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
	background: var(--vy-card);
	border-top: 1px solid var(--vy-line);
	box-shadow: 0 -6px 24px rgba(16, 24, 40, .12);
	transform: translateY(110%);
	transition: transform .26s cubic-bezier(.3, .8, .4, 1);
}
.gitp-vy-actionbar.is-visible { transform: none; }
.gitp-vy-actionbar-price { line-height: 1.15; min-width: 0; }
.gitp-vy-actionbar-price small { display: block; font-size: 11px; color: var(--vy-muted); font-weight: 650; }
.gitp-vy-actionbar-price strong { font-size: 19px; font-weight: 850; letter-spacing: -.02em; }
.gitp-vy-actionbar-price del { font-size: 12.5px; color: var(--vy-faint); margin-left: 5px; }
.gitp-vy-actionbar .gitp-vy-btn { margin-left: auto; flex: none; }

/* =============================================================================================
 * LISTING / SEARCH LAYOUT
 * ========================================================================================== */

.gitp-vy-results-head { margin-bottom: 18px; }
.gitp-vy-results-title { margin: 6px 0 4px; font-size: clamp(23px, 3vw, 31px); font-weight: 800; letter-spacing: -.025em; }
.gitp-vy-results-sub { margin: 0; color: var(--vy-muted); font-size: 14.5px; }

.gitp-vy-search-layout {
	display: grid;
	grid-template-columns: 286px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

/* --- Filter rail ---------------------------------------------------------------------------- */

.gitp-vy-filters {
	position: sticky;
	top: calc(var(--vy-header-offset) + 16px);
	max-height: calc(100vh - var(--vy-header-offset) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-1);
	scrollbar-width: thin;
}
.gitp-vy-filters::-webkit-scrollbar { width: 6px; }
.gitp-vy-filters::-webkit-scrollbar-thumb { background: var(--vy-line); border-radius: 3px; }

.gitp-vy-filters-head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 15px 18px;
	background: var(--vy-card);
	border-bottom: 1px solid var(--vy-line);
}
.gitp-vy-filters-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.gitp-vy-clear-all {
	margin-left: auto;
	background: 0;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--vy-accent);
	cursor: pointer;
}
.gitp-vy-clear-all:hover { text-decoration: underline; }

.gitp-vy-fgroup { border-bottom: 1px solid var(--vy-line); }
.gitp-vy-fgroup:last-child { border-bottom: 0; }
.gitp-vy-fgroup-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: 0;
	border: 0;
	font: inherit;
	color: inherit;
	font-size: 13.5px;
	font-weight: 750;
	text-align: left;
	cursor: pointer;
}
.gitp-vy-fgroup-head::after {
	content: "";
	margin-left: auto;
	width: 9px; height: 9px;
	border-right: 2px solid var(--vy-muted);
	border-bottom: 2px solid var(--vy-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.gitp-vy-fgroup.is-open .gitp-vy-fgroup-head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.gitp-vy-fgroup-body { display: none; padding: 0 18px 16px; }
.gitp-vy-fgroup.is-open .gitp-vy-fgroup-body { display: block; }

.gitp-vy-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--vy-text);
}
.gitp-vy-check input { width: 16px; height: 16px; accent-color: var(--vy-accent); flex: none; cursor: pointer; }
.gitp-vy-check-count { margin-left: auto; font-size: 12px; color: var(--vy-faint); }
.gitp-vy-check:hover { color: var(--vy-accent); }

.gitp-vy-range { padding: 6px 0 2px; }
.gitp-vy-range input[type="range"] { width: 100%; accent-color: var(--vy-accent); }
.gitp-vy-range-vals { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--vy-muted); margin-top: 6px; font-weight: 650; }

/* --- Sort bar + applied chips ---------------------------------------------------------------- */

.gitp-vy-sortbar {
	position: sticky;
	top: calc(var(--vy-header-offset) + 16px);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	margin-bottom: 14px;
	background: color-mix(in srgb, var(--vy-card) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	box-shadow: var(--vy-sh-1);
}
.gitp-vy-sortbar-count { font-size: 13.5px; color: var(--vy-muted); }
.gitp-vy-sortbar-count b { color: var(--vy-text); font-weight: 800; }
.gitp-vy-sortbar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.gitp-vy-sortbar select {
	padding: 8px 12px;
	border-radius: var(--vy-r-sm);
	border: 1px solid var(--vy-line);
	background: var(--vy-card);
	color: var(--vy-text);
	font: inherit;
	font-size: 13.5px;
	font-weight: 650;
	cursor: pointer;
}

.gitp-vy-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.gitp-vy-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 8px 6px 13px;
	border-radius: 999px;
	background: var(--vy-accent-soft);
	border: 1px solid var(--vy-accent-line);
	color: var(--vy-accent-deep);
	font-size: 12.5px;
	font-weight: 700;
}
.gitp-vy-chip button {
	width: 17px; height: 17px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--vy-accent) 20%, transparent);
	color: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.gitp-vy-chip button:hover { background: var(--vy-accent); color: #fff; }

/* --- Result card ----------------------------------------------------------------------------- */

.gitp-vy-cards { display: flex; flex-direction: column; gap: 16px; }

.gitp-vy-rcard {
	display: grid;
	grid-template-columns: 286px minmax(0, 1fr) 214px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	box-shadow: var(--vy-sh-1);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.gitp-vy-rcard:hover { box-shadow: var(--vy-sh-3); transform: translateY(-3px); border-color: var(--vy-accent-line); }

.gitp-vy-rcard-media { position: relative; background: var(--vy-wash); overflow: hidden; }
.gitp-vy-rcard-media img { width: 100%; height: 100%; min-height: 216px; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gitp-vy-rcard:hover .gitp-vy-rcard-media img { transform: scale(1.06); }
.gitp-vy-rcard-tag {
	position: absolute;
	left: 12px; top: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fb923c, var(--vy-deal));
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	box-shadow: 0 3px 10px rgba(249,115,22,.4);
}
.gitp-vy-rcard-count {
	position: absolute;
	right: 10px; bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(9,14,26,.75);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

.gitp-vy-rcard-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gitp-vy-rcard-title { margin: 0; font-size: 17.5px; font-weight: 780; letter-spacing: -.018em; line-height: 1.25; }
.gitp-vy-rcard-title a { color: inherit; text-decoration: none; }
.gitp-vy-rcard-title a:hover { color: var(--vy-accent); }
.gitp-vy-rcard-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* Compact route chain inside a result card */
.gitp-vy-rcard-route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--vy-muted);
	font-weight: 650;
}
.gitp-vy-rcard-route i {
	font-style: normal;
	color: var(--vy-accent-line);
	font-weight: 800;
}

/* Inclusion icon strip — present icons are accented, absent ones are struck and faded so a scanner
 * can tell "no flights" apart from "flights not mentioned" at a glance. */
.gitp-vy-incstrip { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.gitp-vy-inc {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--vy-r-sm);
	background: var(--vy-accent-soft);
	border: 1px solid var(--vy-accent-line);
	font-size: 12px;
	font-weight: 700;
	color: var(--vy-accent-deep);
}
.gitp-vy-inc svg { width: 14px; height: 14px; fill: currentColor; }
.gitp-vy-inc.is-off {
	background: transparent;
	border-color: var(--vy-line);
	color: var(--vy-faint);
}
.gitp-vy-inc.is-off::after {
	content: "";
	position: absolute;
	left: 8px; right: 8px; top: 50%;
	height: 1.5px;
	background: currentColor;
	opacity: .55;
	transform: rotate(-8deg);
}

.gitp-vy-rcard-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.gitp-vy-rcard-bullets li {
	position: relative;
	padding-left: 15px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vy-muted);
}
.gitp-vy-rcard-bullets li::before {
	content: "";
	position: absolute;
	left: 2px; top: 8px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--vy-accent);
	opacity: .55;
}

.gitp-vy-rcard-aside {
	padding: 16px 18px;
	border-left: 1px dashed var(--vy-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	text-align: right;
	background: linear-gradient(200deg, var(--vy-accent-soft), transparent 60%);
}
.gitp-vy-rcard-was { font-size: 14px; color: var(--vy-faint); text-decoration: line-through; }
.gitp-vy-rcard-price { font-size: 26px; font-weight: 850; letter-spacing: -.03em; line-height: 1; }
.gitp-vy-rcard-unit { font-size: 12px; color: var(--vy-muted); }
.gitp-vy-rcard-save {
	align-self: flex-end;
	padding: 3px 9px;
	border-radius: var(--vy-r-sm);
	background: var(--vy-yes-soft);
	color: #0b6b3d;
	font-size: 11.5px;
	font-weight: 800;
}
.gitp-vy-rcard-aside .gitp-vy-btn { margin-top: 3px; }

/* Empty state */
.gitp-vy-empty {
	padding: 54px 24px;
	text-align: center;
	background: var(--vy-card);
	border: 1px dashed var(--vy-line);
	border-radius: var(--vy-r-lg);
}
.gitp-vy-empty h3 { margin: 0 0 7px; font-size: 18px; font-weight: 780; }
.gitp-vy-empty p { margin: 0 0 16px; color: var(--vy-muted); font-size: 14.5px; }

/* Mobile filter/sort launcher — hidden on desktop, fixed bottom bar on small screens. */
.gitp-vy-mobilebar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 55;
	display: none;
	gap: 10px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: var(--vy-card);
	border-top: 1px solid var(--vy-line);
	box-shadow: 0 -6px 24px rgba(16, 24, 40, .12);
}
.gitp-vy-mobilebar .gitp-vy-btn { flex: 1; }

/* Filter drawer (mobile) */
.gitp-vy-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(9, 14, 26, .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s;
}
.gitp-vy-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* =============================================================================================
 * Lightbox (hero gallery / hotel photos)
 * ========================================================================================== */

.gitp-vy-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(6, 10, 20, .92);
}
.gitp-vy-lightbox.is-open { display: flex; }
.gitp-vy-lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain; border-radius: var(--vy-r); }
.gitp-vy-lightbox-close,
.gitp-vy-lightbox-nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background-color .16s ease;
}
.gitp-vy-lightbox-close:hover,
.gitp-vy-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.gitp-vy-lightbox-close { top: 22px; right: 22px; }
.gitp-vy-lightbox-nav.is-prev { left: 20px; }
.gitp-vy-lightbox-nav.is-next { right: 20px; }
.gitp-vy-lightbox-counter {
	position: absolute;
	bottom: 24px; left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .82);
	font-size: 13.5px;
	font-weight: 650;
}

/* =============================================================================================
 * Responsive
 * ========================================================================================== */

@media (max-width: 1080px) {
	.gitp-vy-layout { grid-template-columns: minmax(0, 1fr); }
	/* The rail stops being sticky and moves under the itinerary; the mobile action bar takes over
	 * the persistent-CTA job from here down. */
	.gitp-vy-rail { position: static; order: 2; }
	.gitp-vy-search-layout { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-filters { display: none; }
	.gitp-vy-rcard { grid-template-columns: 232px minmax(0, 1fr); }
	.gitp-vy-rcard-aside {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px dashed var(--vy-line);
		flex-direction: row;
		align-items: center;
		text-align: left;
		flex-wrap: wrap;
	}
	.gitp-vy-rcard-save { align-self: center; }
	.gitp-vy-rcard-aside .gitp-vy-btn { margin-left: auto; margin-top: 0; }
	.gitp-vy-mobilebar { display: flex; }
	.gitp-vy-actionbar { display: flex; }
}

@media (max-width: 760px) {
	.gitp-vy-shell { padding-inline: 15px; }
	.gitp-vy-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 168px 104px;
		gap: 6px;
		border-radius: var(--vy-r-lg);
	}
	.gitp-vy-mosaic figure:nth-of-type(1) { grid-column: span 2; grid-row: auto; }
	.gitp-vy-mosaic figure:nth-of-type(n + 4) { display: none; }
	.gitp-vy-titlebar-actions { width: 100%; }
	.gitp-vy-inex { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-hotel { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-hotel-media img { min-height: 178px; }
	.gitp-vy-rcard { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-rcard-media img { min-height: 194px; }
	.gitp-vy-day { grid-template-columns: 46px minmax(0, 1fr); }
	.gitp-vy-day-gutter::before { left: 15px; }
	.gitp-vy-day-num { width: 32px; height: 32px; font-size: 9px; }
	.gitp-vy-day-num b { font-size: 12px; }
	.gitp-vy-day-chips { display: none; }
	.gitp-vy-highlights { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-stop-img { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.gitp-vy *,
	.gitp-vy *::before,
	.gitp-vy *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.gitp-vy-mosaic figure:hover img,
	.gitp-vy-rcard:hover .gitp-vy-rcard-media img { transform: none; }
}

@media print {
	.gitp-vy-subnav,
	.gitp-vy-actionbar,
	.gitp-vy-mobilebar,
	.gitp-vy-rail,
	.gitp-vy-titlebar-actions { display: none !important; }
	.gitp-vy-layout { grid-template-columns: 1fr; }
	.gitp-vy-day-panel { max-height: none !important; }
}

/* =============================================================================================
 * v3.0.0 — interactive surfaces: modal, forms, share sheet, hotel picker, mobile bottom sheets.
 *
 * Touch targets: every control below is at least 44x44 CSS px of hit area, which is the smallest
 * reliably-tappable size on a phone. Where a control looks smaller than that (the chip "x", the
 * accordion caret) the padding rather than the glyph carries the size.
 * ========================================================================================== */

body.gitp-vy-noscroll { overflow: hidden; }

/* --- Modal --------------------------------------------------------------------------------- */

.gitp-vy-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.gitp-vy-modal[hidden] { display: none; }

.gitp-vy-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 14, 26, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: gitp-vy-fade .2s ease;
}

.gitp-vy-modal-panel {
	position: relative;
	width: min(560px, 100%);
	max-height: min(88vh, 860px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 26px 24px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-xl);
	box-shadow: var(--vy-sh-3);
	animation: gitp-vy-rise .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes gitp-vy-fade { from { opacity: 0; } }
@keyframes gitp-vy-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.gitp-vy-modal-close {
	position: absolute;
	top: 12px; right: 12px;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vy-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.gitp-vy-modal-close:hover { background: var(--vy-wash); color: var(--vy-text); }

.gitp-vy-modal-title { margin: 0 44px 6px 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gitp-vy-modal-intro { margin: 0 0 16px; color: var(--vy-muted); font-size: 14px; line-height: 1.55; }
.gitp-vy-modal-loading { padding: 30px 0; text-align: center; color: var(--vy-muted); font-size: 14.5px; }

/* --- Forms --------------------------------------------------------------------------------- */

.gitp-vy-form-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.gitp-vy-form-intro { margin: 0 0 16px; color: var(--vy-muted); font-size: 14px; line-height: 1.55; }

.gitp-vy-form-context {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 11px 13px;
	border-radius: var(--vy-r);
	background: var(--vy-accent-soft);
	border: 1px solid var(--vy-accent-line);
	font-size: 13.5px;
	color: var(--vy-accent-deep);
}
.gitp-vy-form-context svg { flex: none; }

.gitp-vy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gitp-vy-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.gitp-vy-field-half { grid-column: span 1; }
.gitp-vy-field-heading h4 { margin: 8px 0 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; }

.gitp-vy-field-label { font-size: 13px; font-weight: 700; color: var(--vy-text); }
.gitp-vy-req { color: var(--vy-no); margin-left: 2px; }

.gitp-vy-field input[type="text"],
.gitp-vy-field input[type="email"],
.gitp-vy-field input[type="tel"],
.gitp-vy-field input[type="number"],
.gitp-vy-field input[type="date"],
.gitp-vy-field input[type="url"],
.gitp-vy-field select,
.gitp-vy-field textarea {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	background: var(--vy-card);
	color: var(--vy-text);
	font: inherit;
	font-size: 15px; /* large enough that iOS does not zoom the page on focus */
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gitp-vy-field textarea { min-height: 96px; resize: vertical; }
.gitp-vy-field input:focus,
.gitp-vy-field select:focus,
.gitp-vy-field textarea:focus {
	outline: none;
	border-color: var(--vy-accent);
	box-shadow: 0 0 0 3px var(--vy-accent-line);
}
.gitp-vy-field.has-error input,
.gitp-vy-field.has-error select,
.gitp-vy-field.has-error textarea { border-color: var(--vy-no); }

.gitp-vy-field-help { margin: 0; font-size: 12px; color: var(--vy-muted); }
.gitp-vy-field-error { margin: 0; font-size: 12.5px; color: var(--vy-no); font-weight: 600; }
.gitp-vy-field-error:empty { display: none; }

.gitp-vy-field-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.gitp-vy-choice {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 9px 14px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.gitp-vy-choice:hover { border-color: var(--vy-accent-line); background: var(--vy-accent-soft); }
.gitp-vy-choice input { width: 18px; height: 18px; accent-color: var(--vy-accent); cursor: pointer; }
.gitp-vy-consent { align-items: flex-start; border: 0; padding: 0; min-height: 0; }
.gitp-vy-consent:hover { background: transparent; }
.gitp-vy-consent span { font-size: 13px; color: var(--vy-muted); line-height: 1.5; }

/* Honeypot: moved off-screen rather than display:none, because some bots skip hidden inputs. */
.gitp-vy-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gitp-vy-form-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.gitp-vy-form-status { margin: 0; font-size: 13.5px; text-align: center; }
.gitp-vy-form-status.is-error { color: var(--vy-no); font-weight: 650; }

.gitp-vy-spinner {
	display: none;
	width: 16px; height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gitp-vy-spin .7s linear infinite;
}
.gitp-vy-form.is-busy .gitp-vy-spinner { display: inline-block; }
.gitp-vy-form.is-busy .gitp-vy-form-submit-label { opacity: .65; }
@keyframes gitp-vy-spin { to { transform: rotate(360deg); } }

.gitp-vy-form-done { padding: 26px 10px; text-align: center; }
.gitp-vy-form-tick {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--vy-yes-soft);
	color: var(--vy-yes);
}
.gitp-vy-form-done p { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.55; }

.gitp-vy-inline-form { margin-top: 8px; }
.gitp-vy-inline-form-card { padding: 26px; }

/* --- Share --------------------------------------------------------------------------------- */

.gitp-vy-share { position: relative; }
.gitp-vy-share-menu {
	position: absolute;
	right: 0; top: calc(100% + 8px);
	z-index: 30;
	min-width: 208px;
	padding: 7px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-3);
	animation: gitp-vy-rise .16s ease;
}
.gitp-vy-share-menu[hidden] { display: none; }

.gitp-vy-share-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--vy-r-sm);
	background: transparent;
	color: var(--vy-text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.gitp-vy-share-item:hover { background: var(--vy-wash); }
.gitp-vy-share-item svg { flex: none; opacity: .78; }
.gitp-vy-share-whatsapp svg { color: #25d366; opacity: 1; }
.gitp-vy-share-facebook svg { color: #1877f2; opacity: 1; }

/* --- Change-hotel alternatives -------------------------------------------------------------- */

.gitp-vy-alts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.gitp-vy-alt {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 11px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	background: var(--vy-card);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gitp-vy-alt:hover { border-color: var(--vy-accent); box-shadow: var(--vy-sh-2); transform: translateY(-1px); }
.gitp-vy-alt img,
.gitp-vy-alt-noimg {
	width: 74px; height: 58px;
	flex: none;
	border-radius: var(--vy-r-sm);
	object-fit: cover;
	background: var(--vy-wash);
}
.gitp-vy-alt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gitp-vy-alt-body strong { font-size: 14.5px; font-weight: 750; }
.gitp-vy-alt-stars { font-size: 12.5px; color: var(--vy-star); font-weight: 700; }
.gitp-vy-alt-note { font-size: 12.5px; color: var(--vy-muted); }
.gitp-vy-alt-choose {
	flex: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--vy-accent-soft);
	color: var(--vy-accent-deep);
	font-size: 12.5px;
	font-weight: 800;
}

/* --- Mobile bottom sheets ------------------------------------------------------------------- */

.gitp-vy-sheet { position: fixed; inset: 0; z-index: 95; }
.gitp-vy-sheet[hidden] { display: none; }

.gitp-vy-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9, 14, 26, .5);
	opacity: 0;
	transition: opacity .24s ease;
}
.gitp-vy-sheet.is-open .gitp-vy-sheet-backdrop { opacity: 1; }

.gitp-vy-sheet-panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 86vh;
	background: var(--vy-card);
	border-radius: var(--vy-r-xl) var(--vy-r-xl) 0 0;
	box-shadow: 0 -10px 40px rgba(9, 14, 26, .28);
	transform: translateY(100%);
	transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.gitp-vy-sheet.is-open .gitp-vy-sheet-panel { transform: none; }

.gitp-vy-sheet-grip {
	width: 42px; height: 4px;
	margin: 10px auto 2px;
	border-radius: 4px;
	background: var(--vy-line);
}
.gitp-vy-sheet-head {
	display: flex;
	align-items: center;
	padding: 8px 16px 12px;
	border-bottom: 1px solid var(--vy-line);
}
.gitp-vy-sheet-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.gitp-vy-sheet-close {
	margin-left: auto;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vy-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.gitp-vy-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gitp-vy-sheet-foot {
	display: flex;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--vy-line);
}
.gitp-vy-sheet-foot:empty { display: none; }
.gitp-vy-sheet-foot .gitp-vy-btn { flex: 1; }

/* The filter rail is moved bodily into the sheet, so its sticky/scroll styling has to stand down. */
.gitp-vy-sheet-body .gitp-vy-filters {
	display: block;
	position: static;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.gitp-vy-sheet-body .gitp-vy-filters-head { display: none; }

.gitp-vy-sortlist { display: flex; flex-direction: column; padding: 6px 0; }
.gitp-vy-sortopt {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 14px 18px;
	border: 0;
	background: transparent;
	color: var(--vy-text);
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.gitp-vy-sortopt:hover { background: var(--vy-wash); }
.gitp-vy-sortopt.is-active { color: var(--vy-accent); font-weight: 750; }
.gitp-vy-sortopt.is-active::after {
	content: "";
	margin-left: auto;
	width: 8px; height: 14px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
}

/* --- Touch-target floors -------------------------------------------------------------------- */

@media (pointer: coarse) {
	.gitp-vy-chip button { width: 26px; height: 26px; }
	.gitp-vy-chip { padding: 9px 9px 9px 14px; }
	.gitp-vy-check { padding: 11px 0; }
	.gitp-vy-fgroup-head { padding: 16px 18px; }
	.gitp-vy-acc-head { padding: 17px 18px; }
	.gitp-vy-day-head { padding: 17px 18px; }
	.gitp-vy-subnav a { padding: 0 18px; }
	.gitp-vy-icon-btn { min-height: 44px; }
}

@media (max-width: 640px) {
	/* On a phone the enquiry modal becomes a bottom sheet — reachable with a thumb rather than
	   floating mid-screen with the keyboard covering half of it. */
	.gitp-vy-modal { padding: 0; align-items: flex-end; }
	.gitp-vy-modal-panel {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--vy-r-xl) var(--vy-r-xl) 0 0;
		padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
		animation: gitp-vy-sheet-up .26s cubic-bezier(.2, .8, .3, 1);
	}
	@keyframes gitp-vy-sheet-up { from { transform: translateY(100%); } }
	.gitp-vy-form-grid { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-field-half { grid-column: 1 / -1; }
	.gitp-vy-share-menu { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; min-width: 0; }
}

/* =============================================================================================
 * v3.1.0 — search bar, tab strip, popovers, filter rail controls, pager.
 * ========================================================================================== */

.gitp-vy-searchwrap { margin-bottom: 26px; }

/* --- Tab strip ------------------------------------------------------------------------------ */

.gitp-vy-tabstrip {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-bottom: 0;
	border-radius: var(--vy-r-lg) var(--vy-r-lg) 0 0;
}
.gitp-vy-tabstrip::-webkit-scrollbar { display: none; }

.gitp-vy-tabitem {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding: 14px 22px;
	min-height: 56px;
	border-right: 1px solid var(--vy-line);
	color: var(--vy-muted);
	font-size: 14.5px;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	background: color-mix(in srgb, var(--vy-accent) 4%, var(--vy-card));
	transition: color .16s ease, background-color .16s ease;
}
.gitp-vy-tabitem:last-child { border-right: 0; }
.gitp-vy-tabitem:hover { color: var(--vy-text); background: var(--vy-accent-soft); }
.gitp-vy-tabitem.is-active { color: var(--vy-accent); background: var(--vy-card); }
.gitp-vy-tabitem.is-active::after {
	content: "";
	position: absolute;
	left: 22px; right: 22px; bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--vy-accent);
}
.gitp-vy-tabicon { display: grid; place-items: center; color: currentColor; }
.gitp-vy-tabimg { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.gitp-vy-tabimg img { width: 100%; height: 100%; object-fit: cover; }
.gitp-vy-tabimg-empty { background: var(--vy-wash); border: 1px solid var(--vy-line); }

/* --- Search bar ----------------------------------------------------------------------------- */

.gitp-vy-searchbar {
	position: relative;
	padding: 16px 18px 22px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: 0 0 var(--vy-r-lg) var(--vy-r-lg);
	box-shadow: var(--vy-sh-2);
}

.gitp-vy-sfields {
	display: grid;
	grid-template-columns: 1.1fr 1.4fr 1fr 1fr 1fr;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	overflow: visible;
}

.gitp-vy-sfield { position: relative; border-right: 1px solid var(--vy-line); min-width: 0; }
.gitp-vy-sfield:last-child { border-right: 0; }

.gitp-vy-sfield-btn {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	min-height: 84px;
	padding: 14px 18px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.gitp-vy-sfield-btn:hover { background: var(--vy-accent-soft); }
.gitp-vy-sfield-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--vy-muted);
	font-weight: 500;
}
.gitp-vy-sfield-value {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--vy-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gitp-vy-sfield-value small { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.gitp-vy-sfield-sub { font-size: 12.5px; color: var(--vy-muted); }
.gitp-vy-sfield-strong { font-weight: 700; color: var(--vy-text); font-size: 13.5px; }

.gitp-vy-sfield-input {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vy-text);
	font: inherit;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	outline: none;
}
.gitp-vy-sfield-input::placeholder { color: var(--vy-faint); font-weight: 700; }
.gitp-vy-sfield-date { font-size: 19px; }
.gitp-vy-sfield-ph { font-size: 15px; font-weight: 700; color: var(--vy-text); margin-top: -26px; pointer-events: none; }
.gitp-vy-sfield-ph[hidden] { display: none; }

.gitp-vy-caret {
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: .7;
}

.gitp-vy-searchnote {
	position: absolute;
	right: 20px; bottom: 26px;
	font-size: 13px;
	font-weight: 650;
	color: var(--vy-muted);
}

.gitp-vy-searchgo {
	position: absolute;
	left: 50%; bottom: -22px;
	transform: translateX(-50%);
	min-width: 240px;
	padding: 15px 40px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #3b9dff, #1d6fe0);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .05em;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(29, 111, 224, .38);
	transition: transform .16s ease, box-shadow .16s ease;
}
.gitp-vy-searchgo:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 12px 30px rgba(29, 111, 224, .46); }
.gitp-vy-searchgo:focus-visible { outline: 3px solid var(--vy-accent-line); outline-offset: 3px; }

/* --- Popovers ------------------------------------------------------------------------------- */

.gitp-vy-pop {
	position: absolute;
	left: 0; top: calc(100% + 6px);
	z-index: 50;
	min-width: 280px;
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-3);
	animation: gitp-vy-rise .16s ease;
}
.gitp-vy-pop[hidden] { display: none; }
.gitp-vy-pop-title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vy-faint);
	padding: 4px 8px 8px;
}
.gitp-vy-pop-list { display: flex; flex-direction: column; }
.gitp-vy-pop-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 11px 12px;
	border: 0;
	border-radius: var(--vy-r-sm);
	background: transparent;
	color: var(--vy-text);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.gitp-vy-pop-opt:hover { background: var(--vy-accent-soft); color: var(--vy-accent-deep); }
.gitp-vy-pop-opt small { font-size: 12px; color: var(--vy-faint); font-weight: 500; }
.gitp-vy-pop-opt[hidden] { display: none; }

/* --- Guest steppers ------------------------------------------------------------------------- */

.gitp-vy-stepper {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 8px;
	border-bottom: 1px solid var(--vy-line);
	font-size: 14.5px;
	font-weight: 600;
}
.gitp-vy-stepper:last-of-type { border-bottom: 0; }
.gitp-vy-stepper-ctl { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.gitp-vy-stepper-ctl button {
	width: 34px; height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--vy-line);
	border-radius: 50%;
	background: var(--vy-card);
	color: var(--vy-accent);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.gitp-vy-stepper-ctl button:hover:not(:disabled) { border-color: var(--vy-accent); background: var(--vy-accent-soft); }
.gitp-vy-stepper-ctl button:disabled { opacity: .35; cursor: not-allowed; }
.gitp-vy-stepper-ctl output { min-width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Filter rail controls -------------------------------------------------------------------- */

.gitp-vy-fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.gitp-vy-fchip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 13px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-sm);
	background: var(--vy-card);
	font-size: 13px;
	font-weight: 650;
	color: var(--vy-text);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.gitp-vy-fchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.gitp-vy-fchip small { margin-left: 4px; color: var(--vy-faint); font-weight: 600; }
.gitp-vy-fchip:hover { border-color: var(--vy-accent); }
.gitp-vy-fchip:has(input:checked),
.gitp-vy-fchip.is-checked {
	border-color: var(--vy-accent);
	background: var(--vy-accent-soft);
	color: var(--vy-accent-deep);
}
.gitp-vy-fchip:has(input:checked) small,
.gitp-vy-fchip.is-checked small { color: var(--vy-accent); }
/* A zero-count option stays visible but inert — it tells the traveller the option exists and
   nothing matches, rather than making the list mysteriously shorter. */
.gitp-vy-fchip.is-empty { opacity: .42; cursor: not-allowed; }
.gitp-vy-fchips-star .gitp-vy-fchip { min-width: 62px; justify-content: center; }

.gitp-vy-fsearch { position: relative; margin-bottom: 8px; }
.gitp-vy-fsearch input {
	width: 100%;
	min-height: 40px;
	padding: 9px 32px 9px 12px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-sm);
	background: var(--vy-card);
	color: var(--vy-text);
	font: inherit;
	font-size: 13.5px;
}
.gitp-vy-fsearch input:focus { outline: none; border-color: var(--vy-accent); box-shadow: 0 0 0 3px var(--vy-accent-line); }
.gitp-vy-fsearch svg { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--vy-faint); pointer-events: none; }

.gitp-vy-flist { display: flex; flex-direction: column; }
.gitp-vy-flist .gitp-vy-check[hidden] { display: none; }

.gitp-vy-showmore {
	margin-top: 6px;
	padding: 6px 0;
	border: 0;
	background: 0;
	color: var(--vy-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.gitp-vy-showmore:hover { text-decoration: underline; }

.gitp-vy-check input:disabled + * ,
.gitp-vy-check:has(input:disabled) { opacity: .42; cursor: not-allowed; }

/* --- Dual-handle range ----------------------------------------------------------------------- */

.gitp-vy-range { position: relative; padding: 16px 2px 2px; }
.gitp-vy-range-track {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: var(--vy-line);
}
.gitp-vy-range-fill {
	position: absolute;
	top: 0; bottom: 0;
	border-radius: 4px;
	background: var(--vy-accent);
}
/* Both sliders sit on the same track. pointer-events are re-enabled on the thumbs only, so the two
   overlapping inputs don't block each other. */
.gitp-vy-range input[type="range"] {
	position: absolute;
	left: 0; right: 0;
	top: 12px;
	width: 100%;
	height: 4px;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}
.gitp-vy-range input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--vy-accent);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .25);
	cursor: grab;
}
.gitp-vy-range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--vy-accent);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .25);
	cursor: grab;
}
.gitp-vy-range input[type="range"]::-moz-range-track { background: none; }
.gitp-vy-range-vals {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vy-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Chips row + pager ------------------------------------------------------------------------ */

.gitp-vy-chip-clear {
	align-self: center;
	margin-left: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vy-accent);
	text-decoration: none;
}
.gitp-vy-chip-clear:hover { text-decoration: underline; }

.gitp-vy-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 22px; }
.gitp-vy-pager-item {
	min-width: 40px;
	min-height: 40px;
	display: grid;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-sm);
	background: var(--vy-card);
	color: var(--vy-text);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}
.gitp-vy-pager-item:hover { border-color: var(--vy-accent); color: var(--vy-accent); }
.gitp-vy-pager-item.is-active {
	background: var(--vy-accent);
	border-color: var(--vy-accent);
	color: #fff;
}

/* --- Responsive ------------------------------------------------------------------------------ */

@media (max-width: 1080px) {
	.gitp-vy-sfields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gitp-vy-sfield { border-bottom: 1px solid var(--vy-line); }
	.gitp-vy-sfield:nth-child(2n) { border-right: 0; }
	.gitp-vy-sfield-value, .gitp-vy-sfield-input { font-size: 21px; }
	.gitp-vy-searchnote { display: none; }
}

@media (max-width: 760px) {
	.gitp-vy-searchwrap { margin-bottom: 34px; }
	.gitp-vy-tabstrip { border-radius: var(--vy-r) var(--vy-r) 0 0; }
	.gitp-vy-tabitem { padding: 12px 15px; font-size: 13.5px; min-height: 52px; }
	.gitp-vy-tabimg, .gitp-vy-tabimg-empty { width: 24px; height: 24px; }
	.gitp-vy-sfields { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-sfield { border-right: 0; }
	.gitp-vy-sfield:last-child { border-bottom: 0; }
	.gitp-vy-sfield-btn { min-height: 68px; padding: 12px 15px; }
	.gitp-vy-sfield-value, .gitp-vy-sfield-input { font-size: 20px; }
	.gitp-vy-searchgo { min-width: 0; left: 15px; right: 15px; transform: none; }
	.gitp-vy-searchgo:hover { transform: translateY(-2px); }

	/* Popovers become centred sheets on a phone rather than dropdowns pinned to a narrow field. */
	.gitp-vy-pop {
		position: fixed;
		left: 10px; right: 10px; bottom: 10px;
		top: auto;
		min-width: 0;
		max-height: 70vh;
		border-radius: var(--vy-r-xl);
		animation: gitp-vy-sheet-up .24s cubic-bezier(.2, .8, .3, 1);
	}
}

/* =============================================================================================
 * v3.1.2 — container-aware layout.
 *
 * The package page renders through the_content, so it lives inside whatever width the theme gives an
 * article. On a theme with a ~700px content column the 366px booking rail left the main column roughly
 * 300px wide — narrow enough that "Day-by-day itinerary" wrapped onto three lines and every day card
 * became a vertical ribbon of single words. That is what "cheap" looked like, and it was a layout
 * fault rather than a styling one.
 *
 * A viewport media query cannot detect it: the viewport is 1440px wide while the container is not.
 * Container queries measure the actual space available, so the rail drops below the content whenever
 * the column genuinely cannot hold both — regardless of how wide the screen is.
 *
 * The viewport media queries earlier in this file are kept as the fallback for browsers without
 * container query support (pre-2023 Safari/Firefox); the two together mean the layout is never squeezed.
 * ========================================================================================== */

.gitp-vy-shell {
	container-type: inline-size;
	container-name: gitpshell;
}

@container gitpshell (max-width: 1000px) {
	.gitp-vy-layout { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-rail { position: static; order: 2; }
	.gitp-vy-search-layout { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-filters { display: none; }
	.gitp-vy-mobilebar { display: flex; }
	.gitp-vy-actionbar { display: flex; }
}

@container gitpshell (max-width: 780px) {
	.gitp-vy-inex { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-hotel { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-rcard { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 168px 104px;
	}
	.gitp-vy-mosaic figure:nth-of-type(1) { grid-column: span 2; grid-row: auto; }
	.gitp-vy-mosaic figure:nth-of-type(n + 4) { display: none; }
	.gitp-vy-highlights { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-sfields { grid-template-columns: minmax(0, 1fr); }
	.gitp-vy-sfield { border-right: 0; }
}

@container gitpshell (max-width: 560px) {
	.gitp-vy-day { grid-template-columns: 46px minmax(0, 1fr); }
	.gitp-vy-day-gutter::before { left: 15px; }
	.gitp-vy-day-num { width: 32px; height: 32px; font-size: 9px; }
	.gitp-vy-day-num b { font-size: 12px; }
	.gitp-vy-day-chips { display: none; }
	.gitp-vy-stop-img { max-width: 100%; }
}

/* A heading must never break mid-word, however tight the column gets. */
.gitp-vy-sec-head,
.gitp-vy-title,
.gitp-vy-day-title,
.gitp-vy-hotel-name,
.gitp-vy-rcard-title {
	overflow-wrap: break-word;
	text-wrap: balance;
	hyphens: none;
}

/* Give the page room to breathe when the theme wraps it in a narrow article. The negative margin is
   capped so it can only ever reclaim padding the theme added, never overflow the viewport. */
.gitp-vy-single .gitp-vy-shell,
.gitp-vy-block .gitp-vy-shell {
	width: 100%;
}

/* =============================================================================================
 * Typography pass — the reference sets these a touch larger than the defaults did.
 * ========================================================================================== */

.gitp-vy-sec-head { font-size: clamp(19px, 2.2cqi + 14px, 24px); line-height: 1.2; }
.gitp-vy-day-title { font-size: clamp(15px, 1.4cqi + 12px, 17.5px); }
.gitp-vy-stop-label { font-size: 14.5px; line-height: 1.4; }
.gitp-vy-stop-desc { font-size: 13.5px; }

/* The route strip reads as a single line of chips; at narrow widths it should wrap as pairs rather
   than stacking one word per row. */
.gitp-vy-route { gap: 8px 0; }
.gitp-vy-route-stop { flex: 0 1 auto; min-width: 0; }
.gitp-vy-route-label strong { white-space: nowrap; }

/* =============================================================================================
 * v3.1.3 — making position: sticky actually stick.
 *
 * The filter rail and the price rail were already declared sticky and already had align-items:start
 * on their grid parents, which is the usual culprit. The real cause is one level further out: a very
 * large number of themes set `overflow-x: hidden` on html or body to suppress a horizontal scrollbar,
 * and that silently disables position:sticky for EVERY descendant on the page. Nothing in the
 * plugin's own markup can opt out of it.
 *
 * `overflow-x: clip` suppresses the same scrollbar without establishing a scroll container, so sticky
 * keeps working. :has() scopes the override to pages that actually contain plugin markup, so no other
 * page on the site is touched.
 * ========================================================================================== */

html:has(.gitp-vy-single),
html:has(.gitp-vy-block),
body:has(.gitp-vy-single),
body:has(.gitp-vy-block) {
	overflow-x: clip;
}

/* A sticky element inside a grid track stretches to the full row height unless told otherwise, and a
   full-height element has nothing left to travel — so it looks like sticky "isn't working". Both
   parents already set align-items:start; this is the per-item belt to go with those braces. */
.gitp-vy-rail,
.gitp-vy-filters {
	align-self: start;
}

/* The rail must never be taller than the viewport or it can never finish scrolling into view. */
.gitp-vy-rail {
	max-height: calc(100vh - var(--vy-header-offset) - var(--vy-nav-h) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.gitp-vy-rail::-webkit-scrollbar { width: 6px; }
.gitp-vy-rail::-webkit-scrollbar-thumb { background: var(--vy-line); border-radius: 3px; }

/* Container queries create a containment context. inline-size containment does not break sticky, but
   being explicit here documents that the shell must never become a scroll container. */
.gitp-vy-shell { overflow: visible; }

/* --- Empty state --------------------------------------------------------------------------- */

.gitp-vy-empty-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin: 0 0 18px;
}
.gitp-vy-empty .gitp-vy-chips { justify-content: center; margin-bottom: 0; }

/* --- Filter rail polish ----------------------------------------------------------------------- */

/* A disabled option is dimmed, but one the visitor has actually ticked is never disabled — see the
   note in GITP_Listing — so this styling only ever lands on genuinely unavailable choices. */
.gitp-vy-check input:disabled { cursor: not-allowed; }
.gitp-vy-check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.gitp-vy-fchip:has(input:disabled) { opacity: .42; cursor: not-allowed; }

/* Give the rail a hairline when it becomes scrollable so it reads as a panel rather than a cut-off. */
.gitp-vy-filters { scroll-behavior: smooth; }

/* =============================================================================================
 * v3.1.4
 * ========================================================================================== */

/* The enquiry dialog used to sit at z-index 100. A fixed theme header is routinely 999 or higher,
   so the dialog opened BEHIND it — the button worked, the form loaded, and nothing appeared to
   happen. The whole overlay stack now sits above any plausible theme chrome. */
.gitp-vy-modal      { z-index: 2147483000; }
.gitp-vy-lightbox   { z-index: 2147482900; }
.gitp-vy-sheet      { z-index: 2147482800; }
.gitp-vy-actionbar  { z-index: 2147482700; }
.gitp-vy-mobilebar  { z-index: 2147482600; }

/* --- Price rail fills its column ------------------------------------------------------------ */

.gitp-vy-rail { width: 100%; }
.gitp-vy-pricecard { width: 100%; }
.gitp-vy-pricecard-top { width: 100%; }

/* --- With / Without Flight toggle ------------------------------------------------------------ */

.gitp-vy-fltoggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--vy-wash);
	border: 1px solid var(--vy-line);
}
.gitp-vy-fltoggle button {
	min-height: 40px;
	padding: 9px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--vy-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.gitp-vy-fltoggle button:hover { color: var(--vy-text); }
.gitp-vy-fltoggle button.is-active {
	background: var(--vy-card);
	color: var(--vy-accent-deep);
	box-shadow: var(--vy-sh-1);
}

/* --- Coupons --------------------------------------------------------------------------------- */

.gitp-vy-offers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--vy-line);
	background: var(--vy-deal-soft);
}
.gitp-vy-offer { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.gitp-vy-offer-code {
	flex: none;
	padding: 4px 9px;
	border: 1px dashed color-mix(in srgb, var(--vy-deal) 55%, transparent);
	border-radius: 6px;
	background: var(--vy-card);
	color: #b45309;
	font-weight: 800;
	letter-spacing: .04em;
	font-size: 11.5px;
}
.gitp-vy-offer-text { color: #92400e; line-height: 1.4; }
.gitp-vy-offer-text strong { font-weight: 800; }

.gitp-preset-dark .gitp-vy-offer-text { color: #fcd9a8; }
.gitp-preset-dark .gitp-vy-offer-code { color: #fcd9a8; }

/* =============================================================================================
 * v3.1.5 — date field, and standing down the font weights.
 * ========================================================================================== */

/* --- Departure date -------------------------------------------------------------------------
 * The native input is laid transparently over the whole field. The visitor sees the plugin's own
 * label / value / weekday lines; tapping anywhere opens the platform's real date picker. This
 * removes the "mm/dd/yyyy" that an empty date input always paints, which was colliding with the
 * field's own "Select Date" line and reading as two broken controls stacked on each other.
 * ------------------------------------------------------------------------------------------ */

.gitp-vy-sfield-date { position: relative; }
.gitp-vy-sfield-date .gitp-vy-sfield-btn { pointer-events: none; }

.gitp-vy-datein {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	font-size: 16px; /* keeps iOS from zooming the page when the picker opens */
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
/* Chrome and Safari paint their own indicator; stretch its hit area across the field so the whole
   cell is tappable rather than only the small calendar glyph. */
.gitp-vy-datein::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}
.gitp-vy-sfield-date:focus-within { background: var(--vy-accent-soft); }
.gitp-vy-sfield-date:focus-within .gitp-vy-sfield-label { color: var(--vy-accent); }

/* --- Typography: inherit the site, stop shouting ---------------------------------------------
 * The family already comes from the theme through --gitp-font. The WEIGHTS were the plugin's own,
 * and 800-850 stacked on a theme face that is already heavy reads as blunt rather than premium.
 * Everything below steps down a notch and relaxes the negative tracking that came with it. It sits
 * at the end of the file so it overrides the earlier declarations without editing each one.
 * ------------------------------------------------------------------------------------------ */

.gitp-vy-title            { font-weight: 700; letter-spacing: -.015em; }
.gitp-vy-sec-head         { font-weight: 700; letter-spacing: -.01em; }
.gitp-vy-results-title    { font-weight: 700; letter-spacing: -.015em; }
.gitp-vy-day-title        { font-weight: 650; letter-spacing: 0; }
.gitp-vy-hotel-name       { font-weight: 650; letter-spacing: 0; }
.gitp-vy-rcard-title      { font-weight: 650; letter-spacing: -.005em; }
.gitp-vy-modal-title      { font-weight: 700; letter-spacing: -.01em; }
.gitp-vy-form-title       { font-weight: 700; letter-spacing: -.01em; }
.gitp-vy-sheet-title      { font-weight: 700; letter-spacing: -.01em; }
.gitp-vy-empty h3         { font-weight: 700; }

.gitp-vy-sfield-value     { font-weight: 650; letter-spacing: -.015em; }
.gitp-vy-sfield-input     { font-weight: 650; letter-spacing: -.015em; }
.gitp-vy-price-now        { font-weight: 700; letter-spacing: -.02em; }
.gitp-vy-rcard-price      { font-weight: 700; letter-spacing: -.02em; }
.gitp-vy-actionbar-price strong { font-weight: 700; letter-spacing: -.015em; }
.gitp-vy-subnav-cta-price { font-weight: 700; }

.gitp-vy-filters-head h3  { font-weight: 700; letter-spacing: .01em; }
.gitp-vy-fgroup-head      { font-weight: 600; }
.gitp-vy-btn              { font-weight: 600; }
.gitp-vy-searchgo         { font-weight: 700; letter-spacing: .04em; }
.gitp-vy-tabitem          { font-weight: 550; }
.gitp-vy-tabitem.is-active { font-weight: 650; }
.gitp-vy-pill             { font-weight: 550; }
.gitp-vy-rating           { font-weight: 650; }
.gitp-vy-chip             { font-weight: 600; }
.gitp-vy-inc              { font-weight: 600; }
.gitp-vy-fchip            { font-weight: 600; }
.gitp-vy-check            { font-weight: 400; }
.gitp-vy-stop-label       { font-weight: 650; }
.gitp-vy-field-label      { font-weight: 600; }
.gitp-vy-price-save       { font-weight: 700; }
.gitp-vy-rcard-save       { font-weight: 700; }
.gitp-vy-ribbon           { font-weight: 700; }
.gitp-vy-rcard-tag        { font-weight: 700; }
.gitp-vy-offer-code       { font-weight: 700; }
.gitp-vy-quickfacts b     { font-weight: 650; }
.gitp-vy-route-label strong { font-weight: 650; }
.gitp-vy-hotel-nights     { font-weight: 650; }

/* Uppercase micro-labels keep their weight - at 11-12px they need it to stay legible - but lose
   the extra-bold that had them competing with real headings. */
.gitp-vy-eyebrow,
.gitp-vy-stop-type,
.gitp-vy-pop-title { font-weight: 700; }

/* =============================================================================================
 * v3.1.6 — full-bleed listing.
 *
 * The listing is a whole page, not a block inside an article. Left in a theme's ~700px content
 * column the filter rail and the results have nowhere to go. This breaks it out to the full viewport
 * width from wherever the theme nested it.
 *
 * The 50%/-50vw pair is the standard breakout: push the left edge to the centre of the container,
 * then pull it back by half the viewport. It works at any nesting depth without knowing anything
 * about the theme's markup. body already carries overflow-x: clip (see v3.1.3), so this cannot
 * introduce a horizontal scrollbar.
 * ========================================================================================== */

.gitp-vy-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Scrollbar-aware: 100vw ignores the scrollbar gutter on Windows, which would otherwise overhang by
   ~15px. dvw accounts for it where supported. */
@supports (width: 100dvw) {
	.gitp-vy-fullbleed { width: 100dvw; max-width: 100dvw; }
}

/* The shell keeps the content itself to a readable measure inside the full-bleed band. */
.gitp-vy-fullbleed > .gitp-vy-shell,
.gitp-vy-fullbleed .gitp-vy-searchwrap > .gitp-vy-shell {
	max-width: 1240px;
	margin-inline: auto;
}

/* =============================================================================================
 * v3.2.0
 * ========================================================================================== */

/* --- Result card: price block and both buttons on one line ---------------------------------- */

.gitp-vy-rcard-aside {
	align-items: flex-end;
	gap: 6px;
}
.gitp-vy-rcard-actions {
	display: flex;
	gap: 8px;
	width: 100%;
	margin-top: 6px;
}
.gitp-vy-rcard-actions .gitp-vy-btn { flex: 1; white-space: nowrap; padding-inline: 12px; }

@media (max-width: 1080px) {
	.gitp-vy-rcard-aside { align-items: center; }
	.gitp-vy-rcard-actions { width: auto; margin-top: 0; margin-left: auto; }
	.gitp-vy-rcard-actions .gitp-vy-btn { flex: none; }
}
@media (max-width: 560px) {
	.gitp-vy-rcard-actions { width: 100%; margin-left: 0; }
	.gitp-vy-rcard-actions .gitp-vy-btn { flex: 1; }
	/* The struck-through price was wrapping under the live one and reading as two prices. */
	.gitp-vy-rcard-aside { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; }
	.gitp-vy-rcard-was { order: 1; }
	.gitp-vy-rcard-price { order: 2; }
	.gitp-vy-rcard-unit { order: 3; width: auto; }
	.gitp-vy-rcard-save { order: 4; align-self: baseline; }
}

/* --- Category tab icons ---------------------------------------------------------------------- */

.gitp-vy-tabicon {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--vy-accent-soft);
	color: var(--vy-accent);
}
.gitp-vy-tabitem.is-active .gitp-vy-tabicon {
	background: var(--vy-accent);
	color: #fff;
}

/* --- Related packages ------------------------------------------------------------------------ */

.gitp-vy-related {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.gitp-vy-relcard {
	display: flex;
	flex-direction: column;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gitp-vy-relcard:hover {
	border-color: var(--vy-accent-line);
	box-shadow: var(--vy-sh-2);
	transform: translateY(-2px);
}
.gitp-vy-relcard-media { display: block; background: var(--vy-wash); }
.gitp-vy-relcard-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.gitp-vy-relcard-body { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; }
.gitp-vy-relcard-body strong { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.gitp-vy-relcard-body small { font-size: 12.5px; color: var(--vy-muted); }
.gitp-vy-relcard-price { font-size: 16px; font-weight: 700; color: var(--vy-accent-deep); margin-top: 2px; }

.gitp-vy-explore { width: 100%; }

/* --- Talk to an expert ------------------------------------------------------------------------ */

.gitp-vy-expert {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 13px;
	border-radius: var(--vy-r);
	background: var(--vy-accent-soft);
	border: 1px solid var(--vy-accent-line);
}
.gitp-vy-expert-avatar {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--vy-accent);
	color: #fff;
}
.gitp-vy-expert-text { font-size: 12.5px; line-height: 1.45; color: var(--vy-accent-deep); }
.gitp-vy-expert-text strong { display: block; font-size: 13.5px; font-weight: 700; }

/* The nudge that appears if nobody has enquired. Bottom-left so it never covers the sticky action
   bar's Enquire button — a prompt that blocks the very action it is asking for is worse than none. */
.gitp-vy-nudge {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 2147482500;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: min(340px, calc(100vw - 36px));
	padding: 15px 16px;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	box-shadow: var(--vy-sh-3);
	transform: translateY(20px);
	opacity: 0;
	visibility: hidden;
	transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease, visibility .28s;
}
.gitp-vy-nudge.is-open { transform: none; opacity: 1; visibility: visible; }
.gitp-vy-nudge-body { flex: 1; min-width: 0; }
.gitp-vy-nudge-body strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.gitp-vy-nudge-body p { margin: 0 0 11px; font-size: 13px; line-height: 1.5; color: var(--vy-muted); }
.gitp-vy-nudge-close {
	position: absolute;
	top: 7px; right: 7px;
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vy-faint);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.gitp-vy-nudge-close:hover { background: var(--vy-wash); color: var(--vy-text); }

@media (max-width: 760px) {
	/* Above the sticky action bar, never over it. */
	.gitp-vy-nudge { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
}

/* --- Enquiry form: fit a phone without scrolling --------------------------------------------- */

@media (max-width: 640px) {
	.gitp-vy-modal-panel { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
	.gitp-vy-modal-title { font-size: 18px; margin-bottom: 3px; }
	.gitp-vy-form-title { font-size: 17px; }
	.gitp-vy-form-intro { margin-bottom: 12px; font-size: 13px; }

	/* Short fields pair up rather than each taking a full row — that alone removes about a third of
	   the height, which is the difference between fitting a phone and not. */
	.gitp-vy-form-grid { gap: 10px; }
	.gitp-vy-field-half { grid-column: span 1; }
	.gitp-vy-field { gap: 4px; }
	.gitp-vy-field-label { font-size: 12px; }
	.gitp-vy-field input,
	.gitp-vy-field select { min-height: 42px; padding: 9px 12px; }
	.gitp-vy-field textarea { min-height: 62px; }
	.gitp-vy-form-foot { margin-top: 12px; }
}

/* =============================================================================================
 * v3.2.1 — travel dates
 * ========================================================================================== */

.gitp-vy-pop-dates { min-width: 300px; }

.gitp-vy-daterow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	border-bottom: 1px solid var(--vy-line);
}
.gitp-vy-daterow > span {
	flex: none;
	width: 48px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vy-muted);
}
.gitp-vy-daterow input[type="date"] {
	flex: 1;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-sm);
	background: var(--vy-card);
	color: var(--vy-text);
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming the page when the picker opens */
	cursor: pointer;
}
.gitp-vy-daterow input[type="date"]:focus {
	outline: none;
	border-color: var(--vy-accent);
	box-shadow: 0 0 0 3px var(--vy-accent-line);
}

.gitp-vy-pop-note {
	margin: 10px 8px 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--vy-faint);
}

/* The 3.1.5 overlay is gone; neutralise its rules in case a cached stylesheet still carries them. */
.gitp-vy-sfield-date .gitp-vy-sfield-btn { pointer-events: auto; }
.gitp-vy-datein { display: none; }

/* =============================================================================================
 * v3.2.2 — smart sticky rail
 * ========================================================================================== */

/* The 3.1.3 cap is lifted. Height is managed by script now, because whether the rail fits depends on
   the theme's header height and the visitor's viewport — neither of which CSS can compare. */
.gitp-vy-rail {
	max-height: none;
	overflow-y: visible;
	align-self: start;
	/* Set by gitp-voyager.js; the fallback keeps it sensible before the script runs or if it fails. */
	top: calc(var(--vy-header-offset) + var(--vy-nav-h) + 20px);
	padding-bottom: 20px;
}

/* When the rail is taller than the space available the script flips it to bottom-anchored, so the
   card's last row — the Enquire button — stays on screen instead of hanging below the fold. */
.gitp-vy-rail.is-bottom-sticky {
	top: auto;
	bottom: 16px;
}

/* The layout row must be at least as tall as the rail, or sticky has nothing to travel within. */
.gitp-vy-layout { align-items: start; }

@media (max-width: 1080px) {
	.gitp-vy-rail,
	.gitp-vy-rail.is-bottom-sticky {
		position: static;
		top: auto;
		bottom: auto;
		padding-bottom: 0;
	}
}

/* =============================================================================================
 * v3.2.3 — sticky nav that cannot clip its own CTA, and a bottom bar at every width.
 * ========================================================================================== */

.gitp-vy-subnav-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	overflow: visible;   /* the scrolling now happens one level in, on the links track */
}

.gitp-vy-subnav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--vy-nav-h);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gitp-vy-subnav-links::-webkit-scrollbar { display: none; }

/* Fixed, never scrolled, never clipped. */
.gitp-vy-subnav-cta {
	flex: 0 0 auto;
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

/* It was hidden until the page had scrolled past the price card. On a page where the rail is always
   visible that rule only ever produced a half-empty bar, so the CTA is simply always present. */
.gitp-vy-subnav .gitp-vy-subnav-cta,
.gitp-vy-subnav.is-condensed .gitp-vy-subnav-cta {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.gitp-vy-subnav-cta-price { line-height: 1.1; }
.gitp-vy-subnav-cta-price small { display: block; font-size: 11px; font-weight: 600; color: var(--vy-muted); }

@media (max-width: 560px) {
	/* On a small phone the price would squeeze the tabs to nothing; the bottom action bar already
	   carries it there, so the nav keeps just the button. */
	.gitp-vy-subnav-cta-price { display: none; }
}

/* --- Sticky action bar on the package page at every width ------------------------------------ */

.gitp-vy-single .gitp-vy-actionbar { display: flex; }

@media (min-width: 1081px) {
	.gitp-vy-single .gitp-vy-actionbar {
		/* Sits inside the content measure rather than edge to edge, so on a wide screen it reads as
		   part of the page instead of a browser chrome bar. */
		left: 50%;
		right: auto;
		transform: translateX(-50%) translateY(110%);
		width: min(1240px, calc(100vw - 40px));
		border: 1px solid var(--vy-line);
		border-radius: var(--vy-r-lg) var(--vy-r-lg) 0 0;
		padding: 12px 20px;
	}
	.gitp-vy-single .gitp-vy-actionbar.is-visible { transform: translateX(-50%); }
}

/* Anchors clear the header AND the sticky nav, so a tapped section lands below both. */
.gitp-vy-anchor {
	scroll-margin-top: calc(var(--vy-header-offset) + var(--vy-nav-h) + 20px);
}

/* =============================================================================================
 * v3.2.4 — sticky that is actually sticky, and the fare chooser.
 * ========================================================================================== */

/* Undo the 3.2.2 bottom-anchoring outright. Anchoring to `bottom` means the element only pins once
   its own bottom reaches the viewport bottom, which on a card this size reads as never sticking. */
.gitp-vy-rail.is-bottom-sticky { top: auto; bottom: auto; }

@media (min-width: 1081px) {
	.gitp-vy-rail,
	.gitp-vy-rail.is-bottom-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--vy-header-offset) + var(--vy-nav-h) + 20px);
		bottom: auto;
		align-self: start;
		/* Bound to the viewport so the card can never run past the fold; the card itself handles
		   what happens to its contents at that height. */
		max-height: calc(100vh - var(--vy-header-offset) - var(--vy-nav-h) - 40px);
		overflow: visible;
		padding-bottom: 0;
		z-index: 5;
	}

	/* Column, so the footer can be pinned while the rest takes the remaining height. */
	.gitp-vy-pricecard {
		display: flex;
		flex-direction: column;
		max-height: 100%;
		min-height: 0;
	}

	/* The only part that scrolls. */
	.gitp-vy-pricecard-scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	.gitp-vy-pricecard-scroll::-webkit-scrollbar { width: 5px; }
	.gitp-vy-pricecard-scroll::-webkit-scrollbar-thumb { background: var(--vy-line); border-radius: 3px; }
}

/* Never scrolls, never clipped — at any width. */
.gitp-vy-pricecard-foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--vy-line);
	background: var(--vy-card);
}

/* --- Fare chooser ----------------------------------------------------------------------------- */

.gitp-vy-fares { display: flex; flex-direction: column; gap: 10px; }

.gitp-vy-fare {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 15px 16px;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r);
	background: var(--vy-card);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gitp-vy-fare:hover {
	border-color: var(--vy-accent);
	box-shadow: var(--vy-sh-2);
	transform: translateY(-1px);
}
.gitp-vy-fare-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gitp-vy-fare-from { font-size: 12px; color: var(--vy-muted); }
.gitp-vy-fare-label { font-size: 15.5px; font-weight: 650; }
.gitp-vy-fare-right { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.gitp-vy-fare-price { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.gitp-vy-fare-unit { font-size: 11.5px; color: var(--vy-muted); }
.gitp-vy-fare-go { flex: none; color: var(--vy-accent); font-size: 20px; line-height: 1; }

/* =============================================================================================
 * v3.2.5 — mobile-only bottom bar, and the package name in the sticky header.
 * ========================================================================================== */

/* --- The desktop bottom bar is withdrawn ------------------------------------------------------
 * 3.2.3 put it at every width. On a laptop the sticky rail already carries Enquire, so this was a
 * third copy of the same button fighting the other two — and the repositioning it needed to sit
 * inside the content measure is what stopped it working. Mobile only, where it is the only CTA.
 * ------------------------------------------------------------------------------------------ */

@media (min-width: 1081px) {
	.gitp-vy-actionbar,
	.gitp-vy-single .gitp-vy-actionbar {
		display: none !important;
	}
}

@media (max-width: 1080px) {
	.gitp-vy-single .gitp-vy-actionbar,
	.gitp-vy-actionbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		border: 0;
		border-top: 1px solid var(--vy-line);
		border-radius: 0;
		padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
		transform: translateY(110%);
	}
	.gitp-vy-single .gitp-vy-actionbar.is-visible,
	.gitp-vy-actionbar.is-visible { transform: none; }
}

/* --- Package name in the sticky bar ------------------------------------------------------------ */

.gitp-vy-subnav-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .28s cubic-bezier(.3,.8,.4,1), opacity .2s ease, margin-right .28s ease;
	margin-right: 0;
}
.gitp-vy-subnav.is-condensed .gitp-vy-subnav-title {
	max-width: 42%;
	opacity: 1;
	margin-right: 18px;
}

.gitp-vy-subnav-title strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gitp-vy-subnav-title small {
	display: block;
	font-size: 11.5px;
	color: var(--vy-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) {
	/* Below this the tabs and the title cannot both be legible. The title wins — it says where you
	   are, which matters more than a tab strip you can still scroll to. */
	.gitp-vy-subnav.is-condensed .gitp-vy-subnav-title { max-width: 60%; }
	.gitp-vy-subnav.is-condensed .gitp-vy-subnav-links { display: none; }
}
@media (max-width: 560px) {
	.gitp-vy-subnav.is-condensed .gitp-vy-subnav-title { max-width: 100%; }
	.gitp-vy-subnav-title small { display: none; }
}

/* =============================================================================================
 * v3.3.0 — carousel + destination page
 * ========================================================================================== */

.gitp-vy-carousel { margin: 26px 0; }

.gitp-vy-carousel-head {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	margin-bottom: 16px;
}
.gitp-vy-carousel-head > div:first-child { flex: 1; min-width: 0; }
.gitp-vy-carousel-head .gitp-vy-sec-sub { margin-bottom: 0; }
.gitp-vy-carousel-nav { display: flex; gap: 8px; flex: none; }

.gitp-vy-carousel-btn {
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--vy-line);
	border-radius: 50%;
	background: var(--vy-card);
	color: var(--vy-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.gitp-vy-carousel-btn:hover:not(:disabled) { border-color: var(--vy-accent); color: var(--vy-accent); background: var(--vy-accent-soft); }
.gitp-vy-carousel-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Scroll-snap rather than a transform track: this responds to a trackpad, a swipe and the keyboard
   with no script at all, and degrades to a plain scrollable row if the script never runs. */
.gitp-vy-carousel-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, 1fr);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.gitp-vy-carousel-track::-webkit-scrollbar { display: none; }
.gitp-vy-carousel-track:focus-visible { outline: 3px solid var(--vy-accent-line); outline-offset: 4px; border-radius: var(--vy-r); }

@media (min-width: 1081px) { .gitp-vy-carousel-track { grid-auto-columns: minmax(292px, 1fr); } }

.gitp-vy-ccard {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--vy-card);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	box-shadow: var(--vy-sh-1);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gitp-vy-ccard:hover { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-2); transform: translateY(-3px); }

.gitp-vy-ccard-media { position: relative; display: block; background: var(--vy-wash); }
.gitp-vy-ccard-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.gitp-vy-ccard-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.gitp-vy-ccard-body h3 { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.gitp-vy-ccard-body h3 a { color: inherit; text-decoration: none; }
.gitp-vy-ccard-body h3 a:hover { color: var(--vy-accent); }
.gitp-vy-ccard-body .gitp-vy-pill { align-self: flex-start; }
.gitp-vy-ccard-route { margin: 0; font-size: 12.5px; color: var(--vy-muted); }

.gitp-vy-ccard-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px dashed var(--vy-line);
}
.gitp-vy-ccard-price { display: flex; flex-direction: column; line-height: 1.15; }
.gitp-vy-ccard-price del { font-size: 12px; color: var(--vy-faint); }
.gitp-vy-ccard-price strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.gitp-vy-ccard-foot .gitp-vy-btn { margin-left: auto; }

/* --- Destination facts ------------------------------------------------------------------------ */

.gitp-vy-destfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--vy-line);
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	margin-bottom: 8px;
}
.gitp-vy-destfact {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 17px;
	background: var(--vy-card);
}
.gitp-vy-destfact span {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vy-faint);
}
.gitp-vy-destfact strong { font-size: 14.5px; font-weight: 650; }

/* =============================================================================================
 * v3.3.1 — grid layout for the package strip.
 *
 * --vy-cols is set inline by the shortcode. auto-fit with a minimum keeps it honest on narrow
 * screens: the requested column count is a ceiling, not a promise, so a 5-across grid becomes 2
 * across on a tablet rather than five unreadable slivers.
 * ========================================================================================== */

.gitp-vy-cgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(220px, calc(100% / var(--vy-cols, 4) - 16px), 100%), 1fr));
	gap: 16px;
}

@media (max-width: 760px) {
	.gitp-vy-cgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 480px) {
	.gitp-vy-cgrid { grid-template-columns: minmax(0, 1fr); }
}

/* A grid has no arrows, so the head collapses to just its text. */
.gitp-vy-carousel-head:has(> div:only-child) { display: block; }

/* =============================================================================================
 * v3.4.1 — full-bleed without a transform, so position:fixed children still work.
 *
 * THE BUG: full-bleed was `margin-left: 50%` + `transform: translateX(-50%)`. A transformed element
 * becomes the containing block for every position:fixed descendant, so the mobile action bar stopped
 * being fixed to the viewport and became absolutely positioned inside the page — landing at the
 * bottom of the content where it is never seen. It looked exactly like "sticky isn't working".
 *
 * Margins alone achieve the same edge-to-edge result and create no containing block.
 * ========================================================================================== */

.gitp-vy-fullbleed {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	transform: none;
}

@supports (width: 100dvw) {
	.gitp-vy-fullbleed {
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50dvw);
	}
}

/* The desktop repositioning from 3.2.3 also used a transform. The bar is desktop-hidden now, but
   leaving a transform on it would re-break the mobile case the moment it were ever shown again. */
@media (min-width: 1081px) {
	.gitp-vy-single .gitp-vy-actionbar,
	.gitp-vy-actionbar { display: none !important; transform: none; }
}

@media (max-width: 1080px) {
	.gitp-vy-actionbar,
	.gitp-vy-single .gitp-vy-actionbar {
		display: flex !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		border: 0;
		border-top: 1px solid var(--vy-line);
		border-radius: 0;
		transform: translateY(110%);
	}
	.gitp-vy-actionbar.is-visible,
	.gitp-vy-single .gitp-vy-actionbar.is-visible { transform: none; }
}

/* --- Breadcrumbs ------------------------------------------------------------------------------ */

/* Belt to the PHP gate's braces: a cached page rendered before the setting existed still hides them. */
.gitp-vy-crumbs { display: none; }
.gitp-vy-crumbs.is-enabled { display: flex; }

/* =============================================================================================
 * v3.4.2 — image placeholders, and hardening the mobile sticky bar.
 * ========================================================================================== */

/* --- Placeholder ------------------------------------------------------------------------------
 * Plainly not a photograph — no fake scenery, no stock image — but it holds the layout and carries
 * the package's initial so a grid of them is still scannable. Hue comes from the post id.
 * ------------------------------------------------------------------------------------------ */

.gitp-vy-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background:
		linear-gradient(140deg,
			hsl(var(--ph-h, 210) 62% 58%) 0%,
			hsl(calc(var(--ph-h, 210) + 32) 58% 44%) 100%);
	color: rgba(255, 255, 255, .82);
	overflow: hidden;
}
.gitp-vy-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 78% 18%, rgba(255,255,255,.22), transparent 70%),
		radial-gradient(50% 44% at 14% 88%, rgba(0,0,0,.18), transparent 70%);
}
.gitp-vy-ph-mark {
	position: relative;
	z-index: 1;
	font-size: clamp(30px, 12cqi, 56px);
	font-weight: 800;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .92);
	line-height: 1;
}
.gitp-vy-ph svg {
	position: absolute;
	right: 12px;
	bottom: 11px;
	z-index: 1;
	opacity: .55;
}

/* The slots the placeholder drops into each have their own aspect expectations. */
.gitp-vy-rcard-media .gitp-vy-ph { min-height: 216px; }
.gitp-vy-ccard-media .gitp-vy-ph { aspect-ratio: 16 / 10; min-height: 0; }
.gitp-vy-relcard-media .gitp-vy-ph { aspect-ratio: 16 / 10; min-height: 0; }
.gitp-vy-mosaic .gitp-vy-ph { min-height: 100%; }

@media (max-width: 760px) {
	.gitp-vy-rcard-media .gitp-vy-ph { min-height: 194px; }
}

/* A hero with nothing in it yet is one wide band rather than an empty five-cell grid. */
.gitp-vy-mosaic.is-empty {
	grid-template-columns: 1fr;
	grid-template-rows: 300px;
}
.gitp-vy-mosaic.is-empty figure { grid-row: auto; grid-column: auto; }
@media (max-width: 760px) {
	.gitp-vy-mosaic.is-empty { grid-template-rows: 210px; }
}

/* --- Sticky section bar on mobile -------------------------------------------------------------
 * It was already position:sticky, but a theme header sitting above it at a higher z-index will
 * overlap it and read as "not sticky". Lifting it clear, and making sure nothing in the plugin's own
 * ancestry can clip it.
 * ------------------------------------------------------------------------------------------ */

.gitp-vy-subnav {
	z-index: 999;
	overflow: visible;
}
.gitp-vy-single,
.gitp-vy-block { overflow: visible; }

@media (max-width: 1080px) {
	.gitp-vy-subnav {
		/* Slightly denser on a phone so the title, the tabs and the CTA all still fit the row. */
		--vy-nav-h: 52px;
	}
	.gitp-vy-subnav-inner { gap: 10px; }
	.gitp-vy-subnav-cta .gitp-vy-btn { padding: 9px 14px; font-size: 13px; }
}

/* =============================================================================================
 * v3.4.5 — button colour, and the space above the hero on a phone.
 * ========================================================================================== */

/* --- Buttons ---------------------------------------------------------------------------------
 * Themes style bare `button` and `a.button` with rules that outrank a single class here, which is
 * how the action bar's Enquire button ended up invisible — theme background, theme text colour, on
 * a bar the plugin had already coloured. Stating these firmly is the fix; they are scoped to the
 * plugin's own buttons so nothing else on the site is affected.
 * ------------------------------------------------------------------------------------------ */

.gitp-vy .gitp-vy-btn.gitp-vy-btn-primary,
.gitp-vy-actionbar .gitp-vy-btn-primary,
.gitp-vy-modal .gitp-vy-btn-primary {
	background: linear-gradient(180deg, var(--vy-accent) 0%, var(--vy-accent-deep) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	text-shadow: none !important;
	opacity: 1 !important;
}
.gitp-vy .gitp-vy-btn.gitp-vy-btn-primary:hover,
.gitp-vy-actionbar .gitp-vy-btn-primary:hover {
	color: #fff !important;
}

.gitp-vy .gitp-vy-btn.gitp-vy-btn-ghost,
.gitp-vy-actionbar .gitp-vy-btn-ghost {
	background: transparent !important;
	color: var(--vy-accent) !important;
	border-color: var(--vy-accent-line) !important;
}
.gitp-vy .gitp-vy-btn.gitp-vy-btn-ghost:hover {
	background: var(--vy-accent-soft) !important;
	color: var(--vy-accent-deep) !important;
	border-color: var(--vy-accent) !important;
}

/* The bar itself, so a dark theme background cannot swallow it. */
.gitp-vy-actionbar {
	background: var(--vy-card) !important;
	color: var(--vy-text);
}
.gitp-vy-actionbar-price strong { color: var(--vy-text); }
.gitp-vy-actionbar-price small,
.gitp-vy-actionbar-price del { color: var(--vy-muted); }

/* --- Space above the hero on a phone ---------------------------------------------------------- */

@media (max-width: 760px) {
	.gitp-vy-single { padding-top: 0; }
	.gitp-vy-single .gitp-vy-hero { margin-bottom: 14px; }
	.gitp-vy-subnav { margin-bottom: 18px; }
	.gitp-vy-titlebar { margin-top: 14px; gap: 12px; }
	.gitp-vy-crumbs { margin-bottom: 10px; }

	/* The theme wraps the_content in its own spacing; with the intro paragraph gone that leaves a
	   gap above the gallery with nothing in it. */
	.gitp-vy-single > .gitp-vy-shell:first-child { padding-top: 0; }
	.gitp-vy-single:first-child { margin-top: 0; }
}

/* An empty paragraph left behind by the theme's autop when the intro is hidden. */
.gitp-vy-single + p:empty,
.gitp-vy-single ~ p:empty { display: none; }

/* =============================================================================================
 * v3.4.6 — destination grid
 * ========================================================================================== */

.gitp-vy-dgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(230px, calc(100% / var(--vy-cols, 3) - 16px), 100%), 1fr));
	gap: 16px;
}
@media (max-width: 760px) { .gitp-vy-dgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 480px) { .gitp-vy-dgrid { grid-template-columns: minmax(0, 1fr); } }

.gitp-vy-dcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vy-line);
	border-radius: var(--vy-r-lg);
	overflow: hidden;
	background: var(--vy-card);
	box-shadow: var(--vy-sh-1);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gitp-vy-dcard:hover { border-color: var(--vy-accent-line); box-shadow: var(--vy-sh-2); transform: translateY(-3px); }

.gitp-vy-dcard-media { position: relative; display: block; background: var(--vy-wash); }
.gitp-vy-dcard-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gitp-vy-dcard:hover .gitp-vy-dcard-media img { transform: scale(1.05); }
.gitp-vy-dcard-media .gitp-vy-ph { aspect-ratio: 4 / 3; min-height: 0; }

/* A gradient rather than a flat wash: the name sits on the darkest part while the top of the photo
   stays untinted, so the image still reads as an image. */
.gitp-vy-dcard-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 12, 22, .78) 0%, rgba(8, 12, 22, .28) 38%, transparent 66%);
}

.gitp-vy-dcard-text {
	position: absolute;
	left: 16px; right: 16px; bottom: 13px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #fff;
}
.gitp-vy-dcard-text strong { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.gitp-vy-dcard-text small { font-size: 12.5px; opacity: .85; }

.gitp-vy-dcard-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	font-size: 13px;
}
.gitp-vy-dcard-count { color: var(--vy-muted); font-weight: 600; }
.gitp-vy-dcard-price { margin-left: auto; font-weight: 700; color: var(--vy-accent-deep); }

/* =============================================================================================
 * v3.4.7 — the action bar paints itself.
 *
 * It lives on <body> now (see gitp-voyager.js), outside the .gitp-vy token scope. It carries the
 * class itself so the tokens resolve, and these declarations are stated without relying on any
 * inherited variable so the bar can never render transparent again.
 * ========================================================================================== */

.gitp-vy-actionbar {
	background: var(--vy-card, #ffffff) !important;
	color: var(--vy-text, #1f2430) !important;
	border-top: 1px solid var(--vy-line, #e5e7eb) !important;
	box-shadow: 0 -6px 24px rgba(16, 24, 40, .14) !important;
	/* Above the expert nudge, which also lives on body. */
	z-index: 2147482750;
}

.gitp-vy-actionbar .gitp-vy-actionbar-price strong { color: var(--vy-text, #1f2430) !important; }
.gitp-vy-actionbar .gitp-vy-actionbar-price small,
.gitp-vy-actionbar .gitp-vy-actionbar-price del { color: var(--vy-muted, #6b7280) !important; }

.gitp-vy-actionbar .gitp-vy-btn-primary {
	background: linear-gradient(180deg, var(--vy-accent, #2563eb) 0%, var(--vy-accent-deep, #1d4ed8) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* The nudge sits above the bar rather than over it, so it can never cover the button it is asking
   the visitor to press. */
@media (max-width: 1080px) {
	.gitp-vy-nudge { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* =============================================================================================
 * v3.4.8 — the section bar sits under the site's own header, not over it.
 * ========================================================================================== */

/* At 999 this painted over the theme header, so a wrong offset meant the plugin covered the site's
   navigation. Below a typical theme header now: if the two ever do overlap again, the site's own
   header wins, which is the better of the two failure modes. */
.gitp-vy-subnav { z-index: 90; }

/* The WordPress admin bar is fixed for logged-in visitors and is part of the stack the script walks.
   This is a floor for the case where scripting is unavailable and nothing gets measured at all. */
body.admin-bar .gitp-vy-subnav { top: calc(var(--vy-header-offset, 0px) + 0px); }

@media screen and (max-width: 782px) {
	/* The admin bar is 46px tall below this width, and is NOT fixed — it scrolls away — so it must
	   not be added to the offset there. The script handles this correctly because it measures what is
	   actually pinned; this note exists so the difference is not mistaken for a bug later. */
	body.admin-bar .gitp-vy-subnav { top: var(--vy-header-offset, 0px); }
}

/* =============================================================================================
 * v3.5.0 — the section bar on a phone.
 *
 * Two rows: identity and price above, the whole tab strip below. The previous rule hid the tabs on
 * mobile once the bar condensed, which removed the navigation exactly when the page got long enough
 * to need it.
 * ========================================================================================== */

@media (max-width: 900px) {

	/* Taller, because it is two rows now. Anchors and scroll-margin read this, so they follow. */
	.gitp-vy-subnav { --vy-nav-h: 100px; }

	.gitp-vy-subnav-inner {
		flex-wrap: wrap;
		align-items: center;
		height: auto;
		gap: 0 10px;
		padding-top: 8px;
	}

	/* Row one — always shown here, not only once condensed. On a phone the heading scrolls away
	   almost immediately, so the bar is the only thing saying what you are looking at. */
	.gitp-vy-subnav .gitp-vy-subnav-title,
	.gitp-vy-subnav.is-condensed .gitp-vy-subnav-title {
		order: 1;
		flex: 1 1 auto;
		max-width: none;
		opacity: 1;
		margin-right: 0;
		min-width: 0;
	}
	.gitp-vy-subnav-title strong { font-size: 14px; }
	.gitp-vy-subnav-title small { display: block; font-size: 11px; }

	.gitp-vy-subnav-cta { order: 2; flex: 0 0 auto; gap: 10px; }
	.gitp-vy-subnav-cta-price { display: block; font-size: 15px; }
	.gitp-vy-subnav-cta-price small { font-size: 10px; }
	.gitp-vy-subnav-cta .gitp-vy-btn { padding: 9px 15px; font-size: 13px; min-height: 40px; }

	/* Row two — the full strip, edge to edge. */
	.gitp-vy-subnav-links,
	.gitp-vy-subnav.is-condensed .gitp-vy-subnav-links {
		display: flex;
		order: 3;
		flex: 1 0 100%;
		height: 48px;
		margin-top: 8px;
		border-top: 1px solid var(--vy-line);
		scroll-snap-type: x proximity;
		/* Bleed to the shell's edges so the first and last tabs are not visually trapped. */
		margin-inline: -20px;
		padding-inline: 20px;
	}

	.gitp-vy-subnav-links a {
		scroll-snap-align: center;
		padding: 0 14px;
		font-size: 14px;
		/* A 48px row is the whole hit area, so the target is comfortably past the 44px floor. */
	}
	.gitp-vy-subnav-links a::after { left: 14px; right: 14px; }
}

@media (max-width: 560px) {
	.gitp-vy-subnav { --vy-nav-h: 96px; }
	.gitp-vy-subnav-title strong { font-size: 13.5px; }
	/* The meta line goes; the name alone answers "what am I reading". */
	.gitp-vy-subnav-title small { display: none; }
	.gitp-vy-subnav-cta-price { display: none; }
	.gitp-vy-subnav-cta .gitp-vy-btn { padding: 9px 16px; }
}

/* A fade at each end of the strip so it reads as scrollable rather than clipped. Pointer-events off
   so it never intercepts a tap meant for a tab underneath it. */
@media (max-width: 900px) {
	.gitp-vy-subnav-inner { position: relative; }
	.gitp-vy-subnav-inner::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		width: 34px;
		height: 48px;
		pointer-events: none;
		background: linear-gradient(to right, transparent, var(--vy-card));
	}
}

/* --- Title block on a phone -------------------------------------------------------------------
 * The facts row and the Share / PDF buttons stay visible rather than being dropped; they simply wrap.
 * ------------------------------------------------------------------------------------------ */

@media (max-width: 760px) {
	.gitp-vy-titlebar { flex-direction: column; align-items: stretch; }
	.gitp-vy-titlebar-actions { order: -1; justify-content: flex-end; }
	.gitp-vy-title-meta { gap: 6px; }
	.gitp-vy-title-meta .gitp-vy-pill { font-size: 12px; padding: 5px 10px; }
	.gitp-vy-icon-btn { padding: 9px 14px; font-size: 13px; }
}

/* =============================================================================================
 * v3.5.2 — the rail, stated once.
 *
 * Its behaviour used to be split between CSS and a script that also set an inline `top`. The script
 * is gone; this is the whole of it now, so there is one place to look and nothing to race against.
 * ========================================================================================== */

@media (min-width: 1081px) {
	.gitp-vy-rail {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--vy-header-offset, 0px) + var(--vy-nav-h, 56px) + 20px);
		bottom: auto;
		align-self: start;
		max-height: calc(100vh - var(--vy-header-offset, 0px) - var(--vy-nav-h, 56px) - 40px);
		overflow: visible;
		z-index: 5;
	}
}

/* =============================================================================================
 * v3.5.3 — measured height for consumers, declared height for layout.
 *
 * --vy-nav-real is written by the script from the bar's actual rendered height. Only things that
 * need to CLEAR the bar read it. Nothing that determines the bar's height may, or the measurement
 * feeds itself and the bar inflates without limit — which is exactly what v3.5.0b did.
 * ========================================================================================== */

.gitp-vy-anchor {
	scroll-margin-top: calc(var(--vy-header-offset, 0px) + var(--vy-nav-real, var(--vy-nav-h, 56px)) + 20px);
}

@media (min-width: 1081px) {
	.gitp-vy-rail {
		top: calc(var(--vy-header-offset, 0px) + var(--vy-nav-real, var(--vy-nav-h, 56px)) + 20px);
		max-height: calc(100vh - var(--vy-header-offset, 0px) - var(--vy-nav-real, var(--vy-nav-h, 56px)) - 40px);
	}
}

/* The bar's own height stays declared, never measured. Belt for the loop: an explicit ceiling means
   that even if something else ever writes to --vy-nav-h, the bar cannot run away down the page. */
.gitp-vy-subnav { max-height: 132px; }
.gitp-vy-subnav-inner { max-height: 132px; }

@media (max-width: 900px) {
	.gitp-vy-subnav,
	.gitp-vy-subnav-inner { max-height: 116px; }
}

/* =============================================================================================
 * v3.5.4 — contain the layout so the footer cannot start early.
 *
 * The wrappers were plain blocks, so a child's top or bottom margin escaped the parent instead of
 * being counted in its height (collapsing margins). With the full-bleed negative margins on top of
 * that, the theme's footer began before the content had finished and drew over it.
 *
 * flow-root gives each wrapper its own block formatting context: margins stay inside, floats are
 * contained, and the element's height always includes everything in it.
 * ========================================================================================== */

.gitp-vy-single,
.gitp-vy-block,
.gitp-vy-fullbleed {
	display: flow-root;
	overflow: visible;
}

/* A full-bleed block still has to occupy its own row in the theme's flow. */
.gitp-vy-fullbleed { clear: both; }

/* Trailing space so the last card never sits flush against the footer. */
.gitp-vy-single,
.gitp-vy-block { padding-bottom: 28px; }

@media (max-width: 760px) {
	.gitp-vy-single,
	.gitp-vy-block { padding-bottom: 20px; }

	/* The hero is a single band on a phone; without images it should be modest, not a screen of
	   nothing. 3.4.2 sized it for a desktop mosaic. */
	.gitp-vy-mosaic.is-empty { grid-template-rows: 172px; }
}

/* Never leave an image box with no image in it. */
.gitp-vy-mosaic figure:empty,
.gitp-vy-rcard-media:empty,
.gitp-vy-ccard-media:empty,
.gitp-vy-dcard-media:empty { display: none; }

/* =============================================================================================
 * v3.5.5 — paint order against the theme's footer.
 *
 * 3.5.4 treated the footer overlap as the content being too short (collapsing margins) and added
 * flow-root. Looking again at where it fails, the card is not cut off — the footer's own background
 * is drawn ON TOP of it. That is paint order, not height: the theme's footer carries position and a
 * z-index, the plugin's blocks were static, so the footer wins wherever the two meet.
 *
 * Giving the blocks a position and a z-index puts them in the same conversation. Kept low (2) on
 * purpose: high enough to beat a footer that is merely positioned, low enough that a genuine
 * overlay — a cookie bar, a menu drawer, a modal — still covers the page as it should.
 * ========================================================================================== */

.gitp-vy-single,
.gitp-vy-block {
	position: relative;
	z-index: 2;
}

/* The footer must also be able to sit below us without being forced under a full-bleed block's
   negative margins, so the bleed keeps its own row. */
.gitp-vy-fullbleed { position: relative; z-index: 2; }

/* =============================================================================================
 * v3.5.6 — the 420px of empty space above the fold on a phone.
 *
 * .gitp-vy-titlebar-main carries `flex: 1 1 420px`. In the row layout that basis is a WIDTH, which
 * is what it was written for. v3.5.0 then set `flex-direction: column` on the title bar for phones —
 * and in a column container flex-basis resolves against the BLOCK axis, so 420px silently became a
 * minimum height. DevTools measured the element at 370 x 420 holding roughly 120px of content: three
 * hundred pixels of nothing, on every package and destination page, on every phone.
 *
 * The basis is reset to auto wherever the direction is column. Stated on both breakpoints that flip
 * the direction so the two can never disagree.
 * ========================================================================================== */

@media (max-width: 760px) {
	.gitp-vy-titlebar { flex-direction: column; align-items: stretch; }

	/* auto, not a length: in a column the basis is the height, and the height should come from the
	   content. */
	.gitp-vy-titlebar-main {
		flex: 0 1 auto;
		min-height: 0;
	}

	.gitp-vy-titlebar-actions { flex: 0 0 auto; }
}

/* Same reasoning anywhere else the direction flips. */
@media (max-width: 560px) {
	.gitp-vy-titlebar-main { flex: 0 1 auto; min-height: 0; }
}

/* =============================================================================================
 * v3.5.7
 * ========================================================================================== */

/* --- Content hidden behind the fixed mobile bar ------------------------------------------------
 * The Filters / Sort bar is position:fixed, so it sits over whatever the page ends with — the
 * destination facts grid was being cut in half by it. Fixed elements take up no space in flow, so
 * the page has to reserve it explicitly.
 * ------------------------------------------------------------------------------------------ */

@media (max-width: 1080px) {
	.gitp-vy-block:has(.gitp-vy-mobilebar),
	.gitp-vy-single { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Browsers without :has() still get clearance on any listing that carries the bar. */
@media (max-width: 1080px) {
	.gitp-vy-results { padding-bottom: 12px; }
}

/* --- Dead space above the title on a phone -----------------------------------------------------
 * With breadcrumbs off and no gallery yet, the hero opened with nothing but its own spacing.
 * ------------------------------------------------------------------------------------------ */

@media (max-width: 760px) {
	.gitp-vy-hero { margin-top: 0; padding-top: 0; }
	.gitp-vy-hero > .gitp-vy-titlebar:first-child { margin-top: 0; }
	.gitp-vy-single > .gitp-vy-shell:first-child,
	.gitp-vy-block > .gitp-vy-shell:first-child { padding-top: 0; }

	/* The share/PDF row leads on a phone; it should sit tight to the top rather than floating. */
	.gitp-vy-titlebar-actions { margin-bottom: 2px; }
}

/* =============================================================================================
 * v3.5.8 — the mosaic sizes itself to the photos it actually has.
 *
 * The grid was always two rows of five cells, written for a full gallery. A destination with one
 * photo therefore rendered the photo and then an empty second row — a blank band under the image
 * that looked like a layout fault, because it was one.
 * ========================================================================================== */

.gitp-vy-mosaic[data-count="1"] {
	grid-template-columns: 1fr;
	grid-template-rows: 340px;
}
.gitp-vy-mosaic[data-count="1"] figure:nth-of-type(1) { grid-row: auto; grid-column: auto; }

.gitp-vy-mosaic[data-count="2"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 300px;
}
.gitp-vy-mosaic[data-count="2"] figure:nth-of-type(1) { grid-row: auto; }

.gitp-vy-mosaic[data-count="3"] {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 150px 150px;
}

.gitp-vy-mosaic[data-count="4"] {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 150px 150px;
}

@media (max-width: 760px) {
	.gitp-vy-mosaic[data-count="1"] { grid-template-rows: 210px; }
	.gitp-vy-mosaic[data-count="2"] { grid-template-rows: 168px; }
	.gitp-vy-mosaic[data-count="3"],
	.gitp-vy-mosaic[data-count="4"] { grid-template-rows: 168px 104px; }
}

/* A single photo has nothing to page through, so the "view all" button would be a lie. */
.gitp-vy-mosaic[data-count="1"] .gitp-vy-mosaic-more { display: none; }

/* =============================================================================================
 * v3.6.0 — a form that fits a phone without scrolling.
 *
 * The fields were already marked half-width, but a rule from v3.0.0 collapsed the grid to a single
 * column below 640px — so "half" resolved to a full row and the seven fields pushed the submit
 * button off the screen. Two columns restored, spacing tightened.
 * ========================================================================================== */

@media (max-width: 640px) {
	.gitp-vy-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px 10px;
	}
	.gitp-vy-field-half { grid-column: span 1; }
	.gitp-vy-field { grid-column: 1 / -1; gap: 3px; }

	.gitp-vy-field-label { font-size: 11.5px; }
	.gitp-vy-field input,
	.gitp-vy-field select { min-height: 40px; padding: 8px 11px; font-size: 15px; }
	.gitp-vy-field textarea { min-height: 54px; padding: 8px 11px; }

	.gitp-vy-modal-title { font-size: 17px; margin-bottom: 2px; }
	.gitp-vy-form-intro { margin-bottom: 10px; font-size: 12.5px; line-height: 1.4; }
	.gitp-vy-form-foot { margin-top: 10px; gap: 6px; }
	.gitp-vy-form-foot .gitp-vy-btn { padding: 12px 22px; }
	.gitp-vy-modal-panel { padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); }
}

/* Shorter still where the screen is genuinely small, so the button stays in reach. */
@media (max-width: 640px) and (max-height: 700px) {
	.gitp-vy-form-intro { display: none; }
	.gitp-vy-field textarea { min-height: 44px; }
	.gitp-vy-form-grid { gap: 7px 10px; }
}