/*
 * scout-listings search — the component stylesheet for [scout_listings_search].
 *
 * ENQUEUED ONLY WHERE THE SEARCH RENDERS (Batch 66a). Search_Shortcode
 * enqueues this file under the handle scout-listings-search on a singular
 * request whose post carries [scout_listings_search], and again from the
 * shortcode callback as a fallback. No other page on the site loads it.
 * Every control below works with JavaScript off. The one script the plugin
 * ships (Batch 210-MG, assets/listing-viewer.js) is enqueued on a listing
 * detail request only, and only adds the full-screen photo viewer, the phone
 * hero swipe and the phone's tap-to-open feature rows on top of a page that
 * already works without it.
 *
 * WHY IT IS SELF-CONTAINED. Every rule below is scoped under .stv-search and
 * names its own colours and sizes. It does not reach for a theme class, a
 * theme custom property, or a theme utility, for two reasons:
 *
 *   * the theme is a separate deployable. A component that inherited --red
 *     from wp-theme/style.css would render unstyled in this preview and would
 *     break silently the next time the theme renamed a variable.
 *   * a plugin stylesheet that depends on a theme stylesheet has to be loaded
 *     after it, which is an ordering promise nobody can keep across a theme
 *     switch.
 *
 * The colours and the type scale are TAKEN FROM the theme so the component
 * looks like it belongs: #B91C1C brand red, #991B1B for the pressed state,
 * #1a1a1a body text, #3f3f3f / #4a4a4a muted, #e8e5e0 hairline, #f9f8f6 page
 * tint, 6px radii, DM Sans for text, named only — the theme self-hosts that
 * face and this file loads no font of its own.
 *
 * NO EXTERNAL ANYTHING. No @import, no url(), no framework, no font CDN.
 * There is not a single request in this file, so it cannot be the reason a
 * page gets slower or a third party learns who read it.
 *
 * NO MOTION. There are no transitions, transforms, or animations, which is
 * why there is no prefers-reduced-motion block to honour: the honest way to
 * respect that preference is to have nothing to turn off. Hover states change
 * colour only, and no hover state reveals information — everything a visitor
 * needs is on the card at rest, which is the 55+ rule the site follows. The
 * filter panels open on a press, never on hover.
 *
 * THE LAYOUT (Batch 82-VB). The search follows the consumer streamlined-search
 * pattern buyers already know from the big portals: one compact bar of filter
 * chips (Price, Beds, Baths, More) with a search button, a results toolbar
 * that carries the count and the sort and nothing else, a grid of compact
 * cards three across on a desktop, two on a tablet and one on a phone, and a
 * pager. The pattern is common property; the markup and every rule in this
 * file are this plugin's own, written from the interaction model and not from
 * anybody's source.
 *
 * THE CHIPS ARE NATIVE <details>. The chip is the <summary>, the panel is the
 * rest. The browser opens and closes it, makes it a keyboard button, and keeps
 * a control inside a closed panel in the form, so none of it needs a script.
 * The chevron is a border triangle, not an icon file: there is nothing to
 * fetch. On a phone the panel stops floating and opens in place, full width,
 * so it can never push the page sideways.
 *
 * THE CARD'S READING ORDER vs SOURCE ORDER. Search_Renderer emits address,
 * locality, price, facts, status, disclosure, in that order, because that is
 * the order the markup makes sense in. The card below shows price, address,
 * facts, locality, status, disclosure — price first because it is the first
 * thing a buyer filters a grid by. Nothing inside a card is focusable, so no
 * keyboard tab order is disturbed by that, and a screen reader still reads a
 * coherent card in source order.
 *
 * THERE ARE STILL NO LISTING IMAGES. stv_media stores a durable signature and
 * no URL, so a card is text and nothing else, and no rule in this file
 * reserves space for a photo. The local preview draws a synthetic placeholder
 * block from its own page stylesheet to show where a photo would sit; that
 * block is preview chrome and ships in no plugin file. When media plumbing
 * exists, the photo belongs above the price.
 *
 * EQUAL HEIGHTS WITHOUT A FIXED HEIGHT. The grid stretches every card in a row
 * to the tallest, and the status pill takes margin-top: auto, so the status
 * and the disclosure line sit at the same height on every card in the row.
 * Nothing is clipped and no card has a height of its own: a long address costs
 * a taller row, never a lost line.
 *
 * THE AUDIENCE STILL SETS THE SIZES. 16–18px text, 48px minimum control
 * height, labels that are real labels rather than placeholders, strong
 * contrast, a visible focus ring. Denser is not smaller: the padding came
 * down, the type did not.
 */

/* ---------------------------------------------------------------------------
   The component root
   --------------------------------------------------------------------------- */

/* No max-width here. The search tool is the one band on the page allowed to
   be wider than the 1040px the rest of the site reads at, and the page decides
   that, not the component. A component that capped itself could not be put in
   a wide band without being fought. */
.stv-search {
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #1a1a1a;
}

/* Batch 243-AC (Scout, 2026-10-23): the search results page is near full
   width on a desktop, like the Showcase IDX page -- up to 1600px, with 24px
   of side space, centred on the page's own column. Not edge to edge. The
   band steps out of the theme's 1040px column from its centre, so no theme
   template changes. 100vw counts a desktop scrollbar; the 48px it leaves is
   more than any scrollbar, so nothing scrolls sideways. A phone and a
   tablet are unchanged: below 1100px the band is the column it sits in. */
@media (min-width: 1100px) {
	.stv-search.stv-search-wide {
		position: relative;
		left: 50%;
		width: min(1600px, calc(100vw - 48px));
		margin-left: calc(min(1600px, calc(100vw - 48px)) / -2);
	}
}

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

/* One focus treatment for every interactive thing in the component. A visible
   ring is not decoration here — a keyboard visitor who cannot see where they
   are cannot use the form at all. */
.stv-search :focus-visible {
	outline: 3px solid #B91C1C;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The search bar: filter chips and a button
   --------------------------------------------------------------------------- */

.stv-search-form {
	margin: 0 0 20px;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #e8e5e0;
	border-radius: 8px;
}

/* One row of chips and the button where there is room, wrapping where there
   is not. */
.stv-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* The panel floats from the chip, so the chip is its positioning box. */
.stv-filter {
	position: relative;
	flex: 0 0 auto;
}

/* The chip. A 48px-tall pill with a real border, the filter's name, what is
   in force if anything is, and a chevron that points at the panel. The
   default disclosure marker is removed in both spellings browsers use; the
   drawn chevron replaces it. */
.stv-filter-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 16px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.stv-filter-chip::-webkit-details-marker {
	display: none;
}

.stv-filter-chip::marker {
	content: '';
}

.stv-filter-chip:hover {
	border-color: #3f3f3f;
}

.stv-filter[open] > .stv-filter-chip {
	border-color: #B91C1C;
}

/* A downward triangle drawn from borders. When the panel is open it points up. */
.stv-filter-chip::after {
	content: '';
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #3f3f3f;
}

.stv-filter[open] > .stv-filter-chip::after {
	border-top: 0;
	border-bottom: 7px solid #3f3f3f;
}

/* What is in force, in the pressed-state red and bold, so a chip with a
   filter in it reads differently from one without at a glance -- and says so
   in words, not only in colour. */
.stv-filter-value {
	font-weight: 700;
	color: #991B1B;
}

/* Batch 256-AC: More's summary lists every ticked value, so it may wrap
   inside its chip rather than run past the bar's edge. */
.stv-filter.stv-filter-more {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.stv-filter-more > .stv-filter-chip {
	max-width: 100%;
	flex-wrap: wrap;
	white-space: normal;
}

/* The panel floats below its chip on a tablet or wider. White, one border, a
   soft shadow so it reads as lifted above the results rather than part of
   them. */
.stv-filter-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 300px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	background: #ffffff;
	border: 1px solid #cfcac2;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.14);
}

.stv-filter-price .stv-filter-panel {
	width: 340px;
}

.stv-search-field {
	flex: 1 1 100%;
	min-width: 0;
}

.stv-filter-price .stv-search-field {
	flex: 1 1 130px;
}

/* A real label, above the field, in sentence case. Not a placeholder: a
   placeholder disappears the moment somebody types, which is exactly when
   they most want to confirm which box they are in. */
.stv-search-field label {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 6px;
}

.stv-search-field input,
.stv-search-field select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 6px;
}

.stv-search-field select {
	cursor: pointer;
}

/* The plain-language note under a menu (Batch 147-VB). Muted, but at
   body size and at AA contrast or better: it is read, not decoration. */
.stv-filter-note {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: #3f3f3f;
}

.stv-search-field input:focus,
.stv-search-field select:focus {
	border-color: #B91C1C;
}

/* A checkbox is not a text box. The rule above would stretch it to the full
   field width at 48px tall, so the checkbox row resets it: a box large enough
   to see and hit, the label beside it on ONE line, and the WHOLE ROW 48px
   tall -- the label is part of the target, because clicking a <label>
   toggles its checkbox. The label never wraps under its own box: the panel
   is wide enough for the longest one, and flex keeps the pair together. */
.stv-search-field-check {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	min-height: 48px;
}

.stv-search-field-check input {
	flex: 0 0 auto;
	width: 24px;
	min-height: 0;
	height: 24px;
	margin: 0;
	padding: 0;
	accent-color: #B91C1C;
	cursor: pointer;
}

.stv-search-field-check label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* Batch 256-AC: Status and Home Type are checklists (a fieldset whose legend
   reads like the other fields' labels), and size is two boxes side by side,
   like price. The checkbox rows are the 48px rows above. */
.stv-search-fieldset {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.stv-search-fieldset legend {
	padding: 0;
	margin-bottom: 2px;
	font-size: 17px;
	font-weight: 500;
	color: #1a1a1a;
}

.stv-search-fieldset .stv-filter-note {
	margin-top: 2px;
}

.stv-search-size {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1 1 100%;
}

.stv-search-size .stv-search-field {
	flex: 1 1 130px;
}

/* The one red control in the component, the same height as the chips, so the
   row reads as one bar. */
.stv-search-submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 12px 26px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	background: #B91C1C;
	border: 1.5px solid #B91C1C;
	border-radius: 6px;
	cursor: pointer;
}

.stv-search-submit:hover {
	background: #991B1B;
	border-color: #991B1B;
}

/* A phone: every chip is a full-width row, a panel opens in place under its
   chip instead of floating, and the button takes the last row. Nothing can be
   wider than the screen, so nothing scrolls sideways. */
@media (max-width: 560px) {
	.stv-filter,
	.stv-search-submit {
		flex: 1 1 100%;
		width: 100%;
	}

	.stv-filter-chip {
		justify-content: flex-start;
	}

	.stv-filter-chip::after {
		margin-left: auto;
	}

	.stv-filter-panel,
	.stv-filter-price .stv-filter-panel {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 8px;
		box-shadow: none;
		background: #f9f8f6;
	}
}

/* ---------------------------------------------------------------------------
   Batch 242-AC: Scout's bar of 2026-10-23 -- the location box, the brand
   buttons, the chip row with Reset and Share
   --------------------------------------------------------------------------- */

/* The location box takes the room the buttons leave, and its Search Homes
   button sits against it as one control. */
.stv-search-location {
	display: flex;
	flex: 1 1 320px;
	min-width: 0;
	gap: 0;
}

.stv-search-location input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #8a857e;
	border-right: 0;
	border-radius: 6px 0 0 6px;
}

/* The placeholder is the box's only visible label, so it is dark enough to
   read (#595959 on white is 7:1), not the pale grey browsers default to. */
.stv-search-location input::placeholder {
	color: #595959;
	opacity: 1;
}

.stv-search-location input:focus {
	border-color: #B91C1C;
}

.stv-search-location .stv-search-submit {
	border-radius: 0 6px 6px 0;
}

/* Batch 243-AC (Scout, 2026-10-23): every bar button is white with an
   outline; Save search is the one filled button. The filter chips keep the
   neutral outline above. Search Homes is an outline in the brand red. */
.stv-search-location .stv-search-submit {
	color: #B91C1C;
	background: #ffffff;
	border-color: #B91C1C;
}

.stv-search-location .stv-search-submit:hover {
	color: #ffffff;
	background: #B91C1C;
	border-color: #B91C1C;
}

.stv-filter-rooms .stv-filter-panel {
	width: 340px;
}

/* Each panel's own Apply, so a visitor need not find the Search Homes
   button after changing a filter. */
.stv-filter-apply {
	flex: 1 1 100%;
	min-height: 48px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	background: #B91C1C;
	border: 1.5px solid #B91C1C;
	border-radius: 6px;
	cursor: pointer;
}

.stv-filter-apply:hover {
	background: #991B1B;
	border-color: #991B1B;
}

/* The chip row: what is in force, then Reset and Share, one wrapping row. */
.stv-search-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: -8px 0 16px;
}

.stv-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-chip-list li {
	margin: 0;
	padding: 0;
}

/* A chip is a link that removes its filter: the whole pill is the target,
   44px tall, with the x drawn at the end. */
