/*
 * Site chrome refresh: header, mobile menu drawer, mobile account sheet.
 *
 * Reference: plans/home-filters-2026-10-04/prototype.html (r8).
 * Loads after product-foundation.css (includes/site-chrome.php). Selectors
 * are anchored on the components' IDs (#site-header, #mobile-nav-drawer,
 * #mobile-account-dialog); !important appears only where an older layer
 * already declares the same property with !important.
 *
 * Language: Manrope (Inter fallback), 8px panels, 6px controls, 3px tags,
 * neutral hairlines, crimson only for the selected state and the primary
 * action.
 */

:root {
	--xc-font: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--xc-canvas: #0e0e0e;
	--xc-surface: #181818;
	--xc-sheet: #141414;
	--xc-raised: #222222;
	--xc-raised-2: #2a2a2a;
	--xc-ink: #ececec;
	--xc-ink-2: #b4b4b4;
	--xc-ink-3: #8f8f8f;
	--xc-rule: rgba(255, 255, 255, 0.08);
	--xc-rule-2: rgba(255, 255, 255, 0.14);
	--xc-accent: #b80f29;
	--xc-accent-hover: #d71936;
	--xc-accent-press: #6e0816;
	--xc-on-accent: #f4f4f4;
	--xc-live: #70d5ab;
	--xc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ shared */

.xc-icon {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xc-plus {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	transition: transform 0.25s var(--xc-ease-out);
}

.xc-plus .xc-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.6;
}

a:hover > .xc-plus,
button:hover > .xc-plus,
a:focus-visible > .xc-plus,
button:focus-visible > .xc-plus {
	transform: rotate(90deg);
}

.xc-btn-primary,
.xc-btn-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 16px;
	border-radius: 6px;
	font: 800 15px/1 var(--xc-font);
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.xc-btn-primary {
	border: 0;
	background: var(--xc-accent);
	color: var(--xc-on-accent);
}

.xc-btn-primary:hover {
	background: var(--xc-accent-hover);
}

.xc-btn-primary:active {
	background: var(--xc-accent-press);
}

.xc-btn-ghost {
	border: 1px solid var(--xc-rule-2);
	background: var(--xc-raised);
	color: var(--xc-ink);
}

.xc-btn-ghost:hover {
	background: var(--xc-raised-2);
}

.xc-close {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--xc-rule-2);
	border-radius: 6px;
	background: transparent;
	color: var(--xc-ink-2);
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s;
}

.xc-close:hover {
	background: var(--xc-raised);
	color: var(--xc-ink);
}

.xc-label {
	margin: 0 0 8px;
	font: 700 12px/1.3 var(--xc-font);
	letter-spacing: 0;
	text-transform: none;
	color: var(--xc-ink-3);
}

/* Fanned stack of real profile photos (advertiser prompt). */
.xc-fan {
	position: relative;
	display: block;
	flex: none;
	width: 88px;
	height: 74px;
}

.xc-fan img {
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 48px;
	height: 62px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid var(--xc-sheet);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	transform-origin: 50% 100%;
	animation: xc-fan-1 0.6s var(--xc-ease-out) 0.12s both;
}

.xc-fan img:nth-child(1) {
	--xc-fan-to: translateX(-20px) rotate(-9deg);
}

.xc-fan img:nth-child(2) {
	z-index: 2;
	bottom: 5px;
	animation: none;
}

.xc-fan img:nth-child(3) {
	--xc-fan-to: translateX(20px) rotate(9deg);
}

.xc-fan--sm {
	width: 72px;
	height: 56px;
}

.xc-fan--sm img {
	left: 18px;
	width: 36px;
	height: 48px;
}

.xc-fan--sm img:nth-child(1) {
	--xc-fan-to: translateX(-17px) rotate(-9deg);
}

.xc-fan--sm img:nth-child(3) {
	--xc-fan-to: translateX(17px) rotate(9deg);
}

@keyframes xc-fan-1 {
	from { transform: none; }
	to { transform: var(--xc-fan-to); }
}

/* Grouped list rows (account sheet). */
.xc-list {
	display: grid;
	margin: 0 16px 16px;
	border: 1px solid var(--xc-rule);
	border-radius: 8px;
	background: var(--xc-surface);
	overflow: hidden;
}

.xc-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 14px;
	border: 0;
	border-top: 1px solid var(--xc-rule);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--xc-ink);
	font: 700 14px/1.3 var(--xc-font);
	text-align: left;
	text-decoration: none;
	transition: background-color 0.15s;
}

.xc-row:first-child {
	border-top: 0;
}

.xc-row:hover {
	background: rgba(255, 255, 255, 0.03);
}

.xc-row > .xc-icon {
	color: var(--xc-ink-3);
}

.xc-row > .xc-icon--chevron-right {
	width: 15px;
	height: 15px;
	margin-left: auto;
	color: #5a5a5a;
}

.xc-row__text {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding: 10px 0;
}

.xc-row__text strong {
	font-weight: 700;
	color: var(--xc-ink);
}

.xc-row__text small {
	font: 600 12px/1.35 var(--xc-font);
	color: var(--xc-ink-3);
}

.xc-row__value {
	margin-left: auto;
	font: 600 13px/1 var(--xc-font);
	color: var(--xc-ink-3);
	white-space: nowrap;
}

.xc-row__value + .xc-icon--chevron-right {
	margin-left: 0;
}

.xc-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: auto;
	padding: 0 6px;
	border-radius: 3px;
	background: #ececec;
	color: #0e0e0e;
	font: 800 11px/1 var(--xc-font);
	font-variant-numeric: tabular-nums;
}

.xc-count[hidden] {
	display: none;
}

.xc-count + .xc-icon--chevron-right {
	margin-left: 0;
}

/* -------------------------------------------------------- header: desktop */

#site-header {
	font-family: var(--xc-font);
	border-bottom: 1px solid var(--xc-rule);
}

