/**
 * WP Tour Manager - tour page.
 *
 * Everything is namespaced under .wptm-. No element selector is styled, no
 * font is declared and nothing is loaded from a remote host: typography comes
 * from the theme, and the palette is derived from the text colour the theme
 * already set, so the page belongs to the site it sits on.
 *
 * Logical properties throughout (inline-start / inline-end), so an RTL site
 * mirrors without a second stylesheet.
 */

.wptm-tour {
	/* The only opinionated values. A theme or a child stylesheet can redeclare
	   any of them on .wptm-tour and the whole page follows. */
	--wptm-accent: #b8853a;
	--wptm-accent-dark: #94682a;
	--wptm-on-accent: #fff;
	--wptm-success: #1a7f4b;
	--wptm-danger: #b23b3b;

	/* Derived from the page itself. */
	--wptm-text: currentColor;
	--wptm-muted: color-mix(in srgb, currentColor 68%, transparent);
	--wptm-faint: color-mix(in srgb, currentColor 48%, transparent);
	--wptm-border: color-mix(in srgb, currentColor 16%, transparent);
	--wptm-hairline: color-mix(in srgb, currentColor 9%, transparent);
	--wptm-surface: color-mix(in srgb, currentColor 3%, transparent);
	--wptm-tint: color-mix(in srgb, var(--wptm-accent) 10%, transparent);

	--wptm-radius: 10px;
	--wptm-radius-sm: 8px;
	--wptm-gap: clamp(28px, 3.6vw, 46px);
	--wptm-offset: 0px;
	--wptm-bar: 0px;

	color: inherit;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: var(--wptm-bar);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-tour {
		--wptm-muted: #5b6472;
		--wptm-faint: #8a929d;
		--wptm-border: rgba(20, 24, 31, .16);
		--wptm-hairline: rgba(20, 24, 31, .09);
		--wptm-surface: rgba(20, 24, 31, .03);
	}
}

.wptm-tour *,
.wptm-tour *::before,
.wptm-tour *::after {
	box-sizing: border-box;
}

.wptm-tour img {
	max-width: 100%;
	height: auto;
}

