/*
 * Music Experiences system and recovery pages.
 */

:root {
	--me-system-ink: #272128;
	--me-system-muted: #716a72;
	--me-system-line: #e8e2e8;
	--me-system-soft: #f7f4f6;
	--me-system-accent: #f23d76;
}

.me-system-page {
	padding: 88px 24px 104px !important;
	background: linear-gradient(180deg, #fff 0%, #fbf8fa 100%) !important;
}

.me-system-page-inner {
	max-width: 760px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

.me-system-eyebrow {
	margin: 0 0 13px !important;
	color: var(--me-system-accent) !important;
	font-size: 12px !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: .12em !important;
}

.me-system-page h1 {
	max-width: 700px !important;
	margin: 0 auto 18px !important;
	color: var(--me-system-ink) !important;
	font-size: clamp(40px, 6vw, 64px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.05em !important;
	text-wrap: balance !important;
}

.me-system-lede {
	max-width: 650px !important;
	margin: 0 auto 34px !important;
	color: var(--me-system-muted) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	text-wrap: balance !important;
}

.me-system-search {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: 10px !important;
	max-width: 650px !important;
	margin: 0 auto 24px !important;
	padding: 7px !important;
	border: 1px solid var(--me-system-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 12px 34px rgba(31,22,32,.08) !important;
}

.me-system-search input[type='search'] {
	width: 100% !important;
	min-width: 0 !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--me-system-ink) !important;
	font-size: 16px !important;
}

.me-system-search button {
	min-width: 104px !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--me-system-accent) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 850 !important;
}

.me-system-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 0 auto !important;
}

.me-system-actions a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: 11px 17px !important;
	border-radius: 11px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
}

.me-system-primary {
	border: 1px solid var(--me-system-accent) !important;
	background: var(--me-system-accent) !important;
	color: #fff !important;
}

.me-system-secondary {
	border: 1px solid #dcd5dc !important;
	background: #fff !important;
	color: var(--me-system-ink) !important;
}

.me-system-help {
	margin: 30px 0 0 !important;
	color: var(--me-system-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.me-system-help a {
	color: var(--me-system-accent) !important;
	font-weight: 750 !important;
}

/* Restyle Listeo's native 404 in-place; this works with the parent template hierarchy. */
body.error404 #titlebar {
	display: none !important;
}

body.error404 #not-found {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 88px 24px 96px !important;
	text-align: center !important;
}

body.error404 #not-found > h2 {
	margin: 0 auto 18px !important;
	color: var(--me-system-ink) !important;
	font-size: clamp(40px, 6vw, 64px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.05em !important;
	text-wrap: balance !important;
}

body.error404 #not-found > h2 i {
	display: none !important;
}

body.error404 #not-found > p {
	max-width: 650px !important;
	margin: 0 auto !important;
	color: var(--me-system-muted) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
}

body.error404 #not-found .search-form .main-search-input {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: 8px !important;
	max-width: 650px !important;
	margin: 32px auto 20px !important;
	padding: 7px !important;
	border: 1px solid var(--me-system-line) !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 12px 34px rgba(31,22,32,.08) !important;
}

body.error404 #not-found .main-search-input-item {
	min-width: 0 !important;
	border: 0 !important;
}

body.error404 #not-found .search-form input[type='text'] {
	width: 100% !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px !important;
}

body.error404 #not-found .search-form button {
	min-width: 104px !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border-radius: 11px !important;
}

body.error404 .me-404-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 0 auto !important;
}

body.error404 .me-404-actions a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 46px !important;
	padding: 10px 16px !important;
	border: 1px solid #ddd6dd !important;
	border-radius: 11px !important;
	background: #fff !important;
	color: var(--me-system-ink) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

body.error404 .me-404-actions a:first-child {
	border-color: var(--me-system-accent) !important;
	background: var(--me-system-accent) !important;
	color: #fff !important;
}

body.error404 .me-404-help {
	margin: 26px 0 0 !important;
	color: var(--me-system-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

body.error404 .me-404-help a {
	color: var(--me-system-accent) !important;
	font-weight: 750 !important;
}

@media (max-width: 767px) {
	.me-system-page {
		padding: 58px 16px 72px !important;
	}

	.me-system-page h1 {
		font-size: 39px !important;
		line-height: 1.04 !important;
	}

	.me-system-lede {
		font-size: 16px !important;
	}

	.me-system-search {
		grid-template-columns: 1fr !important;
		padding: 7px !important;
	}

	.me-system-search button {
		width: 100% !important;
	}

	.me-system-actions {
		flex-direction: column !important;
	}

	.me-system-actions a {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	body.error404 #not-found {
		padding: 58px 0 70px !important;
	}

	body.error404 #not-found > h2 {
		font-size: 39px !important;
		line-height: 1.04 !important;
	}

	body.error404 #not-found > p {
		font-size: 16px !important;
	}

	body.error404 #not-found .search-form .main-search-input {
		grid-template-columns: 1fr !important;
		margin-top: 28px !important;
	}

	body.error404 #not-found .search-form button {
		width: 100% !important;
	}

	body.error404 .me-404-actions {
		flex-direction: column !important;
	}

	body.error404 .me-404-actions a {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}