@media screen and (min-width: 641px) {
	#site-header .modern-header-top {
		min-height: 72px;
		align-items: center;
	}

	#site-header .modern-logo-container img {
		height: 38px !important;
		width: auto !important;
	}

	/*
	 * Spacing lives in the items, not in `gap`: header-nav-overflow.js sums
	 * item widths to decide what moves under "More".
	 */
	/* Centred between logo and actions: the clearer hierarchy Ian chose. */
	#site-header .modern-nav-wrapper {
		justify-content: center;
		padding: 0;
	}

	#site-header .modern-nav-wrapper ul.header-menu {
		align-items: center;
		gap: 0;
		padding: 0 16px;
	}

	#site-header .modern-nav-wrapper ul.header-menu > li {
		padding: 0 11px;
	}

	#site-header .modern-nav-wrapper ul.header-menu > li > a,
	#site-header .modern-nav-wrapper ul.header-menu > li > .header-nav-more__toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 40px;
		padding: 0 2px !important;
		border: 0;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none;
		color: var(--xc-ink-3) !important;
		font: 700 14px/1 var(--xc-font);
		letter-spacing: 0;
		white-space: nowrap;
		transition: color 0.15s;
	}

	#site-header .modern-nav-wrapper ul.header-menu > li > a:hover,
	#site-header .modern-nav-wrapper ul.header-menu > li > a:focus-visible,
	#site-header .modern-nav-wrapper ul.header-menu > li > .header-nav-more__toggle:hover {
		color: var(--xc-ink) !important;
		background: transparent !important;
	}

	#site-header .modern-nav-wrapper ul.header-menu > li.current-menu-item > a,
	#site-header .modern-nav-wrapper ul.header-menu > li.current_page_item > a,
	#site-header .modern-nav-wrapper ul.header-menu > li.current-menu-ancestor > a {
		color: var(--xc-ink) !important;
		background: transparent !important;
	}

	#site-header .modern-nav-wrapper ul.header-menu > li.current-menu-item > a::after,
	#site-header .modern-nav-wrapper ul.header-menu > li.current_page_item > a::after,
	#site-header .modern-nav-wrapper ul.header-menu > li.current-menu-ancestor > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4px;
		height: 2px;
		border-radius: 1px;
		background: var(--xc-accent);
	}

	/* Dropdowns and the overflow "More" panel share one surface. */
	#site-header .modern-nav-wrapper ul.header-menu .sub-menu {
		min-width: 220px;
		padding: 6px !important;
		border: 1px solid var(--xc-rule-2) !important;
		border-radius: 8px !important;
		background: #161616 !important;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
	}

	#site-header .modern-nav-wrapper ul.header-menu .sub-menu li a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 0 10px !important;
		border-radius: 4px !important;
		background: transparent !important;
		color: var(--xc-ink-2) !important;
		font: 700 14px/1.2 var(--xc-font);
	}

	#site-header .modern-nav-wrapper ul.header-menu .sub-menu li a:hover,
	#site-header .modern-nav-wrapper ul.header-menu .sub-menu li.current-menu-item > a {
		background: var(--xc-raised) !important;
		color: var(--xc-ink) !important;
	}

	/* Actions: Language · Log in · Post Ad (primary last). */
	#site-header .modern-header-actions ul.subnav-menu {
		align-items: center;
		gap: 6px;
	}

	#site-header .modern-header-actions .locale-switcher-menu { order: 0; }
	#site-header .modern-header-actions .login-btn,
	#site-header .modern-header-actions .my-exotic-btn { order: 1; }
	#site-header .modern-header-actions .logout-btn { order: 2; }
	#site-header .modern-header-actions .post-ad-btn { order: 3; }

	#site-header .modern-header-actions .subnav-menu-btn {
		margin: 0;
	}

	#site-header .modern-header-actions .login-btn a,
	#site-header .modern-header-actions .logout-btn a,
	#site-header .modern-header-actions .my-exotic-btn a.modern-my-exotic-cta,
	#site-header .modern-header-actions .register-btn a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		min-height: 40px;
		padding: 0 12px !important;
		border: 1px solid transparent;
		border-radius: 6px !important;
		background: transparent !important;
		box-shadow: none;
		color: var(--xc-ink-2) !important;
		font: 800 13px/1 var(--xc-font);
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.18s, color 0.18s;
	}

	#site-header .modern-header-actions .login-btn a:hover,
	#site-header .modern-header-actions .logout-btn a:hover {
		background: var(--xc-raised) !important;
		color: var(--xc-ink) !important;
	}

	#site-header .modern-header-actions .my-exotic-btn a.modern-my-exotic-cta {
		border-color: var(--xc-rule-2);
		background: var(--xc-raised) !important;
		color: var(--xc-ink) !important;
	}

	#site-header .modern-header-actions .my-exotic-btn a.modern-my-exotic-cta:hover {
		background: var(--xc-raised-2) !important;
	}

	#site-header .modern-header-actions .register-btn a {
		padding: 0 16px 0 9px !important;
		background: var(--xc-accent) !important;
		color: var(--xc-on-accent) !important;
	}

	#site-header .modern-header-actions .register-btn a:hover {
		background: var(--xc-accent-hover) !important;
	}

	#site-header .modern-header-actions .register-btn a:active {
		background: var(--xc-accent-press) !important;
	}

	#site-header .modern-header-actions .register-btn .xc-plus {
		width: 20px;
		height: 20px;
	}

	/* Language: a quiet text control with a globe; the native select opens. */
	#site-header .locale-switcher--header {
		position: relative;
		display: inline-flex;
		align-items: center;
	}

	#site-header .locale-switcher--header::before {
		content: "";
		position: absolute;
		left: 10px;
		top: 50%;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		background: currentColor;
		color: var(--xc-ink-3);
		pointer-events: none;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.2 2.3 3.2 5 3.2 8s-1 5.7-3.2 8c-2.2-2.3-3.2-5-3.2-8s1-5.7 3.2-8z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.2 2.3 3.2 5 3.2 8s-1 5.7-3.2 8c-2.2-2.3-3.2-5-3.2-8s1-5.7 3.2-8z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	#site-header .locale-switcher--header select {
		width: auto;
		height: 40px;
		padding: 0 30px 0 34px !important;
		border: 1px solid transparent !important;
		border-radius: 6px !important;
		background-color: transparent !important;
		box-shadow: none;
		color: var(--xc-ink-2);
		font: 700 13px/1 var(--xc-font);
		cursor: pointer;
	}

	#site-header .locale-switcher--header select:hover {
		background-color: var(--xc-raised) !important;
		color: var(--xc-ink);
	}
}

