/**
 * Archive — Luxe heading + search bar.
 *
 * Scoped entirely under its own classes (.mshm-luxe-heading /
 * .mshm-luxe-search) plus one small, deliberately targeted restyle of
 * Havenlytics' own view-toggle buttons (see the bottom of this file) —
 * never touches .mshm-archive-grid/.mshm-archive__layout/etc., so the
 * shared shell (filters drawer, pagination, grid) is unaffected.
 */

/* ---------- Heading ---------- */

/* The reference's own text reads noticeably crisper/lighter than a
   default OS-rendered heavier weight — checked its fonts, it isn't a
   special "sharpening" technique or a text-shadow trick, just genuinely
   light font weights (200-300) combined with proper subpixel/grayscale
   antialiasing instead of the browser's default (heavier-looking) text
   rendering. Applying both across this whole section. */
/* Banner fonts (named request): "Our" in Poiret One 400, the bold word in
   Montserrat 700 — the same self-hosted files the Page Banner uses, so every
   banner matches. */
@font-face {
	font-family: "Poiret One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../PageBanner/fonts/poiret-one-400.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../PageBanner/fonts/montserrat-700.woff2") format("woff2");
}

.mshm-luxe-heading,
.mshm-luxe-search {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.mshm-luxe-heading {
	position: relative;
	overflow: hidden;
	/* A barely-there warm tint instead of flat white — enough to read as a
	   deliberate surface, not a stark blank one, without competing with
	   the accent color or the watermark. */
	background: #faf8f5;
	/* 135px (was 100): clears the transparent header's logo with a proper gap. */
	padding: 135px 0 40px;
	margin-bottom: 8px;
	/* Named request: department pages only (.mshm-luxe-heading--compact —
	   set in heading.php only when the bold word is multi-word, i.e. never
	   the real /properties/ archive, filtered or not) get 60px more top
	   padding above the eyebrow than the base 100px. Declared here so it
	   sits right next to the rule it overrides. */
	/* Fluid, matching the watermark's own clamp() below exactly (so this
	   floor is always exactly as tall as the logo needs, at every
	   viewport width, not just the two fixed sizes an earlier breakpoint
	   swap used) — 260px at a 375px-wide phone up to 400px at 1400px+
	   desktop, scaling continuously in between instead of jumping. */
	min-height: clamp(260px, 13.7vw + 209px, 400px);
	box-sizing: border-box;
}

/* Two-class selector (0,2,0) deliberately, not one (0,1,0) — the mobile
   media query below sets ".mshm-luxe-heading{padding:40px 0 28px}" at the
   exact same specificity, and since it's declared later in the file it
   silently won on mobile regardless of this rule, undoing the +60px
   there entirely (confirmed live: computed padding-top was still 40px,
   not 160px, on a 375px-wide department page). Higher specificity here
   wins regardless of source order or viewport. */
.mshm-luxe-heading.mshm-luxe-heading--compact {
	padding-top: 195px;
}

/* Large faint sail-mark watermark behind the heading/search, per the
   reference's own oversized background monogram treatment — sized by
   HEIGHT, not width: the mark's own aspect ratio is roughly square/
   portrait, and this section's own height is much less than its width,
   so a width-driven size (the earlier attempt) rendered far taller than
   the section and got almost entirely clipped by overflow:hidden above,
   leaving only a thin sliver visible. Height-driven sizing guarantees it
   always fits within the section regardless of viewport width. */
/* Two-class selector deliberately, not one: same reason as the Luxe
   card's watermark fix — Havenlytics' own ".hvnly-content-wrapper img"
   rule (0,1,1) outranks a bare ".mshm-luxe-heading__mark" (0,1,0), so
   scoping under its own section (0,2,0) clears it without !important. */
.mshm-luxe-heading .mshm-luxe-heading__mark {
	position: absolute;
	top: -10px;
	right: 2%;
	width: auto;
	/* Named request: scale proportionally with the viewport instead of one
	   fixed size snapping to a smaller fixed size at a single breakpoint
	   (the earlier fix) — clamp(260px, ..., 400px) keeps a definite length
	   at every width (still required — see the note above on why a
	   percentage doesn't work here), just a continuously-interpolated one.
	   Same two anchor points as the container's own min-height above:
	   260px at 375px wide, 400px at 1400px+ wide. */
	height: clamp(260px, 13.7vw + 209px, 400px);
	opacity: 0.13;
	filter: grayscale(1);
	pointer-events: none;
	z-index: 0;
}

.mshm-luxe-heading__inner {
	position: relative;
	z-index: 1;
	width: min(1140px, calc(100vw - 64px));
	margin: 0 auto;
	padding-left: 26px;
}

/* The "cross": a vertical rule anchored to the heading block's own left
   edge, plus a long horizontal rule trailing off to the right from under
   the eyebrow text — matches the reference's own two-line accent exactly
   (extracted from its CSS), just in this project's neutral ink instead
   of its accent color. */
.mshm-luxe-heading__inner::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -12px;
	left: 0;
	width: 1px;
	background: #d8d8d8;
}

