/*
Theme Name: MHB Travel
Theme URI: https://mhbtravelservices.com/
Description: Design system child theme for MH Bland Travel Services. Inherits Twenty Twenty-Five and replaces its visual language with the MHB Travel brand: warm parchment canvas, refined serif headings, navy structural details, red conversion accents. Designed to host product pages driven by the MHB Travel Services plugin.
Author: Dev.gi
Author URI: https://dev.gi/
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mhb-travel
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, featured-images, full-site-editing, style-variations, threaded-comments, translation-ready, wide-blocks, holiday, blog
*/

/* ------------------------------------------------------------------
 * Notes
 * ------------------------------------------------------------------
 * Almost everything design-related lives in theme.json.
 * This stylesheet only handles details theme.json can't express:
 *   - the antique-gold hairline divider used between footer sections
 *   - the cream gradient overlay over hero images for text contrast
 *   - the small uppercase eyebrow label style
 *   - pill button shape used on the duration selector
 * Keep this file lean. If a rule belongs in theme.json, move it there.
 * ------------------------------------------------------------------ */

/* Eyebrow / label utility — small uppercase sans label used above titles
   and on stats rows (FROM, DEPARTURE, DURATION, etc.) */
:root :where(.is-style-eyebrow) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Antique-gold hairline — used as a fine divider between footer sections
   and above the trust badge. */
:root :where(.is-style-gold-divider) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gold);
	opacity: 0.5;
	margin-block: var(--wp--preset--spacing--40);
}

/* Narrow centred gold gradient hairline — matches the accent the
   cruise-operators band paints above/below itself. Used between
   front-page sections as a soft visual break. The separator's own
   border is hidden; the gold gradient is drawn as the block's
   background on a 1px-tall, max-220px-wide centred strip. */
:root :where(.wp-block-separator.is-style-gold-gradient-hairline) {
	border: 0;
	height: 1px;
	width: min(220px, 40%);
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--20);
	background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--gold) 50%, transparent 100%);
	opacity: 0.7;
}

/* Query pagination — gold dot between number/dot items, vertically centred.
   The numbers block renders a flat list of anchors/spans; we slot a small
   gold circle in front of every item except the first via ::before. */
:root :where(.wp-block-query-pagination-numbers) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}
:root :where(.wp-block-query-pagination-numbers) > .page-numbers + .page-numbers::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-inline-end: var(--wp--preset--spacing--20);
	border-radius: 9999px;
	background: var(--wp--preset--color--gold);
	vertical-align: middle;
}

/* Hero overlay — soft cream gradient from left to centre so left-aligned
   hero copy stays readable while the right of the image stays clear.
   Apply as a Cover block style ("Hero overlay") which adds the
   is-style-hero-overlay class; .hero-overlay is kept as an alias for
   direct class application. */
:root :where(.is-style-hero-overlay, .hero-overlay) {
	position: relative;
}
:root :where(.is-style-hero-overlay, .hero-overlay)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(248, 245, 239, 0.92) 0%,
		rgba(248, 245, 239, 0.55) 35%,
		rgba(248, 245, 239, 0) 65%
	);
	pointer-events: none;
	z-index: 1;
}
:root :where(.is-style-hero-overlay, .hero-overlay) > .wp-block-cover__inner-container,
:root :where(.is-style-hero-overlay, .hero-overlay) > * {
	position: relative;
	z-index: 2;
}

/* Pill — used for duration selector and product badges. Applies to both
   `core/button` (where it wraps `.wp-block-button__link`) and bare
   elements like `core/paragraph`. Default state is cream with a sand
   border and navy text; .is-active flips to navy/cream. */
:root :where(.is-style-pill) {
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}
:root :where(.is-style-pill > .wp-block-button__link),
:root :where(p.is-style-pill) {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 9999px;
	padding: 0.4em 1em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.2;
	transition: background-color var(--wp--custom--transition--fast),
	            color var(--wp--custom--transition--fast),
	            border-color var(--wp--custom--transition--fast);
}
:root :where(.is-style-pill > .wp-block-button__link:hover),
:root :where(.is-style-pill > .wp-block-button__link:focus-visible) {
	background: var(--wp--preset--color--parchment);
	border-color: var(--wp--preset--color--navy);
}

/* Bottom enquiry CTA — vertically centred three-column layout. */
.mhb-bottom-enquiry {
	align-items: center;
}
.mhb-bottom-enquiry > .wp-block-group:nth-child(2) {
	text-align: center;
}
.mhb-bottom-enquiry > .wp-block-group:last-child {
	text-align: right;
}
.mhb-bottom-enquiry > .wp-block-group:last-child .wp-block-buttons {
	justify-content: flex-end;
}

/* Departure date pills — compact date chips in the price card. */
.mhb-departure-date-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mhb-departure-date-pill {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 9999px;
	padding: 0.3em 0.8em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

/* Hero destination pills — match the frosted-glass surface of the price
   card so the title side reads as the same material as the right column.
   Only paragraph pills (used in the hero) are affected; the button-based
   pills inside the card keep their solid surface. */
:root :where(.mhb-hero) p.is-style-pill {
	background: rgba(255, 253, 248, 0.78);
	border-color: rgba(232, 221, 203, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(1.08);
	backdrop-filter: blur(14px) saturate(1.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root :where(.mhb-hero) p.is-style-pill {
		background: rgba(255, 253, 248, 0.94);
	}
}

/* Active pill state — navy bg with cream text (used on the active
   duration option in the price card). */
:root :where(.is-style-pill.is-active > .wp-block-button__link),
:root :where(p.is-style-pill.is-active) {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--navy);
}
:root :where(.is-style-pill.is-active > .wp-block-button__link:hover) {
	background: var(--wp--preset--color--navy-soft, var(--wp--preset--color--navy));
	color: var(--wp--preset--color--cream);
}

/* Price display — large red serif numeral used in the price card.
   Use the .is-style-price class on a Heading or Paragraph block. */
:root :where(.is-style-price) {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--red);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* Travel card — refined paper-panel look used for the price card,
   itinerary list, cabin options, etc. Apply to a Group block. */
:root :where(.is-style-travel-card) {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(37, 33, 29, 0.04),
	            0 8px 24px rgba(37, 33, 29, 0.06);
	padding: var(--wp--preset--spacing--40);
}

/* Travel-card headings — refined concierge look with gold accent.
   Uses a pseudo-element so the line matches the text width even
   when the heading is stretched full-width by block layout. */
.is-style-travel-card h2:not(.is-style-price),
.is-style-travel-card h3:not(.is-style-price) {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding-bottom: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--20);
	margin-inline-start: 0 !important;
	position: relative;
	width: fit-content;
}
.is-style-travel-card h2:not(.is-style-price)::after,
.is-style-travel-card h3:not(.is-style-price)::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin-top: var(--wp--preset--spacing--10);
}
.is-style-travel-card h2:not(.is-style-price) {
	font-size: var(--wp--preset--font-size--lg);
}
.is-style-travel-card h3:not(.is-style-price) {
	font-size: var(--wp--preset--font-size--md);
}
.mhb-bottom-enquiry h2,
.mhb-bottom-enquiry h3,
.mhb-newsletter-card h2,
.mhb-newsletter-card h3,
.mhb-contact-page .is-style-travel-card h2,
.mhb-contact-page .is-style-travel-card h3 {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	width: auto !important;
}
.mhb-bottom-enquiry h2::after,
.mhb-bottom-enquiry h3::after,
.mhb-newsletter-card h2::after,
.mhb-newsletter-card h3::after,
.mhb-contact-page .is-style-travel-card h2::after,
.mhb-contact-page .is-style-travel-card h3::after {
	display: none !important;
}

/* Footer trust strip — used to highlight the ATOL badge / confidence line.
   Sits inside the navy footer; uses a faint top border in gold. */
:root :where(.footer-trust) {
	border-top: 1px solid rgba(191, 163, 107, 0.35);
	padding-top: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

/* Footer link colour — the global link element defaults to navy-soft,
   which is invisible on the navy footer background. Override so links
   show as cream and underline only on hover. */
:root :where(.site-footer) a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	transition: opacity var(--wp--custom--transition--fast);
}
:root :where(.site-footer) a:hover,
:root :where(.site-footer) a:focus {
	opacity: 0.75;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Footer lists — kill default bullets, tighten spacing. */
:root :where(.site-footer .footer-list) {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
:root :where(.site-footer .footer-list li) {
	padding: 0;
}

/* Footer logo — the master asset is red-on-transparent which would vanish
   against the deep-wine footer. Force it to monochrome cream. */
:root :where(.site-footer .footer-logo img) {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* Checklist — used inside "What's included" and "Highlights" cards.
   Apply to a core/list block via the .is-style-checklist class. */
:root :where(.is-style-checklist) {
	list-style: none;
	padding-left: 0;
}
:root :where(.is-style-checklist li) {
	position: relative;
	padding-left: 1.75rem;
	margin-block: var(--wp--preset--spacing--10);
}
:root :where(.is-style-checklist li)::before {
	content: "";
	position: absolute;
	left: 0.125rem;
	top: 0.5em;
	width: 0.875rem;
	height: 0.5rem;
	border-left: 2px solid var(--wp--preset--color--navy);
	border-bottom: 2px solid var(--wp--preset--color--navy);
	transform: rotate(-45deg);
}

/* Countdown — used inside the price card. Four small boxes for days,
   hours, minutes, seconds, with the eyebrow label above. */
:root :where(.mhb-countdown) {
	margin-top: var(--wp--preset--spacing--30);
}
:root :where(.mhb-countdown__grid) {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--10);
}
:root :where(.mhb-countdown__unit) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	background: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--sans);
	font-variant-numeric: tabular-nums;
}
:root :where(.mhb-countdown__value) {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}
:root :where(.mhb-countdown__label) {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-countdown.is-expired .mhb-countdown__grid) {
	display: none;
}
:root :where(.mhb-countdown__expired) {
	display: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	margin-top: var(--wp--preset--spacing--10);
}
:root :where(.mhb-countdown.is-expired .mhb-countdown__expired) {
	display: block;
}