.stv-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: #1a1a1a;
	text-decoration: none;
	background: #f6f5f3;
	border: 1.5px solid #cfcac2;
	border-radius: 22px;
}

.stv-chip:hover {
	border-color: #B91C1C;
}

.stv-chip-x {
	font-size: 22px;
	line-height: 1;
	color: #991B1B;
}

.stv-chip-reset,
.stv-share-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 17px;
	font-weight: 600;
	color: #B91C1C;
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.stv-share {
	position: relative;
}

.stv-share-button {
	list-style: none;
}

.stv-share-button::-webkit-details-marker {
	display: none;
}

.stv-share-button::marker {
	content: '';
}

.stv-share-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	width: 360px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	background: #ffffff;
	border: 1px solid #cfcac2;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.14);
}

.stv-share-panel label {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 500;
	color: #1a1a1a;
}

.stv-share-panel input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 17px;
	color: #1a1a1a;
	background: #f6f5f3;
	border: 1.5px solid #cfcac2;
	border-radius: 6px;
}

.stv-share-status {
	margin: 8px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: #1a1a1a;
}

.stv-share-status:empty {
	display: none;
}

/* Batch 243-AC (Scout, 2026-10-23): Save search, the one filled button on
   the bar, in bright blue (Batch 248-AC: the mockup's #1F6FD1; white on it is
   4.9:1). Its panel floats like
   Share's; on a phone it opens in place. */
.stv-save-search {
	position: relative;
	margin-left: auto;
}

.stv-save-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	background: #1F6FD1;
	border: 1.5px solid #1F6FD1;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.stv-save-button::-webkit-details-marker {
	display: none;
}

.stv-save-button::marker {
	content: '';
}

.stv-save-button:hover,
.stv-save-search[open] > .stv-save-button {
	background: #17549E;
	border-color: #17549E;
}

.stv-save-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	width: 380px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	background: #ffffff;
	border: 1px solid #cfcac2;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.14);
}

.stv-save-intro,
.stv-save-result-title,
.stv-save-sent {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.5;
	color: #1a1a1a;
}

.stv-save-result ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.stv-save-invalid,
.stv-save-failed,
.stv-save-expired,
.stv-save-limited {
	padding: 10px 12px;
	margin-bottom: 12px;
	border: 1px solid rgba(185, 28, 28, 0.3);
	border-radius: 6px;
	background: #FEF2F2;
}

.stv-save-field {
	margin: 0 0 12px;
}

.stv-save-field label,
.stv-save-frequency legend {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 600;
	color: #1a1a1a;
}

.stv-save-field input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 17px;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #8a857e;
	border-radius: 6px;
}

.stv-save-frequency {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.stv-save-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-right: 16px;
	font-size: 17px;
	cursor: pointer;
}

.stv-save-choice input {
	width: 20px;
	height: 20px;
}

.stv-save-submit {
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	background: #1F6FD1;
	border: 1.5px solid #1F6FD1;
	border-radius: 6px;
	cursor: pointer;
}

.stv-save-submit:hover {
	background: #17549E;
	border-color: #17549E;
}

