/* exakt Music - frontend. Mobile-first; every colour follows the theme's own
   variables (exakt-theme-commerce), with dark streaming-app fallbacks.
   Defaults live on :root so a per-site value (also on :root) can override them. */

:root {
	--exm-accent: var(--exakt-primary, #F2B544);
	--exm-accent-hover: var(--exakt-primary-light, #E8893A);
	--exm-on-accent: #16120A;
	--exm-bg: var(--exakt-secondary, #0B0B10);
	--exm-text: var(--exakt-text, #E9E7F0);
	--exm-heading: var(--exakt-heading, #FFFFFF);
	--exm-muted: var(--exakt-text-light, #9E9AAE);
	--exm-line: var(--exakt-border, #2B2B38);
	--exm-surface: var(--exakt-bg-light, #15151D);
	--exm-raised: color-mix(in srgb, var(--exm-text) 7%, transparent);
	--exm-hover: color-mix(in srgb, var(--exm-text) 10%, transparent);
	--exm-radius: 10px;
	--exm-player-h: 76px;
}

.exm, .exm * { box-sizing: border-box; }
/* The hidden attribute loses to any display rule unless forced. */
.exm [hidden], .exm[hidden] { display: none !important; }

.exm-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; display: block; }
.exm-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.exm-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--exm-accent); }
.exm-h2 { font-size: 20px; margin: 0 0 16px; color: var(--exm-heading); }
.exm-empty { color: var(--exm-muted); padding: 24px 0; margin: 0; }

/* ---------- Buttons ---------- */
.exm-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px;
	border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600;
	line-height: 1; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s;
	background: transparent; color: var(--exm-text); text-transform: none; letter-spacing: normal; box-shadow: none;
}
.exm-btn:hover { transform: translateY(-1px); }
.exm-btn .exm-icon { width: 18px; height: 18px; }
.exm-btn--lg { min-height: 50px; padding: 12px 26px; font-size: 16px; }
.exm-btn--primary { background: var(--exm-accent); color: var(--exm-on-accent); }
.exm-btn--primary:hover { background: var(--exm-accent-hover); color: var(--exm-on-accent); }
.exm-btn--ghost { border-color: color-mix(in srgb, var(--exm-text) 35%, transparent); color: var(--exm-text); }
.exm-btn--ghost:hover { border-color: var(--exm-accent); color: var(--exm-accent); }
.exm-btn--text { padding-left: 8px; padding-right: 8px; color: var(--exm-muted); }
.exm-btn--text:hover { color: var(--exm-text); }
.exm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }

/* Play/pause glyph swap: .is-playing on the row (or the queue for Play all). */
.exm-play .exm-icon--pause, .exm-btn .exm-icon--pause, .exm-ctl--main .exm-icon--pause { display: none; }
.exm-row.is-playing .exm-play .exm-icon--play,
.exm-row.is-playing .exm-btn--primary .exm-icon--play,
.exm-player.is-playing .exm-ctl--main .exm-icon--play { display: none; }
.exm-row.is-playing .exm-play .exm-icon--pause,
.exm-row.is-playing .exm-btn--primary .exm-icon--pause,
.exm-player.is-playing .exm-ctl--main .exm-icon--pause { display: block; }

.exm-play {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer; background: var(--exm-accent); color: var(--exm-on-accent);
	transition: transform .15s, background .15s, opacity .15s;
}
.exm-play:hover { background: var(--exm-accent-hover); transform: scale(1.06); }
.exm-play .exm-icon { width: 20px; height: 20px; }
.exm-dl {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	color: var(--exm-muted); text-decoration: none; transition: color .15s, background .15s;
}
.exm-dl:hover { color: var(--exm-accent); background: var(--exm-raised); }
.exm-dl .exm-icon { width: 20px; height: 20px; }

/* ---------- Filters ---------- */
.exm-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.exm-search {
	display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; padding: 0 16px; min-height: 48px;
	border-radius: 999px; background: var(--exm-surface); border: 1px solid var(--exm-line); color: var(--exm-muted);
}
.exm-search:focus-within { border-color: var(--exm-accent); }
.exm .exm-search input[type="search"] {
	flex: 1; height: auto; border-radius: 0; -webkit-appearance: none; appearance: none; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--exm-text);
	font: inherit; font-size: 15px; padding: 12px 0; box-shadow: none; border: 0 !important; background: transparent !important; outline: 0 !important;
}
.exm-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.exm-chips::-webkit-scrollbar { display: none; }
.exm-chip {
	text-transform: none; letter-spacing: normal; box-shadow: none;
	flex: 0 0 auto; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--exm-line);
	background: var(--exm-raised); color: var(--exm-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.exm-chip:hover { border-color: var(--exm-muted); }
.exm-chip.is-active { background: var(--exm-accent); border-color: var(--exm-accent); color: var(--exm-on-accent); }
.exm-chips--small .exm-chip { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.exm-libhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.exm-libhead__count { color: var(--exm-muted); font-size: 14px; }

/* ---------- Song rows ---------- */
.exm-list { list-style: none; margin: 0; padding: 0; }
.exm-row { position: relative; }
.exm-list .exm-row {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
	padding: 8px; border-radius: var(--exm-radius); transition: background .15s;
}
.exm-list .exm-row:hover, .exm-list .exm-row.is-current { background: var(--exm-raised); }
.exm-row__num { display: none; }
.exm-row__art { position: relative; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--exm-surface); }
.exm-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exm-play--overlay {
	position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
	background: rgba(0, 0, 0, .45); color: #fff; opacity: 0;
}
.exm-play--overlay:hover { background: rgba(0, 0, 0, .55); transform: none; }
.exm-row:hover .exm-play--overlay, .exm-row.is-current .exm-play--overlay, .exm-play--overlay:focus-visible { opacity: 1; }
@media (hover: none) { .exm-play--overlay { opacity: 1; background: rgba(0, 0, 0, .3); } }
.exm-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.exm-row__title {
	color: var(--exm-heading); font-weight: 600; font-size: 15px; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exm-row__title:hover { color: var(--exm-accent); }
.exm-row.is-current .exm-row__title { color: var(--exm-accent); }
.exm-row__meta { color: var(--exm-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exm-row__dur, .exm-row__count { color: var(--exm-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.exm-row__count { display: none; }
.exm-row__actions { display: flex; align-items: center; }

.exm-list--numbered .exm-row__num { display: none; }
@media (min-width: 700px) {
	.exm-list .exm-row { grid-template-columns: 56px minmax(0, 1fr) auto auto auto; gap: 16px; padding: 8px 12px; }
	.exm-list .exm-row:has(.exm-row__count) { grid-template-columns: 56px minmax(0, 1fr) auto auto auto; }
	.exm-row__count { display: inline; }
	.exm-list--numbered .exm-row { grid-template-columns: 28px 56px minmax(0, 1fr) auto auto; }
	.exm-list--numbered .exm-row__num { display: block; color: var(--exm-muted); text-align: right; font-variant-numeric: tabular-nums; }
}
.exm-list--compact .exm-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 6px; }
.exm-list--compact .exm-row__art { width: 48px; height: 48px; }
.exm-list--compact .exm-row__dur, .exm-list--compact .exm-row__count, .exm-list--compact .exm-row__num { display: none; }

/* ---------- Song cards ---------- */
.exm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 700px) { .exm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .exm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.exm-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--exm-surface); transition: background .2s; }
.exm-card:hover, .exm-card.is-current { background: color-mix(in srgb, var(--exm-surface) 80%, var(--exm-text) 8%); }
.exm-card__art { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.exm-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.exm-card:hover .exm-card__art img { transform: scale(1.04); }
.exm-play--fab {
	position: absolute; right: 10px; bottom: 10px; width: 48px; height: 48px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateY(8px);
}
.exm-card:hover .exm-play--fab, .exm-card.is-current .exm-play--fab, .exm-play--fab:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .exm-play--fab { opacity: 1; transform: none; } }
.exm-card__title {
	color: var(--exm-heading); font-weight: 600; font-size: 15px; text-decoration: none; margin-top: 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exm-card.is-current .exm-card__title, .exm-card__title:hover { color: var(--exm-accent); }
.exm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; }
.exm-card__meta { color: var(--exm-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Playlist cards ---------- */
.exm-playlists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 700px) { .exm-playlists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.exm-pl { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.exm-pl__art { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); margin-bottom: 8px; }
.exm-pl__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.exm-pl__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); }
.exm-pl:hover .exm-pl__art img { transform: scale(1.05); }
.exm-pl__play {
	position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%; background: var(--exm-accent); color: var(--exm-on-accent);
	opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.exm-pl:hover .exm-pl__play { opacity: 1; transform: none; }
@media (hover: none) { .exm-pl__play { opacity: 1; transform: none; } }
.exm-pl__name { color: var(--exm-heading); font-weight: 600; font-size: 16px; }
.exm-pl:hover .exm-pl__name { color: var(--exm-accent); }
.exm-pl__count { color: var(--exm-muted); font-size: 13px; }

/* ---------- Spotlight ---------- */
.exm-spot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 20px; border-radius: 16px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--exm-accent) 16%, var(--exm-surface)), var(--exm-surface) 60%);
	border: 1px solid var(--exm-line);
}
.exm-spot__art { width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); margin: 0 auto; }
.exm-spot__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exm-spot__body { flex: 1 1 320px; min-width: 0; }
.exm-spot__title { font-size: 30px; line-height: 1.15; margin: 8px 0 6px; }
.exm-spot__title a { color: var(--exm-heading); text-decoration: none; }
.exm-spot__title a:hover { color: var(--exm-accent); }
.exm-spot__meta { color: var(--exm-muted); margin: 0; font-size: 14px; }
.exm-spot__about { margin: 14px 0 0; max-width: 560px; color: var(--exm-text); line-height: 1.65; }
@media (min-width: 800px) { .exm-spot { padding: 32px; gap: 40px; flex-wrap: nowrap; } .exm-spot__art { margin: 0; flex: 0 0 300px; } .exm-spot__title { font-size: 40px; } }

/* ---------- Song / playlist page hero ---------- */
.exm-single { color: var(--exm-text); }
.exm-hero { position: relative; overflow: hidden; padding: 32px 0 36px; isolation: isolate; }
.exm-hero::before {
	content: ""; position: absolute; inset: -60px; z-index: -2; background-image: var(--exm-backdrop);
	background-size: cover; background-position: center; filter: blur(60px) saturate(1.3); opacity: .55; transform: scale(1.1);
}
.exm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--exm-bg) 35%, transparent), var(--exm-bg)); }
.exm-hero__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.exm-hero__art { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); margin: 0 auto; }
.exm-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exm-hero__body { flex: 1 1 320px; min-width: 0; }
.exm-hero__title { font-size: 34px; line-height: 1.1; margin: 8px 0 10px; color: var(--exm-heading); overflow-wrap: anywhere; }
.exm-hero__desc { margin: 0 0 10px; max-width: 620px; line-height: 1.6; }
.exm-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--exm-muted); font-size: 14px; }
.exm-hero__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 14px; vertical-align: middle; opacity: .6; }
.exm-hero__meta a { color: var(--exm-text); text-decoration: none; }
.exm-hero__meta a:hover { color: var(--exm-accent); }
.exm-hero__scripture { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--exm-raised); font-size: 14px; }
.exm-hero__scripture .exm-icon { width: 16px; height: 16px; color: var(--exm-accent); }
.exm-hero__counts { color: var(--exm-muted); font-size: 13px; margin: 14px 0 0; }
@media (min-width: 800px) {
	.exm-hero { padding: 48px 0 44px; }
	.exm-hero__inner { flex-wrap: nowrap; gap: 40px; }
	.exm-hero__art { margin: 0; flex: 0 0 260px; }
	.exm-hero__title { font-size: 44px; }
}