.wptm-tour :focus-visible {
	outline: 2px solid var(--wptm-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.wptm-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wptm-tour [id] {
	scroll-margin-top: calc(var(--wptm-offset) + 24px);
}

.wptm-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ============================================================== BUTTONS === */

.wptm-tour .wptm-btn,
.wptm-tour a.wptm-btn,
.wptm-tour button.wptm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--wptm-radius-sm);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* The label colour is a variable, and the script re-checks it against the
   background that is actually painted. White is never assumed. */
.wptm-tour a.wptm-btn--primary,
.wptm-tour a.wptm-btn--primary:visited,
.wptm-tour button.wptm-btn--primary {
	background-color: var(--wptm-accent) !important;
	border-color: var(--wptm-accent) !important;
	color: var(--wptm-on-accent) !important;
}

.wptm-tour a.wptm-btn--primary:hover,
.wptm-tour a.wptm-btn--primary:focus,
.wptm-tour a.wptm-btn--primary:active,
.wptm-tour button.wptm-btn--primary:hover,
.wptm-tour button.wptm-btn--primary:focus,
.wptm-tour button.wptm-btn--primary:active {
	background-color: var(--wptm-accent-dark) !important;
	border-color: var(--wptm-accent-dark) !important;
	color: var(--wptm-on-accent) !important;
}

.wptm-tour a.wptm-btn--secondary,
.wptm-tour a.wptm-btn--secondary:visited,
.wptm-tour button.wptm-btn--secondary {
	background-color: transparent !important;
	border-color: var(--wptm-border) !important;
	color: inherit !important;
}

.wptm-tour a.wptm-btn--secondary:hover,
.wptm-tour a.wptm-btn--secondary:focus,
.wptm-tour button.wptm-btn--secondary:hover,
.wptm-tour button.wptm-btn--secondary:focus {
	background-color: var(--wptm-surface) !important;
	border-color: var(--wptm-accent) !important;
	color: inherit !important;
}

.wptm-tour a.wptm-btn--quiet,
.wptm-tour a.wptm-btn--quiet:visited {
	min-height: 0;
	padding: 10px 12px;
	background: transparent !important;
	border-color: transparent !important;
	color: var(--wptm-muted) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wptm-tour a.wptm-btn--quiet:hover {
	color: var(--wptm-accent) !important;
}

.wptm-tour .wptm-btn--block {
	width: 100%;
}

.wptm-tour .wptm-btn--sm {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
}

.wptm-tour .wptm-btn--lg {
	min-height: 56px;
	padding: 15px 34px;
	font-size: 16px;
}

.wptm-tour .wptm-btn[disabled] {
	opacity: .65;
	cursor: progress;
}

.wptm-tour a.wptm-link,
.wptm-tour a.wptm-link:visited {
	color: var(--wptm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wptm-tour a.wptm-link:hover {
	color: var(--wptm-accent-dark);
}

/* =============================================================== HEADER === */

.wptm-head {
	padding-block: clamp(10px, 2vw, 18px) 0;
}

.wptm-crumbs {
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--wptm-faint);
}

.wptm-crumbs a {
	color: var(--wptm-muted);
	text-decoration: none;
}

.wptm-crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wptm-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-crumbs__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	list-style: none;
}

.wptm-crumbs__list li::marker {
	content: "";
}

.wptm-crumbs__list li + li::before {
	content: "\203A";
	color: var(--wptm-faint);
}

/*
 * The share control is anchored to the top corner rather than pushed there by
 * a flex row. A flex row with space-between opens a gap the width of whatever
 * is left over, which is what left a band of empty page beside the wording.
 */
.wptm-head__row {
	position: relative;
}

.wptm-head__text {
	min-width: 0;
}

.wptm-head__title {
	margin: 0;
	font-size: clamp(27px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 30ch;
}

.wptm-head__lead {
	max-width: 88ch;
	margin: 14px 0 0;
	font-size: clamp(15.5px, 1.7vw, 17.5px);
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-head__place {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--wptm-muted);
}

.wptm-head__pin {
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-tour button.wptm-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--wptm-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.wptm-tour button.wptm-share:hover {
	border-color: var(--wptm-accent);
	background: var(--wptm-surface);
}

@media (min-width: 783px) {

	/* Only the badge line can run into the button, so only that line keeps
	   clear of it. Padding the whole header reserved a strip of empty page
	   down the side of the summary. */
	.wptm-head__badgeline {
		padding-inline-end: 132px;
	}

	.wptm-tour button.wptm-share {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
	}
}

@media (max-width: 782px) {

	.wptm-head__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* =============================================================== LAYOUT === */

/*
 * Three regions: the gallery, the written content, the sidebar.
 *
 * Desktop places the gallery and the content in one column with the sidebar
 * beside them. Mobile drops to a single column and reorders so the price card
 * follows the photographs instead of sinking to the bottom of the page, which
 * is why the sidebar is split into a booking half and an information half.
 */
.wptm-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
}

.wptm-layout__head,
.wptm-layout__media,
.wptm-layout__main,
.wptm-layout__side {
	min-width: 0;
}

.wptm-side {
	display: grid;
	gap: 10px;
}

/* --- Mobile order: gallery, price, content, information cards ------------ */

@media (max-width: 999px) {

	.wptm-layout {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	/* The sidebar stops being a box so its two halves can be placed
	   independently in the flow. */
	.wptm-layout__side,
	.wptm-side {
		display: contents;
	}

	.wptm-layout__head {
		order: 0;
	}

	.wptm-layout__media {
		order: 1;
	}

	.wptm-side__book {
		order: 2;
	}

	.wptm-layout__main {
		order: 3;
	}

	.wptm-side__info {
		order: 4;
		display: grid;
		gap: 10px;
	}

	/* Nothing sticks in a single column. */
	.wptm-layout__side,
	.wptm-side__book,
	.wptm-card--book {
		position: static;
	}
}

/* --- Desktop with the sidebar -------------------------------------------- */

@media (min-width: 1000px) {

	/* The sidebar starts level with the title, not level with the gallery:
	   an empty rectangle beside the heading is wasted space. */
	.wptm-layout--side {
		/*
		 * Proportional, not fixed. The plugin does not know how wide the
		 * theme's content column is, so the sidebar takes a share of whatever
		 * it is given, within sensible limits, and the reading column keeps
		 * the rest.
		 */
		grid-template-columns: minmax(0, 1fr) clamp(270px, 30%, 360px);
		grid-template-areas:
			"head  side"
			"media side"
			"main  side";
		align-items: start;
		row-gap: 0;
	}

	.wptm-layout--side .wptm-layout__head {
		grid-area: head;
		margin-block-end: clamp(16px, 2vw, 24px);
	}

	.wptm-layout--side .wptm-layout__media {
		grid-area: media;
	}

	.wptm-layout--side .wptm-layout__main {
		grid-area: main;
		margin-block-start: clamp(20px, 2.4vw, 32px);
	}

	/*
	 * The whole column travels, as one piece. The offset is set by the script
	 * from the real height: pinned under the header when the column fits on
	 * screen, pinned by its bottom edge when it is longer, so every card is
	 * reachable without a scrollbar of its own.
	 */
	.wptm-layout--side .wptm-layout__side {
		grid-area: side;
		align-self: start;
		position: sticky;
		top: var(--wptm-side-top, calc(var(--wptm-offset) + 24px));
	}

	.wptm-layout--side .wptm-side {
		align-content: start;
	}
}

/* One exception: the immersive preset opens on a full width photograph, so
   its header spans the whole grid and the sidebar starts under it. */
@media (min-width: 1000px) {

	.wptm-tour--immersive .wptm-layout--side {
		grid-template-areas:
			"head  head"
			"media side"
			"main  side";
	}

	.wptm-tour--immersive .wptm-layout--side .wptm-layout__head {
		margin-block-end: clamp(20px, 2.6vw, 32px);
	}
}

/*
 * A media query knows how wide the window is, not how wide the theme's content
 * column is. A theme that gives the plugin 700 pixels inside a 1400 pixel
 * window would still get the two column layout, and the reading column would
 * be squeezed to nothing.
 *
 * Where container queries exist, the layout falls back to one column when the
 * space it was actually given is too small, whatever the window is doing.
 * Where they do not, nothing changes.
 *
 * The containment is declared inside the desktop media query on purpose: an
 * inline-size container becomes the containing block for fixed position
 * children, and the mobile booking bar is fixed. Below this width there is no
 * containment, so the bar still anchors to the window.
 */
@supports (container-type: inline-size) {

	@media (min-width: 1000px) {

		.wptm-tour {
			container-type: inline-size;
			container-name: wptm;
		}

		@container wptm (max-width: 820px) {

			.wptm-layout--side {
				grid-template-columns: minmax(0, 1fr);
				grid-template-areas:
					"head"
					"media"
					"main"
					"side";
				row-gap: clamp(24px, 3vw, 40px);
			}

			.wptm-layout--side .wptm-layout__main {
				margin-block-start: 0;
			}

			.wptm-layout--side .wptm-layout__side {
				position: static;
				max-width: 460px;
			}
		}
	}
}

@media (min-width: 1280px) {

	.wptm-layout--side {
		grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 380px);
		column-gap: 48px;
	}
}

/* --- Sidebar off: the same cards become a row under the content ---------- */

@media (min-width: 1000px) {

	.wptm-layout--full .wptm-layout__head {
		margin-block-end: clamp(16px, 2vw, 24px);
	}

	.wptm-layout--full .wptm-side {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 12px;
		align-items: start;
	}

	.wptm-layout--full .wptm-side__book {
		grid-column: 1 / -1;
		max-width: 420px;
	}

	.wptm-layout--full .wptm-side__info {
		display: contents;
	}
}

/* =============================================================== BLOCKS === */

.wptm-block {
	padding-block: var(--wptm-gap);
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-block:focus {
	outline: none;
}

.wptm-block--facts,
.wptm-block--summary,
.wptm-block--features {
	border-block-start: 0;
	padding-block: clamp(20px, 2.4vw, 28px);
}

.wptm-block--summary {
	padding-block-end: 6px;
}

.wptm-block--features {
	padding-block-start: 22px;
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-block__title {
	margin: 0 0 22px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.wptm-summary {
	max-width: 68ch;
	margin: 0;
	font-size: clamp(16px, 1.7vw, 17.5px);
	line-height: 1.75;
	color: var(--wptm-muted);
}

.wptm-note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wptm-faint);
}

.wptm-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

/* ============================================================== GALLERY === */

.wptm-gallery {
	margin: 0;
}

.wptm-gallery__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--wptm-radius);
	overflow: hidden;
	background: var(--wptm-surface);
}

@media (max-width: 700px) {
	.wptm-gallery__stage {
		aspect-ratio: 4 / 3;
	}
}

.wptm-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}

.wptm-tour button.wptm-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #14181f;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(15, 20, 28, .18);
}

.wptm-tour button.wptm-gallery__nav:hover {
	background: #fff;
}

.wptm-gallery__nav--prev {
	inset-inline-start: 14px;
}

.wptm-gallery__nav--next {
	inset-inline-end: 14px;
}

.wptm-gallery__count {
	position: absolute;
	inset-block-end: 14px;
	inset-inline-end: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(15, 20, 28, .62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wptm-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 10px;
	margin-block-start: 10px;
}

.wptm-gallery__thumb {
	display: block;
	border-radius: var(--wptm-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	opacity: .72;
	cursor: pointer;
	transition: opacity .16s ease, border-color .16s ease;
}

.wptm-gallery__thumb.is-active,
.wptm-gallery__thumb:hover {
	opacity: 1;
	border-color: var(--wptm-accent);
}

.wptm-gallery__thumb.is-hidden {
	display: none;
}

.wptm-gallery__thumbimg {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wptm-tour button.wptm-gallery__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 4 / 3;
	padding: 6px;
	border: 1px dashed var(--wptm-border);
	border-radius: var(--wptm-radius-sm);
	background: var(--wptm-surface);
	color: var(--wptm-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.wptm-tour button.wptm-gallery__more:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-gallery__moreicon {
	line-height: 0;
}

@media (max-width: 700px) {

	.wptm-gallery__thumbs {
		grid-auto-columns: 88px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.wptm-gallery__thumb {
		scroll-snap-align: start;
	}

	.wptm-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.wptm-gallery__thumb.is-hidden {
		display: block;
	}
}

/* ============================================================= FEATURES === */

.wptm-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-features__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	list-style: none;
}

.wptm-features__item::marker {
	content: "";
}

.wptm-features__icon {
	color: var(--wptm-accent);
	line-height: 0;
	margin-block-start: 1px;
}

.wptm-features__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wptm-features__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

.wptm-features__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wptm-muted);
}

/* ============================================================= TIMELINE === */

.wptm-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 18px;
	margin: 0;
	padding-block-end: clamp(26px, 3vw, 36px);
	list-style: none;
}

.wptm-timeline__step::marker {
	content: "";
}

/* The connector belongs to the step, which is why it stops cleanly at the
   last circle instead of running past it. */
.wptm-timeline__step::before {
	content: "";
	position: absolute;
	inset-block: 50px 4px;
	inset-inline-start: 21px;
	width: 1px;
	background: var(--wptm-border);
}

.wptm-timeline__step:last-child {
	padding-block-end: 0;
}

.wptm-timeline__step:last-child::before {
	display: none;
}

.wptm-timeline__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.wptm-timeline__content {
	padding-block-start: 7px;
	min-width: 0;
}

.wptm-timeline__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.wptm-timeline__title {
	margin: 0 0 8px;
	font-size: clamp(16px, 1.8vw, 18px);
	font-weight: 700;
	line-height: 1.4;
}

.wptm-timeline__time {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--wptm-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wptm-timeline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 12px 0 0;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--wptm-hairline);
	font-size: 13px;
}

.wptm-timeline__metaitem {
	display: flex;
	gap: 6px;
}

.wptm-timeline__metaitem dt {
	font-weight: 700;
}

.wptm-timeline__metaitem dd {
	margin: 0;
	color: var(--wptm-muted);
}

@media (max-width: 600px) {

	.wptm-timeline__step {
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 14px;
	}

	.wptm-timeline__step::before {
		inset-block-start: 42px;
		inset-inline-start: 17px;
	}

	.wptm-timeline__marker {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.wptm-timeline__head {
		flex-direction: column;
		gap: 2px;
	}

	.wptm-timeline__time {
		order: -1;
	}
}

/* =============================================== INCLUDED / NOT INCLUDED === */

.wptm-panel {
	padding: 22px 24px;
	border: 1px solid var(--wptm-hairline);
	border-radius: var(--wptm-radius);
	background: var(--wptm-surface);
}

.wptm-panel__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.wptm-panel__title--in {
	color: var(--wptm-success);
}

.wptm-panel__title--out {
	color: var(--wptm-muted);
}

.wptm-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	list-style: none;
}

.wptm-list li::marker {
	content: "";
}

.wptm-list__mark {
	flex: 0 0 auto;
	margin-block-start: 1px;
	line-height: 0;
}

.wptm-list--in .wptm-list__mark {
	color: var(--wptm-success);
}

.wptm-list--out .wptm-list__mark {
	color: var(--wptm-faint);
}

.wptm-list--out li {
	color: var(--wptm-muted);
}

.wptm-list__dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-block-start: 9px;
	border-radius: 50%;
	background: var(--wptm-accent);
}