/* --------------------------------------------------------- header: phone */

@media screen and (max-width: 640px) {
	#site-header .modern-logo-container img {
		height: 34px !important;
		width: auto !important;
	}

	#site-header .modern-mobile-signin,
	#site-header .modern-mobile-controls .mobile-menu-icon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 7px;
		height: 40px !important;
		min-height: 40px;
		padding: 0 12px 0 8px;
		border: 1px solid var(--xc-rule-2) !important;
		border-radius: 6px !important;
		background: var(--xc-raised) !important;
		box-shadow: none !important;
		color: var(--xc-ink) !important;
		font: 800 13px/1 var(--xc-font);
		letter-spacing: 0;
	}

	#site-header .modern-mobile-controls .mobile-menu-icon {
		width: 40px !important;
		padding: 0;
	}

	#site-header .modern-mobile-signin:hover,
	#site-header .modern-mobile-controls .mobile-menu-icon:hover {
		background: var(--xc-raised-2) !important;
	}

	#site-header .modern-mobile-signin .xc-plus {
		background: var(--xc-accent);
	}

	/* Logged in: the account mark alone, square. */
	#site-header .modern-mobile-signin:not(:has(.xc-plus)) {
		width: 40px !important;
		padding: 0;
	}

	#site-header .modern-mobile-controls .mobile-menu-icon .xc-icon {
		width: 19px;
		height: 19px;
	}

	/* The account sheet brings its own scrim. */
	body.mobile-account-open::before {
		content: none !important;
	}
}

/* ------------------------------------------------- mobile account sheet */

#mobile-account-dialog .mobile-account-panel {
	font-family: var(--xc-font);
	text-align: left;
}

#mobile-account-dialog .xc-sheet__handle {
	width: 36px;
	height: 4px;
	margin: 8px auto 0;
	border-radius: 2px;
	background: #3a3a3a;
}

#mobile-account-dialog .xc-sheet__top {
	display: flex !important;
	justify-content: flex-end;
	padding: 4px 10px 0;
	margin: 0;
	border: 0;
}

#mobile-account-dialog .mobile-account-panel__close {
	position: static;
}

#mobile-account-dialog h2 {
	margin: 0;
	font: 800 19px/1.2 var(--xc-font) !important;
	letter-spacing: -0.02em;
	color: #fff !important;
}

#mobile-account-dialog .xc-acct-hero p,
#mobile-account-dialog .xc-acct-id p {
	margin: 4px 0 0;
	font: 600 13px/1.4 var(--xc-font);
	color: var(--xc-ink-3) !important;
}

#mobile-account-dialog .xc-acct-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 16px 18px;
}

#mobile-account-dialog .xc-acct-ctas {
	display: grid !important;
	gap: 8px;
	padding: 0 16px 20px;
	margin: 0;
}

#mobile-account-dialog .xc-acct-ctas .xc-btn-primary {
	color: var(--xc-on-accent) !important;
}

#mobile-account-dialog .xc-acct-alt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 12px 0 14px;
	border: 1px solid var(--xc-rule-2);
	border-radius: 6px;
	background: var(--xc-raised);
	box-shadow: none;
	color: var(--xc-ink-3) !important;
	font: 600 13px/1.2 var(--xc-font);
	text-decoration: none;
}

#mobile-account-dialog .xc-acct-alt:hover {
	background: var(--xc-raised-2);
}

#mobile-account-dialog .xc-acct-alt strong {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	font-weight: 800;
	font-size: 14px;
	color: var(--xc-ink) !important;
}

#mobile-account-dialog .xc-acct-alt .xc-icon {
	width: 15px;
	height: 15px;
}

#mobile-account-dialog .xc-acct-id {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 16px 16px;
}

#mobile-account-dialog .xc-acct-id__photo {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--xc-raised);
	color: var(--xc-ink-3);
}

#mobile-account-dialog .xc-acct-id__photo img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--xc-raised-2);
}

#mobile-account-dialog .xc-acct-id__status {
	position: absolute;
	right: 1px;
	bottom: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid var(--xc-sheet);
	background: #6f6f6f;
}

#mobile-account-dialog .xc-acct-id__status--active {
	background: var(--xc-live);
}

#mobile-account-dialog .xc-label {
	margin: 0 16px 8px;
}

#mobile-account-dialog .xc-list {
	display: grid !important;
	flex-direction: initial;
	gap: 0;
}

#mobile-account-dialog .xc-row {
	color: var(--xc-ink) !important;
}

#mobile-account-dialog .xc-row--logout,
#mobile-account-dialog .xc-row--logout strong {
	color: var(--xc-ink-2) !important;
}

#mobile-account-dialog .xc-row--logout:hover,
#mobile-account-dialog .xc-row--logout:hover strong,
#mobile-account-dialog .xc-row--logout:hover .xc-icon {
	color: #f0a2ab !important;
}

/* Language row: the native select covers the row and opens the device picker. */
#mobile-account-dialog .xc-row--locale .locale-switcher {
	position: absolute;
	inset: 0;
	margin: 0;
}

#mobile-account-dialog .xc-row--locale select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	font-size: 16px;
}