/* Source-only media — a `core/gallery` or `core/video` block carrying
   the class `is-source-gallery` is hidden on the front end (via inline
   style added by functions.php for wp_enqueue_scripts only). In the
   block editor we instead show it with a subtle marker so the editor
   knows it's the trip-media source. */
:where(.editor-styles-wrapper, body) :where(.wp-block-gallery, .wp-block-video).is-source-gallery {
	position: relative;
	outline: 1px dashed var(--wp--preset--color--sand);
	outline-offset: 4px;
	border-radius: 4px;
	padding: 0.25rem;
}
:where(.editor-styles-wrapper, body) :where(.wp-block-gallery, .wp-block-video).is-source-gallery::before {
	content: "Source media — hidden on front end. Feeds the hero slideshow and on-trip gallery.";
	display: block;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	background: var(--wp--preset--color--parchment);
	padding: 0.4rem 0.6rem;
	margin-bottom: 0.5rem;
	border-radius: 4px;
}
:where(.editor-styles-wrapper, body) .wp-block-video.is-source-gallery::before {
	content: "Source video — hidden on front end. Plays first in the hero, then images take over.";
}

/* Screen-reader-only utility — used by form labels we want available to
   assistive tech but not visually rendered. Mirrors the WP admin rule. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Newsletter form — baseline layout for the form inside the newsletter
   pattern. Submission status colours are added by the plugin's JS. */
:root :where(.mhb-newsletter) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
	flex: 1 1 22rem;
	max-width: 32rem;
}

/* Compact card variant — heading + inline form on one row, wrap on narrow. */
:root :where(.mhb-newsletter-card) {
	gap: var(--wp--preset--spacing--30);
}
:root :where(.mhb-newsletter-card__title) {
	margin: 0;
	flex: 1 1 16rem;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	line-height: 1.25;
}
:root :where(.mhb-newsletter input[type="email"]) {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.875rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	transition: border-color var(--wp--custom--transition--fast),
	            box-shadow var(--wp--custom--transition--fast);
}
:root :where(.mhb-newsletter input[type="email"])::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.7;
}
:root :where(.mhb-newsletter input[type="email"]):focus {
	outline: none;
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px rgba(15, 49, 75, 0.15);
}
:root :where(.mhb-newsletter__status) {
	flex: 1 0 100%;
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--sans);
	min-height: 1.25em;
}
:root :where(.mhb-newsletter__status.is-error) {
	color: var(--wp--preset--color--red);
}
:root :where(.mhb-newsletter__status.is-success) {
	color: var(--wp--preset--color--sage);
}

/* Share row — Email / WhatsApp / More buttons rendered as raw <button>
   elements inside a core/html block. The wp-element-button class would
   otherwise pull in the red primary-button styling from theme.json, so
   we explicitly redress them to match the theme's outline variant. */
:root :where(.mhb-share-row__buttons button) {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	padding: 0.5em 1em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	transition: background var(--wp--custom--transition--fast),
	            border-color var(--wp--custom--transition--fast);
}
:root :where(.mhb-share-row__buttons button:hover),
:root :where(.mhb-share-row__buttons button:focus-visible) {
	background: var(--wp--preset--color--parchment);
	border-color: var(--wp--preset--color--navy);
}


:root :where(.mhb-share-row) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}
:root :where(.mhb-share-row__buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}
:root :where(.mhb-share-toast) {
	position: fixed;
	bottom: var(--wp--preset--spacing--40);
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.625rem 1rem;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(37, 33, 29, 0.25);
	z-index: 1000;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}
:root :where(.mhb-share-toast.is-visible) {
	opacity: 1;
}

/* MHB Hero (slideshow block) — structural styles.
   Companion plugin emits the .mhb-hero shell; we layer cream gradient
   overlay, control chrome, and play button styling here. */
:root :where(.mhb-hero) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--parchment);
	/* Mobile baseline: the editor-controlled minimum (default 560px) keeps
	   the hero strong on small screens without overwhelming the viewport.
	   Desktop swaps to full viewport height in the media query below. */
	min-height: var(--mhb-hero-min-height, 560px);
	/* Flex column so the overlay can grow to fill the hero — a percentage
	   min-height alone wouldn't resolve against the hero's min-height,
	   leaving the price card stranded at the top instead of centred. */
	display: flex;
	flex-direction: column;
}
@media (min-width: 782px) {
	:root :where(.mhb-hero) {
		/* svh (small viewport height) excludes mobile browser chrome — on
		   desktop it resolves the same as vh, so this is safe across the
		   board. The editor minimum still acts as a floor in case svh is
		   unsupported. The intro auto-scroll in functions.php brings the
		   hero into view past the (non-sticky) header. */
		min-height: max(var(--mhb-hero-min-height, 560px), 100svh);
	}
}
:root :where(.mhb-hero__bg) {
	position: absolute;
	inset: 0;
	z-index: 0;
}
:root :where(.mhb-hero__overlay) {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	/* Vertically centre the inner content so a tall (full-viewport) hero
	   doesn't leave content stranded at the top. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Reproduce the constrained-layout behaviour inside the hero overlay so
   align:"wide" / align:"full" content placed in the slideshow's inner
   blocks still respects the theme's wide/content widths. The overlay is
   a bare <div>, not a WP layout container, so we bridge via CSS. */
:root :where(.mhb-hero__overlay > .alignwide) {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
:root :where(.mhb-hero__overlay > .alignfull) {
	max-width: 100%;
}
:root :where(.mhb-hero__overlay > :not(.alignwide):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}
:root :where(.mhb-hero)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Cream wash that protects the left text column on desktop. Tuned
	   so the top-left doesn't read as opaque cream — the text-shadow
	   halo on H1 + paragraph carries the remaining contrast lift. The
	   mobile media query stacks a softer vertical wash on top. */
	background: linear-gradient(
		90deg,
		rgba(248, 245, 239, 0.72) 0%,
		rgba(248, 245, 239, 0.48) 40%,
		rgba(248, 245, 239, 0.06) 70%,
		rgba(248, 245, 239, 0) 100%
	);
	pointer-events: none;
}
/* Cream halo on the hero headline and intro paragraph. The tight stop
   sharpens letterforms, the wider stop pushes the surrounding image a
   touch further back. Subtle enough to be invisible on calm slides but
   load-bearing on busy ones. */
:root :where(.mhb-hero) h1.wp-block-heading,
:root :where(.mhb-hero) p.has-lg-font-size {
	text-shadow:
		0 1px 2px rgba(255, 253, 248, 0.55),
		0 0 14px rgba(255, 253, 248, 0.45);
}
:root :where(.mhb-hero__controls) {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
:root :where(.mhb-hero__controls > *) {
	pointer-events: auto;
}
:root :where(.mhb-hero__arrow) {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: rgba(255, 253, 248, 0.85);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--sand);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(37, 33, 29, 0.12);
	transition: background var(--wp--custom--transition--fast), transform var(--wp--custom--transition--fast);
}
:root :where(.mhb-hero__arrow:hover) {
	background: var(--wp--preset--color--cream);
	transform: translateY(-50%) scale(1.05);
}
:root :where(.mhb-hero__arrow--prev) { left: 0.75rem; }
:root :where(.mhb-hero__arrow--next) { right: 0.75rem; }
/* Hide the slideshow prev/next arrows — the design uses dots-only
   navigation and auto-advance. Re-enable in a downstream stylesheet if
   needed (the JS still wires them up). */
:root :where(.mhb-hero__arrow) { display: none; }

:root :where(.mhb-hero__dots) {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	background: rgba(255, 253, 248, 0.55);
	border-radius: 9999px;
}
:root :where(.mhb-hero__dot) {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(15, 49, 75, 0.35);
	cursor: pointer;
	transition: background var(--wp--custom--transition--fast), transform var(--wp--custom--transition--fast);
}
:root :where(.mhb-hero__dot.is-active) {
	background: var(--wp--preset--color--navy);
	transform: scale(1.2);
}

/* Scroll hint — small chevron + "SCROLL" eyebrow under the price card,
   gently bouncing to invite the user to scroll. Anchored to the card's
   centre via the --mhb-card-center-x CSS var measured in JS. Desktop
   only; mobile collapses the layout and the card moves, so the hint
   wouldn't help. */
:root :where(.mhb-hero__scroll-hint) {
	position: absolute;
	left: var(--mhb-card-center-x, 50%);
	bottom: 2.5rem;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4rem 0.75rem;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--cream);
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	opacity: 0.85;
	transition: opacity 500ms ease-out;
}
@media (max-width: 781px) {
	:root :where(.mhb-hero__scroll-hint) {
		display: none;
	}
	.mhb-plan-cta__full {
		display: none;
	}
	.mhb-plan-cta {
		white-space: nowrap;
	}
}
:root :where(.mhb-hero__scroll-hint:hover),
:root :where(.mhb-hero__scroll-hint:focus-visible) {
	opacity: 1;
}
:root :where(.mhb-hero__scroll-hint.is-hidden) {
	opacity: 0;
	pointer-events: none;
}
:root :where(.mhb-hero__scroll-hint:focus-visible) {
	outline: 2px solid var(--wp--preset--color--cream);
	outline-offset: 4px;
	border-radius: 6px;
}
:root :where(.mhb-hero__scroll-hint-label) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
:root :where(.mhb-hero__scroll-hint-chevron) {
	display: inline-flex;
	animation: mhb-scroll-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes mhb-scroll-hint-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
	:root :where(.mhb-hero__scroll-hint-chevron) {
		animation: none;
	}
}
/* Mobile layout: confine the video/gradient/controls to a top "visual
   frame", and let the price card flow naturally below it with a negative
   margin-top so its upper edge overlaps the bottom of the visual frame.
   The hero block then sizes itself to fit the card's true rendered
   height plus a fixed breathing room — no runtime measurement needed.
     --mhb-hero-frame-h:  visual frame height (default 62svh)
     --mhb-card-overlap:  how far the card top sits inside the video
                          frame (default 140px) — sized so the primary
                          CTA button stays inside the post-intro-scroll
                          viewport on mobile rather than a heavy
                          obscuration */
