/*
 * Manasik front end.
 *
 * Every colour, radius and step of the type scale is a token, declared once
 * below and used everywhere after. Nothing in this file hard-codes a colour
 * outside that block — the same discipline the plugin's admin CSS follows, so
 * a rebrand is one edit rather than a search.
 */

:root {
	/* Brand */
	--mn-gold: #c48b3a;
	--mn-gold-hover: #ac7930;
	--mn-gold-soft: rgba(196, 139, 58, 0.1);
	/* Fainter still, for a selected state that must not outrank the one above it. */
	--mn-gold-tint: rgba(196, 139, 58, 0.05);
	--mn-sand: #e4d9d2;
	--mn-sand-ink: #938071;

	/*
	 * A second accent, for what the page recommends rather than what it merely
	 * states. Gold is the brand's own voice; this is the one it points with.
	 */
	--mn-accent: #159178;
	/* A tint of it, for the one badge that marks a saving. */
	--mn-accent-soft: rgba(21, 145, 120, 0.12);

	/*
	 * Money coming off a price. Not the danger red — nothing has gone wrong —
	 * but the colour a shop uses when a number is being reduced, which is the
	 * one thing on a receipt worth spotting without reading.
	 */
	--mn-sale: #d50030;
	/* Darker, for text that has to hold its own against a tinted ground. */
	--mn-sale-ink: #ab0026;
	--mn-sale-soft: rgba(213, 0, 48, 0.08);
	--mn-sale-line: rgba(213, 0, 48, 0.28);

	/* Surfaces */
	--mn-canvas: #f5f1ee;
	--mn-surface: #fff;

	/*
	 * A grey ramp, warmed very slightly so it sits with the beige canvas rather
	 * than against it. 50 is barely off white — enough to separate a field from
	 * the panel behind it without drawing a second border to do the same job.
	 */
	--mn-gray-50: #fbfaf9;
	--mn-gray-100: #f6f4f3;
	--mn-gray-200: #edebe9;
	--mn-gray-300: #dedbd8;
	--mn-gray-400: #bdb9b5;
	--mn-gray-500: #96918d;
	--mn-gray-600: #726d69;
	--mn-gray-700: #514d4a;
	--mn-gray-800: #34312e;
	--mn-gray-900: #1c1a18;

	/* Ink */
	--mn-ink: #000;
	/* The footer's ground: black with the page's warmth kept in it. */
	--mn-ink-deep: #17120e;
	--mn-ink-60: rgba(0, 0, 0, 0.6);
	--mn-ink-50: rgba(0, 0, 0, 0.5);

	/* When a field is genuinely wrong, after someone has tried. */
	--mn-danger: #b3261e;

	/* Lines */
	--mn-line: #e4e4e4;
	--mn-line-strong: rgba(141, 141, 141, 0.35);

	/*
	 * Shadows, not outlines, are what lift a card off this canvas. Two layers
	 * each: a tight one for the edge and a wide, fainter one for the lift —
	 * a single blurred shadow reads as grey haze rather than depth.
	 */
	--mn-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 10px rgba(0, 0, 0, 0.05);
	--mn-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.04), 0 2px 5px rgba(0, 0, 0, 0.05);
	--mn-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.07);

	/* Shape */
	--mn-radius: 10px;
	--mn-radius-sm: 4px;
	--mn-radius-pill: 100px;
	--mn-radius-lg: 14px;

	/* Type */
	--mn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* For codes and figures that are read as codes rather than as words. */
	--mn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--mn-size-xs: 12px;
	--mn-size-small: 13px;
	--mn-size-base: 16px;
	--mn-size-lg: 18px;
	--mn-size-cta: 16px;
	--mn-size-heading: 22px;
	--mn-size-price: 35px;
	--mn-size-display: 40px;
	--mn-tracking-tight: -0.03em;
	--mn-tracking-display: -0.05em;
	--mn-tracking-wide: 0.08em;

	/* Rhythm */
	--mn-gap: 10px;
	--mn-gap-lg: 20px;
	--mn-gap-xl: 30px;
	--mn-pad: 20px;
	--mn-container: 1300px;
	--mn-gutter: 20px;
	--mn-column-gap: 100px;
}

/* ------------------------------------------------------------------ Reset */

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

/*
 * The hidden attribute has to win. An author rule that sets `display` outranks
 * the browser's own `[hidden] { display: none }` whatever its specificity, so
 * any component styled with display — and most here are — goes on showing
 * after the server marks it hidden. Stated once, rather than patched per
 * selector each time it bites.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--mn-canvas);
	color: var(--mn-ink);
	font-family: var(--mn-font);
	font-size: var(--mn-size-base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
}

:where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: 0;
}

:where(ul, ol) {
	padding: 0;
	list-style: none;
}

.mn-icon {
	display: block;
	flex: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mn-skip {
	position: absolute;
	left: -9999px;
}

.mn-skip:focus {
	left: var(--mn-gutter);
	top: var(--mn-gutter);
	z-index: 10;
	padding: var(--mn-gap) var(--mn-gap-lg);
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
}

:where(button, a, input):focus-visible {
	outline: 2px solid var(--mn-gold);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Container */

.mn-container {
	max-width: calc(var(--mn-container) + var(--mn-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}

/* ----------------------------------------------------------------- Header */

/*
 * Two variants of one header. Solid is the default — a light bar with a
 * hairline beneath it. Over lies on top of a full-bleed hero in white, and is
 * the only place the site chrome inverts.
 */
.mn-header--solid {
	background: var(--mn-surface);
	/* The same hairline the footer closes with, so the page is bracketed by one line. */
	border-bottom: 1px solid var(--mn-gray-200);
}

.mn-header--over {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	background: transparent;
	border-bottom: 0;
	color: var(--mn-surface);
}

/*
 * The wordmark is drawn dark. Rather than ship a second file that can fall out
 * of step with the first, it is knocked out to white.
 */
.mn-header--over img {
	filter: brightness(0) invert(1);
}

/*
 * Wordmark left, everything else right. Centred, the menu was pinned to the
 * middle of the page while the actions floated off on their own; gathered to
 * one edge they read as one set of controls.
 */
.mn-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mn-gap-lg);
	padding-block: 14px;
}

.mn-header__logo {
	margin-right: auto;
}

.mn-logo,
.custom-logo-link {
	display: block;
	line-height: 0;
}

.mn-logo img,
.custom-logo-link img {
	width: 152px;
	height: auto;
}

.mn-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--mn-gap-xl);
	margin: 0;
}

/*
 * One rule for both grounds. The transparent variant used to underline on hover
 * and inherit its colour from the header, so the two headers differed in more
 * than their background — which is what made them read as two components.
 */
.mn-nav__list a {
	display: inline-block;
	font-weight: 400;
	letter-spacing: var(--mn-tracking-wide);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
}

/*
 * The label rolls: one copy leaves upward as its twin arrives from below,
 * both clipped by this box. Colour is left alone — the movement is the whole
 * signal, and a colour change on top of it says the same thing twice.
 */
.mn-roll {
	position: relative;
	display: inline-block;
	vertical-align: top;
	/*
	 * Clipped top and bottom only. `overflow: hidden` clips both axes, and the
	 * second copy rounds a fraction wider than the box its twin measured — so
	 * every label lost the right edge of its last letter. The negative side
	 * insets give that fraction back without letting the roll show above or
	 * below the line.
	 */
	clip-path: inset(0 -0.15em);
}

.mn-roll__face {
	display: block;
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.mn-roll__face--next {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(100%);
}

.mn-nav__list a:hover .mn-roll__face,
.mn-nav__list a:focus-visible .mn-roll__face {
	transform: translateY(-100%);
}

.mn-nav__list a:hover .mn-roll__face--next,
.mn-nav__list a:focus-visible .mn-roll__face--next {
	transform: translateY(0);
}

/* Without motion there is nothing to clip, so the label just warms. */
@media (prefers-reduced-motion: reduce) {
	.mn-roll {
		clip-path: none;
	}

	.mn-roll__face {
		transition: none;
	}

	.mn-roll__face--next {
		display: none;
	}

	.mn-nav__list a:hover .mn-roll__face {
		transform: none;
		color: var(--mn-gold);
	}
}

/* ----------------------------------------------------------------- Footer */

/* ------------------------------------------------------------------ Footer */

/*
 * Light, like the rest of the site. A block of ink at the foot of a sand-
 * coloured page reads as a different website bolted on; the same canvas with a
 * rule above it ends the page without changing the subject.
 */
.mn-footer {
	/*
	 * White at the top, settling into the page's own canvas by the bottom. The
	 * page above ends on canvas, so the light edge reads as a lift rather than
	 * a seam — which is the job the hard rule was doing badly.
	 */
	background: linear-gradient(to bottom, var(--mn-surface) 0%, var(--mn-canvas) 55%);
	border-top: 1px solid var(--mn-gray-200);
	color: var(--mn-gray-700);
	font-size: var(--mn-size-small);
}

/*
 * Four areas of unequal weight. Equal columns are what makes a footer look like
 * a template — nothing in them claims to matter more than anything else, so the
 * eye has nowhere to land. The mark anchors one end, the way to reach a person
 * anchors the other, and the two menus sit between them.
 */
/* The mark and what stands with it: the wordmark, the social links, the marks. */
.mn-footer__brand {
	max-width: 300px;
}

.mn-footer__blurb {
	margin-top: 16px;
	color: var(--mn-gray-600);
	line-height: 1.7;
}

.mn-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--mn-gap-xl) var(--mn-gap-lg);
}

.mn-footer__col {
	min-width: 0;
}

.mn-footer__copy {
	margin: 0;
}

.mn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mn-gap-lg);
}

.mn-footer__mark {
	display: block;
	height: 22px;
	width: auto;
}

.mn-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 17fr) minmax(0, 15fr) minmax(0, 32fr);
	gap: var(--mn-gap-xl);
	padding-block: 72px 56px;
}

.mn-footer__heading {
	margin-bottom: 20px;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- Brand and social */

.mn-footer__logo img {
	width: 168px;
}

/*
 * Words, not marks. Four brand tiles in the corner carried more weight than the
 * phone number across the page, and these are the least important links here.
 */
.mn-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 20px;
	font-size: var(--mn-size-small);
}

.mn-social a {
	position: relative;
}

.mn-social a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 1px;
	background: var(--mn-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms ease;
}

.mn-social a:hover::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------- Assurance */

/*
 * Under the mark, where it belongs: these are claims the company is making
 * about itself, so they sit with its name rather than off in a strip of their
 * own.
 */
.mn-trust {
	margin-top: 34px;
}

.mn-trust__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mn-ink);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mn-trust__title svg {
	flex: none;
	color: var(--mn-gold);
}

.mn-trust__note {
	margin-top: 4px;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

.mn-trust__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mn-gap-lg);
	margin-top: 16px;
}

/*
 * Partner marks arrive in whatever colours their owners use. Greyed at rest
 * they read as one row of credentials rather than a scatter of logos, and
 * regain their colour on hover for anyone looking one up.
 */
.mn-trust__marks img {
	display: block;
	width: auto;
	max-width: 96px;
	height: 26px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 200ms ease, opacity 200ms ease;
}

.mn-trust__marks img:hover {
	filter: none;
	opacity: 1;
}

/* ------------------------------------------------------------ Contact block */

.mn-footer__contact {
	text-align: right;
}

.mn-footer__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

/*
 * Set large, because these are the two things somebody scrolls to the bottom
 * of a travel site to find. At body size they were a list of details; at this
 * size they are an invitation.
 */
.mn-footer__lead {
	color: var(--mn-ink);
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.25;
	text-decoration: none;
	transition: color 160ms ease;
}

.mn-footer__lead:hover {
	color: var(--mn-gold-hover);
}

.mn-footer__address {
	margin-top: 20px;
	color: var(--mn-gray-600);
	line-height: 1.7;
}

/* -------------------------------------------------------------- Link columns */

.mn-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mn-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.mn-footer a:hover {
	color: var(--mn-ink);
}

/*
 * The gold underline grows from the left on hover rather than appearing whole:
 * a permanent rule under every link would make the block read as a wall of
 * hyperlinks, and a rule that blinks on reads as a mistake.
 */
.mn-footer__links a {
	position: relative;
	display: inline-block;
}

.mn-footer__links a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 1px;
	background: var(--mn-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms ease;
}

.mn-footer__links a:hover::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------- Footer bar */

.mn-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mn-gap) var(--mn-gap-lg);
	padding-block: 22px;
	border-top: 1px solid var(--mn-gray-200);
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

.mn-footer__ends {
	display: flex;
	align-items: center;
	gap: var(--mn-gap-lg);
	margin-left: auto;
}

/* The mark and the promise together — a logo alone states a fact, not a claim. */
.mn-footer__pay {
	display: flex;
	align-items: center;
	gap: 9px;
}

.mn-footer__pay img {
	display: block;
	height: 22px;
	width: auto;
}

@media (max-width: 1080px) {
	.mn-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--mn-gap-xl);
		padding-block: 56px 44px;
	}

	.mn-footer__contact {
		text-align: left;
	}

	.mn-footer__lines {
		align-items: flex-start;
	}
}

@media (max-width: 620px) {
	.mn-footer__main {
		grid-template-columns: 1fr;
	}

	.mn-trust__marks img {
		height: 24px;
	}

	.mn-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.mn-footer__ends {
		flex-wrap: wrap;
		gap: var(--mn-gap);
		margin-left: 0;
	}
}

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

	.mn-card__link,
	.mn-card__frame,
	.mn-card__body,
	.mn-card__foot {
		transition: none;
	}
}

/*
 * The same card turned on its side, one per row. Only the rules that reach into
 * the card survived the file being cut; this is the box that holds them, and
 * without it the rows sat flush against each other with no gap at all.
 */
.mn-cards--list {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap-lg);
}

.mn-cards--list .mn-card__link {
	flex-direction: row;
	align-items: stretch;
}

.mn-cards--list .mn-card__frame {
	flex: none;
	width: 300px;
	aspect-ratio: auto;
}

/*
 * The body becomes two columns of its own: everything describing the trip on
 * the left, the decision on the right, held apart by a rule.
 */
.mn-cards--list .mn-card__body {
	flex-direction: row;
	align-items: center;
	gap: 32px;
	padding: 20px 22px;
}

