/*
 * 220 Listings — Real Estate frontend styles
 *
 * Variables: this stylesheet pulls accent colors from the inline
 * ColorSettings <style> block (--220-color-primary etc.). The base
 * palette is declared at runtime by ColorSettings::output_css_variables().
 * Real-estate-specific tokens are defined locally as `--re-*` so this
 * file ships standalone.
 *
 * Layout structure mirrors the React canvas in re-listings.jsx:
 *   • Cards: Variant A (spec-literal), C (editorial), Horizontal
 *   • Single: Variant B (full-width), C (buying scenario), D (ask about)
 */

:root {
	/* Primary brand colors chain through the plugin's Color Settings
	 * (output by ColorSettings::output_css_variables() as
	 * --220-color-primary / --220-color-accent / etc.) and fall back to
	 * the listing-system defaults when no override is set. */
	--re-navy:        var(--220-color-primary, #1a2744);
	--re-gold:        var(--220-color-accent,  #c9972b);
	--re-warm:        var(--220-color-bg-light, #f9f8f5);
	--re-border:      var(--220-color-border,  #e8e4dc);

	/* Static fallbacks for the gold/navy variants. Overridden by the
	 * @supports block below on color-mix-capable browsers so they track
	 * the customized brand color instead of the static gold/navy defaults. */
	--re-navy-soft:   #2e4a70;
	--re-gold-dk:     #91680f;
	--re-gold-lt:     #fdf3e0;
	--re-gold-bdr:    rgba(201, 151, 43, 0.22);

	--re-border-cool: #e8e8ed;
	--re-text:        #1c1c1e;
	--re-text-2:      #4a4a52;
	/* --re-muted / --re-warm-muted: darkened from the original #8e8e99 /
	   #9a8c78 to clear 4.5:1 WCAG AA against both white and --re-warm —
	   the originals only hit ~3.1–3.3:1 wherever used as label/caption
	   text (locality lines, stat labels, disclaimers, etc.). Neither
	   token is ever used as a background, so darkening only improves
	   contrast everywhere it appears. */
	--re-muted:       #707079;
	--re-warm-muted:  #7b7060;
	--re-radius:      var(--220-radius, 10px);
	--re-shadow-sm:   var(--220-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
	--re-shadow-md:   0 2px 12px rgba(0, 0, 0, 0.07);

}

/* When the browser supports color-mix(), derive the gold/navy variant
 * tokens from the (possibly customized) primary/accent colors so they
 * stay in harmony with the brand. Browsers without color-mix support
 * fall back to the static defaults declared above. */
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--re-navy-soft: color-mix(in srgb, var(--re-navy) 65%, white);
		/* 70% (not 75%) so the derived shade clears 4.5:1 against
		   --re-gold-lt / --re-warm with the default accent color — see
		   the static --re-gold-dk fallback above for the same fix. */
		--re-gold-dk:   color-mix(in srgb, var(--re-gold) 70%, black);
		--re-gold-lt:   color-mix(in srgb, var(--re-gold) 14%, white);
		--re-gold-bdr:  color-mix(in srgb, var(--re-gold) 22%, transparent);
	}
}

.twotwenty-re-list,
.twotwenty-re-grid,
.twotwenty-re-hlist {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--re-font-body);
	color: var(--re-text);
}

/* ─── Status pill (shared) ─────────────────────────────────────── */
.twotwenty-re-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--re-status-bg, #16a34a);
	color: var(--re-status-text, #fff);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 100px;
	font-family: var(--re-font-body);
	white-space: nowrap;
	line-height: 1.4;
}
.twotwenty-re-status-pill-lg {
	font-size: 13px;
	padding: 4px 12px;
}
.twotwenty-re-status-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	/* currentColor tracks the pill's own (possibly overridden) text color,
	   so the dot stays visible against any Status Text Color a client picks
	   instead of assuming white. */
	background: currentColor;
	opacity: 0.65;
	flex-shrink: 0;
	display: inline-block;
}

/* ─── Status ribbon (corner) ───────────────────────────────────── */
/* Sized/positioned so the strip itself (not just its container) reaches
   fully into the photo's rounded top-right corner with no gap, and so
   labels up to ~12 characters ("COMING SOON", "OFF MARKET") sit clear of
   the clipped edges. The span's center is fixed at (112px, 45px) from the
   container's top-right corner regardless of its own width/height —
   rotate(45deg) around the default (self-center) transform-origin doesn't
   move that point — so left/top are just (center - half of width/height).
   Verified by rendering every status label plus a worst-case 12-char
   string and screenshotting the corner at high zoom. */
.twotwenty-re-status-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	width: 145px;
	height: 145px;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
.twotwenty-re-status-ribbon span {
	position: absolute;
	left: -18px;
	top: 16px;
	width: 240px;
	height: 56px;
	line-height: 56px;
	/* Overridden inline per-instance by twotwenty_re_render_status_ribbon();
	   this is just the fallback when that's somehow absent. */
	color: #fff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(45deg);
	font-family: var(--re-font-body);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ─── Stats row (shared between cards) ─────────────────────────── */
.twotwenty-re-card-stats {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--re-border-cool);
	padding: 0 16px;
	margin: 10px 0 14px;
}
.twotwenty-re-card-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 9px 4px;
	color: var(--re-navy);
	border-right: 1px solid var(--re-border-cool);
}
.twotwenty-re-card-stat:last-child { border-right: none; }
.twotwenty-re-card-stat svg { display: inline-block; }
.twotwenty-re-card-stat-value {
	font-family: var(--re-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--re-text);
	display: inline-block;
	margin-left: 4px;
}
.twotwenty-re-card-stat-label {
	font-family: var(--re-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--re-muted);
}

/* The stat icon + value sit on one line */
.twotwenty-re-card-stat { position: relative; }
.twotwenty-re-card-stat::before { display: none; }

/* ─── Grid (A / C) base ────────────────────────────────────────── */
.twotwenty-re-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}
@media (min-width: 720px) {
	.twotwenty-re-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.twotwenty-re-grid {
		gap: 26px;
	}
}