/* ======================================================== WHAT TO BRING === */

.wptm-bring {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-bring__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	list-style: none;
}

.wptm-bring__item::marker {
	content: "";
}

.wptm-bring__icon {
	color: var(--wptm-accent);
	line-height: 0;
}

/* ================================================================ RATES === */

.wptm-tour {
	--wptm-table-head: #1f242b;
	--wptm-table-head-text: #fff;
	--wptm-table-zebra: color-mix(in srgb, currentColor 2.5%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-tour {
		--wptm-table-zebra: rgba(20, 24, 31, .025);
	}
}

.wptm-ratecard {
	border: 1px solid var(--wptm-hairline);
	border-radius: var(--wptm-radius);
	overflow: hidden;
}

.wptm-rates {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.wptm-rates thead th {
	padding: 12px 18px;
	background: var(--wptm-table-head);
	color: var(--wptm-table-head-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: start;
	border: 0;
}

.wptm-rates thead th:last-child {
	text-align: end;
}

.wptm-rates tbody th,
.wptm-rates tbody td {
	padding: 13px 18px;
	border-block-end: 1px solid var(--wptm-hairline);
	vertical-align: middle;
	background: transparent;
}

.wptm-rates tbody tr:nth-child(even) th,
.wptm-rates tbody tr:nth-child(even) td {
	background: var(--wptm-table-zebra);
}

.wptm-rates tbody tr:last-child th,
.wptm-rates tbody tr:last-child td {
	border-block-end: 0;
}

.wptm-rates tbody th {
	font-weight: 500;
	text-align: start;
}

.wptm-rates__mark {
	display: inline-flex;
	margin-inline-end: 11px;
	color: var(--wptm-accent);
	line-height: 0;
	vertical-align: middle;
}

.wptm-rates__label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	vertical-align: middle;
	font-size: 14.5px;
}

.wptm-rates__badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 5px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wptm-rates tbody td {
	text-align: end;
	white-space: nowrap;
}

.wptm-rates__amount {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.wptm-rates__price {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.wptm-rates__basis {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wptm-faint);
}

.wptm-rates .is-featured th,
.wptm-rates .is-featured td {
	background: var(--wptm-tint);
}

.wptm-rates .is-featured .wptm-rates__price {
	color: var(--wptm-accent);
}

.wptm-rates .is-featured th {
	font-weight: 600;
}

@media (max-width: 640px) {

	.wptm-ratecard {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.wptm-rates,
	.wptm-rates thead,
	.wptm-rates tbody,
	.wptm-rates tr,
	.wptm-rates th,
	.wptm-rates td {
		display: block;
	}

	.wptm-rates thead tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-radius: var(--wptm-radius-sm);
		background: var(--wptm-table-head);
		margin-block-end: 12px;
	}

	.wptm-rates thead th {
		padding: 12px 16px;
		font-size: 11px;
		letter-spacing: .14em;
	}

	.wptm-rates tbody tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin-block-end: 10px;
		padding: 14px 16px;
		border: 1px solid var(--wptm-hairline);
		border-radius: var(--wptm-radius-sm);
		background: var(--wptm-page, Canvas);
		box-shadow: 0 1px 2px rgba(15, 20, 28, .05);
	}

	.wptm-rates tbody tr:last-child {
		margin-block-end: 0;
	}

	.wptm-rates tbody th,
	.wptm-rates tbody td {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.wptm-rates tbody tr:nth-child(even) th,
	.wptm-rates tbody tr:nth-child(even) td {
		background: transparent;
	}

	.wptm-rates .is-featured {
		border-color: color-mix(in srgb, var(--wptm-accent) 45%, transparent);
		background: var(--wptm-tint);
	}

	.wptm-rates .is-featured th,
	.wptm-rates .is-featured td {
		background: transparent;
	}

	.wptm-rates__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		font-size: 15px;
	}

	.wptm-rates__mark {
		display: none;
	}

	.wptm-rates__amount {
		flex-direction: column;
		align-items: flex-end;
		gap: 1px;
	}

	.wptm-rates__price {
		font-size: 17px;
	}

	.wptm-rates__basis {
		font-size: 12px;
	}
}

@media (prefers-color-scheme: dark) {

	.wptm-tour {
		--wptm-table-head: color-mix(in srgb, currentColor 14%, transparent);
		--wptm-table-head-text: currentColor;
	}
}

/* ============================================================== SIDEBAR === */

.wptm-card {
	padding: 22px;
	border: 1px solid var(--wptm-hairline);
	border-radius: var(--wptm-radius);
	background: var(--wptm-page, Canvas);
	box-shadow: 0 1px 2px rgba(15, 20, 28, .04);
}

.wptm-card__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.wptm-card__icon {
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-card__line {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-card__line:last-child {
	margin-block-end: 0;
}

.wptm-card__line strong {
	color: inherit;
	font-weight: 700;
}

.wptm-contact {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

.wptm-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	list-style: none;
}

.wptm-contact li::marker {
	content: "";
}

.wptm-contact span {
	color: var(--wptm-accent);
	line-height: 0;
}

/* ========================================================= TICKET CARD === */

/*
 * The price panel is drawn as a ticket: a scalloped top, a tinted price stub,
 * a perforation, the details, the call to action, a second perforation and the
 * reassurance stub.
 *
 * The scallops and the notches are painted in the page colour on top of the
 * card, so they read as shapes cut out of the paper. No mask is used, which
 * keeps the effect identical in every browser that can draw a gradient.
 */
.wptm-card--book {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wptm-page, Canvas);
	overflow: visible;

	/*
	 * The teeth are cut out of the card, not painted on top of it.
	 *
	 * Painting half circles in the page colour only works while the card and
	 * the page are different tones; the moment they match, the teeth vanish
	 * and a plain rectangle is left. A mask removes the paper itself, so the
	 * shape is right whatever is behind it.
	 *
	 * Written as longhands, and tested for with longhands. The multi layer
	 * shorthand is where this broke on the phone: Safari implements the
	 * prefixed property only, so a support test naming the unprefixed
	 * shorthand answered no, the fallback branch ran, and the ticket lost its
	 * teeth on exactly the devices most people were holding.
	 */
	--tooth: 22px;
	--tooth-depth: 11px;
	--tooth-top: radial-gradient(circle 9px at 50% 0, transparent 9px, #000 9.5px);
	--tooth-foot: radial-gradient(circle 9px at 50% 100%, transparent 9px, #000 9.5px);
	--tooth-body: linear-gradient(#000 0 0);

	-webkit-mask-image: var(--tooth-top), var(--tooth-foot), var(--tooth-body);
	-webkit-mask-position: top center, bottom center, center;
	-webkit-mask-size:
		var(--tooth) var(--tooth-depth),
		var(--tooth) var(--tooth-depth),
		100% calc(100% - var(--tooth-depth) * 2);
	-webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
	mask-image: var(--tooth-top), var(--tooth-foot), var(--tooth-body);
	mask-position: top center, bottom center, center;
	mask-size:
		var(--tooth) var(--tooth-depth),
		var(--tooth) var(--tooth-depth),
		100% calc(100% - var(--tooth-depth) * 2);
	mask-repeat: repeat-x, repeat-x, no-repeat;

	filter:
		drop-shadow(0 1px 1px rgba(15, 20, 28, .06))
		drop-shadow(0 14px 22px rgba(15, 20, 28, .10));
}

/*
 * On a phone the ticket must still read as a ticket.
 *
 * The mask cuts the paper, which works on a wide screen where the card sits
 * on a tinted page with room around it. Filling the width of a phone, a cut
 * edge has nothing to sit against and the card loses its outline. So the
 * teeth stay, and the boundary comes back as an inset ring drawn inside the
 * masked shape, where nothing can clip it.
 *
 * The drop shadow goes: a phone repaints it on every scroll frame and at that
 * size it buys nothing the ring does not already say.
 */
@media (max-width: 782px) {

	.wptm-card--book {
		filter: none;
		/* Inside the shape, so the mask cannot trim it. */
		box-shadow: inset 0 0 0 1px var(--wptm-border);
	}

	/* The stubs keep their own separators so the three parts stay legible. */
	.wptm-tk__price {
		border-block-end: 1px solid color-mix(in srgb, var(--wptm-accent) 22%, transparent);
	}

	.wptm-tk__stub {
		border-block-start: 1px solid var(--wptm-hairline);
	}
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

	@media (max-width: 782px) {

		.wptm-tk__price {
			border-block-end: 1px solid rgba(20, 24, 31, .12);
		}
	}
}

/* Nothing to mask with: fall back to an ordinary rounded card rather than a
   shape with its edges half removed. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {

	.wptm-card--book {
		border-radius: 14px;
		filter: none;
		box-shadow: 0 2px 6px rgba(15, 20, 28, .05), 0 18px 40px -26px rgba(15, 20, 28, .5);
	}
}

/* --- Price stub ---------------------------------------------------------- */

.wptm-tk__price {
	padding: 34px 22px 26px;
	background: var(--wptm-tint);
	text-align: center;
}

.wptm-tk__from,
.wptm-tk__basis {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wptm-accent);
}

.wptm-tk__basis {
	margin-block-start: 4px;
	color: var(--wptm-muted);
	letter-spacing: .16em;
}

.wptm-tk__amount {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 6px 0 0;
}

.wptm-tk__value {
	font-size: clamp(38px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--wptm-accent);
	font-variant-numeric: tabular-nums;
}

/* Two hairlines with a small mark at the inner end, as printed on a stub. */
.wptm-tk__rule {
	position: relative;
	flex: 1 1 auto;
	max-width: 74px;
	height: 1px;
	border-block-start: 1px dotted color-mix(in srgb, var(--wptm-accent) 40%, transparent);
}

.wptm-tk__rule::after {
	content: "\2605";
	position: absolute;
	inset-block-start: 50%;
	font-size: 11px;
	line-height: 0;
	color: color-mix(in srgb, var(--wptm-accent) 45%, transparent);
}

.wptm-tk__amount .wptm-tk__rule:first-child::after {
	inset-inline-end: -2px;
}

.wptm-tk__amount .wptm-tk__rule:last-child::after {
	inset-inline-start: -2px;
}

/* --- Perforation --------------------------------------------------------- */

.wptm-tk__perf {
	position: relative;
	display: block;
	height: 1px;
	border-block-start: 2px dashed var(--wptm-border);
}

/*
 * The two holes at the ends of the perforation. They are painted in the page
 * colour rather than cut, because their position depends on the content
 * height and a mask cannot follow that. On the ticket they sit against the
 * tinted stubs, so they read correctly.
 */
.wptm-tk__perf::before,
.wptm-tk__perf::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wptm-page, Canvas);
	transform: translateY(-50%);
}

.wptm-tk__perf::before {
	inset-inline-start: -9px;
}

.wptm-tk__perf::after {
	inset-inline-end: -9px;
}

/* --- Details ------------------------------------------------------------- */

.wptm-tk__body {
	padding: 20px 22px 22px;
}

.wptm-tk__rows {
	display: grid;
	margin: 0 0 18px;
}

.wptm-tk__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-block-end: 1px dotted var(--wptm-hairline);
}

.wptm-tk__row:last-child {
	border-block-end: 0;
}

.wptm-tk__rows dt {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: var(--wptm-muted);
}

.wptm-tk__icon {
	flex: 0 0 auto;
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-tk__rows dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	text-align: end;
	overflow-wrap: anywhere;
}

.wptm-tk__actions {
	display: grid;
	gap: 8px;
	margin: 0;
}

.wptm-tk__btnicon {
	line-height: 0;
}

/* --- Reassurance stub ---------------------------------------------------- */

.wptm-tk__stub {
	display: grid;
	gap: 10px;
	padding: 20px 22px 32px;
	background: color-mix(in srgb, currentColor 3%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wptm-tk__stub {
		background: rgba(20, 24, 31, .03);
	}
}

.wptm-assure__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 13px 15px;
	border-radius: 10px;
	background: var(--wptm-tint);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wptm-muted);
}

.wptm-assure__item strong {
	display: block;
	margin-block-end: 2px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wptm-text);
}