.mn-cards--list .mn-card__main {
	flex: 1 1 auto;
}

.mn-cards--list .mn-card__foot {
	flex: none;
	align-self: stretch;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
	min-width: 190px;
	height: 100%;
	margin: 0;
	padding: 0 0 0 32px;
	border-top: 0;
	border-left: 1px solid var(--mn-gray-200);
}

.mn-cards--list .mn-card__price {
	justify-content: end;
	text-align: right;
}

.mn-cards--list .mn-card__go {
	width: 100%;
	padding-inline: 22px;
}

/*
 * The path is a graphic, not a measure of distance. Given a whole row to fill
 * it ran a metre of dotted line between two dates and read as an error.
 */
.mn-cards--list .mn-card__route {
	max-width: 380px;
}

/* A row has the width to show every mark, so none is dropped for space. */
.mn-cards--list .mn-card__marks {
	margin-bottom: 0;
}

/* Under a certain width a row is just a card, so it becomes one again. */
@media (max-width: 900px) {
	.mn-cards--list .mn-card__link {
		flex-direction: column;
	}

	.mn-cards--list .mn-card__frame {
		width: auto;
		aspect-ratio: 4 / 3;
	}

	.mn-cards--list .mn-card__body {
		display: flex;
		flex-direction: column;
		padding: 20px 10px 8px;
	}

	.mn-cards--list .mn-card__foot {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		min-width: 0;
		padding: 16px 0 0;
		border-top: 1px solid var(--mn-gray-200);
		border-left: 0;
	}

	.mn-cards--list .mn-card__price {
		text-align: left;
	}

	.mn-cards--list .mn-card__go {
		width: auto;
	}
}

.mn-card {
	display: flex;
}

.mn-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--mn-surface);
	border: 1px solid var(--mn-gray-200);
	/*
	 * The photograph is inset rather than bled to the edge, with its own softer
	 * corner inside the card's. The card reads as a mount holding a picture,
	 * which is a warmer object than a picture with text stuck underneath it.
	 */
	padding: 10px;
	border-radius: 24px;
	box-shadow: var(--mn-shadow);
	color: inherit;
	text-decoration: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.mn-card__link:hover {
	border-color: var(--mn-gray-300);
	box-shadow: var(--mn-shadow-lift);
	transform: translateY(-2px);
}

.mn-card__frame {
	position: relative;
	display: block;
	overflow: hidden;
	/* Inside the card's corner, so the two curves nest instead of fighting. */
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	background: var(--mn-gray-200);
	/*
	 * Its own layer, and its own stacking context. Scaling the picture on hover
	 * promotes it to a compositor layer, and Chrome then applies this box's
	 * rounded clip on the compositor too — where it was dropping the bottom
	 * corners for the length of the transition and squaring them off. Giving
	 * the clipping box a layer of its own makes the rounding part of the layer
	 * rather than something reapplied over it.
	 */
	isolation: isolate;
	transform: translateZ(0);
}

.mn-card__image {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mn-card__link:hover .mn-card__image {
	transform: scale(1.04);
}

/*
 * A scrim over the lower third only. Tinting the whole picture to make one
 * number legible dims a sky that had nothing to do with it.
 */
.mn-card__scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 62%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.28) 42%, transparent);
	pointer-events: none;
}

.mn-card__flags {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mn-card__flag {
	padding: 6px 12px;
	border-radius: var(--mn-radius-pill);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: var(--mn-shadow-sm);
}

/*
 * Opposite the flags. On the same line as the dates it read as a third date;
 * up here it balances the badge on the left and leaves the journey its own
 * line. Glass rather than a solid chip, so it sits on the photograph instead
 * of on top of it.
 */
.mn-card__duration {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--mn-radius-pill);
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(6px);
	color: var(--mn-surface);
	font-size: var(--mn-size-xs);
	font-weight: 600;
}

/* Gold for a claim about money, white for a fact about stock, ink for a stop. */
.mn-card__flag--offer {
	background: var(--mn-gold);
	color: var(--mn-surface);
}

/*
 * Warm, not white. A count of what is left is the one badge here meant to
 * hurry somebody, and on white it read as calmly as the duration. Amber rather
 * than red: this is scarcity, not an error.
 */
.mn-card__flag--few {
	background: #b4471f;
	color: var(--mn-surface);
}

.mn-card__flag--gone {
	background: var(--mn-ink);
	color: var(--mn-surface);
}

/*
 * The whole card, not just its photograph. Greying the picture alone left a
 * bright price and a live-looking button under a dead trip; faded together it
 * reads as one thing that is no longer on offer, while staying legible for
 * anyone comparing dates.
 */
.mn-card.is-gone .mn-card__link {
	background: var(--mn-gray-50);
}

.mn-card.is-gone .mn-card__image {
	filter: grayscale(1);
	opacity: 0.55;
}

.mn-card.is-gone .mn-card__body {
	opacity: 0.6;
	filter: grayscale(1);
}

/* The one thing that keeps its colour, because it is the reason for the rest. */
.mn-card.is-gone .mn-card__flag--gone {
	opacity: 1;
}

.mn-card.is-gone .mn-card__link:hover {
	transform: none;
	box-shadow: var(--mn-shadow);
	border-color: var(--mn-gray-200);
}

.mn-card.is-gone .mn-card__link:hover .mn-card__image {
	transform: none;
}

/*
 * On the picture, bottom left. The number is the thing being compared across a
 * row of cards, and on the image it is the first thing read rather than the
 * last — the word above it keeps "from" from being missed.
 */
.mn-card__price {
	position: absolute;
	right: 18px;
	bottom: 18px;
	left: 18px;
	display: flex;
	flex-direction: column;
	color: var(--mn-surface);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/*
 * Sentence case. Set in caps these two read as labels on a form; the number is
 * the only thing here that should be shouting.
 */
.mn-card__from,
.mn-card__each {
	font-size: var(--mn-size-small);
	opacity: 0.85;
}

.mn-card__amount {
	margin-block: 2px;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.1;
}

/* The card's own padding supplies the rest, so this only makes up the difference. */
.mn-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 20px 10px 8px;
}

/*
 * Everything describing the trip. Stacked it is simply the body's contents; in
 * a row it becomes the left column, which is the whole reason it exists.
 */
.mn-card__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* The gap the flex column gives is not enough between a logo row and a button. */
.mn-card__marks+.mn-card__go {
	margin-top: 12px;
}

/* --------------------------------------------------------------- Journey */

/*
 * A route, not two columns with a rule between them. This is the same dotted
 * path with a plane on it that the package page draws between airports, so the
 * card and the page it opens describe the journey the same way — and a rule
 * said the two dates were separate, where a path says one leads to the other.
 */
.mn-card__route {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

.mn-card__when--end {
	text-align: right;
}

.mn-card__when-date {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	white-space: nowrap;
}

/* The icon says which end this is; the word says it again for anyone reading. */
.mn-card__when-label {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

.mn-card__when--end .mn-card__when-label {
	flex-direction: row-reverse;
}

.mn-card__when-label svg {
	flex: none;
	color: var(--mn-gray-400);
}

.mn-card__path {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 4px;
	min-width: 40px;
}

.mn-card__dot {
	flex: none;
	width: 5px;
	height: 5px;
	border: 1.5px solid var(--mn-gray-300);
	border-radius: 50%;
}

.mn-card__line {
	flex: 1;
	height: 0;
	border-top: 1.5px dashed var(--mn-gray-300);
}

/*
 * Two arrows, not one plane. A single plane pointing right described a one-way
 * flight; what sits between these two dates is a trip out and a trip back.
 */
.mn-card__both {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mn-gold);
	color: var(--mn-surface);
}

/*
 * One line, cut with an ellipsis. A long name wrapping to two pushed
 * everything under it down and left one card in a row taller than its
 * neighbours, which is the thing a grid of cards must not do.
 */
.mn-card__title {
	overflow: hidden;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ----------------------------------------------------------------- Marks */

/*
 * What the price already covers, in one quiet row. Set small and grey it reads
 * as reassurance rather than as a feature list — the card is not selling these
 * individually, it is saying nothing here is an extra.
 */
/*
 * Kept apart by space alone. The rules that were here divided a card whose
 * parts already read as separate — the chips have their own outlines and the
 * marks their own colours, so the lines were describing a break the eye had
 * already made.
 */
.mn-card__included {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding-block: 14px;
}

/*
 * Ink on a bordered chip. Grey text on the palest possible fill read as
 * disabled — the opposite of what these say, which is that the price already
 * covers them.
 */
.mn-card__included-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-pill);
	background: var(--mn-surface);
	color: var(--mn-ink);
	font-size: var(--mn-size-xs);
	font-weight: 500;
	line-height: 1.5;
}

.mn-card__included-item svg {
	flex: none;
	color: var(--mn-gold);
}

/* A chip too, so the row ends rather than trailing off. */
.mn-card__included-more {
	background: var(--mn-gray-50);
	color: var(--mn-gray-600);
	font-weight: 400;
}

/*
 * Hotels then airlines, in their own colours — these are the names somebody
 * checks before believing a price, and a recognisable mark works because it is
 * recognisable. No rule above them: with the dates, the marks and the button
 * each separated by a line the card became a stack of drawers.
 */
/*
 * A strip of fixed height with each mark centred in it. At a shared height the
 * marks still looked uneven, because a solid red roundel carries more weight
 * than a thin outline at the same pixel height — so the box is what is shared
 * and the artwork sits inside it, capped rather than filled.
 */
.mn-card__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	min-height: 30px;
}

.mn-card__marks img {
	display: block;
	width: auto;
	max-width: 68px;
	max-height: 22px;
	height: auto;
	object-fit: contain;
}

/*
 * Drawn as a button though the whole card is the link: it is the only thing on
 * the card that looks pressable, which is what tells somebody the card goes
 * somewhere. It fills as the card is hovered, so the two read as one target
 * rather than two.
 */
.mn-card__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Room above it, so the marks are a row of their own rather than a caption. */
	margin-top: auto;
	padding: 13px var(--mn-pad);
	border: 1px solid var(--mn-gray-300);
	border-radius: var(--mn-radius);
	/* Faintly filled at rest: outlined on white it read as a secondary action. */
	background: var(--mn-gray-50);
	color: var(--mn-ink);
	font-size: var(--mn-size-small);
	font-weight: 600;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		color 200ms ease;
}

.mn-card__go svg {
	flex: none;
	transition: transform 200ms ease;
}

/*
 * The same depth the page's main call to action has: a top-light wash, a
 * highlight along the top edge and a warm glow beneath. A flat fill of gold
 * read as a coloured rectangle where every other button on the site reads as a
 * surface catching light.
 */
.mn-card__link:hover .mn-card__go {
	background-color: var(--mn-gold);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06));
	border-color: transparent;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		var(--mn-shadow-lift);
	color: var(--mn-surface);
}

.mn-card__link:hover .mn-card__go svg {
	transform: translateX(3px);
}

/* A trip nobody can buy should not have a button asking to be pressed. */
.mn-card.is-gone .mn-card__go {
	color: var(--mn-gray-500);
}

.mn-card.is-gone .mn-card__link:hover .mn-card__go {
	background: none;
	border-color: var(--mn-gray-300);
	box-shadow: none;
	color: var(--mn-gray-500);
}

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

	.mn-card__link,
	.mn-card__link:hover,
	.mn-card__image,
	.mn-card__link:hover .mn-card__image,
	.mn-card__link:hover .mn-card__go svg {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------- Card foot */

.mn-card__foot {
	display: flex;
	/* Baselines, not centres: the button sits with the number, not with the
	   block of three lines the number happens to be in. */
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mn-gap);
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--mn-gray-200);
}

/*
 * Smaller than it was on the image. There it had a photograph to shout over;
 * here it sits on white beside a button, and at 32px it was shouting at nobody.
 */
/*
 * "from" above, then the amount with its unit beside it. Stacked in three lines
 * the unit sat further from the number than the word introducing it, and the
 * whole block was taller than the button it stands next to.
 */
.mn-card__price {
	position: static;
	display: grid;
	grid-template-areas:
		"from   ."
		"amount each";
	grid-template-columns: auto auto;
	align-items: baseline;
	justify-content: start;
	column-gap: 6px;
	color: inherit;
	text-shadow: none;
}

.mn-card__from {
	grid-area: from;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	opacity: 1;
}

.mn-card__amount {
	grid-area: amount;
	margin-block: 0;
	font-size: 22px;
	line-height: 1.2;
}

.mn-card__each {
	grid-area: each;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-small);
	opacity: 1;
}

/* Beside the price rather than across the card, and no longer the last row. */
.mn-card__go {
	flex: none;
	margin-top: 0;
	padding: 11px 20px;
}

/* The marks are the last thing in the body now, so they need the room. */
.mn-card__marks {
	margin-bottom: 4px;
}

@media (max-width: 400px) {
	.mn-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.mn-card__go {
		justify-content: center;
	}
}

/* ------------------------------------------------------------ Showing more */

.mn-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: var(--mn-gap-xl);
}

.mn-more__button {
	padding: 13px 28px;
	border: 1px solid var(--mn-gray-300);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-sm);
	color: var(--mn-ink);
	font-size: var(--mn-size-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.mn-more__button:hover {
	border-color: var(--mn-gold);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
	box-shadow: var(--mn-shadow-lift);
}

.mn-more__count {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

/* Dimmed while the next answer is on its way, so a slow reply is visible. */
[data-results][aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 160ms ease;
}

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

	.mn-card__link,
	.mn-card__link:hover,
	.mn-card__image,
	.mn-card__link:hover .mn-card__image {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------------------- Card grid */

/*
 * The columns come from the settings, as custom properties on the element, so
 * the stylesheet stays a stylesheet rather than a rule per combination.
 */
.mn-cards--grid {
	display: grid;
	grid-template-columns: repeat(var(--mn-cols, 3), minmax(0, 1fr));
	gap: var(--mn-gap-xl);
}

@media (max-width: 1080px) {
	.mn-cards--grid {
		grid-template-columns: repeat(var(--mn-cols-mid, 2), minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.mn-cards--grid {
		grid-template-columns: repeat(var(--mn-cols-sm, 1), minmax(0, 1fr));
		gap: var(--mn-gap-lg);
	}

	.mn-listing {
		padding-block: 40px 30px;
	}
}

/* ----------------------------------------------------------------- Listing */

.mn-listing {
	padding-block: 60px 40px;
}

.mn-listing__head {
	max-width: 46rem;
	margin-bottom: var(--mn-gap-xl);
}

.mn-listing__title {
	font-size: var(--mn-size-display);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-display);
}

.mn-listing__intro {
	margin-top: 14px;
	color: var(--mn-gray-600);
	line-height: 1.7;
}

/*
 * The count and the controls share the rule that heads the list. It is the only
 * thing between the intro and the cards, and without the rule it read as a
 * stray line of text rather than as the head of a list.
 */
.mn-listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap);
	padding-bottom: 12px;
	margin-bottom: var(--mn-gap-lg);
	border-bottom: 1px solid var(--mn-gray-200);
}

.mn-listing__count {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Dimmed while the next answer is on its way, so a slow reply is visible. */
[data-results][aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 160ms ease;
}

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

.mn-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mn-gap) var(--mn-gap-lg);
}

.mn-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mn-gap) var(--mn-gap-lg);
	margin: 0;
}