@media (max-width: 560px) {
	.stv-save-search {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.stv-save-button {
		width: 100%;
		justify-content: center;
	}

	.stv-save-panel {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 8px;
		box-shadow: none;
	}
}

.stv-location-note {
	margin: -8px 0 16px;
}

/* A phone: the location box takes a row, the four buttons pair up two to a
   row, and an open one takes the full row so its panel has room. */
@media (max-width: 560px) {
	.stv-search-location {
		flex: 1 1 100%;
	}

	.stv-search-location .stv-search-submit {
		flex: 0 0 auto;
		width: auto;
	}

	.stv-filter {
		flex: 1 1 calc(50% - 5px);
		width: auto;
	}

	.stv-filter[open] {
		flex-basis: 100%;
	}

	.stv-filter-rooms .stv-filter-panel {
		position: static;
		width: auto;
		max-width: none;
	}

	.stv-share {
		position: static;
	}

	.stv-share-panel {
		left: 0;
		right: 0;
		width: auto;
	}

	.stv-search-chips {
		position: relative;
	}
}

/* ---------------------------------------------------------------------------
   Validation messages
   --------------------------------------------------------------------------- */

/* A tinted panel with a red edge, sitting directly under the form it is about.
   Search_Renderer marks it role="alert"; the colour is the sighted half of the
   same announcement. The text is #991B1B rather than the brand red so it
   clears AA against the tint. */
.stv-search-messages {
	padding: 16px 20px;
	margin-bottom: 20px;
	background: #FEF2F2;
	border: 1px solid rgba(185, 28, 28, 0.3);
	border-left: 5px solid #B91C1C;
	border-radius: 6px;
	color: #991B1B;
}

.stv-search-messages ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-search-messages li {
	font-size: 17px;
	line-height: 1.6;
}

.stv-search-messages li + li {
	margin-top: 10px;
}


/* ---------------------------------------------------------------------------
   The states that are not a list of homes
   --------------------------------------------------------------------------- */

/* No results, data withheld (stale, logo or attribution missing), rate
   limited, and outage all share one panel shape on purpose: each is the
   component answering, and none is an error the visitor caused. A heading
   says what happened, a sentence says what to do. A plain grey line on white
   would read as something that failed to render. */
.stv-search-state {
	margin: 0;
	padding: 32px 24px;
	background: #f9f8f6;
	border: 1px solid #e8e5e0;
	border-radius: 8px;
	text-align: center;
}

.stv-search-state-title {
	font-family: inherit;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
	margin: 0 0 8px;
}

/* The empty-result sentence is the heading of its own panel. It keeps its
   exact words and its own class, and takes the title's weight. */
.stv-search-empty {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.stv-search-state-text,
.stv-search-limited,
.stv-search-outage {
	font-size: 18px;
	line-height: 1.6;
	color: #3f3f3f;
	margin: 0 auto;
	max-width: 36em;
}

/* Rate limited and outage are not the visitor's doing, and data being
   refreshed is not either. A red edge would say "you did something wrong";
   a neutral dark edge says "the service is paused". */
.stv-search-state-limited,
.stv-search-state-outage,
.stv-search-withheld {
	border-top: 4px solid #3f3f3f;
}

/* The outage and throttle sentences are the only thing in their container,
   so the container carries the breathing room a page would otherwise have
   given them. */
.stv-search-unavailable,
.stv-search-throttled {
	padding: 8px 0;
}

/* "About this listing data" (Batch 255-AC, Scout 2026-10-25): one block on
   a muted background holding, in order, the MLS GRID logo and the 19.23
   source line on one row, the 19.24 notice, the site copy (19.24 first
   paragraph and 19.29), and the 19.09 sentence. The rules call for a
   conspicuous display, so the text is dark on a light panel at 15px or more
   with a 1.5 line height (Scout's floor for this block), never collapsed and
   never grey on white. */
.stv-idx-notice {
	margin: 0 0 20px;
	padding: 16px 20px;
	background: #f6f5f3;
	border: 1px solid #e4dfd7;
	border-radius: 10px;
}

.stv-idx-heading {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 10px;
}

/* (a) The logo and the source line on one row; they wrap on a narrow phone. */
.stv-idx-sourcerow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 8px;
}

.stv-idx-use,
.stv-idx-source,
.stv-search-as-of {
	font-size: 15px;
	line-height: 1.5;
	color: #1a1a1a;
	margin: 0;
	overflow-wrap: anywhere;
}

.stv-search-as-of {
	margin-bottom: 8px;
}

.stv-idx-use {
	margin-bottom: 8px;
}

.stv-idx-source {
	font-weight: 600;
}

/* (d) The Stellar 19.09 disclosure (Batch 76-VB), last in the block. The
   rule asks that it "clearly states" the sentence, so it is dark and
   semibold -- never fine print, never collapsed. */
.stv-idx-excluded {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
	overflow-wrap: anywhere;
}

/* The MLS GRID logo (contract row G, Batch 69-VB), directly above the source
   line it belongs with, on page 1 of a non-empty result set. Printed as the
   approved file is: scaled only, never cropped, recolored or filtered.
   height:auto against the img's own width/height attributes keeps the
   proportions at every width; max-width keeps it inside a narrow phone. */
.stv-idx-logo {
	margin: 0;
}

.stv-idx-logo-img {
	display: block;
	width: 160px;
	max-width: 100%;
	height: auto;
}

/* The site's own brokerage and contact (contract row I, Stellar 19.13, Batch
   71-VB), once per results page directly below the notice. 19.13 asks for a
   readily visible color and typeface, so this is body size and dark text like
   the notice, not fine print. The phone and email are links: brand red,
   underlined, so they read as links without relying on color alone. It is a
   different thing from a card's "Listing courtesy of" line (row C), so it
   does not borrow that line's style. */
.stv-idx-identity {
	margin: -8px 0 20px;
}

.stv-idx-identity-firm,
.stv-idx-identity-contact {
	font-size: 17px;
	line-height: 1.5;
	color: #1a1a1a;
	margin: 0;
	overflow-wrap: anywhere;
}

.stv-idx-identity-brokerage {
	font-weight: 600;
}

.stv-idx-identity-contact a {
	color: #B91C1C;
	text-decoration: underline;
}

.stv-idx-identity-contact a:hover {
	color: #991B1B;
}

/* The Stellar 19.30 DMCA notice (Batch 75-VB). The rule asks for a
   conspicuous display, so the two paragraphs are body size and dark text
   under a real heading, set apart by a rule line -- not fine print. The link
   to them sits below the toolbar, above the notice block, and reads as a link
   by underline as well as color. */
.stv-dmca-link {
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 12px;
}

.stv-dmca-link a,
.stv-dmca-notice a {
	color: #B91C1C;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.stv-dmca-link a:hover,
.stv-dmca-notice a:hover {
	color: #991B1B;
}

/* Batch 255-AC: below the listing-data block, set apart by space and a
   rule, under a smaller heading. Fully shown, never collapsed. */
.stv-dmca-notice {
	margin: 32px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #e4dfd7;
}

.stv-dmca-heading {
	font-size: 17px;
	line-height: 1.4;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.stv-dmca-notice p {
	font-size: 17px;
	line-height: 1.6;
	color: #1a1a1a;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Results
   --------------------------------------------------------------------------- */

/* One column on a phone, two on a tablet, three on a desktop. Three rather
   than four: at the widths this band reaches, a fourth column wraps nearly
   every address onto two lines and squeezes the disclosure into a narrow
   stripe, and a buyer comparing homes reads three comfortable cards faster
   than four cramped ones. */
.stv-search-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.stv-search-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.stv-search-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.stv-search-result {
	display: flex;
}

/* No height, no max-height, no overflow rule. A card is as tall as what is in
   it, and the grid row stretches every card to the tallest in the row. A
   hairline and no heavy shadow: a grid where every card casts its own shadow
   is a page that looks like it is vibrating. */
.stv-listing-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px 18px 18px;
	background: #ffffff;
	border: 1px solid #e2ded7;
	border-radius: 8px;
}

/* 0. The photo frame (Batch 200-MG), only when a media source is wired. A
   fixed 4:3 box, so a card is the same height before its photo loads, after
   it loads, and when there is no photo at all. The photo is fitted inside the
   box and never cropped: object-fit contain, a soft panel behind any margin.
   Media ruling 2 allows resizing and thumbnails; cropping is not needed. */
.stv-listing-media {
	order: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0 0 12px;
	overflow: hidden;
	background: #f3f1ed;
	border: 1px solid #e8e5e0;
	border-radius: 6px;
}

.stv-listing-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Scoped under the frame so the later, generic .stv-listing-photo rule
   (height: auto) cannot override it: both dimensions stay 100%, so contain
   fits a portrait photo inside the box instead of overflowing and clipping
   (Codex P2 on PR #225). */
.stv-listing-media .stv-listing-photo-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* No photo: the same frame, saying so in words. Dark text on the soft panel,
   17px, centred: a deliberate state, not a broken image. */
.stv-listing-media-text {
	margin: 0;
	padding: 0 16px;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 600;
	color: #3f3f3f;
	text-align: center;
}

/* 1. The price leads the card. Dark rather than red: red is what the controls
   are, and a grid of red numbers is a grid with no emphasis left in it. */
.stv-listing-price {
	order: 1;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin: 0;
}

/* 2. The address, or "Home for sale" when it was withheld. Body face, bold,
   sentence case as the data gives it. */
.stv-listing-title {
	order: 2;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	margin: 6px 0 0;
}

/* 3. Beds, baths, square feet, year -- one row of facts. The gap between them
   is layout, not a typed separator, so a line that wraps never starts with a
   stray bar. Each fact keeps its number and unit together. */
.stv-listing-facts {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 18px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 1.45;
	color: #1a1a1a;
}

.stv-listing-facts li {
	white-space: nowrap;
}

/* 4. The secondary location line. */
.stv-listing-locality {
	order: 4;
	font-size: 17px;
	line-height: 1.45;
	color: #3f3f3f;
	margin: 4px 0 14px;
}

/* 5. The status, as a small pill. margin-top: auto sends it, and the
   disclosure after it, to the bottom of the card, so every card in a row puts
   its attribution at the same height. Colour is never the only signal: the
   pill says the status in words. */
.stv-listing-status {
	order: 5;
	align-self: flex-start;
	margin: auto 0 0;
	padding: 3px 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
	background: #eeebe6;
	border: 1px solid #d6d0c6;
	border-radius: 4px;
}

.stv-listing-status-active,
.stv-listing-status-coming-soon {
	color: #ffffff;
	background: #1f6b43;
	border-color: #1f6b43;
}

.stv-listing-status-active-under-contract,
.stv-listing-status-pending {
	color: #1a1a1a;
	background: #fbe3b8;
	border-color: #e6c27f;
}

.stv-listing-status-closed {
	color: #ffffff;
	background: #3f3f3f;
	border-color: #3f3f3f;
}

/* 6. The IDX disclosure line (Batch 62b-VB): brokerage, MLS number, status.
   Last and apart from the home's own facts, because it is attribution rather
   than description. Secondary -- one size down and muted -- but 16px and
   #4a4a4a on white, which clears AA comfortably: it is required text, and no
   light grey on white. Its wording is untouched. */
.stv-listing-disclosure {
	order: 6;
	font-size: 17px;
	line-height: 1.45;
	color: #4a4a4a;
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #f0ede8;
	overflow-wrap: anywhere;
}

/* A card with no status pill sends its disclosure to the bottom instead; a
   card with one keeps the disclosure just under it. Both are DOM-adjacent,
   so the sibling selector sees them in the order the renderer wrote them. */
.stv-listing-disclosure {
	margin-top: auto;
}

/* 8. The way in: "View details", last on the card. A full-width text link
   with a tall target (the 55+ rule: nothing smaller than a fingertip), red
   like the controls, underlined so it reads as a link without colour. The
   screen-reader half of its name is the visually-hidden span inside it. */
.stv-listing-details {
	order: 8;
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.5;
}

.stv-listing-details-link {
	display: block;
	padding: 10px 0;
	color: #b91c1c;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stv-listing-details-link:hover {
	color: #991b1b;
}

.stv-listing-details-link:focus-visible {
	outline: 3px solid #b91c1c;
	outline-offset: 3px;
}

.stv-listing-status + .stv-listing-disclosure {
	margin-top: 10px;
}

/* Batch 242-AC (Scout, 2026-10-24): the Showcase-style card. The photo runs
   edge to edge across the top, the card lifts on hover, and the WHOLE CARD
   is the link: the existing "View details" link is stretched over it with
   ::after, so there is still exactly one link, one accessible name and one
   tab stop per card, and no link wraps another element. Nothing on the card
   moved or changed: the facts, the status pill and the "Listing courtesy of"
   line keep their order and their sizes, so the 19.22 attribution still
   follows the property information on every card. */
.stv-listing-card {
	position: relative;
	padding: 0 0 18px;
	overflow: hidden;
	border-color: #ddd8d0;
	box-shadow: 0 1px 3px rgba(26, 26, 26, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stv-listing-card > * {
	margin-left: 18px;
	margin-right: 18px;
}

.stv-listing-card > .stv-listing-media {
	margin: 0 0 14px;
	border: 0;
	border-bottom: 1px solid #e8e5e0;
	border-radius: 0;
}

/* No photo frame: the card keeps its old top padding. */
.stv-listing-card > :first-child:not(.stv-listing-media):not(.stv-listing-ribbon):not(.stv-listing-frame):not(.stv-listing-body) {
	margin-top: 16px;
}

.stv-listing-card > .stv-listing-price {
	font-size: 1.625rem;
}

.stv-listing-card:hover {
	box-shadow: 0 8px 22px rgba(26, 26, 26, 0.14);
	transform: translateY(-2px);
}

.stv-listing-card:focus-within {
	outline: 3px solid #b91c1c;
	outline-offset: 2px;
}

.stv-listing-details-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The card's own ring replaces the link's, which would outline only the
   words at the foot of the card. */
.stv-listing-details-link:focus-visible {
	outline: none;
}

/* Round 3 (Scout, 2026-10-24): four columns on a desktop, two on a tablet,
   one on a phone. Scout's ruling overrides the three-column cap noted above. */
@media (min-width: 640px) {
	.stv-search .stv-search-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.stv-search .stv-search-results {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Batch 243-AC (Scout, 2026-10-23): five columns on a wide screen. The
   band is capped at 1600px, so a card is never narrower than about 290px,
   which still holds a price, an address and the disclosure line at 17px. */
@media (min-width: 1680px) {
	.stv-search .stv-search-results {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* The field order, matching the markup (Batch 243-AC): the news bar above
   the photo; price; "<sub-type> for sale"; status; beds | baths | sq ft;
   address; city, state ZIP; then the sold notice and the link. No
   subdivision, status pill or "Listing courtesy of" line on a card (Scout's
   ruling, 2026-10-23: the attribution is on the detail page). */
.stv-listing-card > .stv-listing-ribbon      { order: 0; }
.stv-listing-card > .stv-listing-price       { order: 1; }
.stv-listing-card > .stv-listing-kind        { order: 2; }
.stv-listing-card > .stv-listing-state       { order: 3; }
.stv-listing-card > .stv-listing-facts       { order: 4; }
.stv-listing-card > .stv-listing-title       { order: 5; }
.stv-listing-card > .stv-listing-locality    { order: 6; }
.stv-listing-card > .stv-listing-sold-notice { order: 9; }
.stv-listing-card > .stv-listing-details     { order: 10; margin-top: auto; }

.stv-listing-kind {
	margin: 4px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #3f3f3f;
}

/* beds | baths | sq ft: the bar is a border, not a typed character, so a
   wrapped line never starts with one and a screen reader reads no "pipe". */
.stv-listing-card .stv-listing-facts {
	gap: 2px 0;
}

.stv-listing-card .stv-listing-facts li + li {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1.5px solid #8a857e;
}

/* The status in words, under the type line ("Active"). */
.stv-listing-state {
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1f6b43;
}

/* The news bar (Batch 243-AC): a thin band the full width of the card,
   ABOVE the photo, never over it, so no part of the photo is covered.
   White on a dark band (#1a1a1a, 17:1; on the red, 6.5:1). */
.stv-listing-ribbon {
	margin: 0;
	padding: 4px 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	background: #1a1a1a;
}

.stv-listing-card > .stv-listing-ribbon {
	margin: 0;
}

/* A bar with no photo frame after it: the price keeps its top space. */
.stv-listing-card > .stv-listing-ribbon + :not(.stv-listing-media) {
	margin-top: 16px;
}

.stv-listing-ribbon-new {
	background: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
	.stv-listing-card {
		transition: none;
	}

	.stv-listing-card:hover {
		transform: none;
	}
}

/* 7. The sold-listing disclaimer (row E, Stellar 19.22, Batch 72-VB). Printed
   only on a closed card, directly after the disclosure line in the markup.
   The card is a flex column ordered by these rules, so this one needs its own
   order or it would default to 0 and jump to the top of the card. Same size
   and colour as the disclosure it belongs to; no rule above it, because it is
   part of that attribution rather than a new section. */
.stv-listing-sold-notice {
	order: 7;
	font-size: 17px;
	line-height: 1.45;
	color: #4a4a4a;
	margin: 6px 0 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Above the results: the count and the sort
   --------------------------------------------------------------------------- */

/* The count on the left, the sort on the right, wrapping to two rows when the
   width runs out rather than squeezing either. The count is a sentence and
   reads at body size; it is role="status" in the markup, so a screen reader
   hears the new total after a search without the page moving focus. */
.stv-search-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 18px;
}

.stv-search-count {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	color: #1a1a1a;
}

/* A label, a menu, and a button, on one row. The button is what applies the
   choice: a menu that submitted itself on change would reload the page under
   a keyboard visitor arrowing through the options. Secondary styling -- an
   outline rather than the red fill -- because Search Homes is the primary
   action and a second red button would compete with it. */
.stv-search-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.stv-search-sort-label {
	font-size: 17px;
	font-weight: 500;
	color: #1a1a1a;
}

.stv-search-sort select {
	min-height: 48px;
	min-width: 0;
	max-width: 100%;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 6px;
	cursor: pointer;
}

.stv-search-sort select:focus {
	border-color: #B91C1C;
}

.stv-search-sort-apply {
	min-height: 48px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	color: #B91C1C;
	background: #ffffff;
	border: 1.5px solid #B91C1C;
	border-radius: 6px;
	cursor: pointer;
}

.stv-search-sort-apply:hover {
	color: #ffffff;
	background: #991B1B;
	border-color: #991B1B;
}

/* On a phone the toolbar stacks: the count on its own line, then the sort
   filling the width, so the menu is not a thumb-sized box beside a label. */
@media (max-width: 560px) {
	.stv-search-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.stv-search-sort select {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------------
   Below the results: the pager
   --------------------------------------------------------------------------- */

/* Previous, the numbered pages, Next, and a plain "Page 3 of 21" line. Every
   link and the current page are at least 48px square. The current page is
   filled, not merely bold, so it can be found at a glance; a disabled step is
   shown rather than removed, so the row does not shift between the first and
   last pages, and it is muted but still clears AA. */
.stv-search-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 28px 0 0;
}

.stv-search-page-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-search-page,
.stv-search-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 10px 14px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: #B91C1C;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 6px;
	text-decoration: none;
}

a.stv-search-page:hover,
a.stv-search-step:hover {
	color: #ffffff;
	background: #991B1B;
	border-color: #991B1B;
}

.stv-search-page-current {
	color: #ffffff;
	background: #B91C1C;
	border-color: #B91C1C;
}

.stv-search-step[aria-disabled="true"] {
	color: #595959;
	background: #f9f8f6;
	border-color: #e8e5e0;
}

.stv-search-page-gap {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 4px;
	color: #595959;
}

.stv-search-page-of {
	flex: 1 1 100%;
	margin: 4px 0 0;
	font-size: 17px;
	color: #4a4a4a;
	text-align: center;
}

/* Text a screen reader needs and a sighted visitor does not: "Page" before
   each number. The standard clip pattern, so it stays in the accessibility
   tree rather than being display: none'd out of it. */
.stv-search-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}



/* ---------------------------------------------------------------------------
   One listing: ?listing=<MLS#> (Batch 146-VB; layout Batch 213-MG)
   --------------------------------------------------------------------------- */

/* Scout's second approved layout of 2026-10-19 (Batch 213-MG; it replaces
   Batch 210-MG's mosaic). Batch 217-MG (Scout, 2026-10-20): WHITE BY
   DEFAULT, with a visitor's "Dark mode" button (listing-viewer.js) that
   switches this page to the original dark scheme. Every colour below is a
   token, set twice. Each text pair is at least 4.5:1 (WCAG formula):
   LIGHT  #1a1a1a text on #ffffff 17.4:1 and on #f6f5f3 16.0:1; #4a4a4a
          secondary 8.9:1 / 8.1:1; #b91c1c links 6.5:1 / 6.0:1; #991b1b
          errors 8.6:1 on white; the #ef4444 current-thumbnail outline 3.8:1.
   DARK   #f2f2f2 text on #161616 17.0:1 and on #202020 15.4:1; #c9c9c9
          secondary 10.6:1 on #202020; #fca5a5 links 9.9:1 / 9.0:1.
   White on the #b91c1c button is 6.5:1 in both. The full-screen viewer stays
   dark in both. Fluid up to 1360px. Body text is 18px; the "Listing
   courtesy of" line is 18px too, so the required attribution is never
   smaller than the listing data beside it (Stellar 19.22 paragraph 3). A
   long address or an unbroken MLS string wraps inside its column instead of
   pushing the page sideways on a phone. */
.stv-listing-detail {
	--stv-d-bg: #ffffff;
	--stv-d-panel: #f6f5f3;
	--stv-d-text: #1a1a1a;
	--stv-d-muted: #4a4a4a;
	--stv-d-link: #b91c1c;
	--stv-d-error: #991b1b;
	--stv-d-line: #dcd8d2;
	--stv-d-rule: #cfcac3;
	--stv-d-focus: #1a1a1a;
	--stv-d-hover: #ecebe8;
}

.stv-listing-detail.stv-listing-dark {
	--stv-d-bg: #161616;
	--stv-d-panel: #202020;
	--stv-d-text: #f2f2f2;
	--stv-d-muted: #c9c9c9;
	--stv-d-link: #fca5a5;
	--stv-d-error: #fca5a5;
	--stv-d-line: #3a3a3a;
	--stv-d-rule: #4a4a4a;
	--stv-d-focus: #ffffff;
	--stv-d-hover: #2a2a2a;
}

/* The page behind the detail follows it: white by default (the theme's own
   background), dark only while the visitor has dark mode on. */
body.stv-listing-dark-page {
	background: #161616;
}

/* Batch 217-MG. The theme's .container is 1040px with 40px padding, so the
   detail page had 960px to work in and its two columns were squeezed or
   stacked on desktop screens. On a listing-detail page only -- the
   stv-listing-detail-page body class, added by Search_Shortcode::body_class()
   on a ?listing= request for the search page -- the section's container
   loses its cap and keeps 24px sides; .stv-listing-detail below stays
   1360px, centred. No 100vw: with a scrollbar showing, 100vw is wider than
   the page and would scroll sideways. Every other page keeps 1040px. */
body.stv-listing-detail-page .section > .container {
	max-width: none;
	padding-right: 24px;
	padding-left: 24px;
}

/* The theme's page hero repeats the search page's title above the listing;
   on a detail page the address is the page's one H1 (Batch 213-MG). */
body:has(.stv-listing-detail) .page-hero {
	display: none;
}

.stv-listing-detail {
	box-sizing: border-box;
	width: 100%;
	max-width: 1360px;
	min-width: 0;
	margin: 0 auto 24px;
	padding: 16px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--stv-d-text);
	background: var(--stv-d-bg);
	overflow-wrap: anywhere;
}

.stv-listing-detail .stv-listing-price,
.stv-listing-detail .stv-listing-title,
.stv-listing-section-title,
.stv-listing-contact-heading,
.stv-listing-feature-title {
	font-family: 'Lora', Georgia, serif;
	color: var(--stv-d-text);
}

/* Links on the dark page: light red, underlined, so they read as links
   without relying on colour alone. */
.stv-listing-detail a {
	color: var(--stv-d-link);
}

.stv-listing-detail a:focus-visible,
.stv-listing-detail button:focus-visible {
	outline: 3px solid var(--stv-d-focus);
	outline-offset: 3px;
}

/* Every listing photo is fluid and never overflows its column. The boxes
   below (stage, grid, viewer) are more specific and size it exactly. */
.stv-listing-photo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* 1. The way back, then the breadcrumb, on one row where they fit. */
.stv-listing-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	margin: 0 0 16px;
}

/* The "Dark mode" / "Light mode" button (Batch 217-MG). listing-viewer.js
   adds it at the end of the top row; without JavaScript there is no button
   and the page is light. 44px tall, outlined in the text colour. */
.stv-listing-theme-toggle {
	min-height: 44px;
	margin-left: auto;
	padding: 8px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--stv-d-text);
	background: transparent;
	border: 2px solid var(--stv-d-text);
	border-radius: 6px;
	cursor: pointer;
}

.stv-listing-theme-toggle:hover {
	background: var(--stv-d-hover);
}

.stv-listing-topbar .stv-listing-back {
	margin: 0;
}

.stv-listing-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-breadcrumb li + li::before {
	content: "\203A";
	padding: 0 8px;
	color: var(--stv-d-muted);
}

.stv-listing-breadcrumb a {
	display: inline-block;
	padding: 10px 0;
	color: var(--stv-d-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 2. Two columns of equal height: the facts on the left (about 450px), the
   photo on the right filling the rest. align-items: stretch makes both the
   height of the taller one; inside each, a column flex box sends the last
   item -- "Send a Message" on the left, the thumbnail strip on the right --
   to the bottom, so the two bottoms line up. */
.stv-listing-top {
	display: grid;
	grid-template-columns: minmax(420px, 450px) minmax(0, 1fr);
	align-items: stretch;
	gap: 24px;
	margin: 0 0 36px;
}

.stv-listing-summary,
.stv-listing-media-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The card's flex order values (cards, sections 1-8) must not reach here:
   the left column prints in markup order. */
.stv-listing-summary > *,
.stv-listing-pricebar > * {
	order: 0;
}

.stv-listing-summary {
	box-sizing: border-box;
	padding: 4px 0 0;
}

/* Price (about 46px, bold) with the status pill on the right. */
.stv-listing-pricebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.stv-listing-detail .stv-listing-price {
	margin: 0;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.1;
}

.stv-listing-detail .stv-listing-pricebar .stv-listing-status {
	order: 1;
	align-self: center;
	margin: 0;
	padding: 4px 14px;
	font-size: 17px;
	border-radius: 999px;
}

/* The address: the street, then "City, FL ZIP", in Lora about 30px. */
.stv-listing-detail .stv-listing-title {
	margin: 16px 0 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
}

.stv-listing-street,
.stv-listing-detail .stv-listing-locality {
	display: block;
}

.stv-listing-detail .stv-listing-locality {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--stv-d-text);
}

/* "For sale · Residential · MLS # ...": small caps, never smaller than 17px. */
.stv-listing-kicker {
	margin: 12px 0 0;
	font-size: 17px;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	color: var(--stv-d-muted);
}

/* The six facts: three across, between a top and a bottom rule, big
   numbers over their labels (the <dt> comes first in the markup, so the
   column is reversed). */
.stv-listing-factgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 12px;
	margin: 22px 0 0;
	padding: 20px 0;
	border-top: 1px solid var(--stv-d-rule);
	border-bottom: 1px solid var(--stv-d-rule);
}

.stv-listing-fact {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
}

.stv-listing-fact dd {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--stv-d-text);
}

.stv-listing-fact dt {
	font-size: 17px;
	color: var(--stv-d-muted);
}

/* Village, County and Bond balance: label left, value right. */
.stv-listing-rows {
	margin: 16px 0 0;
}

.stv-listing-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--stv-d-line);
}

.stv-listing-row dt {
	color: var(--stv-d-muted);
}

.stv-listing-row dd {
	margin: 0;
	font-weight: 700;
}

.stv-listing-bond-link {
	display: inline-block;
	min-height: 44px;
	padding: 8px 0;
	box-sizing: border-box;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stv-listing-call {
	margin: 18px 0 0;
}

.stv-listing-call a {
	display: inline-block;
	min-height: 48px;
	padding: 10px 0;
	box-sizing: border-box;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Send a Message": one full-width red button, pinned to the bottom of the
   column so its bottom lines up with the bottom of the thumbnail strip. */
.stv-listing-send-row {
	margin: auto 0 0;
	padding: 16px 0 0;
}

.stv-listing-detail .stv-listing-send {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	background: #b91c1c;
	border: 2px solid #b91c1c;
	border-radius: 8px;
	text-decoration: none;
}

.stv-listing-detail .stv-listing-send:hover {
	background: #991b1b;
	border-color: #991b1b;
}

/* 3. The photo stage: one large photo that grows to fill the column (at
   least 560px tall), filled edge to edge with object-fit: cover -- no
   letterbox bars (Scout, 2026-10-19). The full-screen viewer keeps contain,
   so every photo can still be seen whole. */
.stv-listing-stage {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
}

.stv-listing-hero {
	position: relative;
	flex: 1 1 auto;
	min-height: 560px;
	background: var(--stv-d-panel);
	border-radius: 14px;
	overflow: hidden;
}

.stv-listing-hero-link,
.stv-listing-hero picture {
	position: absolute;
	inset: 0;
	display: block;
}

.stv-listing-hero .stv-listing-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.stv-listing-hero-link:focus-visible {
	outline-offset: -6px;
}

/* The overlay pill at the bottom centre: 48px previous and next, "1 / N". */
.stv-listing-hero-nav {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	background: rgba(17, 17, 17, 0.85);
	border-radius: 999px;
}

.stv-listing-hero-count {
	margin: 0;
	padding: 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
}

.stv-listing-hero-step {
	width: 48px;
	height: 48px;
	padding: 0;
	font: inherit;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: #111111;
	background: #ffffff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.stv-listing-hero-step[hidden] {
	display: none;
}

/* Below the photo: about six thumbnails, the current one outlined in red,
   and "View All N Photos". */
.stv-listing-thumbs-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.stv-listing-thumbs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	flex: 1 1 auto;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-listing-thumb {
	margin: 0;
	min-width: 0;
}

.stv-listing-thumb-link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--stv-d-panel);
	border: 3px solid transparent;
	border-radius: 8px;
	overflow: hidden;
}

.stv-listing-thumb-current .stv-listing-thumb-link {
	border-color: #ef4444;
}

.stv-listing-thumb-link picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-listing-thumb .stv-listing-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.stv-listing-detail .stv-listing-view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 18px;
	font-size: 17px;
	font-weight: 700;
	color: var(--stv-d-text);
	background: transparent;
	border: 2px solid var(--stv-d-text);
	border-radius: 8px;
	text-decoration: none;
}

.stv-listing-detail .stv-listing-view-all:hover {
	background: var(--stv-d-hover);
}

/* No photo: a calm panel at the hero's size, saying so in words. */
.stv-listing-hero-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--stv-d-line);
}