#mobile-account-dialog .xc-row--locale:focus-within {
	outline: 2px solid #ececec;
	outline-offset: -2px;
}

/* ------------------------------------------------------ mobile menu drawer */

/*
 * Up to 1180px the header's links live in this drawer (phones and tablets;
 * responsive-content-relocation.js moves the menu in). Old layers only
 * position it below 641px, so every property it needs is declared here.
 */
@media screen and (max-width: 1180px) {
	#mobile-nav-drawer.mobile-menu-div-content {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 100% !important;
		max-width: 420px !important;
		height: 100dvh !important;
		background: var(--xc-sheet) !important;
		border: 0 !important;
		border-left: 1px solid var(--xc-rule-2) !important;
		box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
		overflow: hidden !important;
		display: flex !important;
		flex-direction: column;
		font-family: var(--xc-font);
		/* Above the sticky header, which old layers raise while the menu is open. */
		z-index: calc(var(--z-mobile-account, 10020) + 40) !important;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(104%);
		transition: transform 0.38s var(--xc-ease-out), opacity 0.2s ease, visibility 0s linear 0.38s;
	}

	body.mobile-nav-open #mobile-nav-drawer.mobile-menu-div-content {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		transform: none;
		transition: transform 0.38s var(--xc-ease-out), opacity 0.2s ease;
	}
}

/* Tablets: one header row — logo, actions, then the menu button. */
@media screen and (min-width: 641px) and (max-width: 1180px) {
	#site-header .modern-nav-wrapper {
		display: none !important;
	}

	#site-header .modern-header-top {
		position: relative;
		flex-wrap: nowrap !important;
		align-items: center;
		min-height: 72px;
		padding-right: 72px !important;
	}

	#site-header .modern-header-actions {
		margin-left: auto;
	}

	#site-header .modern-mobile-controls--right {
		position: absolute !important;
		top: 50%;
		right: 16px;
		display: flex !important;
		align-items: center;
		transform: translateY(-50%);
		z-index: 2;
	}

	#site-header .modern-mobile-controls--right .modern-mobile-signin {
		display: none !important;
	}

	#site-header .modern-mobile-controls .mobile-menu-icon {
		position: static !important;
		display: inline-grid !important;
		place-items: center;
		width: 40px !important;
		height: 40px !important;
		padding: 0;
		border: 1px solid var(--xc-rule-2) !important;
		border-radius: 6px !important;
		background: var(--xc-raised) !important;
		box-shadow: none !important;
		color: var(--xc-ink) !important;
		cursor: pointer;
	}

	#site-header .modern-mobile-controls .mobile-menu-icon:hover {
		background: var(--xc-raised-2) !important;
	}

	#site-header .modern-mobile-controls .mobile-menu-icon .xc-icon {
		width: 19px;
		height: 19px;
	}

	/* Old layers draw this scrim only on phones. */
	body.mobile-nav-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.58);
		z-index: calc(var(--z-mobile-account, 10020) + 30);
	}
}

#mobile-nav-drawer .xc-nav__head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 0 12px 0 16px;
	margin: 0;
	border-bottom: 1px solid var(--xc-rule);
	background: transparent;
}

#mobile-nav-drawer .xc-nav__logo {
	display: inline-flex;
	align-items: center;
	color: var(--xc-ink);
	font: 800 18px/1 var(--xc-font);
	text-decoration: none;
}

#mobile-nav-drawer .xc-nav__logo img {
	height: 30px;
	width: auto;
}

#mobile-nav-drawer .close-menu.xc-close {
	position: static;
	margin-left: auto;
}

#mobile-nav-drawer .xc-nav__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 16px 20px;
}

/* Search + city as one block. */
#mobile-nav-drawer .xc-finder {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#mobile-nav-drawer .xc-finder__search,
#mobile-nav-drawer .xc-finder__city {
	background: var(--xc-surface);
	border: 1px solid var(--xc-rule-2);
}

#mobile-nav-drawer .xc-finder__search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	box-shadow: none;
}

#mobile-nav-drawer .xc-finder__search:focus-within {
	border-color: #5a5a5a;
}

#mobile-nav-drawer .xc-finder__search > .xc-icon {
	position: absolute;
	left: 14px;
	color: var(--xc-ink-3);
	pointer-events: none;
}

#mobile-nav-drawer .xc-finder__search .mobile-drawer-search-field__input {
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 46px 0 44px !important;
	border: 0 !important;
	border-radius: 8px 8px 0 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--xc-ink) !important;
	font: 600 16px/1 var(--xc-font);
}

#mobile-nav-drawer .xc-finder__search .mobile-drawer-search-field__input::placeholder {
	color: #707070;
}

#mobile-nav-drawer .xc-finder__search .mobile-drawer-search-field__input:focus {
	outline: none;
}

#mobile-nav-drawer .xc-finder__search .mobile-drawer-search-field__clear {
	position: absolute;
	right: 8px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--xc-ink-3);
}

#mobile-nav-drawer .xc-finder__search .mobile-drawer-search-field__clear:hover {
	background: var(--xc-raised);
	color: var(--xc-ink);
}

#mobile-nav-drawer .xc-finder__city {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border-radius: 0 0 8px 8px;
	border-top: 1px solid var(--xc-rule);
	box-shadow: none;
	color: var(--xc-ink);
	font: 700 15px/1.2 var(--xc-font);
	text-align: left;
	cursor: pointer;
}

#mobile-nav-drawer .xc-finder__city:hover {
	background: #1d1d1d;
}

#mobile-nav-drawer .xc-finder__city > .xc-icon {
	color: var(--xc-ink-3);
}

#mobile-nav-drawer .xc-finder__city .mobile-drawer-city-btn__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#mobile-nav-drawer .xc-finder__city > .xc-icon--chevron-right {
	width: 15px;
	height: 15px;
	color: #5a5a5a;
}

#mobile-nav-drawer .mobile-drawer-search__status:empty {
	display: none;
}