.twotwenty-re-card {
	background: #fff;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--re-shadow-sm);
	font-family: var(--re-font-body);
	list-style: none;
}
.twotwenty-re-card a { color: inherit; text-decoration: none; }
.twotwenty-re-card-address {
	font-size: 15px;
	font-weight: 600;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	line-height: 1.3;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
.twotwenty-re-card-locality {
	font-size: 13px;
	color: var(--re-muted);
	margin: 0 0 12px;
	line-height: 1.4;
}

/* ─── Grid Card A — Spec-Literal ───────────────────────────────── */
.twotwenty-re-card-a-link { display: flex; flex-direction: column; flex: 1; }
.twotwenty-re-card-a-photo {
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(155deg, var(--re-navy) 0%, var(--re-navy-soft) 100%);
	/* Matches the card's own corner radius directly rather than relying on
	   the outer .twotwenty-re-card's overflow:hidden to clip it — keeps the
	   top corners rounded even if a theme/page-builder resets that ancestor's
	   overflow or radius. */
	border-top-left-radius: var(--re-radius);
	border-top-right-radius: var(--re-radius);
}
.twotwenty-re-card-a-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Some themes/WP core ship a default rule like
	   "img.attachment-large.size-large.wp-post-image { border-radius: 15px; }"
	   that outranks our one-class selector on specificity. That bakes a
	   mismatched radius into the image itself (all 4 corners, not just the
	   top), so we neutralize it here and let the container above do the
	   rounding instead. */
	border-radius: 0 !important;
}
.twotwenty-re-card-a-photo-empty {
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
}
.twotwenty-re-card-a-type {
	/* #e5e5e5 (not --re-warm) is the new baseline — darker than the old
	   near-white default so the label/value text underneath clears WCAG
	   AA contrast without needing an override on every site. */
	background: var(--220-re-gca-type-bg, #e5e5e5);
	border-bottom: 1px solid var(--re-border);
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.twotwenty-re-card-a-type-label { color: var(--220-re-gca-type-label, #000000); }
.twotwenty-re-card-a-type-value { color: var(--220-re-gca-type-value, #000000); margin-left: 4px; }

.twotwenty-re-card-a-price {
	background: var(--220-re-gca-price-bg, var(--re-navy));
	padding: 11px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.twotwenty-re-card-a-price-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--220-re-gca-price-label, #ffffff);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.twotwenty-re-card-a-price-value {
	font-size: 19px;
	font-weight: 700;
	color: var(--220-re-gca-price-value, #ffffff);
	font-family: var(--re-font-display);
	letter-spacing: -0.01em;
}
.twotwenty-re-card-a-body {
	padding: 14px 16px 0;
	flex: 1;
}

/* ─── Grid Card C — Editorial ──────────────────────────────────── */
.twotwenty-re-card-c {
	border-color: var(--re-border-cool);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.twotwenty-re-card-c-link { display: flex; flex-direction: column; flex: 1; }
.twotwenty-re-card-c-photo {
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--re-navy) 0%, var(--re-navy-soft) 100%);
	flex-shrink: 0;
	/* Matches the card's own corner radius directly — see the same note on
	   .twotwenty-re-card-a-photo above. */
	border-top-left-radius: var(--re-radius);
	border-top-right-radius: var(--re-radius);
}
.twotwenty-re-card-c-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* See the note on .twotwenty-re-card-a-photo img above — neutralizes a
	   theme/WP-core default image radius so only the container rounds it. */
	border-radius: 0 !important;
}
.twotwenty-re-card-c-photo-empty {
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
}
.twotwenty-re-card-c-locationchip {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	border-radius: 100px;
	padding: 3px 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--re-navy);
	letter-spacing: 0.04em;
}
.twotwenty-re-card-c-body {
	padding: 14px 16px 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.twotwenty-re-card-c-meta-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
	flex-wrap: wrap;
}
.twotwenty-re-card-c-type {
	font-size: 12px;
	font-weight: 600;
	color: var(--re-warm-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.twotwenty-re-card-c-price {
	font-size: 20px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	margin: 0 0 3px;
	letter-spacing: -0.02em;
}

/* ─── Horizontal Card list ─────────────────────────────────────── */
.twotwenty-re-hlist {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.twotwenty-re-hcard {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	background: #fff;
	font-family: var(--re-font-body);
	transition: box-shadow 0.15s;
	box-shadow: var(--re-shadow-sm);
}
.twotwenty-re-hcard:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09); }

.twotwenty-re-hcard-photo {
	width: 180px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--re-navy) 0%, var(--re-navy-soft) 100%);
	/* Matches the card's own corner radius on its two visible (left) corners
	   — see the note on .twotwenty-re-card-a-photo above. */
	border-top-left-radius: var(--re-radius);
	border-bottom-left-radius: var(--re-radius);
}
.twotwenty-re-hcard-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Neutralizes a theme/WP-core default image radius — see the note on
	   .twotwenty-re-card-a-photo img above. */
	border-radius: 0 !important;
}
.twotwenty-re-hcard-photo-empty {
	display: block;
	width: 100%;
	height: 100%;
}
.twotwenty-re-hcard-status-strip {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--re-status-bg, #16a34a);
	color: var(--re-status-text, #fff);
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.twotwenty-re-hcard-body {
	flex: 1;
	padding: 16px 20px;
	display: flex;
	gap: 20px;
	align-items: center;
	min-width: 0;
	flex-wrap: wrap;
}
.twotwenty-re-hcard-info { flex: 1; min-width: 0; }
.twotwenty-re-hcard-type-tag {
	display: inline-block;
	background: var(--re-gold-lt);
	color: var(--re-gold-dk);
	border: 1px solid var(--re-gold-bdr);
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 7px;
	margin-bottom: 6px;
}
.twotwenty-re-hcard-address-link {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--re-navy);
	text-decoration: none;
	font-family: var(--re-font-display);
	line-height: 1.25;
	margin-bottom: 3px;
	letter-spacing: -0.01em;
}
.twotwenty-re-hcard-address-link:hover { color: var(--re-navy-soft); }
.twotwenty-re-hcard-locality {
	font-size: 12px;
	color: var(--re-muted);
	margin: 0 0 10px;
}
.twotwenty-re-hcard-stats {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}
.twotwenty-re-hcard-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--re-navy);
}
.twotwenty-re-hcard-stat-v { font-size: 13px; font-weight: 700; color: var(--re-text); }
.twotwenty-re-hcard-stat-l { font-size: 12px; color: var(--re-muted); font-weight: 500; }

.twotwenty-re-hcard-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}
.twotwenty-re-hcard-pricegroup { text-align: right; }
.twotwenty-re-hcard-pricelabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--re-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}
.twotwenty-re-hcard-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	display: block;
	letter-spacing: -0.02em;
}
.twotwenty-re-hcard-cta {
	display: inline-block;
	padding: 10px 18px;
	background: var(--re-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
.twotwenty-re-hcard-cta:hover { background: var(--re-navy-soft); color: #fff; }

/* ─── Whole-card click target ──────────────────────────────────── */
/* Grid cards (variants A and C) extend their existing wrapping <a>
 * over the full card body in the partials. The horizontal card has
 * two internal anchors (address + CTA), so it uses the stretched-link
 * pattern: an ::after pseudo-element on the address link covers the
 * whole card, and the CTA sits above it via z-index so both remain
 * independently clickable. */
.twotwenty-re-card { position: relative; transition: box-shadow 0.15s; }
.twotwenty-re-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09); }

.twotwenty-re-hcard { position: relative; }
.twotwenty-re-hcard-address-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.twotwenty-re-hcard-cta { position: relative; z-index: 2; }

@media (max-width: 600px) {
	.twotwenty-re-hcard { flex-direction: column; }
	/* Stacked on mobile — photo is now the top element, so round its top
	   corners instead of the left corners used in the desktop row layout. */
	.twotwenty-re-hcard-photo {
		width: 100%;
		aspect-ratio: 16 / 10;
		border-radius: 0;
		border-top-left-radius: var(--re-radius);
		border-top-right-radius: var(--re-radius);
	}
	.twotwenty-re-hcard-body { padding: 14px 16px; }
	.twotwenty-re-hcard-actions { width: 100%; align-items: stretch; }
	.twotwenty-re-hcard-pricegroup { text-align: left; }
	.twotwenty-re-hcard-cta { text-align: center; }
}

/* ─── Category index list ──────────────────────────────────────── */
.twotwenty-re-category-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	background: #fff;
	font-family: var(--re-font-body);
}
.twotwenty-re-category-row + .twotwenty-re-category-row { border-top: 1px solid var(--re-border-cool); }
.twotwenty-re-category-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	color: var(--re-navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.12s;
}
.twotwenty-re-category-link:hover { background: var(--re-warm); }
.twotwenty-re-category-name { font-family: var(--re-font-display); }
.twotwenty-re-category-count {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--re-navy);
	padding: 2px 9px;
	border-radius: 100px;
	letter-spacing: 0.04em;
}