.mn-filter {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mn-filter__label {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* A field with its icon inside it, so the box is the whole target. */
.mn-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	transition: border-color 160ms ease;
}

.mn-search:focus-within {
	border-color: var(--mn-gold);
}

.mn-search svg {
	flex: none;
	color: var(--mn-gray-500);
}

.mn-search input {
	width: 190px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
	appearance: none;
}

.mn-search input:focus {
	outline: 0;
}

/*
 * Chrome draws its own cross in a search field, in its own weight and its own
 * grey — the one mark on the page that belonged to nobody. Ours replaces it.
 */
.mn-search input::-webkit-search-cancel-button,
.mn-search input::-webkit-search-decoration {
	appearance: none;
	display: none;
}

.mn-search__clear {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mn-gray-100);
	color: var(--mn-gray-600);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.mn-search__clear:hover {
	background: var(--mn-gray-200);
	color: var(--mn-ink);
}

/* Turns while the answer is being fetched, and is otherwise not there. */
.mn-search__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid var(--mn-gray-200);
	border-top-color: var(--mn-gold);
	border-radius: 50%;
	animation: mn-spin 700ms linear infinite;
}

@keyframes mn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-search__spinner {
		animation-duration: 2s;
	}
}

.mn-select {
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background-color: var(--mn-surface);
	/* The chevron, drawn rather than fetched — one request fewer for two lines. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 9px center;
	background-repeat: no-repeat;
	background-size: 15px;
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
	appearance: none;
	cursor: pointer;
	transition: border-color 160ms ease;
}

.mn-select:hover,
.mn-select:focus {
	border-color: var(--mn-gold);
	outline: 0;
}

/* Hidden by the script, which is why it is styled at all. */
.mn-filter-form__go {
	padding: 8px 16px;
	border: 1px solid var(--mn-gray-300);
	border-radius: var(--mn-radius);
	background: var(--mn-gray-50);
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
	font-weight: 500;
	cursor: pointer;
}

/*
 * A checkbox that reads as one of the controls beside it, not as a form field.
 * Named for the filter bar because the checkout has a `.mn-check` of its own,
 * further down the file, which silently won.
 */
.mn-filter-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	font-size: var(--mn-size-small);
	cursor: pointer;
	transition: border-color 160ms ease;
}

.mn-filter-check:hover {
	border-color: var(--mn-gray-300);
}

.mn-filter-check:has(input:checked) {
	border-color: var(--mn-gold);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

/* Hidden, but still the control: the label is what is clicked either way. */
.mn-filter-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mn-filter-check__box {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius-sm);
	background: var(--mn-surface);
	color: transparent;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mn-filter-check input:checked+.mn-filter-check__box {
	background: var(--mn-gold);
	border-color: var(--mn-gold);
	color: var(--mn-surface);
}

/* A keyboard has to be able to see where it is, with the input out of sight. */
.mn-filter-check input:focus-visible+.mn-filter-check__box {
	outline: 2px solid var(--mn-gold);
	outline-offset: 2px;
}

/*
 * A pair of links drawn as one control. The current one is a pale tile with an
 * ink mark on it — filled in black it was the darkest thing on a page of sand
 * and white, and shouted about a choice that changes nothing but the drawing.
 */
.mn-toggle {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
}

.mn-toggle__option {
	display: grid;
	place-items: center;
	width: 32px;
	height: 28px;
	border-radius: 7px;
	color: var(--mn-gray-400);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.mn-toggle__option:hover {
	color: var(--mn-ink);
}

.mn-toggle__option.is-current {
	background: var(--mn-gray-100);
	color: var(--mn-ink);
}

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

/*
 * Centred in the space the packages would have filled, rather than a small box
 * in the corner of it. An empty result is a whole screen with nothing on it —
 * a card floated top-left reads as the first of a list that failed to load,
 * where a centred column reads as an answer.
 */
.mn-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 30rem;
	margin-inline: auto;
	padding-block: 72px 88px;
	text-align: center;
}

.mn-empty__mark {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--mn-gap-lg);
	border-radius: 50%;
	background: var(--mn-surface);
	border: 1px solid var(--mn-gray-200);
	color: var(--mn-gray-400);
}

.mn-empty__title {
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-empty__hint {
	margin-top: 10px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
	line-height: 1.7;
}

/*
 * Outlined. Filled gold this was the loudest thing on an otherwise empty
 * screen, and it is a way back rather than a thing to want.
 */
.mn-empty__action {
	margin-top: var(--mn-gap-lg);
	padding: 11px 22px;
	border: 1px solid var(--mn-gray-300);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	color: var(--mn-ink);
	font-size: var(--mn-size-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.mn-empty__action:hover {
	border-color: var(--mn-gold);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

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

/*
 * The layout toggle's shape, at the other end of the page: one white tile with
 * a hairline round it, holding the numbers. Bare numbers on the canvas were
 * quiet but belonged to nothing — every other control here sits in a box, and
 * the end of a catalogue is a control like any other.
 */
.mn-pagination {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

.mn-pagination .nav-links,
.mn-pagination {
	--mn-pagination-gap: 2px;
}

.mn-pagination {
	gap: var(--mn-pagination-gap);
	flex-wrap: wrap;
	align-items: center;
	width: fit-content;
	margin-inline: auto;
	padding: 4px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-sm);
}

.mn-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 34px;
	padding: 0 11px;
	border-radius: 7px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.mn-pagination .page-numbers:hover {
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

/*
 * The page being read: the same pale tile the current layout wears, so the two
 * controls say "you are here" the same way.
 */
.mn-pagination .page-numbers.current,
.mn-pagination .page-numbers.current:hover {
	background: var(--mn-gray-100);
	color: var(--mn-ink);
	font-weight: 600;
}

/* Set apart by a hairline, because a direction is not a page. */
.mn-pagination .prev,
.mn-pagination .next {
	color: var(--mn-gray-500);
	font-weight: 500;
}

.mn-pagination .prev {
	margin-right: 4px;
	padding-right: 13px;
	border-right: 1px solid var(--mn-gray-200);
	border-radius: 7px 0 0 7px;
}

.mn-pagination .next {
	margin-left: 4px;
	padding-left: 13px;
	border-left: 1px solid var(--mn-gray-200);
	border-radius: 0 7px 7px 0;
}

.mn-pagination .dots,
.mn-pagination .dots:hover {
	background: none;
	color: var(--mn-gray-400);
}

@media (max-width: 700px) {
	.mn-listing {
		padding-block: 40px 30px;
	}

	.mn-search input {
		width: 140px;
	}
}

/* ----------------------------------------------------------- Confirmation */

/*
 * White, like the checkout's left half — this is the last page of that errand,
 * and the customer should feel they are still in the same room.
 */
.mn-done {
	background: var(--mn-surface);
	padding-block: 72px 96px;
}

.mn-done__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

.mn-done__mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--mn-gap-lg);
	border-radius: 50%;
	border: 1px solid var(--mn-gray-200);
	background: var(--mn-canvas);
	color: var(--mn-gray-500);
}

/* Green for money taken, gold for money waiting, red for money refused. */
.mn-done__mark--good {
	border-color: var(--mn-accent-soft);
	background: var(--mn-accent-soft);
	color: var(--mn-accent);
}

.mn-done__mark--held {
	border-color: rgba(196, 139, 58, 0.25);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

.mn-done__mark--bad {
	border-color: var(--mn-sale-line);
	background: var(--mn-sale-soft);
	color: var(--mn-sale);
}

.mn-done__title {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-done__lead {
	max-width: 30rem;
	margin-top: 10px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
	line-height: 1.7;
}

/*
 * The reference, boxed and set in tabular figures: it is the one thing here
 * somebody will read back down a telephone or copy into an email.
 */
.mn-done__reference {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: var(--mn-gap-xl);
	padding: 12px 24px;
	border: 1px dashed var(--mn-gray-300);
	border-radius: var(--mn-radius);
	background: var(--mn-canvas);
}

.mn-done__reference-label {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mn-done__reference-value {
	font-size: var(--mn-size-lg);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-done__trip {
	width: 100%;
	margin-top: var(--mn-gap-xl);
	padding-top: var(--mn-gap-lg);
	border-top: 1px solid var(--mn-gray-200);
}

.mn-done__trip-title {
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-done__dates {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 7px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
}

.mn-done__dates svg {
	flex: none;
	color: var(--mn-gold);
}

.mn-done__party {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin-top: 12px;
	color: var(--mn-gray-700);
	font-size: var(--mn-size-small);
}

.mn-done__room {
	padding: 4px 12px;
	border: 1px solid rgba(196, 139, 58, 0.3);
	border-radius: var(--mn-radius-pill);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
	font-size: var(--mn-size-xs);
	font-weight: 500;
}

.mn-done__money {
	width: 100%;
	margin-top: var(--mn-gap-lg);
	padding-top: var(--mn-gap-lg);
	border-top: 1px solid var(--mn-gray-200);
}

.mn-done__money-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mn-gap);
	font-size: var(--mn-size-small);
	text-align: left;
}

.mn-done__money-line+.mn-done__money-line {
	margin-top: 11px;
}

.mn-done__money-line dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* What has changed hands, and what has not. */
.mn-done__money-line--paid {
	color: var(--mn-ink);
	font-weight: 600;
}

.mn-done__money-line--later {
	color: var(--mn-gray-600);
}

.mn-done__panel .mn-cta {
	width: auto;
	margin-top: var(--mn-gap-xl);
	padding-inline: 32px;
}

.mn-done__next {
	margin-top: var(--mn-gap-lg);
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	line-height: 1.7;
}

/* ------------------------------------------------------- Finishing payment */

/*
 * The same panel as the confirmation, because it is the same booking seen one
 * step earlier — but it ends in a decision rather than a statement, so the
 * bottom of it stops being centred prose and becomes a form.
 */
.mn-pay__panel {
	max-width: 38rem;
}

.mn-pay__form {
	width: 100%;
	margin-top: var(--mn-gap-xl);
	padding-top: var(--mn-gap-xl);
	border-top: 1px solid var(--mn-line);
	text-align: left;
}

.mn-pay__question {
	margin-bottom: var(--mn-gap);
	font-weight: 500;
	font-size: var(--mn-size-small);
	color: var(--mn-ink);
}

/* One method is a statement, not a choice — it needs no column of its own. */
.mn-pay__form .mn-methods {
	grid-template-columns: 1fr;
	margin-bottom: 0;
}

.mn-pay__submit {
	width: 100%;
	margin-top: var(--mn-gap-lg);
}

/*
 * Overriding the centred panel's own button rule, which narrows a button to
 * its text. Here the button is the point of the page and runs the full width.
 */
.mn-done__panel .mn-pay__submit {
	width: 100%;
	margin-top: var(--mn-gap-lg);
}

.mn-pay__note {
	margin-top: var(--mn-gap);
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	line-height: 1.7;
	text-align: center;
}

.mn-pay .mn-checkout__alert {
	width: 100%;
	margin-top: var(--mn-gap-xl);
	margin-bottom: 0;
	text-align: left;
}

/* --------------------------------------------------------- Pressed buttons */

/*
 * The label goes transparent rather than away, so the button keeps exactly the
 * width it had — a spinner that replaces the words would shrink the button
 * under the cursor at the moment somebody is watching it most closely.
 */
[data-pending].is-pending {
	position: relative;
	color: transparent;
	cursor: progress;
	pointer-events: none;
}

[data-pending].is-pending>* {
	visibility: hidden;
}

[data-pending].is-pending::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-radius: 50%;
	/* Drawn in the label's own colour, which each button has already chosen. */
	border-top-color: transparent;
	color: var(--mn-surface);
	animation: mn-spin 620ms linear infinite;
}

/* On the pale buttons the ring has to be ink, not white. */
.mn-save.is-pending::after,
.mn-cta--disabled.is-pending::after,
.mn-empty__action.is-pending::after {
	color: var(--mn-ink);
}

@media (prefers-reduced-motion: reduce) {
	[data-pending].is-pending::after {
		animation-duration: 2s;
	}
}

/* ------------------------------------------------------------ Generic page */

.mn-page {
	padding-block: 50px;
}

.mn-article__title {
	font-size: var(--mn-size-display);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-display);
}

.mn-prose>*+* {
	margin-top: 1em;
}

.mn-note {
	margin-top: var(--mn-gap-lg);
	padding: var(--mn-pad);
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
}

/* ----------------------------------------------------------------- Banner */


/* Full bleed: the hero runs edge to edge, and only its contents keep to the
   page grid. */
.mn-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 480px;
	padding-block: 140px 50px;
	overflow: hidden;
	/* The plate under the photograph. Text is placed against this, so it stays
	   readable while the image loads and if it never arrives. */
	background: #241c14;
	/* Square at the top where it meets the browser chrome, curved at the bottom
	   where it hands over to the page. */
	border-radius: 0 0 24px 24px;
	color: var(--mn-surface);
}

.mn-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

/* A gradient rather than a flat wash: the top stays clear for the photograph,
   and the weight gathers where the words are. */
.mn-banner::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.1) 35%,
			rgba(0, 0, 0, 0.65) 100%);
	content: "";
}

.mn-banner__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mn-gap-lg);
	width: 100%;
}