/* The idle hint stays for screen readers; results and errors stay visible. */
#mobile-nav-drawer .xc-finder[data-search-state="idle"] .mobile-drawer-search__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#mobile-nav-drawer .mobile-drawer-search__status {
	margin: 10px 2px 0;
	font: 700 12px/1.4 var(--xc-font);
	color: var(--xc-ink-3);
}

#mobile-nav-drawer .mobile-drawer-search__results {
	margin-top: 8px;
}

/* Pages: the relocated header menu, shown open. */
#mobile-nav-drawer .xc-nav__pages {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu {
	display: grid;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li {
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-top: 1px solid var(--xc-rule);
	background: transparent;
	list-style: none;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu > li:first-child {
	border-top: 0;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 0 30px 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--xc-ink-2) !important;
	font: 700 17px/1.25 var(--xc-font);
	letter-spacing: -0.01em;
	text-decoration: none;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li a::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	background: #555;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li a:hover {
	color: var(--xc-ink) !important;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li.current-menu-item > a,
#mobile-nav-drawer .xc-nav__links ul.slider-menu li.current_page_item > a {
	color: var(--xc-ink) !important;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu li.current-menu-item > a::before,
#mobile-nav-drawer .xc-nav__links ul.slider-menu li.current_page_item > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	bottom: 17px;
	width: 2px;
	border-radius: 1px;
	background: var(--xc-accent);
}

/* Sub-pages sit indented under their parent, always visible. */
#mobile-nav-drawer .xc-nav__links ul.slider-menu .sub-menu {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	margin: 0 0 8px 14px !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--xc-rule-2) !important;
	background: transparent !important;
	box-shadow: none !important;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu .sub-menu li {
	border-top: 0;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu .sub-menu li a {
	min-height: 42px;
	padding-left: 14px;
	font-size: 15px;
	font-weight: 600;
}

#mobile-nav-drawer .xc-nav__links ul.slider-menu .sub-menu li a::after {
	display: none;
}

/* Advertiser prompt, pinned under the scrolling body. */
#mobile-nav-drawer .xc-nav__ad {
	flex: none;
	margin: 0;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
	border: 0;
	border-top: 1px solid var(--xc-rule);
	border-radius: 0;
	background: #121212;
	box-shadow: none;
}

#mobile-nav-drawer .xc-nav__ad-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

#mobile-nav-drawer .xc-nav__ad strong {
	display: block;
	font: 800 15px/1.25 var(--xc-font);
	color: var(--xc-ink);
}

#mobile-nav-drawer .xc-nav__ad small {
	display: block;
	margin-top: 2px;
	font: 600 12px/1.4 var(--xc-font);
	color: var(--xc-ink-3);
}

#mobile-nav-drawer .xc-nav__ad-actions {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 8px;
}

#mobile-nav-drawer .xc-nav__ad-actions .xc-btn-primary {
	color: var(--xc-on-accent) !important;
}

#mobile-nav-drawer .xc-nav__ad-actions .xc-btn-ghost {
	color: var(--xc-ink) !important;
	font-size: 14px;
}

/* ------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.xc-plus,
	.xc-fan img,
	#mobile-nav-drawer.mobile-menu-div-content {
		animation: none !important;
		transition: none !important;
	}

	.xc-fan img:nth-child(1),
	.xc-fan img:nth-child(3) {
		transform: var(--xc-fan-to);
	}
}

/* The drawer stays in the DOM while closed; replay the fan on each open. */
#mobile-nav-drawer .xc-fan img {
	animation: none;
}

body.mobile-nav-open #mobile-nav-drawer .xc-fan img:not(:nth-child(2)) {
	animation: xc-fan-1 0.6s var(--xc-ease-out) 0.2s both;
}

/* ----------------------------------------------------------- location panel */

/*
 * "Choose a location" (#slidercountries, sidebar-left.php). The scripts move it
 * to <body> on open and toggle an inline display plus body.locations-open.
 * Tablets get a centred dialog, phones a bottom sheet.
 */
@keyframes xc-sheet-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes xc-dialog-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

#slidercountries.slidercountries {
	position: fixed !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	left: 50% !important;
	z-index: calc(var(--z-mobile-account, 10020) + 60) !important;
	flex-direction: column;
	width: min(480px, calc(100vw - 48px)) !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: min(720px, calc(100dvh - 64px));
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom) !important;
	border: 1px solid var(--xc-rule-2) !important;
	border-radius: 8px !important;
	background: var(--xc-sheet) !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
	color: var(--xc-ink);
	font-family: var(--xc-font);
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	translate: -50% -50%;
	transform: none;
	animation: xc-dialog-in 0.3s var(--xc-ease-out) both;
}

body.locations-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	z-index: calc(var(--z-mobile-account, 10020) + 55);
}

#slidercountries .location-overlay-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	padding: 16px 12px 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--xc-rule);
	background: var(--xc-sheet);
}

#slidercountries .location-overlay-heading {
	flex: 1;
	min-width: 0;
}

#slidercountries .location-overlay-header h2 {
	margin: 0 !important;
	color: #fff !important;
	font: 800 20px/1.15 var(--xc-font) !important;
	letter-spacing: -0.02em;
}

#slidercountries .location-overlay-subcopy {
	margin: 4px 0 0;
	color: var(--xc-ink-3);
	font: 600 13px/1.4 var(--xc-font);
}

#slidercountries .close-country.xc-close {
	position: static;
	flex: none;
	margin: 0;
	text-decoration: none;
}

/* Search */
#slidercountries .location-search--mobile {
	position: relative;
	margin: 0 0 10px;
	padding: 0 20px;
	border: 0;
	background: transparent;
}

#slidercountries .location-search__icon {
	position: absolute;
	top: 15px;
	left: 33px;
	display: block;
	width: 18px;
	height: 18px;
	color: var(--xc-ink-3);
	pointer-events: none;
}

