/**
 * Single listing pages — the shared card and hero skin.
 *
 * ⚠️ PRESENTATION ONLY. No markup, no template, no block config. Every rule
 * hooks onto what MyListing's own single-page builder already renders, so the
 * block builder keeps working: reorder a block in the admin and this follows.
 *
 * These rules were developed on the church page and are lifted here verbatim so
 * that every listing type — places, events, jobs, vehicles, real estate,
 * classifieds, members — shares one card, one radius, one title size, one gap
 * and one hero treatment.
 *
 * ⚠️ SERVICES IS EXCLUDED, deliberately. `mfv-services-skin.css` is a mature
 * 3,300-line treatment of the same surfaces with its own tokens, its own hero
 * and its own mobile layout. Loading a second opinion underneath it would not
 * make the two agree, it would make whichever loaded last win at random. The
 * services page is already where these values came from.
 *
 * Load order: this file, then any type-specific skin, so a type can override.
 *
 * Block anatomy every rule relies on:
 *   div.col-md-*.block-type-<X>
 *     div.element
 *       div.pf-head  >  div.title-style-1  >  i.mi.<glyph> + h3.title-style-1__heading
 *       div.pf-body
 */

/*
 * ⚠️ The TOKENS are declared for every type, services included.
 *
 * They were behind `:not(.type-services)` along with the rules that used them.
 * But shared rules added later — the tab bar, the review tab, the price chip —
 * are scoped to `body.single-listing`, so on services they resolved
 * `var(--ls-card)` against a variable that did not exist and silently computed
 * to nothing: a review card with no background, and no error anywhere.
 *
 * Declaring a variable costs nothing and changes nothing on its own. It is the
 * RULES that stay scoped away from services, not the palette they read from.
 */
body.single-listing {
	--ls-ink:    #16232e;
	--ls-muted:  #6b7d8c;
	--ls-line:   #e6ecf1;
	--ls-card:   #ffffff;
	--ls-page:   #f7f9fa;
	--ls-teal:   var(--mfv-primary, #0e7490);
	--ls-wash:   #e4f1f4;
	--ls-ink-2:  #084a5c;
	--ls-tealln: #cfe6ea;

	--ls-radius: 7px;
	--ls-gap:    20px;
	--ls-pad:    16px 18px 18px;
	--ls-shadow: 0 1px 2px rgba(22, 35, 46, .04), 0 8px 24px rgba(22, 35, 46, .05);
}

body.single-listing { background: var(--ls-page); }

body.single-listing .profile-body,
body.single-listing .tab-content.listing-tabs { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — a shallower cover, and a wash that keeps white text legible
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1201px) {
	body.single-listing .profile-cover,
	body.single-listing .profile-cover-gallery .header-gallery-carousel,
	body.single-listing .profile-cover-gallery .owl-stage-outer,
	body.single-listing .profile-cover-gallery .owl-item,
	body.single-listing .profile-cover-gallery .owl-item .item {
		height: 380px !important;
		min-height: 380px !important;
		max-height: 380px !important;
	}
}

body.single-listing .profile-cover { position: relative; }

/*
 * Solid at the base, holding to the halfway line, then clearing toward the top
 * so the upper half of the photograph is close to untouched. The listing title
 * sits low in the cover, which is why a vertical wash is enough.
 */
body.single-listing .profile-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;         /* the gallery carousel still takes clicks */
	/*
	 * Full strength through the bottom quarter, then clearing gradually over
	 * the remaining three quarters.
	 *
	 * ⚠️ Seven stops, not three. A gradient that goes from a held value to
	 * near-transparent in one step puts all of its change in that step, and the
	 * eye reads it as a band drawn across the photograph. Spreading the falloff
	 * over many small steps is what makes it read as light rather than as an
	 * edge — the identity sits in the bottom quarter, so only that quarter needs
	 * to be solid.
	 */
	background: linear-gradient(
		to top,
		rgba(11, 33, 42, .88)   0%,
		rgba(11, 33, 42, .86)  25%,
		rgba(11, 33, 42, .72)  40%,
		rgba(11, 33, 42, .55)  55%,
		rgba(11, 33, 42, .38)  70%,
		rgba(11, 33, 42, .22)  82%,
		rgba(11, 33, 42, .10)  92%,
		rgba(11, 33, 42, .02) 100%
	);
}

/*
 * ⚠️ The identity is anchored to the BOTTOM of the cover.
 *
 * The theme puts `.main-info-desktop` in FLOW at the top of the cover and then
 * pulls `.listing-main-info` up another 30px. With a title, a tagline and a
 * price row that block runs off the top of the frame and the site header cuts
 * the title in half. The cover is `position: relative` already, so anchoring
 * needs no wrapper — and the block then grows upward into the photograph
 * instead of out of it.
 *
 * ⚠️ z-index 20 because the cover itself carries 12: they are positioned
 * siblings in one stacking context, and anything lower lets the photograph
 * paint straight over the title.
 */