.wptm-assure__icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-card__actions {
	display: grid;
	gap: 8px;
	margin: 0;
}

/* ========================================================== INFO CARDS === */

/*
 * A badge, a hairline, and the wording. The rule between the two columns is
 * what turns a plain box into something that looks composed; the badge gives
 * the card its subject at a glance without an illustration that would impose
 * a style on the host site.
 */
.wptm-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 18px;
	align-items: start;
	padding: 26px 26px 26px 22px;
	border: 0;
	border-radius: 16px;
	background: var(--wptm-page, Canvas);
	box-shadow: 0 1px 2px rgba(15, 20, 28, .04), 0 16px 34px -28px rgba(15, 20, 28, .55);
}

.wptm-info__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-info--calm .wptm-info__badge {
	background: color-mix(in srgb, var(--wptm-success) 12%, transparent);
	color: var(--wptm-success);
}

.wptm-info__body {
	grid-column: 2;
	min-width: 0;
}

.wptm-info__title {
	margin: 0 0 16px;
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.wptm-info__lead {
	margin: -6px 0 14px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wptm-muted);
}

.wptm-info__rows {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-info__rows li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-block-end: 1px dotted var(--wptm-border);
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wptm-muted);
}

.wptm-info__rows li:first-child {
	padding-block-start: 0;
}

.wptm-info__rows li:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.wptm-info__rows li::marker {
	content: "";
}

.wptm-info__rows strong {
	color: var(--wptm-text);
	font-weight: 700;
}

.wptm-info__icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-info--calm .wptm-info__icon {
	color: var(--wptm-success);
}

/* Free wording from the editor: a marker per line, drawn in CSS so it works
   whatever markup the editor produced. */
.wptm-info__prose {
	font-size: 15px;
	line-height: 1.6;
}

.wptm-info__prose ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-info__prose ul li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 26px;
	border-block-end: 1px dotted var(--wptm-border);
	list-style: none;
}

.wptm-info__prose ul li:first-child {
	padding-block-start: 0;
}

.wptm-info__prose ul li:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.wptm-info__prose ul li::marker {
	content: "";
}

.wptm-info__prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 18px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wptm-success);
}

.wptm-info__prose ul li:first-child::before {
	inset-block-start: 7px;
}

.wptm-info__prose > p:first-child {
	margin-block-start: 0;
}

@media (max-width: 520px) {

	.wptm-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 22px;
	}

	.wptm-info__body {
		grid-column: 1;
	}

	.wptm-info__badge {
		width: 46px;
		height: 46px;
	}
}

/* ============================================================ TERM INDEX === */

/*
 * The two directory layouts: rows for tour types, cards for destinations.
 *
 * A section heading that is only larger than the text around it does not read
 * as a heading on a travel page, it reads as a paragraph somebody bolded. The
 * eyebrow, the rule and the measured lead below are what tell a reader they
 * have arrived somewhere, and they cost three elements.
 */
.wptm-types,
.wptm-places {
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	margin-block: clamp(24px, 4vw, 48px);
}

/*
 * Themes style list items, and Jannah in particular gives them bullets and an
 * indent. Every list in these two layouts is a layout device rather than a
 * list of prose, so the marker and the indent are removed at the top rather
 * than fought item by item further down.
 */
.wptm-types ul,
.wptm-types ol,
.wptm-places ul,
.wptm-places ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-types li,
.wptm-places li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.wptm-types li::before,
.wptm-places li::before {
	content: none;
}

/* --- The section header --------------------------------------------------- */

.wptm-types__head {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-block-end: clamp(6px, 1.6vw, 16px);
	text-align: center;
}

.wptm-types__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-types__title {
	position: relative;
	margin: 0;
	padding-block-end: 16px;
	font-size: clamp(28px, 4.2vw, 46px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
}

/* A short rule with a diamond at its centre: a full width underline would cut
   the page in half, and nothing under the heading at all leaves it floating. */
.wptm-types__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--wptm-accent);
	opacity: .55;
}