.stv-listing-gallery-unavailable {
	margin: 0;
	padding: 0 24px;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--stv-d-text);
	text-align: center;
}

/* 4. Below the two columns: About and Facts and features on the left, the
   contact card on the right, sticky. */
.stv-listing-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	column-gap: 48px;
	row-gap: 36px;
	align-items: start;
}

.stv-listing-main {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

.stv-listing-layout > .stv-listing-contact {
	position: sticky;
	top: 24px;
}

/* About this home: the remarks in full, at a readable measure. */
.stv-listing-remarks {
	max-width: 68ch;
}

.stv-listing-remarks p {
	margin: 0 0 1em;
}

/* Section headings: H2 sizes from the 55+ rule. */
.stv-listing-section-title {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

/* The 19.22 line, directly under the "Facts and features" heading. */
.stv-listing-detail .stv-listing-disclosure {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--stv-d-text);
}

.stv-listing-detail .stv-listing-sold-notice {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--stv-d-text);
}

/* Facts and features: up to four cards, two across. A card with no value is
   not printed (Search_Renderer::FEATURE_CARDS). */
.stv-listing-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

.stv-listing-feature {
	padding: 14px 18px;
	background: var(--stv-d-panel);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-listing-feature-summary {
	display: block;
	list-style: none;
}

.stv-listing-feature-summary::-webkit-details-marker {
	display: none;
}

.stv-listing-feature-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.stv-listing-feature-list {
	margin: 0;
}

.stv-listing-feature-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 16px;
	padding: 8px 0;
	border-top: 1px solid var(--stv-d-line);
}

.stv-listing-feature-row dt {
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-feature-row dd {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--stv-d-text);
}

/* 5. The contact card. */
.stv-listing-contact {
	padding: 24px;
	background: var(--stv-d-panel);
	border: 1px solid var(--stv-d-line);
	border-radius: 14px;
}

.stv-listing-contact-who {
	display: flex;
	align-items: center;
	gap: 16px;
}

.stv-contact-photo {
	display: block;
	width: 96px;
	height: 128px;
	border-radius: 10px;
}