@media (max-width: 781px) {
	:root :where(.mhb-hero) {
		overflow: visible;
		min-height: 0;
		/* Small breathing room below the card before the next section.
		   The card's height is now part of the hero's natural flow,
		   so no manual reservation is needed. */
		padding-bottom: var(--wp--preset--spacing--40);
	}
	:root :where(.mhb-hero__bg),
	:root :where(.mhb-hero)::before,
	:root :where(.mhb-hero__controls) {
		inset: 0 0 auto 0;
		height: var(--mhb-hero-frame-h, 62svh);
	}
	:root :where(.mhb-hero__bg) {
		overflow: hidden;
	}
	/* Stacked wash: vertical cream protects the top text band (badges,
	   H1, description, stats); the horizontal layer is left lighter on
	   mobile so the corner where both overlap doesn't read as opaque
	   cream. The text-shadow halo on H1 + paragraph picks up the rest.
	   Both fade out before the slide dots / card edge so the photo
	   dominates the lower half of the visual frame. */
	:root :where(.mhb-hero)::before {
		background:
			linear-gradient(
				180deg,
				rgba(248, 245, 239, 0.52) 0%,
				rgba(248, 245, 239, 0.40) 35%,
				rgba(248, 245, 239, 0.10) 60%,
				rgba(248, 245, 239, 0) 80%
			),
			linear-gradient(
				90deg,
				rgba(248, 245, 239, 0.55) 0%,
				rgba(248, 245, 239, 0.40) 40%,
				rgba(248, 245, 239, 0.05) 70%,
				rgba(248, 245, 239, 0) 100%
			);
	}
	:root :where(.mhb-hero__overlay) {
		display: block;
		min-height: 0;
		padding-block: 0;
		padding-inline: 0;
	}
	:root :where(.mhb-hero__overlay > .alignwide),
	:root :where(.mhb-hero__overlay > .alignfull),
	:root :where(.mhb-hero__overlay > :not(.alignwide):not(.alignfull)) {
		max-width: 100%;
		margin-inline: 0;
	}
	:root :where(.mhb-hero) .wp-block-columns {
		gap: 0;
		margin-block: 0;
	}
	/* Text column fills the visual frame with content pinned to the top —
	   badges and headline sit close to the breadcrumb, the video gets to
	   breathe in the middle, and the card meets it cleanly at the
	   bottom. Bottom padding still reserves the card-overlap zone so
	   nothing collides with the card edge. */
	:root :where(.mhb-hero) .wp-block-columns > .wp-block-column:first-child {
		box-sizing: border-box;
		height: var(--mhb-hero-frame-h, 62svh);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--30);
		padding-bottom: calc(var(--mhb-card-overlap, 140px) + var(--wp--preset--spacing--20));
		flex-basis: auto;
	}
	/* Lift the slide-index dots above the card edge so they sit on the
	   video, not on (or under) the card chrome. */
	:root :where(.mhb-hero__dots) {
		bottom: calc(var(--mhb-card-overlap, 140px) + 0.75rem);
	}
	/* Tighten the hero headline on mobile so badges + title + a short
	   intro can sit comfortably in the available text band. */
	:root :where(.mhb-hero) h1.has-hero-font-size {
		font-size: clamp(2.25rem, 9vw, 3rem);
		line-height: 1.05;
	}
	/* Card column: flows naturally below the text column (which fills the
	   visual frame), pulled up by a negative margin so it overlaps the
	   bottom of the frame by --mhb-card-overlap. Horizontal padding gives
	   the card a comfortable inset from the viewport edges so it reads
	   as a contained card rather than a full-width slab. */
	:root :where(.mhb-hero) .wp-block-columns > .wp-block-column:last-child {
		position: relative;
		margin-top: calc(-1 * var(--mhb-card-overlap, 140px));
		padding-inline: var(--wp--preset--spacing--30);
		flex-basis: auto;
		z-index: 5;
	}
}

/* Price card — tighter spacing override so the card stays compact
   without losing its proportions. The background is a translucent
   cream so the slideshow / video underneath the hero shows through;
   backdrop-filter softens what's behind the card so text stays
   readable. */