.wptm-types__title::before {
	content: "";
	position: absolute;
	inset-block-end: 3px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: min(180px, 60%);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wptm-border) 22%, var(--wptm-border) 78%, transparent);
}

.wptm-types__lead {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(15px, 1.8vw, 17.5px);
	line-height: 1.6;
	color: var(--wptm-muted);
}

/* ------------------------------------------------------------------ ROWS -- */

.wptm-type {
	display: grid;
	gap: clamp(16px, 2vw, 22px);
	padding: clamp(16px, 2.2vw, 24px);
	border: 1px solid var(--wptm-hairline);
	border-radius: 16px;
	background: var(--wptm-page, Canvas);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wptm-type:hover {
	border-color: color-mix(in srgb, var(--wptm-accent) 40%, transparent);
	box-shadow: 0 10px 30px -22px rgba(15, 20, 28, .5);
}

/*
 * The header sits above the tours, not beside them.
 *
 * Three columns on one line meant the cards got whatever was left after a
 * heading and a button, which on a normal screen was about two hundred pixels
 * each: photographs too small to show a place and titles wrapping over them.
 * Stacked, the same row gives every card three times the width.
 */
.wptm-type__intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 16px;
}

.wptm-type__icon {
	grid-row: 1 / span 2;
	margin-block-end: 0;
}

.wptm-type__more {
	grid-column: 3;
	grid-row: 1 / span 2;
	margin: 0;
}

.wptm-type__lead {
	grid-column: 2;
	max-width: 62ch;
}

@media (min-width: 700px) {

	.wptm-type__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	/* Room for a fourth once there is room for a fourth. */
	.wptm-type__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wptm-type__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-block-end: 14px;
	border-radius: 16px;
	background: var(--wptm-tint);
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-type__name {
	margin: 0;
	font-size: clamp(20px, 2.3vw, 25px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.wptm-tour .wptm-type__name a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wptm-accent), var(--wptm-accent));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease, color .2s ease;
}

.wptm-tour .wptm-type__name a:hover,
.wptm-tour .wptm-type__name a:focus-visible {
	color: var(--wptm-accent);
	background-size: 100% 2px;
}

.wptm-type__lead {
	margin: 7px 0 0;
	max-width: 32ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

.wptm-type__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-type__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-type__item::marker,
.wptm-places__item::marker {
	content: "";
}

.wptm-tour .wptm-type__card {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--wptm-surface);
	aspect-ratio: 3 / 4;
	isolation: isolate;
}

@media (min-width: 700px) {

	.wptm-tour .wptm-type__card {
		aspect-ratio: 4 / 5;
	}
}

/* A tour with no photograph gets a tinted panel with its name on it, rather
   than an empty grey rectangle that reads as a broken image. */
.wptm-tour .wptm-type__card--plain {
	background:
		radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--wptm-accent) 82%, #fff) 0%, var(--wptm-accent) 65%);
	color: var(--wptm-on-accent);
}

.wptm-tour .wptm-type__card--plain::after {
	background: none;
}

.wptm-type__media,
.wptm-type__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wptm-type__img {
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.wptm-tour .wptm-type__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 38%, rgba(10, 14, 20, .82) 100%);
}

.wptm-tour .wptm-type__card:hover .wptm-type__img,
.wptm-tour .wptm-type__card:focus-visible .wptm-type__img {
	transform: scale(1.05);
}

.wptm-type__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: grid;
	gap: 7px;
	padding: 15px 16px;
}

.wptm-type__tour {
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 700;
	line-height: 1.32;
	color: inherit;
	overflow-wrap: anywhere;
	/* Three lines is a title; beyond that it is a paragraph on a photograph. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wptm-tour .wptm-type__card {
	color: #fff;
}

.wptm-type__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

.wptm-type__meta span {
	line-height: 0;
}

.wptm-type__more {
	margin: 0;
}

.wptm-tour .wptm-type__more .wptm-btn {
	width: 100%;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- CARDS -- */

.wptm-places__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-places__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-place {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	background: var(--wptm-surface);
	color: #fff;
	transition: box-shadow .25s ease;
}

.wptm-place:hover {
	box-shadow: 0 18px 40px -26px rgba(15, 20, 28, .75);
}

@media (min-width: 641px) {

	.wptm-place {
		aspect-ratio: 3 / 2;
	}
}

.wptm-place__media,
.wptm-place__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.wptm-place__img {
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

.wptm-place:hover .wptm-place__img {
	transform: scale(1.05);
}

.wptm-place::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 14, 20, 0) 32%, rgba(10, 14, 20, .55) 62%, rgba(10, 14, 20, .88) 100%);
}

.wptm-place--plain {
	background:
		radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--wptm-accent) 88%, #fff) 0%, var(--wptm-accent) 60%);
	color: var(--wptm-on-accent);
}

.wptm-place--plain::after {
	background: none;
}

.wptm-place--more {
	background: var(--wptm-tint);
	color: var(--wptm-text);
	box-shadow: inset 0 0 0 1px var(--wptm-border);
}

.wptm-place--more::after {
	background: none;
}

.wptm-place__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(18px, 2.4vw, 26px);
}

.wptm-place__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(21px, 2.7vw, 28px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.025em;
	color: inherit;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 12px rgba(8, 12, 18, .35);
}

.wptm-place--more .wptm-place__name,
.wptm-place--plain .wptm-place__name {
	text-shadow: none;
}

.wptm-place__pin {
	flex: 0 0 auto;
	line-height: 0;
	opacity: .92;
}

.wptm-place__lead {
	margin: 9px 0 0;
	max-width: 34ch;
	font-size: 14.5px;
	line-height: 1.55;
	color: inherit;
	opacity: .93;
}

.wptm-place__go {
	margin: 18px 0 0;
}

.wptm-tour a.wptm-btn--light {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #14181f;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(8, 12, 18, .18);
	transition: transform .18s ease, color .18s ease, gap .18s ease;
}

.wptm-tour a.wptm-btn--light:hover,
.wptm-tour a.wptm-btn--light:focus-visible {
	background: #fff;
	color: var(--wptm-accent);
	transform: translateY(-2px);
	gap: 14px;
}

.wptm-place--more .wptm-btn--light {
	box-shadow: inset 0 0 0 1px var(--wptm-border);
}

/* -------------------------------------------------------------- NARROWER -- */

@media (max-width: 999px) {

	/* The button drops under the heading rather than squeezing it. */
	.wptm-type__intro {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.wptm-type__more {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-block-start: 4px;
	}

	.wptm-tour .wptm-type__more .wptm-btn {
		width: auto;
	}

	.wptm-type__icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}

	.wptm-type__lead {
		max-width: none;
		margin: 0;
	}
}

/*
 * Below the three column breakpoint, not overlapping it: 700 to 720 used to
 * match both rules and the outcome depended on which came last in the file.
 */
@media (max-width: 699px) {

	/* The examples become a row the thumb pushes. The row scrolls; the page
	   never does. */
	.wptm-type__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(clamp(16px, 2.2vw, 24px) * -1);
		padding-inline: clamp(16px, 2.2vw, 24px);
	}

	.wptm-type__list::-webkit-scrollbar {
		display: none;
	}

	.wptm-type__item {
		scroll-snap-align: start;
	}
}

@media (max-width: 420px) {

	.wptm-type__list {
		grid-auto-columns: 80%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-type,
	.wptm-place,
	.wptm-type__img,
	.wptm-place__img,
	.wptm-tour a.wptm-btn--light,
	.wptm-tour .wptm-type__name a {
		transition: none;
	}

	.wptm-type:hover .wptm-type__img,
	.wptm-place:hover .wptm-place__img,
	.wptm-tour a.wptm-btn--light:hover {
		transform: none;
	}
}

/* ============================================================== ARCHIVE === */

/*
 * The section pages. Quiet on purpose: a listing is scanned, not read, and
 * anything decorative competes with the photographs it sits between.
 */
.wptm-archive {
	display: grid;
	gap: clamp(20px, 3vw, 34px);
}

/* --- Hero ----------------------------------------------------------------- */

.wptm-arc__hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(18px, 3vw, 34px);
}

.wptm-arc__hero--image {
	min-height: clamp(220px, 32vw, 340px);
	display: flex;
	align-items: flex-end;
	padding: clamp(24px, 4vw, 52px);
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
}

.wptm-arc__heroimg,
.wptm-arc__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.wptm-arc__hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 14, 20, .15) 20%, rgba(10, 14, 20, .78) 100%);
}

