/*
============================================================
LYRICSGROOVE
PREMIUM SINGLE ALBUM — MASTER CSS
FIXED / CLEAN VERSION
============================================================

IMPORTANT:
This file contains CSS ONLY.

Do not paste this CSS into single-album.php.
============================================================
*/


/* =========================================================
   01 — ROOT / RESET
========================================================= */

.lg-single-album,
.lg-single-album * {
	box-sizing: border-box;
}


.lg-single-album {
	position: relative !important;

	width: 100vw !important;
	max-width: none !important;

	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding:
		0
		34px
		80px !important;

	color: #252943;

	background:
		linear-gradient(
			180deg,
			#fafaff 0%,
			#f6f5fb 52%,
			#fafaff 100%
		);

	overflow: visible !important;
}


.lg-single-album a {
	text-decoration: none;
}


.lg-single-album img {
	max-width: 100%;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

.lg-single-album-container {
	width: 100% !important;
	max-width: none !important;

	margin: 0 auto !important;
	padding: 0 !important;
}


/* =========================================================
   03 — BREADCRUMB
========================================================= */

.lg-album-breadcrumb {
	display: flex;

	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	min-height: 58px;

	gap: 10px;

	padding:
		10px
		2px;

	color: #85889f;

	font-size: 12px;
	font-weight: 700;

	line-height: 1.2;
}


.lg-album-breadcrumb a {
	color: #85889f;

	transition:
		color .2s ease;
}


.lg-album-breadcrumb a:hover {
	color: #7043e5;
}


.lg-album-breadcrumb strong {
	color: #15182f;
	font-weight: 900;
}


.lg-album-breadcrumb > span {
	color: #b7b5c6;
}


.lg-breadcrumb-home {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	color: #777b98;
}


.lg-breadcrumb-home svg {
	width: 18px;
	height: 18px;
}


/* =========================================================
   04 — HERO
========================================================= */

.lg-album-hero {
	position: relative;

	display: grid !important;

	grid-template-columns:
		440px
		minmax(0, 1fr)
		330px;

	align-items: stretch;

	width: 100% !important;

	height: 485px !important;
	min-height: 485px !important;

	overflow: hidden;

	border:
		1px solid rgba(112,82,207,.18);

	border-radius: 30px;

	background:
		linear-gradient(
			105deg,
			rgba(255,236,249,.96) 0%,
			rgba(248,241,255,.94) 42%,
			rgba(231,226,255,.94) 100%
		);

	box-shadow:
		0 30px 80px rgba(56,39,123,.12),
		0 8px 25px rgba(56,39,123,.07);

	isolation: isolate;
}


/* =========================================================
   05 — ARTWORK BACKDROP
========================================================= */

.lg-album-hero::before {
	content: "";

	position: absolute;

	inset: -80px;

	z-index: -5;

	background:
		linear-gradient(
			90deg,
			rgba(255,226,246,.94),
			rgba(239,232,255,.78)
		),
		var(--lg-album-art);

	background-size:
		cover,
		cover;

	background-position:
		center,
		center;

	filter:
		blur(30px)
		saturate(1.35);

	opacity: .54;

	transform:
		scale(1.14);

	pointer-events: none;
}


.lg-album-hero::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: -4;

	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(255,61,190,.22),
			transparent 27%
		),
		radial-gradient(
			circle at 67% 8%,
			rgba(112,75,255,.24),
			transparent 31%
		),
		radial-gradient(
			circle at 94% 75%,
			rgba(83,74,255,.18),
			transparent 30%
		);

	pointer-events: none;
}


/* =========================================================
   06 — HERO ART
========================================================= */

.lg-album-hero-art {
	position: relative;

	width: 440px;
	height: 485px;

	z-index: 5;
}


.lg-album-cover-wrap {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 440px;
	height: 485px;

	z-index: 5;
}


/* =========================================================
   07 — COVER GLOW
========================================================= */

.lg-album-cover-wrap::before {
	content: "";

	position: absolute;

	width: 390px;
	height: 390px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(111,62,255,.28),
			rgba(230,48,176,.12) 42%,
			transparent 70%
		);

	filter:
		blur(24px);

	animation:
		lgCoverAura 5s ease-in-out infinite;

	pointer-events: none;
}


@keyframes lgCoverAura {

	0%,
	100% {
		transform: scale(.94);
		opacity: .72;
	}

	50% {
		transform: scale(1.07);
		opacity: 1;
	}
}


/* =========================================================
   08 — ALBUM COVER
========================================================= */

.lg-album-cover {
	position: relative;

	z-index: 3;

	width: 375px;
	height: 375px;

	min-width: 375px;
	min-height: 375px;

	padding: 7px;

	border-radius: 30px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.98),
			rgba(255,255,255,.82)
		);

	border:
		1px solid rgba(255,255,255,.98);

	box-shadow:
		0 35px 90px rgba(41,27,98,.25),
		0 10px 30px rgba(41,27,98,.13),
		0 0 0 1px rgba(112,75,217,.08);

	transition:
		transform .5s cubic-bezier(.2,.8,.2,1),
		box-shadow .5s ease;
}


.lg-album-cover:hover {
	transform:
		translateY(-9px)
		scale(1.018);

	box-shadow:
		0 45px 105px rgba(41,27,98,.30),
		0 15px 40px rgba(41,27,98,.16),
		0 0 0 1px rgba(112,75,217,.13);
}


.lg-album-cover img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 24px;

	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.35);

	transition:
		transform .7s cubic-bezier(.2,.8,.2,1);
}


.lg-album-cover:hover img {
	transform: scale(1.025);
}


.lg-album-cover-fallback {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	border-radius: 24px;

	color: #7043e5;

	background: #f0ebff;

	font-size: 80px;
}


/* =========================================================
   09 — RATING BADGE
========================================================= */

.lg-album-rating-badge {
	position: absolute;

	left: 35px;
	top: 45px;

	display: flex;

	align-items: center;

	gap: 7px;

	min-height: 45px;

	padding:
		0
		14px;

	border:
		1px solid rgba(255,255,255,.92);

	border-radius: 14px;

	color: #49376f;

	background: rgba(255,255,255,.94);

	box-shadow:
		0 12px 30px rgba(42,27,98,.13);

	backdrop-filter:
		blur(15px);

	z-index: 10;
}


.lg-album-rating-badge > span {
	color: #f0ad24;
	font-size: 15px;
}


.lg-album-rating-badge strong {
	font-size: 13px;
	font-weight: 950;
}


.lg-album-rating-badge small {
	color: #8a819e;

	font-size: 8px;
	font-weight: 800;
}


/* =========================================================
   10 — TRACK BADGE
========================================================= */

.lg-album-track-badge {
	position: absolute;

	left: 35px;
	bottom: 52px;

	display: flex;

	align-items: center;

	gap: 8px;

	min-height: 50px;

	padding:
		0
		18px;

	border:
		1px solid rgba(255,255,255,.85);

	border-radius: 15px;

	color: #4a3970;

	background:
		rgba(255,255,255,.95);

	box-shadow:
		0 15px 35px rgba(42,27,98,.16);

	backdrop-filter:
		blur(16px);

	font-size: 10px;
	font-weight: 900;

	z-index: 10;
}


.lg-album-track-badge svg {
	width: 17px;
	height: 17px;

	color: #7043e5;
}


/* =========================================================
   11 — HERO CONTENT
========================================================= */

.lg-album-hero-content {
	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: center;

	height: 485px;

	padding:
		48px
		28px
		42px
		20px;

	z-index: 5;
}


.lg-album-hero-content::before {
	content:
		"♪     ♫        ◇          ♪          ♢       ♫";

	position: absolute;

	top: 27px;
	right: 350px;

	z-index: -1;

	color: rgba(103,67,224,.12);

	font-size: 32px;
	font-weight: 900;

	letter-spacing: 20px;

	white-space: nowrap;

	transform:
		rotate(-7deg);

	animation:
		lgHeroNotes 12s linear infinite;

	pointer-events: none;
}


@keyframes lgHeroNotes {

	0% {
		transform:
			translate3d(0,0,0)
			rotate(-7deg);
	}

	50% {
		transform:
			translate3d(-35px,14px,0)
			rotate(-4deg);
	}

	100% {
		transform:
			translate3d(0,0,0)
			rotate(-7deg);
	}
}


.lg-album-hero-content::after {
	content:
		"✦   ◇   ✧";

	position: absolute;

	right: 130px;
	bottom: 34px;

	color: rgba(225,42,170,.11);

	font-size: 52px;

	letter-spacing: 20px;

	transform:
		rotate(8deg);

	animation:
		lgHeroFloat 7s ease-in-out infinite;

	pointer-events: none;
}


@keyframes lgHeroFloat {

	0%,
	100% {
		transform:
			translateY(0)
			rotate(8deg);
	}

	50% {
		transform:
			translateY(-12px)
			rotate(12deg);
	}
}


/* =========================================================
   PREMIUM ALBUM KICKER — GRADIENT / WHITE ICON + TEXT
========================================================= */

.lg-album-kicker {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	align-self: flex-start !important;

	min-width: 125px !important;
	height: 42px !important;

	margin-bottom: 24px !important;

	padding: 0 22px !important;

	gap: 8px !important;

	border: 1px solid rgba(255,255,255,.42) !important;

	border-radius: 999px !important;

	color: #ffffff !important;

	background:
		linear-gradient(
			135deg,
			#e92fb0 0%,
			#a33de7 52%,
			#5b4df2 100%
		) !important;

	box-shadow:
		0 10px 25px rgba(126,52,218,.24),
		0 0 22px rgba(211,48,180,.12),
		inset 0 1px 0 rgba(255,255,255,.42) !important;

	font-size: 11px !important;
	font-weight: 950 !important;

	letter-spacing: .09em !important;

	line-height: 1 !important;

	white-space: nowrap !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		filter .25s ease !important;
}


/* WHITE MUSIC ICON */

.lg-album-kicker span {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;

	color: #ffffff !important;

	font-size: 17px !important;
	font-weight: 900 !important;

	line-height: 1 !important;

	filter:
		drop-shadow(
			0 2px 4px rgba(0,0,0,.14)
		) !important;
}


/* WHITE TEXT — FORCE */

.lg-album-kicker {
	-webkit-text-fill-color: #ffffff !important;
}


/* PREMIUM HOVER */

.lg-album-kicker:hover {
	transform: translateY(-3px) !important;

	filter: brightness(1.06) !important;

	box-shadow:
		0 16px 34px rgba(126,52,218,.32),
		0 0 28px rgba(211,48,180,.18),
		inset 0 1px 0 rgba(255,255,255,.52) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.lg-album-kicker {
		min-width: 115px !important;

		height: 40px !important;

		padding:
			0 19px !important;

		font-size: 10px !important;
	}

	.lg-album-kicker span {
		font-size: 16px !important;
	}

}

/* =========================================================
   13 — TITLE
========================================================= */

.lg-album-title {
	max-width: 760px;

	margin:
		0
		0
		24px;

	color: #10142f;

	font-size:
		clamp(
			58px,
			4.4vw,
			78px
		);

	font-weight: 950;

	line-height: .96;

	letter-spacing: -.06em;
}


.lg-album-title > span {
	display: inline-block;

	margin-left: 12px;

	color: #6f43e7;

	font-size: .38em;

	font-weight: 900;

	letter-spacing: -.02em;
}


/* =========================================================
   14 — ARTIST
========================================================= */

.lg-album-artist-row {
	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 24px;
}


.lg-album-artist-avatar {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	flex:
		0 0 60px;

	overflow: hidden;

	border:
		3px solid #ffffff;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#ff35b4,
			#7043e5
		);

	box-shadow:
		0 10px 28px rgba(73,48,143,.18),
		0 0 0 2px rgba(112,67,229,.08);
}


.lg-album-artist-avatar img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


.lg-album-artist-avatar > span {
	color: #ffffff;

	font-size: 23px;
	font-weight: 900;
}


.lg-album-artist-details {
	min-width: 0;
}


.lg-album-artist-name {
	display: flex;

	align-items: center;

	gap: 8px;
}


.lg-album-artist-name a {
	color: #15182f;

	font-size: 20px;
	font-weight: 950;
}


.lg-album-artist-name a:hover {
	color: #7043e5;
}


/* =========================================================
   15 — VERIFIED BADGE
========================================================= */

.lg-verified-badge {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 20px;
	height: 20px;

	flex:
		0 0 20px;

	color: #2587f5;

	opacity: 1;
	visibility: visible;
}


.lg-verified-badge svg {
	display: block;

	width: 20px;
	height: 20px;

	overflow: visible;
}


.lg-album-artist-type {
	display: block;

	margin-top: 5px;

	color: #777b94;

	font-size: 11px;
	font-weight: 750;
}


/* =========================================================
   16 — HERO ACTIONS
========================================================= */

.premium-album-actions {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 10px;

	margin-top: 3px;
}


.lg-hero-action {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 52px;

	padding:
		0
		17px;

	border-radius: 14px;

	text-decoration: none !important;

	font-size: 10px;
	font-weight: 900;

	overflow: hidden;

	cursor: pointer;

	transition:
		transform .25s cubic-bezier(.2,.8,.2,1),
		box-shadow .25s ease,
		border-color .25s ease;
}


.lg-hero-action:hover {
	transform:
		translateY(-4px);
}


.lg-hero-action-primary {
	color: #ffffff !important;

	border:
		1px solid transparent;

	background:
		linear-gradient(
			135deg,
			#e62dad 0%,
			#8b40e8 50%,
			#5148ec 100%
		);

	box-shadow:
		0 13px 30px rgba(100,49,218,.27);
}


.lg-hero-action-primary:hover {
	box-shadow:
		0 20px 42px rgba(100,49,218,.34);
}


.lg-hero-action-primary::before {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			105deg,
			transparent 20%,
			rgba(255,255,255,.28) 48%,
			transparent 72%
		);

	transform:
		translateX(-130%);

	transition:
		transform .6s ease;
}


.lg-hero-action-primary:hover::before {
	transform:
		translateX(130%);
}


.lg-hero-action-stat,
.lg-hero-action-views {
	color: #423478;

	border:
		1px solid rgba(106,75,195,.16);

	background:
		rgba(255,255,255,.82);

	box-shadow:
		0 8px 22px rgba(53,37,108,.07);

	backdrop-filter:
		blur(14px);
}


.lg-hero-action-stat:hover,
.lg-hero-action-views:hover {
	border-color:
		rgba(106,75,195,.32);

	background:
		#ffffff;

	box-shadow:
		0 15px 30px rgba(53,37,108,.11);
}


.lg-hero-action-stat strong,
.lg-hero-action-views strong {
	color: #171936;

	font-size: 15px;
	font-weight: 950;
}


.lg-action-icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 9px;

	color: #7043e5;

	background: #f0ebff;

	font-size: 13px;
}


.lg-action-icon svg {
	width: 17px;
	height: 17px;
}


.lg-action-arrow {
	font-size: 13px;
	font-weight: 950;
}


/* =========================================================
   17 — DETAILS CARD
========================================================= */

.lg-album-details-card {
	align-self: center;

	width: 300px;
	min-height: 410px;

	margin:
		0
		24px
		0
		0;

	padding: 20px;

	border:
		1px solid rgba(255,255,255,.12);

	border-radius: 24px;

	/*
	 * Solid premium background.
	 * No gradient.
	 */

	background: #17112f;

	box-shadow:
		0 28px 60px rgba(37,22,88,.27),
		inset 0 1px 0 rgba(255,255,255,.08);

	color: #ffffff;

	overflow: hidden;

	position: relative;

	z-index: 20;
}


/* subtle solid-color accent */

.lg-album-details-card::before {
	content: "";

	position: absolute;

	width: 220px;
	height: 220px;

	right: -100px;
	top: -100px;

	border-radius: 50%;

	background:
		rgba(126,82,232,.18);

	filter:
		blur(35px);

	pointer-events: none;
}


.lg-album-details-card::after {
	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

	left: -110px;
	bottom: -110px;

	border-radius: 50%;

	background:
		rgba(231,46,180,.12);

	filter:
		blur(30px);

	pointer-events: none;
}


/* =========================================================
   18 — META HEADER
========================================================= */

.lg-meta-card-header {
	position: relative;

	z-index: 2;

	padding-bottom: 14px;

	margin-bottom: 3px;

	border-bottom:
		1px solid rgba(255,255,255,.10);
}


.lg-meta-card-eyebrow {
	margin-bottom: 6px;

	color: rgba(255,255,255,.48);

	font-size: 8px;
	font-weight: 900;

	letter-spacing: .13em;
}


.lg-meta-card-title {
	overflow: hidden;

	color: #ffffff;

	font-size: 16px;
	font-weight: 950;

	text-overflow: ellipsis;

	white-space: nowrap;
}


/* =========================================================
   19 — META LIST
========================================================= */

.lg-meta-list {
	position: relative;

	z-index: 2;
}


.lg-meta-item {
	display: flex;

	align-items: center;

	gap: 12px;

	min-height: 66px;

	border-bottom:
		1px solid rgba(255,255,255,.085);
}


.lg-meta-item:last-child {
	border-bottom: 0;
}


.lg-meta-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 38px;

	width: 38px;
	height: 38px;

	border:
		1px solid rgba(255,255,255,.08);

	border-radius: 12px;

	color: #c19aff;

	background:
		rgba(255,255,255,.075);

	font-size: 16px;

	transition:
		transform .25s ease,
		background .25s ease;
}


.lg-meta-item:hover .lg-meta-icon {
	transform:
		scale(1.08)
		rotate(-4deg);

	background:
		rgba(158,99,255,.18);
}


.lg-meta-icon svg {
	width: 18px;
	height: 18px;
}


.lg-meta-content {
	min-width: 0;

	flex: 1;
}


.lg-meta-content span {
	display: block;

	margin-bottom: 5px;

	color: rgba(255,255,255,.46);

	font-size: 8px;
	font-weight: 750;
}


.lg-meta-content strong {
	display: block;

	overflow: hidden;

	color: #ffffff;

	font-size: 11px;
	font-weight: 900;

	line-height: 1.25;

	text-overflow: ellipsis;

	white-space: nowrap;
}


/* =========================================================
   20 — ARTIST LINK
========================================================= */

.lg-meta-artist-link {
	position: relative;

	z-index: 3;

	display: flex;

	align-items: center;
	justify-content: space-between;

	margin-top: 15px;

	min-height: 43px;

	padding:
		0
		13px;

	border:
		1px solid rgba(255,255,255,.10);

	border-radius: 11px;

	color: #ffffff !important;

	background:
		rgba(255,255,255,.07);

	font-size: 9px;
	font-weight: 850;

	transition:
		transform .25s ease,
		background .25s ease;
}


.lg-meta-artist-link:hover {
	transform:
		translateY(-2px);

	background:
		rgba(255,255,255,.13);
}


.lg-meta-artist-link strong {
	color: #c99cff;

	font-size: 15px;
}


/* =========================================================
   21 — CONTENT GRID
========================================================= */

.lg-album-content-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.65fr)
		minmax(310px, .65fr);

	gap: 14px;

	width: 100%;

	margin-top: 14px;
}


/* =========================================================
   22 — TRACKLIST CARD
========================================================= */

.lg-tracklist-section {
	min-width: 0;

	padding:
		24px;

	border:
		1px solid rgba(92,76,150,.11);

	border-radius: 22px;

	background: #ffffff;

	box-shadow:
		0 18px 50px rgba(38,28,88,.055);
}


.lg-section-heading {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	margin-bottom: 18px;
}


.lg-section-heading > div:first-child {
	display: flex;

	align-items: center;

	gap: 9px;
}


.lg-section-icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	border-radius: 10px;

	color: #7043e5;

	background: #f0ebff;

	font-size: 16px;
}


.lg-section-heading h2 {
	margin: 0;

	color: #171a34;

	font-size: 19px;
	font-weight: 950;
}


.lg-total-duration {
	display: flex;

	align-items: center;

	gap: 8px;
}


.lg-total-duration span {
	color: #8a8da2;

	font-size: 9px;
	font-weight: 750;
}


.lg-total-duration strong {
	color: #5f3fbe;

	font-size: 11px;
	font-weight: 950;
}


/* =========================================================
   23 — TRACKLIST GRID
========================================================= */

.lg-tracklist-grid {
	display: grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap: 14px;
}


.lg-track-column {
	min-width: 0;
}


.lg-track-row {
	display: grid;

	grid-template-columns:
		34px
		38px
		minmax(0,1fr)
		50px
		100px;

	align-items: center;

	gap: 8px;

	min-height: 60px;

	padding:
		7px
		8px;

	border-bottom:
		1px solid #efedf5;

	border-radius: 12px;

	transition:
		background .2s ease,
		transform .2s ease;
}


.lg-track-row:hover {
	background: #faf9ff;

	transform:
		translateX(3px);
}


.lg-track-number {
	color: #9a9caf;

	font-size: 10px;
	font-weight: 900;
}


.lg-track-play {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	border-radius: 10px;

	color: #7043e5;

	background: #f1edff;

	font-size: 10px;

	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}


.lg-track-play:hover {
	color: #ffffff;

	background: #7043e5;

	transform:
		scale(1.05);
}


.lg-track-title {
	min-width: 0;
}


.lg-track-title a {
	display: block;

	overflow: hidden;

	color: #24273d;

	font-size: 11px;
	font-weight: 850;

	line-height: 1.3;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.lg-track-title a:hover {
	color: #7043e5;
}


.lg-track-duration {
	color: #8b8da0;

	font-size: 9px;
	font-weight: 750;

	text-align: right;
}


.lg-read-lyrics-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 5px;

	min-width: 96px;
	height: 34px;

	padding:
		0
		9px;

	border:
		1px solid rgba(112,67,229,.13);

	border-radius: 9px;

	color: #7043e5 !important;

	background: #f8f6ff;

	font-size: 8px;
	font-weight: 900;

	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}


.lg-read-lyrics-button:hover {
	color: #ffffff !important;

	background: #7043e5;

	transform:
		translateY(-2px);
}


/* =========================================================
   24 — EMPTY TRACKLIST
========================================================= */

.lg-tracklist-empty {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-height: 250px;

	padding: 30px;

	text-align: center;
}


.lg-empty-note {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin-bottom: 12px;

	border-radius: 50%;

	color: #7044df;

	background: #f2eeff;

	font-size: 19px;
}


.lg-tracklist-empty h3 {
	margin:
		0
		0
		6px;

	color: #272a40;

	font-size: 14px;
	font-weight: 900;
}


.lg-tracklist-empty p {
	max-width: 360px;

	margin: 0;

	color: #85889e;

	font-size: 10px;

	line-height: 1.55;
}


/* =========================================================
   25 — VIEW ALL
========================================================= */

.lg-view-all-lyrics {
	display: flex;

	justify-content: center;

	margin-top: 18px;
}


.lg-view-all-lyrics a {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	min-height: 42px;

	padding:
		0
		16px;

	border-radius: 12px;

	color: #7043e5 !important;

	background: #f6f3ff;

	font-size: 9px;
	font-weight: 900;

	transition:
		transform .2s ease,
		background .2s ease;
}


.lg-view-all-lyrics a:hover {
	transform:
		translateY(-2px);

	background: #eee9ff;
}


/* =========================================================
   26 — SIDEBAR
========================================================= */

.lg-album-sidebar {
	display: flex;

	flex-direction: column;

	gap: 14px;

	min-width: 0;
}


.lg-about-album,
.lg-highlights-section {
	min-width: 0;

	padding:
		21px;

	border:
		1px solid rgba(92,76,150,.11);

	border-radius: 20px;

	background: #ffffff;

	box-shadow:
		0 18px 50px rgba(38,28,88,.055);
}


/* =========================================================
   27 — ABOUT
========================================================= */

.lg-about-heading {
	display: flex;

	align-items: center;

	gap: 9px;

	margin-bottom: 13px;
}


.lg-about-quote {
	color: #e52cae;

	font-size: 32px;
	font-weight: 950;

	line-height: .7;
}


.lg-about-heading h2 {
	margin: 0;

	color: #171a34;

	font-size: 16px;
	font-weight: 950;
}


.lg-about-text {
	color: #656981;

	font-size: 10px;

	line-height: 1.7;
}


.lg-about-text p {
	margin:
		0
		0
		10px;
}


.lg-about-text p:last-child {
	margin-bottom: 0;
}


.lg-about-placeholder {
	margin: 0;

	color: #85889e;

	font-size: 10px;

	line-height: 1.6;
}


/* =========================================================
   28 — TAGS
========================================================= */

.lg-album-tags {
	display: flex;

	flex-wrap: wrap;

	gap: 6px;

	margin-top: 15px;
}


.lg-album-tags span {
	display: inline-flex;

	align-items: center;

	min-height: 24px;

	padding:
		0
		8px;

	border-radius: 999px;

	color: #7043e5;

	background: #f3efff;

	font-size: 8px;
	font-weight: 850;
}


/* =========================================================
   29 — HIGHLIGHTS
========================================================= */

.lg-sidebar-section-heading {
	display: flex;

	align-items: center;

	gap: 8px;

	margin-bottom: 14px;
}


.lg-sidebar-section-heading > span {
	color: #e52cae;

	font-size: 18px;
}


.lg-sidebar-section-heading h2 {
	margin: 0;

	color: #171a34;

	font-size: 15px;
	font-weight: 950;
}


.lg-highlight-grid {
	display: grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap: 8px;
}


.lg-highlight-item {
	display: flex;

	align-items: center;

	gap: 8px;

	min-width: 0;

	min-height: 62px;

	padding:
		9px;

	border:
		1px solid #eeeaf7;

	border-radius: 12px;

	background: #fbfaff;
}


.lg-highlight-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 30px;

	width: 30px;
	height: 30px;

	border-radius: 9px;

	color: #7043e5;

	background: #f0ebff;

	font-size: 14px;
}


.lg-highlight-item > div:last-child {
	min-width: 0;
}