.mshm-luxe-heading__breadcrumb {
	/* Breadcrumb removed (named request) — display:none, not white text. */
	display: none;
	margin: 0 0 10px;
	font: 400 12px/1.4 "Roboto", Arial, Helvetica, sans-serif;
	color: #9a9a9a;
}

.mshm-luxe-heading__breadcrumb a {
	color: #9a9a9a;
}

.mshm-luxe-heading__eyebrow {
	position: relative;
	display: inline-block;
	margin-bottom: 18px;
	font: 500 13.5px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #171717;
}

/* Matches the reference's own rule exactly (.global-site-title span i):
   the eyebrow span is position:relative and shrink-wraps to the text
   (max-width:max-content), so "right:0" anchors the line's RIGHT edge to
   the text's own right edge, and it extends 100vw further LEFT from
   there (mostly off past the container, same as the reference's own
   effect) — just in this project's own accent color instead of red. */
.mshm-luxe-heading__eyebrow::after {
	content: "";
	position: absolute;
	bottom: -11px;
	right: 0;
	width: 100vw;
	height: 1px;
	background: var(--mainsail-color-accent, #24bef5);
	opacity: 0.45;
}

/* The short, solid accent tick sits at that same right edge (i::after is
   right:0 relative to the line above, which itself ends exactly at the
   text) — i.e. immediately after "PROPERTY PORTFOLIO", not before it. */
.mshm-luxe-heading__eyebrow::before {
	content: "";
	position: absolute;
	bottom: -12px;
	right: 0;
	width: 52px;
	height: 3px;
	background: var(--mainsail-color-accent, #24bef5);
	z-index: 1;
}

/* Named bug: this heading renders inside `.single-content` on every plain
   WP Page that uses it (the [hvnly_property_grid] department pages —
   /commercial/, /rent/, /let/, /sale/), and Kadence's own
   ".single-content h1{margin:1.5em 0 0.5em}" (0,1,1) outranks a bare
   ".mshm-luxe-heading__title{margin:0}" (0,1,0) — a real, measured 42px
   gap on a 28px title, invisible on the real /properties/ archive only
   because that's a post-type archive, never wrapped in .single-content.
   Two-class scoping (0,2,0) clears it without !important. */
.mshm-luxe-heading .mshm-luxe-heading__title {
	margin: 0;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 700;
	/* Same scale as the Page Banner (Montserrat Bold runs much wider than the
	   Cormorant this used to be, so smaller than before). */
	font-size: clamp(2rem, 5.2vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: 0;
	color: #171717;
	text-transform: uppercase;
}

/* "Our" reads noticeably thinner than the bold word after it — its own
   span, not just relying on <strong> for contrast. 300 is Cormorant's own
   lightest real weight (its range is 300-700, no 100/200 face exists) —
   explicitly self-enqueued above so it's actually loaded on this page. */
.mshm-luxe-heading__title > span {
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-weight: 400;
}

.mshm-luxe-heading__title strong {
	font-weight: 700;
}

/* A multi-word bold word ("Commercial Properties", "Properties for Sale")
   at the main heading's own single-word scale wraps onto a second line on
   most viewport widths — smaller clamp keeps it on one line instead. */
/* Two-class scoped (0,2,0) to match the base title rule's own scoping
   above — needed so this still outranks it now that the base rule was
   scoped up to beat Kadence's ".single-content h1", which would otherwise
   also make the base rule's font-size win over this modifier. */
.mshm-luxe-heading .mshm-luxe-heading__title--compact {
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	letter-spacing: 0;
}

/* Named request: keep this identical to the main archive's own eyebrow
   gap (18px, inherited, no override here) rather than a separate smaller
   value — a prior attempt at shrinking this specifically for --compact
   didn't read as consistent once compared side-by-side against the
   archive page. */

/* ---------- Search bar ---------- */

.mshm-luxe-search {
	width: min(1140px, calc(100vw - 64px));
	margin: 0 auto 28px;
	padding: 50px 0 26px 26px;
	border-bottom: 1px solid #ececec;
}

/* Named request: the homepage search bar (.mshm-luxe-search--homepage —
   see havenlytics/homepage/search-bar.php) should line up in width with
   the Featured Listings section below it, not the archive page's own
   1140px/64px formula above — scoped to this modifier only, so the real
   /properties/ archive's own search bar is untouched ("lock the archive
   design"). Same effective width as .mainsail-fp-luxe__heading-wrap/
   __grid (Featured Properties/Luxe/style.css): max(6.875vw,24px) side
   inset, capped at 1320px. */
/* Named bug: padding+max-width combined on this one single element (no
   separate outer wrapper to apply the padding on first, unlike Welcome/
   Featured Properties' own two-level nesting) computed a wider effective
   box (hit the 1320px cap directly, 40px side margin) than the Featured
   section actually renders at this viewport (1207.5px, padding-bound,
   cap not yet reached, 96.25px margin) — confirmed by measuring both
   live, same category of bug as the earlier Featured-vs-Welcome mismatch.
   min() with the padding baked into the width formula itself reproduces
   that same two-level result on a single element. */
.mshm-luxe-search--homepage {
	width: min( 1320px, calc(100% - 2 * max(6.875vw, 24px)) );
	margin-left: auto;
	margin-right: auto;
	/* Named bug: the base rule's own 26px-left/0-right padding (below —
	   meant for the archive page's vertical accent line, which this
	   section has none of) made the fields inside sit off-center within
	   this now-centered box: flush against the right edge, inset only on
	   the left. Symmetric (none) here instead, on top of the box's own
	   already-centered width above. */
	padding-left: 0;
	padding-right: 0;
	/* Named bug: the base rule's own 28px bottom margin, PLUS the Featured
	   Listings intro's own symmetric ~17px centering gap, added up to a
	   45px gap above the heading — visibly larger than the 17px gap below
	   it (between the heading and the cards), even after that intro box's
	   own height was already halved. Trimmed so the two gaps land close
	   to the requested ~1.35x ratio (17px x 1.35 ≈ 23px) instead of ~2.6x. */
	margin-bottom: 6px;
}

/* Top-aligned, not bottom-aligned: the price field has real content
   below its slider (the $ value row) that the other fields don't have,
   so bottom-aligning the whole row (an earlier approach) left the
   slider itself sitting visibly higher than the other fields' input
   boxes — not "in one line". Top-aligning instead, now that every field
   (Price included — see below) is the same flat 38px-tall control with
   nothing reserved above it, puts every field's actual control on the
   same line automatically, with price's own $ value row simply hanging
   lower underneath without affecting anything else. */
.mshm-luxe-search__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 26px;
}

.mshm-luxe-search__field {
	display: flex;
	flex-direction: column;
	min-width: 150px;
}

.mshm-luxe-search__field--address {
	flex: 1 1 220px;
}

.mshm-luxe-search__field--price {
	position: relative;
	flex: 1 1 260px;
	min-width: 220px;
}

.mshm-luxe-search__field label {
	margin-bottom: 8px;
	font: 300 10px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9a9a9a;
}

/* "Price" is no longer a separate label sitting above the slider — it's
   styled and positioned exactly like the other fields' own placeholder
   text (same size/weight/case/color, same line), just overlaid on the
   left of the slider's own 38px row instead of inside a <select>. */
.mshm-luxe-search__field--price label {
	position: absolute;
	left: 2px;
	top: 0;
	height: 38px;
	display: flex;
	align-items: center;
	margin: 0;
	font: 300 13px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #000000;
	pointer-events: none;
	z-index: 1;
}

/* Location/Department/Address no longer show a visible label above the
   field (named request) — Price keeps its visible "Price" label, the
   other three just show their own placeholder/default-option text,
   matching the reference. Still real, focusable, screen-reader-visible
   labels, just not painted on screen. */
.mshm-luxe-search__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* !important throughout this rule: Kadence's own global reset
   (input[type="text"]... , select, textarea in global.min.css) sets a
   real all-around border/padding/background/border-radius, and — same
   as the range slider's own fix above — kept winning here even at equal
   or lower specificity, so forced explicitly rather than left to another
   cascade-order guess. Bottom-border only, never a full box. */
.mshm-luxe-search .mshm-luxe-search__field select,
.mshm-luxe-search .mshm-luxe-search__field input[type="text"] {
	height: 38px;
	padding: 0 2px !important;
	border: 0 !important;
	border-bottom: 1px solid #d8d8d8 !important;
	background: transparent !important;
	font: 300 13px/1 "Roboto", Arial, Helvetica, sans-serif;
	color: #171717;
	appearance: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.mshm-luxe-search .mshm-luxe-search__field select:focus,
.mshm-luxe-search .mshm-luxe-search__field input[type="text"]:focus {
	outline: none;
	box-shadow: none !important;
	border-bottom-color: var(--mainsail-color-accent, #24bef5) !important;
}

/* All placeholders — address input, and the selects' own default option
   text (Select Location / All Listings) — same black color, same size,
   uppercase (named request). */
.mshm-luxe-search__field input[type="text"]::placeholder {
	color: #000000;
	opacity: 1;
	text-transform: uppercase;
	font-weight: 300;
}

.mshm-luxe-search .mshm-luxe-search__field select {
	text-transform: uppercase;
}

/* Department's accent-colored caret (its native arrow is hidden via
   appearance:none above) — the only field that gets one, per the named
   request. Bigger, and clear of the field's own right edge (was flush
   against it and too small). */
.mshm-luxe-search__field--caret {
	position: relative;
}

.mshm-luxe-search__field--caret select {
	padding-right: 26px !important;
}

.mshm-luxe-search__caret {
	position: absolute;
	right: 4px;
	bottom: 9px;
	width: 20px;
	height: 20px;
	pointer-events: none;
	fill: none;
	stroke: var(--mainsail-color-accent, #24bef5);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Real Havenlytics <select> fields, kept in the DOM (so they still
   submit with the form) but visually replaced by the slider UI above
   them — standard visually-hidden pattern, not display:none, so they
   stay focusable/functional. */
.mshm-luxe-search__hidden-field {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.mshm-luxe-search__slider {
	position: relative;
	height: 38px;
}

/* The track line itself now sits AT the box's own bottom edge (not
   vertically centered) — that's the actual "line" that should be
   parallel with the other fields' border-bottom, at the same height,
   rather than adding a second, separate border underneath it. */
.mshm-luxe-search__slider-track,
.mshm-luxe-search__slider-fill {
	position: absolute;
	bottom: 0;
	height: 1px;
}

.mshm-luxe-search__slider-track {
	left: 0;
	right: 0;
	background: #d8d8d8;
}

.mshm-luxe-search__slider-fill {
	background: var(--mainsail-color-accent, #24bef5);
}

.mshm-luxe-search__slider-input {
	position: absolute;
	/* height:14px + bottom:-7px centers this input's own vertical middle
	   (where the thumb renders) exactly on the track line at the box's
	   bottom edge (bottom:0), rather than the box's vertical center. */
	bottom: -7px;
	height: 14px;
	left: 0;
	right: 0;
	width: 100%;
	/* Kadence's own global input[type="range"] reset (global.min.css)
	   sets a real border/padding/background/border-radius on every range
	   input site-wide — equal specificity, and this rule already loads
	   after it, yet Kadence's values were still winning in testing, so
	   these are forced with !important (matches precedent already set
	   elsewhere in this same file, e.g. the favorite button/view-toggle
	   overrides, for the same kind of stubborn conflict). */
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	max-width: none !important;
	appearance: none !important;
	pointer-events: none;
}

.mshm-luxe-search__slider-input::-webkit-slider-runnable-track {
	background: transparent;
}

/* Matches the reference's own measured handle exactly (.irs--flat
   .irs-handle: width/height 10px, solid color, no border or extra ring) —
   the earlier 14px + white border + dark box-shadow ring rendered much
   bigger/heavier than this. */
.mshm-luxe-search__slider-input::-webkit-slider-thumb {
	appearance: none;
	pointer-events: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mainsail-color-accent, #24bef5);
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.mshm-luxe-search__slider-input::-moz-range-track {
	background: transparent;
	border: 0;
}

.mshm-luxe-search__slider-input::-moz-range-thumb {
	pointer-events: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mainsail-color-accent, #24bef5);
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

/* Reverted back to its earlier style (muted gray, 12px, sentence case) —
   the "Price" label above is what now matches the other placeholders,
   not these $ min/max values underneath. */
.mshm-luxe-search__slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font: 300 12px/1 "Roboto", Arial, Helvetica, sans-serif;
	color: #6d6d6d;
}

/* Text/icon sized 1.5x up from the first pass (11px→16px text,
   15px→22px icon) and lighter weight — matches the reference's own
   button almost exactly (its own is font-size:16px, letter-spacing:.3em,
   not bold). */
.mshm-luxe-search__field--submit button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	/* Only the bottom-right corner rounded — matches the reference's own
	   button exactly (border-bottom-right-radius only, every other
	   corner square). */
	border-bottom-right-radius: 15px;
	background: #171717;
	color: #ffffff;
	font: 400 16px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.mshm-luxe-search__field--submit button:hover {
	background: #000000;
}

.mshm-luxe-search__field--submit svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Sort By / Grid-Map toggle (Havenlytics' own real buttons,
   restyled only — no markup/JS changes, see archive/view-controls.php's
   own doc comment for why the markup stays untouched). ---------- */

body.mshm-archive-skin-luxe .mshm-archive__view-controls {
	align-items: center;
}

body.mshm-archive-skin-luxe .hvnly-property-sort-select {
	border: 0;
	border-bottom: 1px solid #d8d8d8;
	background: transparent;
	border-radius: 0;
	font: 300 12px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #171717;
	padding: 6px 22px 6px 0;
}

/* "Sort By" label — lighter weight + uppercase, matching everything
   else on this row now. */
body.mshm-archive-skin-luxe .hvnly-sortby-txt {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* "Properties 1-6 of 10 Properties" result count, and the "Filters"
   toggle button label — lighter weight, matching the rest of the page
   (their own bold <strong> numbers are toned down too, not just the
   surrounding sentence). Explicit 12px here so it has a known, fixed
   size to match "Sort By" against below, rather than relying on
   whatever it happened to inherit. */
body.mshm-archive-skin-luxe .mshm-archive__filter-toggle {
	font-weight: 300;
	font-size: 12px;
}

/* The property count ("12 properties found in Miami" / "No properties found…")
   is the first thing a visitor reads on a results page, so it is larger and
   darker than the 12px light "Sort By" beside it. */
body.mshm-archive-skin-luxe #hvnly-results-count {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	color: #171717;
}

body.mshm-archive-skin-luxe #hvnly-results-count strong {
	font-size: inherit;
	font-weight: 700;
	color: #000000;
}

/* "Sort By" — reduced to match the property-count text's own size
   exactly (named request), instead of its earlier, slightly larger
   size. */
body.mshm-archive-skin-luxe .hvnly-sortby-txt,
body.mshm-archive-skin-luxe .hvnly-property-sort-select {
	font-size: 12px !important;
}

/* Typography-only touch on the filter drawer (font-smoothing + a lighter
   weight on its own labels/inputs) — its layout/borders/colors are
   deliberately NOT being restyled (named decision: keep it as Classic
   already has it), this only carries the same "sharp, light text"
   treatment used everywhere else on this page into it too, per request. */
body.mshm-archive-skin-luxe .mshm-archive__sidebar {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* !important required here: Classic's own mshm-archive.css sets these
   exact elements' font via an !important shorthand (e.g.
   .hvnly-property-filter-title{font:600 18px/1.25 ...!important}), so a
   plain font-weight can't win regardless of selector specificity. */
body.mshm-archive-skin-luxe .hvnly-property-filter-label,
body.mshm-archive-skin-luxe .hvnly-property-form-select,
body.mshm-archive-skin-luxe .hvnly-property-checkbox-label,
body.mshm-archive-skin-luxe .hvnly-property-filter-title,
body.mshm-archive-skin-luxe .hvnly-property-filter-group-title,
body.mshm-archive-skin-luxe .hvnly-property-reset-filters-btn {
	font-weight: 300 !important;
}

body.mshm-archive-skin-luxe .hvnly-property-view-buttons {
	display: inline-flex;
	border: 1px solid #e3e3e3;
	border-radius: 20px;
	overflow: hidden;
	gap: 0 !important;
}

body.mshm-archive-skin-luxe .hvnly-property-view-btn {
	border: 0 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: #9a9a9a !important;
	width: 36px !important;
	height: 34px !important;
}

body.mshm-archive-skin-luxe .hvnly-property-view-btn.active {
	background: #171717 !important;
	color: #ffffff !important;
}

/* Original, locked values — the real /properties/ archive's own design.
   Do not change this rule for a department-page-only request again; add a
   new selector scoped under .mshm-luxe-heading--compact instead (see
   below), exactly like the one two rules down. */
@media (max-width: 900px) {
	.mshm-luxe-heading__inner,
	.mshm-luxe-search {
		width: calc(100vw - 28px);
		padding-left: 18px;
	}
}

/* Department shortcode pages ONLY (.mshm-luxe-heading--compact, set in
   heading.php whenever the bold word is multi-word — never true on the
   real archive) — named request: the vertical rule (::before, left:0)
   should sit close to the eyebrow text's own left edge on mobile there,
   without touching the real archive's own locked 18px/28px above. */
@media (max-width: 900px) {
	.mshm-luxe-heading--compact .mshm-luxe-heading__inner {
		width: calc(100vw - 20px);
		padding-left: 10px;
	}
}

@media (max-width: 640px) {
	/* Named bug: 40px top padding left the heading's own content starting
	   well inside the transparent site header's real height (measured
	   live: header is 103px tall, heading content started at only 46px
	   from viewport top) — the header's own logo showed through, ghosted,
	   overlapping the breadcrumb/eyebrow text. 130px clears it with room
	   to spare. (min-height and the watermark's own height are fluid now —
	   see the base rules above — so neither needs a fixed override here
	   any more; they already resolve to ~260px in this width range.) */
	.mshm-luxe-heading {
		padding: 130px 0 28px;
	}

	/* Named request: department pages get the same +60px added here too
	   (130px base + 60px = 190px), not just on desktop. */
	.mshm-luxe-heading.mshm-luxe-heading--compact {
		padding-top: 190px;
	}

	.mshm-luxe-heading .mshm-luxe-heading__mark {
		width: 70%;
		opacity: 0.06;
	}

	.mshm-luxe-search__form {
		gap: 20px;
	}

	.mshm-luxe-search__field {
		flex: 1 1 100%;
	}
}

/* Optional small heading above a search bar (label="..." on the shortcode) —
   same eyebrow typography as the section headings, with the accent tick. */
.mshm-luxe-search .mshm-luxe-search__label {
	position: relative;
	display: inline-block;
	margin: 0 0 22px;
	padding-bottom: 10px;
	font: 500 13px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #171717;
}

.mshm-luxe-search .mshm-luxe-search__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--mainsail-color-accent, #24bef5);
}

/* Heading drawn inside a Page's content (property-search / department pages):
   Kadence's content padding insets it, so break out to the full viewport width
   like the Page Banner and the /properties/ archive heading. */
.entry-content .mshm-luxe-heading {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Pages that carry the heading inside their content: drop Kadence's 2rem/1.5rem
   top padding so the banner starts at the very top, like the Page Banner pages
   (otherwise a white strip shows above it). */
.entry-content-wrap:has(.mshm-luxe-heading) {
	padding-top: 0;
}