/* ─── Single listing — header strip ────────────────────────────── */
/* Shares the "Price Banner" settings (Grid Card A Colors) with
   .twotwenty-re-card-a-price and .twotwenty-re-summary-cell-price, so
   all three price/header surfaces move together as one cohesive scheme
   instead of needing their own separate overrides. Each rule still
   falls back to its own original default when the shared setting is
   left blank, so this changes nothing visually until one is set. */
.twotwenty-re-single { background: #fff; color: var(--re-text); font-family: var(--re-font-body); }
.twotwenty-re-header-strip {
	background: var(--220-re-gca-price-bg, var(--re-navy));
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 16px;
	flex-wrap: wrap;
}
.twotwenty-re-eyebrow {
	font-size: 12px;
	/* Solid white (not the old rgba(255,255,255,.5)) so this matches the
	   solid-white default shown by the Property Price Label Text Color
	   picker — a mismatched blank-value fallback here is what made an
	   explicit white selection appear to render at 50% opacity. */
	color: var(--220-re-gca-price-label, #ffffff);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.twotwenty-re-header-address {
	font-size: 26px;
	font-weight: 600;
	color: var(--220-re-gca-price-value, #fff);
	margin: 0;
	font-family: var(--re-font-display);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.twotwenty-re-header-locality {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--220-re-gca-price-label, #ffffff);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ─── Single — content column ─────────────────────────────────── */
.twotwenty-re-single-b-wrap { max-width: 880px; margin: 0 auto; padding: 28px 32px; }
.twotwenty-re-single-c-wrap,
.twotwenty-re-single-d-wrap {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
	padding: 28px 32px;
	max-width: 1240px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 880px) {
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		grid-template-columns: 1fr;
	}
}
.twotwenty-re-content { min-width: 0; }
.twotwenty-re-h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.twotwenty-re-section { margin-bottom: 26px; }
.twotwenty-re-section:last-child { margin-bottom: 0; }

/* Carousel */
.twotwenty-re-carousel { margin-bottom: 22px; }
.twotwenty-re-carousel-stage {
	aspect-ratio: 16 / 9;
	border-radius: var(--re-radius);
	overflow: hidden;
	border: 1px solid var(--re-border-cool);
	position: relative;
	background: var(--re-warm);
	/* Let a vertical drag keep scrolling the page natively; only
	   horizontal drags are treated as a swipe (JS in
	   220-listings-real-estate.js), so touch swipe-navigation and
	   normal page scrolling don't fight each other. */
	touch-action: pan-y;
}
.twotwenty-re-carousel-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;          /* keep inactive slides off the hit-test grid */
	pointer-events: none;        /* defensive — never intercept clicks meant for the nav buttons */
	z-index: 0;
	/* Delay the visibility flip until after the opacity fade-out completes so
	 * the cross-fade is still visible. The active rule below uses an immediate
	 * (no-delay) visibility transition. */
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.twotwenty-re-carousel-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.twotwenty-re-carousel-slide img,
.twotwenty-re-carousel-slide picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.twotwenty-re-carousel-nav {
	/* Reset typographic + button styles so theme bleed (Beaver Builder
	 * / parent theme global button rules) can't grow, shift, or
	 * outline-double the nav buttons — that's the root cause of the
	 * "two arrows stacked" symptom. */
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font: 700 20px/1 inherit;
	letter-spacing: 0;
	text-shadow: none;
	margin: 0;

	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.92) !important;
	border: none !important;
	border-radius: 6px;
	width: 36px;
	height: 36px;
	min-width: 0;                /* override theme button min-widths */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--re-navy) !important;
	/* Bumped above the previous z=3: must comfortably outrank the
	 * status ribbon (z=2), the active slide (z=1), and any theme
	 * decoration that sits on the stage. */
	z-index: 10;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* !important on background/color/border here and in :focus/:active below:
   themes commonly ship a generic
   "button:focus, button:active { background-color: ...; color: ...;
   border: ...; }" rule — element + pseudo-class outranks our single-class
   selector on specificity, so without !important the arrow flashes the
   theme's own colors and border on every click/tap. */
.twotwenty-re-carousel-nav:hover {
	background: #fff !important;
	color: var(--re-navy) !important;
	border: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.twotwenty-re-carousel-nav:focus,
.twotwenty-re-carousel-nav:active {
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--re-navy) !important;
	border: none !important;
	outline: none;
}
.twotwenty-re-carousel-nav:focus-visible {
	outline: 2px solid var(--re-navy);
	outline-offset: 2px;
}
.twotwenty-re-carousel-prev { left: 12px; }
.twotwenty-re-carousel-next { right: 12px; }
.twotwenty-re-carousel-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	overflow-x: auto;
}
.twotwenty-re-carousel-thumb {
	flex: 1;
	min-width: 80px;
	aspect-ratio: 4 / 3;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid var(--re-border-cool);
	background: var(--re-warm);
	padding: 0;
	transition: border-color 0.15s;
}
.twotwenty-re-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twotwenty-re-carousel-thumb.is-active { border-color: var(--re-navy); }

/* Hints that the photo itself opens the full-size viewer, in addition to
   the explicit expand button below (images aren't natively focusable/
   keyboard-operable, so the button is the accessible trigger). */
.twotwenty-re-carousel-stage { cursor: zoom-in; }
.twotwenty-re-carousel-expand {
	position: absolute !important;
	bottom: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.92) !important;
	border: none !important;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--re-navy) !important;
	z-index: 10;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.twotwenty-re-carousel-expand:hover {
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.twotwenty-re-carousel-expand:focus,
.twotwenty-re-carousel-expand:active {
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--re-navy) !important;
	border: none !important;
	outline: none;
}
.twotwenty-re-carousel-expand:focus-visible {
	outline: 2px solid var(--re-navy);
	outline-offset: 2px;
}

/* ─── Photo lightbox (click-to-zoom full-size viewer) ──────────────
   A single instance is built lazily by JS and appended to <body> (not
   scoped inside the carousel markup) so it always renders above
   everything else, and one shared node handles every carousel on the
   page. !important on the buttons for the same reason as the carousel
   nav arrows above — this can be triggered from anywhere on the page,
   so it needs to outrank the theme's generic
   "button:focus, button:active" rule too. */
.twotwenty-re-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(10, 12, 18, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}
.twotwenty-re-lightbox[hidden] { display: none; }
.twotwenty-re-lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.twotwenty-re-lightbox-img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.15s ease;
}
.twotwenty-re-lightbox-img.is-interacting { transition: none; }
.twotwenty-re-lightbox-close,
.twotwenty-re-lightbox-nav {
	position: absolute !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: none !important;
	border-radius: 50%;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}