.lg-highlight-item strong {
	display: block;

	overflow: hidden;

	color: #24273d;

	font-size: 11px;
	font-weight: 950;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.lg-highlight-item span {
	display: block;

	margin-top: 2px;

	color: #85889e;

	font-size: 8px;
	font-weight: 750;
}


/* =========================================================
   30 — LOWER GRID
========================================================= */

.lg-album-lower-grid {
	display: grid;

	grid-template-columns:
		1.15fr
		1fr
		.95fr;

	gap: 14px;

	width: 100%;

	margin-top: 14px;
}


.lg-album-collection,
.lg-listen-section {
	min-width: 0;
	min-height: 270px;

	padding:
		21px
		22px;

	overflow: hidden;

	border:
		1px solid rgba(92,76,150,.11);

	border-radius: 20px;

	background: #ffffff;

	box-shadow:
		0 18px 50px rgba(38,28,88,.055);
}


/* =========================================================
   31 — COLLECTION HEADING
========================================================= */

.lg-collection-heading {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 10px;

	margin-bottom: 17px;
}


.lg-collection-heading > div {
	display: flex;

	align-items: center;

	gap: 9px;

	min-width: 0;
}


.lg-collection-heading > div > span {
	color: #e52cae;

	font-size: 19px;
}


.lg-collection-heading h2 {
	margin: 0;

	overflow: hidden;

	color: #171a34;

	font-size: 15px;
	font-weight: 950;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.lg-collection-heading > a {
	color: #7043e5;

	font-size: 9px;
	font-weight: 900;

	white-space: nowrap;
}


.lg-collection-heading > a:hover {
	color: #e52cae;
}


/* =========================================================
   32 — MINI ALBUMS
========================================================= */

.lg-album-mini-grid {
	display: grid;

	grid-template-columns:
		repeat(5,minmax(0,1fr));

	gap: 11px;
}


.lg-mini-album-card {
	display: block;

	min-width: 0;

	color: inherit;
}


.lg-mini-album-image {
	position: relative;

	aspect-ratio: 1 / 1;

	width: 100%;

	overflow: hidden;

	border-radius: 10px;

	background: #efedf6;

	box-shadow:
		0 5px 14px rgba(42,30,94,.08);

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}


.lg-mini-album-card:hover .lg-mini-album-image {
	transform:
		translateY(-5px);

	box-shadow:
		0 14px 28px rgba(42,30,94,.14);
}


.lg-mini-album-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .4s ease;
}


.lg-mini-album-card:hover img {
	transform:
		scale(1.06);
}


.lg-mini-album-card strong {
	display: block;

	overflow: hidden;

	margin-top: 8px;

	color: #25283e;

	font-size: 9px;
	font-weight: 900;

	line-height: 1.2;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.lg-mini-album-card span {
	display: block;

	margin-top: 3px;

	overflow: hidden;

	color: #85889e;

	font-size: 8px;
	font-weight: 750;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.lg-collection-empty {
	color: #85889e;

	font-size: 10px;

	line-height: 1.5;
}


/* =========================================================
   33 — LISTEN ON
========================================================= */

.lg-listen-section > p {
	margin:
		0
		16px;

	color: #777b94;

	font-size: 10px;

	line-height: 1.6;
}


.lg-streaming-grid {
	display: grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap: 8px;
}


.lg-streaming-button {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	min-height: 40px;

	padding:
		0
		8px;

	border-radius: 10px;

	color: #292c43 !important;

	background: #f7f6fb;

	font-size: 9px;
	font-weight: 900;

	transition:
		transform .2s ease,
		background .2s ease;
}


.lg-streaming-button:hover {
	transform:
		translateY(-2px);

	background: #eeebf9;
}


.lg-streaming-button span {
	font-size: 12px;
}


.lg-streaming-button.spotify span {
	color: #1db954;
}


.lg-streaming-button.apple span {
	color: #111111;
}


.lg-streaming-button.youtube span {
	color: #ff0000;
}


.lg-streaming-button.melon span {
	color: #00c300;
}


.lg-more-platforms {
	margin-top: 13px;

	text-align: center;
}


.lg-more-platforms a {
	color: #7043e5;

	font-size: 9px;
	font-weight: 900;
}


/* =========================================================
   34 — FOCUS
========================================================= */

.lg-single-album a:focus-visible {
	outline:
		3px solid rgba(112,67,229,.25);

	outline-offset: 3px;
}


/* =========================================================
   35 — LARGE DESKTOP
========================================================= */

@media (min-width: 1550px) {

	.lg-album-hero {
		grid-template-columns:
			470px
			minmax(0,1fr)
			330px;

		height: 505px !important;
		min-height: 505px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 470px;
		height: 505px;
	}


	.lg-album-cover {
		width: 400px;
		height: 400px;

		min-width: 400px;
		min-height: 400px;
	}


	.lg-album-hero-content {
		height: 505px;
	}


	.lg-album-title {
		font-size:
			clamp(
				64px,
				4.2vw,
				82px
			);
	}

}


/* =========================================================
   36 — 1200–1549
========================================================= */

@media (max-width: 1549px) and (min-width: 1101px) {

	.lg-album-hero {
		grid-template-columns:
			390px
			minmax(0,1fr)
			270px;

		height: 440px !important;
		min-height: 440px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 390px;
		height: 440px;
	}


	.lg-album-cover {
		width: 315px;
		height: 315px;

		min-width: 315px;
		min-height: 315px;
	}


	.lg-album-hero-content {
		height: 440px;

		padding:
			35px
			16px;
	}


	.lg-album-title {
		font-size: 52px;
	}


	.lg-album-details-card {
		width: 240px;

		margin-right: 15px;
	}

}


/* =========================================================
   37 — TABLET
========================================================= */

@media (max-width: 1100px) {

	.lg-single-album {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}


	.lg-album-hero {
		grid-template-columns:
			330px
			minmax(0,1fr);

		height: auto !important;
		min-height: 390px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 330px;
		height: 390px;
	}


	.lg-album-cover {
		width: 290px;
		height: 290px;

		min-width: 290px;
		min-height: 290px;
	}


	.lg-album-hero-content {
		height: 390px;

		padding:
			30px
			16px;
	}


	.lg-album-title {
		font-size: 48px;
	}


	.lg-album-details-card {
		display: none;
	}


	.lg-album-content-grid {
		grid-template-columns: 1fr;
	}


	.lg-album-lower-grid {
		grid-template-columns:
			1fr
			1fr;
	}


	.lg-listen-section {
		grid-column:
			1 / -1;
	}


	.lg-album-mini-grid {
		grid-template-columns:
			repeat(4,minmax(0,1fr));
	}

}


/* =========================================================
   38 — SMALL TABLET
========================================================= */

@media (max-width: 850px) {

	.lg-single-album {
		padding:
			0
			15px
			60px !important;
	}


	.lg-album-hero {
		display: flex !important;

		flex-direction: column;

		height: auto !important;
		min-height: 0 !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 100%;
		height: 350px;
	}


	.lg-album-cover {
		width: 300px;
		height: 300px;

		min-width: 300px;
		min-height: 300px;
	}


	.lg-album-rating-badge {
		left: 22px;
		top: 18px;
	}


	.lg-album-track-badge {
		left: 22px;
		bottom: 18px;
	}


	.lg-album-hero-content {
		width: 100%;
		height: auto;

		padding:
			30px
			28px
			28px;
	}


	.lg-album-title {
		font-size:
			clamp(
				42px,
				7vw,
				58px
			);
	}


	.lg-album-lower-grid {
		grid-template-columns: 1fr;
	}


	.lg-listen-section {
		grid-column: auto;
	}


	.lg-album-mini-grid {
		grid-template-columns:
			repeat(5,minmax(0,1fr));
	}

}


/* =========================================================
   39 — MOBILE
========================================================= */

@media (max-width: 700px) {

	.lg-single-album {
		width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		padding:
			0
			12px
			60px !important;
	}


	.lg-album-breadcrumb {
		min-height: 48px;

		padding:
			8px
			0;

		font-size: 11px;
	}


	.lg-album-hero {
		border-radius: 20px;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		height: 320px;
	}


	.lg-album-cover {
		width: 270px;
		height: 270px;

		min-width: 270px;
		min-height: 270px;

		border-radius: 22px;
	}


	.lg-album-cover img,
	.lg-album-cover-fallback {
		border-radius: 17px;
	}


	.lg-album-hero-content {
		padding:
			28px
			22px;
	}


	.lg-album-title {
		font-size:
			clamp(
				35px,
				10vw,
				48px
			);

		line-height: 1;
	}


	.lg-album-title > span {
		display: block;

		margin:
			8px
			0
			0;

		font-size: 21px;
	}


	.lg-album-artist-row {
		margin-bottom: 18px;
	}


	.lg-album-actions {
		width: 100%;
	}


	.premium-album-actions {
		flex-wrap: wrap;
	}


	.lg-hero-action-primary {
		width: 100%;
	}


	.lg-hero-action-stat,
	.lg-hero-action-views {
		flex: 1;
	}


	.lg-tracklist-section {
		padding:
			20px
			16px
			17px;
	}


	.lg-section-heading {
		align-items: flex-start;

		flex-direction: column;

		gap: 10px;
	}


	.lg-total-duration {
		align-self: flex-start;
	}


	.lg-tracklist-grid {
		grid-template-columns: 1fr;
	}


	.lg-track-row {
		grid-template-columns:
			30px
			36px
			minmax(0,1fr)
			95px;

		min-height: 55px;
	}


	.lg-track-duration {
		display: none;
	}


	.lg-read-lyrics-button {
		min-width: 82px;
	}


	.lg-album-mini-grid {
		grid-template-columns:
			repeat(4,minmax(0,1fr));
	}


	.lg-highlight-grid {
		grid-template-columns:
			repeat(2,minmax(0,1fr));
	}

}


/* =========================================================
   40 — SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

	.lg-single-album {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		height: 300px;
	}


	.lg-album-cover {
		width: 250px;
		height: 250px;

		min-width: 250px;
		min-height: 250px;
	}


	.lg-album-title {
		font-size: 34px;
	}


	.lg-album-artist-avatar {
		width: 52px;
		height: 52px;

		flex-basis: 52px;
	}


	.lg-track-row {
		grid-template-columns:
			27px
			34px
			minmax(0,1fr)
			82px;

		padding:
			0
			5px;
	}


	.lg-track-title a {
		font-size: 10px;
	}


	.lg-read-lyrics-button {
		min-width: 78px;

		padding:
			0
			6px;

		font-size: 8px;
	}


	.lg-album-mini-grid {
		grid-template-columns:
			repeat(2,minmax(0,1fr));
	}


	.lg-streaming-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   41 — VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

	.lg-album-hero-art,
	.lg-album-cover-wrap {
		height: 275px;
	}


	.lg-album-cover {
		width: 225px;
		height: 225px;

		min-width: 225px;
		min-height: 225px;
	}


	.lg-album-title {
		font-size: 31px;
	}


	.lg-album-hero-content {
		padding:
			25px
			17px;
	}


	.lg-highlight-grid {
		grid-template-columns: 1fr;
	}

}


/* =========================================================
   42 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.lg-single-album *,
	.lg-single-album *::before,
	.lg-single-album *::after {

		animation: none !important;

		transition: none !important;
	}

}


/* =========================================================
   43 — LYRICSGROOVE FINAL PREMIUM OVERRIDES
   ---------------------------------------------------------
   This section is intentionally placed at the end so it
   safely overrides earlier declarations without requiring
   the existing CSS architecture to be rewritten.
========================================================= */


/* ---------------------------------------------------------
   HERO — PREMIUM ARTWORK / GLOW / BORDER
--------------------------------------------------------- */

.lg-album-hero {
	min-height: 500px !important;
	height: 500px !important;

	border:
		1px solid rgba(255,255,255,.92) !important;

	border-radius: 32px !important;

	background:
		linear-gradient(
			112deg,
			rgba(255,220,246,.97) 0%,
			rgba(247,237,255,.96) 40%,
			rgba(221,219,255,.97) 100%
		) !important;

	box-shadow:
		0 0 0 1px rgba(112,67,229,.10),
		0 0 38px rgba(179,72,218,.12),
		0 32px 90px rgba(49,34,117,.18),
		inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* Artwork-derived hero atmosphere */

.lg-album-hero::before {
	inset: -90px !important;

	background:
		linear-gradient(
			90deg,
			rgba(255,220,244,.92) 0%,
			rgba(244,234,255,.72) 45%,
			rgba(213,215,255,.82) 100%
		),
		var(--lg-album-art) !important;

	background-size:
		cover,
		cover !important;

	background-position:
		center,
		center !important;

	filter:
		blur(34px)
		saturate(1.5) !important;

	opacity: .62 !important;

	transform: scale(1.14) !important;
}


/* Premium light fields */

.lg-album-hero::after {
	inset: 0 !important;

	background:
		radial-gradient(
			circle at 8% 25%,
			rgba(255,56,190,.23),
			transparent 25%
		),
		radial-gradient(
			circle at 52% 0%,
			rgba(255,255,255,.55),
			transparent 30%
		),
		radial-gradient(
			circle at 82% 15%,
			rgba(111,78,255,.22),
			transparent 30%
		),
		radial-gradient(
			circle at 95% 88%,
			rgba(89,73,255,.18),
			transparent 29%
		) !important;
}


/* ---------------------------------------------------------
   HERO COVER — LARGER + PREMIUM FRAME
--------------------------------------------------------- */

.lg-album-hero-art,
.lg-album-cover-wrap {
	width: 460px !important;
	height: 500px !important;
}


.lg-album-cover-wrap::before {
	width: 425px !important;
	height: 425px !important;

	background:
		radial-gradient(
			circle,
			rgba(106,63,255,.30),
			rgba(230,48,176,.16) 43%,
			transparent 72%
		) !important;

	filter: blur(28px) !important;
}


.lg-album-cover {
	width: 405px !important;
	height: 405px !important;

	min-width: 405px !important;
	min-height: 405px !important;

	padding: 8px !important;

	border:
		1px solid rgba(255,255,255,.98) !important;

	border-radius: 32px !important;

	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#f7f1ff 100%
		) !important;

	box-shadow:
		0 0 0 1px rgba(108,65,224,.14),
		0 0 38px rgba(115,70,224,.22),
		0 35px 90px rgba(39,25,96,.28),
		0 12px 32px rgba(39,25,96,.14),
		inset 0 1px 0 rgba(255,255,255,.98) !important;
}


.lg-album-cover::before {
	content: "";

	position: absolute;

	inset: -6px;

	z-index: -1;

	border-radius: 37px;

	background:
		linear-gradient(
			135deg,
			rgba(255,65,190,.48),
			rgba(116,70,238,.40),
			rgba(71,87,255,.34)
		);

	filter: blur(13px);

	opacity: .72;

	pointer-events: none;
}


.lg-album-cover:hover {
	transform:
		translateY(-10px)
		scale(1.018) !important;

	box-shadow:
		0 0 0 1px rgba(108,65,224,.18),
		0 0 48px rgba(115,70,224,.30),
		0 45px 105px rgba(39,25,96,.33),
		0 15px 40px rgba(39,25,96,.17) !important;
}


/* ---------------------------------------------------------
   REMOVE COVER TRACK BADGE
   Track count remains in the hero action row.
--------------------------------------------------------- */

.lg-album-track-badge {
	display: none !important;
}


/* ---------------------------------------------------------
   HERO CONTENT — BIGGER / MORE PREMIUM
--------------------------------------------------------- */

.lg-album-hero-content {
	height: 500px !important;

	padding:
		50px
		34px
		45px
		24px !important;
}


.lg-album-kicker {
	height: 38px !important;

	margin-bottom: 22px !important;

	padding:
		0
		17px !important;

	border:
		1px solid rgba(218,56,190,.18) !important;

	box-shadow:
		0 10px 24px rgba(103,60,202,.09),
		inset 0 1px 0 rgba(255,255,255,.85) !important;

	font-size: 10px !important;
}


.lg-album-title {
	max-width: 820px !important;

	margin-bottom: 27px !important;

	font-size:
		clamp(
			62px,
			4.6vw,
			84px
		) !important;

	line-height: .94 !important;

	letter-spacing: -.065em !important;
}


.lg-album-title > span {
	margin-left: 14px !important;

	color: #6f43e7 !important;

	font-size: .38em !important;
}


/* ---------------------------------------------------------
   ARTIST ROW
--------------------------------------------------------- */

.lg-album-artist-row {
	gap: 15px !important;

	margin-bottom: 25px !important;
}


.lg-album-artist-avatar {
	width: 64px !important;
	height: 64px !important;

	flex-basis: 64px !important;

	border:
		3px solid #ffffff !important;

	box-shadow:
		0 12px 30px rgba(73,48,143,.20),
		0 0 0 2px rgba(112,67,229,.10),
		0 0 25px rgba(115,70,224,.12) !important;
}


.lg-album-artist-name {
	gap: 9px !important;
}


.lg-album-artist-name a {
	font-size: 21px !important;
}


/* ---------------------------------------------------------
   VERIFIED ARTIST BADGE
   CSS ensures any PHP-rendered badge is always visible.
--------------------------------------------------------- */

.lg-verified-badge {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;

	align-items: center !important;
	justify-content: center !important;

	width: 22px !important;
	height: 22px !important;

	flex:
		0 0 22px !important;

	color: #2388f5 !important;

	filter:
		drop-shadow(
			0 3px 7px rgba(35,136,245,.28)
		) !important;

	transform:
		translateY(1px) !important;
}


.lg-verified-badge svg {
	display: block !important;

	width: 22px !important;
	height: 22px !important;

	visibility: visible !important;
	opacity: 1 !important;
}


/* ---------------------------------------------------------
   HERO ACTIONS
--------------------------------------------------------- */

.premium-album-actions {
	gap: 11px !important;

	margin-top: 3px !important;
}


.lg-hero-action {
	min-height: 54px !important;

	padding:
		0
		18px !important;

	border-radius: 15px !important;

	font-size: 10px !important;

	box-shadow:
		0 8px 24px rgba(54,37,117,.07);
}


.lg-hero-action-primary {
	min-width: 182px;

	box-shadow:
		0 14px 32px rgba(100,49,218,.28) !important;
}


.lg-hero-action-primary:hover {
	transform:
		translateY(-5px) !important;

	box-shadow:
		0 21px 44px rgba(100,49,218,.37) !important;
}


.lg-action-icon {
	width: 30px !important;
	height: 30px !important;

	border-radius: 9px !important;
}


.lg-action-icon svg {
	width: 18px !important;
	height: 18px !important;
}


/* ---------------------------------------------------------
   DARK PREMIUM TRACK COUNT
--------------------------------------------------------- */

.lg-track-count-action {
	color: #ffffff !important;

	border:
		1px solid rgba(255,255,255,.13) !important;

	background:
		#17112f !important;

	box-shadow:
		0 13px 30px rgba(35,22,82,.25),
		inset 0 1px 0 rgba(255,255,255,.09) !important;

	backdrop-filter:
		blur(14px);
}


.lg-track-count-action .lg-action-icon {
	color: #c99cff !important;

	background:
		rgba(154,96,255,.15) !important;

	border:
		1px solid rgba(188,140,255,.13) !important;
}


.lg-track-count-action strong {
	color: #ffffff !important;
}


.lg-track-count-action > span:last-child {
	color: rgba(255,255,255,.72) !important;
}


.lg-track-count-action:hover {
	color: #ffffff !important;

	background:
		#211743 !important;

	border-color:
		rgba(189,140,255,.34) !important;

	box-shadow:
		0 20px 42px rgba(35,22,82,.32),
		0 0 25px rgba(123,78,230,.14) !important;
}


/* =========================================================
   PREMIUM FANS LOVED BUTTON
========================================================= */

.lg-stat-loved {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-width: 205px !important;
	height: 58px !important;

	padding: 0 22px !important;
	gap: 11px !important;

	border-radius: 15px !important;

	border: 1px solid rgba(255,255,255,.45) !important;

	background:
		linear-gradient(
			135deg,
			#ff3f78 0%,
			#e51f5d 52%,
			#c91550 100%
		) !important;

	color: #ffffff !important;

	box-shadow:
		0 12px 28px rgba(229,31,93,.28),
		0 0 24px rgba(255,63,120,.13),
		inset 0 1px 0 rgba(255,255,255,.45) !important;

	font-size: 15px !important;
	font-weight: 900 !important;

	letter-spacing: -.01em !important;

	line-height: 1 !important;

	white-space: nowrap !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		filter .25s ease !important;
}


/* HEART ICON */

.lg-stat-loved svg,
.lg-stat-loved .icon,
.lg-stat-loved i {
	width: 22px !important;
	height: 22px !important;

	color: #ffffff !important;
	fill: none !important;
	stroke: #ffffff !important;

	stroke-width: 2.2 !important;

	flex: 0 0 auto !important;
}


/* COUNT */

.lg-stat-loved .count,
.lg-stat-loved strong,
.lg-stat-loved b {
	color: #ffffff !important;

	font-size: 18px !important;
	font-weight: 950 !important;

	line-height: 1 !important;
}


/* TEXT */

.lg-stat-loved .label,
.lg-stat-loved span:last-child {
	color: #ffffff !important;

	font-size: 13px !important;
	font-weight: 800 !important;

	line-height: 1.15 !important;

	letter-spacing: -.01em !important;
}


/* FORCE ALL CONTENT WHITE */

.lg-stat-loved,
.lg-stat-loved *,
.lg-stat-loved::before,
.lg-stat-loved::after {
	-webkit-text-fill-color: #ffffff !important;
}


/* PREMIUM HOVER */

.lg-stat-loved:hover {
	transform: translateY(-3px) scale(1.015) !important;

	filter: brightness(1.07) !important;

	box-shadow:
		0 17px 36px rgba(229,31,93,.38),
		0 0 32px rgba(255,63,120,.20),
		inset 0 1px 0 rgba(255,255,255,.55) !important;
}


/* ACTIVE */

.lg-stat-loved:active {
	transform: translateY(-1px) scale(.99) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.lg-stat-loved {
		min-width: 180px !important;

		height: 54px !important;

		padding: 0 18px !important;

		gap: 9px !important;

		font-size: 14px !important;
	}

	.lg-stat-loved svg,
	.lg-stat-loved .icon,
	.lg-stat-loved i {
		width: 20px !important;
		height: 20px !important;
	}

	.lg-stat-loved .count,
	.lg-stat-loved strong,
	.lg-stat-loved b {
		font-size: 17px !important;
	}

	.lg-stat-loved .label,
	.lg-stat-loved span:last-child {
		font-size: 12px !important;
	}
}


/* ---------------------------------------------------------
   RIGHT META CARD — DARK ARTWORK PREMIUM
--------------------------------------------------------- */

.lg-album-details-card {
	align-self: center !important;

	width: 315px !important;
	min-height: 430px !important;

	margin:
		0
		24px
		0
		0 !important;

	padding: 21px !important;

	border:
		1px solid rgba(255,255,255,.20) !important;

	border-radius: 26px !important;

	color: #ffffff !important;

	background:
		linear-gradient(
			145deg,
			#120d29 0%,
			#1b123a 48%,
			#24164b 100%
		) !important;

	box-shadow:
		0 0 0 1px rgba(120,82,229,.12),
		0 0 38px rgba(111,65,220,.21),
		0 28px 65px rgba(30,18,72,.35),
		inset 0 1px 0 rgba(255,255,255,.12) !important;
}


/* Artwork glow behind the dark card */

.lg-album-details-card::before {
	content: "";

	position: absolute;

	inset: -50px;

	z-index: -2;

	background:
		var(--lg-album-art);

	background-size: cover;

	background-position: center;

	filter:
		blur(31px)
		saturate(1.55);

	opacity: .21;

	transform: scale(1.17);

	pointer-events: none;
}


/* Colored premium lighting */

.lg-album-details-card::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(133,76,255,.30),
			transparent 40%
		),
		radial-gradient(
			circle at 0% 100%,
			rgba(231,44,174,.18),
			transparent 38%
		);

	pointer-events: none;
}


/* ---------------------------------------------------------
   META HEADER
--------------------------------------------------------- */

.lg-meta-card-header {
	padding-bottom: 16px !important;

	margin-bottom: 1px !important;

	border-bottom:
		1px solid rgba(255,255,255,.12) !important;
}


.lg-meta-card-eyebrow {
	margin-bottom: 7px !important;

	color:
		rgba(255,255,255,.48) !important;

	font-size: 8px !important;

	letter-spacing: .14em !important;
}


.lg-meta-card-title {
	color: #ffffff !important;

	font-size: 18px !important;

	font-weight: 950 !important;
}


/* ---------------------------------------------------------
   META ROWS — BIGGER / HIGHER CONTRAST
--------------------------------------------------------- */

.lg-meta-item {
	min-height: 71px !important;

	gap: 13px !important;

	border-bottom:
		1px solid rgba(255,255,255,.10) !important;
}


.lg-meta-icon {
	width: 42px !important;
	height: 42px !important;

	flex:
		0 0 42px !important;

	border:
		1px solid rgba(192,148,255,.16) !important;

	border-radius: 13px !important;

	color: #cba4ff !important;

	background:
		rgba(255,255,255,.065) !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.06),
		0 7px 17px rgba(0,0,0,.14) !important;
}


.lg-meta-icon svg {
	width: 19px !important;
	height: 19px !important;
}


.lg-meta-item:hover .lg-meta-icon {
	transform:
		scale(1.08)
		rotate(-3deg) !important;

	border-color:
		rgba(201,160,255,.30) !important;

	background:
		rgba(143,87,235,.18) !important;
}


.lg-meta-content span {
	margin-bottom: 5px !important;

	color:
		rgba(255,255,255,.48) !important;

	font-size: 8px !important;

	font-weight: 800 !important;
}


.lg-meta-content strong {
	color: #ffffff !important;

	font-size: 12px !important;

	font-weight: 900 !important;

	line-height: 1.35 !important;

	white-space: normal !important;
}


/* ---------------------------------------------------------
   REMOVE EXPLORE ARTIST BUTTON
--------------------------------------------------------- */

.lg-meta-artist-link {
	display: none !important;
}


/* ---------------------------------------------------------
   HERO NOTE / ARTWORK DECORATION
--------------------------------------------------------- */

.lg-album-hero-content::before {
	top: 24px !important;
	right: 390px !important;

	color:
		rgba(104,68,226,.13) !important;

	font-size: 34px !important;

	letter-spacing: 22px !important;
}


.lg-album-hero-content::after {
	right: 170px !important;
	bottom: 40px !important;

	color:
		rgba(225,42,170,.13) !important;

	font-size: 58px !important;
}


/* ---------------------------------------------------------
   PREMIUM KEYLINE
--------------------------------------------------------- */

.lg-album-hero > * {
	position: relative;
}


.lg-album-hero > *:first-child::after {
	content: "";

	position: absolute;

	top: 50%;
	right: -1px;

	width: 1px;
	height: 68%;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(112,67,229,.13),
			transparent
		);

	transform:
		translateY(-50%);

	pointer-events: none;
}


/* ---------------------------------------------------------
   TABLET / DESKTOP SAFETY
--------------------------------------------------------- */

@media (min-width: 1550px) {

	.lg-album-hero {
		grid-template-columns:
			480px
			minmax(0,1fr)
			335px;

		height: 520px !important;
		min-height: 520px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 480px !important;
		height: 520px !important;
	}


	.lg-album-cover {
		width: 420px !important;
		height: 420px !important;

		min-width: 420px !important;
		min-height: 420px !important;
	}


	.lg-album-hero-content {
		height: 520px !important;
	}


	.lg-album-details-card {
		width: 320px !important;
	}

}


@media (max-width: 1549px) and (min-width: 1101px) {

	.lg-album-hero {
		grid-template-columns:
			400px
			minmax(0,1fr)
			285px;

		height: 455px !important;
		min-height: 455px !important;
	}


	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 400px !important;
		height: 455px !important;
	}


	.lg-album-cover {
		width: 335px !important;
		height: 335px !important;

		min-width: 335px !important;
		min-height: 335px !important;
	}


	.lg-album-hero-content {
		height: 455px !important;

		padding:
			36px
			18px !important;
	}


	.lg-album-title {
		font-size: 55px !important;
	}


	.lg-album-details-card {
		width: 255px !important;

		min-height: 390px !important;

		margin-right: 14px !important;
	}

}


/* ---------------------------------------------------------
   MOBILE — COVER BADGE REMAINS HIDDEN
--------------------------------------------------------- */

@media (max-width: 1100px) {

	.lg-album-details-card {
		display: none !important;
	}


	.lg-album-hero {
		height: auto !important;
		min-height: 390px !important;
	}

}


@media (max-width: 850px) {

	.lg-album-hero-art,
	.lg-album-cover-wrap {
		width: 100% !important;
		height: 350px !important;
	}


	.lg-album-cover {
		width: 300px !important;
		height: 300px !important;

		min-width: 300px !important;
		min-height: 300px !important;
	}


	.lg-album-hero-content {
		height: auto !important;
	}


	.lg-album-title {
		font-size:
			clamp(
				42px,
				7vw,
				58px
			) !important;
	}

}


@media (max-width: 700px) {

	.lg-album-hero-art,
	.lg-album-cover-wrap {
		height: 320px !important;
	}


	.lg-album-cover {
		width: 270px !important;
		height: 270px !important;

		min-width: 270px !important;
		min-height: 270px !important;

		border-radius: 23px !important;
	}


	.lg-album-hero-content {
		padding:
			28px
			22px !important;
	}


	.lg-album-title {
		font-size:
			clamp(
				35px,
				10vw,
				48px
			) !important;
	}


	.lg-hero-action-primary {
		width: 100% !important;
	}


	.lg-hero-action-stat,
	.lg-hero-action-views,
	.lg-loved-by-fans {
		flex: 1 1 auto;
	}


	.lg-track-count-action,
	.lg-loved-by-fans,
	.lg-hero-action-views {
		min-width: 0 !important;
	}

}


@media (max-width: 500px) {

	.lg-album-hero-art,
	.lg-album-cover-wrap {
		height: 300px !important;
	}


	.lg-album-cover {
		width: 250px !important;
		height: 250px !important;

		min-width: 250px !important;
		min-height: 250px !important;
	}


	.lg-album-title {
		font-size: 34px !important;
	}

}


@media (prefers-reduced-motion: reduce) {

	.lg-album-hero *,
	.lg-album-hero *::before,
	.lg-album-hero *::after {
		animation: none !important;
		transition: none !important;
	}

}

/* =========================================================
   44 — FINAL BUTTON + META INFORMATION POLISH
   ---------------------------------------------------------
   Larger action typography, wider premium buttons, and
   individually coloured metadata rows/icons.
   Solid colours only inside the metadata panel.
========================================================= */

/* ---------------------------------------------------------
   HERO ACTION BUTTONS — WIDER + LARGER TEXT
--------------------------------------------------------- */

.premium-album-actions {
	gap: 12px !important;
	align-items: stretch !important;
}

.lg-hero-action {
	min-height: 58px !important;
	padding: 0 21px !important;
	border-radius: 16px !important;
	font-size: 12px !important;
	font-weight: 950 !important;
	letter-spacing: -.01em !important;
	white-space: nowrap !important;
}

.lg-hero-action-primary {
	min-width: 218px !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
}

.lg-track-count-action {
	min-width: 126px !important;
}

.lg-loved-by-fans,
.lg-hero-action-views {
	min-width: 190px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.lg-hero-action-stat strong,
.lg-hero-action-views strong,
.lg-loved-by-fans strong {
	font-size: 17px !important;
	font-weight: 950 !important;
}

.lg-hero-action-primary > span:not(.lg-action-icon):not(.lg-action-arrow) {
	font-size: 12px !important;
	font-weight: 950 !important;
}

.lg-track-count-action > span:last-child {
	font-size: 11px !important;
	font-weight: 850 !important;
}

.lg-loved-by-fans > span:last-child,
.lg-hero-action-views > span:last-child {
	font-size: 10px !important;
	font-weight: 850 !important;
	white-space: nowrap !important;
}

.lg-action-icon {
	width: 34px !important;
	height: 34px !important;
	border-radius: 10px !important;
	flex: 0 0 34px !important;
}

.lg-action-icon svg {
	width: 20px !important;
	height: 20px !important;
}

.lg-action-arrow {
	font-size: 15px !important;
}


/* ---------------------------------------------------------
   RIGHT META CARD — LARGER / CLEANER PREMIUM PANEL
--------------------------------------------------------- */

.lg-album-details-card {
	width: 325px !important;
	min-height: 438px !important;
	padding: 22px !important;
	border-radius: 27px !important;
	background: #15102f !important;
	border-color: rgba(255,255,255,.17) !important;
	box-shadow:
		0 0 0 1px rgba(120,82,229,.10),
		0 0 42px rgba(111,65,220,.22),
		0 30px 68px rgba(30,18,72,.38),
		inset 0 1px 0 rgba(255,255,255,.11) !important;
}

.lg-meta-card-header {
	padding-bottom: 18px !important;
	margin-bottom: 2px !important;
}

.lg-meta-card-eyebrow {
	margin-bottom: 8px !important;
	font-size: 9px !important;
	font-weight: 900 !important;
	letter-spacing: .15em !important;
}

.lg-meta-card-title {
	font-size: 20px !important;
	line-height: 1.15 !important;
}


/* ---------------------------------------------------------
   META ROWS — DISTINCT SOLID COLOURS
--------------------------------------------------------- */

.lg-meta-item {
	min-height: 75px !important;
	gap: 14px !important;
	margin: 0 -4px !important;
	padding: 0 4px !important;
	border-bottom: 1px solid rgba(255,255,255,.085) !important;
	border-radius: 12px !important;
	transition:
		background .25s ease,
		transform .25s ease !important;
}

.lg-meta-item:last-child {
	border-bottom: 0 !important;
}

.lg-meta-item:nth-child(1) {
	background: #21183d !important;
}

.lg-meta-item:nth-child(2) {
	background: #2a1738 !important;
}

.lg-meta-item:nth-child(3) {
	background: #172b47 !important;
}

.lg-meta-item:nth-child(4) {
	background: #153837 !important;
}

.lg-meta-item:nth-child(5) {
	background: #392b18 !important;
}

.lg-meta-item:hover {
	transform: translateX(3px) !important;
}

.lg-meta-item:nth-child(1):hover {
	background: #291e4b !important;
}

.lg-meta-item:nth-child(2):hover {
	background: #351d47 !important;
}

.lg-meta-item:nth-child(3):hover {
	background: #1d3859 !important;
}

.lg-meta-item:nth-child(4):hover {
	background: #1a4745 !important;
}

.lg-meta-item:nth-child(5):hover {
	background: #49361d !important;
}


/* ---------------------------------------------------------
   META ICONS — BIGGER + DISTINCT SOLID COLOUR
--------------------------------------------------------- */

.lg-meta-icon {
	width: 46px !important;
	height: 46px !important;
	flex: 0 0 46px !important;
	border-radius: 13px !important;
	border: 1px solid transparent !important;
	font-size: 0 !important;
	box-shadow:
		0 8px 18px rgba(0,0,0,.18),
		inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.lg-meta-icon svg {
	width: 23px !important;
	height: 23px !important;
}

.lg-meta-item:nth-child(1) .lg-meta-icon {
	color: #e2c6ff !important;
	background: #6b3e9e !important;
	border-color: #8b5fc0 !important;
}

.lg-meta-item:nth-child(2) .lg-meta-icon {
	color: #ffd0ee !important;
	background: #a43b82 !important;
	border-color: #c0549f !important;
}

.lg-meta-item:nth-child(3) .lg-meta-icon {
	color: #cce5ff !important;
	background: #2869a5 !important;
	border-color: #3d84c2 !important;
}

.lg-meta-item:nth-child(4) .lg-meta-icon {
	color: #c9fff5 !important;
	background: #18756e !important;
	border-color: #32968d !important;
}

.lg-meta-item:nth-child(5) .lg-meta-icon {
	color: #ffe7b0 !important;
	background: #a66a24 !important;
	border-color: #c5893b !important;
}

.lg-meta-item:hover .lg-meta-icon {
	transform: scale(1.09) rotate(-3deg) !important;
}


/* ---------------------------------------------------------
   META TEXT — LARGER / MORE PREMIUM
--------------------------------------------------------- */

.lg-meta-content {
	padding-right: 5px !important;
}

.lg-meta-content span {
	margin-bottom: 6px !important;
	color: rgba(255,255,255,.56) !important;
	font-size: 9px !important;
	font-weight: 850 !important;
	letter-spacing: .01em !important;
}

.lg-meta-content strong {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 950 !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}


/* ---------------------------------------------------------
   DESKTOP WIDTH SAFETY
--------------------------------------------------------- */

@media (min-width: 1550px) {

	.lg-album-details-card {
		width: 330px !important;
	}

	.lg-hero-action-primary {
		min-width: 222px !important;
	}

	.lg-track-count-action {
		min-width: 130px !important;
	}

	.lg-loved-by-fans,
	.lg-hero-action-views {
		min-width: 194px !important;
	}
}


@media (max-width: 1549px) and (min-width: 1101px) {

	.lg-hero-action {
		min-height: 55px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 11px !important;
	}

	.lg-hero-action-primary {
		min-width: 190px !important;
	}

	.lg-track-count-action {
		min-width: 112px !important;
	}

	.lg-loved-by-fans,
	.lg-hero-action-views {
		min-width: 170px !important;
	}

	.lg-album-details-card {
		width: 270px !important;
		padding: 18px !important;
	}

	.lg-meta-item {
		min-height: 69px !important;
	}

	.lg-meta-icon {
		width: 42px !important;
		height: 42px !important;
		flex-basis: 42px !important;
	}

	.lg-meta-icon svg {
		width: 21px !important;
		height: 21px !important;
	}

	.lg-meta-content strong {
		font-size: 12px !important;
	}
}


/* ---------------------------------------------------------
   MOBILE — KEEP BUTTONS USABLE
--------------------------------------------------------- */

@media (max-width: 700px) {

	.lg-hero-action {
		min-height: 56px !important;
		font-size: 11px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.lg-hero-action-primary {
		min-width: 0 !important;
	}

	.lg-track-count-action,
	.lg-loved-by-fans,
	.lg-hero-action-views {
		min-width: 0 !important;
		flex: 1 1 0 !important;
	}

	.lg-hero-action-stat strong,
	.lg-hero-action-views strong,
	.lg-loved-by-fans strong {
		font-size: 15px !important;
	}

	.lg-track-count-action > span:last-child,
	.lg-loved-by-fans > span:last-child,
	.lg-hero-action-views > span:last-child {
		font-size: 9px !important;
	}

	.lg-action-icon {
		width: 31px !important;
		height: 31px !important;
		flex-basis: 31px !important;
	}

	.lg-action-icon svg {
		width: 18px !important;
		height: 18px !important;
	}
}


@media (max-width: 500px) {

	.premium-album-actions {
		gap: 8px !important;
	}

	.lg-hero-action {
		min-height: 53px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.lg-track-count-action,
	.lg-loved-by-fans,
	.lg-hero-action-views {
		flex: 1 1 100% !important;
	}

	.lg-meta-card-title {
		font-size: 18px !important;
	}

}



/* =========================================================
   FINAL — PREMIUM FANS LOVED BUTTON
   Exact selector for current PHP markup
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views.lg-loved-by-fans {

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;

	height: 58px !important;
	min-height: 58px !important;

	padding: 0 20px !important;

	gap: 11px !important;

	box-sizing: border-box !important;

	border-radius: 16px !important;

	border: 1px solid rgba(255,255,255,.48) !important;

	background:
		linear-gradient(
			135deg,
			#ff4f87 0%,
			#f02f68 48%,
			#d91f57 100%
		) !important;

	color: #ffffff !important;

	box-shadow:
		0 14px 30px rgba(217,31,87,.30),
		0 0 24px rgba(255,79,135,.16),
		inset 0 1px 0 rgba(255,255,255,.48) !important;

	backdrop-filter: none !important;

	text-decoration: none !important;

	cursor: default !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		filter .25s ease !important;
}


/* =========================================================
   HEART ICON CONTAINER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
.lg-action-icon {

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 auto !important;

	width: 34px !important;
	height: 34px !important;

	min-width: 34px !important;

	margin: 0 !important;

	border-radius: 10px !important;

	background: rgba(255,255,255,.18) !important;

	border: 1px solid rgba(255,255,255,.30) !important;

	color: #ffffff !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.22) !important;
}


/* =========================================================
   HEART SVG — WHITE
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
.lg-action-icon svg {

	display: block !important;

	width: 21px !important;
	height: 21px !important;

	fill: none !important;

	stroke: #ffffff !important;

	color: #ffffff !important;

	stroke-width: 2.2 !important;

	opacity: 1 !important;
}


/* =========================================================
   LIVE COUNT — WHITE + BIGGER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
strong {

	display: inline-block !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	-webkit-text-fill-color: #ffffff !important;

	font-size: 20px !important;

	font-weight: 950 !important;

	line-height: 1 !important;

	letter-spacing: -.02em !important;
}


/* =========================================================
   "FANS LOVED THIS..." TEXT — WHITE + BIGGER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
> span:last-child {

	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #ffffff !important;

	-webkit-text-fill-color: #ffffff !important;

	font-size: 12px !important;

	font-weight: 850 !important;

	line-height: 1.1 !important;

	letter-spacing: -.01em !important;

	white-space: nowrap !important;

	opacity: 1 !important;
}


/* =========================================================
   FORCE EVERY CHILD TO WHITE
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
* {

	color: #ffffff !important;

	-webkit-text-fill-color: #ffffff !important;
}


/* SVG MUST REMAIN OUTLINED */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans
svg {

	fill: none !important;

	stroke: #ffffff !important;
}


/* =========================================================
   HOVER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-loved-by-fans:hover {

	transform: translateY(-4px) !important;

	background:
		linear-gradient(
			135deg,
			#ff6598 0%,
			#f53670 48%,
			#df245b 100%
		) !important;

	border-color:
		rgba(255,255,255,.65) !important;

	box-shadow:
		0 20px 42px rgba(217,31,87,.40),
		0 0 32px rgba(255,79,135,.24),
		inset 0 1px 0 rgba(255,255,255,.55) !important;

	filter: brightness(1.04) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.lg-album-actions.premium-album-actions
	.lg-hero-action.lg-hero-action-views.lg-loved-by-fans {

		width: 100% !important;
		min-width: 0 !important;
		max-width: 240px !important;

		height: 56px !important;
		min-height: 56px !important;

		padding: 0 18px !important;
	}

}



/* =========================================================
   PREMIUM TRACK COUNT BUTTON
   Yellow background + black text
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views.lg-loved-by-fans
{
	/* Track-count selector is NOT this element.
	   This rule intentionally left untouched. */
}


/* Exact track-count button */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
{
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 145px !important;
	min-width: 145px !important;
	max-width: 145px !important;

	height: 58px !important;
	min-height: 58px !important;

	padding: 0 22px !important;

	gap: 11px !important;

	box-sizing: border-box !important;

	border-radius: 16px !important;

	border: 1px solid rgba(255,255,255,.55) !important;

	background:
		linear-gradient(
			135deg,
			#ffe66a 0%,
			#ffd21f 52%,
			#f5bd00 100%
		) !important;

	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	box-shadow:
		0 12px 28px rgba(238,183,0,.25),
		0 0 22px rgba(255,213,38,.18),
		inset 0 1px 0 rgba(255,255,255,.70) !important;

	text-decoration: none !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		filter .25s ease !important;
}


/* =========================================================
   ICON CONTAINER — KEEP DARK/PREMIUM
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
.lg-action-icon
{
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 34px !important;
	height: 34px !important;

	min-width: 34px !important;

	margin: 0 !important;

	border-radius: 10px !important;

	background:
		linear-gradient(
			145deg,
			#34205f,
			#21143e
		) !important;

	border: 1px solid rgba(255,255,255,.12) !important;

	color: #ffffff !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.12),
		0 4px 10px rgba(20,10,50,.20) !important;
}


/* =========================================================
   MUSIC SVG — WHITE
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
.lg-action-icon svg
{
	width: 20px !important;
	height: 20px !important;

	color: #ffffff !important;

	fill: none !important;

	stroke: #ffffff !important;

	stroke-width: 2 !important;
}


/* =========================================================
   TRACK COUNT TEXT
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
strong
{
	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	font-size: 18px !important;

	font-weight: 950 !important;

	line-height: 1 !important;

	letter-spacing: -.02em !important;
}


/* "TRACKS" LABEL */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
> span:last-child
{
	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	font-size: 13px !important;

	font-weight: 900 !important;

	line-height: 1 !important;

	white-space: nowrap !important;
}


/* =========================================================
   FORCE TEXT BLACK
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans) *
{
	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;
}


/* BUT KEEP ICON WHITE */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
.lg-action-icon,
.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
.lg-action-icon *
{
	color: #ffffff !important;

	-webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   PREMIUM HOVER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans):hover
{
	transform: translateY(-4px) !important;

	background:
		linear-gradient(
			135deg,
			#ffef86 0%,
			#ffda32 52%,
			#f7c400 100%
		) !important;

	box-shadow:
		0 18px 38px rgba(238,183,0,.34),
		0 0 30px rgba(255,213,38,.25),
		inset 0 1px 0 rgba(255,255,255,.82) !important;

	filter: brightness(1.03) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px)
{
	.lg-album-actions.premium-album-actions
	.lg-hero-action.lg-hero-action-views:not(.lg-loved-by-fans)
	{
		width: 135px !important;
		min-width: 135px !important;
		max-width: 135px !important;

		height: 54px !important;
		min-height: 54px !important;

		padding: 0 18px !important;
	}
}




/* =========================================================
   FINAL TRACK COUNT BUTTON
   Exact PHP class:
   .lg-hero-action.lg-hero-action-stat.lg-track-count-action
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action {

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 155px !important;
	min-width: 155px !important;
	max-width: 155px !important;

	height: 58px !important;
	min-height: 58px !important;

	padding: 0 22px !important;

	gap: 11px !important;

	box-sizing: border-box !important;

	border-radius: 16px !important;

	border: 1px solid rgba(255,255,255,.72) !important;

	background:
		linear-gradient(
			135deg,
			#fff08a 0%,
			#ffdc32 48%,
			#f4bf00 100%
		) !important;

	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	box-shadow:
		0 14px 32px rgba(221,169,0,.28),
		0 0 25px rgba(255,214,45,.20),
		inset 0 1px 0 rgba(255,255,255,.80) !important;

	text-decoration: none !important;

	transition:
		transform .25s cubic-bezier(.2,.8,.2,1),
		box-shadow .25s ease,
		filter .25s ease !important;
}


/* =========================================================
   DARK ICON BOX — KEEP THIS
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
.lg-action-icon {

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 34px !important;

	width: 34px !important;
	height: 34px !important;

	min-width: 34px !important;

	margin: 0 !important;

	padding: 0 !important;

	border-radius: 10px !important;

	background:
		linear-gradient(
			145deg,
			#35205f 0%,
			#21133f 100%
		) !important;

	border: 1px solid rgba(255,255,255,.14) !important;

	color: #ffffff !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.12),
		0 5px 12px rgba(27,15,62,.22) !important;
}


/* =========================================================
   MUSIC ICON
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
.lg-action-icon svg {

	display: block !important;

	width: 20px !important;
	height: 20px !important;

	color: #ffffff !important;

	stroke: #ffffff !important;

	fill: none !important;

	stroke-width: 2 !important;
}


/* =========================================================
   THE CURRENT PHP ICON IS TEXT "♫"
   Make that text white as well.
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
.lg-action-icon {

	font-size: 19px !important;

	font-weight: 900 !important;

	line-height: 1 !important;
}


/* =========================================================
   TRACK NUMBER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
strong {

	display: inline-block !important;

	margin: 0 !important;

	padding: 0 !important;

	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	font-size: 19px !important;

	font-weight: 950 !important;

	line-height: 1 !important;

	letter-spacing: -.025em !important;
}


/* =========================================================
   TRACK / TRACKS TEXT
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
> span:last-child {

	display: inline-block !important;

	margin: 0 !important;

	padding: 0 !important;

	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;

	font-size: 13px !important;

	font-weight: 900 !important;

	line-height: 1 !important;

	white-space: nowrap !important;

	letter-spacing: -.01em !important;
}


/* =========================================================
   FORCE OUTER TEXT BLACK
   BUT ICON REMAINS WHITE
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
> strong,
.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action
> span:not(.lg-action-icon) {

	color: #11101f !important;

	-webkit-text-fill-color: #11101f !important;
}


/* =========================================================
   HOVER
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action:hover {

	transform: translateY(-4px) !important;

	background:
		linear-gradient(
			135deg,
			#fff49b 0%,
			#ffe04a 48%,
			#f7c600 100%
		) !important;

	border-color:
		rgba(255,255,255,.90) !important;

	box-shadow:
		0 20px 42px rgba(221,169,0,.38),
		0 0 34px rgba(255,214,45,.28),
		inset 0 1px 0 rgba(255,255,255,.90) !important;

	filter: brightness(1.04) !important;
}


/* =========================================================
   ACTIVE
========================================================= */

.lg-album-actions.premium-album-actions
.lg-hero-action.lg-hero-action-stat.lg-track-count-action:active {

	transform:
		translateY(-1px)
		scale(.985) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.lg-album-actions.premium-album-actions
	.lg-hero-action.lg-hero-action-stat.lg-track-count-action {

		width: 145px !important;

		min-width: 145px !important;

		max-width: 145px !important;

		height: 54px !important;

		min-height: 54px !important;

		padding: 0 17px !important;
	}

}




/* ============================================================
   LYRICSGROOVE
   PREMIUM ARTIST & RELEASE PANEL — AURORA GLASS EDITION
   ============================================================ */


/* ============================================================
   MAIN PANEL
   ============================================================ */

.lg-album-details-card {

    position: relative !important;

    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;

    min-height: 490px !important;

    margin: 0 28px 0 0 !important;

    padding: 24px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border-radius: 30px !important;

    border: 1px solid rgba(255,255,255,.20) !important;

    background:

        /* upper violet light */
        radial-gradient(
            420px 220px at 90% 0%,
            rgba(133,82,255,.32),
            transparent 68%
        ),

        /* pink lower light */
        radial-gradient(
            350px 240px at 5% 100%,
            rgba(239,63,178,.20),
            transparent 70%
        ),

        /* centre purple atmosphere */
        radial-gradient(
            300px 300px at 50% 45%,
            rgba(103,65,190,.17),
            transparent 72%
        ),

        /* deep luxury base */
        linear-gradient(
            145deg,
            #0d0920 0%,
            #15102d 28%,
            #1b1239 58%,
            #110b27 100%
        ) !important;

    box-shadow:

        /* outer aura */
        0 0 0 1px rgba(133,91,255,.16),

        /* violet glow */
        0 0 30px rgba(126,78,255,.22),

        /* pink glow */
        0 0 75px rgba(229,53,174,.13),

        /* depth */
        0 28px 70px rgba(15,7,42,.48),

        /* glass edge */
        inset 0 1px 0 rgba(255,255,255,.18),

        inset 0 -1px 0 rgba(255,255,255,.04) !important;
}


/* ============================================================
   AURORA LIGHT BEHIND PANEL
   ============================================================ */

.lg-album-details-card::before {

    content: "" !important;

    position: absolute !important;

    width: 300px !important;
    height: 300px !important;

    top: -130px !important;
    right: -120px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(158,99,255,.46) 0%,
            rgba(132,72,255,.20) 34%,
            transparent 70%
        ) !important;

    filter: blur(18px) !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


/* ============================================================
   SECOND AURORA
   ============================================================ */

.lg-album-details-card::after {

    content: "" !important;

    position: absolute !important;

    width: 260px !important;
    height: 260px !important;

    bottom: -130px !important;
    left: -110px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(239,61,177,.34) 0%,
            rgba(203,65,181,.14) 35%,
            transparent 70%
        ) !important;

    filter: blur(20px) !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


/* ============================================================
   CONTENT ABOVE LIGHT
   ============================================================ */

.lg-album-details-card > * {

    position: relative !important;

    z-index: 5 !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.lg-meta-card-header {

    position: relative !important;

    padding:
        0 4px 18px !important;

    margin:
        0 0 10px !important;

    border-bottom:
        1px solid rgba(255,255,255,.13) !important;
}


/* subtle header glow line */

.lg-meta-card-header::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: -1px !important;

    width: 75px !important;
    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            rgba(235,67,185,.85),
            rgba(126,82,255,.7),
            transparent
        ) !important;
}


/* eyebrow */

.lg-meta-card-eyebrow {

    color:
        rgba(255,255,255,.48) !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .16em !important;

    line-height:
        1.2 !important;

    margin-bottom:
        7px !important;
}


/* artist name */

.lg-meta-card-title {

    color:
        #ffffff !important;

    font-size:
        22px !important;

    font-weight:
        950 !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -.025em !important;

    text-shadow:
        0 2px 16px rgba(255,255,255,.08) !important;
}


/* ============================================================
   META LIST
   ============================================================ */

.lg-meta-list {

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        9px !important;

    padding:
        0 !important;

    margin:
        0 !important;
}


/* ============================================================
   META CARD — BASE GLASS
   ============================================================ */

.lg-meta-item {

    position: relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-height:
        70px !important;

    padding:
        10px 14px !important;

    box-sizing:
        border-box !important;

    gap:
        15px !important;

    border-radius:
        16px !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .28s ease,
        filter .28s ease !important;
}


/* glass reflection */

.lg-meta-item::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.105) 0%,
            rgba(255,255,255,.035) 22%,
            transparent 48%,
            rgba(255,255,255,.025) 100%
        ) !important;

    pointer-events:
        none !important;

    z-index:
        -1 !important;
}