.mn-banner__headings {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mn-gap);
}

.mn-banner__pill {
	padding: 5px 15px;
	background: var(--mn-gold);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-surface);
	font-size: var(--mn-size-small);
	font-weight: 600;
	white-space: nowrap;
}

.mn-banner__title {
	font-size: var(--mn-size-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--mn-tracking-display);
}

.mn-banner__dates {
	display: flex;
	align-items: stretch;
	gap: 15px;
	margin-top: 5px;
}

.mn-banner__rule {
	width: 1px;
	background: rgba(255, 255, 255, 0.35);
}

.mn-banner__date {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mn-banner__datelabel {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	opacity: 0.8;
}

.mn-banner__datevalue {
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-banner__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	text-align: right;
}

.mn-banner__fromlabel {
	font-size: var(--mn-size-small);
	opacity: 0.8;
}

.mn-banner__price {
	font-size: var(--mn-size-price);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--mn-tracking-display);
}

.mn-banner__actions {
	display: flex;
	gap: 8px;
	margin-top: var(--mn-gap);
}

.mn-action {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-surface);
	font-size: var(--mn-size-small);
	font-weight: 500;
	cursor: pointer;
}

.mn-action:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Saved is a state, not an action, so it stops looking like a button to press
   and starts looking like a fact. */
.mn-action[aria-pressed="true"] {
	background: var(--mn-gold);
	border-color: var(--mn-gold);
}

.mn-action[aria-pressed="true"] .mn-icon {
	fill: currentColor;
}

/* ------------------------------------------------------------ Package grid */

.mn-package__grid {
	display: grid;
	/*
	 * minmax(0, 1fr), not 1fr. A grid track's default minimum is its content,
	 * so one nowrap pill or a wide logo silently widens its column and steals
	 * the other's share — which is how the booking side came to be squeezed.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--mn-column-gap);
	align-items: start;
	padding-block: 0 80px;
}

/*
 * The space above the columns belongs to the columns, not to the grid. On the
 * grid it is scrolled away with the page, so the pinned column arrived at the
 * top of the screen with its heading against the edge; on the columns it is
 * carried with them and holds that gap open however far you scroll.
 */
.mn-package__info,
.mn-package__booking {
	padding-top: 50px;
}

/*
 * The trip on the left, the booking on the right.
 *
 * The left column describes the package and stops; the right one grows with
 * every room, traveller and extra. So the left is what sticks — pinning the
 * taller column would leave part of the form unreachable. The pin is held back
 * on short viewports for the same reason: a sticky element taller than the
 * screen hides its own bottom.
 */
@media (min-width: 1024px) and (min-height: 720px) {
	.mn-package__info {
		position: sticky;
		/*
		 * Pinned flush, because the column now carries its own 50px above the
		 * heading. Adding an offset on top of that would open a gap of 70px
		 * once stuck and 50px before — the header appearing to jump as soon as
		 * anybody scrolled.
		 */
		top: 0;
	}

	/*
	 * The admin bar is fixed over the top 32px of the window, so a column
	 * pinned at 0 slides under it — which is what an editor sees while an
	 * ordinary visitor sees nothing wrong.
	 */
	body.admin-bar .mn-package__info {
		top: 32px;
	}
}

/* ---------------------------------------------------------------- Gallery */

.mn-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap);
	padding-top: 30px;
}

.mn-gallery__stage {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--mn-sand);
	border-radius: var(--mn-radius);
}

.mn-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mn-gallery__thumbs {
	display: flex;
	gap: var(--mn-gap);
	overflow-x: auto;
	scrollbar-width: none;
}

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

.mn-gallery__thumb {
	display: block;
	width: 90px;
	height: 90px;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 2px solid transparent;
	border-radius: var(--mn-radius);
	cursor: pointer;
}

.mn-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mn-gallery__thumb.is-current {
	border-color: var(--mn-gold);
}

/* --------------------------------------------------------------- Overview */

/*
 * The left column: what the package is. Named apart from the order summary on
 * the right, which is what this booking costs — two different things that both
 * answered to `.mn-summary`, so styling one silently restyled the other.
 */
.mn-overview {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * A rule between each block instead of relying on the gap alone. With five
 * stacked groups of similar weight, spacing alone stops reading as grouping —
 * you see one long list rather than five answers.
 */
.mn-overview>.mn-block+.mn-block {
	padding-top: 24px;
	border-top: 1px solid var(--mn-line);
}

.mn-overview__headings {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mn-gap);
}

.mn-pill {
	padding: 5px 15px;
	background: var(--mn-gold-soft);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-gold);
	font-weight: 500;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- Legs */

/* The two flights are a pair — out and back — so they sit side by side and
   each gets a card, which is what makes them read as one comparison rather
   than two facts in a row. */
.mn-legs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mn-gap);
}

.mn-leg {
	display: grid;
	/* Equal side columns, so the plane and the note under it land on the card's
	   centre line rather than on the midpoint between two city names of
	   different lengths — which is what put "Amsterdam → Medina" visibly off
	   to one side. */
	grid-template-columns: minmax(0, 1fr) minmax(36px, 76px) minmax(0, 1fr);
	align-items: center;
	column-gap: 8px;
	row-gap: 8px;
	padding: 15px;
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
}

.mn-leg__label {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 6px;
	color: var(--mn-ink-50);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mn-leg__icon {
	display: grid;
	place-items: center;
	color: var(--mn-gold);
}

.mn-leg__date {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-left: auto;
	color: var(--mn-ink);
	font-size: var(--mn-size-small);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* Under the city it belongs to, in the same column. */
/*
 * The line between the two ends: a dot at each end, a dashed run, and the
 * plane riding the middle of it. The whole point of drawing the route rather
 * than writing it, so it is styled here and not left to the glyph alone.
 */
/*
 * The line belongs on the codes' row, not in the middle of the block beneath
 * them: it joins AMS to MED, and centring it against three stacked lines left
 * it floating between the city and the hour.
 */
.mn-leg__path {
	display: flex;
	grid-column: 2;
	align-self: start;
	align-items: center;
	gap: 4px;
	margin-top: -1px;
}

.mn-leg__dot {
	width: 6px;
	height: 6px;
	border: 1.5px solid var(--mn-line-strong);
	border-radius: 50%;
}

.mn-leg__line {
	flex: 1;
	height: 0;
	border-top: 1.5px dashed var(--mn-line-strong);
}

.mn-leg__plane {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--mn-gold);
	border-radius: 50%;
	color: var(--mn-surface);
}

/* The icon points up; the journey runs left to right. */
.mn-leg__plane .mn-icon {
	transform: rotate(90deg);
}

/* A stop is not a fault, so it is not red — but it should not read as the
   uninterrupted flight either. */
.mn-leg__plane.is-stopping {
	background: var(--mn-sand);
	color: var(--mn-sand-ink);
}

/*
 * Each end of the route reads downwards: the code, the city it stands for, and
 * the hour. The code leads because it is the shortest true label — it fits at
 * any column width, where a long city name has to be cut.
 */
.mn-leg__end {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.mn-leg__end--arrive {
	grid-column: 3;
	text-align: right;
}

/*
 * Mono, because AMS is a code and not a word: the fixed width says "read this
 * as an identifier" before anything else does, and the two ends of a route
 * line up as a pair rather than as two strings of different widths.
 */
.mn-leg__code {
	font-family: var(--mn-font-mono);
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.1;
}

.mn-leg__city {
	overflow: hidden;
	color: var(--mn-ink-50);
	font-size: var(--mn-size-xs);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mn-leg__time {
	color: var(--mn-gold);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.3;
}

/* An unconfirmed time is a caveat, not a figure, so it does not take the
   emphasis a real one would. */
.mn-leg__time.is-pending {
	color: var(--mn-ink-50);
	font-weight: 500;
}

/*
 * The carrier's mark, centred above the line that says how the leg flies.
 * A logo belongs to the flight it operates, not to a list of every airline the
 * package touches — on a two-carrier trip that list could not say which was
 * which anyway.
 */
.mn-leg__carrier {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 26px;
	margin: 8px 0 2px;
}

.mn-leg__carrier img {
	width: auto;
	height: 100%;
	max-width: 70px;
	object-fit: contain;
}

.mn-leg__note {
	grid-column: 1 / -1;
	color: var(--mn-ink-50);
	font-size: 12px;
	text-align: center;
}

.mn-leg__note.is-direct {
	color: var(--mn-gold);
	font-weight: 500;
}

/* --------------------------------------------------- Hotels and airlines */

.mn-block {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap);
}

/* ---------------------------------------------------------------- Features */

.mn-features {
	gap: 8px;
}

.mn-feature {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 4px 14px 4px 10px;
	background: var(--mn-surface);
	border-radius: var(--mn-radius-pill);
	box-shadow: var(--mn-shadow-sm);
	scroll-snap-align: start;
}

.mn-feature__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--mn-gold);
}

.mn-feature__label {
	font-size: var(--mn-size-small);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-tight);
	white-space: nowrap;
}

.mn-block__title {
	color: var(--mn-ink-50);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Carousel */

/*
 * Two items to a view, the rest a swipe away.
 *
 * The track is a plain scroller, so it works before any script runs and keeps
 * working for anyone dragging with a trackpad or a thumb. The arrows are an
 * addition on top, and stay hidden until there is genuinely something out of
 * sight — two hotels should not be given controls that do nothing.
 */
.mn-carousel {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap);
}

.mn-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

/*
 * A display of our own beats the browser's rule for [hidden], so hiding the
 * controls needs saying explicitly. Without this the arrows appeared on every
 * carousel and merely sat disabled — which is exactly what they were there not
 * to do.
 */
.mn-carousel__controls[hidden] {
	display: none;
}

/* Title and arrows share a row. Overlaying the arrows on the track saved a
   line but clipped whatever item happened to be under them, which reads as a
   rendering fault rather than as "there is more this way". */
.mn-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap);
	min-height: 28px;
}

.mn-carousel__nav {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--mn-surface);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--mn-shadow-sm);
	color: var(--mn-ink);
	cursor: pointer;
}

.mn-carousel__nav:hover:not([disabled]) {
	box-shadow: var(--mn-shadow);
	color: var(--mn-gold);
}

.mn-carousel__nav[disabled] {
	color: var(--mn-ink-50);
	cursor: default;
	opacity: 0.4;
}

.mn-carousel__track {
	--mn-fade-before: 0px;
	--mn-fade-after: 0px;

	display: flex;
	gap: var(--mn-gap-lg);
	/*
	 * An overflow container clips in both axes — overflow-x: auto forces
	 * overflow-y: auto — so a shadow that spills above or below the track gets
	 * sheared off flat. The padding gives it room and the negative margin gives
	 * the space back to the layout.
	 */
	padding-block: 8px;
	margin-block: -8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/*
	 * The edge fades only where there is something beyond it, so the first item
	 * is not dimmed while it is still the first item. The widths are toggled
	 * from script, which already knows which end has more.
	 */
	-webkit-mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--mn-fade-before),
			#000 calc(100% - var(--mn-fade-after)),
			transparent 100%);
	mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--mn-fade-before),
			#000 calc(100% - var(--mn-fade-after)),
			transparent 100%);
}

.mn-carousel.has-before .mn-carousel__track {
	--mn-fade-before: 36px;
}

.mn-carousel.has-after .mn-carousel__track {
	--mn-fade-after: 36px;
}

.mn-carousel__track::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mn-carousel__track {
		scroll-behavior: auto;
	}
}

/* Two hotels, side by side: an Umrah package stays in Medina and in Mekka, and
   seeing them next to each other is how they are actually compared. */
.mn-hotels>.mn-hotel {
	flex: 0 0 calc(50% - var(--mn-gap-lg) / 2);
	min-width: 0;
	scroll-snap-align: start;
}

.mn-hotel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* The height is the constraint, not the width: these are logos of wildly
   different proportions, and lining them up by height is what makes a row of
   them look deliberate. Percentages are avoided here — a percentage max-height
   needs a definite parent to resolve against, and quietly does nothing when it
   has none. */
.mn-hotel__logo {
	display: flex;
	align-items: center;
	height: 48px;
}

.mn-hotel__logo img {
	width: auto;
	height: 100%;
	max-width: 190px;
	object-fit: contain;
	object-position: left center;
}

.mn-hotel__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mn-hotel__name {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/* A substitution is a caveat, not a feature: said plainly, and quietly. */
.mn-hotel__similar {
	color: var(--mn-ink-50);
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
}

.mn-stars {
	color: var(--mn-gold);
	font-size: 11px;
	letter-spacing: 0.1em;
	line-height: 1;
}

.mn-hotel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--mn-ink-50);
	font-size: 12px;
}

.mn-hotel__city {
	font-weight: 500;
	color: var(--mn-ink-60);
}

.mn-hotel__city::after {
	content: "·";
	margin-left: 6px;
}

.mn-allowance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--mn-gap);
}

.mn-allowance__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow-sm);
}

.mn-allowance__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--mn-gold-soft);
	border-radius: var(--mn-radius);
	color: var(--mn-gold);
}

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

.mn-allowance__value {
	font-size: var(--mn-size-base);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.2;
	white-space: nowrap;
}

.mn-allowance__label {
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
	line-height: 1.3;
}

/* ----------------------------------------------------------- Configurator */

/* .mn-config {
	margin-top: var(--mn-gap-xl);
} */

/*
 * Choosing a room is choosing a price, so the two are on the same control.
 * Tabs hid that: they named the rooms and left the customer to click each one
 * to find out what it cost.
 */
.mn-rooms {
	display: grid;
	/* Wide enough for the longest room name and its rate on one line each,
	   and narrow enough that three rooms still stand side by side. */
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--mn-gap);
	margin-bottom: var(--mn-gap);
	padding-top: 8px;
}

/* Without the script every panel is shown, so the chooser would be a row of
   controls that do nothing. It is hidden until the script takes over. */
.mn-config:not(.is-enhanced) .mn-rooms {
	display: none;
}

.mn-roomcard {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mn-gap);
	padding: 14px;
	background: var(--mn-surface);
	/* Transparent rather than absent, so gaining the gold border on selection
	   does not change the card's size. */
	border: 1px solid transparent;
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
	cursor: pointer;
}

/* The selected card is drawn with an inset ring rather than a thicker border:
   growing the border by a pixel would nudge every card beside it. */