.twotwenty-re-lightbox-close:hover,
.twotwenty-re-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22) !important; }
.twotwenty-re-lightbox-close:focus,
.twotwenty-re-lightbox-close:active,
.twotwenty-re-lightbox-nav:focus,
.twotwenty-re-lightbox-nav:active {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border: none !important;
	outline: none;
}
.twotwenty-re-lightbox-close:focus-visible,
.twotwenty-re-lightbox-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.twotwenty-re-lightbox-close {
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 1;
}
.twotwenty-re-lightbox-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	font: 700 24px/1 inherit;
}
.twotwenty-re-lightbox-prev { left: 16px; }
.twotwenty-re-lightbox-next { right: 16px; }
.twotwenty-re-lightbox-counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.35);
	padding: 4px 12px;
	border-radius: 100px;
	z-index: 2;
}
body.twotwenty-re-lightbox-open { overflow: hidden; }
@media (max-width: 600px) {
	.twotwenty-re-lightbox-nav { width: 38px; height: 38px; }
	.twotwenty-re-lightbox-prev { left: 8px; }
	.twotwenty-re-lightbox-next { right: 8px; }
	.twotwenty-re-lightbox-close { top: 10px; right: 10px; }
}

/* Summary bar */
.twotwenty-re-summary-bar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	margin-bottom: 26px;
}
.twotwenty-re-summary-cell {
	padding: 13px 14px;
	border-right: 1px solid var(--re-border);
	background: #fff;
}
.twotwenty-re-summary-cell:last-child { border-right: none; }
/* Shares the "Price Banner" settings with .twotwenty-re-header-strip
   and .twotwenty-re-card-a-price — see the note above the header strip
   rules. */
.twotwenty-re-summary-cell-price { background: var(--220-re-gca-price-bg, var(--re-navy)); }
.twotwenty-re-summary-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--re-muted);
	margin-bottom: 3px;
}
/* Solid white, not the old rgba(255,255,255,.5) — see the note on
   .twotwenty-re-eyebrow above. */
.twotwenty-re-summary-cell-price .twotwenty-re-summary-label { color: var(--220-re-gca-price-label, #ffffff); }
.twotwenty-re-summary-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-body);
}
.twotwenty-re-summary-cell-price .twotwenty-re-summary-value {
	font-size: 22px;
	/* Solid white (not the old var(--re-gold)/amber) — same mismatch as
	   the label fix above: the picker's default preview is white, so the
	   blank-value fallback needs to match it. */
	color: var(--220-re-gca-price-value, #ffffff);
	font-family: var(--re-font-display);
	letter-spacing: -0.01em;
}
@media (max-width: 720px) {
	.twotwenty-re-summary-bar { grid-template-columns: repeat(2, 1fr); }
	.twotwenty-re-summary-cell { border-right: none; border-bottom: 1px solid var(--re-border); }
}

/* Download Flyer button — sits right below the summary bar on every
   single-listing variant (B/C/D share partials/listing-content.php). */
.twotwenty-re-flyer-row { margin: 0 0 26px; }
.twotwenty-re-flyer-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: var(--re-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--re-radius);
	text-decoration: none;
	transition: background 0.15s;
}
.twotwenty-re-flyer-btn svg { flex-shrink: 0; }
.twotwenty-re-flyer-btn:hover {
	background: color-mix(in srgb, var(--re-navy) 85%, black);
	color: #fff;
}

/* Description */
.twotwenty-re-description-body {
	background: var(--re-warm);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	padding: 16px 18px;
	color: var(--re-text-2);
	font-size: 14px;
	line-height: 1.7;
	font-weight: 400;
}
.twotwenty-re-description-body p:first-child { margin-top: 0; }
.twotwenty-re-description-body p:last-child { margin-bottom: 0; }

/* Property details */
.twotwenty-re-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	margin: 0;
}
.twotwenty-re-details-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid var(--re-border-cool);
	border-right: 1px solid var(--re-border-cool);
}
.twotwenty-re-details-row:nth-child(4n - 1),
.twotwenty-re-details-row:nth-child(4n) { background: var(--re-warm); }
.twotwenty-re-details-row:nth-child(2n) { border-right: none; }
.twotwenty-re-details-row:nth-last-child(-n+2) { border-bottom: none; }
.twotwenty-re-details-row dt {
	font-size: 14px;
	font-weight: 600;
	color: var(--re-text);
	margin: 0;
	letter-spacing: 0.04em;
}
.twotwenty-re-details-row dd {
	font-size: 14px;
	font-weight: 600;
	color: var(--re-text);
	margin: 0;
	text-align: right;
	word-break: break-word;
}
@media (max-width: 600px) {
	.twotwenty-re-details-grid { grid-template-columns: 1fr; }
	.twotwenty-re-details-row { border-right: none; }
}

/* Features */
.twotwenty-re-feature-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}
.twotwenty-re-feature-list li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--re-gold-lt);
	color: var(--re-gold-dk);
	border: 1px solid var(--re-gold-bdr);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
}

/* Map */
.twotwenty-re-map-frame {
	border-radius: var(--re-radius);
	overflow: hidden;
	border: 1px solid var(--re-border);
	height: 320px;
	position: relative;
}
.twotwenty-re-map-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Inquiry frame & host (third-party form embed) */
.twotwenty-re-inquiry-frame {
	background: var(--re-warm);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	padding: 10px 0 10px 20px;
}
.twotwenty-re-form-host > * { max-width: 100%; }

/* Calculator host */
.twotwenty-re-calculator-host {
	background: var(--re-warm);
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	padding: 20px;
}

/* Back link */
.twotwenty-re-back { margin-top: 28px; }
.twotwenty-re-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--re-navy);
	text-decoration: none;
}
.twotwenty-re-back-link:hover { color: var(--re-navy-soft); }

/* ─── Sidebar widgets (shared chrome) ─────────────────────────── */
.twotwenty-re-sidebar {
	background: #fff;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	overflow: hidden;
	font-family: var(--re-font-body);
	position: sticky;
	top: 28px;
}
/* Shares the "Price Banner" settings (Grid Card A Colors) with the
   Grid Card A price bar, single-listing header banner, and summary
   bar's price cell — see the note near .twotwenty-re-header-strip. */
.twotwenty-re-sidebar-header {
	background: var(--220-re-gca-price-bg, var(--re-navy));
	padding: 13px 18px;
}
.twotwenty-re-sidebar-header h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--220-re-gca-price-value, #fff);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.twotwenty-re-sidebar-meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--220-re-gca-price-label, #ffffff);
}

/* Buying scenario */
.twotwenty-re-buying-price {
	padding: 14px 18px;
	border-bottom: 1px solid var(--re-border-cool);
	background: var(--re-warm);
}
.twotwenty-re-buying-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--re-text);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.twotwenty-re-buying-value-lg {
	font-size: 22px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	letter-spacing: -0.02em;
}

/* Editable purchase price (T8 / round 1). Styled to look like the
 * static value when at rest; reveals a thin focus ring on edit. */