.exm-single__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 24px; padding-bottom: 56px; }
@media (min-width: 960px) { .exm-single__body { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } }
.exm-about { margin-bottom: 36px; }
.exm-about p { font-size: 17px; line-height: 1.7; margin: 0; max-width: 680px; }
.exm-lyrics__tag { margin: 26px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--exm-accent); }
.exm-lyrics__tag:first-of-type { margin-top: 0; }
.exm-lyrics__stanza { margin: 0 0 6px; font-size: 18px; line-height: 1.75; color: var(--exm-heading); }
.exm-single__side { align-self: start; padding: 16px; border-radius: 14px; background: var(--exm-surface); border: 1px solid var(--exm-line); }
@media (min-width: 960px) { .exm-single__side { position: sticky; top: 100px; } }
.exm-more-link { display: inline-block; margin-top: 12px; color: var(--exm-accent); font-weight: 600; text-decoration: none; }
.exm-playlist-page__list { padding-top: 16px; padding-bottom: 40px; }
.exm-playlist-page__more { padding-bottom: 56px; }

/* ---------- Sticky player ---------- */
body.exm-player-site.exm-player-open { padding-bottom: var(--exm-player-h); }
.exm-player {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; color: var(--exm-text);
	background: color-mix(in srgb, var(--exm-surface) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border-top: 1px solid var(--exm-line); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.exm-player__progress { position: absolute; left: 0; right: 0; top: -7px; height: 14px; }
.exm-player__progress input { position: absolute; inset: 0; width: 100%; margin: 0; cursor: pointer; }
.exm-player__inner { display: flex; align-items: center; gap: 12px; height: var(--exm-player-h); max-width: 1180px; margin: 0 auto; padding: 0 12px; }
.exm-player__now { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit; }
.exm-player__now img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex: 0 0 48px; }
.exm-player__text { display: flex; flex-direction: column; min-width: 0; }
.exm-player__title { font-weight: 600; font-size: 14px; color: var(--exm-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exm-player__artist { font-size: 12px; color: var(--exm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exm-player__controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.exm-player__side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.exm-player .exm-player__time, .exm-player .exm-player__vol, .exm-player .exm-ctl--vol { display: none; }
.exm-ctl {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--exm-text); cursor: pointer; text-decoration: none; transition: color .15s, background .15s;
}
.exm-ctl:hover { color: var(--exm-accent); background: var(--exm-raised); }
.exm-ctl .exm-icon { width: 20px; height: 20px; }
.exm-ctl--main { width: 46px; height: 46px; background: var(--exm-accent); color: var(--exm-on-accent); }
.exm-ctl--main:hover { background: var(--exm-accent-hover); color: var(--exm-on-accent); }
.exm-ctl--main .exm-icon { width: 22px; height: 22px; }
.exm-ctl--vol .exm-icon--mute { display: none; }
.exm-player.is-muted .exm-ctl--vol .exm-icon--volume { display: none; }
.exm-player.is-muted .exm-ctl--vol .exm-icon--mute { display: block; }
.exm-player [data-exm-prev] { display: none; }
@media (max-width: 480px) { .exm-player [data-exm-close] { display: none; } }
@media (min-width: 700px) {
	.exm-player__inner { padding: 0 20px; gap: 20px; }
	.exm-player__now { flex: 1 1 0; }
	.exm-player__controls { gap: 8px; }
	.exm-player__side { flex: 1 1 0; justify-content: flex-end; }
	.exm-player [data-exm-prev] { display: inline-flex; }
	.exm-player .exm-player__time { display: inline; font-size: 12px; color: var(--exm-muted); font-variant-numeric: tabular-nums; margin-right: 8px; white-space: nowrap; }
}
@media (min-width: 1000px) { .exm-player .exm-ctl--vol { display: inline-flex; } .exm-player .exm-player__vol { display: block; width: 90px; } }

/* Range inputs: thin gold track */
.exm input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 14px; }
.exm input[type="range"]::-webkit-slider-runnable-track {
	height: 3px; border-radius: 3px;
	background: linear-gradient(to right, var(--exm-accent) var(--exm-fill, 0%), color-mix(in srgb, var(--exm-text) 18%, transparent) var(--exm-fill, 0%));
}
.exm input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--exm-text) 18%, transparent); }
.exm input[type="range"]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--exm-accent); }
.exm input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--exm-heading); border: 0; opacity: 0; transition: opacity .15s; }
.exm input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--exm-heading); border: 0; }
.exm input[type="range"]:hover::-webkit-slider-thumb, .exm input[type="range"]:focus-visible::-webkit-slider-thumb { opacity: 1; }

.exm-toast {
	position: fixed; left: 50%; bottom: calc(var(--exm-player-h) + 20px); transform: translateX(-50%); z-index: 9999;
	padding: 10px 18px; border-radius: 999px; background: var(--exm-heading); color: var(--exm-bg); font-size: 14px; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.exm *, .exm *::before, .exm *::after { transition: none !important; }
}