#slidercountries .location-search__icon::before {
	content: none;
}

#slidercountries .location-search__input {
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 14px 0 42px;
	border: 1px solid var(--xc-rule-2);
	border-radius: 6px;
	background: #1a1a1a;
	box-shadow: none;
	color: var(--xc-ink);
	font: 600 16px/1 var(--xc-font);
}

#slidercountries .location-search__input::placeholder {
	color: #707070;
}

#slidercountries .location-search__input:focus {
	outline: none;
	border-color: #6a6a6a;
}

#slidercountries .location-search__empty {
	margin: 10px 2px 0;
	color: var(--xc-ink-3);
	font: 600 13px/1.4 var(--xc-font);
}

#slidercountries .location-search__empty[hidden],
#slidercountries .location-search__results[hidden] {
	display: none !important;
}

#slidercountries .location-search__results {
	display: grid;
	margin: 8px 0 0;
	border: 1px solid var(--xc-rule);
	border-radius: 8px;
	background: var(--xc-surface);
	overflow: hidden;
}

#slidercountries .location-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 14px;
	border-top: 1px solid var(--xc-rule);
	color: var(--xc-ink);
	text-decoration: none;
}

#slidercountries .location-search-result:first-child {
	border-top: 0;
}

#slidercountries .location-search-result:hover {
	background: rgba(255, 255, 255, 0.03);
}

#slidercountries .location-search-result__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}

#slidercountries .location-search-result__copy strong {
	font: 700 14px/1.2 var(--xc-font);
	color: var(--xc-ink);
}

#slidercountries .location-search-result__copy small {
	font: 600 12px/1.2 var(--xc-font);
	color: var(--xc-ink-3);
}

#slidercountries .location-search-result__count,
#slidercountries .location-item__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	margin-left: auto;
	padding: 0 7px;
	border: 0;
	border-radius: 3px;
	background: var(--xc-raised);
	color: var(--xc-ink-3);
	font: 700 12px/1 var(--xc-font);
	font-variant-numeric: tabular-nums;
}

/* Escorts near me */
#slidercountries .location-actions--mobile {
	margin: 0 0 18px;
	padding: 0 20px;
	border: 0;
	background: transparent;
}

#slidercountries .location-geo-button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--xc-rule-2);
	border-radius: 6px;
	background: var(--xc-raised);
	box-shadow: none;
	color: var(--xc-ink);
	font: 700 14px/1 var(--xc-font);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s;
}

#slidercountries .location-geo-button:hover {
	background: var(--xc-raised-2);
}

#slidercountries .location-geo-button .xc-icon {
	color: var(--xc-ink-2);
}

#slidercountries .location-geo-status {
	margin: 8px 2px 0;
	color: var(--xc-ink-3);
	font: 600 12px/1.4 var(--xc-font);
}

#slidercountries .location-geo-status[hidden] {
	display: none;
}

/* Popular counties */
#slidercountries .location-quick-picks {
	margin: 0 0 18px;
	padding: 0 20px;
	border: 0;
	background: transparent;
}

#slidercountries .location-quick-picks__label {
	margin: 0 0 8px;
	color: var(--xc-ink-3);
	font: 700 12px/1.3 var(--xc-font);
	letter-spacing: 0;
	text-transform: none;
}

#slidercountries .location-quick-picks__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#slidercountries .location-quick-chip {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	background: transparent;
	color: var(--xc-ink-2);
	font: 700 13px/1 var(--xc-font);
	text-decoration: none;
	transition: background-color 0.18s, color 0.18s;
}

#slidercountries .location-quick-chip:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--xc-ink);
}

/* Counties and their towns */
#slidercountries #mobile-location-list {
	display: block;
	height: auto !important;
	max-height: none !important;
	margin: 0 20px 20px;
	padding: 0;
	border: 1px solid var(--xc-rule);
	border-radius: 8px;
	background: var(--xc-surface);
	list-style: none;
	overflow: hidden !important;
}

#slidercountries #mobile-location-list > li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--xc-rule);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	list-style: none;
}

#slidercountries #mobile-location-list > li:first-child {
	border-top: 0;
}

#slidercountries #mobile-location-list > li::before,
#slidercountries #mobile-location-list > li::after {
	content: none;
}

#slidercountries #mobile-location-list > li > a {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: var(--xc-ink) !important;
	font: 700 15px/1.25 var(--xc-font);
	text-decoration: none;
}

#slidercountries #mobile-location-list > li > a:hover {
	background: rgba(255, 255, 255, 0.03);
}

#slidercountries #mobile-location-list > li > .location-item__count {
	grid-column: 2;
	grid-row: 1;
	margin: 0 2px 0 8px;
}

#slidercountries #mobile-location-list > li > .iconlocation {
	grid-column: 3;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--xc-ink-3);
	font-size: 0;
	cursor: pointer;
}

#slidercountries #mobile-location-list > li > .iconlocation::before {
	content: "" !important;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s var(--xc-ease-out);
}

#slidercountries #mobile-location-list > li > .iconlocation.icon-angle-up::before,
#slidercountries #mobile-location-list > li > .iconlocation[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

#slidercountries #mobile-location-list > li > .iconlocation:hover {
	color: var(--xc-ink);
}

#slidercountries #mobile-location-list > li > ul.children {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0 0 8px 14px !important;
	padding: 0 !important;
	border: 0;
	border-left: 1px solid var(--xc-rule-2);
	background: transparent !important;
	list-style: none;
}

#slidercountries #mobile-location-list ul.children li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	list-style: none;
}

#slidercountries #mobile-location-list ul.children li::before {
	content: none;
}

#slidercountries #mobile-location-list ul.children a {
	display: flex;
	align-items: center;
	min-height: 42px;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	color: var(--xc-ink-2) !important;
	font: 600 14px/1.25 var(--xc-font) !important;
	text-decoration: none;
}