.twotwenty-re-buying-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.twotwenty-re-buying-price-input {
	flex: 1;
	min-width: 8ch;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 2px 6px;
	margin: 0 0 0 -6px;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	width: auto;
}
.twotwenty-re-buying-price-input:hover,
.twotwenty-re-buying-price-input:focus {
	border-color: var(--re-border);
	background: #fff;
	outline: none;
}
.twotwenty-re-buying-price-input:focus {
	border-color: var(--re-navy);
	box-shadow: 0 0 0 1px var(--re-navy);
}
.twotwenty-re-buying-price-reset {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	color: var(--re-navy);
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
}
.twotwenty-re-buying-price-reset:hover {
	color: var(--re-gold-dk);
}
.twotwenty-re-buying-controls {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-bottom: 1px solid var(--re-border-cool);
}
.twotwenty-re-buying-control-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.twotwenty-re-buying-readout {
	font-size: 13px;
	font-weight: 700;
	color: var(--re-navy);
}
.twotwenty-re-buying-sub {
	font-size: 12px;
	color: var(--re-muted);
	font-weight: 500;
	margin-left: 4px;
}
.twotwenty-re-buying-slider {
	width: 100%;
	accent-color: var(--re-navy);
	cursor: pointer;
}
.twotwenty-re-buying-slider-scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--re-muted);
	margin-top: 2px;
}
.twotwenty-re-buying-rate-wrap { position: relative; }
.twotwenty-re-buying-input {
	width: 100%;
	height: 36px;
	padding: 0 26px 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--re-text);
	background: #fff;
	border: 1px solid var(--re-border);
	border-radius: 6px;
	font-family: var(--re-font-body);
	box-sizing: border-box;
}
.twotwenty-re-buying-rate-suffix {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--re-muted);
	pointer-events: none;
}
.twotwenty-re-buying-term-row { display: flex; gap: 6px; }
.twotwenty-re-buying-term {
	flex: 1;
	height: 36px;
	background: #fff;
	color: var(--re-text-2);
	border: 1px solid var(--re-border);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--re-font-body);
	transition: all 0.15s;
}
.twotwenty-re-buying-term.is-active {
	background: var(--re-navy);
	color: #fff;
	border-color: var(--re-navy);
}
.twotwenty-re-buying-result {
	padding: 16px 18px;
	border-bottom: 1px solid var(--re-border-cool);
	background: var(--re-warm);
}
.twotwenty-re-buying-monthly {
	font-size: 32px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	letter-spacing: -0.02em;
	margin-bottom: 12px;
	line-height: 1.1;
}
.twotwenty-re-buying-monthly-unit {
	font-size: 14px;
	font-weight: 400;
	color: var(--re-navy);
	margin-left: 4px;
}
.twotwenty-re-buying-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.twotwenty-re-buying-breakdown-cell {
	background: #fff;
	border: 1px solid var(--re-border-cool);
	border-radius: 6px;
	padding: 8px 10px;
}
.twotwenty-re-buying-breakdown-value {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--re-navy);
}
.twotwenty-re-buying-footer {
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Colors overridable via Settings → Real Estate → CTA Button — same
   leave-blank-to-cascade contract as every other color field in this
   file. border defaults to transparent (no visible border) unless the
   Button Border Color field is set, matching the Staff "Primary
   Buttons" ghost-button convention. */
.twotwenty-re-cta-btn {
	display: block;
	padding: 12px;
	background: var(--220-re-cta-btn-bg, var(--re-gold));
	color: var(--220-re-cta-btn-text, var(--re-navy));
	border: 1.5px solid var(--220-re-cta-btn-border, transparent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
}
.twotwenty-re-cta-btn:hover {
	background: var(--220-re-cta-btn-bg-hover, #d4a544);
	color: var(--220-re-cta-btn-text-hover, var(--re-navy));
	border-color: var(--220-re-cta-btn-border-hover, var(--220-re-cta-btn-border, transparent));
}
.twotwenty-re-buying-disclaimer {
	font-size: 12px;
	color: var(--re-muted);
	text-align: center;
	line-height: 1.5;
	margin: 0;
}

/* Ask About sidebar */
.twotwenty-re-ask-summary {
	padding: 13px 18px;
	border-bottom: 1px solid var(--re-border-cool);
	background: var(--re-warm);
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.twotwenty-re-ask-thumb {
	width: 56px;
	height: 46px;
	border-radius: 5px;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	background: linear-gradient(155deg, var(--re-navy) 0%, var(--re-navy-soft) 100%);
}
.twotwenty-re-ask-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twotwenty-re-ask-thumb-empty {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
}
.twotwenty-re-ask-thumb-stripe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--re-status-bg, #16a34a);
}
.twotwenty-re-ask-summary-text { min-width: 0; }
.twotwenty-re-ask-address {
	font-size: 12px;
	font-weight: 600;
	color: var(--re-navy);
	line-height: 1.3;
	font-family: var(--re-font-display);
}
.twotwenty-re-ask-locality { font-size: 12px; color: var(--re-muted); }
.twotwenty-re-ask-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--re-navy);
	font-family: var(--re-font-display);
	margin-top: 1px;
}
.twotwenty-re-ask-form-host {
	padding: 16px 0 0 18px;
}
.twotwenty-re-ask-empty {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--re-muted);
	font-style: italic;
}
.twotwenty-re-ask-privacy {
	font-size: 12px;
	color: var(--re-muted);
	text-align: center;
	line-height: 1.5;
	margin: 10px 0 0;
}

/* Pagination — overrides 220-listings-shared.css with RE design tokens.
 * Shared.css ships the layout and default visual; these rules override
 * the visual layer only (smaller padding, --re-navy palette, RE body font).
 * Selectors and load order must match shared.css so the cascade works. */
