/**
 * LHR redesign — archives lane (contract §3.4, archives agent).
 *
 * Scope: /hotels/ finder, brand/experience/award term hubs, /brands/ +
 * /experiences/ landings, search results, search form. Re-dresses the shared
 * finder markup (.m-filters*, .m-facet*, .sym-hotel-card / .m-card__*) purely
 * from CSS inside the template-level `.lhr-archive` wrapper so the AJAX layer
 * (REST sym-lhr/v1/hotels → shared hotels/card) swaps in identically-styled
 * cards. Shared primitives (.lhr-btn--gold/--text, .lhr-eyebrow,
 * .lhr-container…) live in base.css; page-scoped copies below carry the same
 * look while the cascade assembles (contract §4).
 *
 * Every token read uses var(--lhr-*, literal-fallback) so this lane renders
 * correctly even before base.css lands.
 *
 * @package Meridian
 * @license GPL-3.0-or-later
 */

/* ------------------------------------------------------------------
 * 0. Container + focus safety (page-scoped copies of base primitives)
 * ---------------------------------------------------------------- */

.lhr-arch-hero__inner,
.lhr-archive > .lhr-container,
.lhr-search > .lhr-container,
.lhr-landing .lhr-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 40px;
}

.lhr-arch-hero :focus-visible,
.lhr-archive :focus-visible,
.lhr-search :focus-visible,
.lhr-landing :focus-visible,
.lhr-searchform :focus-visible {
	outline: 2px solid var(--lhr-gold-soft, #cbb48d);
	outline-offset: 2px;
}

@media (max-width: 689px) {
	.lhr-arch-hero__inner,
	.lhr-archive > .lhr-container,
	.lhr-search > .lhr-container,
	.lhr-landing .lhr-container {
		padding-inline: 20px;
	}
}

/* ------------------------------------------------------------------
 * 1. Archive hero — image (dark scrim) or cream band
 * ---------------------------------------------------------------- */

/* The hero is its own stacking context with an explicit paint order —
   image (0) under scrim (1) under content (2). Belt-and-braces against any
   legacy/late rule un-positioning the section or re-stacking its layers
   (the flat-dark-hero QA bug on /brands/ + /experiences/). */
.lhr-hero.lhr-arch-hero,
.lhr-arch-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.lhr-arch-hero--image {
	display: flex;
	align-items: center;
	min-height: clamp(360px, 34vw, 440px);
	padding: 72px 0 132px;
	background-color: var(--lhr-dark, #191713);
}

.lhr-arch-hero--landing {
	min-height: clamp(380px, 36vw, 470px);
	padding-bottom: 96px;
}

.lhr-arch-hero--cream {
	padding: 72px 0 24px;
	background-color: var(--lhr-cream, #f7f4ee);
}

.lhr-arch-hero__media,
.lhr-arch-hero__scrim {
	position: absolute;
	inset: 0;
}

.lhr-arch-hero .lhr-arch-hero__media {
	z-index: 0;
}

.lhr-arch-hero .lhr-arch-hero__scrim {
	z-index: 1;
}

.lhr-arch-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	visibility: visible;
}

.lhr-arch-hero__scrim {
	background:
		linear-gradient(180deg, rgba(20, 17, 12, 0.28) 0%, rgba(20, 17, 12, 0) 32%),
		linear-gradient(90deg, rgba(20, 17, 12, 0.8) 0%, rgba(20, 17, 12, 0.45) 52%, rgba(20, 17, 12, 0.3) 100%);
}

.lhr-arch-hero__inner {
	position: relative;
	z-index: 2;
}

/* Breadcrumb — letterspaced micro caps. */
.lhr-arch-hero__crumbs {
	margin-bottom: 26px;
}

.lhr-arch-hero__crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lhr-arch-hero__crumb {
	display: inline-flex;
	align-items: center;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.lhr-arch-hero__crumb + .lhr-arch-hero__crumb::before {
	content: "\203A"; /* › */
	margin: 0 12px;
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
	letter-spacing: 0;
}

.lhr-arch-hero__crumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-arch-hero__crumb a:hover {
	color: #fff;
	opacity: 1;
}

.lhr-arch-hero--cream .lhr-arch-hero__crumb,
.lhr-arch-hero--cream .lhr-arch-hero__crumb + .lhr-arch-hero__crumb::before {
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-arch-hero--cream .lhr-arch-hero__crumb a {
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-arch-hero--cream .lhr-arch-hero__crumb a:hover {
	color: var(--lhr-gold, #a9885a);
}

/* Eyebrow — gold small caps. */
.lhr-arch-hero__eyebrow {
	margin: 0 0 18px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-arch-hero__title {
	margin: 0 0 20px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(38px, 4.6vw, 58px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
}

.lhr-arch-hero--cream .lhr-arch-hero__title {
	color: var(--lhr-ink, #22201c);
}

.lhr-arch-hero__sub {
	margin: 0;
	max-width: 560px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.lhr-arch-hero--cream .lhr-arch-hero__sub {
	color: var(--lhr-ink-soft, #6e675c);
}

/* Tablet: the tab card overlaps the hero by 72px, and the narrower measure
   wraps the dek deeper — grow the hero's bottom padding so the card keeps
   destination-term-style clearance and never touches the sub copy (QA:
   brand hubs @1024/768). Landing heroes have no overlapping card. */
@media (max-width: 1099px) {
	.lhr-arch-hero--image:not(.lhr-arch-hero--landing) {
		padding-bottom: 176px;
	}
}

@media (max-width: 689px) {
	.lhr-arch-hero--image {
		padding: 56px 0 112px;
		min-height: 0;
	}

	/* Keep the dek clear of the overlap card on phones too (72px overlap
	   + ~80px visible clearance). */
	.lhr-arch-hero--image:not(.lhr-arch-hero--landing) {
		padding-bottom: 152px;
	}

	.lhr-arch-hero--cream {
		padding-top: 48px;
	}
}

/* ------------------------------------------------------------------
 * 2. Archive shell
 * ---------------------------------------------------------------- */

.lhr-archive {
	padding-bottom: 96px;
}

.lhr-archive .m-hotels-archive {
	padding-bottom: 0;
}

/* Cream-hero pages breathe instead of overlapping. */
.lhr-archive--flush > .lhr-container {
	padding-top: 40px;
}

/* ------------------------------------------------------------------
 * 3. Experience tab strip (legacy icon catbar → gold-underline text tabs)
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-archive .m-filters__catbar {
	position: relative;
	/* Legacy editorial-overhaul.css declares `.m-filters__catbar { position:
	   sticky; top: 76px }` (64px under 1024px). Overriding only `position`
	   leaves that `top` live on this relative box, painting the strip 76px
	   below its flow slot — the toolbar pills then poke out above it into the
	   hero (the term-page "ghost boxes" bug). Pin the offset back to zero. */
	top: auto;
	z-index: 6;
	margin: -72px 0 0;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
}

/* Overflow affordance (QA'd): the strip scrolls (scrollbar hidden) and each
   edge carries a wide card-white fade so a clipped tab ("SAFARI &…")
   dissolves into "more this way" instead of hard-cutting mid-word. The
   partial tab stays deliberately visible under the fade's transparent half —
   that peek is the scroll cue. Both fades stop 3px short of the strip's
   bottom edge (1px hairline + the 2px gold active underline) so an active
   tab scrolled under a fade keeps its underline fully saturated.
   State classes come from the inline script in hotels/filters.php:
   `.is-end` (scrolled fully right / no overflow) drops the right fade,
   `.is-scrolled` raises the left one. No-JS fallback: static right fade. */
.lhr-redesign .lhr-archive .m-filters__catbar::before,
.lhr-redesign .lhr-archive .m-filters__catbar::after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 3px;
	width: 88px;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.lhr-redesign .lhr-archive .m-filters__catbar::after {
	right: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--lhr-card, #fff) 76%);
}

.lhr-redesign .lhr-archive .m-filters__catbar::before {
	left: 1px;
	background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, var(--lhr-card, #fff) 76%);
	opacity: 0;
}

.lhr-redesign .lhr-archive .m-filters__catbar.is-end::after {
	opacity: 0;
}

.lhr-redesign .lhr-archive .m-filters__catbar.is-scrolled::before {
	opacity: 1;
}

.lhr-redesign .lhr-archive--flush .m-filters__catbar {
	margin-top: 0;
}

.lhr-redesign .lhr-archive .m-filters__cats {
	display: flex;
	align-items: stretch;
	padding: 0 14px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lhr-redesign .lhr-archive .m-filters__cats::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Breathing room so the last tab can scroll clear of the fade. */
.lhr-redesign .lhr-archive .m-filters__cats::after {
	content: "";
	flex: 0 0 44px;
}

.lhr-redesign .lhr-archive .m-filters__cats-item {
	border-left: 0;
}

.lhr-redesign .lhr-archive .m-filters__cat {
	flex-direction: row;
	gap: 0;
	min-width: 0;
	padding: 21px 16px 18px;
	border-bottom: 2px solid transparent;
	color: var(--lhr-ink-soft, #6e675c);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-filters__cat-icon {
	display: none;
}

.lhr-redesign .lhr-archive .m-filters__cat-label {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

.lhr-redesign .lhr-archive .m-filters__cat:hover {
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-archive .m-filters__cat.is-active {
	color: var(--lhr-ink, #22201c);
	border-bottom-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-archive .m-filters__cat.is-active .m-filters__cat-label {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * 4. Filter toolbar — white hairline card fused under the tab strip
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-archive .m-filters {
	position: relative;
	z-index: 5;
	margin-bottom: 56px;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-top: 0;
}

/* No catbar rendered (no experience terms): the form itself overlaps. */
.lhr-redesign .lhr-archive .m-content > .m-filters:first-child {
	margin-top: -72px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-redesign .lhr-archive--flush .m-content > .m-filters:first-child {
	margin-top: 0;
}

.lhr-redesign .lhr-archive .m-filters__toolbar {
	padding: 18px 24px;
	gap: 14px 16px;
}

/* "186 HOTELS" — serif numeral + small caps. */
.lhr-redesign .lhr-archive .m-filters__found {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign .lhr-archive .m-filters__found strong,
.lhr-redesign .lhr-archive .m-filters__found [data-sym-found] {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--lhr-ink, #22201c);
	margin-right: 3px;
}

/* Search field. */
.lhr-redesign .lhr-archive .m-filters__field--search input[type="search"] {
	height: 54px;
	padding: 0 16px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: var(--lhr-ink, #22201c);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-filters__field--search input[type="search"]::placeholder {
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign .lhr-archive .m-filters__field--search input[type="search"]:hover,
.lhr-redesign .lhr-archive .m-filters__field--search input[type="search"]:focus {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

/* Facet pills — hairline squares restyled as labelled fields: faint
   small-caps label over the current value ("DESTINATION / All Destinations"),
   all server-rendered so the bar reads correctly before any JS runs. */
.lhr-redesign .lhr-archive .m-filters__pill {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 54px;
	padding: 0 16px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	transition: border-color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-filters__pill-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
	text-align: left;
}

.lhr-redesign .lhr-archive .m-filters__pill-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign .lhr-archive .m-filters__pill-value {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--lhr-ink, #22201c);
	/* Wide enough that every RESTING value ("Destinations", "All Brands",
	   "Any Price", "Any Score") renders whole — the tracked 11px caps run
	   ~1.5ch per glyph, so 19ch clears the 12-char worst case with room.
	   Only long SELECTED term names may ellipsize. */
	max-width: 19ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lhr-redesign .lhr-archive .m-filters__pill:hover {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-redesign .lhr-archive .m-filters__group[open] > .m-filters__pill {
	border-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-archive .m-filters__chevron {
	color: var(--lhr-gold, #a9885a);
}

/* Dropdown panels. */
.lhr-redesign .lhr-archive .m-filters__panel {
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	box-shadow: var(--lhr-shadow, 0 18px 50px rgba(34, 32, 28, 0.1));
	padding: 18px 20px;
	min-width: 280px;
}

.lhr-redesign .lhr-archive .m-facet__option {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-redesign .lhr-archive .m-facet__option:hover .m-facet__label {
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-archive .m-facet__option input[type="radio"],
.lhr-redesign .lhr-archive .m-facet__option input[type="checkbox"] {
	accent-color: var(--lhr-gold, #a9885a);
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.lhr-redesign .lhr-archive .m-facet__count {
	font-size: 11px;
	color: var(--lhr-ink-faint, #98917f);
}

/* Sort select — hairline square, small caps, gold chevron glyph. */
.lhr-redesign .lhr-archive .m-filters__sort {
	height: 54px;
	padding: 0 38px 0 16px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A9885A' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-filters__sort:hover {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

/* Mobile Filters trigger. */
.lhr-redesign .lhr-archive .m-filters__toggle.m-btn {
	height: 54px;
	padding: 0 20px;
	border: 1px solid var(--lhr-ink, #22201c);
	border-radius: 0;
	background: transparent;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
}

/* Apply — gold. */
.lhr-redesign .lhr-archive .m-filters__apply.m-btn {
	border: 0;
	border-radius: 0;
	background-color: var(--lhr-gold, #a9885a);
	color: #fff;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	height: 54px;
	transition: background-color 0.25s ease;
}

.lhr-redesign .lhr-archive .m-filters__apply.m-btn:hover {
	background-color: var(--lhr-gold-deep, #8d6f44);
}

/* Un-armed forms (award hubs render without [data-sym-filters] — the REST
   layer has no award param) get no JS auto-apply, so the desktop toolbar must
   keep its real submit visible; legacy filters.css hides it behind html.js. */
@media (min-width: 690px) {
	.lhr-redesign .lhr-archive .m-filters:not([data-sym-filters]) .m-filters__apply.m-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 24px;
	}
}

/* Active filter chips (JS-rendered). */
.lhr-redesign .lhr-archive .m-filters__chip {
	border-radius: 0;
	background-color: var(--lhr-dark, #191713);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Mobile drawer sheet. */
@media (max-width: 689px) {
	.lhr-redesign .lhr-archive .m-filters__drawer {
		background-color: var(--lhr-cream, #f7f4ee);
		padding-top: 32px;
	}

	.lhr-redesign .lhr-archive .m-filters__group {
		border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
	}

	.lhr-redesign .lhr-archive .m-filters__pill {
		border: 0;
		background: transparent;
		width: 100%;
		height: auto;
		min-height: 54px;
		padding: 12px 2px;
		justify-content: space-between;
	}

	.lhr-redesign .lhr-archive .m-filters__pill-value {
		max-width: 24ch;
	}

	.lhr-redesign .lhr-archive .m-filters__panel {
		border: 0;
		background: transparent;
		box-shadow: none;
		padding: 0 2px 18px;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
 * 5. Results grid — the Latest Reviews card pattern (shared markup,
 *    CSS-only re-dress; AJAX swaps stay identical)
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-archive .m-results__grid,
.lhr-redesign .lhr-archive .m-results__grid--2,
.lhr-redesign .lhr-archive .m-results__grid--list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}

@media (max-width: 1199px) {
	.lhr-redesign .lhr-archive .m-results__grid,
	.lhr-redesign .lhr-archive .m-results__grid--2,
	.lhr-redesign .lhr-archive .m-results__grid--list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.lhr-redesign .lhr-archive .m-results__grid,
	.lhr-redesign .lhr-archive .m-results__grid--2,
	.lhr-redesign .lhr-archive .m-results__grid--list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.lhr-redesign .lhr-archive .m-results__grid,
	.lhr-redesign .lhr-archive .m-results__grid--2,
	.lhr-redesign .lhr-archive .m-results__grid--list {
		grid-template-columns: 1fr;
	}
}

/* Card shell. */
.lhr-redesign .lhr-archive .sym-hotel-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.3s ease;
}

.lhr-redesign .lhr-archive .sym-hotel-card:hover,
.lhr-redesign .lhr-archive .sym-hotel-card:focus-within {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-redesign .lhr-archive .sym-hotel-card a {
	text-decoration: none;
}

/* Media — 4:3 crop, slow zoom on hover. */
.lhr-redesign .lhr-archive .m-card__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.lhr-redesign .lhr-archive .m-card__media::after {
	content: none;
}

.lhr-redesign .lhr-archive .m-card__media .m-card__media-link {
	display: block;
	height: 100%;
}

/* Per-card Swiper (option review_card_swiper) fills the 4:3 crop. */
.lhr-redesign .lhr-archive .m-card__media .swiper,
.lhr-redesign .lhr-archive .m-card__media .swiper-wrapper,
.lhr-redesign .lhr-archive .m-card__media .swiper-slide {
	height: 100%;
}

.lhr-redesign .lhr-archive .m-card__media .swiper-pagination-bullet-active {
	background-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-archive .m-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.lhr-redesign .lhr-archive .sym-hotel-card:hover .m-card__media img,
.lhr-redesign .lhr-archive .sym-hotel-card:focus-within .m-card__media img {
	transform: scale(1.04);
}

/* Body — eyebrow reordered above the title (flex order). */
.lhr-redesign .lhr-archive .m-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 22px 20px;
}

.lhr-redesign .lhr-archive .m-card__eyebrow {
	order: -1;
	margin: 0 0 10px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-archive .m-card__title {
	margin: 0 0 10px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.lhr-redesign .lhr-archive .m-card__title a {
	color: var(--lhr-ink, #22201c);
	transition: color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-card__title a:hover {
	color: var(--lhr-gold, #a9885a);
	opacity: 1;
}

/* Award chip on its own row — sits after the eyebrow (order -1) and above
   the serif title, so long names never wrap around the badge. */
.lhr-redesign .lhr-archive .m-card__badges {
	margin: 0 0 10px;
	line-height: 1;
}

.lhr-redesign .lhr-archive .m-card__badges .m-badge {
	display: inline-block;
	height: auto;
	margin: 0;
	padding: 4px 8px;
	border: 1px solid var(--lhr-gold-soft, #cbb48d);
	border-radius: 0;
	background: transparent;
	transform: none;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
	white-space: nowrap;
}

/* Verdict line — two-line clamp. */
.lhr-redesign .lhr-archive .m-card__excerpt {
	margin: 0 0 18px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: var(--lhr-ink-soft, #6e675c);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta row — hairline top, stars + serif numeral left. */
.lhr-redesign .lhr-archive .m-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
	min-height: 38px;
}

.lhr-redesign .lhr-archive .m-card__price {
	display: none;
}

.lhr-redesign .lhr-archive .m-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/* Serif numeral on the /5 editorial scale — "4.6 /5" (review-sidebar
   mockup treatment; hotels/rating stars-numeral mode). */
.lhr-redesign .lhr-archive .m-card__rating .m-rating__value {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating__scale {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	color: var(--lhr-ink-faint, #98917f);
}

/* Real whole-star-rounded gold stars (server-rendered by hotels/rating
   in stars-numeral mode — identical in AJAX card swaps). */
.lhr-redesign .lhr-archive .m-card__rating .m-rating__stars {
	display: inline-flex;
	gap: 3px;
	margin-left: 5px;
	align-self: center;
	transform: translateY(-1px);
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating__star {
	width: 12px;
	height: 12px;
	background-color: var(--lhr-hairline, #e5dfd2);
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating__star--full {
	background-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating__star--half {
	background-color: transparent;
	background-image: linear-gradient(to right, var(--lhr-gold, #a9885a) 50%, var(--lhr-hairline, #e5dfd2) 50%);
}

.lhr-redesign .lhr-archive .m-card__rating .m-rating__label {
	display: none;
}

/* READ REVIEW → — pseudo on the title anchor, pinned to the meta row so it
   stays a real link through AJAX card swaps. */
.lhr-redesign .lhr-archive .m-card__title a::after {
	content: "Read Review \2192";
	position: absolute;
	right: 22px;
	bottom: 27px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--lhr-gold, #a9885a);
	transition: color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-card__title a:hover::after {
	color: var(--lhr-gold-deep, #8d6f44);
}

/* ------------------------------------------------------------------
 * 6. Pagination, load more, empty state
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-archive .m-pagination,
.lhr-redesign .lhr-search .m-pagination {
	margin-top: 56px;
}

.lhr-redesign .lhr-archive .m-pagination .nav-links,
.lhr-redesign .lhr-search .m-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.lhr-redesign .lhr-archive .m-pagination .page-numbers,
.lhr-redesign .lhr-search .m-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lhr-redesign .lhr-archive .m-pagination a.page-numbers:hover,
.lhr-redesign .lhr-search .m-pagination a.page-numbers:hover {
	border-color: var(--lhr-gold, #a9885a);
	color: var(--lhr-gold-deep, #8d6f44);
	opacity: 1;
}

.lhr-redesign .lhr-archive .m-pagination .page-numbers.current,
.lhr-redesign .lhr-search .m-pagination .page-numbers.current {
	background-color: var(--lhr-gold, #a9885a);
	border-color: var(--lhr-gold, #a9885a);
	color: #fff;
}

.lhr-redesign .lhr-archive .m-pagination .page-numbers.dots,
.lhr-redesign .lhr-search .m-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--lhr-ink-faint, #98917f);
}

/* SEO pager (hotels/results.php): crawlable rel prev/next links only —
   visually hidden (clip pattern, not display:none, so crawlers and
   keyboard/screen-reader users still reach them) while Load More is the
   one visible mechanism. Overrides the numbered-pager layout above. */
.lhr-redesign .m-pagination--seo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Load more — the single visible pagination mechanism (the numbered pager
   is demoted to hidden rel prev/next SEO links in hotels/results.php):
   centered gold-hairline, gold-text button. */
.lhr-redesign .lhr-archive .m-loadmore.m-btn {
	height: 52px;
	padding: 0 42px;
	border: 1px solid var(--lhr-gold, #a9885a);
	border-radius: 0;
	background: transparent;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lhr-redesign .lhr-archive .m-loadmore.m-btn:hover {
	background-color: var(--lhr-gold, #a9885a);
	color: #fff;
	opacity: 1;
}

.lhr-redesign .lhr-archive .m-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

/* Empty state. */
.lhr-redesign .lhr-archive .m-results__empty {
	padding: 88px 24px;
	text-align: center;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	background-color: var(--lhr-card, #fff);
}

.lhr-redesign .lhr-archive .m-results__empty-title {
	margin: 0 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-archive .m-results__empty-text {
	margin: 0 auto 28px;
	max-width: 34em;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-redesign .lhr-archive .m-results__empty .m-btn {
	height: 50px;
	padding: 0 30px;
	border: 1px solid var(--lhr-ink, #22201c);
	border-radius: 0;
	background: transparent;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-archive .m-results__empty .m-btn:hover {
	background-color: var(--lhr-dark, #191713);
	color: #fff;
}

/* ------------------------------------------------------------------
 * 7. Landings shared (Brands + Experiences)
 * ---------------------------------------------------------------- */

.lhr-landing {
	padding-bottom: 96px;
}

.lhr-landing .lhr-section {
	padding-top: 80px;
}

.lhr-landing__intro-body {
	max-width: 720px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.8;
	color: var(--lhr-ink-soft, #6e675c);
}

/* Section head: eyebrow left, view-all text link right. */
.lhr-landing .lhr-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.lhr-landing h2.lhr-eyebrow,
.lhr-landing .lhr-eyebrow {
	margin: 0;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
}

.lhr-landing .lhr-btn--text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.lhr-landing .lhr-btn--text::after {
	content: "\2192";
	color: var(--lhr-gold, #a9885a);
	font-size: 14px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.lhr-landing .lhr-btn--text:hover {
	color: var(--lhr-gold, #a9885a);
	opacity: 1;
}

.lhr-landing .lhr-btn--text:hover::after {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------
 * 8. Brands landing — hairline-framed wordmark + image-strip cards
 *    (QA'd: pure wordmark boxes read empty/AI-generic — each card now
 *    carries a 16:10 strip from the brand's top-rated hotel, rendered
 *    by template-brands.php via meridian_lhr_term_hero_image()).
 * ---------------------------------------------------------------- */

.lhr-brands__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.lhr-brand-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.lhr-brand-card:hover,
.lhr-brand-card:focus-visible {
	border-color: var(--lhr-gold-soft, #cbb48d);
	box-shadow: var(--lhr-shadow, 0 18px 50px rgba(34, 32, 28, 0.1));
	transform: translateY(-4px);
	opacity: 1;
}

/* 16:10 image strip — hairline rule between photograph and wordmark. */
.lhr-brand-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-brand-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.lhr-brand-card:hover .lhr-brand-card__media img,
.lhr-brand-card:focus-visible .lhr-brand-card__media img {
	transform: scale(1.04);
}

.lhr-brand-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 26px 22px 24px;
}

/* No image resolved yet — keep the tall centered wordmark composition. */
.lhr-brand-card--bare .lhr-brand-card__body {
	min-height: 168px;
	padding: 36px 22px;
}

.lhr-brand-card__mark {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(34, 32, 28, 0.75);
	margin-right: -0.22em; /* recenters the letterspaced lockup */
	transition: color 0.3s ease;
}

.lhr-brand-card:hover .lhr-brand-card__mark {
	color: var(--lhr-ink, #22201c);
}

.lhr-brand-card__count {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

/* Orphan control (QA'd: no lone-card hole in the last row). The column
   count changes per breakpoint, so the remainder math lives in
   :nth-child selectors — a lone last card centers, a short last row
   spans out to fill. */
@media (min-width: 1100px) {
	/* 4-up: remainder 1 → centered double-width; remainder 2 / 3 → span. */
	.lhr-brands__cell:last-child:nth-child(4n + 1) {
		grid-column: 2 / span 2;
	}

	.lhr-brands__cell:nth-last-child(2):nth-child(4n + 1) {
		grid-column: 1 / span 2;
	}

	.lhr-brands__cell:last-child:nth-child(4n + 2) {
		grid-column: 3 / span 2;
	}

	.lhr-brands__cell:last-child:nth-child(4n + 3) {
		grid-column: 3 / span 2;
	}
}

@media (max-width: 1099px) {
	.lhr-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 3-up: remainder 1 → center; remainder 2 → last spans out. */
	.lhr-brands__cell:last-child:nth-child(3n + 1) {
		grid-column: 2;
	}

	.lhr-brands__cell:last-child:nth-child(3n + 2) {
		grid-column: 2 / span 2;
	}
}

@media (max-width: 767px) {
	.lhr-brands__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.lhr-brand-card__mark {
		font-size: 16px;
	}

	/* 2-up: a lone last card spans the row. */
	.lhr-brands__cell:last-child:nth-child(3n + 1),
	.lhr-brands__cell:last-child:nth-child(3n + 2) {
		grid-column: auto;
	}

	.lhr-brands__cell:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 459px) {
	.lhr-brands__grid {
		grid-template-columns: 1fr;
	}

	.lhr-brands__cell:last-child:nth-child(2n + 1) {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------
 * 9. Experiences landing — Featured Collections cards + tile strip
 * ---------------------------------------------------------------- */

.lhr-collections__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.lhr-collection-card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--lhr-dark, #191713);
	text-decoration: none;
}

.lhr-collection-card:hover {
	opacity: 1;
}

.lhr-collection-card__media,
.lhr-collection-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lhr-collection-card__media img {
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.lhr-collection-card:hover .lhr-collection-card__media img,
.lhr-collection-card:focus-visible .lhr-collection-card__media img {
	transform: scale(1.04);
}

/* Scrim — the destinations-lane recipe (destinations.css fixed this after
   QA: white titles were sitting on white sofas/bright palms). Same values,
   duplicated here because base files must not cross-edit: a strong bottom
   ramp plus a left column wash under the bottom-left type. */
.lhr-collection-card__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(15, 13, 10, 0) 26%, rgba(15, 13, 10, 0.42) 60%, rgba(15, 13, 10, 0.86) 100%),
		linear-gradient(90deg, rgba(15, 13, 10, 0.26) 0%, rgba(15, 13, 10, 0) 55%);
}

.lhr-collection-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 30px;
}

.lhr-collection-card__title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: #fff;
}

.lhr-collection-card__sub {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
}

.lhr-collection-card__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 10px;
}

.lhr-collection-card__count {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.lhr-collection-card__cta {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	transition: color 0.2s ease;
}

.lhr-collection-card__cta::after {
	content: " \2192";
	color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-collection-card:hover .lhr-collection-card__cta {
	color: var(--lhr-gold-soft, #cbb48d);
}

@media (max-width: 767px) {
	.lhr-collections__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lhr-collection-card {
		aspect-ratio: 4 / 3;
	}

	.lhr-collection-card__body {
		padding: 20px 22px;
	}
}

/* Tile strip — remaining experience terms. */
.lhr-exp-more__eyebrow {
	margin-bottom: 32px;
}

.lhr-exp-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}

.lhr-exp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 30px 14px 26px;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.3s ease;
}

.lhr-exp-tile:hover,
.lhr-exp-tile:focus-visible {
	border-color: var(--lhr-gold-soft, #cbb48d);
	opacity: 1;
}

.lhr-exp-tile__icon {
	width: 30px;
	height: 30px;
	color: var(--lhr-gold, #a9885a);
}

.lhr-exp-tile__label {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
}

.lhr-exp-tile__count {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

@media (max-width: 1023px) {
	.lhr-exp-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.lhr-exp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* ------------------------------------------------------------------
 * 10. Search results
 * ---------------------------------------------------------------- */

.lhr-search {
	padding-bottom: 96px;
}

/* Finder cross-link band. */
.lhr-search__hotels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 22px 28px;
	margin: 40px 0 48px;
	background-color: var(--lhr-card, #fff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-search__hotels-text {
	margin: 0;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lhr-ink-soft, #6e675c);
}

/* Page-scoped gold button (base primitive copy). */
.lhr-search .lhr-btn--gold,
.lhr-redesign .lhr-searchform .lhr-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border: 0;
	border-radius: 0;
	background-color: var(--lhr-gold, #a9885a);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.lhr-search .lhr-btn--gold:hover,
.lhr-redesign .lhr-searchform .lhr-searchform__submit:hover {
	background-color: var(--lhr-gold-deep, #8d6f44);
	color: #fff;
	opacity: 1;
}

/* Result rows. */
.lhr-search__list {
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-search-row {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 34px 0;
	border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-search-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.lhr-search-row__type {
	margin: 0 0 10px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-search-row__title {
	margin: 0 0 10px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.lhr-search-row__title a {
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-search-row__title a:hover {
	color: var(--lhr-gold, #a9885a);
	opacity: 1;
}

.lhr-search-row__excerpt {
	margin: 0 0 16px;
	max-width: 64ch;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--lhr-ink-soft, #6e675c);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lhr-search-row__meta {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
}

.lhr-search-row__date {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-search-row__more {
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-search-row__more::after {
	content: " \2192";
	color: var(--lhr-gold, #a9885a);
}

.lhr-search-row__more:hover {
	color: var(--lhr-gold, #a9885a);
	opacity: 1;
}

.lhr-search-row__media {
	flex: 0 0 280px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
}

.lhr-search-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.lhr-search-row:hover .lhr-search-row__media img {
	transform: scale(1.04);
}

@media (max-width: 689px) {
	.lhr-search-row {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 18px;
	}

	.lhr-search-row__media {
		flex-basis: auto;
	}
}

/* Empty state. */
.lhr-search__none {
	padding: 64px 0 32px;
	max-width: 620px;
}

.lhr-search__none-title {
	margin: 0 0 14px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 500;
	color: var(--lhr-ink, #22201c);
}

.lhr-search__none-text {
	margin: 0 0 28px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-search__none-hotels {
	margin: 24px 0 0;
}

.lhr-search .lhr-btn--text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink, #22201c);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lhr-search .lhr-btn--text::after {
	content: "\2192";
	color: var(--lhr-gold, #a9885a);
}

.lhr-search .lhr-btn--text:hover {
	color: var(--lhr-gold, #a9885a);
	opacity: 1;
}

/* ------------------------------------------------------------------
 * 11. Search form (global restyle — overlay, 404, empty states)
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-searchform {
	display: flex;
	align-items: stretch;
	max-width: 560px;
}

.lhr-redesign .lhr-searchform .lhr-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-right: 0;
	border-radius: 0;
	background-color: var(--lhr-card, #fff);
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: var(--lhr-ink, #22201c);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.lhr-redesign .lhr-searchform .lhr-searchform__input::placeholder {
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign .lhr-searchform .lhr-searchform__input:focus {
	border-color: var(--lhr-gold-soft, #cbb48d);
}

.lhr-redesign .lhr-searchform .lhr-searchform__submit {
	height: 52px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------
 * 12. Reduced motion
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lhr-redesign .lhr-archive .m-card__media img,
	.lhr-collection-card__media img,
	.lhr-search-row__media img,
	.lhr-brand-card,
	.lhr-brand-card__media img,
	.lhr-redesign .lhr-archive .m-filters__catbar::before,
	.lhr-redesign .lhr-archive .m-filters__catbar::after,
	.lhr-landing .lhr-btn--text::after {
		transition: none;
	}

	.lhr-redesign .lhr-archive .sym-hotel-card:hover .m-card__media img,
	.lhr-collection-card:hover .lhr-collection-card__media img,
	.lhr-search-row:hover .lhr-search-row__media img,
	.lhr-brand-card:hover,
	.lhr-brand-card:focus-visible,
	.lhr-brand-card:hover .lhr-brand-card__media img,
	.lhr-brand-card:focus-visible .lhr-brand-card__media img {
		transform: none;
	}
}

/* ==================================================================
 * cards-agent — shared hotel-card QA fixes (July 2026 visual QA)
 * Scope: the shared .sym-hotel-card layer wherever it renders
 * (hotels archive, brand/experience/destination terms, home, search).
 * ================================================================== */

/* (a) Stars pinned to gold EVERYWHERE under the redesign. The gold star
   rules above are scoped to `.lhr-archive`, so pages that render the same
   card in another shell (e.g. taxonomy-sym_destination's .lhr-dest-archive)
   fell through to legacy style.css `--m-color-rating` near-ink stars.
   Pin both star modes to the token palette at body scope. */
.lhr-redesign .m-rating--stars .m-rating__star,
.lhr-redesign .m-rating--stars-numeral .m-rating__star {
	background-color: var(--lhr-hairline, #e5dfd2);
}

.lhr-redesign .m-rating--stars .m-rating__star--full,
.lhr-redesign .m-rating--stars-numeral .m-rating__star--full {
	background-color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .m-rating--stars .m-rating__star--half,
.lhr-redesign .m-rating--stars-numeral .m-rating__star--half {
	background-color: transparent;
	background-image: linear-gradient(to right, var(--lhr-gold, #a9885a) 50%, var(--lhr-hairline, #e5dfd2) 50%);
}

/* (b) Per-card swiper chrome (prev/next circles + pager dots) hidden on
   ALL hotel cards. Decision: the mockup card language has no carousel
   chrome at all, and on term/archive grids the mini-carousel reads as
   stray UI painted over the photograph. Swiper itself stays initialised
   (drag/swipe still works where active) — this only removes the chrome,
   so the carousel JS is untouched. */
.lhr-redesign .sym-hotel-card .m-card__nav,
.lhr-redesign .sym-hotel-card .m-card__media .swiper-pagination {
	display: none !important;
}

/* (c) Uniform rating-row wrap below 1024px: the from-price always drops
   to its own line under the stars, so adjacent cards never disagree
   (short USD prices used to stay inline while long JPY prices wrapped).
   At >=1024px the row stays inline as before. Price visibility is left
   to each page's rules (the /hotels/ shell hides it), so display is not
   touched here. */
@media (max-width: 1023.98px) {
	.lhr-redesign .sym-hotel-card .m-card__meta {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.lhr-redesign .sym-hotel-card .m-card__meta .m-card__price {
		flex-basis: 100%;
	}
}