.mn-roomcard.is-current {
	border-color: var(--mn-accent);
	box-shadow: inset 0 0 0 1px var(--mn-accent), var(--mn-shadow-lift);
}

.mn-roomcard input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/*
 * The recommendation rides the top edge rather than sitting inside the card:
 * in the flow it would make this card taller than the others, and a row of
 * choices that do not line up reads as a mistake rather than an emphasis.
 */
.mn-roomcard__ribbon {
	position: absolute;
	top: 0;
	left: 14px;
	padding: 3px 10px;
	background: var(--mn-accent);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-surface);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: translateY(-50%);
	white-space: nowrap;
}

/* The recommended card is picked out even when it is not the chosen one, so
   the advice survives the customer clicking elsewhere. */
/*
 * The recommendation is drawn in the accent, not in gold, so "we suggest this
 * one" and "you have chosen this one" stay two different statements. It keeps
 * its mark when the customer picks another room — advice that disappears the
 * moment it is not taken was never advice.
 */
/* .mn-roomcard.is-recommended {
	border-color: var(--mn-accent);
} */

.mn-roomcard.is-recommended:not(.is-current) {
	box-shadow: var(--mn-shadow-lift);
}

.mn-roomcard.is-recommended .mn-roomcard__mark {
	border-color: var(--mn-accent);
}

.mn-roomcard__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid var(--mn-line-strong);
	border-radius: 50%;
}

.mn-roomcard__mark::after {
	width: 8px;
	height: 8px;
	background: var(--mn-accent);
	border-radius: 50%;
	content: "";
	transform: scale(0);
}

.mn-roomcard.is-current .mn-roomcard__mark {
	border-color: var(--mn-accent);
}

.mn-roomcard.is-current .mn-roomcard__mark::after {
	transform: scale(1);
}

.mn-roomcard input:focus-visible~.mn-roomcard__mark {
	outline: 2px solid var(--mn-accent);
	outline-offset: 2px;
}

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

.mn-roomcard__name {
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.3;
}

.mn-roomcard__price {
	color: var(--mn-ink-50);
	font-size: var(--mn-size-xs);
	line-height: 1.3;
	/* One line: broken after the amount, "p.p." is left stranded and reads as a
	   rendering fault rather than as a wrap. */
	white-space: nowrap;
}

.mn-roomcard.is-current .mn-roomcard__price {
	color: var(--mn-accent);
	font-weight: 500;
}

/* The rate for taking the room alone. Quieter than the sharing price, which is
   what most parties pay — but on the card rather than behind a stepper, so a
   lone traveller can see what the room costs them without configuring it. */
.mn-roomcard__single {
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
	line-height: 1.3;
	white-space: nowrap;
}

.mn-config__panel {
	padding: var(--mn-pad);
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
}

.mn-config:not(.is-enhanced) .mn-config__panel+.mn-config__panel {
	margin-top: var(--mn-gap-lg);
}

.mn-config.is-enhanced .mn-config__panel {
	display: none;
}

.mn-config.is-enhanced .mn-config__panel.is-current {
	display: block;
}

/* The room's name heads its panel only when the tabs are not there to say it. */
.mn-config__roomname {
	margin-bottom: var(--mn-gap-lg);
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-config.is-enhanced .mn-config__roomname {
	display: none;
}

.mn-config__section+.mn-config__section {
	margin-top: var(--mn-gap-xl);
	padding-top: var(--mn-gap-xl);
	border-top: 1px solid var(--mn-line);
}

/*
 * Larger than the configurator's step headings, and close to what it heads.
 * It titles the whole column rather than one question inside it, and the gap
 * that matched the steps left it floating between the banner and the cards
 * with nothing to say which it belonged to.
 */
.mn-overview__title {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/*
 * The column is a flex stack with a 24px gap, which the title inherits like
 * any other block — so it sat 24px clear of the cards it names. Pulled back to
 * 16px, close enough to read as a title rather than as another item in a list.
 */
.mn-overview__title {
	margin-bottom: -8px;
}

/*
 * The step's numeral. Set apart from the words it introduces, so a heading reads
 * as one of a sequence rather than as a sentence starting with a number.
 */
.mn-config__step {
	color: var(--mn-gray-400);
	font-variant-numeric: tabular-nums;
}

.mn-config__heading {
	display: flex;
	gap: var(--mn-gap);
	margin-bottom: var(--mn-gap);
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/* ------------------------------------------------------------------- Rows */

.mn-rows {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap);
}

.mn-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap-lg);
	padding: var(--mn-pad);
	/* Off-white rather than white: on a white panel the row needs to be a
	   surface of its own, and a shade does that more quietly than a heavier
	   border would. */
	background: var(--mn-gray-100);
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
}

.mn-row__body {
	display: flex;
	flex-direction: column;
	/*
	 * Each line takes its own width. Stretched — the default — the note's pill
	 * grew to match the longest line in the column, so a short message under a
	 * long description trailed empty background behind it.
	 */
	align-items: flex-start;
	gap: 5px;
}

.mn-row__title {
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-row__meta {
	font-size: var(--mn-size-small);
	color: var(--mn-ink-50);
}

/* ---------------------------------------------------------------- Stepper */

.mn-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	height: 44px;
	background: var(--mn-surface);
	/*
	 * No padding of its own. The buttons carry it instead and stretch the full
	 * height, so the space beside a glyph belongs to the button rather than to
	 * the control — pressing just next to the plus used to do nothing, which
	 * reads as a broken button rather than as a miss.
	 */
	padding: 0;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius);
	font-size: var(--mn-size-small);
}

.mn-stepper__button {
	display: grid;
	place-items: center;
	align-self: stretch;
	padding: 0 14px;
	background: none;
	border: 0;
	border-radius: inherit;
	cursor: pointer;
}

.mn-stepper__button[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

.mn-stepper__value {
	width: 2ch;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.mn-stepper__value::-webkit-inner-spin-button,
.mn-stepper__value::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* --------------------------------------------------------------- Checkbox */

.mn-check {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

.mn-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mn-check__box {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	background: var(--mn-surface);
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius-sm);
	color: transparent;
}

.mn-check input:checked+.mn-check__box {
	background: var(--mn-gold);
	border-color: var(--mn-gold);
	color: var(--mn-surface);
}

.mn-check input:focus-visible+.mn-check__box {
	outline: 2px solid var(--mn-gold);
	outline-offset: 2px;
}

.mn-check__label {
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/* ------------------------------------------------------- Includes + total */

.mn-config__foot {
	margin-top: var(--mn-gap-xl);
}

/*
 * The lines behind the total. Label on the left, amount on the right, with a
 * leader of space between: a column of figures is read down its right edge, so
 * they line up on it whatever the labels do.
 */
.mn-summary {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 10px;
}

.mn-summary__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mn-gap);
	font-size: var(--mn-size-small);
}

.mn-summary__label {
	color: var(--mn-gray-700);
	min-width: 0;
}

/* The arithmetic, quieter than the thing it describes. */
.mn-summary__meta {
	color: var(--mn-gray-500);
	font-size: 11px;
	white-space: nowrap;
}

.mn-summary__amount {
	flex: none;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/*
 * The total sits under its own lines and reads with them, left aligned. Its
 * label goes above the figure: "Total" underneath read as a caption to a number
 * that had already been and gone.
 */
.mn-total {
	margin-top: var(--mn-gap);
	text-align: left;
}

.mn-total__value {
	font-size: var(--mn-size-price);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	letter-spacing: var(--mn-tracking-display);
}

.mn-total__label {
	color: var(--mn-ink-50);
	font-size: var(--mn-size-small);
}

/*
 * What each traveller in this row costs, kept beside the stepper rather than on
 * a line of its own. It is the consequence of the choice, not the choice — a
 * full-width price under every row gave a secondary fact the same weight as the
 * traveller's name, and four of them made the section twice as tall.
 */
.mn-row__side {
	display: flex;
	align-items: center;
	gap: var(--mn-gap);
}

.mn-row__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Tight: "each" belongs to the figure above it, not beside it. */
	gap: 1px;
}

/*
 * Both rates on one line, the struck one first: read left to right, that is the
 * old price giving way to the new. The saving sits under them rather than
 * between, so the two figures stay adjacent and comparable.
 */
.mn-row__price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 5px;
	line-height: 1.25;
}

/* The price being charged. Plain text beside the stepper, a shade heavier than
   the row's copy so it carries without a container around it. */
.mn-row__now {
	font-size: var(--mn-size-small);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	white-space: nowrap;
}

/*
 * The saving, and the only thing in the row still wearing a badge — because it
 * is the one fact that is neither a price nor a rule, and it should not read as
 * either. Green, the same colour the room tabs use for what the page
 * recommends: both are the page pointing rather than stating.
 */
.mn-row__save {
	flex: none;
	padding: 3px 9px;
	border-radius: var(--mn-radius-pill);
	background: var(--mn-accent-soft);
	color: var(--mn-accent);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	cursor: default;
}

/* The rate this one replaces: smaller, greyed and struck, so it reads as the
   number being crossed off rather than a second price on offer. */
.mn-row__was {
	color: var(--mn-gray-500);
	font-size: 11px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

/* How a charged extra is counted — per traveller, once per booking, or each. */
.mn-row__per {
	color: var(--mn-gray-500);
	font-size: 11px;
	white-space: nowrap;
}

/*
 * A yes/no extra. Same card as everything else in the list, so the column reads
 * as one set of choices — only the control at the end differs, and the whole
 * card answers rather than the box alone.
 */
.mn-row--choice {
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.mn-row--choice:hover {
	border-color: var(--mn-gray-400);
}

.mn-row__check {
	display: grid;
	place-items: center;
	/* The stepper's footprint, so the controls line up down the column even
	   though one is a box and the others are a bar. */
	width: 44px;
	height: 44px;
	flex: none;
}

.mn-row__check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mn-row__box {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius-sm);
	background: var(--mn-surface);
	color: transparent;
	transition: background .12s, border-color .12s, color .12s;
}

.mn-row--choice:has(input:checked) {
	border-color: var(--mn-gold);
	background: var(--mn-gold-tint);
}

.mn-row--choice:has(input:checked) .mn-row__box {
	border-color: var(--mn-gold);
	background: var(--mn-gold);
	color: var(--mn-surface);
}

.mn-row--choice:has(input:focus-visible) .mn-row__box {
	outline: 2px solid var(--mn-gold);
	outline-offset: 2px;
}

/* The rows sole use closes off. Legible, but plainly not on offer. */
.mn-row.is-locked {
	opacity: 0.45;
}

/* A note on the card rather than a second price: sole use applies to one
   traveller in three, and two rates on every card reads as a choice everyone
   has to make. */
.mn-roomcard__info {
	position: relative;
	display: inline-flex;
	align-self: flex-start;
	margin-left: auto;
	color: var(--mn-gray-500);
	cursor: help;
}

.mn-roomcard__info:hover,
.mn-roomcard__info:focus-visible {
	color: var(--mn-accent);
}

.mn-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	right: -4px;
	z-index: 3;
	width: max-content;
	max-width: 220px;
	padding: 8px 10px;
	border-radius: var(--mn-radius-sm);
	background: var(--mn-gray-900);
	color: var(--mn-surface);
	font-size: var(--mn-size-xs);
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	box-shadow: var(--mn-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s;
}

.mn-roomcard__info:hover .mn-tip,
.mn-roomcard__info:focus-visible .mn-tip {
	opacity: 1;
	visibility: visible;
}

/*
 * The occupancy choice. Two alternatives, so two radio cards rather than a tick
 * box — a tick box reads as "and also", and these are "either, or". Asked ahead
 * of the counts, because it decides what they may be.
 *
 * Side by side, so the two are compared rather than read in sequence. They fall
 * back to stacking where a column would be too narrow to hold a price.
 *
 * Gold, not the green accent: green marks the room tabs above, and reusing it
 * here would make two unrelated choices look like one.
 */
.mn-occupancy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--mn-gap);
	margin-bottom: var(--mn-gap-lg);
}

.mn-occupancy__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mn-gap);
	padding: 14px;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.mn-occupancy__card:hover {
	border-color: var(--mn-gold);
}

/*
 * Selected, but quietly. This choice sits below the room tabs and is subordinate
 * to them, so it cannot be the loudest thing on the panel: a faint tint and a
 * single gold edge, where a filled card and a double ring made it read as the
 * more important of the two.
 */
.mn-occupancy__card.is-current {
	border-color: var(--mn-gold);
	background: var(--mn-gold-tint);
}

.mn-occupancy__card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mn-occupancy__mark {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1px solid var(--mn-gray-400);
	border-radius: 50%;
	background: var(--mn-surface);
}

.mn-occupancy__card.is-current .mn-occupancy__mark {
	border-color: var(--mn-gold);
	border-width: 5px;
}

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

/*
 * The card not chosen recedes — label, detail and price together. Greying only
 * the border left an unselected option reading as loud as the selected one, so
 * the pair looked like two answers rather than one.
 */
.mn-occupancy__label {
	color: var(--mn-gray-500);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-occupancy__meta {
	color: var(--mn-gray-400);
	font-size: var(--mn-size-xs);
	line-height: 1.35;
}

.mn-occupancy__price {
	margin-top: 4px;
	color: var(--mn-gray-500);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-occupancy__card.is-current .mn-occupancy__label {
	color: var(--mn-ink);
}

.mn-occupancy__card.is-current .mn-occupancy__meta {
	color: var(--mn-gray-600);
}

.mn-occupancy__card.is-current .mn-occupancy__price {
	color: var(--mn-gold-hover);
}


/* Why the total is what it is, when one traveller has the room to themselves. */
.mn-total__note {
	margin-top: 2px;
	color: var(--mn-accent);
	font-size: var(--mn-size-xs);
	font-weight: 500;
}

.mn-total__note[hidden] {
	display: none;
}

/* -------------------------------------------------------------------- CTA */

.mn-cta {
	display: block;
	width: 100%;
	margin-top: var(--mn-gap-xl);
	/* Sized to be pressed, not to be the loudest thing on the page. */
	padding: 15px var(--mn-pad);
	background-color: var(--mn-gold);
	/* A top-light, bottom-shade wash: the button reads as a surface, not a swatch. */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06));
	border: 0;
	border-radius: var(--mn-radius);
	/*
	 * A highlight across the face and the site's own neutral shadow beneath.
	 * Tinted gold the shadow read as a glow, which made the button hover above
	 * a page whose cards sit flat; grey, it is the same lift every other raised
	 * surface here uses.
	 */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		var(--mn-shadow-sm);
	color: var(--mn-surface);
	font-size: var(--mn-size-cta);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		box-shadow 180ms ease,
		transform 120ms ease;
}