.twotwenty-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
}
.twotwenty-pagination a, .twotwenty-pagination span {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--re-border);
	border-radius: 4px;
	color: var(--re-navy);
	text-decoration: none;
	font-size: 13px;
	font-family: var(--re-font-body);
}
.twotwenty-pagination .current { background: var(--re-navy); color: #fff; border-color: var(--re-navy); }

.twotwenty-no-results {
	padding: 28px;
	text-align: center;
	color: var(--re-muted);
	font-style: italic;
	font-family: var(--re-font-body);
}

/* ─── Grouped list (group_by="category" / "location") ───────────── */
.twotwenty-re-grouped {
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.twotwenty-re-grouped-section { margin: 0; }
.twotwenty-re-grouped-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--re-border);
	padding: 0 0 10px;
	margin: 0 0 16px;
	flex-wrap: wrap;
}
.twotwenty-re-grouped-heading {
	font-family: var(--re-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--re-navy);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.twotwenty-re-grouped-heading a {
	color: inherit;
	text-decoration: none;
}
.twotwenty-re-grouped-heading a:hover,
.twotwenty-re-grouped-heading a:focus-visible {
	text-decoration: underline;
}
.twotwenty-re-grouped-count {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--re-navy);
	padding: 3px 10px;
	border-radius: 100px;
	white-space: nowrap;
}
.twotwenty-re-grouped-desc {
	font-size: 13px;
	color: var(--re-muted);
	margin: -8px 0 16px;
	line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────
 * Mobile overflow safety net (≤ 600px)
 *
 * Without these the single-listing page horizontally overflows on
 * phones — the wraps' 32px side padding plus the buying widget /
 * map iframe / long addresses force the document wider than the
 * viewport. The previous breakpoints (880 / 720 / 600) handle layout
 * collapse for the GRID containers but not the box-sized tokens
 * inside them.
 * ────────────────────────────────────────────────────────────────── */

/* Belt-and-braces guard against a single misbehaving descendant
 * (third-party form embed, long URL, fixed-width image) blowing the
 * page out. Scoped to .twotwenty-re-single so the rule never touches
 * the surrounding theme content. */
.twotwenty-re-single {
	max-width: 100%;
	overflow-x: clip;            /* `clip` doesn't create a scroll container; falls back to hidden in older browsers */
	overflow-x: hidden;
}
.twotwenty-re-single img,
.twotwenty-re-single iframe,
.twotwenty-re-single video,
.twotwenty-re-single embed,
.twotwenty-re-single object,
.twotwenty-re-single .twotwenty-re-form-host,
.twotwenty-re-single .twotwenty-re-calculator-host {
	max-width: 100%;
}
.twotwenty-re-single iframe { width: 100%; }

/* Long addresses, feature labels, and URL strings shouldn't push the
 * row wider than its parent. */
.twotwenty-re-header-address,
.twotwenty-re-header-locality,
.twotwenty-re-summary-value,
.twotwenty-re-details-row dd,
.twotwenty-re-feature-list li,
.twotwenty-re-back-link {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 600px) {
	/* Tighten the page-edge gutters so the body has room to breathe
	 * on a 320–414px viewport. Header strip, single B / C / D wraps
	 * all share the same horizontal padding token. */
	.twotwenty-re-header-strip,
	.twotwenty-re-single-b-wrap,
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		gap: 18px;
	}

	.twotwenty-re-header-strip {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding-top: 16px;
		padding-bottom: 16px;
		gap: 10px;
	}
	.twotwenty-re-header-address {
		font-size: 22px;
		line-height: 1.25;
	}

	/* Carousel — keep the buttons inside the rounded photo bezel, and
	 * make the thumbnails small enough that 4 fit on a 320px screen
	 * without horizontal scroll. */
	.twotwenty-re-carousel-nav {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
	.twotwenty-re-carousel-prev { left: 6px; }
	.twotwenty-re-carousel-next { right: 6px; }
	.twotwenty-re-carousel-thumb { min-width: 60px; }

	/* Summary bar — already collapses to 2-col at 720; on phone the
	 * 5th cell wraps onto its own row. Center it for balance. */
	.twotwenty-re-summary-cell-price { grid-column: 1 / -1; }
	.twotwenty-re-summary-value      { font-size: 14px; }
	.twotwenty-re-summary-cell-price .twotwenty-re-summary-value { font-size: 16px; }

	/* Details table — convert to compact 2-column cards on mobile.
	 * This cancels the desktop table striping so each detail reads as
	 * its own small card instead of one long alternating row table. */
	.twotwenty-re-details-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		border: none;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}

	.twotwenty-re-details-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 4px;
		padding: 12px;
		border: 1px solid var(--re-border-cool);
		border-radius: 10px;
		background: #fff;
		min-width: 0;
	}

	.twotwenty-re-details-row:nth-child(4n - 1),
	.twotwenty-re-details-row:nth-child(4n) {
		background: #fff;
	}

	.twotwenty-re-details-row:nth-child(2n) {
		border-right: 1px solid var(--re-border-cool);
	}

	.twotwenty-re-details-row:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--re-border-cool);
	}

	.twotwenty-re-details-row dt,
	.twotwenty-re-details-row dd {
		width: 100%;
		min-width: 0;
		margin: 0;
		text-align: left;
	}

	.twotwenty-re-details-row dt {
		font-size: 12px;
		line-height: 1.3;
	}

	.twotwenty-re-details-row dd {
		font-size: 15px;
		line-height: 1.35;
		font-weight: 600;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Map — big embeds eat vertical screen space on phones. */
	.twotwenty-re-map-frame { height: 240px; }

	/* Buying-scenario sidebar — release sticky positioning on mobile
	 * so it doesn't get glued to the top while the user scrolls the
	 * main content, and trim the chunky paddings. */
	.twotwenty-re-sidebar { position: static; }
	.twotwenty-re-buying-controls,
	.twotwenty-re-buying-result,
	.twotwenty-re-buying-footer,
	.twotwenty-re-buying-price,
	.twotwenty-re-ask-summary,
	.twotwenty-re-ask-form-host {
		padding-left: 14px;
		padding-right: 14px;
	}
	.twotwenty-re-buying-monthly { font-size: 26px; }
	.twotwenty-re-buying-value-lg { font-size: 18px; }

	/* Inquiry / calculator embed surfaces. */
	.twotwenty-re-inquiry-frame,
	.twotwenty-re-calculator-host {
		padding: 14px;
	}
}