.stv-listing-contact-name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.stv-listing-contact-role {
	margin: 2px 0 0;
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-contact-heading {
	margin: 18px 0 12px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.stv-listing-contact-phone {
	margin: 16px 0 0;
	font-size: 18px;
}

/* The number and its period stay on one line: after the inline-block link
   the browser may otherwise break before the "." (Batch 219-MG). */
.stv-listing-contact-number {
	white-space: nowrap;
}

/* "Prefer to talk? Call me at 352-780-1479." The number is the link, with a
   48px-tall target around it. */
.stv-listing-contact-phone a {
	display: inline-block;
	min-height: 48px;
	padding: 10px 0;
	box-sizing: border-box;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The inquiry form inside the dark card: light labels, white fields with
   dark text and a visible border, the red button. */
.stv-listing-detail .stv-inquiry {
	margin: 0;
	padding: 0;
	color: var(--stv-d-text);
	background: transparent;
	border: 0;
}

.stv-listing-detail .stv-inquiry-field label {
	color: var(--stv-d-text);
}

.stv-listing-detail .stv-inquiry-field input,
.stv-listing-detail .stv-inquiry-field textarea {
	color: #1a1a1a;
	background: #ffffff;
	border-color: #8a847b;
}

.stv-listing-detail .stv-inquiry-field input:focus,
.stv-listing-detail .stv-inquiry-field textarea:focus {
	outline-color: var(--stv-d-focus);
}

.stv-listing-detail .stv-inquiry-privacy a {
	color: var(--stv-d-link);
}

.stv-listing-detail .stv-inquiry-error {
	color: var(--stv-d-error);
}

.stv-listing-detail .stv-inquiry-result {
	color: #1a1a1a;
}

.stv-listing-detail .stv-inquiry-result a {
	color: #1a1a1a;
}

.stv-listing-detail .stv-inquiry-submit:focus-visible {
	outline-color: var(--stv-d-focus);
}

.stv-listing-action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 16px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 2px solid #b91c1c;
	border-radius: 8px;
}

.stv-listing-detail .stv-listing-action-call {
	color: #b91c1c;
	background: #ffffff;
}

.stv-listing-detail .stv-listing-action-call:hover {
	background: #fdf2f2;
}

/* The all-photos grid: what a visitor without JavaScript scrolls to. A
   thumbnail grid (about 200px a photo), because with scripting off the
   browser loads every one at once. Each photo sits in a fixed 4:3 box. It is
   inside <noscript>, so with the viewer running the browser never builds it. */
.stv-listing-photos {
	margin: 36px 0 0;
}

.stv-listing-gallery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-listing-gallery-item {
	aspect-ratio: 4 / 3;
	margin: 0;
	background: var(--stv-d-panel);
	border-radius: 8px;
	overflow: hidden;
}

.stv-listing-gallery-item picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-listing-photos .stv-listing-photo,
.stv-viewer .stv-listing-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.stv-listing-gallery-skip,
.stv-listing-gallery-end {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-gallery-end {
	margin: 10px 0 0;
}

.stv-listing-gallery-skip a {
	display: inline-block;
	min-height: 44px;
	padding: 8px 0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stv-listing-gallery-item:focus-visible,
.stv-listing-gallery-end:focus-visible,
.stv-listing-photos:focus-visible,
.stv-listing-contact:focus-visible {
	outline: 3px solid var(--stv-d-focus);
	outline-offset: 3px;
}

/* 6. The disclaimer block: the same notices, light on the dark page. The
   MLS GRID logo sits on a white panel so the approved file shows exactly as
   supplied (scaled only, never recoloured). */
.stv-listing-notices {
	margin: 36px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--stv-d-line);
}

.stv-listing-detail .stv-idx-notice,
.stv-listing-detail .stv-dmca-notice {
	border-color: var(--stv-d-line);
}

.stv-listing-detail .stv-idx-notice {
	background: var(--stv-d-panel);
}

.stv-listing-detail .stv-idx-heading,
.stv-listing-detail .stv-idx-use,
.stv-listing-detail .stv-idx-source,
.stv-listing-detail .stv-search-as-of,
.stv-listing-detail .stv-idx-excluded,
.stv-listing-detail .stv-idx-identity-firm,
.stv-listing-detail .stv-idx-identity-contact,
.stv-listing-detail .stv-dmca-link,
.stv-listing-detail .stv-dmca-heading,
.stv-listing-detail .stv-dmca-notice p {
	color: var(--stv-d-text);
}

.stv-listing-detail .stv-idx-identity-contact a,
.stv-listing-detail .stv-dmca-link a,
.stv-listing-detail .stv-dmca-notice a {
	color: var(--stv-d-link);
}

.stv-listing-detail .stv-idx-logo {
	display: inline-block;
	padding: 8px 12px;
	background: #ffffff;
	border-radius: 6px;
}

/* The Follow Up Boss floating call button, hidden on a listing detail page
   only (Scout ruling, 2026-10-19): the contact card and the phone bar carry
   the call there. FUB's widget script (widgetbe.com, injected site-wide by
   the header-code plugin) draws the button inside an iframe it names
   "widgetCta" and positions with inline styles; !important outranks those.
   Every other page keeps the button. */
body:has(.stv-listing-detail) iframe[name="widgetCta"] {
	display: none !important;
}

/* The phone bar is a phone thing. */
.stv-listing-actionbar {
	display: none;
}

/* The way back. A full-size text link with a generous target, never a small
   arrow on its own. */
.stv-listing-back {
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.6;
}

.stv-listing-back a {
	display: inline-block;
	padding: 8px 0;
	color: #b91c1c;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stv-listing-detail .stv-listing-back a {
	color: var(--stv-d-link);
}

.stv-listing-back a:focus-visible {
	outline: 3px solid #b91c1c;
	outline-offset: 3px;
}

.stv-listing-not-found {
	border-top: 4px solid var(--stv-d-line);
}

/* Breakpoints on the viewport (Batch 217-MG), never on the space left by
   the theme: two columns from 1024px; a tablet (768-1023px) stacks the top
   (the photo first, full width, with its strip) and keeps everything else,
   with About / Facts and the contact card side by side from 900px; the
   phone layout is below 768px. */
@media (max-width: 1023px) {
	.stv-listing-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.stv-listing-media-col {
		order: -1;
	}

	.stv-listing-hero {
		min-height: 420px;
	}
}

@media (max-width: 900px) {
	.stv-listing-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.stv-listing-layout > .stv-listing-contact {
		position: static;
	}
}

/* A phone (under 768px, Batch 217-MG; was 600px and under): the photo first, full width, swipe, a "1 / N"
   badge and "View All N Photos" under it; then the left column's content,
   About, Facts and features, the contact card and the notices; facts and
   features as tap-to-open rows; and a fixed bar with the call and the
   message, 54px tall, the page padded so the bar never covers it. */
@media (max-width: 767px) {
	.stv-listing-detail {
		padding-top: 8px;
	}

	.stv-listing-top {
		gap: 16px;
	}

	.stv-listing-hero {
		flex: 0 0 auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.stv-listing-hero-step {
		display: none;
	}

	.stv-listing-hero-nav {
		left: auto;
		right: 12px;
		bottom: 12px;
		transform: none;
		padding: 2px 4px;
	}

	.stv-listing-thumbs {
		display: none;
	}

	.stv-listing-detail .stv-listing-view-all {
		width: 100%;
	}

	.stv-listing-detail .stv-listing-price {
		font-size: 38px;
	}

	.stv-listing-detail .stv-listing-title {
		font-size: 26px;
	}

	.stv-listing-fact dd {
		font-size: 24px;
	}

	.stv-listing-feature-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.stv-listing-feature {
		padding: 0 16px;
	}

	.stv-listing-feature-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 54px;
		cursor: pointer;
	}

	.stv-listing-feature-summary::after {
		content: "+";
		font-size: 26px;
		font-weight: 700;
		color: var(--stv-d-link);
	}

	.stv-listing-feature[open] .stv-listing-feature-summary::after {
		content: "\2212";
	}

	.stv-listing-feature-title {
		margin: 0;
		font-size: 20px;
	}

	.stv-listing-feature-list {
		padding: 0 0 12px;
	}

	.stv-listing-contact {
		padding: 20px 16px;
	}

	.stv-listing-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: var(--stv-d-panel);
		border-top: 1px solid var(--stv-d-line);
	}

	.stv-listing-action {
		min-height: 54px;
	}

	.stv-listing-detail .stv-listing-action-ask {
		color: #ffffff;
		background: #b91c1c;
	}

	.stv-listing-detail .stv-listing-action-ask:hover {
		background: #991b1b;
		border-color: #991b1b;
	}

	body:has(.stv-listing-actionbar) {
		padding-bottom: 78px;
	}

	.stv-listing-back a {
		display: block;
		padding: 12px 0;
	}
}

/* ---------------------------------------------------------------------------
   The full-screen photo viewer (Batch 210-MG, assets/listing-viewer.js)
   --------------------------------------------------------------------------- */

/* Built by the script and appended to <body>, so it is not under .stv-search
   and names its own type and box model. Dark #111; the count top-left, the
   address centred, a large "Close" with its icon top-right; the photo centred;
   64px round previous and next; a strip of thumbnails with the current one
   outlined. No motion. */
.stv-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	box-sizing: border-box;
	color: #ffffff;
	background: #111;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

.stv-viewer[hidden] {
	display: none;
}

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

.stv-viewer-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.stv-viewer-count {
	margin: 0;
	font-weight: 700;
}

.stv-viewer-title {
	margin: 0;
	text-align: center;
}

.stv-viewer-close {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	font: inherit;
	font-weight: 700;
	color: #ffffff;
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 8px;
	cursor: pointer;
}

.stv-viewer-stage {
	position: relative;
	min-height: 0;
	padding: 0 88px;
}

.stv-viewer-photo {
	width: 100%;
	height: 100%;
}

.stv-viewer-photo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-viewer-nav {
	position: absolute;
	top: 50%;
	margin-top: -32px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	font: inherit;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: #111;
	background: #ffffff;
	border: 0;
	cursor: pointer;
}

.stv-viewer-prev {
	left: 12px;
}

.stv-viewer-next {
	right: 12px;
}

.stv-viewer-strip {
	display: flex;
	gap: 8px;
	padding: 12px 16px 16px;
	overflow-x: auto;
}

.stv-viewer-thumb {
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	padding: 0;
	background: #2a2a2a;
	border: 3px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
}

.stv-viewer-thumb[aria-current="true"] {
	border-color: #ef4444;
}

.stv-viewer-thumb picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-viewer-preload {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.stv-viewer :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.stv-viewer-open,
.stv-viewer-open body {
	overflow: hidden;
}

@media (max-width: 600px) {
	.stv-viewer-bar {
		grid-template-columns: auto 1fr;
	}

	.stv-viewer-title {
		display: none;
	}

	.stv-viewer-stage {
		padding: 0;
	}

	.stv-viewer-nav {
		top: auto;
		bottom: 12px;
		margin-top: 0;
	}
}


/* ---------------------------------------------------------------------------
   The listing inquiry form (Batch 205-FUB). Off unless wp-config.php turns it
   on. 18px everywhere: labels above large fields, 48px-tall controls, errors
   in words under the field they belong to. No script.
   --------------------------------------------------------------------------- */
.stv-inquiry {
	box-sizing: border-box;
	width: 100%;
	max-width: 44em;
	min-width: 0;
	margin: 0 0 24px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #e2ded7;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1.5;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}

.stv-inquiry-heading {
	margin: 0 0 12px;
	font-size: clamp(1.15rem, 0.95rem + 1vw, 1.35rem);
	line-height: 1.3;
}

.stv-inquiry-intro,
.stv-inquiry-privacy {
	margin: 0 0 16px;
	font-size: 18px;
}

.stv-inquiry-privacy a {
	color: #b91c1c;
	text-decoration: underline;
}

/* Batch 313-AC: the Watch note's "Privacy policy" link is a 44px-tall target. */
.stv-watch-privacy-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	vertical-align: middle;
}

.stv-inquiry-field {
	margin: 0 0 18px;
}

.stv-inquiry-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
}

.stv-inquiry-field input,
.stv-inquiry-field textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #ffffff;
	border: 1.5px solid #8a847b;
	border-radius: 6px;
}

.stv-inquiry-field textarea {
	min-height: 140px;
	resize: vertical;
}

.stv-inquiry-field input:focus,
.stv-inquiry-field textarea:focus {
	outline: 3px solid #b91c1c;
	outline-offset: 2px;
	border-color: #b91c1c;
}

.stv-inquiry-field-error input,
.stv-inquiry-field-error textarea {
	border-color: #991b1b;
	border-width: 2px;
}

.stv-inquiry-error {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 600;
	color: #991b1b;
}

.stv-inquiry-actions {
	margin: 0;
}

.stv-inquiry-submit {
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	background: #b91c1c;
	border: 1.5px solid #b91c1c;
	border-radius: 6px;
	cursor: pointer;
}

.stv-inquiry-submit:hover {
	background: #991b1b;
}

.stv-inquiry-submit:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 3px;
}

.stv-inquiry-result {
	margin: 0 0 18px;
	padding: 14px 16px;
	font-size: 18px;
	border-radius: 6px;
	border: 2px solid #991b1b;
	background: #fdf2f2;
}

.stv-inquiry-sent {
	border-color: #2f6b3a;
	background: #f1f8f2;
}

.stv-inquiry-result p {
	margin: 0 0 8px;
}

.stv-inquiry-result p:last-child,
.stv-inquiry-result ul {
	margin-bottom: 0;
}

.stv-inquiry-result-title {
	font-weight: 600;
}

.stv-inquiry-result a {
	color: #1a1a1a;
	text-decoration: underline;
}

/* The honeypot: off-screen and out of the layout. aria-hidden and
   tabindex="-1" in the markup keep it from screen readers and the keyboard. */
.stv-inquiry-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.stv-inquiry {
		padding: 18px 16px;
		border-radius: 6px;
	}

	.stv-inquiry-submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   The inquiry form in a modal dialog (Batch 219-MG). The page script moves
   the form section into a <dialog> inside the detail article, so the light
   and dark tokens apply. A large Close at 18px; full screen on a phone.
   Without the script there is no dialog and the links scroll to the form.
   --------------------------------------------------------------------------- */
.stv-inquiry-dialog {
	box-sizing: border-box;
	width: min(640px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	/* Centred: the theme's reset zeroes the browser's own margin: auto. */
	margin: auto;
	padding: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--stv-d-text);
	background: var(--stv-d-bg);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Never shown closed, even where the browser has no dialog rule of its own. */
.stv-inquiry-dialog:not([open]) {
	display: none;
}

.stv-inquiry-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.stv-inquiry-dialog-bar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	background: var(--stv-d-bg);
	border-bottom: 1px solid var(--stv-d-line);
}

.stv-inquiry-dialog-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
	color: var(--stv-d-text);
}

.stv-inquiry-dialog-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	color: var(--stv-d-text);
	background: transparent;
	border: 2px solid var(--stv-d-text);
	border-radius: 8px;
	cursor: pointer;
}

.stv-inquiry-dialog-close:hover {
	background: var(--stv-d-hover);
}

.stv-inquiry-dialog-close:focus-visible {
	outline: 3px solid var(--stv-d-focus);
	outline-offset: 3px;
}

.stv-inquiry-dialog-body {
	padding: 20px;
}

.stv-inquiry-dialog .stv-inquiry {
	max-width: none;
}

.stv-inquiry-open,
.stv-inquiry-open body {
	overflow: hidden;
}