@media (min-width: 1201px) {
	body.single-listing .profile-cover .main-info-desktop {
		position: absolute !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		padding-bottom: 26px;
	}

	/* Undo the theme's upward pull — it exists for the flow layout above. */
	body.single-listing .profile-cover .listing-main-info {
		top: 0;
		/*
		 * ⚠️ `display: flex` IS LOAD-BEARING FOR THE LINE BELOW IT.
		 *
		 * `align-items: flex-end` was already here and doing nothing at all:
		 * this container is a Bootstrap `.container`, i.e. display:block, and
		 * align-items is inert outside a flex or grid context. The two columns
		 * are a title (three lines plus a tagline, 138px) and the button row
		 * (80px), so the shorter one sat at the TOP of the row — the buttons
		 * floating ~58px above the title's baseline.
		 *
		 * Making the row flex activates the alignment that was always intended,
		 * and bottom-aligns the buttons with the title no matter how many lines
		 * the title runs to. A margin-top would have fixed the three-line case
		 * and broken the one-line case.
		 */
		display: flex;
		align-items: flex-end;
		/*
		 * ⚠️ Every type on the SAME measure: 1200px centred, so the title,
		 * the emblem and the buttons start where the cards below them do.
		 * The church was already on this measure and the other types ran flush
		 * to the viewport edge, so the two never lined up down the page.
		 */
		max-width: 1200px;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 20px;
		/*
		 * ⚠️ The theme centres this container with `left: 50%` plus a
		 * `translateX(-50%)`, which assumes a full-width box. Give it a
		 * max-width and auto margins as well and the two centring methods
		 * STACK — correct margins, then another half-width across and back —
		 * landing the identity flush right. Only one can be in charge.
		 */
		left: 0 !important;
		right: auto !important;
		transform: none !important;
	}

	/* The grid gutter would otherwise offset the identity past the measure. */
	body.single-listing .profile-cover .listing-main-info > .row > [class*='col-'],
	body.single-listing .profile-cover .listing-main-info [class*='col-md-'] {
		padding-left: 0;
		padding-right: 0;
	}

	body.single-listing .profile-cover .listing-main-buttons {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		height: 100%;
	}
}

/*
 * ⚠️ `.main-info-desktop` is NOT in this rule.
 *
 * It was, and being later in the file at equal specificity it silently
 * overrode the `position: absolute` in the media query above — the identity
 * snapped back to the top of the cover and the header cut the title in half
 * again, with both rules present and neither reporting a problem. A cascade
 * collision, not a missing declaration.
 */
body.single-listing .profile-cover .listing-main-info {
	position: relative;
	z-index: 20;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ !important: the theme sets `.profile-body .element { border-radius:
   var(--mfl-radius-lg) !important }`, so a plain declaration never lands. */
body.single-listing [class*='block-type-'] > .element {
	background: var(--ls-card);
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-radius) !important;
	box-shadow: var(--ls-shadow);
	overflow: hidden;
}

/*
 * ⚠️ THE CARD'S INSET IS THIS ONE DECLARATION.
 *
 * It used to come from three places at once — the theme's `.element` padding,
 * plus `.pf-head`, plus `.pf-body` — stacking to a value no single rule
 * explained. Those two are vertical-only below, so changing card padding means
 * changing this line and nothing else.
 */
body.single-listing .cts-left-column .element,
body.single-listing .cts-right-column .element,
body.single-listing .cts-side-column .element {
	margin-bottom: 0 !important;
	padding: var(--ls-pad) !important;
}

/* ⚠️ !important: the theme declares `.element .pf-head { padding: 14px 20px
   !important }`. Vertical only — the horizontal inset belongs to .element. */
body.single-listing [class*='block-type-'] > .element > .pf-head {
	padding: 0 0 10px !important;
	background: transparent !important;
	background-image: none !important;
	border-bottom: 1px solid var(--ls-line);
}

body.single-listing [class*='block-type-'] > .element > .pf-body {
	padding: 12px 0 0 !important;
	font-size: 14px;
	line-height: 1.65;
	color: #4c6068;
}

/*
 * ⚠️ A card that owns a tooltip must not clip it. The radius needs
 * `overflow: hidden`, but the work-hours card renders its "Toggle weekly
 * schedule" tooltip ABOVE its trigger, and the same rule sliced it into a bar
 * hanging off the top edge.
 */
body.single-listing [class*='block-type-'] > .element:has(.tooltip-container) {
	overflow: visible;
}

body.single-listing .tooltip-container {
	z-index: 30;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CARD TITLES — one size everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .pf-head .title-style-1 {
	display: flex;
	align-items: center;
	gap: 11px;
}

body.single-listing .pf-head .title-style-1__heading,
body.single-listing .block-type-related_listing .title-style-1__heading {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ls-ink) !important;
}

/*
 * ⚠️ Padding zeroed. The theme gives this icon `padding-right: 6px` to space it
 * from the heading — fine on a bare glyph, but once it is a 38px tinted chip
 * that padding moves INSIDE the box, leaving a 32px content area in a 38px
 * square and every glyph 3px left of centre. The gap above handles spacing.
 */
body.single-listing .pf-head .title-style-1 > i.mi,
body.single-listing .pf-head .title-style-1 > i[class*='mfv-ic-'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--ls-wash);
	color: var(--ls-teal);
	font-size: 21px;
	line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. COLUMN RHYTHM — the gap belongs to the column, not the cards
   ⚠️ Per-card margins gave the two columns different rhythms, because the
   spacing lives on the INNER `.element` (`.single-job-listing .element {
   margin-bottom: 25px }`) and hook-injected cards carry none at all. Letting
   the column space its own children makes the rhythm independent of what each
   child happens to be.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ ALL FOUR WRAPPER CLASSES, INCLUDING `.cts-main-column`.
 *
 * The child's templates/listing.php names the two columns differently per page
 * template: `content-sidebar` / `sidebar-content` produce
 * `.cts-left-column` + `.cts-right-column`, while `two-columns` produces
 * `.cts-main-column` + `.cts-side-column`.
 *
 * `.cts-main-column` was missing from this list, so on a `two-columns` layout
 * (real estate uses it) only the RIGHT column became a gapped flex column. The
 * left kept per-card margins and its first card sat flush at the wrapper top,
 * while the right column's first card sat one `gap` lower — a 20px step between
 * two columns that are supposed to start on the same line.
 *
 * If a fifth wrapper class is ever added to listing.php, it belongs here too.
 */