#slidercountries #mobile-location-list ul.children a:hover,
#slidercountries #mobile-location-list li.current-cat > a {
	color: #fff !important;
}

@media screen and (max-width: 640px) {
	#slidercountries.slidercountries {
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-height: 90dvh;
		border-width: 1px 0 0 !important;
		border-radius: 8px 8px 0 0 !important;
		box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.5) !important;
		translate: none;
		animation: xc-sheet-up 0.36s var(--xc-ease-out) both;
	}

	#slidercountries .location-overlay-header {
		padding: 14px 10px 12px 16px;
	}

	#slidercountries .location-overlay-header::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		border-radius: 2px;
		background: #3a3a3a;
	}

	#slidercountries .location-search--mobile,
	#slidercountries .location-actions--mobile,
	#slidercountries .location-quick-picks {
		padding: 0 16px;
	}

	#slidercountries .location-search__icon {
		left: 29px;
	}

	#slidercountries #mobile-location-list {
		margin: 0 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#slidercountries.slidercountries {
		animation: none;
	}
}

/* --------------------------------------------- phone discovery strip */

/*
 * Search + Choose city under the phone header (header.php #site-discovery).
 * Phones only, as before. One joined control: search on the left, city on
 * the right behind a hairline. Hooks used by the search and location
 * scripts are unchanged.
 */
@media screen and (max-width: 640px) {
	#site-discovery.modern-mobile-discovery-strip {
		margin: 0;
		/* Match the campaign cards' 32px leading inset. */
		padding: 10px 16px 12px 32px;
		border: 0;
		border-bottom: 1px solid var(--xc-rule);
		background: #0b0b0b;
		font-family: var(--xc-font);
	}

	#site-discovery .modern-mobile-discovery-strip__inner,
	#site-discovery .modern-mobile-search-band {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	#site-discovery .modern-mobile-search-band__row {
		--xc-search-gradient: linear-gradient(110deg, #b80f29 0%, #d71936 20%, #e75a82 40%, #e6c46a 55%, #e75a82 70%, #b80f29 100%);
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
		gap: 0;
		height: 48px;
		margin: 0;
		padding: 1px;
		border: 0;
		border-radius: 8px;
		background: var(--xc-surface);
		box-shadow: inset 0 0 0 1px var(--xc-rule-2);
		overflow: hidden;
	}

	#site-discovery .modern-mobile-search-band__row:focus-within {
		box-shadow: inset 0 0 0 1px #5a5a5a;
	}

	/* The gradient replaces the neutral edge instead of sitting inside it. */
	#site-discovery .modern-mobile-search-band__row:has(input:focus) {
		box-shadow: none;
	}

	/* Keep the edge and icon moving together until the visitor types. */
	#site-discovery .modern-mobile-search-band__row::after {
		content: "";
		position: absolute;
		inset: 0;
		padding: 1px;
		border: 0;
		border-radius: inherit;
		background: var(--xc-search-gradient);
		background-size: 250% 100%;
		background-position: 0% 50%;
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s var(--xc-ease-out);
	}

	#site-discovery .modern-mobile-search-band__row:has(input:focus)::after {
		opacity: 1;
		background-position: 50% 50%;
	}

	#site-discovery .modern-mobile-search-band__row:has(input:focus:placeholder-shown)::after {
		animation: xc-search-gradient-sweep 2.4s ease-in-out infinite alternate;
	}

	#site-discovery .modern-mobile-search-field {
		position: relative;
		display: flex;
		align-items: center;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	#site-discovery .mobile-drawer-search-field__icon {
		position: absolute;
		left: 12px;
		top: 50%;
		display: grid;
		place-items: center;
		color: var(--xc-ink-3);
		pointer-events: none;
		transform: translateY(-50%);
		transition: transform 0.24s var(--xc-ease-out), color 0.2s var(--xc-ease-out);
	}

	#site-discovery .modern-mobile-search-field:has(input:focus) .mobile-drawer-search-field__icon {
		color: var(--xc-accent-hover);
		transform: translateY(calc(-50% - 1px)) scale(1.06);
	}

	#site-discovery .mobile-drawer-search-field__icon::before {
		content: none;
	}

	#site-discovery .modern-mobile-search-field:has(input:focus:placeholder-shown) .mobile-drawer-search-field__icon .xc-icon {
		visibility: hidden;
	}

	#site-discovery .modern-mobile-search-field:has(input:focus:placeholder-shown) .mobile-drawer-search-field__icon::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		background: var(--xc-search-gradient);
		background-size: 250% 100%;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
		animation: xc-search-gradient-sweep 2.4s ease-in-out infinite alternate;
	}

	body #site-discovery .modern-mobile-search-field .mobile-drawer-search-field__input {
		width: 100%;
		height: 100%;
		min-height: 0;
		margin: 0;
		padding: 0 42px 0 38px;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--xc-ink) !important;
		/* 16px keeps iOS from zooming on focus. */
		font: 600 16px/1 var(--xc-font);
		outline: none;
	}

	/* Reserve clear-button space only while it is visible. */
	body #site-discovery .modern-mobile-search-field:has(.mobile-drawer-search-field__clear[hidden]) .mobile-drawer-search-field__input {
		padding-right: 12px;
	}

	#site-discovery .mobile-drawer-search-field__input::placeholder {
		color: var(--xc-ink-3);
		font-size: 14px;
		font-weight: 500;
	}

	#site-discovery .mobile-drawer-search-field__clear {
		position: absolute;
		right: 6px;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: var(--xc-ink-3);
	}

	#site-discovery .mobile-drawer-search-field__clear[hidden] {
		display: none;
	}

	#site-discovery .mobile-drawer-search-field__clear .xc-icon {
		width: 16px;
		height: 16px;
	}

	#site-discovery .modern-mobile-location-filter {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 100%;
		min-height: 0;
		max-width: 46vw;
		margin: 0;
		padding: 0 12px 0 12px;
		border: 0 !important;
		border-left: 1px solid var(--xc-rule) !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--xc-ink);
		font: 700 14px/1 var(--xc-font);
		cursor: pointer;
	}

	#site-discovery .modern-mobile-location-filter:hover,
	#site-discovery .modern-mobile-location-filter:focus-visible {
		background: rgba(255, 255, 255, 0.04) !important;
	}

	#site-discovery .modern-mobile-location-filter__icon,
	#site-discovery .modern-mobile-location-filter__caret {
		display: grid;
		place-items: center;
		flex: none;
		color: var(--xc-ink-3);
	}

	#site-discovery .modern-mobile-location-filter__icon::before,
	#site-discovery .modern-mobile-location-filter__caret::before {
		content: none;
	}

	#site-discovery .modern-mobile-location-filter__icon .xc-icon {
		width: 17px;
		height: 17px;
	}

	#site-discovery .modern-mobile-location-filter__caret .xc-icon {
		width: 14px;
		height: 14px;
	}

	#site-discovery .modern-mobile-location-filter__label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* A chosen city reads as set, not as a prompt. */
	#site-discovery .modern-mobile-location-filter:not([data-location-state="idle"]) .modern-mobile-location-filter__icon {
		color: #fff;
	}

	#site-discovery .modern-mobile-search-band__results {
		margin: 8px 0 0;
		max-height: min(60dvh, 420px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--xc-rule-2);
		border-radius: 8px;
		background: var(--xc-sheet);
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
	}

	#site-discovery .modern-mobile-search-band__results[hidden] {
		display: none !important;
	}
}