:root :where(.mhb-price-card) {
	padding: var(--wp--preset--spacing--30);
	background: rgba(255, 253, 248, 0.78);
	border-color: rgba(232, 221, 203, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(1.08);
	backdrop-filter: blur(14px) saturate(1.08);
}
/* Graceful fallback for browsers without backdrop-filter: bump the
   opacity so the card stays legible without the blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root :where(.mhb-price-card) {
		background: rgba(255, 253, 248, 0.94);
	}
}
:root :where(.mhb-price-card) > * {
	margin-block: 0;
}
:root :where(.mhb-price-card) > * + * {
	margin-top: var(--wp--preset--spacing--20);
}
:root :where(.mhb-price-card .is-style-gold-divider) {
	margin-block: var(--wp--preset--spacing--20);
}
:root :where(.mhb-price-card .is-style-price) {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 0.95;
}
:root :where(.mhb-price-card .wp-block-buttons) {
	margin-top: var(--wp--preset--spacing--20) !important;
}
:root :where(.mhb-price-card .mhb-countdown) {
	margin-top: 0;
}
:root :where(.mhb-price-card .mhb-countdown__grid) {
	margin-top: 0.4rem;
	gap: 0.4rem;
}
:root :where(.mhb-price-card .mhb-countdown__unit) {
	padding: 0.4rem 0.25rem;
}
:root :where(.mhb-price-card .mhb-countdown__value) {
	font-size: var(--wp--preset--font-size--base);
}
/* Breathing room around the operator logo so wide wordmarks (Cunard,
   etc.) don't sit flush against the card's interior edges. */
:root :where(.mhb-price-card .mhb-price-card__logo) {
	padding-inline: var(--wp--preset--spacing--20);
}

/* Hero back-link — small uppercase "← Cruises" strip sitting on the
   parchment canvas above the hero image, replacing the old breadcrumb.
   The arrow nudges left on hover for a touch of motion feedback. */
:root :where(.mhb-hero-back .mhb-hero-back__link-wrap) {
	margin: 0;
}
:root :where(.mhb-hero-back + *) {
	margin-block-start: 0 !important;
}
:root :where(.mhb-hero-back__link) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}
:root :where(.mhb-hero-back__arrow) {
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	transition: transform 160ms ease-out;
}
:root :where(.mhb-hero-back__link:hover) {
	color: var(--wp--preset--color--navy);
}
:root :where(.mhb-hero-back__link:hover .mhb-hero-back__label) {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
:root :where(.mhb-hero-back__link:hover .mhb-hero-back__arrow) {
	transform: translateX(-2px);
}

/* On-trip gallery — two-column grid of rounded image tiles. */
:root :where(.mhb-on-trip-gallery .wp-block-image) {
	margin: 0;
}
:root :where(.mhb-on-trip-gallery .wp-block-image img) {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* On the trip page body row, let the right column stretch to the height
   of the trip overview card on the left and grow the gallery card to
   fill the leftover vertical space below the share row. Image tiles
   drop their fixed 1:1 aspect ratio so the rows expand with the card. */
:root :where(.mhb-trip-body) > .wp-block-column {
	display: flex;
	flex-direction: column;
}
@media (max-width: 781px) {
	:root :where(.mhb-trip-body) > .wp-block-column:last-child {
		order: -1;
	}
}
:root :where(.mhb-trip-body .mhb-on-trip-gallery__grid) {
	grid-auto-rows: auto;
}

/* Small text-link style — uppercase sans navy with arrow,
   used at the bottom of overview/inclusions/highlights cards. */
:root :where(.mhb-text-link a) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}
:root :where(.mhb-text-link a:hover) {
	color: var(--wp--preset--color--navy-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Reduce motion — honour user preference for the hero gradient and
   any future animations the plugin adds. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Trip card — editorial product card used in /trips/ archive, front-page
   "Handpicked offers", and the wishlist page. The card is denser than a
   typical CMS card: above the fold we surface the image and title; below it,
   a labelled meta grid (price, duration, next departure) and a highlights
   line, then a red conversion CTA. The card body is padded to 24px to give
   the type room without feeling sparse.
   --------------------------------------------------------------------------- */
:root :where(.mhb-trip-card.is-style-travel-card) {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(15, 49, 75, 0.04);
	transition: transform var(--wp--custom--transition--slow, 0.4s ease),
		box-shadow var(--wp--custom--transition--slow, 0.4s ease);
}
:root :where(.mhb-trip-card.is-style-travel-card:hover) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(15, 49, 75, 0.08);
}

/* Media slot — 16:9 image with wishlist heart overlay. */
:root :where(.mhb-trip-card__media) {
	position: relative;
}
:root :where(.mhb-trip-card .mhb-trip-card__image) {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
:root :where(.mhb-trip-card .mhb-trip-card__image img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--transition--slow, 0.5s ease);
}
:root :where(.mhb-trip-card:hover .mhb-trip-card__image img) {
	transform: scale(1.04);
}

/* Hover video — when a trip has a hero video, it loads on hover, plays
   muted/looped, and fades in over the still image. The source is attached
   lazily by JS (card-video.js) so cards without hover never download it. */
:root :where(.mhb-trip-card__video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
:root :where(.mhb-trip-card--has-video.is-video-playing .mhb-trip-card__video) {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	:root :where(.mhb-trip-card__video) {
		display: none;
	}
}

/* Type pill — small, restrained product-type marker (Trip, Cruise, Villa…)
   in the top-left of the card image. Uses brand red with reduced opacity so
   it reads as a label rather than competing with the conversion CTA. */
:root :where(.mhb-trip-card__type-pill) {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(201, 41, 28, 0.92);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(15, 49, 75, 0.12);
}

/* Wishlist heart — sits over the image top-right. The button is a circle
   with a soft white background so the heart stays visible over any photo.
   When toggled on (aria-pressed=true), the heart fills red. */
:root :where(.mhb-trip-card__wish) {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 253, 248, 0.92);
	color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(15, 49, 75, 0.18);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
:root :where(.mhb-trip-card__wish:hover) {
	background: #fff;
	transform: scale(1.05);
	color: var(--wp--preset--color--red);
}
:root :where(.mhb-trip-card__wish:focus-visible) {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}
:root :where(.mhb-trip-card__wish[aria-pressed="true"]) {
	color: var(--wp--preset--color--red);
}
:root :where(.mhb-trip-card__wish[aria-pressed="true"] svg) {
	fill: currentColor;
}

/* Body — 24px padding, vertical rhythm via blockGap-style margins. */
:root :where(.mhb-trip-card__body) {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	flex: 1;
}
:root :where(.mhb-trip-card__title) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem);
	line-height: 1.15;
	margin: 0;
}
:root :where(.mhb-trip-card__title a) {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
:root :where(.mhb-trip-card__title a:hover) {
	color: var(--wp--preset--color--red);
}
:root :where(.mhb-trip-card__location) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	margin: calc(-1 * var(--wp--preset--spacing--20)) 0 0;
}

/* Meta grid — two-column labelled cells. Each cell stacks an uppercase
   eyebrow label above a value; the price cell uses the serif at a larger
   size to anchor commercial information. The "Next departure" cell spans
   both columns so a season range fits without wrapping awkwardly. */
:root :where(.mhb-trip-card__meta) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-trip-card__meta-cell) {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
:root :where(.mhb-trip-card__meta-cell--wide) {
	grid-column: 1 / -1;
}
:root :where(.mhb-trip-card__meta dt.is-style-eyebrow) {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-trip-card__meta dd) {
	margin: 0;
}
:root :where(.mhb-trip-card__meta-value) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
}
:root :where(.mhb-trip-card__price) {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Short description — sits between the meta grid and the CTA to give the
   reader one concrete reason to click. Sourced from the overview meta or
   excerpt, trimmed to ~28 words so card heights stay even across the grid. */
:root :where(.mhb-trip-card__description) {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

/* "+N more" badge next to the Next departure line — a quiet inline count
   that signals more sailings exist without competing with the date itself. */
:root :where(.mhb-trip-card__meta-more) {
	margin-left: 0.4em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	font-weight: 500;
}

/* Actions — primary red CTA pinned to the bottom. margin-top:auto lets
   the row anchor at the card's base when the grid stretches cards to
   equal height. */
:root :where(.mhb-trip-card__actions) {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}
:root :where(.mhb-trip-card__cta-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.75em 1.4em;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s ease;
}
:root :where(.mhb-trip-card__cta-button:hover) {
	background: var(--wp--preset--color--red-hover, #A91F15);
	color: #fff;
}

/* WP query loop post-template grid (used by /offers/ + every archive-*.html
   template). WordPress renders each post as <li> inside a grid container;
   without explicit stretching the cards size to their content and the cruise
   card (shorter body) ends shorter than the trip card next to it. Forcing
   align-items: stretch on the grid + display: flex on the <li> + width:100%
   on the card pins every CTA to a common baseline. The card's existing
   internal flex-column with body { flex: 1 } and actions { margin-top: auto }
   handles the rest. */
:root :where(.wp-block-post-template.is-layout-grid) {
	align-items: stretch;
}
:root :where(.wp-block-post-template.is-layout-grid > li) {
	display: flex;
}
:root :where(.wp-block-post-template.is-layout-grid > li > .mhb-trip-card) {
	flex: 1;
	width: 100%;
}

/* Wishlist page — single shared card design with /offers/ and every product
   archive. Cards are unmodified mhb-trips/archive-card output (the heart
   button doubles as remove on this page — clicking it un-wishlists). The
   grid mirrors the archive layouts: 3 desktop / 2 tablet / 1 mobile. */
:root :where(.mhb-wishlist-page) {
	display: block;
	margin-block: var(--wp--preset--spacing--30);
}
:root :where(.mhb-wishlist-grid) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}
:root :where(.mhb-wishlist-grid > .mhb-trip-card) {
	height: 100%;
	width: 100%;
}
@media (max-width: 1024px) {
	:root :where(.mhb-wishlist-grid) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	:root :where(.mhb-wishlist-grid) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* Empty wishlist — a single padded card with heading, body copy, and a
   primary CTA back to the home page. Reuses the .is-style-travel-card
   shell so it sits visually consistent with the populated grid. */
:root :where(.mhb-wishlist-empty) {
	max-width: 560px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
:root :where(.mhb-wishlist-empty h2) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem);
	margin: 0;
}
:root :where(.mhb-wishlist-empty p) {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-wishlist-empty__cta) {
	margin-top: var(--wp--preset--spacing--20);
}
:root :where(.mhb-wishlist-empty__cta a) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.85em 1.6em;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s ease;
}
:root :where(.mhb-wishlist-empty__cta a:hover) {
	background: var(--wp--preset--color--red-hover, #A91F15);
}

/* Expired trip / cruise hero — subtle "this has sailed" treatment.
   The image stays recognizable (cover dimRatio 40 + 70% opacity) so the
   visitor connects what they clicked to what they're seeing. */
:root :where(.mhb-expired-hero .wp-block-cover__image-background) {
	opacity: 0.7;
	filter: saturate(0.92);
}
:root :where(.mhb-expired-hero .is-style-eyebrow) {
	letter-spacing: 0.18em;
	opacity: 0.85;
}

/* Parchment fallback hero — used when the expired post has no thumbnail.
   The serif glyph sits as a quiet decoration above the eyebrow. */
:root :where(.mhb-expired-hero--fallback) {
	position: relative;
	border-top: 1px solid var(--wp--preset--color--sand);
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-expired-hero--fallback)::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin: 0 auto var(--wp--preset--spacing--30);
	opacity: 0.6;
}

/* Alternatives grid — centered flex row that fits 1, 2, or 3 cards
   without leaving the lone card stranded in the left column when the
   in-season pool is small. Uses the same .mhb-trip-card markup as the
   /trips/ archive. */
:root :where(.mhb-expired-grid) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}
:root :where(.mhb-expired-grid__cell) {
	flex: 1 1 280px;
	min-width: 0;
	max-width: 360px;
	display: flex;
}
:root :where(.mhb-expired-grid__cell > .mhb-trip-card) {
	width: 100%;
}
@media (max-width: 600px) {
	:root :where(.mhb-expired-grid) {
		gap: var(--wp--preset--spacing--30);
	}
	:root :where(.mhb-expired-grid__cell) {
		flex: 1 1 100%;
		max-width: 480px;
	}
}

/* ---------------------------------------------------------------------------
   Front page (front-page.html)
   --------------------------------------------------------------------------- */

/* Hero — text left, cruise map right. The .mhb-home-hero__title uses serif
   throughout; the italic second line is rendered via inline <em>. */
:root :where(.mhb-home-hero) {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-home-hero__title) {
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
:root :where(.mhb-home-hero__title em) {
	font-style: italic;
	font-weight: 400;
}
:root :where(.mhb-home-hero__map) {
	min-height: 360px;
}
:root :where(.mhb-home-hero__map .wp-block-image) {
	margin: 0;
}
:root :where(.mhb-home-hero__map .wp-block-image img) {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md, 8px);
}

/* Categories — seven image cards in a responsive grid. On desktop the first
   row spans the full content rail with four cards; the remaining three sit
   centred beneath it. The image fills its square aspect-ratio cell; a soft
   dark gradient overlays it so the label stays legible regardless of the
   underlying photo. */
