/*
Theme Name: Melodia
Theme URI: https://example.com/melodia
Author: Melodia
Description: A modern music theme for streaming and downloading songs. Narrow left sidebar, wide vertical track list, fixed player with a live equalizer, protected audio files, paid downloads (PayPal / Stripe) and a user dashboard.
Version: 2.42.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: melodia
Tags: dark, music, two-columns, left-sidebar, custom-logo, custom-menu
*/

:root {
	--bg: #0a0a12;
	--fg-rgb: 255, 255, 255;
	--panel: rgba(var(--fg-rgb), .045);
	--panel-2: rgba(var(--fg-rgb), .08);
	--line: rgba(var(--fg-rgb), .09);
	--text: #ededf5;
	--soft: #c9c9da;
	--muted: #8a8aa3;
	--accent: #8b5cf6;
	--accent-2: #ec4899;
	--on-accent: #ffffff;
	--grad: linear-gradient(135deg, var(--accent), var(--accent-2));
	--player-h: 88px;
	--header-h: 60px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
		radial-gradient(700px 420px at 30% 115%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%);
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent); color: var(--on-accent); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100;
	top: 12px; left: 12px; padding: 10px 16px; background: #fff; color: #000; border-radius: 8px;
}

/* ---------- Layout 25 / 75 ---------- */
.site { display: flex; min-height: calc(100vh - var(--header-h)); }
html.no-scroll { overflow: hidden; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 60;
	height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 26px;
	background: color-mix(in srgb, var(--bg) 80%, transparent);
	backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
.site-header .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.site-header .brand__link { font-size: 1.15rem; gap: 10px; }
.site-header .brand__mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.site-header .custom-logo { max-height: 38px; width: auto; }
.site-header .brand__tagline { margin: 0; padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header__end { display: flex; align-items: center; gap: 10px; }

.acct { position: relative; }
.acct__btn {
	width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center; font-size: 19px;
	background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
	transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.acct__btn:hover { background: var(--grad); color: var(--on-accent); border-color: transparent; transform: scale(1.05); }
.acct__btn--user { padding: 0; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.acct__btn--user img { width: 100%; height: 100%; object-fit: cover; }
.acct.is-open .acct__btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.acct__menu {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
	width: 250px; padding: 8px; border-radius: 16px;
	background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%); border: 1px solid var(--line);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
	animation: acct-in .18s ease;
}
@keyframes acct-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.acct__who { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct__who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__who span { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--soft); font-weight: 600; font-size: .92rem; }
.acct__menu a svg { color: var(--muted); }
.acct__menu a:hover { background: var(--panel-2); color: var(--text); }
.acct__menu .acct__logout { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 11px; }

.auth-modal {
	position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; overflow-y: auto;
	background: rgba(5, 5, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .22s;
}
.auth-modal.is-open { opacity: 1; }
.auth-modal__card {
	position: relative; width: 100%; max-width: 420px; padding: 28px 26px 22px; border-radius: 22px;
	border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
	transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.auth-modal.is-open .auth-modal__card { transform: none; }
.auth-modal .auth__title { font-size: 1.5rem; }
.auth-forms { display: flex; flex-direction: column; }

.sidebar {
	flex: 0 0 clamp(230px, 19%, 290px);
	max-width: clamp(230px, 19%, 290px);
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: 24px 20px 30px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	background: color-mix(in srgb, var(--bg) 70%, transparent);
	backdrop-filter: blur(20px);
	border-right: 1px solid var(--line);
	scrollbar-width: thin;
	scrollbar-color: var(--panel-2) transparent;
}
.has-player .sidebar { padding-bottom: calc(var(--player-h) + 24px); }

.main {
	flex: 1 1 0;
	max-width: none;
	min-width: 0;
	padding: 32px 44px 48px;
}
.has-player .main { padding-bottom: calc(var(--player-h) + 40px); }

/* ---------- Sidebar ---------- */
.brand__link { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; }
.brand__mark {
	width: 44px; height: 44px; border-radius: 13px;
	background: var(--grad); color: var(--on-accent);
	display: grid; place-items: center; font-size: 21px;
	box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.brand .custom-logo { max-height: 56px; width: auto; }
.brand__tagline { margin: 10px 0 0; color: var(--muted); font-size: .86rem; }

.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--text);
	font: inherit;
	outline: none;
	transition: border-color .2s, background .2s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.side-block__title,
.widget-title {
	margin: 0 0 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.side-nav ul, .genre-list, .top-list, .widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .genre-list a, .widget ul a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 12px; border-radius: 10px; color: var(--soft);
	transition: background .2s, color .2s;
}
.side-nav a:hover, .genre-list a:hover, .widget ul a:hover { background: var(--panel); color: var(--text); }
.side-nav .current-menu-item > a,
.genre-list .is-active > a { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.side-nav a svg { margin-right: 10px; color: var(--muted); }
.side-nav a span { display: flex; align-items: center; flex: 1; }
.side-nav a { padding: 7px 12px; font-size: .84rem; }
.side-nav a svg { width: 15px; height: 15px; }
.genre-list .count { font-size: .74rem; color: var(--muted); background: var(--panel); padding: 2px 8px; border-radius: 99px; }

.top-list a { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 12px; transition: background .2s; }
.top-list a:hover { background: var(--panel); }
.top-list__cover {
	width: 42px; height: 42px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
	background: var(--grad); display: grid; place-items: center; color: var(--on-accent);
}
.top-list__cover img { width: 100%; height: 100%; object-fit: cover; }
.top-list__meta { min-width: 0; display: flex; flex-direction: column; }
.top-list__title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-list__sub { color: var(--muted); font-size: .76rem; }

.widget { color: var(--soft); font-size: .9rem; margin-bottom: 22px; }
.widget h2, .widget h3, .widget .wp-block-heading, .widget .wp-block-search__label {
	margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.widget a { color: var(--soft); }
.widget a:hover { color: var(--text); }
.widget .wp-block-latest-posts, .widget .wp-block-latest-comments, .widget .wp-block-archives, .widget .wp-block-categories { list-style: none; margin: 0; padding: 0; }
.widget .wp-block-latest-comments__comment { margin: 0 0 8px; font-size: .85rem; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.widget input[type="search"], .widget input[type="text"], .widget select {
	flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
	background: var(--panel); color: var(--text); font: inherit;
}
.widget button, .widget .wp-block-search__button, .widget input[type="submit"] {
	padding: 10px 14px; border: 0; border-radius: 10px; background: var(--grad); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer;
}
.sidebar__foot { margin-top: auto; color: var(--muted); font-size: .78rem; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 38px;
	margin-bottom: 26px;
	border-radius: 26px;
	border: 1px solid var(--line);
	background: var(--hero, linear-gradient(135deg,
		color-mix(in srgb, var(--accent) 38%, transparent),
		color-mix(in srgb, var(--accent-2) 18%, transparent) 60%,
		rgba(var(--fg-rgb), .02)));
}
.hero::before, .hero::after {
	content: ""; position: absolute; border-radius: 50%; pointer-events: none;
	border: 1px solid rgba(var(--fg-rgb), .12);
}
.hero::before { width: 380px; height: 380px; right: -90px; top: -170px; }
.hero::after { width: 240px; height: 240px; right: -20px; top: -100px; }
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 45%, var(--text)); }
.hero__title { margin: 8px 0 8px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.hero__desc { margin: 0; color: var(--soft); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 22px; border-radius: 99px;
	font-weight: 700; white-space: nowrap;
	transition: transform .2s, box-shadow .2s, background .2s;
}
.btn--primary { background: var(--grad); color: var(--on-accent); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent-2) 75%, transparent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--accent-2) 85%, transparent); }
.btn--ghost { background: var(--panel); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--panel-2); }

/* ---------- Toolbar: sort menu (right, also on phones) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.toolbar--sort { justify-content: space-between; align-items: center; }
.toolbar__title { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.chip {
	padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line);
	color: var(--muted); font-size: .85rem; font-weight: 600;
	transition: color .2s, background .2s;
}
.chip:hover { color: var(--text); background: var(--panel); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: transparent; }

.sortdd { position: relative; margin-left: auto; }
.sortdd__btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 12px 8px 16px; border-radius: 99px; border: 1px solid var(--line);
	background: var(--panel); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer;
	transition: background .2s, border-color .2s;
}
.sortdd__btn:hover, .sortdd.is-open .sortdd__btn { background: var(--panel-2); border-color: rgba(var(--fg-rgb), .18); }
.sortdd__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sortdd__label { color: var(--muted); font-weight: 500; }
.sortdd__btn strong { font-weight: 700; }
.sortdd__chev { transition: transform .2s; color: var(--muted); }
.sortdd.is-open .sortdd__chev { transform: rotate(180deg); }
.sortdd__menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px;
	margin: 0; padding: 6px; list-style: none; border-radius: 14px;
	background: var(--bg); background-image: linear-gradient(var(--panel-2), var(--panel-2));
	border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	animation: sortdd-in .14s ease-out;
}
.sortdd__menu[hidden] { display: none; }
.sortdd__menu a {
	display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px;
	color: var(--text); font-size: .9rem; text-decoration: none; outline: none;
}
.sortdd__menu a:hover, .sortdd__menu a:focus-visible { background: var(--panel); }
.sortdd__menu a::before { content: ""; width: 16px; text-align: center; color: var(--accent); font-weight: 700; }
.sortdd__menu a.is-active::before { content: "✓"; }
.sortdd__menu a.is-active { font-weight: 700; }
@keyframes sortdd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.songs { transition: opacity .2s; }
.songs.is-loading { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
	.toolbar--sort { margin-bottom: 12px; }
	.sortdd__btn { padding: 7px 10px 7px 14px; font-size: .82rem; }
}

/* ---------- Track list (vertical) ---------- */
.tracklist { display: flex; flex-direction: column; gap: 4px; }
.track, .tracklist__head {
	display: grid;
	grid-template-columns: 40px 52px minmax(0, 1fr) 140px 80px 60px 166px;
	align-items: center;
	gap: 16px;
	padding: 10px 14px;
	border-radius: 14px;
}
.tracklist__head {
	padding-bottom: 12px; margin-bottom: 6px; border-radius: 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.tracklist__head .c-num { text-align: center; }
.tracklist__head .c-actions { text-align: right; }

.track { transition: background .2s; }
.track[hidden] { display: none !important; }
.track:hover { background: var(--panel); }
.track.is-current {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--accent) 18%, transparent),
		color-mix(in srgb, var(--accent-2) 6%, transparent));
}

.track__index {
	display: grid; place-items: center; height: 38px;
	color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem;
}
.track__index .eq { display: none; }
.track.is-current .track__num { color: var(--accent-2); font-weight: 700; }
.track.is-playing .track__num { display: none; }
.track.is-playing .track__index .eq { display: flex; }

/* Play button: on the right, next to Download, always visible */
.track__play {
	width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
	display: grid; place-items: center; font-size: 15px;
	background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
	transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.track__play svg { grid-area: 1 / 1; }
.track__play .ico-play { margin-left: 2px; }
.track__play .ico-pause { display: none; }
.track__play:hover { background: var(--grad); color: var(--on-accent); border-color: transparent; transform: scale(1.07); }
.track__play:active { transform: scale(.94); }
.track.is-current .track__play {
	background: var(--grad); color: var(--on-accent); border-color: transparent;
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.track.is-playing .track__play .ico-play { display: none; }
.track.is-playing .track__play .ico-pause { display: block; }

.eq { gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--accent-2); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.4s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

.track__cover {
	width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
	background: var(--grad); color: var(--on-accent); font-size: 20px;
	display: grid; place-items: center;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8);
}
.track__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.track:hover .track__cover img { transform: scale(1.08); }

.track__meta { min-width: 0; display: flex; flex-direction: column; }
.track__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track.is-current .track__title { background: var(--ink-grad, var(--grad)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.track__artist { color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.track__sub .track__artist { flex: 0 1 auto; min-width: 0; }
.track__genre-in {
	display: none; flex: 0 0 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line);
	color: var(--muted); font-size: .72rem; font-weight: 600; line-height: 1.5;
}
.track__stats { display: none; align-items: center; gap: 10px; margin-top: 3px; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.track__stat { display: inline-flex; align-items: center; gap: 4px; }
.track__stat svg { opacity: .8; flex-shrink: 0; }
.track__genre-in:hover { color: var(--text); border-color: var(--accent); }

.track__genre a {
	display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: .76rem; padding: 4px 10px; border-radius: 99px;
	background: var(--panel); border: 1px solid var(--line); color: var(--soft);
	transition: border-color .2s;
}
.track__genre a:hover { border-color: var(--accent); }
.track__plays, .track__duration { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.track__plays { display: flex; align-items: center; gap: 6px; }
.track__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.track__nodl { color: var(--muted); font-size: .76rem; }

.btn-dl {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 99px;
	border: 1px solid var(--line); color: var(--text);
	font-size: .82rem; font-weight: 700;
	transition: background .2s, border-color .2s, transform .2s;
}
.btn-dl:hover { background: var(--grad); color: var(--on-accent); border-color: transparent; transform: translateY(-1px); }
[data-dl].is-busy, [data-order].is-busy { opacity: .6; pointer-events: none; }

/* Buy button */
.btn-dl--buy { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-variant-numeric: tabular-nums; }
.btn--buy { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Purchase dialog */
.buy {
	position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
	background: rgba(5, 5, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .25s;
}
.buy.is-open { opacity: 1; }
.buy__card {
	position: relative; width: 100%; max-width: 420px; padding: 26px 24px 20px;
	border-radius: 22px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); color: var(--text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
	transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.buy.is-open .buy__card { transform: none; }
.buy__card.is-busy .buy__actions { opacity: .5; pointer-events: none; }
.buy__x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--muted); }
.buy__x:hover { background: var(--panel); color: var(--text); }
.buy__eyebrow { margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.buy__track { display: flex; align-items: center; gap: 14px; }
.buy__cover { width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--grad); }
.buy__cover img { width: 100%; height: 100%; object-fit: cover; }
.buy__meta { min-width: 0; display: flex; flex-direction: column; }
.buy__meta strong { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy__meta span { color: var(--muted); }
.buy__price { margin: 18px 0 16px; font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.buy__actions { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.buy__btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 12px;
	font-weight: 700; font-size: 1rem; transition: transform .15s, filter .15s;
}
.buy__btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.buy__btn svg { font-size: 22px; }
.buy__btn--pp { background: #ffc439; color: #003087; }
.pp-logo { font-size: 1.35rem; font-style: italic; font-weight: 800; letter-spacing: -.02em; }
.pp-logo b { color: #003087; } .pp-logo i { color: #009cde; }
.buy__btn--card { background: #635bff; color: #fff; }
.buy__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.buy__status { min-height: 1.2em; margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .88rem; }
.buy__status.is-error { color: #ef4444; }
.buy__note { display: flex; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.buy__note svg { margin-top: 2px; }

/* Receipt page */
.receipt { display: grid; place-items: center; min-height: 60vh; }
.receipt__card {
	width: 100%; max-width: 520px; padding: 34px 30px; text-align: center;
	border-radius: 24px; border: 1px solid var(--line); background: var(--panel);
}
.receipt__check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font-size: 32px; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.receipt__title { margin: 6px 0 22px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.receipt__track { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 22px; text-align: left; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.receipt__cover { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); }
.receipt__cover img { width: 100%; height: 100%; object-fit: cover; }
.receipt__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.receipt__meta span { color: var(--muted); font-size: .9rem; }
.receipt__price { font-weight: 800; font-variant-numeric: tabular-nums; }
.receipt__dl { width: 100%; justify-content: center; font-size: 1.05rem; padding: 15px 22px; }
.receipt__info { margin: 10px 0 0; color: var(--muted); font-size: .86rem; }
.receipt__warn { color: #ef4444; font-weight: 600; }
.receipt__note { display: flex; gap: 8px; justify-content: center; margin: 22px 0 0; color: var(--soft); font-size: .86rem; }
.receipt__note svg { margin-top: 3px; }
.receipt__ref { margin: 8px 0 0; color: var(--muted); font-size: .76rem; }
.player.is-loading .player__play { animation: melodia-pulse 1s ease-in-out infinite; }
@keyframes melodia-pulse { 50% { opacity: .55; } }

/* ---------- Single track ---------- */
.single-hero { display: flex; align-items: flex-end; gap: 34px; margin-bottom: 34px; }
.single-hero__cover {
	width: 240px; height: 240px; flex-shrink: 0; border-radius: 22px; overflow: hidden;
	background: var(--grad); color: var(--on-accent); font-size: 70px;
	display: grid; place-items: center;
	box-shadow: 0 34px 60px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}
.single-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
/* The song page shows the whole cover (no cropping): the frame takes the picture's own shape. */
.single-hero__cover.is-whole { display: block; height: auto; min-height: 0; aspect-ratio: auto; background: none; }
.single-hero__cover.is-whole img { height: auto; max-height: 420px; object-fit: contain; display: block; }
.single-hero__artist { font-size: 1.1rem; color: var(--soft); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 22px; color: var(--muted); font-size: .88rem; }
.stats span { display: inline-flex; align-items: center; gap: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.single-hero__info { flex: 1 1 auto; min-width: 0; }
.single-hero .hero__title { overflow-wrap: anywhere; }
.single-hero .stats { margin-bottom: 0; }
/* Play on the right, Add to cart / Download under it. */
.single-hero__actions { flex: 0 0 auto; flex-direction: column; align-items: stretch; margin-left: auto; min-width: 200px; }
.single-hero__actions .btn { justify-content: center; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.tag-list a { font-size: .8rem; padding: 4px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--soft); transition: border-color .2s; }
.tag-list a:hover { border-color: var(--accent); }
.section-title { margin: 38px 0 14px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }

.entry-content { max-width: 760px; color: var(--soft); }
.entry-content a { color: color-mix(in srgb, var(--accent) 70%, var(--text)); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2, .entry-content h3 { color: var(--text); letter-spacing: -.01em; }
.page-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 20px; }

/* ---------- Pagination / empty ---------- */
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 30px; }
.page-numbers {
	min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px;
	display: grid; place-items: center; border: 1px solid var(--line); color: var(--soft);
	transition: background .2s;
}
a.page-numbers:hover { background: var(--panel); }
.page-numbers.current { background: var(--grad); border-color: transparent; color: var(--on-accent); }

.empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line); border-radius: 22px; color: var(--muted); }
.empty svg { font-size: 44px; margin: 0 auto 14px; color: var(--accent); }
.empty h2 { color: var(--text); margin: 0 0 6px; }

/* ---------- Player ---------- */
.player {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	height: var(--player-h);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 0 24px;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	border-top: 1px solid var(--line);
	transform: translateY(110%);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.player.is-visible { transform: none; }

/* Equalizer */
.player__viz {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none; z-index: 0; opacity: .2;
}
.player__track, .player__center, .player__controls, .player__progress, .player__side { position: relative; z-index: 1; }
.player__eq {
	width: 140px; height: 42px; flex-shrink: 0; padding: 5px 7px; margin-right: 6px;
	border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08);
	background: linear-gradient(180deg, #11111b, #07070d);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 4px 14px -6px rgba(0, 0, 0, .4);
}
.player__eq canvas { display: block; width: 100%; height: 100%; }
.player__cover { transform: scale(calc(1 + var(--beat, 0) * .07)); transition: box-shadow .4s, transform .08s linear; }

.player__track { display: flex; align-items: center; gap: 14px; min-width: 0; }
.player__cover {
	width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
	background: var(--grad); color: var(--on-accent); font-size: 22px;
	display: grid; place-items: center;
	transition: box-shadow .4s;
}
.player.is-playing .player__cover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 30px -8px var(--accent-2); }
.player__cover img { width: 100%; height: 100%; object-fit: cover; }
.player__info { min-width: 0; display: flex; flex-direction: column; }
.player__info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__info span { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player__center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player__controls { display: flex; align-items: center; gap: 16px; }
.ctrl {
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center; font-size: 18px; color: var(--soft);
	transition: background .2s, color .2s, transform .2s;
}
.ctrl:hover { background: var(--panel); color: var(--text); }
.ctrl:disabled { opacity: .35; cursor: default; }
.player__play { width: 46px; height: 46px; font-size: 20px; background: var(--text); color: var(--bg); }
.player__play:hover { background: var(--text); color: var(--bg); transform: scale(1.06); }
.player .ico-pause, .player .ico-mute { display: none; }
.player.is-playing .player__play .ico-play { display: none; }
.player.is-playing .player__play .ico-pause { display: block; }
.player.is-muted .ico-volume { display: none; }
.player.is-muted .ico-mute { display: block; }

.player__progress {
	width: 100%; max-width: 580px;
	display: flex; align-items: center; gap: 10px;
	color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums;
}
.player__progress span { min-width: 36px; }
.player__progress span:last-child { text-align: right; }
.player__side { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.player__side .btn-dl { padding: 8px; }

.range {
	--p: 0%;
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 4px; border-radius: 99px; cursor: pointer; outline: none;
	background: linear-gradient(90deg, var(--accent), var(--accent-2) var(--p), rgba(var(--fg-rgb), .14) var(--p));
}
.range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
	background: var(--text); opacity: 0; transition: opacity .2s;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.range:hover::-webkit-slider-thumb, .range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.range::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--text); }
.range--vol { width: 104px; }

/* ---------- Dashboard ---------- */
.dash__head {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: 20px; padding: 26px 28px; margin-bottom: 22px;
	border-radius: 24px; border: 1px solid var(--line);
	background: var(--hero, linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent) 60%, rgba(var(--fg-rgb), .02)));
}
.dash__avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 3px solid rgba(var(--fg-rgb), .2); background: var(--grad); }
.dash__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash__name { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 2px; }
.dash__email { color: var(--soft); font-size: .9rem; }
.dash__logout { padding: 10px 16px; }

.dash__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.dash__nav { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.dash__nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--soft); font-weight: 600; transition: background .2s, color .2s; }
.dash__nav a svg { color: var(--muted); font-size: 18px; transition: color .2s; }
.dash__nav a:hover { background: var(--panel-2); color: var(--text); }
.dash__nav a.is-active { background: var(--grad); color: var(--on-accent); }
.dash__nav a.is-active svg { color: var(--on-accent); }

.dash__panel { min-height: 320px; outline: none; transition: opacity .2s; }
.dash.is-loading .dash__panel { opacity: .45; pointer-events: none; }
.dash.is-loading .dash__nav a.is-active::after { content: ""; margin-left: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dash-spin .7s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }
.dash-section { animation: dash-in .3s ease; }
@keyframes dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dash-title { margin: 4px 0 18px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; outline: none; }
.dash-muted { color: var(--muted); font-size: .88rem; }
.dash-link { color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; font-size: .88rem; }
.dash-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.dash-stat { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.dash-stat span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dash-stat strong { display: block; margin-top: 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.dash-block { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.dash-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dash-block__head h3 { margin: 0; font-size: 1.05rem; }

.dash-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-order { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; transition: background .2s; }
.dash-order:hover { background: var(--panel); }
.dash-order__cover { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-size: 20px; }
.dash-order__cover img { width: 100%; height: 100%; object-fit: cover; }
.dash-order__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-order__meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-order__meta span { color: var(--muted); font-size: .84rem; }
.dash-order__side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dash-order__side small { color: var(--muted); font-size: .76rem; }

.dash-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 18px; color: var(--soft); }
.dash-empty > svg { font-size: 40px; color: var(--accent); margin: 0 auto 10px; }
.dash-empty .btn { margin-top: 8px; }

/* Forms */
.dash-form { display: flex; flex-direction: column; gap: 14px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .82rem; font-weight: 600; color: var(--soft); }
.field input, .field select, .field textarea {
	width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
	background: var(--panel); color: var(--text); font: inherit; outline: none; transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.field--narrow { max-width: 360px; }
.dash-fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; }
.dash-fieldset legend { padding: 0 6px; font-weight: 700; }
.dash-form__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-form.is-busy { opacity: .7; }
.dash-msg { margin: 0; font-size: .9rem; color: var(--muted); min-height: 1.2em; }
.dash-msg.is-ok { color: #22c55e; font-weight: 600; }
.dash-msg.is-error { color: #ef4444; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: .9rem; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Log in / Sign up */
.auth { display: grid; place-items: center; min-height: 70vh; }
.auth__card { width: 100%; max-width: 440px; padding: 32px 30px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); }
.auth__brand { display: flex; justify-content: center; margin-bottom: 12px; }
.auth__brand .brand__mark { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
.auth__title { margin: 0 0 6px; text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.auth__intro { text-align: center; margin: 0 auto 6px; color: var(--soft); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 18px 0 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.auth__tabs button { padding: 10px; border-radius: 10px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.auth__tabs button[aria-selected="true"] { background: var(--grad); color: var(--on-accent); }
.auth__form { margin-top: 6px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth__submit { justify-content: center; width: 100%; }
.auth__notice { margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.auth__notice.is-error { background: rgba(239, 68, 68, .12); color: #ef4444; border: 1px solid rgba(239, 68, 68, .3); }
.auth__notice.is-ok { background: rgba(34, 197, 94, .12); color: #22c55e; border: 1px solid rgba(34, 197, 94, .35); }
.auth__notice a { color: inherit; text-decoration: underline; }
.auth__form.is-done .field, .auth__form.is-done .auth__submit, .auth__form.is-done .auth__row { display: none; }
.auth__form.is-done .dash-msg { padding: 14px 16px; border-radius: 12px; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3); line-height: 1.5; }
.dash-resend { margin-top: 8px; display: inline-block; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); font-size: .82rem; font-weight: 700; }
.dash-resend:hover { background: var(--panel-2); }
.dash-welcome { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); color: #22c55e; font-weight: 700; }
.field--locked input { opacity: .65; cursor: not-allowed; }
.field--locked > span svg { font-size: 12px; vertical-align: -1px; color: var(--muted); }
.dash-note { margin: -4px 0 4px; }
.auth__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Responsive ---------- */
/* ---------- Cart & Checkout ---------- */
.hcart {
	position: relative; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; font-size: 19px;
	background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
	transition: background .2s, border-color .2s, transform .2s;
}
.hcart:hover { background: var(--grad); color: var(--on-accent); border-color: transparent; transform: scale(1.05); }
.hcart__count {
	position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
	border-radius: 10px; display: grid; place-items: center;
	background: var(--grad); color: var(--on-accent); font-size: .7rem; font-weight: 800; line-height: 1;
	box-shadow: 0 0 0 2px var(--bg); font-variant-numeric: tabular-nums;
}
.hcart__count.is-bump { animation: melodia-bump .45s ease; }
@keyframes melodia-bump { 40% { transform: scale(1.35); } }

[data-cart-add].is-busy { opacity: .6; pointer-events: none; }
[data-cart-add].is-in-cart { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .45); color: #22c55e; }
[data-cart-add].is-in-cart:hover { background: rgba(34, 197, 94, .22); color: #22c55e; transform: none; }
.btn-dl--owned { border-color: rgba(34, 197, 94, .45); }

.cart-toast {
	position: fixed; left: 50%; bottom: calc(var(--player-h) + 18px); z-index: 120;
	display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
	padding: 12px 14px 12px 18px; border-radius: 14px;
	background: color-mix(in srgb, var(--bg) 88%, var(--accent)); border: 1px solid var(--line); color: var(--text);
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .6); font-size: .92rem; font-weight: 600;
	opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.cart-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast.is-error { border-color: rgba(239, 68, 68, .5); color: #f87171; }
.cart-toast a { flex-shrink: 0; padding: 7px 12px; border-radius: 10px; background: var(--grad); color: var(--on-accent); font-weight: 700; text-decoration: none; }

.shop { max-width: 1040px; }
.shop__head { margin-bottom: 22px; }
.shop__head .hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.shop__title { margin: 4px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.shop__intro { margin-top: 8px; color: var(--soft); }
.shop__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.shop__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.shop__step, .shop__summary { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.shop__step h2, .shop__summary h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.08rem; font-weight: 800; }
.shop__summary { position: sticky; top: calc(var(--header-h) + 18px); }
.shop__num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font-size: .8rem; }
.shop__row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--soft); }
.shop__row--total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text); font-size: 1.1rem; }
.shop__row--total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.shop__cta { width: 100%; justify-content: center; margin-top: 14px; padding: 14px 20px; font-size: 1rem; }
.shop__back { display: block; margin-top: 12px; text-align: center; color: var(--muted); font-size: .88rem; }
.shop__back:hover { color: var(--text); }
.shop__note { display: flex; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.shop__note svg { flex-shrink: 0; margin-top: 2px; }
.shop__note.is-error, .shop__status.is-error { color: #ef4444; }
.shop__consent, .buy__consent {
	display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px;
	border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); cursor: pointer;
	color: var(--muted); font-size: .74rem; line-height: 1.5; text-align: left;
}
.shop__consent input, .buy__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.shop__consent:has(input:checked), .buy__consent:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--soft); }
.shop__consent.is-missing { border-color: #ef4444; animation: consent-shake .35s; }
@keyframes consent-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.buy__consent { margin: 12px 0 0; }
.shop__status { min-height: 1.2em; margin: 10px 0 0; color: var(--soft); font-size: .9rem; text-align: center; }
.shop__alert { margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4); color: #f59e0b; font-weight: 600; }
.shop__who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop__who img { width: 44px; height: 44px; border-radius: 50%; }
.shop__who span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop__who small { color: var(--muted); }
.shop__step.auth { display: block; min-height: 0; }
form[data-checkout].is-busy { opacity: .75; pointer-events: none; }

.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-line {
	display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px;
	border: 1px solid var(--line); background: var(--panel); transition: opacity .25s, transform .25s;
}
.cart-line.is-removing { opacity: .4; transform: translateX(8px); }
.cart-line__cover { width: 58px; height: 58px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font-size: 22px; }
.cart-line__cover img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-line__meta > span { color: var(--soft); font-size: .9rem; }
.cart-line__title { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line__price { font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-line__remove { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--muted); background: transparent; border: 1px solid transparent; transition: background .2s, color .2s; }
.cart-line__remove:hover { background: rgba(239, 68, 68, .14); color: #ef4444; }
.cart-lines--compact .cart-line { padding: 8px 0; border: 0; border-radius: 0; background: none; gap: 10px; }
.cart-lines--compact .cart-line + .cart-line { border-top: 1px solid var(--line); }
.cart-lines--compact .cart-line__cover { width: 42px; height: 42px; font-size: 16px; }
.cart-lines--compact .cart-line__meta > span { font-size: .8rem; }
.cart-lines--compact .cart-line__title { font-size: .92rem; }

.pay-opts { display: flex; flex-direction: column; gap: 10px; }
.pay-opt { position: relative; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt__box {
	display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 14px 46px; border-radius: 14px;
	border: 1.5px solid var(--line); background: var(--panel); transition: border-color .2s, background .2s; position: relative;
}
.pay-opt__box::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--muted); transition: border .2s; }
.pay-opt input:checked + .pay-opt__box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pay-opt input:checked + .pay-opt__box::before { border: 6px solid var(--accent); }
.pay-opt input:focus-visible + .pay-opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay-opt__box strong { display: inline-flex; align-items: center; gap: 8px; }
.pay-opt__box strong svg { width: 22px; height: 22px; fill: currentColor; }
.pay-opt__box small { color: var(--muted); font-size: .82rem; }
.pay-opt .pp-logo { font-size: 1.2rem; background: #fff; align-self: flex-start; padding: 1px 8px; border-radius: 6px; }

.receipt__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.receipt__list .receipt__track { margin: 0; }
.receipt__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.receipt__side small { color: var(--muted); font-size: .75rem; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 4px 0; margin-bottom: 8px; font-size: 1.05rem; }
.receipt__total strong { font-size: 1.3rem; }
.dash-welcome.is-paid svg { flex-shrink: 0; }

@media (max-width: 960px) {
	.shop__grid { grid-template-columns: 1fr; }
	.shop__summary { position: static; }
}
@media (max-width: 640px) {
	.cart-line { flex-wrap: wrap; }
	.cart-line__meta { flex-basis: calc(100% - 120px); }
	.cart-toast { bottom: calc(var(--player-h) + 10px); width: calc(100vw - 32px); }
	.receipt__list .receipt__track { flex-wrap: wrap; }
	.receipt__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

@media (max-width: 1280px) {
	.player__eq { display: none; }
	.player__viz { opacity: .28; }
	.track, .tracklist__head { grid-template-columns: 40px 52px minmax(0, 1fr) 70px 56px 166px; }
	.track__genre, .tracklist__head .c-genre { display: none; }
	.track__genre-in { display: inline-block; }
	.main { padding: 28px 30px 44px; }
}
@media (max-width: 960px) {
	.site { flex-direction: column; }
	.sidebar, .main { flex: 1 1 auto; max-width: 100%; }
	.site-header { padding: 0 16px; }
	.site-header .brand__tagline { display: none; }
	.sidebar { position: static; height: auto; padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--line); gap: 20px; }
	.has-player .sidebar { padding-bottom: 22px; }
	.sidebar__foot, .side-block--top, .sidebar .widget-area { display: none; }
	.dash__body { grid-template-columns: 1fr; }
	.dash__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
	.dash__nav a { flex-shrink: 0; }
	.genre-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
	.genre-list a { border: 1px solid var(--line); padding: 6px 12px; border-radius: 99px; }
	.side-nav ul { flex-direction: row; flex-wrap: wrap; }
	.main { padding: 22px 16px 40px; }

	:root { --player-h: 128px; }
	.player { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 12px 16px; }
	.player__center { display: contents; }
	.player__controls { gap: 6px; }
	.player__progress { grid-column: 1 / -1; max-width: none; }
	.player__side { display: none; }
}
@media (max-width: 640px) {
	/* Phones: the list uses the whole width — no number column, no table head, slim margins. */
	.main { padding-left: 8px; padding-right: 8px; }
	.hero, .toolbar--sort, .pagination, .empty { margin-left: 4px; margin-right: 4px; }
	.tracklist__head { display: none; }
	.track { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 8px 6px; }
	.track__index, .track__plays, .track__duration { display: none; }
	.track__cover { width: 48px; height: 48px; }
	.track__title { font-size: .95rem; }
	.track__artist { font-size: .8rem; }
	.track__stats { display: flex; }
	.btn-dl span { display: none; }
	.btn-dl { padding: 9px; }
	/* Phones: cart icon as before, with the price in small letters under it. "In cart" / "Owned": icon only. */
	.btn-dl--buy:not(.is-in-cart) { flex-direction: column; justify-content: center; gap: 2px; min-width: 44px; height: 40px; padding: 4px 6px; border-radius: 12px; line-height: 1; }
	.btn-dl--buy:not(.is-in-cart) svg { width: 15px; height: 15px; }
	.btn-dl--buy:not(.is-in-cart) span { display: block; font-size: .6rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
	.track__actions { gap: 6px; }
	.hero { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
	.single-hero { flex-direction: column; align-items: flex-start; }
	.single-hero__info { width: 100%; }
	.single-hero__actions { width: 100%; margin-left: 0; }
	.dash__head { flex-wrap: wrap; padding: 20px; }
	.dash__logout span { display: none; }
	.dash-order { flex-wrap: wrap; }
	.dash-order__side { width: 100%; justify-content: flex-end; }
	.auth__card { padding: 26px 20px; }
	.single-hero__cover { width: min(200px, 58vw); height: auto; aspect-ratio: 1; align-self: center; font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.player__viz { display: none; }
	.player__cover { transform: none !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- Forgot password (inside the log in form) ---------- */
.auth[data-view="lost"] .auth__tabs, .auth[data-view="reset"] .auth__tabs { display: none; }
.auth__pane-title { margin: 14px 0 4px; font-size: 1.15rem; font-weight: 800; }
.auth__pane-text { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; }
.auth__lost { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.auth__back { display: block; margin: 12px auto 0; background: none; border: 0; cursor: pointer; font: inherit; }
.auth__form.is-done .auth__pane-text { display: none; }

/* ---------- Sign-up: security question + terms ---------- */
.field--captcha strong { color: var(--text); font-weight: 800; }
.check--terms { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; font-size: .86rem; line-height: 1.5; color: var(--soft); cursor: pointer; }
.check--terms input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--accent); }
.check--terms a { color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Legal pages (Terms of Use / Privacy Policy) ---------- */
.legal { max-width: 820px; }
.legal__head { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal__title { margin: 6px 0 8px; font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.legal__date { color: var(--muted); font-size: .9rem; }
.legal .entry-content { line-height: 1.75; color: var(--soft); }
.legal .entry-content h2 { margin: 30px 0 10px; font-size: 1.2rem; color: var(--text); }
.legal .entry-content h3 { margin: 22px 0 8px; font-size: 1.05rem; color: var(--text); }
.legal .entry-content a { color: color-mix(in srgb, var(--accent) 70%, var(--text)); text-decoration: underline; }
.legal__other { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.legal__other a { color: var(--text); font-weight: 600; }
.legal__empty { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.field--captcha input { -moz-appearance: textfield; appearance: textfield; }
.field--captcha input::-webkit-outer-spin-button, .field--captcha input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Site logo (Music → Settings) ---------- */
.brand__link--logo { display: flex; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.site-logo { display: block; width: var(--logo-w); aspect-ratio: var(--logo-r); background: center / contain no-repeat; -webkit-touch-callout: none; pointer-events: none; }
@media (max-width: 640px) {
	.site-logo { width: min(var(--logo-w), 55vw, calc(48px * var(--logo-r))); }
}

/* ---------- Dialogs on small / short screens: scroll inside, top always reachable ---------- */
.auth-modal, .buy { place-items: start center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.auth-modal__card, .buy__card { margin: auto 0; }
.auth-modal .buy__x, .buy .buy__x { z-index: 2; }
@media (max-width: 640px) {
	.auth-modal, .buy { padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); }
	.auth-modal__card { padding: 24px 18px 18px; border-radius: 18px; }
	.auth-modal .auth__brand { margin-bottom: 6px; }
	.auth-modal .auth__brand .brand__mark { width: 44px; height: 44px; font-size: 20px; }
	.auth-modal .auth__tabs { margin: 12px 0 14px; }
	.auth-modal .buy__x { top: 8px; right: 8px; width: 40px; height: 40px; background: var(--panel-2); color: var(--text); }
}

/* ---------- Full width (no left sidebar): Dashboard ---------- */
.no-sidebar .main { flex: 1 1 auto; max-width: 100%; }
.no-sidebar .main__body > .dash, .no-sidebar .main__body > .auth { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------- Home banner (Music → Settings → Home page banner) ---------- */
.hero--custom .hero__eyebrow, .hero--custom .hero__title, .hero--custom .hero__desc { font-family: var(--hero-font), 'Commissioner', system-ui, sans-serif; }
.hero--custom .hero__title { font-size: var(--hero-size, clamp(1.75rem, 3.4vw, 2.9rem)); } /* home banner: one step smaller (automatic size) */
.hero--color .hero__eyebrow, .hero--color .hero__title, .hero--color .hero__desc { color: var(--hero-text); }
.hero--color .hero__eyebrow, .hero--color .hero__desc { opacity: .85; }
.hero--center { flex-direction: column; align-items: center; text-align: center; }
.hero--plain::before, .hero--plain::after { display: none; }
/* Home banner: faint rotating globe (Music → Settings → Home page banner). */
.hero > .hero__globe {
	position: absolute; z-index: 0; right: 5%; top: 6%;
	height: 88%; width: auto; aspect-ratio: 1;
	pointer-events: none; opacity: .22; color: var(--hero-text, var(--text));
	perspective: 900px;
}
.hero__globe::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(var(--fg-rgb), .2), transparent 65%);
	border: 1.5px solid currentColor; opacity: .7;
}
.hero__globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Animated colour border (Music → Settings → Home page banner) */
.hero > .hero__ring {
	position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
	background: linear-gradient(120deg, var(--accent), var(--accent-2), #f59e0b, var(--accent)) 0 0 / 300% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
	animation: hero-ring 8s linear infinite;
}
.hero--glow { border-color: transparent; }
@keyframes hero-ring { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .hero > .hero__ring { animation: none; } }
/* Extra block at the bottom of the home banner (e.g. the DJ promo) */
.hero:has(> .hero__extra) { flex-wrap: wrap; }
.hero > .hero__extra { flex: 1 1 100%; min-width: 0; }
.hero--center > .hero__extra { align-self: stretch; text-align: left; }
@media (max-width: 720px) {
	.hero > .hero__globe { right: -28px; opacity: .13; }
}
@media (max-width: 640px) {
	.hero--custom .hero__title { font-size: min(var(--hero-size, 1.9rem), 9.5vw); }
}

/* ---------- Menus: desktop (left sidebar) / mobile (drawer) ---------- */
.mnav__btn { display: none; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; place-items: center; font-size: 22px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); }
.mnav { position: fixed; inset: 0; z-index: 220; }
.mnav__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 12, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.mnav__panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); overflow-y: auto; outline: none;
	display: flex; flex-direction: column; gap: 16px; padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%); border-right: 1px solid var(--line);
	box-shadow: 20px 0 60px -20px rgba(0, 0, 0, .6); transform: translateX(-102%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.mnav.is-open .mnav__backdrop { opacity: 1; }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.mnav__title { font-weight: 800; font-size: 1.05rem; }
.mnav__x { position: static; }
.mnav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mnav__menu a { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 12px; color: var(--soft); font-weight: 600; }
.mnav__menu a:hover, .mnav__menu .current-menu-item > a { background: var(--panel); color: var(--text); }
.mnav__menu a span { display: flex; align-items: center; gap: 10px; }
.mnav__menu { padding-top: 14px; border-top: 1px solid var(--line); }
.mnav__menu a { padding: 9px 12px; font-size: .88rem; }
.mnav__menu a svg { width: 16px; height: 16px; }
.mnav__menu .sub-menu { padding-left: 14px; margin: 2px 0 6px; border-left: 1px solid var(--line); margin-left: 14px; }
.mnav__menu .sub-menu a { padding: 7px 12px; font-weight: 500; font-size: .84rem; }
@media (max-width: 960px) {
	.mnav__btn { display: grid; }
	.site-header { gap: 10px; }
	.site-header .brand { flex: 1; }
	.sidebar .side-nav { display: none; } /* on phones the menu is in the drawer */
	.sidebar .side-block--genres { display: none; } /* … and so are the genres */
	/* The left column is empty on phones (menu + genres in ☰, search above the songs): the banner comes right under the header. */
	.sidebar { display: none; }
	.main .search--list { display: block; margin: 0 4px 12px; }
}
.search--list { display: none; }

/* Genres in the phone menu: colourful chips */
.mnav__genres { margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.mnav__label { margin: 0 0 10px 4px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gchip {
	--c1: #8b5cf6; --c2: #ec4899;
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 99px;
	color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 34%, transparent), color-mix(in srgb, var(--c2) 26%, transparent));
	border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent);
	transition: transform .15s, box-shadow .2s, background .2s;
}
.gchip:hover, .gchip:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--c1) 35%, transparent); }
.gchip.is-active { background: linear-gradient(135deg, var(--c1), var(--c2)); border-color: transparent; color: #fff; }
.gchip__n { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, .28); font-size: .72rem; font-weight: 700; text-align: center; }
.gchip--1 { --c1: #06b6d4; --c2: #3b82f6; }
.gchip--2 { --c1: #f59e0b; --c2: #ef4444; }
.gchip--3 { --c1: #10b981; --c2: #06b6d4; }
.gchip--4 { --c1: #ec4899; --c2: #f97316; }
.gchip--5 { --c1: #6366f1; --c2: #a855f7; }
@media (min-width: 961px) {
	.mnav { display: none !important; }
}

/* ---------- Player: close (×) ---------- */
.player__close {
	position: absolute; top: 6px; right: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--muted);
	background: transparent; border: 0; cursor: pointer; transition: background .2s, color .2s;
}
.player__close:hover { background: var(--panel-2); color: var(--text); }
.player { padding-right: 44px; }
@media (max-width: 960px) {
	.player { padding-right: 40px; }
	.player__close { top: 4px; right: 4px; width: 32px; height: 32px; }
}

/* ---------- Live search ---------- */
.search--live { position: relative; }
.search--live.is-searching::after {
	content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
	border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: melodia-spin .7s linear infinite;
}
@keyframes melodia-spin { to { transform: rotate(360deg); } }
.sres {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; max-height: min(420px, 60vh); overflow-y: auto;
	display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
	background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); border: 1px solid var(--line);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .65);
}
.sres__item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.sres__item + .sres__item { margin-top: 2px; }
.sres__item:hover, .sres__item.is-active { background: var(--panel-2); }
.sres__cover { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); }
.sres__cover img { width: 100%; height: 100%; object-fit: cover; }
.sres__cover svg { width: 16px; height: 16px; fill: currentColor; }
.sres__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sres__title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sres__title mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sres__artist { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sres__side { flex-shrink: 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sres__empty { padding: 14px 10px; text-align: center; color: var(--muted); font-size: .88rem; }
.sres__all { margin-top: 4px; padding: 9px; border-top: 1px solid var(--line); text-align: center; font-size: .84rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.sres__all:hover, .sres__all.is-active { background: var(--panel); border-radius: 0 0 10px 10px; }

/* ---------- Continue with Google ---------- */
.gbtn {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px;
	border-radius: 12px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
	font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .2s, box-shadow .2s;
}
.gbtn:hover { background: #f7f8f8; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); color: #1f1f1f; }
.gbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gbtn svg { flex-shrink: 0; }
.gbtn__legal { margin: 8px 2px 0; color: var(--muted); font-size: .74rem; line-height: 1.45; text-align: center; }
.gbtn__legal a { color: var(--soft); text-decoration: underline; }
.gbtn__or { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.gbtn__or::before, .gbtn__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Breadcrumbs ---------- */
.crumbs { margin: 0 2px 14px; font-size: .8rem; color: var(--muted); }
.crumbs ol, .crumbs p { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--muted); opacity: .7; }
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current], .crumbs .breadcrumb_last { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- Blog ---------- */
.hero--blog { margin-bottom: 22px; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.post-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.post-card:hover { transform: translateY(-2px); border-color: rgba(var(--fg-rgb), .18); }
.post-card__img { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--panel-2); color: var(--muted); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; } /* whole picture, no cropping */
.post-card__img svg { width: 40px; height: 40px; opacity: .5; }
.post-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex-grow: 1; }
.post-card__cat { align-self: flex-start; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--soft); font-size: .72rem; font-weight: 700; text-decoration: none; }
.post-card__cat:hover { border-color: var(--accent); color: var(--text); }
.post-card__title { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__excerpt { margin: 0; color: var(--soft); font-size: .9rem; line-height: 1.55; }
.post-card__meta, .entry-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; color: var(--muted); font-size: .8rem; }
.single-post .entry-header { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.single-post .page-title { margin: 0; }
/* Featured picture of an article / page: its own proportions, at the size set in Settings → Media
   (never stretched past it, never cropped), centred. */
.entry-image { margin: 0 0 24px; text-align: center; }
.entry-image img { display: inline-block; width: auto; max-width: 100%; height: auto; border-radius: 18px; vertical-align: top; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content .wp-block-image img, .entry-content img.size-full, .entry-content img.size-large { object-fit: contain; }
/* Never cropped inside articles / pages: whatever crop the editor block asks for (Image "Aspect ratio" /
   "Scale: cover" or a fixed height, Gallery "Crop images", Media & Text "Crop image to fill"), the whole picture shows. */
.entry-content .wp-block-image img { object-fit: contain !important; max-width: 100%; } /* the crop settings are taken out in PHP (functions.php) */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image { align-self: flex-start; }
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img,
.entry-content .wp-block-gallery.is-cropped figure.wp-block-image img { height: auto !important; object-fit: contain !important; flex: 0 0 auto; }
.entry-content .wp-block-media-text.is-image-fill .wp-block-media-text__media,
.entry-content .wp-block-media-text.is-image-fill-element .wp-block-media-text__media { background: none !important; min-height: 0 !important; height: auto; }
.entry-content .wp-block-media-text.is-image-fill .wp-block-media-text__media img,
.entry-content .wp-block-media-text.is-image-fill-element .wp-block-media-text__media img { position: static !important; width: 100% !important; height: auto !important; clip: auto !important; clip-path: none !important; margin: 0 !important; object-fit: contain !important; opacity: 1 !important; }
.single-post .entry-content { max-width: 760px; font-size: 1.04rem; line-height: 1.75; }
.single-post .tag-list { margin: 26px 0 0; }
.post-navigation { margin-top: 30px; }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.post-navigation a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; }
.post-navigation a:hover { border-color: var(--accent); }
.post-navigation .nav-next a { text-align: right; }
.nav-sub { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.nav-title { font-weight: 700; }
@media (max-width: 640px) {
	.posts-grid { grid-template-columns: 1fr; gap: 14px; }
	.crumbs { margin: 0 4px 10px; }
}

/* ---------- Contact ---------- */
.hero--contact { margin-bottom: 22px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.contact__card { padding: 24px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.contact__info { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form textarea { resize: vertical; min-height: 150px; font: inherit; }
.field__err { min-height: 0; color: #f87171; font-size: .8rem; font-weight: 600; }
.field__err:empty { display: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ef4444; }
.check.is-invalid { color: #fca5a5; }
.contact-form .check--terms { margin: 0; }
.contact-form__send { align-self: flex-start; min-width: 180px; }
.contact-form.is-busy { opacity: .7; pointer-events: none; }
.contact-form__status:empty { display: none; }
.contact-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; outline: none; }
.contact-done__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 185, 129, .15); color: #34d399; }
.contact-done p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 960px) {
	.contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.contact-form__row { grid-template-columns: 1fr; }
	.contact__card { padding: 18px 16px; }
	.contact-form__send { align-self: stretch; }
}

.req { color: #f87171; text-decoration: none; border: 0; font-weight: 700; cursor: help; }
.field .opt { color: var(--muted); font-weight: 500; font-size: .8em; }
.contact-form__note { margin: -2px 0 0; color: var(--muted); font-size: .8rem; }
.no-sidebar .main__body > .contact, .no-sidebar .main__body > .crumbs { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Contact: everything in one centred column */
.no-sidebar .main__body > .contact, .no-sidebar .main__body > .crumbs { max-width: 760px; }
.contact .hero--contact { text-align: center; justify-content: center; }
.contact .hero--contact > div { width: 100%; }
.contact__grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.contact__info { text-align: center; }
.contact-form__send { align-self: center; }
.contact-form__note { text-align: center; }
.contact-done { align-items: center; text-align: center; }
.contact-form .contact-form__send { align-self: center; margin-left: auto; margin-right: auto; justify-content: center; }
@media (max-width: 640px) { .contact-form .contact-form__send { align-self: stretch; width: 100%; } }

/* ---------- Profile picture ---------- */
.avatar-field { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); }
.avatar-field__img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--panel-2); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent); }
.avatar-field__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-field__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avatar-field__btns { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.avatar-field .btn--sm { padding: 8px 14px; font-size: .85rem; cursor: pointer; }
.avatar-field__remove { color: #f87171; }
.avatar-field [data-avatar-note].is-pending { color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; }
.avatar-field [data-avatar-note].is-error { color: #f87171; font-weight: 600; }
@media (max-width: 640px) { .avatar-field { flex-direction: column; text-align: center; } .avatar-field__btns { justify-content: center; } }

/* ---------- Cookie card ---------- */
.cookie-card {
	position: fixed; left: 16px; bottom: 16px; z-index: 230; width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 32px); overflow-y: auto;
	padding: 18px 18px 16px; border-radius: 18px;
	background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); border: 1px solid var(--line);
	box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .55);
	opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s;
}
.cookie-card.is-open { opacity: 1; transform: none; }
.has-player .cookie-card { bottom: calc(var(--player-h) + 12px); max-height: calc(100vh - var(--player-h) - 28px); }
.cookie-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cookie-card__head h2, .cookie-card__head .cookie-card__title { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.cookie-card__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex-shrink: 0; }
.cookie-card__text { margin: 0 0 14px; color: var(--soft); font-size: .86rem; line-height: 1.55; }
.cookie-card__text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.cookie-card__prefs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.cookie-pref { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); cursor: pointer; }
.cookie-pref__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-pref small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.cookie-pref__always { color: #34d399; font-size: .75rem; font-weight: 700; }
.cookie-switch { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; transition: background .2s; margin: 0; }
.cookie-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cookie-switch:checked { background: var(--accent); border-color: transparent; }
.cookie-switch:checked::after { transform: translateX(18px); }
.cookie-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cookie-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-card__btns .btn { justify-content: center; padding: 10px 12px; font-size: .88rem; }
.cookie-card__btns [data-cookie-custom], .cookie-card__btns [data-cookie-save] { grid-column: 1 / -1; }
.mnav__cookies { display: block; margin-top: 14px; color: var(--muted); font-size: .85rem; text-decoration: underline; }
.sidebar__foot a { color: inherit; text-decoration: underline; }

/* Footer (bottom of the content column): text left, footer menu right */
.main { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
.main__body { flex: 1 0 auto; min-width: 0; }
.site-footer { margin-top: auto; padding-top: 40px; color: var(--muted); font-size: .8rem; }
.site-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.site-footer__text { min-width: 0; }
.site-footer__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__text a:hover { color: var(--text); }
.site-footer__sep { margin: 0 6px; opacity: .6; }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.site-footer__menu a { color: var(--soft); text-decoration: none; font-weight: 600; }
.site-footer__menu a:hover, .site-footer__menu .current-menu-item > a { color: var(--text); }
.no-sidebar .main > .site-footer { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
	.site-footer { padding-top: 28px; }
	.site-footer__in { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
	.site-footer__menu { justify-content: center; gap: 8px 16px; }
	.site-footer__nav { order: 1; } /* phones: the menu first… */
	.site-footer__text { order: 2; } /* …then © / All rights reserved */
}
.cookie-table { overflow-x: auto; margin: 0 0 12px; }
.cookie-table table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cookie-table th, .cookie-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 640px) {
	.cookie-card { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 16px 14px 14px; }
	.has-player .cookie-card { bottom: calc(var(--player-h) + 8px); }
}

/* ---------- Share buttons (song page) ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -14px 0 30px; }
.share__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.share__btn {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
	border: 1px solid var(--line); background: var(--panel); color: var(--soft); cursor: pointer;
	transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.share__btn svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
.share__btn:hover, .share__btn:focus-visible { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share__btn--facebook:hover, .share__btn--facebook:focus-visible { background: #1877f2; }
.share__btn--x:hover, .share__btn--x:focus-visible { background: #000; border-color: #333; }
.share__btn--viber:hover, .share__btn--viber:focus-visible { background: #7360f2; }
.share__btn--instagram:hover, .share__btn--instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.share__btn--link:hover, .share__btn--link:focus-visible { background: var(--grad); }
.share__note { font-size: .85rem; color: var(--soft); opacity: 0; transition: opacity .2s; }
.share__note.is-on { opacity: 1; }
@media (max-width: 960px) {
	.share { margin-top: -18px; }
	.share__note { flex-basis: 100%; }
}

/* ---------- Comments ---------- */
.comments { max-width: 760px; margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--line); }
.comments__title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 1.25rem; }
.comments__title svg { width: 22px; height: 22px; color: var(--accent); fill: currentColor; }
.comments__list, .comments__list .children { list-style: none; margin: 0; padding: 0; }
.comments__list .children { margin: 12px 0 0 28px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cmt { margin: 0 0 14px; }
.cmt__box { display: flex; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s; }
.cmt__box:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.bypostauthor > .cmt__box { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.cmt__avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.cmt__body { min-width: 0; flex: 1; }
.cmt__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cmt__name { color: var(--text); font-weight: 700; }
.cmt__badge { padding: 2px 8px; border-radius: 99px; background: var(--grad); color: var(--on-accent); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmt__date { color: var(--muted); font-size: .78rem; text-decoration: none; }
.cmt__date:hover { color: var(--soft); }
.cmt__wait { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: #fcd34d; font-size: .8rem; display: inline-block; }
.cmt__text { margin-top: 6px; color: var(--soft); line-height: 1.65; overflow-wrap: anywhere; }
.cmt__text p { margin: 0 0 8px; }
.cmt__text p:last-child { margin-bottom: 0; }
.cmt__text a { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.cmt__reply { margin-top: 8px; }
.cmt__reply a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--soft); font-size: .78rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.cmt__reply a:hover { border-color: var(--accent); color: var(--text); }
.cmt__reply svg { width: 14px; height: 14px; fill: currentColor; }
.comments .comment-navigation .nav-links { display: flex; justify-content: space-between; margin: 6px 0 18px; }
.comments .comment-navigation a { color: var(--soft); font-weight: 600; text-decoration: none; }
.comments__closed { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }
.comments__closed svg { width: 16px; height: 16px; fill: currentColor; }

/* The form */
.comments__form { margin-top: 26px; padding: 22px 22px 20px; border-radius: 22px; border: 1px solid var(--line);
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 5%, transparent) 60%, transparent), var(--panel); }
.comments__list .comments__form { margin: 12px 0 0; }
.comment-reply-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; font-size: 1.1rem; }
.comment-reply-title small a { color: var(--muted); font-size: .8rem; font-weight: 600; text-decoration: none; }
.comment-reply-title small a:hover { color: var(--text); }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comment-form > * { grid-column: 1 / -1; margin: 0; }
.comment-form .comment-form-author { grid-column: 1; }
.comment-form .comment-form-email { grid-column: 2; }
.comment-form .comment-notes, .comment-form .logged-in-as, .comment-form__privacy { color: var(--muted); font-size: .82rem; }
.comment-form .logged-in-as a { color: var(--soft); }
.comment-form label > span { font-size: .82rem; font-weight: 600; color: var(--soft); }
.comment-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.comment-form__req { color: var(--accent-2); font-weight: 700; }
.comment-form__privacy a { color: var(--soft); }
.comment-form .check { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); font-size: .85rem; cursor: pointer; }
.comment-form .check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.comment-form .form-submit { display: flex; justify-content: flex-end; }
.comment-form .form-submit .btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.comment-form .form-submit svg { width: 16px; height: 16px; fill: currentColor; }
.comment-form__honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.comment-form { grid-template-columns: 1fr; }
	.comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: 1; }
	.comments__list .children { margin-left: 10px; padding-left: 10px; }
	.cmt__box { padding: 14px; gap: 10px; }
	.cmt__avatar img { width: 36px; height: 36px; }
	.comment-form .form-submit .btn { width: 100%; justify-content: center; }
}

/* Related articles under an article */
.related-posts { margin: 34px 0 10px; }
.related-posts .section-title { margin-bottom: 14px; }

/* Home page: "About …" section under the songs (inc/home-about.php) */
.home-about { margin: 34px 0 10px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); }
.home-about__title { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.home-about__intro p { margin: 0 0 6px; color: var(--soft, var(--text)); line-height: 1.7; }
.home-about__more { margin-top: 4px; }
.home-about__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--accent); font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.home-about__toggle::-webkit-details-marker { display: none; }
.home-about__toggle:hover { text-decoration: underline; }
.home-about__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.home-about__toggle svg { transition: transform .2s; }
.home-about__close { display: none; }
.home-about__more[open] .home-about__open { display: none; }
.home-about__more[open] .home-about__close { display: inline; }
.home-about__more[open] .home-about__toggle svg { transform: rotate(180deg); }
.home-about__more[open] .home-about__toggle { order: 2; }
.home-about__body { padding-top: 6px; line-height: 1.7; }
.home-about__body h3 { margin: 22px 0 8px; font-size: 1.05rem; }
.home-about__body ul, .home-about__body ol { padding-left: 1.3em; }
.home-about__body li { margin: 4px 0; }
.home-about__link { margin-top: 18px; }
.home-about__link a { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .home-about { padding: 18px 16px 14px; border-radius: 14px; } }