.sl-smart-link {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
	font-family: inherit;
	--sl-accent: #111111;
	padding: 24px;
	border-radius: 8px;
	transition: background 0.2s ease;
}

/* Blurred cover-art background - the actual image is set via the
   --sl-bg-image custom property inline, this just handles the blur/scale. */
.sl-bg-blurred {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sl-bg-blurred::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image: var(--sl-bg-image);
	background-size: cover;
	background-position: center;
	filter: blur(35px) brightness(0.85);
	z-index: -1;
}

.sl-artwork img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 16px;
}

.sl-title {
	margin: 0 0 20px;
	font-size: 1.3em;
	font-weight: 600;
	color: var(--sl-text-color, #111);
}

.sl-artist {
	margin: -16px 0 20px;
	font-size: 0.858em; /* 66% of .sl-title's 1.3em */
	font-weight: 400;
	opacity: 0.75;
	color: var(--sl-text-color, #111);
}

.sl-tracklist {
	margin: 0 0 16px;
}

.sl-tracklist-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.85em;
	font-weight: 500;
	color: var(--sl-text-color, #111);
	opacity: 0.75;
	cursor: pointer;
	text-decoration: underline;
}

.sl-tracklist-toggle:hover {
	opacity: 1;
}

.sl-tracklist-items {
	margin: 10px 0 0;
	padding: 0 0 0 22px;
	text-align: left;
	font-size: 0.9em;
	color: var(--sl-text-color, #111);
}

.sl-tracklist-items li {
	margin-bottom: 4px;
}

.sl-tracklist-items[hidden] {
	display: none;
}

.sl-release-type-badge {
	display: inline-block;
	margin: 0 6px 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f0f0f0;
	color: #444;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.sl-presave-badge-inline {
	display: inline-block;
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #222;
	color: #fff;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.sl-platform-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sl-platform-item a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
	color: #111;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sl-platform-item a:hover {
	background: rgba(255, 255, 255, 0.8);
}

/* Custom accent mode: one chosen color (or gradient) applies to every
   platform button, in either outline or filled style, with an
   adjustable border thickness. Social icons deliberately don't get a
   border here - they're small round icon-only buttons, and adding a
   border made them grow in size and look cluttered; they still switch
   to a filled background in "filled" mode, just without the border. */
.sl-accent-custom .sl-platform-item a {
	border-width: var(--sl-accent-width, 1px);
	border-color: var(--sl-accent);
}

.sl-accent-custom.sl-accent-gradient .sl-platform-item a {
	border-style: solid;
	border-image: var(--sl-accent-gradient) 1;
}

.sl-accent-custom.sl-accent-filled .sl-platform-item a {
	background: var(--sl-accent-gradient, var(--sl-accent));
	color: #fff;
}

.sl-accent-custom.sl-accent-filled .sl-platform-item a:hover {
	filter: brightness(1.1);
}

.sl-accent-custom.sl-accent-filled .sl-social-item a {
	background: var(--sl-accent-gradient, var(--sl-accent));
	color: #fff;
}

/* Default mode (no custom accent set): each platform keeps its own
   recognizable brand color as the button outline. */
.sl-accent-default .sl-platform-item a {
	border-width: var(--sl-accent-width, 1px);
}

.sl-accent-default .sl-platform-spotify a { border-color: #1DB954; }
.sl-accent-default .sl-platform-appleMusic a { border-color: #fa243c; }
.sl-accent-default .sl-platform-itunes a,
.sl-accent-default .sl-platform-itunesStore a { border-color: #ea4cc0; }
.sl-accent-default .sl-platform-youtube a,
.sl-accent-default .sl-platform-youtubeMusic a { border-color: #ff0000; }
.sl-accent-default .sl-platform-deezer a { border-color: #a238ff; }
.sl-accent-default .sl-platform-tidal a { border-color: #000000; }
.sl-accent-default .sl-platform-soundcloud a { border-color: #ff5500; }
.sl-accent-default .sl-platform-bandcamp a { border-color: #1da0c3; }
.sl-accent-default .sl-platform-beatport a { border-color: #01ff95; }
.sl-accent-default .sl-platform-iheartradio a { border-color: #c6002b; }
.sl-accent-default .sl-platform-pandora a { border-color: #3668ff; }
.sl-accent-default .sl-platform-boomplay a { border-color: #ffa200; }
.sl-accent-default .sl-platform-anghami a { border-color: #ffdc00; }
.sl-accent-default .sl-platform-audiomack a { border-color: #ff8800; }
.sl-accent-default .sl-platform-napster a { border-color: #000000; }
.sl-accent-default .sl-platform-amazonMusic a,
.sl-accent-default .sl-platform-amazonStore a { border-color: #00a8e1; }
.sl-accent-default .sl-platform-junoMusic a { border-color: #f60; }
.sl-accent-default .sl-platform-qobuz a { border-color: #000000; }
.sl-accent-default .sl-platform-tencent a { border-color: #ffbd00; }

.sl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.sl-icon svg {
	width: 100%;
	height: 100%;
}

.sl-icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.sl-platform-label {
	flex: 1;
}

.sl-platform-item a:hover {
	background: #f5f5f5;
	border-color: #999;
}

/* Social icon row - round, icon-only buttons shown below the platform
   list on music links, or as the whole content of a standalone
   Social Link page. */
.sl-embed-player {
	margin: 0 0 20px;
	border-radius: 8px;
	overflow: hidden;
}

.sl-embed-player iframe {
	display: block;
	border: none;
}

/* Wraps logo/profile picture/social icon row together, so whichever
   combination is actually present gets identical, even spacing - no
   more margin-collapse guesswork depending on what's shown. */
.sl-social-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	width: 100%;
}

/* Flex items don't shrink below their content's natural width by
   default, which let a wide logo silently overflow the card and get
   clipped by .sl-bg-blurred's overflow:hidden - this forces every
   child to actually respect the container's width. */
.sl-social-block > * {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.sl-logo {
	width: 100%;
}

.sl-logo img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.sl-social-avatar img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.sl-social-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sl-social-item a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sl-social-icon-size, 40px);
	height: var(--sl-social-icon-size, 40px);
	border-radius: 50%;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #111;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.1s ease;
}

.sl-social-item a:hover {
	background: rgba(255, 255, 255, 0.8);
	transform: translateY(-1px);
}

.sl-social-item .sl-icon {
	width: calc(var(--sl-social-icon-size, 40px) * 0.45);
	height: calc(var(--sl-social-icon-size, 40px) * 0.45);
}

/* Optional social brand color accents on hover - adjust/remove to taste */
.sl-social-instagram a:hover { background: #E4405F; color: #fff; }
.sl-social-tiktok a:hover { background: #000; color: #fff; }
.sl-social-facebook a:hover { background: #1877F2; color: #fff; }
.sl-social-x a:hover { background: #000; color: #fff; }
.sl-social-youtube a:hover { background: #ff0000; color: #fff; }
.sl-social-threads a:hover { background: #000; color: #fff; }
.sl-social-snapchat a:hover { background: #FFFC00; color: #000; }
.sl-social-twitch a:hover { background: #9146FF; color: #fff; }
.sl-social-discord a:hover { background: #5865F2; color: #fff; }
.sl-social-telegram a:hover { background: #26A5E4; color: #fff; }
.sl-social-pinterest a:hover { background: #E60023; color: #fff; }
.sl-social-whatsapp a:hover { background: #25D366; color: #fff; }
.sl-social-patreon a:hover { background: #FF424D; color: #fff; }

/* Standalone Social Link page: slightly larger, circular avatar */
.sl-social-only .sl-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 16px;
}

/* -----------------------------------------------------------------
 * Release catalog [songfetch_catalog]
 * ---------------------------------------------------------------- */
.sl-catalog-heading {
	max-width: 1100px;
	margin: 0 auto 20px;
	text-align: center;
}

.sl-catalog-filters {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto 20px;
}

.sl-catalog-filters select {
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 0.9em;
}

.sl-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	justify-content: center;
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
}

.sl-catalog-item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sl-catalog-item[hidden] {
	display: none;
}

.sl-catalog-featured-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sl-catalog-featured-row .sl-catalog-item {
	flex: 1 1 calc(var(--sl-catalog-item-scale, 1.6) * 160px);
	max-width: calc(var(--sl-catalog-item-scale, 1.6) * 220px);
}

.sl-catalog-featured-row .sl-catalog-title {
	font-size: calc(1em * var(--sl-catalog-item-scale, 1.6) / 1.3);
}

.sl-catalog-featured-row .sl-catalog-artist {
	font-size: calc(0.82em * var(--sl-catalog-item-scale, 1.6) / 1.3);
}

.sl-catalog-art {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #eee;
	margin-bottom: 8px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sl-catalog-item:hover .sl-catalog-art {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.sl-catalog-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sl-catalog-art-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ddd, #eee);
}

.sl-catalog-title {
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.3;
}

.sl-catalog-artist {
	font-size: 0.82em;
	opacity: 0.7;
	margin-top: 2px;
}

.sl-catalog-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}

.sl-catalog-modal[hidden] {
	display: none;
}

body.sl-catalog-modal-open {
	overflow: hidden;
}

.sl-catalog-modal-inner {
	position: relative;
	max-width: 460px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	padding: 24px;
}

.sl-catalog-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #f0f0f1;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.sl-catalog-modal-content .sl-smart-link {
	max-width: 100%;
}

.sl-catalog-loading {
	text-align: center;
	color: #888;
	padding: 40px 0;
}

/* -----------------------------------------------------------------
 * Hide the theme's own page title on a Songfetch link's real page -
 * the smart-link card already shows the title and artist itself, so
 * the theme's title above it is redundant. Targets GeneratePress's
 * standard title markup plus common fallbacks used by other themes,
 * scoped to smart_link's single template only (WordPress's own
 * auto-added "single-smart_link" body class) so nothing else on the
 * site is affected.
 * ---------------------------------------------------------------- */
body.single-smart_link .entry-header .entry-title,
body.single-smart_link .page-header .entry-title,
body.single-smart_link h1.entry-title,
body.single-smart_link .entry-title {
	display: none;
}