@media (max-width: 767px) {
	.stv-inquiry-dialog {
		width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	.stv-inquiry-dialog-bar {
		padding: 8px 16px;
	}

	.stv-inquiry-dialog-body {
		padding: 16px;
	}
}

/* ===========================================================================
   Batch 248-AC (Scout, 2026-10-24): the listings redesign.
   Visual spec: docs/design/listings-redesign-2026-10-24/ (Main, CardStates,
   Mobile). From the mockup: the layout, the news-band colours and the blue
   Save search (#1F6FD1). Everything else keeps this stylesheet's own colours,
   with the brand red #B91C1C wherever the mockup shows its darker red. Text stays at
   the 17px floor (55+ audience) where the mockup is smaller; only the band,
   the status pill and the photo count are smaller, as labels.
   Later rules here win over the earlier batches' rules for the same parts.
   =========================================================================== */

.stv-search [hidden] {
	display: none !important;
}

/* The phone's "Filters (n)" button: never on a wider screen. */
.stv-filters-toggle {
	display: none;
}

/* 1. Width: up to 1400px (it was 1600px). */
@media (min-width: 1100px) {
	.stv-search.stv-search-wide {
		width: min(1400px, calc(100vw - 48px));
		margin-left: calc(min(1400px, calc(100vw - 48px)) / -2);
	}
}

/* The one white box holding both rows of the bar. */
.stv-search-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 20px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #e2ded7;
	border-radius: 12px;
}

.stv-search-box .stv-search-form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* 2. Row 1: the box, Price, Beds & baths, More filters, Search. */
.stv-search-filters {
	display: contents;
}

.stv-filters-sheet-head,
.stv-filters-sheet-actions {
	display: none;
}

.stv-search-location {
	display: flex;
	flex: 1 1 380px;
	align-items: center;
	gap: 10px;
	min-width: 260px;
	min-height: 48px;
	padding: 0 14px;
	color: #4a4a4a;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 8px;
}

.stv-search-location:focus-within {
	border-color: #B91C1C;
}

.stv-search-location input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
}

.stv-icon {
	flex: 0 0 auto;
}

.stv-filter-chip {
	min-height: 48px;
	padding: 0 18px;
	border-radius: 8px;
}

.stv-filter-set > .stv-filter-chip {
	color: #B91C1C;
	background: #fdf2f2;
	border-color: #B91C1C;
}

.stv-filter-set .stv-filter-value {
	color: #B91C1C;
}

.stv-search-bar > .stv-search-submit {
	min-height: 48px;
	padding: 0 24px;
	font-weight: 700;
	border-radius: 8px;
}

/* 5. The popups: lifted, rounded, a title, then Reset price (Price only) and
   Apply on one row. Right-aligned when they would run off the right edge
   (search-bar.js adds the class). */
.stv-filter-panel {
	gap: 14px;
	width: 360px;
	padding: 18px;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(26, 26, 26, 0.16);
}

.stv-filter-price .stv-filter-panel,
.stv-filter-rooms .stv-filter-panel {
	width: 360px;
}

.stv-filter-panel.stv-filter-panel-right {
	left: auto;
	right: 0;
}

.stv-filter-panel-title {
	flex: 1 1 100%;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
}