:root :where(.mhb-home-categories__grid) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
}
:root :where(.mhb-home-categories__item) {
	margin: 0;
}
:root :where(.mhb-home-categories__card) {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 8px);
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}
:root :where(.mhb-home-categories__image) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--transition--slow, 0.6s ease);
}
:root :where(.mhb-home-categories__card:hover .mhb-home-categories__image) {
	transform: scale(1.05);
}
:root :where(.mhb-home-categories__overlay) {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 49, 75, 0.15) 0%, rgba(15, 49, 75, 0.8) 100%);
}
:root :where(.mhb-home-categories__label) {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--sm);
	color: #fff;
}
:root :where(.mhb-home-categories__arrow) {
	font-size: 1.1em;
	line-height: 1;
}
@media (min-width: 1025px) {
	:root :where(.mhb-home-categories__grid) {
		grid-template-columns: repeat(8, 1fr);
	}

	:root :where(.mhb-home-categories__item) {
		grid-column: span 2;
	}

	:root :where(.mhb-home-categories__item:nth-child(5)) {
		grid-column: 2 / span 2;
	}
}
@media (max-width: 1024px) {
	:root :where(.mhb-home-categories__grid) {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	:root :where(.mhb-home-categories__grid) {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
}

/* Handpicked offers — header row + single-row horizontal carousel of up to
   6 promoted product cards. Desktop presents a three-across card row with
   the rest reachable by scroll; mobile narrows the cards so one + a peek of
   the next is visible at a time. Cards stretch to equal height via
   align-items: stretch on the flex container; the card itself is already
   flex-column with body { flex: 1 } and actions { margin-top: auto } so
   CTAs land at a common baseline regardless of body content length. */
:root :where(.mhb-home-offers__view-all a) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
:root :where(.mhb-home-offers__view-all a:hover) {
	color: var(--wp--preset--color--red);
}
/* Carousel wrapper — positions the prev/next arrows in the strip's
   horizontal gutter without affecting the strip's own layout. */
:root :where(.mhb-home-offers__carousel) {
	position: relative;
}
:root :where(.mhb-home-offers__grid) {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	-webkit-overflow-scrolling: touch;
	/* Small breathing room so the focus ring on the last card isn't clipped */
	padding-block-end: var(--wp--preset--spacing--10);
	/* Hide scrollbar — arrows + drag/swipe are the affordance. */
	scrollbar-width: none;
}
:root :where(.mhb-home-offers__grid::-webkit-scrollbar) {
	display: none;
}

/* Prev/next arrows — circular cream pills with navy chevron, floating
   just outside the strip's edges. They hide via [hidden] when the strip
   is at the corresponding edge; the small JS in the pattern toggles the
   attribute on scroll/resize. Suppressed entirely on phones where swipe
   is the natural affordance. */
:root :where(.mhb-home-offers__nav) {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 49, 75, 0.12);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}
:root :where(.mhb-home-offers__nav:hover) {
	background: var(--wp--preset--color--parchment);
	box-shadow: 0 6px 20px rgba(15, 49, 75, 0.18);
	transform: translateY(-50%) scale(1.06);
}
:root :where(.mhb-home-offers__nav:active) {
	transform: translateY(-50%) scale(0.98);
}
:root :where(.mhb-home-offers__nav:focus-visible) {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}
:root :where(.mhb-home-offers__nav[hidden]) {
	display: none;
}
:root :where(.mhb-home-offers__nav--prev) {
	left: calc(-1 * var(--wp--preset--spacing--30));
}
:root :where(.mhb-home-offers__nav--next) {
	right: calc(-1 * var(--wp--preset--spacing--30));
}
:root :where(.mhb-home-offers__nav svg) {
	width: 22px;
	height: 22px;
}
@media (max-width: 600px) {
	:root :where(.mhb-home-offers__nav) {
		display: none;
	}
}
:root :where(.mhb-home-offers__grid > *) {
	/* 3 cards visible per "viewport-width" of the strip on desktop */
	flex: 0 0 calc((100% - var(--wp--preset--spacing--40) * 2) / 3);
	scroll-snap-align: start;
	min-width: 0;
}
:root :where(.mhb-home-offers .mhb-trip-card__body) {
	padding: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--20);
}
:root :where(.mhb-home-offers .mhb-trip-card__title) {
	font-size: clamp(1.35rem, 1.2rem + 0.35vw, 1.6rem);
	line-height: 1.12;
}
:root :where(.mhb-home-offers .mhb-trip-card__meta) {
	padding: var(--wp--preset--spacing--20) 0;
	gap: var(--wp--preset--spacing--20);
}
:root :where(.mhb-home-offers .mhb-trip-card__description) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
@media (max-width: 1024px) {
	:root :where(.mhb-home-offers__grid > *) {
		/* ~2 cards + peek */
		flex: 0 0 calc((100% - var(--wp--preset--spacing--40)) / 2.2);
	}
}
@media (max-width: 600px) {
	:root :where(.mhb-home-offers__grid) {
		gap: var(--wp--preset--spacing--30);
	}
	:root :where(.mhb-home-offers__grid > *) {
		/* 1 card + a hint of the next */
		flex: 0 0 85%;
	}
}

/* On narrow viewports, drop the hero from side-by-side to stacked so the
   map sits below the title rather than squeezing it. */
@media (max-width: 781px) {
	:root :where(.mhb-home-hero .wp-block-columns) {
		flex-wrap: wrap;
	}
	:root :where(.mhb-home-hero .wp-block-column) {
		flex-basis: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   About page
   --------------------------------------------------------------------------- */
:root :where(.mhb-about) {
	overflow: hidden;
}
:root :where(.mhb-about-hero) {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-about-hero__title) {
	max-width: 10ch;
	line-height: 1;
	margin: 0;
}
:root :where(.mhb-about-hero__lede) {
	max-width: 34rem;
}
:root :where(.mhb-about-hero__image) {
	position: relative;
	margin: 0;
}
:root :where(.mhb-about-hero__image)::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	z-index: 0;
	border: 1px solid rgba(191, 163, 107, 0.42);
	border-radius: 8px;
}
:root :where(.mhb-about-hero__image img) {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba(37, 33, 29, 0.12);
}
:root :where(.mhb-about-stats) {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	background: rgba(255, 253, 248, 0.72);
}
:root :where(.mhb-about-stats li) {
	padding: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-about-stats li:first-child) {
	border-left: 0;
}
:root :where(.mhb-about-stats span) {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	color: var(--wp--preset--color--ink);
}
:root :where(.mhb-about-story h2) {
	line-height: 1.05;
	margin-top: 0;
}
:root :where(.mhb-about-values) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}
:root :where(.mhb-about-value-card) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(37, 33, 29, 0.04);
}
:root :where(.mhb-about-value-card h3) {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}
:root :where(.mhb-about-value-card p) {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-about-value-card .is-style-eyebrow) {
	color: var(--wp--preset--color--navy);
}
:root :where(.mhb-about-section-head) {
	margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.mhb-about-team-grid) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}
:root :where(.mhb-about-team-card) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(37, 33, 29, 0.04);
}
:root :where(.mhb-about-team-card img) {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center top;
}
:root :where(.mhb-about-team-card__body) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
}
:root :where(.mhb-about-team-card h3) {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
}
:root :where(.mhb-about-team-card p) {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-about-team-card .is-style-eyebrow) {
	color: var(--wp--preset--color--navy);
}
@media (max-width: 1024px) {
	:root :where(.mhb-about-values),
	:root :where(.mhb-about-team-grid) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 781px) {
	:root :where(.mhb-about-hero .wp-block-columns),
	:root :where(.mhb-about-story .wp-block-columns) {
		flex-wrap: wrap;
	}
	:root :where(.mhb-about-hero .wp-block-column),
	:root :where(.mhb-about-story .wp-block-column) {
		flex-basis: 100% !important;
	}
	:root :where(.mhb-about-hero__title) {
		max-width: 11ch;
	}
	:root :where(.mhb-about-stats) {
		grid-template-columns: 1fr;
	}
	:root :where(.mhb-about-stats li) {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--sand);
	}
	:root :where(.mhb-about-stats li:first-child) {
		border-top: 0;
	}
}
@media (max-width: 600px) {
	:root :where(.mhb-about-values),
	:root :where(.mhb-about-team-grid) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
	:root :where(.mhb-about-hero__image img) {
		aspect-ratio: 16 / 11;
	}
}

/* ---------------------------------------------------------------------------
   Legal long-form page (Agency T&C, etc.)
   --------------------------------------------------------------------------- */
:root :where(.mhb-legal-hero) {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-legal-hero__title) {
	line-height: 1.05;
	margin: 0;
}
/* No custom max-width on the lede: the original 38rem cap made it narrower than
   the content rail, so the constrained group centred it (margin-inline:auto) and
   pushed it off the left edge. Letting it inherit the layout's content-size width
   keeps it on the same rail as the title and eyebrow at every viewport. */
:root :where(.mhb-legal-hero .is-style-gold-divider) {
	margin-top: var(--wp--preset--spacing--30);
	margin-left: 0;
	margin-right: auto;
}
:root :where(.mhb-legal-body) {
	color: var(--wp--preset--color--ink);
}
:root :where(.mhb-legal-body p) {
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.7;
}
:root :where(.mhb-legal-body a) {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}
:root :where(.mhb-legal-body a:hover) {
	color: var(--wp--preset--color--red);
}
:root :where(.mhb-legal-body h2) {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--serif);
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	position: relative;
}
:root :where(.mhb-legal-body h2)::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.mhb-legal-body h2:first-child) {
	margin-top: 0;
}
:root :where(.mhb-legal-body ul) {
	padding-left: 1.25rem;
	color: var(--wp--preset--color--ink-muted);
}
:root :where(.mhb-legal-body ul li) {
	margin-bottom: var(--wp--preset--spacing--20);
	line-height: 1.65;
}
:root :where(.mhb-legal-body ul li::marker) {
	color: var(--wp--preset--color--gold);
}
:root :where(.mhb-legal-body strong) {
	color: var(--wp--preset--color--ink);
}
:root :where(.mhb-legal-body .mhb-legal-table) {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	overflow-x: auto;
}
:root :where(.mhb-legal-body .mhb-legal-table table) {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	border: 1px solid var(--wp--preset--color--sand);
	background: var(--wp--preset--color--cream);
	border-radius: 8px;
	overflow: hidden;
}
:root :where(.mhb-legal-body .mhb-legal-table th) {
	text-align: left;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--parchment);
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
:root :where(.mhb-legal-body .mhb-legal-table td) {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	vertical-align: top;
	border-top: 1px solid var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}