/* bottom glass reflection */

.lg-meta-item::after {

    content: "" !important;

    position: absolute !important;

    left: 12% !important;
    right: 12% !important;
    bottom: 0 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        ) !important;

    opacity:
        .55 !important;

    pointer-events:
        none !important;
}


/* ============================================================
   RELEASE — AMETHYST
   ============================================================ */

.lg-meta-item:nth-child(1) {

    background:
        radial-gradient(
            160px 90px at 10% 50%,
            rgba(147,91,255,.26),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(101,62,190,.48),
            rgba(58,35,116,.48)
        ) !important;

    border-color:
        rgba(172,126,255,.23) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 22px rgba(112,69,226,.13) !important;
}


/* ============================================================
   GENRES — ROSE
   ============================================================ */

.lg-meta-item:nth-child(2) {

    background:
        radial-gradient(
            170px 90px at 8% 50%,
            rgba(255,75,170,.27),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(158,46,115,.48),
            rgba(91,31,83,.48)
        ) !important;

    border-color:
        rgba(255,102,187,.22) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 8px 22px rgba(221,52,150,.13) !important;
}


/* ============================================================
   AGENCY — SAPPHIRE
   ============================================================ */

.lg-meta-item:nth-child(3) {

    background:
        radial-gradient(
            170px 90px at 8% 50%,
            rgba(62,145,255,.27),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(37,91,160,.48),
            rgba(27,50,96,.50)
        ) !important;

    border-color:
        rgba(82,161,255,.21) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 8px 22px rgba(49,116,221,.13) !important;
}


/* ============================================================
   LANGUAGE — EMERALD TEAL
   ============================================================ */

.lg-meta-item:nth-child(4) {

    background:
        radial-gradient(
            170px 90px at 8% 50%,
            rgba(40,210,188,.25),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(22,111,107,.48),
            rgba(18,65,68,.50)
        ) !important;

    border-color:
        rgba(63,218,198,.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 8px 22px rgba(25,166,153,.13) !important;
}


/* ============================================================
   ORIGIN — AMBER
   ============================================================ */

.lg-meta-item:nth-child(5) {

    background:
        radial-gradient(
            170px 90px at 8% 50%,
            rgba(255,173,55,.25),
            transparent 72%
        ),
        linear-gradient(
            120deg,
            rgba(133,84,31,.50),
            rgba(75,49,26,.52)
        ) !important;

    border-color:
        rgba(255,180,69,.21) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 8px 22px rgba(213,139,37,.13) !important;
}


/* ============================================================
   ICON CONTAINER
   ============================================================ */

.lg-meta-icon {

    position:
        relative !important;

    flex:
        0 0 46px !important;

    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        14px !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.055)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 5px 16px rgba(0,0,0,.18) !important;

    z-index:
        3 !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease !important;
}


/* ============================================================
   ICON COLOUR GLOW
   ============================================================ */

.lg-meta-item:nth-child(1) .lg-meta-icon {

    box-shadow:
        0 0 20px rgba(156,96,255,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}


.lg-meta-item:nth-child(2) .lg-meta-icon {

    box-shadow:
        0 0 20px rgba(255,76,172,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}


.lg-meta-item:nth-child(3) .lg-meta-icon {

    box-shadow:
        0 0 20px rgba(66,148,255,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}


.lg-meta-item:nth-child(4) .lg-meta-icon {

    box-shadow:
        0 0 20px rgba(39,206,186,.25),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}


.lg-meta-item:nth-child(5) .lg-meta-icon {

    background: #3960A8 !important;

    color: #FFFFFF !important;

    border-color: #3960A8 !important;

    box-shadow:
        0 0 20px rgba(255,174,55,.30),
        0 6px 18px rgba(180,105,25,.28),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}


/* ============================================================
   SVG
   ============================================================ */

.lg-meta-icon svg {

    width:
        23px !important;

    height:
        23px !important;

    color:
        #ffffff !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.8 !important;

    filter:
        drop-shadow(0 1px 5px rgba(255,255,255,.10)) !important;
}


/* ============================================================
   TEXT AREA
   ============================================================ */

.lg-meta-content {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    position:
        relative !important;

    z-index:
        3 !important;
}


/* ============================================================
   LABEL
   ============================================================ */

.lg-meta-content span {

    margin:
        0 0 5px !important;

    color:
        rgba(255,255,255,.52) !important;

    font-size:
        9px !important;

    font-weight:
        850 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        .02em !important;
}


/* ============================================================
   VALUE
   ============================================================ */

.lg-meta-content strong {

    color:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        950 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.015em !important;

    text-shadow:
        0 1px 8px rgba(255,255,255,.06) !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/* ============================================================
   HOVER — PREMIUM LIFT
   ============================================================ */

.lg-meta-item:hover {

    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.08) saturate(1.08) !important;

    border-color:
        rgba(255,255,255,.22) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 14px 30px rgba(0,0,0,.18) !important;
}


.lg-meta-item:hover .lg-meta-icon {

    transform:
        translateY(-1px)
        scale(1.06) !important;
}


/* ============================================================
   DESKTOP GRID
   ============================================================ */

@media (min-width: 1101px) {

    .lg-album-details-card {

        justify-self:
            end !important;

        margin-right:
            28px !important;
    }

}


/* ============================================================
   LARGE SCREEN
   ============================================================ */

@media (min-width: 1550px) {

    .lg-album-details-card {

        width:
            360px !important;

        min-width:
            360px !important;

        max-width:
            360px !important;

        min-height:
            500px !important;

        padding:
            26px !important;

        margin-right:
            32px !important;

        border-radius:
            32px !important;
    }


    .lg-meta-item {

        min-height:
            72px !important;

        padding:
            11px 15px !important;
    }


    .lg-meta-icon {

        width:
            48px !important;

        height:
            48px !important;

        min-width:
            48px !important;

        flex-basis:
            48px !important;
    }


    .lg-meta-content strong {

        font-size:
            13.5px !important;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .lg-album-details-card {

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        margin:
            20px 0 !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .lg-album-details-card {

        padding:
            18px !important;

        border-radius:
            24px !important;

        min-height:
            auto !important;
    }


    .lg-meta-item {

        min-height:
            66px !important;

        gap:
            12px !important;

        padding:
            9px 11px !important;

        border-radius:
            15px !important;
    }


    .lg-meta-icon {

        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        flex-basis:
            42px !important;

        border-radius:
            12px !important;
    }


    .lg-meta-icon svg {

        width:
            21px !important;

        height:
            21px !important;
    }


    .lg-meta-content strong {

        font-size:
            12px !important;
    }

}







/* ============================================================
   LYRICSGROOVE — FINAL META PANEL PREMIUM OVERRIDE
   FLOATING AURORA / LUXURY GLASS
   ============================================================ */


/* ------------------------------------------------------------
   HERO META PANEL — FLOATING POSITION
   ------------------------------------------------------------ */

.lg-album-details-card {

    /* FLOATING SPACE */
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    margin-right: 26px !important;

    /* SIZE */
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;

    min-height: 500px !important;

    padding: 24px !important;

    box-sizing: border-box !important;

    /* SHAPE */
    border-radius: 30px !important;

    /* PREMIUM BORDER */
    border: 1px solid transparent !important;

    background:
        linear-gradient(
            145deg,
            #0b071d 0%,
            #17102f 28%,
            #211446 55%,
            #100923 100%
        ) padding-box,

        linear-gradient(
            145deg,
            rgba(220,150,255,.72),
            rgba(129,88,255,.68),
            rgba(255,92,195,.45),
            rgba(104,77,255,.62)
        ) border-box !important;

    /* MULTI-LAYER GLOW */
    box-shadow:

        /* outer violet halo */
        0 0 0 1px rgba(146,103,255,.16),

        0 0 22px rgba(132,82,255,.22),

        0 0 55px rgba(170,77,255,.18),

        0 0 95px rgba(242,83,191,.10),

        /* depth */
        0 22px 55px rgba(12,5,34,.48),

        /* inner glass */
        inset 0 1px 0 rgba(255,255,255,.16),

        inset 0 -1px 0 rgba(255,255,255,.05) !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/* ------------------------------------------------------------
   OUTER PURPLE AURORA
   ------------------------------------------------------------ */

.lg-album-details-card::before {

    content: "" !important;

    position: absolute !important;

    width: 390px !important;
    height: 390px !important;

    top: -180px !important;
    right: -160px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(145,94,255,.48) 0%,
            rgba(123,76,255,.25) 30%,
            rgba(212,78,213,.11) 48%,
            transparent 72%
        ) !important;

    filter: blur(22px) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* ------------------------------------------------------------
   LOWER PINK AURORA
   ------------------------------------------------------------ */

.lg-album-details-card::after {

    content: "" !important;

    position: absolute !important;

    width: 330px !important;
    height: 330px !important;

    bottom: -170px !important;
    left: -150px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255,67,183,.36) 0%,
            rgba(211,66,196,.20) 35%,
            rgba(116,70,255,.12) 52%,
            transparent 74%
        ) !important;

    filter: blur(24px) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.lg-meta-card-header {

    position: relative !important;

    padding:
        2px 4px 18px !important;

    margin:
        0 0 13px !important;

    border-bottom:
        1px solid rgba(255,255,255,.12) !important;
}


/* glowing header separator */

.lg-meta-card-header::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    bottom: -1px !important;

    width: 95px !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            #ff5ac8,
            #9b6cff,
            transparent
        ) !important;

    box-shadow:
        0 0 10px rgba(219,86,218,.65) !important;
}


/* ------------------------------------------------------------
   HEADER TITLE
   ------------------------------------------------------------ */

.lg-meta-card-title {

    color: #ffffff !important;

    font-size: 22px !important;

    font-weight: 950 !important;

    letter-spacing: -.025em !important;

    line-height: 1.1 !important;

    text-shadow:
        0 2px 18px rgba(255,255,255,.08) !important;
}


/* ------------------------------------------------------------
   META LIST
   ------------------------------------------------------------ */

.lg-meta-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 11px !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ------------------------------------------------------------
   ALL META CARDS
   ------------------------------------------------------------ */

.lg-meta-item {

    position: relative !important;

    width: 100% !important;

    min-height: 72px !important;

    padding:
        11px 15px !important;

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

    box-sizing: border-box !important;

    border-radius: 17px !important;

    border: 1px solid transparent !important;

    overflow: hidden !important;

    isolation: isolate !important;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        filter .28s ease !important;
}


/* ------------------------------------------------------------
   GLASS SHINE
   ------------------------------------------------------------ */

.lg-meta-item::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.045) 22%,
            transparent 46%,
            rgba(255,255,255,.035) 100%
        ) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* ------------------------------------------------------------
   BOTTOM LIGHT LINE
   ------------------------------------------------------------ */

.lg-meta-item::after {

    content: "" !important;

    position: absolute !important;

    left: 12% !important;
    right: 12% !important;

    bottom: 0 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        ) !important;

    opacity: .65 !important;

    pointer-events: none !important;
}


/* ============================================================
   RELEASE — PURPLE
   ============================================================ */

.lg-meta-item:nth-child(1) {

    background:
        radial-gradient(
            190px 110px at 5% 50%,
            rgba(159,101,255,.38),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            rgba(111,67,204,.58),
            rgba(66,39,132,.50)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(205,152,255,.72),
            rgba(116,74,255,.42),
            rgba(255,255,255,.12)
        ) border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 7px 24px rgba(123,77,239,.18),
        0 0 20px rgba(140,89,255,.10) !important;
}


/* ============================================================
   GENRES — ROSE
   ============================================================ */

.lg-meta-item:nth-child(2) {

    background:
        radial-gradient(
            190px 110px at 5% 50%,
            rgba(255,74,177,.36),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            rgba(171,49,125,.58),
            rgba(94,35,93,.50)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(255,117,198,.75),
            rgba(213,53,160,.45),
            rgba(255,255,255,.11)
        ) border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 7px 24px rgba(231,55,157,.18),
        0 0 20px rgba(255,80,183,.10) !important;
}


/* ============================================================
   AGENCY — BLUE
   ============================================================ */

.lg-meta-item:nth-child(3) {

    background:
        radial-gradient(
            190px 110px at 5% 50%,
            rgba(63,145,255,.38),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            rgba(45,103,179,.58),
            rgba(28,55,108,.50)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(92,174,255,.75),
            rgba(58,103,218,.45),
            rgba(255,255,255,.10)
        ) border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 7px 24px rgba(54,123,238,.18),
        0 0 20px rgba(55,143,255,.10) !important;
}


/* ============================================================
   LANGUAGE — TEAL
   ============================================================ */

.lg-meta-item:nth-child(4) {

    background:
        radial-gradient(
            190px 110px at 5% 50%,
            rgba(38,211,191,.34),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            rgba(25,121,116,.58),
            rgba(19,70,72,.50)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(66,225,207,.72),
            rgba(26,169,163,.44),
            rgba(255,255,255,.10)
        ) border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 7px 24px rgba(29,176,164,.18),
        0 0 20px rgba(34,208,192,.10) !important;
}


/* ============================================================
   ORIGIN — AMBER
   ============================================================ */

.lg-meta-item:nth-child(5) {

    background:
        radial-gradient(
            190px 110px at 5% 50%,
            rgba(255,176,57,.34),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            rgba(142,88,34,.58),
            rgba(76,48,28,.50)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(255,191,85,.75),
            rgba(218,132,37,.45),
            rgba(255,255,255,.10)
        ) border-box !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 7px 24px rgba(214,140,40,.18),
        0 0 20px rgba(255,170,52,.10) !important;
}


/* ============================================================
   ICON
   ============================================================ */

.lg-meta-icon {

    flex:
        0 0 46px !important;

    width:
        46px !important;

    height:
        46px !important;

    min-width:
        46px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        14px !important;

    border:
        1px solid rgba(255,255,255,.24) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.055)
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 5px 18px rgba(0,0,0,.18) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease !important;
}


/* ============================================================
   SVG
   ============================================================ */

.lg-meta-icon svg {

    width:
        23px !important;

    height:
        23px !important;

    stroke:
        currentColor !important;

    color:
        #ffffff !important;

    stroke-width:
        1.8 !important;
}


/* ============================================================
   TEXT
   ============================================================ */

.lg-meta-content {

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;
}


/* label */

.lg-meta-content span {

    display:
        block !important;

    margin:
        0 0 5px !important;

    color:
        rgba(255,255,255,.58) !important;

    font-size:
        9px !important;

    font-weight:
        850 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        .025em !important;
}


/* value */

.lg-meta-content strong {

    display:
        block !important;

    color:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        950 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.012em !important;

    text-shadow:
        0 1px 10px rgba(255,255,255,.08) !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* ============================================================
   HOVER
   ============================================================ */

.lg-meta-item:hover {

    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.08) saturate(1.08) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 15px 32px rgba(0,0,0,.20),
        0 0 24px rgba(148,92,255,.13) !important;
}


.lg-meta-item:hover .lg-meta-icon {

    transform:
        scale(1.06) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 20px rgba(180,110,255,.22) !important;
}


/* ============================================================
   DESKTOP — EXTRA BREATHING ROOM
   ============================================================ */

@media (min-width: 1101px) {

    .lg-album-details-card {

        margin-top:
            18px !important;

        margin-bottom:
            18px !important;

        margin-right:
            30px !important;
    }

}


/* ============================================================
   VERY LARGE SCREENS
   ============================================================ */