body.single-listing .cts-left-column,
body.single-listing .cts-right-column,
body.single-listing .cts-main-column,
body.single-listing .cts-side-column {
	display: flex;
	flex-direction: column;
	gap: var(--ls-gap);
}

body.single-listing .cts-left-column > *,
body.single-listing .cts-right-column > *,
body.single-listing .cts-main-column > *,
body.single-listing .cts-side-column > *,
body.single-listing [class*='block-type-'] {
	margin-bottom: 0 !important;
}

/* ⚠️ An empty child still claims a gap in a gapped flex column, and these
   pages have a habit of gaining an injected empty <div>. */
body.single-listing .cts-left-column > *:empty,
body.single-listing .cts-right-column > *:empty,
body.single-listing .cts-main-column > *:empty,
body.single-listing .cts-side-column > *:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. HEADINGS INSIDE CARD BODIES
   ⚠️ The theme sizes h1–h6 globally, so a sub-heading written into a listing's
   own text rendered at 28px inside a card whose title is 15px — the
   sub-heading outranking the heading it sat under.
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .pf-body h1,
body.single-listing .pf-body h2 {
	font-size: 17px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	margin: 18px 0 7px !important;
	color: var(--ls-ink) !important;
}

body.single-listing .pf-body h3 {
	font-size: 15px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	margin: 16px 0 6px !important;
	color: var(--ls-ink) !important;
}

body.single-listing .pf-body h4,
body.single-listing .pf-body h5,
body.single-listing .pf-body h6 {
	font-size: 14px !important;
	line-height: 1.45 !important;
	font-weight: 700 !important;
	margin: 14px 0 5px !important;
	color: var(--ls-ink) !important;
}

body.single-listing .pf-body > :first-child { margin-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. "YOU MAY ALSO BE INTERESTED IN" — the mint panel
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .i-section.similar-listings,
body.single-listing .block-type-related_listing > .element {
	margin: 0 auto 44px;
	padding: 30px 26px 34px !important;
	border: 1px solid var(--ls-tealln);
	border-radius: 12px !important;
	background: var(--ls-wash);
	box-shadow: none;
}

body.single-listing .block-type-related_listing > .element > .pf-head {
	padding: 0 0 18px !important;
	border-bottom: 0;
}

body.single-listing .block-type-related_listing > .element > .pf-body {
	padding: 0 !important;
}

/* ⚠️ The theme sizes every h1–h6 with !important, so this heading renders at
   38px without it. */
body.single-listing .similar-listings h2,
body.single-listing .similar-listings h2.case27-primary-text,
body.single-listing .similar-listings h3 {
	margin: 0 0 22px !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ls-ink-2) !important;
	text-align: center;
}