.wptm-arc__herotext {
	max-width: 62ch;
}

.wptm-arc__title {
	margin: 0;
	font-size: clamp(29px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: inherit;
}

.wptm-arc__hero--image .wptm-arc__title {
	text-shadow: 0 1px 14px rgba(8, 12, 18, .4);
}

.wptm-arc__lead {
	margin-block-start: 12px;
	font-size: clamp(15px, 1.8vw, 17.5px);
	line-height: 1.65;
	color: var(--wptm-muted);
}

.wptm-arc__hero--image .wptm-arc__lead {
	color: rgba(255, 255, 255, .92);
}

.wptm-arc__lead p:first-child {
	margin-block-start: 0;
}

.wptm-arc__lead p:last-child {
	margin-block-end: 0;
}

/* --- Filters -------------------------------------------------------------- */

.wptm-arc__filters {
	display: grid;
	gap: 12px;
}

.wptm-arc__filter {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.wptm-arc__filterlabel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wptm-faint);
	white-space: nowrap;
}

.wptm-arc__options {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-arc__options li {
	margin: 0;
	list-style: none;
}

.wptm-arc__options li::marker {
	content: "";
}

.wptm-tour .wptm-arc__option {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 7px 14px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wptm-muted);
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.wptm-tour .wptm-arc__option:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-tour .wptm-arc__option.is-on {
	background: var(--wptm-accent);
	border-color: var(--wptm-accent);
	color: var(--wptm-on-accent);
}

@media (max-width: 640px) {

	.wptm-arc__filter {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	/* The chips become a row the thumb pushes, so eight of them do not become
	   four lines of wrapping. */
	.wptm-arc__options {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		margin-inline: -4px;
		padding: 2px 4px;
	}

	.wptm-arc__options::-webkit-scrollbar {
		display: none;
	}

	.wptm-arc__options li {
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-arc__option {
		transition: none;
	}
}

/* --- The bar -------------------------------------------------------------- */

.wptm-arc__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-block-end: 4px;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-arc__count {
	margin: 0;
	font-size: 14px;
	color: var(--wptm-muted);
}

.wptm-arc__sort {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
}

.wptm-arc__sort label {
	color: var(--wptm-muted);
}

.wptm-tour .wptm-arc__sort select {
	padding: 8px 12px;
	border: 1px solid var(--wptm-border);
	border-radius: 8px;
	background: var(--wptm-page, Canvas);
	color: inherit;
	font: inherit;
	font-size: 14px;
	min-height: 40px;
}

/* The script hides the button; without a script it is how the form is sent. */
.wptm-arc__sort.is-live button {
	display: none;
}

/* --- The grid ------------------------------------------------------------- */

.wptm-arc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.wptm-arc__item::marker {
	content: "";
}

.wptm-card2 {
	height: 100%;
}

.wptm-tour .wptm-card2__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	border: 1px solid var(--wptm-hairline);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wptm-page, Canvas);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wptm-tour .wptm-card2__link:hover,
.wptm-tour .wptm-card2__link:focus-visible {
	border-color: color-mix(in srgb, var(--wptm-accent) 45%, transparent);
	box-shadow: 0 14px 34px -26px rgba(15, 20, 28, .6);
}

.wptm-card2__media {
	display: block;
	overflow: hidden;
	background: var(--wptm-surface);
	aspect-ratio: 3 / 2;
}

.wptm-card2__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.wptm-tour .wptm-card2__link:hover .wptm-card2__img {
	transform: scale(1.04);
}

.wptm-card2__body {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 8px;
	padding: 16px 17px 17px;
}

.wptm-card2__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wptm-card2__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.wptm-card2__days {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--wptm-surface);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wptm-muted);
	white-space: nowrap;
}

.wptm-card2__lead {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wptm-muted);
}

.wptm-card2__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	align-self: end;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-card2__price {
	display: grid;
	line-height: 1.15;
}

.wptm-card2__from {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-card2__price strong {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.wptm-card2__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wptm-accent);
	white-space: nowrap;
	transition: gap .18s ease;
}

.wptm-tour .wptm-card2__link:hover .wptm-card2__cta {
	gap: 11px;
}

/* --- Pagination ----------------------------------------------------------- */

.wptm-arc__pages ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__pages li {
	margin: 0;
	list-style: none;
}

.wptm-arc__pages li::marker {
	content: "";
}

.wptm-tour .wptm-arc__pages a,
.wptm-tour .wptm-arc__pages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.wptm-tour .wptm-arc__pages a:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-tour .wptm-arc__pages .current {
	background: var(--wptm-accent);
	border-color: var(--wptm-accent);
	color: var(--wptm-on-accent);
}

.wptm-tour .wptm-arc__pages .dots {
	border-color: transparent;
	min-width: 24px;
}

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

.wptm-arc__empty {
	padding: clamp(34px, 6vw, 64px) clamp(20px, 4vw, 40px);
	border: 1px dashed var(--wptm-border);
	border-radius: 16px;
	text-align: center;
}

.wptm-arc__emptytitle {
	margin: 0 0 8px;
	font-size: clamp(19px, 2.4vw, 23px);
	font-weight: 800;
	letter-spacing: -.015em;
}

.wptm-arc__emptylead {
	max-width: 46ch;
	margin: 0 auto 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wptm-muted);
}

/* --- Onward --------------------------------------------------------------- */

.wptm-arc__more {
	padding-block-start: clamp(18px, 2.6vw, 28px);
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-arc__moretitle {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-arc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-arc__chips li {
	margin: 0;
	list-style: none;
}

.wptm-arc__chips li::marker {
	content: "";
}

.wptm-tour .wptm-arc__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 15px;
	border: 1px solid var(--wptm-hairline);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, color .18s ease;
}

.wptm-tour .wptm-arc__chips a:hover {
	border-color: var(--wptm-accent);
	color: var(--wptm-accent);
}

.wptm-arc__chipcount {
	font-size: 12px;
	color: var(--wptm-faint);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {

	.wptm-arc__bar {
		align-items: stretch;
		flex-direction: column;
	}

	.wptm-arc__sort {
		justify-content: space-between;
	}

	.wptm-tour .wptm-arc__sort select {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wptm-tour .wptm-card2__link,
	.wptm-card2__img,
	.wptm-card2__cta,
	.wptm-tour .wptm-arc__chips a {
		transition: none;
	}

	.wptm-tour .wptm-card2__link:hover .wptm-card2__img {
		transform: none;
	}
}

/* ================================================================ PROSE === */

.wptm-prose {
	font-size: 16.5px;
	line-height: 1.8;
	max-width: 70ch;
}

.wptm-prose > * + * {
	margin-block-start: 1.1em;
}

.wptm-prose > :first-child {
	margin-block-start: 0;
}

.wptm-prose h2 {
	margin-block-start: 1.8em;
	font-size: clamp(19px, 2.1vw, 23px);
	font-weight: 800;
	line-height: 1.25;
}

.wptm-prose h3 {
	margin-block-start: 1.5em;
	font-size: clamp(17px, 1.9vw, 19px);
	font-weight: 700;
	line-height: 1.35;
}

.wptm-prose ul,
.wptm-prose ol {
	padding-inline-start: 1.3em;
}

.wptm-prose ul {
	list-style: disc;
}

.wptm-prose ol {
	list-style: decimal;
}

.wptm-prose li {
	list-style: inherit;
	margin-block-end: .45em;
}

.wptm-prose li::marker {
	color: var(--wptm-accent);
}

.wptm-prose blockquote {
	margin-inline-start: 0;
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--wptm-accent);
	color: var(--wptm-muted);
	font-style: normal;
}

.wptm-prose img {
	border-radius: var(--wptm-radius-sm);
}

.wptm-prose--tight {
	font-size: 14px;
	line-height: 1.65;
	max-width: none;
	color: var(--wptm-muted);
}

.wptm-prose--tight ul {
	padding-inline-start: 1.1em;
}

.wptm-caption {
	margin-block-start: 8px;
	font-size: 13px;
	color: var(--wptm-faint);
}

/* ================================================================== FAQ === */

.wptm-faq__item {
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-faq__item:first-child {
	border-block-start: 1px solid var(--wptm-hairline);
}

.wptm-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
}

.wptm-faq__summary::-webkit-details-marker {
	display: none;
}

.wptm-faq__question {
	display: inline;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.wptm-faq__sign {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.wptm-faq__sign::before,
.wptm-faq__sign::after {
	content: "";
	position: absolute;
	background: var(--wptm-accent);
	transition: opacity .2s ease;
}

.wptm-faq__sign::before {
	inset-inline-start: 0;
	inset-block-start: 6px;
	width: 14px;
	height: 2px;
}

.wptm-faq__sign::after {
	inset-inline-start: 6px;
	inset-block-start: 0;
	width: 2px;
	height: 14px;
}

.wptm-faq__item[open] .wptm-faq__sign::after {
	opacity: 0;
}

.wptm-faq__answer {
	padding-block-end: 20px;
}

/* ============================================================== RELATED === */

.wptm-related {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-related__item {
	margin: 0;
	list-style: none;
}

.wptm-related__item::marker {
	content: "";
}

.wptm-tour a.wptm-related__link,
.wptm-tour a.wptm-related__link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wptm-related__media {
	display: block;
	border-radius: var(--wptm-radius);
	overflow: hidden;
}

.wptm-related__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wptm-tour a.wptm-related__link:hover .wptm-related__img {
		transform: scale(1.04);
	}
}

.wptm-related__place {
	display: block;
	padding-block-start: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-accent);
}

.wptm-related__title {
	display: block;
	padding-block-start: 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.wptm-related__meta {
	color: var(--wptm-muted);
}

.wptm-related__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-block-start: auto;
	padding-block-start: 10px;
	font-size: 13px;
	color: var(--wptm-muted);
}

.wptm-related__price strong {
	font-size: 15px;
	font-weight: 800;
	color: inherit;
}

.wptm-related__cta {
	display: block;
	padding-block-start: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wptm-accent);
}

.wptm-guides {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.wptm-guides li {
	margin: 0;
	list-style: none;
}

.wptm-guides li::marker {
	content: "";
}

.wptm-subhead {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wptm-muted);
}

.wptm-subhead--spaced {
	margin-block-start: 36px;
}

/* ================================================================== CTA === */

.wptm-cta {
	margin-block-start: var(--wptm-gap);
	padding: clamp(40px, 5vw, 68px) clamp(20px, 5vw, 60px);
	border-radius: var(--wptm-radius);
	background: var(--wptm-tint);
	text-align: center;
}

.wptm-cta__title {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.2;
}

.wptm-cta__lead {
	max-width: 50ch;
	margin: 0 auto 28px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wptm-muted);
}

.wptm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	margin: 0;
}