:root :where(.mhb-legal-body .mhb-legal-table tbody tr:first-child td) {
	border-top: 0;
}
:root :where(.mhb-legal-body .mhb-legal-table code) {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.875em;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--parchment);
	padding: 0.1em 0.4em;
	border-radius: 4px;
	white-space: nowrap;
}
@media (max-width: 600px) {
	:root :where(.mhb-legal-hero__title) {
		font-size: var(--wp--preset--font-size--3-xl);
	}
	:root :where(.mhb-legal-body .mhb-legal-table code) {
		white-space: normal;
		word-break: break-word;
	}
}

/* Shared page-header block — used on every archive, the Travel Offers
   page, and the Wishlist page. Keeps spacing under the h1/subtitle pair
   consistent so the grid or content below sits the same distance below
   the title regardless of which template rendered it. */
.mhb-page-header {
	margin-bottom: var(--wp--preset--spacing--40);
}
.mhb-page-header > h1.wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}
/* Keep the subtitle within the same WordPress constrained column as
   the heading. Earlier overrides forced it to the full alignwide edge. */
.mhb-page-header > p {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Cruise operators — partnership showcase grid
 *
 * Rendered by /patterns/cruise-operators.php on archive-cruise.html, immediately
 * below the page title/subtitle. The data layer
 * (\MHB_Trips\Operators::get_with_counts_for) returns every cruise-typed
 * operator (post count may be 0) plus any non-cruise-typed operator that
 * happens to host a cruise. The CSS handles three states:
 *   - resting        — quiet, slightly desaturated logo
 *   - hover/focus    — colour returns, gold rule animates, count pill rises
 *   - is-active      — corresponds to ?operator=<slug> on the archive
 * `is-coming-soon` (count = 0) softens the count pill into a muted label.
 * --------------------------------------------------------------------------- */
.mhb-operators-band {
	position: relative;
	margin-block: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background:
		linear-gradient(180deg, rgba(232,221,203,0) 0%, rgba(232,221,203,0.32) 50%, rgba(232,221,203,0) 100%);
}
.mhb-operators-band::before,
.mhb-operators-band::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: min(220px, 40%);
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--gold) 50%, transparent 100%);
	opacity: 0.7;
}
.mhb-operators-band::before { top: 0; }
.mhb-operators-band::after  { bottom: 0; }

.mhb-operators {
	width: 100%;
}
.mhb-operators__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.mhb-operators__head {
	text-align: center;
	margin-bottom: clamp(12px, 2vw, 20px);
}
.mhb-operators__rule {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin: 0 auto var(--wp--preset--spacing--20);
	opacity: 0.85;
}
.mhb-operators__eyebrow {
	font-family: var(--wp--preset--font-family--inter, "Inter"), sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 12px;
	font-weight: 600;
}
.mhb-operators__title {
	font-family: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond"), serif;
	font-weight: 500;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	line-height: 1.08;
	color: var(--wp--preset--color--navy);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}
.mhb-operators__lede {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink-muted);
	max-width: 56ch;
	margin: 0 auto;
	line-height: 1.55;
}
.mhb-operators__filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 22px auto 0;
	padding: 8px 14px 8px 12px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 4px 14px rgba(15, 49, 75, 0.06);
}
.mhb-operators__filter-pill strong {
	color: var(--wp--preset--color--navy);
}
.mhb-operators__filter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	box-shadow: 0 0 0 4px rgba(201, 41, 28, 0.12);
}
.mhb-operators__filter-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
	transition: background 160ms ease, color 160ms ease;
}
.mhb-operators__filter-clear:hover,
.mhb-operators__filter-clear:focus-visible {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--cream);
}

.mhb-operators__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(14px, 1.6vw, 22px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px)  { .mhb-operators__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .mhb-operators__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.mhb-operators__item {
	opacity: 0;
	transform: translateY(8px);
	animation: mhb-operators-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--mhb-op-delay, 0ms);
}
@keyframes mhb-operators-rise {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mhb-operators__item { animation: none; opacity: 1; transform: none; }
}

.mhb-operators__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: clamp(14px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px);
	min-height: 106px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms ease,
		border-color 220ms ease,
		background-color 220ms ease,
		min-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
		padding 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mhb-operators__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(191, 163, 107, 0.10) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 320ms ease;
	pointer-events: none;
	z-index: 0;
}
.mhb-operators__logo-frame,
.mhb-operators__name,
.mhb-operators__cta,
.mhb-operators__rule-anim {
	position: relative;
	z-index: 1;
}
.mhb-operators__logo-frame {
	flex: 0 0 auto;
	height: 56px;
	width: 100%;
	display: grid;
	place-items: center;
	transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mhb-operators__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: saturate(0.8);
	opacity: 1;
	transition: filter 280ms ease, opacity 280ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mhb-operators__rule-anim {
	display: block;
	width: 36px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0.55);
	transform-origin: center;
	opacity: 0.7;
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, width 360ms ease;
}
.mhb-operators__name {
	font-family: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond"), serif;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	text-align: center;
	margin: 0;
	letter-spacing: 0.005em;
}
.mhb-operators__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--wp--preset--font-family--inter, "Inter"), sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--red);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* Push the CTA to the card's bottom so it bottom-aligns across siblings
	   even when an operator name wraps to two lines. */
	margin-top: auto;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mhb-operators__cta--soon {
	color: var(--wp--preset--color--ink-muted);
}
.mhb-operators__cta-arrow {
	transition: transform 220ms ease;
}

/* Hover/focus — bring the partner to life */
.mhb-operators__card:hover,
.mhb-operators__card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--gold);
	box-shadow:
		0 1px 0 var(--wp--preset--color--sand),
		0 14px 28px -14px rgba(15, 49, 75, 0.28),
		0 4px 12px -6px rgba(15, 49, 75, 0.14);
	outline: none;
	min-height: 148px;
	padding-top: clamp(18px, 1.6vw, 22px);
	padding-bottom: clamp(14px, 1.4vw, 18px);
}
.mhb-operators__card:hover .mhb-operators__logo-frame,
.mhb-operators__card:focus-visible .mhb-operators__logo-frame {
	height: 78px;
}
.mhb-operators__card:hover::before,
.mhb-operators__card:focus-visible::before {
	opacity: 1;
}
.mhb-operators__card:hover .mhb-operators__logo,
.mhb-operators__card:focus-visible .mhb-operators__logo {
	filter: saturate(1) contrast(1);
	opacity: 1;
	transform: scale(1.04);
}
.mhb-operators__card:hover .mhb-operators__rule-anim,
.mhb-operators__card:focus-visible .mhb-operators__rule-anim {
	transform: scaleX(1);
	width: 68px;
	opacity: 1;
}
.mhb-operators__card:hover .mhb-operators__cta,
.mhb-operators__card:focus-visible .mhb-operators__cta {
	opacity: 1;
	transform: translateY(0);
}
.mhb-operators__card:hover .mhb-operators__cta-arrow,
.mhb-operators__card:focus-visible .mhb-operators__cta-arrow {
	transform: translateX(3px);
}

/* Active filter — gold ring + persistent state */
.mhb-operators__item.is-active .mhb-operators__card {
	border-color: var(--wp--preset--color--gold);
	box-shadow:
		0 0 0 3px rgba(191, 163, 107, 0.20),
		0 14px 28px -14px rgba(15, 49, 75, 0.28);
	background: linear-gradient(180deg, var(--wp--preset--color--cream) 0%, #fdf7e9 100%);
	min-height: 148px;
	padding-top: clamp(18px, 1.6vw, 22px);
	padding-bottom: clamp(14px, 1.4vw, 18px);
}
.mhb-operators__item.is-active .mhb-operators__logo-frame {
	height: 78px;
}
.mhb-operators__item.is-active .mhb-operators__logo {
	filter: saturate(1) contrast(1);
	opacity: 1;
}
.mhb-operators__item.is-active .mhb-operators__cta {
	opacity: 1;
	transform: translateY(0);
}
.mhb-operators__item.is-active .mhb-operators__rule-anim {
	transform: scaleX(1);
	width: 68px;
	opacity: 1;
}

/* Zero-count operators — soften but keep clickable */
.mhb-operators__item.is-coming-soon .mhb-operators__card { opacity: 0.92; }
.mhb-operators__item.is-coming-soon .mhb-operators__logo { filter: saturate(0.5) contrast(0.95); }

@media (max-width: 599px) {
	.mhb-operators__card { min-height: 130px; padding-top: 16px; }
	.mhb-operators__logo-frame { height: 54px; }
	.mhb-operators__cta { opacity: 1; transform: none; } /* touch: always show */
}

/* Ajax-swap loading state. operator-filter.js toggles is-mhb-loading on
   the .wp-block-query wrapper while a fetch is in flight; we dim the
   grid slightly so the user knows a swap is coming without blocking
   interaction. */
.wp-block-query.is-mhb-loading {
	opacity: 0.55;
	transition: opacity 160ms ease;
	pointer-events: none;
}

/* Main nav: replace the "Your Wishlist" link text with a heart icon.
   Page-list renders the page title verbatim, so swap it visually
   while keeping the original text accessible to screen readers. */
.site-main-nav .wp-block-navigation a[href$="/wishlist/"],
.site-main-nav .wp-block-navigation a[href$="/wishlist"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	color: transparent;
	font-size: 0;
	white-space: nowrap;
	overflow: hidden;
}
.site-main-nav .wp-block-navigation a[href$="/wishlist/"]::before,
.site-main-nav .wp-block-navigation a[href$="/wishlist"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--red, #C9291C);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.3C1.1 8 3.3 4.5 6.8 4.5c2 0 3.7 1.1 4.7 2.7 0.9-1.6 2.7-2.7 4.7-2.7 3.5 0 5.7 3.5 4.4 7.2C19.5 16.4 12 21 12 21z' fill='currentColor'/></svg>") center / 1.8rem 1.8rem no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.3C1.1 8 3.3 4.5 6.8 4.5c2 0 3.7 1.1 4.7 2.7 0.9-1.6 2.7-2.7 4.7-2.7 3.5 0 5.7 3.5 4.4 7.2C19.5 16.4 12 21 12 21z' fill='currentColor'/></svg>") center / 1.8rem 1.8rem no-repeat;
}
.site-main-nav .wp-block-navigation a[href$="/wishlist/"]:hover::before,
.site-main-nav .wp-block-navigation a[href$="/wishlist"]:hover::before {
	background-color: var(--wp--preset--color--red-hover, #A91F15);
}

/* "Catch" spring when a trip is added to the wishlist — JS adds
   .is-pulsing ~260ms after the source heart pulses, so the menu icon
   reads as receiving the saved item. */
@keyframes mhb-wishlist-nav-catch {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.4); }
	55%  { transform: scale(0.9); }
	80%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}