body.single-listing .similar-listings .listing-preview,
body.single-listing .similar-listings .case27-listing-preview,
body.single-listing .block-type-related_listing .listing-preview,
body.single-listing .block-type-related_listing .case27-listing-preview {
	border: 1px solid rgba(11, 90, 110, .10);
	border-radius: var(--ls-radius);
	background: var(--ls-card);
	box-shadow: 0 2px 4px rgba(22, 35, 46, .05);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

body.single-listing .similar-listings .listing-preview:hover,
body.single-listing .block-type-related_listing .listing-preview:hover {
	box-shadow: 0 12px 28px rgba(22, 35, 46, .12);
	transform: translateY(-2px);
}

body.single-listing .similar-listings .listing-preview .lp-actions i,
body.single-listing .block-type-related_listing .listing-preview .actions i { color: var(--ls-teal); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. MOBILE HERO — put the identity back over the photograph
   ⚠️ MOBILE IS A DIFFERENT LAYOUT, NOT A NARROWER ONE.

   Below 1200px single-listing.js MOVES `.listing-main-info` out of
   `.main-info-desktop` (which sits over the cover) into `.main-info-mobile` —
   a SIBLING of `.profile-cover`, in normal flow, on the page's white ground.

   The theme's own `.pa-below-title` is coloured white for the over-cover
   placement, so once moved it renders white on white and simply vanishes. The
   avatar, title and price row land on white as a plain stack under the photo.
   Everything below puts that block back where the white belongs.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
	body.single-listing {
		/* One number for the cover and the block laid over it. */
		--ls-mob-cover: 320px;
	}

	body.single-listing .single-job-listing { position: relative; }

	body.single-listing .profile-cover,
	body.single-listing .profile-cover-gallery .header-gallery-carousel,
	body.single-listing .profile-cover-gallery .owl-stage-outer,
	body.single-listing .profile-cover-gallery .owl-item,
	body.single-listing .profile-cover-gallery .owl-item .item {
		height: var(--ls-mob-cover) !important;
		min-height: var(--ls-mob-cover) !important;
		max-height: var(--ls-mob-cover) !important;
	}

	body.single-listing .profile-cover::after { z-index: 2; }

	/*
	 * ⚠️ IN FLOW, pulled up over the cover — not absolutely positioned.
	 *
	 * `bottom: 0` would anchor to `.single-job-listing`, the whole page, and
	 * throw the identity down to the footer. `top: 0` with a fixed height clips
	 * instead: titles vary in length, so any fixed height eventually cuts one
	 * off behind the site header. A negative top margin overlaps the photo just
	 * the same while the block keeps its natural height.
	 */
	body.single-listing .main-info-mobile {
		position: relative;      /* for z-index only; layout stays in flow */
		margin-top: calc(-1 * var(--ls-mob-cover));
		min-height: var(--ls-mob-cover);
		/* ⚠️ Above the cover's own z-index, which is 12 — they are positioned
		   siblings in one stacking context, so a lower value lets the
		   photograph paint straight over the title. */
		z-index: 20;
		display: flex;
		align-items: flex-end;
		padding: 24px 16px 20px;
		/* The cover is a swipeable carousel; only the content takes touches. */
		pointer-events: none;
	}

	body.single-listing .main-info-mobile .listing-main-info { pointer-events: auto; }

	/* Paint the overhang when a long title carries the block past the photo. */
	body.single-listing .main-info-mobile::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: var(--ls-mob-cover);
		bottom: 0;
		z-index: -1;
		background: rgb(11, 33, 42);
		pointer-events: none;
	}

	body.single-listing .main-info-mobile .listing-main-info,
	body.single-listing .main-info-mobile .container {
		width: 100%;
		max-width: none;
		padding: 0;
		top: 0;
	}

	body.single-listing .main-info-mobile [class*='col-md-'] {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		padding: 0;
	}

	/*
	 * ⚠️ The theme styles this block as a white CARD, because in its own layout
	 * it sits below the photo on the page ground. Over the photograph that card
	 * is a white panel hiding the image, with white text invisible inside it.
	 */
	body.single-listing .main-info-mobile,
	body.single-listing .main-info-mobile .container,
	body.single-listing .main-info-mobile .listing-main-info,
	body.single-listing .main-info-mobile .profile-name,
	body.single-listing .main-info-mobile [class*='col-md-'],
	body.single-listing .main-info-mobile .listing-main-buttons {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* And the type it set dark for that white card. */
	body.single-listing .main-info-mobile .profile-name h1,
	body.single-listing .main-info-mobile .listing-title,
	body.single-listing .main-info-mobile .profile-tagline,
	body.single-listing .main-info-mobile .listing-tagline-field,
	body.single-listing .main-info-mobile .profile-name > ul li,
	body.single-listing .main-info-mobile .profile-name > ul a {
		color: #fff !important;
		text-shadow: 0 1px 12px rgba(8, 20, 28, .45);
	}

	body.single-listing .main-info-mobile .profile-name h1,
	body.single-listing .main-info-mobile .listing-title {
		font-size: 23px !important;
		line-height: 1.16 !important;
		margin-bottom: 4px !important;
	}

	/*
	 * ⚠️ Anything that paints its own ground keeps its own colours — the price
	 * pennant on a real-estate or vehicle listing is an orange tag with white
	 * text, and the blanket white above would have been applied to it twice
	 * while its background stayed orange.
	 */
	body.single-listing .main-info-mobile .profile-name > ul li[style*='background'],
	body.single-listing .main-info-mobile .profile-name .price-tag,
	body.single-listing .main-info-mobile .profile-name [class*='price'] {
		text-shadow: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. THE AVATAR SITS INLINE, LEFT OF THE TITLE
   ⚠️ The theme stacks it above the name, which leaves a hole at the top of the
   hero and pushes the title down. Placing it beside the text — absolutely
   positioned and centred against the whole block, with the text padded past it
   — is what the design does, and it costs the title no vertical room.

   Sizes match the church page so every listing type reads the same:
   52px + a 16px gap on mobile (text from 68px), 62px + 16px on desktop (78px).
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .profile-name { position: relative; }

body.single-listing .profile-name > .profile-avatar,
body.single-listing .profile-name > .listing-logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
}

/* ⚠️ `img` only, never `> *` — a skin that puts an SVG in this badge would
   otherwise have its glyph stretched to the full disc. */
body.single-listing .profile-name > .profile-avatar img,
body.single-listing .profile-name > .listing-logo img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 1200px) {
	body.single-listing .main-info-mobile .profile-name {
		display: block;
		padding-left: 68px !important;
	}

	body.single-listing .main-info-mobile .profile-name > .profile-avatar,
	body.single-listing .main-info-mobile .profile-name > .listing-logo {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
	}
}

@media (min-width: 1201px) {
	body.single-listing .profile-cover .profile-name {
		padding-left: 78px !important;
	}

	body.single-listing .profile-cover .profile-avatar,
	body.single-listing .profile-cover .listing-logo {
		width: 62px !important;
		height: 62px !important;
		min-width: 62px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. THE TYPE EMBLEM
   Built by mfv-listing-skin.js when a listing has no image of its own — see
   the note there for why the author's avatar is not a stand-in for one.
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .mfv-ls-emblem {
	display: grid !important;
	place-items: center;
	border-radius: 50% !important;
	background: #e3a04a !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(8, 20, 28, .28);
	pointer-events: none;         /* decorative now — it is no longer a link */
	overflow: hidden;
}

/* ⚠️ Sized here, never by a `> *` rule — that would stretch the glyph to the
   full disc instead of letting it sit inside at roughly half the diameter. */
body.single-listing .mfv-ls-emblem svg {
	width: 26px !important;
	height: 26px !important;
	fill: none;
	stroke: currentColor;
	border-radius: 0 !important;
}

@media (min-width: 1201px) {
	body.single-listing .mfv-ls-emblem svg {
		width: 30px !important;
		height: 30px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. SHARE + FAVOURITES, TOP-RIGHT OF THE COVER
   EVERY listing type, and PHONES ONLY. mfv-listing-skin.js moves the real
   controls between this corner box and the quick-actions row as the viewport
   crosses 991px — see the note in that file for why they are moved and never
   copied, and why the row item is hidden rather than removed.

   ⚠️ The media query is a SECOND lock, not the mechanism. The script already
   returns the controls to the row above the breakpoint; this makes sure that a
   stale corner box can never paint over a desktop cover if the script is
   interrupted between the two states.

   ⚠️ Churches are absent by construction: mfv-listing-skin.js returns early on
   `body.mfv-church-native`, whose hero puts Share beside "Plan Your Visit" as a
   labelled button. Do not "fix" that inconsistency by widening this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The row item the icons were lifted out of — hidden while they are away, so
   the same control is never offered twice on one screen. */
body.single-listing .mfv-ls-row-lifted {
	display: none !important;
}

@media (max-width: 991px) {

	body.single-listing .mfv-ls-hero-top {
		position: absolute;
		top: 18px;
		right: 22px;
		z-index: 21;              /* above the cover's 12 and its wash */
		display: flex;
		gap: 8px;
	}

	/*
	 * ⚠️ Weighted: the theme declares these quick actions with !important, and
	 * they arrive carrying its pill styling from the row they were lifted out of.
	 */
	body.single-listing .mfv-ls-hero-top__btn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0 !important;
		border: 1px solid rgba(255, 255, 255, .45) !important;
		border-radius: 50% !important;
		background: rgba(12, 30, 40, .38) !important;
		color: #fff !important;
		/* ⚠️ The label is a bare text node beside the icon — there is no element to
		   hide, so the link zeroes its own type and the icon restores its size. */
		font-size: 0 !important;
		line-height: 1 !important;
		backdrop-filter: blur(4px);
		transition: background .16s ease, border-color .16s ease;
	}

	body.single-listing .mfv-ls-hero-top__btn:hover,
	body.single-listing .mfv-ls-hero-top__btn:focus-visible {
		background: rgba(12, 30, 40, .62) !important;
		border-color: rgba(255, 255, 255, .8) !important;
		color: #fff !important;
	}

	body.single-listing .mfv-ls-hero-top__btn i,
	body.single-listing .mfv-ls-hero-top__btn svg {
		font-size: 17px !important;
		width: 17px;
		height: 17px;
		margin: 0 !important;
		color: #fff !important;
		fill: currentColor;
	}

	/* A saved listing has to look saved. */
	body.single-listing .mfv-ls-hero-top__btn.bookmarked,
	body.single-listing .mfv-ls-hero-top__btn.is-bookmarked {
		background: var(--ls-teal) !important;
		border-color: var(--ls-teal) !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. REVIEWS — the same section on every type, and in the Reviews TAB
   ⚠️ Both scopes throughout. A listing page carries reviews TWICE: the
   configured `reviews` block AND a separate Reviews tab (`tab-type-comments`)
   rendering the same comments again. Styling only the block leaves the tab
   looking like a different site.
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .block-type-reviews .comment-container,
body.single-listing .tab-type-comments .comment-container {
	padding: 16px 0;
	border: 0;
	background: transparent !important;   /* the theme fills every other one #fbfbfb */
}

body.single-listing .block-type-reviews .comments-list > li.comment + li.comment > .comment-container,
body.single-listing .tab-type-comments .comments-list > li.comment + li.comment > .comment-container {
	border-top: 1px solid var(--ls-line, #e6ecf1);
}

/*
 * ⚠️ An explicit 3-area grid, not a flex row — and every area placed by NAME.
 * In a half-width column a flex row wraps reviewer names mid-person
 * ("Jordan / E."), and these pages have a habit of gaining an injected empty
 * first-child <div> that implicit placement hands the first cell to.
 */
body.single-listing .block-type-reviews .comment-head,
body.single-listing .tab-type-comments .comment-head {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	grid-template-areas:
		'avatar name  stars'
		'avatar date  stars';
	align-items: center;
	column-gap: 11px;
	row-gap: 1px;
	margin-bottom: 10px;
}

body.single-listing .comment-head > .c27-user-avatar { grid-area: avatar; width: 40px; height: 40px; }

/* ⚠️ `.comment-container .avatar` is absolutely positioned by the theme and
   lands on top of the reviewer's name unless returned to the flow. */
body.single-listing .comment-container img.avatar,
body.single-listing .c27-user-avatar img {
	position: static;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

body.single-listing .comment-head > h5 {
	grid-area: name;
	min-width: 0;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ls-ink, #16232e) !important;
}

body.single-listing .comment-head > .comment-date {
	grid-area: date;
	min-width: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--ls-muted, #6b7d8c);
}

/* ⚠️ `.listing-review-rating` is absolutely positioned top-right of the
   container; returned to the flow it would otherwise land on the date. */
body.single-listing .comment-head > .listing-rating {
	grid-area: stars;
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 1px;
	justify-self: end;
}

body.single-listing .comment-head > .listing-rating i { font-size: 14px; color: #ef8b32 !important; }

body.single-listing .block-type-reviews .comment-body,
body.single-listing .tab-type-comments .comment-body,
body.single-listing .block-type-reviews .comment-text,
body.single-listing .tab-type-comments .comment-text {
	font-size: 13.5px;
	line-height: 1.65;
	color: #4c6068;
}

/* ── The summary rail ───────────────────────────────────────────────────── */

body.single-listing .mfv-ls-rev__grid { display: block; }

@media (min-width: 782px) {
	body.single-listing .mfv-ls-rev__grid {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-areas: 'rail list';
		column-gap: 0;
		align-items: start;
	}

	body.single-listing .mfv-ls-rev__rail { grid-area: rail; padding-right: 24px; }

	/* ⚠️ The divider belongs to the LIST — the rail is short, so a border on it
	   draws a stub that stops a fifth of the way down. */
	body.single-listing .mfv-ls-rev__list {
		grid-area: list;
		padding-left: 24px;
		border-left: 1px solid var(--ls-line, #e6ecf1);
	}

	body.single-listing .mfv-ls-rev--norail .mfv-ls-rev__grid { display: block; }
	body.single-listing .mfv-ls-rev--norail .mfv-ls-rev__list { padding-left: 0; border-left: 0; }
}

body.single-listing .mfv-ls-rev__score {
	margin: 0 0 6px !important;
	font-size: 40px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.02em;
	color: var(--ls-ink, #16232e) !important;
}

/* The "6 reviews, none of them rated" case — a count is not a score. */
body.single-listing .mfv-ls-rev__score--none { font-size: 22px !important; font-weight: 700 !important; }

body.single-listing .mfv-ls-rev__basis {
	margin: 8px 0 16px !important;
	font-size: 12.5px !important;
	line-height: 1.45;
	color: var(--ls-muted, #6b7d8c) !important;
}

/* ── Stars: a muted row with a coloured row clipped over it ── */
body.single-listing .mfv-ls-stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
body.single-listing .mfv-ls-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
body.single-listing .mfv-ls-stars svg { width: 17px; height: 17px; margin-right: 2px; fill: currentColor; vertical-align: top; }
body.single-listing .mfv-ls-stars__base { color: #dfe6ec; }
body.single-listing .mfv-ls-stars__fill { color: #ef8b32; }

/* ⚠️ Weighted — the theme declares its buttons with !important. */
body.single-listing .mfv-ls-rev__write {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;             /* WCAG target size */
	padding: 0 18px !important;
	border: 1.5px solid var(--ls-teal, #0e7490) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--ls-teal, #0e7490) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

body.single-listing .mfv-ls-rev__write:hover,
body.single-listing .mfv-ls-rev__write:focus-visible {
	background: var(--ls-teal, #0e7490) !important;
	color: #fff !important;
}

/* ── Empty state — never a row of grey stars: an unrated listing and a badly
   rated one must not look alike. ── */
body.single-listing .mfv-ls-rev__empty { padding: 26px 20px 30px; text-align: center; }

body.single-listing .mfv-ls-rev__empty-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: #fdeedd;
	color: #ef8b32;
}

body.single-listing .mfv-ls-rev__empty-ico svg { width: 24px; height: 24px; fill: currentColor; }

body.single-listing .mfv-ls-rev__empty-lead {
	margin: 0 0 6px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ls-ink, #16232e) !important;
}

body.single-listing .mfv-ls-rev__empty-sub {
	max-width: 34ch;
	margin: 0 auto !important;
	font-size: 13.5px !important;
	line-height: 1.6;
	color: var(--ls-muted, #6b7d8c) !important;
}

body.single-listing .mfv-ls-rev__empty .mfv-ls-rev__write { width: auto; margin-top: 18px; }

/* ── The parked form ──────────────────────────────────────────────────────
 * ⚠️ [hidden] is a UA rule and loses to any author `display`. Nothing here
 * sets display on the form, and this !important guarantees it stays hidden.
 * ── */
body.single-listing .mfv-ls-rev__form[hidden] { display: none !important; }
body.single-listing .mfv-ls-rev__form { margin-top: 20px; }

body.single-listing .mfv-ls-rev__form-head { display: flex; align-items: center; gap: 10px; }
body.single-listing .mfv-ls-rev__form-head > .title-style-1 { flex: 1 1 auto; min-width: 0; }

body.single-listing .mfv-ls-rev__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;                  /* WCAG target size — the glyph is 16px */
	height: 44px;
	margin-left: auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--ls-muted, #6b7d8c) !important;
	cursor: pointer;
}

body.single-listing .mfv-ls-rev__close svg { width: 16px; height: 16px; fill: currentColor; }
body.single-listing .mfv-ls-rev__close:hover { background: var(--ls-line, #e6ecf1) !important; color: var(--ls-ink, #16232e) !important; }

/* ── Form controls ────────────────────────────────────────────────────────
 * ⚠️ The submit selector must cover BOTH shapes: a new review is an
 * <input type=submit> in .comment-form, an edit is a <button> in a bare <form>
 * under .sidebar-comment-form. Matching only one is why "Update review"
 * rendered as an outlined ghost beside a solid "Submit review".
 * ── */
body.single-listing .comment-form textarea,
body.single-listing .comment-form input[type='text'],
body.single-listing .comment-form input[type='email'] {
	border: 1px solid var(--ls-line, #e6ecf1) !important;
	border-radius: 12px !important;
	background: #fafcfd !important;
	font-size: 13.5px !important;
}

body.single-listing .comment-form input[type='submit'],
body.single-listing .comment-form button[type='submit'],
body.single-listing .sidebar-comment-form input[type='submit'],
body.single-listing .sidebar-comment-form button[type='submit'] {
	height: 44px !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ls-teal, #0e7490) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 16px rgba(10, 74, 92, .2) !important;
}

/* ── The Reviews TAB's own empty state ────────────────────────────────────
 * ⚠️ The theme heads it with a `mood_bad` frowning face. A frown is the wrong
 * reading of an unrated listing — it says something went wrong, when nothing
 * has.
 * ── */
body.single-listing .tab-type-comments .no-results-wrapper { padding: 30px 20px 34px; text-align: center; }
body.single-listing .tab-type-comments .no-results-wrapper .no-results-icon { display: none; }

body.single-listing .tab-type-comments .no_job_listings_found {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ls-ink, #16232e);
	list-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. HERO BUTTON ROW + THE PRICE TAG
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ Centred, not flush right. `.listing-main-buttons` is a 680px half of the
 * cover set to `justify-content: flex-end`, so a listing with ONE action left
 * it pinned to the very edge of the viewport — correct for a group of three,
 * lopsided for a single button.
 *
 * The church hero is unaffected: its button group carries `margin-left: auto`,
 * and an auto margin absorbs the free space before `justify-content` gets to
 * distribute it, so that group stays right-aligned as its design intends.
 */
body.single-listing .profile-cover .listing-main-buttons {
	justify-content: center;
}

/*
 * 🔴 CONTRAST. The price pennant is `li.price-or-date` — white on #f97316,
 * which measures **2.80:1**. WCAG AA wants 4.5:1 for text this size, so the
 * figure people most want off this page was the hardest thing on it to read.
 *
 * The orange is kept exactly — it is the brand mark on the tag, and darkening
 * it enough for white text (#c04e08) would have changed the colour more than
 * changing the ink does. A warm near-black on the same orange measures
 * **6.30:1**.
 */
/*
 * White text on the price chip, as asked — with the orange taken from #f97316
 * to #c04e08 so it is actually readable.
 *
 * ⚠️ White on the original #f97316 measures **2.80:1**, well under WCAG AA's
 * 4.5:1 for text this size. #c04e08 is the same hue a few steps deeper and
 * carries white at **4.84:1**. If the lighter orange matters more than the
 * contrast, change this one value back — the ink will stay white either way.
 *
 * ⚠️ The chip sets its own background in the same rule as its ink. On services
 * at mobile the background computed transparent, which put the ink straight
 * onto the darkened photograph; ink and ground have to travel together.
 */
body.single-listing .listing-main-info .price-or-date.is-price {
	background-color: #c04e08 !important;
}

body.single-listing .listing-main-info .price-or-date,
body.single-listing .listing-main-info .price-or-date .lmb-label,
body.single-listing .listing-main-info .price-or-date .value,
body.single-listing .listing-main-info .price-or-date .value *,
body.single-listing .listing-main-info .price-or-date .prefix {
	color: #ffffff !important;
}

body.single-listing .listing-main-info .price-or-date .lmb-label {
	opacity: .78;          /* the label is secondary to the figure, not faint */
}

body.single-listing .listing-main-info .price-or-date .value {
	font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB BAR + QUICK ACTIONS — lifted from the services page for every type
   These two sections are the services skin's, translated onto the shared
   tokens and scoped to every listing type. Services keeps its own identical
   copy and loads after this, so nothing conflicts; when that copy is retired
   this is what remains.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   13. TAB BAR — active tab becomes a filled teal pill
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .profile-header {
	background: var(--ls-card);
	border-bottom: 1px solid var(--ls-line);
	box-shadow: none;
}

body.single-listing .profile-menu > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 0;
}

body.single-listing .profile-menu > ul > li { float: none; margin: 0; }

body.single-listing .profile-menu a.listing-tab-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ls-muted) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: background .16s ease, color .16s ease;
}

body.single-listing .profile-menu > ul > li:not(.active) a.listing-tab-toggle:hover {
	background: var(--ls-wash);
	color: var(--ls-teal) !important;
}

body.single-listing .profile-menu > ul > li.active a.listing-tab-toggle {
	background: var(--ls-teal);
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(10, 74, 92, .22);
}

/* The theme draws the active state as an underline; the pill replaces it. */
body.single-listing .profile-menu > ul > li.active a.listing-tab-toggle::after,
body.single-listing .profile-menu > ul > li a.listing-tab-toggle::after { display: none; }

body.single-listing .profile-menu .mfv-tab-icon { display: inline-flex; font-size: 16px; }

body.single-listing .profile-menu .items-counter {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

body.single-listing .profile-menu > ul > li:not(.active) .items-counter {
	background: var(--ls-wash);
	color: var(--ls-teal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. QUICK ACTIONS — light outlined pills with coloured icons
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .qla-container { padding-top: 20px; }

body.single-listing .quick-listing-actions > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.single-listing .quick-listing-actions > ul > li { float: none; margin: 0; }

body.single-listing .quick-listing-actions > ul > li > a,
body.single-listing .quick-listing-actions > ul > li > button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--ls-line);
	border-radius: 999px;
	/* ⚠️ `.quick-listing-actions > ul > li > a` sets background-color to
	   --mfl-primary with !important, which is why these stayed solid teal. */
	background: var(--ls-card) !important;
	color: var(--ls-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(22, 35, 46, .04);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/*
 * ⚠️ White-on-white trap. The theme sets
 *   .quick-listing-actions > ul > li > a > i,
 *   .quick-listing-actions > ul > li > a span { color: #ffffff !important }
 * because its pills are solid teal. Turning the pill white without matching
 * that !important leaves a row of blank capsules — the icon and the label are
 * both still there, painted white on white.
 */
body.single-listing .quick-listing-actions > ul > li > a span,
body.single-listing .quick-listing-actions > ul > li > button span { color: var(--ls-ink) !important; }

body.single-listing .quick-listing-actions > ul > li > a:hover,
body.single-listing .quick-listing-actions > ul > li > button:hover {
	border-color: var(--ls-tealln);
	box-shadow: 0 6px 16px rgba(22, 35, 46, .09);
	transform: translateY(-1px);
}

body.single-listing .quick-listing-actions i { font-size: 16px; color: var(--ls-teal) !important; }

/* Bookmark and Report carry their own meaning, so they carry their own colour. */
body.single-listing .quick-listing-actions .mylisting-bookmark-item i { color: var(#ef8b32) !important; }
/* ⚠️ Report is the last action and carries its own colour — a muted red, not
   the teal every other icon uses. Left on the shared teal it read as just
   another neutral action. */
body.single-listing .quick-listing-actions > ul > li:last-of-type i { color: #d0524e !important; }
body.single-listing .quick-listing-actions .mfv-booking-trigger > a {
	border-color: transparent;
	/* The booking module paints this one itself, so it needs the same treatment. */
	background: var(--ls-teal) !important;
	color: #fff !important;
}

body.single-listing .quick-listing-actions .mfv-booking-trigger > a span { color: #fff !important; }
body.single-listing .quick-listing-actions .mfv-booking-trigger i { color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   15. THE REVIEWS TAB IS A CARD TOO
   ⚠️ In the tab the list column sits on the bare page ground while the form
   beside it is a card — two halves of one section built to different rules.
   Both get the card here, so the tab reads like the block does.
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .tab-type-comments .comments-list-wrapper,
body.single-listing .tab-type-comments .comments-list-wrapper + [class*='col-'] > .element {
	background: var(--ls-card);
	border: 1px solid var(--ls-line);
	border-radius: var(--ls-radius);
	box-shadow: var(--ls-shadow);
}

body.single-listing .tab-type-comments .comments-list-wrapper { padding: var(--ls-pad); }

/* ⚠️ The rail grid must survive the card's padding — it is applied to the same
   element, so the grid declaration has to come after and win. */
body.single-listing .tab-type-comments .comments-list-wrapper.mfv-ls-rev__grid { padding: var(--ls-pad); }

/*
 * ⚠️ Separate the two cards with PADDING, never a margin.
 *
 * `.comments-list-wrapper` is a Bootstrap `col-md-7`, so its width is already
 * exactly 58.33%. A margin is added on top of that width, the pair exceeds
 * 100%, and the form column wraps underneath — which looks like the layout
 * broke rather than like a gutter was added.
 */
@media (min-width: 992px) {
	body.single-listing .tab-type-comments .comments-list-wrapper { margin-right: 0; }
	body.single-listing .tab-type-comments .comments-list-wrapper + [class*='col-'] { padding-left: 20px; }
}

@media (max-width: 991px) {
	body.single-listing .tab-type-comments .comments-list-wrapper { margin-bottom: var(--ls-gap); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. LONG REVIEW LISTS
   The theme paginates with its own "Load more" once there is more than one
   page of comments. Within a page the list still needs a ceiling: five Google
   excerpts plus this site's own reviews makes a card taller than the screen,
   and everything below it becomes unreachable without scrolling past.
   ═══════════════════════════════════════════════════════════════════════════ */

body.single-listing .mfv-ls-rev__list .comments-list,
body.single-listing .mfv-ch-rev__list .comments-list,
body.single-listing .tab-type-comments .comments-list {
	max-height: 560px;
	overflow-y: auto;
	/* ⚠️ Room for the scrollbar, or it sits on top of the star column. */
	padding-right: 6px;
	overscroll-behavior: contain;
}

/* A quiet scrollbar — a default one reads as a second border on the card. */
body.single-listing .comments-list::-webkit-scrollbar { width: 8px; }
body.single-listing .comments-list::-webkit-scrollbar-track { background: transparent; }

body.single-listing .comments-list::-webkit-scrollbar-thumb {
	background: #d7dfe6;
	border-radius: 999px;
}

body.single-listing .comments-list::-webkit-scrollbar-thumb:hover { background: #c2ccd6; }

body.single-listing .comments-list {
	scrollbar-width: thin;
	scrollbar-color: #d7dfe6 transparent;
}

/* The theme's own pagination, when a listing has more than one page. */
body.single-listing .comment-navigation .load-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin-top: 14px;
	border: 1px solid var(--ls-line) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--ls-teal) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
}

body.single-listing .comment-navigation .load-more a:hover {
	background: var(--ls-wash) !important;
}

/* ── Availability badge in the hero ──────────────────────────────────────────
 *
 * Two problems, and the layout one came first.
 *
 * ⚠️ `.pa-below-title` is `display: flex; flex-wrap: nowrap`. Dropping the
 * badge into it made a THIRD thing share the tagline's line, so the badge was
 * jammed against the right edge and the tagline lost ~80px and truncated early
 * — `margin-top: 10px` did nothing, because in a flex row there is no "next
 * line" to push it onto. Letting the row wrap and giving the badge a full
 * basis puts it under the tagline, which is where it reads, and gives the
 * tagline its width back. Scoped with :has() so a hero without a status keeps
 * the theme's single-line row exactly as it was.
 *
 * Then the badge itself. It sits on a cover photo, where the module's
 * light-tinted palette (#ecfdf5 on #a7f3d0) has almost no contrast — and the
 * white plate that used to compensate read as a sticker pasted on the photo.
 * A dark glass chip is legible over any image, and the TONE moves to a dot, so
 * Available / Sold / Cancelled stay distinguishable at a glance without the
 * chip changing shape or weight. The module keeps owning the vocabulary; this
 * only changes how the detail variant is painted.
 */
body.single-listing .profile-name .pa-below-title:has(> .mfv-hero-status) {
	flex-wrap: wrap;
}
body.single-listing .profile-name .mfv-hero-status {
	flex: 0 0 100%;
	margin-top: 10px;
}
body.single-listing .profile-name .mfv-hero-status .mfv-item-status {
	gap: 8px;
	padding: 6px 14px;
	background: rgba(11, 25, 33, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	box-shadow: 0 1px 3px rgba(8, 20, 26, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* The dot is the only thing that changes between states. */
body.single-listing .profile-name .mfv-hero-status .mfv-item-status::before {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
body.single-listing .profile-name .mfv-hero-status .mfv-item-status--success::before { background: #34d399; }
body.single-listing .profile-name .mfv-hero-status .mfv-item-status--neutral::before { background: #cbd5e1; }
body.single-listing .profile-name .mfv-hero-status .mfv-item-status--muted::before   { background: #94a3b8; }
body.single-listing .profile-name .mfv-hero-status .mfv-item-status--danger::before  { background: #f87171; }
body.single-listing .profile-name .mfv-hero-status .mfv-item-status--warning::before { background: #fbbf24; }

@media (max-width: 1200px) {
	body.single-listing .main-info-mobile .mfv-hero-status { margin-top: 8px; }
}