/* Rises to meet the pointer. */
.mn-cta:hover {
	background-color: var(--mn-gold-hover);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		var(--mn-shadow-lift);
	transform: translateY(-1px);
}

/* And presses in — the travel is what makes it feel like a button at all. */
.mn-cta:active {
	box-shadow: inset 0 2px 5px rgba(92, 62, 20, 0.3);
	transform: translateY(1px);
}

.mn-cta:focus-visible {
	outline: 2px solid var(--mn-gold);
	outline-offset: 3px;
}

/* Nothing to press means nothing to lift. */
/*
 * `.mn-cta:hover` is two classes and this was one, so hovering a sold-out
 * button turned it gold — the page inviting a press it would refuse. Stated on
 * the hover and active states as well, it stays exactly as it is.
 */
.mn-cta--disabled,
.mn-cta--disabled:hover,
.mn-cta--disabled:active {
	background-color: var(--mn-gray-100);
	background-image: none;
	border: 1px solid var(--mn-gray-200);
	box-shadow: none;
	color: var(--mn-gray-500);
	cursor: not-allowed;
	transform: none;
}

/*
 * The quiet twin of the call to action above it: same width and shape so the
 * pair reads as one block, no fill so there is never a question which of the
 * two the page wants. It had no styling at all and rendered as a raw browser
 * button under a finished one.
 */
.mn-save {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: 10px;
	padding: 12px var(--mn-pad);
	background: none;
	border: 1px solid var(--mn-gray-300);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow-sm);
	color: var(--mn-ink);
	font-size: var(--mn-size-small);
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 120ms ease;
}

.mn-save:hover {
	background: var(--mn-gray-50);
	border-color: var(--mn-gray-400);
	box-shadow: var(--mn-shadow-lift);
	transform: translateY(-1px);
}

.mn-save:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.07);
	transform: translateY(1px);
}

.mn-save:focus-visible {
	outline: 2px solid var(--mn-gold);
	outline-offset: 3px;
}

.mn-save svg {
	flex: none;
	color: var(--mn-gray-500);
	transition: color 160ms ease;
}

.mn-save:hover svg {
	color: var(--mn-gold);
}

/*
 * Said before the controls rather than after them. It carries the weight the
 * booking panel underneath it has lost: a soft tinted box read as a note about
 * the page, where this reads as the state of it.
 */
.mn-gone {
	margin-bottom: var(--mn-gap-lg);
	padding: var(--mn-pad);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow);
}

/* The same mark the card in the listing wears, so the two agree. */
.mn-gone__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 14px;
	border-radius: var(--mn-radius-pill);
	background: var(--mn-ink);
	color: var(--mn-surface);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.mn-gone__title {
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-gone__hint {
	margin-top: 8px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
	line-height: 1.7;
}

/*
 * The page's own call to action, since with the booking panel dead this is the
 * only thing left worth pressing. Same wash, same highlight, same lift.
 */
.mn-gone__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--mn-gap-lg);
	padding: 13px 24px;
	border: 0;
	border-radius: var(--mn-radius);
	background-color: var(--mn-gold);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		var(--mn-shadow-sm);
	color: var(--mn-surface);
	font-size: var(--mn-size-small);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 180ms ease,
		box-shadow 180ms ease,
		transform 120ms ease;
}

.mn-gone__action svg {
	flex: none;
	transition: transform 200ms ease;
}

.mn-gone__action:hover {
	background-color: var(--mn-gold-hover);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		var(--mn-shadow-lift);
	transform: translateY(-1px);
}

.mn-gone__action:hover svg {
	transform: translateX(3px);
}

.mn-gone__action:active {
	box-shadow: inset 0 2px 5px rgba(92, 62, 20, 0.3);
	transform: translateY(1px);
}

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

	.mn-gone__action,
	.mn-gone__action:hover,
	.mn-gone__action:hover svg {
		transition: none;
		transform: none;
	}
}

/*
 * The panel itself, once it is inert. Dimmed so it reads as a record of what
 * was on offer rather than a form waiting to be filled in.
 */
.mn-config.is-gone {
	opacity: 0.55;
	filter: grayscale(0.85);
}

.mn-config__error {
	margin-top: var(--mn-gap);
	color: var(--mn-gold-hover);
	font-size: var(--mn-size-small);
	text-align: center;
}

/* ------------------------------------------------------------- Narrow view */

@media (min-width: 1340px) {
	:root {
		--mn-gutter: 70px;
	}
}

@media (max-width: 1023px) {
	.mn-package__grid {
		/* minmax(0, …) again: a plain 1fr takes its content as its minimum, and
		   a scrolling track full of logos has a very wide one. */
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mn-gap-xl);
	}

}

@media (max-width: 767px) {
	:root {
		--mn-size-display: 28px;
		--mn-size-price: 26px;
		--mn-size-heading: 20px;
		--mn-pad: 16px;
	}

	.mn-header__inner {
		flex-wrap: wrap;
		gap: var(--mn-gap);
	}

	.mn-nav__list {
		gap: 14px;
		font-size: var(--mn-size-small);
	}

	/*
	 * Taller, not shorter. On a phone the hero is the whole first screen rather
	 * than a band above the fold, and a photograph of the Haram given 200px of
	 * a 700px screen reads as a header image instead of as the place you are
	 * going. Its two halves stack, both aligned left: a price pushed right
	 * under a left-aligned title reads as a stray column.
	 */
	.mn-banner {
		min-height: 70svh;
		padding-block: 110px 30px;
	}

	.mn-banner__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.mn-banner__aside {
		align-items: flex-start;
		text-align: left;
	}

	.mn-banner__title {
		font-size: var(--mn-size-display);
	}

	.mn-legs,
	.mn-rooms {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The stepper stays on the row with its label rather than wrapping under it.
	 * Wrapping was decided per row by how long the description happened to be,
	 * so one row kept its control on the right while the next dropped it to the
	 * left — the same control in two places down one list.
	 */
	.mn-row {
		flex-wrap: nowrap;
		gap: var(--mn-gap);
		padding: 14px;
	}

	.mn-row__body {
		min-width: 0;
	}

	.mn-stepper {
		flex: none;
	}

	.mn-config__panel {
		padding: 14px;
	}

	.mn-config__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.mn-total {
		text-align: left;
	}

	.mn-package__grid {
		padding-block: 26px 50px;
	}

	.mn-overview {
		gap: 20px;
	}

	.mn-overview>.mn-block+.mn-block {
		padding-top: 20px;
	}
}

/* ------------------------------------------------------------- Hotel photos */

/*
 * A quiet link, not a badge. The pills on this page all state a fact the
 * package promises; this one offers to open something, and dressing it the
 * same made it shout over the hotel it belongs to. It sits in the same
 * register as the line above it and only colours on hover.
 */
.mn-hotel__photos {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mn-ink-50);
	font-size: 12px;
	cursor: pointer;
}

.mn-hotel__photos .mn-icon {
	color: var(--mn-gold);
}

.mn-hotel__photos:hover {
	color: var(--mn-gold);
}

/* ---------------------------------------------------------------- Lightbox */

.mn-lightbox {
	width: min(980px, 94vw);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	overflow: hidden;
	background: var(--mn-surface);
	border: 0;
	border-radius: 14px;
	box-shadow: var(--mn-shadow-lift);
}

/* The browser rings the dialog itself when it opens. Focus belongs on the
   controls inside, which have rings of their own. */
.mn-lightbox:focus,
.mn-lightbox:focus-visible {
	outline: none;
}

.mn-lightbox::backdrop {
	background: rgba(20, 15, 10, 0.78);
}

.mn-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap);
	padding: 14px 16px;
}

.mn-lightbox__title {
	font-size: var(--mn-size-small);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-lightbox__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--mn-ink-50);
	cursor: pointer;
}

.mn-lightbox__close:hover {
	background: var(--mn-canvas);
	color: var(--mn-ink);
}

/*
 * The photograph is the subject, so it gets the room and a dark surround —
 * whatever its shape, it sits on something rather than against white.
 */
.mn-lightbox__stage {
	position: relative;
	display: grid;
	place-items: center;
	background: #16110c;
}

.mn-lightbox__stage img {
	display: block;
	width: 100%;
	max-height: calc(92vh - 110px);
	object-fit: contain;
}

/* The controls ride the picture rather than taking a row under it: a strip of
   chrome below the image competes with the image for the same attention. */
.mn-lightbox__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--mn-shadow);
	color: var(--mn-ink);
	cursor: pointer;
	transform: translateY(-50%);
}

.mn-lightbox__nav:hover {
	background: var(--mn-surface);
	color: var(--mn-gold);
}

.mn-lightbox__nav--prev {
	left: 14px;
}

.mn-lightbox__nav--next {
	right: 14px;
}

.mn-lightbox__nav[hidden] {
	display: none;
}

.mn-lightbox__count {
	position: absolute;
	bottom: 14px;
	left: 50%;
	padding: 4px 12px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-surface);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

@media (max-width: 767px) {
	.mn-lightbox {
		width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}

	.mn-lightbox__nav {
		width: 34px;
		height: 34px;
	}

	.mn-lightbox__nav--prev {
		left: 8px;
	}

	.mn-lightbox__nav--next {
		right: 8px;
	}
}

/*
 * A row explains its own ceiling rather than leaving a dead button to do it —
 * and says it loudly enough to be read. As a grey-gold line under the
 * description it looked like more description.
 */
.mn-row__note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 3px 8px;
	background: var(--mn-gold-soft);
	border-radius: var(--mn-radius-sm);
	color: var(--mn-gold-hover);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
}

.mn-row__note::before {
	width: 13px;
	height: 13px;
	flex: none;
	background-color: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mn-row__note[hidden] {
	display: none;
}

/* Every pill at once: the same pills, wrapping instead of scrolling. */
.mn-features--stacked {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * A traveller this room cannot take in the current configuration. Dimmed
 * rather than hidden: it still says what the room could hold if the party
 * were arranged differently, which is the thing worth knowing.
 */
.mn-row.is-unavailable {
	opacity: 0.45;
}

/* ------------------------------------------------------------------ Checkout */

.mn-checkout {
	padding-block: 50px 80px;
}

/* Over the form, so it introduces the thing underneath it. */
.mn-checkout__aside>.mn-checkout__head {
	margin-bottom: var(--mn-gap-lg);
}

.mn-checkout__head {
	margin-bottom: var(--mn-gap-xl);
}

.mn-checkout__title {
	font-size: var(--mn-size-display);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-display);
}

.mn-checkout__lead {
	margin-top: 6px;
	color: var(--mn-ink-50);
}

/*
 * No halves when there is nothing to put in them: a lapsed booking is one
 * sentence, and the split framed it as a page half missing. White, because
 * that is the side this page would have stood on. Compound, so it wins
 * wherever it sits relative to the rule it overrides.
 */
.mn-checkout.mn-checkout--plain {
	background: var(--mn-surface);
}

/* Centred, and otherwise exactly what it was. */
.mn-checkout__lapsed {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 34rem;
	margin-inline: auto;
	padding-block: 72px 96px;
	text-align: center;
}

.mn-checkout__lapsed .mn-empty__mark {
	margin-bottom: var(--mn-gap-lg);
	background: var(--mn-canvas);
	border-color: var(--mn-gray-200);
}

.mn-checkout__lapsed .mn-checkout__lead {
	margin-bottom: var(--mn-gap-lg);
}

/* The call to action is a block by default; here it is one thing on a line. */
.mn-checkout__lapsed .mn-cta {
	width: auto;
	margin-top: 0;
	padding-inline: 32px;
}

/*
 * The decisions on the left, what they cost on the right — the same division
 * the package page makes, so the second screen reads as the same site.
 */
/*
 * Half the screen in white, half on the page's own sand — the split drawn by
 * the background rather than by a box, so it runs to both edges however wide
 * the window is. What is being bought stands on the white; what is being filled
 * in and pressed stands on the canvas, in cards, as everywhere else on the site.
 */
.mn-checkout {
	background: linear-gradient(to right, var(--mn-surface) 0 50%, var(--mn-canvas) 50% 100%);
	padding-bottom: 100px;
}

/*
 * The footer stands off the page by 100px everywhere else; here that gap let a
 * band of canvas across the bottom of the white half, which read as the split
 * stopping short. The checkout carries the space itself instead.
 */
.mn-main:has(.mn-checkout)+.mn-footer {
	margin-top: 0;
}

.mn-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--mn-column-gap);
	align-items: start;
}

/* ------------------------------------------------------------ Trip sections */

/*
 * Each section folds. Open beside the form on a desktop, where both fit at
 * once; closed on a phone, where the same sections put two screens of receipt
 * between somebody and the field they came to fill in.
 */
/*
 * The same space above and below, so the rule between two sections sits in the
 * middle of the gap rather than closer to whichever section drew it.
 */
.mn-fold {
	padding-block: 26px;
	border-top: 1px solid var(--mn-gray-200);
}

.mn-fold__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap);
	cursor: pointer;
	list-style: none;
}

.mn-fold__head::-webkit-details-marker {
	display: none;
}

/*
 * A real heading, not a caption. Set in 11px grey uppercase these read as
 * labels on the rows beneath them, and the column had no structure at all —
 * three whispers and a package name.
 */