.site-main-nav .wp-block-navigation a[href$="/wishlist/"].is-pulsing,
.site-main-nav .wp-block-navigation a[href$="/wishlist"].is-pulsing {
	animation: mhb-wishlist-nav-catch 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
	.site-main-nav .wp-block-navigation a[href$="/wishlist/"].is-pulsing,
	.site-main-nav .wp-block-navigation a[href$="/wishlist"].is-pulsing {
		animation: none;
	}
}

/* "Settle" wiggle when a wish is removed — pairs with the puff ring at
   the source heart so the nav reads as having lost an item. */
@keyframes mhb-wishlist-nav-wiggle {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(-12deg); }
	45%  { transform: rotate(10deg); }
	70%  { transform: rotate(-6deg); }
	100% { transform: rotate(0); }
}
.site-main-nav .wp-block-navigation a[href$="/wishlist/"].is-wiggling,
.site-main-nav .wp-block-navigation a[href$="/wishlist"].is-wiggling {
	animation: mhb-wishlist-nav-wiggle 380ms ease-in-out;
	transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
	.site-main-nav .wp-block-navigation a[href$="/wishlist/"].is-wiggling,
	.site-main-nav .wp-block-navigation a[href$="/wishlist"].is-wiggling {
		animation: none;
	}
}

/* Force the WP navigation block into hamburger mode up to 899.98px.
   Core hides the overlay toggle and renders the menu inline above 600px;
   between 600 and ~900px the inline menu wraps onto a second row above
   the Plan My Trip CTA. Override the core min-width:600px rules in that
   range so the hamburger stays. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.site-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
	.site-main-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: none !important;
	}
	.site-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-main-nav .wp-block-navigation__responsive-container-close {
		display: block;
	}
	.site-main-nav .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Mobile / narrow tablet: place the hamburger toggle to the right of
   the Plan My Trip button. Reorder the flex siblings so the toggle ends
   up last, with the logo pinned to the left. Matches the forced-overlay
   range above. */
@media (max-width: 899.98px) {
	.site-main-nav > .wp-block-group {
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--30);
	}
	.site-main-nav .wp-block-site-logo {
		order: 1;
		margin-right: auto;
	}
	.site-main-nav .wp-block-buttons {
		order: 2;
	}
	.site-main-nav .wp-block-navigation {
		order: 3;
	}
}

/* ============================================================
   Header navigation — branded dropdown + active state.
   ============================================================
   Hooks off classes the WP Navigation block already emits:
     .has-child                        — submenu parent <li>
     .wp-block-navigation__submenu-container — submenu <ul>
     .current-menu-item                — active <li>
     .current-menu-ancestor            — parent of active <li>
   See docs/superpowers/specs/2026-05-22-header-menu-design.md.
   ============================================================ */

/* Dropdown panel — cream concierge card under the parent label. */
.site-main-nav .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 240px;
	padding-block: 0;
	padding-inline: 0;
	margin-block: 0;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-top: 2px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 49, 75, 0.08);
	transform: translateY(4px);
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
	pointer-events: none;
}
.site-main-nav .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.site-main-nav .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.site-main-nav .wp-block-navigation .has-child[aria-expanded="true"] > .wp-block-navigation__submenu-container {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Top-level item hover/focus — colour shifts to navy with a faux-bold
   via text-shadow. Real font-weight changes would re-flow the row as
   each label widens; the shadow thickens the glyph in place. */
/* Top-level nav items live inside .wp-block-navigation__container (the
   <ul>), which is nested several wrappers deep beneath the <nav> — so
   we target the container directly rather than the <nav>. */
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	transition: color .15s ease, text-shadow .15s ease;
}
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
	position: relative;
}
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover::after,
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.site-main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	text-shadow: 0 0 0.4px currentColor;
}

/* Dropdown item rows. */
.site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--sm);
	transition: background-color .15s ease, color .15s ease, text-shadow .15s ease;
}
.site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--navy-soft);
	text-shadow: 0 0 0.4px currentColor;
}

/* Active state — slightly heavier text, no marker. */
.site-main-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-main-nav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	font-weight: 600;
}

/* Pointer cursor on every nav surface — including the <li> wrappers and
   the submenu <ul> — so the cursor stays as a hand consistently while
   crossing the 4px gap between an anchor and its chevron button, or the
   gap between a parent item and its open dropdown. Without this the
   cursor flickers between hand and arrow as the user moves across the
   menu, which feels broken. */
.site-main-nav .wp-block-navigation,
.site-main-nav .wp-block-navigation ul,
.site-main-nav .wp-block-navigation li,
.site-main-nav .wp-block-navigation a,
.site-main-nav .wp-block-navigation .wp-block-navigation-item__content,
.site-main-nav .wp-block-navigation .wp-block-navigation__submenu-icon,
.site-main-nav .wp-block-navigation .wp-block-navigation__submenu-icon svg,
.site-main-nav .wp-block-navigation .wp-block-navigation-submenu__toggle {
	cursor: pointer;
}
.site-main-nav .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	pointer-events: none;
}

/* ============================================================
   Mobile overlay — full-screen branded menu.
   Navy background, cream/gold typography, gold dividers,
   red CTA accent. Matches the concierge aesthetic.
   ============================================================ */
@media (max-width: 899.98px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--red, #C9291C) !important;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		background: transparent !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--cream, #FFFDF8) !important;
		opacity: 0.7;
		transition: opacity 0.2s ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
		opacity: 1;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		fill: currentColor;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--serif, "Cormorant Garamond", Georgia, serif) !important;
		font-size: clamp(1.15rem, 4vw, 1.4rem) !important;
		font-weight: 500 !important;
		color: #fff !important;
		text-decoration: none !important;
		letter-spacing: 0.01em;
		padding: var(--wp--preset--spacing--20) 0 !important;
		display: block;
		transition: text-decoration 0.2s ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
		color: #fff !important;
		background: transparent !important;
		text-decoration: underline !important;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px;
	}

	/* No dividers between items, and suppress the browser focus outline that
	   WP draws on the first link when the dialog auto-focuses it — keyboard
	   focus stays legible via the :focus-visible underline above. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}

	/* Tighten the generous block gap between top-level items. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-top: var(--wp--preset--spacing--10) !important;
		gap: var(--wp--preset--spacing--10) !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		min-width: 0 !important;
		border-top: none !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: clamp(0.9rem, 3.2vw, 1.1rem) !important;
		color: rgba(255, 255, 255, 0.75) !important;
		font-family: var(--wp--preset--font-family--sans, "Inter", system-ui, sans-serif) !important;
		font-weight: 400 !important;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		/* Submenu list is block layout (gap doesn't apply); the tighter
		   per-item padding is what controls vertical rhythm here. */
		padding: var(--wp--preset--spacing--10) 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
		color: #fff !important;
		text-decoration: underline !important;
		text-underline-offset: 3px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		color: rgba(255, 255, 255, 0.8) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}

	/* White wordmark cloned into the top of the overlay by nav-enhance.js.
	   Fades + drifts in just after the overlay paints. */
	.wp-block-navigation__responsive-container.is-menu-open .mhb-mobile-menu-logo {
		display: flex;
		justify-content: center;
		margin: 0 auto var(--wp--preset--spacing--40);
		animation: mhb-menu-logo-in 620ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
	}
	.wp-block-navigation__responsive-container.is-menu-open .mhb-mobile-menu-logo img {
		width: clamp(140px, 46vw, 190px);
		height: auto;
		filter: brightness(0) invert(1);
		opacity: 0.95;
	}
	@keyframes mhb-menu-logo-in {
		from { opacity: 0; transform: translateY(-12px) scale(0.97); }
		to   { opacity: 1; transform: translateY(0) scale(1); }
	}
	@media (prefers-reduced-motion: reduce) {
		.wp-block-navigation__responsive-container.is-menu-open .mhb-mobile-menu-logo {
			animation: none;
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open a[href$="/wishlist/"],
	.wp-block-navigation__responsive-container.is-menu-open a[href$="/wishlist"] {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.8rem;
		height: 1.8rem;
		color: transparent !important;
		font-size: 0 !important;
		white-space: nowrap;
		overflow: hidden;
	}
	.wp-block-navigation__responsive-container.is-menu-open a[href$="/wishlist/"]::before,
	.wp-block-navigation__responsive-container.is-menu-open a[href$="/wishlist"]::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: #fff !important;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.3C1.1 8 3.3 4.5 6.8 4.5c2 0 3.7 1.1 4.7 2.7 0.9-1.6 2.7-2.7 4.7-2.7 3.5 0 5.7 3.5 4.4 7.2C19.5 16.4 12 21 12 21z' fill='currentColor'/></svg>") center / 1.8rem 1.8rem no-repeat;
		        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.3C1.1 8 3.3 4.5 6.8 4.5c2 0 3.7 1.1 4.7 2.7 0.9-1.6 2.7-2.7 4.7-2.7 3.5 0 5.7 3.5 4.4 7.2C19.5 16.4 12 21 12 21z' fill='currentColor'/></svg>") center / 1.8rem 1.8rem no-repeat;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		fill: currentColor;
	}
}