.stv-filter-actions {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.stv-filter-actions .stv-filter-apply {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0 24px;
	font-weight: 700;
	border-radius: 8px;
}

.stv-filter-reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-size: 17px;
	color: #4a4a4a;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 3. Row 2, under a thin rule: chips and Clear all on the left; Sort, Share
   and Save search on the right. */
.stv-search-box .stv-search-chips {
	justify-content: space-between;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid #ebe7e1;
}

.stv-chips-left,
.stv-chips-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.stv-chip {
	min-height: 44px;
	padding: 0 14px;
	background: #f3f0eb;
	border-color: transparent;
	border-radius: 22px;
}

.stv-chip-x {
	color: #4a4a4a;
}

.stv-chip-reset {
	padding: 0 4px;
	font-weight: 500;
	color: #4a4a4a;
}

.stv-chips-right .stv-search-sort {
	gap: 8px;
}

.stv-search-sort-label {
	font-size: 17px;
	color: #4a4a4a;
}

.stv-search-sort select {
	min-height: 44px;
	border-radius: 8px;
}

.stv-chips-right .stv-share-button {
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	font-weight: 500;
	color: #1a1a1a;
	text-decoration: none;
	background: #ffffff;
	border: 1.5px solid #cfcac2;
	border-radius: 8px;
}

.stv-chips-right .stv-share-button:hover {
	border-color: #3f3f3f;
}

.stv-chips-right .stv-share {
	position: relative;
}

.stv-chips-right .stv-save-search {
	margin-left: 0;
}

.stv-save-button {
	gap: 6px;
	min-height: 44px;
	padding: 0 18px;
	font-weight: 700;
	border-radius: 8px;
}

/* "Link copied." beside Share, dark, fading out after a few seconds. */
.stv-share-toast {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 14px;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	background: #1a1a1a;
	border-radius: 8px;
	animation: stv-toast 4s ease forwards;
}

.stv-share-toast:empty {
	display: none;
}

@keyframes stv-toast {
	0%, 80% { opacity: 1; }
	100% { opacity: 0; }
}

/* 4. The count, directly above the cards. Its sort is the phone's. */
.stv-search-toolbar {
	margin: 0 0 16px;
}

.stv-search-count {
	font-weight: 600;
}

.stv-search-toolbar .stv-search-sort {
	display: none;
}

/* 1 and 6. Four cards a row from 1100px (no five-column step), two on a
   tablet, one on a phone. */
@media (min-width: 1680px) {
	.stv-search .stv-search-results {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.stv-listing-card {
	padding: 0;
	border-color: #e2ded7;
	border-radius: 10px;
}

.stv-listing-card > * {
	margin: 0;
}

/* The photo frame: 4:3, filled edge to edge (object-fit cover), so no white
   bands. The band and the arrows lie over it. */
.stv-listing-frame {
	position: relative;
}

.stv-listing-card .stv-listing-media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 0;
}

.stv-listing-slide,
.stv-listing-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-listing-card .stv-listing-photo-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The news band: ~28px over the top of the photo, only when there is news. */
.stv-listing-ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	margin: 0;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
}

.stv-listing-frame > .stv-listing-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.stv-listing-ribbon-price-cut { background: #B8323A; }
.stv-listing-ribbon-open-house { background: #B85A12; }
.stv-listing-ribbon-special-sale { background: #22314F; }
.stv-listing-ribbon-new { background: #2F7D4A; }
.stv-listing-ribbon-coming-soon { background: #6A4C93; }

/* Previous / next: real buttons above the card's stretched link, so pressing
   one never opens the listing. Batch 251-AC (Scout's mockup, 2026-10-25):
   lighter, at 0.55 white (was 0.92), still 44px. The dark chevron carries
   the contrast on a light photo, and a firmer shadow keeps the circle's
   edge visible there; pointing at one brings back the solid circle. */
.stv-listing-step {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 22px;
	box-shadow: 0 1px 6px rgba(26, 26, 26, 0.35);
	transform: translateY(-50%);
	cursor: pointer;
}

.stv-listing-step:hover,
.stv-listing-step:focus-visible {
	background: rgba(255, 255, 255, 0.92);
}

.stv-listing-step::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2.5px solid #1a1a1a;
	border-right: 2.5px solid #1a1a1a;
}

.stv-listing-step-prev {
	left: 8px;
}

.stv-listing-step-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.stv-listing-step-next {
	right: 8px;
}

.stv-listing-step-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.stv-listing-step:focus-visible {
	outline: 3px solid #B91C1C;
	outline-offset: 2px;
}

.stv-listing-photo-count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	margin: 0;
	padding: 3px 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	background: rgba(26, 26, 26, 0.72);
	border-radius: 10px;
}

/* The older card rules ordered its parts with flex order; the parts now sit
   in the frame and the body in markup order, so every order is reset. */
.stv-listing-card .stv-listing-body > *,
.stv-listing-card .stv-listing-toprow > * {
	order: 0;
}

/* The menus size to their words, not to the row. */
.stv-chips-right .stv-search-sort select,
.stv-search-toolbar .stv-search-sort select {
	flex: 0 0 auto;
	width: auto;
}

/* The text: price and pill on one row, then type, facts, street, city. */
.stv-listing-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 16px;
}

.stv-listing-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.stv-listing-card .stv-listing-price {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1a1a1a;
}

.stv-listing-card .stv-listing-state {
	flex: 0 0 auto;
	margin: 0;
	padding: 3px 9px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #1f6b43;
	background: #e7f3ec;
	border-radius: 10px;
}

.stv-listing-card .stv-listing-state-pending,
.stv-listing-card .stv-listing-state-active-under-contract {
	color: #1a1a1a;
	background: #fbe3b8;
}

.stv-listing-card .stv-listing-state-coming-soon {
	color: #6A4C93;
	background: #efe9f6;
}

.stv-listing-card .stv-listing-state-closed {
	color: #3f3f3f;
	background: #eeebe6;
}

.stv-listing-card .stv-listing-kind {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #4a4a4a;
}

.stv-listing-card .stv-listing-facts {
	margin: 4px 0 0;
	font-size: 17px;
	color: #1a1a1a;
}

.stv-listing-card .stv-listing-title {
	margin: 4px 0 0;
	overflow: hidden;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.stv-listing-link {
	color: #1a1a1a;
	text-decoration: none;
}

.stv-listing-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.stv-listing-link:focus-visible {
	outline: none;
}

.stv-listing-card .stv-listing-locality {
	margin: 0;
	font-size: 17px;
	color: #4a4a4a;
}

.stv-listing-card .stv-listing-sold-notice {
	margin: 6px 0 0;
}

/* The pager: 44px squares, the current page filled red. */
.stv-search-page,
.stv-search-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid #cfcac2;
	border-radius: 8px;
}

.stv-search-page-current {
	color: #ffffff;
	background: #B91C1C;
	border-color: #B91C1C;
}

/* The detail page's Share menu (8): Text, Email, Copy link. */
.stv-listing-topbar .stv-detail-share {
	position: relative;
	margin-left: auto;
}

.stv-detail-share .stv-share-button {
	gap: 6px;
	color: #1a1a1a;
	text-decoration: none;
	border: 1.5px solid #cfcac2;
	border-radius: 8px;
}

.stv-share-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.stv-share-item {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #1a1a1a;
	text-align: left;
	text-decoration: none;
	background: #f6f5f3;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.stv-share-item:hover {
	background: #ecebe8;
}

/* 9. A phone. The Search button stays beside the box; with the script, the
   three filter buttons fold into one "Filters (n)" sheet with its own Apply,
   and Save search sits beside that button. The sort moves next to the count.
   Without the script the filter buttons stay on the page as they were. */
@media (max-width: 560px) {
	.stv-search-location {
		flex: 1 1 0;
		min-width: 0;
	}

	.stv-search-bar > .stv-search-submit {
		flex: 0 0 auto;
		width: auto;
	}

	.stv-search-box .stv-search-chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.stv-chips-left,
	.stv-chips-right {
		display: contents;
	}

	.stv-filters-toggle {
		order: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 48px;
		font-family: inherit;
		font-size: 17px;
		font-weight: 600;
		color: #1a1a1a;
		background: #ffffff;
		border: 1.5px solid #cfcac2;
		border-radius: 8px;
		cursor: pointer;
	}

	.stv-chips-right .stv-save-search {
		order: 2;
	}

	.stv-chips-right .stv-save-button {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}

	.stv-chip-list,
	.stv-chip-reset,
	.stv-chips-right .stv-share,
	.stv-share-toast {
		order: 3;
		grid-column: 1 / -1;
	}

	.stv-chips-right .stv-search-sort {
		display: none;
	}

	.stv-search-toolbar .stv-search-sort {
		display: flex;
	}

	.stv-search-toolbar .stv-search-sort-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.stv-search-toolbar {
		flex-wrap: nowrap;
	}

	/* With the script: the filters are a sheet, shown only when open. */
	.stv-search-js .stv-search-filters {
		display: none;
	}

	.stv-search-js .stv-search-filters.stv-filters-open {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px 16px 0;
		overflow-y: auto;
		background: #ffffff;
	}

	.stv-filters-open .stv-filters-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.stv-filters-sheet-title {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 700;
	}

	.stv-filters-sheet-close {
		min-height: 44px;
		padding: 0 12px;
		font-family: inherit;
		font-size: 17px;
		color: #1a1a1a;
		text-decoration: underline;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.stv-filters-open .stv-filter {
		flex: 0 0 auto;
		width: 100%;
	}

	.stv-filters-open .stv-filter-chip {
		pointer-events: none;
		border: 0;
		padding: 0;
		min-height: 0;
		font-weight: 700;
		/* Batch 256-AC: a multi-select summary can be long; it wraps. */
		flex-wrap: wrap;
		white-space: normal;
	}

	.stv-filters-open .stv-filter-chip::after {
		display: none;
	}

	.stv-filters-open .stv-filter-panel {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 8px;
		padding: 0 0 16px;
		background: none;
		border: 0;
		border-bottom: 1px solid #ebe7e1;
		border-radius: 0;
		box-shadow: none;
	}

	.stv-filters-open .stv-filter-panel-title,
	.stv-filters-open .stv-filter-apply {
		display: none;
	}

	.stv-filters-open .stv-filters-sheet-actions {
		position: sticky;
		bottom: 0;
		display: block;
		margin: auto -16px 0;
		padding: 12px 16px;
		background: #ffffff;
		border-top: 1px solid #ebe7e1;
	}

	.stv-filters-sheet-apply {
		width: 100%;
		min-height: 48px;
		font-family: inherit;
		font-size: 17px;
		font-weight: 700;
		color: #ffffff;
		background: #B91C1C;
		border: 0;
		border-radius: 8px;
		cursor: pointer;
	}

	/* The popups without the script: a full-width sheet under the button. */
	.stv-filter-panel.stv-filter-panel-right {
		right: auto;
	}
}

/* ==========================================================================
   Batch 251-AC: the New detail layout (Scout's mockup of 2026-10-25,
   docs/design/listings-redesign-2026-10-24/Detail.dc.html). Everything here
   is scoped to .stv-listing-detail-new, so the Classic layout is untouched.
   Colours come from the page's own light and dark tokens; the blue is the
   Save search blue (#1F6FD1, white on it 4.9:1). Text stays at 17px or more.
   ========================================================================== */
.stv-listing-detail.stv-listing-detail-new {
	max-width: 1400px;
}

.stv-listing-detail-new .stv-detail-photos {
	margin: 0 0 24px;
}

.stv-listing-detail-new .stv-listing-hero {
	min-height: 460px;
}

/* Two columns that wrap: the listing (about 2/3) and the contact card. */
.stv-detail-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px 40px;
}

.stv-detail-main {
	display: flex;
	flex: 999 1 620px;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.stv-detail-main > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* The right column: the contact card, then the payment card on a wide screen. */
.stv-detail-side {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Two columns from 1024px, the width listing-calculator.js moves the card at
   (Codex P2, #326). Below that the card stays after Cost to own. */
@media (min-width: 1024px) {
	.stv-detail-body {
		flex-wrap: nowrap;
	}

	.stv-detail-main {
		flex: 1 1 0;
	}

	.stv-detail-side {
		flex: 0 0 320px;
	}
}

.stv-listing-detail-new .stv-listing-contact {
	box-sizing: border-box;
	min-width: 0;
}

/* The header: price, pill and "Listed <date>" on one row; the H1; the type line. */
.stv-listing-detail-new .stv-listing-pricebar {
	justify-content: flex-start;
}

.stv-listing-detail-new .stv-listing-pricebar .stv-listing-status {
	order: 0;
}

.stv-detail-listed {
	margin: 0;
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-detail-new .stv-listing-title {
	margin: 12px 0 0;
}

.stv-detail-typeline {
	margin: 8px 0 0;
	font-size: 18px;
	color: var(--stv-d-muted);
}

/* At a glance: one white box, five across on a wide screen. */
.stv-listing-detail-new .stv-detail-glance {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 16px 20px;
	background: var(--stv-d-bg);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

/* Cost to own: a box, the fee line, two buttons, the note. */
.stv-detail-cost {
	padding: 20px 24px;
	background: var(--stv-d-bg);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-detail-cost .stv-listing-section-title {
	margin-bottom: 12px;
}

.stv-cost-lines {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.stv-cost-line {
	padding: 10px 0;
	font-size: 18px;
	font-weight: 600;
	border-bottom: 1px solid var(--stv-d-line);
}

.stv-cost-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
}

.stv-listing-detail-new .stv-cost-action {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px 18px;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
}

.stv-listing-detail-new .stv-cost-bond {
	color: #ffffff;
	background: #b91c1c;
	border: 2px solid #b91c1c;
}

.stv-listing-detail-new .stv-cost-bond:hover {
	background: #991b1b;
	border-color: #991b1b;
}

.stv-listing-detail-new .stv-cost-tax {
	color: var(--stv-d-text);
	background: var(--stv-d-bg);
	border: 1.5px solid var(--stv-d-rule);
}

.stv-listing-detail-new .stv-cost-tax:hover {
	background: var(--stv-d-hover);
}

.stv-cost-note {
	margin: 0;
	font-size: 17px;
	color: var(--stv-d-muted);
}

/* The 19.22 line: its own row after the listing data, at the page's size. */
.stv-listing-detail-new .stv-detail-attribution {
	padding: 16px 0 0;
	border-top: 1px solid var(--stv-d-line);
}

.stv-listing-detail-new .stv-detail-attribution .stv-listing-disclosure {
	margin: 0;
}

/* The right column's buttons: Ask (red, full width), the second request
   (outline, full width), then Watch (blue) and Share side by side. */
.stv-detail-asks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
}

.stv-listing-detail-new .stv-detail-ask,
.stv-listing-detail-new .stv-detail-showing {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 8px 16px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
}

.stv-listing-detail-new .stv-detail-ask {
	color: #ffffff;
	background: #b91c1c;
	border: 2px solid #b91c1c;
}

.stv-listing-detail-new .stv-detail-ask:hover {
	background: #991b1b;
	border-color: #991b1b;
}

.stv-listing-detail-new .stv-detail-showing {
	color: var(--stv-d-text);
	background: var(--stv-d-bg);
	border: 1.5px solid var(--stv-d-rule);
}

.stv-listing-detail-new .stv-detail-showing:hover {
	background: var(--stv-d-hover);
}

.stv-detail-keep {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

.stv-detail-keep > .stv-watch-home {
	flex: 1 1 160px;
	min-width: 0;
}

.stv-detail-keep > .stv-detail-share {
	flex: 0 0 auto;
}

/* Share as an outlined button beside Watch, the mockup's pair. */
.stv-listing-detail-new .stv-detail-share > .stv-share-button {
	gap: 6px;
	min-height: 48px;
	color: var(--stv-d-text);
	text-decoration: none;
	background: var(--stv-d-bg);
	border: 1.5px solid var(--stv-d-rule);
	border-radius: 8px;
}

.stv-watch-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px 16px;
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	background: #1F6FD1;
	border: 1.5px solid #1F6FD1;
	border-radius: 8px;
	cursor: pointer;
	list-style: none;
}

.stv-watch-button::-webkit-details-marker {
	display: none;
}

.stv-watch-button::marker {
	content: '';
}

.stv-watch-button:hover,
.stv-watch-home[open] > .stv-watch-button {
	background: #17549E;
	border-color: #17549E;
}

/* The Watch form opens in place, inside the card, on every width. */
.stv-watch-panel {
	margin: 10px 0 0;
	padding: 16px;
	color: #1a1a1a;
	background: #ffffff;
	border: 1px solid #cfcac2;
	border-radius: 8px;
}

.stv-detail-watch-note {
	margin: 8px 0 0;
	font-size: 17px;
	color: var(--stv-d-muted);
}

/* The blank form lives in the dialog; listing-viewer.js tucks it here. */
.stv-listing-detail-new .stv-listing-contact .stv-inquiry.stv-inquiry-tucked {
	display: none;
}

.stv-listing-detail-new .stv-listing-contact .stv-inquiry {
	margin-top: 16px;
}

@media (max-width: 1023px) {
	.stv-listing-detail-new .stv-detail-glance {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.stv-listing-detail-new .stv-listing-hero {
		min-height: 0;
	}

	.stv-detail-body {
		gap: 24px;
	}

	.stv-detail-cost {
		padding: 16px;
	}

	.stv-listing-detail-new .stv-cost-action {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   Batch 262-AC: the New detail layout matched to the Detail.dc.html board
   (Scout, 2026-10-25: the board is THE exact target, not a guide). Spacing,
   colours, weights, borders, radii and the photo mosaic are the board's.
   Type sizes are the board's where it sets 17px or more; where it sets
   13-16px the text stays at the site's 17px floor (CLAUDE.md, 55+), and the
   19.22 line stays at the listing data's size (19.22 paragraph 3). Both are
   listed in the PR as remaining differences. Light mode takes the board's
   palette; dark mode keeps its own tokens.
   ========================================================================== */
.stv-listing-detail.stv-listing-detail-new {
	--stv-n-page: #f7f5f2;
	--stv-n-card: #ffffff;
	--stv-n-soft: #eee9e2;
	--stv-n-faint: #f1ede7;
	--stv-n-note: #504b45;
	--stv-n-copy: #3a3632;
	--stv-d-text: #1f1d1b;
	--stv-d-muted: #504b45;
	--stv-d-line: #e4dfd8;
	--stv-d-rule: #cfc8bf;
	box-sizing: border-box;
	padding: 24px 24px 56px;
	color: var(--stv-d-text);
	background: var(--stv-n-page);
}

.stv-listing-detail.stv-listing-detail-new.stv-listing-dark {
	--stv-n-page: #161616;
	--stv-n-card: #202020;
	--stv-n-soft: #3a3a3a;
	--stv-n-faint: #2e2e2e;
	--stv-n-note: #c9c9c9;
	--stv-n-copy: #e6e6e6;
	--stv-d-text: #f2f2f2;
	--stv-d-muted: #c9c9c9;
	--stv-d-line: #3a3a3a;
	--stv-d-rule: #4a4a4a;
}

body.stv-listing-detail-page:has(.stv-listing-detail-new:not(.stv-listing-dark)) {
	background: #f7f5f2;
}

/* The board's frame: one column of blocks 20px apart. */
.stv-listing-detail-new .stv-listing-topbar {
	margin: 0 0 20px;
}

.stv-listing-detail-new .stv-listing-breadcrumb {
	color: var(--stv-d-muted);
}

.stv-listing-detail-new .stv-detail-photos {
	margin: 0 0 20px;
}

.stv-listing-detail-new .stv-detail-body {
	gap: 24px;
}

.stv-listing-detail-new .stv-detail-main {
	gap: 20px;
}

/* The photo mosaic: 2fr / 1fr, 460px tall, 8px gaps, 12px corners. */
.stv-detail-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 8px;
	height: 460px;
	overflow: hidden;
	border-radius: 12px;
}

.stv-detail-mosaic-1 {
	grid-template-columns: 1fr;
}

.stv-listing-detail-new .stv-detail-mosaic .stv-listing-hero {
	position: relative;
	min-height: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
}

.stv-detail-mosaic-side {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 8px;
	min-height: 0;
}

.stv-detail-mosaic-tile {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: var(--stv-n-soft);
}

.stv-detail-mosaic .stv-listing-hero-link,
.stv-detail-mosaic-link {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-detail-mosaic picture {
	display: block;
	width: 100%;
	height: 100%;
}

.stv-detail-mosaic-tile .stv-listing-photo {
	/* A side tile fills its box like the stage's large photo and its strip
	   (Scout, 2026-10-19); the grid and the viewer still show every photo whole. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stv-detail-mosaic .stv-listing-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	border-radius: 0;
}

.stv-listing-detail .stv-detail-mosaic-all {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: #1f1d1b;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 8px;
}

/* The header: price 36px, the pill, "Listed"; the H1 in Lora 28px on one line. */
.stv-listing-detail-new .stv-detail-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stv-listing-detail-new .stv-listing-pricebar {
	order: 0;
	gap: 12px;
	margin: 0;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-header .stv-listing-title {
	order: 1;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-header .stv-detail-typeline {
	order: 2;
}

.stv-listing-detail.stv-listing-detail-new .stv-listing-price {
	margin: 0;
	font-family: inherit;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.stv-listing-detail-new .stv-listing-pricebar .stv-listing-status {
	padding: 4px 10px;
	font-size: 17px;
	font-weight: 700;
	color: #1f5c36;
	background: #e3f1e7;
	border: 0;
	border-radius: 12px;
}

.stv-listing-detail-new .stv-detail-listed {
	color: var(--stv-d-muted);
}

.stv-listing-detail.stv-listing-detail-new .stv-listing-title {
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 28px;
	line-height: 1.2;
}

.stv-listing-detail-new .stv-listing-title .stv-listing-street,
.stv-listing-detail-new .stv-listing-title .stv-listing-locality {
	display: inline;
	font: inherit;
}

.stv-listing-detail-new .stv-detail-typeline {
	margin: 0;
	font-size: 17px;
	color: var(--stv-n-copy);
}

/* At a glance: a white box, five across, the label above the value. */
.stv-listing-detail.stv-listing-detail-new .stv-detail-glance {
	gap: 12px;
	padding: 16px;
	background: var(--stv-n-card);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-listing-detail-new .stv-detail-glance .stv-listing-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	border: 0;
}

.stv-listing-detail-new .stv-detail-glance .stv-listing-fact dt {
	order: 0;
	font-size: 17px;
	font-weight: 400;
	color: var(--stv-n-note);
}

.stv-listing-detail-new .stv-detail-glance .stv-listing-fact dd {
	order: 1;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

/* Section headings: Lora 22px. */
.stv-listing-detail-new .stv-detail-main .stv-listing-section-title {
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 22px;
}

/* Cost to own: the card, the head row, three cards across, the buttons, the note. */
.stv-listing-detail.stv-listing-detail-new .stv-detail-cost {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--stv-n-card);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-cost-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.stv-cost-asis {
	margin: 0;
	font-size: 17px;
	color: var(--stv-n-note);
}

.stv-cost-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.stv-cost-card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	border: 1px solid var(--stv-n-soft);
	border-radius: 10px;
}

.stv-cost-card p {
	margin: 0;
}

.stv-cost-card-label {
	font-size: 17px;
	color: var(--stv-n-note);
}

.stv-cost-card-value {
	font-size: 18px;
	font-weight: 700;
}

.stv-cost-card-note {
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-detail-new .stv-cost-actions {
	gap: 10px;
	margin: 0;
}

.stv-listing-detail.stv-listing-detail-new .stv-cost-action {
	min-height: 44px;
	padding: 0 16px;
	font-size: 17px;
}

.stv-listing-detail.stv-listing-detail-new .stv-cost-tax {
	font-weight: 600;
	color: var(--stv-d-text);
	background: var(--stv-n-card);
	border: 1.5px solid var(--stv-d-rule);
}

.stv-listing-detail-new .stv-cost-note {
	font-size: 17px;
	color: var(--stv-n-note);
}

/* About this home: 17px, 1.6, full width. */
.stv-listing-detail-new .stv-detail-main .stv-listing-about {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stv-listing-detail-new .stv-detail-main .stv-listing-remarks {
	max-width: none;
}

.stv-listing-detail-new .stv-detail-main .stv-listing-about p {
	max-width: none;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--stv-n-copy);
}

/* Features: two white cards across, 17px titles, 40/60 rows. */
.stv-listing-detail-new .stv-detail-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-features .stv-listing-feature {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 16px 18px;
	background: var(--stv-n-card);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-summary {
	padding: 0;
	pointer-events: none;
	list-style: none;
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-summary::-webkit-details-marker {
	display: none;
}

@media (min-width: 768px) {
	.stv-listing-detail-new .stv-detail-features .stv-listing-feature-summary::after {
		display: none;
	}
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-features .stv-listing-feature-title {
	margin: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-list {
	margin: 0;
	padding: 0;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-features .stv-listing-feature-row {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 8px;
	margin: 0;
	padding: 6px 0 0;
	font-size: 17px;
	border: 0;
	border-top: 1px solid var(--stv-n-faint);
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-row + .stv-listing-feature-row {
	margin-top: 6px;
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-row dt {
	font-weight: 400;
	color: var(--stv-n-note);
}

.stv-listing-detail-new .stv-detail-features .stv-listing-feature-row dd {
	margin: 0;
	font-weight: 400;
	text-align: left;
}

/* The 19.22 line: its rule above, the listing data's size (19.22 paragraph 3). */
.stv-listing-detail-new .stv-detail-attribution {
	color: var(--stv-n-copy);
}

/* The right column: one white card, a 56px round photo, the two requests,
   then Watch and Share side by side, then the note. */
.stv-listing-detail.stv-listing-detail-new .stv-listing-contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--stv-n-card);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
	box-shadow: none;
}

.stv-listing-detail-new .stv-listing-contact-who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.stv-listing-detail-new .stv-contact-photo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 28px;
}

.stv-listing-detail-new .stv-listing-contact-name {
	margin: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
}

.stv-listing-detail-new .stv-listing-contact-role {
	margin: 0;
	font-size: 17px;
	color: var(--stv-d-muted);
}

.stv-listing-detail-new .stv-detail-asks {
	gap: 12px;
	margin: 0;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-ask,
.stv-listing-detail.stv-listing-detail-new .stv-detail-showing {
	min-height: 48px;
	padding: 0 16px;
	font-size: 17px;
}

.stv-listing-detail.stv-listing-detail-new .stv-detail-showing {
	font-weight: 600;
	background: var(--stv-n-card);
}

.stv-listing-detail-new .stv-detail-keep {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* Batch 308-AC: open, the price-alerts form takes the whole sidebar width,
   not one column of the button row (Share moves to the next row). */
.stv-listing-detail-new .stv-detail-keep > .stv-watch-home[open] {
	grid-column: 1 / -1;
}

.stv-listing-detail-new .stv-detail-keep .stv-watch-button,
.stv-listing-detail-new .stv-detail-keep .stv-detail-share > .stv-share-button {
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	font-size: 17px;
}

.stv-listing-detail-new .stv-detail-keep .stv-detail-share > .stv-share-button {
	font-weight: 600;
	background: var(--stv-n-card);
}

.stv-listing-detail-new .stv-detail-watch-note {
	margin: 0;
	font-size: 17px;
	color: var(--stv-n-note);
}

@media (max-width: 767px) {
	.stv-listing-detail.stv-listing-detail-new {
		padding: 16px 16px 40px;
	}

	.stv-detail-mosaic {
		height: 300px;
	}

	.stv-cost-cards,
	.stv-listing-detail-new .stv-detail-features .stv-listing-feature-grid,
	.stv-listing-detail-new .stv-detail-keep {
		grid-template-columns: minmax(0, 1fr);
	}

	.stv-listing-detail-new .stv-detail-features .stv-listing-feature-summary {
		pointer-events: auto;
	}
}

/* ==========================================================================
   Batch 297-AC: the detail redesign (Scout, 2026-11-02). Body 16px and up,
   remarks 17px, labels 15px and up, no gray lighter than #504B45 on white,
   cost labels 16px semibold, cost values 20px.
   ========================================================================== */
.stv-filter-note {
	flex: 1 1 100%;
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.4;
	color: #504b45;
}

.stv-filters-open .stv-filter-panel .stv-filter-note {
	display: none;
}

.stv-filters-sheet-actions .stv-filter-note {
	display: none;
	margin: 0 0 8px;
}

.stv-filters-open .stv-filters-sheet-actions .stv-filter-note {
	display: block;
}

.stv-detail-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stv-detail-highlight {
	padding: 6px 12px;
	font-size: 16px;
	font-weight: 600;
	color: #991b1b;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 999px;
}

.stv-listing-remarks.stv-remarks-folded {
	max-height: 6.4em;
	overflow: hidden;
	font-size: 17px;
	line-height: 1.6;
}

.stv-listing-remarks.stv-remarks-folded p {
	margin: 0;
}

.stv-remarks-more {
	align-self: flex-start;
	min-height: 44px;
	padding: 0;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--stv-d-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.stv-cost-card-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--stv-d-text);
}

.stv-cost-card-value {
	font-size: 20px;
	font-weight: 700;
}

.stv-listing-detail.stv-listing-detail-new .stv-cost-card-value a {
	display: inline;
	min-height: 0;
	padding: 0;
	font: inherit;
	color: var(--stv-d-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
}

.stv-cost-card-note,
.stv-cost-asis,
.stv-listing-detail-new .stv-cost-note {
	font-size: 16px;
	color: var(--stv-d-muted);
}

.stv-calc-home {
	display: none;
}

.stv-calc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 16px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--stv-d-text);
	background: var(--stv-n-card, #ffffff);
	border: 1px solid var(--stv-d-line);
	border-radius: 12px;
}

.stv-calc[hidden],
.stv-calc [hidden] {
	display: none;
}

.stv-calc p,
.stv-calc dl {
	margin: 0;
}

.stv-calc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.stv-listing-detail .stv-calc-title {
	margin: 0;
	padding: 0;
	font-family: Lora, Georgia, serif;
	font-size: 21px;
	font-weight: 700;
	border: 0;
}

.stv-calc-estimate {
	font-size: 15px;
	color: var(--stv-d-muted);
}

.stv-calc-total {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.stv-calc-total .stv-calc-prompt {
	font-size: 18px;
	font-weight: 600;
}

.stv-calc-per {
	font-size: 17px;
	font-weight: 500;
}

.stv-calc-summary,
.stv-calc-included,
.stv-calc-footer {
	font-size: 16px;
	color: var(--stv-d-muted);
}

.stv-calc-wide .stv-calc-summary {
	display: none;
}

.stv-calc-change {
	min-height: 44px;
	padding: 4px 0;
	font: inherit;
	font-weight: 600;
	color: var(--stv-d-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.stv-calc-inputs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stv-calc-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	gap: 10px;
}

.stv-calc-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
}

.stv-calc-field input,
.stv-calc-field select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	font: inherit;
	color: var(--stv-d-text);
	background: var(--stv-d-bg);
	border: 1px solid var(--stv-d-rule);
	border-radius: 8px;
}

.stv-calc-cash label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	min-height: 44px;
	padding-top: 2px;
	font-size: 16px;
}

.stv-calc-cash input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
}

.stv-calc-lines div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.stv-calc-lines div[hidden] {
	display: none;
}

.stv-calc-lines dt {
	font-weight: 400;
}

.stv-calc-lines dd {
	margin: 0;
	font-weight: 600;
}

/* The phone bar: Call, Ask, Price alerts. The page's bottom padding is the
   bar's own height, so the last line of the compliance block clears it. */
.stv-listing-detail .stv-listing-action-alerts {
	color: var(--stv-d-link);
	background: var(--stv-d-bg);
	border: 2px solid var(--stv-d-link);
}

.stv-listing-detail-new .stv-listing-actionbar .stv-listing-action {
	box-sizing: border-box;
	height: 54px;
	padding: 0 6px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.stv-listing-remarks.stv-remarks-folded {
		max-height: 8em;
	}

	/* One photo and "View all", as on MobileDetail; the viewer has the rest. */
	.stv-detail-mosaic.stv-detail-mosaic-2,
	.stv-detail-mosaic.stv-detail-mosaic-3 {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
	}

	.stv-detail-mosaic-side {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
	}

	.stv-detail-mosaic-tile {
		position: static;
		display: block;
		overflow: visible;
	}

	.stv-detail-mosaic-tile:not(:last-child),
	.stv-detail-mosaic-link {
		display: none;
	}

	.stv-listing-detail .stv-detail-mosaic-all {
		position: static;
		white-space: nowrap;
	}

	/* Cost to own as rows, label left and value right (MobileDetail). */
	.stv-cost-cards {
		gap: 0;
	}

	.stv-cost-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 2px 12px;
		padding: 10px 0;
		border: 0;
		border-bottom: 1px solid var(--stv-n-soft);
		border-radius: 0;
	}

	.stv-cost-card-note {
		grid-column: 1 / -1;
	}

	.stv-cost-card:not(.stv-cost-amenity) .stv-cost-card-note {
		display: none;
	}

	body:has(.stv-listing-detail-new .stv-listing-actionbar) {
		padding-bottom: calc(71px + env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   Batch 298-AC: the card's tag, the save-home heart and Saved homes
   (Main.dc.html, Mobile.dc.html).
   ========================================================================== */
.stv-listing-tag {
	align-self: flex-start;
	margin: 6px 0 0;
	padding: 3px 10px;
	font-size: 15px;
	font-weight: 600;
	color: #1f5c36;
	background: #e4f1e8;
	border-radius: 999px;
}

.stv-save-home {
	position: absolute;
	top: 34px;
	right: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #ffffff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.stv-save-home[hidden] {
	display: none;
}

/* The detail page's heart sits in the price bar, not on a photo. */
.stv-detail-header .stv-save-home {
	position: static;
	margin-left: auto;
}

.stv-save-home svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #b91c1c;
	stroke-width: 2;
}

.stv-save-home[aria-pressed="true"] svg {
	fill: #b91c1c;
}

.stv-save-home:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

.stv-saved-link {
	margin-left: 16px;
	font-size: 17px;
	font-weight: 600;
	color: #b91c1c;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stv-saved-link[hidden] {
	display: none;
}

.stv-saved-head {
	margin: 24px 0 16px;
}

.stv-saved-title {
	margin: 0;
	font-size: 28px;
}

.stv-saved-note {
	margin: 4px 0 0;
	font-size: 16px;
	color: #504b45;
}

/* The phone's chips: under Filters and Save search, each 44px tall to remove. */
@media (max-width: 767px) {
	.stv-search-box .stv-chip {
		min-height: 44px;
	}

	.stv-search-box .stv-chip-list {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* ==========================================================================
   Batch 312-AC (Scout, 2026-11-04): a village or community grid shows three
   cards and a "See all" tile in the fourth slot. The search grid's own
   columns place it: one row of four from 1100px, two by two from 640px, one
   column on a phone. The page-level disclosures print at the page bottom
   (.stv-hotsheet-disclosures).
   ========================================================================== */

.stv-hotsheet-tile-item {
	display: flex;
}

/* The card's footprint: the grid row stretches it to the cards' height; on a
   phone it keeps a card-like 160px. */
.stv-hotsheet-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 160px;
	padding: 24px 20px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: #b91c1c;
	text-decoration: none;
	background: #ffffff;
	border: 2px solid #b91c1c;
	border-radius: 8px;
}

.stv-hotsheet-tile:hover {
	background: #fef2f2;
}

.stv-hotsheet-tile:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

.stv-hotsheet-disclosures {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 48px auto 0;
	padding: 0 16px 32px;
}