.mn-fold__title {
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-fold__head svg {
	flex: none;
	color: var(--mn-gray-400);
	transition: transform 200ms ease, color 160ms ease;
}

.mn-fold__head:hover svg {
	color: var(--mn-ink);
}

.mn-fold[open] .mn-fold__head svg {
	transform: rotate(90deg);
}

/* --------------------------------------------------------- Back to the trip */

/*
 * A control rather than a line of underlined text: this is the way out of the
 * checkout, and it should look like something you press by mistake as rarely
 * as you press it on purpose.
 */
.mn-back {
	display: inline-flex;
	/* Its parent is a flex column, which stretched it the full width. */
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding: 8px 14px 8px 11px;
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-pill);
	color: var(--mn-gray-700);
	font-size: var(--mn-size-small);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.mn-back svg {
	flex: none;
	transition: transform 200ms ease;
}

.mn-back:hover {
	border-color: var(--mn-gold);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

/* The arrow leads the way it points. */
.mn-back:hover svg {
	transform: translateX(-3px);
}

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

	.mn-back svg,
	.mn-back:hover svg,
	.mn-fold__head svg {
		transition: none;
		transform: none;
	}
}

/* The trip: the same blocks the package page uses, in the same order. */

/*
 * No card. It sits on the white half already, and a white panel on a white
 * ground is an outline drawn for its own sake.
 */
.mn-checkout__trip {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-right: var(--mn-gap-xl);
}

/* The first block has no fold above it, so it carries its own space. */
.mn-checkout__trip>.mn-block {
	padding-bottom: 26px;
}

/* Room between a heading and what it heads, only when there is something. */
.mn-fold[open] .mn-fold__head {
	margin-bottom: 18px;
}

/*
 * Not a control on a wide screen: the summary keeps the heading and loses the
 * chevron, the pointer and the toggle. See checkout.js.
 */
.mn-fold.is-static {
	padding-bottom: 0;
}

.mn-fold.is-static .mn-fold__head {
	cursor: default;
}

.mn-fold.is-static .mn-fold__head svg {
	display: none;
}

.mn-checkout__package {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-checkout__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 4px;
	color: var(--mn-gray-700);
	font-size: var(--mn-size-small);
}

.mn-checkout__nights {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

.mn-checkout__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mn-gap);
	margin-top: var(--mn-gap);
	padding-top: var(--mn-gap);
	border-top: 1px solid var(--mn-line);
	font-size: var(--mn-size-lg);
}

.mn-checkout__total strong {
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/*
 * The trip stated as facts: a label and its answer, in the same rhythm as the
 * priced lines above. Not the package page's cards and pills — this is a
 * receipt to check, and those components invite a second round of shopping at
 * the moment of paying.
 */
.mn-facts {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mn-facts__line {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: var(--mn-gap);
	align-items: baseline;
	font-size: var(--mn-size-small);
}

.mn-facts__label {
	color: var(--mn-gray-500);
}

.mn-facts__value {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--mn-gray-800);
}

/* One per line, so a list of seven hotels is a list and not a paragraph. */
.mn-facts__item {
	line-height: 1.55;
}

@media (max-width: 560px) {
	.mn-facts__line {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* What the children's rates came to, said once rather than per line. */
.mn-checkout__saved {
	margin-top: 6px;
	color: var(--mn-accent);
	font-size: var(--mn-size-xs);
	font-weight: 500;
}

.mn-summary__saving {
	margin-left: 6px;
	padding: 4px 7px;
	border-radius: var(--mn-radius-pill);
	background: var(--mn-accent-soft);
	color: var(--mn-accent);
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.mn-checkout__form {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap-lg);
	min-width: 0;
}

.mn-checkout__panel {
	padding: var(--mn-pad);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow);
}

.mn-checkout__panel-title {
	margin-bottom: var(--mn-gap);
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-checkout__alert,
.mn-config__alert {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--mn-gap-lg);
	padding: 12px 14px;
	border-radius: var(--mn-radius);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
	font-size: var(--mn-size-small);
}

.mn-checkout__alert svg,
.mn-config__alert svg {
	flex: none;
}

/* --------------------------------------------------------- Checkout fields */

.mn-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--mn-gap);
	align-items: start;
}

/*
 * Only between the panel's own rows. Written as a plain sibling rule it also
 * matched the two fields inside the name grid, pushing the second one half a
 * line below the first.
 */
.mn-checkout__panel>.mn-field+.mn-field,
.mn-checkout__panel>.mn-fields+.mn-field,
.mn-checkout__panel>.mn-field+.mn-fields {
	margin-top: var(--mn-gap);
}

.mn-salutation {
	margin: 0 0 var(--mn-gap);
	padding: 0;
	border: 0;
}

.mn-radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mn-gap-lg);
	margin-top: 6px;
}

.mn-radio {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--mn-size-small);
	cursor: pointer;
}

.mn-radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mn-radio__mark {
	width: 17px;
	height: 17px;
	border: 1px solid var(--mn-gray-400);
	border-radius: 50%;
	background: var(--mn-surface);
	transition: border-color .12s, border-width .12s;
}

.mn-radio input:checked+.mn-radio__mark {
	border-color: var(--mn-gold);
	border-width: 5px;
}

.mn-radio input:focus-visible+.mn-radio__mark {
	outline: 2px solid var(--mn-gold);
	outline-offset: 2px;
}

/*
 * A link in running text: underlined, because in a paragraph there is nothing
 * else to say it is one — unlike the links in the footer or the nav, which have
 * position to say it for them.
 */
.mn-inline-link {
	color: var(--mn-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--mn-gray-300);
	transition: text-decoration-color 160ms ease, color 160ms ease;
}

.mn-inline-link:hover {
	color: var(--mn-gold-hover);
	text-decoration-color: var(--mn-gold);
}

/* The word beside a radio, which is the whole target. */
.mn-radio__label {
	font-size: var(--mn-size-small);
}

.mn-phone {
	display: flex;
	gap: 6px;
}

.mn-phone select {
	height: 44px;
	padding: 0 30px 0 12px;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius);
	background-color: var(--mn-surface);
	/* The same drawn chevron the listing's selects use, so the two agree. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 9px center;
	background-repeat: no-repeat;
	background-size: 15px;
	appearance: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
}

.mn-phone input {
	flex: 1;
	min-width: 0;
}

.mn-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.mn-field__label {
	font-size: var(--mn-size-small);
	font-weight: 500;
}

/*
 * Text-like fields only. A radio or checkbox inside a field is taken out of
 * the flow so its themed mark can stand in for it — and `width: 100%` on an
 * absolutely positioned element resolves against the page, not the label, so
 * each hidden radio grew to the width of the viewport and pushed the document
 * sideways.
 */
.mn-field input:not([type="radio"]):not([type="checkbox"]) {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
}

.mn-field input:focus-visible {
	outline: 2px solid var(--mn-gold);
	outline-offset: 1px;
}

/*
 * Only once they have tried. `:invalid` matches an empty required field from
 * the moment it renders, and `:not(:placeholder-shown)` does not save it —
 * that matches when there is no placeholder at all — so every field opened
 * looking like a mistake had already been made.
 */
.mn-field input:user-invalid {
	border-color: var(--mn-danger);
}

.mn-field__hint {
	color: var(--mn-gray-600);
	font-size: 11px;
}

/* -------------------------------------------------------- Paying, and how */

.mn-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mn-gap);
	margin-bottom: var(--mn-gap-lg);
}

.mn-method,
.mn-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mn-gap);
	padding: 14px;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.mn-method:hover,
.mn-choice:hover {
	border-color: var(--mn-gold);
}

.mn-method.is-current,
.mn-choice.is-current,
.mn-method:has(>input:checked),
.mn-choice:has(>input:checked) {
	border-color: var(--mn-gold);
	background: var(--mn-gold-tint);
}

.mn-method>input,
.mn-choice>input,
.mn-amount input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/*
 * A method identifies itself: iDEAL by its mark, the office by a note of cash.
 * A radio beside either is a second thing saying the same thing, and the
 * chosen card already says so with its border and tint.
 */
.mn-method__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 26px;
	color: var(--mn-gray-600);
}

.mn-method.is-current .mn-method__icon {
	color: var(--mn-gold-hover);
}

.mn-choice__mark {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1px solid var(--mn-gray-400);
	border-radius: 50%;
	background: var(--mn-surface);
}

.mn-choice.is-current .mn-choice__mark {
	border-color: var(--mn-gold);
	border-width: 5px;
}

.mn-method__body,
.mn-choice__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mn-method__label,
.mn-choice__label {
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-method__meta,
.mn-choice__meta {
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
	line-height: 1.35;
}

/*
 * The amounts, as buttons rather than cards: they are one short figure each,
 * and a card apiece would give a row of prices the weight of a decision that
 * has already been framed above them.
 */
.mn-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.mn-amount {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 96px;
	padding: 10px 14px;
	text-align: center;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	font-size: var(--mn-size-small);
	font-weight: 500;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.mn-amount:hover {
	border-color: var(--mn-gold);
}

.mn-amount.is-current {
	border-color: var(--mn-gold);
	background: var(--mn-gold-tint);
	color: var(--mn-gold-hover);
}

.mn-amount input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/*
 * The share, which is what is being chosen between — "25%", "half", "in full".
 * Set at the same size as the euros beneath it, the two read as one line of
 * detail and the choice disappeared into it.
 */
.mn-amount__label {
	font-size: var(--mn-size-base);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	line-height: 1.2;
}

/* What that share comes to, in money. */
.mn-amount__sub {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	font-weight: 400;
}

.mn-amount.is-current .mn-amount__sub {
	color: var(--mn-gold-hover);
	opacity: 0.85;
}

.mn-amount--own {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	width: 100%;
}

.mn-amount__pencil {
	display: inline-flex;
	color: var(--mn-gold-hover);
}

.mn-amount__pencil[hidden] {
	display: none;
}

.mn-amount--typed {
	width: 100%;
	justify-content: space-between;
}

.mn-amount--typed input[type="text"] {
	width: 96px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius-sm);
	background: var(--mn-surface);
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-xs);
	text-align: right;
}

.mn-amount--typed input[type="text"]::placeholder {
	color: var(--mn-gray-400);
}

.mn-checkout__terms {
	margin-top: var(--mn-gap-lg);
}

/* --------------------------------------------------------- What it costs */

.mn-checkout__aside {
	min-width: 0;
}

/*
 * Whichever column runs out first stays put while the other reads on.
 *
 * Both are pinned rather than one, because which is taller depends on the
 * booking: a party of six with extras outruns the form, a single traveller
 * does not. A grid item can only stick within its own track, so the taller
 * column fills its track and never lifts — the shorter one pins by itself,
 * with no measuring and no script.
 *
 * Held back on short viewports for the reason the package page holds it back:
 * a pinned column taller than the screen hides its own bottom, and the bottom
 * here is the button that finishes the booking.
 */
@media (min-width: 1024px) and (min-height: 720px) {

	.mn-checkout__trip,
	.mn-checkout__aside {
		position: sticky;
		top: var(--mn-pad);
	}
}

.mn-method--cash {
	margin-top: var(--mn-gap-lg);
}

.mn-method {
	align-items: center;
}

/* The room this was booked in, and the divide between it and what was added. */
/* The room, and later "Extras": the heading each group of prices belongs to. */
.mn-checkout__room {
	margin-top: var(--mn-gap);
	color: var(--mn-gray-500);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mn-checkout__room--extras {
	margin-top: var(--mn-gap-lg);
	padding-top: var(--mn-gap-lg);
	border-top: 1px solid var(--mn-line);
}

.mn-summary+.mn-checkout__room {
	margin-top: var(--mn-gap-lg);
}

/*
 * Subtotal, what came off it, and what is left. The children's rates are
 * already reduced, so the reduction is invisible unless the figure it came off
 * is shown beside it.
 */
/* One rule before the total, drawn by the total line itself. */
/*
 * The subtotal and the discount are lines in the same list as the prices above
 * them — arithmetic on those numbers, not a new section — so they keep the same
 * rhythm. Only the total steps away, behind its rule.
 */
.mn-totals {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mn-gray-200);
}

/*
 * Heavier than the lines they sum. At the same weight the subtotal read as one
 * more extra rather than as arithmetic on the list above it.
 */
.mn-totals__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mn-gap);
	font-size: var(--mn-size-small);
	font-weight: 500;
}



/* Lost when the stylesheet was cut: without it the totals ran into each other. */
.mn-totals__line+.mn-totals__line {
	margin-top: 11px;
}

.mn-totals__line dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* What comes off the price, in the colour a price comes off in. */
.mn-totals__line--saved {
	color: var(--mn-sale);
}

/*
 * Named through its parent so it outranks the rule spacing the lines above:
 * two classes beat one, and without that the total sat inside the list it sums.
 */
.mn-totals .mn-totals__line--total {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mn-gray-200);
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

/* The gateway's own mark, beside its name and at its own proportions. */
.mn-method__logo {
	flex: none;
	width: auto;
	height: 26px;
	margin-top: 1px;
}

/*
 * The amount someone writes themselves, asked for only once they have said
 * they want to. A field sitting open beside the presets reads as a fifth
 * preset, and an empty one looks unanswered.
 */
/*
 * No card of its own. It belongs to the pill above it, and a bordered, tinted
 * panel made a single question look like a second section.
 */
.mn-typed {
	margin-top: var(--mn-gap);
}

.mn-typed__question {
	display: block;
	margin-bottom: 6px;
	font-size: var(--mn-size-small);
	font-weight: 500;
}

/* The field and its button as one control: the button acts on what is in it. */
.mn-typed__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--mn-line-strong);
	border-radius: var(--mn-radius);
	background: var(--mn-surface);
	overflow: hidden;
}

.mn-typed__control:focus-within {
	border-color: var(--mn-gold);
}

.mn-typed__hint {
	margin-top: 6px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
}

.mn-typed[hidden] {
	display: none;
}

.mn-typed__input {
	position: relative;
	display: block;
}

.mn-typed__currency {
	display: grid;
	place-items: center;
	padding-left: 13px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
}

/* Filled, because it is the one thing here that acts. */
.mn-typed__apply {
	flex: none;
	padding: 0 16px;
	border: 0;
	background: var(--mn-gold);
	color: var(--mn-surface);
	font-size: var(--mn-size-small);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background .12s;
}

.mn-typed__apply:hover {
	background: var(--mn-gold-hover);
}

.mn-typed__error {
	margin-top: 8px;
	color: var(--mn-danger);
	font-size: var(--mn-size-xs);
}

.mn-typed__error[hidden] {
	display: none;
}

.mn-typed__control input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--mn-size-small);
	font-variant-numeric: tabular-nums;
}

.mn-typed__control input:focus {
	outline: none;
}

/* The deposit question, set below the method it belongs to. */
.mn-checkout__deposits {
	margin-top: var(--mn-gap-lg);
}