@media (min-width: 1550px) {

    .lg-album-details-card {

        width:
            370px !important;

        min-width:
            370px !important;

        max-width:
            370px !important;

        min-height:
            510px !important;

        margin-top:
            20px !important;

        margin-bottom:
            20px !important;

        margin-right:
            34px !important;

        padding:
            26px !important;

        border-radius:
            32px !important;
    }


    .lg-meta-list {

        gap:
            12px !important;
    }


    .lg-meta-item {

        min-height:
            74px !important;

        padding:
            12px 16px !important;
    }


    .lg-meta-icon {

        width:
            48px !important;

        height:
            48px !important;

        min-width:
            48px !important;

        flex-basis:
            48px !important;
    }


    .lg-meta-content strong {

        font-size:
            13.5px !important;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .lg-album-details-card {

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        margin:
            20px 0 !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .lg-album-details-card {

        margin:
            16px 0 !important;

        padding:
            18px !important;

        border-radius:
            24px !important;

        min-height:
            auto !important;
    }


    .lg-meta-list {

        gap:
            9px !important;
    }


    .lg-meta-item {

        min-height:
            66px !important;

        padding:
            9px 11px !important;

        gap:
            12px !important;

        border-radius:
            15px !important;
    }


    .lg-meta-icon {

        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        flex-basis:
            42px !important;

        border-radius:
            12px !important;
    }


    .lg-meta-icon svg {

        width:
            21px !important;

        height:
            21px !important;
    }


    .lg-meta-content strong {

        font-size:
            12px !important;
    }

}


/* ============================================================
   LYRICSGROOVE — META PANEL ONLY
   TOP + BOTTOM SPACING FIX
   DO NOT CHANGE HORIZONTAL SIZE
   ============================================================ */

.lg-album-details-card {
    /* OUTER TOP / BOTTOM GAP ONLY */
    margin-top: 18px !important;
    margin-bottom: 18px !important;

    /* KEEP EXISTING LEFT / RIGHT POSITION */
    margin-left: 0 !important;
    margin-right: 30px !important;

    /* INNER TOP / BOTTOM SPACE */
    padding-top: 26px !important;
    padding-bottom: 26px !important;

    box-sizing: border-box !important;

    /* Keep the panel vertically centered */
    align-self: center !important;
}


/* ============================================================
   META LIST — ONLY VERTICAL GAP
   ============================================================ */

.lg-meta-list {
    gap: 11px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   HEADER — TOP BREATHING ROOM
   ============================================================ */

.lg-meta-card-header {
    margin-top: 0 !important;
    margin-bottom: 13px !important;
    padding-top: 2px !important;
    padding-bottom: 18px !important;
}


/* ============================================================
   LAST CARD — EXTRA BOTTOM BREATHING ROOM
   ============================================================ */

.lg-meta-item:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1101px) {

    .lg-album-details-card {
        margin-top: 20px !important;
        margin-bottom: 20px !important;

        margin-left: 0 !important;
        margin-right: 30px !important;

        padding-top: 28px !important;
        padding-bottom: 28px !important;

        align-self: center !important;
    }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1550px) {

    .lg-album-details-card {
        margin-top: 22px !important;
        margin-bottom: 22px !important;

        margin-left: 0 !important;
        margin-right: 34px !important;

        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1100px) {

    .lg-album-details-card {
        margin-top: 16px !important;
        margin-bottom: 16px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

}


/* ============================================================
   LYRICSGROOVE — FINAL HERO META PANEL / 5-CARD FIX
   ------------------------------------------------------------
   FIXES ONLY THE RIGHT-SIDE ARTIST & RELEASE SECTION
   • Shows all 5 meta cards completely
   • Prevents Origin card from being clipped
   • Prevents panel overlap/hidden content
   • Creates proper top + bottom breathing room
   • Keeps panel inside hero
   • Keeps existing card colours/design
   • Does not change hero left side
   • Does not change album cover
   ============================================================ */


@media (min-width: 1101px) {

	/* --------------------------------------------------------
	   HERO CONTAINER
	-------------------------------------------------------- */

	.lg-album-hero {

		/* Enough vertical space for:
		   heading + divider + 5 cards + gaps */

		min-height:
			590px !important;

		height:
			590px !important;

		/* IMPORTANT:
		   Do not clip the right meta section */

		overflow:
			visible !important;

		/* Keep children vertically centered */

		align-items:
			center !important;
	}


	/* --------------------------------------------------------
	   RIGHT META INFORMATION PANEL
	-------------------------------------------------------- */

	.lg-album-details-card {

		/* Allow the panel to determine its own height */

		height:
			auto !important;

		min-height:
			0 !important;

		max-height:
			none !important;

		/* VERY IMPORTANT:
		   The previous overflow:hidden was clipping
		   the fifth card. */

		overflow:
			visible !important;

		/* Proper breathing room */

		padding:
			26px !important;

		/* Keep panel away from hero edges */

		margin-top:
			0 !important;

		margin-bottom:
			0 !important;

		margin-right:
			28px !important;

		/* Keep it vertically centered */

		align-self:
			center !important;

		box-sizing:
			border-box !important;

		position:
			relative !important;

		z-index:
			30 !important;
	}


	/* --------------------------------------------------------
	   META LIST
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-list {

		display:
			flex !important;

		flex-direction:
			column !important;

		gap:
			10px !important;

		margin:
			0 !important;

		padding:
			0 !important;

		overflow:
			visible !important;
	}


	/* --------------------------------------------------------
	   EACH META CARD
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-item {

		position:
			relative !important;

		flex:
			0 0 auto !important;

		min-height:
			70px !important;

		height:
			70px !important;

		box-sizing:
			border-box !important;

		overflow:
			visible !important;
	}


	/* --------------------------------------------------------
	   LAST CARD — ORIGIN
	   Extra safety so it can never be clipped
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-item:last-child {

		margin-bottom:
			2px !important;

		flex-shrink:
			0 !important;

		overflow:
			visible !important;
	}


	/* --------------------------------------------------------
	   META TEXT
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-content {

		min-width:
			0 !important;

		overflow:
			visible !important;
	}


	/* --------------------------------------------------------
	   META VALUE
	   Prevent the value itself from being cut by a parent.
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-value {

		overflow:
			visible !important;
	}


	/* --------------------------------------------------------
	   ICON
	-------------------------------------------------------- */

	.lg-album-details-card .lg-meta-icon {

		flex:
			0 0 auto !important;
	}


	/* --------------------------------------------------------
	   PANEL BOTTOM BREATHING ROOM
	-------------------------------------------------------- */

	.lg-album-details-card::after {

		content:
			"" !important;

		display:
			block !important;

		height:
			2px !important;

		width:
			100% !important;
	}

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1550px) {

	.lg-album-hero {

		min-height:
			600px !important;

		height:
			600px !important;
	}


	.lg-album-details-card {

		margin-right:
			34px !important;

		padding:
			28px !important;
	}


	.lg-album-details-card .lg-meta-list {

		gap:
			11px !important;
	}


	.lg-album-details-card .lg-meta-item {

		min-height:
			72px !important;

		height:
			72px !important;
	}

}


/* ============================================================
   1101–1549 DESKTOP
   ============================================================ */

@media (max-width: 1549px) and (min-width: 1101px) {

	.lg-album-hero {

		min-height:
			590px !important;

		height:
			590px !important;
	}


	.lg-album-details-card {

		margin-right:
			28px !important;

		padding:
			24px !important;
	}


	.lg-album-details-card .lg-meta-item {

		min-height:
			68px !important;

		height:
			68px !important;
	}

}


/* ============================================================
   SAFETY OVERRIDE
   ------------------------------------------------------------
   Prevent any generic hero/card rule from clipping this
   specific section.
   ============================================================ */

@media (min-width: 1101px) {

	.lg-album-hero
	.lg-album-details-card,
	.lg-album-hero
	.lg-album-details-card * {

		-webkit-box-sizing:
			border-box !important;

		box-sizing:
			border-box !important;
	}


	.lg-album-hero
	.lg-album-details-card {

		overflow:
			visible !important;

		max-height:
			none !important;
	}

}


/* ============================================================
   LYRICSGROOVE — HERO GRADIENT CLEANUP
   ------------------------------------------------------------
   Removes unwanted global gradient / haze / overlay effects.
   Keeps the premium album hero gradient intact.
   ============================================================ */


/* ------------------------------------------------------------
   1. STOP GLOBAL PAGE GRADIENT / WASH EFFECT
   ------------------------------------------------------------ */

html,
body {

	background:
		#f7f7fc !important;

	background-image:
		none !important;

}


/* ------------------------------------------------------------
   2. REMOVE ANY FULL-PAGE PSEUDO OVERLAY
   ------------------------------------------------------------ */

body::before,
body::after {

	content:
		none !important;

	display:
		none !important;

	background:
		none !important;

	opacity:
		1 !important;

}


/* ------------------------------------------------------------
   3. KEEP HEADER CLEAN
   ------------------------------------------------------------ */

.site-header::before,
.site-header::after,
#masthead::before,
#masthead::after,
.header::before,
.header::after {

	content:
		none !important;

	display:
		none !important;

	background:
		none !important;

	opacity:
		1 !important;

}


/* ------------------------------------------------------------
   4. KEEP BREADCRUMB CLEAN
   ------------------------------------------------------------ */

.lg-album-breadcrumb::before,
.lg-album-breadcrumb::after,
.lg-breadcrumb::before,
.lg-breadcrumb::after {

	content:
		none !important;

	display:
		none !important;

	background:
		none !important;

}


/* ============================================================
   5. HERO — ONLY ONE BACKGROUND
   ============================================================ */

.lg-album-hero {

	position:
		relative !important;

	overflow:
		hidden !important;

	background:
		linear-gradient(
			110deg,
			#ffd7f2 0%,
			#f7eafa 25%,
			#eeeafa 48%,
			#ddd7ff 74%,
			#cfc5ff 100%
		) !important;

	opacity:
		1 !important;

	filter:
		none !important;

}


/* ------------------------------------------------------------
   6. REMOVE SECONDARY HERO OVERLAY
   ------------------------------------------------------------ */

.lg-album-hero::before {

	content:
		none !important;

	display:
		none !important;

	background:
		none !important;

	opacity:
		1 !important;

}


/* ------------------------------------------------------------
   7. REMOVE SECONDARY HERO AFTER-LAYER
   ------------------------------------------------------------ */

.lg-album-hero::after {

	content:
		none !important;

	display:
		none !important;

	background:
		none !important;

	opacity:
		1 !important;

}


/* ============================================================
   8. KEEP HERO ARTWORK VISIBLE
   ============================================================ */

.lg-album-hero .lg-hero-artwork {

	position:
		absolute !important;

	inset:
		0 !important;

	pointer-events:
		none !important;

	opacity:
		1 !important;

	filter:
		none !important;

}


/* ------------------------------------------------------------
   ARTWORK ELEMENTS
   ------------------------------------------------------------ */

.lg-album-hero .lg-music-note,
.lg-album-hero .lg-art-shape,
.lg-album-hero .lg-hero-decoration {

	opacity:
		1 !important;

	filter:
		none !important;

}


/* ============================================================
   9. HERO CONTENT MUST NOT BE FADED
   ============================================================ */

.lg-album-hero .lg-album-cover,
.lg-album-hero .lg-album-main,
.lg-album-hero .lg-album-details-card {

	opacity:
		1 !important;

	filter:
		none !important;
}


/* ============================================================
   10. RIGHT META PANEL
   ------------------------------------------------------------
   Keep its own premium dark gradient.
   It must NOT inherit the hero overlay.
   ============================================================ */

.lg-album-details-card {

	background:
		linear-gradient(
			145deg,
			#17102f 0%,
			#20134a 48%,
			#120d28 100%
		) !important;

	opacity:
		1 !important;

	filter:
		none !important;

}


/* ============================================================
   11. META CARD GRADIENTS
   ------------------------------------------------------------
   Keep individual colours strong.
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(1) {

	background:
		linear-gradient(
			135deg,
			#7045c8 0%,
			#49308b 100%
		) !important;

	opacity:
		1 !important;

}


.lg-album-details-card .lg-meta-item:nth-child(2) {

	background:
		linear-gradient(
			135deg,
			#c2388b 0%,
			#62205e 100%
		) !important;

	opacity:
		1 !important;

}


.lg-album-details-card .lg-meta-item:nth-child(3) {

	background:
		linear-gradient(
			135deg,
			#277bc7 0%,
			#263d78 100%
		) !important;

	opacity:
		1 !important;

}


.lg-album-details-card .lg-meta-item:nth-child(4) {

	background:
		linear-gradient(
			135deg,
			#159b91 0%,
			#164c58 100%
		) !important;

	opacity:
		1 !important;

}


.lg-album-details-card .lg-meta-item:nth-child(5) {

	background:
		#00226E !important;

	opacity:
		1 !important;

}


/* ============================================================
   12. PREVENT PARENT OPACITY FROM WASHING OUT HERO
   ============================================================ */

.lg-album-hero,
.lg-album-hero > *,
.lg-album-hero .lg-album-details-card,
.lg-album-hero .lg-meta-item {

	mix-blend-mode:
		normal !important;

}


/* ============================================================
   13. TRACKLIST / CONTENT BELOW HERO
   ------------------------------------------------------------
   No hero gradient should bleed into these sections.
   ============================================================ */

.lg-album-content,
.lg-album-main-content,
.lg-tracklist,
.lg-album-sidebar,
.lg-about-card,
.lg-highlights-card {

	background-image:
		none !important;

	filter:
		none !important;

	opacity:
		1 !important;

}


/* ============================================================
   14. IMPORTANT:
   DO NOT LET A GENERIC ALBUM WRAPPER ADD A GRADIENT
   ============================================================ */

.lg-album-page {

	background:
		#f7f7fc !important;

	background-image:
		none !important;

}


/* ============================================================
   15. HERO CORNERS
   ------------------------------------------------------------
   One clean border + one clean glow.
   ============================================================ */

.lg-album-hero {

	border:
		1px solid rgba(255,255,255,.88) !important;

	border-radius:
		28px !important;

	box-shadow:
		0 24px 70px rgba(96,72,180,.16),
		0 0 0 1px rgba(161,126,255,.14),
		0 0 55px rgba(202,126,255,.12) !important;

}


/* ============================================================
   16. PREVENT GLOW FROM ESCAPING AS A SECOND RECTANGLE
   ============================================================ */

.lg-album-hero > .lg-hero-glow,
.lg-album-hero > .lg-background-glow {

	pointer-events:
		none !important;

	opacity:
		.35 !important;

	border-radius:
		inherit !important;

}


/* ============================================================
   17. MOBILE / TABLET SAFETY
   ============================================================ */

@media (max-width: 1100px) {

	.lg-album-hero {

		background:
			linear-gradient(
				135deg,
				#ffd7f2 0%,
				#f2e8fb 50%,
				#d8d0ff 100%
			) !important;

	}

}























/* ============================================================
   LYRICSGROOVE — FINAL TABLET HERO RESPONSIVE SYSTEM
   ------------------------------------------------------------
   FIXES:
   • Meta panel hidden on portrait tablet
   • Meta panel overlapping on landscape tablet
   • Absolute-positioned meta panel
   • Fixed-height hero clipping
   • Cover/content collision
   • Buttons overlapping
   • All 5 meta cards visibility
   • Proper tablet spacing
   • Portrait + landscape layouts handled separately
   • Desktop and mobile are NOT changed
   ============================================================ */


/* ============================================================
   TABLET BASE
   701px — 1100px
   ============================================================ */

@media (min-width: 701px) and (max-width: 1100px) {

    /* --------------------------------------------------------
       PAGE SIDE SPACE
    -------------------------------------------------------- */

    .lg-single-album {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       HERO — RESET OLD DESKTOP/TABLET GRID
    -------------------------------------------------------- */

    .lg-album-hero {

        display: grid !important;

        grid-template-columns:
            minmax(250px, 34%)
            minmax(0, 1fr) !important;

        grid-template-areas:
            "cover content"
            "meta meta" !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        padding: 24px !important;

        gap: 22px !important;

        align-items: stretch !important;

        overflow: visible !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       COVER AREA
    -------------------------------------------------------- */

    .lg-album-hero-art,
    .lg-album-cover-wrap {

        grid-area: cover !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 320px !important;

        max-height: 390px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       ALBUM COVER
    -------------------------------------------------------- */

    .lg-album-cover {

        width: min(100%, 300px) !important;

        height: auto !important;

        aspect-ratio: 1 / 1 !important;

        min-width: 0 !important;

        min-height: 0 !important;

        max-width: 300px !important;

        max-height: 300px !important;

        object-fit: cover !important;

        flex: 0 0 auto !important;
    }


    /* --------------------------------------------------------
       MAIN INFORMATION AREA
    -------------------------------------------------------- */

    .lg-album-hero-content {

        grid-area: content !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 320px !important;

        max-height: none !important;

        padding:
            28px
            18px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        box-sizing: border-box !important;

        position: relative !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .lg-album-title {

        max-width: 100% !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        font-size:
            clamp(
                38px,
                5vw,
                58px
            ) !important;

        line-height: 1.02 !important;

        word-break: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .lg-album-artist-row {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        flex-wrap: nowrap !important;
    }


    /* --------------------------------------------------------
       ACTION BUTTONS
    -------------------------------------------------------- */

    .premium-album-actions {

        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 10px !important;

        align-items: stretch !important;

        overflow: visible !important;
    }


    .lg-hero-action {

        flex: 0 1 auto !important;

        max-width: 100% !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       RIGHT META PANEL
       CRITICAL FIX
    -------------------------------------------------------- */

    .lg-album-details-card {

        grid-area: meta !important;

        /* Kill old hidden state */
        display: block !important;

        /* Kill old absolute positioning */
        position: relative !important;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        transform: none !important;

        /* Kill desktop sizing */
        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        /* Proper spacing */
        margin:
            4px 0
            4px 0 !important;

        padding:
            22px !important;

        align-self: stretch !important;

        justify-self: stretch !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        z-index: 10 !important;
    }


    /* --------------------------------------------------------
       META HEADER
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-card-header {

        width: 100% !important;

        margin:
            0 0 14px !important;

        padding:
            0 0 14px !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       META LIST
       5 CARDS IN A ROW ON TABLET
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-list {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       META CARDS
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-item {

        width: 100% !important;

        min-width: 0 !important;

        min-height: 78px !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            10px !important;

        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        position: relative !important;
    }


    /* --------------------------------------------------------
       META ICON
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-icon {

        width: 42px !important;

        height: 42px !important;

        min-width: 42px !important;

        flex: 0 0 42px !important;

        box-sizing: border-box !important;
    }


    .lg-album-details-card .lg-meta-icon svg {

        width: 21px !important;

        height: 21px !important;
    }


    /* --------------------------------------------------------
       META CONTENT
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-content {

        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: hidden !important;
    }


    .lg-album-details-card .lg-meta-content span {

        font-size: 9px !important;

        line-height: 1.1 !important;

        margin-bottom: 4px !important;
    }


    .lg-album-details-card .lg-meta-content strong {

        display: block !important;

        max-width: 100% !important;

        font-size: 12px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }

}


/* ============================================================
   TABLET LANDSCAPE
   900px — 1100px
   ------------------------------------------------------------
   Keeps cover + information side-by-side.
   Meta panel sits BELOW them.
   Therefore NOTHING can overlap.
   ============================================================ */

@media (min-width: 900px) and (max-width: 1100px)
       and (orientation: landscape) {

    .lg-album-hero {

        grid-template-columns:
            minmax(260px, 31%)
            minmax(0, 1fr) !important;

        grid-template-areas:
            "cover content"
            "meta meta" !important;

        gap:
            20px !important;

        padding:
            22px !important;
    }


    .lg-album-hero-art,
    .lg-album-cover-wrap {

        min-height: 300px !important;

        max-height: 340px !important;
    }


    .lg-album-cover {

        max-width: 270px !important;

        max-height: 270px !important;
    }


    .lg-album-hero-content {

        min-height: 300px !important;

        padding:
            22px
            12px !important;

        justify-content: center !important;
    }


    .lg-album-title {

        font-size:
            clamp(
                38px,
                4.2vw,
                52px
            ) !important;
    }


    /* Buttons remain horizontal when possible */

    .premium-album-actions {

        flex-wrap: nowrap !important;

        gap: 8px !important;
    }


    .lg-hero-action {

        min-width: 0 !important;

        flex: 1 1 auto !important;
    }


    /* Full-width metadata underneath */

    .lg-album-details-card {

        width: 100% !important;

        margin:
            4px 0 !important;

        padding:
            18px !important;
    }


    .lg-album-details-card .lg-meta-list {

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }


    .lg-album-details-card .lg-meta-item {

        min-height: 72px !important;

        padding:
            9px !important;

        gap: 8px !important;
    }


    .lg-album-details-card .lg-meta-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        flex-basis: 40px !important;
    }


    .lg-album-details-card .lg-meta-icon svg {

        width: 20px !important;

        height: 20px !important;
    }


    .lg-album-details-card .lg-meta-content strong {

        font-size: 11px !important;
    }
}


/* ============================================================
   TABLET PORTRAIT
   701px — 899px
   ------------------------------------------------------------
   Everything becomes vertical:
   COVER
   ↓
   ALBUM INFORMATION
   ↓
   5 META CARDS
   ============================================================ */

@media (min-width: 701px) and (max-width: 899px)
       and (orientation: portrait) {

    .lg-album-hero {

        display: grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-areas:
            "cover"
            "content"
            "meta" !important;

        gap:
            20px !important;

        padding:
            22px !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .lg-album-hero-art,
    .lg-album-cover-wrap {

        width: 100% !important;

        min-height: 330px !important;

        max-height: 390px !important;

        height: auto !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;
    }


    .lg-album-cover {

        width:
            min(72vw, 330px) !important;

        height:
            min(72vw, 330px) !important;

        max-width: 330px !important;

        max-height: 330px !important;
    }


    /* --------------------------------------------------------
       CONTENT
    -------------------------------------------------------- */

    .lg-album-hero-content {

        width: 100% !important;

        min-height: 0 !important;

        height: auto !important;

        padding:
            10px
            18px
            20px !important;

        justify-content: flex-start !important;
    }


    .lg-album-title {

        font-size:
            clamp(
                38px,
                7vw,
                58px
            ) !important;

        line-height: 1.04 !important;

        max-width: 100% !important;
    }


    .lg-album-artist-row {

        margin-bottom: 14px !important;
    }


    /* --------------------------------------------------------
       ACTION BUTTONS
    -------------------------------------------------------- */

    .premium-album-actions {

        width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: flex-start !important;

        gap: 10px !important;
    }


    .lg-hero-action-primary {

        flex: 1 1 100% !important;

        min-width: 0 !important;

        width: 100% !important;
    }


    .lg-track-count-action,
    .lg-loved-by-fans,
    .lg-hero-action-views {

        flex: 1 1 0 !important;

        min-width: 0 !important;

        max-width: none !important;
    }


    /* --------------------------------------------------------
       META PANEL — NOW VISIBLE
    -------------------------------------------------------- */

    .lg-album-details-card {

        display: block !important;

        position: relative !important;

        top: auto !important;

        right: auto !important;

        left: auto !important;

        transform: none !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin:
            4px 0 !important;

        padding:
            20px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       META LIST
       2 COLUMNS — MUCH BETTER FOR PORTRAIT TABLET
    -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-list {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            10px !important;

        width: 100% !important;

        overflow: visible !important;
    }


    .lg-album-details-card .lg-meta-item {

        min-height: 76px !important;

        height: auto !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            10px
            12px !important;

        box-sizing: border-box !important;
    }


    /* Origin occupies full width */

    .lg-album-details-card .lg-meta-item:nth-child(5) {

        grid-column:
            1 / -1 !important;
    }


    .lg-album-details-card .lg-meta-icon {

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        flex-basis: 44px !important;
    }


    .lg-album-details-card .lg-meta-icon svg {

        width: 22px !important;

        height: 22px !important;
    }


    .lg-album-details-card .lg-meta-content strong {

        font-size: 12px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }
}


/* ============================================================
   TABLET — PREVENT ANY OLD ABSOLUTE POSITIONING
   ============================================================ */

@media (min-width: 701px) and (max-width: 1100px) {

    .lg-album-details-card,
    .lg-album-details-card * {

        box-sizing: border-box !important;
    }


    .lg-album-details-card {

        float: none !important;

        clear: both !important;

        inset: auto !important;
    }


    /* Never allow old hero height rules to clip content */

    .lg-album-hero,
    .lg-album-hero-inner,
    .lg-album-hero-content {

        max-height: none !important;

        overflow: visible !important;
    }


    /* Prevent decorations from blocking content */

    .lg-hero-artwork {

        pointer-events: none !important;
    }


    /* Keep decorative artwork behind everything */

    .lg-hero-artwork,
    .lg-music-note,
    .lg-art-shape,
    .lg-hero-decoration {

        z-index: 0 !important;
    }


    .lg-album-hero-art,
    .lg-album-hero-content,
    .lg-album-details-card {

        z-index: 2 !important;
    }
}


/* ============================================================
   TABLET — FINAL HERO BOTTOM SPACE
   ============================================================ */

@media (min-width: 701px) and (max-width: 1100px) {

    .lg-album-hero {

        margin-bottom:
            24px !important;

        border-radius:
            26px !important;
    }


    .lg-album-details-card {

        margin-bottom:
            2px !important;
    }
}














/* ============================================================
   LYRICSGROOVE — LANDSCAPE TABLET FINAL FIX
   ------------------------------------------------------------
   IMPORTANT:
   Portrait tablet is already working.
   This block ONLY targets wider LANDSCAPE TABLETS.

   FIXES:
   • Prevents desktop 3-column layout from crushing content
   • Keeps album cover visible
   • Keeps title/artist/buttons visible
   • Keeps ALL 5 meta cards visible
   • Removes absolute positioning
   • Prevents meta panel overlap
   • Gives hero enough vertical space
   • Keeps meta panel inside hero
   • Adds proper left/right/top/bottom breathing room
   ============================================================ */


@media
(min-width: 1101px)
and (max-width: 1400px)
and (orientation: landscape) {


    /* ========================================================
       PAGE WIDTH
       ======================================================== */

    .lg-single-album {

        width: 100% !important;

        max-width: none !important;

        padding-left: 24px !important;

        padding-right: 24px !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       HERO — COMPLETE LANDSCAPE TABLET RESET
       ======================================================== */

    .lg-album-hero {

        display: grid !important;

        grid-template-columns:
            300px
            minmax(0, 1fr)
            330px !important;

        grid-template-areas:
            "art content meta" !important;

        column-gap: 22px !important;

        row-gap: 0 !important;

        width: 100% !important;

        height: auto !important;

        min-height: 560px !important;

        max-height: none !important;

        padding: 20px !important;

        box-sizing: border-box !important;

        align-items: center !important;

        overflow: visible !important;

        position: relative !important;
    }


    /* ========================================================
       ALBUM ART
       ======================================================== */

    .lg-album-hero-art {

        grid-area: art !important;

        width: 300px !important;

        min-width: 300px !important;

        max-width: 300px !important;

        height: 100% !important;

        min-height: 520px !important;

        max-height: none !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    .lg-album-cover-wrap {

        width: 300px !important;

        min-width: 300px !important;

        height: auto !important;

        min-height: 300px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    .lg-album-cover {

        width: 285px !important;

        height: 285px !important;

        min-width: 285px !important;

        min-height: 285px !important;

        max-width: 285px !important;

        max-height: 285px !important;

        object-fit: cover !important;

        flex: 0 0 auto !important;
    }


    /* ========================================================
       MAIN ALBUM INFORMATION
       ======================================================== */

    .lg-album-hero-content {

        grid-area: content !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 500px !important;

        max-height: none !important;

        padding:
            25px
            8px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: flex-start !important;

        box-sizing: border-box !important;

        position: relative !important;

        overflow: visible !important;
    }


    /* ========================================================
       KICKER
       ======================================================== */

    .lg-album-kicker {

        margin-bottom: 14px !important;

        flex: 0 0 auto !important;
    }


    /* ========================================================
       TITLE
       ======================================================== */

    .lg-album-title {

        width: 100% !important;

        max-width: 100% !important;

        margin:
            0
            0
            20px !important;

        font-size:
            clamp(
                42px,
                4.2vw,
                58px
            ) !important;

        line-height: 1.02 !important;

        letter-spacing: -.045em !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .lg-album-title span {

        font-size:
            clamp(
                20px,
                2vw,
                27px
            ) !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       ARTIST
       ======================================================== */

    .lg-album-artist-row {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        margin-bottom: 20px !important;

        gap: 11px !important;
    }


    .lg-album-artist-avatar {

        width: 50px !important;

        height: 50px !important;

        min-width: 50px !important;

        flex-basis: 50px !important;
    }


    .lg-album-artist-name {

        min-width: 0 !important;

        flex: 1 1 auto !important;
    }


    .lg-album-artist-name a {

        font-size: 18px !important;

        white-space: nowrap !important;
    }


    /* ========================================================
       ACTION BUTTONS
       ======================================================== */

    .premium-album-actions {

        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 10px !important;

        align-items: stretch !important;

        overflow: visible !important;
    }


    .lg-hero-action {

        min-height: 55px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;

        flex: 0 1 auto !important;
    }


    .lg-hero-action-primary {

        min-width: 185px !important;
    }


    .lg-track-count-action {

        min-width: 115px !important;
    }


    .lg-loved-by-fans,
    .lg-hero-action-views {

        min-width: 160px !important;
    }


    /* ========================================================
       META PANEL — CRITICAL
       ======================================================== */

    .lg-album-details-card {

        grid-area: meta !important;

        /* CANCEL OLD ABSOLUTE POSITIONING */

        position: relative !important;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        transform: none !important;

        float: none !important;

        inset: auto !important;


        /* WIDTH */

        width: 330px !important;

        min-width: 330px !important;

        max-width: 330px !important;


        /* HEIGHT */

        height: auto !important;

        min-height: 500px !important;

        max-height: none !important;


        /* SPACING */

        margin:
            0
            0
            0
            auto !important;

        padding:
            20px !important;


        /* KEEP IT INSIDE HERO */

        align-self: center !important;

        justify-self: end !important;


        box-sizing: border-box !important;

        overflow: visible !important;

        z-index: 30 !important;
    }


    /* ========================================================
       META HEADER
       ======================================================== */

    .lg-album-details-card .lg-meta-card-header {

        width: 100% !important;

        margin-bottom: 14px !important;

        padding-bottom: 12px !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       FIVE META CARDS
       ======================================================== */

    .lg-album-details-card .lg-meta-list {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 9px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    .lg-album-details-card .lg-meta-item {

        width: 100% !important;

        min-width: 0 !important;

        min-height: 68px !important;

        height: 68px !important;

        flex:
            0
            0
            68px !important;

        margin: 0 !important;

        padding:
            9px
            12px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        position: relative !important;
    }


    /* ========================================================
       META ICON
       ======================================================== */

    .lg-album-details-card .lg-meta-icon {

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        flex:
            0
            0
            44px !important;

        box-sizing: border-box !important;
    }


    .lg-album-details-card .lg-meta-icon svg {

        width: 22px !important;

        height: 22px !important;

        max-width: 22px !important;

        max-height: 22px !important;
    }


    /* ========================================================
       META TEXT
       ======================================================== */

    .lg-album-details-card .lg-meta-content {

        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: hidden !important;
    }


    .lg-album-details-card .lg-meta-content span {

        display: block !important;

        margin-bottom: 4px !important;

        font-size: 9px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    .lg-album-details-card .lg-meta-content strong {

        display: block !important;

        max-width: 100% !important;

        font-size: 12px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* ========================================================
       ABSOLUTELY NO CLIPPING FROM HERO CHILDREN
       ======================================================== */

    .lg-album-hero,
    .lg-album-hero-art,
    .lg-album-cover-wrap,
    .lg-album-hero-content,
    .lg-album-details-card {

        overflow: visible !important;

        max-height: none !important;
    }


    /* ========================================================
       DECORATIVE ARTWORK STAYS BEHIND CONTENT
       ======================================================== */

    .lg-hero-artwork,
    .lg-music-note,
    .lg-art-shape,
    .lg-hero-decoration {

        z-index: 0 !important;

        pointer-events: none !important;
    }


    .lg-album-hero-art,
    .lg-album-hero-content,
    .lg-album-details-card {

        z-index: 2 !important;
    }


    /* ========================================================
       HERO BOTTOM BREATHING ROOM
       ======================================================== */

    .lg-album-hero {

        margin-bottom: 24px !important;

        border-radius: 28px !important;
    }
}


/* ============================================================
   LANDSCAPE TABLET — NARROWER VERSION
   1101–1199px
   ------------------------------------------------------------
   At this width the 3-column version is too tight, so the
   metadata moves BELOW the cover/content.
   ============================================================ */

@media
(min-width: 1101px)
and (max-width: 1199px)
and (orientation: landscape) {

    .lg-album-hero {

        grid-template-columns:
            290px
            minmax(0, 1fr) !important;

        grid-template-areas:
            "art content"
            "meta meta" !important;

        min-height: 0 !important;

        padding: 20px !important;

        row-gap: 18px !important;
    }


    .lg-album-hero-art {

        width: 290px !important;

        min-width: 290px !important;

        max-width: 290px !important;

        min-height: 400px !important;
    }


    .lg-album-cover-wrap {

        width: 290px !important;

        min-width: 290px !important;
    }


    .lg-album-cover {

        width: 260px !important;

        height: 260px !important;

        min-width: 260px !important;

        min-height: 260px !important;
    }


    .lg-album-hero-content {

        min-height: 400px !important;

        padding:
            20px
            10px !important;
    }


    .lg-album-details-card {

        grid-area: meta !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 18px !important;
    }


    .lg-album-details-card .lg-meta-list {

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0,1fr)) !important;

        gap: 8px !important;
    }


    .lg-album-details-card .lg-meta-item {

        min-height: 70px !important;

        height: 70px !important;

        flex: none !important;

        padding: 8px !important;
    }


    .lg-album-details-card .lg-meta-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        flex-basis: 40px !important;
    }


    .lg-album-details-card .lg-meta-content strong {

        font-size: 10px !important;
    }
}










/* ============================================================
   LYRICSGROOVE — MOBILE HERO META FIX
   ------------------------------------------------------------
   Keeps the existing mobile hero design.
   ONLY restores and restructures the 5 meta information cards.
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .lg-album-hero {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 28px 18px 28px !important;

        overflow: visible !important;

        box-sizing: border-box !important;

        gap: 0 !important;
    }


    /* --------------------------------------------------------
       ALBUM COVER
       -------------------------------------------------------- */

    .lg-album-hero-art {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        margin: 0 auto 34px !important;

        position: relative !important;

        overflow: visible !important;
    }


    .lg-album-cover-wrap {
        width: min(86vw, 400px) !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 auto !important;

        box-sizing: border-box !important;
    }


    .lg-album-cover {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 100% !important;
        max-height: none !important;
    }


    /* --------------------------------------------------------
       MAIN HERO CONTENT
       -------------------------------------------------------- */

    .lg-album-hero-content {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        height: auto !important;
        max-height: none !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       ALBUM LABEL
       -------------------------------------------------------- */

    .lg-album-kicker {
        margin-bottom: 24px !important;
    }


    /* --------------------------------------------------------
       TITLE
       -------------------------------------------------------- */

    .lg-album-title {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 12px !important;

        font-size: clamp(34px, 9vw, 48px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.045em !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .lg-album-title span {
        display: block !important;

        margin-top: 8px !important;

        font-size: 20px !important;

        line-height: 1.2 !important;
    }


    /* --------------------------------------------------------
       ARTIST
       -------------------------------------------------------- */

    .lg-album-artist-row {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        margin: 18px 0 26px !important;

        gap: 12px !important;
    }


    .lg-album-artist-avatar {
        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;

        flex: 0 0 58px !important;
    }


    .lg-album-artist-name {
        min-width: 0 !important;

        flex: 1 1 auto !important;
    }


    .lg-album-artist-name a {
        font-size: 22px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* --------------------------------------------------------
       ACTION BUTTONS
       -------------------------------------------------------- */

    .premium-album-actions {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 12px !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    .lg-hero-action {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 62px !important;

        height: 62px !important;

        flex: 0 0 62px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }


    .lg-hero-action-primary {
        width: 100% !important;
    }


    .lg-track-count-action,
    .lg-loved-by-fans,
    .lg-hero-action-views {
        width: auto !important;

        min-width: 0 !important;
    }


    /* Keep Track + Loved buttons beside each other */

    .lg-hero-action:not(.lg-hero-action-primary) {
        width: calc(50% - 6px) !important;
    }


    .premium-album-actions {
        flex-direction: row !important;

        flex-wrap: wrap !important;
    }


    .premium-album-actions .lg-hero-action-primary {
        width: 100% !important;

        flex-basis: 100% !important;
    }


    /* --------------------------------------------------------
       ★ META INFORMATION PANEL
       --------------------------------------------------------
       THIS IS THE IMPORTANT FIX.
       Some earlier mobile CSS hides this panel.
       We explicitly restore it.
       -------------------------------------------------------- */

    .lg-album-details-card {
        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        float: none !important;

        order: initial !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin: 34px 0 0 !important;

        padding: 20px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        z-index: 10 !important;

        border-radius: 24px !important;
    }


    /* --------------------------------------------------------
       META HEADER
       -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-card-header {
        display: block !important;

        width: 100% !important;

        margin: 0 0 16px !important;

        padding: 0 0 14px !important;

        box-sizing: border-box !important;
    }


    .lg-album-details-card .lg-meta-card-header h3,
    .lg-album-details-card .lg-meta-card-header .lg-meta-title {
        font-size: 20px !important;

        line-height: 1.2 !important;
    }


    /* --------------------------------------------------------
       FIVE META INFORMATION CARDS
       -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-list {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    .lg-album-details-card .lg-meta-item {
        display: flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: 72px !important;

        min-height: 72px !important;

        max-height: none !important;

        flex: 0 0 72px !important;

        margin: 0 !important;

        padding: 10px 14px !important;

        align-items: center !important;

        gap: 12px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 16px !important;
    }


    /* --------------------------------------------------------
       META ICON
       -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-icon {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;

        height: 46px !important;

        min-width: 46px !important;

        max-width: 46px !important;

        flex: 0 0 46px !important;

        box-sizing: border-box !important;
    }


    .lg-album-details-card .lg-meta-icon svg {
        width: 22px !important;

        height: 22px !important;

        max-width: 22px !important;

        max-height: 22px !important;
    }


    /* --------------------------------------------------------
       META TEXT
       -------------------------------------------------------- */

    .lg-album-details-card .lg-meta-content {
        display: block !important;

        min-width: 0 !important;

        width: auto !important;

        flex: 1 1 auto !important;

        overflow: hidden !important;
    }


    .lg-album-details-card .lg-meta-content span {
        display: block !important;

        margin: 0 0 4px !important;

        font-size: 10px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    .lg-album-details-card .lg-meta-content strong {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        font-size: 14px !important;

        line-height: 1.25 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* --------------------------------------------------------
       IMPORTANT:
       Remove any old mobile rules that force the meta panel
       to disappear.
       -------------------------------------------------------- */

    .lg-album-details-card[style] {
        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /* --------------------------------------------------------
       HERO MUST NOT CLIP THE META PANEL
       -------------------------------------------------------- */

    .lg-album-hero,
    .lg-album-hero-art,
    .lg-album-cover-wrap,
    .lg-album-hero-content {
        overflow: visible !important;

        max-height: none !important;
    }


    /* --------------------------------------------------------
       EXTRA BOTTOM SPACE
       -------------------------------------------------------- */

    .lg-album-hero {
        margin-bottom: 28px !important;

        padding-bottom: 28px !important;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

    .lg-album-hero {
        padding-left: 14px !important;

        padding-right: 14px !important;
    }


    .lg-album-cover-wrap {
        width: min(88vw, 360px) !important;
    }


    .lg-album-title {
        font-size: 34px !important;
    }


    .lg-album-artist-name a {
        font-size: 20px !important;
    }


    .lg-album-details-card {
        padding: 16px !important;

        border-radius: 20px !important;
    }


    .lg-album-details-card .lg-meta-item {
        height: 68px !important;

        min-height: 68px !important;

        flex-basis: 68px !important;

        padding-left: 11px !important;

        padding-right: 11px !important;
    }


    .lg-album-details-card .lg-meta-icon {
        width: 42px !important;

        height: 42px !important;

        min-width: 42px !important;

        flex-basis: 42px !important;
    }


    .lg-album-details-card .lg-meta-content strong {
        font-size: 13px !important;
    }
}




/* ============================================================
   LYRICSGROOVE — MOBILE HERO ACTION BUTTON FIX
   Track + Fans buttons become full-width stacked cards
   ============================================================ */

@media (max-width: 767px) {

    /* Main action container */
    .premium-album-actions {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        flex-wrap: nowrap !important;

        gap: 14px !important;

        margin-top: 8px !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       VIEW ARTIST PROFILE
       -------------------------------------------------------- */

    .premium-album-actions .lg-hero-action-primary,
    .premium-album-actions .lg-hero-action-primary.lg-hero-action {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 100% !important;

        flex: 0 0 auto !important;

        height: 68px !important;
        min-height: 68px !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       TRACK COUNT
       -------------------------------------------------------- */

    .premium-album-actions .lg-track-count-action,
    .premium-album-actions .lg-track-count,
    .premium-album-actions .lg-hero-action-track {

        width: 100% !important;
        max-width: 100% !important;

        min-width: 100% !important;

        flex: 0 0 auto !important;

        height: 68px !important;
        min-height: 68px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* --------------------------------------------------------
       FANS LOVED
       -------------------------------------------------------- */

    .premium-album-actions .lg-loved-by-fans,
    .premium-album-actions .lg-loved-button,
    .premium-album-actions .lg-hero-action-views {

        width: 100% !important;
        max-width: 100% !important;

        min-width: 100% !important;

        flex: 0 0 auto !important;

        height: 68px !important;
        min-height: 68px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       FORCE ALL THREE DIRECT BUTTONS TO STACK
       -------------------------------------------------------- */

    .premium-album-actions > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;

        flex: 0 0 auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* --------------------------------------------------------
       BUTTON CONTENT
       -------------------------------------------------------- */

    .premium-album-actions .lg-hero-action {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;

        padding: 10px 18px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    /* Icon */
    .premium-album-actions .lg-hero-action svg {
        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;

        flex: 0 0 26px !important;
    }


    /* Icon box */
    .premium-album-actions .lg-hero-action .lg-action-icon,
    .premium-album-actions .lg-hero-action .lg-action-icon-wrap {

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 44px !important;
    }


    /* --------------------------------------------------------
       NUMBER / COUNTER
       -------------------------------------------------------- */

    .premium-album-actions .lg-action-count,
    .premium-album-actions .lg-track-count-number,
    .premium-album-actions .lg-loved-count {

        font-size: 22px !important;

        line-height: 1 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

        flex: 0 0 auto !important;
    }


    /* --------------------------------------------------------
       TEXT
       -------------------------------------------------------- */

    .premium-album-actions .lg-action-text,
    .premium-album-actions .lg-track-text,
    .premium-album-actions .lg-loved-text {

        font-size: 16px !important;

        line-height: 1.15 !important;

        font-weight: 700 !important;

        white-space: nowrap !important;

        overflow: visible !important;

        text-overflow: clip !important;

        flex: 0 0 auto !important;
    }


    /* --------------------------------------------------------
       FANS BUTTON — NEVER CLIP THE TEXT
       -------------------------------------------------------- */

    .premium-album-actions .lg-loved-by-fans,
    .premium-album-actions .lg-hero-action-views {

        overflow: visible !important;

        white-space: nowrap !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* --------------------------------------------------------
       REMOVE OLD 50/50 MOBILE RULE
       -------------------------------------------------------- */

    .premium-album-actions .lg-hero-action:not(.lg-hero-action-primary) {

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        flex-basis: auto !important;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

    .premium-album-actions {
        gap: 12px !important;
    }


    .premium-album-actions .lg-hero-action,
    .premium-album-actions .lg-track-count-action,
    .premium-album-actions .lg-loved-by-fans,
    .premium-album-actions .lg-hero-action-views {

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 66px !important;
        min-height: 66px !important;
    }


    .premium-album-actions .lg-action-count,
    .premium-album-actions .lg-track-count-number,
    .premium-album-actions .lg-loved-count {

        font-size: 21px !important;
    }


    .premium-album-actions .lg-action-text,
    .premium-album-actions .lg-track-text,
    .premium-album-actions .lg-loved-text {

        font-size: 15px !important;
    }
}




/* ============================================================
   LYRICSGROOVE
   PREMIUM LIGHT META CARDS
   Desktop + Tablet + Mobile
   ------------------------------------------------------------
   DO NOT REMOVE THE EXISTING META RESPONSIVE CSS.
   This block ONLY changes the visual appearance.
   ============================================================ */


/* ============================================================
   META CARD BASE
   ============================================================ */

.lg-album-details-card .lg-meta-item {
    position: relative !important;

    color: #17122f !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;

    box-shadow:
        0 8px 22px rgba(60, 35, 120, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;

    overflow: hidden !important;
}


/* Premium inner highlight */

.lg-album-details-card .lg-meta-item::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.10) 42%,
            rgba(255,255,255,0.00) 70%
        ) !important;

    opacity: 0.75 !important;
}


/* Keep content above the highlight */

.lg-album-details-card .lg-meta-item > * {
    position: relative !important;

    z-index: 2 !important;
}


/* Premium hover */

.lg-album-details-card .lg-meta-item:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 12px 30px rgba(60, 35, 120, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}


/* ============================================================
   01 — RELEASE DATE
   LIGHT LAVENDER / VIOLET
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            #f1e8ff 0%,
            #ddd0ff 48%,
            #cbb8ff 100%
        ) !important;

    border-color: rgba(139, 92, 246, 0.38) !important;

    box-shadow:
        0 8px 26px rgba(124, 79, 220, 0.16),
        0 0 18px rgba(168, 130, 255, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}


/* ============================================================
   02 — GENRES
   LIGHT ROSE / PINK
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            #ffe8f4 0%,
            #f8c9e1 48%,
            #efacd0 100%
        ) !important;

    border-color: rgba(225, 68, 145, 0.34) !important;

    box-shadow:
        0 8px 26px rgba(225, 68, 145, 0.15),
        0 0 20px rgba(245, 110, 177, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}


/* ============================================================
   03 — AGENCY
   LIGHT BLUE / SKY
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            #e5f3ff 0%,
            #c8e5ff 48%,
            #a9d4ff 100%
        ) !important;

    border-color: rgba(42, 126, 221, 0.34) !important;

    box-shadow:
        0 8px 26px rgba(47, 125, 220, 0.15),
        0 0 20px rgba(92, 170, 255, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
}


/* ============================================================
   04 — LANGUAGE
   LIGHT MINT / TEAL
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            #e2fbf7 0%,
            #c1eee8 48%,
            #9eddd5 100%
        ) !important;

    border-color: rgba(24, 151, 139, 0.34) !important;

    box-shadow:
        0 8px 26px rgba(23, 146, 136, 0.15),
        0 0 20px rgba(57, 194, 178, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
}


/* ============================================================
   05 — ORIGIN
   LIGHT ORANGE / AMBER
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(5) {
    background:
        linear-gradient(
            135deg,
            #fff2df 0%,
            #ffdcae 48%,
            #ffc77c 100%
        ) !important;

    border-color: rgba(218, 137, 35, 0.38) !important;

    box-shadow:
        0 8px 26px rgba(211, 130, 35, 0.16),
        0 0 20px rgba(255, 177, 76, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
}


/* ============================================================
   META TEXT — DARK PREMIUM
   ============================================================ */

.lg-album-details-card .lg-meta-content span {
    color: #514a68 !important;

    font-weight: 700 !important;

    letter-spacing: 0.01em !important;
}


.lg-album-details-card .lg-meta-content strong {
    color: #17122f !important;

    font-weight: 800 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.45) !important;
}


/* ============================================================
   ICON CONTAINERS
   LIGHTER THAN CARD + DARK ICON
   ============================================================ */

.lg-album-details-card .lg-meta-icon {
    position: relative !important;

    background: rgba(255,255,255,0.48) !important;

    border: 1px solid rgba(255,255,255,0.72) !important;

    box-shadow:
        0 5px 15px rgba(50, 35, 90, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* Dark SVG icons */

.lg-album-details-card .lg-meta-icon svg,
.lg-album-details-card .lg-meta-icon svg *,
.lg-album-details-card .lg-meta-icon i {
    color: #241844 !important;

    stroke: #241844 !important;

    fill: none !important;
}


/* Icon hover */

.lg-album-details-card .lg-meta-item:hover .lg-meta-icon {
    transform: scale(1.06) !important;

    background: rgba(255,255,255,0.68) !important;

    box-shadow:
        0 7px 20px rgba(60, 35, 120, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}


/* ============================================================
   INDIVIDUAL ICON ACCENT COLORS
   Dark enough for light cards
   ============================================================ */

.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon {
    color: #5b35a8 !important;
}

.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon svg * {
    stroke: #5b35a8 !important;
}


.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon {
    color: #a32668 !important;
}

.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon svg * {
    stroke: #a32668 !important;
}


.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon {
    color: #155ea8 !important;
}

.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon svg * {
    stroke: #155ea8 !important;
}


.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon {
    color: #08776f !important;
}

.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon svg * {
    stroke: #08776f !important;
}


.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon {
    color: #a65b0a !important;
}

.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon svg * {
    stroke: #a65b0a !important;
}


/* ============================================================
   META PANEL — KEEP DARK BUT GIVE IT A PREMIUM PURPLE GLOW
   ============================================================ */

.lg-album-details-card {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(150, 92, 255, 0.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(235, 70, 175, 0.18),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #211545 0%,
            #17102f 55%,
            #110c24 100%
        ) !important;

    border: 1px solid rgba(190, 153, 255, 0.42) !important;

    box-shadow:
        0 18px 50px rgba(50, 25, 100, 0.24),
        0 0 35px rgba(137, 88, 235, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}


/* ============================================================
   RESPONSIVE SAFETY
   Do not alter the working dimensions/layout.
   ============================================================ */

@media (max-width: 767px) {

    .lg-album-details-card .lg-meta-item {
        color: #17122f !important;
    }

    .lg-album-details-card .lg-meta-content strong {
        color: #17122f !important;
    }

    .lg-album-details-card .lg-meta-content span {
        color: #514a68 !important;
    }

}


@media (min-width: 768px) and (max-width: 1100px) {

    .lg-album-details-card .lg-meta-item {
        color: #17122f !important;
    }

    .lg-album-details-card .lg-meta-content strong {
        color: #17122f !important;
    }

    .lg-album-details-card .lg-meta-content span {
        color: #514a68 !important;
    }

}







/* ============================================================
   META CARD ICON COLORS — FINAL
   ============================================================ */

/* Base icon container */
.lg-album-details-card .lg-meta-icon {
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
}


/* ------------------------------------------------------------
   RELEASE DATE — Purple
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon {
    background: #d8c2ff !important;
    border-color: #b993f5 !important;
    color: #5d2ca8 !important;
}

.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(1) .lg-meta-icon svg * {
    stroke: #5d2ca8 !important;
    color: #5d2ca8 !important;
}


/* ------------------------------------------------------------
   GENRES — Rose / Pink
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon {
    background: #f3b4d5 !important;
    border-color: #df7db2 !important;
    color: #9b245f !important;
}

.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(2) .lg-meta-icon svg * {
    stroke: #9b245f !important;
    color: #9b245f !important;
}


/* ------------------------------------------------------------
   AGENCY — Blue
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon {
    background: #a9d5ff !important;
    border-color: #69b2ef !important;
    color: #145b9d !important;
}

.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(3) .lg-meta-icon svg * {
    stroke: #145b9d !important;
    color: #145b9d !important;
}


/* ------------------------------------------------------------
   LANGUAGE — Teal
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon {
    background: #a5e3dc !important;
    border-color: #58c5b9 !important;
    color: #08756c !important;
}

.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(4) .lg-meta-icon svg * {
    stroke: #08756c !important;
    color: #08756c !important;
}


/* ------------------------------------------------------------
   ORIGIN — ORANGE
   Icon background + icon MUST match the orange card
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon {
    background: #e99a32 !important;
    border-color: #ffbe61 !important;
    color: #ffffff !important;

    box-shadow:
        0 5px 16px rgba(224, 137, 35, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon svg,
.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon svg *,
.lg-album-details-card .lg-meta-item:nth-child(5) .lg-meta-icon i {
    stroke: #ffffff !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   PREVENT THE OLD GLOBAL ICON RULE FROM OVERRIDING THESE
   ------------------------------------------------------------ */
.lg-album-details-card .lg-meta-item:nth-child(5)
.lg-meta-icon svg path,
.lg-album-details-card .lg-meta-item:nth-child(5)
.lg-meta-icon svg line,
.lg-album-details-card .lg-meta-item:nth-child(5)
.lg-meta-icon svg circle,
.lg-album-details-card .lg-meta-item:nth-child(5)
.lg-meta-icon svg rect,
.lg-album-details-card .lg-meta-item:nth-child(5)
.lg-meta-icon svg polyline {
    stroke: #ffffff !important;
}


/* Keep icons premium on hover */
.lg-album-details-card .lg-meta-item:hover .lg-meta-icon {
    transform: scale(1.05) !important;
}








































/* ============================================================
   LYRICSGROOVE — PREMIUM TRACKLIST / LYRICS SECTION
   ============================================================ */

/* ------------------------------------------------------------
   MAIN TRACKLIST CONTAINER
   ------------------------------------------------------------ */

.lg-tracklist,
.lg-tracklist-section,
.tracklist-section {
    position: relative !important;
    overflow: hidden !important;

    padding: 30px !important;

    border-radius: 24px !important;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(191, 110, 255, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(255, 72, 169, 0.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbf9ff 48%,
            #f8f5ff 100%
        ) !important;

    border: 1px solid rgba(132, 92, 230, 0.16) !important;

    box-shadow:
        0 18px 55px rgba(48, 31, 91, 0.08),
        0 3px 12px rgba(87, 51, 150, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}


/* Decorative music notes */

.lg-tracklist::before,
.lg-tracklist-section::before,
.tracklist-section::before {
    content: "♪  ♫  ♪";
    position: absolute;

    top: 18px;
    right: 35px;

    font-size: 42px;
    font-weight: 700;

    letter-spacing: 14px;

    background:
        linear-gradient(
            135deg,
            #d946ef,
            #7c3aed,
            #4f46e5
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    opacity: 0.075;

    pointer-events: none;
}


/* ------------------------------------------------------------
   TRACKLIST HEADING
   ------------------------------------------------------------ */

.lg-tracklist h2,
.lg-tracklist h3,
.lg-tracklist-section h2,
.tracklist-section h2 {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 24px !important;

    color: #171331 !important;

    font-size: 20px !important;
    font-weight: 800 !important;

    letter-spacing: -0.02em;
}


/* Premium music icon */

.lg-tracklist h2::before,
.lg-tracklist h3::before,
.lg-tracklist-section h2::before,
.tracklist-section h2::before {
    content: "♪";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 13px;

    font-size: 21px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #d92cae 0%,
            #8b3ff2 52%,
            #5145e8 100%
        );

    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(137, 53, 224, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.38);

    border: 1px solid rgba(255,255,255,0.55);
}


/* ------------------------------------------------------------
   TRACK GRID
   ------------------------------------------------------------ */

.lg-tracklist .tracklist,
.lg-tracklist .tracks,
.lg-tracklist-section .tracklist,
.tracklist-section .tracklist {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px 16px;

    width: 100%;
}


/* ------------------------------------------------------------
   INDIVIDUAL TRACK CARD
   ------------------------------------------------------------ */

.lg-track-item,
.lg-track,
.track-item,
.tracklist-item {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    min-height: 64px;

    padding: 8px 10px 8px 12px !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.96),
            rgba(249,246,255,0.96)
        ) !important;

    border: 1px solid rgba(125, 86, 221, 0.14) !important;

    box-shadow:
        0 7px 22px rgba(59, 38, 111, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease !important;
}


/* Gradient accent line */

.lg-track-item::before,
.lg-track::before,
.track-item::before,
.tracklist-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #df28b2,
            #8245f4,
            #4d55ed
        );

    opacity: 0;

    transition: opacity .25s ease;
}


/* Hover */

.lg-track-item:hover,
.lg-track:hover,
.track-item:hover,
.tracklist-item:hover {
    transform: translateY(-3px);

    border-color: rgba(136, 67, 231, 0.28) !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf6ff
        ) !important;

    box-shadow:
        0 14px 32px rgba(86, 47, 145, 0.12),
        0 0 0 1px rgba(153, 91, 240, 0.04),
        0 0 24px rgba(176, 74, 226, 0.07) !important;
}


.lg-track-item:hover::before,
.lg-track:hover::before,
.track-item:hover::before,
.tracklist-item:hover::before {
    opacity: 1;
}


/* ------------------------------------------------------------
   TRACK NUMBER
   ------------------------------------------------------------ */

.lg-track-number,
.track-number,
.tracklist-number {
    width: 38px;

    flex: 0 0 38px;

    text-align: center;

    color: #8b83a7 !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    letter-spacing: .04em;
}


/* ------------------------------------------------------------
   PLAY BUTTON
   ------------------------------------------------------------ */

.lg-track-play,
.track-play,
.tracklist-play {
    position: relative;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px;

    margin-right: 13px;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0e9ff
        ) !important;

    border: 1px solid rgba(132, 79, 224, 0.20) !important;

    color: #7b35dc !important;

    box-shadow:
        0 5px 14px rgba(105, 57, 170, 0.10),
        inset 0 1px 0 rgba(255,255,255,1);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.lg-track-play:hover,
.track-play:hover,
.tracklist-play:hover {
    transform: scale(1.10);

    background:
        linear-gradient(
            135deg,
            #d72ab5,
            #7444ef
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(119, 52, 220, 0.30);
}


/* ------------------------------------------------------------
   TRACK TITLE
   ------------------------------------------------------------ */

.lg-track-title,
.track-title,
.tracklist-title {
    min-width: 0;

    flex: 1;

    color: #17132f !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    line-height: 1.4;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    transition: color .2s ease;
}


.lg-track-item:hover .lg-track-title,
.track-item:hover .track-title,
.tracklist-item:hover .tracklist-title {
    color: #7437d9 !important;
}


/* ------------------------------------------------------------
   READ LYRICS BUTTON
   ------------------------------------------------------------ */

.lg-read-lyrics,
.read-lyrics,
.read-lyrics-btn,
.track-read-lyrics {
    position: relative;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 104px;

    height: 38px;

    padding: 0 14px !important;

    flex: 0 0 auto;

    border-radius: 11px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f1ff 100%
        ) !important;

    border: 1px solid rgba(124, 58, 237, 0.22) !important;

    color: #7134d8 !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    letter-spacing: .01em;

    text-decoration: none !important;

    box-shadow:
        0 5px 16px rgba(102, 55, 171, 0.07),
        inset 0 1px 0 rgba(255,255,255,1);

    overflow: hidden;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Shine animation */

.lg-read-lyrics::before,
.read-lyrics::before,
.read-lyrics-btn::before,
.track-read-lyrics::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .55s ease;
}


.lg-read-lyrics:hover,
.read-lyrics:hover,
.read-lyrics-btn:hover,
.track-read-lyrics:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #d52ab3 0%,
            #813fe9 52%,
            #5748eb 100%
        ) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow:
        0 9px 22px rgba(111, 47, 207, 0.25);
}


.lg-read-lyrics:hover::before,
.read-lyrics:hover::before,
.read-lyrics-btn:hover::before,
.track-read-lyrics:hover::before {
    left: 140%;
}


/* ------------------------------------------------------------
   READ LYRICS SVG / ICON
   ------------------------------------------------------------ */

.lg-read-lyrics svg,
.read-lyrics svg,
.read-lyrics-btn svg,
.track-read-lyrics svg {
    width: 14px !important;
    height: 14px !important;

    flex: 0 0 14px;

    stroke: currentColor !important;

    transition: transform .25s ease;
}


.lg-read-lyrics:hover svg,
.read-lyrics:hover svg,
.read-lyrics-btn:hover svg,
.track-read-lyrics:hover svg {
    transform: translateY(-1px) scale(1.08);
}


/* ------------------------------------------------------------
   TRACK DIVIDER / DURATION
   ------------------------------------------------------------ */

.lg-track-duration,
.track-duration {
    color: #9188a8 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    margin-right: 12px;
}


/* ------------------------------------------------------------
   VIEW ALL LYRICS
   ------------------------------------------------------------ */

.lg-view-all-lyrics,
.view-all-lyrics,
.view-all-lyrics-btn {
    position: relative;

    display: flex !important;

    align-items: center;
    justify-content: center;

    width: fit-content;

    min-width: 150px;

    height: 44px;

    margin: 22px auto 0 !important;

    padding: 0 20px !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #f7f1ff,
            #eee7ff
        ) !important;

    border: 1px solid rgba(126, 70, 220, 0.12) !important;

    color: #7135d4 !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 20px rgba(88, 51, 148, 0.07);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.lg-view-all-lyrics:hover,
.view-all-lyrics:hover,
.view-all-lyrics-btn:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #d62bb2,
            #7444ef
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 12px 25px rgba(104, 50, 203, 0.22);
}


/* ------------------------------------------------------------
   ACTIVE TRACK
   ------------------------------------------------------------ */

.lg-track-item.is-playing,
.lg-track-item.active,
.track-item.is-playing,
.track-item.active {
    border-color: rgba(128, 56, 230, 0.30) !important;

    background:
        linear-gradient(
            135deg,
            rgba(250,240,255,.98),
            rgba(240,233,255,.98)
        ) !important;

    box-shadow:
        0 10px 28px rgba(107, 51, 193, 0.11),
        0 0 22px rgba(189, 67, 231, 0.08);
}


/* ------------------------------------------------------------
   RESPONSIVE — TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .lg-tracklist,
    .lg-tracklist-section,
    .tracklist-section {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    .lg-tracklist .tracklist,
    .lg-tracklist .tracks,
    .lg-tracklist-section .tracklist,
    .tracklist-section .tracklist {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lg-tracklist h2,
    .lg-tracklist h3,
    .lg-tracklist-section h2,
    .tracklist-section h2 {
        font-size: 18px !important;
    }
}


/* ------------------------------------------------------------
   RESPONSIVE — MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .lg-tracklist,
    .lg-tracklist-section,
    .tracklist-section {
        padding: 18px !important;

        border-radius: 20px !important;
    }

    .lg-tracklist h2,
    .lg-tracklist h3,
    .lg-tracklist-section h2,
    .tracklist-section h2 {
        margin-bottom: 18px !important;

        font-size: 18px !important;
    }

    .lg-tracklist h2::before,
    .lg-tracklist h3::before,
    .lg-tracklist-section h2::before,
    .tracklist-section h2::before {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 11px;

        font-size: 19px;
    }

    .lg-track-item,
    .lg-track,
    .track-item,
    .tracklist-item {
        min-height: 62px;

        padding: 8px !important;

        border-radius: 14px !important;
    }

    .lg-track-number,
    .track-number,
    .tracklist-number {
        width: 30px;
        flex-basis: 30px;

        font-size: 10px !important;
    }

    .lg-track-play,
    .track-play,
    .tracklist-play {
        width: 34px !important;
        height: 34px !important;

        flex-basis: 34px;

        margin-right: 9px;
    }

    .lg-track-title,
    .track-title,
    .tracklist-title {
        font-size: 12px !important;
    }

    .lg-read-lyrics,
    .read-lyrics,
    .read-lyrics-btn,
    .track-read-lyrics {
        min-width: 88px;

        height: 35px;

        padding: 0 10px !important;

        border-radius: 10px !important;

        font-size: 9px !important;
    }

    .lg-track-duration,
    .track-duration {
        display: none;
    }

    .lg-view-all-lyrics,
    .view-all-lyrics,
    .view-all-lyrics-btn {
        min-width: 140px;

        height: 42px;

        margin-top: 18px !important;
    }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .lg-track-item,
    .lg-track,
    .track-item,
    .tracklist-item,
    .lg-read-lyrics,
    .read-lyrics,
    .read-lyrics-btn,
    .track-read-lyrics,
    .lg-view-all-lyrics,
    .view-all-lyrics,
    .view-all-lyrics-btn {
        transition: none !important;
    }
}





















/* ============================================================
   LYRICSGROOVE — TRACKLIST FINAL FIX
   Fixes:
   • Number / music icon overlap
   • Truncated titles
   • Yellow vertical lines
   • Duplicate heading icon
   • Premium spacing
   ============================================================ */


/* ============================================================
   1. TRACKLIST CONTAINER
   ============================================================ */

.lg-tracklist,
.lg-tracklist-section,
.tracklist-section {

    position: relative !important;
    isolation: isolate !important;

    overflow: hidden !important;

    padding: 32px !important;

    border-radius: 26px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 208, 241, .45),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(202, 191, 255, .42),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fcf8ff 50%,
            #f7f3ff 100%
        ) !important;

    border: 1px solid rgba(129, 80, 215, .16) !important;

    box-shadow:
        0 20px 55px rgba(67, 42, 120, .08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* Premium outer glow */

.lg-tracklist::after,
.lg-tracklist-section::after,
.tracklist-section::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(222, 44, 184, .55),
            rgba(132, 72, 237, .40),
            rgba(79, 83, 235, .28)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

    z-index: 10;
}


/* ============================================================
   2. REMOVE DECORATIVE HEADING PSEUDO ICON
   ============================================================ */

/*
   Your PHP already contains the little music icon.
   The previous CSS added another one.
*/

.lg-tracklist h2::before,
.lg-tracklist h3::before,
.lg-tracklist-section h2::before,
.tracklist-section h2::before {

    content: none !important;

    display: none !important;
}


/* Heading */

.lg-tracklist h2,
.lg-tracklist h3,
.lg-tracklist-section h2,
.tracklist-section h2 {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 0 28px !important;

    color: #17132f !important;

    font-size: 22px !important;

    line-height: 1.2 !important;

    font-weight: 850 !important;

    letter-spacing: -.035em !important;
}


/* ============================================================
   3. REMOVE ALL OLD YELLOW VERTICAL ACCENT LINES
   ============================================================ */

.lg-track-item::before,
.lg-track::before,
.track-item::before,
.tracklist-item::before {

    content: none !important;

    display: none !important;
}


/* Remove possible old grid divider */

.lg-tracklist .tracklist::before,
.lg-tracklist .tracks::before,
.lg-tracklist-section .tracklist::before,
.tracklist-section .tracklist::before {

    content: none !important;

    display: none !important;

    border: 0 !important;
}


/* ============================================================
   4. TRACK GRID
   ============================================================ */

.lg-tracklist .tracklist,
.lg-tracklist .tracks,
.lg-tracklist-section .tracklist,
.tracklist-section .tracklist {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 22px !important;

    row-gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   5. TRACK CARD
   ============================================================ */

.lg-track-item,
.lg-track,
.track-item,
.tracklist-item {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 68px !important;

    box-sizing: border-box !important;

    padding: 8px 12px !important;

    margin: 0 !important;

    border-radius: 17px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(250,247,255,.97)
        ) !important;

    border: 1px solid rgba(117, 76, 199, .13) !important;

    box-shadow:
        0 7px 20px rgba(64, 39, 111, .045),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow: visible !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


.lg-track-item:hover,
.lg-track:hover,
.track-item:hover,
.tracklist-item:hover {

    transform: translateY(-2px) !important;

    border-color:
        rgba(125, 68, 222, .28) !important;

    box-shadow:
        0 12px 28px rgba(71, 40, 126, .10),
        0 0 24px rgba(173, 68, 226, .07) !important;
}


/* ============================================================
   6. REMOVE PLAY BUTTONS
   ============================================================ */

.lg-track-play,
.track-play,
.tracklist-play,
.lg-track-item .play-button,
.lg-track .play-button,
.track-item .play-button,
.tracklist-item .play-button,
.lg-track-item button[aria-label*="Play"],
.lg-track button[aria-label*="Play"],
.track-item button[aria-label*="Play"],
.tracklist-item button[aria-label*="Play"] {

    display: none !important;
}


/* ============================================================
   7. NUMBER — PROPER YELLOW CIRCLE
   ============================================================ */

.lg-track-number,
.track-number,
.tracklist-number {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 38px !important;

    width: 38px !important;

    min-width: 38px !important;

    max-width: 38px !important;

    height: 38px !important;

    margin: 0 34px 0 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #fff2a0 0%,
            #ffd32b 48%,
            #f2ad00 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.82) !important;

    color: #3d2900 !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-shadow:
        0 5px 14px rgba(245, 178, 0, .28),
        0 0 20px rgba(255, 197, 35, .18),
        inset 0 1px 0 rgba(255,255,255,.85) !important;

    z-index: 3 !important;
}


/* ============================================================
   8. MUSIC ICON — SEPARATE FROM NUMBER
   ============================================================ */

.lg-track-number::after,
.track-number::after,
.tracklist-number::after {

    content: "♪" !important;

    position: absolute !important;

    top: 50% !important;

    right: -28px !important;

    transform: translateY(-50%) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 27px !important;

    height: 27px !important;

    margin: 0 !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            #d92bb4,
            #8141eb
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-shadow:
        0 6px 15px rgba(112, 48, 213, .25) !important;

    z-index: 5 !important;
}


/* ============================================================
   9. TITLE — STOP THE sod... PROBLEM
   ============================================================ */

.lg-track-title,
.track-title,
.tracklist-title {

    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 12px 0 0 !important;

    color: #16132e !important;

    font-size: 15px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

    letter-spacing: -.015em !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* Make common title wrappers flexible too */

.lg-track-item > div,
.lg-track > div,
.track-item > div,
.tracklist-item > div {

    min-width: 0 !important;

    flex: 1 1 auto !important;
}


/* ============================================================
   10. REMOVE OLD DASH / SEPARATOR SPACE
   ============================================================ */

.lg-track-duration,
.track-duration {

    flex: 0 0 auto !important;

    margin: 0 14px 0 8px !important;

    color: #928aa6 !important;

    font-size: 11px !important;

    font-weight: 700 !important;
}


/* ============================================================
   11. READ LYRICS BUTTON
   ============================================================ */

.lg-read-lyrics,
.read-lyrics,
.read-lyrics-btn,
.track-read-lyrics {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    flex: 0 0 auto !important;

    width: 108px !important;

    min-width: 108px !important;

    height: 38px !important;

    padding: 0 13px !important;

    box-sizing: border-box !important;

    border-radius: 11px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7efff
        ) !important;

    border: 1px solid rgba(115, 61, 218, .20) !important;

    color: #7135d5 !important;

    font-size: 10px !important;

    font-weight: 850 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 16px rgba(84, 47, 141, .06) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease !important;
}


.lg-read-lyrics:hover,
.read-lyrics:hover,
.read-lyrics-btn:hover,
.track-read-lyrics:hover {

    transform: translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d82bb2,
            #8240e9,
            #5849ed
        ) !important;

    border-color: transparent !important;

    box-shadow:
        0 9px 22px rgba(105, 48, 204, .24) !important;
}


/* ============================================================
   12. VIEW ALL LYRICS
   ============================================================ */

.lg-view-all-lyrics,
.view-all-lyrics,
.view-all-lyrics-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 160px !important;

    min-width: 160px !important;

    height: 44px !important;

    margin: 22px auto 0 !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #faf4ff,
            #eee7ff
        ) !important;

    border: 1px solid rgba(117, 65, 215, .13) !important;

    color: #7136d5 !important;

    font-size: 10px !important;

    font-weight: 850 !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 20px rgba(79, 46, 136, .06) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease !important;
}


.lg-view-all-lyrics:hover,
.view-all-lyrics:hover,
.view-all-lyrics-btn:hover {

    transform: translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d82bb3,
            #7844ed
        ) !important;
}


/* ============================================================
   13. DESKTOP — MORE ROOM FOR TITLES
   ============================================================ */

@media (min-width: 901px) {

    .lg-track-item,
    .lg-track,
    .track-item,
    .tracklist-item {

        min-height: 70px !important;
    }

    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 15px !important;
    }
}


/* ============================================================
   14. TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lg-tracklist,
    .lg-tracklist-section,
    .tracklist-section {

        padding: 24px !important;
    }

    .lg-tracklist .tracklist,
    .lg-tracklist .tracks,
    .lg-tracklist-section .tracklist,
    .tracklist-section .tracklist {

        grid-template-columns: 1fr !important;

        column-gap: 0 !important;

        row-gap: 11px !important;
    }

    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 14px !important;
    }
}


/* ============================================================
   15. MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-tracklist,
    .lg-tracklist-section,
    .tracklist-section {

        padding: 18px !important;

        border-radius: 20px !important;
    }

    .lg-tracklist h2,
    .lg-tracklist h3,
    .lg-tracklist-section h2,
    .tracklist-section h2 {

        font-size: 19px !important;

        margin-bottom: 20px !important;
    }

    .lg-track-item,
    .lg-track,
    .track-item,
    .tracklist-item {

        min-height: 64px !important;

        padding: 8px !important;

        border-radius: 14px !important;
    }

    .lg-track-number,
    .track-number,
    .tracklist-number {

        flex-basis: 34px !important;

        width: 34px !important;

        min-width: 34px !important;

        max-width: 34px !important;

        height: 34px !important;

        margin-right: 31px !important;

        font-size: 10px !important;
    }

    .lg-track-number::after,
    .track-number::after,
    .tracklist-number::after {

        right: -27px !important;

        width: 25px !important;

        height: 25px !important;

        font-size: 13px !important;
    }

    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 12px !important;
    }

    .lg-read-lyrics,
    .read-lyrics,
    .read-lyrics-btn,
    .track-read-lyrics {

        width: 90px !important;

        min-width: 90px !important;

        height: 35px !important;

        padding: 0 9px !important;

        font-size: 9px !important;
    }

    .lg-track-duration,
    .track-duration {

        display: none !important;
    }

    .lg-view-all-lyrics,
    .view-all-lyrics,
    .view-all-lyrics-btn {

        width: 145px !important;

        min-width: 145px !important;

        height: 42px !important;
    }
}

























/* ============================================================
   LYRICSGROOVE — TRACKLIST FINAL CLEAN LAYOUT
   Remove numbering + show music icon + full readable title
   ============================================================ */


/* ------------------------------------------------------------
   1. REMOVE NUMBER CIRCLES COMPLETELY
   ------------------------------------------------------------ */

.lg-track-number,
.track-number,
.tracklist-number {
    display: none !important;
}


/* Remove the music icon that was attached to the number */

.lg-track-number::after,
.track-number::after,
.tracklist-number::after {
    display: none !important;
    content: none !important;
}


/* ------------------------------------------------------------
   2. TRACK GRID
   ------------------------------------------------------------ */

.lg-tracklist .tracklist,
.lg-tracklist .tracks,
.lg-tracklist-section .tracklist,
.tracklist-section .tracklist {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 12px 22px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* ------------------------------------------------------------
   3. TRACK ROW
   ------------------------------------------------------------ */

.lg-track-item,
.lg-track,
.track-item,
.tracklist-item {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 70px !important;

    margin: 0 !important;

    padding: 10px 14px !important;

    box-sizing: border-box !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(249,246,255,.96)
        ) !important;

    border: 1px solid rgba(116,73,201,.14) !important;

    box-shadow:
        0 7px 20px rgba(63,39,111,.045),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow: visible !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


.lg-track-item:hover,
.lg-track:hover,
.track-item:hover,
.tracklist-item:hover {

    transform: translateY(-2px) !important;

    border-color: rgba(125,65,220,.28) !important;

    box-shadow:
        0 12px 28px rgba(72,42,130,.10),
        0 0 25px rgba(183,64,228,.08) !important;
}


/* ------------------------------------------------------------
   4. MUSIC NOTE ICON
   ------------------------------------------------------------ */

.lg-track-item::before,
.lg-track::before,
.track-item::before,
.tracklist-item::before {

    content: "♪" !important;

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 42px !important;

    width: 42px !important;

    height: 42px !important;

    margin: 0 18px 0 0 !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #d72bb2 0%,
            #8540eb 55%,
            #5649ed 100%
        ) !important;

    color: #ffffff !important;

    font-size: 21px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-shadow:
        0 7px 18px rgba(105,48,207,.24),
        0 0 22px rgba(185,62,225,.12) !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   5. TITLE AREA
   ------------------------------------------------------------ */

.lg-track-title,
.track-title,
.tracklist-title {

    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 16px 0 0 !important;

    color: #17132f !important;

    font-size: 16px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

    letter-spacing: -.015em !important;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;
}


/* Make title wrappers flexible */

.lg-track-item > div,
.lg-track > div,
.track-item > div,
.tracklist-item > div {

    min-width: 0 !important;

    flex: 1 1 auto !important;
}


/* ------------------------------------------------------------
   6. REMOVE OLD NUMBER / PLAY / EXTRA ICONS
   ------------------------------------------------------------ */

.lg-track-play,
.track-play,
.tracklist-play,
.lg-track-item .play-button,
.lg-track .play-button,
.track-item .play-button,
.tracklist-item .play-button {

    display: none !important;
}


/* Hide any actual number element */

.lg-track-item .number,
.lg-track-item .track-no,
.lg-track-item .track-index,
.lg-track .number,
.lg-track .track-no,
.track-item .number,
.track-item .track-no {

    display: none !important;
}


/* ------------------------------------------------------------
   7. DURATION / DASH
   ------------------------------------------------------------ */

.lg-track-duration,
.track-duration {

    flex: 0 0 auto !important;

    margin: 0 18px 0 10px !important;

    color: #8d86a1 !important;

    font-size: 13px !important;

    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   8. READ LYRICS BUTTON
   ------------------------------------------------------------ */

.lg-read-lyrics,
.read-lyrics,
.read-lyrics-btn,
.track-read-lyrics {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 118px !important;

    width: 118px !important;

    min-width: 118px !important;

    height: 42px !important;

    padding: 0 14px !important;

    margin-left: 12px !important;

    box-sizing: border-box !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6efff
        ) !important;

    border: 1px solid rgba(112,62,216,.20) !important;

    color: #7035d6 !important;

    font-size: 11px !important;

    font-weight: 850 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 17px rgba(77,43,132,.07) !important;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


.lg-read-lyrics:hover,
.read-lyrics:hover,
.read-lyrics-btn:hover,
.track-read-lyrics:hover {

    transform: translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d52bb1,
            #7d42eb,
            #5748ed
        ) !important;

    border-color: transparent !important;

    box-shadow:
        0 10px 24px rgba(104,46,203,.25) !important;
}


/* ------------------------------------------------------------
   9. REMOVE OLD YELLOW VERTICAL LINES
   ------------------------------------------------------------ */

.lg-tracklist::before,
.lg-tracklist-section::before,
.tracklist-section::before {

    display: none !important;

    content: none !important;
}


/* ------------------------------------------------------------
   10. VIEW ALL LYRICS
   ------------------------------------------------------------ */

.lg-view-all-lyrics,
.view-all-lyrics,
.view-all-lyrics-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 165px !important;

    min-width: 165px !important;

    height: 46px !important;

    margin: 24px auto 0 !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            #faf4ff,
            #eee6ff
        ) !important;

    border: 1px solid rgba(113,63,215,.14) !important;

    color: #7136d5 !important;

    font-size: 11px !important;

    font-weight: 850 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(75,43,132,.07) !important;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


.lg-view-all-lyrics:hover,
.view-all-lyrics:hover,
.view-all-lyrics-btn:hover {

    transform: translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d52bb1,
            #7944eb
        ) !important;

    box-shadow:
        0 10px 25px rgba(104,46,203,.22) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lg-tracklist .tracklist,
    .lg-tracklist .tracks,
    .lg-tracklist-section .tracklist,
    .tracklist-section .tracklist {

        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 15px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-tracklist,
    .lg-tracklist-section,
    .tracklist-section {

        padding: 18px !important;
    }


    .lg-track-item,
    .lg-track,
    .track-item,
    .tracklist-item {

        min-height: 68px !important;

        padding: 9px !important;
    }


    .lg-track-item::before,
    .lg-track::before,
    .track-item::before,
    .tracklist-item::before {

        flex-basis: 38px !important;

        width: 38px !important;

        height: 38px !important;

        margin-right: 14px !important;

        border-radius: 11px !important;

        font-size: 19px !important;
    }


    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 14px !important;

        line-height: 1.4 !important;
    }


    .lg-read-lyrics,
    .read-lyrics,
    .read-lyrics-btn,
    .track-read-lyrics {

        flex-basis: 96px !important;

        width: 96px !important;

        min-width: 96px !important;

        height: 38px !important;

        margin-left: 8px !important;

        padding: 0 8px !important;

        font-size: 9px !important;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 400px) {

    .lg-track-item::before,
    .lg-track::before,
    .track-item::before,
    .tracklist-item::before {

        flex-basis: 34px !important;

        width: 34px !important;

        height: 34px !important;

        margin-right: 10px !important;

        font-size: 17px !important;
    }


    .lg-track-title,
    .track-title,
    .tracklist-title {

        font-size: 13px !important;
    }


    .lg-read-lyrics,
    .read-lyrics,
    .read-lyrics-btn,
    .track-read-lyrics {

        flex-basis: 88px !important;

        width: 88px !important;

        min-width: 88px !important;

        font-size: 8px !important;
    }
}




/* ============================================================
   LYRICSGROOVE — FINAL TRACKLIST FIX
   NO NUMBER / NO PLAY BUTTON / MUSIC NOTE + FULL TITLE
   ============================================================ */


/* ------------------------------------------------------------
   TRACKLIST GRID
   ------------------------------------------------------------ */

.lg-tracklist-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100% !important;

    min-width: 0 !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   COLUMN
   ------------------------------------------------------------ */

.lg-track-column {
    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    width: 100% !important;

    min-width: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;
}


/* ------------------------------------------------------------
   TRACK ROW
   IMPORTANT:
   We completely remove the old 5-column layout.
   ------------------------------------------------------------ */

.lg-track-row {
    display: grid !important;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        48px
        132px !important;

    align-items: center !important;

    column-gap: 14px !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 68px !important;

    padding:
        8px
        14px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(112, 67, 229, .13) !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(250,247,255,.96)
        ) !important;

    box-shadow:
        0 8px 24px rgba(66, 42, 120, .045),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow: visible !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

.lg-track-row:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(112, 67, 229, .28) !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf6ff
        ) !important;

    box-shadow:
        0 12px 30px rgba(82, 46, 150, .10),
        0 0 24px rgba(190, 63, 226, .07) !important;
}


/* ------------------------------------------------------------
   REMOVE NUMBER
   ------------------------------------------------------------ */

.lg-track-row .lg-track-number {
    display: none !important;

    width: 0 !important;

    min-width: 0 !important;

    max-width: 0 !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* ------------------------------------------------------------
   REMOVE PLAY BUTTON
   ------------------------------------------------------------ */

.lg-track-row .lg-track-play {
    display: none !important;

    width: 0 !important;

    min-width: 0 !important;

    max-width: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;
}


/* ------------------------------------------------------------
   MUSIC NOTE ICON
   We attach it directly to the title area.
   ------------------------------------------------------------ */

.lg-track-row .lg-track-title {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    min-width: 0 !important;

    width: 100% !important;

    padding: 0 0 0 56px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Premium music note */

.lg-track-row .lg-track-title::before {
    content: "♪" !important;

    position: absolute !important;

    left: 0 !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    border-radius: 13px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d82bb2 0%,
            #9140e8 50%,
            #5a48ed 100%
        ) !important;

    font-size: 21px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-shadow:
        0 7px 20px rgba(109, 48, 208, .22),
        0 0 24px rgba(211, 52, 183, .10) !important;

    z-index: 2 !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Note animation on hover */

.lg-track-row:hover .lg-track-title::before {
    transform:
        translateY(-50%)
        scale(1.07)
        rotate(-4deg) !important;

    box-shadow:
        0 10px 25px rgba(109, 48, 208, .28),
        0 0 30px rgba(211, 52, 183, .16) !important;
}


/* ------------------------------------------------------------
   TITLE
   IMPORTANT:
   NO ELLIPSIS / NO CLIPPING
   ------------------------------------------------------------ */

.lg-track-row .lg-track-title a {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    overflow: visible !important;

    color: #18152f !important;

    font-size: 15px !important;

    font-weight: 850 !important;

    line-height: 1.45 !important;

    letter-spacing: -.01em !important;

    text-decoration: none !important;

    white-space: normal !important;

    text-overflow: clip !important;

    word-break: normal !important;

    overflow-wrap: anywhere !important;
}


.lg-track-row .lg-track-title a:hover {
    color: #7139dc !important;
}


/* ------------------------------------------------------------
   DURATION
   ------------------------------------------------------------ */

.lg-track-row .lg-track-duration {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 48px !important;

    color: #8b86a0 !important;

    font-size: 12px !important;

    font-weight: 750 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* ------------------------------------------------------------
   READ LYRICS BUTTON
   ------------------------------------------------------------ */

.lg-track-row .lg-read-lyrics-button {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    width: 132px !important;

    min-width: 132px !important;

    height: 42px !important;

    padding:
        0
        14px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(112,67,229,.18) !important;

    border-radius: 12px !important;

    color: #7138d8 !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6f0ff
        ) !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 18px rgba(74,44,135,.07) !important;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


.lg-track-row .lg-read-lyrics-button:hover {
    transform:
        translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d72bb2,
            #8040e9,
            #5749ed
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 10px 25px rgba(105, 47, 203, .23) !important;
}


/* Read Lyrics icon */

.lg-track-row .lg-read-lyrics-button span {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 13px !important;

    line-height: 1 !important;
}


/* ------------------------------------------------------------
   REMOVE OLD YELLOW / VERTICAL TRACK LINES
   ------------------------------------------------------------ */

.lg-tracklist-grid,
.lg-track-column,
.lg-track-row {
    border-left: 0 !important;
}


/* Kill pseudo-elements which may be creating the lines */

.lg-tracklist-grid::before,
.lg-tracklist-grid::after,
.lg-track-column::before,
.lg-track-column::after,
.lg-track-row::before,
.lg-track-row::after {
    content: none !important;

    display: none !important;
}


/* ------------------------------------------------------------
   VIEW ALL LYRICS
   ------------------------------------------------------------ */

.lg-view-all-lyrics {
    display: flex !important;

    justify-content: center !important;

    width: 100% !important;

    margin:
        24px
        0
        0 !important;
}


.lg-view-all-lyrics a {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    min-width: 165px !important;

    min-height: 46px !important;

    padding:
        0
        20px !important;

    border:
        1px solid rgba(112,67,229,.15) !important;

    border-radius: 14px !important;

    color: #7138d8 !important;

    background:
        linear-gradient(
            135deg,
            #faf6ff,
            #eee7ff
        ) !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(73,43,133,.07) !important;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


.lg-view-all-lyrics a:hover {
    transform:
        translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d72bb2,
            #7b42e9
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 12px 28px rgba(105,47,203,.20) !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lg-tracklist-grid {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .lg-track-row {
        grid-template-columns:
            48px
            minmax(0,1fr)
            40px
            125px !important;
    }

    .lg-track-row .lg-track-title a {
        font-size: 14px !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-tracklist-grid {
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    .lg-track-row {
        grid-template-columns:
            42px
            minmax(0,1fr)
            108px !important;

        column-gap: 11px !important;

        min-height: 66px !important;

        padding:
            8px
            10px !important;
    }


    .lg-track-row .lg-track-title {
        padding-left: 52px !important;
    }


    .lg-track-row .lg-track-title::before {
        width: 40px !important;

        height: 40px !important;

        border-radius: 12px !important;

        font-size: 19px !important;
    }


    .lg-track-row .lg-track-title a {
        font-size: 14px !important;

        line-height: 1.35 !important;
    }


    .lg-track-row .lg-track-duration {
        display: none !important;
    }


    .lg-track-row .lg-read-lyrics-button {
        width: 108px !important;

        min-width: 108px !important;

        height: 40px !important;

        font-size: 10px !important;

        padding:
            0
            8px !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .lg-track-row {
        grid-template-columns:
            40px
            minmax(0,1fr)
            98px !important;

        column-gap: 9px !important;

        min-height: 64px !important;

        padding:
            7px
            8px !important;
    }


    .lg-track-row .lg-track-title {
        padding-left: 48px !important;
    }


    .lg-track-row .lg-track-title::before {
        width: 38px !important;

        height: 38px !important;

        font-size: 18px !important;
    }


    .lg-track-row .lg-track-title a {
        font-size: 13px !important;
    }


    .lg-track-row .lg-read-lyrics-button {
        width: 98px !important;

        min-width: 98px !important;

        height: 38px !important;

        font-size: 9px !important;
    }

}














/* ============================================================
   LYRICSGROOVE — TRACKLIST EMERGENCY FINAL FIX
   TITLE WIDTH / ICON / READ LYRICS
   ============================================================ */


/* ------------------------------------------------------------
   TRACK ROW
   After number + play are hidden, ONLY 3 elements remain:
   TITLE | DURATION | READ LYRICS
   ------------------------------------------------------------ */

.lg-track-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        48px
        132px !important;

    align-items: center !important;

    column-gap: 14px !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 68px !important;

    padding:
        8px 14px !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   COMPLETELY REMOVE OLD NUMBER
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-number {
    display: none !important;
}


/* ------------------------------------------------------------
   COMPLETELY REMOVE OLD PLAY BUTTON
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-play {
    display: none !important;
}


/* ------------------------------------------------------------
   TITLE — THIS IS THE IMPORTANT FIX
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-title {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    padding:
        0 10px 0 58px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   MUSIC NOTE
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-title::before {
    content: "♪" !important;

    position: absolute !important;

    left: 0 !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #d72bb1 0%,
            #9140e8 50%,
            #5848ed 100%
        ) !important;

    color: #ffffff !important;

    font-size: 21px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-shadow:
        0 8px 20px rgba(105,47,205,.25),
        0 0 25px rgba(207,47,190,.12) !important;

    z-index: 3 !important;
}


/* ------------------------------------------------------------
   TITLE LINK
   NO ELLIPSIS
   NO CHARACTER-BY-CHARACTER WRAPPING
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-title > a {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #18152f !important;

    font-size: 15px !important;

    font-weight: 850 !important;

    line-height: 1.4 !important;

    letter-spacing: -.01em !important;

    text-decoration: none !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: anywhere !important;

    overflow: visible !important;

    text-overflow: clip !important;
}


.lg-track-row > .lg-track-title > a:hover {
    color: #7138d8 !important;
}


/* ------------------------------------------------------------
   DURATION
   ------------------------------------------------------------ */

.lg-track-row > .lg-track-duration {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 48px !important;

    min-width: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #858098 !important;

    font-size: 12px !important;

    font-weight: 750 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* ------------------------------------------------------------
   READ LYRICS
   ------------------------------------------------------------ */

.lg-track-row > .lg-read-lyrics-button {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    width: 132px !important;

    min-width: 132px !important;

    height: 42px !important;

    margin: 0 !important;

    padding:
        0 12px !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(112,67,229,.18) !important;

    border-radius: 12px !important;

    color: #7138d8 !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6efff
        ) !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 18px rgba(72,43,132,.07) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease !important;
}


.lg-track-row > .lg-read-lyrics-button:hover {
    transform:
        translateY(-2px) !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #d72bb1,
            #7d42e9,
            #5749ed
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 10px 26px rgba(105,47,203,.23) !important;
}


/* ------------------------------------------------------------
   REMOVE ANY OLD YELLOW VERTICAL LINES
   ------------------------------------------------------------ */

.lg-tracklist-section::before,
.lg-tracklist-section::after,
.lg-tracklist-grid::before,
.lg-tracklist-grid::after,
.lg-track-column::before,
.lg-track-column::after,
.lg-track-row::before,
.lg-track-row::after {
    content: none !important;

    display: none !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lg-tracklist-grid {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }


    .lg-track-row {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            125px !important;

        min-height: 66px !important;

        column-gap: 12px !important;
    }


    .lg-track-row > .lg-track-title {
        padding-left: 54px !important;
    }


    .lg-track-row > .lg-track-title::before {
        width: 42px !important;

        height: 42px !important;
    }


    .lg-track-row > .lg-track-title > a {
        font-size: 14px !important;
    }


    .lg-track-row > .lg-track-duration {
        width: 42px !important;

        min-width: 42px !important;
    }


    .lg-track-row > .lg-read-lyrics-button {
        width: 125px !important;

        min-width: 125px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-tracklist-grid {
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    .lg-track-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px !important;

        column-gap: 10px !important;

        min-height: 66px !important;

        padding:
            8px 9px !important;
    }


    .lg-track-row > .lg-track-title {
        padding-left: 50px !important;
    }


    .lg-track-row > .lg-track-title::before {
        width: 40px !important;

        height: 40px !important;

        border-radius: 12px !important;

        font-size: 19px !important;
    }


    .lg-track-row > .lg-track-title > a {
        font-size: 14px !important;

        line-height: 1.35 !important;
    }


    .lg-track-row > .lg-track-duration {
        display: none !important;
    }


    .lg-track-row > .lg-read-lyrics-button {
        width: 105px !important;

        min-width: 105px !important;

        height: 40px !important;

        font-size: 10px !important;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .lg-track-row {
        grid-template-columns:
            minmax(0, 1fr)
            96px !important;

        column-gap: 8px !important;

        min-height: 62px !important;
    }


    .lg-track-row > .lg-track-title {
        padding-left: 46px !important;
    }


    .lg-track-row > .lg-track-title::before {
        width: 37px !important;

        height: 37px !important;

        font-size: 18px !important;
    }


    .lg-track-row > .lg-track-title > a {
        font-size: 13px !important;
    }


    .lg-track-row > .lg-read-lyrics-button {
        width: 96px !important;

        min-width: 96px !important;

        height: 38px !important;

        padding:
            0 7px !important;

        font-size: 9px !important;
    }
}

















/* ============================================================
   LYRICSGROOVE — PREMIUM TRACKLIST FINAL UI
   ============================================================ */


/* ============================================================
   01 — TRACKLIST SECTION
============================================================ */

.lg-tracklist-section {

	position: relative !important;

	overflow: hidden !important;

	padding:
		28px 28px 24px !important;

	border:
		1px solid rgba(112,67,229,.16) !important;

	border-radius:
		24px !important;

	background:
		linear-gradient(
			135deg,
			rgba(255,248,253,.98) 0%,
			rgba(255,255,255,.98) 42%,
			rgba(245,240,255,.98) 100%
		) !important;

	box-shadow:
		0 20px 60px rgba(74,46,140,.08),
		inset 0 1px 0 rgba(255,255,255,.95) !important;

}


/* Premium ambient glow */

.lg-tracklist-section::before {

	content: "";

	position: absolute;

	left: -100px;
	top: -120px;

	width: 320px;
	height: 260px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255,71,190,.13),
			transparent 70%
		);

	filter: blur(15px);

	pointer-events: none;

}


/* Second glow */

.lg-tracklist-section::after {

	content: "";

	position: absolute;

	right: -120px;
	bottom: -130px;

	width: 360px;
	height: 280px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(99,72,244,.12),
			transparent 70%
		);

	filter: blur(18px);

	pointer-events: none;

}


/* ============================================================
   02 — HEADING
============================================================ */

.lg-section-heading {

	position: relative !important;

	z-index: 3 !important;

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

	width: 100% !important;

	margin:
		0 0 24px !important;

	padding:
		0 0 18px !important;

}


/* Header bottom premium animated line */

.lg-section-heading::after {

	content: "";

	position: absolute;

	left: 0;

	bottom: 0;

	width: 100%;

	height: 3px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#ff2db0 0%,
			#9b3ff0 35%,
			#614df2 65%,
			#ff3da9 100%
		);

	background-size: 220% 100%;

	box-shadow:
		0 0 8px rgba(223,44,174,.30),
		0 0 18px rgba(103,65,231,.15);

	animation:
		lgTrackHeaderLine 5s ease-in-out infinite;

}


/* Animated gradient */

@keyframes lgTrackHeaderLine {

	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}

}


/* ============================================================
   03 — HEADING LEFT
============================================================ */

.lg-section-heading > div:first-child {

	display: flex !important;

	align-items: center !important;

	gap: 13px !important;

}


/* Heading icon */

.lg-section-icon {

	position: relative !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	width: 46px !important;

	height: 46px !important;

	flex: 0 0 46px !important;

	border-radius: 14px !important;

	color: #ffffff !important;

	background:
		linear-gradient(
			135deg,
			#df27ad 0%,
			#8140e8 52%,
			#5748ed 100%
		) !important;

	font-size: 21px !important;

	box-shadow:
		0 10px 24px rgba(106,53,216,.25),
		0 0 24px rgba(222,40,176,.12) !important;

}


/* Heading icon shine */

.lg-section-icon::after {

	content: "";

	position: absolute;

	inset: 1px;

	border-radius: inherit;

	border:
		1px solid rgba(255,255,255,.42);

	pointer-events: none;

}


/* ============================================================
   04 — TRACKLIST TITLE
============================================================ */

.lg-section-heading h2 {

	position: relative !important;

	margin: 0 !important;

	color: #15132d !important;

	font-size:
		clamp(24px, 2vw, 31px) !important;

	font-weight: 950 !important;

	line-height: 1 !important;

	letter-spacing:
		-.035em !important;

}


/* ============================================================
   05 — REMOVE TOTAL DURATION VISUAL CLUTTER
============================================================ */

.lg-total-duration {

	position: relative !important;

	z-index: 2 !important;

}


/* ============================================================
   06 — TRACK GRID
============================================================ */

.lg-tracklist-grid {

	position: relative !important;

	z-index: 2 !important;

	display: grid !important;

	grid-template-columns:
		repeat(2, minmax(0,1fr)) !important;

	gap:
		16px !important;

	width: 100% !important;

}


/* ============================================================
   07 — TRACK COLUMN
============================================================ */

.lg-track-column {

	display: flex !important;

	flex-direction: column !important;

	gap: 11px !important;

	min-width: 0 !important;

}


/* ============================================================
   08 — TRACK CARD
============================================================ */

.lg-track-row {

	position: relative !important;

	display: grid !important;

	grid-template-columns:
		minmax(0,1fr)
		45px
		132px !important;

	align-items: center !important;

	gap: 12px !important;

	width: 100% !important;

	min-height:
		76px !important;

	padding:
		10px 12px !important;

	box-sizing: border-box !important;

	border:
		1px solid rgba(119,83,226,.13) !important;

	border-radius:
		17px !important;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.97),
			rgba(250,247,255,.96)
		) !important;

	box-shadow:
		0 8px 22px rgba(77,51,137,.055),
		inset 0 1px 0 rgba(255,255,255,.95) !important;

	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease,
		background .28s ease !important;

}


/* Card top shine */

.lg-track-row::before {

	content: "";

	position: absolute;

	left: 14px;
	right: 14px;
	top: 0;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.95),
			transparent
		);

	pointer-events: none;

}


/* Hover */

.lg-track-row:hover {

	transform:
		translateY(-3px) !important;

	border-color:
		rgba(126,70,229,.28) !important;

	background:
		linear-gradient(
			135deg,
			#ffffff,
			#f7f1ff
		) !important;

	box-shadow:
		0 14px 32px rgba(92,54,170,.12),
		0 0 22px rgba(178,74,230,.07) !important;

}


/* ============================================================
   09 — HIDE OLD NUMBER
============================================================ */

.lg-track-row > .lg-track-number {

	display: none !important;

}


/* ============================================================
   10 — HIDE OLD PLAY BUTTON
============================================================ */

.lg-track-row > .lg-track-play {

	display: none !important;

}


/* ============================================================
   11 — SONG TITLE
============================================================ */

.lg-track-row > .lg-track-title {

	position: relative !important;

	display: flex !important;

	align-items: center !important;

	min-width: 0 !important;

	width: 100% !important;

	padding:
		0 8px 0 58px !important;

	margin: 0 !important;

	box-sizing: border-box !important;

}


/* Music note */

.lg-track-row > .lg-track-title::before {

	content: "♪";

	position: absolute;

	left: 0;

	top: 50%;

	transform:
		translateY(-50%);

	display: flex;

	align-items: center;

	justify-content: center;

	width: 46px;

	height: 46px;

	border-radius: 14px;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			#d92ab0,
			#8140e8 55%,
			#5848ed
		);

	font-size: 22px;

	font-weight: 950;

	line-height: 1;

	box-shadow:
		0 8px 20px rgba(100,51,208,.20);

}


/* ============================================================
   12 — SONG TITLE TEXT
============================================================ */

.lg-track-row > .lg-track-title > a {

	display: block !important;

	width: 100% !important;

	min-width: 0 !important;

	max-width: none !important;

	margin: 0 !important;

	padding: 0 !important;

	overflow: visible !important;

	color: #18152f !important;

	font-size:
		16px !important;

	font-weight:
		900 !important;

	line-height:
		1.35 !important;

	letter-spacing:
		-.012em !important;

	text-decoration: none !important;

	white-space: normal !important;

	word-break: normal !important;

	overflow-wrap: anywhere !important;

	text-overflow: clip !important;

}


/* Title hover */

.lg-track-row > .lg-track-title > a:hover {

	color:
		#7138dc !important;

}


/* ============================================================
   13 — DURATION
============================================================ */

.lg-track-row > .lg-track-duration {

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	width: 45px !important;

	min-width: 45px !important;

	margin: 0 !important;

	padding: 0 !important;

	color: #77718f !important;

	font-size: 12px !important;

	font-weight: 800 !important;

	white-space: nowrap !important;

}


/* ============================================================
   14 — READ LYRICS BUTTON
============================================================ */

.lg-track-row > .lg-read-lyrics-button {

	position: relative !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 8px !important;

	width: 132px !important;

	min-width: 132px !important;

	height: 46px !important;

	padding:
		0 15px !important;

	box-sizing: border-box !important;

	border:
		1px solid rgba(255,190,0,.65) !important;

	border-radius:
		13px !important;

	color: #201b08 !important;

	background:
		linear-gradient(
			135deg,
			#ffe96a 0%,
			#ffd21f 48%,
			#ffbd00 100%
		) !important;

	font-size:
		12px !important;

	font-weight:
		950 !important;

	line-height: 1 !important;

	text-decoration: none !important;

	white-space: nowrap !important;

	box-shadow:
		0 8px 20px rgba(255,193,7,.24),
		0 0 20px rgba(255,204,40,.18) !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		filter .25s ease !important;

}


/* Document SVG */

.lg-track-row > .lg-read-lyrics-button::before {

	content: "";

	width: 18px;

	height: 18px;

	flex: 0 0 18px;

	background-repeat: no-repeat;

	background-position: center;

	background-size: contain;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 3.5h8l4 4V20.5H6z' stroke='%23201b08' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5v5h4' stroke='%23201b08' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 12h6M9 15.5h6' stroke='%23201b08' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");

}


/* Remove old musical note span */

.lg-track-row > .lg-read-lyrics-button > span {

	display: none !important;

}


/* Read Lyrics hover */

.lg-track-row > .lg-read-lyrics-button:hover {

	transform:
		translateY(-3px) scale(1.015) !important;

	color:
		#17120a !important;

	filter:
		saturate(1.08) brightness(1.03) !important;

	box-shadow:
		0 14px 30px rgba(255,190,0,.30),
		0 0 30px rgba(255,211,51,.28) !important;

}


/* ============================================================
   15 — VIEW ALL LYRICS
============================================================ */

.lg-view-all-lyrics {

	position: relative !important;

	z-index: 3 !important;

	width: 100% !important;

	margin:
		18px 0 0 !important;

}


/* FULL WIDTH */

.lg-view-all-lyrics a {

	position: relative !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 9px !important;

	width: 100% !important;

	min-height: 52px !important;

	padding:
		0 20px !important;

	box-sizing: border-box !important;

	overflow: hidden !important;

	border:
		1px solid rgba(139,113,234,.38) !important;

	border-radius:
		15px !important;

	color: #ffffff !important;

	background:
		linear-gradient(
			135deg,
			#15102f 0%,
			#24154e 45%,
			#40217c 100%
		) !important;

	font-size:
		13px !important;

	font-weight:
		950 !important;

	line-height: 1 !important;

	text-decoration: none !important;

	box-shadow:
		0 12px 30px rgba(32,20,76,.20),
		0 0 25px rgba(91,55,191,.12) !important;

	transition:
		transform .28s ease,
		box-shadow .28s ease,
		border-color .28s ease !important;

}


/* White document icon */

.lg-view-all-lyrics a > span:first-child {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	width: 22px !important;

	height: 22px !important;

	font-size: 0 !important;

	background-repeat: no-repeat !important;

	background-position: center !important;

	background-size: contain !important;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 3.5h8l4 4V20.5H6z' stroke='%23ffffff' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5v5h4' stroke='%23ffffff' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 12h6M9 15.5h6' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");

}


/* Arrow */

.lg-view-all-lyrics a > span:last-child {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	margin-left: 5px !important;

	font-size: 16px !important;

	color: #ffffff !important;

}


/* View all hover */

.lg-view-all-lyrics a:hover {

	transform:
		translateY(-3px) !important;

	border-color:
		rgba(201,174,255,.65) !important;

	box-shadow:
		0 18px 38px rgba(32,20,76,.28),
		0 0 32px rgba(108,71,222,.25) !important;

}


/* Moving shine */

.lg-view-all-lyrics a::before {

	content: "";

	position: absolute;

	top: 0;

	left: -120%;

	width: 70%;

	height: 100%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.18),
			transparent
		);

	transform:
		skewX(-20deg);

	transition:
		left .75s ease;

	pointer-events: none;

}


.lg-view-all-lyrics a:hover::before {

	left: 140%;

}


/* ============================================================
   16 — TABLET
============================================================ */

@media (max-width: 900px) {

	.lg-tracklist-section {

		padding:
			24px 20px 20px !important;

	}


	.lg-tracklist-grid {

		grid-template-columns:
			1fr !important;

	}


	.lg-track-row {

		min-height:
			72px !important;

	}


	.lg-track-row > .lg-track-title > a {

		font-size:
			15px !important;

	}

}


/* ============================================================
   17 — MOBILE
============================================================ */

@media (max-width: 600px) {

	.lg-tracklist-section {

		padding:
			22px 14px 18px !important;

		border-radius:
			20px !important;

	}


	.lg-section-heading {

		margin-bottom:
			20px !important;

		padding-bottom:
			16px !important;

	}


	.lg-section-heading h2 {

		font-size:
			24px !important;

	}


	.lg-section-icon {

		width: 42px !important;

		height: 42px !important;

		flex-basis: 42px !important;

	}


	.lg-tracklist-grid {

		grid-template-columns:
			1fr !important;

		gap:
			10px !important;

	}


	.lg-track-row {

		grid-template-columns:
			minmax(0,1fr)
			110px !important;

		min-height:
			72px !important;

		padding:
			9px !important;

		gap:
			8px !important;

	}


	.lg-track-row > .lg-track-title {

		padding-left:
			52px !important;

	}


	.lg-track-row > .lg-track-title::before {

		width:
			42px !important;

		height:
			42px !important;

		font-size:
			20px !important;

	}


	.lg-track-row > .lg-track-title > a {

		font-size:
			15px !important;

		line-height:
			1.3 !important;

	}


	.lg-track-row > .lg-track-duration {

		display:
			none !important;

	}


	.lg-track-row > .lg-read-lyrics-button {

		width:
			110px !important;

		min-width:
			110px !important;

		height:
			44px !important;

		font-size:
			11px !important;

	}


	.lg-view-all-lyrics a {

		min-height:
			50px !important;

		font-size:
			12px !important;

	}

}


/* ============================================================
   18 — SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

	.lg-tracklist-section {

		padding:
			20px 11px 16px !important;

	}


	.lg-section-heading h2 {

		font-size:
			22px !important;

	}


	.lg-track-row {

		grid-template-columns:
			minmax(0,1fr)
			104px !important;

		min-height:
			68px !important;

	}


	.lg-track-row > .lg-track-title {

		padding-left:
			48px !important;

	}


	.lg-track-row > .lg-track-title::before {

		width:
			39px !important;

		height:
			39px !important;

		border-radius:
			12px !important;

		font-size:
			19px !important;

	}


	.lg-track-row > .lg-track-title > a {

		font-size:
			14px !important;

	}


	.lg-track-row > .lg-read-lyrics-button {

		width:
			104px !important;

		min-width:
			104px !important;

		height:
			42px !important;

		font-size:
			10px !important;

	}

}


/* ============================================================
   19 — REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

	.lg-section-heading::after {

		animation:
			none !important;

	}

	.lg-track-row,
	.lg-read-lyrics-button,
	.lg-view-all-lyrics a {

		transition:
			none !important;

	}

}
















/* =========================================================
   TRACKLIST — FINAL BUTTON FIX
   ========================================================= */

/* Remove the old wrapper/background that creates the
   second rounded button behind View All Lyrics */
.lg-view-all-lyrics {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
}

/* The actual View All Lyrics button becomes the
   ONLY visible button */
.lg-view-all-lyrics a {
    width: 100% !important;
    min-height: 54px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 14px 24px !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            #171033 0%,
            #2d1768 50%,
            #402080 100%
        ) !important;

    border: 1px solid rgba(145, 91, 255, 0.55) !important;

    color: #ffffff !important;

    box-shadow:
        0 12px 28px rgba(74, 38, 150, 0.28),
        0 0 22px rgba(156, 78, 255, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;

    text-decoration: none !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

/* View All icon */
.lg-view-all-lyrics a span {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Hover */
.lg-view-all-lyrics a:hover {
    background:
        linear-gradient(
            135deg,
            #24134c 0%,
            #5427a5 52%,
            #7137c9 100%
        ) !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 16px 34px rgba(82, 40, 170, 0.38),
        0 0 30px rgba(177, 82, 255, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.lg-view-all-lyrics a:hover span {
    color: #ffffff !important;
}









/* =========================================================
   READ LYRICS — WHITE HOVER
   ========================================================= */

.lg-read-lyrics-button,
.lg-read-lyrics-button span {
    color: #17122f !important;
}

/* Keep the normal yellow button */
.lg-read-lyrics-button {
    background:
        linear-gradient(
            135deg,
            #ffd83d 0%,
            #ffc400 55%,
            #ffb800 100%
        ) !important;

    border: 1px solid rgba(255, 184, 0, 0.75) !important;

    box-shadow:
        0 8px 20px rgba(255, 190, 0, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.45) !important;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease !important;
}

/* Hover = premium dark purple */
.lg-read-lyrics-button:hover,
.lg-read-lyrics-button:focus-visible {
    background:
        linear-gradient(
            135deg,
            #241342 0%,
            #4a218f 50%,
            #6d32c8 100%
        ) !important;

    color: #ffffff !important;

    border-color: rgba(174, 113, 255, 0.8) !important;

    box-shadow:
        0 10px 25px rgba(91, 43, 180, 0.38),
        0 0 22px rgba(156, 78, 255, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.14) !important;

    transform: translateY(-2px) !important;
}

/* Text inside button */
.lg-read-lyrics-button:hover span,
.lg-read-lyrics-button:focus-visible span {
    color: #ffffff !important;
}

/* SVG inside Read Lyrics button */
.lg-read-lyrics-button svg {
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
}

.lg-read-lyrics-button:hover svg,
.lg-read-lyrics-button:focus-visible svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* If your current icon is a text music/document symbol */
.lg-read-lyrics-button > span {
    color: inherit !important;
}










/* ============================================================
   LYRICS TRACKLIST — FINAL OVERRIDE
   Fix Read Lyrics hover + remove View All ghost corners
   ============================================================ */


/* ------------------------------------------------------------
   1. READ LYRICS — NORMAL STATE
   ------------------------------------------------------------ */

.lg-single-album
.lg-read-lyrics-button {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 108px !important;
    height: 42px !important;

    padding: 0 16px !important;

    border: 1px solid rgba(255, 190, 0, .65) !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #ffe45c 0%,
            #ffd02f 50%,
            #ffb800 100%
        ) !important;

    color: #17122b !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    box-shadow:
        0 7px 18px rgba(255, 190, 0, .22),
        0 0 18px rgba(255, 210, 50, .12) !important;

    transform: translateY(0) !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;
}


/* ------------------------------------------------------------
   2. READ LYRICS — ICON
   ------------------------------------------------------------ */

.lg-single-album
.lg-read-lyrics-button > span {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;

    color: #17122b !important;

    font-size: 16px !important;

    line-height: 1 !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}


/* ------------------------------------------------------------
   3. READ LYRICS — HOVER
   ------------------------------------------------------------ */

.lg-single-album
.lg-read-lyrics-button:hover,
.lg-single-album
.lg-read-lyrics-button:focus-visible {

    color: #ffffff !important;

    border-color:
        rgba(255,255,255,.72) !important;

    background:
        linear-gradient(
            135deg,
            #24133f 0%,
            #4b208f 48%,
            #7134d1 100%
        ) !important;

    transform:
        translateY(-3px) !important;

    box-shadow:
        0 12px 28px rgba(75, 32, 143, .34),
        0 0 26px rgba(145, 70, 255, .28),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}


/* ------------------------------------------------------------
   4. READ LYRICS — FORCE WHITE ICON ON HOVER
   ------------------------------------------------------------ */

.lg-single-album
.lg-read-lyrics-button:hover > span,
.lg-single-album
.lg-read-lyrics-button:focus-visible > span {

    color: #ffffff !important;

    transform:
        scale(1.08) !important;
}


/* ------------------------------------------------------------
   5. REMOVE ANY OLD VIEW-ALL WRAPPER STYLING
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin:
        22px
        0
        0 !important;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   6. REMOVE PSEUDO ELEMENTS FROM WRAPPER
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics::before,
.lg-single-album
.lg-view-all-lyrics::after {

    content: none !important;

    display: none !important;

}


/* ------------------------------------------------------------
   7. VIEW ALL — ONLY ONE REAL BUTTON
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics > a {

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    box-sizing: border-box !important;

    width: 100% !important;

    min-width: 100% !important;

    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
        0
        22px !important;

    border:
        1px solid rgba(151, 105, 255, .55) !important;

    outline: none !important;

    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #171033 0%,
            #29175d 48%,
            #44238b 100%
        ) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow:
        0 12px 28px rgba(45, 23, 100, .26),
        0 0 22px rgba(126, 68, 230, .16),
        inset 0 1px 0 rgba(255,255,255,.10) !important;

    transform:
        translateY(0) !important;

    overflow: hidden !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;
}


/* ------------------------------------------------------------
   8. REMOVE OLD VIEW-ALL PSEUDO EFFECTS
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics > a::before,
.lg-single-album
.lg-view-all-lyrics > a::after {

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   9. VIEW ALL ICONS
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics > a > span {

    position: relative !important;

    z-index: 2 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;

    font-size: 16px !important;

    line-height: 1 !important;
}


/* ------------------------------------------------------------
   10. VIEW ALL HOVER
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics > a:hover,
.lg-single-album
.lg-view-all-lyrics > a:focus-visible {

    color: #ffffff !important;

    border-color:
        rgba(194, 151, 255, .88) !important;

    background:
        linear-gradient(
            135deg,
            #21123f 0%,
            #4a208e 48%,
            #6b32c5 100%
        ) !important;

    transform:
        translateY(-3px) !important;

    box-shadow:
        0 17px 36px rgba(49, 25, 108, .34),
        0 0 32px rgba(150, 78, 255, .25),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}


/* ------------------------------------------------------------
   11. VIEW ALL HOVER ICONS
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics > a:hover > span,
.lg-single-album
.lg-view-all-lyrics > a:focus-visible > span {

    color: #ffffff !important;
}


/* ------------------------------------------------------------
   12. PREVENT TRACK ROW FROM INTERFERING
   ------------------------------------------------------------ */

.lg-single-album
.lg-view-all-lyrics {

    clear: both !important;
}


/* ------------------------------------------------------------
   13. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .lg-single-album
    .lg-read-lyrics-button {

        min-width: 92px !important;

        height: 40px !important;

        padding:
            0
            12px !important;

        font-size: 11px !important;

    }


    .lg-single-album
    .lg-view-all-lyrics {

        margin-top: 18px !important;

    }


    .lg-single-album
    .lg-view-all-lyrics > a {

        width: 100% !important;

        min-width: 100% !important;

        height: 50px !important;

        min-height: 50px !important;

        border-radius: 14px !important;

        font-size: 12px !important;

    }

}










/* =========================================================
   FINAL ICON FIX
   Read Lyrics = DOCUMENT ICON ONLY
   View All Lyrics = MUSIC NOTE ICON
   ========================================================= */

/* Remove the extra music-note icon from Read Lyrics */
.lg-single-album .lg-read-lyrics-button .lg-read-lyrics-icon,
.lg-single-album .lg-read-lyrics-button .music-icon,
.lg-single-album .lg-read-lyrics-button .music-note,
.lg-single-album .lg-read-lyrics-button .fa-music,
.lg-single-album .lg-read-lyrics-button .icon-music {
    display: none !important;
}


/* If the music icon is being inserted through ::before,
   remove it from Read Lyrics */
.lg-single-album .lg-read-lyrics-button::before {
    content: none !important;
    display: none !important;
}


/* Keep ONLY the document icon */
.lg-single-album .lg-read-lyrics-button svg {
    display: inline-block !important;

    width: 16px !important;
    height: 16px !important;

    flex: 0 0 auto !important;

    color: currentColor !important;
    stroke: currentColor !important;

    fill: none !important;
}


/* Read Lyrics normal icon */
.lg-single-album .lg-read-lyrics-button {
    color: #17122b !important;
}


/* Read Lyrics hover icon + text */
.lg-single-album .lg-read-lyrics-button:hover,
.lg-single-album .lg-read-lyrics-button:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* =========================================================
   VIEW ALL LYRICS
   Keep music-note SVG visible
   ========================================================= */

.lg-single-album .lg-view-all-lyrics > a::before {
    content: none !important;
}


/* View All SVG */
.lg-single-album .lg-view-all-lyrics > a svg {
    display: inline-block !important;

    width: 17px !important;
    height: 17px !important;

    flex: 0 0 auto !important;

    color: #ffffff !important;
    stroke: #ffffff !important;

    fill: none !important;
}


/* View All icon stays white on hover */
.lg-single-album .lg-view-all-lyrics > a:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}











/* =========================================================
   LYRIC BUTTON — FINAL ICON CONTROL
   ========================================================= */

/* ---------------------------------------------------------
   1. READ LYRICS
   ONLY DOCUMENT ICON
   --------------------------------------------------------- */

/* Hide every existing icon inside Read Lyrics */
.lg-read-lyrics-button svg,
.lg-read-lyrics-button i,
.lg-read-lyrics-button .icon,
.lg-read-lyrics-button .music-icon,
.lg-read-lyrics-button .music-note,
.lg-read-lyrics-button .lg-read-lyrics-icon {
    display: none !important;
}

/* Remove pseudo icons */
.lg-read-lyrics-button::before,
.lg-read-lyrics-button::after {
    content: none !important;
}

/* Create our own document SVG */
.lg-read-lyrics-button::before {
    content: "" !important;

    display: inline-block !important;

    width: 17px !important;
    height: 17px !important;

    flex: 0 0 17px !important;

    background-color: currentColor !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2.5h9.2L20 7.3V21.5H6V2.5Zm8.5 1.8H8v15.4h10.2V8.2h-3.7V4.3Zm1.4 0v2.5h2.5l-2.5-2.5ZM9.5 11h7v1.5h-7V11Zm0 3h7v1.5h-7V14Zm0 3h4.8v1.5H9.5V17Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2.5h9.2L20 7.3V21.5H6V2.5Zm8.5 1.8H8v15.4h10.2V8.2h-3.7V4.3Zm1.4 0v2.5h2.5l-2.5-2.5ZM9.5 11h7v1.5h-7V11Zm0 3h7v1.5h-7V14Zm0 3h4.8v1.5H9.5V17Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    color: inherit !important;
}


/* Read Lyrics layout */
.lg-read-lyrics-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;
}


/* Read Lyrics hover:
   icon + text become WHITE */
.lg-read-lyrics-button:hover,
.lg-read-lyrics-button:focus,
.lg-read-lyrics-button:hover::before,
.lg-read-lyrics-button:focus::before {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   2. VIEW ALL LYRICS
   ONLY MUSIC NOTE ICON
   --------------------------------------------------------- */

/* Hide existing View All icon */
.lg-view-all-lyrics svg,
.lg-view-all-lyrics i,
.lg-view-all-lyrics .icon,
.lg-view-all-lyrics .document-icon,
.lg-view-all-lyrics .lg-view-all-icon {
    display: none !important;
}


/* Remove old pseudo icon */
.lg-view-all-lyrics > a::before,
.lg-view-all-lyrics > a::after {
    content: none !important;
}


/* Create MUSIC NOTE SVG */
.lg-view-all-lyrics > a::before {
    content: "" !important;

    display: inline-block !important;

    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    background-color: currentColor !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3v11.1a4.5 4.5 0 1 1-1.5-3.35V6.2l7-1.75v7.65a4.5 4.5 0 1 1-1.5-3.35V2.5L14.5 3Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3v11.1a4.5 4.5 0 1 1-1.5-3.35V6.2l7-1.75v7.65a4.5 4.5 0 1 1-1.5-3.35V2.5L14.5 3Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    color: #ffffff !important;
}


/* View All layout */
.lg-view-all-lyrics > a {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;
}


/* Keep music icon white */
.lg-view-all-lyrics > a::before {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   3. IMPORTANT — STOP OTHER CSS FROM ADDING ICONS
   --------------------------------------------------------- */

.lg-read-lyrics-button span:first-child,
.lg-read-lyrics-button .lg-read-lyrics-icon,
.lg-read-lyrics-button .music-note-icon {
    display: none !important;
}


/* Don't allow a music icon through text/icon pseudo rules */
.lg-read-lyrics-button[class*="music"]::before {
    content: "" !important;
}


/* ---------------------------------------------------------
   4. MOBILE + TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .lg-read-lyrics-button::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
    }

    .lg-view-all-lyrics > a::before {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
    }
}


@media (max-width: 767px) {

    .lg-read-lyrics-button {
        gap: 8px !important;
    }

    .lg-read-lyrics-button::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
    }

    .lg-view-all-lyrics > a {
        gap: 8px !important;
    }

    .lg-view-all-lyrics > a::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
    }
}







/* =========================================================
   LYRICSGROOVE — TRACKLIST ICON OVERRIDES
   Add ONLY at the very bottom of the existing CSS.
   Does not replace or modify existing CSS.
   ========================================================= */

/* ---------------------------------------------------------
   READ LYRICS — DOCUMENT ICON
   --------------------------------------------------------- */

.lg-single-album-tracklist .lg-track-lyrics svg,
.lg-single-album-tracklist .lg-track-lyrics .lg-lyrics-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    display: inline-block !important;
    flex: 0 0 16px !important;
    vertical-align: middle !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

/* Keep icon + text aligned */
.lg-single-album-tracklist .lg-track-lyrics {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ---------------------------------------------------------
   READ LYRICS — NORMAL STATE
   --------------------------------------------------------- */

.lg-single-album-tracklist .lg-track-lyrics svg path,
.lg-single-album-tracklist .lg-track-lyrics svg circle {
    stroke: currentColor !important;
}

/* ---------------------------------------------------------
   READ LYRICS — HOVER
   Existing yellow button becomes premium purple gradient.
   Icon + text become white.
   --------------------------------------------------------- */

.lg-single-album-tracklist .lg-track-lyrics:hover,
.lg-single-album-tracklist .lg-track-lyrics:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(
        135deg,
        #ffb800 0%,
        #ff8a00 45%,
        #ff4d9d 100%
    ) !important;

    border-color: rgba(255,255,255,.55) !important;

    box-shadow:
        0 10px 25px rgba(255, 166, 0, .28),
        0 0 24px rgba(255, 94, 190, .22) !important;

    transform: translateY(-2px) !important;
}

/* Hover icon must stay white */
.lg-single-album-tracklist .lg-track-lyrics:hover svg,
.lg-single-album-tracklist .lg-track-lyrics:focus-visible svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.lg-single-album-tracklist .lg-track-lyrics:hover svg path,
.lg-single-album-tracklist .lg-track-lyrics:hover svg circle,
.lg-single-album-tracklist .lg-track-lyrics:focus-visible svg path,
.lg-single-album-tracklist .lg-track-lyrics:focus-visible svg circle {
    stroke: #ffffff !important;
}


/* =========================================================
   VIEW ALL LYRICS — MUSIC NOTE ICON
   ========================================================= */

.lg-single-album-view-all svg,
.lg-single-album-view-all .lg-view-all-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: inline-block !important;
    flex: 0 0 18px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    vertical-align: middle !important;
}

/* Make SVG strokes white */
.lg-single-album-view-all svg path,
.lg-single-album-view-all svg circle {
    stroke: #ffffff !important;
}

/* Keep music icon + text + arrow perfectly aligned */
.lg-single-album-view-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}

/* ---------------------------------------------------------
   VIEW ALL LYRICS — PREMIUM HOVER
   --------------------------------------------------------- */

.lg-single-album-view-all:hover,
.lg-single-album-view-all:focus-visible {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #17103d 0%,
        #321b78 48%,
        #5428a8 100%
    ) !important;

    border-color: rgba(184, 139, 255, .8) !important;

    box-shadow:
        0 12px 30px rgba(75, 35, 160, .38),
        0 0 30px rgba(145, 77, 255, .28) !important;

    transform: translateY(-2px) !important;
}

.lg-single-album-view-all:hover svg,
.lg-single-album-view-all:focus-visible svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.lg-single-album-view-all:hover svg path,
.lg-single-album-view-all:hover svg circle,
.lg-single-album-view-all:focus-visible svg path,
.lg-single-album-view-all:focus-visible svg circle {
    stroke: #ffffff !important;
}


/* =========================================================
   SAFETY — REMOVE OLD TEXT MUSIC SYMBOLS
   This only hides the old generated ♫ spans if they remain.
   It does NOT affect the new SVG icons.
   ========================================================= */

.lg-single-album-tracklist .lg-track-lyrics > span:has(+ svg),
.lg-single-album-view-all > span:has(+ svg) {
    display: none !important;
}


/* =========================================================
   MOBILE / TABLET ICON SAFETY
   ========================================================= */

@media (max-width: 767px) {

    .lg-single-album-tracklist .lg-track-lyrics svg {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
    }

    .lg-single-album-view-all svg {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
    }
}











/* =========================================================
   LYRICSGROOVE — FINAL TRACK BUTTON ICON OVERRIDE
   IMPORTANT:
   Uses the EXISTING PHP <span>♫</span> markup.
   No PHP change required.
   No existing CSS needs to be removed.
   ========================================================= */


/* =========================================================
   1. READ LYRICS
   Existing PHP:
   <span>♫</span> Read Lyrics

   Replace visual ♫ with DOCUMENT SVG.
   ========================================================= */

.lg-single-album .lg-read-lyrics-button > span:first-child {

    /* Make the existing span become the icon */
    display: inline-block !important;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    min-height: 17px !important;

    flex: 0 0 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background-color: currentColor !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2.5h9.2L20 7.3V21.5H6V2.5Zm8.5 1.8H8v15.4h10.2V8.2h-3.7V4.3Zm1.4 0v2.5h2.5l-2.5-2.5ZM9.5 11h7v1.5h-7V11Zm0 3h7v1.5h-7V14Zm0 3h4.8V18H9.5V17Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2.5h9.2L20 7.3V21.5H6V2.5Zm8.5 1.8H8v15.4h10.2V8.2h-3.7V4.3Zm1.4 0v2.5h2.5l-2.5-2.5ZM9.5 11h7v1.5h-7V11Zm0 3h7v1.5h-7V14Zm0 3h4.8V18H9.5V17Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    color: currentColor !important;

}


/* Read Lyrics button alignment */

.lg-single-album .lg-read-lyrics-button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

}


/* =========================================================
   2. READ LYRICS HOVER
   Icon becomes WHITE together with text.
   ========================================================= */

.lg-single-album
.lg-read-lyrics-button:hover
> span:first-child {

    background-color: #ffffff !important;

    color: #ffffff !important;

}


/* =========================================================
   3. VIEW ALL LYRICS
   Existing PHP:
   <span>♫</span>
   View All Lyrics
   <span>→</span>

   Replace visual ♫ with MUSIC NOTE SVG.
   ========================================================= */

.lg-single-album
.lg-view-all-lyrics
> a
> span:first-child {

    display: inline-block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    flex: 0 0 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background-color: currentColor !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3v11.1a4.5 4.5 0 1 1-1.5-3.35V6.2l7-1.75v7.65a4.5 4.5 0 1 1-1.5-3.35V2.5L14.5 3Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3v11.1a4.5 4.5 0 1 1-1.5-3.35V6.2l7-1.75v7.65a4.5 4.5 0 1 1-1.5-3.35V2.5L14.5 3Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    color: #ffffff !important;

}


/* View All alignment */

.lg-single-album
.lg-view-all-lyrics
> a {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

}


/* =========================================================
   4. VIEW ALL ARROW
   Keep the second span as the arrow.
   ========================================================= */

.lg-single-album
.lg-view-all-lyrics
> a
> span:last-child {

    display: inline-block !important;

    font-size: 14px !important;
    line-height: 1 !important;

    color: #ffffff !important;

}


/* =========================================================
   5. VIEW ALL HOVER
   ========================================================= */

.lg-single-album
.lg-view-all-lyrics
> a:hover
> span:first-child {

    background-color: #ffffff !important;

    color: #ffffff !important;

}


/* =========================================================
   6. IMPORTANT
   Prevent the old ♫ character from appearing.
   The span itself remains visible as the SVG mask.
   ========================================================= */

.lg-single-album
.lg-read-lyrics-button
> span:first-child,

.lg-single-album
.lg-view-all-lyrics
> a
> span:first-child {

    overflow: hidden !important;

    text-indent: -9999px !important;

    white-space: nowrap !important;

}


/* =========================================================
   7. MOBILE SAFETY
   ========================================================= */

@media (max-width: 767px) {

    .lg-single-album
    .lg-read-lyrics-button
    > span:first-child {

        width: 16px !important;
        height: 16px !important;

        min-width: 16px !important;
        min-height: 16px !important;

        flex-basis: 16px !important;

    }


    .lg-single-album
    .lg-view-all-lyrics
    > a
    > span:first-child {

        width: 17px !important;
        height: 17px !important;

        min-width: 17px !important;
        min-height: 17px !important;

        flex-basis: 17px !important;

    }

}











/* Hide View All Lyrics button */
.lg-single-album .lg-view-all-lyrics {
    display: none !important;
}

















/* =========================================================
   LYRICSGROOVE — TYPOGRAPHY CLARITY FIX
   Typography only.
   Does NOT change layout, colors, views, buttons or functions.
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL TEXT RENDERING
   --------------------------------------------------------- */

.lg-single-album,
.lg-single-album * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

    text-rendering: optimizeLegibility !important;
}


/* ---------------------------------------------------------
   HERO — ALBUM TITLE
   --------------------------------------------------------- */

.lg-single-album .lg-album-title,
.lg-single-album .lg-single-album-title,
.lg-single-album h1 {

    font-weight: 800 !important;

    letter-spacing: -0.035em !important;

    line-height: 1.05 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* Year beside album title */

.lg-single-album .lg-album-year,
.lg-single-album .lg-single-album-year {

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   ARTIST NAME
   --------------------------------------------------------- */

.lg-single-album .lg-artist-name,
.lg-single-album .lg-album-artist,
.lg-single-album .lg-hero-artist-name {

    font-weight: 750 !important;

    opacity: 1 !important;

    letter-spacing: -0.015em !important;

    text-shadow: none !important;

}


/* Artist type */

.lg-single-album .lg-artist-type,
.lg-single-album .lg-artist-role {

    font-weight: 600 !important;

    opacity: 1 !important;

}


/* ---------------------------------------------------------
   HERO BUTTON TEXT
   --------------------------------------------------------- */

.lg-single-album .lg-hero-actions button,
.lg-single-album .lg-hero-actions a,
.lg-single-album .lg-view-artist-button {

    font-weight: 700 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   RIGHT META PANEL
   --------------------------------------------------------- */

.lg-single-album .lg-meta-panel {

    opacity: 1 !important;

    text-shadow: none !important;

}


/* Meta labels */

.lg-single-album .lg-meta-label,
.lg-single-album .lg-meta-item-label,
.lg-single-album .lg-meta-card-label {

    font-weight: 650 !important;

    opacity: 1 !important;

    letter-spacing: 0.01em !important;

    text-shadow: none !important;

}


/* Meta values */

.lg-single-album .lg-meta-value,
.lg-single-album .lg-meta-item-value,
.lg-single-album .lg-meta-card-value {

    font-weight: 750 !important;

    opacity: 1 !important;

    letter-spacing: -0.012em !important;

    text-shadow: none !important;

}


/* Artist name inside meta panel */

.lg-single-album .lg-meta-panel h2,
.lg-single-album .lg-meta-panel h3 {

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   TRACKLIST HEADING
   --------------------------------------------------------- */

.lg-single-album .lg-tracklist-title,
.lg-single-album .lg-tracklist h2,
.lg-single-album .lg-tracklist h3 {

    font-weight: 800 !important;

    opacity: 1 !important;

    letter-spacing: -0.025em !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   TRACK TITLES
   --------------------------------------------------------- */

.lg-single-album .lg-track-title,
.lg-single-album .lg-track-name,
.lg-single-album .lg-tracklist-item-title {

    font-weight: 700 !important;

    opacity: 1 !important;

    letter-spacing: -0.012em !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   READ LYRICS
   --------------------------------------------------------- */

.lg-single-album .lg-read-lyrics-button {

    font-weight: 700 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   ABOUT THIS ALBUM
   --------------------------------------------------------- */

.lg-single-album .lg-about-album h2,
.lg-single-album .lg-about-album h3 {

    font-weight: 800 !important;

    opacity: 1 !important;

    letter-spacing: -0.02em !important;

    text-shadow: none !important;

}


.lg-single-album .lg-about-album p {

    font-weight: 500 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   ALBUM HIGHLIGHTS
   --------------------------------------------------------- */

.lg-single-album .lg-album-highlights h2,
.lg-single-album .lg-album-highlights h3 {

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


.lg-single-album .lg-highlight-label {

    font-weight: 600 !important;

    opacity: 1 !important;

}


.lg-single-album .lg-highlight-value {

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow: none !important;

}


/* ---------------------------------------------------------
   REMOVE COMMON HAZE SOURCES FROM TEXT
   --------------------------------------------------------- */

.lg-single-album .lg-album-title,
.lg-single-album .lg-artist-name,
.lg-single-album .lg-meta-value,
.lg-single-album .lg-meta-label,
.lg-single-album .lg-track-title,
.lg-single-album .lg-track-name,
.lg-single-album .lg-read-lyrics-button,
.lg-single-album .lg-tracklist-title,
.lg-single-album .lg-about-album,
.lg-single-album .lg-album-highlights {

    filter: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

}


/* ---------------------------------------------------------
   MOBILE — KEEP TEXT CRISP
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .lg-single-album .lg-album-title,
    .lg-single-album .lg-single-album-title,
    .lg-single-album h1 {

        font-weight: 800 !important;

        letter-spacing: -0.025em !important;

        line-height: 1.08 !important;

    }


    .lg-single-album .lg-artist-name,
    .lg-single-album .lg-album-artist {

        font-weight: 750 !important;

    }


    .lg-single-album .lg-meta-value,
    .lg-single-album .lg-meta-item-value,
    .lg-single-album .lg-meta-card-value {

        font-weight: 750 !important;

    }


    .lg-single-album .lg-track-title,
    .lg-single-album .lg-track-name {

        font-weight: 700 !important;

    }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {

    .lg-single-album .lg-album-title,
    .lg-single-album .lg-single-album-title {

        font-weight: 800 !important;

    }


    .lg-single-album .lg-meta-value,
    .lg-single-album .lg-meta-item-value {

        font-weight: 750 !important;

    }

}
















/* ==========================================================
   LYRICSGROOVE — FINAL TABLET TRACKLIST FIX
   1. Tablet Portrait: larger SVG icons
   2. Tablet Landscape: single full-width track column
   ========================================================== */


/* ==========================================================
   TABLET PORTRAIT
   Larger Tracklist heading + track music icons
   ========================================================== */

@media screen
and (min-width: 600px)
and (max-width: 1024px)
and (orientation: portrait) {

    /* Tracklist heading icon */
    .lg-tracklist-header .lg-tracklist-icon,
    .lg-tracklist-heading .lg-tracklist-icon,
    .lg-tracklist-title-icon,
    .lg-tracklist-header svg {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    /* Track music-note icon */
    .lg-track-item .lg-track-icon,
    .lg-track-item .lg-track-music-icon,
    .lg-track-icon,
    .lg-track-music-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    /* Make the actual SVG fill the larger icon box */
    .lg-track-item .lg-track-icon svg,
    .lg-track-item .lg-track-music-icon svg,
    .lg-track-icon svg,
    .lg-track-music-icon svg {
        width: 27px !important;
        height: 27px !important;
    }

    /* Heading SVG */
    .lg-tracklist-header .lg-tracklist-icon svg,
    .lg-tracklist-heading .lg-tracklist-icon svg,
    .lg-tracklist-title-icon svg {
        width: 28px !important;
        height: 28px !important;
    }
}


/* ==========================================================
   TABLET LANDSCAPE
   FORCE TRACKLIST INTO ONE FULL-WIDTH COLUMN
   ========================================================== */

@media screen
and (min-width: 768px)
and (max-width: 1200px)
and (orientation: landscape) {

    /*
     * Force the tracklist grid to one column.
     * This prevents titles from being squeezed into
     * narrow half-width cards.
     */

    .lg-tracklist-grid,
    .lg-tracklist-list,
    .lg-tracks-grid,
    .lg-tracklist-items {
        grid-template-columns: minmax(0, 1fr) !important;
        display: grid !important;
        width: 100% !important;
    }

    /*
     * Every track card gets the complete available width.
     */

    .lg-track-item {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    /*
     * Prevent the title from being squeezed vertically.
     */

    .lg-track-item .lg-track-title,
    .lg-track-title {
        min-width: 0 !important;
        width: auto !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Keep the title area flexible while the
     * separator and Read Lyrics button stay visible.
     */

    .lg-track-item .lg-track-title a,
    .lg-track-title a {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}










/* ============================================================
   LYRICSGROOVE — TABLET PORTRAIT
   SINGLE SOURCE OF TRUTH FOR TRACKLIST ICONS
   ============================================================ */

@media screen
and (min-width: 601px)
and (max-width: 1024px)
and (orientation: portrait) {

    /* --------------------------------------------------------
       TRACKLIST HEADING ICON
       This is the actual SVG inside the heading
       -------------------------------------------------------- */

    .lg-single-album
    .lg-tracklist-section
    .lg-tracklist-header
    svg {

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        max-width: 42px !important;
        max-height: 42px !important;

        flex: 0 0 42px !important;

        display: block !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       ACTUAL TRACK MUSIC ICON

       IMPORTANT:
       This is NOT SVG.

       PHP/CSS generates:
       .lg-track-title::before

       So we resize the actual visual object.
       -------------------------------------------------------- */

    .lg-single-album
    .lg-tracklist-section
    .lg-track-row
    > .lg-track-title::before {

        content: "♪" !important;

        position: absolute !important;

        left: 0 !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 15px !important;

        font-size: 28px !important;
        line-height: 1 !important;

        box-sizing: border-box !important;

        z-index: 5 !important;
    }


    /* --------------------------------------------------------
       TITLE SPACE
       -------------------------------------------------------- */

    .lg-single-album
    .lg-tracklist-section
    .lg-track-row
    > .lg-track-title {

        position: relative !important;

        padding-left: 72px !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       TRACK ROW HEIGHT
       -------------------------------------------------------- */

    .lg-single-album
    .lg-tracklist-section
    .lg-track-row {

        min-height: 78px !important;

        align-items: center !important;

        box-sizing: border-box !important;
    }

}















/* ============================================================
   LYRICSGROOVE — ABOUT THIS ALBUM
   PREMIUM CARD DESIGN
   ============================================================ */

.lg-about-album {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(255, 70, 190, 0.13),
            transparent 38%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(105, 70, 255, 0.14),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbf8ff 48%,
            #f5f1ff 100%
        ) !important;

    border: 1px solid rgba(174, 130, 255, 0.28) !important;

    border-radius: 24px !important;

    box-shadow:
        0 18px 45px rgba(91, 55, 170, 0.10),
        0 4px 16px rgba(255, 50, 170, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;

    padding: 30px !important;

    isolation: isolate !important;
}


/* ============================================================
   PREMIUM TOP GLOW
   ============================================================ */

.lg-about-album::before {

    content: "" !important;

    position: absolute !important;

    top: -90px !important;
    right: -80px !important;

    width: 230px !important;
    height: 230px !important;

    background:
        radial-gradient(
            circle,
            rgba(150, 85, 255, 0.18) 0%,
            rgba(150, 85, 255, 0.07) 38%,
            transparent 72%
        ) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* ============================================================
   SECOND AMBIENT GLOW
   ============================================================ */

.lg-about-album::after {

    content: "" !important;

    position: absolute !important;

    bottom: -100px !important;
    left: -80px !important;

    width: 240px !important;
    height: 240px !important;

    background:
        radial-gradient(
            circle,
            rgba(255, 45, 175, 0.13) 0%,
            rgba(255, 45, 175, 0.04) 40%,
            transparent 72%
        ) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* ============================================================
   CONTENT ABOVE GLOWS
   ============================================================ */

.lg-about-album > * {

    position: relative !important;

    z-index: 2 !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.lg-about-album h2,
.lg-about-album h3,
.lg-about-album .lg-section-title {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin: 0 0 16px !important;

    color: #111027 !important;

    font-size: 20px !important;

    line-height: 1.25 !important;

    font-weight: 850 !important;

    letter-spacing: -0.025em !important;
}


/* ============================================================
   QUOTE / SECTION ICON
   ============================================================ */

.lg-about-album .lg-section-icon,
.lg-about-album .lg-about-icon {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            #ff2cae 0%,
            #9b42f5 55%,
            #6547ed 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(151, 54, 230, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.42) !important;

    border: 1px solid rgba(255,255,255,0.65) !important;

    font-size: 20px !important;

    font-weight: 900 !important;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.lg-about-album p {

    margin: 0 !important;

    color: #65627a !important;

    font-size: 14px !important;

    line-height: 1.75 !important;

    font-weight: 550 !important;

    letter-spacing: -0.01em !important;

    max-width: 95% !important;
}


/* ============================================================
   OPTIONAL INNER CONTENT
   ============================================================ */

.lg-about-album .lg-about-content {

    padding-top: 4px !important;
}


/* ============================================================
   SUBTLE TOP ACCENT LINE
   ============================================================ */

.lg-about-album .lg-about-content::before {

    content: "" !important;

    display: block !important;

    width: 54px !important;

    height: 3px !important;

    margin-bottom: 17px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            #ff2cae 0%,
            #a33cf3 55%,
            #6747ed 100%
        ) !important;

    box-shadow:
        0 4px 12px rgba(174, 53, 235, 0.24) !important;
}


/* ============================================================
   DESKTOP — MORE SPACIOUS
   ============================================================ */

@media (min-width: 1101px) {

    .lg-about-album {

        padding: 30px 30px 32px !important;

        min-height: 142px !important;
    }

    .lg-about-album h2,
    .lg-about-album h3,
    .lg-about-album .lg-section-title {

        font-size: 21px !important;
    }

    .lg-about-album p {

        font-size: 14px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 601px) and (max-width: 1100px) {

    .lg-about-album {

        padding: 26px !important;

        border-radius: 22px !important;
    }

    .lg-about-album h2,
    .lg-about-album h3,
    .lg-about-album .lg-section-title {

        font-size: 19px !important;
    }

    .lg-about-album p {

        font-size: 14px !important;

        line-height: 1.7 !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-about-album {

        padding: 24px !important;

        border-radius: 20px !important;
    }

    .lg-about-album h2,
    .lg-about-album h3,
    .lg-about-album .lg-section-title {

        font-size: 19px !important;

        gap: 10px !important;
    }

    .lg-about-album .lg-section-icon,
    .lg-about-album .lg-about-icon {

        width: 36px !important;

        height: 36px !important;

        min-width: 36px !important;

        border-radius: 11px !important;

        font-size: 18px !important;
    }

    .lg-about-album p {

        font-size: 14px !important;

        line-height: 1.7 !important;

        max-width: 100% !important;
    }
}
















/* ============================================================
   ALBUM SINGLE — PREMIUM ARTIST SOCIAL ICONS
   FINAL STATIC VERSION
============================================================ */

.lg-album-social-premium {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    padding: 20px 22px 18px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid rgba(37, 41, 67, 0.08);
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(37, 41, 67, 0.07),
        0 2px 8px rgba(37, 41, 67, 0.04);

    overflow: hidden;
}


/* TOP ACCENT */
.lg-album-social-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 2px;
    background: #252943;
    border-radius: 0 0 10px 10px;
}


/* ============================================================
   HEADER
============================================================ */

.lg-album-social-premium-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin: 0 0 18px;
}


.lg-album-social-premium-eyebrow {
    flex: 0 0 auto;

    color: #85899b;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.14em;
    white-space: nowrap;
}


.lg-album-social-premium-header h2 {
    flex: 0 0 auto;

    margin: 0;

    font-size: 18px;
    line-height: 1.1;
    font-weight: 850;

    letter-spacing: -0.025em;

    /* PREMIUM ARTIST NAME */
    background:
        linear-gradient(
            90deg,
            #d61f9f 0%,
            #7b3ff2 50%,
            #3f6ff5 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    white-space: nowrap;
}


.lg-album-social-premium-line {
    flex: 1 1 auto;

    min-width: 18px;

    height: 1px;

    background: #e4e6ee;
}


/* ============================================================
   SOCIAL RAIL
============================================================ */

.lg-album-social-premium-rail {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    align-items: start;
    justify-items: center;

    width: 100%;
    max-width: 100%;

    gap: 12px;

    box-sizing: border-box;
}


/* ============================================================
   SOCIAL ITEM
============================================================ */

.lg-album-social-premium-item {
    --social-color: #252943;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-width: 0;

    max-width: 70px;

    padding: 0;
    margin: 0;

    color: var(--social-color);

    text-decoration: none;

    box-sizing: border-box;

    cursor: pointer;
}


/* ============================================================
   ACTUAL BRAND-COLOUR CIRCLE
============================================================ */

.lg-album-social-premium-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    min-width: 44px;
    min-height: 44px;

    box-sizing: border-box;

    border-radius: 50%;

    /* IMPORTANT:
       WHOLE CIRCLE IS PLATFORM COLOUR */
    background: var(--social-color);

    color: #ffffff;

    border: none;

    box-shadow:
        0 5px 13px rgba(37, 41, 67, 0.14);
}


/* REMOVE OLD OUTER RING */
.lg-album-social-premium-icon::before {
    display: none !important;
}


/* REMOVE OLD DOT */
.lg-album-social-premium-icon::after {
    display: none !important;
}


/* ============================================================
   SVG = WHITE
============================================================ */

.lg-album-social-premium-icon svg {
    display: block;

    width: 19px;
    height: 19px;

    max-width: 19px;
    max-height: 19px;

    color: #ffffff !important;

    fill: #ffffff;

    stroke: #ffffff;

    flex: 0 0 auto;
}


/* Force SVG parts white */
.lg-album-social-premium-icon svg path,
.lg-album-social-premium-icon svg rect,
.lg-album-social-premium-icon svg circle,
.lg-album-social-premium-icon svg polygon {
    color: #ffffff !important;
}


/* ============================================================
   PLATFORM NAME
============================================================ */

.lg-album-social-premium-name {
    display: block;

    width: 100%;

    margin-top: 7px;

    color: #74798d;

    font-size: 9px;
    line-height: 1.1;

    font-weight: 700;

    text-align: center;

    white-space: nowrap;

    overflow: visible;
}


/* ============================================================
   EXACT PLATFORM COLOURS
============================================================ */

/* Instagram */
.lg-album-social-premium-instagram {
    --social-color: #E4405F;
}


/* YouTube */
.lg-album-social-premium-youtube {
    --social-color: #FF0000;
}


/* X */
.lg-album-social-premium-x_twitter {
    --social-color: #000000;
}


/* TikTok */
.lg-album-social-premium-tiktok {
    --social-color: #000000;
}


/* Facebook */
.lg-album-social-premium-facebook {
    --social-color: #1877F2;
}


/* Threads */
.lg-album-social-premium-threads {
    --social-color: #000000;
}


/* ============================================================
   NO HOVER EFFECT
============================================================ */

.lg-album-social-premium-item:hover {
    transform: none !important;
    color: var(--social-color) !important;
}


.lg-album-social-premium-item:hover
.lg-album-social-premium-icon {
    transform: none !important;

    background: var(--social-color) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow:
        0 5px 13px rgba(37, 41, 67, 0.14) !important;
}


.lg-album-social-premium-item:hover
.lg-album-social-premium-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


.lg-album-social-premium-item:hover
.lg-album-social-premium-name {
    color: #74798d !important;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .lg-album-social-premium {
        padding:
            19px
            18px
            17px;
    }

    .lg-album-social-premium-header {
        margin-bottom: 17px;
    }

    .lg-album-social-premium-rail {
        gap: 10px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .lg-album-social-premium {
        margin-top: 20px;

        padding:
            18px
            14px
            16px;

        border-radius: 20px;
    }


    .lg-album-social-premium::before {
        left: 20px;
        right: 20px;
    }


    .lg-album-social-premium-header {
        gap: 8px;
        margin-bottom: 17px;
    }


    .lg-album-social-premium-eyebrow {
        font-size: 7px;
        letter-spacing: 0.10em;
    }


    .lg-album-social-premium-header h2 {
        font-size: 15px;
    }


    .lg-album-social-premium-line {
        min-width: 10px;
    }


    .lg-album-social-premium-rail {

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        gap: 8px;

        overflow: visible;
    }


    .lg-album-social-premium-item {

        flex: 1 1 0;

        width: auto;

        max-width: 54px;
    }


    .lg-album-social-premium-icon {

        width: 40px;
        height: 40px;

        min-width: 40px;
        min-height: 40px;
    }


    .lg-album-social-premium-icon svg {

        width: 17px;
        height: 17px;

        max-width: 17px;
        max-height: 17px;
    }


    .lg-album-social-premium-name {

        margin-top: 6px;

        font-size: 8px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .lg-album-social-premium-rail {
        gap: 4px;
    }

    .lg-album-social-premium-icon {
        width: 38px;
        height: 38px;

        min-width: 38px;
        min-height: 38px;
    }

}



















/* =========================================================
   LYRICS GROOVE — ALBUM LOWER COLLECTIONS
   MORE FROM ARTIST + RELATED ALBUMS
   ALBUM SINGLE PAGE ONLY
========================================================= */

.lg-single-album .lg-album-lower-grid {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-top: 22px;
	align-items: stretch;
}


/* =========================================================
   COLLECTION CARD
========================================================= */

.lg-single-album .lg-album-collection-premium {
	position: relative;
	width: 100%;
	min-width: 0;
	padding: 22px 22px 24px;
	border: 1px solid rgba(117, 76, 255, 0.14);
	border-radius: 20px;
	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(249,247,255,0.96)
		);
	box-shadow:
		0 12px 35px rgba(38, 28, 80, 0.07),
		0 2px 8px rgba(38, 28, 80, 0.035);
	overflow: hidden;
	box-sizing: border-box;
}


/*
 * Premium subtle top accent.
 */

.lg-single-album .lg-album-collection-premium::before {
	content: "";
	position: absolute;
	top: 0;
	left: 28px;
	right: 28px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		#e52cae 0%,
		#8b3dff 50%,
		#5f46f5 100%
	);
}


/* =========================================================
   COLLECTION HEADER
========================================================= */

.lg-single-album .lg-collection-heading {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-top: 3px;
	box-sizing: border-box;
}


.lg-single-album .lg-collection-title-wrap {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 9px;
}


.lg-single-album .lg-collection-title-wrap h2 {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #17172d;
	white-space: nowrap;
}


.lg-single-album .lg-collection-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	color: #df2da8;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.lg-single-album .lg-collection-view-all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 34px;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(112, 68, 236, 0.16);
	background: rgba(116, 67, 242, 0.07);
	color: #6840d8;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}


.lg-single-album .lg-collection-view-all span {
	font-size: 15px;
	line-height: 1;
}


/*
 * No hover transformation/effect.
 * Just maintain a clean button.
 */

.lg-single-album .lg-collection-view-all:hover,
.lg-single-album .lg-collection-view-all:focus {
	color: #6840d8;
	text-decoration: none;
}


/* =========================================================
   ALBUM GRID
========================================================= */

.lg-single-album .lg-album-collection-premium .lg-album-mini-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}


/* =========================================================
   MINI ALBUM CARD
========================================================= */

.lg-single-album .lg-album-collection-premium .lg-mini-album-card {
	display: block;
	min-width: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	text-decoration: none;
	box-sizing: border-box;
}


.lg-single-album .lg-album-collection-premium .lg-mini-album-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	border-radius: 10px;
	overflow: hidden;
	background: #f1eff8;
	border: 1px solid rgba(70, 55, 120, 0.08);
	box-shadow:
		0 5px 14px rgba(36, 26, 76, 0.09);
}


.lg-single-album .lg-album-collection-premium .lg-mini-album-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}


/* =========================================================
   ALBUM TITLE
========================================================= */

.lg-single-album .lg-album-collection-premium .lg-mini-album-card strong {
	display: block;
	width: 100%;
	margin: 0;
	color: #18182d;
	font-size: 12px;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -0.01em;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.lg-single-album .lg-album-collection-premium .lg-mini-album-card > span {
	display: block;
	margin-top: 4px;
	color: #77748b;
	font-size: 10px;
	line-height: 1.3;
	font-weight: 600;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.lg-single-album .lg-collection-empty-premium {
	width: 100%;
	grid-column: 1 / -1;
	min-height: 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 22px;
	border: 1px dashed rgba(112, 68, 236, 0.22);
	border-radius: 15px;
	background:
		linear-gradient(
			135deg,
			rgba(250,247,255,0.95),
			rgba(255,249,253,0.95)
		);
	box-sizing: border-box;
	text-align: left;
}


.lg-single-album .lg-empty-sad {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f4edff;
	font-size: 20px;
	line-height: 1;
}


.lg-single-album .lg-collection-empty-premium strong {
	display: block;
	margin: 0 0 5px;
	color: #25233b;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 800;
}


.lg-single-album .lg-collection-empty-premium p {
	margin: 0;
	color: #77748b;
	font-size: 11px;
	line-height: 1.55;
	font-weight: 500;
	max-width: 560px;
}


/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media (max-width: 1100px) {

	.lg-single-album .lg-album-lower-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 15px;
	}

	.lg-single-album .lg-album-collection-premium {
		padding: 20px 18px 22px;
	}

	.lg-single-album .lg-album-collection-premium .lg-album-mini-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 13px;
	}

	.lg-single-album .lg-collection-title-wrap h2 {
		font-size: 16px;
	}

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 820px) {

	.lg-single-album .lg-album-lower-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lg-single-album .lg-album-collection-premium {
		padding: 20px;
	}

	.lg-single-album .lg-album-collection-premium .lg-album-mini-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.lg-single-album .lg-album-lower-grid {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 18px;
	}

	.lg-single-album .lg-album-collection-premium {
		padding: 18px 15px 20px;
		border-radius: 17px;
	}

	.lg-single-album .lg-collection-heading {
		gap: 10px;
		margin-bottom: 15px;
	}

	.lg-single-album .lg-collection-title-wrap {
		gap: 7px;
	}

	.lg-single-album .lg-collection-title-wrap h2 {
		font-size: 15px;
	}

	.lg-single-album .lg-collection-icon {
		width: 21px;
		height: 21px;
		font-size: 15px;
	}

	.lg-single-album .lg-collection-view-all {
		min-height: 31px;
		padding: 6px 10px;
		font-size: 10px;
	}

	.lg-single-album .lg-album-collection-premium .lg-album-mini-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px 10px;
	}

	.lg-single-album .lg-album-collection-premium .lg-mini-album-image {
		margin-bottom: 6px;
		border-radius: 8px;
	}

	.lg-single-album .lg-album-collection-premium .lg-mini-album-card strong {
		font-size: 10px;
	}

	.lg-single-album .lg-album-collection-premium .lg-mini-album-card > span {
		font-size: 9px;
		margin-top: 3px;
	}

	.lg-single-album .lg-collection-empty-premium {
		min-height: 120px;
		padding: 18px;
		gap: 11px;
	}

	.lg-single-album .lg-empty-sad {
		width: 36px;
		height: 36px;
		font-size: 17px;
	}

	.lg-single-album .lg-collection-empty-premium strong {
		font-size: 12px;
	}

	.lg-single-album .lg-collection-empty-premium p {
		font-size: 10px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.lg-single-album .lg-album-collection-premium .lg-album-mini-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.lg-single-album .lg-collection-title-wrap h2 {
		font-size: 14px;
	}

	.lg-single-album .lg-collection-view-all {
		font-size: 9px;
		padding: 6px 9px;
	}

}














/* ============================================================
   LYRICSGROOVE — DON'T MISS THE GROOVE GAME
   ALBUM SINGLE PAGE ONLY
   UNIQUE NAMESPACE — DO NOT MODIFY EXISTING COMPONENTS
============================================================ */

.lg-album-groove-game,
.lg-album-groove-game * {
	box-sizing: border-box;
}


/* ============================================================
   MAIN GAME SECTION
============================================================ */

.lg-album-groove-game {
	position: relative;

	width: 100%;

	margin: 38px 0 34px;

	padding: 0;

	overflow: hidden;

	background:
		linear-gradient(
			180deg,
			#f7f7fc 0%,
			#f4f1ff 100%
		);

	color: #17172d;
}


/* ============================================================
   GAME SHELL
============================================================ */

.lg-groove-game-shell {
	position: relative;

	width: min(
		1180px,
		calc(100% - 48px)
	);

	min-height: 430px;

	margin: 0 auto;

	padding:
		30px
		32px
		25px;

	overflow: hidden;

	border:
		1px solid
		rgba(111, 73, 239, .16);

	border-radius: 26px;

	background:
		radial-gradient(
			circle at 50% 55%,
			rgba(127, 75, 255, .12),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#fff7fc 0%,
			#f2efff 48%,
			#eeeaff 100%
		);

	box-shadow:
		0 18px 55px
		rgba(47, 35, 100, .10),
		inset 0 1px 0
		rgba(255,255,255,.95);
}


/* ============================================================
   TOP ACCENT
============================================================ */

.lg-groove-game-shell::before {
	content: "";

	position: absolute;

	top: 0;
	left: 10%;
	right: 10%;

	height: 3px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#e52cae,
			#843dff,
			#5c55f4,
			#e52cae
		);

	background-size: 200% 100%;

	animation:
		lgGrooveAccent 5s linear infinite;
}


@keyframes lgGrooveAccent {

	0% {
		background-position: 0 50%;
	}

	100% {
		background-position: 200% 50%;
	}

}


/* ============================================================
   DECORATION
============================================================ */

.lg-groove-game-decor {
	position: absolute;

	inset: 0;

	pointer-events: none;

	overflow: hidden;
}


.lg-groove-game-decor span {
	position: absolute;

	display: block;

	color:
		rgba(
			116,
			69,
			235,
			.12
		);

	font-size: 28px;

	font-weight: 900;

	animation:
		lgGrooveFloat
		6s ease-in-out infinite;
}


.lg-groove-game-decor span:nth-child(1) {
	left: 8%;
	top: 18%;
}


.lg-groove-game-decor span:nth-child(2) {
	left: 18%;
	top: 70%;

	font-size: 24px;

	animation-delay: 1s;
}


.lg-groove-game-decor span:nth-child(3) {
	right: 10%;
	top: 22%;

	font-size: 22px;

	animation-delay: 1.7s;
}


.lg-groove-game-decor span:nth-child(4) {
	right: 18%;
	bottom: 18%;

	font-size: 30px;

	animation-delay: 2.4s;
}


.lg-groove-game-decor span:nth-child(5) {
	left: 44%;
	top: 12%;

	font-size: 18px;

	animation-delay: 3s;
}


.lg-groove-game-decor span:nth-child(6) {
	right: 42%;
	bottom: 13%;

	font-size: 16px;

	animation-delay: .6s;
}


@keyframes lgGrooveFloat {

	0%,
	100% {
		transform:
			translateY(7px)
			rotate(-7deg);

		opacity: .25;
	}

	50% {
		transform:
			translateY(-13px)
			rotate(8deg);

		opacity: .65;
	}

}


/* ============================================================
   HEADER
============================================================ */

.lg-groove-game-header {
	position: relative;

	z-index: 3;

	text-align: center;

	margin-bottom: 19px;
}


.lg-groove-game-kicker {
	display: block;

	margin-bottom: 6px;

	color: #8052d2;

	font-size: 10px;

	font-weight: 900;

	letter-spacing: .18em;

	line-height: 1.2;
}


.lg-groove-game-header h2 {
	margin: 0;

	color: #15152d;

	font-size: 27px;

	font-weight: 900;

	line-height: 1.15;

	letter-spacing: -.035em;
}


.lg-groove-game-header p {
	margin: 7px 0 0;

	color: #77758a;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.5;
}


/* ============================================================
   GAME BOARD
============================================================ */

.lg-groove-game-board {
	position: relative;

	z-index: 4;

	width: 100%;

	max-width: 850px;

	margin: 0 auto;

	padding: 0;
}


/* ============================================================
   SCORE BAR
============================================================ */

.lg-groove-game-score {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 10px;

	width: 100%;

	margin-bottom: 11px;
}


.lg-groove-stat {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	min-height: 38px;

	padding:
		7px
		12px;

	border:
		1px solid
		rgba(104, 71, 195, .13);

	border-radius: 11px;

	background:
		rgba(255,255,255,.76);

	box-shadow:
		0 5px 15px
		rgba(49,37,100,.05);
}


.lg-groove-stat span {
	color: #8a879b;

	font-size: 8px;

	font-weight: 900;

	letter-spacing: .10em;
}


.lg-groove-stat strong {
	color: #292542;

	font-size: 13px;

	font-weight: 900;
}


/* ============================================================
   PLAYFIELD
============================================================ */

.lg-groove-playfield {
	position: relative;

	width: 100%;

	height: 220px;

	overflow: hidden;

	border:
		1px solid
		rgba(103, 70, 202, .13);

	border-radius: 17px;

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(145, 83, 255, .09),
			transparent 34%
		),
		rgba(255,255,255,.64);

	box-shadow:
		inset 0 1px 0
		rgba(255,255,255,.9);
}


/* ============================================================
   READY MESSAGE
============================================================ */

.lg-groove-message {
	position: absolute;

	z-index: 2;

	inset: 0;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	text-align: center;

	pointer-events: none;

	transition:
		opacity .25s ease,
		transform .25s ease;
}


.lg-groove-message.is-hidden {
	opacity: 0;

	transform: scale(.92);

	pointer-events: none;
}


.lg-groove-message-emoji {
	margin-bottom: 5px;

	font-size: 29px;

	line-height: 1;
}


.lg-groove-message strong {
	display: block;

	color: #25223d;

	font-size: 15px;

	font-weight: 900;
}


.lg-groove-message span {
	margin-top: 4px;

	color: #858197;

	font-size: 10px;

	font-weight: 600;
}


/* ============================================================
   TARGET
============================================================ */

.lg-groove-target {
	position: absolute;

	left: 50%;
	top: 50%;

	z-index: 5;

	display: none;

	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	padding: 0;

	border: 0;

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	cursor: pointer;

	background:
		linear-gradient(
			135deg,
			#ed2cae,
			#713df1
		);

	color: #ffffff;

	box-shadow:
		0 10px 25px
		rgba(113,61,241,.28),
		0 0 0 7px
		rgba(116,61,241,.07);

	transition:
		transform .15s ease,
		box-shadow .15s ease;
}


.lg-groove-target.is-active {
	display: flex;

	animation:
		lgGrooveTargetPulse
		1.15s ease-in-out infinite;
}


.lg-groove-target:hover {
	transform:
		translate(-50%, -50%)
		scale(1.08);
}


.lg-groove-target:active {
	transform:
		translate(-50%, -50%)
		scale(.88);
}


.lg-groove-target.is-hit {
	animation:
		lgGrooveHit .25s ease-out;
}


.lg-groove-target span {
	font-size: 25px;

	font-weight: 900;

	line-height: 1;
}


@keyframes lgGrooveTargetPulse {

	0%,
	100% {
		box-shadow:
			0 10px 25px
			rgba(113,61,241,.28),
			0 0 0 6px
			rgba(116,61,241,.07);
	}

	50% {
		box-shadow:
			0 12px 30px
			rgba(113,61,241,.38),
			0 0 0 12px
			rgba(116,61,241,.03);
	}

}


@keyframes lgGrooveHit {

	0% {
		transform:
			translate(-50%, -50%)
			scale(1);
	}

	55% {
		transform:
			translate(-50%, -50%)
			scale(1.35);
	}

	100% {
		transform:
			translate(-50%, -50%)
			scale(0);
	}

}


/* ============================================================
   HIT REACTION
============================================================ */

.lg-groove-hit-text {
	position: absolute;

	left: 50%;
	top: 50%;

	z-index: 8;

	opacity: 0;

	pointer-events: none;

	color: #e52cae;

	font-size: 17px;

	font-weight: 900;

	transform:
		translate(-50%, -50%);
}


.lg-groove-hit-text.is-visible {
	animation:
		lgGrooveReaction
		.7s ease-out
		forwards;
}


@keyframes lgGrooveReaction {

	0% {
		opacity: 0;

		transform:
			translate(-50%, -20%)
			scale(.7);
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform:
			translate(-50%, -100px)
			scale(1.15);
	}

}


/* ============================================================
   CONTROL BUTTON
============================================================ */

.lg-groove-game-controls {
	display: flex;

	justify-content: center;

	margin-top: 12px;
}


.lg-groove-start {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	min-width: 190px;

	min-height: 43px;

	padding:
		10px
		22px;

	border: 0;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#171035,
			#48208b
		);

	color: #ffffff;

	font-size: 11px;

	font-weight: 900;

	letter-spacing: .02em;

	cursor: pointer;

	box-shadow:
		0 10px 24px
		rgba(55,27,117,.20);

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}


.lg-groove-start:hover {
	transform:
		translateY(-2px);

	box-shadow:
		0 14px 30px
		rgba(55,27,117,.28);
}


.lg-groove-start:active {
	transform:
		translateY(0)
		scale(.98);
}


.lg-groove-start-icon {
	font-size: 10px;
}


/* ============================================================
   RESULT
============================================================ */

.lg-groove-result {
	position: absolute;

	left: 50%;
	top: 50%;

	z-index: 12;

	width: min(
		310px,
		calc(100% - 30px)
	);

	padding:
		18px
		20px;

	text-align: center;

	border:
		1px solid
		rgba(117,75,235,.16);

	border-radius: 16px;

	background:
		rgba(255,255,255,.97);

	box-shadow:
		0 18px 45px
		rgba(51,34,105,.16);

	transform:
		translate(-50%, -50%)
		scale(.85);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity .25s ease,
		transform .25s ease;
}


.lg-groove-result.is-visible {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}


.lg-groove-result-emoji {
	font-size: 30px;

	line-height: 1;

	margin-bottom: 6px;
}


.lg-groove-result-title {
	display: block;

	color: #25213f;

	font-size: 16px;

	font-weight: 900;
}


.lg-groove-result-text {
	display: block;

	margin-top: 5px;

	color: #858197;

	font-size: 10px;

	font-weight: 600;
}


/* ============================================================
   FOOTER LABEL
============================================================ */

.lg-groove-game-footer {
	position: relative;

	z-index: 3;

	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	margin-top: 16px;

	color: #88839c;

	font-size: 8px;

	font-weight: 900;

	letter-spacing: .13em;
}


.lg-groove-game-footer span {
	color: #df2ca8;

	font-size: 9px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 820px) {

	.lg-groove-game-shell {
		width: calc(100% - 32px);

		padding:
			26px
			22px
			23px;

		border-radius: 22px;
	}

	.lg-groove-playfield {
		height: 210px;
	}

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

	.lg-album-groove-game {
		margin:
			28px
			0
			26px;
	}

	.lg-groove-game-shell {
		width: calc(100% - 20px);

		min-height: 390px;

		padding:
			24px
			14px
			20px;

		border-radius: 19px;
	}

	.lg-groove-game-header {
		margin-bottom: 15px;
	}

	.lg-groove-game-header h2 {
		font-size: 21px;
	}

	.lg-groove-game-header p {
		font-size: 10px;
	}

	.lg-groove-game-kicker {
		font-size: 8px;
	}

	.lg-groove-game-score {
		gap: 6px;
	}

	.lg-groove-stat {
		min-height: 35px;

		padding:
			6px
			7px;

		gap: 4px;
	}

	.lg-groove-stat span {
		font-size: 7px;
	}

	.lg-groove-stat strong {
		font-size: 11px;
	}

	.lg-groove-playfield {
		height: 190px;

		border-radius: 14px;
	}

	.lg-groove-target {
		width: 52px;
		height: 52px;
	}

	.lg-groove-target span {
		font-size: 21px;
	}

	.lg-groove-start {
		min-width: 170px;

		min-height: 40px;

		font-size: 10px;
	}

	.lg-groove-game-footer {
		font-size: 7px;
	}

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 400px) {

	.lg-groove-game-shell {
		width: calc(100% - 14px);

		padding:
			21px
			10px
			18px;
	}

	.lg-groove-game-header h2 {
		font-size: 19px;
	}

	.lg-groove-playfield {
		height: 175px;
	}

	.lg-groove-stat {
		flex-direction: column;

		gap: 1px;
	}

	.lg-groove-game-footer {
		letter-spacing: .08em;
	}

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

	.lg-groove-game-shell::before,
	.lg-groove-game-decor span,
	.lg-groove-target {
		animation: none !important;
	}

	.lg-groove-start,
	.lg-groove-target,
	.lg-groove-result {
		transition: none !important;
	}

}























/* ============================================================
   LYRICSGROOVE — EMPTY ALBUM SAD MUSIC ANIMATION
   Add at the VERY BOTTOM of single-album (6).css
============================================================ */


/* ------------------------------------------------------------
   SAD ICON — SLIGHTLY BIGGER + FLOATING
------------------------------------------------------------ */

.lg-single-album .lg-empty-sad {

	position: relative;

	width: 52px;
	height: 52px;

	flex: 0 0 52px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			rgba(255,255,255,.95),
			rgba(244,237,255,.95) 58%,
			rgba(232,222,255,.92) 100%
		);

	font-size: 26px;

	line-height: 1;

	box-shadow:
		0 8px 20px rgba(108,67,214,.12),
		0 0 0 1px rgba(112,68,236,.08);

	animation:
		lgEmptySadFloat
		3.2s
		ease-in-out
		infinite;

}


/* ------------------------------------------------------------
   FLOATING SAD FACE
------------------------------------------------------------ */

@keyframes lgEmptySadFloat {

	0%,
	100% {

		transform:
			translateY(0)
			rotate(-2deg);

		box-shadow:
			0 8px 20px rgba(108,67,214,.12),
			0 0 0 1px rgba(112,68,236,.08);

	}

	50% {

		transform:
			translateY(-6px)
			rotate(2deg);

		box-shadow:
			0 13px 25px rgba(108,67,214,.18),
			0 0 20px rgba(177,91,255,.12);

	}

}


/* ------------------------------------------------------------
   LITTLE MUSIC NOTES
------------------------------------------------------------ */

.lg-single-album .lg-empty-sad::before,
.lg-single-album .lg-empty-sad::after {

	position: absolute;

	pointer-events: none;

	font-family:
		Arial,
		sans-serif;

	font-weight: 800;

	color: #8a5bea;

	text-shadow:
		0 3px 10px rgba(138,91,234,.20);

	opacity: 0;

}


/* Small note */

.lg-single-album .lg-empty-sad::before {

	content: "♪";

	right: -7px;
	top: 2px;

	font-size: 16px;

	animation:
		lgEmptyMusicNoteOne
		2.8s
		ease-in-out
		infinite;

}


/* Second note */

.lg-single-album .lg-empty-sad::after {

	content: "♫";

	right: -14px;
	top: 17px;

	font-size: 13px;

	color: #d34bb7;

	animation:
		lgEmptyMusicNoteTwo
		3.4s
		ease-in-out
		infinite;

}


/* ------------------------------------------------------------
   NOTE 1 ANIMATION
------------------------------------------------------------ */

@keyframes lgEmptyMusicNoteOne {

	0% {

		opacity: 0;

		transform:
			translate3d(0, 7px, 0)
			rotate(-8deg);

	}

	15% {

		opacity: .85;

	}

	55% {

		opacity: .75;

		transform:
			translate3d(5px, -8px, 0)
			rotate(8deg);

	}

	100% {

		opacity: 0;

		transform:
			translate3d(9px, -20px, 0)
			rotate(15deg);

	}

}


/* ------------------------------------------------------------
   NOTE 2 ANIMATION
------------------------------------------------------------ */

@keyframes lgEmptyMusicNoteTwo {

	0% {

		opacity: 0;

		transform:
			translate3d(0, 6px, 0)
			rotate(8deg);

	}

	20% {

		opacity: .7;

	}

	60% {

		opacity: .55;

		transform:
			translate3d(-5px, -7px, 0)
			rotate(-8deg);

	}

	100% {

		opacity: 0;

		transform:
			translate3d(-8px, -18px, 0)
			rotate(-15deg);

	}

}


/* ------------------------------------------------------------
   ACCESSIBILITY
   Respect reduced-motion preference.
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.lg-single-album .lg-empty-sad,
	.lg-single-album .lg-empty-sad::before,
	.lg-single-album .lg-empty-sad::after {

		animation: none !important;

	}

}


/* ------------------------------------------------------------
   MOBILE — KEEP IT BALANCED
------------------------------------------------------------ */

@media (max-width: 600px) {

	.lg-single-album .lg-empty-sad {

		width: 44px;
		height: 44px;

		flex-basis: 44px;

		font-size: 22px;

	}

	.lg-single-album .lg-empty-sad::before {

		font-size: 14px;

		right: -6px;

	}

	.lg-single-album .lg-empty-sad::after {

		font-size: 11px;

		right: -11px;

	}

}

























/* ============================================================
   LYRICSGROOVE — SIGNATURE EMPTY TRACKLIST CHARACTER
   Sad Music Face • Blinking Eyes • Falling Tears • Floating Note
   CSS ONLY
============================================================ */


/* ------------------------------------------------------------
   CHARACTER BODY
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	position: relative;

	width: 68px;
	height: 68px;

	margin-bottom: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	/*
	 * Hide the original ♫ character.
	 */
	color: transparent;

	font-size: 0;

	background:
		radial-gradient(
			circle at 34% 28%,
			#ffffff 0%,
			#f8f4ff 42%,
			#eee7ff 72%,
			#e6dcff 100%
		);

	border:
		1px solid rgba(112,67,229,.12);

	box-shadow:
		0 10px 25px rgba(84,54,170,.12),
		0 0 0 7px rgba(112,67,229,.035);

	animation:
		lgTrackSadFloat
		3.4s
		ease-in-out
		infinite;

	overflow: visible;

}


/* ------------------------------------------------------------
   SOFT INNER GLOW
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note::before {

	content: "";

	position: absolute;

	inset: 5px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 50% 42%,
			rgba(255,255,255,.75),
			rgba(255,255,255,0) 68%
		);

	pointer-events: none;

}


/* ------------------------------------------------------------
   FACE — EYES + BLINK SYSTEM
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note::after {

	content: "";

	position: absolute;

	left: 50%;
	top: 27px;

	width: 7px;
	height: 7px;

	margin-left: -19px;

	border-radius: 50%;

	background: #514080;

	box-shadow:
		38px 0 0 #514080;

	animation:
		lgTrackBlink
		4.8s
		infinite;

}


/* ------------------------------------------------------------
   EYE BLINK
------------------------------------------------------------ */

@keyframes lgTrackBlink {

	0%,
	42%,
	48%,
	100% {

		transform:
			scaleY(1);

	}

	44%,
	46% {

		transform:
			scaleY(.08);

	}

}


/* ------------------------------------------------------------
   FLOATING FACE
------------------------------------------------------------ */

@keyframes lgTrackSadFloat {

	0%,
	100% {

		transform:
			translateY(0)
			rotate(-1deg);

	}

	50% {

		transform:
			translateY(-5px)
			rotate(1deg);

	}

}


/* ------------------------------------------------------------
   SAD MOUTH
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	/*
	 * CSS custom property used by the face details.
	 */

	--lg-sad-purple:
		#7043e5;

}


/*
 * The mouth is drawn using an additional background layer.
 */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	background-image:

		/* Left cheek */

		radial-gradient(
			circle at 27% 60%,
			rgba(224,112,180,.16) 0 5px,
			transparent 6px
		),

		/* Right cheek */

		radial-gradient(
			circle at 73% 60%,
			rgba(224,112,180,.16) 0 5px,
			transparent 6px
		),

		/* Sad mouth */

		radial-gradient(
			ellipse 13px 8px at 50% 67%,
			transparent 0 6px,
			#514080 6.5px 7.5px,
			transparent 8px
		),

		/* Face */

		radial-gradient(
			circle at 34% 28%,
			#ffffff 0%,
			#f8f4ff 42%,
			#eee7ff 72%,
			#e6dcff 100%
		);

}


/* ------------------------------------------------------------
   LEFT TEAR
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	position: relative;

}


/*
 * Tear drops are created using extra shadow layers
 * on the eye element.
 */

.lg-single-album .lg-tracklist-empty .lg-empty-note::after {

	width: 7px;
	height: 7px;

	border-radius: 50% 50% 55% 55%;

	background: #6d8ff5;

	box-shadow:
		38px 0 0 #6d8ff5;

	animation:
		lgTrackTearsAndBlink
		4.8s
		infinite;

}


/* ------------------------------------------------------------
   TEARS + BLINK
------------------------------------------------------------ */

@keyframes lgTrackTearsAndBlink {

	0%,
	36% {

		transform:
			scaleY(1)
			translateY(0);

		opacity: 1;

		box-shadow:
			38px 0 0 #6d8ff5;

	}

	40%,
	42% {

		transform:
			scaleY(.08)
			translateY(0);

		opacity: 1;

		box-shadow:
			38px 0 0 #6d8ff5;

	}

	44% {

		transform:
			scaleY(1)
			translateY(0);

		box-shadow:
			38px 0 0 #6d8ff5;

	}

	52% {

		transform:
			scaleY(1)
			translateY(2px);

		opacity: .9;

		box-shadow:
			38px 0 0 #6d8ff5;

	}

	62% {

		transform:
			scaleY(1)
			translateY(8px);

		opacity: .25;

		box-shadow:
			38px 0 0 rgba(109,143,245,0);

	}

	68% {

		transform:
			scaleY(1)
			translateY(10px);

		opacity: 0;

		box-shadow:
			38px 0 0 rgba(109,143,245,0);

	}

	100% {

		transform:
			scaleY(1)
			translateY(0);

		opacity: 1;

		box-shadow:
			38px 0 0 #6d8ff5;

	}

}


/* ------------------------------------------------------------
   FLOATING MUSIC NOTE
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	isolation: isolate;

}


.lg-single-album .lg-tracklist-empty .lg-empty-note span {
	position: relative;
}


/*
 * The floating music note uses a background-generated
 * decorative element.
 */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	--lg-note-opacity: .9;

}


/*
 * Use the first pseudo-element's background for
 * the floating music note while keeping the glow.
 */

.lg-single-album .lg-tracklist-empty .lg-empty-note::before {

	content: "♪";

	position: absolute;

	left: auto;
	right: -16px;
	top: 7px;

	width: auto;
	height: auto;

	inset: auto;

	margin: 0;

	border-radius: 0;

	background: none;

	color: #7043e5;

	font-family:
		Arial,
		sans-serif;

	font-size: 18px;

	font-weight: 900;

	line-height: 1;

	text-shadow:
		0 4px 10px rgba(112,67,229,.22);

	animation:
		lgTrackMusicFloat
		2.8s
		ease-in-out
		infinite;

}


/* ------------------------------------------------------------
   MUSIC NOTE FLOAT
------------------------------------------------------------ */

@keyframes lgTrackMusicFloat {

	0% {

		opacity: 0;

		transform:
			translate3d(0, 8px, 0)
			rotate(-8deg)
			scale(.8);

	}

	18% {

		opacity: .9;

	}

	55% {

		opacity: .75;

		transform:
			translate3d(5px, -10px, 0)
			rotate(7deg)
			scale(1);

	}

	100% {

		opacity: 0;

		transform:
			translate3d(10px, -24px, 0)
			rotate(14deg)
			scale(.75);

	}

}


/* ------------------------------------------------------------
   SECOND LITTLE NOTE
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note {

	--lg-note-two:
		"♫";

}


.lg-single-album .lg-tracklist-empty .lg-empty-note {

	/*
	 * Subtle second note through a background layer.
	 */

}


/* ------------------------------------------------------------
   CHARACTER HOVER
------------------------------------------------------------ */

.lg-single-album .lg-tracklist-empty .lg-empty-note:hover {

	animation:
		lgTrackSadFloat
		1.4s
		ease-in-out
		infinite;

	box-shadow:
		0 14px 30px rgba(84,54,170,.18),
		0 0 0 8px rgba(112,67,229,.045);

}


/* ------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.lg-single-album .lg-tracklist-empty .lg-empty-note,
	.lg-single-album .lg-tracklist-empty .lg-empty-note::before,
	.lg-single-album .lg-tracklist-empty .lg-empty-note::after {

		animation: none !important;

	}

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

	.lg-single-album .lg-tracklist-empty .lg-empty-note {

		width: 58px;
		height: 58px;

		margin-bottom: 15px;

	}

	.lg-single-album .lg-tracklist-empty .lg-empty-note::after {

		top: 23px;

		margin-left: -16px;

		width: 6px;
		height: 6px;

		box-shadow:
			32px 0 0 #6d8ff5;

	}

}










/* ============================================================
   LYRICS TRACK ARTIST TEXT
============================================================ */

.lg-single-album .lg-track-title {

    min-width: 0;

}


.lg-single-album .lg-track-artists-text {

    display: block;

    margin-top: 3px;

    color: #7b6d91;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.35;

    white-space: normal;

}


/* Mobile */

@media (max-width: 600px) {

    .lg-single-album .lg-track-artists-text {

        margin-top: 2px;

        font-size: 9px;

        line-height: 1.3;

    }

}
















/* ============================================================
   LYRICSGROOVE — TRACK ARTISTS FINAL LAYOUT FIX
   ============================================================ */

/*
 * IMPORTANT:
 * Artist credits must remain INSIDE the title column.
 * They must never become a separate grid column.
 */

.lg-single-album .lg-track-row > .lg-track-title {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    margin: 0 !important;

}


/* Track title itself */

.lg-single-album .lg-track-row > .lg-track-title > a {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

}


/* Artist credits */

.lg-single-album .lg-track-row .lg-track-artists {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    gap: 3px !important;

    margin-top: 4px !important;

    padding: 0 !important;

    line-height: 1.25 !important;

}


/* Artist name */

.lg-single-album .lg-track-row .lg-track-artist-text {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #6b5a8d !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    white-space: normal !important;
}


/* Hide verified badges from Tracklist artist credits */
.lg-single-album .lg-track-row .lg-track-artist-verified {
    display: none !important;
}


/* Separator */

.lg-single-album .lg-track-row .lg-track-artist-separator {

    display: inline !important;

    width: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #a69ab9 !important;

    font-size: 10px !important;

    line-height: 1 !important;

}




/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .lg-single-album .lg-track-row .lg-track-artists {

        margin-top: 3px !important;

        gap: 3px !important;

    }

    .lg-single-album .lg-track-row .lg-track-artist-text {

        font-size: 10px !important;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .lg-single-album .lg-track-row > .lg-track-title {

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

    }


    .lg-single-album .lg-track-row .lg-track-artists {

        display: flex !important;

        width: 100% !important;

        max-width: 100% !important;

        flex-wrap: wrap !important;

        gap: 3px !important;

        margin-top: 3px !important;

    }


    .lg-single-album .lg-track-row .lg-track-artist-text {
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}


    .lg-single-album .lg-track-row .lg-track-artist-separator {

        font-size: 9px !important;

    }


    .lg-single-album .lg-track-row .lg-track-artist-verified {

        width: 13px !important;

        height: 13px !important;

        min-width: 13px !important;

        flex-basis: 13px !important;

    }


    .lg-single-album .lg-track-row .lg-track-artist-verified svg {

        width: 13px !important;

        height: 13px !important;

    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .lg-single-album .lg-track-row .lg-track-artists {

        gap: 2px !important;

    }

}