.wptm-cta__form {
	max-width: 620px;
	margin-inline: auto;
	text-align: start;
}

.wptm-cta__note {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--wptm-faint);
}

/* =========================================================== MOBILE BAR === */

/*
 * Most travel sites carry a floating chat button in one bottom corner. It is
 * not ours to move, so the bar keeps clear of it: the reserved corner is a
 * variable, set to nothing by default and to the width of a chat bubble the
 * moment one is likely to be there.
 *
 *   .wptm-tour { --wptm-bar-clear: 76px; }
 *
 * is all a site with a chat widget on the other side needs.
 */
.wptm-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
	padding-inline-start: calc(max(14px, env(safe-area-inset-left)) + var(--wptm-bar-clear, 0px));
	padding-inline-end: max(14px, env(safe-area-inset-right));
	background: var(--wptm-page, Canvas);
	border-block-start: 1px solid var(--wptm-border);
	box-shadow: 0 -4px 18px rgba(15, 20, 28, .1);
}

.wptm-bar[hidden] {
	display: none;
}

.wptm-bar__prefix {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-bar__price strong {
	font-size: 19px;
	font-weight: 800;
}

.wptm-bar__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wptm-bar .wptm-btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding-inline: 20px;
	white-space: nowrap;
}

.wptm-bar__meta {
	display: block;
	font-size: 12px;
	color: var(--wptm-faint);
}

@media (min-width: 1000px) {
	.wptm-bar {
		display: none;
	}
}

/* ============================================================= LIGHTBOX === */

.wptm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 15, 20, .95);
}

.wptm-lightbox[hidden] {
	display: none;
}

.wptm-lightbox__img {
	max-width: 100%;
	max-height: 84vh;
	object-fit: contain;
	border-radius: var(--wptm-radius-sm);
}

.wptm-lightbox__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 20px;
	padding-inline: 70px;
	text-align: center;
	font-size: 14px;
	color: #eef1f4;
}

.wptm-lightbox__btn {
	position: absolute;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.wptm-lightbox__btn:hover {
	background: rgba(255, 255, 255, .26);
}

.wptm-lightbox__btn--close {
	inset-block-start: 20px;
	inset-inline-end: 20px;
}

.wptm-lightbox__btn--prev {
	inset-inline-start: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.wptm-lightbox__btn--next {
	inset-inline-end: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.wptm-lock {
	overflow: hidden;
}

/* ================================================================ PRINT === */

@media print {

	.wptm-bar,
	.wptm-share,
	.wptm-layout__side,
	.wptm-cta__actions,
	.wptm-gallery__nav,
	.wptm-gallery__thumbs {
		display: none !important;
	}

	.wptm-tour {
		padding-block-end: 0;
	}

	.wptm-block {
		break-inside: avoid;
	}
}

/* ========================================================== BADGE / HERO === */

.wptm-head__badgeline:empty {
	display: none;
}

.wptm-badge-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--wptm-accent);
	color: var(--wptm-on-accent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wptm-badge-tag span {
	line-height: 0;
}

/* ============================================================== PRESETS === */

/* Each preset carries the colour it was designed with. The site setting, when
   filled, is printed after this and wins. */

/* --- Classic: gallery first, quiet neutral accent ------------------------- */
.wptm-tour--classic {
	--wptm-accent: #14532d;
	--wptm-accent-dark: #0f3d21;
}

/* --- Immersive: photograph first, confident green ------------------------- */
.wptm-tour--immersive {
	--wptm-accent: #1f7a4d;
	--wptm-accent-dark: #17603c;
}

/* --- Editorial: magazine cover, terracotta on warm paper ------------------ */
.wptm-tour--editorial {
	--wptm-accent: #a8481f;
	--wptm-accent-dark: #8a3a17;
	--wptm-tint: color-mix(in srgb, var(--wptm-accent) 8%, transparent);
}

.wptm-tour--stacked {
	--wptm-accent: #b8853a;
	--wptm-accent-dark: #94682a;
}

/* --- Immersive hero ------------------------------------------------------- */

.wptm-head--immersive {
	position: relative;
	margin-inline: calc(var(--wptm-bleed, 0px) * -1);
	padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px) clamp(26px, 4vw, 48px);
	border-radius: var(--wptm-radius);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

.wptm-hero {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.wptm-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wptm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 16, 22, .58) 0%, rgba(12, 16, 22, .34) 42%, rgba(12, 16, 22, .78) 100%);
}

.wptm-head--immersive .wptm-head__title,
.wptm-head--immersive .wptm-head__lead,
.wptm-head--immersive .wptm-head__place,
.wptm-head--immersive .wptm-crumbs,
.wptm-head--immersive .wptm-crumbs a {
	color: #fff;
}

.wptm-head--immersive .wptm-crumbs a,
.wptm-head--immersive .wptm-head__lead,
.wptm-head--immersive .wptm-head__place {
	color: rgba(255, 255, 255, .86);
}

.wptm-head--immersive .wptm-head__pin {
	color: #fff;
}

.wptm-tour--immersive button.wptm-share {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.wptm-tour--immersive button.wptm-share:hover {
	background: rgba(255, 255, 255, .14);
}

/* The immersive preset already showed the lead photograph in the hero. */
.wptm-tour--immersive .wptm-gallery__stage {
	display: none;
}

.wptm-tour--immersive .wptm-gallery__thumbs {
	grid-auto-columns: minmax(0, 1fr);
	margin-block-start: 0;
}

/* --- Editorial: the title sits beside the photograph ---------------------- */

@media (min-width: 1000px) {
	.wptm-tour--editorial .wptm-head__title {
		font-size: clamp(32px, 3.6vw, 46px);
		max-width: 22ch;
	}

	.wptm-tour--editorial .wptm-gallery__stage {
		aspect-ratio: 21 / 9;
	}

	/* Facts read as a warm band rather than a plain row. */
	.wptm-tour--editorial .wptm-strip {
		padding: 18px 22px;
		border-radius: var(--wptm-radius);
		background: var(--wptm-tint);
		border: 0;
	}
}

/* ================================================================ STRIP === */

.wptm-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 26px;
	margin: 0;
	padding: 18px 0;
	border-block: 1px solid var(--wptm-hairline);
}

.wptm-strip__item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.wptm-strip__icon {
	color: var(--wptm-accent);
	line-height: 0;
}

.wptm-strip__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wptm-strip__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

.wptm-strip__value {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

/* ============================================================ GALLERY + === */

.wptm-gallery__label {
	margin-block-end: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wptm-faint);
}

/* ====================================================== ITINERARY PHOTOS === */

/* The photograph is a column of the step, not a block inside the paragraph:
   that is what keeps the text from stopping short of an empty gap. */
.wptm-timeline__step--photo {
	grid-template-columns: 44px minmax(0, 1fr) minmax(200px, 260px);
	column-gap: 18px;
	align-items: start;
}

.wptm-timeline__photo {
	display: block;
	margin: 0;
	border-radius: var(--wptm-radius-sm);
	overflow: hidden;
}

.wptm-timeline__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Narrow enough that a 200px column would squeeze the text: the photograph
   moves under the paragraph instead, still inside the text column. */
@media (max-width: 900px) {

	.wptm-timeline__step--photo {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.wptm-timeline__photo {
		grid-column: 2;
		margin-block-start: 14px;
	}

	.wptm-timeline__img {
		aspect-ratio: 16 / 9;
	}
}

/* ================================================================ VIDEO === */

.wptm-video {
	padding: 0;
	overflow: hidden;
}

.wptm-tour button.wptm-video__poster {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.wptm-video__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wptm-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--wptm-accent);
	font-size: 18px;
	padding-inline-start: 4px;
}

.wptm-video__label {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(12, 16, 22, .66);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
}

.wptm-video__frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ================================================================ TRUST === */

.wptm-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px 30px;
	margin-block-start: var(--wptm-gap);
	padding: clamp(22px, 3vw, 30px);
	border-radius: var(--wptm-radius);
	background: var(--wptm-surface);
}