.mn-checkout__deposits .mn-field__label {
	display: block;
	margin-bottom: 2px;
}

.mn-checkout__terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: var(--mn-gap-lg);
	padding-top: var(--mn-gap-lg);
	border-top: 1px solid var(--mn-line);
}

/*
 * A fixed square. Inside a flex row the box was free to stretch with the two
 * lines of text beside it, which is how a checkbox ends up a rectangle.
 */
.mn-checkout__terms .mn-check__box {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.mn-checkout__terms .mn-check__label {
	font-size: var(--mn-size-small);
	font-weight: 400;
	line-height: 1.45;
	color: var(--mn-gray-700);
}

.mn-checkout__panel .mn-field__hint {
	margin-top: 4px;
}

/*
 * What is being charged today, set apart from what the trip costs. These are
 * two different numbers and a customer must never confuse them.
 */
.mn-checkout__due {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mn-gap);
	margin-top: var(--mn-gap-lg);
	padding-top: var(--mn-gap);
	border-top: 1px solid var(--mn-line);
}

.mn-checkout__due-label {
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-checkout__due-value {
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	white-space: nowrap;
}

.mn-checkout__balance {
	margin-top: 2px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
	text-align: right;
}

.mn-checkout__panel .mn-cta {
	width: 100%;
	margin-top: var(--mn-gap);
}

.mn-cta--inline {
	display: inline-block;
	text-decoration: none;
}

@media (max-width: 900px) {
	.mn-checkout {
		background: var(--mn-canvas);
	}

	.mn-checkout__grid {
		grid-template-columns: 1fr;
		gap: var(--mn-gap-xl);
	}

	/* Stacked, it becomes a card again — there is no white half to stand on. */
	.mn-checkout__trip {
		padding: var(--mn-pad);
		border: 1px solid var(--mn-gray-200);
		border-radius: var(--mn-radius-lg);
		background: var(--mn-surface);
		box-shadow: var(--mn-shadow);
	}

	.mn-checkout__aside {
		position: static;
	}
}

/* A count beside the menu, so saving has somewhere visible to land. */
.mn-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/*
 * A hairline between the menu and the controls: they are different kinds of
 * thing, and the gap alone was not saying so.
 */
.mn-header__actions::before {
	content: "";
	align-self: center;
	width: 1px;
	height: 20px;
	margin-right: 10px;
	background: currentColor;
	opacity: 0.16;
}

/* --------------------------------------------------------------- Language */

.mn-lang__static,
.mn-lang__list {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--mn-size-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.mn-lang__static {
	padding: 0 6px;
	opacity: 0.7;
}

.mn-lang__static svg {
	flex: none;
}

.mn-lang__option {
	display: block;
	padding: 5px 8px;
	border-radius: var(--mn-radius-sm);
	color: inherit;
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 160ms ease, background-color 160ms ease;
}

.mn-lang__option:hover {
	opacity: 1;
}

.mn-lang__option.is-current {
	opacity: 1;
	font-weight: 600;
}

/*
 * An icon and a number. These are places to return to rather than things to
 * read, and two labelled pills beside a four-item menu made the header look
 * like it had six destinations. The words survive for screen readers and in
 * the tooltip.
 */
.mn-iconlink {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mn-radius-pill);
	color: inherit;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.mn-iconlink:hover {
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
}

.mn-header--over .mn-iconlink:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--mn-surface);
}

/*
 * Pinned to the icon rather than set beside it: a count that reflows the row
 * every time it changes makes the header twitch as trips are saved.
 */
.mn-iconlink__count {
	position: absolute;
	top: 2px;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border: 2px solid var(--mn-canvas);
	border-radius: var(--mn-radius-pill);
	background: var(--mn-gold);
	color: var(--mn-surface);
	font-size: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Over a photograph there is no canvas to cut the badge out of. */
.mn-header--over .mn-iconlink__count {
	border-color: transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------------- Saved trips */

.mn-saved {
	padding-block: 50px 80px;
}

.mn-saved__empty {
	max-width: 34rem;
}

.mn-saved__head {
	margin-bottom: var(--mn-gap-xl);
}

.mn-saved__title {
	font-size: var(--mn-size-display);
	font-weight: 500;
	letter-spacing: var(--mn-tracking-display);
}

.mn-saved__lead {
	margin-top: 6px;
	color: var(--mn-ink-50);
}

.mn-saved__empty {
	padding: var(--mn-pad);
	background: var(--mn-surface);
	border-radius: var(--mn-radius);
	box-shadow: var(--mn-shadow);
}

.mn-saved__hint {
	margin-top: 4px;
	margin-bottom: var(--mn-gap-lg);
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
}

.mn-saved__list {
	display: flex;
	flex-direction: column;
	gap: var(--mn-gap);
}

/*
 * A body and a footer, not two columns. Two columns made the card as tall as
 * whichever side was longer and left the other side sitting in a pool of empty
 * white; a footer that spans the full width has no short side.
 */
.mn-saved__card {
	display: flex;
	flex-direction: column;
	background: var(--mn-surface);
	border: 1px solid var(--mn-gray-200);
	border-radius: var(--mn-radius-lg);
	box-shadow: var(--mn-shadow);
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mn-saved__card:hover {
	border-color: var(--mn-gray-300);
	box-shadow: var(--mn-shadow-lift);
	transform: translateY(-1px);
}

/* Holds hidden fields only; the buttons that submit it live in the footer. */
.mn-saved__form {
	display: none;
}

.mn-saved__main {
	display: flex;
	align-items: flex-start;
	gap: var(--mn-gap-lg);
	padding: var(--mn-pad);
}

.mn-saved__thumb {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: var(--mn-radius);
	background-color: var(--mn-gray-200);
	background-position: center;
	background-size: cover;
}

.mn-saved__body {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-saved__package {
	font-size: var(--mn-size-lg);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
}

.mn-saved__package a {
	text-decoration: none;
	transition: color 160ms ease;
}

.mn-saved__package a:hover {
	color: var(--mn-gold);
}

.mn-saved__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 7px;
	color: var(--mn-gray-600);
	font-size: var(--mn-size-small);
}

.mn-saved__leg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.mn-saved__leg svg {
	flex: none;
	color: var(--mn-gold);
}

.mn-saved__leg-date {
	color: var(--mn-ink);
}

/*
 * Drawn rather than typed. A dash sits on the text baseline and reads as a
 * range; a line with a head sits at mid-height and reads as going somewhere.
 */
.mn-saved__arrow {
	position: relative;
	flex: none;
	width: 26px;
	height: 1px;
	margin: 0 2px;
	background: var(--mn-gray-300);
}

.mn-saved__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 5px;
	height: 5px;
	border-top: 1px solid var(--mn-gray-300);
	border-right: 1px solid var(--mn-gray-300);
	transform: translateY(-50%) rotate(45deg);
}

.mn-saved__days {
	position: relative;
	margin-left: 6px;
	padding-left: 16px;
	color: var(--mn-ink);
	font-weight: 600;
}

/* A hairline, not a dot: it divides the journey from how long it takes. */
.mn-saved__days::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 12px;
	background: var(--mn-gray-300);
	transform: translateY(-50%);
}

/*
 * The room is the one choice that changes what everything else costs, so it is
 * the one thing wearing a badge. Giving every answer a pill made three equal
 * shapes out of one decision and two consequences.
 */
.mn-saved__what {
	margin-top: 14px;
}

.mn-saved__badge {
	padding: 4px 12px;
	border: 1px solid rgba(196, 139, 58, 0.3);
	border-radius: var(--mn-radius-pill);
	background: var(--mn-gold-soft);
	color: var(--mn-gold-hover);
	font-size: var(--mn-size-xs);
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

/*
 * Two columns, so the labels share an edge and the answers share another. The
 * label column sizes to the widest of them, which keeps the pair aligned in
 * any language without a hardcoded width.
 */
.mn-saved__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	margin-top: 12px;
	color: var(--mn-gray-700);
	font-size: var(--mn-size-small);
}

.mn-saved__meta-label {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	letter-spacing: 0.06em;
	line-height: 1.9;
	text-transform: uppercase;
}

.mn-saved__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: none;
	gap: 1px;
	text-align: right;
}

.mn-saved__price-label {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mn-saved__price-value {
	font-size: var(--mn-size-heading);
	font-weight: 600;
	letter-spacing: var(--mn-tracking-tight);
	white-space: nowrap;
}

.mn-saved__price-note {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	white-space: nowrap;
}

/*
 * Closed by default. A list where every card is already open is not a list, and
 * <details> gets the open/close behaviour, the keyboard and the accessibility
 * for free — no script stands between someone and what they saved.
 */
.mn-saved__details {
	border-top: 1px solid var(--mn-gray-200);
}

.mn-saved__summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px var(--mn-pad);
	font-size: var(--mn-size-small);
	cursor: pointer;
	list-style: none;
	transition: background-color 160ms ease;
}

.mn-saved__summary::-webkit-details-marker {
	display: none;
}

.mn-saved__summary:hover {
	background: var(--mn-gray-50);
}

.mn-saved__summary-label {
	font-weight: 500;
}

.mn-saved__summary-hint {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mn-saved__summary svg {
	flex: none;
	align-self: center;
	color: var(--mn-gray-500);
	transition: transform 160ms ease;
}

.mn-saved__details[open] .mn-saved__summary svg {
	transform: rotate(90deg);
}

.mn-saved__panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mn-gap-lg);
	padding: 4px var(--mn-pad) var(--mn-pad);
}

.mn-saved__panel-title {
	margin-bottom: 10px;
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mn-saved__facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mn-saved__fact {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: var(--mn-size-small);
}

.mn-saved__fact-name {
	font-weight: 500;
}

.mn-saved__route {
	margin-left: 8px;
	color: var(--mn-gray-600);
	font-weight: 400;
}

.mn-saved__fact-meta {
	color: var(--mn-gray-600);
	font-size: var(--mn-size-xs);
}

.mn-saved__included {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.mn-saved__included-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--mn-size-small);
}

.mn-saved__included-item svg {
	flex: none;
	color: var(--mn-gold);
}

.mn-saved__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mn-gap);
	padding: 14px var(--mn-pad);
	border-top: 1px solid var(--mn-gray-200);
	background: var(--mn-gray-50);
}

.mn-saved__quiet {
	display: flex;
	align-items: center;
	gap: 18px;
}

/*
 * The base call to action is a full-width block, which is right at the foot of
 * a form and wrong beside other controls. This one sits in a row.
 */
.mn-cta--small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin-top: 0;
	padding: 11px 24px;
	font-size: var(--mn-size-small);
	white-space: nowrap;
}

/*
 * Edit and Remove post, so they are buttons, but they are not calls to action —
 * the one thing this page is for is booking. No underline: a permanent rule
 * under every quiet control turns a calm card into a page of hyperlinks.
 */
.mn-saved__link,
.mn-saved__remove {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	white-space: nowrap;
	background: none;
	border: 0;
	font-size: var(--mn-size-small);
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms ease;
}

.mn-saved__link svg,
.mn-saved__remove svg {
	flex: none;
	opacity: 0.7;
}

.mn-saved__link {
	color: var(--mn-gray-700);
}

.mn-saved__link:hover {
	color: var(--mn-ink);
}

.mn-saved__remove {
	color: var(--mn-gray-500);
}

.mn-saved__remove:hover {
	color: var(--mn-danger);
}

/*
 * In place rather than a browser dialog: the question belongs beside the thing
 * it is about, and an OS alert cannot say which trip it means.
 */
.mn-saved__confirming {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--mn-size-small);
}

.mn-saved__confirm-text {
	color: var(--mn-ink);
}

.mn-saved__confirm-yes,
.mn-saved__confirm-no {
	padding: 5px 12px;
	border-radius: var(--mn-radius-sm);
	border: 1px solid transparent;
	background: none;
	font-size: var(--mn-size-xs);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.mn-saved__confirm-yes {
	border-color: var(--mn-danger);
	color: var(--mn-danger);
}

.mn-saved__confirm-yes:hover {
	background: var(--mn-danger);
	color: var(--mn-surface);
}

.mn-saved__confirm-no {
	border-color: var(--mn-gray-300);
	color: var(--mn-gray-700);
}

.mn-saved__confirm-no:hover {
	background: var(--mn-gray-100);
}

/*
 * A favourite is the same card as a saved trip, which is deliberate: they are
 * two lists of the same kind of thing and should not look like two products.
 */
.mn-fav__card .mn-saved__main {
	align-items: center;
}

.mn-favourites__aside a {
	color: var(--mn-gray-700);
	text-decoration: none;
	border-bottom: 1px solid var(--mn-gray-300);
}

.mn-favourites__aside a:hover {
	color: var(--mn-ink);
	border-bottom-color: var(--mn-ink);
}

.mn-favourites__aside {
	margin-top: var(--mn-gap-xl);
}

@media (max-width: 700px) {
	.mn-saved__main {
		flex-wrap: wrap;
	}

	.mn-saved__body {
		flex-basis: 100%;
	}

	.mn-saved__price {
		align-items: flex-start;
		width: 100%;
		text-align: left;
	}

	.mn-saved__meta {
		grid-template-columns: 1fr;
		gap: 1px;
	}

	.mn-saved__meta-label {
		line-height: 1.6;
	}

	.mn-saved__meta-value:not(:last-child) {
		margin-bottom: 8px;
	}

	.mn-saved__panels {
		grid-template-columns: 1fr;
	}

	.mn-saved__foot {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 14px;
	}

	.mn-saved__foot .mn-cta--small {
		width: 100%;
	}

	.mn-saved__quiet {
		justify-content: space-between;
	}

}

/*
 * Depth without movement for anyone who asked for less of it. The shadows stay;
 * it is the travel that makes people ill, not the shading.
 */
@media (prefers-reduced-motion: reduce) {

	.mn-cta,
	.mn-cta:hover,
	.mn-cta:active,
	.mn-save,
	.mn-save:hover,
	.mn-save:active,
	.mn-saved__card,
	.mn-saved__card:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------- Odds and ends */

/* How far a hotel stands from the Haram — a fact, in the quiet of one. */
.mn-hotel__distance {
	color: var(--mn-gray-500);
	font-size: var(--mn-size-xs);
}

/* The caption over a sum, so the number underneath needs no sentence. */