@media (max-width: 380px) {
	.twotwenty-re-header-address { font-size: 19px; }
	.twotwenty-re-carousel-nav   { width: 28px; height: 28px; font-size: 16px; }

	/* On extra-narrow devices, let the detail cards stack so labels and
	 * values never feel cramped. */
	.twotwenty-re-details-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
 * MOBILE WIDTH / CLIPPING FIX — single real-estate listing pages
 * Added 2026-04-29
 *
 * Purpose:
 * Preserve the existing desktop max-width layout while preventing iPhone
 * viewport clipping inside the listing gallery, summary bar, property
 * details rows, sidebar widget, and map embed.
 *
 * Important:
 * Do NOT set the main wrappers to width:100% + max-width:100% globally.
 * That overrides the desktop max-width layout and makes the listing stretch
 * too wide on desktop.
 * ────────────────────────────────────────────────────────────────── */

.twotwenty-re-single,
.twotwenty-re-single *,
.twotwenty-re-single *::before,
.twotwenty-re-single *::after {
	box-sizing: border-box;
}

.twotwenty-re-single {
	max-width: 100%;
	overflow-x: hidden;
}

/* Let grid/flex children shrink instead of forcing horizontal overflow. */
.twotwenty-re-single-main,
.twotwenty-re-single-aside,
.twotwenty-re-content,
.twotwenty-re-carousel,
.twotwenty-re-carousel-stage,
.twotwenty-re-carousel-thumbs,
.twotwenty-re-summary-cell,
.twotwenty-re-description-body,
.twotwenty-re-details-grid,
.twotwenty-re-details-row,
.twotwenty-re-map-frame,
.twotwenty-re-sidebar,
.twotwenty-re-inquiry-frame,
.twotwenty-re-calculator-host,
.twotwenty-re-form-host {
	min-width: 0;
}

.twotwenty-re-single img,
.twotwenty-re-single picture,
.twotwenty-re-single iframe,
.twotwenty-re-single video,
.twotwenty-re-single embed,
.twotwenty-re-single object {
	max-width: 100%;
}

.twotwenty-re-single iframe {
	display: block;
	width: 100%;
}

.twotwenty-re-header-address,
.twotwenty-re-header-locality,
.twotwenty-re-summary-label,
.twotwenty-re-summary-value,
.twotwenty-re-details-row dt,
.twotwenty-re-details-row dd,
.twotwenty-re-feature-list li,
.twotwenty-re-back-link {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

.twotwenty-re-details-row dt {
	flex: 0 0 auto;
}

.twotwenty-re-details-row dd {
	flex: 1 1 auto;
}

@media (max-width: 880px) {
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.twotwenty-re-single-aside,
	.twotwenty-re-sidebar {
		width: auto;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.twotwenty-re-header-strip,
	.twotwenty-re-single-b-wrap,
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.twotwenty-re-single-b-wrap,
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		width: auto;
		max-width: none;
	}

	.twotwenty-re-carousel-stage {
		width: 100%;
	}

	.twotwenty-re-carousel-thumbs {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.twotwenty-re-carousel-thumb {
		flex: 0 0 64px;
		min-width: 64px;
	}

	.twotwenty-re-summary-bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.twotwenty-re-summary-cell-price {
		grid-column: 1 / -1;
	}

	.twotwenty-re-summary-cell {
		min-width: 0;
		padding-left: 12px;
		padding-right: 12px;
	}

	.twotwenty-re-summary-value {
		font-size: 14px;
		line-height: 1.35;
	}

	.twotwenty-re-summary-cell-price .twotwenty-re-summary-value {
		font-size: 17px;
	}

	.twotwenty-re-details-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.twotwenty-re-details-row {
		display: grid;
		grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1.2fr);
		align-items: start;
		gap: 10px;
		padding: 10px 12px;
		border-right: none;
	}

	.twotwenty-re-details-row dt,
	.twotwenty-re-details-row dd {
		font-size: 13px;
		line-height: 1.35;
	}

	.twotwenty-re-details-row dd {
		text-align: right;
	}

	.twotwenty-re-map-frame {
		height: 240px;
	}

	.twotwenty-re-sidebar {
		position: static;
	}
}

@media (max-width: 380px) {
	.twotwenty-re-header-strip,
	.twotwenty-re-single-b-wrap,
	.twotwenty-re-single-c-wrap,
	.twotwenty-re-single-d-wrap {
		padding-left: 12px;
		padding-right: 12px;
	}

	.twotwenty-re-details-row {
		grid-template-columns: minmax(74px, 0.75fr) minmax(0, 1.25fr);
	}
}

/* ─── Linked Realtor Card (sidebar + variant-B inline) ──────────── */
.twotwenty-re-realtor-card {
	background: #fff;
	border: 1px solid var(--re-border);
	border-radius: var(--re-radius);
	padding: 18px 20px 20px;
	margin: 0 0 18px;
	box-shadow: var(--re-shadow-sm);
	color: var(--re-text);
	font-family: var(--re-font-body);
}

/* Variant B has no aside — give the inline card a max-width so it
 * doesn't span the full editorial column. */
.twotwenty-re-single-b-wrap .twotwenty-re-realtor-card {
	max-width: 480px;
	margin: 24px auto;
}

.twotwenty-re-realtor-card-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--re-gold-dk);
	margin: 0 0 12px;
}

.twotwenty-re-realtor-card-body {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.twotwenty-re-realtor-card-photo {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--re-warm);
	border: 1px solid var(--re-gold-bdr);
}

.twotwenty-re-realtor-card-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twotwenty-re-realtor-card-text {
	min-width: 0;
}

.twotwenty-re-realtor-card-name {
	font-family: var(--re-font-display, 'Playfair Display', Georgia, serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--re-navy);
	margin: 0 0 2px;
	line-height: 1.2;
}

.twotwenty-re-realtor-card-title,
.twotwenty-re-realtor-card-company {
	font-size: 13px;
	color: var(--re-text-2);
	margin: 0;
	line-height: 1.4;
}

.twotwenty-re-realtor-card-company {
	font-style: italic;
	color: var(--re-warm-muted);
}

.twotwenty-re-realtor-card-contact {
	list-style: none;
	margin: 16px 0 16px;
	padding: 12px 0 0;
	border-top: 1px solid var(--re-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.twotwenty-re-realtor-card-contact-row {
	display: grid;
	grid-template-columns: 60px 1fr;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
}

.twotwenty-re-realtor-card-contact-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--re-muted);
}