.wptm-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.wptm-trust__icon {
	color: var(--wptm-accent);
	line-height: 0;
	margin-block-start: 1px;
}

.wptm-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wptm-trust__text strong {
	font-size: 14.5px;
	font-weight: 700;
}

.wptm-trust__text span {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wptm-muted);
}

/* ============================================================== REVIEWS === */

.wptm-score {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--wptm-hairline);
}

.wptm-score__value {
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wptm-accent);
}

.wptm-score__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wptm-score__out {
	font-size: 14.5px;
	font-weight: 700;
}

.wptm-score__count {
	font-size: 13px;
	color: var(--wptm-muted);
}

.wptm-reviews {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wptm-reviews__item {
	margin: 0;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--wptm-hairline);
	list-style: none;
}

.wptm-reviews__item::marker {
	content: "";
}

.wptm-reviews__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.wptm-reviews__rating {
	margin: 0 0 8px;
	color: var(--wptm-accent);
	letter-spacing: .12em;
	font-size: 15px;
}

.wptm-reviews__text {
	font-size: 15px;
	line-height: 1.7;
}

.wptm-reviews__text p {
	margin: 0 0 .7em;
}

.wptm-reviews__by {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--wptm-faint);
}

.wptm-reviews__by time::before {
	content: " \00b7 ";
}

.wptm-reviews__form {
	margin-block-start: 28px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--wptm-hairline);
}

/* ======================================================== MOBILE REVIEW === */

/* Everything below is a pass over the small screen: no element may overlap
   another, nothing may push the page sideways, and every tap target stays
   large enough to hit. */

.wptm-tour {
	overflow-wrap: break-word;
}

.wptm-tour a,
.wptm-tour p,
.wptm-tour dd,
.wptm-tour dt,
.wptm-tour li,
.wptm-tour h1,
.wptm-tour h2,
.wptm-tour h3 {
	overflow-wrap: anywhere;
}

@media (max-width: 782px) {

	.wptm-tour button.wptm-share {
		min-height: 44px;
	}

	.wptm-head__title {
		font-size: clamp(24px, 7vw, 32px);
	}

	/* The immersive hero needs its own padding on a phone, and a stronger
	   scrim, otherwise white text lands on a bright sky. */
	.wptm-head--immersive {
		padding: 22px 18px 26px;
		border-radius: var(--wptm-radius);
	}

	.wptm-hero__scrim {
		background: linear-gradient(180deg, rgba(12, 16, 22, .62) 0%, rgba(12, 16, 22, .5) 45%, rgba(12, 16, 22, .86) 100%);
	}

	.wptm-head--immersive .wptm-head__lead {
		font-size: 15px;
	}

	/* Facts: two per row instead of five squeezed into one. */
	.wptm-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px;
		padding: 16px 0;
	}

	.wptm-strip__value {
		font-size: 14px;
	}

	/* Gallery arrows shrink and move in so they never cover the counter. */
	.wptm-tour button.wptm-gallery__nav {
		width: 38px;
		height: 38px;
		font-size: 19px;
	}

	.wptm-gallery__nav--prev {
		inset-inline-start: 10px;
	}

	.wptm-gallery__nav--next {
		inset-inline-end: 10px;
	}

	.wptm-gallery__count {
		inset-block-end: 10px;
		inset-inline-end: 10px;
		font-size: 11.5px;
	}

	/* Features and what-to-bring read better as one column than as two
	   half-width columns with broken words. */
	.wptm-features,
	.wptm-bring {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.wptm-two {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Rates: the price stays on the same line as its label. */
	.wptm-rates {
		font-size: 14px;
	}

	.wptm-rates th,
	.wptm-rates td {
		padding: 11px 0;
	}

	.wptm-badge {
		display: block;
		margin-inline-start: 0;
		margin-block-start: 2px;
	}

	/* Trust strip: one promise per row. */
	.wptm-trust {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px 18px;
	}

	/* The closing call to action does not need desktop padding. */
	.wptm-cta {
		padding: 34px 20px;
	}

	.wptm-cta__actions .wptm-btn {
		width: 100%;
	}

	/* Reviews. */
	.wptm-score {
		gap: 12px;
	}

	/* The fixed bar covers the end of the page: give it room. */
	.wptm-tour {
		padding-block-end: calc(var(--wptm-bar) + 12px);
	}
}

@media (max-width: 600px) {

	/* Timeline: the photograph moves under the text rather than beside it. */
	.wptm-timeline__step--photo {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.wptm-timeline__photo {
		grid-column: 2;
		margin-block-start: 12px;
	}

	/* Sidebar cards: comfortable padding, no cramped edges. */
	.wptm-card {
		padding: 18px;
	}	/* Related tours become a single readable column. */
	.wptm-related {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.wptm-block {
		padding-block: 28px;
	}

	.wptm-block__title {
		margin-block-end: 18px;
	}
}

@media (max-width: 380px) {

	/* The narrowest phones: facts go to one column so nothing is truncated. */
	.wptm-strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.wptm-gallery__thumbs {
		grid-auto-columns: 74px;
	}

	.wptm-bar {
		gap: 10px;
	}

	.wptm-bar__price strong {
		font-size: 17px;
	}

	/* On the narrowest phones the trip length is the first thing to go: the
	   price and the button are what the bar is for. */
	.wptm-bar__meta {
		display: none;
	}

	.wptm-bar .wptm-btn {
		padding-inline: 16px;
		font-size: 14px;
	}
}

/*
 * Values that arrive from a customer or from a currency: a reference with no
 * spaces, an address, a price in a long currency. They wrap rather than push
 * the card wider than the screen.
 */
.wptm-tk__rows dd,
.wptm-specs__row dd,
.wptm-strip__value,
.wptm-info__rows li,
.wptm-rates tbody th,
.wptm-bar__price {
	overflow-wrap: anywhere;
	word-break: normal;
}

.wptm-rates tbody td,
.wptm-tk__price .wptm-tk__value {
	/* Numbers should not be split mid-figure; the cell may wrap, the amount
	   may not. */
	overflow-wrap: normal;
	white-space: nowrap;
}

/* Nothing inside the plugin may make the page itself scroll sideways. */
.wptm-tour img,
.wptm-tour table,
.wptm-tour iframe {
	max-width: 100%;
}

/* Every control keeps a finger sized target, whatever the screen. */
.wptm-tour button,
.wptm-tour .wptm-btn,
.wptm-tour .wptm-gallery__thumb,
.wptm-tour .wptm-faq__summary {
	min-height: 44px;
}

.wptm-tour .wptm-gallery__thumb {
	min-height: 0;
}