@keyframes xc-search-gradient-sweep {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

@media screen and (max-width: 640px) and (prefers-reduced-motion: reduce) {
	#site-discovery .modern-mobile-search-band__row,
	#site-discovery .modern-mobile-search-band__row::after,
	#site-discovery .mobile-drawer-search-field__icon {
		transition: none;
	}

	#site-discovery .modern-mobile-search-band__row:has(input:focus)::after,
	#site-discovery .modern-mobile-search-band__row:has(input:focus:placeholder-shown)::after,
	#site-discovery .modern-mobile-search-field:has(input:focus:placeholder-shown) .mobile-drawer-search-field__icon::before {
		animation: none;
		background-position: 50% 50%;
	}

	#site-discovery .modern-mobile-search-field:has(input:focus) .mobile-drawer-search-field__icon {
		transform: translateY(-50%);
	}
}

/* Search results (phone strip and menu drawer share the server markup). */
#site-discovery .mobile-drawer-search-results-list,
#mobile-nav-drawer .mobile-drawer-search-results-list {
	display: grid;
	margin: 0;
	padding: 0;
}

#mobile-nav-drawer .mobile-drawer-search__results:not([hidden]) {
	border: 1px solid var(--xc-rule);
	border-radius: 8px;
	background: var(--xc-surface);
	overflow: hidden;
}

#site-discovery .mobile-drawer-search-result,
#mobile-nav-drawer .mobile-drawer-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-top: 1px solid var(--xc-rule);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--xc-ink) !important;
	text-decoration: none;
	font-family: var(--xc-font);
}

#site-discovery .mobile-drawer-search-result:first-child,
#mobile-nav-drawer .mobile-drawer-search-result:first-child {
	border-top: 0;
}

#site-discovery .mobile-drawer-search-result:hover,
#mobile-nav-drawer .mobile-drawer-search-result:hover {
	background: rgba(255, 255, 255, 0.03);
}

#site-discovery .mobile-drawer-search-result__thumb,
#mobile-nav-drawer .mobile-drawer-search-result__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--xc-raised);
}

#site-discovery .mobile-drawer-search-result__thumb img,
#mobile-nav-drawer .mobile-drawer-search-result__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

#site-discovery .mobile-drawer-search-result__body,
#mobile-nav-drawer .mobile-drawer-search-result__body {
	display: grid;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

#site-discovery .mobile-drawer-search-result__title-row,
#mobile-nav-drawer .mobile-drawer-search-result__title-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

#site-discovery .mobile-drawer-search-result__title,
#mobile-nav-drawer .mobile-drawer-search-result__title {
	overflow: hidden;
	color: var(--xc-ink);
	font: 800 14px/1.2 var(--xc-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

#site-discovery .mobile-drawer-search-result__age,
#site-discovery .mobile-drawer-search-result__location,
#mobile-nav-drawer .mobile-drawer-search-result__age,
#mobile-nav-drawer .mobile-drawer-search-result__location {
	color: var(--xc-ink-3);
	font: 600 12px/1.3 var(--xc-font);
}

#site-discovery .mobile-drawer-search-result__location .icon,
#mobile-nav-drawer .mobile-drawer-search-result__location .icon {
	display: none;
}

/* Status as a neutral tag (no red badges). */
#site-discovery .mobile-drawer-search-result__badge,
#mobile-nav-drawer .mobile-drawer-search-result__badge {
	justify-self: start;
	height: 20px;
	padding: 0 6px;
	border: 0;
	border-radius: 3px;
	background: var(--xc-raised);
	color: var(--xc-ink-2);
	font: 700 11px/20px var(--xc-font);
}

#site-discovery .mobile-drawer-search-empty,
#mobile-nav-drawer .mobile-drawer-search-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 14px;
	border: 0;
	background: transparent;
	color: var(--xc-ink-3);
	font: 600 13px/1.4 var(--xc-font);
}

#site-discovery .mobile-drawer-search-empty__icon,
#mobile-nav-drawer .mobile-drawer-search-empty__icon {
	display: none;
}

/* Results sit flush in their panel; age is plain text, not a pill. */
#site-discovery .modern-mobile-search-band__results,
#mobile-nav-drawer .mobile-drawer-search__results {
	padding: 0 !important;
}

#site-discovery .mobile-drawer-search-result__age,
#mobile-nav-drawer .mobile-drawer-search-result__age {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-weight: 700;
}