.twotwenty-re-realtor-card-website {
	color: var(--re-navy);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.twotwenty-re-realtor-card-website:hover {
	color: var(--re-gold-dk);
}

.twotwenty-re-realtor-card-cta {
	display: block;
	text-align: center;
	background: var(--re-navy);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 11px 16px;
	border-radius: calc(var(--re-radius) * 0.6);
	text-decoration: none;
	transition: background 0.15s ease;
}

.twotwenty-re-realtor-card-cta:hover,
.twotwenty-re-realtor-card-cta:focus-visible {
	background: var(--re-navy-soft);
	color: #fff;
}

/* ─── Linked Realtor Card — horizontal variant (Variant B inline) ───
   100% wide row: circular photo on the left, name/title/company/
   contact in the middle, "View Full Profile" on the right. Matches
   the Recommended Pros "List — Horizontal Cards" layout. Only used
   via partials/realtor-card.php's `layout: 'horizontal'` arg (Variant
   B); Variant C/D's sidebar placement keeps the original stacked
   card untouched. */
.twotwenty-re-single-b-wrap .twotwenty-re-realtor-card--horizontal {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 100%;
	margin: 24px 0;
	padding: 16px 20px;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-photo {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	margin: 0;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-info {
	flex: 1;
	min-width: 0;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-eyebrow {
	margin: 0 0 3px;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-name {
	font-size: 18px;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-title,
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-company {
	display: inline;
	margin-right: 8px;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-contact {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 4px;
	margin: 8px 0 0;
	padding: 0;
	border-top: none;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-contact-row {
	display: flex;
	grid-template-columns: none;
	gap: 6px;
}
.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-cta {
	flex: 0 0 auto;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.twotwenty-re-realtor-card--horizontal {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-eyebrow,
	.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-contact {
		justify-content: center;
	}
	.twotwenty-re-realtor-card--horizontal .twotwenty-re-realtor-card-cta {
		width: 100%;
	}
}

/* ─── Reverse block: Current Listings on the reco pro single ─────
   Rendered nested inside the profile's own .twotwenty-rp-single-a /
   -b container, which already centers the page and sets the side
   padding — this section must not add its own max-width/padding/
   auto-margin on top of that, or its content drifts out of
   alignment with the rest of the profile. Its heading also takes
   the calling layout's own bio-heading class (see $heading_class in
   the partial) instead of a fixed font, so it matches that layout's
   other section headings ("About …", "Recommended By") rather than
   always rendering in the real-estate Playfair Display style. */
.twotwenty-rp-current-listings {
	margin: 32px 0 0;
}

.twotwenty-rp-current-listings-header {
	margin: 0 0 18px;
}

.twotwenty-rp-current-listings-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

@media (max-width: 480px) {
	.twotwenty-re-realtor-card-body {
		flex-direction: column;
		align-items: flex-start;
	}
	.twotwenty-re-realtor-card-photo {
		flex: 0 0 auto;
	}
}

/* ═══════════════════════════════════════════════════════════════
   REAL ESTATE · V5 Hero Search
   ---------------------------------------------------------------
   Search panel above [220_re_list] — Location / By Realtor / By
   Feature tabs. Mirrors the Recommended Professionals search hero
   (220-listings-recommended-professionals.css) exactly, with
   --220-rp-search-* swapped for --220-re-search-* and the RP navy/gold
   fallbacks swapped for this file's own --re-navy / --re-gold tokens.
═══════════════════════════════════════════════════════════════ */
.twotwenty-re-search-hero {
	--220-re-search-navy: var(--re-navy-soft, #2e4a70);
	--220-re-search-navy-deep: var(--re-navy, #1a2744);
	--220-re-search-gold: var(--re-gold, #c9972b);
	--220-re-search-gold-hover: var(--re-gold-dk, #91680f);
	--220-re-search-gold-dark: var(--re-gold-dk, #91680f);
	--220-re-search-text: var(--re-text, #1c1c1e);
	--220-re-search-text-muted: var(--re-muted, #707079);

	background: var(--220-re-banner-bg, var(--220-re-search-navy-deep));
	border-radius: 14px;
	padding: 36px 36px 30px;
	position: relative;
	overflow: hidden;
	margin: 0 0 28px;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.twotwenty-re-search-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--220-re-banner-eyebrow, var(--220-re-search-gold));
	text-transform: uppercase;
	margin: 0 0 8px;
}

.twotwenty-re-search-headline {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	/* !important: some themes apply their own heading color inside the
	   content area (e.g. .entry-content h2 {...}), which otherwise beats
	   this single-class selector on specificity alone. This headline is
	   fully plugin-owned, so it shouldn't inherit theme heading colors. */
	color: var(--220-re-banner-headline, #fff) !important;
	line-height: 1.2;
	margin: 0 0 18px;
	max-width: 720px;
}

.twotwenty-re-search-form {
	display: block;
	margin: 0;
}

/* Tabs */
.twotwenty-re-search-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 12px;
	background: rgba(255, 255, 255, 0.08);
	padding: 4px;
	border-radius: 10px;
	width: fit-content;
}

.twotwenty-re-search-tab {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	padding: 6px 14px;
	border-radius: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.twotwenty-re-search-tab:hover {
	color: rgba(255, 255, 255, 0.95);
	/* !important: some themes ship a generic button:hover { border: ... }
	   rule that would otherwise beat our own unhovered border: 0. */
	border: 0 !important;
}

.twotwenty-re-search-tab:focus-visible {
	outline: 2px solid var(--220-re-search-gold);
	outline-offset: 2px;
}

/* !important: some themes also ship a generic
   button:active/:focus { background-color; color; border; } rule —
   plain :focus (not :focus-visible) fires on every click too, so a
   clicked tab would otherwise flash the theme's colors on top of
   ours. Re-assert the resting look for both states. */
.twotwenty-re-search-tab:active,
.twotwenty-re-search-tab:focus {
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.7) !important;
	border: 0 !important;
}

/* Shares the Search button's color settings (Settings → Real Estate →
   Header Banner) so both solid gold-filled elements in the banner stay
   in sync from one set of controls. The unselected tabs above
   (.twotwenty-re-search-tab base + :hover) are untouched. */
.twotwenty-re-search-tab.is-active {
	background: var(--220-re-search-btn-bg, var(--220-re-search-gold));
	color: var(--220-re-search-btn-text, var(--220-re-search-navy-deep));
}

.twotwenty-re-search-tab.is-active:hover {
	background: var(--220-re-search-btn-bg-hover, var(--220-re-search-gold-hover));
	color: var(--220-re-search-btn-text-hover, var(--220-re-search-btn-text, var(--220-re-search-navy-deep)));
	border: 0 !important;
}

.twotwenty-re-search-tab.is-active:active,
.twotwenty-re-search-tab.is-active:focus {
	background-color: var(--220-re-search-btn-bg, var(--220-re-search-gold)) !important;
	color: var(--220-re-search-btn-text, var(--220-re-search-navy-deep)) !important;
	border: 0 !important;
}

/* Search bar */
.twotwenty-re-search-bar {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.25);
}

.twotwenty-re-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px 18px 0px 18px;
	min-width: 0;
}

.twotwenty-re-search-icon {
	color: var(--220-re-search-gold-dark);
	flex-shrink: 0;
	display: inline-flex;
}

.twotwenty-re-search-input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--220-re-search-text);
	padding: 16px 0;
	min-width: 0;
}

.twotwenty-re-search-input::placeholder {
	color: var(--220-re-search-text-muted);
	opacity: 1;
}

/* "By Realtor" tab — swaps in for .twotwenty-re-search-input above (both
   share name="220_re_q"; JS toggles which one is hidden/disabled). Same
   font-size/line-height/vertical padding as the input above so the two
   never visibly change the search bar's height when swapped — but a bare
   <select> renders taller than that box model alone would suggest because
   of the browser's own native control chrome, so appearance:none strips
   that (same fix already used on .twotwenty-rp-search-select), with a
   custom chevron standing in for the native dropdown arrow it also
   removes. */
.twotwenty-re-search-select {
	flex: 1;
	border: 0;
	outline: 0;
	background-color: transparent;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--220-re-search-text);
	padding: 7px 22px 7px 0;
	min-width: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
}

.twotwenty-re-search-submit {
	background: var(--220-re-search-btn-bg, var(--220-re-search-gold)) !important;
	color: var(--220-re-search-btn-text, var(--220-re-search-navy-deep)) !important;
	border: 0;
	cursor: pointer;
	padding: 0 28px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 120ms ease, color 120ms ease;
}

.twotwenty-re-search-submit:hover {
	background: var(--220-re-search-btn-bg-hover, var(--220-re-search-gold-hover)) !important;
	color: var(--220-re-search-btn-text-hover, var(--220-re-search-btn-text, var(--220-re-search-navy-deep))) !important;
	border: 0 !important;
}

.twotwenty-re-search-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.twotwenty-re-search-submit:active,
.twotwenty-re-search-submit:focus {
	background-color: var(--220-re-search-btn-bg, var(--220-re-search-gold)) !important;
	color: var(--220-re-search-btn-text, var(--220-re-search-navy-deep)) !important;
	border: 0 !important;
}

.twotwenty-re-search-submit-icon {
	display: inline-flex;
}

/* Meta row (Recent / Use my location) */
.twotwenty-re-search-meta {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	flex-wrap: wrap;
}

/* Plain text links, not <button> — sidesteps theme button:hover/:active/
   :focus collisions entirely instead of having to fight them with
   !important (same rationale as the Recommended Pros search meta). */
.twotwenty-re-search-meta a {
	background: none;
	border: 0;
	color: var(--220-re-search-meta-text, #ffffff) !important;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0;
}

.twotwenty-re-search-meta a:hover {
	color: var(--220-re-search-meta-text-hover, #f2f2f2) !important;
}

.twotwenty-re-search-meta a[hidden] {
	display: none;
}

.twotwenty-re-search-meta a:focus-visible {
	outline: 2px solid var(--220-re-search-gold);
	outline-offset: 2px;
}

/* Responsive */
@media (max-width: 640px) {
	.twotwenty-re-search-hero {
		padding: 24px 20px 22px;
		border-radius: 10px;
	}

	.twotwenty-re-search-headline {
		font-size: 20px;
	}

	.twotwenty-re-search-bar {
		flex-direction: column;
	}

	.twotwenty-re-search-submit {
		padding: 14px;
		justify-content: center;
		border-top: 1px solid var(--220-color-border, #e2e2e8);
	}

	.twotwenty-re-search-tabs {
		flex-wrap: wrap;
		width: 100%;
	}
}