/* Mood finder — four wider tiles at the bottom of the front page. Slightly
   chunkier than the category grid because there are only four, and the
   tagline copy lives inside the overlay alongside the term name. */
:root :where(.mhb-home-mood-finder__grid) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
}
:root :where(.mhb-home-mood-finder__item) {
	margin: 0;
}
:root :where(.mhb-home-mood-finder__card) {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 8px);
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}
:root :where(.mhb-home-mood-finder__image) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--transition--slow, 0.6s ease);
}
:root :where(.mhb-home-mood-finder__card:hover .mhb-home-mood-finder__image) {
	transform: scale(1.05);
}
:root :where(.mhb-home-mood-finder__overlay) {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 49, 75, 0) 35%, rgba(15, 49, 75, 0.78) 100%);
}
:root :where(.mhb-home-mood-finder__label) {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	color: #fff;
}
:root :where(.mhb-home-mood-finder__name) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
	letter-spacing: 0.01em;
}
:root :where(.mhb-home-mood-finder__tagline) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	opacity: 0.92;
}
:root :where(.mhb-home-mood-finder__arrow) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1;
	margin-top: 0.2em;
}
@media (max-width: 900px) {
	:root :where(.mhb-home-mood-finder__grid) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	:root :where(.mhb-home-mood-finder__grid) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

/* ── Site header separation ───────────────────────────────────── */
.site-header {
    border-bottom: 1px solid var(--wp--preset--color--sand);
}

/* Let page content sit flush against the header on every template. The
   parent theme adds a top-level flow gap (≈24px) between the header and
   <main>; our pages open with a full-bleed parchment hero, so that gap
   reads as an unwanted band. Remove it globally. */
:root :where(.wp-site-blocks > main) {
    margin-block-start: 0;
}

/* Trim top padding of main nav so the logo sits visually centred between
   the utility-bar divider and the header's own bottom border. The
   transparent header keeps its original padding so the hero composition
   is unaffected. */
body:not(.has-transparent-header) .site-main-nav {
    padding-top: 0 !important;
}

/* ── Transparent header (front page only) ────────────────────── */
.has-transparent-header .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-bottom: 0;
}

.has-transparent-header main.wp-block-group {
    margin-top: 0 !important;
}

.has-transparent-header .site-header {
    gap: 0 !important;
}

.has-transparent-header .site-header > * + * {
    margin-block-start: 0 !important;
}

@media (max-width: 781px) {
    .utility-bar p.has-ink-muted-color {
        display: none !important;
    }
    .utility-bar p {
        font-size: var(--wp--preset--font-size--xs, 0.75rem) !important;
        white-space: nowrap;
    }
}

.has-transparent-header .utility-bar {
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
}

.has-transparent-header .utility-bar,
.has-transparent-header .utility-bar p,
.has-transparent-header .utility-bar a {
    color: rgba(255,255,255,0.85) !important;
}

.has-transparent-header .utility-bar a:hover {
    color: #fff !important;
}

.has-transparent-header .utility-bar .wp-block-social-links .wp-block-social-link svg {
    fill: rgba(255,255,255,0.85);
}

.has-transparent-header .site-main-nav {
    background: transparent;
}

.has-transparent-header .site-main-nav .wp-block-site-logo img {
    filter: brightness(0) invert(1);
}

.has-transparent-header .site-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.has-transparent-header .site-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.has-transparent-header .site-main-nav .wp-block-navigation__submenu-icon svg {
    color: #fff !important;
    stroke: #fff;
}

/* Glass dropdown is a desktop-only treatment. Scoped to ≥900px so it never
   leaks into the mobile full-screen overlay (which styles the submenu itself:
   transparent, borderless, underline-only on hover). */
@media (min-width: 900px) {
    .has-transparent-header .site-main-nav .wp-block-navigation__submenu-container {
        background-color: rgba(255,255,255,0.15) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-top: 2px solid rgba(255,255,255,0.4) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }

    .has-transparent-header .site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
    .has-transparent-header .site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
        color: #fff !important;
    }

    .has-transparent-header .site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .has-transparent-header .site-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
        background-color: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }
}

.has-transparent-header .site-main-nav .wp-block-button__link {
    color: #fff !important;
}

.has-transparent-header .site-main-nav .wp-block-navigation__responsive-container-open svg {
    fill: #fff;
}

.has-transparent-header .site-main-nav .wp-block-navigation a[href$="/wishlist/"]::before,
.has-transparent-header .site-main-nav .wp-block-navigation a[href$="/wishlist"]::before {
    background-color: #fff;
}

.has-transparent-header .site-main-nav .wp-block-navigation a[href$="/wishlist/"]:hover::before,
.has-transparent-header .site-main-nav .wp-block-navigation a[href$="/wishlist"]:hover::before {
    background-color: rgba(255, 255, 255, 0.75);
}

/* ── Immersive hero ──────────────────────────────────────────── */
.mhb-home-hero {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mhb-home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mhb-home-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.mhb-home-hero__bg img.is-active {
    opacity: 1;
}

.mhb-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        ellipse 80% 70% at 50% 50%,
        transparent 40%,
        rgba(241,234,223,0.14) 100%
    );
    pointer-events: none;
}

.mhb-home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.5) 50%,
        rgba(0,0,0,0.35) 100%
    );
    pointer-events: none;
}

.mhb-home-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 120px var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    gap: var(--wp--preset--spacing--50);
}

.mhb-home-hero__left {
    flex: 0 0 45%;
    position: relative;
    min-height: 220px;
}

.mhb-home-hero__right {
    flex: 0 0 55%;
}

/* ── Per-destination text panels ── */
.mhb-home-hero__text-panel {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: var(--wp--preset--spacing--40);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.mhb-home-hero__text-panel.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mhb-home-hero__country {
    display: block;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gold);
    margin-bottom: var(--wp--preset--spacing--10);
}

.mhb-home-hero__title {
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 var(--wp--preset--spacing--20);
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.mhb-home-hero__desc {
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--md);
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── CTA button ── */
.mhb-home-hero__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--wp--preset--spacing--30);
    padding: 14px 32px;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    color: #fff;
    background: var(--wp--preset--color--red);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
    position: relative;
    z-index: 2;
}

.mhb-home-hero__cta-link:hover {
    background: var(--wp--preset--color--red-hover);
    color: #fff;
}

/* ── Dot navigation ── */
.mhb-home-hero__dots {
    position: absolute;
    bottom: var(--wp--preset--spacing--40);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.mhb-home-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.mhb-home-hero__dot:hover {
    border-color: #fff;
}

.mhb-home-hero__dot.is-active {
    background: #fff;
    border-color: #fff;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .mhb-home-hero {
        height: auto;
        min-height: 100vh;
    }

    .mhb-home-hero__content {
        flex-direction: column;
        padding-top: 160px;
        padding-right: var(--wp--preset--spacing--50);
        padding-bottom: 80px;
        gap: var(--wp--preset--spacing--40);
    }

    .mhb-home-hero__left {
        flex: none;
        width: 100%;
    }

    .mhb-home-hero__right {
        flex: none;
        width: 100%;
    }

    .mhb-home-hero__title {
        font-size: clamp(1.55rem, 5.6vw, 2.45rem);
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .mhb-home-hero__dots {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        justify-content: center;
        padding-bottom: var(--wp--preset--spacing--30);
    }
}

/* ── Archive sort ────────────────────────────────────────── */

.mhb-archive-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--sm);
}

.mhb-archive-sort__label {
    color: var(--wp--preset--color--ink-muted);
    white-space: nowrap;
}

.mhb-archive-sort__select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wp--preset--color--cream);
    border: 1px solid var(--wp--preset--color--sand);
    border-radius: 4px;
    color: var(--wp--preset--color--ink);
    font-family: inherit;
    font-size: inherit;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F675D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 12px 7px;
}

.mhb-archive-sort__select:hover {
    border-color: var(--wp--preset--color--navy);
}

.mhb-archive-sort__select:focus-visible {
    outline: 2px solid var(--wp--preset--color--navy);
    outline-offset: 1px;
}

.mhb-archive-sort__btn {
    font-size: var(--wp--preset--font-size--sm);
    padding: 0.35rem 0.75rem;
}

}